[JavaScript知识库]JavaScript入门

Author：ZHRR0328

Version：1.0.0

一、引言

1.1 JavaScript简介

• JavaScript一种解释性脚本语言，是一种动态类型、弱类型、基于原型继承的语言，内置支持类型。
• 它的解释器被称为JavaScript引擎，作为浏览器的一部分，广泛用于客户端的脚本语言，用来给HTML网页增加动态功能。

1.2 JavaScript组成部分

• ECMAScript语法

• 文档对象模型（DOM Document Object Model）

• 浏览器对象模型(BOM Browser Object Model)

1.2 JavaScript发展史

• 它是由Netscape公司的Brendan Eich用10天设计出来一门脚本语言，JavaScript是甲骨文公司的注册商标。完整的JavaScript实现包含三个部分：ECMAScript，文档对象模型，浏览器对象模型。
• Netscape在最初将其脚本语言命名为LiveScript，后来Netscape在与Sun合作之后将其改名为JavaScript。JavaScript最初受Java启发而开始设计的，目的之一就是“看上去像Java”，因此语法上有类似之处，一些名称和命名规范也借自Java。但JavaScript的主要设计原则源自Self和Scheme。JavaScript与Java名称上的近似，是当时Netscape为了营销考虑与Sun微系统达成协议的结果。为了取得技术优势，微软推出了JScript来迎战JavaScript的脚本语言。两者都属于ECMAScript的实现，为了互用性，ECAM（欧洲计算机制造商协会）创建了ECMA-262标准（ECMAScript）。ECMAScript最新版本是2015发布的 ECMAScript 6（ES6）。

1.3 JavaScript与Java不同

1.JS是Netscape公司的产品，Java是Sun公司的产品

2.JS是基于对象，Java是面向对象。

3.JS只需解释就可以执行，Java需要先编译成字节码文件，再执行。

4.JS是弱类型，Java是强类型。

强类型语言，当你定义一个变量是某个类型，如果不经过代码显式转换（强制转化）过，它就永远都是这个类型，如果把它当做其他类型来用，就会报错.

弱类型语言，你想把这个变量当做什么类型来用，就当做什么类型来用，语言的解析器会自动（隐式）转换。在JavaScript中，任何变量都用var关键字来声明，var是variable的缩写。

JavaScript的部分关键字：

abstract、else、instanceof、super、boolean、enum、int、switch、break、export、interface、synchronized、byte、extends、let、this、case、false、long、throw、catch、final、native、throws、char、finally、new、transient、class、float、null、true、const、for、package、try、continue、function、private、typeof、debugger、goto、protected、var、default、if、public、void、delete、implements、return、volatile、do、import、short、while、double、in、static、with。

1.4 与HTML和CSS的不同

html: 负责了一个页面的结构.

css: 负责了一个页面的样式。

javascript： 负责与用户进行交互。

二、JavaScript基本语法

2.1 JavaScript引入

 如何编写javascript的代码。
	
    方式1：可以使用<script>标签体内进行编写。
    
    	格式：
        	<script type="text/javascript">
            		js代码;;
            </script>	
    
	方式2：引入外部的javascript文件。
    
    	格式：	
        	<script src="1.js" type="text/javascript"></script>
            
    	注意： 
        	1.<script>是有开始标签与结束标签的，千万不要在一个标签中结束了。
    		2.如果<script>已经用于引入了js文件，那么该<script>标签体就不能再写js代码了，
            

javascript常用的函数：
	
    alert("显示的内容..") ; 弹出框    
    
    document.write("数据") ; //向页面输出数据...
    
  
页面的注释：
	
    html注释： <!-- 注释的内容 -->
    
    css的注释：  /* 注释的内容*/  
    
    javascript注释: //注释的内容  单行注释  		/* 注释的内容*/ 多行注释
    
	 

<script type="text/javascript">
	    //alert("弹框");
		//confirm("确认删除吗?");//点击确定返回true否则返回false
		//prompt("请输入你的名字");//点击确定返回输入的内容否则返回null
       //document.write("今天学习js")
</script>

2.2 声明变量

<script>
/*
javascript的变量声明：
	格式：var 变量名 = 数据;				
					
声明变量要注意的事项：
		1. 在javascript中声明变量是 使用var关键字声明的，javascript中的变量可以存储任意的数据类型数据.
		2. javascript中变量数据类型是根据存储的值决定的，可以随时更改存储数据的类型。
		3. 定义了多个同名的变量是，后定义的同名变量是覆盖前面定义的同名变量。
		4. 声明变量的时候可以省略var关键字，但是不建议省略。

javascript的数据类型：
	typeof 查看变量的数据类型。
	使用格式：typeof 变量名		
				
javascript的数据类型：
	number 小数与整数
	string 字符串 注意： javascript中没有字符的概念，只有字符串，字符串可以写在单引号或双引号中。
	boolean 布尔数据类型，
	undefined  undefined代表该变量没有定义。	
    null 空
*/
    
		document.write("10数据类型是" + (typeof 10) + "<br/>");
		document.write("3.14数据类型是" + (typeof 3.14) + "<br/>");
		document.write("a数据类型是" + (typeof 'abc') + "<br/>");
		document.write("abc数据类型是" + (typeof "abc") + "<br/>");
		document.write("abc数据类型是" + (typeof true) + "<br/>");
		document.write("a变量数据类型是" + (typeof a) + "<br/>");

</script>

2.3 字符串转化成数字

