JavaScript基本入门教程

itlemon

发布于 2020-04-03 17:53:45

4.1K0

发布于 2020-04-03 17:53:45

文章被收录于专栏：深入理解Java

JavaScript基本入门

一、JavaScript语法详解

1.JavaScript的组成

ECMAScript(核心)：规定了JS的语法和基本对象

DOM文档对象模型：处理网页内容的方法和接口，D是指标记型文档HTML

BOM浏览器对象模型：与浏览器交互的方法和接口

2.JavaScript的引入方式

1）内部脚本

使用JavaScript:前缀构建执行JavaScript代码的URL（适合执行语句只有一行）
使用<script>....</script>来包含JavaScript代码

<!DOCTYPE html>
<html>
	<head>
			<meta charset="utf-8" />
			<title>运行JavaScript程序</title>
				</head>
				<body>
						<!--使用JavaScript:前缀构建执行JavaScript代码的URL-->		
						<a href="javascript:alert('手动运行JavaScript！');">手动运行</a>		
						<!--使用<script>....</script>来包含JavaScript代码-->		
						<script type="text/javascript">
									alert("自动运行JavaScript!");	
            </script>	
     </body>
</html>

2）导入JavaScript文件

<script src="test.js" type="text/javascript"></script>

注意：外部引用时script标签内不能有script代码，即使写了也不会执行。

3.数据类型和变量

1）变量的声明

隐式声明
显式声明（推荐使用）

<!DOCTYPE html>
<html>
	<head>
			<meta charset="UTF-8">		
			<title>变量的声明</title>
  </head>	
  <body>
  		<script type="text/javascript">
  			// 隐式声明			
        a = "我是Lemon";			
        alert(a);			
        // 显式声明			
        var b = "我是Tom";			
        console.log(b);	
    </script>
 </body>
</html>

2）变量的命名规则

在声明JavaScript变量时，需要遵循以下命名规范：

必须以字母或下划线开头，中间可以是数字、字符或下划线

变量名不能包含空格等符号

不能使用JavaScript关键字作为变量名，如：function、this、class

JavaScript严格区分大小写。

3）基本数据类型

类似于java中的基本数据类型

string 字符串类型：” ”和’ ’都是字符串。 JavaScript中没有单个字符

boolean 布尔类型：固定值为true和false

number 数字类型：任意数字

null 空，一个占位符。

undefined 未定义类型，该类型只有一个固定值，即undefined，表示变量声明却未定义具体的值。

注：

A.因为undefined是从null中派生出来的，所以undefined==null。JavaScript区别于java，是弱类型语言，变量的使用不用严格遵循规范，所以一个变量声明好之后，是可以赋予任意类型的值。

B.ECMAScript实现之初的一个bug，null属于基本数据类型，typeof(null)--object。

4）引用数据类型

引用类型通常叫做类（class），但在JavaScript中，因为不存在编译过程，所以没有类的概念，所处理的引用数据类型都是对象。

标准创建方式：

var str = new String(); //和java相同

var str = new String; //js独有的方式

5）类型转换

JavaScript支持类型自动转换，且功能非常强大，看下面的代码案例：

<!DOCTYPE html>
<html>
	<head>
			<meta charset="UTF-8">		
			<title>类型转换</title>
  </head>	
  <body>
  		<script type="text/javascript">	
      		var a = "3.145";			
          var b = 2;			
          alert((a - b) + "\n" + (a + b));	
      </script>
  </body>
 </html>

输出的结果是：

1.145
3.1452

分析：

对于减号运算符，因为字符串不支持减法运算，所以自动将字符串转换成数值
对于加号运算符，因为字符串可以用加号作为连接运算符，所以自动将数值转换为字符串
其他类型的数据之间的转换可以自行实验，很简单

6）类型转换的常用方法（强制类型转换）

toString()：将布尔类型值、数值等转换成字符串
parseInt()：将字符串、布尔值等转换成整数（不进行四舍五入，直接取整）
parseFloat()：将字符串、布尔值等转换成浮点数

代码案例：

<!DOCTYPE html>
<html>
	<head>
			<meta charset="UTF-8">		
			<title>强制类型转换</title>
  </head>	
  <body>
  		<script type="text/javascript">	
        		var a = "3.145";			
            var b = 2;			
            var c = parseInt(a);			
            var d = parseFloat(a);			
            var e = a + b;			
            var f = c + b;			
            var g = d + b;			
            console.log(e + "-----" + f + "-----" + g);			
            console.log(typeof(toString(b)));	
      </script>
  </body>
 </html>

运行结果：

3.1452-----5-----5.145
string

尤其要注意以下的这种情况：

<!DOCTYPE html>
<html>
	<head>
			<meta charset="UTF-8">		
			<title>强制类型转换</title>
  </head>	
  <body>
  		<script type="text/javascript">
        			var a = "3.145a25";			
              console.log(parseFloat(a));	
      </script>
   </body>
</html>

运行结果：

3.145

分析：数值字符串中出现非数值的字符的时候，强制类型转换只会转换这个非数值字符的前面的数值字符，后面的自动忽略。

7）全局变量和局部变量

全局变量：可以在JavaScript所有脚本代码中使用。
局部变量：只能在方法中起作用，出了方法，就不起作用了，但是，有一点必须注意，那就是在方法中没有代码块的概念，也就是说，在方法的代码块中定义的局部变量，在整个方法中都是可以使用的，不限于在代码块中。
定义变量时使用var和不使用var的区别：如果使用var定义变量，那么程序会强制定义一个新的变量。如果没有使用var定义变量，系统会优先在当前上下文中搜索是否存在这个变量，如果有，则对这个变量重新赋值，否则重新定义一个新的变量。
事件中的全局变量和局部变量：请看代码案例五。

代码案例一：

<!DOCTYPE html>
<html>
	<head>
			<meta charset="UTF-8">		
			<title>全局变量和局部变量</title>
  </head>	
  <body>
  		<script type="text/javascript">
        			// 定义全局变量			
              var test = "全局变量";			
              // 定义方法			
              function fun() {
              				// 定义局部变量，这个变量会在方法中覆盖掉全局变量				
                      // 而出了方法，就不起作用了				
                      var test1 = "局部变量";				
                      console.log(test);			
              }			
              fun();			
              console.log(test);		
       </script>	
  </body>
</html>

运行结果：

局部变量
全局变量

代码案例二：

