关于前端:前端那些事五JS2

学习视频：https://www.bilibili.com/video/BV1YW411T7GX?p=16

参考文章：https://juejin.im/post/6844904160719011848#heading-39

1. js根本简介

后期为了解决网页中前端验证，优化体验，将验证放在客户端。

1. 组成部分：

• 以JavaScript+JScript=>ECMAScript（ES外围）为规范文档，由浏览器厂商实现JS引擎
• DOM 文本对象模型： 如何通过js操作网页
• BOM浏览器对象模型：如何通过js操作浏览器

1. JS特点：

• 解释性语言，无需编译
• 相似C和JAVA的语法结构
• 动静语言
• 基于原型的面向对象

1. 字面量和变量

• 字面量（常量）：是不可扭转的值
• 变量：用于保留字面量，能够扭转值。
• 申明变量：应用var来申明一个变量，var a; 为变量赋值，b=123;
• undefined：var a; 申明了一个变量，然而没有赋值。

1. var let const的区别

2. var：申明变量
3. let：ES6新增的命令，也用于申明变量
4. const：

• 一旦申明必须赋值,不能应用null占位。
• 申明后不能再批改
• 如果申明的是复合类型数据，能够批改其属性

var（ES5）

let（ES6）

const（ES6）

变量晋升

不存在变量晋升

申明变量是全局的

仅在块级作用域内无效

能够反复申明

不能在同一块作用域内反复申明

let能够改属性

const不能改属性

参考： https://www.cnblogs.com/zhaoxiaoying/p/9031890.html

1. 标识符

自主命名的都能够叫标识符（变量名，函数名，属性名）。

命名规定：

• 能够含字母，数字，_，$
• 不能以数字结尾
• 不能是ES的关键字，保留字
• 驼峰命名

JS底层保留标识符时理论采纳的Unicode(UTF-8)编码，所有的UTF-8都能够作为标识符。

1. 数据类型（字面量的类型）

1. String类型：字符串，对称引号引起来。

转义字符：罕用" ' n

1. Number类型：数值（Int整数和Float浮点数）

• JS中能够表白的最大值用Number.MAX_VALUE，超过最大值Infinity（正无穷），最小值-Infinity（负无穷），typeof返回number，示意大于0的最小值用MIN_VALUE。
• typeof类型检测：能够应用运算符typeof来查看一个变量的类型： typeof 变量
• NaN：一个非凡数字，Not a number，typeof NaN 返回number
• isNaN：判断b的值是否是NaN，所以能够用isNaN()函数来判断一个值是否是NaN

var b = NaN;

console.log(isNaN(b)); // 返回true

• JS进行整数根本能够保障准确，计算浮点元素可能不准确，比方（0.1+0.2），计算钱的数字放在服务器计算。

1. Boolean类型：布尔值（true/false），次要用来做逻辑判断。
2. Null：空值，未开拓空间。

• typeof null：返回object，机器码空指针，低三位000，也是js遗留的bug

1. Undefined：开拓空间未赋值

• typeof undefined：返回undefined

1. Object：对象，援用数据类型，属于一种复合的数据类型，在对象中能够保留不同类型数据的属性。

• 有余：根本数据类型都是繁多的值，值之间没有关系。
• 根本类型贮存在栈中，对象贮存在堆中，

1. 强制类型转换

将一个数据类型强制转换成其余的数据类型

1. 将其余类型转换成String类型

• 办法一：调用被转换类型的toString()办法；
• 该办法不会影响到原变量，它会将转换的后果返回。
• 毛病：有局限性，null和undefined没有toString()办法。
• 举例：var a = 123; //number a = a.toString(); //返回string类型“123”
• 办法二：调用String()函数，并将被转换的函数作为参数传递给函数；
• 与toString()办法的区别：String()函数会将null和undefined间接转换成字符串"null"和"undefined"
• 举例：var b = 123; //number b = String(b); //返回string类型“123”
• 办法三（隐式类型）：任何字符的值和字符串做加法运算，都会先转为字符串，而后做拼串，所以能够给字符加上空字符串做拼串。
• 举例：var c = 123; //number c = c + ""; //返回string类型“123”

