JAVAScript

【1】JavaScript简介

1. HTML和CSS只有静态的界面,没有动态的效果,所以我们要使用JavaScript

2. JS可以实现表单数据的校验

3. TAB的切换

4. 背景图片的切换

5. JS小游戏的开发

【2】JavaScript概念

1. JavaScript是直译型脚本语言,JavaScript不会生成二进制文件,直接在浏览器中就可以运行

2. 是一种动态语言,比较灵活

3. 基于原型语言,JavaScript有对应的原型变

4.JavaScript是一种弱类型语言,只有var一种类型

【3】JavaScript组成

**1. ECMAScript (基础语法) : **JavaScript的核⼼语法ECMAScript描述了该语⾔的语法和基本对象

**2. DOM(⽂档对象模型) : **⽂档对象模型（DOM）—— 描述了处理⽹⻚内容的⽅法和接⼝

**3. BOM (浏览器对象模型) : **浏览器对象模型（BOM）—— 描述了与浏览器进⾏交互的⽅法和接⼝

一. 开发工具

浏览器 : Chrome
开发⼯具：Hbuilder X
进⼊浏览器控制台 Console：F12

控制台的作⽤:

	console对象代表浏览器的JavaScript控制台，⽤来运⾏JavaScript命令，常常⽤来显示⽹⻚运⾏时候的错误信息。Elements⽤来调试⽹⻚的html和css代码。

二. 基本用法

1.js的引入方式

1.直接在html文件中写js代码

注意 : 这个代码可以写在任何地方,但是一般按照代码的读取顺序,最好是放在head中

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		
		<!-- 1. js的引入方式, 这个方式你可以放在任何一个地方,但是放在head里是最规范的-->
		<script type="text/javascript">
			/* 网页的弹窗 */
			alert("js的想学习课程")
		</script>
        	
	</head>
	<body>
		
	</body>
</html>

2.通过引用js代码的地址来获取内容

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
        <!-- (2)js的引入方式二   type:引入文件的类型    src : 引入文件的路径 charset : 指定引入的编码格式-->
		<!-- 注意 : 引入js的时候千万不要二合一 -->
		<script type="text/javascript" src="js/01js的一引入方式.js" charset="UTF-8">
			 <!-- alert("js的想学习课程") -->
		</script>

	</head>
	<body>
		
	</body>
</html>

2.js的变量类型

1).js只有一种变量类型关键字------>var

2).js中的变量
(1)使用格式 ------> var 变量名 = 值;

	(2)JS中变量的使用注意的事项
	
	a. js中的变量的名称和java中标识符的命名保持一致就可以了
	
	b. js中的变量名称是可以重复的,但是后者的变量名会把前者的变量名的值给覆盖了(所以不建议这样写))
	
	c. js中没有";"分号结束也是可以的,但是不推荐使用

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		
		<script type="text/javascript">
			
			var a = 1;
			
			var b = "2";
			
			var c = "你好!";
			
			var d = true ;
			
			var e = new Date();
			
			var f = '5';
			
			var z = 1.32;
			
			
			
			
		</script>
		
	</head>
	<body>
	</body>
</html>


<!-- 
		js中的变量
		(1)var 变量名 = 值;
		
		(2)JS中变量的使用注意的事项
		
		a. js中的变量的名称和java中标识符的命名保持一致就可以了
		
		b. js中的变量名称是可以重复的,但是后者的变量名会把前者的变量名的值给覆盖了(所以不建议这样写))
		
		c. js中没有";"分号结束也是可以的,但是不推荐使用
 
 
 -->

3. JavaScript中的变量数据类型

s的变量数据类型(JavaScript不区分单引号和双引号的)
1. number 数字类型的
2. string 字符串类型
3. Boolean 布尔类型
4. object 对象类型

javascript中特殊的数据类型

1. undefined(未定义的)
2. NaN(不是一个数字) not no number 
3. null(空)

注意 : JavaScript中的比较全部是使用==去比较的字符串的中的空和null是不一样的

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		
		<script type="text/javascript">
			var a = 1;
			
			var b = "2";
			
			var c = "你好!";
			
			var d = true ;
			
			var e = new Date();
			
			var f = '5';
			
			var z = 1.32;
			
			// 用来获取是什么数据类型
			alert(typeof a);
			
			// 只有变量名,没有赋值
			var aa;
			
			alert(typeof aa);
			
			// 不同类型转换
			var bb = "123a";
			
			alert(Number(bb))
			
			// 值是空的情况
			var ccc = null;
			
			alert(typeof ccc)
			
		</script>
	</head>
	<body>
	</body>
</html>


<!-- 
	注意 : JavaScript中的比较全部是使用==去比较的
			字符串的中的空和null是不一样的
	
 
	js的变量数据类型(JavaScript不区分单引号和双引号的)
	
	1. number  数字类型的
	2. string  字符串类型
	3. Boolean 布尔类型
	4. object  对象类型
 
 
	javascript中特殊的数据类型
	
	1. undefined(未定义的)
	2. NaN(不是一个数字) not no number 
	3. null(空)
 

 
 -->

4.JavaScript中比较运算符

1)js中的运算符 :

+ - * / % ++ --
注意 : js中的运算是会保留小数的