<!DOCTYPE html>
<html>
	<head>
			<meta charset="UTF-8">		
			<title>全局变量和局部变量</title>
  </head>	
  <body>
  		<script type="text/javascript">
        			function test(obj) {
               				// 定义一个局部变量，这个局部变量的作用范围是整个函数				
                      var i = 0;				
                      if (typeof obj == "object") {					
                               // 定义一个变量j，不同于Java，这个j的作用范围是这个函数，而不仅仅是if代码块内					
                               var j = 5;					
                               // 定义一个变量k，k的作用范围也是整个函数					
                               for (var k = 0; k < 5; k++) {			
                                  			document.write(k);					
                               }				
                       }				
                       // 已经出了if代码块				
                       document.write("<br />" + i + j + k);			
              }			
              // 调用函数			
              test(document);		
      </script>	
  </body>
</html>

运行结果：

01234
055

代码案例三：

<!DOCTYPE html>
<html>
	<head>
			<meta charset="UTF-8">		
			<title>使用var和不使用var定义变量的区别</title>	
	</head>	
	<body>
			<script type="text/javascript">			
			var scope = "全局变量";			
			function fun() {
							// 全局变量被局部变量覆盖				
							// 但是此时的scope尚未被赋值，所以输出undefined				
							document.writeln(scope + "<br />");				
							// 定义局部变量，作用范围为整个函数				
							var scope = "局部变量";				
							document.writeln(scope + "<br />");			
		  	}			
	  		fun();		
   	</script>	
  </body>
</html>

运行结果：

undefined
局部变量

分析：

全局变量被局部变量覆盖，但是此时的scope尚未被赋值，所以输出undefined。因为用了var就是强制定义了一个新变量，并覆盖了全局变量，但是代码是从上到下依次执行，所以输出结果是：undefined。把局部变量的var取消掉，就可以输出正确结果。

代码案例四：

<!DOCTYPE html>
<html>
	<head>
			<meta charset="UTF-8">		
			<title>使用var和不使用var定义变量的区别</title>
				</head>	
				<body>
						<script type="text/javascript">
									var scope = "全局变量";			
									function fun() {
													// 依旧使用的是全局变量				
													document.writeln(scope + "<br />");				
													// 定义局部变量，但实际上是对全局变量的重新赋值				
													scope = "局部变量";				
													document.writeln(scope + "<br />");			
									}			
									fun();		
						</script>
				</body>
</html>

运行结果：

全局变量
局部变量

代码案例五：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>全局变量和局部变量</title>
        <script type="text/javascript">
            var x = 1314;
        </script>
    </head>
    <body>
        <!--这个按钮，重新定义了局部变量，所以输出局部变量-->
        <input type="button" value="局部变量" onclick="var x = 520; alert(x);" /><br />
        <!--这个按钮没有重新定义变量，所以输出全局变量-->
        <input type="button" value="全局变量" onclick="alert(x);" />
    </body>
</html>

4.基本数据类型

数值类型：包含整数和浮点数
布尔类型：只有true和false
字符串类型：用引号括起来的数据，可以是单引号或者是双引号
undefined类型：专门用来确定已经创建的变量，但是没有赋值的变量
null类型：表明某个变量的值为空

各种类型的相关计算和Java十分相似。可以结合Java中的基本数据类型加以比较。

5.正则对象

1）正则对象的创建方法

var reg = new RegExp("表达式"); （开发中基本不用）
var reg = /^表达式$/; 直接量（开发中常用）
var reg = /表达式/;

注意事项：

/^表达式$/ 只要有无法成立正则的字符存在，即为false。

全部符合为true

（检查严格，眼睛不揉沙子）

适用于表单校验

/表达式/ 只要有成立正则的字符存在，即为true。

全部不符合为false

（检查不严格，懒人思想）

适用于字符串查找、替换

2）test()方法

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>正则对象</title>
        <script type="text/javascript">
            // 正则表达式对象创建方式，这种创建方式要注意把通配符的反斜杠转义掉
            var regex1 = new RegExp("\\w+@\\w+\\.\\w+");
            // 直接量的创建方式，开发中常用的是这样的方式，用于表单的校验
            var regex2 = /^\w+@\w+\.\w+$/;
            // 模糊匹配，只要部分符合，就返回true
            var regex3 = /\w+@\w+\.\w+/;
            console.log(regex1.test("223344@163.com"));
            console.log(regex2.test("223344@163.com"));
            console.log(regex3.test("!223344@163.com"));
        </script>
    </head>
    <body>
    </body>
</html>

运行结果：

true
true
true

3）结合字符串的replace()方法实现trim()方法

由于JavaScript的字符串没有trim()方法，而字符串的replace()方法也可以使用正则表达式，所以可以结合字符串的replace()方法实现trim()方法。代码如下：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>正则表达式和replace()方法实现trim()方法</title>
    </head>
    <body>
        <script type="text/javascript">
            function trim (str) {
                // g表示尽可能多的匹配
                return str.replace(/(^\s*)|(\s*$)/g, "");
            }
            console.log(trim("   Hello,JavaScript   "));
        </script>
    </body>
</html>

6.复合类型

JavaScript中的复合类型大致上有如下三种：

Object：对象
Array：数组
Function：函数

1）数组对象

A.JavaScript数组的特点：

JS数组可以看做 Java中的ArrayList 集合。

数组中的每一个成员没有类型限制，及可以存放任意类型

数组的长度可以自动修改

B.JavaScript数组的四种创建方式：

var arr = [1,2,3,”a”,true]; // 常用的JS数组，长度5

var arr = new Array(); // 创建一个数组对象，数组长度默认为0

var arr = new Array(4); // 数组长度是4，相当于开辟了长度为4的空间，每个元素是undefined。（仅在显示数组时进行处理，undefined为了方便显示变成了空字符串形式，其值本质仍然是undefined）

var arr = new Array(“a”,”b”,true); //创建了一个数组，长度3，数组元素是”a”,”b”,true

代码案例：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>数组的四种创建方式</title>
        <script type="text/javascript">
            // JavaScript中的数组和Java中的数组不一样，其实它更类似于Java中的集合，
            // JavaScript中的数组的长度是可以变化的，还可以放置任意类型的数据
            // 第一种数组的创建方式，常用的创建方式
            var arr1 = [1, 2, 3, "我是Lemon"];
            // 第二种数组的创建方式，创建一个数组对象，数组长度默认为0
            var arr2 = new Array();
            // 第三种数组的创建方式，创建一个长度为4的数组
            var arr3 = new Array(4);
            // 第四种数组的创建方式
            var arr4 = new Array(1, 2, 3, "我是Lemon");
            for (e in arr1) {
                console.log(arr1[e]);
            }
        </script>
    </head>
    <body>
    </body>
</html>

C.JS数组的常用属性/方法