<script type="text/javascript">
/*
	字符串转数字
	parseInt()  可以把一个字符串转换成整数。
	parseFloat() 可以把一个字符串转换成小数。
*/
		
    var a = "12";
	a = 12.64;
	a = "123abc123"; 
	var b = parseInt(a);
	document.write("结果：" + b + "<br/>");
/* parseInt方法如果接收的字符串含有非数字的字符，那么parseInt方法会从字符串的首个字符开始寻找，一直找到非数字字符为止，然后就使用前面的数字字符转换成数字， */
			

	var c = "3.14";
	c = parseFloat(c);
	document.write("结果：" + c + "<br/>");

/*
	javascript提供一个IsNaN的方法让我们判断该字符串是否是 一个数字。
	is not a  number  不是一个数字。
	不是一个数字返回true，是一个数字返回false.
*/

	document.write(isNaN(123) + "<br/>");
	document.write(isNaN("abc123"));
		
</script>

2.4 运算符

<script type="text/javascript">
/* 用法与java大致相同*/

//逻辑运算符:
			
//没有单与的
	document.write((true&&true)+"<br/>");
	document.write((true&&false)+"<br/>");
	document.write((false&&true)+"<br/>");
	document.write((false&&false)+"<br/>");
			
	document.write((true||true)+"<br/>");
	document.write((true||false)+"<br/>");
	document.write((false||true)+"<br/>");
	document.write((false||false)+"<br/>");

/*
三目运算符	
	布尔表达式?值1:值2;
*/

	var age = 10;
	document.write(age >= 18 ? "成年人" : "未成年人");

</script>

2.5 流程控制语句

<script type="text/javascript">
/*
	控制流程语句

		if语句
			
			格式：
				if(判断条件){
					符合条件执行的代码	
				}	
			
	if语句的特殊之处： 在javascript中的if语句条件不单止可以写布尔表达式，还可以写任何的数据。
				
		number  非0为true, 0为false.
		string  内容不为空是true， 内容为空的时候是false。
		undefined：false
		NaN:    false
		Null:   false
				
		var workAge = 0;
		var str ="";
		var b;
		
		if(b){
			document.write("明天过来面试！！");
		}else{
			document.write("不要在投我们公司了，不要你！");	
		}
			

		选择语句： 
			switch语句
			
				switch(变量){
					case 值1:
						break;
					case 值2：
						break;
					case 值3:
						break;
					.....
                    
					default：						
						break;					
				}
				
特殊之处：在javascript中switch后面可以跟其他类型	
*/

		var option = "A";

		switch (option) {
			case "A":
				document.write("java");
				break;
			case "B":
				document.write("html");

			case "C":
				document.write("javascript");
				break;
			case "D":
				document.write("css");
				break;
		}

</script>

2.6 循环语句

<script type="text/javascript">
/*
		循环语句：		
			while
				格式：
					while(判断的条件){
						循环体内容	
					}
					
			var count = 0 ; 
			while(count<5){
				document.write("hello world<br/>");
				count++;
			}

		需求： 计算1~100的总和。

			var num = 1;
			var result = 0;
			while(num<=100){
				result +=num;	
				num++;
			}
			
			document.write("结果："+result);

		do-while循环语句

			do{
				循环语句；
			}while(判断条件);
			
		需求；计算1~100奇数的总和。

			var num = 1;
			var result = 0;
			do{
				if(num%2!=0){
					result +=num;
				}
				num++;
			}while(num<=100);

			document.write("结果："+result);


		for循环语句:
			
			格式：
				for(初始化语句; 判断的条件 ; 循环后的语句){
					循环体语句；	
				}


		需求；计算1~100偶数的总和。
		*/

		var result = 0;
		for (var i = 1; i <= 100; i++) {
			if (i % 2 == 0) {
				result += i;
			}
		}

		document.write("结果：" + result);

</script>

2.7 函数的定义

<script type="text/javascript">
		/*
		函数:


		函数的定义格式：
			
			function 函数名(形参列表){
				函数体 ;	
			}

		javascript的函数要注意的细节：
			1. 在 javascript中函数 定义形参时是不能使用var关键字声明变量 的。
			2. 在javascript中 的函数是没有 返回值类型 的，如果函数需要返回数据给调用者，直接返回即可，如果不需要返回则不返回。
			3. 在 javascript中是没有函数 重载 的概念 的，后定义的同名函数会直接覆盖前面定义同名函数。
			

		需求：定义一个函数做两个参数的加法功能。
		*/
		function add(a, b) {
			var sum = a + b;
			document.write("两个参数的总和：" + sum);
			//return sum;
		}

		//调用函数
		add(11, 21, 13, 14);
	
</script>

2.8 String对象