2)逻辑运算符 :

& | ! && || < > <= >= !=

3)连接符

+

4)特殊运算符

== 等值符

先比较类型  如果类型一致,再比较内容
	如果类型不一致,这时候会进行强制转换, 统一转number类型,然后再进行比较,内容一致返回true,否则返回false

=== 等同符

先比较类型  如果类型一致,然后再比较内容
			如果类型不一致,直接返回false

true转换成number是1

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript">
			
			var a = 22;
			var b = 21.44;
			// alert(a+b);// 结果是43.44  
			
			var c = "123";
			
			// alert(a+c);// 结果是22123
			
			var d = true;
			var e = 1;
			alert(d+e);// 结果是2
			
		</script>
	</head>
	<body>
	</body>
</html>
<!-- 
 
	js中的运算符 :
	+ - * / % ++ -- 
	注意 : js中的运算是会保留小数的
	
	
	逻辑运算符 :
	& | ! && || < > <= >= !=
 
 
	连接符
	+
 
	特殊运算符
	true转换成number是1
	== 等值符
	先比较类型  如果类型一致,再比较内容
				如果类型不一致,这时候会进行强制转换, 统一转number类型,然后再进行比较,内容一致返回true,否则返回false
	
	=== 等同符
	先比较类型  如果类型一致,然后再比较内容
				如果类型不一致,直接返回false
 -->

5.JavaScript中的控制语句

1)条件语句

if(){} if(){}else{} if(){}else if(){}....else{}

2)分支语句(选择语句)

switch(){ case value: break; ... default: break; }

3)循环语句

while(){}

至少执行一次循环 do{}while(){}

for(){}

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		
		<script type="text/javascript">
			
			/**var a = 10;
			switch(a){
				case 10 : alert("我是10");
				break;
				case 20 : alert("我是20");
				break;
				case 30 : alert("我是30");
				default:
				break;
			}*/
			
			// 99乘法表
			for(var a = 1; a<=9; a++){
     
     
				for (var b = 1; b<= a; b++) {
     
     
					document.write(b+"*"+a+"="+a*b+"&nbsp;&nbsp;&nbsp;");
				}
				// 直接把信息打印到浏览器上
				document.write("<br />");
			}
			
		</script>
	</head>
	<body>
	</body>
</html>
<!-- 
 
	条件语句
	if(){}
	if(){}else{}
	if(){}else if(){}....else{}
	
	分支语句(选择语句)
	switch(){
		case value:
		break;
		...
		default:
		break;
	}
	
	
	循环语句
	while(){}
	
	至少执行一次循环
	do{}while(){}
 
	for(){}
 
 -->

5.JavaScript中函数的声明

1)函数声明的三个方式 :

(1) function  函数名(){
		函数体;
	};

(2) var 函数名 = function(){
	函数体;
	};

(3) var 函数名 = new Function("函数体");

2)函数做参数传递

在js中实参的个数和形参的个数可以不一致

3)函数的返回值

如果函数没有return 这时候的返回值是undefined () :函数的执行符

6.对象学习

1)日期对象

/* *******************日期对象****************************** */
			function testDate(){
				var date = new Date();
				
				// 本月的第几天
				document.write(date.getDate()+"<br />");
				// 本星期的第几天
				document.write(date.getDay()+"<br />");
				// 返回的月份  0-11
				document.write(date.getMonth()+"<br />");
				// 返回的是1900年到现在年份的差值
				document.write(date.getYear()+"<br />");
				// 返回全年
				document.write(date.getFullYear()+"<br />");
				// 返回本地的时间
				document.write(date.toLocaleDateString()+"<br />");
			
			}

2)Math对象

function testMath(){
				// 获取随机数
				// 随机数的范围是0-1;
				// var ran = Math.random();
				
				var ran = Math.random()*1000;
				// 打印在控制台上
				console.log(ran);
				// 向下取整
				console.log(Math.floor(ran));
				// 向上取整
				console.log(Math.ceil(ran));
				
				
				// 生成四位数的随机数---->验证码  是使用这个方法
				console.log(Math.floor(Math.random()*9000+1000));
				
				document.write("验证码 : "+Math.floor(Math.random()*9000+1000));
				
			}

3)String对象

/* *******************String对象****************************** */
			function testString(){
				 var a = "liuchang";
				 var c = "a-b-c-d-e-f";
				 var b = new String("liuchang");
				 
				 // 获取下标为2的内容
				 document.write(b.charAt(2)+"<br />");
				 // 获得下标
				 document.write(b.indexOf("liuchang")+"<br />");
				 // 字符串截取  开始下标  截取长度
				 document.write(b.substr(2,3)+"<br />");
				 // 截取开始的长度
				 document.write(b.substr(1)+"<br />");
				 // 字符串截取  开始下标  结束的下标
				 document.write(b.substring(2,3)+"<br />");
				 // 开始下标
				 document.write(b.substr(2)+"<br />");
				 // 字符串截取的方法
				 document.write(c.split("-")+"<br />");
			}
			
			testString();

4)Global对象

