JavaScript基本入门教程

JavaScript基本入门

一、JavaScript语法详解

1.JavaScript的组成

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

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

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

2.JavaScript的引入方式

1）内部脚本

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

      
      
      
      

       
       
       
       

       
       
       
       

       
       
       
       
	
       
       
       
       
		 charset="utf-8" />
       
       
       
       
		
       
       
       
       
	
       
       
       
       
	
       
       
       
       
		
       
       
       
       
		 href="javascript:alert('手动运行JavaScript！');">手动运行
       
       
       
       
		
       
       
       
       
		 type="text/javascript">
       
       
       
       
			alert("自动运行JavaScript!");
       
       
       
       
		
       
       
       
       
	
       
       
       
       

      
      
      
      

2）导入JavaScript文件

      
      
      
      

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

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

3.数据类型和变量

1）变量的声明

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

      
      
      
      

       
       
       
       

       
       
       
       

       
       
       
       
	
       
       
       
       
		 charset="UTF-8">
       
       
       
       
		
       
       
       
       
	
       
       
       
       
	
       
       
       
       
		 type="text/javascript">
       
       
       
       
			// 隐式声明
       
       
       
       
			a = "我是Lemon";
       
       
       
       
			alert(a);
       
       
       
       
			// 显式声明
       
       
       
       
			var b = "我是Tom";
       
       
       
       
			console.log(b);
       
       
       
       
		
       
       
       
       
	
       
       
       
       

      
      
      
      

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支持类型自动转换，且功能非常强大，看下面的代码案例：

     
     
     
     

      
      
      
      

      
      
      
      

      
      
      
      
	
      
      
      
      
		 charset="UTF-8">
      
      
      
      
		
      
      
      
      
	
      
      
      
      
	
      
      
      
      
		 type="text/javascript">
      
      
      
      
			var a = "3.145";
      
      
      
      
			var b = 2;
      
      
      
      
			alert((a - b) + "\n" + (a + b));
      
      
      
      
		
      
      
      
      
	
      
      
      
      

     
     
     
     

输出的结果是：

     
     
     
     

      
      
      
      
1.145
      
      
      
      
3.1452
     
     
     
     

分析：

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

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

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

代码案例：

     
     
     
     

      
      
      
      

      
      
      
      

      
      
      
      
	
      
      
      
      
		 charset="UTF-8">
      
      
      
      
		
      
      
      
      
	
      
      
      
      
	
      
      
      
      
		 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)));
      
      
      
      
		
      
      
      
      
	
      
      
      
      

     
     
     
     

运行结果：

     
     
     
     

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

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

     
     
     
     

      
      
      
      

      
      
      
      

      
      
      
      
	
      
      
      
      
		 charset="UTF-8">
      
      
      
      
		
      
      
      
      
	
      
      
      
      
	
      
      
      
      
		 type="text/javascript">
      
      
      
      
			var a = "3.145a25";
      
      
      
      
			console.log(parseFloat(a));
      
      
      
      
		
      
      
      
      
	
      
      
      
      

     
     
     
     

运行结果：

     
     
     
     

      
      
      
      
3.145
     
     
     
     

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

7）全局变量和局部变量

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

代码案例一：

     
     
     
     

      
      
      
      

      
      
      
      

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

     
     
     
     

运行结果：

     
     
     
     

      
      
      
      
局部变量
      
      
      
      
全局变量
     
     
     
     

代码案例二：

     
     
     
     

      
      
      
      

      
      
      
      

      
      
      
      
	
      
      
      
      
		 charset="UTF-8">
      
      
      
      
		
      
      
      
      
	
      
      
      
      
	
      
      
      
      
		 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("
" + i + j + k);
      
      
      
      
			}
      
      
      
      
			// 调用函数
      
      
      
      
			test(document);
      
      
      
      
		
      
      
      
      
	
      
      
      
      

     
     
     
     

运行结果：

     
     
     
     

      
      
      
      
01234
      
      
      
      
055
     
     
     
     

