JavaWeb-JavaScript

一、什么是JavaScript

JavaScript是由网景的LiveScript发展而来的客户端脚本语言，主要目的是为了解决服务端语言遗留的速度问题，为客户提供更流畅的浏览效果。JavaScript可以实现网页内容、数据的动态变化和动画特效等。JavaScript的标准由ECMA维护，所以JavaScript也称为ECMAScript。JavaScript有如下特点：

脚本语言
- JavaScript是一种解释型的脚本语言。
- JavaScript运行前不会编译成字节码文件，而是在运行时对源文件逐行解释执行。
基于对象：JavaScript是一种基于对象的脚本语言，它不仅可以创建对象，也能使用现有的对象。但是面向对象三大特征中，JavaScript能实现封装，可以模拟继承，但不支持多态，所以它不是面向对象的编程语言。
弱类型：JavaScript中可以使用var类型的变量接收所有类型，并且会在程序中根据上下文自动转换类型。
事件驱动：JavaScript是一种事件驱动的脚本语言，它不需要服务器就可以对用户行为做出响应，所以在互联网之初网速很慢的时候，使用类似脚本语言可以使网页浏览更加流畅。
跨平台性：JavaScript语言不依赖于操作系统，仅需浏览器的支持。所以只要机器上的浏览器支持JavaScript，JavaScript就可以在机器上运行。

二、JavaScript的组成

JavaScript由ECMAScript、BOM和DOM三部分组成。

2.1 ECMAScript

规定了JavaScript的语法、类型、语句、关键字、保留字、操作符、和对象。

2.2 BOM

Browser Object Model的简写，即浏览器对象模型。
由一系列对象组成，是用于访问、控制和修改浏览器的属性和方法。
BOM没有统一的标准，不同的浏览器可能有不同的标准。
BOM编程是将浏览器窗口的各个组成部分抽象成对象，通过各个对象的API访问对象属性从而操作组件行为的一种编程。
BOM的对象结构如下：
- window为顶级对象，代表整个浏览器窗口。
  - location对象：window的属性，代表浏览器的地址栏。
  - history对象：window的属性，代表浏览器的访问历史。
  - screen对象：window的属性，代表屏幕。
  - navigator对象：window的属性，代表浏览器软件本身。
  - document对象：window的属性，代表浏览器窗口目前解析的HTML文档。
  - console对象：代表浏览器开发者工具的控制台。
  - localStorage对象：代表浏览器的本地数据持久化存储。
  - sessionStorage对象：代表浏览器的本地数据会话级存储。

2.3 DOM编程

DOM就是BOM的document对象，因为其最复杂，所以单独抽出来为DOM编程。
document对象代表整个HTML文档，可以用来访问页面中的所有元素。document对象本身是一种树形结构的文档对象。HTML文档中有三种类型的部分：元素、属性和文本，document对象的结构中会包含HTML文档的所有部分。
DOM编程就是使用window对象的document属性的API完成对网页HTML文档的动态修改，以实现网页数据和样式动态变化的效果。

HTML代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>FixedPosition</title>
</head>
<body>
    <div style="width: 1000px; height: 1000px;">
        <div style="width: 100px; height: 100px; background-color: antiquewhite; position: fixed; top: 100px; left: 100px;">第一个块</div>
        <div style="width: 100px; height: 100px; background-color: aqua;">第二个块</div>
        <div style="width: 100px; height: 100px; background-color: brown;">第三个块</div>
    </div>
</body>
</html>

