JavaScript

什么是JavaScript？

ECMScript、es

JavaScript语言诞生主要是完成页面的数据验证
因此它运行在客户端，需要运行浏览器来解析执行JavaScript代码，简称JS
JS是Netscape网景公司的产品，最早取名为LiveScript 为了吸引更多java开发人员，更名为JavaScript，JS是弱类型，Java是强类型

JavaScript和html代码的结合

使用script标签来书写JavaScript代码
使用script标签引入单独的JavaScript代码文件

JavaScript是运行在客户端的一门编程语言，简称js

js的代码该如何去编写

我们需要结合html来编写js代码：

a、在html文件中定义一个<script></script>标签，在该标签的内部去写js代码


xxxxxxxxxx
20
1
<!DOCTYPE html>
2
<html lang="en">
3
<head>
4
    <meta charset="UTF-8">
5
    <title>JavaScript</title>
6
</head>
7

8
<!--定义一个script去写js代码-->
9
<script>
10

11
    //js中封装的有对应的函数
12
    alert("网页弹窗");
13

14
</script>
15
<body>
16

17

18

19
</body>
20
</html>

b、会声明一个js文件，在js文件中去写js代码，然后通过<script>标签去引入js文件


xxxxxxxxxx
2
1
<!--引入js文件-->
2
<script type="text/javascript" src="../js/test.js"></script>

JavaScript变量

数值类型：number
字符串类型：string
对象类型：object
布尔类型：boolean
函数类型：function

在js中如何去声明一个变量

var、let这两个关键字可以去接收一个变量

而且任何变量都可以用这两个关键字接收

var i = 100

let str = "123456"

关于js中的逻辑运行算（与 && 或 || 非 ! ）：

在js中 null、undefined、0 、false参与逻辑运算时本身代表的是false，其余所有的数据都表示true

与运算

如果参与&&与运算两者都为真的情况下，会取到后者的值
如果参与&&与运算有一者为假的情况下，会取到为假的那个值
如果参与&&与运算两者都为假的情况下，会取到前者的值

或运算

如果参与||或运算两者都为真的情况下，会取到前者的值
如果参与||或运算有一者为假的情况下，会取到为真的那个值
如果参与||或运算两者都为假的情况下，会取到后者的值

都有惰性取值的特点，最后判断完的值返回

取非！运算，首先要搞清楚，数据本身是为真还是为假，取非之后，真就是假，假就是真

数组的定义方式

JS中数组的定义：

格式：

var 数组名 = [];//空数组

var 数组名 = [1,'abc',true];//定义数组同时赋值元素

js数组可以在一个数组中存放任意类型的值

js数组可以给任意一个下标赋值，未赋值的默认为undefined

遍历数组


xxxxxxxxxx
5
1
for (let i = 0;i < array.length; i++){
2

3
    alert(array[i]);
4

5
}

JS对象

在js中也能new对象，但是必须使用js封装好的对象

通过对象.属性 = 值的方法赋值，属性和值都可以自定义


xxxxxxxxxx
13
1
let object = new Object();
2

3
object.name = "tom";
4
object.age = 15;
5
object.address = "北京市";
6
object.key = "value";
7

8
alert(object.name);
9
alert(object.age);
10
alert(object.address);
11

12
//正则对象
13
let regExp = new RegExp();

JS正则表达式用法:

用双引号的正则表达式需要对特殊字符进行转义

用"\"符号的正则表达式则标识表达式不需要转义


xxxxxxxxxx
219
1
<!DOCTYPE html>
2
<html lang="en">
3
<head>
4
    <meta charset="UTF-8">
5
    <title>用户注册</title>
6
</head>
7
<script>
8

9
    let flag = false;
10

