JavaScript学习

1、初识

1.1、什么是JavaScript？

JavaScript是一门世界上最流行的脚本语言（脚本语言：不需要编译，运行过程中由 js 解释器( js 引擎）逐行来进行解释并执行）
JavaScript语言诞生主要是为了完成页面的数据验证，因此它运行在客户端，需要运行浏览器来解析执行JavaScript代码。
JS是弱类型，Java是强类型
- 弱类型：类型可变，定义变量时，类型不确定；
  JavaScript定义变量用的var，不确定数据类型。
  eg：var a；a=12（number）/var a；a=“abc“（String）
- 强类型：定义变量时，类型已确定，不可变；
  eg：int i；已知类型，复制就一定得按照类型来赋值
特点：
1. 交互性（它可以做的就是信息的动态交互）
2. 安全性（不允许直接访问本地硬盘）
3. 跨平台性（和平台无关，只要能解析JS的浏览器都行

1.2、入门

hello，JavaScript

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">
        alert('hello，JavaScript！')
    </script>
</head>
<body>

</body>
</html>

两种结合HTML的方式

在head标签中，或者在body标签中，使用script标签来书写JavaScript代码

<!--script标签内，写JavaScript代码-->
<script>
    alert("helloWorld");
</script>

外部引入，类似CSS，将JavaScript代码单独写到一个文件中，再使用script标签引入，src属性专门用来引入js文件路径（可以是相对路径，也可以是绝对路径），script标签可以用来定义js代码，也可以用来引入js文件
```

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

注意点：两个功能二选一使用。不能同时使用两个功能（不能同时使用，同时使用里面的没用）

2、数据类型

为什么需要数据类型？

在计算机中，不同的数据所需占用的存储空间是不同的，为了便于把数据分成所需内存大小不同的数据，充分利用存储空间，于是定义了不同的数据类型。

变量的数据类型

变量是用来存储值的所在处，它们有名字和数据类型。变量的数据类型决定了如何将代表这些值的位存储到计算机的内存中。

JavaScript代码运行时，变量的数据类型是由 JS引擎根据 = 右边变量值的数据类型来判断的，运行完毕之后，变量就确定了数据类型。

var age = 10; 		    // 这是一个数字型
var a = '是的'; 		   // 这是一个字符串
var x = 6;				// x 为数字
var x = "Bill"; 		// x 为字符串

JavaScript 拥有动态类型，同时也意味着相同的变量可用作不同的类型。

var x = 6; // x 为数字
var x = "Bill"; // x 为字符串

2.1、数据类型的分类

JS 把数据类型分为两类：

简单数据类型（Number,String,Boolean,Undefined,Null）
复杂数据类型（object)

简单数据类型（基本数据类型）

简单数据类型	说明	默认值
Number	数字型，包含整型值和浮点型值，如21，0.21	0
Boolean	布尔值类型，如true、 false	false
String	字符串类型，如’张三’；注意在js里面，字符串都带引号	”
Undefined	var a;声明了变量a但是没有给值，此时a = undefined	undefined
Null	var a=null;声明了变量a为空值	null

数字型范围（JavaScript中数值的最大和最小值）

alert(Number.MAX_VALUE); // 1.7976931348623157e+308
alert(Number.MIN_VALUE); // 5e-324

最大值：Number.MAX_VALUE，这个值为： 1.7976931348623157e+308
最小值：Number.MIN_VALUE，这个值为：5e-32

数字型三个特殊值

alert(Infinity); // Infinity
alert(-Infinity); // -Infinity
alert(NaN); // NaN
Infinity ，代表无穷大，大于任何数值
-Infinity ，代表无穷小，小于任何数值
NaN ，Not a number，代表一个非数值

isNaN()
用来判断一个变量是否为非数字的类型，返回 true 或者 false

var usrAge = 21;
var isOk = isNaN(userAge);
console.log(isNum); // false ，21 不是一个非数字
var usrName = "andy";
console.log(isNaN(userName)); // true ，"andy"是一个非数字

字符串型 String
字符串型可以是引号中的任意文本，其语法为双引号 “” 和单引号”

注意：因为 HTML 标签里面的属性使用的是双引号，JS 这里我们更推荐使用单引号。

var strMsg = "我爱北京~"; // 使用双引号表示字符串
var strMsg2 = '我爱北京~'; // 使用单引号表示字符串

subString

截取字符串，左闭右开：[)

只有一个的情况下：
subString(1)	//从第一个字符串截取到最后一个字符串

有两个的情况：
subString(1,3)	//从第一个字符串到第三个字符串，左闭右开

字符串的可变性
JS中的字符串和Java一样，都是不可变的

console.log(student)	//输出student
student[1] = 1	//给字符串的第2个元素赋值为1
console.log(student)	//还是输出student

字符串转义符
类似HTML里面的特殊字符，字符串中也有特殊字符，我们称之为转义符。转义符都是 \ 开头的
常用的转义符及其说明如下：

转义符	解释说明
\n	换行符，n 是 newline 的意思
\ \	输出斜杠 \
\ ‘	输出单引号
\ “	输出双引号
\t	tab 缩进
\b	空格，b 是 blank 的意思
\u####	Unicode字符

字符串是由若干字符组成的，这些字符的数量就是字符串的长度。通过字符串的 length 属性可以获取整个字符串的长度。
（注意空格也是一个字符串）

var strMsg = "我饿了！";
alert(strMsg.length); // 显示 4

字符串拼接

多个字符串之间可以使用 + 进行拼接，其拼接方式为字符串 + 任何类型 = 拼接之后的新字符串
拼接前会把与字符串相加的任何类型转成字符串，再拼接成一个新的字符串

//1 字符串 "相加"
alert('hello' + ' ' + 'world'); // hello world
//2 数值字符串 "相加"
alert('100' + '100'); // 100100
//3 数值字符串 + 数值
alert('11' + 12); // 1112

多行字符串编写

可以在 “ 键内编写多行字符串，不需要用到拼接
在 “ 里面多行编写不会变成一行
不用+连接其他属性

<script type="text/javascript">
    let name = "李辰洋";
let age = 1;
let msg = `你好，${name}
你今年多大了？
${age}`
/*输出结果：
          你好，李辰洋
          你今年多大了？
          1
        */
</script>

布尔型 Boolean
布尔类型有两个值：true 和 false ，其中 true 表示真（对），而 false 表示假（错）。
布尔型和数字型相加的时候， true 的值为 1 ，false 的值为 0。

console.log(true + 1); // 2
console.log(false + 1); // 1

Undefined 和 Null
一个声明后没有被赋值的变量会有一个默认值 undefined ( 如果进行相连或者相加时，注意结果）

var variable;
console.log(variable); // undefined
console.log('你好' + variable); // 你好undefined
console.log(11 + variable); // NaN
console.log(true + variable); // NaN

一个声明变量给 null 值，里面存的值为空

var vari = null;
console.log('你好' + vari); // 你好null
console.log(11 + vari); // 11
console.log(true + vari); // 1

2.2、获取检测变量的数据类型

typeof 可用来获取检测变量的数据类型

var num = 18;
console.log(typeof num) // 结果 number

注意：null的返回值不是null，是object

2.3、数据类型转换

使用表单获取过来的数据默认是字符串类型的，此时就不能直接简单的进行加法运算，而需要转换变量的数据类型。通俗来说，就是把一种数据类型的变量转换成另外一种数据类型。

我们通常会实现3种方式的转换：

转换为字符串类型
转换为数字型
转换为布尔型

转换为字符串

方式	说明	案例
toString( )	转成字符串	var num= 1; alert(num.toString);
String( )强制转换	转成字符串	var num = 1; alert(String(num);

toString() 和 String() 使用方式不一样。

转换为数字型（重点）

方式	说明	案例
parselInt(string)函数	将string类型转成整数数值型	parselnt(78)
parseFloat(string)函数	将string类型转成浮点数数值型	parseFloat(78.21′)
Number()强制转换函数	将string类型转换为数值型	Number(’12’)
js隐式转换(- * /)	利用算术运算隐式转换为数值型	’12’-0

注意 parseInt 和 parseFloat 单词的大小写，这2个是重点
隐式转换是我们在进行算数运算的时候，JS 自动转换了数据类型

转换为布尔型

代表0，null，undefined，“”（空串）的值会被转换为 false
其余值都会被转换为 true

方式	说明
Boolean( )函数	其他类型转成布尔值

console.log(Boolean('')); // false
console.log(Boolean(0)); // false
console.log(Boolean(NaN)); // false
console.log(Boolean(null)); // false
console.log(Boolean(undefined)); // false
console.log(Boolean('小白')); // true
console.log(Boolean(12)); // true

3、数组

3.1 、数组的概念

数组可以把一组相关的数据一起存放，并提供方便的访问(获取）方式。
数组是指一组数据的集合，其中的每个数据被称作元素，在数组中可以存放任意类型的元素。数组是一种将一组数据存储在单个变量名下的优雅方式。

3.2、创建数组

JS 中创建数组有两种方式：

利用 new 创建数组

var 数组名 = new Array();
var arr = new Array();   // 创建一个新的空数组

利用数组字面量创建数组

// 创建一个空数组
var arr1 = []; 

// 创建一个包含3个数值的数组，多个数组项以逗号隔开
var arr2 = [1, 3, 4]; 

// 创建一个包含2个字符串的数组
var arr3 = ['a', 'c']; 

//创建多维数组
var arr4 = [[1,2],[3,4],[5,6]]

// 可以通过数组的length属性获取数组的长度
console.log(arr3.length);

// 可以设置length属性改变数组中元素的个数，如果length过大，空余的元素都是Undefined，但是length赋值过小，元素会丢失
arr3.length = 0;

数组元素的类型

数组中可以存放任意类型的数据，例如字符串，数字，布尔值等。

var arrStus = ['小白',12,true,28.9];

3.3、获取数组中的元素

索引 (下标) ：用来访问数组元素的序号（数组下标从 0 开始）。

数组可以通过索引来访问、设置、修改对应的数组元素，可以通过“数组名[索引]”的形式来获取数组中的元素。
数组还可以通过元素获取下标索引（indexOf）
slice()可以截取Array中的一部分元素，返回一个新的数组（也是左闭右开），类似于String中的subString

// 定义数组
var arrStus = [1,2,3,4,5,6,7];

// 获取数组中的第2个元素
alert(arrStus[1]);
//通过元素获取下标索引
alert(arrStus.indexOf(2));//或输出1，因为2对应的索引是1

alert(arrStus.slice(1));//输出[2,3,4,5,6,7]
alert(arrStus.slice(1,5));//输出[2,3,4,5]

注意：如果访问时数组没有和索引值对应的元素，则得到的值是undefined(未定义)

3.4、遍历数组

遍历：遍及所有，对数组的每一个元素都访问一次就叫遍历。

数组遍历的基本语法：

for(var i = 0; i < arr.length; i++) {
	// 数组遍历的固定结构
}

数组的长度

数组的长度：默认情况下表示数组中元素的个数

使用“数组名.length”可以访问数组元素的数量（数组长度）。
```
var arrStus = [1,2,3];
alert(arrStus.length);  // 3
```
注意：
- 此处数组的长度是数组元素的个数，不要和数组的索引号混淆。
当我们数组里面的元素个数发生了变化，这个 length 属性跟着一起变化
- 数组的length属性可以被修改：
如果设置的length属性值大于数组的元素个数，则会在数组末尾出现空白元素；
- 如果设置的length属性值小于数组的元素个数，则会把超过该值的数组元素删除

3.5、数组中新增元素

直接赋值，数组名[下标/索引] = 值，如果下标有对应的值，会把原来的值覆盖，如果下标不存在，会给数组新增一个元素
通过push方法添加，会添加在列表的尾部
通过pop方法弹出，会把尾部最后一个元素弹出去
通过unshift()方法，可以往数组头部添加
同理，shift()方法，可以把头部的第一个元素弹出去

var arr = ["red", "green", "blue"];
// 把red替换成了yellow
arr[0] = "yellow";
// 给数组新增加了一个pink的值
arr[3] = "pink";

arr.push('black')//["red", "green", "blue", 'black']
arr.pop()//["red", "green", "blue"]

/* JS数组要会的题：
求数组[2,6,1,77,52,25,7]中的最大值。
分析：冒泡排序法：是一种算法，把一系列的数据按照一定的顺序进行排列显示
(从小到大或从大到小）。
① 声明一个保存最大元素的变量 max。
② 默认最大值可以取数组中的第一个元素。
③ 遍历这个数组，把里面每个数组元素和 max 相比较。
④ 如果这个数组元素大于max 就把这个数组元素存到 max 里面，
否则继续下一轮比较。
⑤ 最后输出这个 max。*/
var arrNum = [2,6,1,77,52,25,7];
var maxNum = arrNum[0]; // 用来保存最大元素,默认最大值是数组中的第一个元素
// 从0 开始循环数组里的每个元素
for(var i = 0;i< arrNum.length; i++){
    // 如果数组里当前循环的元素大于 maxNum，则保存这个元素和下标
    if(arrNum[i] > maxNum){
        maxNum = arrNum[i]; // 保存数值到变量 maxNum
    }
}

/* 删除指定数组元素
要求：将数组[2, 0, 6, 1, 77, 0, 52, 0, 25, 7]中的 0 去掉后，形成一个不包含 0 的新数组。
分析
① 需要一个新数组用于存放筛选之后的数据。
② 遍历原来的数组，把不是 0 的数据添加到新数组里面( 此时要注意采用数组名+索引的格式接收数据)。
③ 新数组里面的个数，用 length 不断累加。*/

var arr = [2, 0, 6, 1, 77, 0, 52, 0, 25, 7];
var newArr = []; // 空数组的默认的长度为 0
// 定义一个变量 i 用来计算新数组的索引号
for (var i = 0; i < arr.length; i++) {
    // 找出大于 10 的数
    if (arr[i] != 0) {
        // 给新数组
        // 每次存入一个值，newArr长度都会 +1
        newArr[newArr.length] = arr[i];
    }
}
console.log(newArr);

4、对象

JS中的对象，使用{}括起来，对象里面的属性都是用键值对表示，键值对之间，用逗号隔开，最后一个属性不加逗号
- 注意：JavaScript中的所有的键都是字符串，值是任意对象
从对象中取数据只需要对象名.属性名即可，赋值也可以通过这个方式直接赋值
使用一个不存在的对象属性，也不会报错！undefined
动态的删减属性，通过delete动态删减属性
动态的添加属性，直接赋值即可
判断属性是否是对象拥有的，hasOwnProperty()

//定义一个对象，，有多少属性就写多少个键值对
var 对象名{
    属性名:属性值,
    属性名:属性值,
    属性名:属性值
}
eg：
var person{
    name:"lcy",
    age:1,
    score:99
}

//对象赋值：
person.name = "yql"
"yql"
person.name
"yql"

person.sex
undefined

//动态的删减属性
delete person.name
true
person
{age:1,score:99}
//动态的添加属性
person.sex = "男"
"男"
person
{age:1,score:99,sex:"男"}

//判断属性是否是对象拥有的
person.hasOwnProperty('age')
true

5、Map和Set

Map和Set是JavaScript中ES6的新特性
Map可以通过key获得value，类似Python中的字典
Set可以去重，Set是无序不重复的集合

var map = new Map([['tom':90],['alis':80],['jack':70]]);
map.set('admin',123456)//添加值或修改
map.get('tom');//通过key获得value
map.delete('alis');//删除一个元素

var set = new Set([3,1,1,1])//[3,1],set可以去重
set.add(2);//添加2
set.delete(1)//删除1
set.has(3)//是否包含3

6、函数

6.1、定义

任何函数，都要在定义后调用才有效，调用了函数，才会执行函数里面的函数体

JavaScript不允许重载，重载会覆盖之前的定义（重载：只要函数名相同，参数列表不同，就叫函数重载）

因为在函数调用的时候，JavaScript可以传任意个参数，不是非要按照函数里形参的个数来决定

第一种定义方式
<script type="text/javascript">
    //定义一个无参函数
    function fun1() {
    console.log("这是一个无参函数");
}
//定义一个带参函数
function fun2(a,b) {
    console.log(("这是一个有参函数"))
}
//定义一个带返回值的函数，如果没有执行return，函数执行完也会返回结果，undefined
function fun3(num1,num2) {
    return num1 + num2;
}
//定义一个自定义的异常判断的函数
function fun4(x) {
    if (typeof x !== 'number'){
        throw 'Not a Number';
    }
}
</script>

第二种定义方式
<script type="text/javascript">
    //定义一个无参函数
    var fun1 = function(){
        console.log("这是一个无参函数");
    }
//定义一个带参函数
var fun2 = function(a,b) {
    console.log(("这是一个有参函数"))
}
//定义一个带返回值的函数，如果没有执行return，函数执行完也会返回结果，undefined
var fun3 = function (num1,num2) {
    return num1 + num2;
}
//定义一个自定义的异常判断的函数
var fun4 = function (x) {
    if (typeof x !== 'number'){
        throw 'Not a Number';
    }
}
</script>

arguments：隐形参数

JavaScript免费赠送的关键字，arguments是args的全名
arguments代表传递进来的所有的参数，是一个数组，把所有的参数放在数组中
因为有arguments隐形参数，所以JavaScript定义函数时，函数里面的形参可有可无，可用arguments获取所有的参数
arguments适用于未知参数个数的场景

<script type="text/javascript">
    var abs = function(x){
        console.log(x); //形参有多少个，就会输出多少个，多传递的参数不会显示
        for (var i = 0; i < arguments.length; i++) {
            console.log(arguments[i]);  //输出传递进来的所有参数
        }
    }
</script>

问题：arguments会获取所有的参数，如果只想接收除了当前参数以外的参数（附加参数）来进行附加操作，那这时就需要排除已有的参数，但是，已有的参数也是不固定的

ES6引入了一个新特性：rest，获取除了定义的参数之外的所有参数，定义的时候要增加…rest

格式：function 函数名(参数名，...rest){函数体}

<script type="text/javascript">
    var abs = function(x,...rest){
        console.log("x=>"+x); //输出已经定义的参数，多传递的参数不会显示
        console.log(rest);  //输出除了定义的参数之外的参数
    }
</script>

6.2、变量的作用域

在JavaScript中，数组不存在越界问题，但是变量也是有作用域的

//在函数体内声明的变量在函数体外不可以使用
<script type="text/javascript">
    function f() {
        var x = 1;
        x = x + 1;
    }
    x = x + 2;  //Uncaught ReferenceError: x is not defined
</script>

如果两个函数使用了相同的变量名，只要在函数体内，就不冲突

<script type="text/javascript">
    function f() {
        var x = 1;
        x = x + 1;
    }
    function f1() {
        var x = 2;
        x = x + 1;
    }
</script>

当一个函数在另一个函数体内时，内部函数可以访问外部函数的成员，反之则不行

<script type="text/javascript">
    function f() {
        var x = 1;
        function f1() {
            var y = x + 2;
        }
        var z = y + 1;  //Uncaught ReferenceError: y is not defined
    }

</script>

当内部函数变量和外部函数变量重名，在内部函数中，内部函数变量会屏蔽外部函数的变量

<script type="text/javascript">
    function f() {
        var x = 1;
        function f1() {
            var x = 2
            console.log("内"+x); //内2
        }
        console.log("外"+x); //外1
        f1();
    }
    f();    //外1 内2
</script>

提升变量的作用域

<script type="text/javascript">
    function f() {
        var x = 'x';
        console.log(x+y);   //x和undefined，这相当于已经定义了y但是没有赋值，相当于在前面定义了 var y;但是没赋值
        var y ='y'
    }
</script>

JS执行引擎，自动提升了y的声明，但是不会提升变量y的赋值

全局函数

<script type="text/javascript">
    //全局变量
    var x = 1;
    function f() {
        console.log('内'+x);
    }
    f();
    console.log('外'+x);
</script>

全局对象window，默认的所有全局变量，都会自动绑定在window对象下

<script type="text/javascript">
    //全局变量
    var x = 1;
    alert(x);		
    alert(window.x)
</script>

//alert是一个方法，它也是window下的一个方法
<script type="text/javascript">
    //全局变量
    var x = 1;
    window.alert(x);
    var new_alert = window.alert;
    new_alert(x);
</script>

JavaScript实际上只有一个全局作用域，任何变量（函数也可以视为变量），假设没有在函数作用范围内找到，就会向外查找

规范

由于我们所有的全局变量都会绑定到window上，如果不同js文件，使用了相同的全局变量，会产生冲突？

解决方法：使用自定义的全局变量代替window
<script type="text/javascript">
    //唯一全局变量
    var abs = {};
    //定义全局变量，这就和window.name是一样的，但是和window无关，这些全局变量都是绑定到唯一全局变量上的
    abs.name = 'lisa';
    abs.add = function (a,b) {
        return a+b;
    }
</script>

所有的变量定义都放在函数的头部，不要乱放，便于代码维护

ES6部分新特性

let：解决局部作用域冲突问题，仅限局部作用域中有效

<script type="text/javascript">
    function f() {
    for (var i = 0;i<10;i++){
        console.log(i);
    }
    //这表明用var定义的变量i即使出了for循环，依旧有效，这会导致局部作用域冲突
    console.log(i); //10
	}
</script>

<script type="text/javascript">
    function f() {
    for (let j = 0; j < 10; i++) {
        console.log(j);
    }
    //这表明变量j未定义，也就是说在for循环中用let定义的变量，仅限for循环中有效
    console.log(j); //Uncaught ReferenceError: i is not defined
	}
</script>

const：常量，用const定义的变量为常量，不可被改变

6.3、方法

方法就是把函数放在对象里面，对象只有两个东西：属性和方法

<script>
    var abs = {
        name:'Lisa',
        birth:2000,
        //方法，把属性换成函数就是方法
        age:function () {
            //今年-出生
            return new Date().getFullYear() - this.birth;
        }
    }
</script>
调用方法和属性
abs.name;
abs.age();	//调方法一定要带括号

this

this是无法指向的，是默认指向调用它的那个对象

<script>
    /*拆分开来就是函数*/
    function getAge() {
        //今年-出生
        return new Date().getFullYear() - this.birth;
    }

    var abs = {
        name:'Lisa',
        birth:2000,
        //方法，把属性换成函数就是方法
        age:getAge
    }
    abs.age();  //22
    getAge();   //NaN，因为再getAge里面，this不是指向abs对象，而是指向window对象
</script>

apply

apply在js中可以控制this的指向，所有的函数都有apply属性，apply有两个参数：thisArg（要指向的对象），需要传递过去的参数

<script>
    /*拆分开来就是函数*/
    function getAge() {
        //今年-出生
        return new Date().getFullYear() - this.birth;
    }

    var abs = {
        name:'Lisa',
        birth:2000,
        //方法，把属性换成函数就是方法
        age:getAge
    }
    getAge.apply(abs);   //this指向了abs这个对象，因为不需要参数，所以参数为空
</script>

7、内部对象

Date

<script>
    var date = new Date();
    date;               //当前时间
    date.getFullYear(); //年
    date.getMonth();    //月
    date.getDate();     //日
    date.getHours();    //时
    date.getMinutes();  //分
    date.getSeconds();  //秒
    date.getDay();      //星期几
    date.toLocaleString();  //本地时间，打印的是字符串，'3/10/2022, 3:12:52 PM'

    date.getTime();     //时间戳   全世界统一
    new Date(date.getTime());   //时间戳转化为时间


</script>

JSON

JSON是一种轻量级的数据交换格式
简介和清晰的层次结构使得JSON成为理想的数据交换语言
易于人阅读，同时也易于机器解析和生成，并有效的提升网络传输效率
在JavaScript中，一切皆为对象，任何js支持的类型都可以用JSON来表示

JSON格式：对象用{}，数组用[]，所有的键值对都用key：value

<script>
    /*
    这是对象
    console.log(user);
    {name: 'Lisa', age: 18, sex: '女'}展开：
     age: 18
     name: "Lisa"
     sex: "女"
    */
    var user={
        name:"Lisa",
        age:18,
        sex:"女"
    }
    //对象转JSON
    //这是JSON字符串，不可展开    '{"name":"Lisa","age":18,"sex":"女"}'
    JSON.stringify(user);
    /*
     JSON字符串转对象
     {name: 'Lisa', age: 18, sex: '女'}展开：
     age: 18
     name: "Lisa"
     sex: "女"
     */
    JSON.parse(JSON.stringify(user));
</script>

JSON和JS对象的区别

var obj = {key1:"value1",b:"value2"};
var json = '{"key1":"value1","key2":"value2"}';	//json本身就是一个字符串

8、面向对象编程

什么是面向对象？

类：模板原型对象
对象：具体的实例

原型链：环型，无上限，一直指向object

9、操作BOM对象

浏览器介绍

JavaScript的诞生就是为了能够让JavaScript在浏览器中运行

BOM：浏览器对象模型

IE
Chrome
Safari
FireFox

三方浏览器比如360,QQ等，都是用的以上内核！

window

window代表浏览器窗口

window.innerHeight	//内窗高度
334
window.innerWidth	//内窗宽度
1536
window.outerHeight	//外窗高度
824
window.outerWidth	//外窗宽度
1536

10、操作DOM对象

DOM模型：Document Object Model 文档对象模型

文档：一个HTML页面就是一个HTML文档；

就是把文档中的标签，属性，文本，转化成为对象来管理

Document对象：

Document它管理了所有的HTML文档内容
document它是一种树结构的文档，有层级关系
它可以让我们把所有的标签都对象化 –> 对象化：使用一个类去描述记录下那些相关信息
我们可以通过document访问所有的标签对象

更新：更新DOM节点
遍历DOM节点：得到DOM节点
删除：删除一个DOM节点
添加：添加一个新的节点

要操作一个DOM节点，就必须先获得这个DOM节点

获得DOM节点

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="father">
    <h1>标题1</h1>
    <p id="p1">p</p>
    <a class="a1" href="">a</a>
</div>
<script>
    //对应css选择器
    var h1 = document.getElementsByTagName("h1");
    var p1 = document.getElementById('p1');
    var a1 = document.getElementsByClassName('a1')
    var father = document.getElementById('father');
    //获取父节点下的所有子节点
    var children = father.children;
</script>
</body>
</html>

更新节点

innerTest：可以修改文本的值
innerHTML：超文本，也就是HTML，可以在这里写标签，因为可以解析HTML文本标签
style：可以设置css样式

father.innerText = 'father';
'father'
father.innerHTML = '<strong>father</strong>';
'<strong>father</strong>'
father.style.color = 'red';
'red'
father.style.fontSize = '50px';
'50px'
father.style.padding = '0';
'0'

<div id="father"></div>
<script>
    var father = document.getElementById('father');
</script>

删除节点

删除节点的步骤：

先获取父节点
在通过父节点删除自己

<div id="father">
    <h1>标题1</h1>
    <p id="p1">p</p>
    <a class="a1" href="">a</a>
</div>
var self = document.getElementById('p1');
var father = self.parentElement;
father.removeChild(self);

删除是一个动态的过程，删除多个节点的时候，children是在时刻变化的，删除节点的时候一定要注意！

插入节点

如果我们获得了某个DOM节点，假设这个DOM节点是空的，那么可以通过innerHTML增加一个元素了，但是如果这个DOM节点已经存在元素，就不能这么干了，会产生覆盖！

插入节点一般都是通过追加操作插入

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<p id="js">JavaScript</p>
<div id="list">
    <p id="se">JavaSE</p>
    <p id="ee">JavaEE</p>
    <p id="me">JavaME</p>
</div>
<script>
    var js = document.getElementById('js');		//已经存在的节点
    var list = document.getElementById('list');
    //appendChild：追加到子元素
    list.appendChild(js);
</script>
</body>
</html>

结果：

通过js创建一个新的节点插入，插入到尾部

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
        <p id="js">JavaScript</p>
        <div id="list">
            <p id="se">JavaSE</p>
            <p id="ee">JavaEE</p>
            <p id="me">JavaME</p>
        </div>
        <script>
            var js = document.getElementById('js');     //已经存在的节点
            var list = document.getElementById('list');
            //appendChild：追加到子元素
            list.appendChild(js);

            //使用js创建一个新的节点
            var newP = document.createElement('p');    //创建一个p标签，相当于在body标签下建立了一个；<p></p>
            newP.id='newP';     //给这个p标签添加一个id，相当于：<p id="newP"></p>
            newP.innerText='hello';     //给这个p标签添加文本，相当于：<p id="newP">hello</p>
            list.appendChild(newP);

            var scriptElement = document.createElement('script');
            //setAttribute：有两个属性，key,value，都是String类型
            // 这个就相当于给script标签添加了type属性，并给这个属性设置为text/javascript
            scriptElement.setAttribute('type','text/javascript')  
        </script>
    </body>
</html>

insertBefore

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<p id="js">JavaScript</p>
<div id="list">
    <p id="se">JavaSE</p>
    <p id="ee">JavaEE</p>
    <p id="me">JavaME</p>
</div>
<script>
    var ee = document.getElementById('ee');
    var js = document.getElementById('js');
    var list = document.getElementById('list');
    //list：要包含的节点，把JavaScript插入到JavaEE前面需要把JavaScript被包含到list中
    //insertBefore：有两个值，newNode（新节点）,targetNode（目标节点），把新节点，插入到目标节点的前面
    list.insertBefore(js,ee);
</script>
</body>
</html>

11、操作表单

表单的目的：提交信息

<form>
    <p>
        <span>用户名：</span>
        <input type="text" id="username">
    </p>
    <p>
        <span>密码：</span>
        <input type="password" id="password">
    </p>
    <p>
        <span>性别：</span>
        <input type="radio" name="sex" id="boy" value="man">男
        <input type="radio" name="sex" id="girl" value="women">女
    </p>
    <p>
        <span>爱好：</span>
        <input type="checkbox" name="hobby" value="game">游戏
        <input type="checkbox" name="hobby" value="TV">电视
        <input type="checkbox" name="hobby" value="novel">小说
    </p>
    <p>
        <span>国籍：</span>
        <select name="country">
            <option value="China">中国</option>
            <option value="USA">美国</option>
            <option value="UK">英国</option>
        </select>
    </p>
    <p>
        <input type="button" name="submit" value="提交">
    </p>
</form>

MD5工具类

提交表单，使用MD5加密密码，表单优化

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.bootcss.com/blueimp-md5/2.10.0/js/md5.min.js"></script>
</head>
<body>
<form method="post">
    <p>
        <span>用户名：</span>
        <input type="text" id="username" name="username">
    </p>
    <p>
        <span>密码：</span>
        <input type="password" id="password" name="password">
    </p>
    <!--通过隐藏域提交，对输入没有任何影响，还能优化体验，提供安全性
    因为用MD5加密，在提交的一瞬间，密码框里面会显示一大串密码，一看就知道是使用了MD5加密-->
    <input type="hidden" name="password" id="md5">
    <p>
        <button type="submit" onclick="f()">提交</button>
    </p>
</form>
<script>
    function f() {
        var username = document.getElementById('username');
        var password = document.getElementById('password');
        var md5_password = document.getElementById('md5');
        //username.value;得到输入框的值   username.value = '';修改输入框的值
        console.log(username.value)

        //使用MD5加密密码，使得密码变成一串不规则字母
        // password.value = md5(password.value)
        md5_password.value = md5(password.value);
        console.log(md5_password.value)

    }
</script>
</body>
</html>

本文链接：https://www.cnblogs.com/yangchenli/p/16020400.html

JavaScript学习

JavaScript学习

1、初识

1.1、什么是JavaScript？

1.2、入门

2、数据类型

2.1、数据类型的分类

2.2、获取检测变量的数据类型

2.3、数据类型转换

3、数组

3.1 、数组的概念

3.2、创建数组

3.3、获取数组中的元素

3.4、遍历数组

3.5、数组中新增元素

4、对象

5、Map和Set

6、函数

6.1、定义

6.2、变量的作用域

6.3、方法

7、内部对象

8、面向对象编程

9、操作BOM对象

10、操作DOM对象

11、操作表单