Web-Day6笔记

一、ECMAScript语法

1.循环语句

简单for循环和for-in循环【数组】

while语句和do-while语句

语法：

初始化表达式

while(条件表达式){

循环体

循环之后的操作表达式

}

初始化表达式

do{

循环体

循环之后的操作表达式

}while(条件表达式);

for(初始化表达式；条件表达式；循环之后的操作表达式){

循环体

}

说明：四要素

掌握：

a.while和do-while的区别

b.简单for循环和for-in 的区别

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
	</head>
	<body>
		<script type="text/javascript">
			//需求：打印0~9的数字
			//while
			var n1 = 0;
			while(n1 < 10){
				document.write(n1);
				
				//循环之后的操作表达式
				//n1 = n1 + 1;   //给变量自身递增1
				n1++;
			}
			
			document.write("<br />");
			
			//do-while
			var n2 = 0;
			do{
				document.write(n2);
			
				n2++;
			}while(n2 < 10);
			
			document.write("<br />");
			
			//面试题：while和do-while之间的区别
			var m1 = 3;
			while(m1 < 1){
				document.write("hello");
			}
			
			document.write("<br />");
			
			var m2 = 3;
			do{
				document.write("hello~~~");
			}while(m2 < 1);
			
			//总结：不管条件是否成立，do-while的循环体至少会执行一次
			//do-while的工作原理：先执行循环体，然后去判断条件是否成立，如果成立，接着再执行循环体。。。
			
			//在实际项目开发中，首选while，因为do-while不可控
			
			
			//for循环
			for(var i = 0;i < 10;i++){
				document.write(i);
			}
			
			document.write("<br />");
			
			//for-in循环
			//for-in循环遍历数组，直接获取的是数组的索引，区别于Python
			var arr = [2,5,6,56]
			for(var i in arr){
				document.write(arr[i]);
			}
			
			document.write("<br />");
			
			
			//嵌套循环
			/*
			 *break：直接跳出整个循环 
			 continue：结束当前正在执行的循环，继续下一次循环
			 
			 在嵌套循环中，跳出的是当前循环【就近原则】
			 */
			
			
			//label标签：给每个循环命名，就可以让break或者continue根据别名识别应该跳出哪个循环
			//loop1和loop2是自定义的，只要是合法的标识符即可
			//用法：break 标签名称；
			loop1:
			for(var i = 0; i < 10;i++){
				loop2:
				for(var j = 0; j < 4;j++){
					document.write(i + "x" + j + "=" + i * j);
					break loop1;
				}
				document.write("<br />");
				
			}
			
			
		</script>
	</body>
</html>

2.函数

定义：

方式一：使用function关键字

function 函数名(形参列表){

函数体

}

调用：函数名(实参列表)

方式二：匿名函数【掌握】

var 变量名 = function(形参列表){

函数体

}

调用：变量名（实参列表）

方式三：js中的内置对象Function【动态方式，很少使用，了解】

var 变量名 = new Function(“形参列表”，“函数体和返回值”)

调用：变量名（实参列表）

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<script type="text/javascript">
			//定义一个无参无返回值的函数
			function func1(){
				document.write("hello");
			}
			func1();
			
			//定义一个无参有返回值的函数
			function func1(){
				document.write("hello");
				
				return 10;
			}
			result = func1();
			//document.write(func1());
			
			//定义一个有参无返回值的函数
			function func1(a,b){
				document.write("hello");	
			}
			func1(12,43);
			
			//定义一个有参有返回值的函数
			function func1(num1,num2){
				var s = num1 + num2;
				return s;
			}
			func1(12,43);
			
			//return：和Python完全相同，结束函数和返回值
			
			
			//匿名函数
			var text1 = function(num1,num2){
				var s = num1 + num2;
				return s;
			}
			text1(43,5);
			//常用：结合js中的DOM中的事件
			
			
			//动态函数
			var result1 = new Function("num1,num2","var s = num1 + num2;return s;");
			var result2 = result1(34,54);
			document.write(result2);
			
		</script>
	</body>
</html>

