知新_RL

这个屌丝很懒，什么也没留下！

热门标签

Web前端 - JavaScript_sex18

作者：知新_RL | 2024-02-22 19:00:53

踩

sex18

Web前端 - JavaScript

传送门

1、JavaScript概述

（1）JavaScript简称JS
（2）一种脚本语言，脚本语言的特点
（3）JavaScript和JScript的关系
（4）JavaScript主要用来操作HTML中的节点，产生动态效果
（5）JavaScript和Java的区别
--------------------------------------------------------------------------------------------------------
JavaScript是运行在浏览器上的脚本语言。简称JS。
JavaScript是网景公司（NetScape）的 布兰登艾奇（JavaScript之父）开发的，最初叫做LiveScript。
LiveScript的出现让浏览器更加的生动了，不再是单纯的静态页面了。页面更具有交互性。
在历史的某个阶段，SUN公司和网景公司他们之间有合作关系，SUN公司把LiveScript的名字修改为JavaScript。
JavaScript这个名字中虽然带有“Java”但是和Java没有任何关系，只是语法上优点类似。他们运行的位置不同，
Java运行在JVM当中，JavaScript运行在浏览器的内存当中。

JavaScript程序不需要我们程序员手动编译，编写完源代码之后，浏览器直接打开解释执行。
JavaScript的“目标程序”以普通文本形式保存，这种语言都叫做“脚本语言”。

Java的目标程序以.class形式存在，不能使用文本编辑器打开，不是脚本语言。

网景公司1998年被美国在线收购。

网景公司最著名的就是领航者浏览器：Navigator浏览器。

LiveScript的出现，最初的时候是为Navigator浏览器量身定制一门语言，不支持其他浏览器。

当Navigator浏览器使用非常广泛的时候，微软害怕了，于是微软在最短的时间内组建了一个团队，
开始研发只支持IE浏览器的脚本语言，叫做JScript。

JavaScript和JScript并存的年代，程序员是很痛苦的，因为程序员要写两套程序。
在这种情况下，有一个非营利性组织站出来了，叫做ECMA组织（欧洲计算机协会）
ECMA根据JavaScript制定了ECMA-262号标准，叫做ECMA-Script。

现代的javascript和jscript都实现了ECMA-Script规范。（javascript和jscript统一了。）

以后会学习一个叫做JSP的技术，JSP和JS有啥区别？
	JSP : JavaServer Pages（隶属于Java语言的，运行在JVM当中）
	JS : JavaScript（运行在浏览器上。）
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

2、写代码

1、前3个例子最好手写（用文本编辑器写），练习一下，然后再用专门工具写

2、使用工具：HBuilderX，写后面的
	开发工具有提示功能，会方便很多	
1
2
3
4

3、HTML中嵌入JavaScript代码的 3 种方式

第一种————行间事件
	语法格式：
		<开始标签  on+事件类型 = " js代码 " ></结束标签>

	（1）<input type="button" value="hello" onclick="window.alert('hello js')" />
		
		onclick="js代码"，执行原理是什么？
			页面打开的时候，js代码并不会执行，只是把这段JS代码注册到按钮的click事件上了。
			等这个按钮发生click事件之后，注册在onclick后面的js代码会被浏览器自动调用。

	（2）JS是一种基于事件驱动型的编程语言，当触发某个事件之后，执行一段代码

	（3）JS中的任何一个事件都对应一个事件句柄，例如鼠标单击事件click，对应的事件句柄就是onclick，
	     事件句柄都是以标签的属性方式存在。在事件句柄后面可以编写JS代码，当触发这个事件之后，这段JS代码则执行了。

	（4）JS中的字符串可以使用单引号括起来，也可以使用双引号括起来

	（5）window是JS中的内置BOM顶级对象，代表当前浏览器窗口，
	     window对象有一个alert()函数，该函数可以在浏览器上弹出消息框。

	（6）JS中的一条语句结束后可以使用“;”结尾，也可以不写。

	（7）window.alert()中的window.可以省略。


第二种————脚本块（页面script标签嵌入）

	（1）样例：
		<script type="text/javascript">
			
			// 里面写JS代码

			//       JS代码的注释，这是单行注释。
			/*
				JS代码的多行注释。和java一样。
			*/

			window.alert("Hello World!") // alert函数会阻塞整个HTML页面的加载。

			window.alert("Hello JavaScript!")

		</script>

	（2）window.alert()的执行会阻塞当前页面的加载

	（3）一个页面中可以写多个脚本块

	（4）脚本块的位置没有限制

	（5）暴露在脚本块中的JS代码在页面打开的时候遵循自上而下的顺序依次逐行执行
	
第三种————引入外部独立的js文件

	（1）<script type="text/javascript" src="js文件路径"></script>

	（2）这种写法错误：
		<script type="text/javascript" src="js文件路径">这里不能写JS代码，这里写的代码不会执行。</script>

	（3）这种写法错误，结束的script标签必须有：
		<script type="text/javascript" src="js文件路径"/>
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

4、标识符和关键字

（1）标识符命名规则和规范按照java执行
（2）关键字不需要刻意记

	Java标识符的命名规则：
		① 标识符只能由数字、字母、下划线“_”、美元符号“$”组成，不能含有其它符号。
		② 标识符不能以数字开始。
		③ java 关键字和保留字不能作为标识符。例如：class  public static void这些关键字
		④ 标识符严格区分大小写。
		⑤ 标识符理论上没有长度限制。

	Java标识符的命名规范：
		规范1：见名知意
		规范2：遵循驼峰命名方式（一高一低，一高一低...）
		规范3：类名、接口名有特殊要求
			类名和接口名首字母大写，后面每个单词首字母大写。
		规范4：变量名、方法名有特殊要求
			变量名和方法名首字母小写，后面每个单词首字母大写。
		规范5：所有“常量”名：全部大写，并且单词和单词之间采用下划线衔接。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

5、变量、函数

回顾java中的变量：
	1、java中怎么定义/声明变量？
		数据类型 变量名;
		例如：
			int i;
			double d;
			boolean flag;
	2、java中的变量怎么赋值？
		使用“=”运算符进行赋值运算。（"="运算符右边先执行，将右边执行的结果赋值给左边的变量。）
		变量名 = 值;
		例如：
			i = 10;
			d = 3.14;
			flag = false;
	3、java语言是一种强类型语言，强类型怎么理解？
		java语言存在编译阶段，假设有代码：int i;
		那么在Java中有一个特点是：java程序编译阶段就已经确定了i变量的数据类型，该i变量的数据类型
		在编译阶段是int类型，那么这个变量到最终内存释放，一直都是int类型，不可能变成其他类型。
			int i = 10;
			double d = i; 
			这行代码是说声明一个新的变量d，double类型，把i变量中保存的值传给d。
			i还是int类型。
			
			i = "abc"; 这行代码编译的时候会报错，因为i变量的数据类型是int类型，不能将字符串赋给i。
			
			java中要求变量声明的时候是什么类型，以后永远都是这种类型，不可变。
			编译期强行固定变量的数据类型。称为强类型语言。
			
			public void sum(int a, int b){}
			sum(?,?);
			
javascript当中的变量：
	1、变量的声明与赋值：
		（1）声明变量： var 变量名;
		（2）给变量赋值： 变量名 = 值;
		（3）一行上也可以声明多个变量
		（4）javascript是一种弱类型语言，没有编译阶段，一个变量可以接收任何类型的数据
			var i = 100;
			i = false;
			i = "abc";
			i = new Object();
			i = 3.14;
		（5）当一个变量没有手动赋值的时候,系统默认赋值 undefined
		（6）当一个变量没有声明/定义,直接访问的话，浏览器页面表面上没有什么显示，但是在控制台可以看到报错信息
	
	2、函数的定义与调用
		（1）函数类似于java语言中的方法，是一段可以完成某个功能的可以被重复利用的代码片段
		
		（2）定义函数的两种语法
			第一种：普通函数定义，这种方式较多
				
				function 函数名(形式参数列表){
					函数体;
				}

				例如：
					function sum(a, b){
						return a + b;
					}

				注意：
				    a和b是形式参数列表，也是两个局部变量。
				    JS中的函数在【调用】的时候，实参可以随意，例如调用以上的sum函数，
				    可以这样调用：sum()，没有传任何实参的时候a和b变量没有赋值，则a和b都是undefined。
				    也可以这样调用：sum(10)，这样就表示a变量赋值10，b变量仍然是undefined。
				    还可以这样调用：sum(1,2)，这样则表示a是1，b是2。

			第二种：如果是把函数的声明当做类进行定义这种方式较多
				
				函数名 = function(形式参数列表){
					函数体;
				}

				例如：
					sum = function(a, b){
						return a + b;
					}

		（3）JS中的函数不需要指定返回值类型
			因为JS是弱类型编程语言，变量可以接收任何类型的数据，
			也就是说JS中的函数可以返回任何类型的数据，当然也可以不返回任何数据。
			返回数据使用return语句。

		（4）JS中的函数定义在脚本块中，页面在打开的时候，函数并不会自动执行，函数是需要手动调用才能执行的。
		
		（5）由于JS是一种弱类型编程语言，所以函数不能同名，没有重载机制
			JS当中的函数在调用的时候，参数的类型没有限制，并且参数的个数也没有限制（弱类型）
			所以函数不能同名，没有重载机制
				重载：方法名或者函数名一样，形参不同（个数、类型、顺序）	
			 在JS当中，函数的名字不能重名，当函数重名的时候，后声明的函数会将之前声明的同名函数覆盖。

		（6）用户点击按钮，调用函数
			<script type="text/javascript">
				function sayHello(){
					alert("hello js");
				}
			</script>

			<input type="button" value="hello" onclick="sayHello();"/>
	
	3、局部变量和全局变量
		（1）全局变量：
			1）在函数体之外声明的变量属于全局变量，
			2）另外 不使用var关键字声明的变量无论位置在哪，它都是全局变量！！！
			全局变量的生命周期是：
				浏览器打开时声明，浏览器关闭时销毁，尽量少用。
				因为全局变量会一直在浏览器的内存当中，耗费内存空间。
				能使用局部变量尽量使用局部变量。
		（2）局部变量：
			1）在函数体当中声明的变量属于全局变量，
			2）另外包括一个函数的形参都属于局部变量。。。
			局部变量的生命周期是：
				函数开始执行时局部变量的内存空间开辟，函数执行结束之后，局部变量的内存空间释放。
				局部变量生命周期较短。
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

