JavaScript

前端三要素：

 

1.HTML（结构）：Hyper Text Markup Language 超文本标记语言，决定网页的结构和内容

2.CSS（表现）：Cascading Style Sheets 层叠样式表，设定网页的表现形式

3.JavaScript（行为）：是一种弱类型脚本语言，其源代码不需要经过编译，而是由浏览器解释运行，用于控制网页的行为。

ECMAScript可以理解为JavaScript的一个标准，最新版本已经到es6版本，但是大部分浏览器还只是停留在支持es5版本上。导致开发环境和线上环境，版本不一致。

快速入门：

第一个JavaScript程序：

显示结果：

也可以单独写在一个js文件里：

然后再引入到html文件里：

注意点：

1、<script></script>不能写成自闭合标签<script/>，不然运行不出来。

2、不需要手动定义成<script type="text/javascript"></script>，默认就是javascript

基本语法入门：

数据类型：

1、数值：JS不区分小数和整数，统一用number。

123                //整数

123.1             //浮点数。会存在精度的损失。比如 1/3 === 1- 2/3 结果为false。

                         尽量避免使用浮点数进行运算。

                         解决方法：使用绝对值。Math.abs(1/3 - (1-2/3)) < 0.000001

1.23e4           //科学记数法

-123               //负数

NaN               // Not a Number

infinity            //无穷大 

2、字符串：'abc'、"abc"

3、布尔值：true、false

4、逻辑运算：&&        ||        ！

5、比较运算符：

=                赋值

==              等于（类型不一样，值一样，也会判断为true）

===            绝对等于（类型一样，值一样，才会判断为true）

注意：NaN === NaN 结果为false。NaN与所有的数值都不相等，包括自己。只能通过 isNaN(NaN) 来判断这个数是不是NaN。

6、null 和 undefined：

null        空

undefined        未定义

7、数组：Java中是一系列相同类型的对象，但是JavaScript中不需要，因为都是var

var array = [1, 2, 3, 'hello', null, true];                //保证代码可读性，尽量使用这种

new Array(1, 2, 3, 'hello', null, true);

取 array[6]，数组下标越界了，就是undefined。 

 8、对象：

var person = {

        name: "张三",

        age: 3,

        tags: ['懒狗', '不想学习']

}

严格检查模式：

<script>
    //全局变量 
    i = 1;
    //在ES5中，局部变量
    var j = 1;  
    //在ES6中，局部变量
    let j = 1;  //局部变量建议都使用let去定义
</script>

 在前面添加 'use strict'; 变成了严格检查模式，可以预防JavaScript的随意性产生的一些问题

注意：只有 'use strict'; 添加在JavaScript第一行，出了问题，浏览器才会报错

<script>
    'use strict';
    //全局变量会爆红
    i = 1;
</script>

字符串类型详解：

1、正常的字符串我们使用单引号或者双引号包裹

2、注意转义字符

3、多行字符串编写

<script>
    //用``包裹（Tab键上面、Esc键下面那个）
    var msg = `1
    2
    3`;
    console.log(msg);
</script>

 4、模板字符串

<script>
    'use strict';
    let name = "张三";
    let msg = `你好呀，${name}`;
    console.log(msg);
</script>

 5、字符串长度

str.length

6、 字符串不可变

<script>
    var name = "zhangsan";
    name[0] = a;    //浏览器会报错
    console.log(name);
</script>

7、大小写转换

//注意：这里是方法，不是属性了

str.toUpperCase();

str.toLowerCase(); 

8、str.indexOf('a');

9、substring()

str.substring(1)        //从下标1开始，截取到最后一个

str.substring(1,3)        //左闭右开[1,3) 

数组类型详解：

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

var array = [1,2,3,4,5,6,"1","2"];

1、长度

array.length

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

2、indexOf 通过元素获得下标索引

array.indexOf(1);        

返回结果是0【数字1和字符串"1"是不一样的】

3、slice() 截取Array的一部分，返回一个新数组，左闭右开，类似于Striing中的substring() 

4、push()        pop()        在尾部添加或弹出元素

5、unshift()     shift()        在头部添加或弹出元素

6、sort() 排序

7、reverse() 元素反转

8、concat() 返回一个新的拼接数组，但是不会改变原来的数组

9、join() 使用指定的连接符，将数组中的每个元素连接，返回结果是一个字符串

array.join("_");
'1_2_3_4_5_6_1_2'

10、多维数组

array = [ [1,2], [3,4], ["5", "6"] ];

对象类型详解：

JavaScript中所有的键都是字符串，值是任意对象。

<script>
    'use strict';
    var person = {
        name : "zhangsan",
        age : 3
    };
</script>