属性/方法	说明
length	设置或者返回数组中的元素数目
join()	把数组中的所有元素放入到字符串中，按照指定的字符串分隔
pop()	删除最后一个元素并返回
push()	向数组的末尾添加一个或者更多个元素，并返回数组的长度
reverse()	颠倒数组中元素的顺序

代码案例：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>数组的常用方法和属性</title>
    </head>
    <body>
        <script type="text/javascript">
            // 创建一个数组对象
            var arr = [1, 2, 3, 4, "我是Lemon"];
            // length属性
            console.log("数组arr的长度为：" + arr.length);
            // 可以设置arr的长度，当长度大于本身长度时候，多余的部分用undefined填充，但是实际内容也是空的
            arr.length = 8;
            console.log("数组arr的最后一位元素为：" + arr[7]);
            // join()方法，把数组中的所有元素放入到字符串中，按照指定的字符串分隔
            console.log(arr.join(","));
            // pop()方法，删除最后一个元素并返回
            console.log("被删除的元素是：" + arr.pop());
            console.log("数组arr的长度为：" + arr.length);
            // push()方法，向数组的末尾添加一个或者更多个元素，并返回数组的长度
            arr.push("CSDN");
            console.log(arr);
            arr.push("地点", "北京中关村");
            console.log(arr);
            // reverse()方法，颠倒数组中元素的顺序
            console.log(arr.reverse());
        </script>
    </body>
</html>

运行结果：

数组arr的长度为：5
数组arr的最后一位元素为：undefined
1,2,3,4,我是Lemon,,,
被删除的元素是：undefined
数组arr的长度为：7
1,2,3,4,我是Lemon,,,CSDN
1,2,3,4,我是Lemon,,,CSDN,地点,北京中关村
北京中关村,地点,CSDN,,,我是Lemon,4,3,2,1

D.数组的特点

JavaScript的数组长度可边，数组的长度是数组最大索引+1
同一个数组的元素可以互相不同
访问数组元素时不会产生数组越界，访问未赋值的数组元素的时候，该元素的值为undefined

2）全局函数

A.eval()函数：计算JavaScript字符串，并把它当做脚本代码来执行。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>eval()函数</title>
	</head>
	<body>
		<script type="text/javascript">
			var str = window.prompt("请输入一段JavaScript可执行的算术代码：");
			window.alert("您输入的代码执行结果是：" + eval(str));
		</script>
	</body>
</html>

B.URI/URL编码和解码

URL/URI编码：中文及特殊符号转换成 %16进制

作用：保证数据传递的完整性。

属性/方法	说明
encodeURI()	将字符串编码成URI
decodeURI()	将编码好的URI解码成原本的字符串

代码案例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>URI的编码和解码</title>
	</head>
	<body>
		<script type="text/javascript">
			var uri1 = "http://127.0.0.1:8020/Day03_Course/20URI%E7%9A%84%E7%BC%96"
			+ "%E7%A0%81%E5%92%8C%E8%A7%A3%E7%A0%81.html";
			console.log("解码的结果是：" + decodeURI(uri1));
			var uri2 = "http://127.0.0.1:8020/Day03_Course/20URI的编码和解码.html";
			console.log("编码的结果是：" + encodeURI(uri2));
		</script>
	</body>
</html>

运行结果是：

解码的结果是：http://127.0.0.1:8020/Day03_Course/20URI的编码和解码.html
编码的结果是：http://127.0.0.1:8020/Day03_Course/20URI%E7%9A%84%E7%BC%96%E7%
A0%81%E5%92%8C%E8%A7%A3%E7%A0%81.html

3）自定义函数

如果一段代码需要被重复编写使用，那么我们为了方便统一编写使用，可以将其封装进一个函数（方法）中。作用：增强代码的复用性。

自定义函数的三种方式：

定义命名函数
定义匿名函数
使用Function类匿名函数(了解)
递归函数

A.定义命名函数

定义格式：

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

说明：

JavaScript函数定义必须用小写的function；
JavaScript函数无需定义返回值类型，直接在function后面书写方法名；
参数的定义无需使用var关键字，否则报错；
JavaScript函数体中，return可以不写，也可以return 具体值，或者仅仅写return；

代码案例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>自定义函数</title>
	</head>
	<body>
		<script type="text/javascript">
			function printSeason (month) {
				switch (month) {
					case "12":
					case "1":
					case "2":
						window.alert(month + "月是冬季");
						break;
					case "3":
					case "4":
					case "5":
						window.alert(month + "月是春季");
						break;
					case "6":
					case "7":
					case "8":
						window.alert(month + "月是夏季");
						break;
					case "9":
					case "10":
					case "11":
						window.alert(month + "月是秋季");
						break;
					default:
						window.alert("您输入的月份有误，请重新输入！");
						break;
				}
			}
			var month = window.prompt("请输入月份（1-12）：");
			printSeason(month);
		</script>
	</body>
</html>

函数使用的注意事项：

JavaScript函数调用执行完毕一定有返回值，值及类型根据return决定，如果未return具体值，返回值为undefined；
JavaScript函数若同名，则不存在方法重载，只有方法相互覆盖，最后定义的函数覆盖之前的定义；
因为JavaScript不存在函数重载，所以JavaScript仅根据方法名来调用函数，即使实参与函数的形参不匹配，也不会影响正常调用；
如果形参未赋值，就使用默认值undefined
在同一个<script>...</script>标签中允许先调用函数，再定义函数，但是在不同的<script>...</script>标签中，只能调用前面的<script>...</script>标签中的函数，不允许调用后面的<script>...</script>标签中的函数。

B.定义匿名函数

定义格式：

var fun = function (参数列表) {
    // 函数体
};

说明：

无需指定函数名；
函数定义完成之后不要忘记加上分号(;)
匿名函数往往都是使用一个变量进行接收返回值；
实际开发中建议使用这种定义方式，在给类或者对象定义方法的时候，使用这种方式更加简洁。

代码案例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>匿名函数</title>
	</head>
	<body>
		<script type="text/javascript">
			// 实际开发中建议使用这种定义方式
			var result = function (str) {
				return str.toUpperCase();
			};
			var str = window.prompt("请输入一段英文字符串：");
			window.alert("您输入的字符串转换后的结果是：" + result(str));
		</script>
	</body>
</html>

C.使用Function类匿名函数(了解)

JavaScript提供了Function类，该类可以用来定义函数，该类的构造器可以接收一系列字符串作为参数，其中最后一个字符串参数是函数的执行体。