6、JS中的数据类型

6.0、JS数据类型
	（1）虽然JS中的变量在声明的时候不需要指定数据类型，但是在赋值，每一个数据还是有类型的
		JS中数据类型有：原始类型、引用类型。
		原始类型：Undefined、Null、Number、String、Boolean
		引用类型：Object以及Object的子类
		
	（2）ES规范(ECMAScript规范)，在ES6之后，基于以上的6种类型之外又添加了一种新的类型：Symbol
	
	（3）JS中有一个运算符叫做typeof，这个运算符可以在程序的运行阶段动态的获取变量的数据类型。
		typeof运算符的语法格式：
			typeof 变量名
		typeof运算符的运算结果是以下6个字符串之一：注意字符串都是全部小写。
			"undefined"
			"number"
			"string"
			"boolean"
			"object"
			"function"
			
	（4）在JS当中比较字符串是否相等使用“==”完成。没有equals。	
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

<script type="text/javascript">
   
   /*
   // 求和,要求a变量和b变量将来的数据类型必须是数字,不能是其他类型
   // 因为以下定义的这个sum函数是为了完成两个数字的求和.
   function sum(a, b){
	   if(typeof a == "number" && typeof b == "number"){
		   return a + b;
	   }
	   alert(a + "," + b + "必须都为数字！");
   }
   
   // 别人去调用以上你写的sum函数.
   var retValue = sum(false, "abc");
   alert(retValue); // undefined
   
   var retValue2 = sum(1, 2);
   alert(retValue2); // 3
   */
  
  var i;
  alert(typeof i); // undefined
  
  var k = 10;
  alert(typeof k); // number
  
  var f = "abc";
  alert(typeof f); // string
  
  var d = null;
  alert(typeof d); // object  null属于Null类型,但是typeof运算符的结果是"object"
  
  var flag = false;
  alert(typeof flag); // boolean
  
  var obj = new Object();
  alert(typeof obj); // object
  
  // sayHello是一个函数.
  function sayHello(){
	  
  }
  alert(typeof sayHello); // function
  
</script>	
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

6.1、Undefined
	（1）Undefined类型只有一个值：undefined
	（2）当一个变量没有手动赋值，系统默认赋值undefined，或者也可以给一个变量手动赋值undefined。

6.2、Null
	（1）该类型只有一个值：null
	（2）typeof运算符的执行结果是"object"
1
2
3
4
5
6
7

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Undefined类型 和 Null类型</title>
	</head>
	<body>
		
		<script type="text/javascript">
	
		   var i; // undefined
		   var k = undefined; // undefined
		   
		   alert(i == k); // true
		   
		   var y = "undefined"; // 字符串"undefined"
		   alert(y == k); // false
		   
		   
		    // Null类型只有一个值,null
			// typeof运算符的执行结果是"object"
		   	alert(typeof null); // "object"
		   
		</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

6.3、Number
	（1）Number类型包括哪些值？
		-1 0 1 2 2.3 3.14 100 ... NaN、 Infinity
		负数、正数、整数、小数、、、不是数字、无穷大
	（2）isNaN() : 结果是true表示不是一个数字，结果是false表示是一个数字。
	（3）parseInt()函数：将字符串转换成int类型数字
	（4）parseFloat()函数：将字符串转换成float类型数字
	（5）Math.ceil() 函数：Math是数学类，数学类当中有一个函数叫做ceil()，作用是向上取整。
1
2
3
4
5
6
7
8

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Number类型</title>
	</head>
	<body>
		<script type="text/javascript">

		   var v1 = 1;
		   var v2 = 3.14;
		   var v3 = -100;
		   var v4 = NaN;
		   var v5 = Infinity;
		   
		   // 以下几个结果都是"number"
		   alert(typeof v1);
		   alert(typeof v2);
		   alert(typeof v3);
		   alert(typeof v4);
		   alert(typeof v5);
		   
		   // 关于NaN (表示Not a Number，不是一个数字，但属于Number类型)
		   // 什么情况下结果是一个NaN呢？
		   // 运算结果本来应该是一个数字,最后算完不是一个数字的时候,结果是NaN.
		   var a = 100;
		   var b = "中国人";
		   alert(a / b); //NaN  除号显然最后结果应该是一个数字,但是运算的过程中导致最后不是一个数字,那么最后的结果是NaN
		   
		   var e = "abc";
		   var f = 10;
		   alert(e + f); // abc10
		   
		   // Infinity (当除数为0的时候，结果为无穷大)
		   alert(10 / 0); //Infinity
		   
		   // 思考:在JS中10 / 3 = ?
		   alert(10 / 3); // 3.3333333333333335
		   
		   // 关于isNaN函数？
		   // 用法：isNaN(数据) ,结果是true表示不是一个数字, 结果是false表示是一个数字.
		   // isNaN : is Not a Number 
		   function sum(a, b){
			   if(isNaN(a) || isNaN(b)){
				   alert("参与运算的必须是数字！");
				   return;
			   }
			   return a + b;
		   }
		   sum(100, "abc");   //参与运算的必须是数字！
		   alert(sum(100, 200));  //300
		   
		   // parseInt():可以将字符串自动转换成数字,并且取整数位.
		   alert(parseInt("3.9999")); // 3
		   alert(parseInt(3.9999)); // 3
		   
		   // parseFloat():可以将字符串自动转换成数字.
		   alert(parseFloat("3.14") + 1); // 4.140000000000001
		   alert(parseFloat("3.2") + 1); // 4.2
		   
		   // Math.ceil()
		   alert(Math.ceil("2.1")); // 3
		   
		</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
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

6.4、Boolean
	（1）只有两个值：true和false
	（2）Boolean()函数
		语法格式：
			Boolean(数据) 
		作用：将非布尔类型转换成布尔类型。
		规律：数据“有"就转换成true,"没有"就转换成false
	（3）JS中的if语句自动调用Boolean()函数。
1
2
3
4
5
6
7
8

<script type="text/javascript">

   // var username = "lucy";
   var username = "";
   
   /*
   if(Boolean(username)){
	   alert("欢迎你" + username);
   }else{
	   alert("用户名不能为空！");
   }
   */
  
  //JS中的if语句自动调用Boolean()函数。 
  /*
   if(username){
	   alert("欢迎你" + username);
   }else{
	   alert("用户名不能为空！");
   }
   */
  
  // 规律:“有"就转换成true,"没有"就转换成false !!!!!!!!!!!
  alert(Boolean(1)); // true
  alert(Boolean(0)); // false
  alert(Boolean("")); // false
  alert(Boolean("abc")); // true
  alert(Boolean(null)); // false
  alert(Boolean(NaN)); // false
  alert(Boolean(undefined)); // false
  alert(Boolean(Infinity)); // true
   
   //无限循环,点不完
   /*
   while(10 / 3){
	   alert("hehe");
   }
   */
   
   for(var i = 0; i < 10; i++){
	   alert("i = " + i);
   }
	
</script>	
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

6.5、String
	（1）可以使用单引号，也可以用双引号
		var s1 = 'abcdef';
		var s2 = "test";

	（2）2 种方式创建字符串对象：
			第一种：var s = "abc";
			第二种（使用JS内置的支持类String）： var s2 = new String("abc");
		JS中的字符串包括 小String和大String
		小String属于原始类型; 大String是JS的内置对象，属于Object类型。

	（3）无论大String还是小String，它们的属性和方法都是通用的。

	（4）关于String类型的常用属性和函数
		常用属性：
			length			获取字符串长度
		常用函数：
			indexOf			获取指定字符串在当前字符串中第一次出现处的索引（索引也是从0开始，不存在时为-1）
			lastIndexOf		获取指定字符串在当前字符串中最后一次出现处的索引
			replace			替换
			substr			截取子字符串：从起始索引号提取字符串中指定数目的字符。
			substring		截取子字符串：提取字符串中两个指定的索引号之间的字符（不包含尾索引）
			toLowerCase		转换小写
			toUpperCase		转换大写
			split			拆分字符串
			......
		
		字符串的substr()和substring()的区别:
			—————————————————————————————————————————————————————————————————————————————
			// substr(startIndex, length)
			alert("abcdefxyz".substr(2,4));      //cdef

			// substring(startIndex, endIndex) 注意:不包含endIndex(左闭右开区间)
			alert("abcdefxyz".substring(2,4));   //cd
			—————————————————————————————————————————————————————————————————————————————
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