11
    window.onload = function (){
12

13
        let register = document.getElementById("register");
14

15
        let u = new RegExp("^[A-z][A-z-_0-9]{3,15}$");
16

17
        let ph = new RegExp("^1[3456789]\\d{9,}$");
18

19
        let ps = new RegExp("[A-z-+*/_0-9]{3,15}$");
20

21
        let usernameEl = document.getElementById("username");
22

23
        let passwordEl = document.getElementById("password");
24

25
        let confirmPasswordEl = document.getElementById("confirmPassword");
26

27
        let phoneEl = document.getElementById("phone");
28

29
        let checkConfirmPassword = function (){
30

31
            let password = passwordEl.value;
32

33
            let confirmPassword = confirmPasswordEl.value;
34

35
            if (confirmPassword == password){
36

37
                document.getElementById("confirmPasswordSpan").innerText = "密码一致";
38

39
                document.getElementById("confirmPasswordSpan").style = "color: green";
40

41
                flag = true;
42

43
            }else {
44

45
                document.getElementById("confirmPasswordSpan").innerText = "密码不一致";
46

47
                document.getElementById("confirmPasswordSpan").style = "color: red";
48

49
                flag = false;
50

51
            }
52

53
            if (confirmPasswordEl.value.length == 0){
54

55
                document.getElementById("confirmPasswordSpan").innerText = "";
56

57
            }
58

59
        }
60

61
        usernameEl.onblur = function(){
62

63
            let username = usernameEl.value;
64

65
            if (u.test(username)){
66

67
                document.getElementById("usernameSpan").innerText = "用户名合法";
68

69
                document.getElementById("usernameSpan").style = "color: green";
70

71
                flag = true;
72

73
            }else {
74

75
                document.getElementById("usernameSpan").innerText = "用户名不合法";
76

77
                document.getElementById("usernameSpan").style = "color: red";
78

79
                flag = false;
80

81
            }
82

83
            if (usernameEl.value.length == 0){
84

85
                document.getElementById("usernameSpan").innerText = "";
86

87
            }
88

89
        }
90

91
        phoneEl.onblur = function(){
92

93
            let value = phoneEl.value;
94

95
            if (ph.test(value)){
96

97
                document.getElementById("phoneSpan").innerText = "手机号合法";
98

99
                document.getElementById("phoneSpan").style = "color:green";
100

101
                flag = true;
102

103
            }else {
104

105
                document.getElementById("phoneSpan").innerText = "手机号不合法";
106

107
                document.getElementById("phoneSpan").style = "color:red";
108

109
                flag = false;
110

111
            }
112

113
            if (phoneEl.value.length == 0){
114

115
                document.getElementById("phoneSpan").innerText = "";
116

117
            }
118

119
        }
120

121
        passwordEl.onblur = function (){
122

123
            let password = passwordEl.value;
124

125
            if (ps.test(password)){
126

127
                document.getElementById("passwordSpan").innerText = "密码合法";
128

129
                document.getElementById("passwordSpan").style = "color: green";
130

131
                flag = true;
132

133
            }else {
134

135
                document.getElementById("passwordSpan").innerText = "密码不合法";
136

137
                document.getElementById("passwordSpan").style = "color: red";
138

139
                flag = false;
140

141
            }
142

143
            if (passwordEl.value.length == 0){
144

145
                document.getElementById("passwordSpan").innerText = "";
146

147
            }
148

149
            checkConfirmPassword();
150
            
151
        }
152

153
        confirmPasswordEl.onblur = checkConfirmPassword;
154

155

156

157
        register.onclick = function (){
158

159
            if (flag){
160

161
                alert("注册成功");
162

163
            }else{
164

165
                alert("注册失败")
166

167
            }
168

169
        }
170

171
    }
172
</script>
173
<body>
174
<h1 align="center">用户注册</h1>
175
    <table border="1px" align="center">
176
        <tr>
177
            <td>
178
                用户名：
179
            </td>
180
            <td>
181
                <input type="text" id="username">
182
                <span id="usernameSpan"></span>
183
            </td>
184
        </tr>
185
        <tr>
186
            <td>
187
            手机号：
188
            </td>
189
            <td>
190
                <input type="text" id="phone">
191
                <span id="phoneSpan"></span>
192
            </td>
193
        </tr>
194
        <tr>
195
            <td>
196
                密码：
197
            </td>
198
            <td>
199
                <input type="password" id="password">
200
                <span id="passwordSpan"></span>
201
            </td>
202
        </tr>
203
        <td>
204
            确认密码：
205
        </td>
206
        <td>
207
            <input type="password" id="confirmPassword">
208
            <span id="confirmPasswordSpan"></span>
