JavaWeb-JavaScript中篇总结

说明：

接着上篇文章的描述，上篇总结的是JavaScript的基础部分，接下来对它的高级部分做一个概述，重要的部分就在表单验证这一部分，前面学的大部分被都在为这一步做铺垫（这里说的是后端开发的，前端开发的肯定要精通掌握）。

JavaScript高级部分总结目录

后续内容为DOM编程

8、JavaScript常用事件

Ⅰ常用事件总结

事件名称	事件名称描述
blur()	失去焦点
focus()	获得焦点
onclick()	鼠标单击
ondblclick()	鼠标双击
onkeyup()	键盘按下
onkeydown()	键盘弹起
onmousedown()	鼠标按下
onmouseup()	鼠标弹起
onmouseover()	鼠标经过
onmousemove()	鼠标移动
onmouseout()	鼠标离开
onreset()	重置
onsubmit()	提交
onselect()	文本被选定
onload()	页面加载完毕
onchange()	下拉列表选中项该表或者文本框内容改变

Ⅱ 注册事件的两种方式

建议使用第二种
第一种方式：
直接在标签事件中使用事件句柄

<script type="text/javascript">
    function sayhello() {
        alert("hello,javascript")
    }
script>
<input type="button" value="hello" onclick="sayhello()">
1
2
3
4
5
6

第二种注册时间的方式：
使用纯代码的方式完成事件的注册

<script type="text/javascript">
    function dosome(){
        alert("dosome")
    }

    //第一步：先获取这个按钮对象，
    var btnObj = document.getElementById("mybtn");
    //第二步：给按钮对象的onclick属性赋值
    btnObj.onclick = dosome;//不能加括号
    //也可以使用此种方式btnObj.onclick = function(){}

    function eat(){
        alert("eat...")
    }
    document.getElementById("mybtn1").onclick = eat;

script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

9、JavaScript代码的执行顺序

先执行html代码，对于JavaScript中绑定的事件需要在后面执行。
现在问题是：将JavaScript中的代码写在前面，所以它会先执行，因此要对脚本代码进行特殊的处理：将需要执行的脚本代码放在load事件的函数里，具体的操作如下：【下方代码不常用，常用的是下一个】

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JavaScript代码的执行顺序title>
head>



<body onload="ready()">
    <script type="text/javascript">


        function ready(){
            //第一步：根据id获取节点对象
            var btn = document.getElementById("btn")
            //第二步：根据节点对象绑定事件
            btn.onclick = function () {
                alert("Hello JS ...")
            }
        }
    script>
    <input type="button" value="hello" id="btn">
body>
html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

将onclick属性放在JavaScript代码里的写法：

    ①页面加载过程中，将函数a注册给了load事件
    ②页面加载完毕之后，load事件发生了，此时执行回调函数a
    ③回调函数a执行过程中，把b函数注册给了id="btn"的click事件
    ④当id="btn"节点发生click事件之后，执行回调函数b

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JavaScript代码的执行顺序title>
head>
<body>
    <script type="text/javascript">
        //页面加载过程中，将函数a注册给了load事件
        //页面加载完毕之后，loaf事件发生了，此时执行回调函数a
        //回调函数a执行过程中，把b函数注册给了id="btn"的click事件
        //当id="btn"节点发生click事件之后，执行回调函数b
        window.onload = function (){//函数a
            document.getElementById("btn").onclick = function (){//函数b
                alert("Load...")
            }
        }
    script>
    <input type="button" value="hello" id="btn">
body>
html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

小练习：通过JS代码来设置节点的属性

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JS代码设置节点的属性title>
head>
<body>

    <script type="text/javascript">
        window.onload = function (){
            document.getElementById("btn").onclick = function () {
                var mytext = document.getElementById("mytext");
                mytext.type = "checkbox"
            }
        }
    script>
    <input type="text" id="mytext">
    <input type="button" value="将文本框变成一个复选框" id="btn">
body>
html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

10、JavaScript捕捉回车键

实现的功能就是：在进行登陆的时候，用户输完账号和密码之后，按下回车键（对于用户来说就可等着服务器响应，然后进行登录），总之按下回车键替代了点击登录按钮

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JS捕捉回车键title>
head>
<body>
    <script type="text/javascript">
        window.onload = function () {
            var username = document.getElementById("username")
            //回车键的键值是13
            //ESC的键值是27
            /*username.onkeydown = function (event) {//event会接受一个事件对象 （键盘按下的事件）
                //获取键值
                alert(event.keyCode)
            }*/

            //实现登录
            username.onkeydown = function (event) {
                if (event.keyCode == 13){
                    alert("正在进行验证...")
                }
            }
        }
    script>

    <input type="text" id="username">
body>
html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

11、void运算符

Ⅰ void运算符

void(表达式)