<script type="text/javascript">

   // 小string(属于原始类型String)
   var x = "king";
   alert(typeof x); // "string"
   
   // 大String(属于Object类型)
   var y = new String("abc");
   alert(typeof y); // "object"
   
   // 获取字符串的长度
   alert(x.length); // 4
   alert(y.length); // 3
   
   alert("http://www.baidu.com".indexOf("http")); // 0
   alert("http://www.baidu.com".indexOf("https")); // -1
   
   // 判断一个字符串中是否包含某个子字符串？
   alert("http://www.baidu.com".indexOf("https") >= 0 ? "包含" : "不包含"); // 不包含
   
   // replace (注意：只替换了第一个)
   alert("name=value%name=value%name=value".replace("%","&")); // name=value&name=value%name=value
   
   // 继续调用replace方法,就会替换第“二”个.
   // 想全部替换需要使用正则表达式.
   alert("name=value%name=value%name=value".replace("%","&").replace("%", "&")); // name=value&name=value&name=value
   
   // 考点:经常问 substr和substring的区别？
   // substr(startIndex, length)
   alert("abcdefxyz".substr(2,4)); //cdef
   // substring(startIndex, endIndex) 注意:不包含endIndex(相当于左闭右开区间)
   alert("abcdefxyz".substring(2,4)); //cd
   
</script>
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

6.6、Object
	（1）Object类型是所有类型的超类，自定义的任何类型，默认继承Object。
	（2）Object类包括哪些属性？
		prototype属性（常用，重点）：给类动态的扩展属性和函数。
		constructor属性

	（3）Object类包括哪些函数？
		toString()
		valueOf()
		toLocaleString()

	（4）在JS当中定义的类默认继承Object，会继承Object类中所有的属性以及函数。
	     换句话说，自己定义的类中也有prototype属性。

	（5）在JS当中怎么定义类？怎么new对象？
		定义类的语法：
			第一种方式：
				function 类名(形参){
					
				}
			第二种方式：
				类名 = function(形参){
					
				}
		创建对象的语法：
			new 构造方法名(实参); // 构造方法名和类名一致。


	（6）JS中的一个函数，既是函数声明，又是类的定义，同时函数名也可以看做构造方法名。
	     直接调用函数表示普通函数调用，如果使用new运算符来调用该函数则会创建对象。

	（7）JS中如何访问对象属性，调用对象的函数。

	（8）Java语言和JS语言分别是怎样定义类、创建对象？
		java怎么定义类，怎么创建对象？（强类型）
			public class User{
				private String username;
				private String password;
				public User(){
				}
				public User(String username,String password){
					this.username = username;
					this.password = password;
				}
			}
			User user = new User();
			User user = new User("lisi","123");
			
		JS语言怎么定义类，怎么创建对象？（弱类型）
			User = function(username,password){
				this.username = username;
				this.password = password;
			}
			var u = new User();
			var u = new User("zhangsan");
			var u = new User("zhangsan","123");
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

<script type="text/javascript">
   
   // 定义一个学生类
   function Student(){
	   alert("Student.....");
   }
   
   // 1、 当做普通函数调用
   Student(); //Student.....
   
   // 2、 当做类来创建对象
   var stu = new Student();  //Student.....  （stu是一个引用,保存内存地址指向堆中的对象)
   alert(stu); // [object Object]
   
   
   // JS中的类的定义,同时又是一个构造函数的定义
   // 在JS中类的定义和构造函数的定义是放在一起来完成的.
   function User(a, b, c){ // a b c是形参,属于局部变量.
	   // 声明属性 (this表示当前对象)
	   // User类中有三个属性:sno/sname/sage
	   this.sno = a;
	   this.sname = b;
	   this.sage = c;
   }
   
   // 创建对象
   var u1 = new User(111, "zhangsan", 30);
   // 访问对象的属性
   alert(u1.sno);  //111
   alert(u1.sname);//zhangsan
   alert(u1.sage); //30
   
   var u2 = new User(222, "jackson", 55);
   alert(u2.sno);   //222
   alert(u2.sname); //jackson
   alert(u2.sage);  //55
   
   // 访问一个对象的属性,还可以使用这种语法
   alert(u2["sno"]);  //222
   alert(u2["sname"]); //jackson
   alert(u2["sage"]); //55
   
   
   // 定义类的另一种语法
   /*
   Emp = function(a, b){
	   this.ename = a;
	   this.sal = b;
   }
   */
  
  Emp = function(ename,sal){
	  // 属性
	  this.ename = ename;
	  this.sal = sal;
  }
  
  var e1 = new Emp("SMITH", 800);
  alert(e1["ename"] + "," + e1.sal); //SMITH,800
  
  
   Product = function(pno,pname,price){
	   // 属性
	   this.pno = pno;
	   this.pname = pname;
	   this.price = price;
	   // 函数
	   this.getPrice = function(){
		   return this.price;
	   }
   }
   
   var xigua = new Product(111, "西瓜", 4.0);
   //调用对象的函数
   var pri = xigua.getPrice();  
   alert(pri); // 4
   
   // 可以通过prototype这个属性来给类动态扩展属性以及函数
   Product.prototype.getPname = function(){
	   return this.pname;
   }
   
   // 调用后期扩展的getPname()函数
   var pname = xigua.getPname();
   alert(pname)   //西瓜

	// 给String扩展一个函数
   String.prototype.suiyi = function(){
	   alert("这是给String类型扩展的一个函数，叫做suiyi");
   }
   
   "abc".suiyi(); //这是给String类型扩展的一个函数，叫做suiyi
   
</script>
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

7、null、NaN、undefined三个值的区别

（1）=、==、===三者的区别
	=赋值运算符
	==等同运算符：只判断值是否相等
	===全等运算符：既判断值是否相等，又判断数据类型是否相等

（2）null 、NaN 、undefined三者数据类型不同

（3）null和undefined的值可以等同
	alert(null == undefined); // true
1
2
3
4
5
6
7
8
9

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>null NaN undefined这三个值有什么区别</title>
	</head>
	<body>
		<script type="text/javascript">

			// null NaN undefined 数据类型不一致.
			alert(typeof null); // "object"
			alert(typeof NaN); // "number"
			alert(typeof undefined); // "undefined"
			
			// 在JS当中有两个比较特殊的运算符
			// ==(等同运算符：只判断值是否相等)
			// ===(全等运算符：既判断值是否相等，又判断数据类型是否相等)
			alert(1 == true); // true
			alert(1 === true); // false
						
			// null和undefined可以等同.
			alert(null == NaN); // false
			alert(null == undefined); // true
			alert(undefined == NaN); // false
			
			alert(null === NaN); // false
			alert(null === undefined); // false
			alert(undefined === NaN); // false
		</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

8、JS中的事件

1、常用事件
	blur  失去焦点	
	focus 获得焦点
	
	click    鼠标单击
	dblclick 鼠标双击
	
	keydown 键盘按下
	keyup   键盘弹起
	
	mousedown 鼠标按下
	mouseover 鼠标经过
	mousemove 鼠标移动
	mouseout  鼠标离开
	mouseup   鼠标弹起
	
	reset  表单重置
	submit 表单提交
	
	change 下拉列表选中项改变，或文本框内容改变
	select 文本被选定
	load   页面加载完毕（整个HTML页面中所有的元素全部加载完毕之后发生。）

	【注】：任何一个事件都会对应一个事件句柄，事件句柄是在事件前添加on。
		onXXX这个事件句柄出现在一个标签的属性位置上。（事件句柄以属性的形式存在。）

2、注册事件的2种方式
	（1）在标签中使用 事件句柄 的方式注册事件
	（2）使用纯JS代码完成事件的注册
	重点：通过事件注册，理解回调函数的概念
	
	（代码在下方）
	
3、代码的执行顺序（load事件）
	这是一种错误的写法：
		<body>		
			<script type="text/javascript">
				   var btn = document.getElementById("btn"); // 返回null(代码执行到此处时id="btn"的元素还没有加载到内存)
				   btn.onclick = function(){
					alert("hello js");
				   }
			</script>

			<input type="button" value="hello" id="btn" />
		</body>

	可以这样写：
		<body>
			<input type="button" value="hello" id="btn" />

			<script type="text/javascript">
				   var btn = document.getElementById("btn");
				   btn.onclick = function(){
					alert("hello js");
				   }
			</script>
		</body>

	或者：

		<body onload="ready()"> 	 <!-- load事件什么时候发生？页面全部元素加载完毕之后才会发生。-->
			<script type="text/javascript">		   
			   function ready(){
				   var btn = document.getElementById("btn");
				   btn.onclick = function(){
					alert("hello js");
				   }
			   }
			</script>
			
			<input type="button" value="hello" id="btn" />		
		</body>
	
	还可以：
		<body>	
			<script type="text/javascript">
				window.onload = function(){ 
				   var btn = document.getElementById("btn");
				   btn.onclick = function(){
					alert("hello js");
				   }
				}
			</script>

			<input type="button" value="hello" id="btn" />
		</body>