全局函数

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<script type="text/javascript">
			//eval():识别字符串中的js代码
			var s1 = "alert('hello')";
			//document.write(s1);
			//eval(s1);
			
			
			//encodeURI:对字符串进行编码
			//decodeURI：对字符串进行解码
			var s2 = "测试中文aaaa text";
			var r0 = encodeURI(s2);
			document.write(r0);
			
			//%E6%B5%8B%E8%AF%95%E4%B8%AD%E6%96%87aaaa%20text
			
			document.write("<hr />");
			
			var r1 = decodeURI("%E6%B5%8B%E8%AF%95%E4%B8%AD%E6%96%87aaaa%20text");
			document.write(r1);
			
			//isNaN:如果是number或者可以转换为number，则返回false，否则返回true
			
			
			//parseInt()   parseFloat()，类似于Python中的int()和float(),将其他类型的数据转换为整型或者浮点型
			var s3 = "134";
			document.write(s3 + 1);   //1341
			document.write("<hr />");
			
			var num = parseInt(s3);
			document.write(num + 1);
			
			
		</script>
	</body>
</html>

3.全局变量和局部变量

全局变量：在script标签中定义一个变量，这个变量就可以当前文件的所有js部分使用

局部变量：在函数内部定义一个变量，该变量只能在函数的内部使用

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<script type="text/javascript">
			//全局变量
			var num1 = 10;
			document.write("当前script标签" + num1);
			
			document.write("<br />");
			
			function check(){
				//在函数内部定义的变量，只能在当前函数中被访问
				var num2 = 20;
				document.write("当前函数" + num2);
				
				//如果函数内部的变量想要在函数外部使用，则设置返回值
				return num2;
			}
			check();
			document.write("<br />");
			
			
			document.write("当前script标签中的局部变量" + check());
			document.write("<br />");
			
		</script>
		<script type="text/javascript">
			document.write("其他script标签" + num1);
			document.write("<br />");
			
			//document.write("其他script标签的局部变量" + num2);
		</script>
		
	</body>
</html>

4.js的对象

4.1string

字符串对象的创建
//单引号和双引号都可以表示字符串
var s1 = "hello";

var s2 = new String("hello");

var s3 = String("hello");
属性：字符串名称.length

函数：

concat():拼接，注意：拼接之后得到了一个新的字符串，对原字符串没有任何影响

charAt():获取指定索引处的字符

indexOf():获取子字符串在原字符串中第一次出现的下标

split():切割字符串，注意：得到的结果为一个数组

replace():字符串替换，用法：字符串名称.replace(old,new)
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<script type="text/javascript">
			var s1 = "hello";
			var s2 = "javascript";
			s1.concat(s2)
			document.write(s1);
			
			
			document.write(s1.charAt(2));
			
			
			var s3 = "my name is jack";
			var arr1 = s3.split(" ");
			for(var i in arr1){
				document.write(arr1[i] + "<br />");
			}
			
			
			
			var s4 = s3.replace("name","friends");
			document.write(s4);
			
			
		</script>
	</body>
</html>

4.2array对象

数组的创建方式

var arr1 = [23,43,5];

//初始化一个数组，该数组的初始容量为10
var arr2 = new Array(10);

//初始化一个数组，数组中的元素为23，3,5
var arr3 = new Array(23,3,5);

属性：数组名称.length

函数：

concat():得到的结果为一个数组

join():与split相反，将数组拼接成字符串

push():向数组的末尾添加元素，并且返回新的数组的长度【类似于append】

unshift（）：与push相反，向数组的头部添加元素

pop（）:删除末尾元素

shift()：删除头部元素

reverse():反转【Python中的list】

slice():截取数组【切片】

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<script type="text/javascript">
			var arr1 = [1,2,3];
			var arr2 = [4,5,6];
			document.write(arr1.concat(arr2));
			document.write("<br />");
			document.write(arr1);
			
			//结论：与Python中的列表和元组对比不相同，拼接得到的是一个新的数组，但是，数组又可以进行插入和删除的操作
		
			var arr3 = new Array(3);
			
			arr3[0] = 10;
			arr3[1] = 20;
			arr3[2] = 30;
			
			document.write(arr3.join("-"));
			document.write(typeof arr3.join("-"));
			
			
			document.write(arr1.reverse());
			
			//包头不包尾
			var arr4 = [23,5,4,54,5,45];
			document.write(arr4.slice(0,2));
		
		</script>
	</body>
</html>