function testGlobal(){
				
				var a = 1;
				var b = "var c = 1+1";
				document.write(a+"<br />");
				document.write(b+"<br />");
				// 把字符串转成可以执行的js的代码
				eval(b);
				
				document.write(c);
				
				var d = "123";// false
				var d ="123a";// true
				// isNaN判断某个值是不是数字
				document.write(isNaN(d));
				
				
			}
			
			testGlobal();

5).数组对象

注意 :

在js中数组的长度确定之后还是可以修改的,数组中的元素也是可以是任意的数据类型

1.数组的声明方式

// 数组的声明方式
			function demo1(){
				// 方式一
				var arr = new Array();
				// 方式二  5是代表数组的长度
				var arr2 =  new Array(5);
				console.log(arr2);
				// 方式三
				var arr3 = new Array("你好", 123, new String(),true);
				console.log(arr3);
				// 方式四
				var arr4 = ["liuchang",123,new Date(),false];
			}
			
			demo1();

2.数组的使用

// 数组的使用
			function demo2(){
				var arr = [];
				
				arr[0] = "lichang";
				arr[1] = true;
				arr[2] = new Date();
				arr[6] = 12;
				// js中数组的下标可以不连续   如果没有给值就是empty
				console.log(arr);
				
			}
				
			demo2();

3.数组的扩容

// 数组的扩容
			function demo3(){
				var arr = ["liuchang", 123, new Date, false];
				
				console.log(arr.length);
				
				// 扩大数组
				arr.length = 10;
				// 缩小数组
				arr.length = 2;
				
				console.log(arr);
			}
			
			demo3();

4.数组遍历

// 数组的遍历
			function demo4(){
				var arr = ["liuchang",123, false,new Date()];
				
				// 数组的遍历方式一  普通for循环
				for(var i = 0; i< arr.length; i++){
					console.log(arr[i]);
				}
				
				// 数组的遍历方式二  增强for循环
				for(var i in arr ){
					console.log(arr[i]);
					// 这里的i代表的是数组的下标
					// console.log(i);
				}
				
			}
			
			demo4();

5.数组常用的方法

// 数组中常用的方法
			function demo5(){
				var arr = ["liuchang",123, false,new Date()];
				
				// 1. 添加数据
				// 向数组的末尾添加一个或者更多的元素,并返回新的长度.
				// var arr = arr.push("我们");
				// console.log(arr);
				
				// 2.删除(删除的是全部的元素)并返回数组的最后一个元素
				// var le = arr.pop();
				// console.log(arr+"-------"+le);
				
				// 3.删除(删除所有元素)并返回删除掉的第一个元素
				var first = arr.shift();
				console.log(first);
				// 4.添加元素,添加到第一个
				// arr.unshift();
				// 5. 删除的含义 1----->删除的下标   2---->要删除的个数
				arr.splice(1,2);
				// 添加的含义  1---->添加的下标  0--->这是代表要删除的数据  "你好"---->添加的元素
				arr.splice(1,0,"你好");
				
			}
			
			demo5();