Ⅱ 运算原理

     执行表达式，但是不返回任何的结果。
        avascript:void(0)
         其中javascript：作用是告诉浏览器最后一行是一段JS代码，所以javascript：是不能省略的

总结：
就好比这里有一份超链接，再点击后后到达新的界面，如果没有定义也会刷新现在的界面，加上void可以使弹窗【执行操作后】结束后停留在现有界面

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>void运算符title>
head>
<body>

    页面顶部<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
    <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
    <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
    <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
    
    <a href="javascript:void(0)" onclick="window.alert('test')">既保住超链接的样式，同时用户在点击超链接时执行一段JS代码，单页面不能跳转a>
body>
html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

12、JavaScript控制语句

还是使用之前Java学到的，不做更新，这里只是简单的回顾

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>控制语句title>
head>
<body>
    <script type="text/javascript">
        /*
        * JS中的控制语句：
        * if、for、while、do...while、switch、continue、break*/

        //创建JS数组
        var arr = [true,false,"abc",123]//JS数组可以存放任意类型的数据

        //遍历数组
        for (var i = 0; i < arr.length; i++) {
            alert(arr[i])
        }

        //for in
        for(var i in arr){
            alert(arr[i])
        }

        User = function (username, userage) {
            this.username = username
            this.userage = userage
        }

        var user = new User("lihua",22)
        //两种调用方式
        alert(user.username+","+user.userage)
        alert(user["username"]+","+user["userage"])
    script>
body>
html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37

后续内容为DOM编程

13、设置和获取文本框的value

1、JavaScript包括三大块：
    ECMAScript：JS的核心语法（ES规范/ECMA-262规范）
    DOM：Document Object Model（文本对象模型，对网页中的节点进行增删改）HTML文档被看作是一个DOM树
    var Obj = document.getElementById()
    BOM：Browse Object Model（浏览器对象模型）
关闭、打开浏览器窗口，后退、前进
2、DOM和BOM的区别
     BOM的顶级对象是：window
     DOM的顶级对象是：document，实际上BOM是包括DOM

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>获取文本框的valuetitle>
head>
<body>
    <script type="text/javascript">
        /*window.onload = function (){
            var mybtn = document.getElementById("mybtn")
            // var mybtn = window.document.getElementById("mybtn")window可以省略
            alert(mybtn)//[object HTMLInputElement]弹出窗口为button元素
        }*/
        window.onload = function (){
            var btnElt = document.getElementById("btn")
            btnElt.onclick = function () {
                var usernameElt = document.getElementById("username")
                // alert(usernameElt.value)//获取文本框的value
                //也可以点击按钮设置文本框的内容
                usernameElt.value = "zhangsan"
            }
        }
    script>
   

    <input type="text" id="username">
    <input type="button" id="btn" value="获取文本框的value">
body>
html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

小练习：

一共两个文本框，一个按钮，点击按钮之后可以把第一个文本框的内容放到第二个文本框里

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>文本框内容设置title>
head>
<body>
    
    <script type="text/javascript">
        window.onload = function () {
            var btnElt = document.getElementById("mybtn")
            btnElt.onclick = function () {
                var textElt1 = document.getElementById("mytext1")
                var textElt2 = document.getElementById("mytext2")
                textElt2.value = textElt1.value
            }
        }
    script>

    <input type="text" id="mytext1">
    <input type="button" value="将第一个文本框内容放到第二个文本框" id="mybtn">
    <br>
    <input type="text" id="mytext2">
body>
html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

14、innerHTML和innerText操作div和span

1.innerHTML和innerText之间的区别？
     相同点：都是设置元素的内容
    不同点：
        innerHTML：会把后面的字符串当成“html代码”来解释并执行
         innerText：即使后面是一段html代码，也只是当作普通文本来执行

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>innerHTML和innerText操作div和spantitle>
    <style type="text/css">
        #div1{
            background-color: aquamarine;
            width: 300px;
            height: 300px;
            border: 1px black solid;
            position: absolute;
            top: 100px;
            left: 100px;
        }
    style>
head>
<body>
    
    <script type="text/javascript">
        window.onload = function (){
            var btnElt = document.getElementById("btn")
            btnElt.onclick = function () {
                //设置div的内容
                //第一步：获取div对象
                var divElt = document.getElementById("div1")
                //第二步：使用innerHTML属性来设置元素内部的内容
                // divElt.innerHTML = "hello,jack"
                //innerHTML属性：后面的内容会被当成HTML代码来执行
                //innerText属性：后面的内容会被当成普通的文本来执行

                // divElt.innerHTML = "用户名不能为空"
                divElt.innerText = "用户名不能为空"
            }
        }
    script>
    <input type="button" value="设置div中的内容" id="btn">
    <div id="div1">

    div>
body>
html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42

15、正则表达式

