一、运算符1、赋值运算符对变量进行赋值的运算符、、-、*、/、%例script let num 1 num 1 console.log(num) //2 /script2、自增运算符2.1一元运算符只有一个操作符号、--前置自增let num 1 num //2后置自增let num 1 num //2区别前置先自加再使用后置先使用再自加开发时一般单独使用后置用的较多2.2比较运算符、、、、左右两边值是否相等、左右两边类型和值是否都相等、!左右两边是否不全等比较运算符结果为boolean类型false or true以后判断是否相等用console.log(2 2) //true console.log(2 2) //false console.log(NaN NaN) //false console.log(undefined null) //false对比赋值 判断 全等2.3逻辑运算符逻辑运算符用来判断多重条件判断 逻辑与 一假则假|| 逻辑或 一真则真逻辑非 取反2.4运算符优先级二、语句表达式因为表达式可以被求值所以写在赋值语句的右侧num34语句而语句不一定有值所以比如alert for等语句就不能被赋值1、分支语句选择性执行想要的代码if语句、三元运算符、switch语句if单分支语法if条件{ 满足条件要执行的代码 }if双分支语法if条件{ 满足条件要执行的代码 }else { 满足条件要执行的代码 }多分支语法:if条件1{ 满足条件要执行的代码 }else if条件2{ 满足条件要执行的代码 }else if条件3{ 满足条件要执行的代码 }else { 满足条件要执行的代码 } 例子 script let score prompt(请输入成绩) if (score 90) { alert(${score}优秀) } else if (score 60) { alert(${score}及格) } else { alert(${score}不及格) } /script三元运算符条件满足执行代码:不满足执行代码switch语句:switch (数据) { case 值1: 代码1 break case 值2: 代码2 break default: 代码n break }2、循环语句while循环while(循环条件) { 要重复执行的代码循环体 }三要素变量起始值终止条件变量变化量自增or自减例输出1~100个数script let i 1 while (i 100) { document.write(${i}br) i; } /script例输出1~100偶数和let i 1 let sum 0 while (i 100) { if (i % 2 0) { sum i } i } document.write(sum)break和continuebreak 退出整个循环continue 结束本次循环继续下次循环let i 1 while (i 100) { if (i 50) { break //退出循环 } document.write(${i}br) i; }let i 1 while (i 100) { if (i 50) { i; continue //结束本次循环 } document.write(${i}br) i; }for循环for(变量值;终止条件;变量变化量){ 循环体 }例for (let i 1; i 3; i) { document.write(月薪过万br) }for和while区别1. 明确循环次数用for不明确循环次数用while2.for一般可以嵌套使用三、断点调试检查F12——Sources——单击某行语句选择代码——刷新四、数组//声明数组 //1.字面量声明数组 let 数组名[数据1,数据2,……,数据n] //2.使用new Array构造函数声明 let arrnew Array(数据1,数据2,……,数据n) //取值语法 arr[下标】数组按顺序保存每个数据都有编号在数组中数据的编号也叫下标或索引数组可以储存任意类型的数据例求数组[2,6,1,7,4]里面所有元素的和以及平均值script let arr [2, 6, 1, 7, 4] let sum 0; for (let i 0; i arr.length - 1; i) { sum arr[i]; } document.write(数组的和为${sum}br) document.write(数组的平均值为${sum / (arr.length - 1)}) /script数组——修改重新赋值一次let arr [ni, wo, ta] console.log(arr[0]) //ni //修改 arr[0] 你 console.log(arr[0]) //你数组——新增利用push()将一个或多个元素添加到末尾利用unshift()将一个或多个元素添加到开头//语法 arr.push(元素1,元素2……,元素n) //例: let arr[red,blue] arr.push(green) console.log(arr) //返回数组长度 console.log(arr.push(green))数组——删除利用pop()删除末尾元素利用shift()删除开头元素splice()删除指定元素//语法 arrr.pop() arr.shift() //例 let arr [red, blue, green] //删除 arr.pop()//删除末尾 arr.shift()//删除开头 console.log(arr)//blue //console.log(arr.pop())//告诉删除了哪个元素 green//语法 arr.splice(start,seleteCount) arr.splice(起始位置,删除几个元素) //例: let arr [red, blue, green] arr.splice(1, 1)//从下标第1个开始删删一个 console.log(arr)练习1根据数据生成柱形图!DOCTYPE html html langzh-CN head meta charsetUTF-8 meta nameviewport contentwidthdevice-width, initial-scale1.0 title根据数据生成柱形图/title style * { margin: 0; padding: 0; } .box { display: flex; width: 700px; height: 300px; border-left: 1px solid pink; border-bottom: 1px solid pink; margin: 50px auto; justify-content: space-around; align-items: flex-end; text-align: center; } .boxdiv { display: flex; width: 50px; background-color: pink; flex-direction: column; justify-content: space-between; } .box div span { margin-top: -20px; } .box div h4 { margin-bottom: -35px; width: 70px; margin-left: -10px; } /style /head body script //1.四次弹窗效果 let arr [] for (let i 1; i 4; i) { let num prompt(请输入第${i}季度的数据) arr.push(num) } //盒子开头 document.write(div classbox) //盒子中间利用循环形式 for (let i 0; i arr.length; i) { document.write( div styleheight: ${arr[i]}px; span${arr[i]}/span h4第${i 1}季度/h4 /div ) } //盒子结尾 document.write(/div) /script /body /html练习2排序练习冒泡排序一种简单的排序算法。重复走访过要排序的序列一次比较两个元素如果他们顺序错误就把他们交换过来直到没有再需要交换排序完成。!DOCTYPE html html langzh-CN head meta charsetUTF-8 meta nameviewport contentwidthdevice-width, initial-scale1.0 titleDocument/title /head body script let arr [1, 2, 3, 4, 5] for (let i 0; i arr.length - 1; i) { for (let j 0; j arr.length - i - 1; j) { if (arr[j] arr[j 1]) { let temp arr[j] arr[j] arr[j 1] arr[j 1] temp } } } document.write(arr) console.log(arr) /script /body /html数组.sort()也可以排序语法let arr [1, 3, 2, 4, 5] // sort()排序 // return 返回正值交换a-b0或b-a0返回负值不交换 // 升序 arr.sort(function (a, b) { return a - b //1,2,3,4,5 }) // 降序 arr.sort(function (a, b) { return b - a }) //5,4,3,2,1 document.write(arr) console.log(arr)持续更新中ing~~
一、运算符1、赋值运算符对变量进行赋值的运算符、、-、*、/、%例script let num 1 num 1 console.log(num) //2 /script2、自增运算符2.1一元运算符只有一个操作符号、--前置自增let num 1 num //2后置自增let num 1 num //2区别前置先自加再使用后置先使用再自加开发时一般单独使用后置用的较多2.2比较运算符、、、、左右两边值是否相等、左右两边类型和值是否都相等、!左右两边是否不全等比较运算符结果为boolean类型false or true以后判断是否相等用console.log(2 2) //true console.log(2 2) //false console.log(NaN NaN) //false console.log(undefined null) //false对比赋值 判断 全等2.3逻辑运算符逻辑运算符用来判断多重条件判断 逻辑与 一假则假|| 逻辑或 一真则真逻辑非 取反2.4运算符优先级二、语句表达式因为表达式可以被求值所以写在赋值语句的右侧num34语句而语句不一定有值所以比如alert for等语句就不能被赋值1、分支语句选择性执行想要的代码if语句、三元运算符、switch语句if单分支语法if条件{ 满足条件要执行的代码 }if双分支语法if条件{ 满足条件要执行的代码 }else { 满足条件要执行的代码 }多分支语法:if条件1{ 满足条件要执行的代码 }else if条件2{ 满足条件要执行的代码 }else if条件3{ 满足条件要执行的代码 }else { 满足条件要执行的代码 } 例子 script let score prompt(请输入成绩) if (score 90) { alert(${score}优秀) } else if (score 60) { alert(${score}及格) } else { alert(${score}不及格) } /script三元运算符条件满足执行代码:不满足执行代码switch语句:switch (数据) { case 值1: 代码1 break case 值2: 代码2 break default: 代码n break }2、循环语句while循环while(循环条件) { 要重复执行的代码循环体 }三要素变量起始值终止条件变量变化量自增or自减例输出1~100个数script let i 1 while (i 100) { document.write(${i}br) i; } /script例输出1~100偶数和let i 1 let sum 0 while (i 100) { if (i % 2 0) { sum i } i } document.write(sum)break和continuebreak 退出整个循环continue 结束本次循环继续下次循环let i 1 while (i 100) { if (i 50) { break //退出循环 } document.write(${i}br) i; }let i 1 while (i 100) { if (i 50) { i; continue //结束本次循环 } document.write(${i}br) i; }for循环for(变量值;终止条件;变量变化量){ 循环体 }例for (let i 1; i 3; i) { document.write(月薪过万br) }for和while区别1. 明确循环次数用for不明确循环次数用while2.for一般可以嵌套使用三、断点调试检查F12——Sources——单击某行语句选择代码——刷新四、数组//声明数组 //1.字面量声明数组 let 数组名[数据1,数据2,……,数据n] //2.使用new Array构造函数声明 let arrnew Array(数据1,数据2,……,数据n) //取值语法 arr[下标】数组按顺序保存每个数据都有编号在数组中数据的编号也叫下标或索引数组可以储存任意类型的数据例求数组[2,6,1,7,4]里面所有元素的和以及平均值script let arr [2, 6, 1, 7, 4] let sum 0; for (let i 0; i arr.length - 1; i) { sum arr[i]; } document.write(数组的和为${sum}br) document.write(数组的平均值为${sum / (arr.length - 1)}) /script数组——修改重新赋值一次let arr [ni, wo, ta] console.log(arr[0]) //ni //修改 arr[0] 你 console.log(arr[0]) //你数组——新增利用push()将一个或多个元素添加到末尾利用unshift()将一个或多个元素添加到开头//语法 arr.push(元素1,元素2……,元素n) //例: let arr[red,blue] arr.push(green) console.log(arr) //返回数组长度 console.log(arr.push(green))数组——删除利用pop()删除末尾元素利用shift()删除开头元素splice()删除指定元素//语法 arrr.pop() arr.shift() //例 let arr [red, blue, green] //删除 arr.pop()//删除末尾 arr.shift()//删除开头 console.log(arr)//blue //console.log(arr.pop())//告诉删除了哪个元素 green//语法 arr.splice(start,seleteCount) arr.splice(起始位置,删除几个元素) //例: let arr [red, blue, green] arr.splice(1, 1)//从下标第1个开始删删一个 console.log(arr)练习1根据数据生成柱形图!DOCTYPE html html langzh-CN head meta charsetUTF-8 meta nameviewport contentwidthdevice-width, initial-scale1.0 title根据数据生成柱形图/title style * { margin: 0; padding: 0; } .box { display: flex; width: 700px; height: 300px; border-left: 1px solid pink; border-bottom: 1px solid pink; margin: 50px auto; justify-content: space-around; align-items: flex-end; text-align: center; } .boxdiv { display: flex; width: 50px; background-color: pink; flex-direction: column; justify-content: space-between; } .box div span { margin-top: -20px; } .box div h4 { margin-bottom: -35px; width: 70px; margin-left: -10px; } /style /head body script //1.四次弹窗效果 let arr [] for (let i 1; i 4; i) { let num prompt(请输入第${i}季度的数据) arr.push(num) } //盒子开头 document.write(div classbox) //盒子中间利用循环形式 for (let i 0; i arr.length; i) { document.write( div styleheight: ${arr[i]}px; span${arr[i]}/span h4第${i 1}季度/h4 /div ) } //盒子结尾 document.write(/div) /script /body /html练习2排序练习冒泡排序一种简单的排序算法。重复走访过要排序的序列一次比较两个元素如果他们顺序错误就把他们交换过来直到没有再需要交换排序完成。!DOCTYPE html html langzh-CN head meta charsetUTF-8 meta nameviewport contentwidthdevice-width, initial-scale1.0 titleDocument/title /head body script let arr [1, 2, 3, 4, 5] for (let i 0; i arr.length - 1; i) { for (let j 0; j arr.length - i - 1; j) { if (arr[j] arr[j 1]) { let temp arr[j] arr[j] arr[j 1] arr[j 1] temp } } } document.write(arr) console.log(arr) /script /body /html数组.sort()也可以排序语法let arr [1, 3, 2, 4, 5] // sort()排序 // return 返回正值交换a-b0或b-a0返回负值不交换 // 升序 arr.sort(function (a, b) { return a - b //1,2,3,4,5 }) // 降序 arr.sort(function (a, b) { return b - a }) //5,4,3,2,1 document.write(arr) console.log(arr)持续更新中ing~~