<script type="text/javascript">
		/*
			var str1 = new String("hello");
			var str2 = new String("hello");
			document.write("两个字符串的对象一样吗？"+(str1.toString()==str2.toString()));

		创建一个字符串的方式：
		方式1：
			new String("字符串的内容");
			
		方式2：
			var str = "字符串的内容";

		字符串常用的方法：
			anchor（）   生产锚点 
			charAt()     返回指定索引位置处的字符。
			fontcolor()  把带有 COLOR 属性的一个 HTML <FONT> 标记放置在 String 对象中的文本两端		
			indexOf()    返回 String 对象内第一次出现子字符串的字符位置
			italics()    把 HTML <I> 标记放置在 String 对象中的文本两端。 
			link()         把一个有 HREF 属性的 HTML 锚点放置在 String 对象中的文本两端。
			replace()      返回根据正则表达式进行文字替换后的字符串的复制
			split()        切割   
			substr(a,b)       截取子串，第一个参数表示下标，第二个参数表示长度
			toUpperCase()  转大写
			toLowerCase    转小写
		*/
		document.write("第五章".anchor("five") + "<br/>"); //给该字符串添加一个a标签，并且添加name属性，属性值为five
		document.write("abc".charAt(1) + "<br/>");
	//chatCodeAt返回的是索引值对应的字符的码值。 
		document.write("第六章".fontcolor("red") + "<br/>"); //fontcolor() 给字符串添加font标签，然后设置color的属性值。
		document.write("abchellohehehello".indexOf("hello") + "<br/>"); //返回指定字符串第一次出现的索引值。
		document.write("第五章".italics() + "<br/>"); //给文本添加一个i标签，把文本内容设置成斜体。
		document.write("百度".link("http://www.baidu.com") + "<br/>"); // 给文本添加一个a标签，
		document.write("明天讲html".replace("html", "DOM编程") + "<br/>"); // 给文本添加一个a标签，
	  //第一个参数表示下标，第二个参数表示长度
		document.write("abcdefg".substr(1,3));
		//第一个参数表示开始下标，第二个参数表示结束下标（包前不包后）
		document.write("abcdefg".substring(1,3));

		var str = "我们-大家-好";
		var arr = str.split("-");
		for (var index = 0; index < arr.length; index++) {
			document.write(arr[index] + ",");
		}
		document.write("<br/>");
		document.write("abc".toUpperCase() + "<br/>"); //转大写
		document.write("ABC".toLowerCase() + "<br/>"); //转小写
	
</script>

2.9 Date对象

<script type="text/javascript">
		/*
		日期对象（Date）
		*/
		var date = new Date(); //获取到当前的系统时间
		document.write("年：" + date.getFullYear() + "<br/>");
		document.write("月：" + (date.getMonth() + 1) + "<br/>");
		document.write("日：" + date.getDate() + "<br/>");

		document.write("时：" + date.getHours() + "<br/>");
		document.write("分：" + date.getMinutes() + "<br/>");
		document.write("秒：" + date.getSeconds() + "<br/>");

		//xxxx年yy月dd日  hh:mm:ss

		//document.write("当前时间是："+date.toLocaleString());
		document.write("当前时间是：" + date.getFullYear() + "年" + (date.getMonth() + 1) + "月" + date.getDate() + "日 " +
			date.getHours() + ":" + date.getMinutes() + ":" + date.getSeconds());
	
</script>

2.10 Math对象

<script type="text/javascript">
			/*
			Math对象常用的方法：
			 ceil 		向上取整
			 floor（）   向下取整
			 random()  随机数方法 //  产生的伪随机数介于 0 和 1 之间（含 0，不含 1），
			 round     四舍五入
			*/
			document.write("向上取整：" + Math.ceil(3.14) + "<br/>");
			document.write("向下取整：" + Math.floor(3.14) + "<br/>");
			document.write("随机数：" + Math.random() + "<br/>");
			document.write("四舍五入：" + Math.round(3.75) + "<br/>");
		
</script>

2.11 数组对象

<script type="text/javascript">
			/*
			Array数组对象:
				创建数组
				方式1：
					var 变量名 = new Array();  创建一个长度为0的数组。
				
				方式2：
					var 变量名= new Array(长度) 创建一个指定长度的数组对象。
					
				方式3：
			 		var 变量名 = new Array("元素1","元素2"...);  给数组指定元素创建数组 的对象。
					
				方式4： 
					var 变量名 = ["元素1","元素2"...];					

			数组要注意的细节：
				1.  在javascript中数组的长度是可以发生变化的。						
			*/

			var arr = new Array(3); //创建了一个长度为3的数组对象。
			arr[100] = 10;
			document.write("arr长度：" + arr.length + "<br/>");

			var arr2 = new Array("张三", "李四", "王五");
			arr2 = ["张三", "李四", "王五"，"赵六"];
			document.write("arr2长度：" + arr2.length + "<br/>");
		
</script>

2.12 数组常用的方法

<script type="text/javascript">
    
	var arr1 = ["张三", "李四", "王五"];

	//pop ：移除数组中的最后一个元素并返回该元素。
	document.write("删除最后的一个元素并返回："+arr1.pop()+"<br/>");
	document.write("<br />");
	
	arr1.push("赵六"); // 将新元素添加到一个数组中，并返回数组的新长度值。
	arr1.reverse(); //翻转数组的元素
	
	document.write("删除第一个元素并返回："+arr1.shift()+"<br/>"); //移除数组中第一个元素，并且返回。

</script>

2.13 自定义对象

<script type="text/javascript">
			/*
			自定义对象:
				
			在javascript没有类的概念，只要有函数即可创建对象。
				
				自定义对象的方式1： 使用无参的函数创建对象。
				
				例子：
				
					function Person(){}
					var p = new Person(); //创建了一个Person对象了
					p.id = 110;
					p.name = "张三";
				
				方式2：使用带参的函数创建对象。
					
					function Person(id,name){
						this.id = id;
						this.name = name;	
						this.say = function(){
							alert(name+"你好");	
						}
					}
				
				var p = new Person(110,"张三");	//创建对象
				
				方式3： 使用Object函数创建对象
					
					var p = new Object();
					p.id = 110;
					p.name = "张三";
				
				方式4：使用字面量的方式创建.
					
					var p = {
						id:110,
						name:"张三",
						say:function(){
							alert(this.name+"你好");	
					}	
				}		
					
			*/
			var p = {
				id: 110,
				name: "张三",
				say: function() {
					alert(this.name + "你好");
				}
			}

			document.write("编号：" + p.id + " 姓名：" + p.name);
			p.say();
		