1.什么是正则表达式？有什么作用？
    正则表达式：Regular Expression
    正则表达式主要用在字符串的格式匹配方面。
2.正则表达式是一门独立的学科，在Java语言中支持、C语言中支持、在JavaScript中支持
    大部分的编程语言都支持正则表达式。正则表达式最初使用在医学方面，用来表示神经符号等。
    目前使用最多的就是计算机编程领域，用作字符串的格式匹配，包括搜索方面。
3.正则表达式需要掌握的程度？
    第一：常见的正则表达式符号要认识
    第二：简单的正则表达式对象会写
    第三：能看懂别人写的正则表达式
    第四：在JavaScript中，怎么创建正则表达式对象（new对象）
    第五：在JavaScript中，正则表达式对象有哪些方法（调方法）
    第六：要能够快速在网络上找到自己要使用的正则表达式
5.简单的正则表达式会写
6.JS中创建正则表达式对象？调用正则表达式方法？【主要关注这一个】
  第一种创建方式：
    var regExp = /正则表达式/flags
  第二种创建方式：
    var regRxp = new RegExp(“正则表达式”,“flags”)
flags可取数值
    g：全局匹配
    i：忽略大小写
    m：多行匹配（前面是正则表达式时m不能使用，只有前面是普通字符串的时候m才可以使用）

正则表达式对象的测试方法：

true/false = 正则表达式对象.test(“用户填写的字符串”)
true：字符串格式匹配成功
false：字符串格式匹配失败

最基本的需要掌握的内容：Ⅰ 正则表达式的创建方法 Ⅱ 正则表达式的测试方法

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JavaScript正则表达式title>
head>
<body>
    <script type="text/javascript">
        window.onload = function () {
            document.getElementById("btn").onclick = function () {
                var email = document.getElementById("email").value
                //两边的斜杠需要加上
                var emailRegExp = /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/
                var ok = emailRegExp.test(email)
                if (ok){
                        document.getElementById("emailError").innerText="邮箱地址合法"
                }else {
                    document.getElementById("emailError").innerText="邮箱地址不合法"
                }
            }

            //给文本框绑定focus
            document.getElementById("email").onfocus = function () {
                document.getElementById("emailError").innerText = ""
            }
        }
    script>
    
    <input type="text" id="email">
    <span id="emailError" style="color: red; font-size: 12px">span>
    <br>
    <input type="button" value="验证邮箱" id="btn">
body>
html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34

总结：这里不要太过于纠结【我们写不出来，这里只要会创建对象，会使用test方法测试就可以了】

16、JavaScript表单验证

【此项很重要】

实现简单的注册表单验证功能

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表单验证title>
    <style type="text/css">
        span{
            color: red;
            font-size: 12px;
        }
    style>