代码案例三：

     
     
     
     

      
      
      
      

      
      
      
      

      
      
      
      
	
      
      
      
      
		 charset="UTF-8">
      
      
      
      
		
      
      
      
      
	
      
      
      
      
	
      
      
      
      
		 type="text/javascript">
      
      
      
      
			var scope = "全局变量";
      
      
      
      
			function fun() {
      
      
      
      
				// 全局变量被局部变量覆盖
      
      
      
      
				// 但是此时的scope尚未被赋值，所以输出undefined
      
      
      
      
				document.writeln(scope + "
");
      
      
      
      
				// 定义局部变量，作用范围为整个函数
      
      
      
      
				var scope = "局部变量";
      
      
      
      
				document.writeln(scope + "
");
      
      
      
      
			}
      
      
      
      
			fun();
      
      
      
      
		
      
      
      
      
	
      
      
      
      

     
     
     
     

运行结果：

     
     
     
     

      
      
      
      
undefined
      
      
      
      
局部变量
     
     
     
     

分析：

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

代码案例四：

     
     
     
     

      
      
      
      

      
      
      
      

      
      
      
      
	
      
      
      
      
		 charset="UTF-8">
      
      
      
      
		
      
      
      
      
	
      
      
      
      
	
      
      
      
      
		 type="text/javascript">
      
      
      
      
			var scope = "全局变量";
      
      
      
      
			function fun() {
      
      
      
      
				// 依旧使用的是全局变量
      
      
      
      
				document.writeln(scope + "
");
      
      
      
      
				// 定义局部变量，但实际上是对全局变量的重新赋值
      
      
      
      
				scope = "局部变量";
      
      
      
      
				document.writeln(scope + "
");
      
      
      
      
			}
      
      
      
      
			fun();
      
      
      
      
		
      
      
      
      
	
      
      
      
      

     
     
     
     

运行结果：

     
     
     
     

      
      
      
      
全局变量
      
      
      
      
局部变量
     
     
     
     

代码案例五：

     
     
     
     

      
      
      
      

      
      
      
      

      
      
      
      
	
      
      
      
      
		 charset="UTF-8">
      
      
      
      
		
      
      
      
      
		 type="text/javascript">
      
      
      
      
			var x = 1314;
      
      
      
      
		
      
      
      
      
	
      
      
      
      
	
      
      
      
      
		
      
      
      
      
		 type="button" value="局部变量" onclick="var x = 520; alert(x);" /> />
      
      
      
      
		
      
      
      
      
		 type="button" value="全局变量" onclick="alert(x);" />
      
      
      
      
	
      
      
      
      

     
     
     
     

4.基本数据类型

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

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

5.正则对象

1）正则对象的创建方法

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

注意事项：

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

                                         全部符合为true

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

                                        适用于表单校验

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

                                        全部不符合为false

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

                                        适用于字符串查找、替换

2）test()方法

     
     
     
     

      
      
      
      

      
      
      
      

      
      
      
      
	
      
      
      
      
		 charset="UTF-8">
      
      
      
      
		
      
      
      
      
		 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("[email protected]"));
      
      
      
      
			console.log(regex2.test("223344@163.com"));
      
      
      
      
			console.log(regex3.test("!223344@163.com"));
      
      
      
      
		
      
      
      
      
	
      
      
      
      
	
      
      
      
      
	
      
      
      
      

     
     
     
     

运行结果：

     
     
     
     

      
      
      
      
true
      
      
      
      
true
      
      
      
      
true
     
     
     
     

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

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

     
     
     
     

      
      
      
      

      
      
      
      

      
      
      
      
	
      
      
      
      
		 charset="UTF-8">
      
      
      
      
		
      
      
      
      
	
      
      
      
      
	
      
      
      
      
		 type="text/javascript">
      
      
      
      
			function trim (str) {
      
      
      
      
				// g表示尽可能多的匹配
      
      
      
      
				return str.replace(/(^\s*)|(\s*$)/g, "");
      
      
      
      
			}
      
      
      
      
			console.log(trim("   Hello,JavaScript   "));
      
      
      
      
		
      
      
      
      
	
      
      
      
      

     
     
     
     

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

代码案例：

     
     
     
     

      
      
      
      

      
      
      
      

      
      
      
      
	
      
      
      
      
		 charset="UTF-8">
      
      
      
      
		
      
      
      
      
		 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]);
      
      
      
      
			}
      
      
      
      
		
      
      
      
      
	
      
      
      
      
	
      
      
      
      
	
      
      
      
      

     
     
     
     

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

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