4、小插曲：JS代码设置节点的属性

			<body>
				<script type="text/javascript">
					window.onload = function(){
						document.getElementById("btn").onclick = function(){
							var mytext = document.getElementById("mytext");
							//将id为mytext的类型text改为checkbox（ 一个节点对象中只要有的属性都可以".")
							mytext.type = "checkbox";
						}
					}
				</script>
				
				<input type="text" id="mytext"/>
				
				<input type="button" value="点击我,将前面的文本框修改为复选框" id="btn"/>
				
			</body>
			
5、模拟输入框输完值后，敲回车键登录（keydown事件）
	对于“键盘事件对象"来说,都有keyCode属性用来获取键值.
	其中回车键的键值是13,ESC键的键值是27
	
	（代码在下方）
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

注册事件的2种方式：

	<script type="text/javascript">
	   // 对于当前程序来说,sayHello函数被称为回调函数(callback函数)
	   // 回调函数的特点:自己把这个函数代码写出来了,但是这个函数不是自己负责调用,由其他程序负责调用该函数.
	   function sayHello(){
		   alert("hello js!");
	   }
	</script>
	
<!--第一种注册事件的方式，直接在标签中使用事件句柄-->
	<!--以下代码的含义是：将sayHello函数注册到按钮上，等待click事件发生之后，该函数被浏览器调用。我们称这个函数为回调函数。-->
	<input type="button" value="hello" onclick="sayHello()"/>
	
	
	<input type="button" value="hello1" id="mybtn1" />
	<input type="button" value="hello2" id="mybtn2" />
	<input type="button" value="hello3" id="mybtn3" />
		
<!-- 第二种注册事件的方式，是使用纯JS代码完成事件的注册。 -->
	<script type="text/javascript">
		/*function doSome(){
			alert("do some!");
		}*/
		doSome = function(){
			alert("do some 1");
		}

	   // 第一步:先获取这个按钮对象(document是全部小写，内置对象，可以直接用，document就代表整个HTML页面)
	   var btnObj = document.getElementById("mybtn1");
	   // 第二步:给按钮对象的onclick属性赋值
	   btnObj.onclick = doSome; // 注意:千万别加小括号. btnObj.onclick = doSome();这是错误的写法.
								// 这行代码的含义是,将回调函数doSome注册到click事件上.
	   
	   var mybtn1 = document.getElementById("mybtn2");
	   mybtn1.onclick = function(){ // 这个函数没有名字,叫做匿名函数,这个匿名函数也是一个回调函数.
		   alert("do some 2"); // 这个函数在页面打开的时候只是注册上,不会被调用,在click事件发生之后才会调用.
	   }
	   
	   document.getElementById("mybtn3").onclick = function(){
		   alert("do some 3");
	   }
	</script>
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

JS代码捕捉回车键：

<body>
	<!--回车键的键值是13,ESC键的键值是27 -->
	
	<script type="text/javascript">
		//load事件,页面加载完毕之后,才会执行这个函数:
		window.onload = function(){
			var usernameElt = document.getElementById("username");
		
			// keydown事件,当发生键盘按下事件的时候,执行此函数:
					   
		   /*
		   //按下键盘上任意键，返回一个消息框,内容为对应键的的键值：
		   usernameElt.onkeydown = function(tt){
		   	// 获取键值
		   	// 对于“键盘事件对象"来说,都有keyCode属性用来获取键值.
			alert(tt.keyCode);
		   }
		   */
		  
		  //模拟输入框输完值后敲回车登录:
		  // 发生键盘按下事件,可以按多个键，直到按的键是回车键（键值是13），会弹出“正在进行验证....”
		  usernameElt.onkeydown = function(tt){
			  if(tt.keyCode === 13){
				  alert("正在进行验证....");
			  }
		  }
		
		}
	</script>
	
	<input type="text" id="username"/>
	
</body>
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

9、JS运算符之void

void运算符的语法：void(表达式)
运算原理：执行表达式，但不返回任何结果
	javascript:void(0)
	其中javascript:作用是告诉浏览器后面是一段JS代码。

关于JS的运算符，主要看void，其他的运算符和java中一样用
	（1）算术运算符：+	-	*	/	 %	++	 -- 
	（2）关系运算符：>	>=	<	<=	==	!=
	（3）逻辑运算符：&	|	!	&&	||	
	（4）赋值运算符：=	+=	-=	*=	/=	%=
	（5）三目运算符：  布尔表达式 ? 表达式1 : 表达式2
	（6）字符串连接运算符：	+
1
2
3
4
5
6
7
8
9
10
11
12

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>JS的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>
		
		<!--这个没能实现“页面不能跳转”，最后会调回到页面顶部了 -->
		<!--
		<a href="" onclick="window.alert('test code')">
			既保留住超链接的样式，同时用户点击该超链接的时候执行一段JS代码，但页面还不能跳转。
		</a>
		-->
		
		<!--上面的href后面的双引号虽然什么也没写，但是也还是调回到当前页面了，所以我们需要的是让href里面的路径“消失”，也就是页面不能跳转 -->
		
		<!--
			void运算符的语法：void(表达式)
			运算原理：执行表达式，但不返回任何结果 ——————>可以达到上面 让href里面的路径“消失”的效果！！！！
				javascript:void(表达式)
				其中javascript:作用是告诉浏览器后面是一段JS代码。
				以下程序的javascript:是不能省略的，否则会认为href="void(0)" 里面的"void(0)"是一个路径，就会发生页面跳转了
		-->
		<a href="javascript:void(0)" onclick="window.alert('test code')">
			既保留住超链接的样式，同时用户点击该超链接的时候执行一段JS代码，但页面还不能跳转。
		</a>
		
		<br>
		<!--void括号里面写其他值也可以达到效果-->
		<a href="javascript:void(100)" onclick="window.alert('test code')">
			既保留住超链接的样式，同时用户点击该超链接的时候执行一段JS代码，但页面还不能跳转。
		</a>
		
		<br>
		
		<!--void() 这个小括号当中必须有表达式，否则浏览器控制台会报错-->
		<!--
		<a href="javascript:void()" onclick="window.alert('test code')">
			既保留住超链接的样式，同时用户点击该超链接的时候执行一段JS代码，但页面还不能跳转。
		</a>
		-->
		
		<br><br><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
42
43
44
45
46
47
48

10、JS之控制语句

重点的控制语句和Java一样用：
	选择语句/分支语句 if、 switch
	循环语句  for、 while、 do..while..
	转向语句  break、 continue

for..in 语句（了解）
	可以使用for..in语句遍历数组，以及遍历一个对象的属性。

with 语句（了解）
	可以使用with语句遍历数组
1
2
3
4
5
6
7
8
9
10

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>JS的控制语句</title>
	</head>
	<body>
		<script type="text/javascript">

		   // 创建JS数组
		   var arr = [false,true,1,2,"abc",3.14]; // JS中数组中元素的类型随意.元素的个数随意.
		   // 使用for循环遍历数组
		   for(var i = 0; i < arr.length; i++){
			   alert(arr[i]);
		   }
		   
		   
		   //使用 for..in 语句 遍历数组
		   for(var i in arr){
			   //alert(i); //这里的i不是数组中的元素,而是下标
			   alert(arr[i]); //arr[i]才是数组元素
		   }
		      
		   // for..in语句可以遍历对象的属性
		   User = function(username,password){
			   this.username = username;
			   this.password = password;
		   }
		   
		   var u = new User("张三", "444");
		   alert(u.username + "," + u.password); //张三,444
		   alert(u["username"] + "," + u["password"]); //张三,444
		   
		   for(var shuXingMing in u){
			   alert(shuXingMing)  //这里u不是数组了,是一个对象,而这里的shuXingMing也不是数组下标了,是对象中的属性名
			   //alert(typeof shuXingMing) // shuXingMing是一个字符串
			   alert(u[shuXingMing]); //对象u的属性名对应的属性值
		   }
		   //username
		   //张三
		   //password
		   //444
		   
		   alert(u.username); //张三
		   alert(u.password); //444
		  	
		   //with语句 访问对象的值,前面会自动添加对象u.
		   with(u){
			   alert(username + "," + password);  //张三,444 
			   // alert(u.username + "," + u.password);  //张三,444 
		   }
		   
		</script>
	</body>
</html>

<!--Java中的数组：
	public class Test{
		public static void main(String[] args){
			int[] arr = {1,2,3,4,5,6};
			int[] arr2 = new int[5]; // 等同于：int[] arr2 = {0,0,0,0,0};
			String[] arr3 = {"a","b","c"};
			String[] arr4 = new String[3]; // 等同于：String[] arr4 = {null,null,null};
		}
	}
-->
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

11、JavaScript包括三块：ECMAScript、DOM、BOM

（1）ECMAScript：JS的核心语法（ES规范 / ECMA-262标准），JavaScript和JScript都遵守这个标准。

（2）DOM（Document Object Model，文档对象模型）。
	DOM编程是通过JavaScript对HTML中的dom节点进行操作。HTML文档被当做一棵DOM树来看待。
	DOM是有规范的，DOM规范是W3C制定的。

（3）BOM（Browser Object Model，浏览器对象模型）。	
	BOM编程是对浏览器本身操作，例如：前进、后退、地址栏、关闭窗口、弹窗等。
	由于浏览器有不同的厂家制造，所以BOM缺少规范，一般只是有一个默认的行业规范。