代码案例如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>Function类定义函数</title>
	</head>
	<body>
		<script type="text/javascript">
			// 该函数的定义方式所有的参数都是字符串，且最后一个字符串是函数体
			var printInfo = new Function("name", "age",
				"window.alert('您输入的姓名是：' + name + '，年龄是：' + age)"
			);
			printInfo("Tom", "23");
		</script>
	</body>
</html>

D.递归函数

代码案例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>递归函数</title>
	</head>
	<body>
		<script type="text/javascript">
			// 定义递归函数实现5的阶乘
			var diGui = function (num) {
				if (num == 0) return 1;
				if (num == 1) return 1;
				return num * diGui(num - 1);
			};
			var num = parseInt(window.prompt("请输入一个整数："));
			// 这里使用isNaN来判断num是否是NaN，因为NaN也是number类型
			// 且NaN不和任何类型的数据相等，只能使用isNaN()方法来判断是否是NaN
			if (typeof(num) == "number" && !isNaN(num)) {
				if (num >= 0) {
					window.alert(num + "的阶乘是：" + diGui(num));
				} else {
					window.alert("您输入的数字小于0，会导致内存溢出！");
				}
			} else {
				window.alert("您输入的数字有误，请重新输入！");
			}
		</script>
	</body>
</html>

重点说明：

这里使用isNaN来判断num是否是NaN，因为NaN也是number类型
且NaN不和任何类型的数据相等，只能使用isNaN()方法来判断是否是NaN

3）自定义对象

对象是一系列命名变量、函数的集合。其中命名变量既可以是基本数据类型，也可以是复合数据类型，对象中命名变量称为属性，而对象中的函数称为方法，对象访问属性和方法可以通过链式编程"."来实现。自定义对象的两种常见方法：

使用new关键字调用构造器创建对象
使用Object直接创建对象
使用JSON语法创建对象

A.使用new关键字调用构造器创建对象

使用new关键字调用构造器创建对象，这是最接近面向对象语言的创建对象的方式，这种创建方式总是可以返回一个对象。代码案例如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>new关键字创建对象</title>
	</head>
	<body>
		<script type="text/javascript">
			// 定义一个函数，也就是定义了一个Person类
			function Person (name, age) {
				this.name = name;
				this.age = age;
				this.printInfo = function () {
					console.log("姓名：" + this.name + ",年龄：" + this.age);	
				}
			}
			// 第一种创建对象的方法：无参创建
			var p1 = new Person();
			// 第二种创建对象的方法：带参创建
			var p2 = new Person("张三", 19);
			// 调用方法
			p1.printInfo();
			p2.printInfo();
			// 添加属性
			p1.school = "地大";
			console.log("毕业院校：" + p1.school);
			// 仅仅是添加了对象p1的school属性，p2没有添加
			console.log("毕业院校：" + p2.school);
		</script>
	</body>
</html>

运行结果：

姓名：undefined,年龄：undefined
姓名：张三,年龄：19
毕业院校：地大
毕业院校：undefined

B.使用Object直接创建对象

JavaScript对象都是Object类的实例对象，因此可以使用如下方式创建，然后动态地添加方法和属性：

var myObj = new Object();

方法案例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>使用Object直接创建对象</title>
	</head>
	<body>
		<script type="text/javascript">
			// 直接创建对象
			var myObj = new Object();
			// 添加属性
			myObj.name = "张三";
			myObj.age = 19;
			myObj.school = "地大";
			// 添加方法
			myObj.printInfo = function () {
				window.alert("姓名：" + this.name + "，年龄：" + this.age + "，毕业院校：" + this.school);
			};
			// 调用方法
			myObj.printInfo();
			// 遍历对象的全部属性或者方法
			// m在数组中是索引，在这里是键
			for (var m in myObj) {
				console.log(myObj[m]);
			}
		</script>
	</body>
</html>

运行结果：

张三
19
地大
function () {
    window.alert("姓名：" + this.name + "，年龄：" + this.age + "，毕业院校：" + this.school);
}

C.使用JSON语法创建对象

使用JSON语法创建对象的优点：

避免书写函数
避免书写new
使用键值对的形式创建属性和方法

代码案例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>使用JSON语法创建对象</title>
	</head>
	<body>
		<script type="text/javascript">
			var person = {
				name : "张三",
				age : 19,
				school : "中国地质大学",
				printInfo : function () {
					window.alert("姓名：" + this.name + ",年纪：" 
					+ this.age + ",毕业院校：" + this.school);
				}
			};
			person.printInfo();
		</script>
	</body>
</html>

7.函数专项

函数：就像Java的方法一样，这个函数可以被调用
对象：定义一个函数的时候，系统也会自动创建一个对象，该对象是Function的实例
方法：定义一个函数的时候，该函数通常都会被附加给某个对象，作为该对象的方法
类：定义函数的同时，也会得到一个与函数同名的类

代码案例1：函数不仅可以调用，还是一个对象，是Function和Object的实例，window对象的方法。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>函数专项研究1</title>
	</head>
	<body>
		<script type="text/javascript">
			// 定义一个匿名函数
			var hello = function (name) {
				return name + "，您好！";
			};
			// 判断hello方法是何种类型
			console.log(hello instanceof Object);
			console.log(hello instanceof Function);
			// 当定义一个方法的时候，通常会把方法附加给window对象
			console.log(window.hello("张三"));
		</script>
	</body>
</html>

代码案例2：定义函数的时候，如果没有明确把这个函数附加到哪个对象上，那么它就会被附加到window对象上。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>函数专项研究2</title>
	</head>
	<body>
		<script type="text/javascript">
			// 直接定义一个函数，没有指定该函数属于哪个对象，那么默认为window
			var hello = function (name) {
				return name + "，您好！"
			};
			// 以window对象作为调用者
			console.log(window.hello("李四"));
			// 定义一个对象
			var p = {
				// 定义一个方法，这个方法属于对象p
				walk : function () {
					console.log("慢慢走....")
				}
			};
			// 以p对象作为调用者
			p.walk();
		</script>
	</body>
</html>

代码案例3：函数的实例属性、类属性、局部变量的区别

实例属性：只有在对象中才存在，创建对象以后，才有这个属性，且不同对象之间的属性可以不一样。

类属性：类属性是类的属性，只有通过类名来调用，无法通过对象来调用，对象调用的时候就会出现undefined。

局部变量：在函数内可用，出了函数就不可用。