代码案例：

     
     
     
     

      
      
      
      

      
      
      
      

      
      
      
      
	
      
      
      
      
		 charset="UTF-8">
      
      
      
      
		
      
      
      
      
	
      
      
      
      
	
      
      
      
      
		 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());
      
      
      
      
		
      
      
      
      
	
      
      
      
      

     
     
     
     

运行结果：

     
     
     
     

      
      
      
      
数组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字符串，并把它当做脚本代码来执行。

     
     
     
     

      
      
      
      

      
      
      
      

      
      
      
      
	
      
      
      
      
		 charset="UTF-8">
      
      
      
      
		
      
      
      
      
	
      
      
      
      
	
      
      
      
      
		 type="text/javascript">
      
      
      
      
			var str = window.prompt("请输入一段JavaScript可执行的算术代码：");
      
      
      
      
			window.alert("您输入的代码执行结果是：" + eval(str));
      
      
      
      
		
      
      
      
      
	
      
      
      
      

     
     
     
     

B.URI/URL编码和解码

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

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

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

代码案例：

     
     
     
     

      
      
      
      

      
      
      
      

      
      
      
      
	
      
      
      
      
		 charset="UTF-8">
      
      
      
      
		
      
      
      
      
	
      
      
      
      
	
      
      
      
      
		 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));
      
      
      
      
		
      
      
      
      
	
      
      
      
      

     
     
     
     

运行结果是：

     
     
     
     

      
      
      
      
解码的结果是：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；
  

代码案例：

      
      
      
      

       
       
       
       

       
       
       
       

       
       
       
       
	
       
       
       
       
		 charset="UTF-8">
       
       
       
       
		
       
       
       
       
	
       
       
       
       
	
       
       
       
       
		 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);
       
       
       
       
		
       
       
       
       
	
       
       
       
       

      
      
      
      

函数使用的注意事项：

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

B.定义匿名函数

定义格式：

      
      
      
      

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

说明：

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

代码案例：

      
      
      
      

       
       
       
       

       
       
       
       

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

      
      
      
      

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

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

代码案例如下：

      
      
      
      

       
       
       
       

       
       
       
       

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

      
      
      
      

D.递归函数

代码案例：

      
      
      
      

       
       
       
       

       
       
       
       

       
       
       
       
	
       
       
       
       
		 charset="UTF-8">
       
       
       
       
		
       
       
       
       
	
       
       
       
       
	
       
       
       
       
		 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("您输入的数字有误，请重新输入！");
       
       
       
       
			}
       
       
       
       
		
       
       
       
       
	
       
       
       
       

      
      
      
      

重点说明：

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

3）自定义对象

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

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

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

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

     
     
     
     

      
      
      
      

      
      
      
      

      
      
      
      
	
      
      
      
      
		 charset="UTF-8">
      
      
      
      
		
      
      
      
      
	
      
      
      
      
	
      
      
      
      
		 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);
      
      
      
      
		
      
      
      
      
	
      
      
      
      

     
     
     
     

运行结果：

     
     
     
     

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

B. 使用Object直接创建对象

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

     
     
     
     

      
      
      
      
var myObj = new Object();
     
     
     
     

方法案例：

     
     
     
     

      
      
      
      

      
      
      
      

      
      
      
      
	
      
      
      
      
		 charset="UTF-8">
      
      
      
      
		
      
      
      
      
	
      
      
      
      
	
      
      
      
      
		 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]);
      
      
      
      
			}
      
      
      
      
		
      
      
      
      
	
      
      
      
      

     
     
     
     

运行结果：

     
     
     
     

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

C.使用JSON语法创建对象

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

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

