深入浅出JavaScript-老杜JavaScript基础教程全套完整版+老杨JS应用篇

p1/53 javascript概述

在这里插入图片描述
在这里插入图片描述

p2/53 HTML中嵌入javascript的第一种方式

在这里插入图片描述

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>HTML中嵌入javascript的第一种方式</title>
	</head>
	<body>
		
		<!-- 1、实现功能:点击按钮,弹出消息框
		     2、JS是事件驱动语言
			 3、事件和事件句柄
			 -->
		<input type="button"  value="hello" onclick="window.alert('hello js')"/>
		
		<input type="button"  value="hello" onclick="window.alert('hello zhangsan')"/>
		
		<!-- 好消息,window.可以省略 -->
		<input type="button"  value="hello" onclick="alert('hello mahzongjie')
		                                             alert('hello hajinwei')"
		"/>
	</body>
</html>

p3/53 回顾

p4/53 HTML中嵌入javascript的第二种方式

在这里插入图片描述

 <script type="text/javascript">
              // 暴露在脚本块中的代码,不需要事件的驱动,在页面打开时就执行
              window.alert("hello first")
         </script> 
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>HTML中嵌入javascript的第二种方式</title>
		
		<script type="text/javascript">
		      // 暴露在脚本块中的代码,不需要事件的驱动,在页面打开时就执行
		      window.alert("hello ppp1")
			   window.alert("hello ppp12")
			    window.alert("hello ppp13")
				 window.alert("hello ppp14")
		 </script> 
	</head>
	<body>
        <!-- 脚本块的方式 -->
        <script type="text/javascript">
              // 暴露在脚本块中的代码,不需要事件的驱动,在页面打开时就执行
              window.alert("hello js1")
			   window.alert("hello js2")
			    window.alert("hello js3")
				 window.alert("hello js4")
         </script> 
		<input type="button"  value="hello" />
		
		<input type="button"  value="hello" />
		
		<!-- 好消息,window.可以省略 -->
		<input type="button"  value="hello" />
	</body>
</html>
 <script type="text/javascript">
              // 暴露在脚本块中的代码,不需要事件的驱动,在页面打开时就执行
              window.alert("hello last")
         </script> 

在这里插入图片描述

p5/53 HTML中嵌入javascript的第三种方式

p6/53 JS的标识符【回顾java中的标识符和关键字】

在这里插入图片描述

p7/53 回顾java中的变量

在这里插入图片描述
在这里插入图片描述

p8/53 JS的变量

在这里插入图片描述

p9/53 JS的函数初步

在这里插入图片描述
在这里插入图片描述在这里插入图片描述

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>JS的函数</title>
	</head>
	<body>
		<script type="text/javascript">
			/* 1、js中的函数类似于java中的方法 
			   2、格式:
					function 函数名(形式参数列表){
						函数体;
					}
			*/
		   function sum(a,b){
			   alert(a+b);
		   }
		   // 函数必须调用才会执行
		   //sum(10,20);
		   
		   //定义函数sayHello
		   function sayHello(username){
			   alert("hello"+username);
		   }
		   
		   //sayHello("mazhongjie");

		</script>
		<input type="button" name="" id="" value="hello"  onclick="sayHello('hajinwei')"/>
		<input type="button" name="" id="" value="计算10和20的和"  onclick="sum(10,20)"/>
		
	</body>
</html>

p10/53 JS的函数初步2

在这里插入图片描述在这里插入图片描述

p11/53 全局变量和局部变量

在这里插入图片描述在这里插入图片描述
在这里插入图片描述

p12/53 JS的数据类型

在这里插入图片描述
在这里插入图片描述

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>JS中的数据类型</title>
	</head>
	<body>
		
		<script type="text/javascript">
			
			function sum(a,b){
				if(typeof a == "number" && typeof b == "number") {
					return a+b;
				}
				alert(a+","+b+"必须都是数字");
			}
			var retValue = sum(2,4);
			alert(retValue);
			
			var retValue2 = sum(false,"jack");//
			alert(retValue2);//undefined
			
			var i;
			alert(typeof i);//undefined
			
			var k = 10;
			alert(typeof k);
			
			var f = "abc";
			alert(typeof f);
			
			var d = null;
			alert(typeof d);
			
			var flag = false;
			alert(typeof flag);
			
			var obj = new Object();
			alert(typeof obj);
		</script>
	</body>
