企业官网建设流程全解析

一、运算符

1、赋值运算符

对变量进行赋值的运算符

=、+=、-=、*=、/=、%=

例：

<script> let num = 1 num += 1 console.log(num) //2 </script>

2、自增运算符

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运算符优先级

二、语句

表达式：因为表达式可以被求值，所以写在赋值语句的右侧

num=3+4

语句：而语句不一定有值，所以比如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和continue

break 退出整个循环

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

不明确循环次数用while

2.for一般可以嵌套使用

三、断点调试

检查（F12）——Sources——单击某行语句（选择代码）——刷新

四、数组

//声明数组 //1.字面量声明数组 let 数组名=[数据1,数据2,……,数据n] //2.使用new Array构造函数声明 let arr=new 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 lang="zh-CN"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.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; } .box>div { 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 class="box">`) //盒子中间利用循环形式 for (let i = 0; i < arr.length; i++) { document.write(` <div style="height: ${arr[i]}px;"> <span>${arr[i]}</span> <h4>第${i + 1}季度</h4> </div> `) } //盒子结尾 document.write(`</div>`) </script> </body> </html>

练习2：排序练习

冒泡排序，一种简单的排序算法。重复走访过要排序的序列，一次比较两个元素，如果他们顺序错误就把他们交换过来，直到没有再需要交换，排序完成。

<!DOCTYPE html> <html lang="zh-CN"> <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, 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-b>0或b-a>0，返回负值不交换 // 升序 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~~