对象学习的完整代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript">
			
			document.write("*******************日期对象***********************"+ "<br />");
			
			/* *******************日期对象****************************** */
			function testDate(){
     
     
				var date = new Date();
				
				// 本月的第几天
				document.write(date.getDate()+"<br />");
				// 本星期的第几天
				document.write(date.getDay()+"<br />");
				// 返回的月份  0-11
				document.write(date.getMonth()+"<br />");
				// 返回的是1900年到现在年份的差值
				document.write(date.getYear()+"<br />");
				// 返回全年
				document.write(date.getFullYear()+"<br />");
				// 返回本地的时间
				document.write(date.toLocaleDateString()+"<br />");
			
			}
			
			testDate();
			
			document.write("*******************Math对象*******************************"+ "<br />");
			
			/* *******************Math对象****************************** */
			function testMath(){
     
     
				// 获取随机数
				// 随机数的范围是0-1;
				// var ran = Math.random();
				
				var ran = Math.random()*1000;
				// 打印在控制台上
				console.log(ran);
				// 向下取整
				console.log(Math.floor(ran));
				// 向上取整
				console.log(Math.ceil(ran));
				
				
				// 生成四位数的随机数---->验证码  是使用这个方法
				console.log(Math.floor(Math.random()*9000+1000));
				
				document.write("验证码 : "+Math.floor(Math.random()*9000+1000)+ "<br />");
				
			}
			
			testMath();
			
			document.write("*******************String对象******************"+ "<br />");
			
			
			/* *******************String对象****************************** */
			function testString(){
     
     
				 var a = "liuchang";
				 var c = "a-b-c-d-e-f";
				 var b = new String("liuchang");
				 
				 // 获取下标为2的内容
				 document.write(b.charAt(2)+"<br />");
				 // 获得下标
				 document.write(b.indexOf("liuchang")+"<br />");
				 // 字符串截取  开始下标  截取长度
				 document.write(b.substr(2,3)+"<br />");
				 // 截取开始的长度
				 document.write(b.substr(1)+"<br />");
				 // 字符串截取  开始下标  结束的下标
				 document.write(b.substring(2,3)+"<br />");
				 // 开始下标
				 document.write(b.substr(2)+"<br />");
				 // 字符串截取的方法
				 document.write(c.split("-")+"<br />");
			}
			
			testString();
			
			document.write("*******************Global对象***************************"+ "<br />");
			
			/* *******************Global对象****************************** */
			function testGlobal(){
     
     
				
				var a = 1;
				var b = "var c = 1+1";
				document.write(a+"<br />");
				document.write(b+"<br />");
				// 把字符串转成可以执行的js的代码
				eval(b);
				
				document.write(c);
				
				var d = "123";// false
				var d ="123a";// true
				// isNaN判断某个值是不是数字
				document.write(isNaN(d)+ "<br />");
				
				
			}
			
			testGlobal();
			
			document.write("*******************Array对象****************************"+ "<br />");
			
			/* *******************Array对象****************************** */
			
			// 数组的声明方式
			function demo1(){
     
     
				// 方式一
				var arr = new Array();
				// 方式二  5是代表数组的长度
				var arr2 =  new Array(5);
				console.log(arr2);
				// 方式三
				var arr3 = new Array("你好", 123, new String(),true);
				console.log(arr3);
				// 方式四
				var arr4 = ["liuchang",123,new Date(),false];
			}
			
			demo1();
				
			// 数组的使用
			function demo2(){
     
     
				var arr = [];
				
				arr[0] = "lichang";
				arr[1] = true;
				arr[2] = new Date();
				arr[6] = 12;
				// js中数组的下标可以不连续   如果没有给值就是empty
				console.log(arr);
				
			}
				
			demo2();
			
			// 数组的扩容
			function demo3(){
     
     
				var arr = ["liuchang", 123, new Date(), false];
				
				console.log(arr.length);
				
				// 扩大数组
				arr.length = 10;
				// 缩小数组
				arr.length = 2;
				
				console.log(arr);
			}
			
			demo3();
			
			// 数组的遍历
			function demo4(){
     
     
				var arr = ["liuchang",123, false,new Date()];
				
				// 数组的遍历方式一  普通for循环
				for(var i = 0; i< arr.length; i++){
     
     
					console.log(arr[i]);
				}
				
				// 数组的遍历方式二  增强for循环
				for(var i in arr ){
     
     
					console.log(arr[i]);
					// 这里的i代表的是数组的下标
					// console.log(i);
				}
				
			}
			
			demo4();
			
			// 数组中常用的方法
			function demo5(){
     
     
				var arr = ["liuchang",123, false,new Date()];
				
				// 1. 添加数据
				// 向数组的末尾添加一个或者更多的元素,并返回新的长度.
				// var arr = arr.push("我们");
				// console.log(arr);
				
				// 2.删除(删除的是全部的元素)并返回数组的最后一个元素
				// var le = arr.pop();
				// console.log(arr+"-------"+le);
				
				// 3.删除(删除所有元素)并返回删除掉的第一个元素
				var first = arr.shift();
				console.log(first);
				// 4.添加元素,添加到第一个
				// arr.unshift();
				// 5. 删除的含义 1----->删除的下标   2---->要删除的个数
				arr.splice(1,2);
				// 添加的含义  1---->添加的下标  0--->这是代表要删除的数据  "你好"---->添加的元素
				arr.splice(1,0,"你好");
				
			}
			
			demo5();
			
			
				
		</script>
	</head>
	<body>
	</body>
</html>

三. event事件

1.什么是事件?

满足某些条件触发的事情

事件是可以被JavaScript侦测到的行为

2.有哪些事件?

1)单击事件

<!-- 单击事件 -->
		<!-- 这样可以执行两个事件 -->
		<input type="button" name="" id="" value="单击操作"  onclick="demo1();demo2()"/>
		<br>
		<br>
		<br>

2)双击事件

<!-- 双击事件 -->
		<input type="button" name="" id="" value="双击操作" ondblclick="demo2()" />
		<br>
		<br>
		<br>

3)鼠标事件

<!-- 鼠标事件   onmouseover : 鼠标放上事件   onmouseout : 鼠标离开就触发了   onmousemove : 鼠标移动事件 -->
		<div id="" style="width: 300px;height: 300px; background-color: red;" onmouseover="demo3()"></div>
		<br>
		<br>
		<br>

4)键盘事件

<!-- 键盘事件 onkeydown : 键盘弹起 -->
		<input type="text" name="" id="" value=""  onkeydown = "demo4()"/>
		<br>
		<br>
		<br>

5)焦点事件

<!-- 焦点事件  onfocus : 获取焦点事件   onblur : 失去焦点事件  onchange :  -->
		<input type="text" name="" id="" value=""  onfocus="demo5()"/>
		<br>
		<br>
		<br>

6)页面加载完成

<body onload="demo6()">