下面通过一个案例来区别函数的实例属性、类属性、局部变量：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>实例属性、类属性和局部变量之间的区别</title>
	</head>
	<body>
		<script type="text/javascript">
			// 定义一个函数
			function Person(national, name, age) {
				// 类属性
				Person.national = national;
				// 实例属性
				this.name = name;
				this.age = age;
				// 局部变量
				var arg = 0;
			}
			// 创建第一个对象p1
			var p1 = new Person("China", "Tom", 29);
			// 因为national是类属性，对象p1并没有这个属性，所以打印的结果国籍是undefined
			console.log("姓名：" + p1.name + " ,年龄：" + p1.age + " ，国籍：" + p1.national);
			console.log("姓名：" + p1.name + " ,年龄：" + p1.age + " ，国籍：" + Person.national);
			// 输出arg，因为arg是局部变量，出了方法就不能使用，所以输出为undefined
			console.log(p1.arg);
			// 创建第二个对象p2
			var p2 = new Person("Janpan", "Lemon", 32);
			// 重新创建一个对象以后，按照类属性进行打印
			console.log("姓名：" + p2.name + " ,年龄：" + p2.age + " ，国籍：" + Person.national);
			// 重新打印对象p1对象，发现p1的国籍变成了和p2的一致，这是因为类属性改变后，所有的
			// 该类属性都会变化，但是作为对象的属性，对象创建完成以后就不会再变了
			console.log("姓名：" + p1.name + " ,年龄：" + p1.age + " ，国籍：" + Person.national);
			// 动态地为p1对象添加属性，p2不会享有
			p1.score = 98;
			console.log(p2.score);
			// 动态地为类添加属性，则整个类都有了该属性，但是对象还是不会有
			Person.grade = 1;
			console.log(Person.grade);
			console.log(p1.grade);
		</script>
	</body>
</html>

分析结果：

创建第一个对象p1，因为national是类属性，对象p1并没有这个属性，所以p1.national打印的结果国籍是undefined
输出arg，因为arg是局部变量，出了方法就不能使用，所以输出为undefined
创建第二个对象p2，重新创建一个对象以后，按照类属性进行打印，重新打印对象p1对象，发现p1的国籍变成了和p2的一致，这是因为类属性改变后，所有的该类属性都会变化，但是作为对象的属性，对象创建完成以后就不会再变了
动态地为某个对象添加属性，或者方法，它们只属于这个对象，其他的对象则不会享受这样的属性和方法，而动态地添加类属性，则会改变类的属性。

二、BOM对象

1.BOM对象的基本概念

BOM（Browser Object Model）浏览器对象模型
浏览器：IE、火狐、谷歌等
作用：用来执行浏览器的相关操作。（例如：浏览器的地址、弹出消息等）
一般情况下，window代表了BOM对象。
window对象是JavaScript的内置对象，使用window对象调用方法时可以省略window不写。

BOM对象包括：Window、Navigator、Screen、History、Location。这里着重讲解Window、Navigator以及History对象。

2.window对象

1）window对象的基本概述

window对象是整个JavaScript脚本运行的顶层对象，当定义一个全局变量的时候，它就是window对象的属性，当定义一个方法的时候，它就是window对象的方法。

代码案例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>全局变量和全局方法与window对象之间的关系</title>
	</head>
	<body>
		<script type="text/javascript">
			// 定义一个全局变量
			var arg = 10;
			// 定义一个全局方法
			var fun = function () {
				console.log("我是全局方法");
			};
			// 判断全局变量与全局方法是否是window对象的属性和方法，返回结果都是true
			console.log("arg是window对象的属性吗：" + (arg === window.arg));
			console.log("fun是window对象的方法吗：" + (fun === window.fun));
		</script>
	</body>
</html>

2）window对象的常用方法

alert()：警告框，用来弹出警告消息
confirm()：确认框，用于告知用户信息并收集用户的选择
prompt()：输入对话框，用来收集用户的输入
定时器：setInterval()、clearInterval()和setTimeout()、clearTimeout()

代码案例1：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>window对象的alert()方法</title>
	</head>
	<body>
		<script type="text/javascript">
			var name = prompt("请输入您的姓名：");
			var flag = confirm("您的姓名是：" + name + "  吗？");
			alert("用户的回答是：" + (flag ? "是" : "不是"));
		</script>
	</body>
</html>

代码案例2：定时器

setInterval(“code”, interval)、clearInterval(timer)：设置、删除定时器。setInterval设置每隔interval毫秒执行一次code

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>定时器的应用</title>
	</head>
	<body>
		<p id="tm"></p>
		<script type="text/javascript">
			// 定义一个定时变量
			var timer;
			// 保存页面开始执行的时间
			var cur = new Date().getTime();
			var setTime = function () {
				// 设置指定标签的内容体
				document.getElementById("tm").innerHTML = new Date().toString();
				if (new Date().getTime() - cur >= 60 * 1000) {
					clearInterval(timer);
				}
			};
			timer = setInterval("setTime()", 1000);
		</script>
	</body>
</html>

setTimeout(“code”, interval)、clearTimeout(timer)：设置、删除单次定时器。setTimeout设置在interval毫秒后执行一次code

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>定时器的应用</title>
	</head>
	<body>
		<p id="tm"></p>
		<script type="text/javascript">
			var timer;
			var cur = new Date().getTime();
			var setTime = function () {
				document.getElementById("tm").innerHTML = new Date().toLocaleString();
				if (new Date().getTime() - cur <= 60 * 1000) {
					window.setTimeout("setTime()", 1000);
				}
			};
			setTime();
		</script>
	</body>
</html>

3.location对象

window对象还包含一个location属性，该属性可用于访问该窗口所装载的文档地址URL。window.location返回的是Location的实例对象，它有一个href属性可以用来跳转页面。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>location对象的href属性</title>
	</head>
	<body>
		<input type="button" value="跳转按钮" onclick="zhiling()"/>
		<script type="text/javascript">
			var tz = function () {
				location.href = "http://127.0.0.1:8020/Day02_Course/" 
				+ "34%e4%ba%8c%e7%bb%b4%e7%a0%81%e5%90%8d%e7%89%87.html"
			};
			var zhiling = function () {
				alert("5秒后将跳转到指定页面！");
				setTimeout("tz()", 5000);
			};
		</script>
	</body>
</html>

三、DOM对象

1.DOM对象的概述

DOM（Document Object Model）文档对象模型
文档：标记型文档（HTML等）
DOM是将标记型文档中所有内容（标签、文本、属性）都封装成对象，通过操作对象的属性或者方法，来达到操作或者改变HTML展示效果的目的。

2.获取元素对象的四种方法

在JavaScript中，我们可以通过DOM对象的4种方式获取对应的元素对象：