209
        </td>
210
        </tr>
211
        <tr>
212
            <td colspan="2" align="center">
213
                <input type="button" id="register" value="注册">
214
            </td>
215
        </tr>
216
    </table>
217

218
</body>
219
</html>

函数的两种定义方式

function 函数名(形参列表){函数体}


xxxxxxxxxx
7
1
function function01(num1,num2){
2
    
3
    let num = num1 + num2;
4
    
5
    return num;
6
    
7
}

let 函数名 = function(形参列表){函数体}


xxxxxxxxxx
7
1
let function02 = function(num1,num2){
2
    
3
    let num = num1 + num2;
4
    
5
    return num;
6
    
7
}

注：js中的函数，在定义参数的时候可以不用写数据类型，参数与参数之间用逗号分割

注：js中的函数没有返回值类型，在函数体中写完代码之后，有返回值就返回，没有返回值就不用返回

注：js中的函数是不支持重载的，如果你同时定义了两个同名的函数，下面那个会覆盖上面那个

在JavaScript语言中，定义带有返回值的函数只需要在函数体内直接使用return语句返回值即可

JS隐式参数

不传参数可以通过agruments获取到传进函数的值


xxxxxxxxxx
10
1
//arguments js 中的隐式参数，是一个数组类型，可以去接收所有数据
2
function function02(){
3

4
    alert(arguments[0]);
5
    alert(arguments[1]);
6
    alert(arguments[2]);
7

8
}
9

10
alert(function02(100,true,"hello"));

简单的数字相加函数


xxxxxxxxxx
16
1
let function02 = function(num1,num2) {
2

3
       let num = null;
4

5
       if ((typeof num1) == "number" && (typeof num2) == "number") {
6

7
           let num = num1 + num2;
8

9
       } else {
10

11
           return "你传的数据不合法";
12

13
       }
14

15
       return num;
16
   }

JS中的事件

onload 加载完成事件：页面加载完成之后，常用于做页面js代码初始化操作
onclick 单机事件：常用于按钮的点击响应操作
onblur 失去焦点事件：常用于输入框失去焦点后验证其输入内容是否合法
onchange 内容发生改变事件：常用于下拉列表和输入框内容发生改变后操作
onsubmit 表单提交事件：常用于表单提交前，验证所有表单项是否合法

关于js中的事件（分为静态注册和动态注册）：

静态注册：通过html标签内部的事件属性来完成事件的注册


xxxxxxxxxx
1
1
<body onload="alert('静态注册页面加载完成事件')"> </body>


xxxxxxxxxx
2
1
<!--鼠标单机事件：静态注册-->
2
<input type="button" value="测试鼠标单机事件" onclick="alert('鼠标单机事件静态注册')">

动态注册：先通过dom对象获取到某一个具体的html元素，然后对这个标签进行绑定，注册事件

document.getElementById()通过id这个属性查找html元素

注：动态注册一定要写在script标签中，或者js文件中


xxxxxxxxxx
9
1
//页面加载完成事件动态注册
2
//window是html内置对象
3
  window.onload = function (){
4
      
5
    //在该函数中完成页面初始化的操作
6
      
7
      alert("动态绑定页面加载完成事件")
8

9
  }

动态注册单击事件


xxxxxxxxxx
45
1
<!DOCTYPE html>
2
<html lang="en">
3
<head>
4
    <meta charset="UTF-8">
5
    <title>JavaScript</title>
6
</head>
7

8
<!--定义一个script去写js代码-->
9
<script type="text/javascript">
10

11

12
  //页面加载完成事件动态注册
13
  //window是html内置对象
14
    window.onload = function (){
15

16
        alert("动态绑定页面加载完成事件")
17

18
        //通过动态注册的方式来注册单击事件
19
        let elementInput = document.getElementById("onclickTest");
20

21
        //[object HTMLInputElement] dom对象
22
        alert(elementInput)
23

24
        //动态注册单击事件
25
        elementInput.onclick=function (){
26

27
            alert("触发了单击事件，动态注册的方式")
28

29
        }
30
    }
31

32

33
    
34

35
</script>
36

37
<!--引入js文件-->
38
<!--<script type="text/javascript" src="../js/test.js"></script>-->
39
<body>
40