</html>

p13/53 JS的数据类型【Undefined类型】

在这里插入图片描述

p14/53 JS的数据类型【Number类型】

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<script type="text/javascript">
			
			
			
			
			function sum(a,b){
				if(isNaN(a) || isNaN(b)){
					alert("参与运算的必须都是数字");
					return;
				}
				return a+b;
			}
			 var retValue = sum(3,67.88);
			 alert(retValue);
			 
			 sum(false,"aaa");
			 
			 
			 alert(parseInt(33.00000084586));
			 alert(parseFloat(3.14)+1);
			 alert(Math.ceil(3.5));
			 
			 
		</script>
	</body>
</html>

p15/53 JS的数据类型【Boolean类型】

if()语句后面只能是true和false
在这里插入图片描述

在这里插入图片描述

p16/53 回顾数据类型【捎带着讲了下面试技巧】

JS是一种弱类型语言
在这里插入图片描述
没有函数重载,后面的函数会自动覆盖前面的同名函数。
局部变量在函数体内定义的
函数的形参是局部变量
定义时不是使用var,不管是在哪个位置定义,都是全局变量
typeof运算结果是字符串。
面试技巧

p17/53 String数据类型【1、大String和小String的区别2、substr和substring的区别】

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

p18/53 Object数据类型

在这里插入图片描述

在这里插入图片描述
在这里插入图片描述

在这里插入图片描述

p19/53 Object数据类型2【定义类和构造函数同时完成】

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

p20/53 Object数据类型【prototype()】

在这里插入图片描述
在这里插入图片描述

p21/53 null、NaN和undefined的区别

在这里插入图片描述

p22/53 JS中的常用事件【概述】

在这里插入图片描述

p23/53 注册事件的两种方式【1、注册事件的第一种方式2、回调函数的概念】

在这里插入图片描述
在这里插入图片描述

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>注册事件的第一种方式</title>
	</head>
	<body>
		<script type="text/javascript">
			function doSome(){
				alert("do some..........");
			}
		</script>
		<input type="button" name="" id="" value="dosome" onclick="doSome()"/>
		
	</body>
</html>

p24/53 注册事件的第二种方式【使用纯js代码完成】

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>注册事件的第二种方式</title>
	</head>
	<body>
		<input type="button" name="" id="mybutton" value="doOther" />
		<input type="button" name="" id="mybtn2" value="hello" />
		<!-- <script type="text/javascript">
			function doOther(){
				alert("do Other..............");
			}
			var btnObj = document.getElementById("mybutton");
			btnObj.onclick = doOther;//此处方法名不能加小括号,也不能加双引号
		</script> -->
		
		<!-- 合并在一起 -->
		<script type="text/javascript">
			document.getElementById("mybtn2").onclick = function(){
				alert("hello hello hello");
			}
		</script>

	</body>
</html>

p25/53 JS代码的执行顺序

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		
		<script type="text/javascript">
		
		//     window.onload = ready;
		// 	function ready(){
		// 		var btn = document.getElementById("btn");
		// 		btn.onclick = function(){
		// 			alert("啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊");
		// 	    }
		// 	}
		
		    window.onload = function (){
			    document.getElementById("btn").onclick = function(){
					alert("啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊");
			    }
		    }
		
		</script>
		<input type="button" name="" id="btn" value="hello" />
		
	</body>
</html>

p26/53 JS代码设置节点的属性【将文本框修改为复选框】

在这里插入图片描述

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>018-JS代码设置节点的属性【将文本框修改为复选框】</title>
	</head>
	<body>
		<script type="text/javascript">
			window.onload = function (){
				document.getElementById("btn").onclick = function(){
					var mytext = document.getElementById("mytext");
					mytext.type = "checkbox";
				}
			}
		</script>
		<input type="text" id="mytext"/>
		<input type="button" id="btn" value="将文本框修改为复选框" />
	</body>
</html>