getElementById(); ---通过元素ID获取对应元素对象，可以通过ID获取对应的元素对象，如果找不到，返回null
getElementsByName(); ---通过元素的name属性获取符合要求的所有元素
getElementsByTagName(); ---通过元素的元素名属性获取符合要求的所有元素
getElementsByClassName(); ---通过元素的class属性获取符合要求的所有元素，可以获取到元素节点对象数组；如果找不到，返回空数组

代码案例1：getElementById()

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>根据ID来获取元素对象</title>
	</head>
	<body>
		<p id="text">我是P标签的文本</p>
		<textarea id="textarea">我是文本域textarea的文本</textarea>
		<input type="button" value="点击访问" onclick="accessById()"/>
		<script type="text/javascript">
			var accessById = function () {
				alert(document.getElementById("text").innerHTML + "\n" + 
				document.getElementById("textarea").value);
			};
		</script>
	</body>
</html>

注意：表单元素的可见内容的获取都是通过它的value属性来获取的。

代码案例2：通过节点关系来访问HTML元素（建议使用Element而不是Node）

<ol id="books">
			<li id="java">疯狂java讲义</li>
			<li id="ssh">轻量级Java EE企业应用实战</li>
			<li id="ajax" class="selected">疯狂Ajax讲义</li>
			<li id="xml">疯狂XML讲义</li>
			<li id="ejb">经典Java EE企业应用实战</li>
			<li id="andriod">疯狂Andriod讲义</li>
		</ol>
		<hr />
		<input type="button" value="获取父节点" onclick="change(currentElement.parentElement)"/><br />
		<input type="button" value="获取第一个节点" onclick="change(currentElement.parentElement.firstElementChild)"/><br />
		<input type="button" value="获取上一个节点" onclick="change(currentElement.previousElementSibling)"/><br />
		<input type="button" value="获取下一个节点" onclick="change(currentElement.nextElementSibling)"/><br />
		<input type="button" value="获取下下一个节点" onclick="change(currentElement.nextElementSibling.nextElementSibling)"/><br />
		<input type="button" value="获取最后一个节点" onclick="change(currentElement.parentElement.lastElementChild)"/><br />
		<script type="text/javascript">
			var currentElement = document.getElementById("ajax");
			var change = function (target) {
				alert(target.innerHTML);
			};
		</script>

3.访问表单控件

这里仅仅根据一个例子来实现访问：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>访问表单控件</title>
	</head>
	<body>
		<form id="form" action="#" method="post">
			<input type="text" name="username" /><br />
			<input type="password" name="password" /><br />
			<select name="color">
				<option value="red">红色</option>
				<option value="blue">蓝色</option>
				<option value="green">绿色</option>
			</select>
			<hr />
			<input type="button" value="第一个" onclick="alert(document.getElementById('form').elements[0].name)" /><br />
			<input type="button" value="第二个" onclick="alert(document.getElementById('form').elements['password'].name)" /><br />
			<input type="button" value="第三个" onclick="alert(document.getElementById('form').color.lastElementChild.innerHTML)" /><br />
		</form>
	</body>
</html>

4.访问列表框、下拉菜单的选项

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>访问列表框和下拉菜单</title>
	</head>
	<body>
		<select id="mySelect" name="mySelect" size="6">
			<option id="java">疯狂java讲义</option>
			<option id="ssh">轻量级Java EE企业应用实战</option>
			<option id="ajax" selected="selected">疯狂Ajax讲义</option>
			<option id="xml">疯狂XML讲义</option>
			<option id="ejb">经典Java EE企业应用实战</option>
			<option id="andriod">疯狂Andriod讲义<option>
		</select><br />
		<hr />
		<input type="button" value="第一个" onclick="alert(document.getElementById('mySelect').options[0].innerHTML)" /><br />
		<input type="button" value="第二个" onclick="alert(document.getElementById('mySelect').firstElementChild.nextElementSibling.innerHTML)" /><br />
		<input type="button" value="第三个" onclick="alert(document.getElementById('ajax').index)" /><br />
	</body>
</html>

5.访问表格子元素

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>访问表格对象</title>
	</head>
	<body>
		<table id="table" border="1px">
			<caption>疯狂讲义体系</caption>
			<tr id="tr1">
				<td>疯狂Java讲义</td>
				<td>轻量级JavaEE企业应用实战</td>
			</tr>
			<tr id="tr2">
				<td>疯狂Ajax讲义</td>
				<td>经典JavaEE企业应用实战</td>
			</tr>
			<tr id="tr3">
				<td>疯狂XML讲义</td>
				<td>疯狂Android讲义</td>
			</tr>
		</table>
		<hr />
		<input type="button" value="第一个" onclick="alert(document.getElementById('table').caption.innerHTML)"/><br />
		<input type="button" value="第二个" onclick="alert(document.getElementById('table').rows[0].cells[0].innerHTML)"/><br />
		<input type="button" value="第三个" onclick="alert(document.getElementById('table').rows[2].cells[1].innerHTML)"/><br />
	</body>
</html>

6.修改HTML元素

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>动态修改表格内容</title>
	</head>
	<body>
		改变第<input type="text" id="rowNum" size="2"/>行，
		第<input type="text" id="colNum" size="2"/>列的值为：
		<input type="text" id="content" size="16"/>
		<input type="button" value="确定修改" onclick="change()" />
		<hr />
		<table id="table" border="1px">
			<caption>疯狂讲义体系</caption>
			<tr id="tr1">
				<td>疯狂Java讲义</td>
				<td>轻量级JavaEE企业应用实战</td>
			</tr>
			<tr id="tr2">
				<td>疯狂Ajax讲义</td>
				<td>经典JavaEE企业应用实战</td>
			</tr>
			<tr id="tr3">
				<td>疯狂XML讲义</td>
				<td>疯狂Android讲义</td>
			</tr>
		</table>
		<script type="text/javascript">
			var change = function () {
				var rowText = document.getElementById("rowNum").value;
				var colText = document.getElementById("colNum").value;
				var contentText = document.getElementById("content").value;
				var tableElement = document.getElementById("table");
				if (rowText == "") {
					alert("您要修改的行数为空，请输入行数！");
					return false;
				} else if (colText == "") {
					alert("您要修改的列数为空，请输入列数！");
					return false;
				} else if (contentText == "") {
					alert("您要修改的内容为空，请输入内容！");
					return false;
				}
				if (isNaN(parseInt(rowText))) {
					alert("您输入的行数不是整数，请重新输入！");
					return false;
				} else if (isNaN(parseInt(colText))) {
					alert("您输入的列数不是整数，请重新输入！");
					return false;
				}
				if (parseInt(rowText) > tableElement.rows.length ||
				parseInt(colText) > tableElement.rows.item(0).cells.length) {
					alert("您要修改的单元格不在本表格内，请重新输入!");
					return false;
				}
				// 修改内容
				tableElement.rows.item(parseInt(rowText) - 1).cells.item(parseInt(colText) - 1).innerHTML = contentText;
				alert("恭喜您修改成功！");
			}
		</script>
	</body>