</script>

2.14.js中 !=，== ，!==，===的用法和区别（面试题）

<script type="text/javascript">	    
		var num = 1;
		var str = '1';
		var test = 1;
		
		document.write(test == num); //true　相同类型　相同值
		document.write(`在这里插入代码片`test === num);//true　相同类型　相同值
		document.write(test !== num);//false test与num类型相同，其值也相同,　非运算肯定是false
		 
		 
		document.write(num == str);  //true 　把str转换为数字，检查其是否相等。
		document.write(num != str);  //false  == 的 非运算
		document.write(num === str); //false  类型不同，直接返回false
		document.write(num !== str); //true   num 与 str类型不同 意味着其两者不等　非运算自然是true
		
		//== 和 != 比较若类型不同，先偿试转换类型，再作值比较，最后返回值比较结果 。
		//而=== 和 !== 只有在相同类型下,才会比较其值。

</script>

三、BOM编程

全称 Browser Object Model，浏览器对象模型。

? JavaScript是由浏览器中内置的javascript脚本解释器程序来执行javascript脚本语言的。

? 为了便于对浏览器的操作，javascript封装了对浏览器的各个对象使得开发者可以方便的操作浏览器。

Window 对象是 JavaScript 层级中的顶层对象。

? Window 对象代表一个浏览器窗口或一个框架。

? Window 对象会在 或 每次出现时被自动创建。

浏览器对象模型中把浏览器的各个部分都是用了一个对象进行描述，如果我们要操作浏览器的一些属性，我就可以通过浏览器对象模型 的对象进行操作。

window 代表了一个新开的窗口

? location 代表了地址栏对象。

? screen 代表了整个屏幕的对象

3.1 window 对象

window对象常用的方法：

? open() 打开一个新的窗口。

? resizeTo() 将窗口的大小更改为指定的宽度和高度值。

? moveTo() 将窗口左上角的屏幕位置移动到指定的 x 和 y 位置。

? moveBy() 相对于原来的窗口移动指定的x、y值。

? setInterval() 每经过指定毫秒值后就会执行指定的代码。

? clearInterval() 根据一个任务的ID取消的定时任务。

? setTimeout() 经过指定毫秒值后执行指定 的代码一次。

注意： 使用window对象的任何属性与方法都可以省略window对象不写的。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		
		<input type="button" value="open" onclick="Testopen()" />
		<input type="button" value="resizeTo" onclick="TestresizeTo()" />
		
		<input type="button" value="moveTo" onclick="TestmoveTo()" />
		<input type="button" value="moveBy" onclick="TestmoveBy()" />
		
		<input type="button" value="clearInterval" onclick="TestclearInterval()" />
		
	</body>
	
	<script>
			function Testopen(){
				window.open("ad.html","_blank","location=no,toolbar=no");
			}
			
			function TestresizeTo(){
				window.resizeTo("400","400");
			}
			
			function TestmoveTo(){
				window.moveTo("500","200");
			}
			
			function TestmoveBy(){
				for(var i=0;i<100;i++){
					window.moveBy(50,0);//右移
					window.moveBy(0,50);//下移
					window.moveBy(-50,0);//左移
					window.moveBy(0,-50);//上移
				}
			}
			
			//var id = window.setInterval("Testopen()",3000);
			
			function TestclearInterval(){
				window.clearInterval(id);
			}
			
			//window.setTimeout("Testopen()",1000);
			
	</script>
</html>

ad.html 如下（需要先引入对应的广告图片）：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<img src="img/ad.png" /><font color="blue" size="7">广告来了....</font>
	</body>
	
</html>

3.2 常用的事件

鼠标点击相关：

? onclick 在用户用鼠标左键单击对象时触发。

? ondblclick 当用户双击对象时触发。

? onmousedown 当用户用任何鼠标按钮单击对象时触发。

? onmouseup 当用户在鼠标位于对象之上时释放鼠标按钮时触发。

鼠标移动相关：

? onmouseout 当用户将鼠标指针移出对象边界时触发。

? onmousemove 当用户将鼠标划过对象时触发。

焦点相关的：

? onblur 在对象失去输入焦点时触发。

? onfocus 当对象获得焦点时触发。

其他：

? onchange 当对象或选中区的内容改变时触发。

? onload 在浏览器完成对象的装载后立即触发。

? onsubmit 当表单将要被提交时触发。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body <!--onload="showPage()"-->>
	
		<input type="button" value="单击" onclick="Testonclick()" />
		
		<input type="button" value="双击" ondblclick="Testondblclick()" />
		
		<input type="button" value="按下鼠标" onmousedown="Testonmousedown()" />
		
		<input type="button" value="释放鼠标" onmouseup="Testonmouseup()" />
		
		<input type="button" value="显示时间" onmousemove="Testonmousemove()" onmouseout="Testonmouseout()" />
		<span id="time"></span>
		
		<hr>
		
		用户名:<input type="text" id="username" name="username" onfocus="Testonfocus()" onblur="Testonblur()" />
		<span id="user"></span>
		密码:<input type="password" name="password"  />
		
		<select onchange="Testonchange()">
			<option>上海</option>
			<option>北京</option>
			<option>深圳</option>
		</select>
		
		<form action="ad.html" onsubmit="Testonsubmit()">
			<input type="submit" />
		</form>
	
	</body>
	
	<script>
	
		function Testonsubmit(){
			alert("表单将要被提交..")
		}
	
		function Testonchange(){
			alert("城市变了..")
		}
	
		function Testonblur(){
			var usernameNode = document.getElementById("username");
			var username = usernameNode.value;
			if(username.length<=6){
				document.getElementById("user").innerHTML  = "用户名长度不足六位".fontcolor("red");
			}
		}
	
		function Testonfocus(){
			document.getElementById("user").innerHTML = "用户名长度必须大于六位".fontcolor("green");
		}
		
		
		function showPage(){
			document.write("page");
		}
		
		function Testonclick(){
			alert("单击");
		}
		
		function Testondblclick(){
			alert("双击");
		}
		
		function Testonmousedown(){
			alert("按下鼠标");
		}
		
		function Testonmouseup(){
			alert("释放鼠标");
		}
		
		function Testonmousemove(){
			document.getElementById("time").innerHTML = new Date().toLocaleString();
		}
		
		function Testonmouseout(){
			document.getElementById("time").innerHTML = "";
		}
	
	</script>
