前端基础03：JavaScript

一、什么是JavaScript

1. 概述

JavaScript是一门世界上最流行的脚本语言。
一个合格的后端人员，必须要精通JavaScript。

2. 历史

https://blog.csdn.net/kese7952/article/details/79357868
ECMAScript可以理解为是JavaScript的一个标准。

二、快速入门

1. 引入JavaScript

内部样式

<script>alert('hello, world!');
</script>

外部样式
abc.js

alert('hello, world!');

test.html

<script src="abc.js"></script>

测试代码

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><!--    <script>-->
<!--        alert('hello, world!')-->
<!--    </script>--><!--script标签必须成对出现--><script src="js/abc.js"></script><!--不用显示定义类型也默认是javascript-->
<!--    <script type="text/javascript"></script>--></head>
<body><!--这里也可以存放script标签-->
</body>
</html>

2. 基本语法

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><!--JavaScript严格区分大小写！--><script>// 1.定义变量：     变量类型  变量名  =  变量值;var score = 71;// alert(score);// console.log(score)  在浏览器的控制台打印变量，相当于System.out.print();// 2. 条件控制if (score > 60 && score < 70) {alert("60~70");}else if (score > 70 && score < 80){alert("70~80");}else {alert("other");}</script></head>
<body></body>
</html>

3. 数据类型

数值，文本，图形，音频，视频…

变量

var 王者荣耀 = "倔强青铜";

number

js不区分小数和整数

123 // 整数123
123.1 // 浮点数
1.123e2 // 科学计数法
-99 // 负数
NaN // not a number
Infinity // 无穷

字符串

'abc'
"abc"
"\n"

布尔值

true
false

逻辑运算

&& //与 两个都为真，结果为真|| //或 一个为真，结果为真! //非 真及假，假及真

比较运算符 (重要)

一般使用 === 比较。
NaN 与所有的数值都不相等，包括自己，只能通过 isNaN(a) 来判断a是否是NaN。

= // 赋值
== // 等于 (类型不一样，值一样时结果为true)
=== // 绝对等于 (类型和值都一样时结果为true)

浮点数问题

尽量避免使用浮点数进行运算，存在精度问题。

console.log((1/3) === (1-2/3)); // falseMath.abs(1/3 - (1-2/3)) < 0.000000001; // true 如果这两个数相减的绝对值小于0.000000001，可以看作相等。

null 和 undefined

null：空
undefined：未定义

数组

Java中的数组：相同类型的对象
js中的数组：可以是不同类型的对象

//定义数组方法一：推荐使用，保证代码的可读性
var arr = [1,2,3,4,5,'hello',null,true]//定义数组方法二：
new Array(1,2,3,4,5,'world')

对象

对象是大括号，数组是中括号
每个属性之间使用逗号隔开

var person = {name: "qinjiang",age: 3,tags: ['js', 'java', 'web', '...']
}
//取值
person.name // "qinjiang"
person.age // 3

4. 严格检查模式

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><!--前提：IDEA 需要设置ES6语法'use strict';严格检查模式，预防JavaScript的随意性导致的一些问题。必须写在JavaScript的第一行。--><script>'use strict';//局部变量建议都使用 let 去定义。let i = 1;</script></head>
<body></body>
</html>

三、数据类型

1. 字符串

正常字符串使用单引号''、双引号""包裹。
特殊字符使用转义符号\。

多行字符串

//反单引号  tab键上方
var msg = `helloworld你好`;

模板字符串

let name = "qinjiang";
let age = 3;let msg = `hello, ${name}, ${age} years old.`;

字符串长度

var student = "student";
console.log(student.length) // 7

字符串不可变

var student = "student";
console.log(student[0]); // s
student[0] = 1;
console.log(student) // student  赋值失败

大小写转换

var student = "student";
console.log(student.toUpperCase()) // STUDENT

substring 截取字符串左闭右开

var student = "student";
console.log(student.substring(1)); // tudent
console.log(student.substring(1, 3)); // tu

其他方法

student.indexOf();
student.charAt();
... // 和Java相同

2. 数组

数组：存储数据 (主要掌握如何存、如何取即可)

Array可以包含任意的数据类型。

var arr = [1, 2, 3, 4, 5, 6]; // 通过下表取值和赋值
arr[0]; //取值
arr[0] = 0; // 赋值

长度

console.log(arr.length);

注意：如果给 arr.length 赋值，数组大小就会发生变化。

扩大数组

arr.length = 10;
console.log(arr); // [1, 2, 3, 4, 5, 6, empty*4]

缩小数组

arr.length = 2;
console.log(arr); // [1, 2]

indexOf()，通过元素获得下标索引
```
arr.indexof(2); // 1
```
- 字符串的 “1” 和数字 1 是不同的。
slice()，截取Array的一部分，返回一个新的数组。
- 类似于String中的substring()。
```
arr.slice(3) // [4, 5, 6]
arr.slice(1, 5) // [2, 3, 4, 5]
```

push()，pop()

arr // [1, 2, 3, 4, 5, 6]
arr.push('a', 'b') // 8  压入到数组尾部，并返回数组长度
arr // [1, 2, 3, 4, 5, 6, 'a', 'b']
arr.pop() // "b"  弹出尾部的一个元素，并返回弹出的元素
arr // [1, 2, 3, 4, 5, 6, 'a']

unshift()，shift()

arr // [1, 2, 3, 4, 5]
arr.unshift('a', 'b'); // 8
arr // ['a', 'b', 1, 2, 3, 4, 5, 6]
arr.shift(); // ‘a'
arr // ['b', 1, 2, 3, 4, 5, 6]

排序

arr = ["B", "C", "A"];
arr.sort(); // ["A", "B", "C"]

元素反转

arr // ["A", "B", "C"]
arr.reverse(); // ["C", "B", "A"]