4.3object对象

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<script type="text/javascript">
			//1.使用new创建object的对象
			var obj1 = new Object();
			//类似于Python，可以给对象动态的添加属性和方法
			obj1.name = "zhangsan";
			obj1.age = 19;
			obj1.func1 = function(){
				//this类似于Python中的self，表示当前的对象
				document.write("name is " + this.name + ",age is " + this.age);
			}
			
			obj1.func1();
			
			
			//2.使用字面量的方式创建object的对象
			var obj2 = {
				name:"tom",
				age:18,
				func2:function(){
					document.write("name is " + this.name + ",age is " + this.age);
				}
			}
			
			
			obj2.func2();
			
			//特殊用法
			//对象.属性
			document.write(obj2.name);  //tom
			//通过字面量的方式创建对象，本质是一个字典【区别于真正的字典】，访问方式：对象[属性]
			document.write(obj2["name"]);
			
		</script>
	</body>
</html>

4.4date对象

创建date对象

var date1 = Date("")
var date2 = new Date()

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<script type="text/javascript">
			//默认获取的是当前的时间
			//注意：不管Date()带不带参数，得到的结果都是当前的时间
			var date1 = Date("2018-3-17");
			document.write(date1);
			
			document.write("<hr />");
			
			
			//注意：如果不设置参数，则结果为当前时间，如果设置参数，则为设置的时间
			//年月日，时分秒，缺少哪个数据，则默认为00
			var date2 = new Date("2016-04-17");
			document.write(date2);
			document.write("<hr />");
			var date3 = new Date("2016/4/17");
			document.write(date3);
			
			document.write("<hr />");
			
			//参数：年月日时分秒毫秒
			var date4 = new Date(2017,3,28,10,10,10,546);
			document.write(date4);
			
			document.write("<hr />");
			
			//根据时间戳获取指定的时间
			var date5 = new Date(10000);
			document.write(date5);
			
			document.write("<hr />");
			
			//getxxx；获取
			//获取一个月中的第几天
			document.write(date4.getDate());
			document.write("<hr />");
			//0~11
			document.write(date4.getMonth());
			document.write("<hr />");
			
			
			//2016-4-17
			//setxxxx：设置,注意：如果月份超过11.则年份增加1
			date2.setMonth(13);
			document.write(date2);
			document.write("<hr />");
			
			//hour,minute
			
			
			document.write(date4.toLocaleDateString());
			document.write("<hr />");
			document.write(date4.toLocaleString());
			document.write("<hr />");
			document.write(date4.toLocaleTimeString());
			document.write("<hr />");
			
			
			//掌握
			//获取指定时间的时间戳【单位为毫秒】
			document.write(Date.parse("2015-6-18"));
			document.write("<hr />");
			
			//date对象之间可以进行加减运算
			var a1 = new Date("2016-10-10 10:10:10");
			var a2 = new Date("2016-10-10 10:10:13");
			
			//减法：相差的毫秒数
			document.write(a2 - a1);
			
			document.write("<hr />");
			
			//加法：拼接，string
			document.write(a1 + a2);
			document.write("<hr />");
			document.write(typeof (a1 + a2));
			
		</script>
	</body>
</html>

4.4math对象

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<script type="text/javascript">
			//格式：Math.函数()
			
			//四舍五入
			document.write(Math.round(4.6));   //5
			document.write("<br />");
			
			//向上取整 ceil
			document.write(Math.ceil(4.6));   //5
			document.write("<br />");
			
			//向下取整：floor
			document.write(Math.floor(4.6));   //4
			document.write("<br />");
			
			//abs
			
			
			//pow(n,m)  求n的m次方
			
			//sqrt()  开平方
			
			
			//random()  求随机数，0~1之间的随机数【浮点型】
			document.write(Math.random());
			document.write("<br />");
			
			//4~10
			document.write(parseInt(Math.random() * 6 + 4));
			
			
		</script>
	</body>
</html>

二、BOM

1.BOM简介

Broswer Object Model，浏览器对象模型，是一个用于访问浏览器的和计算机屏幕的对象的集合。可以通过全局对象window访问这些对象【通过window对象来控制BOM】

注意：在客户端的js中，如果定义的内容没有指明对象的话，则默认都属于window
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<script type="text/javascript">
			var name = "zhangsan";
			document.write(name);
			
			document.write(window.name);
		</script>
	</body>
</html>

2.window的使用