完整的代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript">
			 function demo1(){
     
     
				 alert("单击事件的执行");
			 }
			 function demo2(){
     
     
				 alert("双击事件的执行");
			 }
			 function demo3(){
     
     
				 alert("鼠标事件的执行");
			 }
			 function demo4(){
     
     
				 alert("键盘事件的 执行");
			 }
			 function deom5(){
     
     
				 alert("获得焦点事件的执行");
			 }
			 function demo6(){
     
     
				 alert("页面加载完成");
			 }
		</script>
		
	</head>
	<body onload="demo6()">
		
		<!-- 单击事件 -->
		<!-- 这样可以执行两个事件 -->
		<input type="button" name="" id="" value="单击操作"  onclick="demo1();demo2()"/>
		<br>
		<br>
		<br>
		
		<!-- 双击事件 -->
		<input type="button" name="" id="" value="双击操作" ondblclick="demo2()" />
		<br>
		<br>
		<br>
		
		<!-- 鼠标事件   onmouseover : 鼠标放上事件   onmouseout : 鼠标离开就触发了   onmousemove : 鼠标移动事件 -->
		<div id="" style="width: 300px;height: 300px; background-color: red;" onmouseover="demo3()"></div>
		<br>
		<br>
		<br>
		
		<!-- 键盘事件 onkeydown : 键盘弹起 -->
		<input type="text" name="" id="" value=""  onkeydown = "demo4()"/>
		<br>
		<br>
		<br>
		
		<!-- 焦点事件  onfocus : 获取焦点事件   onblur : 失去焦点事件  onchange :  -->
		<input type="text" name="" id="" value=""  onfocus="demo5()"/>
		<br>
		<br>
		<br>
		
		
		
		
	</body>
</html>

四.BOM和DOM

BOM对象是包含DOM对象的

1. 什么是BOM对象?

BOM是Browser Object Model的简写,即浏览器对象模型
BOM由一系列对象组成,是访问,控制,修改浏览器的属性的方法
BOM没有统一的标准(每种客户端都可以自定标准)
BOM的顶层是window对象

2. 什么是DOM?

DOM 是Document Object Model的简写,即文档对象模型
DOM用于xhtml,xml文档的应用程序接口(API)
DOM提供一种结构化的文档描述方式,从而使HTML内容使用结构化的方式显示
DOM由一系列对象组成,是访问,检索,修改XHTML文档内容与结构的标准方法
DOM标准是由w3c制定和维护.DOM是跨平台语言的
DOM的顶层是document对象

3.BOM对象常用的方法

1)BOM的三种弹框

/***************************** 三种弹框 *****************************/
			function demo1(){
				// 含有确定按钮的弹窗
				window.alert("弹框A");
			}
			function demo2(){
				// 含有确认取消的弹框
				var flag = window.confirm("是否删除");
				alert(flag);
			}
			function demo3(){
				// 可以输入内容的弹框
				var va = window.prompt("请输入昵称","例如 : 李白");
				alert(va);
			}

2)定时器

/********************* 定时器 *****************/
			function getTime(){
				
				var date = new Date();
				// 获得时间
				var time = date.toLocaleString();
				
				// 获得id名称是span_1的对象
				var span = document.getElementById("span_1");
				
				span.innerHTML = time;
				
			}
			
			// 1s之后进行方法的调用  只调用一次
			// window.setTimeout("getTime()",1000);
			// 每间隔1s就会进行方法的使用   可以调用多次
			var inl = window.setInterval("getTime()",1000);

3)清除定时器

/********************* 清除定时器 *********************/
			function demo4(){
				// 清除定时器操作
				window.clearInterval(inl);
			}

4)打开或关闭浏览器的方法

/******************* 打开或关闭浏览器的方法 ****************/
			function demo5(){
				// 另起一页打开浏览器页面
				window.open("https://www.baidu.com");
			}
			function demo6(){
				// 关闭当前的页面
				window.close();
			}

完整的代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript">
			/***************************** 三种弹框 *****************************/
			function demo1(){
     
     
				// 含有确定按钮的弹窗
				window.alert("弹框A");
			}
			function demo2(){
     
     
				// 含有确认取消的弹框
				var flag = window.confirm("是否删除");
				alert(flag);
			}
			function demo3(){
     
     
				// 可以输入内容的弹框
				var va = window.prompt("请输入昵称","例如 : 李白");
				alert(va);
			}
			
			/********************* 定时器 *****************/
			function getTime(){
     
     
				
				var date = new Date();
				// 获得时间
				var time = date.toLocaleString();
				
				// 获得id名称是span_1的对象
				var span = document.getElementById("span_1");
				
				span.innerHTML = time;
				
			}
			
			// 1s之后进行方法的调用  只调用一次
			// window.setTimeout("getTime()",1000);
			// 每间隔1s就会进行方法的使用   可以调用多次
			var inl = window.setInterval("getTime()",1000);
			
			
			/********************* 清除定时器 *********************/
			function demo4(){
     
     
				// 清除定时器操作
				window.clearInterval(inl);
			}
			
			/******************* 打开或关闭浏览器的方法 ****************/
			function demo5(){
     
     
				// 另起一页打开浏览器页面
				window.open("https://www.baidu.com");
			}
			function demo6(){
     
     
				// 关闭当前的页面
				window.close();
			}
		</script>
	</head>
	<body onload="getTime()">
		<p>
			<input type="button" name="" id="" value="弹框A" onclick="demo1()" />
		</p>
		
		
		<p>
			<input type="button" name="" id="" value="弹框B" onclick="demo2()" />
		</p>
		
		
		<p>
			<input type="button" name="" id="" value="弹框C" onclick="demo3()" />
		</p>
		
		当前访问的时间 : <span id="span_1">
			
		</span>
		
		
		<p>
			<input type="button" name="" id="" value="停止时间" onclick="demo4()" />
		</p>
		
		
		<p>
			<input type="button" name="" id="" value="打开百度" onclick="demo5()" />
		</p>
		
		<p>
			<input type="button" name="" id="" value="关闭 " onclick="demo6()" />
		</p>
		
	</body>