代码案例：

     
     
     
     

      
      
      
      

      
      
      
      

      
      
      
      
	
      
      
      
      
		 charset="UTF-8">
      
      
      
      
		
      
      
      
      
	
      
      
      
      
	
      
      
      
      
		 type="text/javascript">
      
      
      
      
			var person = {
      
      
      
      
				name : "张三",
      
      
      
      
				age : 19,
      
      
      
      
				school : "中国地质大学",
      
      
      
      
				printInfo : function () {
      
      
      
      
					window.alert("姓名：" + this.name + ",年纪：" 
      
      
      
      
					+ this.age + ",毕业院校：" + this.school);
      
      
      
      
				}
      
      
      
      
			};
      
      
      
      
			person.printInfo();
      
      
      
      
		
      
      
      
      
	
      
      
      
      

     
     
     
     

7.函数专项

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

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

     
     
     
     

      
      
      
      

      
      
      
      

      
      
      
      
	
      
      
      
      
		 charset="UTF-8">
      
      
      
      
		
      
      
      
      
	
      
      
      
      
	
      
      
      
      
		 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("张三"));
      
      
      
      
		
      
      
      
      
	
      
      
      
      

     
     
     
     

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

     
     
     
     

      
      
      
      

      
      
      
      

      
      
      
      
	
      
      
      
      
		 charset="UTF-8">
      
      
      
      
		
      
      
      
      
	
      
      
      
      
	
      
      
      
      
		 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();
      
      
      
      
		
      
      
      
      
	
      
      
      
      

     
     
     
     

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

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

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

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

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

     
     
     
     

      
      
      
      

      
      
      
      

      
      
      
      

      
      
      
      
	
      
      
      
      
		 charset="UTF-8">
      
      
      
      
		
      
      
      
      
	
      
      
      
      
	
      
      
      
      
		 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);
      
      
      
      
		
      
      
      
      
	
      
      
      
      

     
     
     
     

分析结果：

• 创建第一个对象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对象的方法。

代码案例：

     
     
     
     

      
      
      
      

      
      
      
      

      
      
      
      
	
      
      
      
      
		 charset="UTF-8">
      
      
      
      
		
      
      
      
      
	
      
      
      
      
	
      
      
      
      
		 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));
      
      
      
      
		
      
      
      
      
	
      
      
      
      

     
     
     
     

2）window对象的常用方法

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

代码案例1：

      
      
      
      

       
       
       
       

       
       
       
       

       
       
       
       
	
       
       
       
       
		 charset="UTF-8">
       
       
       
       
		
       
       
       
       
	
       
       
       
       
	
       
       
       
       
		 type="text/javascript">
       
       
       
       
			var name = prompt("请输入您的姓名：");
       
       
       
       
			var flag = confirm("您的姓名是：" + name + "  吗？");
       
       
       
       
			alert("用户的回答是：" + (flag ? "是" : "不是"));
       
       
       
       
		
       
       
       
       
	
       
       
       
       

      
      
      
      

代码案例2：定时器

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

       
       
       
       

        
        
        
        

        
        
        
        

        
        
        
        
	
        
        
        
        
		 charset="UTF-8">
        
        
        
        
		
        
        
        
        
	
        
        
        
        
	
        
        
        
        
		 id="tm">

        
        
        
        
		 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);
        
        
        
        
		
        
        
        
        
	
        
        
        
        

       
       
       
       

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

      
      
      
      

       
       
       
       

       
       
       
       

       
       
       
       
	
       
       
       
       
		 charset="UTF-8">
       
       
       
       
		
       
       
       
       
	
       
       
       
       
	
       
       
       
       
		 id="tm">

       
       
       
       
		 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();
       
       
       
       
		
       
       
       
       
	
       
       
       
       

      
      
      
      

3.location对象

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

      
      
      
      

       
       
       
       

       
       
       
       

       
       
       
       
	
       
       
       
       
		 charset="UTF-8">
       
       
       
       
		
       
       
       
       
	
       
       
       
       
	
       
       
       
       
		 type="button" value="跳转按钮" onclick="zhiling()"/>
       
       
       
       
		 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);
       
       
       
       
			};
       
       
       
       
		
       
       
       
       
	
       
       
       
       

      
      
      
      