bom中的对象

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			body{
				background-color: red;
			}
		</style>
	</head>
	<body>
		
		<button onclick="func1();">跳到绿页面</button>
		<button onclick="func2();">刷新当前页面</button>
		<button onclick="func3();">跳到黄色页面</button>
		
		
		<button onclick="forwardPage();">下一页</button>
		
		<button onclick="goPage();">跳转到黄页面~~~~</button>
		
		<script type="text/javascript">
			//了解
			//window.document,文档对象【页面】，DOM中
			//window.frames:当前页面中所有框架的集合
			//window.navigator:反应浏览器及其功能信息的对象
			//window.screen:提供浏览器以外的信息【屏幕信息】
			
			//掌握
			//window.location
			/*
			 * href属性：控制浏览器地址栏内的内容【网址】
			 * 函数：
			 * 	reload():默认刷新当前页面，传参true，则表示刷新页面的时候不带缓存
			 * 	assign()：加载新的页面
			 * 	replace()：加载新的页面，和assign的区别在于：不会在浏览器的历史记录中留下记录
			 */
			function func1(){
				window.location.href = "greenWindow.html";
			}
			function func2(){
				window.location.reload();
			}
			function func3(){
				window.location.assign("yellowWindow.html");
			}
			
			
			//window.histroy，注意：必须先产生历史记录，然后该对象中的函数才能起作用
			/*
			 * 和历史记录有关
			 * 
			 * length属性:获取历史记录中的条数
			 * 函数：
			 * 	back()   上一页【上一条历史记录】
			 * 	forward()  下一页【下一条历史记录】
			 * 	go(num)  跳转到指定的历史记录  
			 * 		举例：
			 * 		红---》绿---》黄
			 *  	0      1      2   
			 * 		
			 * 		从红---》黄  go(2)  num为正数，则说明顺序
			 * 		从黄----》红  go(-2) ，num为负数，则说明逆序	
			 */
			function backPage(){
				window.history.back();
			}
			function forwardPage(){
				window.history.forward();
			}
			function goPage(){
				window.history.go(2);
			}
			
			
		</script>
	</body>
</html>

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			body{
				background-color: green;
			}
		</style>
	</head>
	<body>
		
		<button onclick="func1();">跳到黄色页面</button>
		
		<button onclick="backPage();">上一页</button>
		<button onclick="forwardPage();">下一页</button>
		<script type="text/javascript">
			function func1(){
				window.location.href = "yellowWindow.html";
			}
			
			
			function backPage(){
				window.history.back();
			}
			function forwardPage(){
				window.history.forward();
			}
		</script>
	</body>
</html>

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			body{
				background-color: yellow;
			}
		</style>
	</head>
	<body>
		
		<button onclick="goPage();">回到红页面</button>
		
		<script type="text/javascript">
			function goPage(){
				window.history.go(-2);
			}
			
		</script>
	</body>
</html>

window的函数

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<a href="greenWindow.html" target="_blank">打开绿色页面</a>
		
		<button onclick="func1();">打开</button>
		<button onclick="func2();">关闭</button>
		
		<script type="text/javascript">
			//open()
			function func1(){
				//需要打开的html文件的路径   打开方式    新窗口的设置
				window.open("greenWindow.html","blank","width=200px,height=400px,top=10px,left=10px");
			}
			
			
			//close()
			//注意：关闭是当前窗口，跟新打开的窗口没有关系
			function func2(){
				window.close();
			}
			
		</script>
	</body>
</html>

window的事件

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			body{
				height: 5000px;
			}
		</style>
	</head>
	<body>
		<h5>顶部</h5>
		<button onclick="goOn();" style="position: fixed;bottom: 50px; left: 10px;">回到顶部</button>
		<script type="text/javascript">
			//事件：当进行某种操作的时候会触发的行为，事件一般结合匿名函数使用
			/*
			 * 语法
			 * 
			 * 对象.事件 = function(){
			 * 	
			 * }
			 */
			
			//onload ：当整个html页面加载完毕的时候会自动触发事件
			//好处：为了保证当前页面中所有的内容【html标签，网络资源】加载完毕之后才会执行该事件
			/*window.onload = function(){
				alert("hello");
			}
			
			alert("js~~~~~");
			*/
			
			
			
			//onscroll：当浏览器窗口发生滚动的时候会自动触发的事件
			window.onscroll = function(){
				var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
				console.log(scrollTop);
			}
			
			function goOn(){
				document.documentElement.scrollTop = 0;
				document.body.scrollTop = 0;
			}
		
			
		</script>
		<!--回到顶部-->
		<!--<a href="#top"></a>-->
	</body>
</html>

3.提示框

alert():警告框

confirm()：确认框

