web前端 第五天总结
案例1：js初体验
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <button>点击我变成粉色</button> <script> const btn = document.querySelector('button') btn.addEventListener('click', () => { btn.style.backgroundColor = 'pink' }) </script> </body> </html>
案例2：js的引入方式
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <script> // 内部 // prompt('请输入您的年龄：') </script> <!-- 外部 --> <script src="./03-外部js.js"> </script> </body> </html>
外部js
prompt('年龄：')
案例3：输入输出语句
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <script> // 输入语句 // prompt('请输入您的密码：') // 打印到页面 document.write('你们真是小天才') // 可以识别标签 document.write('<strong>你们真是小天才</strong>') // 控制台输出语句 console.log('我现在要在控制台输出') </script> </body> </html>
案例4：变量
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <script> // 变量：盒子----存储数据的容器 数据本身不是变量 // 变量的声明： // let 变量名 var 变量名 // let age // // 变量赋值 // age = prompt('请输入您的年龄：') // age = 33 // console.log(age) // 变量的初始化 // let uname = prompt('请输入您的用户名：') // console.log(uname) // 同时定义多个变量 // let uname = 'zs', age = 21 // console.log(uname, age) let age = prompt('请输入年龄：') document.write(age) </script> </body> </html>
案例5：变量命名规范
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <script> // 变量命名规范:1、有效符号（大小写字母、数字、下划线、$） // 2、关键字、保留字不能用于变量命名 // 3、不以数字开头 // 4、尽量用有意义的变量名 // 5、驼峰命名法 userName </script> </body> </html>
案例6：let和var的区别
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <script> // var 可以多次声明同一变量 console.log(age) // var age let age </script> </body> </html>
案例7：const常量
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <script> // 常量名大写 常量无法更改 const PI = 3.14 // PI = 4.456 console.log(PI) </script> </body> </html>
案例8：数据类型
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <script> // js是弱数据类型语言 只有赋值之后，才知道是什么数据类型 let uname = 21 uname = 'gouxin' console.log(typeof (uname)) </script> </body> </html>
案例9：基本数据类型--数字类型
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <script> let a = 21.21312 let b = 33 console.log(a) console.log(a + 2) console.log(a + b) console.log(a - b) console.log(a * b) console.log(a / b) console.log(a % 2) </script> </body> </html>
案例10：字符串类型
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <script> // let uname1 = 'nnnsns' // console.log(typeof (uname1)) // let uname2 = "nnnsns" // console.log(typeof (uname2)) // let uname3 = "nnn'gouxin'sns" // console.log(typeof (uname3)) // let uname4 = 'nnn"gouxin"sns' // console.log(typeof (uname4)) // 字符串拼接用+ let a = +prompt("请输入num1") let b = +prompt("请输入num2") // alert 警示框 alert(a + b) // 模板字符串 // let uname = prompt("请输入名字：") // let age = prompt("请输入年龄：") // document.write('你叫' + uname + ',今年' + age + '岁了') // document.write(`<strong>你叫${uname},今年${age}岁了</strong>`) </script> </body> </html>
案例11：布尔类型
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <script> console.log(typeof (3 < 5)) // undefinded 声明，未赋值 // null NaN not a number console.log(undefined + 1) console.log(null + 1) </script> </body> </html>
案例12：显示转换
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <script> let a = +prompt('num1') let b = +prompt('num2') console.log(Number(a) + Number(b)) console.log(typeof (+a)) let c = '200.9875px' console.log(parseInt(c)) console.log(parseFloat(c)) </script> </body> </html>
案例13：综合案例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> h2 { text-align: center; } table { /* 合并相邻边框 */ border-collapse: collapse; height: 80px; margin: 0 auto; text-align: center; } th { padding: 5px 30px; } table, th, td { border: 1px solid #000; } </style> </head> <body> <h2>订单确认</h2> <script> let price = +prompt('请输入单价：') let num = +prompt('请输入购买数量：') let address = prompt('请输入收货地址：') document.write(` <table> <thead> <tr> <th> 商品名称 </th> <th> 商品价格 </th> <th> 商品数量 </th> <th> 总价 </th> <th> 收货地址 </th> </tr> </thead> <tr> <td>小米</td> <td>${price}</td> <td>${num}</td> <td>${price * num}</td> <td>${address}</td> </tr> </table> `) </script> </body> </html>
案例14：运算符
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <script> // = 赋值运算符 // let a = 21 // a = 33 // a += 4 // a = a + 4 // a *= 2 //a = a * 2 74 //a -= 3 //a = a - 3 // a /= 2 //a = a / 2 35.5 // alert(a) // let b = a++ //先赋值，再自增 // alert(b) // alert(a) //36.5 // b = ++a //先自增，再赋值 // alert(b) // 比较运算符 // > < >= <= == === let num1 = 2 let num2 = '2' alert(num1 == num2) alert(num1 === num2) // == （隐式转换）只比较数值，将字符串转换为数字类型后进行比较 === 即比较数值，也比较类型 </script> </body> </html>
案例15：逻辑运算符
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <script> // && || ! // alert(4 > 3 && 3 < 5) //两真为真，一假则假 // alert(4 < 3 || 3 < 5) //一真则真 全假则假 // alert(!true) alert(!(4 < 3)) </script> </body> </html>
案例16：单分支语句
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <script> let age = 11 // if(条件){ // 执行的代码 // } if (age < 18) { document.write('你是小弟弟，不要乱跑') } </script> </body> </html>
案例17：双分支语句
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <script> let age = +prompt('请输入您的年龄：') if (age <= 18) { alert('你不要乱跑') } else { alert('恭喜你，成年了') } </script> </body> </html>
案例18：判断闰年
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <script> // year % 4 === 0 && year % 100 !== 0 || year % 400 === 0 let year = +prompt('请输入年份：') if (year % 4 === 0 && year % 100 !== 0 || year % 400 === 0) { alert('闰年') } else { alert('平年') } </script> </body> </html>
案例19：多分支语句
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <script> let age = +prompt('age：') if (age < 18) { alert('你是未成年 学习吧') } else if (age <= 25) { alert('青春年华') } else if (age <= 40) { alert('好汉不提当年勇') } else { alert('男人四十一枝花') } </script> </body> </html>
案例20：三元运算符
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <script> let age = +prompt('请输入您的年龄：') // if (age <= 18) { // alert('你不要乱跑') // } else { // alert('恭喜你，成年了') // } // 判断条件？条件成立时执行的语句：条件不成立时执行的语句 age <= 18 ? alert('你不要乱跑') : alert('恭喜你，成年了') </script> </body> </html>
案例21：求最大值
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <script> let a = +prompt('请输入num1：') let b = +prompt('请输入num2：') a > b ? alert(`最大值是：${a}`) : alert(`最大值是：${b}`) </script> </body> </html>
案例22：数字补零
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <script> // alert(2 < '3') let a = prompt('num') a >= 10 ? alert(a) : alert(0 + a) </script> </body> </html>
案例23：switch
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <script> let num = +prompt('请输入今天星期几了：') switch (num) { case 1: alert('星期一') break case 2: alert('星期二了') break case 3: alert('星期三了') break case 4: alert('星期四了') break case 5: alert('星期五了') break case 6: alert('周末了') break case 7: alert('周末了') break default: alert('你是外星人吗') } </script> </body> </html>
案例24：while循环
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <script> // while 一定要有终止条件 let i = 10 // while (i > 11) { // console.log('你是大聪明') // i-- // } do { console.log('你是大聪明') i-- } while (i > 11) </script> </body> </html>
案例25：while练习（1-100累加和）
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <script> // 1~100累加和 let i = 0 let sum = 0 while (i < 101) { sum += i i++ } alert(sum) </script> </body> </html>
案例26：for循环
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <script> for (let i = 1; i <= 10; i++) { document.write(`你真是个大聪明<br>`) } // </script> </body> </html>
案例27：嵌套循环
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> span { display: inline-block; margin: 15px; } </style> </head> <body> <script> for (let i = 1; i < 8; i++) { console.log(`今天是第${i}天`) for (let j = 1; j < 11; j++) { console.log(`这是今天第${j}朵玫瑰花`) } } for (let i = 1; i < 10; i++) { for (let j = 1; j <= i; j++) { document.write(`<span>${j}*${i}=${i * j}</span>`); } document.write(`<br/>`) } for (let i = 1; i < 6; i++) { for (let j = 1; j <= i; j++) { document.write(`*`) } document.write(`<br/>`) } </script> </body> </html>
案例28：continue与break
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <script> for (let i = 1; i < 100; i++) { if (i === 50) { // break continue } console.log(i) } // break:跳出循环 // continue：跳出本次循环 </script> </body> </html>
案例29：循环加强
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <script> let arr = [1, 2, 3, 66, 4, 5] // for in // for (let i in arr) { // console.log(arr[i]) // } // for of for (let k of arr) { console.log(k) } </script> </body> </html>
案例30：数组
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <script> // let name1 = '俊杰' // 有序的数据序列 // 0 1 2 3 4 5 let arr = ['gouxin', 'huangzhong', 'jialuo', 'zhadanren', 12, true] // 数组的声明方式 // arr[索引下标] alert(arr[5]) // let arr2 = new Array() // 数组遍历 // for (let i in arr) { // console.log(arr[i]) // } // 数组的操作 // 通过索引下标给对应元素重新赋值 arr[1] = 'guanyu' console.log(arr instanceof Array) let arr2 = [1, 2, 3, 4] // concat合并数组 arr3 = arr.concat(arr2) console.log(arr3) // 增 push 在数组末尾添加 arr.push('姜加') // unshift 在数组首部添加元素 arr.unshift('jiangjia') arr.shift() arr.pop() // splice(删除的起始位置，删除的个数) arr.splice(3, 1) // splice(删除的起始位置，0,要添加的元素) arr.splice(3, 0, 'jiangjia') console.log(arr) console.log(arr.join(' **')) console.log(arr.reverse()) console.log(arr.slice(3)) </script> </body> </html>
案例31：二维数组
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <script> let student = [['jiangjia', 31, 'sing'], ['xuchao', 21, 'dance']] // console.log(student[1][0]) for (let i in student) { for (let j in student[i]) { console.log(student[i][j]) } } // student.length 获取数组长度的 </script> </body> </html>
【推荐】国内首个AI IDE，深度理解中文开发场景，立即下载体验Trae
【推荐】编程新体验，更懂你的AI，立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包，你的智能百科全书，全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell：AI 加持，快人一步
· 分享一个免费、快速、无限量使用的满血 DeepSeek R1 模型，支持深度思考和联网搜索！
· 基于 Docker 搭建 FRP 内网穿透开源项目（很简单哒）
· ollama系列01：轻松3步本地部署deepseek，普通电脑可用
· 按钮权限的设计及实现
· 25岁的心里话