三、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()

     
     
     
     

      
      
      
      

      
      
      
      

      
      
      
      
	
      
      
      
      
		 charset="UTF-8">
      
      
      
      
		
      
      
      
      
	
      
      
      
      
	
      
      
      
      
		 id="text">我是P标签的文本

      
      
      
      
		 id="textarea">我是文本域textarea的文本
      
      
      
      
		 type="button" value="点击访问" onclick="accessById()"/>
      
      
      
      
		 type="text/javascript">
      
      
      
      
			var accessById = function () {
      
      
      
      
				alert(document.getElementById("text").innerHTML + "\n" + 
      
      
      
      
				document.getElementById("textarea").value);
      
      
      
      
			};
      
      
      
      
		
      
      
      
      
	
      
      
      
      

     
     
     
     

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

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

     
     
     
     

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

3.访问表单控件

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

     
     
     
     

      
      
      
      

      
      
      
      

      
      
      
      
	
      
      
      
      
		 charset="UTF-8">
      
      
      
      
		
      
      
      
      
	
      
      
      
      
	
      
      
      
      
		 id="form" action="#" method="post">
      
      
      
      
			 type="text" name="username" /> />
      
      
      
      
			 type="password" name="password" /> />
      
      
      
      
			 name="color">
      
      
      
      
				 value="red">红色
      
      
      
      
				 value="blue">蓝色
      
      
      
      
				 value="green">绿色
      
      
      
      
			
      
      
      
      
			 />
      
      
      
      
			 type="button" value="第一个" onclick="alert(document.getElementById('form').elements[0].name)" /> />
      
      
      
      
			 type="button" value="第二个" onclick="alert(document.getElementById('form').elements['password'].name)" /> />
      
      
      
      
			 type="button" value="第三个" onclick="alert(document.getElementById('form').color.lastElementChild.innerHTML)" /> />
      
      
      
      
		
      
      
      
      
	
      
      
      
      

     
     
     
     

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

     
     
     
     

      
      
      
      

      
      
      
      

      
      
      
      
	
      
      
      
      
		 charset="UTF-8">
      
      
      
      
		
      
      
      
      
	
      
      
      
      
	
      
      
      
      
		 id="mySelect" name="mySelect" size="6">
      
      
      
      
			 id="java">疯狂java讲义
      
      
      
      
			 id="ssh">轻量级Java EE企业应用实战
      
      
      
      
			 id="ajax" selected="selected">疯狂Ajax讲义
      
      
      
      
			 id="xml">疯狂XML讲义
      
      
      
      
			 id="ejb">经典Java EE企业应用实战
      
      
      
      
			 id="andriod">疯狂Andriod讲义
      
      
      
      
		 />
      
      
      
      
		 />
      
      
      
      
		 type="button" value="第一个" onclick="alert(document.getElementById('mySelect').options[0].innerHTML)" /> />
      
      
      
      
		 type="button" value="第二个" onclick="alert(document.getElementById('mySelect').firstElementChild.nextElementSibling.innerHTML)" /> />
      
      
      
      
		 type="button" value="第三个" onclick="alert(document.getElementById('ajax').index)" /> />
      
      
      
      
	
      
      
      
      

     
     
     
     

5.访问表格子元素

     
     
     
     

      
      
      
      

      
      
      
      

      
      
      
      
	
      
      
      
      
		 charset="UTF-8">
      
      
      
      
		
      
      
      
      
	
      
      
      
      
	
      
      
      
      
		 id="table" border="1px">
      
      
      
      
			疯狂讲义体系
      
      
      
      
			 id="tr1">
      
      
      
      
				疯狂Java讲义
      
      
      
      
				轻量级JavaEE企业应用实战
      
      
      
      
			
      
      
      
      
			 id="tr2">
      
      
      
      
				疯狂Ajax讲义
      
      
      
      
				经典JavaEE企业应用实战
      
      
      
      
			
      
      
      
      
			 id="tr3">
      
      
      
      
				疯狂XML讲义
      
      
      
      
				疯狂Android讲义
      
      
      
      
			
      
      
      
      
		
      
      
      
      
		 />
      
      
      
      
		 type="button" value="第一个" onclick="alert(document.getElementById('table').caption.innerHTML)"/> />
      
      
      
      
		 type="button" value="第二个" onclick="alert(document.getElementById('table').rows[0].cells[0].innerHTML)"/> />
      
      
      
      
		 type="button" value="第三个" onclick="alert(document.getElementById('table').rows[2].cells[1].innerHTML)"/> />
      
      
      
      
	
      
      
      
      

     
     
     
     