p27/53 JS捕捉回车键【输入用户名和密码后直接回车键登录】

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>019-JS代码捕捉回车键</title>
	</head>
	<body>
		<script type="text/javascript">
			window.onload = function (){
				var usernameElt = document.getElementById("username");
				//获取键值。如果是回车键,再执行。
				//回车键的键值是13
				//ESC的键值是27
				//下面的参数e表示接收了浏览器调用函数时发生的事件,即keydown事件
				usernameElt.onkeydown = function(event){
					//获取键值
					//对于键盘事件来说。都有keyCode属性来获取键值
					//alert(event.keyCode);
					if(event.keyCode === 13){
						alert("正在进行验证!");
					}	
				};
			}
		</script>
		<input type="text" name="" id="username"  />
	</body>
</html>

在这里插入图片描述

p28/53 JS捕捉回车键【理解】

p29/53 void 运算符【面试题:2变成8(位运算)、面试技巧】

在这里插入图片描述

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>void运算符</title>
	</head>
	<body>
		
		<p>页面顶部</p>
		<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
		<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
		<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
		<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
		<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
		<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
		
		
		<a href="javascript:void(0000)" onclick="window.alert('test code')">既保留住超链接的样式
		同时用户点击该连接的时候执行一段js代码,但页面不能跳转</a>
	</body>
</html>

p30/53 JS之控制语句

在这里插入图片描述

在这里插入图片描述

p31/53 设置和获取文本框的value

在这里插入图片描述

BOM和DOM的关系
在这里插入图片描述在这里插入图片描述

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<!-- <script type="text/javascript">
			window.onload = function(){
				var btnObj = document.getElementById("btn");
				alert(btnObj);
			}
		</script>
		<input type="button" id="btn" value="hello" /> -->
		
		
		<script type="text/javascript">
			
			
			window.onload = function(){
				var btnEle = window.document.getElementById("btn");
				btnEle.onclick = function (){
					// var usernameEle = window.document.getElementById("username");
					// //alert(usernameEle.value);
					// var username = usernameEle.value;
					// alert(username);
					
					//上面代码可以合并在一起写
					alert(document.getElementById("username").value);
					
					//可以修改它的value
					//document.getElementById("username").value = "张三";
					
					//点击button,使上面文本框的值填入下面文本框中
					//document.getElementById("username1").value = (document.getElementById(("username2").value));
					
					
				
				}
				document.getElementById("setbtn").onclick = function(){
					//alert(document.getElementById("username1").value);
					document.getElementById("username2").value = (document.getElementById("username1").value);
					
				}
			}

		</script>
		<input type="text" name="" id="username" />
		<input type="button" name="" id="btn" value="获取文本框的value" />
		
		<hr >
		<hr >
		
		<input type="text" name="" id="username1" value="" />
		<input type="text" name="" id="username2" value="" />
		
		<input type="button" name="" id="setbtn" value="将第一个文本框的数据赋值到第二个文本框中" />
		
	</body>
</html>

失焦事件onblur

		<input type="text"  onblur="alert(this.value)"/>

p32/53 innerHTML和innerText操作div和span

在这里插入图片描述

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			#div1{
				background: greenyellow;
				width: 300px;
				height: 400px;
				position: absolute;
				top: 80px;
				left: 40px;
			}
		</style>
		
	</head>
	<body>
		<script type="text/javascript">
			window.onload = function (){
				var btnEle = document.getElementById("btn");
			    btnEle.onclick = function(){
				//设置div内容,
				//第一步:获取div对象
				var divElt = document.getElementById("div1");
				//divElt.innerHTML = "这是一个测试的方法";
				//divElt.innerHTML = "<font color='black'>用户名不能为空</font>";
				divElt.innerText = "<font color='black'>用户名不能为空</font>";
			}
			}
			
		</script>
		<input type="button" name="" id="btn" value="设置div中的内容" />
		<div id="div1" ></div>
	</body>
</html>

p33/53 JS-正则表达式

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

在这里插入图片描述

p34/53 JS-邮箱地址的正则表达式

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		
		<script type="text/javascript">
			window.onload = function(){
				//给按钮绑定click事件
				document.getElementById("btn").onclick = function(){
					var email = document.getElementById("email").value;
					var emailRegExp = /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/;
					var ok = emailRegExp.test(email);
					var span = document.getElementById("emailError");
					//alert(ok?'邮箱格式正确':'邮箱格式错误,请重新输入!');
					if(ok){
						span.innerText = "邮箱格式合法,请输入密码!";
					}else{
						span.innerText = "邮箱格式不合法,请重新输入!";
					}
				}
				//给文本框绑定focus
				document.getElementById("email").onfocus = function (){
					document.getElementById("emailError").innerText = "";
				}
			}
		</script>
		<input type="text" name="" id="email" value="" />
		<input type="button" name="" id="btn" value="验证邮箱" />
		<span id="emailError" style="color: red;font-size: 12px; position: absolute;top: 40px;left: 20px;"></span>
	</body>
