10.JavaScript

JavaScript

1.关于===运算符和NaN（number类型）

<script>
        // ==：类型可以不一样，只要值一样就为true
        //===：类型和值都一样就为true
        //NaN与所有的类型都不相等，包括自己
        console.log(NaN == NaN);//false
        console.log(NaN === NaN);//false
        console.log(isNaN(NaN));//true
    </script>

2.浮点数精度损失

这一点和java一样，减量避免使用浮点数进行运算，存在精度问题！

console.log(1/3) === (1-2/3); //false

可以利用两浮点数相差小于一个极小的数，近似相等

console.log(Math.abs(1/3-(1-2/3))< 0.00000001); //true

3.对象的定义及使用

Js中对象，{……}表示一个对象，键值对描述属性xxxx: xxxx，多个属性之间使用逗号隔开，最后一个属性不加逗号！
更多的关于对象的知识访问w3cschool

 var person = {
            name: "zhonguo",
            age: 1500,
            tag:['js','java','web','...']
        }
        console.log(person.name); //zhonguo

4.ES6新特性

1）模板字符串

		//利用单引号''或则双引号""多行字符串拼写
        let str1 = '你好呀' +
            'world' +
            'hello';
        //利用``多行字符串拼写
        let str2 = `你好呀
                    world
                    hello`;
        let name = "zhonghuaernv";
        let age = 3000;
        //模板字符串
        let str3 = '你好呀，${mame}${age}';//利用利用单引号''或则双引号""进行模板字符串就不得行
        let str4 = `你好呀，${name}${age}`;//利用``进行模板字符串就可以,这里的功能是拼接字符串

输出结果：