6.修改HTML元素

     
     
     
     

      
      
      
      

      
      
      
      

      
      
      
      
	
      
      
      
      
		 charset="UTF-8">
      
      
      
      
		
      
      
      
      
	
      
      
      
      
	
      
      
      
      
		改变第 type="text" id="rowNum" size="2"/>行，
      
      
      
      
		第 type="text" id="colNum" size="2"/>列的值为：
      
      
      
      
		 type="text" id="content" size="16"/>
      
      
      
      
		 type="button" value="确定修改" onclick="change()" />
      
      
      
      
		 />
      
      
      
      
		 id="table" border="1px">
      
      
      
      
			疯狂讲义体系
      
      
      
      
			 id="tr1">
      
      
      
      
				疯狂Java讲义
      
      
      
      
				轻量级JavaEE企业应用实战
      
      
      
      
			
      
      
      
      
			 id="tr2">
      
      
      
      
				疯狂Ajax讲义
      
      
      
      
				经典JavaEE企业应用实战
      
      
      
      
			
      
      
      
      
			 id="tr3">
      
      
      
      
				疯狂XML讲义
      
      
      
      
				疯狂Android讲义
      
      
      
      
			
      
      
      
      
		
      
      
      
      
		 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("恭喜您修改成功！");
      
      
      
      
			}
      
      
      
      
		
      
      
      
      
	
      
      
      
      

     
     
     
     

7.增加HTML元素

1）创建节点

     
     
     
     

      
      
      
      

      
      
      
      

      
      
      
      
	
      
      
      
      
		 charset="UTF-8">
      
      
      
      
		
      
      
      
      
	
      
      
      
      
	
      
      
      
      
		 type="text/javascript">
      
      
      
      
			var div = document.createElement("div");
      
      
      
      
			alert(div);
      
      
      
      
		
      
      
      
      
	
      
      
      
      

     
     
     
     

2）复制节点

     
     
     
     

      
      
      
      

      
      
      
      

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

     
     
     
     

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

     
     
     
     

      
      
      
      

      
      
      
      

      
      
      
      
	
      
      
      
      
		 charset="UTF-8">
      
      
      
      
		
      
      
      
      
	
      
      
      
      
	 id="test">
      
      
      
      
		 type="text/javascript">
      
      
      
      
			// 创建select的对象
      
      
      
      
			var s = document.createElement("select");
      
      
      
      
			// 添加第一个选项
      
      
      
      
			s.innerHTML = "新增选项1";
      
      
      
      
			// 循环添加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);
      
      
      
      
		
      
      
      
      
	
      
      
      
      

     
     
     
     

4）动态添加表格内容

     
     
     
     

      
      
      
      

      
      
      
      

      
      
      
      
	
      
      
      
      
		 charset="UTF-8">
      
      
      
      
		
      
      
      
      
	
      
      
      
      
	 id="creatTable">
      
      
      
      
		 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);
      
      
      
      
		
      
      
      
      
	
      
      
      
      

     
     
     
     

8.删除HTML元素