</html>

3.3 location对象

Location 对象是由 JavaScript runtime engine 自动创建的，包含有关当前 URL 的信息。

location中的重要方法：

? href属性 设置或获取整个 URL 为字符串。

? reload() 重新装入当前页面

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
	
		<input type="button" value="新浪网" onclick="writeSina()" />
		
		<input type="button" value="刷新" onclick="refresh()" />
	</body>
	
	<script>
		
		document.writeln(location.href+"<br>");
		document.writeln(location.host+"<br>");
		document.writeln(location.hostname+"<br>");
		document.writeln(location.port+"<br>");
		document.writeln(location.protocol+"<br>");
		
		
		function writeSina(){
			location.href = "http://www.sina.com.cn";
		}
		
		function refresh(){
			location.reload();
		}
		
	</script>
</html>

3.4 screen 对象

Screen 对象是由 JavaScript runtime engine 自动创建的，包含有关客户机显示屏幕的信息。

Screen(屏幕)对象

? availHeight 获取系统屏幕的工作区域高度，排除 Windows 任务栏。

? availWidth 获取系统屏幕的工作区域宽度，排除 Windows 任务栏。

? height 获取屏幕的垂直分辨率。

? width 获取屏幕的水平分辨率。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
	</body>
	
	<script type="text/javascript">

			document.write("获取系统屏幕的工作区域高度：" + screen.availHeight + "<br/>");
			document.write("获取系统屏幕的工作区域宽度：" + screen.availWidth + "<br/>");
			document.write("获取屏幕的垂直分辨率：" + screen.height + "<br/>");
			document.write("获取屏幕的水平分辨率：" + screen.width + "<br/>");
			
	</script>
</html>

3.5 随机点餐练习

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" lang="en">

	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
		<title></title>
	</head>

	<body onload="eat()">
		<center>
			<span id="food"></span>
			<hr />
			
			<input type="button" style="font-size: 50px;" value="暂停" onclick="stop()"/>
			
			<input type="button" style="font-size: 50px;" value="继续" onclick="star()"/>
			
		</center>
	</body>
	
	<script type="text/javascript">
			function eat() {
				var arr = ["盖浇饭", "油泼面", "米皮","兰州拉面"];
				//随机获取下标
				var index = Math.floor(Math.random() * arr.length);
				//获取数组中具体的数据
				var code = arr[index];
				
				var spanNode = document.getElementById("food");
				spanNode.innerHTML = code;
				//操作css样式
				spanNode.style.fontSize = "124px";
				spanNode.style.color = "red";
				spanNode.style.backgroundColor = "yellow";
			}
			
			var id = setInterval("eat()",100);
			
			function stop(){
				clearInterval(id);
			}
			
			function star(){
				location.reload();
			}
			
		</script>

</html>

四、DOM编程

全称Document Object Model，即文档对象模型。

DOM描绘了一个层次化的树，允许开发人员添加、删除、修改页面的某一部分。

浏览器在解析HTML页面标记的时候，其实不是按照一行一行读取并解析的，而是将HTML页面中的每一个标记按照顺序在内存中组建一颗DOM树，组建好之后，按照树的结构将页面显示在浏览器的窗口中。

节点层次

HTML网页是可以看做是一个树状的结构，如下：

|-- html

? |-- head

? | |-- title

? | |-- meta

? | …

? |-- body

? | |-- div

? | |-- form

? | | |-- input

? | | |-- textarea

… … …

这是一颗树，是由多个节点（Node）组成的，节点的类型有很多种。

节点最多有一个父节点，可以有多个子节点。

HTML DOM 定义了访问和操作HTML文档的标准方法。

? document

? 代表当前页面的整个文档树。

? 访问属性

? all

? images

? links

4.1 document入门

该对象代表整个文档页面

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<img src="" alt="这是图片" />
		<img src="" alt="这是图片" />
		<img src="" alt="这是图片" />
		
		<input type="button" value="设置图片" onclick="setImg()" />
		
		<a href="#">百度1</a>
		<a href="#">百度2</a>
		<a href="#">百度3</a>
		
		<input type="button" value="设置a标签" onclick="setA()" />
	</body>
	
	<script>
		/*
		DOM(Document Object Model) 文档对象模型
				
		一个html页面被浏览器加载的时候，浏览器就会对整个html页面上的所有标签都会创建一个对应的
		对象进行描述，我在浏览器上看到的信息只不过就是这些html对象的属性信息而已。我们只要能找到
		应的对象操作对象的属性，则可以改变浏览器当前显示的内容。  	
		*/
		
		//获取当前页面所有标签对象
		var allNodes = document.all;
		
		for(var i= 0;i<allNodes.length;i++){
			//document.write(allNodes[i]+"---");
			//nodeName：节点名称
			document.write(allNodes[i].nodeName+"---");
		}
		
		function setImg(){
			var allImgNodes = document.images;
			
			for(var i= 0;i<allImgNodes.length;i++){
				allImgNodes[i].src="img/2.jpg";
				allImgNodes[i].width = 200;
				allImgNodes[i].height = 200;
			}
		}
		
		function setA(){
			var aNodes = document.links;
			
			for(var i= 0;i<aNodes.length;i++){
				aNodes[i].href="http://www.baidu.com";
			}
		}
		
	</script>
