开发: C++知识库 Java知识库 JavaScript Python PHP知识库人工智能区块链大数据移动开发嵌入式开发工具数据结构与算法开发测试游戏开发网络协议系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑笔记本显卡显示器固态硬盘硬盘耳机手机 iphone vivo oppo 小米华为单反装机图拉丁

-> JavaScript知识库 -> Java学习笔记(No.24) -> 正文阅读

[JavaScript知识库]Java学习笔记(No.24)

Java之JavaScript详解(No.24)

1、JavaScript

? JavaScript是一门流行的脚本语言，一个合格的后端编程人员，必须要精通JavaScript。

? ECMAScript是JavaScript的一个标准。其目前最新版为ES6，但大部分浏览器还停留在只支持ES5版本代码(一般容易会出现“开发环境”与“上线环境”版本不一致的问题)。

? 使用JavaScript时，需熟练掌握并运用浏览器开发者工具中最常用四个功能模块。

2、两种JavaScript导入方式(Two JavaScript Import Methods)

2.1、JavaScript内部导入方式(JavaScript Internal Import Method)。

? 其HTML示例代码，如下所示。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JavaScript内部导入方式</title>
    <!--
    JavaScript内部导入方式:JavaScript开放标签与闭合标签之间的都是JavaScript代码。
    JavaScript标签必须成对存在，且其中type不用显示定义，默认就是“text/javascript”。
    JavaScript标签代码中，可以使用全部用单引号(')括起来的字符串，也可以使用全部用双引号(")括起来的字符串，一般建议使用双引号。
    -->
    <script type="text/javascript">
        alert("\"JavaScript内部导入方式!\"");
        // alert('\'JavaScript内部导入方式!\'');
    </script>
</head>
<body>
</body>
</html>

2.2、JavaScript外部导入方式(JavaScript External Import Method)。

? 其HTML示例代码，如下所示。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JavaScript外部导入方式</title>
    <!--
    JavaScript外部导入方式:JavaScript开放标签与闭合标签之间的都是JavaScript代码。
    JavaScript标签必须成对存在，其中src代表外部导入的JavaScript文件路径，且其中type不用显示定义，默认就是“text/javascript”。
    -->
    <script src="../../../javascript/JavaScript外部导入方式.js" type="text/javascript"></script>
</head>
<body>
</body>
</html>

? 其JavaScript示例代码，如下所示。

//JavaScript代码中，可以使用全部用单引号(')括起来的字符串，也可以使用全部用双引号(")括起来的字符串，一般建议使用双引号。
alert("\"JavaScript外部导入方式!\"");
// alert('\'JavaScript外部导入方式!\'');

3、JavaScript基本语法(JavaScript Basic Grammar)

? 其HTML示例代码，如下所示。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JavaScript基本语法</title>
    <!--JavaScript严格区分大小写-->
    <script>
        //1、定义变量：变量类型 变量名=变量值
        var score=90;
        //2、条件控制
        if(score>=0 && score<60){
            alert("0~59");
        }else if(score>=60 && score<90){
            alert("60~89");
        }else if(score>=90 && score<=100){
            alert("90~100");
        }else{
            alert("不在0~100之间");
        }
        console.log(score);//在浏览器的控制台打印输出变量
    </script>
</head>
<body>
</body>
</html>

4、JavaScript严格检查格式(JavaScript Strict Check Format)

? 其HTML示例代码，如下所示。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JavaScript严格检查格式</title>
    <!--
    严格检查格式的前提：IDEA需设置支持ES6版本语法
    "use strict";代表“严格检查格式”，预防JavaScript的随意性导致的一些问题，
    且必须写在JavaScript代码中的首行，其中局部变量建议都使用“let”定义
    -->
    <script>
        "use strict";//严格检查格式
        for (var i = 0; i < 10; i++) {
            console.log(i + 1);
        }
        console.log(i + 1);//11
        for (let j = 0; j < 10; j++) {
            console.log(j + 1);
        }
        console.log(j + 1);//异常：Uncaught ReferenceError: j is not defined
    </script>
</head>
<body>
</body>
</html>

5、JavaScript数据类型(JavaScript Data Type)

5.1、字符串(String)。

? 其HTML示例代码，如下所示。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>字符串</title>
</head>
<body>
<script>
    //正常字符串可以使用用单引号(')包裹起来，也可以使用全部用双引号(")包裹起来，一般建议使用双引号包裹起来。
    //1、转义字符，使用反斜杠符号\。
    var escapeCharacter1="\'";//单引号字符
    console.log(escapeCharacter1);
    var escapeCharacter2="\r";//回车字符
    console.log(escapeCharacter2);
    var escapeCharacter3="\n";//换行字符
    console.log(escapeCharacter3);
    var escapeCharacter4="\t";//制表字符
    console.log(escapeCharacter4);
    var escapeCharacter5="\u4e2d";//Unicode字符，汉字“中”
    console.log(escapeCharacter5);
    var escapeCharacter6="\x43";//ASCII字符，字母“C”
    console.log(escapeCharacter6);
    //2、多行字符串，使用反单引号(即，反引号)符号`。
    var multiLineString= `多
行
字
符
串`;
    console.log(multiLineString);
    //3、模板字符串，使用反单引号(即，反引号)符号`+美元符号$+花括号{}包裹。
    var templateString="模板字符串";
    var msg=`这是${templateString}`;
    console.log(msg);
    //4、字符串长度
    var stringLength=msg.length;
    console.log(stringLength);
    //5、字符串的可变性：不可变。
    console.log(msg[0]);
    msg[0]="那";
    console.log(msg[0]);
    //6、字符串大小写转换，使用toUpperCase()与toLowerCase()方法。
    var stringUpperCase="1aBcDe".toUpperCase();//转换为大写字符串
    console.log(stringUpperCase);
    var stringLowerCase="2AbCdE".toLowerCase();//转换为小写字符串
    console.log(stringLowerCase);
    //7、获取字符串中指定元素的下标位置，使用indexOf()方法。
    var stringIndexOf="123456789".indexOf("1");
    console.log(stringIndexOf);
    //8、获取字符串中指定区间范围内的子字符串，使用substring()方法。
    var stringSubstring1="123456789".substring(0);//获取字符串中从下标0开始到最大下标之间的子字符串
    console.log(stringSubstring1);
    var stringSubstring2="123456789".substring(0,3);//获取字符串中从下标0开始到下标2(即，3-1)之间的子字符串
    console.log(stringSubstring2);
</script>
</body>
</html>

5.2、数组(Array)。

? 其HTML示例代码，如下所示。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>数组</title>
</head>
<body>
<script>
    /**
     * 数组：Array，可以包含任意的数据类型，且通过下标赋值与取值
     * 特别注意：更改数组长度时，数组大小会发生变化，若赋值过小，其部分数组元素会丢失。
     */
    //1、获取数组长度
    var arr1 = [1, "1", null, false];
    console.log(arr1.length);
    var arr2 = new Array("1", 1, 5, 3, 9, 7, null, true);
    console.log(arr2.length);
    //2、获取数组中指定元素的下标位置，使用indexOf()方法。
    var arrIndex = arr1.indexOf("1");
    console.log(arrIndex);
    //3、slice()：截取数组的一部分，返回一个新数组，类似于字符串中的substring()。
    var arr3 = arr2.slice(1, 7);//获取数组中从下标1开始到下标6(即，7-1)之间的子数组
    console.log(arr3);
    //push()：压入指定元素至数组尾部(即，插入指定元素至数组尾部)
    arr3.push(['push']);
    console.log(arr3);
    //pop()：弹出数组尾部的一个元素(即，移除数组尾部的元素)
    arr3.pop();
    console.log(arr3);
    //unshift()：压入指定元素至数组头部(即，插入指定元素至数组头部)
    arr3.unshift(['unshift']);
    console.log(arr3);
    //shift()：弹出数组头部的一个元素(即，移除数组头部的元素)
    arr3.shift();
    console.log(arr3);
    //sort()：排序数组元素
    arr3.sort();
    console.log(arr3);
    //reverse()：反转数组元素
    arr3.reverse();
    console.log(arr3);
    //concat()：拼接指定的数组元素，并不会修改拼接前的原数组，而是返回一个拼接后的新数组
    var arr4 = arr3.concat([8, 2, 6]);
    console.log(arr4);
    //join()：指定连接字符串拼接数组元素
    console.log(arr4.join('-').substring(1,arr4.join('-').length));
    //多维数组
    var arr5=[[1,'a'],[2,"b"],[3,false]];
    console.log(arr5[1][1]);
    var arr6=new Array([1,'a'],[2,"b"],[3,false])
    console.log(arr6[1][1]);
</script>
</body>
</html>

5.3、对象(Object)。

? 其HTML示例代码，如下所示。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>对象</title>
</head>
<body>
<script>
    /*
    * 对象：{......}表示一个对象，包含若干个键值对，每个键值对表示一个属性，多个属性之间使用逗号隔开，最后一个属性不加逗号。
    * 特别注意：JavaScript对象中所有的键都是字符串，所有的值是任意对象。
    * */
    //1、定义对象
    var person={
        id:1,
        name:"xueshanxuehai",
        age:22,
        mobilephone:"12345678901"
    }
    console.log(person);
    //2、对象赋值
    person.name="学山学海";
    console.log(person);
    //3、使用一个不存在的对象属性，不会报错，只会提示Undefined
    console.log(person.job);
    //4、动态的删减对象属性：通过delete删除对象的属性
    delete person.name;
    console.log(person);
    //5、动态的添加对象属性：直接给新的属性添加值即可
    person.job="Java后台";
    console.log(person);
    //6、判断对象属性或方法是否存在于这个对象中，其语法为：'对象属性或方法' in 对象。
    console.log('name' in person);
    console.log('job' in person);
    console.log('toString' in person);
    //7、判断对象属性或方法是否为这个对象自身拥有的：其语法为：对象.hasOwnProperty('对象属性或方法')。
    console.log(person.hasOwnProperty('job'));
    console.log(person.hasOwnProperty('toString'));
</script>
</body>
</html>

5.4、流程控制(Process Control)。

? 其HTML示例代码，如下所示。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>流程控制</title>
</head>
<body>
<script>
    //1、if判断
    var age=22;
    if(age>=0 && age<=59){
        console.log("0~59");
    }else if(age>=60 && age<=100){
        console.log("0~59");
    }else{
        console.log("不在0~100之间");
    }
    //2、while循环：尽量避免死循环
    age=20;
    while(age<100){
        age++;
        console.log(age);
    }
    //3、do-while循环：尽量避免死循环
    age=30;
    do{
        age++;
        console.log(age);
    }while(age<100);
    //4、for循环：尽量避免死循环
    for (let i = 0; i < 100; i++) {
        console.log(i+1);
    }
    //5、for-Each循环：尽量避免死循环
    var fe=[1,2,3,2,1];
    fe.forEach(function (value) {
        console.log(value);
    })
    fe.forEach(function (value, index, array) {
        console.log(value, index, array);
    });
    //6、for-in循环：循环遍历的是对象属性，而不是数组索引，所以for-in可以遍历数组，也可以遍历对象。
    for (const feKey in fe) {
        if(fe.hasOwnProperty(feKey)){
            console.log("数组自身拥有的元素："+fe[feKey]);
        }
    }
    var forIN={
        id:1,
        name:"For-In",
        f1:"F1",
        f2:"F2",
        f3:"F3"
    }
    for (const forINKey in forIN) {
        if(forIN.hasOwnProperty(forINKey)){
            console.log("对象自身拥有的属性："+forIN[forINKey]);
        }
    }
</script>
</body>
</html>

5.5、Map和Set。

? Map和Set是ES6的新特性。

? Map是一组键值对的结构，具有极快的查找速度。

? Set和Map类似，也是一组key的集合，但不存储value。由于key不能重复，所以，在Set中，没有重复的key。要创建一个Set，需要提供一个Array作为输入，或者直接创建一个空Set。

? 其HTML示例代码，如下所示。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Map和Set</title>
</head>
<body>
<script>
    /**
     * Map：是一组键值对的集合(即，无序不重复集合)，具有极快的查找速度。
     * Set：是一组key键的集合(即，无序不重复集合)，但不存储value值。
     */
    //1、Map集合
    var mapCollection=new Map([['001',1],['005',5],['002',2],['001',4]]);
    console.log(mapCollection);
    console.log(mapCollection.get('001'));//通过key获取value
    mapCollection.set('004',4);//新增或修改指定key与value
    console.log(mapCollection);
    mapCollection.delete('002');//删除指定key及其value
    console.log(mapCollection);
    console.log(mapCollection.has('004'));//是否包含指定key
    //2、Set集合
    var setCollection=new Set(['001','005','003','001']);
    setCollection.add(1);//添加指定key
    console.log(setCollection);
    setCollection.delete('003');//删除指定key
    console.log(setCollection);
    console.log(setCollection.has(1));//是否包含指定key
</script>
</body>
</html>

5.6、Iterator。

? Iterator是ES6的新特性。

? 其HTML示例代码，如下所示。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Iterator</title>
</head>
<body>
<script>
    /**
     * Iterator：使用Iterator迭代遍历数组、Map集合、Set集合。
     */
    //1、遍历数组
    var iterArr=[1,5,9,2,6];
    for (const number of iterArr) {
        console.log(number);
    }
    //2、遍历Map集合
    var iterMap=new Map([['1',1],['5',5],[1,1],['3',3]]);
    for (const iterMapElement of iterMap) {
        console.log(iterMapElement);
    }
    //3、遍历Set集合
    var iterSet=new Set(['1','7',5,3]);
    for (const iterSetElement of iterSet) {
        console.log(iterSetElement);
    }
</script>
</body>
</html>

6、JavaScript函数(JavaScript Function)

6.1、函数定义(Function Definition)。

? 其HTML示例代码，如下所示。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>函数定义</title>
</head>
<body>
<script>
    //1、函数定义方式1：一旦执行到return代表函数结束，返回结果；若没有执行到return，函数执行完后也会返回结果“Undefined”。
    function abs1(x) {
        if(x>=0){
            return x;
        }else{
            return -x;
        }
    }
    console.log(abs1(11));//调用函数
    console.log(abs1(-11));//调用函数
    //2、函数定义方式2：是一个匿名函数，但可以把结果赋值给abs2，通过abs2就可以调用函数。
    var abs2=function (x) {
        if(x>=0){
            return x;
        }else{
            return -x;
        }
    }
    console.log(abs2(11));//调用函数
    console.log(abs2(-11));//调用函数
    /**
     * JavaScript可以传递任意个参数，也可以不传递参数。
     * 3、参数问题1：若不存在传递参数或传递参数类型不一致，如何避免？
     */
    var abs3=function (x) {
        //手动抛出异常判断
        if((typeof x)!=='number'){
            throw 'Not A Number';
        }
        if(x>=0){
            return x;
        }else{
            return -x;
        }
    }
    // console.log(abs3('a'));//调用函数
    /**
     * arguments关键字代表函数传递的所有参数，是一个数组(即，参数数组)。
     * 4、参数问题2：若要使用多余的参数来进行附加操作，如何排除已定义参数？
     * ES6新特性：...rest，代表已定义参数之外的所有参数，且...rest只能写在参数列表的最后面。
     */
    var abs4=function (x,...rest) {
        for (let i = 0; i < arguments.length; i++) {
            console.log(arguments[i]);
        }
        if(x>=0){
            return x;
        }else{
            return -x;
        }
    }
    console.log(abs4(-11,1,2,3,['1',1],[2]));//调用函数
</script>
</body>
</html>

6.2、变量作用域(Variable Scope)。

? 其HTML示例代码，如下所示。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>变量作用域</title>
</head>
<body>
<script>
    /**
     * JavaScript中，var定义变量实际是有作用域的。
     */
    //1、在函数体中声明，则在函数体外不可使用(若一定要实现使用，后续可以研究一下”闭包“)
    function f1() {
        var x = 1;
    }

    //x++;//抛出异常：x is not defined
    //2、若2个函数使用了相同的变量名，只要在函数内部，就不冲突
    function f2() {
        var x = 2;
        return x;
    }

    function f2_1() {
        var x = 3;
        return x;
    }

    console.log(f2());
    console.log(f2_1());

    //3、内部函数可以访问外部函数的成员，反之则不行
    function f3() {
        var x = 4;

        function f3_1() {
            var y = x + 1;
            return y
        }

        console.log(f3_1());
        //var z=x+y;//抛出异常：y is not defined
        return x;
    }

    console.log(f3());

    //4、若内部函数变量和外部函数变量重名，会由内向外查找，即，内部函数会屏蔽外部函数的重名变量。
    function f4() {
        var x = 5;

        function f4_1() {
            var x = 5.1;
            return x;
        }

        console.log(f4_1());
        return x;
    }

    console.log(f4());

    /**
     * 5、提升变量作用域：JavaScript执行引擎，自动提升稍晚声明变量的声明，但不会提升稍晚声明变量的赋值。
     * 特别注意：建议将所有的变量定义都放在函数的头部，便于代码维护管理，养成良好的编码规范。
     */
    function f5() {
        var x = "x" + y;
        console.log(x);
        var y = "y";
        return y;
    }

    console.log(f5());

    function f5_1() {
        var y = "y", x = "x" + y;
        console.log(x);
        return y;
    }

    console.log(f5_1());
    /**
     * 6、全局作用域：全局变量、全局函数、全局对象(window)。
     * 特别注意：
     * 6.1、默认所有的全局变量都会自动绑定在全局对象(window)下；
     * 6.2、JavaScript实际上只有一个全局作用域，任何变量(函数也可以视作变量)，若没有在函数作用域内找到，就会向外查找，若在全局作用域都没有找到，则提示“Undefined”；
     * 6.3、将所有代码全部放入自定义的唯一空间名字中，降低全局命名冲突的问题。
     */
    var x = "全局变量";
    function f6() {//全局函数
        console.log(x);
    }
    f6();
    console.log(x);
    console.log(window.x);//默认所有的全局变量都会自动绑定在全局对象(window)下
    // window.alert(x);
    window.alert = function () {};//重新定义window对象的alert方法
    window.alert(x);//提示“Undefined”
    //定义唯一全局变量：唯一全局对象、唯一全局变量、唯一全局函数。
    var myApp={};//唯一全局对象
    myApp.name="xueshanxuehai";//唯一全局变量
    myApp.add=function (a,b) {//唯一全局函数
        return a+b;
    }
    console.log(myApp);
    console.log(myApp.name);
    console.log(myApp.add(1,2));
    /**
     * 7、局部作用域：定义局部作用域的变量时，土建使用let关键字(ES6新特性)，可以解决var关键字的局部作用域冲突问题。
     */
    function f7_1() {
        for (var i = 0; i < 10; i++) {
            console.log(i+1);
        }
        console.log(i+1);//异常结果：变量i出了for循环作用域还能使用
    }
    f7_1();
    function f7_2() {
        for (let i = 0; i < 10; i++) {
            console.log(i+1);
        }
        // console.log(i+1);//正常结果：变量i出了for循环作用域不能使用，会提示异常“Uncaught ReferenceError: i is not defined”
    }
    f7_2();
    /**
     * 8、常量(const)：ES6新特性，可以将变量定义为只读变量(即，不允许再赋值改变)，推荐使用。
     * 特别注意：ES6之前，统一要求只有全部大写字母命名的变量才是常量，不利于代码维护，不建议使用。
     */
    var PI1="3.14159";
    console.log(PI1);
    PI1="3.14";
    console.log(PI1);
    const PI="3.1415";//常量(只读变量)
    console.log(PI);
    // PI="3.1";//提示异常"Uncaught TypeError: Assignment to constant variable."
    // console.log(PI);
</script>
</body>
</html>

6.3、方法定义(Method Definition)。

? 其HTML示例代码，如下所示。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>方法定义</title>
</head>
<body>
<script>
    /**
     * 方法定义：方法就是把函数放到对象中，且对象只有两个东西“属性和方法”。
     * 特别注意：
     * 1、在JavaScript中，this是无法指向的，默认指向调用它的那个对象。
     * 2、在JavaScript中，使用apply方法可以控制this指向。
     */
    //方法定义方式1
    var person1={
        name:"xsxh",
        birthYear:1991,
        age:function () {
            var nowYear=new Date().getFullYear();
            return nowYear-this.birthYear;
        }
    };
    console.log(person1.name);
    console.log(person1.age());
    //方法定义方式2
    function getAge() {
        var nowYear=new Date().getFullYear();
        return nowYear-this.birthYear;
    }
    var person2={
        name:"xsxh",
        birthYear: 1991,
        age:getAge
    };
    console.log(person2.name);
    console.log(person2.age());
    /**
     * apply方法：在JavaScript中，使用apply方法可以控制this指向。
     * 特别注意：在JavaScript中，this是无法指向的，默认指向调用它的那个对象。
     */
    var person3={
        name:"学山学海",
        birthYear:2001,
        age:getAge
    }
    console.log(getAge.apply(person2,[]));//this指向对象person2，参数为空
    console.log(getAge.apply(person3,[]));//this指向对象person3，参数为空
</script>
</body>
</html>

7、JavaScript内部对象(JavaScript Internal Object)

7.1、标准对象(Standard Object)。

? 其HTML示例代码，如下所示。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>标准对象</title>
</head>
<body>
<script>
    console.log(typeof 123);//number
    console.log(typeof 123.321);//number
    console.log(typeof '123.123');//string
    console.log(typeof true);//boolean
    console.log(typeof NaN);//number
    console.log(typeof []);//object
    console.log(typeof {});//object
    console.log(typeof Math.abs);//function
    console.log(typeof undefined);//undefined
</script>
</body>
</html>

7.2、Date对象(Date Object)。

? 其HTML示例代码，如下所示。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Date对象</title>
</head>
<body>
<script>
    //1、基本使用
    var nowDate = new Date();//当前日期时间
    console.log(nowDate);
    console.log(nowDate.getFullYear());//年份
    console.log(nowDate.getMonth());//月份(0~11)
    console.log(nowDate.getDate());//日
    console.log(nowDate.getDay());//星期几
    console.log(nowDate.getHours());//小时
    console.log(nowDate.getMinutes());//分钟
    console.log(nowDate.getSeconds());//秒
    console.log(nowDate.getMilliseconds());//毫秒
    console.log(nowDate.getTime());//时间戳，全世界统一，从1970/01/01 00:00:00开始的毫秒数
    //2、基本转换
    var timeStamp = nowDate.getTime();//时间戳，全世界统一，从1970/01/01 00:00:00开始的毫秒数
    nowDate = new Date(timeStamp);//将时间戳转换为日期时间
    console.log(nowDate);
    console.log(nowDate.toLocaleString());//本地日期时间字符串
    console.log(nowDate.toUTCString());//UFC日期时间字符串
</script>
</body>
</html>

7.3、JSON对象(JSON Object)。

? JSON(JavaScript Object Notation, JS 对象简谱) 是一种轻量级的数据交换格式。

? 简洁和清晰的层次结构使得 JSON 成为理想的数据交换语言。

? 易于人阅读和编写，同时也易于机器解析和生成，并有效地提升网络传输效率。

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

? 其HTML示例代码，如下所示。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JSON对象</title>
</head>
<body>
<script>
    /**
     * 在JavaScript中，一切皆为对象，任何JavaScript支持的类型都可以用JSON来表示
     * JSON(JavaScript Object Notation,js对象简谱)对象
     * 其语法格式为：
     * 1、使用对象：值为字符串时，'{"key1":"value1","key2":"value2",...}'，
     *           值不为字符串时，'{"key1":value1,"key2":value2,...}'；
     * 2、使用数组：值为字符串时，'[{"key11":"value11","key12":"value12"},{"key21":"value21","key22":"value22"},...]'，
     *           值不为字符串时，'[{"key11":value11,"key12":value12},{"key21":value21,"key22":value22},...]'；
     * 3、使用键值对：值为字符串时，"key":"value"，
     *             值不为字符串时，"key":value。
     */
    //1、JavaScript对象
    var javaScriptObject={id:1,name:"JavaScript"};
    console.log(javaScriptObject);
    //2、JavaScript对象转换为JSON对象
    console.log(JSON.stringify(javaScriptObject));
    //3、JSON对象
    var jsonObject='{"id":2,"name":"JSON"}';
    console.log(jsonObject);
    //4、JSON对象转换为JavaScript对象
    console.log(JSON.parse(jsonObject));
    //5、JavaScript数组
    var javaScriptArr=[[{k11:"v11"},{k12:"v12"}],[{k21:"v21"},{k22:"v22"}]];
    console.log(javaScriptArr);
    //6、JavaScript数组转换为JSON数组
    console.log(JSON.stringify(javaScriptArr));
    //7、JSON数组
    var jsonArr='[[{"k11":"v11"},{"k12":"v12"}],[{"k21":"v21"},{"k22":"v22"}]]';
    console.log(jsonArr);
    //8、JSON数组转换为JavaScript数组
    console.log(JSON.parse(jsonArr));
</script>
</body>
</html>

8、JavaScript面向对象编程(JavaScript Object-Oriented Programming)

? 其HTML示例代码，如下所示。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JavaScript面向对象编程</title>
</head>
<body>
<script>
    /**
     * JavaScript面向对象编程本质：查看对象原型
     */
    //1、原型继承：原型对象
    var dog={
        name:"小黄",
        age:1,
        run:function () {
            console.log(this.name+","+this.age+",run");
        }
    };
    var dog1={name:"小红"};
    console.log(dog1);
    dog1.___Proto___=dog;//对象dog1的原型对象为dog
    console.log(dog1);
    var bird={
        fly:function () {
            console.log(this.name+","+this.age+",fly");
        }
    }
    //
    dog1.___Proto___=bird;//对象dog1的原型对象为bird
    console.log(dog1);
    //2、class继承：ES6新特性
    class Dog{//定义一个Dog类
        constructor(name) {
            this.name=name;
        }
        run(){
            alert('Run');
        }
    }
    class Dog1 extends Dog{//定义一个Dog1类，继承Dog类

        constructor(name,age) {
            super(name);
            this.age=age;
        }
        getAge(){
            alert('getAge');
        }
    }
    var d1=new Dog("小红");
    console.log(d1);
    var d2=new Dog1("小黄",1);
    console.log(d2);
</script>
</body>
</html>

9、JavaScript操作BOM对象(JavaScript Manipulate BOM Objects)

? 其HTML示例代码，如下所示。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JavaScript操作BOM对象</title>
</head>
<body>
<dl id="app">
    <dt>HTML5</dt>
    <dt>CSS3</dt>
    <dt>JavaScript</dt>
</dl>
<script>
    /**
     * BOM(Browser Object Model,浏览器对象模型)：主要用于Web开发中客户端浏览器的管理。
     */
    //1、window对象:代表浏览器的窗口
    // console.log(window.alert("window"));//弹窗
    console.log(window.innerWidth);//返回窗口的文档显示区的宽度
    console.log(window.innerHeight);//返回窗口的文档显示区的高度
    console.log(window.outerWidth);//返回窗口的外部宽度
    console.log(window.outerHeight);//返回窗口的外部高度
    /**
     * 2、navigator对象:封装了浏览器的信息
     * 特别注意：大多数时候不会使用navigator对象，会被人为修改，所以不建议使用其属性判断及编写代码。
     */
    console.log(navigator.appName);//浏览器的名称
    console.log(navigator.appVersion);//浏览器的平台和版本信息
    console.log(navigator.appCodeName);//浏览器的代码名
    console.log(navigator.userAgent);//浏览器用于HTTP请求的用户代理头的值
    console.log(navigator.platform);//运行浏览器的操作系统和(或)硬件平台
    //3、screen对象:包含有关客户端显示屏幕的信息
    console.log(screen.width);//显示浏览器的屏幕的宽度
    console.log(screen.height);//显示浏览器的屏幕的高度
    //4、location对象:包含有关当前URL的信息
    // location.assign("https://www.baidu.com/");//设置当前网页的URL地址
    //5、document对象:代表当前的页面(HTML的DOM文档树)
    //5.1、获取或设置文档树标题
    console.log(document.title);//当前文档的标题(HTML的title元素中的文本)
    document.title="baidu";
    console.log(document.title);//当前文档的标题(HTML的title元素中的文本)
    //5.2、获取文档树节点
    var mydl=document.getElementById("app");
    console.log(mydl);
    /**
     * 5.3、获取文档树cookie
     * 特别注意：会导致恶意软件劫持cookie，从而泄露重要信息，可以通过服务器端设置cookie:"httpOnly"来避免此漏洞.
     */
    var mycookie=document.cookie;
    console.log(mycookie);
    //6、history对象:包含用户(在浏览器窗口中)访问过的URL
    // history.back();//可加载历史列表中的前一个URL(如果存在)，类似于前进
    // history.forward();//可加载历史列表中的下一个URL，类似于后退
</script>
</body>
</html>

10、JavaScript操作DOM对象(JavaScript Manipulate DOM Objects)

? 其HTML示例代码，如下所示。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JavaScript操作DOM对象</title>
</head>
<body>
<p id="add">add</p>
<p id="append">Append</p>
<div id="div">div1</div>
<div id="father">
    <h1>h1</h1>
    <p id="p1">p1</p>
    <p class="p2">p2</p>
</div>
<script>
    /**
     * DOM(Document Object Model,文档对象模型)：是一种与平台和语言无关的应用程序接口(API),它可以动态地访问程序和脚本,更新其内容、结构和www文档的风格(HTML和XML文档是通过说明部分定义的)。
     * 浏览器网页就是一个DOM树形结构，其主要有如下四个操作：
     * 1、查找DOM节点；
     * 2、更新DOM节点；
     * 3、删除DOM节点；
     * 4、添加DOM节点；
     */
    //1、查找DOM节点
    var h1=document.getElementsByTagName("h1");//类似于CSS选择器标签选择器
    var p1=document.getElementById("p1");//类似于CSS选择器ID选择器
    var p2=document.getElementsByClassName("p2");//类似于CSS选择器类选择器
    var father=document.getElementById("father");//类似于CSS选择器ID选择器
    var fatherNodes=father.children;//获取父节点下所有的子节点
    console.log(fatherNodes);
    //2、更新DOM节点
    var div=document.getElementById("div");//类似于CSS选择器ID选择器
    div.innerText="div";//设置表格行的开始和结束标签之间不包含HTML的内容
    div.innerHTML="<Striong>DIV</Striong>";//设置表格行的开始和结束标签之间的HTML内容
    div.style.color="red";//CSS样式：设置标签颜色
    div.style.fontSize="20px";//CSS样式：设置标签字体大小
    div.style.padding="2em";//CSS样式：设置标签内边距
    /**
     * 3、删除DOM节点：先获取指定节点的父节点，再通过父节点删除指定节点
     * 特别注意：删除多个节点时，节点数及下标会动态变化。
     */
    // father.removeChild(p1);
    // father.removeChild(father.children[0]);
    // father.removeChild(father.children[1]);
    //4、添加节点
    //4.1、追加节点：若指定追加节点不存在，则直接追加节点，否则追加节点存在，就不能这样操作，会产生覆盖
    // var appendNode=document.getElementById("append");
    // father.appendChild(appendNode);
    //4.2、插入节点：先创建新的节点，再实现插入节点，使用insertBefore()方法
    //创建P标签节点
    var newPNode=document.createElement("p");
    newPNode.id="newPNode";
    newPNode.innerText="PNode";
    // father.insertBefore(newPNode,h1.item(0));//将新节点“newPNode”插入到指定节点“p1”之前
    // father.insertBefore(newPNode,p1);//将新节点“newPNode”插入到指定节点“p1”之前
    father.insertBefore(newPNode,p2.item(0));//将新节点“newPNode”插入到指定节点“p2”之前
    //创建js标签节点
    var addNode=document.getElementById("add");
    var newJavaScript=document.createElement("script");
    newJavaScript.setAttribute("type","text/javascript");
    newJavaScript.innerHTML="father.appendChild(addNode);";
    document.getElementsByTagName("head")[0].appendChild(newJavaScript);//追加节点
    //创建css标签
    var newCSS=document.createElement("style");
    newCSS.setAttribute("type","text/css");
    newCSS.innerHTML="body{background-color:green}";//设置css标签内容
    document.getElementsByTagName("head")[0].appendChild(newCSS);//追加节点
</script>
</body>
</html>

11、JavaScript操作表单(JavaScript Manipulate Form)

? 其HTML示例代码，如下所示。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JavaScript操作表单</title>
    <!--MD5工具类-->
    <script src="https://cdn.bootcss.com/blueimp-md5/2.10.0/js/md5.min.js"></script>
</head>
<body>
<!--
    1、表单绑定提交事件：onsubmit，若返回值为true则提交表单，否则返回值为false不提交表单
-->
<form action="https://www.baidu.com" method="post" onsubmit="return md5PWD()">
    <p>
        <span>用户名：</span>
        <input type="text" id="username" name="username"/>
    </p>
    <p>
        <span>密码：</span>
        <input type="password" id="input-password" name="password">
    </p>
    <input type="hidden" id="md5-password" name="password">
    <p>
        <span>性别：</span>
        <!--多选框的值，就是定义的value值-->
        <input type="radio" name="sex" value="man" id="boy"/>男
        <input type="radio" name="sex" value="women" id="girl"/>女
    </p>
    <!--
        2、按钮绑定提交事件：onclick
    -->
    <button type="submit" onclick="md5PWD()">提交</button>
</form>
<script>
    /**
     * 表单：form DOM树，
     * 表单目的：提交信息。
     * 表单内容：文本框、下拉框、单选框、多选框、隐藏域、密码框...
     * 特别注意：
     * 1、表单绑定提交事件：onsubmit，若返回值为true则提交表单，否则返回值为false不提交表单，如<form action="https://www.baidu.com" method="post" οnsubmit="return md5PWD()">；
     * 2、按钮绑定提交事件：onclick，如<button type="submit" οnclick="md5PWD()">提交</button>。
     */
    var username_text = document.getElementById("username");
    var boy_radio = document.getElementById("boy");
    var girl_radio = document.getElementById("girl");
    //获取输入框的值
    console.log(username_text.value);
    //修改输入框的值
    username_text.value = "123";
    //对于单选框、多选框等固定值，用其value属性只能获取到当前值
    //获取指定单选框是否被选中
    console.log(boy_radio.checked);
    //设置指定单选框被选中
    boy_radio.checked = true;
    //获取用户名
    var uid = document.getElementById("username");
    console.log(uid.value);
    //获取输入密码
    var input_pwd = document.getElementById("input-password");
    console.log(input_pwd.value);
    //获取MD5密码
    var md5_pwd = document.getElementById("md5-password");
    console.log(md5_pwd.value);
    //提交表单验证：在线MD5加密用户输入密码
    function md5PWD() {
        input_pwd.value = md5(input_pwd.value);//在线MD5算法加密
        md5_pwd.value = input_pwd.value;
        console.log(md5_pwd.value);
        return true;//允许提交表单
        // return false;//阻止提交表单
    }
</script>
</body>
</html>

12、JQuery

? 一般称为“JQuery库”，其含有很多JavaScript函数，类似于“工具类”，在线帮助文档。

12.1、JQuery导入方式。

? 其HTML示例代码，如下所示。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JQuery导入方式</title>
<!--    &lt;!&ndash;方式1、导入在线JQuery&ndash;&gt;-->
<!--    <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>-->
    <!--方式2、导入本地JQuery-->
    <script src="../lib/jquery-3.6.0.js"></script>
</head>
<body>
<a href="" id="import-jquery">使用JQuery</a>
<script>
    /**
     * JQuery基本语法：$(selector).action()；
     * JQuery选择器就是CSS选择器
     */
    $('#import-jquery').click(function () {
        alert("JQuery");
    })
</script>
</body>
</html>

12.2、JQuery选择器。

? 其HTML示例代码，如下所示。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JQuery选择器</title>
    <script src="../lib/jquery-3.6.0.js"></script>
</head>
<body>
<a href="">标签选择器</a>
<hr/>
<h id="id1">ID选择器</h>
<hr/>
<p class="class1">CLASS选择器</p>
<script>
    /**
     * JQuery基本语法：$(selector).action()；
     * JQuery选择器就是CSS选择器
     */
    $("a").click(function () {
        alert("标签选择器");
    });
    $("#id1").click(function () {
        alert("ID选择器");
    });
    $(".class1").click(function () {
        alert("CLASS选择器");
    });
</script>
</body>
</html>

12.3、JQuery事件。

? 其HTML示例代码，如下所示。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JQuery事件</title>
    <script src="../lib/jquery-3.6.0.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>
    /**
     * JQuery基本语法：$(selector).action()；
     * JQuery事件：如鼠标事件、键盘事件等，当网页元素加载完后，才会响应事件。
     */
    $(function () {
        $("#divMove").mousemove(function (e) {
            $("#mouseMove").text("x:"+e.pageX+",y:"+e.pageY);
        });
    });
</script>
</body>
</html>

12.4、JQuery操作DOM。

? 其HTML示例代码，如下所示。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JQuery操作DOM</title>
    <script src="../lib/jquery-3.6.0.js"></script>
</head>
<body>
<ul id="ul1">
    <li class="li1">JavaScript</li>
    <li name="jquery">JQuery</li>
</ul>
<script>
    /**
     * JQuery基本语法：$(selector).action()；
     * JQuery操作DOM：
     */
    //1、节点文本操作
    console.log($("#ul1 li[name=jquery]").text());//获取文本内容
    console.log($("#ul1 li[name=jquery]").text("JQUERY"));//设置文本内容
    // console.log($("#ul1").html());//获取HTML内容
    // console.log($("#ul1").html("JS"));//设置HTML内容
    //2、操作CSS
    $("#ul1 li[name=jquery]").css({"color":"blue"});
    //3、元素的显示与隐藏：其本质为“diaplay:none”。
    // $("#ul1 li[name=jquery]").show();//显示元素
    $("#ul1 li[name=jquery]").hide();//隐藏元素
    //4、其他测试
    console.log($(window).width);
    console.log($(window).height);
    /**
     * toggle事件：
     * 用于绑定两个或多个事件处理器函数，以响应被选元素的轮流的click事件。
     * 如果元素是可见的，切换为隐藏的；如果元素是隐藏的，切换为可见的。
     */
    $("#ul1 li[name=jquery]").toggle();
    //5、后续AJAX...
</script>
</body>
</html>