2）利用”use strict“;可以进行严格检查语法，下面的i变红就表示语法有误(如果不使用则不会变红）。

3）Map和Set
和java的Map、Set很像，map存储的是键值对数据，set存储的是无序不重复的数据
初始化Map需要一个二维数组,键和值都可以是任何类型的，不一定非要是string类型
Map常用方法：
get（），通过键获取该值
set（），添加新的键值对,添加成功放回true
has（），包含指定键则返回true，否则返回false
delete（），删除指定的键 ,删除成功返回true

var m = new Map([['Michael', 95], ['Bob', 75], ['Tracy', 85]]);    //初始化需要一个二维数组
m.get('Michael'); // 95
m.set('Adam', 67); // 添加新的key-value
m.get('Adam'); // 67

m.has('Adam'); // true
m.delete('Adam'); // 删除key 'Adam'

Set常用方法：数据值可以是任何类型的，不一定非要是string类型
add（），添加新的值，添加成功放回true
has（），包含指定键则返回true，否则返回false
delete（），删除指定值，删除成功返回true

var s = new Set([1, 2, 3, 3]); // 含1, 2, 3
s.add(4);
s; // {1, 2, 3, 4}
s.delete(3);
s; // Set {1, 2, 4}
s.has(5);//false

4）iterator遍历数组、Map、Set

//遍历数组
var arr = [3,4,5]
for(var x of arr){
    console.log(x)
}
//遍历Map
var map = new Map([["tom",100],["jack",90],["haha",80]]);
for(let x of map){
    console.log(x)
}
//遍历Set
var set = new Set([5,6,7]);
for (let x of set){
    console.log(x)
}

5）作用域，let、var、const关键字
var定义的变量作用域在最内层的块级作用域中，如果在最外层块级作用域定义则表示全局变量，内层定义的就是局部变量。被定义为全局的变量会自动绑定到window对象下,可以通过window.变量名访问。

<script>
    var x = 'xxx';//全局变量
    alert(x);
    alert(window.x);//默认所有的全局变量，都会自动绑定在window对象下,所以可以通过.访问
</script>

但有时候会存在局部变量出了块级作用域还能使用(但在函数中var定义的局部变量确实出了块级作用域不能使用，所以下面演示的就是js的一个bug，所以后被ES6的let替代了局部变量的位置)，建议大家都用let 去定义局部作用域的变量。

<script>
	function qj(){    
		var x = 1;    
		x = x + 1;
	} 
	x = x + 2;//Uncaught ReferenceError: x is not defined ，说名作用域外不能访问x
	
	/但下面这个i局部变量存在问题
	function f(){
	    for (var i = 0; i <100; i++){
	        console.log(i)
	    }
	    console.log(i+1);//var定义的局部变量出了块级作用域还能使用，bug
	}
</script>

<script>
	function f(){
	    for (let i = 0; i <100, i++){
	        console.log(i)
	    }
	    console.log(i+1);//输出undifiend，说明没有定义
	}
</script>

在ES6 引入了常量关键字const，常量不能被修改。

<script>
    const PI = '3.14'; //只读常量，不能修改
    console.log(PI);
    PI = '123'; //TypeError: Assignment to constant variable
    console.log(PI);
</script>

JavaScript实际上只有一个全局变量，任何变量（函数也可以视为变量），假设没有在函数作用范围内找到，就会向外查找，如果在全局作用域都没有找到，报错RefrenceError。
由于我们所有的全局变量都会绑定到我们的 window 上，如果不同的js文件，使用了相同的全局变量，就会造成冲突。
所以养成规范：把自己的代码全部放到自己定义的唯一空间名字中，降低全局命名冲突的问题~(jQuery就是这样的,在里面有属性，也有方法）。

<script>
    var KuangApp = {};//唯一全局变量对象,这样就避免存在多个全局变量
    KuangApp.name = 'kuangshen';//在全局变量下定义属性
    KuangApp.add = function(a,b){ //在全局变量下定义方法
        return a+b;
    };
</script>

6)对象原型继承、class继承
原型继承：xiaoming对象要使用run方法是不可能的，只有通过xiaoming.proto =student（xiaoming原型继承student），这样就可以使用xiaoming.run()。

通过对象的prototype找到原型来添加方法

class继承：(越来越像java了）

class Student{
    constructor(name) {
        this.name = name;
    }
    hello(){
        alert('hello')
    }
}
class XiaoStudent extends Student{	//与xiaostudent.__proto__=student一样
    constructor(name,grade) {
        super(name);
        this.grade = grade;
    }
    myGrade(){
        alert('我是一名小学生')
    }
}
var xiaoming = new Student("xiaoming");
var xiaohong = new XiaoStudent("xiaohong");

5.this、function的apply方法

this:表示调用该方法的对象
apply（）：第一个参数表示要访问的对象this，第二个数组参数是表示调用apply（）的函数的实参(下图中因为 getAge函数是没有参数的，所以要么不写，要么为空数组)

<script>
        var kuangshen = {
            name: 'qinjiang',
            birth: 2000,
            age: getAge
            // age:function () {
            //     let now = new Date().getFullYear();
            //     return now-this.birth;
            // }
        }

        function getAge(){
            let now = new Date().getFullYear();
            return now-this.birth;
        }
        kuangshen.age();    //21	this就是kuangshen
        getAge();   //NaN	this就是window，但明显window没有birth属性
        getAge.apply(kuangshen,[]); //21	this就是kuangshen，getAge没有参数，所以第二个参数为空数组
    </script>

6.BOM

7.DOM

1）获得DOM节点
document.getElementsByTagName():通过标签名获取所有该标签节点对象，返回一个数组
document.getElementById():通过id获取该标签节点对象
document.getElementsByClassName():通过class获取所有该相同class值的节点对象，返回一个数组
2)更新DOM节点
innerHTML://设置或返回该标签节点内容
style:添加css样式
3)删除DOM节点
删除节点步骤：先获取父节点，通过父节点删除，不能自己删自己

  <div id="father">
        <h1>标题</h1>
        <p id="p1">p1</p>
        <p class="p2">p2</p>
  </div>

  <script>
      //获得
      var h1 = document.getElementsByTagName('h1');   //通过标签获得该标签元素对象节点数组
      var p1 = document.getElementById('p1');  //通过id获得该标签元素对象节点
      var p2 = document.getElementsByClassName('p2');    //通过class获得该标签元素对象节点数组
      //更新
      h1[0].innerHTML = "改变内容";   //设置或返回该标签节点内容
      p1.style.color = "red";
      //删除
      //1.获取父节点
      var father = p1.parentElement;//间接获取,和p1.parentNode效果一样，都是获取父节点对象
      // 直接获取 var father = document.getElementById("father")
      father.removeChild(p1);//参数为要删除的子节点对象
      //删除是一个动态的过程，删除一个少一个
      father.removeChild(father.children[0])
      father.removeChild(father.children[0])
  </script>