1. 将其余类型转换成Number类型

• 办法一：调用Number()函数；
• 毛病：有局限性，"123px"字符串无奈转换。

• 办法二：作用于字符串；
• parseInt()函数和parseFloat()函数；
• 举例：var b = "456px"; //string b = parseInt(b); //返回Number类型“456”
• 如果对非String类型应用parseInt()函数，会将其先转为String后再操作。
• 举例：var c = true //boolean

c = parseInt(c) =parseInt("true")=NaN; //返回Number类型NaN

• 办法三（隐式类型）：能够对一个其余数据类型应用 +，将其转换number，原理和Number()函数一样。
• 举例：var a = "123"; //string a = +a; //返回number类型123

var b = true; //boolean b = +b; //返回number类型1

1. 将其余类型转换成Boolean类型

• 办法一：调用Boolean()函数；

除了undefined、null、false、''、0、NaN转换时false，其余都为true

• 办法二（隐式类型）：能够为任意类型进行两次非运算，即可转为布尔值。同Boolean函数()。
• 举例：var a = "123"; //string a = !!a; //返回boolean类型true

对象类型转换： 默认调用{}的valueOf

1. 运算符（也叫操作符）

能够对一个或多个值进行运算，并获取运算后果，都会返回后果，比方typeof就是运算符，能够来取得一个值的类型，它会将该值的数型以字符串的模式返回，number，。string，Boolean，undefined，object。

1. 算数运算符

• +：会拼串
• • ：都会转成number
• • ：
• / :
• %: 求模运算，取余数。

区别：任何值做- /运算时都会将值转换成number，能够利用这个特点做隐式的类型转换，-0 /1 1将其转换为number，原理和Number()函数一样，应用起来更简略。

1. result = true + 1； // 返回2 ，对非number计算时，会将值先转为number再计算
2. result = true + false；// 返回1
3. result = 2 + NaN； // 返回NaN，任何数和NaN进行计算，都等于NaN
4. result = "123"+"456" // 返回123456，两个字符串相加，会做拼串，长字符串能够采纳这种形式做拼串。
5. result = "123" + 2 // 返回1232，
6. result = true + "123" // 返回true123，任何字符的值和字符串做运算，都会将其先转为字符串，再做拼串

7. 一元运算符

• ：不会对数字产生影响
• ：负号对数字进行取反，对非number值会将其转为number再计算，

（隐式类型转换）：能够对一个其余数据类型应用+，将其转换number，原理和Number()函数一样。

自增和自减：

• 自增：在本身的根底上减少1，对于一个变量自增当前，原变量值会立刻自增1，自增分为2种：后++（a++）和前++（++a），都会使原变量自增1。

区别：a++和++a的值不同，a++先赋值后运算，++a先运算后赋值。

旧值：a++等于原变量的值（自增前的值）

新值：++a的值等于新值（自增后的值）

• 自减：自减分为2种：后--（a--）和前--（--a），都会使原变量自减1。

1. 逻辑运算符

• ! 非：取反

1. 对布尔值进行取反；
2. 对非布尔值取反，先转为布尔值再运算

var a = true; a = !a //返回false

var b = 10; b=!b //返回false

1. （隐式类型转换）：能够为任意类型进行两次非运算，即可转为布尔值。同Boolean函数()

var a = 10; a=!!a //返回true

• && 与：两端都是true，则返回true，只有有一个false，则返回false。

js中的“与”属于短路的“与”，如果第一个值为false，则不会看第2个值。

result = false && true; // false

逻辑“与”和短路“与”

• || 或：只有有一个true，则返回true。
• && 和 || 非布尔值的状况

对于非布尔值进行与或运算时，则会将其转换为布尔值，而后再运算，并且返回原值。