</html>

7.增加HTML元素

1）创建节点

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>创建节点</title>
	</head>
	<body>
		<script type="text/javascript">
			var div = document.createElement("div");
			alert(div);
		</script>
	</body>
</html>

2）复制节点

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>复制节点</title>
	</head>
	<body>
		<ul id="d">
			<li>疯狂Java讲义</li>
		</ul>
		<script type="text/javascript">
			// 获取要复制的元素对象
			var ul = document.getElementById("d");
			// 复制它的第一个子元素对象,false表示不复制当前节点的后代节点
			var java = ul.firstElementChild.cloneNode(false);
			// 修改节点内容，并添加到页面中
			java.innerHTML = "疯狂Ajax讲义";
			ul.appendChild(java);
		</script>
	</body>
</html>

3）为列表框，下拉菜单添加选项

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>为下拉框列表框菜单添加选项</title>
	</head>
	<body id="test">
		<script type="text/javascript">
			// 创建select的对象
			var s = document.createElement("select");
			// 添加第一个选项
			s.innerHTML = "<option>新增选项1</option>";
			// 循环添加9个选项
			for (var i = 0; i < 9; i++) {
				var op = document.createElement("option");
				op.innerHTML = "新增选项" + (i + 2);
				s.add(op);
			}
			// 把select对象添加到body中
			var bodyElement = document.getElementById("test");
			bodyElement.appendChild(s);
		</script>
	</body>
</html>

4）动态添加表格内容

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>动态添加表格内容</title>
	</head>
	<body id="creatTable">
		<script type="text/javascript">
			var tableElement = document.createElement("table");
			tableElement.border = "1px";
			tableElement.createCaption().innerHTML = "新增表格";
			for (var i = 0; i < 6; i++) {
				var trElement = tableElement.insertRow(i);
				for (var j = 0; j < 6; j++) {
					var tdElement = trElement.insertCell(j);
					tdElement.innerHTML = "新增表格第" + (i + 1) + "行第" + (j + 1) + "列";
				}
			}
			document.getElementById("creatTable").appendChild(tableElement);
		</script>
	</body>
</html>

8.删除HTML元素

1）删除节点

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>删除节点</title>
	</head>
	<body id="test">
		<input id="add" type="button" value="增加" disabled="disabled" onclick="add()" />
		<input id="del" type="button" value="删除" onclick="del()" />
		<hr />
		<div id="testObj">被测试的对象</div>
		<script type="text/javascript">
			// 获取body对象
			var bodyElement = document.getElementById("test");
			// 获取被测试的对象
			var testObjElement = document.getElementById("testObj");
			// 创建add方法
			function add() {
				// 由于网页已经加载完毕，所以一开始是有testObjElement对象的，不管运行什么方法，
				// testObjElement都是存在在内存中的
				bodyElement.appendChild(testObjElement);
				document.getElementById("add").disabled="disabled";
				document.getElementById("del").disabled="";
			}
			function del() {
				// 由于网页已经加载完毕，所以一开始是有testObjElement对象的，不管运行什么方法，
				// testObjElement都是存在在内存中的
				bodyElement.removeChild(testObjElement);
				document.getElementById("add").disabled="";
				document.getElementById("del").disabled="disabled";
			}
		</script>
	</body>
</html>

2）删除列表框、下拉菜单的选项

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<input id="opValue" type="text" />
		<input type="button" value="增加" onclick="add()"/>
		<input type="button" value="删除" onclick="del()"/>
		<hr />
		<select id="show" size="8" style="width: 120px;"></select>
		<script type="text/javascript">
			var add = function () {
				// 以文本框的值来创建option对象
				var op = new Option(document.getElementById("opValue").value);
				// 以select的id作为唯一标识来添加元素
				// 下面的语句可以换成document.getElementById("show").appendChild(op);
				show.options[show.options.length] = op;
			};
			var del = function () {
				// 判断列表框子元素个数
				if (show.options.length == 0) {
					alert("没有选项可以删除了！")
				} else {
					// 删除元素
					// 可以使用document.getElementById("show").remove(0);
					// 可以使用show.options.remove(0);
					// 可以使用show.options[show.options.length - 1] = null;
					show.remove(show.options.length - 1);
				}
			};
		</script>
	</body>
</html>

3）删除表格的行和单元格

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>删除表格的行或者单元格</title>
	</head>
	<body id="body">
		<input type="button" value="删除最后一行" onclick="delLastRow()" />
		<input type="button" value="删除最后一个单元格" onclick="delLastCell()" />
		<hr />
		<table id="table" border="1px solid">
			<tr id="tr1">
				<td>疯狂Java讲义</td>
				<td>轻量级JavaEE企业级应用</td>
			</tr>
			<tr id="tr2">
				<td>疯狂Java讲义</td>
				<td>轻量级JavaEE企业级应用</td>
			</tr>
			<tr id="tr3">
				<td>疯狂Java讲义</td>
				<td>轻量级JavaEE企业级应用</td>
			</tr>
			<tr id="tr4">
				<td>疯狂Java讲义</td>
				<td>轻量级JavaEE企业级应用</td>
			</tr>
		</table>
		<script type="text/javascript">
			// 获取表格的对象
			var tableElement = document.getElementById("table");
			// 定义删除最后一行的方法
			var delLastRow = function () {
				if (tableElement.rows.length > 0) {
					// 删除行
					tableElement.deleteRow(tableElement.rows.length - 1);
				} else {
					alert("已经没有表格的行可以删除了！")
				}
			};
			// 定义删除最后一个单元格的方法
			var delLastCell = function () {
				if (tableElement.rows.length > 0) {
					// 获取最后一行
					var lastRow = tableElement.rows.item(tableElement.rows.length - 1);
					// 删除最后一个单元个
					if (lastRow.cells.length > 0) {
						lastRow.deleteCell(lastRow.cells.length - 1);
					} else {
						delLastRow();
					}
				} else {
					alert("已经没有表格的行可以删除了");
				}
			};
		</script>
	</body>
</html>

四、事件处理机制

1.两种绑定事件的基本方法

1）绑定HTML元素属性