（4）DOM和BOM的区别和联系？
	DOM的顶级对象是：document
	BOM的顶级对象是：window
	实际上BOM是包括DOM的！ document实际上是window.document
1
2
3
4
5
6
7
8
9
10
11
12
13
14

在这里插入图片描述

12、DOM编程案例

12.1、获取文本框的value

document.getElementById(“username”).value

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>DOM编程-获取文本框的value</title>
	</head>
	<body>
		
		<script type="text/javascript">
			window.onload = function(){
			  var btnElt = document.getElementById("btn");
			  btnElt.onclick = function(){
				  /*
				  // 获取文本框（username节点）的value值
				  var usernameElt = document.getElementById("username");
				  var username = usernameElt.value;
				  alert(username);
				  */
				 alert(document.getElementById("username").value);
				 
				 // 还可以修改它的value--修改成zhangsan
				 //document.getElementById("username").value = "zhangsan";
			  }					
			}
		</script>
		
		<input type="text" id="username" />
		<input type="button" value="点击我,获取左边文本框的value" id="btn"/>
		
		<hr>
		
	<!-- 
		<script type="text/javascript">
			window.onload = function(){
				document.getElementById("setBtn").onclick = function(){
					document.getElementById("username2").value = document.getElementById("username1").value;
				}
			}
		</script>
		
		<input type="text" id="username1" />
		<br>
		<input type="text" id="username2" />
		<br>
		<input type="button" value="点击我,将第一个文本框中的value赋值到第二个文本框上" id="setBtn" />
	-->
		
		<!--blur事件：失去焦点事件-->
		<!--以下代码中的this代表的是当前input节点对象,this.value就是这个节点对象的value属性。
		    以下代码表示在input输入框中输入完后，鼠标离开时，触发了失去焦点事件，就会弹出消息框-->
		<input type="text" onblur="alert(this.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
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

12.2、innerHTML和innerText操作div和span

	innerText和innerHTML属性有什么区别？
	相同点：都是设置元素内部的内容。
	不同点：
		innerHTML，会把后面的“字符串”当做一段HTML代码解释并执行。
		innerText，即使后面是一段HTML代码，也只是将其当做普通的字符串来看待。
1
2
3
4
5

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>DOM编程-innerHTML和innerText操作div和span</title>
		<style type="text/css">
			#div1{
				background-color: aquamarine;
				width: 300px;
				height: 300px;
				border: 5px black solid;
				position: absolute;
				top: 100px;
				left: 100px;
			}
		</style>
	</head>
	<body>
		
		<!--    innerHTML，会把后面的“字符串”当做一段HTML代码解释并执行。
				innerText，即使后面是一段HTML代码，也只是将其当做普通的字符串来看待。-->
		<script type="text/javascript">
			window.onload = function(){
				var btn = document.getElementById("btn");
				btn.onclick = function(){
					// 设置div的内容
					// 第一步:获取div对象
					var divElt = document.getElementById("div1");
					// 第二步:使用innerHTML属性来设置元素内部的内容
					//divElt.innerHTML = "<font color='red'>用户名不能为空！</font>";   //用户名不能为空！
					divElt.innerText = "<font color='red'>用户名不能为空！</font>";    //<font color='red'>用户名不能为空！</font>
				}
			}
		</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

12.3、正则表达式

	1、什么是正则表达式，有什么用？
		正则表达式：Regular Expression
		作用：主要用在字符串格式匹配方面。
		
	2、正则表达式实际上是一门独立的学科，大部分编程语言都支持正则表达式。
		正则表达式最初使用在医学方面，用来表示神经符号等。
		目前使用最多的是计算机编程领域，用作字符串格式匹配。包括搜索方面等。
	
	3、正则表达式，对于我们javascript编程来说，掌握哪些内容呢？
		第一：常见的正则表达式符号要认识。
		第二：简单的正则表达式要会写。
		第三: 他人编写的正则表达式要能看懂。
		第四：在javascript当中，怎么创建正则表达式对象！（new对象）
		第五：在javascript当中，正则表达式对象有哪些方法！（调方法）
		第六：要能够快速的从网络上找到自己需要的正则表达式。并且测试其有效性。
	
	4、常见的正则表达式符号：
		常用的元字符：
		.  匹配除换行符以外的任意字符 
		\w 匹配字母、数字、下划线、汉字 
		\s 匹配任意的空白符 
		\d 匹配数字 
		\b 匹配单词的开始或结束 
		^  匹配字符串的开始 
		$  匹配字符串的结束
		
		常用的限定符： 
		*     重复 0~N   次
		+     重复 1~N   次 
		?     重复 0或1  次
		{a}   重复 a     次 
		{a,}  重复 a~更多次 
		{a,b} 重复 a~b   次
		
		常用的反义代码： 
		\W 匹配任意不是字母，数字，下划线，汉字的字符 
		\S 匹配任意不是空白符的字符 
		\D 匹配任意非数字的字符 
		\B 匹配不是单词开头或结束的位置 
		[^x] 匹配除了x以外的任意字符 
		[^aeiou] 匹配除了aeiou这几个字母以外的任意字符 
		
		[1-9]        表示1到9的任意 1个 数字（次数是1次）
		[A-Za-z0-9]  表示A到Z、a到z、0到9中的任意 1个 字符
		[A-Za-z0-9-] 表示A到Z、a到z、0到9、- 以上所有字符中的任意 1个 字符。
		
		| 表示或者

		正则表达式当中的小括号()优先级较高。

		注：可适当参考帮助文档————【正则表达式30分钟入门教程】

	5、简单的正则表达式要会写
		QQ号的正则表达式：^[1-9][0-9]{4,}$
			表示以1-9中的任意1个数字开头，然后是接着0-9中的任意1个数字重复4次或更多次，即QQ号码位数是5个或更多个数

	6、他人编写的正则表达式要能看懂：
		email正则：^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$
	
	7、怎么创建正则表达式对象，怎么调用正则表达式对象的方法？
		第一种创建方式：
			var regExp = /正则表达式/flags;
		第二种创建方式:使用内置支持类RegExp
			var regExp = new RegExp("正则表达式","flags");
			
		关于flags：
			flags为可选项，它有以下几种取值：
			g：全局匹配
			i：忽略大小写
			m：多行匹配（ES规范制定之后才支持m）
			   当前面是正则表达式的时候，m不能用。（var regExp = /正则表达式/flags; 这时flags不能为m）
			   只有前面是普通字符串的时候，m才可以使用。（var regExp = /字符串/flags;这时flags可以为m）
			
		正则表达式对象的test()方法：
			var ok = 正则表达式对象.test(用户填写的字符串);
			
			如果ok的值为true : 字符串格式匹配成功
			如果ok的值为false: 字符串格式匹配失败
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