</html>

4.2 根据html标签的属性找节点

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
	
		用户名：<input type="text" id="username" />
		<input type="button" value="设置用户名" onclick="setUserName()" />
		<hr>
		
		<img src="" alt="这是图片1" />
		<img src="" alt="这是图片2" class="imgs" />
		<img src="" alt="这是图片3" class="imgs" />
		<input type="button" value="设置图片" onclick="setImgs()" />
		<hr>
		
		<div>div1</div>
		<div>div2</div>
		<div>div3</div>
		<input type="button" value="设置div" onclick="setDivs()" />
		<hr>
		
		<span name="span">span1</span>
		<span name="span">span2</span>
		<span name="span">span3</span>
		<input type="button" value="设置span" onclick="setSpans()" />
		<hr>
	
	</body>
	
	<script>
		/*
		通过html元素的标签属性找节点。
			document.getElementById("html元素的id属性值") 
			document.getElementsByTagName("标签名") 
			document.getElementsByName("html元素的name属性值")
			document.getElementsByClassName("html元素的class属性值")			
		*/
	
		function setUserName(){
			//通过id属性获取标签对象
			var usernameNode = document.getElementById("username");
			usernameNode.value="jack";
		}
		
		function setImgs(){
			//通过class属性获取标签对象（返回的是一个数组）
			var imgNodes= document.getElementsByClassName("imgs");
			
			for(var i= 0;i<imgNodes.length;i++){
				imgNodes[i].src="img/2.jpg";
				imgNodes[i].width = 200;
				imgNodes[i].height = 200;
			}
		}
		
		function setDivs(){
			//通过标签名获取标签对象（返回的是一个数组）
			var divNodes= document.getElementsByTagName("div");
			
			for(var i= 0;i<divNodes.length;i++){
				divNodes[i].innerHTML = "div标签".fontcolor("red");
			}
		}
		
		function setSpans(){
			//通过name属性获取标签对象（返回的是一个数组）
			var spanNodes= document.getElementsByName("span");
			
			for(var i= 0;i<spanNodes.length;i++){
				spanNodes[i].innerHTML = "span标签".fontcolor("red");
			}
		}
		
		
	</script>
</html>

4.3 根据属性找标签练习（全选or反选）

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" lang="en">

	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
		<title></title>
		<script type="text/javascript">
			function checkAll() {
				//找到所有的的选项
				var items = document.getElementsByName("item");
				//找到全选按钮的对象
				var allNode = document.getElementsByName("all")[0];
				for (var i = 0; i < items.length; i++) {
					items[i].checked = allNode.checked;
				}
			}

			function getSum() {
				var items = document.getElementsByName("item");
				var sum = 0;
				for (var i = 0; i < items.length; i++) {
					if (items[i].checked) {
						sum += parseInt(items[i].value);
					}
				}

				var spanNode = document.getElementById("sumid");
				spanNode.innerHTML = ("&nbsp;&nbsp;&nbsp;&yen;" + sum).fontcolor("green");
			}
		</script>
	</head>

	<body>
		<div>商品列表</div>
		<input type="checkbox" name="item" value="3000" />笔记本
电脑3000元<br />
		<input type="checkbox" name="item" value="3000" />笔记本电脑3000元<br />
		<input type="checkbox" name="item" value="3000" />笔记本
电脑3000元<br />
		<input type="checkbox" name="item" value="3000" />笔记本电脑3000元<br />
		<input type="checkbox" name="item" value="3000" />笔记本电脑3000元<br />
		<input type="checkbox" name="item" value="3000" />笔记本电脑3000元<br />
		<input type="checkbox" name="all" onclick="checkAll()" />全/不选<br />
		<input type="button" value="总金额：" onclick="getSum()" />
		<span id="sumid"></span>
	</body>

</html>

4.5 通过节点关系找标签

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" lang="en">

	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
		<title></title>
	</head>

	<body>
		<input type="text" id="userName" />
	</body>

	<script type="text/javascript">
		/*
			通过关系(父子关系、兄弟关系)找标签。
				parentNode	获取当前元素的父节点。
				childNodes	获取当前元素的所有下一级子元素。
				firstChild	获取当前节点的第一个子节点。
				lastChild  	获取当前节点的最后一个子节点。
		------------------------------------------------------------	
				nextSibling		获取当前节点的下一个节点。（兄节点）
				previousSibling	获取当前节点的上一个节点。（弟节点）
				
		我们可以通过标签的类型进行判断筛选：
			
			文本节点的类型： 3
			注释的节点类型： 8
			标签节点的类型： 1
		*/

		var bodyNode = document.getElementsByTagName("body")[0];
		//查看父节点
		var parentNode = bodyNode.parentNode;
		document.write("父节点的名称：" + parentNode.nodeName);
		document.write("<br />");

		//找子节点:childNodes 获取所有的子节点，返回的是一个数 组。 注意： 获取子节点的时 候是包括了空文本或者是注释。
		var children = bodyNode.childNodes;
		//document.write(children.length);
		for (var i = 0; i < children.length; i++) {
			//if(children[i].nodeType==1){
			document.write("节点的名字：" + children[i].nodeName + " 对象的类型:" + children[i].nodeType + "---");
			//}
		}
		document.write("<br />");
		document.write("第一个子节点：" + bodyNode.firstChild.nodeName);
		document.write("最后一个子节点：" + bodyNode.lastChild.nodeName);
		document.write("<br />");

		//找兄弟节点
		var inputNode = document.getElementById("userName");
		document.write("下个兄弟节点：" + inputNode.nextSibling.nodeName);
		document.write("上一个兄弟节点：" + inputNode.previousSibling.nodeName);
	</script>