1、对象赋值

 person.name = "张三";

2、使用一个不存在的对象属性，不会报错

person.sb 

undefined 

3、通过delete动态地删除属性

delete person.name 

4、动态地添加，直接给新的属性赋值即可

person.sb = "傻逼";

 5、判断属性值是否在这个对象中

'age' in person

true

6、 判断一个对象是否是自身拥有这个属性/方法，而不是从父类继承的

person.hasOwnProperty('toString');

流程控制：

if判断、while循环、do...while循环、for循环、forEach循环、for...in循环

//forEach循环：

var age = [1,2,3,4,5,6];

age.forEach(function(value){

        console.log(value);

});

//for in循环

//for(var index in object){}

for(var num in age){

        console.log(age[num]);

}

Map和Set集合：

Map：

var map = new Map([ ['tom',100], ['jack',90], ['haha',80] ]);

var score = map.get('tom');        //通过key获得value

map.set('旺财', 50);        //新增或修改

map.delete('jack');        //删除

 Set：

var set = new Set([1,1,1,1,3]);

set.add(2);        //新增

set.delete(1);        //删除

console.log(set.has(3));        //判断是否存在某个元素

遍历：

遍历数组：

 var array = [5,6,7];

for(var x of array){                // for...of遍历的是元素

        console.log(x);        

}

for(var index in array){        // for...in遍历的是下标

        console.log(array[index]);

}

遍历map：

var map = new Map([ ['tom',100], ['jack',90], ['haha',80] ]);

for(var x of map){

        console.log(x);       

}

遍历set：

 var set = new Set([1,1,1,1,3]);

for(var x of set){

        console.log(x);

}

一个bug：

显示结果：

函数：

1、定义函数：

1.1、定义方式一：

绝对值函数：

function abs(x){

        if(x >= 0){

                return x;

        }else{

                return -x;

        }

}

一旦执行到return代表函数结束，返回结果。如果没有执行return，函数执行完也会返回结果，结果就是undefined。

1.2、定义方式二：

var abs = function(x){        

        if(x >= 0){

                return x;

        }else{

                return -x;

        }

}

function(x){...}这是一个匿名函数。但是可以把结果赋值给abs，通过abs就可以调用函数。

方式一和方式二等价。

2、调用函数

abs(10)        //结果：10

abs(-10)       //结果：10

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

abs()                //结果：NaN

abs(10, 20, 30, -40)        //结果：10 

参数进来是否存在的问题？

假设参数不存在，如何规避？

function abs(x){

        if (typeof x !== 'number'){        

                throw 'Not a Number';        //手动抛出异常

        }

        if (x >= 0){

                return x;

        }else{

                return -x;

        }

} 

 假设参数存在多个：用arguments关键字

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

function abs(x){

        for(var i = 0; i < arguments.length; i++){

                console.log(arguments[i]);

        }

        if(x >= 0){

                return x;

        }else{

                return -x;

        }

}

arguments：所有参数

rest：获取除了已经定义的参数之外的所有参数

function aaa(a, b, ...rest) {        //注意：rest参数只能写在最后面，并且前面有3个点

        console.log("a -->" + a);

        console.log("b -->" + b);

        console.log(rest);        //rest是个数组

}

变量的作用域：

在JavaScript中，var定义的变量实际上是有作用域的。如果在函数体中声明，就只能在函数体中使用，想要使用函数体外的，只能【闭包】。

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

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

function a(){
    var x = 1;
    x = x++;
}
function b() {
    var x = "张三";
    x = x + "李四";
}

内部函数可以访问外部函数的变量，反之则不行。

如果内部函数变量和外部函数的变量重名：在JavaScript中，函数查找变量会先从里面开始找，找到了就直接用，没找到再找外面的。

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

等价于：

function a(){

        var y;

        var x = "张三" + y;

        console.log(x);

        y = "李四";

} 

全局变量：

全局对象window：

由于我们所有的全局变量都会绑定到我们的window上，如果不同的js文件，使用了相同的全局变量，就会冲突，怎么解决？把自己的代码，全部放入自己定义的唯一空间名字中，降低全局命名冲突的问题。

 局部作用域 let：

  

常量 const：

方法：

1、定义方法：方法就是把函数放在对象里面。对象只有两个东西：属性和方法。

2、调用方法：调用方法的时候，一定要带括号

3、apply：在JavaScript中可以控制this的指向。

刚才定义的那个方法，等价于：

 可以简写成：

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

但是，在js中，apply可以控制this的指向。

// getAge.apply(指向的对象, 要传入的参数);
getAge.apply(z,[]);        //等价于 z.age()

内部对象：

1、Date  

var now = new Date();        //当前时间