验证邮箱案例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>DOM编程-关于正则表达式</title>
	</head>
	<body>
		
		<script type="text/javascript">

		   window.onload = function(){
			   // 给按钮绑定click
			   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){  //ok为true, 合法:
						document.getElementById("emailError").innerText = "邮箱地址合法";
				   }else{   //ok为false ，不合法:
					   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
35
36
37
38
39
40
41
42

在这里插入图片描述

12.4、trim函数————去除字符串的前后空白

	// 获取用户名
	var username = document.getElementById("username").value;
	// 去除前后空白
	username = username.trim();
	// 测试
	alert("--->" + username + "<----");
1
2
3
4
5
6

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>去除字符串的前后空白trim</title>
	</head>
	<body>
		<script type="text/javascript">
			// 低版本的IE浏览器不支持字符串的trim()函数,怎么办？
			// 可以自己对String类扩展一个全新的trim()函数!
			//前面讲到的数据类型，Object类的prototype属性：给类动态的扩展属性和函数。
			String.prototype.trim = function(){
				// alert("扩展之后的trim方法");
				// 去除当前字符串的前后空白
				// 在当前的方法中的this代表的就是当前字符串.
				//return this.replace(前空白, "").replace(后空白, ""); //将前后空白都替换成"",即去除掉
				//return this.replace(/^\s+/, "").replace(/\s+$/, "");
				//return this.replace(/^\s+|\s+$/, "");  //这样只会替换掉前面或者后面的空白,如果前面后面都有空白的话,这里就只能替换掉前面的空白了
				return this.replace(/^\s+|\s+$/g, ""); //g 全局匹配
			}
			
			window.onload = function(){
				document.getElementById("btn").onclick = function(){
					// 获取用户名
					var username = document.getElementById("username").value;
					// 去除前后空白
					username = username.trim();
					// 测试
					alert("--->" + username + "<----");  //--->2424<----
				}
			}
		</script>
		<input type="text" id="username" />
		<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
35
36

12.5、表单验证（重点）

	要求：
	（1）用户名不能为空
	（2）用户名必须在6-14位之间
	（3）用户名只能有数字和字母组成，不能含有其它符号（正则表达式）
	（4）密码和确认密码一致，邮箱地址合法。
	（5）统一失去焦点时进行验证
	（6）错误提示信息统一在span标签中提示，并且要求字体12号，红色。
	（7）文本框再次获得焦点后，清空错误提示信息，如果文本框中数据不合法要求清空文本框的value
	（8）最终表单中所有项均合法方可提交
	
	需要4和文本框:用户名、密码、确认密码、邮箱地址
	然后下方有提交按钮等
1
2
3
4
5
6
7
8
9
10
11
12

<!DOCTYPE html>
<html>
	<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）最终表单中所有项均合法方可提交
			*/
		   //load事件,页面加载完毕才会执行这里:
		   window.onload = function(){
		
		// 1、用户名  
			   // 获取username错误提示的span标签
			   var usernameErrorSpan = document.getElementById("usernameError");
			   // 获取username节点对象
			   var usernameElt = document.getElementById("username");
			   // 给用户名文本框绑定blur事件————失去焦点时进行下列验证
			   usernameElt.onblur = function(){
				   // 获取用户名的值
				   var username = usernameElt.value;
				   // 去除前后空白
				   username = username.trim();
				   // 1、【判断用户名是否为空
				   /*
				   if(username){ username为true      //方法一
					   // 代表username不是空字符串
					   alert("username = " + username);
				   }else{
					   // 代表username是空字符串
					   alert("username是空字符串");
				   }
				   */
				   // if(username.length == 0){}   //方法二
				   if(username == ""){            //方法三
					   // 用户名为空
					   usernameErrorSpan.innerText = "用户名不能为空";   //错误提示信息
				   }else{
					   // 用户名不为空
					   // 2、 【继续判断长度[6-14]
					   if(username.length < 6 || username.length > 14){
						   // 用户名长度非法
						   usernameErrorSpan.innerText = "用户名长度必须在[6-14]之间";   //错误提示信息
					   }else{
						   // 用户名长度合法
						   // 3、【继续判断只能有数字和字母组成
						   var regExp = /^[A-Za-z0-9]+$/;
						   var ok = regExp.test(username);
						   if(ok){  //ok为true
							   // 用户名最终合法
						   }else{
							   // 用户名中含有特殊符号
							   usernameErrorSpan.innerText = "用户名只能由数字和字母组成";  //错误提示信息
						   }
					   }
				   }
			   }
			   
			   // 给username这个文本框绑定focus获得焦点事件
			   usernameElt.onfocus = function(){
				   // 清空非法的value
				   if(usernameErrorSpan.innerText != ""){  //当后面 有错误提示信息（非空）,说明输入的value不合法
					   usernameElt.value = "";      //清空非法的value
				   }
				   // 清空span
				   usernameErrorSpan.innerText = "";
			   }
		
		// 2 、密码和确认密码	  
		//注:因为上面已经写了用户名的不为空、长度、是否含特殊字符的验证,这里就不再演示这些内容了（实际开发中确实是要有这些的）。
		//   这里主要演示密码和确认密码一致性问题:
			   // 获取密码错误提示的span标签
			   var pwdErrorSpan = document.getElementById("pwdError");
			   // 获取密码框对象
			   var userpwdElt = document.getElementById("userpwd"); 
			   // 获取确认密码框对象
			   var userpwd2Elt = document.getElementById("userpwd2");
			   // 绑定blur事件 ————失去焦点时进行下列验证
			   userpwd2Elt.onblur = function(){
				   // 获取密码和确认密码的值:
				   var userpwd = userpwdElt.value;
				   var userpwd2 = userpwd2Elt.value;
				   if(userpwd != userpwd2){
					   // 密码不一致
					   pwdErrorSpan.innerText = "密码不一致";   //错误提示信息
				   }else{
					   // 密码一致
				   }
			   }
			   
			   // 绑定focus事件
			   userpwd2Elt.onfocus = function(){
				   if(pwdErrorSpan.innerText != ""){
					   userpwd2Elt.value = "";
				   }
				   pwdErrorSpan.innerText = "";
			   }
		
		// 3、邮箱	   
			   // 获取email错误提示的span
			   var emailSpan = document.getElementById("emailError");
			   // 给email绑定blur事件
			   var emailElt = document.getElementById("email");
			   emailElt.onblur = function(){
				   // 获取email的值
				   var email = emailElt.value;
				   // 编写email的正则表达式对象
				   var emailRegExp = /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/;
				   var ok = emailRegExp.test(email);
				   if(ok){
					   // 合法
				   }else{
					   // 不合法
					   emailSpan.innerText = "邮箱地址不合法";    //错误提示信息
				   }
			   }
			   
			   // 绑定focus
			   emailElt.onfocus = function(){
				   if(emailSpan.innerText != ""){
					   emailElt.value = "";
				   }
				   emailSpan.innerText = "";
			   }
		
		// 4、提交	   
			   // 给提交按钮绑定鼠标单击事件
			   var submitBtnElt = document.getElementById("submitBtn");
			   submitBtn.onclick = function(){
				   
				   //以防打开页面之后,什么都没输入（这时也都没有错误提示信息）,发生直接提交成功的情况,
				   //可以在这里先手动获取所有的焦点,然后失去焦点,达到判断是否合法的目的,再进行下面的提交验证
				   // 触发username的blur（失去焦点）、 userpwd2的blur 、email的blur
				   // 不需要人工操作,使用纯JS代码触发事件.
				   usernameElt.focus(); //获取焦点
				   usernameElt.blur();  //失去焦点
				   
				   userpwd2Elt.focus();
				   userpwd2Elt.blur();
				   
				   emailElt.focus();
				   emailElt.blur();
				   
				   //提交验证
				   // 当所有表单项都是合法的时候,提交表单
				   if(usernameErrorSpan.innerText == "" && pwdErrorSpan.innerText == "" && emailSpan.innerText == ""){
					   // 获取表单对象
					   var userFormElt = document.getElementById("userForm");
					   // 可以在这里设置action,也可以不在这里.
					   //userFormElt.action = "http://localhost:8080/jd/save";
					   // 提交表单
					   userFormElt.submit();
				   }
			   }
			   
		   }
		</script>
		
		<!--这个表单提交应该使用post，这里为了检测，所以使用get。-->
		<form id="userForm" action = "http://localhost:8080/jd/save" method="get">
			用户名  	<input type="text" name="username" id="username"/>  	<span id="usernameError"></span>	<br>
			密码    	<input type="text" name="userpwd" id="userpwd"/>                                      	<br>
			确认密码	<input type="text" id="userpwd2" />              	<span id="pwdError"></span>      	<br>
			邮箱    	<input type="text" name="email" id="email" />      	<span id="emailError"></span>    	<br>
			
			<!-- 基于第7点要求“最终表单中所有项均合法方可提交”，这里的提交（注册）不能使用submit类型，
			      因为这样的话，即使表单中的为不合法的，这里一点也会直接提交走了，而不会进行验证
			<input type="submit" value="注册"/>  -->
			
			<!-- 类型给button，虽然不能直接提交，但是后面可以给这个按钮绑定鼠标单击事件，也能提交-->
			<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
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195

在这里插入图片描述

12.6、复选框的全选和取消全选

	document.getElementById()
	document.getElementsByName()
	document.getElementsByTagName()
	
	带s的表示，返回的是一个数组，多个对象
1
2
3
4
5

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>复选框的全选和取消全选</title>
	</head>
	<body>
		<script type="text/javascript">
			/*
			window.onload = function(){
				var firstChk = document.getElementById("firstChk");
				firstChk.onclick = function(){
					// 获取第一个复选框的选中状态(复选框对象checkbox对象)
					//alert(firstChk.checked);
					// 根据name获取所有元素 。 注意之前的getElementById("xxx")里面Element没有s，
					//下面的有s，说明返回的不止一个元素，是一个数组
					var aihaos = document.getElementsByName("aihao");
					if(firstChk.checked){ //firstChk.checked为true，第一个复选框是被选中的
						// 全选
						for(var i = 0; i < aihaos.length; i++){
							aihaos[i].checked = true;
						}
					}else{
						// 取消全选
						for(var i = 0; i < aihaos.length; i++){
							aihaos[i].checked = false;
						}
					}
				}
			}
			*/
		    
			//简化
			window.onload = function(){
				
				var aihaos = document.getElementsByName("aihao");
				var firstChk = document.getElementById("firstChk");
				firstChk.onclick = function(){
					for(var i = 0; i < aihaos.length; i++){
						//直接把第一个复选框的选中状态给其他所有复选框
						aihaos[i].checked = firstChk.checked;
					}
				}
				
				// 总数量和选中的数量相等的时候,第一个复选框选中:
				var all = aihaos.length;
				//给每个复选框对象绑定一个clink鼠标单击事件
				for(var i = 0; i < aihaos.length; i++){
					aihaos[i].onclick = function(){  //每个复选框被单击之后,以下代码发生
						//被选中的复选框数量 为 0
						var checkedCount = 0;  
						//看每个复选框的选中状态,计算出所有复选框里面有多少个被选中了
						for(var i = 0; i < aihaos.length; i++){
							if(aihaos[i].checked){ //aihaos[i].checked为true,该复选框的状态是被选中的
								checkedCount++;  //被选中的复选框数量 +1
							}
						}
						// 复选框总数量和选中的数量相等的时候,第一个复选框选中.
						/*
						if(all == checkedCount){
							firstChk.checked = true;
						}else{
							firstChk.checked = false;
						}
						*/
					   firstChk.checked = (all == checkedCount);
					}
				}
			}
		</script>
		
		<input type="checkbox" id="firstChk"/><Br>
		<input type="checkbox" name="aihao" value="music" />听音乐<Br>
		<input type="checkbox" name="aihao" value="movie" />看电影<Br>
		<input type="checkbox" name="aihao" 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
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

在这里插入图片描述

12.7、获取下拉列表选中项的value

change事件：下拉列表选中项改变，或文本框内容改变

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>获取下拉列表选中项的value</title>
	</head>
	<body>
		<!--change事件： 下拉列表选中项改变，或文本框内容改变-->
		
		<!-- 第一种方式：
		<select onchange="alert(this.value)">
			<option value="">--请选择省份--</option>
			<option value="001">河北省</option>
			<option value="002">河南省</option>
			<option value="003">山东省</option>
			<option value="004">山西省</option>
		</select>
		-->
		
		<!--第二种方式 -->
		<script type="text/javascript">
			window.onload = function(){
				var provinceListElt = document.getElementById("provinceList");
				provinceListElt.onchange = function(){
					// 获取选中项的value
					alert(provinceListElt.value);
				}
			}
		</script>
		<select id="provinceList">
			<option value="">--请选择省份--</option>
			<option value="001">河北省</option>
			<option value="002">河南省</option>
			<option value="003">山东省</option>
			<option value="004">山西省</option>
		</select>
		
	</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

在这里插入图片描述

12.8、显示网页时钟

	1、JS中内置的支持类：Date，可以用来获取时间/日期。

	2、显示网页时钟,要求一直多态的显示每一秒的变化
		
		window.setInterval()	按照指定的周期（以毫秒计）来调用函数或计算表达式 
					返回值：一个可以传递给 Window.clearInterval() 从而取消对 code 的周期性执行的值。

		window.clearInterval()	取消由 setInterval() 设置的 timeout。
	
		window.setTimeout()	在指定的毫秒数后调用函数或计算表达式。
1
2
3
4
5
6
7
8
9
10

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>显示网页时钟</title>
	</head>
	<body>
		<!--
			1、关于JS中内置的支持类：Date，可以用来获取时间/日期。
		-->
		<script type="text/javascript">
		   // 获取系统当前时间
		   var nowTime = new Date();
		   // 输出
		   //document.write(nowTime);   // Wed Aug 05 2020 19:33:11 GMT+0800 (中国标准时间)
		   // 转换成具有本地语言环境的日期格式.
		   nowTime = nowTime.toLocaleString();
		   document.write(nowTime); // 2020/8/5 下午7:32:54
		   document.write("<br>");
		   document.write("<br>");
		   
		   // 当以上格式不是自己想要的,可以通过日期获取年月日等信息,自定制日期格式.
		   var t = new Date();
		   var year = t.getFullYear(); // 返回年信息,以全格式返回.例如2020
		   var month = t.getMonth(); // 月份是:0-11
		   // var dayOfWeek = t.getDay(); // 获取的一周的第几天(0-6)
		   var day = t.getDate(); // 获取日信息.
		   document.write(year + "年" + (month+1) + "月" + day + "日");  // 2020年8月5日
		   
		   document.write("<br>");
		   document.write("<br>");
		   
		   
		   // 重点:怎么获取毫秒数？(从1970年1月1日 00:00:00 000到当前系统时间的总毫秒数)
		   //var times = t.getTime();
		   //document.write(times);  // 1596627381030
		   // 一般会使用毫秒数当做时间戳. (timestamp)
		   
		   document.write(new Date().getTime());
		   
		</script>
	
	
	    <!--
		     2、显示网页时钟,要求一直动态的显示每一秒的变化
		-->	
		<script type="text/javascript">
			function displayTime(){
				var time = new Date();
				var strTime = time.toLocaleString();
				document.getElementById("timeDiv").innerText = strTime;
			}
			
			// 每隔1秒调用displayTime()函数
			function start(){
				// 从这行代码执行结束开始,则会不间断的,每隔1000毫秒调用一次displayTime()函数.
				//var v = window.setInterval("displayTime()", 1000);	
				//为了让变量v在下面函数里面可以调用,那么就去掉var,使其成为全局变量
				v = window.setInterval("displayTime()", 1000);	
			}
			
			function stop(){
				window.clearInterval(v); //关掉v
			}
		</script>
		
		<br><br>
		<input type="button" value="显示系统时间" onclick="start();"/>
		<input type="button" value="系统时间停止" onclick="stop();" />
		
		<div id="timeDiv"></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
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

在这里插入图片描述

12.9、内置支持类Array

	（1）创建数组
	（2）数组遍历
	（3）JS中数组对象常用方法：push，pop，join，reverse等。
1
2
3

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>内置支持类Array</title>
	</head>
	<body>
		<script type="text/javascript">
			/*
			
			// 创建长度为0的数组
			var arr = [];
			alert(arr.length);  //0
			
			// 数据类型随意
			var arr2 = [1,2,3,false,"abc",3.14];
			alert(arr2.length);  //6
			
			// 下标会越界吗?   arr2[7]是第8个元素,已经超过了6个了
			arr2[7] = "test"; // 不会，自动扩容.
			
			// 遍历
			for(var i = 0; i < arr2.length; i++){
				document.write(arr2[i] + "<br>");
			}
			// 	1
			// 	2
			// 	3
			// 	false
			// 	abc
			// 	3.14
			// 	undefined
			// 	test
		   
			// 另一种创建数组的对象的方式
			var a = new Array(); //不写，表示，数组长度为0
			alert(a.length); // 0
			
			var a2 = new Array(3); // 写一个，就表示数组长度
			alert(a2.length);  //3
			
			var a3 = new Array(3,2); //写多个，就表示存储的具体元素3、2
			alert(a3.length); // 2		  
			alert(a3[0]); //3
			alert(a3[1]); //2

			*/
		   
		   //数组相关的常用方法:
		   
		   var a = [1,2,3,9];
		    //join() 把数组的所有元素放入一个字符串。元素通过指定的分隔符进行分隔。 
		   var str = a.join("-");
		   document.write(str + "<br>"); // "1-2-3-9"
		   
		   //  push() 向数组的末尾添加一个或更多元素，并返回新的长度。 
		   a.push(10);
		   document.write(a.join("-") + "<br>"); // "1-2-3-9-10"
		   
		   // pop() 删除并返回数组的最后一个元素 
		   var endElt = a.pop();
		  document.write(endElt + "<br>");  //10
		  document.write(a.join("-") + "<br>"); // "1-2-3-9"
		   
		   // 注意:JS中的数组可以自动模拟栈数据结构:先进后出，后进先出原则.
		   // push压栈
		   // pop弹栈
		   
		   // reverse() 颠倒数组中元素的顺序。 
		   a.reverse();
		  document.write(a.join("=") + "<br>");  //9=3=2=1
		</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
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

在这里插入图片描述

13、BOM编程案例

13.1、window.open()和window.close()

	BOM编程中，window对象是顶级对象，代表浏览器窗口。
	window有open和close方法，可以开启窗口和关闭窗口。

		----------------------------------------------------------------------------------------------------------
		<input type="button" value="开启百度(新窗口)" onclick="window.open('http://www.baidu.com');" />
		<input type="button" value="开启百度(当前窗口)" onclick="window.open('http://www.baidu.com', '_self');" />
		<input type="button" value="开启百度(新窗口)" onclick="window.open('http://www.baidu.com', '_blank');" />
		<input type="button" value="开启百度(父窗口)" onclick="window.open('http://www.baidu.com', '_parent');" />
		<input type="button" value="开启百度(顶级窗口)" onclick="window.open('http://www.baidu.com', '_top');" />
		
		<input type="button" value="打开002-open.html窗口"  onclick="window.open('002-open.html')"/>
		
		<input type="button" value="关闭当前窗口" onclick="window.close();" />
		----------------------------------------------------------------------------------------------------------
1
2
3
4
5
6
7
8
9
10
11
12
13
14

13.2、window.alert()和window.confirm()

alert弹出消息框，confirm弹出确认框

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>弹出消息框和确认框</title>
	</head>
	<body>
		<script type="text/javascript">
			function del(){
				/*
				var ok = window.confirm("亲，确认删除数据吗？");
				//alert(ok); //ok的值为true或者false
				if(ok){
					alert("delete data ....");
				}
				*/
					//合并
			    if(window.confirm("亲，确认删除数据吗？")){
			    	alert("delete data ....");
			    }
			}
		</script>
		
		<input type="button" value="弹出消息框" onclick="window.alert('消息框!')" />
		
		  <!--删除操作的时候都要提前先得到用户的确认。-->
		<input type="button" value="弹出确认框(删除)" onclick="del();" />
		
	</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

13.3、当前窗口设置为顶级窗口

在这里插入图片描述

	if(window.top != window.self){
		window.top.location = window.self.location;
	}
1
2
3

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>当前窗口设置为顶级窗口</title>
		
		<!--窗体-->
		<!-- 
		<frameset cols="20%,80%">
			<frame src="http://www.baidu.com" />
			<frame src="005-child-window.html" />
		</frameset> 
		-->
		
	</head>
	<body>
		
		<!--在当前窗口中隐藏的内部窗体。-->
		<iframe src="005-child-window.html"></iframe>
		<!-- <iframe src="http://www.baidu.com"></iframe> -->	
			
		<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

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>child-window</title>
	</head>
	<body>
		第二个窗口
		child window.<br>
		
		<script type="text/javascript">
			window.onload = function(){
				var btn = document.getElementById("btn");
				btn.onclick = function(){
					if(window.top != window.self){ //如果顶级窗口不是当前窗口
						window.top.location = window.self.location; //让当前窗口（的地址）成为顶级窗口(的地址)
					}
				}
			}
		</script>
		
		<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

在这里插入图片描述

13.4、历史记录- history 对象

	window.history.back(); //后退
	window.history.go(-1); //后退
	window.history.go(1); //前进
	
	<input type="button" value="前进" onclick="window.history.go(1)"/> 
	
	<!--2种方法后退-->
	<input type="button" value="后退" onclick="window.history.back()" />
	<input type="button" value="后退" onclick="window.history.go(-1)" />
1
2
3
4
5
6
7
8
9

13.5、设置浏览器地址栏上的URL

	总结，有哪些方法可以通过浏览器往服务器发请求？
	（1）表单form的提交。可以是get，也可以是post。
	（2）点击超链接。 get请求。
	（3）document.location
	（4）window.location
	（5）window.open("url")
	（6）直接在浏览器地址栏上输入URL，然后回车。get请求。（这个也可以手动输入，提交数据也可以成为动态的。）
	
	以上所有的请求方式均可以携带数据给服务器，只有通过表单提交的数据才是动态的。
1
2
3
4
5
6
7
8
9

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>设置浏览器地址栏上的URL</title>
	</head>
	<body>
		
		<script type="text/javascript">
			function goBaidu(){  //有多种方式:
				//var locationObj = window.location;
				//locationObj.href = "https://www.sina.com.cn/";
				
				//window.location.href = "https://www.sina.com.cn/";
				
				//window.location = "https://www.sina.com.cn/";
				
				//document.location.href = "https://www.sina.com.cn/";
				
				document.location = "https://www.sina.com.cn/";
			}
		</script>
		
		<input type="button" value="新浪" onclick="goBaidu();"/>
		
		<input type="button" value="baidu" onclick="window.open('https://www.baidu.com/');" />
		
	</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

14、JSON对象

1、什么是JSON，有什么用？
	JavaScript Object Notation（JavaScript对象标记），简称JSON。
	JSON主要的作用是：一种标准的数据交换格式。
	（目前非常流行，90%以上的系统，系统A与系统B交换数据的话，都是采用JSON。）

2、JSON是一种标准的轻量级的数据交换格式。特点是：体积小，易解析。

3、在实际的开发中有两种数据交换格式，使用最多，其一是JSON，另一个是XML。
	XML缺点：体积较大，解析麻烦。
	XML优点：语法严谨。（通常银行相关的系统之间进行数据交换的话会使用XML。）

4、JSON的语法格式：
	var 对象名 = {
		"属性名" : 属性值,
		"属性名" : 属性值,
		"属性名" : 属性值,
		"属性名" : 属性值,
		....
	};

5、eval函数
	eval函数的作用是：将字符串当做一段JS代码解释并执行。

6、【面试题】在JS当中：[]和{}有什么区别？
	[] 是数组。
	{} 是JSON。
	
	java中的数组：int[] arr = {1,2,3,4,5};
	JS中的数组：var arr = [1,2,3,4,5];
	JSON：var jsonObj = {"email" : "zhangsan@123.com","age":25};	
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

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>JSON</title>
	</head>
	<body>
		<script type="text/javascript">
			
		// 之前没有使用JSON的时候,定义类,创建对象,访问对象的属性.
			Student = function(sno,sname,sex){
				this.sno = sno;
				this.sname = sname;
				this.sex = sex;
			}
			var stu = new Student("110","张三","男");
			alert(stu.sno + "," + stu.sname + "," + stu.sex);
			
		// 创建JSON对象(JSON也可以称为无类型对象。轻量级，轻巧。体积小。易解析。)
		    var studentObj = {
				"sno" : "111",
				"sname" : "李四",
				"sex" : "男"
			};
			
			// 访问JSON对象的属性
			alert(studentObj.sno + "," + studentObj.sname + "," + studentObj.sex);
			
	    // JSON数组
			var students = [
				{"sno":"110","sname":"张三","sex":"男"},
				{"sno":"120","sname":"李四","sex":"男"},
				{"sno":"130","sname":"王五","sex":"男"}
			];
			
			// 遍历
			for(var i = 0; i < students.length; i++){
				var stuObj = students[i];
				alert(stuObj.sno + "," + stuObj.sname + "," + stuObj.sex);
			}
		</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
38
39
40
41
42
43

例2：复杂一些的JSON对象

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>复杂一些的JSON对象。</title>
	</head>
	<body>
		<script type="text/javascript">
			var user = {
				"usercode" : 110,
				"username" : "张三",
				"sex" : true,
				"address" : {
					"city" : "北京",
					"street" : "大兴区",
					"zipcode" : "12212121",
				},
				"aihao" : ["smoke","drink","tt"]
			};
			
			// 访问人名以及居住的城市
			alert(user.username + "居住在" + user.address.city); //张三居住在北京，爱好是smoke,drink,tt
			/*
				案例：设计JSON格式的数据，描述一个班级的总人数，另外包括描述班级中每个学生的信息，这样的JSON怎么写？
			*/
		    var jsonData = {
				"total" : 3,
				"students" : [
					{"name":"zhangsan","birth":"1980-10-20"},
					{"name":"lisi","birth":"1981-10-20"},
					{"name":"wangwu","birth":"1982-10-20"}
				]
			};
						
		</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

例3：eval函数

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>eval函数</title>
	</head>
	<body>
		<!--
			JSON是一种行业内的数据交换格式标准。
			JSON在JS中以JS对象的形式存在。
		-->
		<script type="text/javascript">
			/*
				eval函数的作用是：
					将字符串当做一段JS代码解释并执行。
			*/
		   /*
		   window.eval("var i = 100;");
		   alert("i = " + i); // i = 100
		   */
		  
		   /* java连接数据库,查询数据之后,将数据在java程序中拼接成JSON格式的“字符串”,将json格式的字符串响应到浏览器
		      也就是说java响应到浏览器上的仅仅是一个"JSON格式的字符串",还不是一个json对象.
		      可以使用eval函数,将json格式的字符串转换成json对象.  
		   */
		   var fromJava = "{\"name\":\"zhangsan\",\"password\":\"123\"}"; //这是java程序给发过来的json格式的"字符串"
		   // 将以上的json格式的字符串转换成json对象
		   window.eval("var jsonObj = " + fromJava);
		   // 访问json对象
		   alert(jsonObj.name + "," + jsonObj.password); //zhangsan,123

		  
		   var json = {
			   "username" : "zhangsan"
		   };
		   // JS中访问json对象的属性————方法一
		   alert(json.username);  //zhangsan
		   
		   // JS中访问json对象的属性————方法二
		   alert(json["username"]); //zhangsan
		   
		</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
38
39
40
41
42
43
44

15、补充：DOM编程————拼接html的方式，设置table的tbody

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>设置table的tbody</title>
	</head>
	<body>
		<script type="text/javascript">
			// 有这些json数据,模拟从数据库得到的数据
			var data = {
				"total" : 4,
				"emps" : [
					{"empno":7369,"ename":"SMITH1","sal":800.0},
					{"empno":7361,"ename":"SMITH2","sal":1800.0},
					{"empno":7360,"ename":"SMITH3","sal":2800.0},
					{"empno":7362,"ename":"SMITH4","sal":3800.0}
				]
			};
			
			// 希望把数据展示到table当中.
			/*
				<tr>
					<td>7369</td>
					<td>SMITH</td>
					<td>800</td>
				</tr>
				<tr>
					<td>7369</td>
					<td>SMITH</td>
					<td>800</td>
				</tr>
				<tr>
					<td>7369</td>
					<td>SMITH</td>
					<td>800</td>
				</tr>
			*/
				
			window.onload = function(){
				var displayBtnElt = document.getElementById("displayBtn");
				displayBtnElt.onclick = function(){
					var emps = data.emps;
					var html = "";
					for(var i = 0; i < emps.length; i++){  //拼接每一行员工数据到表里面
						var emp = emps[i];
						html += "<tr>";
						html += "<td>"+emp.empno+"</td>";
						html += "<td>"+emp.ename+"</td>";
						html += "<td>"+emp.sal+"</td>";
						html += "</tr>";
					}
					document.getElementById("emptbody").innerHTML = html;
					document.getElementById("count").innerHTML = data.total;
				}
			}
		</script>
		
		<input type="button" value="点我,显示下方员工信息列表:" id="displayBtn" />
		
		<h2>员工信息列表</h2>
		<hr>  
		<table border="1px" width="50%">
			<tr>
				<th>员工编号</th>
				<th>员工名字</th>
				<th>员工薪资</th>
			</tr>
			<tbody id="emptbody">


			</tbody>
		</table>
		总共<span id="count">0</span>条数
	</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

在这里插入图片描述

16、补充：要会使用浏览器的F12

会使用F12调试面板：
第一会调错；
第二会定位并查看HTML页面元素。

【总结 - 思维导图】

在这里插入图片描述

传送门

上一章：Web前端 - CSS
下一章：Web后端 - 第一章 - 互联网通信流程介绍

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/知新_RL/article/detail/131135?site