代码案例：表单校验

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>数据校验表单</title>
	</head>
	<body>
		<div>
			<h2>数据校验表单</h2>
			<form method="get" id="register" name="register" action="#" onsubmit="return checkForm()" >
				用户名：<input type="text" name="username" id="username"/><br /><br />
				密&nbsp;码：<input type="password" name="password" id="password"/><br /><br />
				电&nbsp;邮：<input type="text" name="email" id="email"/><br /><br />
				<input type="submit" value="提交" />
			</form>
			<script type="text/javascript">
				// 为字符串增加一个trim()方法
				String.prototype.trim = function () {
					var regex = /\s*/;
					return this.replace(regex, "");
				};
				// 检查用户名
				var checkUserName = function () {
					// 获取用户名对象
					var usernameElement = document.getElementById("username");
					var username = usernameElement.value.trim();
					// 检查是否为空
					if (username == "" || username == null) {
						alert("用户名为空，请输入用户名！");
						return false;
					}
					// 检查是否符合用户名要求
					var usernameRegex = /^[a-zA-Z]+\w*/;
					if (!usernameRegex.test(username)) {
						alert("用户名只能由字母、数字和下划线组成，且只能以字母开头！");
						return false;
					}
				return true;
				};
				// 检查密码
				var checkPassWord = function () {
					// 获取密码对象
					var passwordElement = document.getElementById("password");
					var password = passwordElement.value.trim();
					// 检查是否为空
					if (password == "" || password == null) {
						alert("密码为空，请输入密码！");
						return false;
					}
					return true;
				};
				// 检查邮箱
				var checkEmail = function () {
					// 获取邮箱对象
					var emailElement = document.getElementById("email");
					var email = emailElement.value.trim();
					// 判断邮箱是否为空
					if (email == "" || email == null) {
						alert("邮箱不能为空，请输入邮箱！");
						return false;
					}
					// 检查邮箱是否符合邮箱格式
					var emailRegex = /^\w+@[a-zA-Z0-9]+\.[a-zA-Z]+/;
					if (!emailRegex.test(email)) {
						alert("您输入的邮箱格式不符合要求，请重新输入！");
						return false;
					}
					return true;
				};
				// 组合方法
				var checkForm = function () {
					return checkUserName() && checkPassWord() && checkEmail();
				};
			</script>
		</div>
	</body>
</html>

2）绑定DOM对象属性

代码案例：表单校验

HTML代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>数据校验表单</title>
	</head>
	<body>
		<div>
			<h2>数据校验表单</h2>
			<form method="get" id="register" name="register" action="#" >
				用户名：<input type="text" name="username" id="username"/><br /><br />
				密&nbsp;码：<input type="password" name="password" id="password"/><br /><br />
				电&nbsp;邮：<input type="text" name="email" id="email"/><br /><br />
				<input type="submit" value="提交" />
			</form>
			<script type="text/javascript" src="js/JavaScript52.js" ></script>
		</div>
	</body>
</html>

JavaScript代码：

// 为字符串增加一个trim()方法
String.prototype.trim = function () {
	var regex = /\s*/;
	return this.replace(regex, "");
};
// 检查用户名
var checkUserName = function () {
	// 获取用户名对象
	var usernameElement = document.getElementById("username");
	var username = usernameElement.value.trim();
	// 检查是否为空
	if (username == "" || username == null) {
		alert("用户名为空，请输入用户名！");
		return false;
	}
	// 检查是否符合用户名要求
	var usernameRegex = /^[a-zA-Z]+\w*/;
	if (!usernameRegex.test(username)) {
		alert("用户名只能由字母、数字和下划线组成，且只能以字母开头！");
		return false;
	}
return true;
};
// 检查密码
var checkPassWord = function () {
	// 获取密码对象
	var passwordElement = document.getElementById("password");
	var password = passwordElement.value.trim();
	// 检查是否为空
	if (password == "" || password == null) {
		alert("密码为空，请输入密码！");
		return false;
	}
	return true;
};
// 检查邮箱
var checkEmail = function () {
	// 获取邮箱对象
	var emailElement = document.getElementById("email");
	var email = emailElement.value.trim();
	// 判断邮箱是否为空
	if (email == "" || email == null) {
		alert("邮箱不能为空，请输入邮箱！");
		return false;
	}
	// 检查邮箱是否符合邮箱格式
	var emailRegex = /^\w+@[a-zA-Z0-9]+\.[a-zA-Z]+/;
	if (!emailRegex.test(email)) {
		alert("您输入的邮箱格式不符合要求，请重新输入！");
		return false;
	}
	return true;
};
// 组合方法
var checkForm = function () {
	return checkUserName() && checkPassWord() && checkEmail();
};
// 绑定DOM元素对象，后面的只是函数的引用，因此千万不能加上括号
document.getElementById("register").onsubmit = checkForm;

2.事件处理函数中的this关键字

JavaScript脚本通常处于window对象下运行，如果JavaScript脚本中使用this关键字，通常引用到window对象本身。
如果在HTML元素的onclick属性指定JavaScript脚本，如果在这些脚本使用了this关键字，那么该关键字指向HTML元素本身。

代码案例1：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>函数与this关键字1</title>
	</head>
	<body>
		<input id="bn" type="button" value="在此按钮上使用this关键字" onclick="alert('在HTML的onclick属性上使用this关键字，' +
			'它是指向该标签吗？\n答案是：' + (document.getElementById('bn') == this))"/>
		<script type="text/javascript">
			alert("独立的JavaScript代码的this指向window对象吗？\n答案是：" + (window == this));
		</script>
	</body>
</html>

代码案例2：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>函数与this关键字2</title>
	</head>
	<body>
		<!--这里的this指向按钮1的对象-->
		<input id="btn1" type="button" value="按钮1" onclick="alert(this.value)" />
		<input id="btn2" type="button" value="按钮2" />
		<input id="btn3" type="button" value="按钮3" />
		<script type="text/javascript">
			function test1 () {
				alert(this.value);
			}
			// 将test1函数设置为按钮2的事件处理函数
			// 这个this指向按钮1对象
			document.getElementById("btn2").onclick = test1;
			// 使用JSON格式定义一个p对象
			var p = {
				value : "p对象",
				info : function () {
					alert(this.value);
				}
			};
			// 将p对象的info方法设置为按钮3的事件处理函数
			// 这样的this也是按钮2对象
			document.getElementById("btn3").onclick = p.info;
			// 如果要将this指代p对象，需要将p来调用info()方法
			/*document.getElementById("btn3").onclick = function () {
				p.info();
			};*/
		</script>
	</body>
</html>

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2017/08/19 ，如有侵权请联系 cloudcommunity@tencent.com 删除

编程算法