var result = 1 && 2 //返回2 如果两个值都为true，返回后边的

如果两个值中有false，则返回靠前的false。

1. 赋值运算符

• = ：能够将符号右侧的值赋值给符号左侧的值
• +=： a+=5 等价 a = a+5
• -=： a-=5 等价 a = a-5
• =： a=5 等价 a = a*5
• /=： a/=5 等价 a = a/5
• %=： a%=5 等价 a = a%5

1. 关系运算符

通过关系运算符能够比拟两个值之间的大小关系，如果关系成立会返回true，如果关系不成立则返回false。

• 大于号：判断符号左侧的值是否大于右侧的，如果关系成立返回true。

• = 大于等于

• < 小于
• <= 小于等于
• 非数值状况：对非数值进行比拟时，会将其转换为数字再进行比拟。
• 任何值和NaN做任何比拟都是false。

console.log(10 <= "hello"); //false

• 如果符号两侧的值都是字符串时，不会将其转换为数字比拟，而会比拟字符串中字符的Unicode编码，比拟字符编码时时一位一位进行比拟，比拟字符串的时候要进行转型，能够对英文进行排序。

console.log("11" < "5"); //true

console.log("a" < "b"); //true

• 在字符串中应用转义字符输出Unicode编码： u四位编码 （这里编码十六进制）
• 在网页中应用Unicode编码：编码；（这里编码是十进制）

1. 相等运算符

应用相等运算符用来比拟两个值是否相等，相等返回true。

• == 相等：应用==比拟两个值时，如果类型不同，则会主动进行类型转换，而后再进行比拟，大部分时候转成number进行比拟。

console.log(true == "1"); //true 转成number

• undefined衍生自null，所以这两个值做相等判断时，会返回true。

console.log(undefined == null); //返回true

• NaN不和任何值相等，包含他自身，所以用isNaN()

console.log(NaN == NaN); // 返回false

• 判断b的值是否是NaN，所以能够用isNaN()函数来判断一个值是否是NaN

var b = NaN;

console.log(isNaN(b)); // 返回true

• !=不相等：用来判断两个值是否不相等，不相等也会对变量进行类型转换。
• ===全等：判断两个值是否全等，不会做类型转换。
• !==不全等：用来判断两个值是否不全等，不会做主动类型转换。

1. 条件运算符（三元运算符）

语法：条件表达式?语句1:语句2；

条件运算符在执行时，首先对条件表达式进行求值，

如果该值为true，则执行语句1，并返回执行后果

如果该值为false，则执行语句2，并返回执行后果

false?alert("语句1"):alert("语句2")： // 语句2

1. ，运算符

, 运算符 ：应用，能够宰割多个语句，申明多个变量

var a = 1, b =2 , c= 3;

1. 运算符的优先级

• 运算符优先级表：（如果优先级雷同，从左往右算。）

能够通过加（）扭转优先级。

• 先乘除后加减
• &&的优先级大于||

var result = 1 || 2 && 3 //返回

• 如果||的优先级高，或者两个一样高，则应该返回3
• 如果与的优先级高，则应该返回1

1. 语句 代码块

语句是由上自下的程序一条条执行，在js中能够应用{}来为语句进行分组。

同一个{}中的语句咱们称为一组语句，要么都执行，要么都不执行。

一个{}中的语句咱们也称为一个代码块，在代码块前面不必再编写；了。

js在的代码块只具备分组的作用，代码块的内容在内部都是齐全可见的

1. 流程管制语句：

通过流程管制语句能够管制执行流程，

语句的分类：

1. 条件判断语句 （if语句）
2. 条件分支语句 （switch语句）
3. 循环语句

4. 条件判断语句 if...else...

if语句：if语句在执行时，会先对条件表达式进行求值判断，如果表达式值为true，则执行if后的语句，if语句只能管制紧随其后的那个语句。

语法一：if语句

if(条件表达式) {

语句

}

语法二：if...else...语句