</html>


<!-- 注意 : window是默认的,可以不用写 -->

4.BOM对象的学习

1)Location对象学习

/* ***************Location对象学习**************** */
			function testLocation(){
				// http://127.0.0.1:8848/03JavaScript/10BOM%E5%AF%B9%E8%B1%A1%E7%9A%84%E5%AD%A6%E4%B9%A0.html
				var href = window.location.href;
				// http://127.0.0.1/  IP地址
				var hostname = window.location.hostname;
				// 8848  端口号
				var port = window.location.port;
				// http://127.0.0.1:8848/   主机
				var host = window.location.host;
				// 在弹框打印
				// alert(href+"-----------"+hostname+"-------"+port+"--------"+host)
				
				// 修改当前的url
				window.location.href = "https://www.baidu.com";
				// 重新加载页面
				// window.location.reload();
			}

2)History对象学习

/* ***************History对象学习**************** */
			function testHistory(){
				// 返回浏览器历史列表中的 URL 数量
				var len = window.history.length;
				
				// alert(len);
				// 前进操作
				window.history.forward();
				// 后退操作
				window.history.back();
				// 控制网页的前进和后退    如果是正数代表前进  如果是负数代表后退   如果是0重新加载
				window.history.go(0);
				
			}

3)Screen对象学习

/* ***************Screen对象学习**************** */
			function testScreen(){
				// 获取当前屏幕的分辨率
				var he = window.screen.height;
				var wi = window.screen.width;
				
				alert(he+"--------"+wi);
			}

4)Navigator对象学习

/* ***************Navigator对象学习**************** */
			function testNavigator(){
				// 返回由客户机发送服务器的user-agent头部的值
				var us = window.navigator.userAgent;
				
				alert(us);
			}

完整的代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript">
			/* ***************Location对象学习**************** */
			function testLocation(){
     
     
				// http://127.0.0.1:8848/03JavaScript/10BOM%E5%AF%B9%E8%B1%A1%E7%9A%84%E5%AD%A6%E4%B9%A0.html
				var href = window.location.href;
				// http://127.0.0.1/  IP地址
				var hostname = window.location.hostname;
				// 8848  端口号
				var port = window.location.port;
				// http://127.0.0.1:8848/   主机
				var host = window.location.host;
				// 在弹框打印
				// alert(href+"-----------"+hostname+"-------"+port+"--------"+host)
				
				// 修改当前的url
				window.location.href = "https://www.baidu.com";
				// 重新加载页面
				// window.location.reload();
			}
			
			/* ***************History对象学习**************** */
			function testHistory(){
     
     
				// 返回浏览器历史列表中的 URL 数量
				var len = window.history.length;
				
				// alert(len);
				// 前进操作
				window.history.forward();
				// 后退操作
				window.history.back();
				// 控制网页的前进和后退    如果是正数代表前进  如果是负数代表后退   如果是0重新加载
				window.history.go(0);
				
			}
			
			/* ***************Screen对象学习**************** */
			function testScreen(){
     
     
				// 获取当前屏幕的分辨率
				var he = window.screen.height;
				var wi = window.screen.width;
				
				alert(he+"--------"+wi);
			}
			
			/* ***************Navigator对象学习**************** */
			function testNavigator(){
     
     
				// 返回由客户机发送服务器的user-agent头部的值
				var us = window.navigator.userAgent;
				
				alert(us);
			}
		</script>
	</head>
	<body>
		<p>
			<input type="button" name="" id="" value="Location对象" onclick="testLocation()"/>
		</p>
		
		
		<p>
			<input type="button" name="" id="" value="History对象" onclick="testHistory()"/>
		</p>
		
		<p>
			<input type="button" name="" id="" value="Screen对象" onclick="testScreen()"/>
		</p>
		
		<p>
			<input type="button" name="" id="" value="Navigator对象" onclick="testNavigator()"/>
		</p>
	</body>
</html>

5. DOM对象的节点分类

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-1CWQ5exs-1598925955671)(https://static01.imgkr.com/temp/527d07df36174e4aa232abee0582164f.png)]

1)DOM对象可以分为文档节点

2)元素节点

3)属性节点

4)文本节点

6.DOM对象节点之间的关系

1)父子关系 : 元素作为父级,和元素作为子级

2)兄弟关系 : 和

元素就是兄弟关系;和<h1>元素并不是兄弟关系</h1>

7.DOM操作的内容

1)查询元素(进行操作元素,或者元素的属性,文本)

2)操作文本

3)操作属性

4)操作CSS样式(一个特殊的属性style)

5)操作元素

8.DOM节点对象获取方式

1)直接获取节点对象的方式

/* ************直接获取节点对象的方式************ */
			function demo1(){
				// id方式直接获得-------单个对象
				var username = window.document.getElementById("username");
				alert(username);
			}
			function demo2(){
				// 通过标签名称获取元素对象   获得的是多个对象
				var inp = document.getElementsByTagName("input");
				alert(inp[2]);
			}
			function demo3(){
				// 通过属性获取
				var inp = document.getElementsByName("hobby")
				alert(inp.length);
			}