</html>

p35/53 JS-扩展字符串的trim函数【去除用户名的前后空白】

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<script type="text/javascript">
			String.prototype.trim = function (){
				//alert("扩展之后的trim方法")
				//去除空白
				return this.replace(/^\s+/,"").replace(/\s+$/,"")
			}
			
			
			window.onload = function(){
				document.getElementById("btn").onclick = function(){
					var username = document.getElementById("username").value;
					//去除前后空白
					username = username.trim();
					alert("--------->"+username+"<----------");
				}
			}
		</script>
		
		<input type="text" name="" id="username" value="" />
		<input type="button" name="" id="btn" value="获取用户名" />
	</body>
</html>

在这里插入图片描述

p36/53 回顾JS

p37-40/53 表单验证

在这里插入图片描述
在这里插入图片描述

在这里插入图片描述

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>表单验证</title>
		<style type="text/css">
			span{
				color: red;
				font-size: 12px;
	
		</style>
	</head>
	<body>
		<script type="text/javascript">
			window.onload = function(){
				/* ==================================验证用户名=============================== */
				//拿到usernameElt文本框
				var usernameElt = document.getElementById("username");
				//在右侧span中提示信息。拿到usernameinfoElt框
				var usernameinfoElt = document.getElementById("usernameinfo");
				//给用户名文本框绑定onblur事件
				usernameElt.onblur = function(){
					//拿到用户名的输入值
					var username = usernameElt.value;
					//去除空白
					username = username.trim();
					// 判断用户名是否为空
					if(username){
						//走到这里,说明用户名不为空,继续判断用户名是否合法;
						//1、判断用户名是否为4-16位
						if(username.length<6 || username.length>14){
							usernameinfoElt.innerText = "用户名长度必须在[6,14]之间";
						}else{
							//创建正则表达式,判断是否是只有数字和字母组成
							var usernameregExp = /^[A-Za-z0-9]+$/;
							var usernameOk = usernameregExp.test(username);
							if(usernameOk){
								usernameinfoElt.innerText = "";//用户名合法
							}else{
								usernameinfoElt.innerText = "用户名只能由字母和数字组成";
							}
						}
					}else{
						usernameinfoElt.innerText = "用户名不能为空";
					}
				  }
				  //给用户名文本框绑定focus事件
				  usernameElt.onfocus = function(){
					  
					  //usernameElt.value = "";//光标放在文本框中时,将之前输入的空白删除。但是注意,只删除非法信息。
					/*  if(不合法){
						  usernameElt.value = "";
					  } */
					  //怎么判断是否合法呢,只要后面usernameinfo有提示信息,就表示不合法
					  if(usernameinfoElt.innerText != ""){
						  usernameElt.value = "";
					  }
					  //清空
					  usernameinfoElt.innerText = "";//清空span提示框
				  }
				  
				  /* ==================================验证密码=============================== */
				  //验证密码,主要验证密码和确认密码是否一致
				  //获取确认密码框对象
				  var password2Elt = document.getElementById("password2");
				  //获取确认密码提示框
				  var password2info = document.getElementById("password2info");
				  //绑定blur事件
				  password2Elt.onblur = function(){
					   //获取密码和确认密码
					   var password = document.getElementById("password").value;
					   var password2 = password2Elt.value;
					   if(password === password2){
						   
					   }else{
						   password2info.innerText = "两次输入密码不一致";
					   }
				  }
				 //给密码确认绑定focus事件
				 password2Elt.onfocus = function(){
					 if(password2info.innerText != ""){
					 	password2Elt.value = "";
					 }
					 //清空
					 password2info.innerText = "";//清空span提示框
				 }
				 
				 
				  /* ==================================验证邮箱=============================== */
				  //给邮箱文本框绑定onblur事件
				 var emailElt = document.getElementById("email");
				 //获取emailinfo提示框
				 var emailinfoElt = document.getElementById("emailinfo");
				 emailElt.onblur = function (){
					 //拿到邮箱的value
					 var email = emailElt.value;
					 //去除空白
					 email = email.trim();
					 //判断邮箱是否合法
					 if(email){
						//创建验证邮箱的正则表达式
						var emailRegExp = /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/g;
						var emailOk = emailRegExp.test(email);
						if(emailOk){
							//邮箱合法
						}else{
							emailinfoElt.innerText="邮箱格式不正确";
						}			  						 
					 }else{
							emailinfoElt.innerText="邮箱不能为空";
					 } 					 
				  }
				  //给邮箱绑定focus事件
				  emailElt.onfocus = function(){
				  	if(emailinfoElt.innerText != ""){
				  		emailElt.value = "";
				  	}
				  	//清空
				  	emailinfoElt.innerText = "";//清空span提示框				
				  }
				  
				  //提交注册
				  var submitBtn = document.getElementById("submitBtn");
				  submitBtn.onclick = function(){
					  //如果所有表单信息都是合法的。那就提交表单
					  //模拟focus、blur事件
					  usernameElt.focus();
					  usernameElt.blur();
					  
					  password2Elt.focus();
					  password2Elt.blur();
					  
					  emailElt.focus();
					  emailElt.blur();
					  if(usernameinfoElt.innerText == "" && password2info.innerText == "" && emailinfoElt.innerText == ""){
						  //获取表单对象
						  var userFormElt = document.getElementById("userForm");
						  userFormElt.submit();//提交表单
					  }
				  }
				  
				
				}
		</script>
		
		<form id="userForm" action="http://localhost:8080/jd/save" method="get">
			<table border="">
				<tr>
					<th>用户名</th>
					<th><input type="text" name="username" id="username" value="" /></th>
					<th><span id="usernameinfo" ></span></th>
				</tr>
				
				<tr>
					<th>密码</th>
					<th><input type="password" name="password" id="password" value="" /></th>
				</tr>
				
				<tr>
					<th>确认密码</th>
					<th><input type="password" id="password2" value="" /></th>
					<th><span id="password2info"></span></th>
				</tr>
				
				<tr>
					<th>邮箱</th>
					<th><input type="text" name="email" id="email" value="" /></th>
					<th><span id="emailinfo"></span></th>
				</tr>
				
				<tr>
					<th><input type="reset" name="" id="reset" value="重置" /></th>
					
					<th><input type="button" name="" id="submitBtn" value="注册" /></th>
				</tr>
		
		<span id="Info"></span>
		</table>
		</form>
	</body>
</html>

p41/53 复选框的全选和取消

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>复选框的全选和取消全选</title>
	</head>
	<body>
		<script type="text/javascript">
			// window.onload = function(){
			// 	var checkAllElt = document.getElementById("checkAll");
			// 	checkAllElt.onclick = function(){
			// 		var aihaos = document.getElementsByName("aihao")//此时获得三个元素,aihaos是一个数组
			// 		//先获取第一个复选框的选中状态
			// 		if(checkAllElt.checked){
			// 			//如果checkAll是选中的,那就全选其他
			// 			//使用for循环遍历aihaos
			// 			for(var i = 0;i<aihaos.length;i++){
			// 				aihaos[i].checked = true;
			// 			}
			// 		}else{
			// 			//取消全选
			// 			for(var i = 0;i<aihaos.length;i++){
			// 				aihaos[i].checked = false;
			// 			}
			// 		}
			// 	}
			// }
			//简化上面的代码
			window.onload = function(){
				var checkAll = document.getElementById("checkAll");
				var aihaos = document.getElementsByName("aihao");
				checkAll.onclick = function(){
					for(var i = 0;i<aihaos.length;i++){
						aihaos[i].checked = checkAll.checked;
					}
				}
				var all = aihaos.length;
				for(var i = 0;i<aihaos.length;i++){
					aihaos[i].onclick = function(){
						//总数量和选中的数量相等时,就把checkall选中
						var checkCount = 0;
						for(var i = 0;i<aihaos.length;i++){
							if(aihaos[i].checked){
								checkCount++;
							}
						}
						// if(all == checkCount){
						// 	checkAll.checked = true;
						// }
						// else{
						// 	checkAll.checked = false;
						// }
						//对以上代码改进
						checkAll.checked = (all == checkCount);
					}
				}
			}
		</script>
		<br>
		<input type="checkbox" name="" id="checkAll" value="" /><br>
		<input type="checkbox" name="aihao" id="smoke" value="" />抽烟<br>
		<input type="checkbox" name="aihao" id="drink" value="" />喝酒<br>
		<input type="checkbox" name="aihao" id="tt" value="" />烫头<br>
		
	</body>
</html>

p42/53 获取下拉列表选中项9的value

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>获取下拉列表选中项的value</title>
	</head>
	<body>
		<!-- <select name="" οnchange="alert(111)">

			<option value ="">--请选择省份--</option>
			<option value ="001">河北省</option>
			<option value ="002">甘肃省</option>
			<option value ="003">陕西省</option>
			<option value ="004">黑龙江省</option>
	
		</select> -->
		<!-- 改进,使用window.onload方式 -->
		<script type="text/javascript">
			window.onload = function(){
				provinceList.onchange = function(){
					alert(provinceList.value)
				}
			}
		</script>
		<select id="provinceList">
		
			<option value ="">--请选择省份--</option>
			<option value ="001">河北省</option>
			<option value ="002">甘肃省</option>
			<option value ="003">陕西省</option>
			<option value ="004">黑龙江省</option>
			
		</select>
	</body>
</html>

p43/53 周期函数setInterval和clearInterval

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>008-显示网页时钟</title>
	</head>
	<body>
		<script type="text/javascript">
			<!-- 关于JS中获取系统当前时间/日期 -->
			var nowDate = new Date();
			//document.write(nowDate);//Thu Apr 22 2021 10:39:48 GMT+0800 (中国标准时间)
			//转换一下日期的显示格式
			nowDate = nowDate.toLocaleString();
			document.write(nowDate);//2021/4/22上午10:42:27
			document.write("<br>");
			document.write("<br>");
			document.write("<br>");
			//可以自定义显示格式
			var t = new Date();
			var year = t.getFullYear();
			var month = t.getMonth();//0-11
			var day = t.getDate();//获取日信息
			document.write(year+"年"+(month+1)+"月"+day+"日");
			
			document.write("<br>");
			document.write("<br>");
			document.write("<br>");
			
			//重点,怎么获取毫秒数?从1970年1月1日
			var times = t.getTime()
			document.write(times);//一般会将毫秒数当作时间戳
			
			document.write("<br>");
			document.write("<br>");
			
			//合并
			document.write(new Date().getTime())
		</script>
		
		<br><br><br>
		
		<!-- 点击按钮,显示系统时间 -->
		<script type="text/javascript">
			
			function displayTime(){
				var nowTime = new Date();
				nowTime = nowTime.toLocaleString();
				document.getElementById("timeDiv").innerText = nowTime;
			}	  
			//上面函数存在一个问题,就是点击之后才会显示时间,不会自动更新显示的时间,如何解决?每隔一秒调用这个函数即可。
			function start(){
				//从这行代码开始,每隔1s就会自动调用第三playTime()函数
				v = window.setInterval("displayTime()",1000);//变量前面不加var,就是一个全局变量。
			}
			//如停止时间显示呢
			function stop(){
				window.clearInterval(v);
			}
			
		</script>
		<input type="button" name="" id="timebtn" value="显示系统时间" onclick="start();"/>
		<input type="button" name="" id="timebtnstop" value="停止显示时间" onclick="stop();"/>
		<div id="timeDiv">
			
		</div>
	</body>
</html>

p44/53 内置支持类array

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>009-内置支持类array</title>
	</head>
	<body>
		<script type="text/javascript">
			//创建数组方法1
			var s = [1,2,34,4,"abc",3,14,false];
			//document.write(s);
			document.write(s.length);
			s[9] = "mazhongjie";
			
			document.writeln();
			
			for(var i = 0;i<s.length;i++){
				document.write(s[i]+"<br>");
			}
			//创建数组方法2
			var s3 = new Array(3);//只有一个参数3代表数组长度
			document.write(s3.length);
			
			document.write("<br>");
					
			var s4 = new Array(3,2);//两个及以上参数代表具体的值
			document.write(s4.length);
			
			document.write("<br>");
			
			//常用方法.连接
			var a1 = [1,3,5,8];
			var str1 = a1.join("-");
			document.write(str1);
			
			document.write("<br>");
			//反转数组
			var a2 = a1.reverse();
			var str2 = a2.join("=");
			document.write(str2);
			
			document.write("<br>");
			//自动模拟栈数据结构push
			a1.push(100);
			a1.push(99);
			for(var i = 0;i<a1.length;i++){
				document.write(a1[i]+"<br>");
			}
			document.write("+++++++++++++++++++++++++++++++");
			//自动模拟栈数据结构pop
			a1.pop();
			for(var i = 0;i<a1.length;i++){
				document.write(a1[i]+"<br>");
			}
		</script>
	</body>
</html>

p45/53 BOM编程,window的open和close

在这里插入图片描述

在这里插入图片描述

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>window窗口的open和close</title>
	</head>
	<body>
		<script type="text/javascript">
			
		</script>
		<input type="button"value="开启百度(新窗口)" οnclick="window.open('https://www.baidu.com');"/>
		<input type="button"value="开启百度(当前窗口)" οnclick="window.open('https://www.baidu.com','_self');"/>
		<input type="button"value="开启百度(新窗口)" οnclick="window.open('https://www.baidu.com','_blank');"/>
		<input type="button"value="开启百度(父窗口)" οnclick="window.open('https://www.baidu.com','_parent');"/>
		<input type="button"value="开启百度(顶级窗口)" οnclick="window.open('https://www.baidu.com','_top');"/>
		<input type="button"value="打开马仲杰的主页" οnclick="window.open('马仲杰的主页.html');"/>
	</body>
	
</html>

p46/53 BOM编程弹出确认框alert()和confirm()

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>消息框和确认框</title>
	</head>
	<body>
		<script type="text/javascript">
			function del(){
				var ok = window.confirm("确认要删除数据吗");
				if(ok){
					alert("正在删除")
				}else{
					
				}
			}
		</script>
		<input type="button" name="" id="" value="弹出消息框" onclick="window.alert('消息框!')"/>
		<input type="button" name="" id="" value="弹出确认框[是否删除]" onclick="window.del();" />
	</body>
</html>

p47/53 BOM编程history和location

前进和后退

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>007</title>
	</head>
	<body>
		007页面
		<input type="button" name="" id="" value="后退1" onclick="window.history.back()"/>
		<input type="button" name="" id="" value="后退2" onclick="window.history.go(-1)"/>
		
	</body>
</html>

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>history</title>
	</head>
	<body>
		<a href="007.html">007页面</a>
		<input type="button" name="" id="" value="前进" onclick="window.history.go(1)"/>
	</body>
</html>

location

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>location</title>
	</head>
	<body>
		<script type="text/javascript">
			function goBaidu(){
				window.location.href="https://baidu.com";
			}
		</script>
		<input type="button" name="" id="" value="百度" onclick="goBaidu()"/>
	</body>
</html>
<!-- 浏览器向服务器发请求的方法
	1、超链接
	2、表单form的提交
	3、document.location
	4、window.location
	5、window.open('url')
	-->

p48/53 补录p47location和顶级窗口

在这里插入图片描述

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		005页面
		
		<script type="text/javascript">
			//如果005页面不是当前页面的顶层窗口的话,就将当前窗口改为顶层窗口
			function setTop(){
				//console.log((window.top != window.self))
				if(window.top != window.self){
					//如果当前窗口不是顶级窗口的话,就将其设置为顶级窗口
					window.top.location = window.self.location;
				}
				
			}
		</script>
		<input type="button" name="" id="" value="改为顶层窗口" onclick="setTop();" />
	</body>
</html>

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<script type="text/javascript">
	
		</script>
		<iframe src="005.html" width="800" height="400"></iframe>
	</body>
</html>

p49/53 JSON在开发中应用【比较XML和JSON】

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<script type="text/javascript">
			//使用JSON定义类,创建对象
			var studentObj = {
				"sno":"110",
				"sname":"张三",
				"sex":"男",
			}
			//访问JSON对象
			alert(studentObj.sno+","+studentObj.sname+","+studentObj.sex);
			 //在JS中定义类,创建对象
			 Student = function(sno,sname,sex){
				 this.sno = sno;
				 this.sname = sname;
				 this.sex = sex;
			 }
			 var s1 = new Student("11","张三","男");
			 alert("学号:"+s1.sno+",姓名:"+s1.sname+",年龄:"+s1.sex);
			 
			//JSON数组
			var students = [
				{"sno":"120","sname":"李四","sex":"男"},
				{"sno":"121","sname":"王五","sex":"男"},
				{"sno":"122","sname":"张麻子","sex":"男"},
			];
			for(var i=0;i<students.length;i++){
				alert("学号:"+students[i].sno+",姓名:"+students[i].sname+",年龄:"+students[i].sex);
			}
			
		</script>
	</body>
</html>

p50/53 JSON在开发中应用2

在这里插入图片描述

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>002-复杂一点的JSON</title>
	</head>
	<body>
		<script type="text/javascript">
			var user = {
				"usercode" : "110",
				"username" : "张三",
				"sex" : "男" ,
				"address" : {
					"city": "北京市",
					"street":"大兴区",
					"zipcode":"1212121",
				},
				"aihaos":["somke","drink","tt"]
			};
			alert(user.username+"居住在"+user.address.city);
			
			
			//设计一个JSON格式的数据描述班级中的每一个人的信息以及总人数
			var JSON = {
				"totalNum":3,
				"students":[
					{"sno":"111","sname":"张三","sex":"男"},
					{"sno":"112","sname":"李四","sex":"女"},
					{"sno":"113","sname":"王五","sex":"男"}
				],
			}
			alert("班级总人数为"+JSON.totalNum+","+JSON.students[0].sno+","+JSON.students[0].sname+","+JSON.students[0].sex);
			alert("班级总人数为"+JSON.totalNum+","+JSON.students[1].sno+","+JSON.students[1].sname+","+JSON.students[1].sex);
			alert("班级总人数为"+JSON.totalNum+","+JSON.students[2].sno+","+JSON.students[2].sname+","+JSON.students[2].sex);
		</script>
	</body>
</html>

p51/53 JSON在开发中应用3【eval函数】

在这里插入图片描述
在这里插入图片描述

p52/53 JSON在开发中应用4【面试题】

JS中,[ ]和{ }的区别:
中括号是数组,大括号是JSON
在这里插入图片描述

在这里插入图片描述

p53/53 JSON在开发中应用5【设置table的tbody】

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>005-设置table的tbody</title>
	</head>
	<body>
		<script type="text/javascript">
			//有这些JSON数据
			var data = {
				"total":4,
				"emps":[
					{"empno":7369,"ename":"SMITH","sal":800.0},
					{"empno":7369,"ename":"SMITH","sal":800.0},
					{"empno":7369,"ename":"SMITH","sal":800.0},
					{"empno":7369,"ename":"SMITH","sal":800.0}
				]
			};
			//点击按钮显示员工信息列表,将上面的JSON数据显示到下面的表格中
			//第一步:先拿到按钮
			window.onload = function(){
				var displayBtnElt = document.getElementById("displayBtn");
				displayBtnElt.onclick = function(){
					var emps = data.emps;
					//准备一个html变量接收拼好的串
					var html = "";
					for (var i = 0;i<emps.length;i++) {
						var emp = emps[i];
						html += "<tr>";
						html +=	"<td>"+emp.empno+"</td>";
						html +="<td>"+emp.ename+"</td>";
						html +="<td>"+emp.sal+"</td>";
						html +=	"</tr>";
					}
					//要往tbody中写,先拿到tbody对象
					document.getElementById("emptbody").innerHTML = html;
					document.getElementById("count").innerHTML = data.total;
	
				}
			}

		</script>
		<input type="button" name="" id="displayBtn" value="显示员工列表" />
		<hr >
		<table border="1px" cellspacing="" cellpadding="">
			<tr>
				<th>员工编号</th>
				<th>员工姓名</th>
				<th>员工薪资</th>
			</tr>
			<tbody id="emptbody">
					<!-- <tr>
					<th>7369</th>
					<th>SMITH</th>
					<th>800</th>
					</tr>

					<tr>
						<th>7369</th>
						<th>SMITH</th>
						<th>800</th>
					</tr>
					
					<tr>
						<th>7369</th>
						<th>SMITH</th>
						<th>800</th>
					</tr> -->
			</tbody>
		</table>
		总共<span id="count">0</span>条记录
	</body>
</html>

在这里插入图片描述

在这里插入图片描述
在这里插入图片描述

================================================================================================================================================2021.4.22完结

2021.5.12第一遍复习

  • 7
    点赞
  • 25
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值