if(条件表达式) {

语句...

} else {

语句...

}

语法三： if...else if... else 语句

if(条件表达式) {

语句...

} else if(条件表达式){

语句...

} else if {

语句...

}

prompt()函数：能够弹出带文本框的提示框，用户输出的内容将会作为函数返回值返回，能够定义一个变量，返回值类型是string。

冒泡排序：

1. 条件分支语句 switch...case...

switch语句：

执行流程：switch...case...语句在执行时会顺次将case后的表达式的值和switch后的条件表达式的值进行全等比拟，如果比拟后果为true，则从以后case处进行执行代码，以后擦色后的代码都会执行，所以要加break，确保只执行以后case语句。

语法：

switch(条件表达式) {

case 表达式:

语句...

break;

default : // 同else

语句...

break;

}

1. 循环语句 while/do...while.../if

2. while循环：

执行流程：while语句在执行时，先对条件表达式进行求职判断，如果值为true，则执行循环体，值为true，则持续循环，以此类推，如果值为false，则终止循环。

语法： while(条件表达式) {

语句... //{}里的循环体

}

像这种条件表达式写死为true的循环叫死循环，除非浏览器敞开，死循环在开发中慎用，能够应用break来终止循环。

while(true) {

语句... //{}里的循环体

if(n == 10){

break; // 退出循环

}

}

创立一个循环须要三个步骤：

• 1. 初始化一个变量 var i = 0;
• 1. 在循环中设置一个条件表达式

while(i < 10){

alert(i);

//3. 定义一个更新表达式，每次更新初始化变量

i++;

}

1. do... while... 循环

区别： do...while先执行后判断。while是先判断后执行。do...while能够保障循环体至多执行一次，while不能，日常中while用的更多。

语法： do {

语句... //{}里的循环体

} while (条件表达式)

1. for 循环：

语法： for (①初始化表达式；②条件表达式；④更新表达式) {

③语句... //{}里的循环体

}

执行程序：①②③④ ②③④ ②③④

1. for、forEach 、for in、for of 循环的区别

相同点：都能够遍历数组；

区别：

1. for：毛病：不能间接遍历对象。
2. forEach()：毛病：不能间接遍历对象，循环不能跳出。
3. for...in：长处：能够间接遍历对象，毛病：耗费性能；保留的是键名，返回 0 1 2 3
4. for...of【最优】：可遍历array,object,string,map,set等，能够跳出循环；保留的是键值，返回 arr1 arr2 arr3

毛病：不适用于解决原有的原生对象。

10.31-问题汇总

参考： https://blog.csdn.net/wjx666666/article/details/104940660

1. break和continue

break：

• break能够用来退出switch或循环语句，不能在if语句中应用break和continue
• break默认只对离他最近的循环产生影响。
• 能够为循环语句创立一个label，来标识以后的循环，break后加上label名称即可完结指定的循环，而不是默认的。

continue：

• continue跳过当次循环，然而持续前面的循环。
• continue默认只对离他最近的循环产生影响。

区别：

• break终止整个循环（跳过整个循环）；
• continue用来跳过当次循环（只跳过一次）；

长处：

优化性能，能够应用计时器console.time("test")和console.timeEnd("test")；检测耗时。

质数练习题优化：

1. 对象（援用数据类型）

根本数据类型的毛病：值和值之间没有任何分割。

对象：复合数据类型，在对象中能够保留多个不同数据类型的属性。（容器）

长处：关系明确，操作不便。

对象的分类：

1. 内建对象

由ES规范中定义的对象，在任何的ES的实现中都能够应用

比方：Math String Number Boolean Function Object ...

1. 宿主对象

由JS的运行环境提供的对象，目前次要指浏览器提供的对象。

比方：BOM DOM

比方：console.log(); document.write();

1. 自定义对象

创建对象：应用new关键字调用的函数，是构造函数constructor，构造函数是专门用来创建对象的函数，赋值给obj。

应用typeof查看对象时返回object。