now.getFullYear();              //年

now.getMonth();                  //月  0~11月

now.getDate();                    //日

now.getDay();                      //星期几

now.getHours();                  //时

now.getMinutes();               //分

now.getSeconds();             //秒

now.getTime();            //时间戳，全世界统一。表示从1970年1月1日 0:00:00 到现在的毫秒数

转换：

now = new Date(1650014675760);        //把时间戳变成日期格式

//显示结果：Fri Apr 15 2022 17:24:35 GMT+0800 (中国标准时间)

now.toLocaleString();      //显示结果：'2022/4/15 17:24:35'

2、JSON对象

JSON是什么？一种轻量级的数据交换格式。

在JavaScript中，一切皆为对象，任何JS支持的类型都可以用JSON来表示。

格式：

        ①对象、Map都用 {}

        ②数组、List都用 []

        ③所有的键值对都使用 key : value

注意：JSON的key和value都是字符串，整个JSON也是字符串

面向对象编程：

1、原型：

2、class继承：

        2.1、定义一个类：

        2.2、继承：        

 本质：查看对象原型

3、原型链：

Pupil   ------（原型）------>    Sudent     ------（原型）------>      Object      ------（原型）---->……

操作BOM对象（重点）：

JavaScript和浏览器的关系？JavaScript的诞生，就是为了让它能够在浏览器中运行。

BOM：Browser Object Model 浏览器对象模型。

window：代表浏览器窗口

window.innerHeight

window.outerHeight

window.innerWidth

window.outerWidth

navigator（不建议使用）：封装了浏览器的信息

                    大多数时候，我们不会使用navigator对象，因为会被认为修改。

navigator.appName

navigator.appVersion

navigator.userAgent

navigator.platform

screen：代表屏幕尺寸

screen.height

screen.width

location（重要）：代表当前页面的URL信息

host: "localhost:63342"

href: "http://localhost:63342/JavaScript/lesson02/BOM.html?_ijt=e3sbarntq9i5o5rh6fa666p9ks"

protocol: "http:"

reload: ƒ reload()        //刷新网页

//设置新的地址：

location.assign("https://www.baidu.com");

 document：代表当前的页面 

document.title = "海绵宝宝"; 

可以获取具体的文档树节点： 

document.cookie        //获取cookie 

/*

        劫持cookie原理：恶意人员获取你的cookie上传到他的服务器。

        服务端可以设置cookie：httpOnly

*/

 history（不建议使用）：代表浏览器的历史记录

history.back();                //后退

history.forward();           //前进

操作DOM对象（重点）：

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

1、核心：

浏览器网页就是一个DOM树形结构：

        ①更新：更新DOM节点

        ②遍历：得到DOM节点

        ③删除：删除DOM节点

        ④添加：添加DOM节点

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

2、获得DOM节点：

这是原生代码，之后我们会学 jQuery。 

3、更新DOM节点：

操作文本：

① id1.innerText 只能修改文本的值

② id1.innerHTML 可以解析HTML 

 操作JS：

 注意：①属性使用字符串        ②驼峰命名

4、删除DOM节点：

步骤：先获取父节点，再根据父节点删除自己（子节点）

 

注意：

        ①是按id删的

        ②删除多个节点的时候，children的下标是时刻变化的。比如有3个子节点，对应下标 0 1 2，把下标为0的元素删除了之后，剩下的2个子节点的下标又变成了新的 0 1。

5、插入DOM节点

当我们获得了某个DOM节点，如果这个DOM节点是空的，我们可以通过innerText或者innerHTML增加一个元素；但是如果这个DOM节点已经存在元素了，就不能这么干了，会覆盖。

(1)、追加

 使用 cartoon.appendChild(h); 会把灰太狼追加到后面。我的理解是因为id是唯一的，所以之前的那个 id="h" 的标签必须要被干掉。

 注意：

①id不要设置成name，我之前用 name.appendChild(h); 的时候，报错了。因为name这个属性，已经被JS内置了。就算没有设置name属性，name打印出来也是空字符串，而不是undefined。

 ②也可以换成class，get出来是一个数组：

  

(2)、创建一个新的节点：

 

f.id = "f";   等价于 f.setAttribute("id", "f");

 也可以修改body节点：

 (3)、insert

操作表单（验证）：

1、表单是什么？form        DOM树

文本框	text
下拉框	select
单选框	radio
多选框	checkbox
隐藏域	hidden
密码框	password

表单的目的：提交信息

2、获得要提交的信息

 3、提交表单和MD5加密

<!--MD5工具类-->
<script src="https://cdn.bootcss.com/blueimp-md5/2.10.0/js/md5.min.js"/>