数组拼接
- concat() 并没有修改数组，只是返回一个新的数组。
```
arr // [1, 2, 3]
arr.concat(['a', 'b'])
arr // [1, 2, 3, 'a', 'b']
```
连接符 join
- 打印数组，并使用特定的字符串连接。
```
arr // ["A", "B", "C"]
arr.join('-') // "A-B-C"
```

多维数组

arr = [[1, 2], [3, 4], ["5", "6"]]
arr[1][1] // 4

其他方法

arr // [1, 2, 3]
arr.fill(6) // [6, 6, 6]  数组填充，将数组全部填充为对应的元素

3. 对象

由若干个键值对组成。
js中，{…} 表示一个对象，键值对描述属性 xxxx: xxxx，多个属性之间使用逗号隔开，最后一个属性不加逗号。
JavaScript 中的所有键都是字符串，值是任意对象。

var 对象名 = {属性名: 属性值,属性名: 属性值,属性名: 属性值
}//定义了一个person对象，它拥有4个属性。
var person = {name: "kuangshen",age: 3,email: "12345@qq.com",score: 0
}

对象赋值

person.name = "qinjiang";
person.name; // "qinjiang"

调用一个不存在的对象属性不会报错。
```
person.haha; // undefined
```
动态的删减属性 (delete)
```
delete person.name // true
```
动态的添加属性 (直接给新的属性添加值即可)
```
person.haha = "haha"; // "haha"
```
判断属性值是否在这个对象中，包含继承的父类属性 (xxx in xxx)
```
‘age' in person; // true
'toString' in person; // true
```

判断一个属性是否是这个对象自身拥有的 (hasOwnProperty())

person.hasOwnProperty('age'); // true
person.hasOwnProperty('toString'); // false

4. 流程控制

if 判断

let age = 3;
if (age > 3) { // 第一个判断alert("haha");
}else if (age > 0) { // 第二个判断alert("wuwu");
}else { // 否则alert("...");
}

循环

while 循环 (避免死循环)

let age = 3;
while (age < 100) {age++;console.log(age);
}do {age++;console.log(age);
}while (age < 100)

for 循环

for (let i = 0; i < 100; i++) {console.log(i)
}

遍历数组 (for in、for of)

let age = [1, 33, 41, 3, 25, 6, 1, 52, 7];
for (let num in age) {console.log(age[num]); // num: 下标
}for (let num of age) {console.log(num); // num: 具体的值
}

forEach 循环 (ES5.1引入的)

let age = [1, 33, 41, 3, 25, 6, 1, 52, 7];
// 函数
age.forEach(function (i) {console.log(i)
})

5. Map 和 Set

ES6 的新特性

Map

let map = new Map([['tom', 100], ['jack', 90], ['marry', 80]]);
map.set('bob', 88); // 新增一个元素，key和value
map.delete('tom') // 删除一个元素
let name = map.get('bob'); // 通过key获得value
console.log(name); // 88// 遍历 Map
for (let i of map) {console.log(i);
}

Set：无序不重复的集合

let set = new Set([1, 5, 5, 1, 3, 3, 2]); // set中元素不重复，可以用于去重
set.add(6); // 添加一个元素
set.delete(1); // 删除一个元素
console.log(set.has(5)) // 判断set中是否包含某个元素// 遍历 Set
for (let i of set) {console.log(i);
}

四、函数

对象 = 属性 + 方法
函数在对象中叫做方法，在外面叫做函数。

1. 定义函数

Java 中的定义函数

public 返回值类型 方法名(){return 返回值;
}

JavaScript 中定义一个绝对值函数

定义方式一
```
function abs(x){if (x>0) {return x;}else {return -x;}
}
```
- 执行到 return 代表函数结束，并返回结果。
- 如果没有执行 return，函数执行完也会返回结果，结果是 NaN 或 undefined。
定义方式二
```
let abs = function(x) {if (x>0) {return x;}else {return -x;}
}
```
- function(x){…} 是一个匿名函数，但是可以把结果赋值给 abs，通过abs 就可以调用函数。
- 方式一和方式二等价。

调用函数

abs(10) // 10
abs(-10) // 10
abs() // NaN
abs(10, 1, 5, 17) // 10

参数问题：JavaScript 可以传任意个参数，也可以不传递参数。

可以手动抛出异常来判断。

let abs = function(x) {if (typeof x != 'number') {throw 'Not a Number';}if (x>0) {return x;}else {return -x;}
}

arguments

arguments 是一个JavaScript 免费赠送的关键字。

代表传递进来的所有参数，是一个数组。

let abs = function(x) {for (let i = 0; i < arguments.length; i++) {console.log(arguments[i]);} // 打印所有参数if (x>0) {return x;}else {return -x;}
}

rest

ES6 引入的新特性
- 获取除了已经定义的参数之外的所有参数。

rest 参数只能写在最后面，必须用 … 标识。

function aaa(a, b, ...rest) {console.log(a);console.log(b);console.log(rest);
}

2. 变量的作用域

在JavaScript 中，let 定义变量实际是有作用域的。

如果在函数体中声明，则在函数体外不可以使用。(学习闭包前)

function a() {let x = 1;x = x + 1;
}x = x + 2; // Uncaught ReferenceError: x is not defined

如果两个函数使用了相同的变量名，只要在函数内部使用就不冲突。
```
function a() {let x = 1;x = x + 1;
}
function b() {let x = 1;x = x + 1;
}
```

内部函数可以访问外部函数的变量，但外部函数不能访问内部函数的变量。