属性值：js对象的属性值，能够是任意的数据类型。

in运算符：通过该运算符能够检测一个对象中是否含有指定的属性。

语法："属性名" in 对象

console.log("name" in obj) //返回true或false

1. 根本数据类型和援用数据类型的区别：

• js的变量都是保留在栈内存中的，根本类型的值间接在栈内存中存储，值与值之间是独立存在的，批改一个变量不会影响其余的变量
• 对象贮存在堆内存中，每创立一个新的对象，就会在堆内存中开拓一个新的空间，二变量保留的是对象的内存地址（对象的地址），如果两个变量保留的是同一个对象援用，当一个通过一个变量批改属性时，另一个也会受到影响。
• 根本数据类型保留的是值，对象保留的是地址。
• 当比拟两个根本数据类型的值时，就是比拟两个值。
• 而比拟两个援用类型时，它是比拟两个对象的内存地址，就算两个对象是截然不同的，然而地址不同，他也会返回false。

1. 对象字面量

• 用构造函数创立一个对象：

var obj = new Object();

• 用对象字面量来创立一个对象，实质雷同。

var obj = {};

语法：{属性名：属性值，属性名：属性值...}

属性名的双引号可加可不加，如果应用一些非凡名称必须加引号。

属性名和属性值是一组组的名值对构造，名和值之间应用：连贯，多个名值对之间用，隔开，如果一个属性之后没有其余属性，就不要写逗号。

1. 函数

函数也是一个对象，函数中能够封装一些性能（代码），在须要时能够执行这些性能。

用typeof检测一个函数对象是，会返回function。

1. 创立函数

2. 应用构造函数来创立一个函数对象（根本不必）

创立一个函数对象，能够将要封装的函数以字符串的模式传递给构造函数，咱们在理论开发中很少应用构造函数来创立一个函数对象

var fun = new Function ("string");

1. 应用 函数申明 来创立一个函数

• 封装到函数中的代码不会立刻执行
• 函数中的代码会在函数调用时执行
• 调用函数语法: 函数对象()
• 当调用函数时，函数中封装的代码会依照程序执行

语法： function 函数名([形参1,形参2,形参3]){

语句...

}

1. 应用 函数表达式 来创立函数

语法：var 函数名 = function (形参1,形参2,形参3) {

语句...

}

1. 函数的参数（形参和实参）

定义一个用来求和的函数，能够在函数中的（）中来指定一个或多个形参（形式参数），申明形参就相当于在函数外部申明了对应的变量，然而并不赋值。

调用函数时解析器不会查看实参类型，也不会查看实参数量，多余实参不会被复制，少于实参数量时，没有对应实参的形参将是undefined。

1. 函数的返回值 return

• return语法： return 值
• return后的语句都不会执行，如果return后不跟值，返回undefined，不写return，也会返回undefined
• 函数也能够是对象，将匿名函数做为实参传递给函数：
• 返回值和函数对象：
• // getArea() 调用函数 相当于应用的函数的返回值
• // getArea 函数对象 相当于间接应用函数对象

1. brack、continue和return的区别

2. 立刻执行函数

立刻执行函数只会执行一次。

只调用一次，用（）扩起来一个匿名函数标识他是一个整体，函数对象（）；

1. 办法

• 对象的属性值能够是任何数据类型，也能够是函数
• 函数作为对象的属性时，咱们称这个函数是这个对象的办法

1. 枚举对象中的属性 for...in遍历

• 对象中有几个属性，循环体就执行几次
• 执行时会将对象的属性名赋值给变量

1. 全局作用域/函数作用域

作用域指一个变量作用的范畴

1. 全局作用域：

• 间接写在script标签的都在全局作用域 。
• 在页面关上时创立，在页面敞开时销毁。
• 在全局作用域中有一个全局对象window，由浏览器创立，能够间接应用，创立的变量都会作为window对象的属性保留【var window.a = 10; window.alert(); 】；

1. 变量晋升