41
    <!--鼠标单机事件：静态注册-->
42
    <input type="button" value="测试鼠标单机事件(静态)" onclick="alert('鼠标单机事件静态注册')"><br>
43
    <input type="button" value="测试鼠标单机事件(动态)" id="onclickTest"><br>
44
</body>
45
</html>

加载完成事件（onload）：

浏览器在解析html页面的时候是一个标签一个标签的往下解析

在浏览器解析完所有的html元素之后会触发的操作

失去焦点事件（onblur）


xxxxxxxxxx
1
1
测试鼠标失去焦点事件(静态):<input type="text" id="onblur" onblur="alert('触发了失去焦点事件')"><br>


xxxxxxxxxx
9
1
//动态绑定失去焦点事件
2
let elementOnblur = document.getElementById("onblurTest");
3

4
//绑定事件
5
elementOnblur.onblur = function (){
6

7
    alert("触发了失去焦点事件，动态注册的方式");
8

9
}

内容发送改变事件（onchange）


xxxxxxxxxx
1
1
测试内容发生改变事件(静态):<input type="text" value="123" onchange="alert('内容已发生改变')"><br>


xxxxxxxxxx
9
1
//内容发生改变事件
2
let elementSelect = document.getElementById("onchangeTest");
3

4
//绑定事件
5
elementSelect.onchange = function (){
6

7
    alert("内容已发生改变,动态注册的方式");
8

9
}

关于html的上下文文本对象document

这个是html内置的对象，通过这个对象可以去获取html对象（标签）

而且获取的方式有很多种（比如：根据id属性获取，根据name属性获取，根据具体的标签名称获取）

DOM模型和document对象

DOM全称是Document Object Model 文档对象模型

document对象

1.Document它管理了所有的HTML文档内容

2.document它是一种树结构的文档，有层级关系

3.它让我们把所有的标签都对象化

4.我们可以通过document访问所有的标签对象

Document对象中的方法

document.getElementById(elementId)通过标签的id属性查找标签dom对象，elementId是标签的id属性值
document.getElementsByName(elementName)通过标签的name属性查找标签dom对象，elementName标签的name属性值
document.getElementsByTagName(tagname)通过标签名找标签dom对象，tagname是标签名
document.createElement(tagName)方法，通过给定的标签名，创建一个标签对象，tagName是要创建的标签名


xxxxxxxxxx
11
1
//获取所有name属性值为username的标签
2
let inputEls = document.getElementsByName("username");
3

4
//[object NodeList]
5
alert(inputEls);
6

7
for (let i = 0; i < inputEls.length; i++) {
8

9
    alert(inputEls[i]);
10

11
}

在body中添加元素


xxxxxxxxxx
9
1
elementById1.onclick = function (){
2

3
    let htmlButtonElement = document.createElement("button");
4

5
    let elementById2 = document.getElementById("body");
6

7
    elementById2.appendChild(htmlButtonElement);
8

9
}

标签的常用属性

childNodes属性，获取当前节点的所有子节点
firstChild属性，获取当前节点的第一个子节点
lastChild属性，获取当前节点的最后一个子节点
parentNode属性，获取当前节点的父节点
nextSibling，获取当前节点的下一个节点
previousSibling属性，获取当前节点的上一个节点
className用于获取或设置标签的class属性值
innerHTML属性，表示获取/设置起始标签和结束标签中的内容
innerText属性，表示获取/设置起始标签和结束标签中的文本


xxxxxxxxxx
29
1
window.onload = function (){
2

3
    //返回一个dom对象
4
    let elementBody = document.getElementById("body");
5

6
    //获取所有的子节点
7
    let childNodes = elementBody.childNodes;
8

9
    for (let i = 0; i < childNodes.length; i++) {
10

11
        alert(childNodes[i]);
12

13
    }
14

15
    let firstChild = elementBody.firstChild;
16

17
    //文本对象
18
    alert(firstChild);
19

20
    let lastChild = elementBody.lastChild;
21

22
    alert(lastChild);
23

24
    let elementButton = document.getElementById("test1");
25

26
    let parentNode = elementButton.parentNode;
27

28
    
29
}