4)插入DOM节点
我们获得某个DOM节点，假设这个dom节点是空的，我们通过 innerHTML 就可以增加一个元素了。如果这个DOM节点已经存在元素了，我们就不能这么干了，会产生覆盖!
appendChild（）：添加子节点到该父节点的最后，参数为要添加的子节点对象
insertBefore（）：在指定的子节点前插入新的子节点。

<p id="js">JavaScript</p>
<div id="list">
    <p id="se">JavaSE</p>
    <p id="ee">JavEE</p>
    <p id="me">JavaME</p>
 </div>
<script>
    var js = document.getElementById('js');
    var list = document.getElementById('list');
    var ee = document.getElementById('ee');
    var me = document.getElementById('me');
    //从已有节点对象中作为子节点进行添加
    list.appendChild(js); //id为js的p标签添加到了id为list的div标签的最后

    //通过创建新的标签对象来作为子节点进行添加
    var newP = document.createElement('p'); //创建一个p标签对象
    newP.id = 'newP';
    newP.innerHTML = 'Hello,world';
    list.appendChild(newP);
    list.insertBefore(me,ee);
</script>

8.表单验证之md5加密

不用md5加密技术，在输入密码是打开网络查看元素能看到用户输入的密码，使用md5加密技术以后密码会被加密显示

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!-- 添加md5加密文件-->
    <script src="https://cdn.bootcss.com/blueimp-md5/2.10.0/js/md5.min.js"></script>
</head>
<body>
<form action="#" method="post">
    <p>
        <span>用户名：</span> <input type="text" id="username" name="username" >
    </p>
    <p>
        <span>密码：</span> <input type="password" id="password" name="password">
    </p>
    <!--    绑定事件 onclick 被点击-->
    <button type="submit" onclick="aaa()">提交</button>
</form>
<script>
    function aaa(){
        var username = document.getElementById('username');
        var pwd = document.getElementById('password');
        console.log(username.value)
        console.log(pwd.value)
        // pwd.value = '******'; //低端操作
        //MD5 算法 (高端操作)
        pwd.value = md5(pwd.value);
        console.log(pwd.value);
    }
</script>

9.JQuery

JQuery是js的一个快速便捷开发库
API文档：https://jquery.cuishifeng.cn/
导入方式1： 浏览器搜索cdn jquery，然后复制链接,导入

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!-- 导入jquery库-->
    <script src="https://lib.baomitu.com/jquery/3.5.1/jquery.js"></script>
</head>

导入方式2： 浏览器搜索jquery官网，下载jquery源文件（非压缩的文件，开发或调试期间使用）,然后在项目中新建lib目录将jquery源文件放在其中，

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--本地导入jquery库-->
    <script src="lib/jquery-3.6.0.js"></script>
</head>

jquery语法： $(selector).action()，其中$是jquery缩写，selector是选择器（和css一样），action是要对选择的该元素进行的操作。 如图语法使用:

<a href="" id="test-jquery">点我</a>
    <script>
        选择id为test-jquery的a标签对象，当a标签对象被点击时执行function内的代码
        $('#test-jquery').click(function (){
            alert('hello,jQuery')
        })
    </script>