2)间接获取元素对象的方式

/* ************间接获取元素对象的方式************ */
			function demo4(){
				// 获得父节点
				var professinoal = document.getElementById("professional");
				// 获得子元素  注意 : 空白的文档也是一个子节点
				var child = professinoal.childNodes;
				// 这是打印在控制台上
				console.log(child);
			}
			function demo5(){
				 var p2 = document.getElementById("p2");
				 // 获得父节点
				 var parent = p2.parentNode;
				 console.log(parent);
			}
			function demo6(){
				var p2 = document.getElementById("p2");
				// 获得下一个节点包含空白的文档
				// var next = p2.nextSibling.nextSibling;
				// 获得下一个节点不包含空白的文档
				// var next = p2.nextElementSibling;
				// 获得上一个节点对象包含空白文档
				var up = p2.previousSibling.previousSibling;
				// 获得上一个节点对象不包含空白文档
				var up = p2.previousElementSibling;
				console.log(next);
			}

完整的代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript">
			/* ************直接获取节点对象的方式************ */
			function demo1(){
     
     
				// id方式直接获得-------单个对象
				var username = window.document.getElementById("username");
				alert(username);
			}
			function demo2(){
     
     
				// 通过标签名称获取元素对象   获得的是多个对象
				var inp = document.getElementsByTagName("input");
				alert(inp[2]);
			}
			function demo3(){
     
     
				// 通过属性获取
				var inp = document.getElementsByName("hobby")
				alert(inp.length);
			}
			
			/* ************间接获取元素对象的方式************ */
			function demo4(){
     
     
				// 获得父节点
				var professinoal = document.getElementById("professional");
				// 获得子元素  注意 : 空白的文档也是一个子节点
				var child = professinoal.childNodes;
				// 这是打印在控制台上
				console.log(child);
			}
			function demo5(){
     
     
				 var p2 = document.getElementById("p2");
				 // 获得父节点
				 var parent = p2.parentNode;
				 console.log(parent);
			}
			function demo6(){
     
     
				var p2 = document.getElementById("p2");
				// 获得下一个节点包含空白的文档
				// var next = p2.nextSibling.nextSibling;
				// 获得下一个节点不包含空白的文档
				// var next = p2.nextElementSibling;
				// 获得上一个节点对象包含空白文档
				var up = p2.previousSibling.previousSibling;
				// 获得上一个节点对象不包含空白文档
				var up = p2.previousElementSibling;
				console.log(next);
			}
			
			
		</script>
	</head>
	<body onload="demo1()">
		
		<form action="" method="post" id="form_1">
			
		用户名 : <input type="text" name="username" id="username" value="请输入姓名"/><br>
		密码 : <input type="password" name="pwd" id="pwd" value=""/><br>
		
		爱好 : <input type="checkbox" name="hobby" value="music"/>音乐
				<input type="checkbox" name="hobby" value="sports"/>体育
				<input type="checkbox" name="hobby" value="atr"/>美术<br>
		
		职业 : <select name="professinoal" id="professional">
				<option value="1">工人</option>
				<option value="2" id="p2">农民</option>
				<option value="3">解放军</option>
				<option value="4">知识分子</option>
		</select>
		<input type="button" name="" id="" value="提交" />
		</form>
	</body>
</html>

8.DOM中操作节点的对象属性

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript">
			function demo1(){
     
     
				// 获得id名称是inpl对象节点
				var inpl = document.getElementById("inpl");
				// 方式一: 获得节点对象的属性
				var ty = inpl.type;
				var va = inpl.value;
				var na = inpl.name;
				
				alert(ty+"--------"+va+"----------"+na);
				
				// 方式一 : 操作元素的属性
				/* inpl.type = "button";
				inpl.value = "测试改变"; */
				
				// 方式二  获得元素的属性
				// var ty1 = inpl.getAttribute("type");
				// 获得的是属性的默认值
				var ty1 = inpl.getAttribute("value");
				alert(ty1);
				
				// 方式二 : 操作元素的属性
				inpl.setAttribute("type","button");
			}
		</script>
	</head>
	<body>

		<input type="text" name="uname" id="inpl" value="" />
		<hr>
		<input type="button" name="" id="" value="测试元素属性" onclick="demo1()" />
	</body>
</html>

9.DOM中操作元素节点的样式

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript">
			function demo1(){
     
     
				// 获取id名称是div1的对象
				var div = document.getElementById("div1");
				// 获得CSS样式  只是支持行内样式的CSS
				var wi = div.style.width;
				var hi = div.style.height;
				
				alert(wi+"------"+hi);
				
				// 操作元素的CSS样式
				div.style.width = "300px";
				div.style.height = "300px";
				// 对于background-color格式的样式在js中需要使用驼峰命名方式backgroundColor
				div.style.backgroundColor = "blue";
				
				// 通过类来增加对应的CSS样式   注意 : className
				div.className = "div2";
				
			}
		</script>
		<style type="text/css">
			.div2{
     
     
				border: 3px solid green;
			}
		</style>
	</head>
	<body >
		
		<div id="div1" style="width: 200px; height: 200px; background-color: red;">
			
		</div>
		<hr >	
		
		<input type="button" name="" id="" value="css样式的操作" onclick="demo1()" />
		
		
	</body>
	