4.6 创建节点，插入节点

每个节点都包含的信息的，这些属性是：

? nodeType 节点类型

? nodeName 节点名称

? nodeValue节点值

?

? 元素类型 节点类型

? 元素 1 就是标签元素，例

…

? 文本 3 标签元素中的文本

? 注释 8 表示为注释

? nodeName

? nodeName 属性含有某个节点的名称。

? --------------------------------

? 元素节点的 nodeName 是标签名称

? 属性节点的 nodeName 是属性名称

? 文本节点的 nodeName 永远是 #text

? 文档节点的 nodeName 永远是 #document

? nodeValue

? 对于文本节点，nodeValue 属性是所包含的文本。

? 对于属性节点，nodeValue 属性是属性值。

? 对于注释节点，nodeValue 属性注释内容。

? nodeValue 属性对于文档节点和元素节点是不可用的。

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" lang="en">

	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
		<title></title>
		<script type="text/javascript">
			/*
			 创建节点、设置节点的属性。
			 
				document.createElement("标签名")		创建新元素节点
				elt.setAttribute("属性名", "属性值")	设置属性
				elt.appendChild(e)		添加元素到elt中最后的位置
			*/

			var num = 1;

			function add() {
				var inputNode = document.createElement("input"); //创建一个指定标签名字的节点。

				//setAttribute:设置节点的属性
				inputNode.setAttribute("type", "button");
				inputNode.setAttribute("value", "按钮" + num);
				num++;

				var bodyNode = document.getElementsByTagName("body")[0];
				bodyNode.appendChild(inputNode); //appendChild 添加子节点。

			}
		</script>
	</head>

	<body>
		<input type="button" onclick="add()" value="添加" />
	</body>

</html>

4.7 添加附件

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" lang="en">

	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
		<title></title>

		<script type="text/javascript">
			/*
				插入目标元素的位置	 
				elt.insertBefore(newNode, childNode);			添加到elt中，childNode之前。
				注意： elt必须是childNode的直接父节点。
					
				删除指定的子节点	
				elt.removeChild(child)							
				注意： elt必须是child的直接父节点。
				
			*/
			
			//添加附件
			function addFile() {
				//获取表格节点对象
				var table = document.getElementsByTagName("table")[0];
				//创建tr标签节点对象
				var trnode = document.createElement("tr");
				trnode.innerHTML = "<td><input type='file'/></td><td><a href='#' οnclick='del(this)'>删除附件</a></td>";
				/*	var	tdnode1=document.createElement("td");
					var	tdnode2=document.createElement("td");
					tdnode1.innerHTML="<input type='file'/>";
					tdnode2.innerHTML="<a href='#'>删除附件</a>";	
					trnode.appendChild(tdnode1);
					trnode.appendChild(tdnode2);*/
				//table.appendChild(trnode);
				
				//获取父节点对象
				var tbody = document.getElementsByTagName("tbody")[0];
				//获取要插入的子节点
				var lastrow = document.getElementById("lastrow");
				//添加数据
				tbody.insertBefore(trnode, lastrow);
			}

			//删除附件
			function del(delfile) {
				//获取父节点对象
				var tbody = document.getElementsByTagName("tbody")[0];
				//获取要删除的tr标签节点对象
				var del = delfile.parentNode.parentNode;
				//删除数据
				tbody.removeChild(del);
			}
		</script>
	</head>

	<body>
		<table>
			<tbody>
				<tr>
					<td><input type="file" /></td>
					<td><a href="#" onclick="del(this)">删除附件</a></td>
				</tr>

				<tr id="lastrow">
					<td colspan="2"><input onclick="addFile()" type="button" value="添加附件" /></td>
				</tr>
			</tbody>
		</table>
	</body>

</html>

4.8 城市联动框

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" lang="en">

	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
		<title></title>
		<script type="text/javascript">
			function showCity() {
				//维护一个二维数组存储省份对应的城市
				var citys = [[],["洛阳", "郑州", "三门峡"],["青岛", "日照", "烟台"],["广州", "汕头"]];
				//获取省份对应的节点
				var provinceNodes = document.getElementById("province");
				//获取省份选中的选项
				var index = provinceNodes.selectedIndex;
				//获取对应的城市
				var datas = citys[index];
				//找到city节点
				var citynode = document.getElementById("city");
				//先清空city框所有option
				var citychild = citynode.childNodes;
				for (var i = 0; i < citychild.length;) {
					citynode.removeChild(citychild[i]);
				}
				//设置options的个数。
				//citynode.options.length = 1;
				//遍历对应的所有城市然后创建对应的option添加到city上。
				for (var i = 0; i < datas.length; i++) {
					var op = document.createElement("option");
					op.innerHTML = datas[i];
					citynode.appendChild(op);
				}
			}
		</script>
	</head>

	<body>
		省份<select id="province" onchange="showCity()">
    		<option>省份</option>
    		<option>河南</option>
            <option>山东</option>
            <option>广东</option>
    	</select> 城市
		<select id="city">
		<option>城市</option>
	</select>
	</body>