参考：https://www.w3school.com.cn/js/js_hoisting.asp

应用var关键字申明的变量，会在所有代码执行之前被申明，不必var时不会被申明提前。

1. 函数晋升

• 函数晋升：function 函数(){}，最先被创立，能够提前
• 函数表达式不晋升：不能在申明前调用

2. 函数（部分）作用域：

• 调用函数时创立函数作用域，函数执行完后作用域销毁。
• 每调用一次创立一个新函数作用域，他们之间是相互独立的。
• 部分能够拜访到全局的变量，全局不能拜访局部变量。
• 部分会先在本身作用域寻找变量，就近准则。

1. debug

2. this

含意：解析器在调用函数时，每次都会向函数外部传递一个隐含的参数，这个隐含的参数就是this，this是浏览器传进来的参数，this指向的是一个对象，这个对象咱们称为函数执行的上下文对象。

• 一般函数中 this 的指向，是 this 执行时的上下文
• 箭头函数中 this 的指向，是 this 定义时的上下文

1. ES5三种函数调用形式：

• fun(a,b);
• obj.child.method(a,b);
• fun.call(context,a,b); //指向context，默认undefined（指向window），

1. this的5种绑定

2. 默认绑定(非严格模式下this指向全局对象, 严格模式下this会绑定到undefined)
3. 隐式绑定(当函数援用有上下文对象时, 如 obj.foo()的调用形式, foo内的this指向obj)
4. 显示绑定(通过call()或者apply()办法间接指定this的绑定对象, 如foo.call(obj))
5. new绑定
6. 箭头函数绑定(this的指向由外层作用域决定的)

参考：

https://zhuanlan.zhihu.com/p/23804247

https://www.w3school.com.cn/js/js_this.asp

1. 创建对象

2. 应用工厂模式创建对象

3. 应用构造函数创建对象

构造函数：

• 创立一个构造函数，用来创立Person对象，首字母大写
• 和一般函数的区别：一般函数间接调用，构造函数须要应用new关键字调用
• 执行流程：

1. 创立一个新对象
2. 将新建的对象设置为函数中的this，在构造函数中实体this援用新对象
3. 逐行执行函数中的代码
4. 将新建对象作为返回值返回

5. 原型对象

6. 原型对象prototype

原型对象：prototype

隐含属性：__proto__

• 当函数以构造函数的模式调用时，它所创立的实例对象都会有一个隐含的属性__proto__，指向该构造函数的原型对象，通过__proto__拜访该属性；
• 原型对象相当于一个公共区域，同一个类的实例都能够拜访到这个原型，咱们能够将对象公共内容对立设置到原型对象中；
• 咱们拜访对象的一个属性或办法时，会先在本身找， 本身没有则拜访原型对象；
• 长处：不会净化全局作用域

1. 向原型对象中增加办法

实例：

1. 查看属性in和hasOwnProperty

2. 原型的toString()办法

3. 原型链

原型链是利用原型，让一个援用类型继承另一个 援用类型的属性和办法。

实例的contructor = 构造函数

1. 垃圾回收（GC）

垃圾回收：

• 当一个对象没有任何的变量或属性对它援用，咱们无奈操作该对象。
• js具备主动垃圾回收机制，会主动将垃圾对象从内存中销毁。
• 咱们将不再应用的对象设置为null即可。

1. 数组Array

2. 数组简介

• 数组也是一个对象，与一般对象性能相似，作用存值。
• arr[index]：数组[索引]，索引从0开始。

• arr.length：数组.length能够获取数组的长度（元素的个数）。

  • 向数组最初一个地位增加元素：arr[arr.length] = 70; // 数组[数组.length] = 值

1. 数组的常见办法（2）

2. 数组遍历

3. for循环遍历

实例：将年纪满18的提取进去

1. forEach()遍历

回调函数： forEach()办法须要一个函数作为参数，像这种函数，由咱们创立但不禁咱们调用的称为回调函数。