prompt()：输入框

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<script type="text/javascript">
			window.onload = function(){
				//提示框/警告框
//				alert("hello js");


				//确认框
				/*var result = confirm("请确定或者取消");
//				document.write(result);
				if(result){
					//点击确认按钮，则需要进行一定的操作【实际的操作】
					
				}else{
					//点击取消按钮
				}
				*/
				
				//输入框
				//点击确定，则获取具体的数据；点击取消，则获取null
				var num = prompt("请输入一个数字",0);
				document.write(num);
				
				//跟Python中input的用法相同，获取的结果都是string
				document.write(typeof num);
				
				document.write(parseInt(num) + 10);
			}
		</script>
	</body>
</html>

4.定时器

4.1延时性定时器

作用：指定的时间之后触发定时器，只执行一次

4.2间歇性定时器

作用：每隔指定的事件触发定时器，至少会执行一次

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<script type="text/javascript">
			
			//1.间歇性定时器
			/*
			 * 创建定时器
			 * 	setInterval(函数名，时间)，单位为毫秒
			 * 	功能：创建一个间歇性定时器，每隔指定的时间会执行一次指定的函数
			 * 	返回值：定时器的id，用来唯一的标记当前的定时器，主要停止定时器的时候识别
			 * 
			 * 停止定时器
			 *  clearInterval(定时器的id)，清除定时器
			 * 
			 * 定时器实际上没有暂停一说，暂停一般指的是将现有的定时器清除掉，恢复指的是创建一个新的定时器
			 */
			//				function text(){
//					console.log("hello");
//				}
//				
//				var timer = setInterval(text,1000);
			
			//全局变量
			/*var timer1 = setInterval(function(){
					console.log("hello");
			},1000);
			
			
			
			function func1(){
				clearInterval(timer1);
			}
			
			//重新开启：
			timer1 = setInterval(function(){
					console.log("hello");
			},1000);*/
			
			
			
			//延时性定时器
			//创建：setTimeout(函数名，时间)
			//停止：clearTimeout(定时器的id)
			var timer = setTimeout(function(){
				console.log("fahegf");
			},10000);
			
			//clearTimeout(timer);
			
		</script>
		<!--<button onclick="func1()">启动</button>-->
		<button onclick="func1()">停止</button>
		
	</body>
</html>

三、DOM【重点】

1.DOM简介

Document Object Model.文档对象模型

document对象

想要对标记型文档【html】进行操作，首先需要将标记型文档中的内容【标签/标记/元素,属性，文本内容】封装成对象，封装成对象的目的是为了更方便的去操作文档以及文档中的内容

明确一点：在加载html页面的时候，web浏览器会生成一个树形结构，表示页面的内部结构，被称为DOM树【节点树】，见图
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>aaa</title>
	</head>
	<body>
		<div id="box">正文</div>
	</body>
</html>

2.获取元素/节点对象

getElementById():根据id的值获取指定的标签对象，返回的是对象【常用】

getElementByTagName():根据标签名称获取标签对象，返回集合

getElementByName()：根据name属性的值获取指定的标签对象，返回集合

getElementByClassName()：根据class属性的值获取指定的标签对象，返回集合【常用】

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<div>
			<input type="text" id="input1"/>
			<input type="text" id="input2"/>
			<input type="text" class="input3"/>
			<input type="text" class="input3" name="text1"/>
			<input type="text" class="input4" name="text1"/>
		
		</div>
		<script type="text/javascript">
			//js操作html的步骤
			//1.获取标签对象
			//注意：哪个对象调用下面的函数，该对象表示查找的范围
			var obj1 = document.getElementById("input1");
			document.write(obj1);   //[object HTMLInputElement]
			//2.执行相关的操作
			obj1.value = "hfjahegfj";
			
			document.write("<hr />");
			
			
			var obj2 = document.getElementsByClassName("input3");
			document.write(obj2);   //[object HTMLCollection]
			for(var i in obj2){
//				document.write(obj2[i]);

				//obj2[i]:匹配到的标签对象
				obj2[i].value = "jsjs";
			}
			
			document.write("<hr />");
			
			
			var obj3 = document.getElementsByName("text1");
			document.write(obj3);   //[object NodeList]
			
			
			
			var obj4 = document.getElementsByTagName("input");
			document.write(obj4);  //[object HTMLCollection]
			
			
			//如果只有一个标签，采用tagName,name,className获取
			var obj2 = document.getElementsByClassName("input3")[0];
			var obj3 = document.getElementsByName("text1")[0];
			var obj4 = document.getElementsByTagName("input")[0];
			 	
		</script>
		
	</body>
</html>