head>
<body>

    <script type="text/javascript">
        /*
        （1）用户名不能为空
        （2）用户名必须在6-14位之间
        （3）用户名只能有数字和字母组成，不能含有其他字符（使用正则表达式）
        （4）密码和确认密码一致
        （5）统一失去焦点验证
        （6）错误提示信息统一在span标签中提示，并且要求字体为12号，红色
        （7）文本框再次获得焦点后，清空错误提示信息，如果文本框中数据不合法，要求清空文本框的value
        （8）最终表单中所有项均和法方可提交
        */
        window.onload = function (){
            //获取用户名错误的span标签
            var usernameErrorspan = document.getElementById("usernameError")

            //获取username节点
            var usernameElt = document.getElementById("username")
            //给用户名文本边框绑定blur事件（失去焦点）
            usernameElt.onblur = function () {
            //获取username的value
            var username = usernameElt.value
            //去除前后的空白
            username = username.trim()

            //判断用户名是否为空
            if (username){
                //代表username不为空
                if (username.length<6 ||username.length>14){
                    //用户名长度非法
                    usernameErrorspan.innerText = "用户名长度必须在[6-14]之间"
                }else{
                    //用户名长度合法
                    //继续判断是否含有特殊符号（使用正则表达式）
                    var usernameRegExp = /^[A-Za-z0-9]+$/
                    var ok = usernameRegExp.test(username)
                    if (!ok){
                        usernameErrorspan.innerText = "用户名只能由数字和字母组成"
                    }else{
                        //用户名最终合法
                    }
                }
            }else{
                    //代表username为空
                usernameErrorspan.innerText = "用户名不能为空"
                }
            }


            //绑定用户名的focus事件
            usernameElt.onfocus = function () {

                //清空不合法的用户名信息,使用提示标签判断是否合法（和下面语句不能调换位置）
                if (usernameErrorspan.innerText != "")
                usernameElt.value = ""

                //当光标回到文本框之后，将用户名的提示信息设置为null
                usernameErrorspan.innerText = ""
            }



            //给确认密码绑定验证信息：判断密码和确认密码是否一致
            //获取密码提示的span标签
            var userpwdError = document.getElementById("pwdError")

            var userpwdElt = document.getElementById("userpwd2")
            userpwdElt.onblur = function () {
                //获取密码和确认密码
                var pwdvalue2 = userpwdElt.value
                var pwdvalue1 = document.getElementById("userpwd1").value
                if (pwdvalue1 != pwdvalue2){
                    userpwdError.innerText = "密码和确认密码不一致"
                }else {
                    //密码和确认密码一致
                }
            }

            //当确认密码框获得焦点的时候将提示信息设置为空
            userpwdElt.onfocus = function () {
                if (userpwdError.innerText != ""){
                    userpwdElt.value = ""
                }
                userpwdError.innerText = ""
           }


            //给email绑定blur事件

            //获取邮箱提示的span标签
            var emailErrorElt = document.getElementById("emailError")

            var emailElt = document.getElementById("email")
            emailElt.onblur = function (){
                var email = emailElt.value
                var emailRegExp = /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/
                var ok = emailRegExp.test(email)
                if (!ok){
                    emailErrorElt.innerText = "邮箱输入不合法"
                }else{
                    //邮箱输入合法
                }
            }

            // emailElt.onfocus
            emailElt.onfocus = function () {
                if (emailErrorElt.innerText != ""){
                    emailElt.value = ""
                }
                emailErrorElt.innerText = ""
            }

            //给注册按钮绑定鼠标单击事件
            var submitBtnElt = document.getElementById("submitBtn")
            submitBtnElt.onclick = function (){
                //出发username的blur 、userpwd2的blur、email的blur
                usernameElt.focus();
                usernameElt.blur();

                userpwdElt.focus()
                userpwdElt.blur()

                emailElt.focus()
                emailElt.blur()
                //当表单所有项均合法的时候提交表单
                if (usernameErrorspan.innerText=="" && userpwdError.innerText=="" &&emailErrorElt.innerText==""){
                    //提交表单
                    var submitFormElt = document.getElementById("userForm")
                    submitFormElt.submit();
                }
            }
        }
    script>

    <form id="userForm" action="http://localhost:8080/oa/save" method="post">
        用户名：<input id="username" name="username" type="text">
        <span id="usernameError">span>
        <br><br>
        密    码：<input id="userpwd1" name="password" type="text">
        <br><br>
        确认密码:<input id="userpwd2" name="password1" type="text">
        <span id="pwdError">span>
        <br><br>
        邮    箱：<input id="email" name="email" type="text">
        <span id="emailError">span>
        <br><br>
            <input type="button" value="注册" id="submitBtn">     <input type="reset" value="重置">
    form>
body>
html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163

17、JavaScript中复选框的全选和取消全选

正向【选中全选则所有复选框被选中】采用的方法是：让每一个复选按钮的状态和全选复选框的状态一致
反向【选中所有则全选框自动选中】采用的方法是：只要由单独复选框被点击的时候【第一层for循环】，进行一次遍历【第二层循环】，判断单独复选框被选中的个数

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>复选框的全选和取消全选title>
head>
<body>
    <script type="text/javascript">
        //进行优化，并且解决三个单独被选中第一个复选框也要被选中的事件
        window.onload = function () {
            var firstChk = document.getElementById("firstChk")
            var interests = document.getElementsByName("interest")
            firstChk.onclick = function () {
                for (var i = 0; i < interests.length; i++){
                    //将每一个复选框的状态和第一个复选框的状态绑定到一起
                    interests[i].checked = firstChk.checked
                }
            }
            //当三个按钮都被选中的时候，就将第一个复选框也选中
            var all = interests.length;
            //绑定每个复选框的click事件

            for (var i = 0; i < interests.length; i++){
                interests[i].onclick = function () {
                    var chkCount = 0;
                    for (var i = 0; i<interests.length; i++) {
                        if (interests[i].checked) {
                            chkCount++;
                        }
                    }
                    firstChk.checked = (all == chkCount)
                }
            }
        }
    script>
    <input type="checkbox" id="firstChk"><br>
    <input type="checkbox" name="interest" value="eat">吃饭<br>
    <input type="checkbox" name="interest" value="sleep">睡觉<br>
    <input type="checkbox" name="interest" value="play">打豆豆<br>
body>
html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41

相关阅读:
go-zero整合Kafka实现消息生产和消费
 拓扑排序详解
 【CLS数据淘金第四期】网络流日志-云联网日志分析
 oracle linux8.8上安装oracle 19c集群
 SpringMvc内置的九大组件
 数据库实践 Hw09
MyBatis trim标签起什么作用呢？
链的解构主义：一览 9 大模块化公链
 入侵检测代码
 高等数学（第七版）同济大学习题5-3 个人解答（后4题）
原文地址：https://blog.csdn.net/weixin_44606952/article/details/125884695