</html>

五、正则表达式

• 正则表达式是描述字符模式的对象。
• 正则表达式用于对字符串模式匹配及检索替换，是对字符串执行模式匹配的强大工具。
• 语法：
  • var patt=new RegExp(pattern,modifiers);
  • var patt=/pattern/modifiers;

var re = new RegExp("\\w+");
var re = /\w+/;

修饰符：用于执行区分大小写和全局匹配:

方括号：用于查找某个范围内的字符

元字符（Metacharacter）：是拥有特殊含义的字符：

量词：用于表示重复次数的含义

RegExp 对象方法

支持正则表达式的 String 对象的方法

正则表达式的使用

• test方法：搜索字符串指定的值，根据结果并返回真或假
• exec() 方法：检索字符串中的指定值。返回值是被找到的值。如果没有发现匹配，则返回 null。

var patt1=new RegExp("e");
document.write(patt1.test("The best things in life are free"));

var patt1=new RegExp("e");
document.write(patt1.exec("The best things in life are free"));

5.1 正则验证From表单

index.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script type="text/javascript">

	//检查用户名
	function checkName(){
		var inputNode = document.getElementById("userName");
		var spanNode = document.getElementById("userId");
		//获取输入框的内容
		var content  = inputNode.value;
		//用户名的规则： 六位的英文与数字组成。数字不能开头
		var reg = /^[a-z][a-z0-9]{5}$/i;	
		if(reg.test(content)){
			//符合规则
			spanNode.innerHTML = "正确".fontcolor("green");
			
			return true;
		}else{
			//不符合规则
			spanNode.innerHTML = "错误".fontcolor("red");
			
			return false;
		}	
	}


	//检查邮箱
	function checkEmail(){
		var email = document.getElementById("email").value;
		var spanNode = document.getElementById("emailspan");
		
		//编写邮箱的正则       13456@qq.com  13456@qq.net  13456@qq.com.cn
		var reg = /^[a-z0-9]\w+@[a-z0-9]+(\.[a-z]{2,3}){1,2}$/i; 
		if(reg.test(email)){
			//符合规则
			spanNode.innerHTML = "正确".fontcolor("green");
			return true;
		}else{
			//不符合规则
			spanNode.innerHTML = "错误".fontcolor("red");
			
			return false;
		}	
	}
	
	function checkAll(){
		var userName = checkName();	
		var email = checkEmail();
		if(userName&&email){
			return true;
		}else{
		
			return false;
		}
	}
	
/*
 表单提交的时候是会触发onsubmit事件的，如果onsubmit事件的方法返回是true，那么该表单允许提交，如果返回的是false，该表单不允许提交。

*/
</script>

<meta http-equiv="Content-Type" content="text/html; 
charset=utf-8" />
<title>正则表达式</title>
</head>
<body>								
<form action="success.html" method="get" onsubmit="return checkAll()" > <!--如果表单提交时候触发的方法返回是false,那么该表单
不允许提交，如果返回的是true允许提交 -->
			<table border="1px" width="50%" align="center" 
cellspacing="0px" cellpadding="3px">
				<tr>
					<td width="25%">姓名:</td>
					<td>
						<input type="text" name="userName" id="userName" onblur="checkName()"/>
                        <span id="userId"></span>
					</td>
				</tr>
				<tr>
					<td >密码:</td><td>
						<input type="password"  name="pwd" id="pwd" onblur="checkPass()"/>
                        <span id="passId"></span>
					</td>
				</tr>
				<tr>
					<td>确认密码:</td><td>
				<input type="password" name="ensurepwd" id="ensurepwd" onblur="ensurepass()" />		                <span id="ensure"></span>
					</td>
				</tr>
				<tr>
					<td>邮箱</td><td>
						<input type="text" name="email" id="email" 
onblur="checkEmail()"/>
                		<span id="emailspan"></span>
				        
					</td>
				</tr>
				<tr>
					<td>性别</td><td>
						<input type="radio" checked="ture" name="gender" id="male" value="male"/>
					男
						<input type="radio" name="gender" value="female"/>
					女</td>
				</tr>
				<tr>
					<td>爱好:</td><td>
						<input type="checkbox"  name="like" />
					eat
						<input type="checkbox" name="like" />
					sleep
						<input type="checkbox" name="like"/>
					play  
                    <span id="hobbySpan"></span>
                    </td>
				</tr>
				<tr>
					<td>城市</td><td>
					<select name="city" id="city">
						<option value=""> 请选择</option>
						<option value="bj"> 北京 </option>
						<option value="gz"> 广州 </option>
						<option value="sh"> 上海 </option>
					</select>
                    
                    </td>
				</tr>
				<tr>
					<td>自我介绍</td><td>					<textarea cols="15" rows="5"  name="myInfo" id="myInfo"></textarea></td>
				</tr>
				<tr align="center">
					<td colspan="2"><!--提交按钮-->
					<input type="submit"/>
					</td>
				</tr>
			</table>
		</form>
</body>

</html>

Success.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>

<body>
	<h1><font color="#FF0000">恭喜你 ,提交数据成功</font></h1>
</body>
</html>Success.html