</html>

10.DOM中操作元素的样式

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			#div1{
     
     
				width: 200px;
				height: 200px;
				border: 2px solid red;
			}
		</style>
		
		<script type="text/javascript">
			function demo1(){
     
     
				// 获得div1的对象
				var div = document.getElementById("div1");
				
				// 获得元素的文本内容(包括标签)
				var inn = div.innerHTML;
				
				// 只获得文本内容
				var inn2 = div.innerText;
				
				// console.log(inn);
				// console.log(inn2);
				
				// 会识别HTML信息
				// div.innerHTML = "<h1>我们没有什么不一样</h1>";
				
				// 不会识别HTML的信息
				// 使用+=就不会覆盖掉之前的内容,会追加上去
				div.innerText += "<h1>我们没有什么不一样</h1>";
				
				/* 
				 注意 : 
					双标签有innerHTML和innerText
					
					单标签获得的时候都是用value获得
					
					特殊标签: 
					select,textarea
				 */
			}
			
			
			function demo2(){
     
     
				// 获取select对象
				var sel = document.getElementById("sele");
				// 如果option中存在value则会获得value值
				alert(sel.value);
			}
			
			function demo3(){
     
     
				var te = document.getElementById("tex");
				// 会获取所有的内容
				alert(te.value);
			}
			
			
		</script>
	</head>
	<body>
		<div id="div1">
			
			<span id="">
				liuchang
			</span>
			
		</div>
		<!-- 单标签 -->
		<input type="text" name="inp2" id="inp2" value="" />
		
		<select id="sele" onchange="demo2()">
			<option>---请选择---</option>
			<option>中国</option>
			<option value="3">美国</option>
		</select><br>
		
		<textarea rows="20" cols="20" id="tex">
			34567890
		</textarea>
		
		<!-- 双标签 -->
		<input type="button" name="" id="" value="操作元素的文本内容" onclick="demo3()"/>

	</body>
</html>

11.DOM中操作元素节点对象

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript">
			function addNode(){
     
     
				
				// 获取表单对象
				var fom = document.getElementById("form");
				// 创建节点的方法
				var p = document.createElement("p");
				p.innerText ="照片 : ";
				var inp = document.createElement("input");
				inp.type = "file";
				var inp2 = document.createElement("input");
				inp2.type = "button";
				inp2.value = "删除";
				
				inp2.onclick = function(){
     
     
					// 注意 : 先移除子节点在移除标签
					// 移除子节点
					p.removeChild(inp);
					p.removeChild(inp2);
					
					// 移除本身
					p.remove()
				}
				
				// 添加节点对象
				// fom.appendChild(p);
				
				// 获取最后一个节点对象
				var lastNode = document.getElementById("lastNode");
				// 在指定的位置之前添加节点
				fom.insertBefore(p,lastNode)
				p.appendChild(inp);
				p.appendChild(inp2);
			}
		</script>
	</head>
	<body>
		<form action="" method="post" id="form">
			<p>
				用户名 : <input type="" name="" id="" value="" />
			</p>
			<p>
				照片 : <input type="file" name="" id="" value="" />
				<input type="button" name="" id="" value="添加" onclick="addNode()" />
			</p>
			<p id="lastNode">
				<input type="button" name="" id="" value="提交" />
				<input type="button" name="" id="" value="清空" />
			</p>
		</form>
	</body>
</html>

简单学习HTML-----JavaScript的使用

JAVAScript

【1】JavaScript简介

【2】JavaScript概念

【3】JavaScript组成

一. 开发工具

二. 基本用法

1.js的引入方式

2.js的变量类型

3. JavaScript中的变量数据类型

4.JavaScript中比较运算符

1)js中的运算符 :

2)逻辑运算符 :

3)连接符

4)特殊运算符

5.JavaScript中函数的声明

**1)函数声明的三个方式 : **

2)函数做参数传递

3)函数的返回值

6.对象学习

1)日期对象

2)Math对象

3)String对象

4)Global对象

5).数组对象

1.数组的声明方式

2.数组的使用

3.数组的扩容

对象学习的完整代码

三. event事件

1.什么是事件?

2.有哪些事件?

1)单击事件

2)双击事件

3)鼠标事件

4)键盘事件

5)焦点事件

6)页面加载完成

四.BOM和DOM

1. 什么是BOM对象?

2. 什么是DOM?

3.BOM对象常用的方法

1)BOM的三种弹框

2)定时器

3)清除定时器

4)打开或关闭浏览器的方法

完整的代码

4.BOM对象的学习

1)Location对象学习

2)History对象学习

3)Screen对象学习

4)Navigator对象学习

完整的代码

5. DOM对象的节点分类

6.DOM对象节点之间的关系

元素就是兄弟关系;和<h1>元素并不是兄弟关系</h1>

7.DOM操作的内容

1)直接获取节点对象的方式

2)间接获取元素对象的方式

完整的代码

8.DOM中操作节点的对象属性

9.DOM中操作元素节点的样式

10.DOM中操作元素的样式

11.DOM中操作元素节点对象

猜你喜欢

1)函数声明的三个方式 :