1）删除节点

     
     
     
     

      
      
      
      

      
      
      
      

      
      
      
      
	
      
      
      
      
		 charset="UTF-8">
      
      
      
      
		
      
      
      
      
	
      
      
      
      
	 id="test">
      
      
      
      
		 id="add" type="button" value="增加" disabled="disabled" onclick="add()" />
      
      
      
      
		 id="del" type="button" value="删除" onclick="del()" />
      
      
      
      
		 />
      
      
      
      
		 id="testObj">被测试的对象

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";

}

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

     
     
     
     

      
      
      
      

      
      
      
      

      
      
      
      
	
      
      
      
      
		 charset="UTF-8">
      
      
      
      
		
      
      
      
      
	
      
      
      
      
	
      
      
      
      
		 id="opValue" type="text" />
      
      
      
      
		 type="button" value="增加" onclick="add()"/>
      
      
      
      
		 type="button" value="删除" onclick="del()"/>
      
      
      
      
		 />
      
      
      
      
		 id="show" size="8" style="width: 120px;">
      
      
      
      
		 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);
      
      
      
      
				}
      
      
      
      
			};
      
      
      
      
		
      
      
      
      
	
      
      
      
      

     
     
     
     

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

      
      
      
      

       
       
       
       

       
       
       
       

       
       
       
       
	
       
       
       
       
		 charset="UTF-8">
       
       
       
       
		
       
       
       
       
	
       
       
       
       
	 id="body">
       
       
       
       
		 type="button" value="删除最后一行" onclick="delLastRow()" />
       
       
       
       
		 type="button" value="删除最后一个单元格" onclick="delLastCell()" />
       
       
       
       
		 />
       
       
       
       
		 id="table" border="1px solid">
       
       
       
       
			 id="tr1">
       
       
       
       
				疯狂Java讲义
       
       
       
       
				轻量级JavaEE企业级应用
       
       
       
       
			
       
       
       
       
			 id="tr2">
       
       
       
       
				疯狂Java讲义
       
       
       
       
				轻量级JavaEE企业级应用
       
       
       
       
			
       
       
       
       
			 id="tr3">
       
       
       
       
				疯狂Java讲义
       
       
       
       
				轻量级JavaEE企业级应用
       
       
       
       
			
       
       
       
       
			 id="tr4">
       
       
       
       
				疯狂Java讲义
       
       
       
       
				轻量级JavaEE企业级应用
       
       
       
       
			
       
       
       
       
		
       
       
       
       
		 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("已经没有表格的行可以删除了");
       
       
       
       
				}
       
       
       
       
			};
       
       
       
       
		
       
       
       
       
	
       
       
       
       

      
      
      
      

四、事件处理机制

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

1）绑定HTML元素属性

代码案例：表单校验

     
     
     
     

      
      
      
      

      
      
      
      

      
      
      
      
	
      
      
      
      
		 charset="UTF-8">
      
      
      
      
		
      
      
      
      
	
      
      
      
      
	
      
      
      
      
		

      
      
      
      
			
数据校验表单
      
      
      
      
			 method="get" id="register" name="register" action="#" onsubmit="return checkForm()" >
      
      
      
      
				用户名： type="text" name="username" id="username"/> /> />
      
      
      
      
				密 码： type="password" name="password" id="password"/> /> />
      
      
      
      
				电 邮： type="text" name="email" id="email"/> /> />
      
      
      
      
				 type="submit" value="提交" />
      
      
      
      
			
      
      
      
      
			 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();
      
      
      
      
				};
      
      
      
      
			
      
      
      
      
		

2）绑定DOM对象属性

代码案例：表单校验

HTML代码：

     
     
     
     

      
      
      
      

      
      
      
      

      
      
      
      
	
      
      
      
      
		 charset="UTF-8">
      
      
      
      
		
      
      
      
      
	
      
      
      
      
	
      
      
      
      
		

      
      
      
      
			
数据校验表单
      
      
      
      
			 method="get" id="register" name="register" action="#" >
      
      
      
      
				用户名： type="text" name="username" id="username"/> /> />
      
      
      
      
				密 码： type="password" name="password" id="password"/> /> />
      
      
      
      
				电 邮： type="text" name="email" id="email"/> /> />
      
      
      
      
				 type="submit" value="提交" />
      
      
      
      
			
      
      
      
      
			 type="text/javascript" src="js/JavaScript52.js" >
      
      
      
      
		

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：

     
     
     
     

      
      
      
      

      
      
      
      

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

     
     
     
     

代码案例2：

     
     
     
     

      
      
      
      

      
      
      
      

      
      
      
      
	
      
      
      
      
		 charset="UTF-8">
      
      
      
      
		
      
      
      
      
	
      
      
      
      
	
      
      
      
      
		
      
      
      
      
		 id="btn1" type="button" value="按钮1" onclick="alert(this.value)" />
      
      
      
      
		 id="btn2" type="button" value="按钮2" />
      
      
      
      
		 id="btn3" type="button" value="按钮3" />
      
      
      
      
		 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();
      
      
      
      
			};*/