function a() {let x = 1;function b() {let y = x + 1; // 2}let z = y + 1; // Uncaught ReferenceError: y is not defined
}

在JavaScript 中，函数查找变量从自身函数开始，由内向外查找。

function a() {let x = 1;function b() {let x = 'A';console.log(x); // A}b();console.log(x); // 1
}

变量提升

JavaScript的函数定义有个特点，它会先扫描整个函数体的语句，把所有申明的变量“提升”到函数顶部：
```
'use strict';function foo() {var x = 'Hello, ' + y;console.log(x);var y = 'Bob';
}foo();
```
虽然是 strict 模式，但语句 var x = 'Hello, ' + y; 并不报错，原因是变量 y 在稍后申明了。但是 console.log 显示 Hello, undefined，说明变量 y 的值为 undefined。这正是因为JavaScript引擎自动提升了变量 y 的声明，但不会提升变量 y 的赋值。

对于上述foo()函数，JavaScript引擎看到的代码相当于：

function foo() {var y; // 提升变量y的申明，此时y为undefinedvar x = 'Hello, ' + y;console.log(x);y = 'Bob';
}

由于JavaScript的这一怪异的“特性”，我们在函数内部定义变量时，请严格遵守“在函数内部首先申明所有变量”这一规则。最常见的做法是用一个var申明函数内部用到的所有变量：
```
function foo() {varx = 1, // x初始化为1y = x + 1, // y初始化为2z, i; // z和i为undefined// 其他语句:for (i=0; i<100; i++) {...}
}
```

全局作用域

不在任何函数内定义的变量就具有全局作用域。实际上，JavaScript默认有一个全局对象window，全局作用域的变量实际上被绑定到window的一个属性：
- 因此，直接访问全局变量course和访问window.course是完全一样的。
```
'use strict';var course = 'Learn JavaScript';
alert(course); // 'Learn JavaScript'
alert(window.course); // 'Learn JavaScript'
```
由于函数定义有两种方式，以变量方式 var foo = function () {} 定义的函数实际上也是一个全局变量，因此，顶层函数的定义也被视为一个全局变量，并绑定到window对象：
```
'use strict';function foo() {alert('foo');
}foo(); // 直接调用foo()
window.foo(); // 通过window.foo()调用
```

我们每次直接调用的alert()函数其实也是window的一个变量：

'use strict';window.alert('调用window.alert()');
// 把alert保存到另一个变量:
var old_alert = window.alert;
// 给alert赋一个新函数:
window.alert = function () {}
alert('无法用alert()显示了!');
// 恢复alert:
window.alert = old_alert;
alert('又可以用alert()了!');

这说明JavaScript实际上只有一个全局作用域。任何变量 (函数也视为变量)，如果没有在当前函数作用域中找到，就会继续往上查找，最后如果在全局作用域中也没有找到，则报ReferenceError错误。

名字空间

全局变量会绑定到window上，不同的JavaScript文件如果使用了相同的全局变量，或者定义了相同名字的顶层函数，都会造成命名冲突，并且很难被发现。

减少冲突的一个方法是把自己的所有变量和函数全部绑定到一个全局变量中。例如：

// 唯一的全局变量MYAPP:
var MYAPP = {};// 其他变量:
MYAPP.name = 'myapp';
MYAPP.version = 1.0;// 其他函数:
MYAPP.foo = function () {return 'foo';
};

把自己的代码全部放入唯一的名字空间MYAPP中，会大大减少全局变量冲突的可能。
许多著名的JavaScript库都是这么干的：jQuery，YUI，underscore等等。

局部作用域

由于JavaScript的变量作用域实际上是函数内部，我们在for循环等语句块中是无法定义具有局部作用域的变量的：
```
'use strict';function foo() {for (var i=0; i<100; i++) {console.log(i);}i += 100; // 仍然可以引用变量i
}
```
为了解决块级作用域，ES6引入了新的关键字let，用let替代var可以申明一个块级作用域的变量：
```
'use strict';function foo() {var sum = 0;for (let i=0; i<100; i++) {sum += i;}// 报错i += 1; // SyntaxError
}
```

常量 (const)

由于var和let申明的是变量，如果要申明一个常量，在ES6之前是不行的，我们通常用全部大写的变量来表示“这是一个常量，不要修改它的值”：
```
var PI = 3.14;
```

ES6标准引入了新的关键字const来定义常量，const与let都具有块级作用域：

'use strict';const PI = 3.14;
PI = 3; // 某些浏览器不报错，但是无效果！
PI; // 3.14
PI = 123; // 报错，TypeError: Assignment to constant variable.

3. 方法

在一个对象中绑定函数，称为这个对象的方法，和普通函数没有区别。
在JavaScript中，对象的定义是这样的：
```
var xiaoming = {name: '小明',birth: 1990
};
```

但是，如果我们给xiaoming绑定一个函数，就可以做更多的事情。比如，写个age()方法，返回xiaoming的年龄：

var xiaoming = {name: '小明',birth: 1990,age: function () {var y = new Date().getFullYear();return y - this.birth;}
};xiaoming.age; // function xiaoming.age()
xiaoming.age(); // 32

在一个方法内部，this是一个特殊变量，它始终指向当前对象，也就是xiaoming这个变量。所以，this.birth可以拿到xiaoming的birth属性。

拆开来写：

function getAge() {var y = new Date().getFullYear();return y - this.birth;
}var xiaoming = {name: '小明',birth: 1990,age: getAge
};xiaoming.age(); // 25, 正常结果
getAge(); // NaN

apply

要指定函数的this指向哪个对象，可以用函数本身的apply方法，它接收两个参数，第一个参数就是需要绑定的this变量，第二个参数是Array，表示函数本身的参数。

用apply修复getAge()调用：

function getAge() {var y = new Date().getFullYear();return y - this.birth;
}var xiaoming = {name: '小明',birth: 1990,age: getAge
};xiaoming.age(); // 25
getAge.apply(xiaoming, []); // 25, this指向xiaoming, 参数为空

五、标准对象

标准对象

typeof 123
"number"
typeof '123'
"string"
typeof true
"boolean"
typeof NaN
"number"
typeof []
"object"
typeof {}
"object"
typeof Math.abs
"function"
typeof undefined
"undefined"

1. Date

在JavaScript中，Date对象用来表示日期和时间。

要获取系统当前时间，用：

var now = new Date();
now; // Wed Jun 24 2015 19:49:22 GMT+0800 (CST)
now.getFullYear(); // 2015, 年份
now.getMonth(); // 5, 月份，注意月份范围是0~11，5表示六月
now.getDate(); // 24, 表示24号
now.getDay(); // 3, 表示星期三
now.getHours(); // 19, 24小时制
now.getMinutes(); // 49, 分钟
now.getSeconds(); // 22, 秒
now.getMilliseconds(); // 875, 毫秒数
now.getTime(); // 1435146562875, 以number形式表示的时间戳

JavaScript的Date对象月份值从0开始，牢记0=1月，1=2月，2=3月，……，11=12月。
当前时间是浏览器从本机操作系统获取的时间，所以不一定准确，因为用户可以把当前时间设定为任何值。

如果要创建一个指定日期和时间的Date对象，可以用：

var d = new Date(2015, 5, 19, 20, 15, 30, 123);
d; // Fri Jun 19 2015 20:15:30 GMT+0800 (CST)

时间格式转换：

var d = new Date(1668946698622) // 将时间戳转为时间
Sun Nov 20 2022 21:18:18 GMT+0900 (韩国标准时间)d.toLocaleString(); // 转换为本地时间
'2022/11/20 21:18:18'd.toGMTString(); // 转换为GMT时间
'Sun, 20 Nov 2022 12:18:18 GMT'

2. JSON

JSON是JavaScript Object Notation的缩写，它是一种轻量级的数据交换格式。
简洁和清晰的层次结构使得 JSON 成为理想的数据交换语言。
易于人们阅读和编写，同时也易于机器解析和生成，并有效地提升网络传输效率。
在JavaScript 中一切皆为对象，任何JavaScript 支持的类型都可以用 JSON 来表示。
把任何JavaScript对象变成JSON，就是把这个对象序列化成一个JSON格式的字符串，这样才能够通过网络传递给其他计算机。
如果我们收到一个JSON格式的字符串，只需要把它反序列化成一个JavaScript对象，就可以在JavaScript中直接使用这个对象了。
JSON还定死了字符集必须是UTF-8，表示多语言就没有问题了。为了统一解析，JSON的字符串规定必须用双引号""，Object的键也必须用双引号""。

序列化

把小明这个对象序列化成JSON格式的字符串：

'use strict';var xiaoming = {name: '小明',age: 14,gender: true,height: 1.65,grade: null,'middle-school': '\"W3C\" Middle School',skills: ['JavaScript', 'Java', 'Python', 'Lisp']var s = JSON.stringify(xiaoming);console.log(s); // {"name":"小明","age":14,"gender":true,"height":1.65,"grade":null,"middle-school":"\"W3C\" Middle School","skills":["JavaScript","Java","Python","Lisp"]}
};

要输出得好看一些，可以加上参数，按缩进输出：

JSON.stringify(xiaoming, null, '  ');//结果
{"name": "小明","age": 14,"gender": true,"height": 1.65,"grade": null,"middle-school": "\"W3C\" Middle School","skills": ["JavaScript","Java","Python","Lisp"]
}

第二个参数用于控制如何筛选对象的键值，如果我们只想输出指定的属性，可以传入Array：

JSON.stringify(xiaoming, ['name', 'skills'], '  ');//结果
{"name": "小明","skills": ["JavaScript","Java","Python","Lisp"]
}

还可以传入一个函数，这样对象的每个键值对都会被函数先处理：

function convert(key, value) {if (typeof value === 'string') {return value.toUpperCase();}return value;
}JSON.stringify(xiaoming, convert, '  ');//结果
{"name": "小明","age": 14,"gender": true,"height": 1.65,"grade": null,"middle-school": "\"W3C\" MIDDLE SCHOOL","skills": ["JAVASCRIPT","JAVA","PYTHON","LISP"]
}

如果我们还想要精确控制如何序列化小明，可以给xiaoming定义一个toJSON()的方法，直接返回JSON应该序列化的数据：

var xiaoming = {name: '小明',age: 14,gender: true,height: 1.65,grade: null,'middle-school': '\"W3C\" Middle School',skills: ['JavaScript', 'Java', 'Python', 'Lisp'],toJSON: function () {return { // 只输出name和age，并且改变了key：'Name': this.name,'Age': this.age};}
};JSON.stringify(xiaoming); // '{"Name":"小明","Age":14}'

反序列化

拿到一个JSON格式的字符串，我们直接用JSON.parse()把它变成一个JavaScript对象：

JSON.parse('[1,2,3,true]'); // [1, 2, 3, true]
JSON.parse('{"name":"小明","age":14}'); // Object {name: '小明', age: 14}
JSON.parse('true'); // true
JSON.parse('123.45'); // 123.45

JSON.parse()还可以接收一个函数，用来转换解析出的属性：

'use strict';var obj = JSON.parse('{"name":"小明","age":14}', function (key, value) {if (key === 'name') {return value + '同学';}return value;
});
console.log(JSON.stringify(obj)); // {name: '小明同学', age: 14}

六、面向对象编程

1. 原型继承

var Student = {name: "qinjiang",age: 3,run: function() {console.log(this.name + " run...");}
};var xiaoming = {name: "xiaoming"
};//原型对象
xiaoming.__proto__ = Student;xiaoming.run() // xiaoming run...

2. 构造函数

JavaScript可以用一种构造函数的方法来创建对象。它的用法是，先定义一个构造函数：
```
function Student(name) {this.name = name;this.hello = function () {alert('Hello, ' + this.name + '!');}
}
```

在JavaScript中，可以用关键字new来调用这个函数，并返回一个对象：

var xiaoming = new Student('小明');
xiaoming.name; // '小明'
xiaoming.hello(); // Hello, 小明!

注意，如果不写new，这就是一个普通函数，它返回undefined。但是，如果写了new，它就变成了一个构造函数，它绑定的this指向新创建的对象，并默认返回this，也就是说，不需要在最后写return this;。

3. class 继承

新的关键字class从ES6开始正式被引入到JavaScript中。class的目的就是让定义类更简单。

如果用新的class关键字来编写Student，可以这样写：

class Student{constructor(name){this.name = name;}hello(){alert('Hello, ' + this.name + '!');}
}

比较一下就可以发现，class的定义包含了构造函数constructor和定义在原型对象上的函数hello() (注意没有function关键字)，这样就避免了Student.prototype.hello = function () {...}这样分散的代码。

创建一个Student对象：

var xiaoming = new Student('小明');
xiaoming.hello(); // Hello, 小明!

class 继承

用class定义对象的另一个巨大的好处是继承更方便了。想一想我们从Student派生一个PrimaryStudent需要编写的代码量。现在，原型继承的中间对象，原型对象的构造函数等等都不需要考虑了，直接通过extends来实现：
```
class PrimaryStudent extends Student {constructor(name, grade) {super(name); // 记得用super调用父类的构造方法!this.grade = grade;}myGrade() {alert('I am at grade ' + this.grade);}
}
```
注意PrimaryStudent的定义也是class关键字实现的，而extends则表示原型链对象来自Student。子类的构造函数可能会与父类不太相同，例如，PrimaryStudent需要name和grade两个参数，并且需要通过super(name)来调用父类的构造函数，否则父类的name属性无法正常初始化。

PrimaryStudent已经自动获得了父类Student的hello方法，我们又在子类中定义了新的myGrade方法。

var xiaohong = new PrimaryStudent("小红", 3);
xiaohong.name; // 小红
xiaohong.grade; // 5
xiaohong.hello(); // Hello, 小红!
xiaohong.myGrade(); // I am at grade 3

七、操作BOM对象 (重点)

BOM：浏览器对象模型

浏览器对象

JavaScript可以获取浏览器提供的很多对象，并进行操作。

window (重要)

window对象不但充当全局作用域，而且表示浏览器窗口。

//浏览器窗口内部的高度和宽度
window.innerHeight
340
window.innerWidth
1280
//浏览器窗口外部的高度和宽度
window.outerHeight
672
window.outerWidth
1280
//可以调整浏览器窗口再试试

navigator (不建议使用)

navigator对象表示浏览器的信息，最常用的属性包括：

navigator.appName：浏览器名称；
navigator.appVersion：浏览器版本；
navigator.language：浏览器设置的语言；
navigator.platform：操作系统类型；

navigator.userAgent：浏览器设定的User-Agent字符串。

navigator.appName
'Netscape'
navigator.appVersion
'5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/107.0.0.0 Safari/537.36'
navigator.language
'zh-CN'
navigator.platform
'Win32'
navigator.userAgent
'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/107.0.0.0 Safari/537.36'

请注意，navigator的信息可以很容易地被用户修改，所以JavaScript读取的值不一定是正确的。(不建议使用这些属性来判断和编写代码)

screen

screen对象表示屏幕的信息，常用的属性有：
- screen.width：屏幕宽度，以像素为单位；
- screen.height：屏幕高度，以像素为单位；
- screen.colorDepth：返回颜色位数，如8、16、24。
```
screen.width
1280
screen.height
720
```

location (重要)

location对象表示当前页面的URL信息。例如，一个完整的URL：
```
http://www.example.com:8080/path/index.html?a=1&b=2#TOP
```

可以用location.href获取。要获得URL各个部分的值，可以这么写：

location.protocol; // 'http'
location.host; // 'www.example.com'
location.port; // '8080'
location.pathname; // '/path/index.html'
location.search; // '?a=1&b=2'
location.hash; // 'TOP'

要加载一个新页面，可以调用location.assign()。如果要重新加载当前页面，调用location.reload()方法非常方便。
```
location.reload(); // 重新加载当前页面
location.assign('https://www.baidu.com/'); // 加载一个新的网页
```

document (内容)

document对象表示当前页面。由于HTML在浏览器中以DOM形式表示为树形结构，document对象就是整个DOM树的根节点。
document的title属性是从HTML文档中的xxx读取的，但是可以动态改变：
```
document.title = '努力学习JavaScript!';
```

要查找DOM树的某个节点，需要从document对象开始查找。最常用的查找是根据ID和Tag Name。

我们先准备HTML数据：

<dl id="drink-menu" style="border:solid 1px #ccc;padding:6px;"><dt>摩卡</dt><dd>热摩卡咖啡</dd><dt>酸奶</dt><dd>北京老酸奶</dd><dt>果汁</dt><dd>鲜榨苹果汁</dd>
</dl>

用document对象提供的getElementById()和getElementsByTagName()可以按ID获得一个DOM节点和按Tag名称获得一组DOM节点：

var menu = document.getElementById('drink-menu');
var drinks = document.getElementsByTagName('dt');
var i, s;s = '提供的饮料有:';
for (i=0; i<drinks.length; i++) {s = s + drinks[i].innerHTML + ',';
}
console.log(s); // 提供的饮料有:摩卡,酸奶,果汁,

document对象还有一个cookie属性，可以获取当前页面的Cookie。
- 由于JavaScript能读取到页面的Cookie，而用户的登录信息通常也存在Cookie中，这就造成了巨大的安全隐患，这是因为在HTML页面中引入第三方的JavaScript代码是允许的：
```

<html><head><script src="http://www.foo.com/jquery.js"></script></head>...
</html>
```
- 如果引入的第三方的JavaScript中存在恶意代码，则www.foo.com网站将直接获取到www.example.com网站的用户登录信息。
- 为了解决这个问题，服务器在设置Cookie时可以使用httpOnly，设定了httpOnly的Cookie将不能被JavaScript读取。这个行为由浏览器实现，主流浏览器均支持httpOnly选项，IE从IE6 SP1开始支持。
- 为了确保安全，服务器端在设置Cookie时，应该始终坚持使用httpOnly。

history (不建议使用)

history对象保存了浏览器的历史记录，JavaScript可以调用history对象的back()或forward ()，相当于用户点击了浏览器的“后退”或“前进”按钮。
对于现代Web页面来说，由于大量使用AJAX和页面交互，简单粗暴地调用history.back()可能会让用户感到非常愤怒。
- 任何情况，都不建议使用history这个对象。

八、操作DOM元素 (重点)

DOM：文档对象模型
由于HTML文档被浏览器解析后就是一棵DOM树，要改变HTML的结构，就需要通过JavaScript来操作DOM。
始终记住DOM是一个树形结构。操作一个DOM节点实际上就是这么几个操作：
- 更新：更新该DOM节点的内容，相当于更新了该DOM节点表示的HTML的内容；
- 遍历：遍历该DOM节点下的子节点，以便进行进一步操作；
- 添加：在该DOM节点下新增一个子节点，相当于动态增加了一个HTML节点；
- 删除：将该节点从HTML中删除，相当于删掉了该DOM节点的内容以及它包含的所有子节点。

1. 获得DOM节点

在操作一个DOM节点前，我们需要通过各种方式先拿到这个DOM节点。
最常用的方法是：(对应css的选择器)
- document.getElementById();
- document.getElementsByTagName();
- document.getElementsByClassName();

由于ID在HTML文档中是唯一的，所以document.getElementById()可以直接定位唯一的一个DOM节点。document.getElementsByTagName()和document.getElementsByClassName()总是返回一组DOM节点。要精确地选择DOM，可以先定位父节点，再从父节点开始选择，以缩小范围。

// 返回ID为'test'的节点：
var test = document.getElementById('test');// 先定位ID为'test-table'的节点，再返回其内部所有tr节点：
var trs = document.getElementById('test-table').getElementsByTagName('tr');// 先定位ID为'test-div'的节点，再返回其内部所有class包含red的节点：
var reds = document.getElementById('test-div').getElementsByClassName('red');// 获取节点test下的所有直属子节点:
var cs = test.children;// 获取节点test下的第二个子节点:
var cs2 = test.children[1];// 获取节点test下第一个、最后一个子节点：
var first = test.firstElementChild;
var last = test.lastElementChild;

2. 更新DOM节点

拿到一个DOM节点后，我们可以对它进行更新。

可以直接修改节点的文本，方法有两种：

// 获取<p id="p-id">...</p>
var p = document.getElementById('p-id');// 1. innerText：只修改文本
p.innerText = '123';
// 2. innerHTML：修改文本，而且可以解析HTML文本标签
p.innerHTML = '<strong>123</strong>';

也可以修改CSS：

p.style.color = 'red'; // 属性使用字符串形式
p.style.fontSize = '20px'; // _ 转 驼峰命名 例：font_size -> fontSize
p.style.padding = '2em';

3. 删除DOM节点

要删除一个节点，首先要获得该节点本身以及它的父节点，然后，调用父节点的removeChild把自己删掉：

// 拿到待删除节点:
var self = document.getElementById('to-be-removed');
// 拿到父节点:
var parent = self.parentElement;
// 删除:
parent.removeChild(self);

注意：删除多个节点的时候，children是在实时更新的，当我们用如下代码删除子节点时：
```
<div id="parent"><p>First</p><p>Second</p>
</div>
```
```
var parent = document.getElementById('parent');
parent.removeChild(parent.children[0]);
parent.removeChild(parent.children[1]); // <-- 浏览器报错
```
- 浏览器报错：parent.children[1]不是一个有效的节点。原因就在于，当<p>First</p>节点被删除后，parent.children的节点数量已经从2变为了1，索引[1]已经不存在了。
- 因此，删除多个节点时，要注意children属性时刻都在变化。

3. 插入DOM节点

如果这个DOM节点是空的，例如，<div></div>，那么，直接使用innerHTML = '<span>child</span>'就可以修改DOM节点的内容，相当于“插入”了新的DOM节点。
如果这个DOM节点不是空的，那就不能这么做，因为innerHTML会直接替换掉原来的所有子节点。

appendChild (添加到最后)

有两个办法可以插入新的节点。一个是使用appendChild，把一个子节点添加到父节点的最后一个子节点。例如：

<!-- HTML结构 -->
<p id="js">JavaScript</p>
<div id="list"><p id="java">Java</p><p id="python">Python</p><p id="scheme">Scheme</p>
</div>

var js = document.getElementById('js');
var list = document.getElementById('list');
list.appendChild(js);

现在，HTML结构变成了这样：

<!-- HTML结构 -->
<div id="list"><p id="java">Java</p><p id="python">Python</p><p id="scheme">Scheme</p><p id="js">JavaScript</p>
</div>

因为我们插入的js节点已经存在于当前的文档树，因此这个节点首先会从原先的位置删除，再插入到新的位置。

更多的时候我们会从零创建一个新的节点，然后插入到指定位置：

var list = document.getElementById('list');
var haskell = document.createElement('p'); // 创建一个新的节点
haskell.id = 'haskell'; // 设置节点的id
haskell.innerText = 'Haskell'; //设置节点的文本
list.appendChild(haskell);

这样我们就动态添加了一个新的节点：

<!-- HTML结构 -->
<div id="list"><p id="java">Java</p><p id="python">Python</p><p id="scheme">Scheme</p><p id="js">JavaScript</p><p id="haskell">Haskell</p>
</div>

动态创建一个节点然后添加到DOM树中，可以实现很多功能。举个例子，下面的代码动态创建了一个<style>节点，然后把它添加到<head>节点的末尾，这样就动态地给文档添加了新的CSS定义：

var d = document.createElement('style');
d.setAttribute('type', 'text/css'); // 设置节点的属性 (key, value)
d.innerHTML = 'p { color: red }';
document.getElementsByTagName('head')[0].appendChild(d); // 标签选择器获得的是一个数组

insertBefore (插入到指定位置)

如果我们要把子节点插入到指定的位置可以使用parentElement.insertBefore(newElement, referenceElement);，子节点会插入到referenceElement之前。

假定我们要把Haskell插入到Python之前：

<!-- HTML结构 -->
<div id="list"><p id="java">Java</p><p id="python">Python</p><p id="scheme">Scheme</p>
</div>

var list = document.getElementById('list');
var ref = document.getElementById('python');
var haskell = document.createElement('p');
haskell.id = 'haskell';
haskell.innerText = 'Haskell';
list.insertBefore(haskell, ref);

新的HTML结构如下：

<!-- HTML结构 -->
<div id="list"><p id="java">Java</p><p id="haskell">Haskell</p><p id="python">Python</p><p id="scheme">Scheme</p>
</div>

可见，使用insertBefore重点是要拿到一个“参考子节点”的引用。很多时候，需要循环一个父节点的所有子节点，可以通过迭代children属性实现：
```
var i, c;
var list = document.getElementById('list');
for (i = 0; i < list.children.length; i++) {c = list.children[i]; // 拿到第i个子节点
}
```

九、操作表单 (验证)

表单是什么

用JavaScript操作表单和操作DOM是类似的，因为表单本身也是DOM树。
不过表单的输入框、下拉框等可以接收用户输入，所以用JavaScript来操作表单，可以获得用户输入的内容，或者对一个输入框设置新的内容。
HTML表单的输入控件主要有以下几种：
- 文本框，对应的<input type="text">，用于输入文本；
- 口令框，对应的<input type="password">，用于输入口令；
- 单选框，对应的<input type="radio">，用于选择一项；
- 复选框，对应的<input type="checkbox">，用于选择多项；
- 下拉框，对应的<select>，用于选择一项；
- 隐藏文本，对应的<input type="hidden">，用户不可见，但表单提交时会把隐藏文本发送到服务器。

获取值

如果我们获得了一个<input>节点的引用，就可以直接调用value获得对应的用户输入值：
```
// <input type="text" id="email">
var input = document.getElementById('email');
input.value; // '用户输入的值'
```
- 这种方式可以应用于text、password、hidden以及select。

但是，对于单选框和复选框，value属性返回的永远是HTML预设的值，而我们需要获得的实际是用户是否“勾上了”选项，所以应该用checked判断：

// <label><input type="radio" name="weekday" id="monday" value="1"> Monday</label>
// <label><input type="radio" name="weekday" id="tuesday" value="2"> Tuesday</label>
var mon = document.getElementById('monday');
var tue = document.getElementById('tuesday');
mon.value; // '1'
tue.value; // '2'
// 被选中时返回true，否则返回false
mon.checked; // true或者false
tue.checked; // true或者false

设置值

设置值和获取值类似。

对于text、password、hidden以及select，直接设置value就可以：

// <input type="text" id="email">
var input = document.getElementById('email');
input.value = 'test@example.com'; // 文本框的内容已更新

对于单选框和复选框，将checked设置为true即可：

// <label><input type="radio" name="weekday" id="monday" value="1"> Monday</label>
// <label><input type="radio" name="weekday" id="tuesday" value="2"> Tuesday</label>
var mon = document.getElementById('monday');
var tue = document.getElementById('tuesday');
mon.checked = true; // Monday已被选中

提交表单

JavaScript可以以两种方式来处理表单的提交。
方式一是通过<form>元素的submit()方法提交一个表单，例如，响应一个<button>的onclick事件，在JavaScript代码中提交表单：
```

<form id="test-form"><input type="text" name="test"><button type="button" onclick="doSubmitForm()">提交</button>
</form><script>
function doSubmitForm() {var form = document.getElementById('test-form');// 可以在此修改form的input...// 提交form:form.submit();
}
</script>
```
- 这种方式的缺点是扰乱了浏览器对form的正常提交。浏览器默认点击时提交表单，或者用户在最后一个输入框按回车键。

因此，第二种方式是响应本身的onsubmit事件，在提交form时作修改：

<!-- HTML -->
<form id="test-form" onsubmit="return checkForm()"><input type="text" name="test"><button type="submit">Submit</button>
</form><script>
function checkForm() {var form = document.getElementById('test-form');// 可以在此修改form的input...// 继续下一步:return true;
}
</script>

注意要return true来告诉浏览器继续提交，如果return false，浏览器将不会继续提交form，这种情况通常对应用户输入有误，提示用户错误信息后终止提交form。

在检查和修改<input>时，要充分利用<input type="hidden"> (隐藏文本)来传递数据。

例如，很多登录表单希望用户输入用户名和口令，但是，安全考虑，提交表单时不传输明文口令，而是口令的MD5。普通JavaScript开发人员会直接修改<input>：

<!-- HTML -->
<form id="login-form" method="post" onsubmit="return checkForm()"><input type="text" id="username" name="username"><input type="password" id="password" name="password"><button type="submit">Submit</button>
</form><script>
function checkForm() {var pwd = document.getElementById('password');// 把用户输入的明文变为MD5:pwd.value = toMD5(pwd.value);// 继续下一步:return true;
}
</script>

这个做法看上去没啥问题，但用户输入了口令提交时，口令框的显示会突然从几个*变成32个* (因为MD5有32个字符)。

要想不改变用户的输入，可以利用<input type="hidden">实现：

<!-- HTML -->
<form id="login-form" method="post" onsubmit="return checkForm()"><input type="text" id="username" name="username"><input type="password" id="input-password"><input type="hidden" id="md5-password" name="password"><button type="submit">Submit</button>
</form><script>
function checkForm() {var input_pwd = document.getElementById('input-password');var md5_pwd = document.getElementById('md5-password');// 把用户输入的明文变为MD5，并传给隐藏文本域提交：md5_pwd.value = toMD5(input_pwd.value);// 继续下一步:return true;
}
</script>

注意到id为md5-password的<input>标记了name="password"，而用户输入的id为input-password的<input>没有name属性。没有name属性的<input>的数据不会被提交。

十、jQuery

`$(选择器).事件();`

jQuery是JavaScript世界中使用最广泛的一个库。
jQuery的理念“Write Less, Do More“，让你写更少的代码，完成更多的工作！
jQuery这么流行，肯定是因为它解决了一些很重要的问题。实际上，jQuery能帮我们干这些事情：
- 消除浏览器差异：你不需要自己写冗长的代码来针对不同的浏览器来绑定事件，编写AJAX等代码；
- 简洁的操作DOM的方法：写$('#test')肯定比document.getElementById('test')来得简洁；
- 轻松实现动画、修改CSS等各种操作。
从jQuery官网可以下载最新版本。jQuery只是一个jquery-xxx.js文件，但你会看到有compressed（已压缩）和uncompressed（未压缩）两种版本，使用时完全一样，但如果你想深入研究jQuery源码，那就用uncompressed版本。

使用jQuery

使用jQuery只需要在页面的引入jQuery文件即可 (放在项目目录下)：
```
<script src="lib/jquery-3.4.1.js"></script>
```
也可使用CDN引入，搜索任意CDN jQuery的url即可 (联网使用)：
- CDN公共库是指将常用的JS库存放在CDN节点，以方便广大开发者直接调用。将JS库存放在服务器单机上相比，CDN公共库更加稳定、高速。
```
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
```

$符号

$是著名的jQuery符号。实际上，jQuery把所有功能全部封装在一个全局变量jQuery中，而$也是一个合法的变量名，它是变量jQuery的别名：
常用公式：$(选择器).事件();

选择器

$('p') // 标签选择器$('#id') // id选择器$('.class') // class选择器

文档工具站：https://jquery.cuishifeng.cn/

事件

因为JavaScript在浏览器中以单线程模式运行，页面加载后，一旦页面上所有的JavaScript代码被执行完后，就只能依赖触发事件来执行JavaScript代码。
浏览器在接收到用户的鼠标或键盘输入后，会自动在对应的DOM节点上触发相应的事件。如果该节点已经绑定了对应的JavaScript处理函数，该函数就会自动调用。
由于不同的浏览器绑定事件的代码都不太一样，所以用jQuery来写代码，就屏蔽了不同浏览器的差异，我们总是编写相同的代码。

举个例子，假设要在用户点击了超链接时弹出提示框，我们用jQuery调用click()方法：

<!-- HTML -->
<a id="test-link" href="#0">点我试试</a>// 获取超链接的jQuery对象:
var a = $('#test-link');
a.click(function () {alert('Hello!');
});

jQuery能够绑定的事件主要包括：
- 鼠标事件
  - click: 鼠标单击时触发；
  - dblclick：鼠标双击时触发；
  - mouseenter：鼠标进入时触发；
  - mouseleave：鼠标移出时触发；
  - mousemove：鼠标在DOM内部移动时触发；
  - hover：鼠标进入和退出时触发两个函数，相当于mouseenter加上mouseleave。
- 键盘事件：键盘事件仅作用在当前焦点的DOM上，通常是<input>和<textarea>。
  - keydown：键盘按下时触发；
  - keyup：键盘松开时触发；
  - keypress：按一次键后触发。
- 其他事件
  - focus：当DOM获得焦点时触发；
  - blur：当DOM失去焦点时触发；
  - change：当<input>、<select>或<textarea>的内容改变时触发；
  - submit：当<form>提交时触发；
  - ready：当页面被载入并且DOM树完成初始化后触发。

练习：获取鼠标当前的坐标

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><script src="lib/jquery-3.6.1.js"></script><style>#divMove{width: 500px;height: 500px;border: 1px solid red;}</style>
</head>
<body><!--要求：获取鼠标的实时坐标-->
mouse: <span id="mouseMove"></span>
<div id="divMove">在这里移动鼠标试试
</div><script>// 当网页元素加载完毕之后，响应事件$(function () {$('#divMove').mousemove(function (e) {$('#mouseMove').text('x: ' + e.pageX + ' y: ' + e.pageY);})});
</script></body>
</html>

操作DOM元素

修改Text和HTML

无参数调用text()是获取文本，传入参数就变成设置文本，HTML也是类似操作：

<!-- HTML结构 -->
<ul id="test-ul"><li class="js">JavaScript</li><li name="python">Python</li>
</ul>

$('#test-ul li[name=python]').text(); // 获得值
$('#test-ul li[name=python]').text('设置值'); // 设置值
$('#test-ul').html(); // 获得值
$('#test-ul').html('<strong>设置值</strong>'); // 设置值

修改CSS

$('#test-ul').css('color', 'red').css('background-color', 'yellow');

获取、设置、删除CSS属性

var div = $('#test-div');
div.css('color'); // '#000033', 获取CSS属性
div.css('color', '#336699'); // 设置CSS属性
div.css('color', ''); // 清除CSS属性

为了和JavaScript保持一致，CSS属性可以用'background-color'和'backgroundColor'两种格式。

元素的显示和隐藏
- 考虑到显示和隐藏DOM元素使用非常普遍，jQuery直接提供show()和hide()方法，我们不用关心它是如何修改display属性的，总之它能正常工作：
```
var a = $('a[target=_blank]');
a.hide(); // 隐藏
a.show(); // 显示
```

获取DOM信息

// 浏览器可视窗口大小:
$(window).width(); // 800
$(window).height(); // 600// HTML文档大小:
$(document).width(); // 800
$(document).height(); // 3500// 某个div的大小:
var div = $('#test-div');
div.width(); // 600
div.height(); // 300
div.width(400); // 设置CSS属性 width: 400px，是否生效要看CSS是否有效
div.height('200px'); // 设置CSS属性 height: 200px，是否生效要看CSS是否有效

小技巧

如何巩固JS
- 看 jQuery 源码
- 看游戏源码
如何巩固HTML、CSS
- 扒网站，全部down下来，然后对应修改看效果

前端UI框架

layui
Element
Ant Design