毛病：不兼容IE8及以下

1. slice()

slice(开始地位索引，完结地位索引)：slice从第a个截到第b个

1. splice()

• splice(开始地位索引，删除的数量，传递新元素) : splice从第a个删除b个;
• splice还能够再增加元素

1. splice数组去重

2. call() 和 apply()

雷同：

• 都会调用函数执行
• call()和apply()能够将一个对象指定为第一个参数
• 此时这个对象将会成为函数执行时的this，参数是谁this就是谁
• 能够批改上下文对象this

不同：

• call()能够将实参在对象之后顺次传递
• apply()须要将实参封装到一个数组中对立传递

this:

1. 以函数的模式调用，this指向window
2. 以办法的模式调用，this是调用办法的对象
3. 以构造函数的模式调用，this是新创建的对象
4. 以call和apply调用，this是指定的对象

5. arguments【类数组对象】

在调用函数时，浏览器每次都会传递进两个隐含的参数：

1. 函数的上下文对象this
2. 封装实参的对象arguments

• arguments是一个类数组对象，也能够通过索引来操作数组

1. Date【工夫】

获取工夫和获取工夫戳：

1. Math【数学运算】

参考：https://www.w3school.com.cn/js/js_math.asp

Math：属于工具类，封装了数学运算相干的属性和办法

1. 包装类

包装类：能够长期将根本数据类型转为对象，浏览器底层本人用的

1. 字符串相干办法

参考： https://www.w3school.com.cn/js/js_string_methods.asp

1. 检索字符串
2. 截取字符串
3. 转为大小写

4. DOM(文档对象模型)

• Document Object Model：文档对象模型，用来操作网页的

• Node：节点，形成网络的任何局部都是一个节点，类型不同。

  • 文档节点：<html></html>
  • 元素节点：<p></p>
  • 属性节点：id="box"
  • 文本节点：文字~

• 获取元素节点：

  • getElementById()：通过id获取一个元素节点对象
  • getElementsByTagName()：通过标签名获取一组元素节点对象
  • getElementsByName()：通过name属性获取一组元素节点对象，表单罕用
• 事件：用户和浏览器的交互行为，比方点击按钮、鼠标挪动、敞开按钮；所有的操作都属于事件，处理事件：

Dom事件： https://www.w3school.com.cn/js/js_htmldom_events.asp

1. 文档的加载 window.onload

2. dom查问的其余办法

3. dom增删改

dom办法： https://www.w3school.com.cn/htmldom/dom_methods.asp

增删改demo1:

增删改demo2：

1. 批改class

2. json

前端html写的 后端java写的

obj = {} : js对象 只有js意识

须要将js对象传给服务器 转为json

将json转为字符串 任何语言都意识

json的作用：交互传递数据，字符串，使不同语言都能够应用

json属性名必须加双引号。其余和js统一

json分类：

1. 对象： json对象

2. 数组： json数组

json只容许传递： 字符串，数值，布尔，null，一般对象，数组

键值对

json数组：保留多个json对象。

须要将字符串转为js对象

数据交换格局 轻量级数据格式

- JSON.parse()：将json转为js对象

- JSON.stringify()：将js对象转为json

IE7 JSON

兼容IE7以下，eval()：能够用来执行一段字符串模式的js代码，并将返回，性能差不倡议应用。

1. 事件冒泡

2. 事件冒泡（Bubble）

事件冒泡指事件的向上传导，当后辈元素上的事件被触发时，其先人元素的雷同事件也会被触发。

勾销冒泡：将事件对象的cancelBubble设置为true。

1. 事件委派

2. js报错整顿

https://blog.csdn.net/weixin_39843414/article/details/109108391

1. Error：根本谬误类型，个别是程序员抛出的异样

1. SyntaxError ：语法错误，解析谬误

1. TypeError ：类型谬误

1. ReferenceError ：援用谬误

1. RangeError ：边界谬误

1. URIError：url谬误
2. 自定义异样