对应的document结构 ![在这里插入图片描述](https://img-blog.csdnimg.cn/f14a40ec89b34b7cbaa8ac21397c02b8.png)

三、JS的引入方式

3.1 内部脚本引入

在head标签内部使用script标签定义JS代码，script标签可以放置在随意位置，甚至是html标签之外，但一般放在head标签中。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        //定义事件触发的函数，当事件触发时，执行函数
        function surprise(){
            //浏览器弹窗并显示如下文本
            alert("hello,i'msurprise")
        }
    </script>
</head>
<body>
    <input type="button" 
           style="width: 50px;
           height: 30px;
           background-color: antiquewhite;
           color: black;
           font-size: 10px;
           font-family: '宋体';"
           value="按钮" 
           onclick="surprise()"/>
           <!--onclick用于绑定单击事件时触发的行为-->
</body>
</html>

在这里插入图片描述

内部脚本引入的JS代码只能在该文件中使用，代码复用性不高。

3.2 外部脚本引入

将JS代码放在独立的js文件中，通过script标签引入外部脚本文件。
一对script标签中，要么定义脚本代码，要么引入外部脚本，不能混用。
一个文件中可以有多个script标签。

function surprise(){
    alert("hello,i'm surprise!")
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="OutterScript.js" type="text/javascript"></script>
</head>
<body>
    <button type="button" style="width: 80px; height: 30px; 
    background-color: antiquewhite; color: black; 
    font-size: 8px;" onclick="surprise()">点我有惊喜</button>
</body>
</html>

在这里插入图片描述

四、Javascript的数据类型和运算符

4.1 数据类型和变量

4.1.1 数据类型

数值类型：统一为number，不区分整型和浮点型。
字符串类型：string类型，与Java的String相似，在JS中，字符串不区分单双引号。
布尔类型：boolean，在JS中，非空字符串和非零数字会被认为是真。
引用类型：各种数组和对象在JS中是object类型。如果给一个变量赋值为null，那么这个变量的类型就是object。
function类型：函数类型。
undefined类型：JavaScript是弱类型语言，弱类型不意味着没有类型，而是说可以统一使用var声明对象和变量，并且在赋值时才确定类型。如果没有赋值，变量类型就为undefined。
可以使用typeof关键字判断数据类型。
在JS中，可以使用console.log向控制台打印数据。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        //整数
        console.log("------整数------")
        var n1 = 10
        console.log(n1)
        console.log(typeof n1)

        //小数
        console.log("------小数------")
        var n2 = 3.14
        console.log(n2)
        console.log(typeof n2)

        //字符串
        console.log("------字符串------")
        var n3 = "hello world"
        console.log(n3)
        console.log(typeof n3)

        //Boolean
        console.log("------布尔类型------")
        var n4 = true
        console.log(n4)
        console.log(typeof n4)
        //空字符串
        console.log("------布尔类型空字符串------")
        if(""){
            console.log("真")
        }else{
            console.log("假")
        }
        //非空字符串
        console.log("------布尔类型非空字符串------")
        if(n3){
            console.log("真")
        }else{
            console.log("假")
        }
        //数字0
        console.log("------布尔类型数字0------")
        if(0){
            console.log("真")
        }else{
            console.log("假")
        }
        console.log("------布尔类型非零数字------")
        if(n2 && n1){
            console.log("真")
        }else{
            console.log("假")
        }

        //引用数据类型
        console.log("------引用类型------")
        var n5 = new Object()
        console.log(n5)
        console.log(typeof n5)
        console.log("------赋值为null------")
        n5 = null
        console.log(n5)
        console.log(typeof n5)

        //function
        console.log("------函数类型写法一------")
        var surprise = function() {
            alert("hello world")
        }
        console.log(surprise)
        console.log(typeof surprise)

        console.log("------函数类型写法二------")
        function surprise2(){
        }
        console.log(surprise2)
        console.log(typeof surprise2)

        //未赋值
        console.log("------未赋值------")
        var n
        console.log(n)
        console.log(typeof n)

    </script>
</head>
<body>
    
</body>
</html>

在这里插入图片描述

4.1.2 变量

变量可以统一定义为var类型。
变量使用之前必须声明。
变量定义之后可以再次定义。
变量可以使用不同的数据类型多次赋值。
JS语句可以以分号结尾，也可以不用分号结尾。
变量标识符严格区分大小写。
标识符的命名规则参照Java。
如果一个变量定义时没有赋值，那么值和类型都为undefined。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        console.log("--------未赋值变量--------")
        var n1
        console.log(n1)
        console.log(typeof n1)

        console.log("--------重复定义----------")
        var n2 = 10
        console.log(n2)
        console.log(typeof n2)
        var n2 = "hello"
        console.log(n2)
        console.log(typeof n2)

        console.log("--------多次赋值----------")
        var n3 = true
        console.log(n3)
        console.log(typeof n3)
        n3 = "hello"
        console.log(n3)
        console.log(typeof n3)
    </script>
</head>
<body>
    
</body>
</html>

在这里插入图片描述

4.2 运算符

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        /*算数运算符 + - * / %
            1 0作为除数时，结果为infinity，而不是报错
            2 对0取模时，结果为NaN（not a number），而不是报错
        */
       console.log("-----------算术运算符---------")
        console.log(1 + 2)
        console.log(1 - 2)
        console.log(1 * 2)
        console.log(1 / 2)
        console.log(1 / 0)
        console.log(5 % 3)
        console.log(5 % 0)

        /*复合运算符 += -= *= /= %= ++ --
            （/= 或 %=）0的结果与/和%相同
        */
       console.log("--------复合运算符--------")
       var n = 1
       console.log(n += 1)
       console.log(n -= 1)
       console.log(n *= 3)
       console.log(n /= 2)
       console.log(n /= 0)
       n = 5
       console.log(n %= 3)
       console.log(n %= 0)

        /*关系运算符 > < >= <= != == ===
            1 ==两端类型如果不一致，会尝试将两端类型转换成number，再进行比较
            2 ===两端类型不一致会直接判断为false
        */
        console.log("-------关系运算符-------")
        console.log(1 > 2)
        console.log(1 < 2)
        console.log(2 <= 2)
        console.log(3 >= 2)
        console.log(1 != 2)
        console.log(1 == 2)
        console.log(1 == '1')
        console.log(1 == true)
        console.log(1 === 1)
        console.log(1 === '1')

        /*逻辑运算符 && || !用法与Java一致*/
        console.log("----------逻辑运算符-----------")
        console.log(true && true)
        console.log(true || false)
        console.log(!true)

        /*位运算符 >> << >>> & | ~ ^ 用法与Java一致*/
        console.log("--------位运算符-------")
        console.log(1 >> 1)
        console.log(1 << 1)
        console.log(-1 >>> 1)
        console.log(1 & 3)
        console.log(3 | 1)
        console.log(~-1)
        console.log(1 ^ 3)
    </script>
</head>
<body>
    
</body>
</html>

在这里插入图片描述

五、JavaScript流程控制和函数

5.1 分支结构

要注意的是，空字符串和0会被认为是假，非空字符串和非零数字会被认为是真。

5.1.1 if-else

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        if(1 > 2){
            if(3 < 4){
                console.log(true)
            }else{
                console.log(false)
            }
            console.log(true)
        }else{
            if(3 < 4){
                console.log(true)
            }else{
                console.log(false)
            }
            console.log(false)
        }
        if("") console.log(true)
        else console.log(false)
        if("asd") console.log(true)
        else console.log(false)
        if(0) console.log(true)
        else console.log(false)
        if(3) console.log(true)
        else console.log(false)
    </script>
</head>
<body>
    
</body>
</html>

在这里插入图片描述

5.1.2 switch

可以使用prompt来弹窗提示用户输入，返回值为用户输入的内容。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        var month = prompt("请输入月份：","例如，10")
        month = Number.parseInt(month)
        switch(month){
            case 12:
            case 1:
            case 2:
                console.log("冬季")
                break
            case 3:
            case 4:
            case 5:
                console.log("春季")
                break
            case 6:
            case 7:
            case 8:
                console.log("夏季")
                break
            case 9:
            case 10:
            case 11:
                console.log("秋季")
                break
            default:
                console.log("月份输入有误")
        }
    </script>
</head>
<body>
    
</body>
</html>

在这里插入图片描述

5.2 循环结构

5.2.1 while

语法几乎与Java一样。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        //打印九九乘法表
        //document.write可以向文档中写入文本
        //也可以向文档中写入HTML代码
        //如果文档已经加载完成，使用document.write会覆盖文档内容
        var i = 1
        var j = 1
        while(i <= 9){
            j = 1
            while(j <= i){
                document.write(j+"*"+i+"="+i*j+"&nbsp;&nbsp;&nbsp;&nbsp;")
                j++
            }
            document.write("<hr>")
            i++
        }
    </script>
</head>
<body>
    
</body>
</html>

在这里插入图片描述

5.2.2 for

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        for(var i = 1; i <= 9; i++){
            for(var j = 1; j <= i; j++){
                document.write(j+"*"+i+"="+i*j+"&nbsp;&nbsp;&nbsp;&nbsp")
            }
            document.write("<hr>")
        }
    </script>
</head>
<body>
    
</body>
</html>

在这里插入图片描述

5.2.3 foreach（增强for循环）

和Java的增强for循环不同，JS增强for循环括号中的变量表示的是索引，而不是元素值。括号中也不使用冒号分隔，而是用in。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        //在JS中，数组使用中括号
        var num = [1,2,3,4,5,6,7,8,9]
        for(var index in num){
            document.write(num[index]+"&nbsp;&nbsp")
        }
    </script>
</head>
<body>
    
</body>
</html>

在这里插入图片描述

5.3 JavaScript函数声明

函数没有权限控制符。
不需要声明函数返回值，需要返回值时，使用return直接返回即可。
参数列表无需声明数据类型。
调用函数时，实参和形参数量可以不一致。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        //第一种声明方式
        function sum(a,b){
            return a + b
        }
        console.log(sum(10,20))
        console.log(sum(10))
        console.log(sum(10,30,40))
        //第二种声明方式
        var mul = function(a,b){
            return a * b
        }
        console.log(mul(7,8))
    </script>
</head>
<body>
    
</body>
</html>

在这里插入图片描述

六、JavaScript的对象和JSON

6.1 JS创建对象

通过new Object()来创建对象，并且可以直接通过 "."操作符给对象添加属性并赋值，如果属性不存在，就会添加对应属性，如果属性存在就是给对应属性赋值。
通过大括号的方式来定义，形式为{“属性名”:“属性值”… …}.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        //第一种方式
        var person = new Object()
        person.age = 20
        person.name = "kajsh"
        person.sex = "男"
        person.hobby = ["basketball","football","pingpang","soccer"]
        person.play = function(){
            for(var index in this.hobby){
                console.log(this.age+"岁的"+this.name+"爱玩"+person.hobby[index])
            }
        }
        console.log(person.age)
        console.log(person.name)
        console.log(person.sex)
        person.play()
    </script>
</head>
<body>
    
</body>
</html>

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        //第二种方式
        var person = {"name":"asd","age":30,
                        "eat":function(){
                            console.log("吃吃吃")
                        }}
        console.log(person.name)
        console.log(person.age)
        person.eat()
    </script>
</head>
<body>
    
</body>
</html>

在这里插入图片描述

6.2 JSON

JSON(JavaScript Object Notation，JS对象简谱)是一种轻量级的数据交换格式，它是一种字符串，无论在前端还是后端都可以很容易的转换成对象，所以常用于前后端传递数据。
JSON格式：var json = ‘{“属性名”:属性值,“属性名”:属性值 … …}’
JSON字符串一般用于传递数据，所以JSON中的函数意义不大。
通过JSON.parse()方法可以将一个JSON串转换成对象。
通过JSON.stringify()方法可以将一个对象转换成JSON格式的字符串。
前后端传递JSON数据如下图：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        //定义JSON串
        var personPtr = '{"name":"qedf","age":30,"sex":12,"hobby":["basketball","football","pingpang"],\
        "pet":{"name":"gougou"}}'
        console.log(personPtr)
        console.log(typeof personPtr)
        //将JSON串转换成对象
        var person = JSON.parse(personPtr)
        console.log(typeof person)
        console.log(typeof person.pet)
        console.log(person.name)
        console.log(person.age)
        console.log(person.sex)
        for(var index = 1; index < person.hobby.length; index++){
            console.log(person.hobby[index])
        }
        //将对象转换成JSON串
        var ptr = JSON.stringify(person)
        console.log(ptr)
        console.log(typeof ptr)
    </script>
</head>
<body>
    
</body>
</html>

在这里插入图片描述

6.3 JS常见对象

6.3.1 数组

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        //数组有四种定义方式
        //1.
        console.log("------第一种方式------")
        var arr1 = new Array()
        console.log(arr1)
        console.log(arr1.length)
        //2.在定义时指定数组大小，但在JS中，数组的大小是可变的
        console.log("-------第二种方式------")
        var arr2 = new Array(5) 
        console.log(arr2.length)
        arr2[0] = arr2[1] = arr2[3] = arr2[2] = arr2[4] = 10
        arr2[5] = 4
        console.log(arr2.length)
        console.log(arr2)
        //3.
        console.log("-------第三种方式-------")
        var arr3 = new Array(1,2,3,4)
        console.log(arr3)
        console.log(arr3.length)
        //4.
        console.log("-------第四种方式-------")
        var arr4 = [3,4,5,6,7,8,9,0]
        console.log(arr4)
        console.log(arr4.length)
    </script>
</head>
<body>
    
</body>
</html>

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        var arr1 = [1,2,3,4,3]
        var arr2 = [12,14,16,18]
        console.log("--------数组拼接------")
        //方法不会改变现有数组，而是返回一个新的数组
        console.log(arr1.concat(arr2))
        console.log(arr1)
        console.log(arr2)
        console.log("---------pop方法--------")
        console.log(arr1.pop())
        console.log(arr1)
        console.log("--------push方法--------")
        console.log(arr1.push(4))
        console.log(arr1)
        console.log("--------indexOf和lastIndexOf方法------")
        console.log(arr1.indexOf(3))
        console.log(arr1.lastIndexOf(3))
        console.log("--------数组反转--------")
        arr1.reverse()
        console.log(arr1)
        console.log("--------slice方法--------")
        //选取数组的一部分，返回一个新的数组
        console.log(arr1.slice(2,5))
        console.log("---------splice方法-------")
        //从数组中删除或添加元素
        //第一个参数表示从哪添加或删除
        //第二个参数表示删除多少个元素，如果未指定，则从指定位置删除到数组结尾
        //后面是可变参数，表示要添加到数组的新元素
        //返回值是含有被删除元素的数组
        //如果指定位置越界，那么会在数组后添加
        console.log(arr1.splice(0,0,12,14,17,18))
        console.log(arr1)
        console.log(arr1.splice(2))
        console.log(arr1)
        console.log(arr1.splice(2,2,45,57,78))
        console.log(arr1)
        console.log("--------toString方法-------")
        console.log(arr1.toString())
    </script>
</head>
<body>
    
</body>
</html>

在这里插入图片描述

6.3.2 Boolean

toString()：把布尔值转换成字符串并返回结果。
valueOf：返回Boolean对象的原始值。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        var b = new Boolean("")
        console.log("--------toString-------")
        console.log(b.toString())
        console.log("--------valueOf方法------")
        console.log(b.valueOf())
    </script>
</head>
<body>
    
</body>
</html>

在这里插入图片描述

6.3.3 Date

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        var date = new Date()
        console.log(date)
        var d = date.getHours()
        console.log(d)
        console.log(typeof d)
        console.log("------getDate方法-----")
        //返回一个月中的某一天
        console.log(date.getDate())
        console.log("------getDay方法-----")
        //返回星期中的某一天
        console.log(date.getDay())
        console.log("------getFullYear方法-----")
        //以四位数字返回年
        console.log(date.getFullYear())
        console.log("------getHours方法-----")
        //返回小时
        console.log(date.getHours())
        console.log("------getMilliseconds方法-----")
        //返回毫秒
        console.log(date.getMilliseconds())
        console.log("------getMinutes方法-----")
        //返回分钟
        console.log(date.getMinutes())
        console.log("------getMonth方法-----")
        //返回月份
        console.log(date.getMonth())
        console.log("------getSeconds方法-----")
        //返回秒数
        console.log(date.getSeconds())
        console.log("------getTime方法-----")
        //返回从1970年1月1日至今的毫秒数
        var m = date.getTime()
        console.log(m)
        console.log(typeof m)
        console.log(date)
        console.log("------parse方法-----")
        //返回1970年1月1日到指定日期的毫秒数
        console.log(Date.parse(date))
        console.log(date)
        console.log("------setDate方法-----")
        //设置月中的某一天
        var dd = date.setDate(12)
        console.log(dd)
        console.log(typeof dd)
        console.log(date)
        console.log("------setFullYear方法-----")
        //设置年份,四位数字
        console.log(date.setFullYear(1989))
        console.log(date)
        console.log("------setHours方法-----")
        //设置小时
        console.log(date.setHours(20))
        console.log(date)
        console.log("------setMilliseconds方法-----")
        //设置毫秒
        console.log(date.setMilliseconds(45))
        console.log(date)
        console.log("------setMinutes方法-----")
        //设置分钟
        console.log(date.setMinutes(29))
        console.log(date)
        console.log("------setMonth方法-----")
        //设置月份
        console.log(date.setMonth(9))
        console.log(date)
        console.log("------setSeconds方法-----")
        //设置秒数
        console.log(date.setSeconds(39))
        console.log(date)
        console.log("------setTime方法-----")
        //以毫秒设置Date对象
        console.log(date.setTime(0))
        console.log(date)
    </script>
</head>
<body>
    
</body>
</html>

在这里插入图片描述

6.3.4 Math

https://www.runoob.com/jsref/jsref-obj-math.html

6.3.5 Number

https://www.runoob.com/jsref/jsref-obj-number.html

6.3.6 String

https://www.runoob.com/jsref/jsref-obj-string.html

七、事件的绑定

HTML事件可以是浏览器行为，也可以是用户行为。当这些事件发生时，可以自动触发对应的JS函数运行。
常见事件：鼠标事件、键盘事件、表单事件等。https://www.runoob.com/jsref/dom-obj-event.html

7.1 事件的绑定

7.1.1 通过属性绑定

通过属性绑定函数，当事件发生时自动执行函数。
一个事件可以绑定多个函数。
一个函数可以与多个事件绑定。
方法中可以传入this对象，代表当前元素。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        //通过属性绑定
        //鼠标事件
        function fun1(){
            //这里如果使用alert，那么单击后会弹窗，就不会触发双击
            console.log("单击了")
        }
        function fun2(){
            console.log("单击了2")
        }
        function fun3(){
            console.log("双击了")
        }
        function fun4(){
            console.log("鼠标悬停")
        }
        function fun5(){
            console.log("鼠标离开了")
        }
        function fun6(){
            console.log("鼠标移动了")
        }
        //键盘事件
        function fun7(){
            console.log("键盘按下")
        }
        function fun8(){
            console.log("键盘松开")
        }
        function fun9(){
            console.log("键盘按下又松开")
        }
        //表单事件
        function onBlur(){
            console.log("失去焦点")
        }
        function onFocus(){
            console.log("获取焦点")
        }
        function onChange(input){
            console.log("内容改变")
            console.log(input.value)
        }
        function onSubmit(){
            //使用confirm确认弹窗
            var flag = confirm("确认提交表单吗")
            if(!flag){
                //在这里可以阻止表单的提交
                //1.阻止组件的默认行为，也就是阻止提交
                //event.preventDefault()
                //2.还可以返回false或者true给调用者，以决定接着执行或是阻止提交
                return false
            }
            return true
        }
        function onReset(){
            var flag = confirm("确认重置表单吗")
            if(!flag){
                return false
            }
            return true
        }
    </script>
</head>
<body>
    <input type="button" value="按钮" onclick="fun1(),fun2()"
            ondblclick="fun3()" />
    <img src="/Event/image/桌面.jpg" style="width: 100px; height: 100px;" onmouseover="fun4()" onmouseleave="fun5()" onmousemove="fun6()">
    <input type="text" onkeydown="fun7()" onkeypress="fun9()" onkeyup="fun8">
    <br><br><br>
    <!--事件与哪个元素有关，就绑定在哪个元素上
    （如果将所有事件绑定在form标签中，那么对form中的所有元素都有效）
    如果onsubmit事件绑定的函数中返回boolean类型，那么在绑定时也需要写上return-->
    <form action="/VariableAndOperator/01DataType.html" onsubmit="return onSubmit()" onreset="return onReset()">
        姓名：<input type="text" onblur="onBlur()" 
        onfocus="onFocus()" onchange="onChange(this)"
         />
         <br>
        电话：<input type="text" onblur="onBlur()" 
        onfocus="onFocus()" onchange="onChange(this)" />
        <br>
        选项：<select name="s" id="s" onblur="onBlur()" 
        onfocus="onFocus()" onchange="onChange(this)">
                <option value="">1</option>
                <option value="">2</option>
                <option value="">3</option>
              </select>
              <br>
        <button type="submit">提交</button>
        <button type="reset">重置</button>
    </form>
</body>
</html>

在这里插入图片描述

7.1.2 通过DOM编程绑定

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- <script>
        function fun1(){
            console.log("单击了")
        }
        function fun2(){
            console.log("鼠标悬停")
        }
        function fun3(){
            console.log("失去焦点")
        }
        function fun4(){
            console.log("获得焦点")
        }
        function fun5(input){
            console.log("内容改变"+input.value)
        }
        //通过元素id获取元素
        //浏览器是顺序执行代码的，如果以下面这种方式绑定函数
        //当执行到这里时会报错，因为元素在此处还没有定义，
        //所以使用getElementById函数无法获取到元素，会有空指针错误
        var b = document.getElementById("b1")
        b.onclick = fun1
        var im = document.getElementById("img1")
        im.onmousedown = fun2
        var i = document.getElementById("i1")
        i.onblur = fun3
        i.onfocus = fun4
        i.onchange = fun5
    </script> -->
    <!--正确做法是使用页面加载完毕事件-->
    <!-- <script>
        function fun1(){
            console.log("单击了")
        }
        function fun2(){
            console.log("鼠标悬停")
        }
        function fun3(){
            console.log("失去焦点")
        }
        function fun4(){
            console.log("获得焦点")
        }
        function fun5(){
            console.log("内容改变"+event.target.value)
        }
        function fun(){
            var b = document.getElementById("b1")
            b.onclick = fun1
            var im = document.getElementById("img1")
            im.onmousedown = fun2
            var i = document.getElementById("i1")
            i.onblur = fun3
            i.onfocus = fun4
            i.onchange = fun5
        }
    </script> -->

    <!--有更简便的写法-->
    <script>
        function fun1(){
            console.log("单击了")
        }
        function fun2(){
            console.log("鼠标悬停")
        }
        function fun3(){
            console.log("失去焦点")
        }
        function fun4(){
            console.log("获得焦点")
        }
        function fun5(){
            //event表示该事件，target表示触发此事件的元素
            //通过如下写法能获取到改变的内容
            console.log("内容改变"+event.target.value)
        }
        window.onload = function(){
            var b = document.getElementById("b1")
            b.onclick = fun1
            var im = document.getElementById("img1")
            im.onmousedown = fun2
            var i = document.getElementById("i1")
            i.onblur = fun3
            i.onfocus = fun4
            i.onchange = fun5
        }
    </script>
</head>
<!--onload事件会在页面加载完成后触发-->
<body>
    <input type="button" value="按钮" id="b1" />
    <br>
    <img src="/Event/image/桌面.jpg" style="width: 100px; height: 100px;" id="img1" />
    <br>
    <input type="text" id="i1">
</body>
</html>

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        window.onload = function(){
            var div1 = document.getElementById("div1")
            //为div1绑定单击事件
            div1.onclick = function(){
                div1.style.background = "red"
            }
            //还可以通过单击另一个按钮的事件来改变div的颜色
            var button1 = window.document.getElementById("button1")
            button1.onclick = function(){
                alert("单击按钮")
                div1.onclick()
            }
        }
    </script>
</head>
<body>
    <div style="width: 200px; height: 200px; background-color: antiquewhite;"
    id="div1"></div>
    <button id="button1">按钮</button>
</body>
</html>

在这里插入图片描述

7.2 事件的触发

事件可以通过行为触发，例如鼠标行为或键盘按键行为等。
还可以通过DOM编程，当某段代码执行时触发相应的事件。

八、BOM编程

8.1 三种弹窗方式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!--在使用window下的对象和API时，window可以省略不写-->
    <script>
        function fun1(){
            window.alert("按下按钮1")
        }
        function fun2(){
            var ret = confirm("请确认")
            console.log(ret)
        }
        function fun3(){
            var ret = prompt("请输入数字","例如：1")
            console.log(ret)
        }
        function fun4(){
            //使用window.setTimeout()方法可以在指定时间后调用函数或表达式
            window.setTimeout(function(){
                alert("2秒后执行")
            },"2000")
        }
    </script>
</head>
<body>
    <input type="button" value="按钮1" onclick="fun1()" />
    <button onclick="fun2()">按钮2</button>
    <button onclick="fun3()">按钮3</button>
    <button onclick="fun4()">按钮4</button>
</body>
</html>

在这里插入图片描述

8.2 window常见对象及API

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!--window常见对象
        1.history
        2.location
        3.sessionStorage
        4.localStorage
        5.console-->
    <script>
        //history
        function fun1(){
            //返回上一网页
            history.back()
        }
        function fun2(){
            //跳转至下一网页
            history.forward()
        }
        function fun3(){
            //可以跳转指定页数，负数表示之前的页面，正数表示后面的页数
            window.history.go(2)
        }

        //location
        function fun4(){
            location.href = "https:\\www.baidu.com"
        }

        //sessionStorage与localStorage
        //会话信息关闭浏览器后会清除，本地数据会一直保留，直到被删除
        function fun5(){
            //存储信息
            sessionStorage.setItem("1","1")
            localStorage.setItem("2","2")
        }
        function fun6(){
            //读取数据
            console.log(sessionStorage.getItem("1"))
            console.log(localStorage.getItem("2"))
        }
        function fun7(){
            //清除数据
            sessionStorage.removeItem("1")
            localStorage.removeItem("2")
        }
    </script>
</head>
<body>
    <button onclick="fun1()">上一页</button>
    <button onclick="fun2()">下一页</button>
    <button onclick="fun3()">下两页</button>
    <a href="http://www.baidu.com">百度</a>
    <hr>
    <button onclick="fun4()">百度</button>
    <hr>
    <button onclick="fun5()">储存信息</button>
    <button onclick="fun6()">读取数据</button>
    <button onclick="fun7()">清除数据</button>
    <hr>
</body>
</html>

九、DOM编程

DOM是Document Object Model的缩写，即文档对象模型。
document对象是window的属性，代表整个html文档，可以用来访问到页面中的所有元素。浏览器向服务器发送请求，获得html文档后，根据document对象来显示页面。
document是一种树形结构的文档对象。dom树中的结点类型：
- node结点，是所有结点的父类型。
  - element，元素结点，代表一个完整标签。
  - attribute，属性结点，代表元素的属性。
  - text，文本结点，代表双标签中的文本。
DOM编程就是通过document对象的API来控制页面元素的编程。

9.1 获取页面元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        //直接获得元素
        function fun1(){
            var ret = document.getElementById("username")
            console.log("--------通过id获得元素-------")
            console.log(ret)
        }
        function fun2(){
            //获得标签为input的所有元素
            var ret = document.getElementsByTagName("input")
            console.log("--------通过标签名获得元素-------")
            console.log(ret)
            //ret的类型是HTMLCollection
            //使用foreach会显示ret中的所有属性和方法
            for(var index in ret){
                console.log(ret[index])
            }
            //使用普通for循环可以只打印我们预期的部分
            for(var i = 0; i < ret.length; i++){
                console.log(ret[i])
            }
        }
        function fun3(){
            //获得name为aaa的所有元素
            var ret = document.getElementsByName("aaa")
            console.log("--------通过name获得元素-------")
            for(var i = 0; i < ret.length; i++){
                console.log(ret[i])
            }
        }
        function fun4(){
            var ret = document.getElementsByClassName("b")
            console.log("--------通过class获得元素-------")
            for(var i = 0; i < ret.length; i++){
                console.log(ret[i])
            }
            ret = document.getElementsByClassName("a")
            for(var i = 0; i < ret.length; i++){
                console.log(ret[i])
            }
        }

        //间接获得元素
        function fun5(){
            var ret = document.getElementById("div01")
            //通过父元素找到子元素
            console.log("--------通过父元素获得子元素-------")
            var child = ret.children
            for(var i = 0; i < child.length; i++){
                console.log(child[i])
            }
            //获得第一个子元素
            var first = ret.firstElementChild
            console.log(first)
            //获得最后一个子元素
            var last = ret.lastElementChild
            console.log(last)
        }
        function fun6(){
            var ret = document.getElementById("password")
            //通过子元素获得父元素
            console.log("--------通过子元素获得父元素-------")
            console.log(ret.parentElement)
        }
        function fun7(){
            var ret = document.getElementById("email")
            //获得兄弟结点
            console.log("--------获得兄弟结点-------")
            console.log(ret.previousElementSibling)
            console.log(ret.nextElementSibling)
        }
    </script>
</head>
<body>
    <div id="div01">
        <input type="text" class="a" id="username" name="aaa"/>
        <input type="text" class="b" id="password" name="aaa"/>
        <input type="text" class="a" id="email"/>
        <input type="text" class="b" id="address"/>
    </div>
    <input type="text" class="a"/><br>
    <hr>
    <button onclick="fun1()">根据id值获取元素</button>
    <button onclick="fun2()">根据标签值获取元素</button>
    <button onclick="fun3()">根据name值获取元素</button>
    <button onclick="fun4()">根据class值获取元素</button>

    <hr>
    <button onclick="fun5()">通过父元素找到子元素</button>
    <button onclick="fun6()">通过子元素找到父元素</button>
    <button onclick="fun7()">找到兄弟元素</button>
</body>
</html>

在这里插入图片描述

9.2 操作元素属性值和内部文本

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        function fun1(){
            //修改属性值只需要 元素名.属性名=新值 即可，样式和文本也是同理
            var in1 = document.getElementById("in1")
            console.log("-------修改属性------")
            console.log(in1.type)
            console.log(in1.value)
            in1.type = "button"
            in1.value = "按钮"
            console.log(in1.type)
            console.log(in1.value)
        }
        function fun2(){
            //修改样式，样式名中带“-”的需要转换成驼峰式
            var in1 = document.getElementById("in1")
            console.log("-------修改样式------")
            console.log(in1.style.backgroundColor)
            console.log(in1.style.borderRadius)
            in1.style.backgroundColor = "red"
            in1.style.borderRadius = "5px"
            console.log(in1.style.backgroundColor)
            console.log(in1.style.borderRadius)
        }
        function fun3(){
            var div = document.getElementById("div01")
            //使用innerText可以改变双标签中的文本内容
            console.log("-------innerText-------")
            console.log(div.innerText)
            div.innerText = "<h1>hello world</h1>"
            console.log(div.innerText)
            console.log(div.innerHTML)
        }
        function fun4(){
            var div = document.getElementById("div01")
            //使用innerHTML可以识别替换字符串中的HTML格式
            console.log("--------innerHTML------")
            console.log(div.innerHTML)
            div.innerHTML = "<h1>hello world</h1>"
            console.log(div.innerHTML)
            console.log(div.innerText)
        }
    </script>
</head>
<body>
    <input id="in1" type="text" value="hello">
    <div id="div01">
        hello
    </div>
    <hr>
    <button onclick="fun1()">改变输入框类型</button>
    <button onclick="fun2()">改变按钮样式</button>
    <button onclick="fun3()">使用innerText改变div的文本</button>
    <button onclick="fun4()">使用innerHTML改变div的文本内容</button>
</body>
</html>

在这里插入图片描述

9.3 增删元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        function fun1(){
            //首先获得无序表
            var ul = document.getElementById("ul")
            //根据标签名创建一个新的元素
            var li = document.createElement("li")
            li.id = "li5"
            li.innerText = "化学"
            ul.appendChild(li)
        }
        function fun2(){
            //获得无序表
            var ul = document.getElementById("ul")
            //创建新的元素
            var li = document.createElement("li")
            li.id = "li6"
            li.innerText = "生物"
            //可以将新元素插在无序表的某个子元素之前，而不是加在表的最后
            //第一个参数为新元素，第二个参数为参照
            ul.insertBefore(li,(ul.children)[1])          
        }
        function fun3(){
            //获得无序表
            var ul = document.getElementById("ul")
            //创建新的元素
            var li = document.createElement("li")
            li.id = "li7"
            li.innerText = "历史"
            //替换元素，第一个参数为新元素，第二个参数为被替换的元素
            ul.replaceChild(li, (ul.children)[4])
        }
        function fun4(){
            //获得要删除的元素
            var li = document.getElementById("li6")
            li.remove()
        }
        function fun5(){
            //获得无序表
            var ul = document.getElementById("ul")
            //ul.remove()//，这样删除会直接删除ul这个元素，后续就无法通过API找到这个元素了
            //使用循环清空表中的所有元素
            // var li = ul.firstElementChild
            // while(li != null){
            //     li.remove()
            //     li = ul.firstElementChild
            // }
            //直接使用innerHTML
            ul.innerHTML = ""
            var n = document.createElement("li")
            n.innerText = "asdadsads"
            ul.appendChild(n)
        }
    </script>
</head>
<body>
    <ul id="ul">
        <li id="l1">语文</li>
        <li id="l2">数学</li>
        <li id="l3">英语</li>
        <li id="l4">物理</li>
    </ul>
    <hr>
    <button onclick="fun1()">在最后一个位置增加元素</button>
    <button onclick="fun2()">在某个第二个元素之前增加元素</button>
    <button onclick="fun3()">替换元素</button>
    <button onclick="fun4()">删除元素</button>
    <button onclick="fun5()">清空列表</button>
</body>
</html>

在这里插入图片描述

十、正则表达式

正则表达式是描述字符串模式的对象，用于对字符串模式匹配及检索替换。
语法：
- var reg = new RegExp(pattern,modifiers)
- var reg = /pattern/modifiers
修饰符：
- i，执行对大小写不敏感的匹配
- g，执行全局匹配（查找所有匹配）
- m，执行多行匹配

10.1 验证

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        var reg = /o/
        var str = "hello world"
        var str2 = "adskla"
        //使用reg的test方法验证字符串中是否有匹配的模式，返回布尔值
        console.log(reg.test(str))
        console.log(reg.test(str2))
    </script>
</head>
<body>
    
</body>
</html>

在这里插入图片描述

10.2 匹配

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        var reg = /o/
        var str = "hello world"
        //使用str的match函数
        console.log("-------普通匹配------")
        var ret = str.match(reg)
        //返回值是一个数组
        console.log("返回值是" + typeof ret)
        console.log(ret)
        console.log("数组的长度是" + ret.length)
        for(var i = 0; i < ret.length; i++){
            console.log(ret[i])
        }
        console.log("-------全局匹配------")
        var reg2 = /o/g//全局匹配
        ret = str.match(reg2)
        console.log(ret)
        console.log("-------不区分大小写的匹配------")
        var reg3 = /o/ig
        str = "hello wOrld"
        ret = str.match(reg3)
        console.log(ret)
    </script>
</head>
<body>
    
</body>
</html>

在这里插入图片描述

10.3 替换

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        var reg = /o/
        var str = "hello world"
        //使用str的replace方法
        console.log("------普通替换-----")
        console.log(str.replace(reg,"***"))
        //原字符串未改变，返回的是新的字符串
        console.log("原字符串" + str)
        console.log("------全局替换------")
        reg = /o/g
        console.log(str.replace(reg,"(((())))"))
        console.log("------不区分大小写的替换------")
        reg = /o/ig
        str = "hello wOrld"
        console.log(str.replace(reg,"123"))
        console.log("------区分大小写的替换-----")
        reg = /o/g
        console.log(str.replace(reg,"123"))
    </script>
</head>
<body>
    
</body>
</html>

在这里插入图片描述

10.4 前缀后缀验证

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        var reg1 = /world/
        var reg2 = /^world/ //以前缀开头
        var reg3 = /world$/ //以后缀结尾
        var reg4 = /^world$/
        var reg5 = /^worldworld$/
        var str1 = "hello world hello"
        var str2 = "world hello hello"
        var str3 = "hello hello world"
        var str4 = "world"
        var str5 = "worldworld"

        console.log("-----验证字符串中是否有world----")
        console.log(reg1.test(str1))
        console.log(reg1.test(str2))
        console.log(reg1.test(str3))
        console.log(reg1.test(str4))
        console.log(reg1.test(str5))
        console.log("-----验证字符串是否以world开头----")
        console.log(reg2.test(str1))
        console.log(reg2.test(str2))
        console.log(reg2.test(str3))
        console.log("-----验证字符串是否以world结尾----")
        console.log(reg3.test(str1))
        console.log(reg3.test(str2))
        console.log(reg3.test(str3))
        console.log("-----验证字符串是否以world开头以world结尾----")
        console.log(reg4.test(str4))
        //reg4表示的模式是以world开头并且以同样的这个world结尾
        //也就是说字符串中除了world不能出现其他任何内容了
        //在正则表达式中，如果不指定字母等的个数，那么匹配的就是该字母等字符本身
        console.log(reg4.test(str5))
        console.log(reg5.test(str5))
    </script>
</head>
<body>
    
</body>
</html>

在这里插入图片描述

10.5 用户名验证

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        var reg = /^[a-zA-Z]\w{5,9}$/
        var str = prompt("请输入用户名","以字母开头，6-10位，其余字符可以是字母、数字或下划线")
        var ret = reg.test(str)
        alert(ret)
    </script>
</head>
<body>
    
</body>
</html>

在这里插入图片描述

10.6 邮箱验证

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        var reg = /^[a-zA-Z0-9]+@([a-zA-Z0-9]+.)+[a-zA-Z]+$/
        var str1 = "asdkj@qq.com"
        var str2 = "asdkj@qq.ads.com"
        var str3 = "asd____kj@qq.com"
        console.log(reg.test(str1))
        console.log(reg.test(str2))
        console.log(reg.test(str3))
    </script>
</head>
<body>
    
</body>
</html>