前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >JavaScript基本入门教程

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代码
代码语言: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文件

代码语言:javascript
复制
<script src="test.js" type="text/javascript"></script>

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

3.数据类型和变量

1)变量的声明

  • 隐式声明
  • 显式声明(推荐使用)
代码语言:javascript
复制
<!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支持类型自动转换,且功能非常强大,看下面的代码案例:

代码语言: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>

输出的结果是:

代码语言:javascript
复制
1.145
3.1452

分析:

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

6)类型转换的常用方法(强制类型转换)

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

代码案例:

代码语言:javascript
复制
<!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>

运行结果:

代码语言:javascript
复制
3.1452-----5-----5.145
string

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

代码语言:javascript
复制
<!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>

运行结果:

代码语言:javascript
复制
3.145

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

7)全局变量和局部变量

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

代码案例一:

代码语言:javascript
复制
<!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>

运行结果:

代码语言:javascript
复制
局部变量
全局变量

代码案例二:

代码语言:javascript
复制
<!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>

运行结果:

代码语言:javascript
复制
01234
055

代码案例三:

代码语言:javascript
复制
<!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>

运行结果:

代码语言:javascript
复制
undefined
局部变量

分析:

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

代码案例四:

代码语言:javascript
复制
<!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>

运行结果:

代码语言:javascript
复制
全局变量
局部变量

代码案例五:

代码语言:javascript
复制
<!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()方法

代码语言:javascript
复制
<!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>

运行结果:

代码语言:javascript
复制
true
true
true

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

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

代码语言:javascript
复制
<!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

代码案例:

代码语言:javascript
复制
<!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()

颠倒数组中元素的顺序

代码案例:

代码语言:javascript
复制
<!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>

运行结果:

代码语言:javascript
复制
数组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字符串,并把它当做脚本代码来执行。

代码语言: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解码成原本的字符串

代码案例:

代码语言:javascript
复制
<!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>

运行结果是:

代码语言:javascript
复制
解码的结果是: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.定义命名函数

定义格式:

代码语言:javascript
复制
function 函数名 (参数列表) {
    // 函数体
}

说明:

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

代码案例:

代码语言:javascript
复制
<!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.定义匿名函数

定义格式:

代码语言:javascript
复制
var fun = function (参数列表) {
    // 函数体
};

说明:

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

代码案例:

代码语言:javascript
复制
<!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类,该类可以用来定义函数,该类的构造器可以接收一系列字符串作为参数,其中最后一个字符串参数是函数的执行体。

代码案例如下:

代码语言:javascript
复制
<!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.递归函数

代码案例:

代码语言:javascript
复制
<!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关键字调用构造器创建对象,这是最接近面向对象语言的创建对象的方式,这种创建方式总是可以返回一个对象。代码案例如下:

代码语言:javascript
复制
<!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>

运行结果:

代码语言:javascript
复制
姓名:undefined,年龄:undefined
姓名:张三,年龄:19
毕业院校:地大
毕业院校:undefined

B.使用Object直接创建对象

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

代码语言:javascript
复制
var myObj = new Object();

方法案例:

代码语言:javascript
复制
<!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>

运行结果:

代码语言:javascript
复制
张三
19
地大
function () {
    window.alert("姓名:" + this.name + ",年龄:" + this.age + ",毕业院校:" + this.school);
}

C.使用JSON语法创建对象

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

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

代码案例:

代码语言:javascript
复制
<!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对象的方法。

代码语言:javascript
复制
<!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对象上。

代码语言:javascript
复制
<!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。

局部变量:在函数内可用,出了函数就不可用。

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

代码语言:javascript
复制
<!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对象的方法。

代码案例:

代码语言:javascript
复制
<!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:

代码语言:javascript
复制
<!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
代码语言:javascript
复制
<!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
代码语言:javascript
复制
<!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属性可以用来跳转页面。

代码语言:javascript
复制
<!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()

代码语言:javascript
复制
<!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)

代码语言:javascript
复制
<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.访问表单控件

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

代码语言:javascript
复制
<!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.访问列表框、下拉菜单的选项

代码语言:javascript
复制
<!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.访问表格子元素

代码语言:javascript
复制
<!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元素

代码语言:javascript
复制
<!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)创建节点

代码语言:javascript
复制
<!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)复制节点

代码语言:javascript
复制
<!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)为列表框,下拉菜单添加选项

代码语言:javascript
复制
<!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)动态添加表格内容

代码语言:javascript
复制
<!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)删除节点

代码语言:javascript
复制
<!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)删除列表框、下拉菜单的选项

代码语言:javascript
复制
<!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)删除表格的行和单元格

代码语言:javascript
复制
<!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元素属性

代码案例:表单校验

代码语言:javascript
复制
<!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代码:

代码语言:javascript
复制
<!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代码:

代码语言: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:

代码语言:javascript
复制
<!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:

代码语言:javascript
复制
<!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 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • JavaScript基本入门
  • 一、JavaScript语法详解
    • 1.JavaScript的组成
      • 2.JavaScript的引入方式
        • 3.数据类型和变量
          • 5.正则对象
            • 7.函数专项
            • 二、BOM对象
              • 1.BOM对象的基本概念
                • 2.window对象
                  • 3.location对象
                  • 三、DOM对象
                    • 1.DOM对象的概述
                      • 2.获取元素对象的四种方法
                        • 3.访问表单控件
                          • 4.访问列表框、下拉菜单的选项
                            • 5.访问表格子元素
                              • 6.修改HTML元素
                                • 7.增加HTML元素
                                  • 8.删除HTML元素
                                  • 四、事件处理机制
                                    • 1.两种绑定事件的基本方法
                                      • 2.事件处理函数中的this关键字
                                      领券
                                      问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档