JavaScript02

最新推荐文章于 2022-07-27 12:08:41 发布

向上的青春233

最新推荐文章于 2022-07-27 12:08:41 发布

阅读量153

点赞数

分类专栏： JavaWeb 文章标签： js javascript java html

本文链接：https://blog.csdn.net/weixin_44006686/article/details/116148273

版权

JavaWeb 专栏收录该内容

7 篇文章 1 订阅

订阅专栏

JS的代码执行顺序

第一种方法:

<body onload="ready()">
		
		
		<script type="text/javascript">
			function ready(){
				var btn = document.getElementById("btn");
				btn.onclick = function(){
					alert("Hello js");
				}
			}
			
		</script>
		<input type = "button" value = "hello" id= "btn"/>
	</body>

换一种:

<body>
		<script type="text/javascript">
            //页面加载的过程中,将a函数注册给了load事件
            //界面加载完毕后,load事件发生了,此时执行回调函数a
			window.onload=function(){//这个回调函数叫做a
				var btn = document.getElementById("btn");
				btn.onclick = function(){//这个回调函数叫做b
					alert("Hello js");
				}
			}	
		</script>
		<input type = "button" value = "hello" id= "btn"/>
	</body>

JS代码设置节点的属性

一个节点中有的属性就可以.出来

键盘事件

keydown事件可以捕捉键盘操作

捕捉回车

键盘事件都有keycode属性

<script type="text/javascript">
			window.onload = function(){
				var usernameElt = document.getElementById("username");
				//回车键值是13
				//esc键的键值是27
				// usernameElt.onkeydown = function(a){
				// 	//获取键值 
				// 	//对于键盘事件对象来说,都有keycode属性用来获取键值
				// 	alert(a.keyCode);	
				// }
				usernameElt.onkeydown = function(a){
					if(a.keyCode === 13 ){
						alert("正在验证中");
					}
				}
			}
		</script>

JS中的void运算符

void运算符的语法:void(表达式)

运算原理:执行表达式,但不返回任何结果

<.a href=“javascript:void(0)” onclick = “window.alert(‘test code’)”></.a>

这行代码点击之后什么都不会跳转,如果不写这个javascript:,浏览器会当做路径来看

JS的控制语句

if
switch
while
do…while
for循环
break
continue
for…in语句(了解)
with语句(了解)

//创建JS数组:
var arr = [false,true,1,2,"abc"]; //JS中数组类型没有限制
//遍历数组
for(vari = 2;i<arr.length;i++){
    
}
//for...in 了解	
for(var i in arr){
    alert(arr[i]);
}
//for...in语句可以遍历对象的属性
//with,相当于在前面自动添加u.
with(u){
    alert(username +"," +password);
}

JS三大块

ECMAScript:JS的核心语法
DOM:文档对象模型:对网页当中节点进行增删改的过程.HTML被当做一颗DOM树来看待

var domObj = documeny.getElementById(“id”);
BOM:关闭浏览器窗口,打开一个新的浏览器窗口,后退,前进,浏览器地址栏上的地址等,都是BOM编程

DOM和BOM的区别和联系:

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-5kDv9qFU-1619408034026)(C:\Users\14505\AppData\Roaming\Typora\typora-user-images\image-20210423111131317.png)]$

BOM的顶级对象是:window
DOM的顶级对象是:document

实际上BOM是包括DOM的

DOM编程

InnerHTML和innerText操作div和span

innerText和InnerHTML属性有什么区别?

相同点:都是设置元素内部的内容

不同点:

innerHTML会把后面的"字符串"当做一段HTML代码解释并执行
innerText即使后面是一段html代码,也只是将其当做普通的字符串来看待

<head>
		<meta charset="utf-8">
		<title></title>
		<style type = "text/css">
			#div1{
				background-color: aquamarine;
				width: 300px;
				height: 300px;
				border: 1px black solid;
				position: absolute;
				top: 6.25rem;
				left: 6.25rem;
			}
		</style>
	</head>
	<body>
		<script type= "text/javascript">
			window.οnlοad=function(){
				btn.onclick = function(){
					//设置div的内容
					//第一步:获取div对象
					var divElt = document.getElementById("div1");
					//第二部:使用innerHTML属性来设置元素内部的内容
					// divElt.innerHTML = "<font color ='red'>用户名不能为空</font>";
					divElt.innerText = "<font color = 'red'> 用户名不能为空</font>";
				}
			}
		</script>
		<input type="button" value ="设置div中的内容" id="btn" />
		<div id="div1">
			
		</div>
	</body>

正则表达式

什么是正则表达式?有什么用?

正则表达式主要用在字符串格式匹配方面。
正则表达式其实是一门独立的学科，在java语言中支持，c语言也支持，JavaScript也支持，大部分编程语言都支持正则表达式。目前使用最多的是计算机编程领域，用作字符串格式匹配，包括搜索方面等。
正则表达式对于我们js编程来说，掌握哪些内容呢？

第一：常见的正则表达式符号要认识

第二：简单的正则表达式要能看懂

第三：他人编写的正则表达式要能看懂

第四：在JavaScript中，怎么创建正则表达式对象

第五：在JavaScript当中，正则表达式对象有哪些方法？

第六：能够快速的从网络上找到自己需要的正则表达式，并测试其有效性
常见的正则表达式符号：

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-30omGbBd-1619408034028)(C:\Users\14505\AppData\Roaming\Typora\typora-user-images\image-20210423144905679.png)]$

正则表达式当中的小括号（）优先级较高。

[1-9] 表示1到9中的任意一个数字（次数是一次）

[A-Za-z0-9]表示A-Za-z0-9中的任意一个字符

[A-Za-z0-9-]表示A-Za-z0-9，-，中的任意一个字符

|表示或者

简单的正则表达式：

 QQ号的正则表达式：^[1-9][0-9]{4,}$

怎么在JS中创建正则表达式对象？怎么调用正则白哦大师对象的方法？
- 一：
  
  var regExp = /正则表达式/flags;
- 二：使用内置支持类RegExp
  
  var regExp = new RegExp(“正则表达式”，”flags“);
关于flags：

g：全局匹配

i：忽略大小写

m:多行搜索（ES规范指定后才支持的）当前米那是正则表达式的时候，m不能使用，只有前面是普通字符串的时候，前面才能省略

正则表达式的test（）方法？

使用方法：true / false = 正则表达式对象.test（用户填写的字符串）；

true:字符串格式匹配成功

false：字符串格式匹配失败

正则表达式的使用

<body>
		<script type="text/javascript">
			window.onload = function(){
				document.getElementById("btn").onclick = function(){
					var email = document.getElementById("email").value;
					var emailRegExp = /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/;
					var ok = emailRegExp.test(email);
					if(!ok){
						document.getElementById("emailError").innerText = "邮箱地址不合法";
					}else{
						document.getElementById("emailError").innerText = "√";
					}
				}
				//给文本框绑定focus
				document.getElementById("email").onfocus = function(){
					document.getElementById("emailError").innerText ="";
				}
				
			}
		</script>
		<input type ="text" id ="email"/>
		<span id ="emailError" style ="color :red;font-size:12px;">
			
		</span>
		<br>
		<input type ="button" value ="验证邮箱" id ="btn" />
	</body>

另一个:

<body>
		<script type="text/javascript">
			//低版本的IE浏览器不支持字符串的trim（）函数怎么办？
			//可以自己对String类拓展一个全新的Trim（）函数
			String.prototype.trim = function(){
				//去除当前字符串的前后空白
				//在当前的方法中的this代表的就是当前字符串
				this.replace(/^\s+/),""),replace(/\s+$/，"");
			}
			
			window.onload = function(){
				document.getElementById("btn").onclick = function(){
					//获取用户名
					var username = document.getElementById("username").value;
					username = username.trim();//去除前后空白并返回一个新的username
					alert("------->"+username);
				}
			}
		</script>
		
		<input type = "text" id ="username" />
		<input type = "button" value ="获取用户名" id = "btn"/>
	</body>

表单验证

<body>
		<script type="text/javascript">
			window.onload = function(){
				//给用户名文本框绑定blur事件
				var usernameElt = document.getElementById("username");
				var usernameErrorSpan = document.getElementById("usernameError");
				usernameElt.onblur = function(){
					//获取用户名
				var username=usernameElt.value;
				//取出前后空白
				username = username.trim();
				//判断用户名是否为空
				//获取span标签
				if(username){
					//代表username不是空字符串
					//继续判断长度
					if(username.length < 6|| username.length > 14){
						//用户名长度非法
						usernameErrorSpan.innerText = "用户名长度不能在[6-14]之间!";
					}else{
						//用户名长度合法
						//继续判断是否含有特殊符号
						var regExp = /^[A-Za-z0-9]+$/;
						var ok = regExp.test(username);
						if(ok){
							//用户名最终合法
						}else{
							//用户名中含有特殊符号
							usernameErrorSpan.innerText = "用户名只能由数字和字母组成!";
						}
					}
					
				}else{
					//代表username是空字符串
					usernameErrorSpan.innerText = "用户名不能为空";
				}
				
				}
				//给username这个文本框绑定获取焦点事件
				usernameElt.onfocus = function(){
					//清空非法的value
					if(usernameErrorSpan.innerText != ""){
						usernameElt.value="";
					}
					//清空span
					usernameErrorSpan.innerText = "";
				}
				//获取提示密码错误的标签
				var pwdErrorSpan = document.getElementById("pwdError");
				//获取确认密码框对象
				var userpwd2Elt = document.getElementById("userpwd2");
				//绑定blur事件
				userpwd2Elt.onblur = function(){
					//获取密码和确认密码
					var userpwdElt = document.getElementById("userpwd");
					var userpwd = userpwdElt.value;
					var userpwd2 = userpwd2Elt.value;
					if(userpwd != userpwd2){
						//密码不一致
						pwdErrorSpan.innerText = "两次密码不一致！";
						
					}else{
						//密码一致
					}
				
				}
				//绑定focus事件
				userpwd2Elt.onfocus = function(){
					if(pwdErrorSpan.innerText!=""){
						userpwd2Elt.value = "";
					}
					pwdErrorSpan.innerText="";
				}
				//给Email绑定blur事件
				var emailElt = document.getElementById("email");
				//获取email的span
				var emailSpan = document.getElementById("emailError");
				emailElt.onblur = function(){
					//获取email
					var email = emailElt.value;
					
					//编写email的正则表达式
					var emailRegExp =  /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/;
					var ok = emailRegExp.test(email);
					if(ok){
						//合法
					}else{
						//不合法
						emailSpan.innerText = "邮箱地址不合法";
					}
				}
				//给email绑定onfocus
				emailElt.onfocus = function(){
					if(emailSpan.value!=""){
						emailElt.value ="";
					}
					emailSpan.innerText = "";
				}
				//给提交按钮绑定一个鼠标单击事件
			    var submitbtnElt = document.getElementById("submitBtn");
				submitbtnElt.onclick = function(){
					 //当所有表单项目都是合法的,才能提交
					 //一种方案,触发username,userpwd2,email的blur
					 usernameElt.focus();   //这两行代码是使用代码触发事件
					 usernameElt.blur();
					 
					 userpwd2Elt.focus();  
					 userpwd2Elt.blur();
					 
					 emailElt.focus();   
					 emailElt.blur();
					 if(usernameErrorSpan.innerText ==""&&pwdErrorSpan.innerText ==""&&emailSpan.innerText==""){
						 //提交表单
						 var userFormElt = document.getElementById("userForm");
						 //可以设置action,也可以不在这里
						 userFormElt.action = "http://localhost:8080/jd/save";
						 //提交表单
						 userFormElt.submit();
					 }
				}	
			}
		</script>
		<!--这里表单提交应该使用post,这里为了检测,所以使用get-->
		<form action="http://localhost:8080/jd/save" method="get" id="userForm">
			用户名<input type = "text" name = "username" id = "username"/>
			<span id="usernameError"></span><br>
			密码<input type="text" name ="userpwd" id="userpwd"/>
			<br>
			确认密码<input type="text" id="userpwd2"/>
			<span id="pwdError"></span><br>
			邮箱<input type="text" name="email" id="email" />
			<span id="emailError"></span><br>
			<input type="submit" value ="注册" id= "submitBtn"/><br>
			<input type="reset" value ="重置" />
		</form>
	</body>

周期函数

setInterval(“displayTime()”,1000); //每隔一秒调用一次这个函数

这个函数的返回值可以传递给Window.clearInterval()从而取消对code的周期性执行的值

<body>
		<script type="text/javascript">
			/*
			关于JS中内置的支持类,Date,可以用来获取时间/日期
			*/
		   //获取系统当前时间
		   var nowTime = new Date();
		   //输出
		   // document.write(nowTime); 
		   //转换成具有本地语言环境的日期格式
		   nowTime = 	nowTime.toLocaleString();
		   document.write(nowTime);
		   document.write("<br>");
		   document.write("<br>");
		   //当以上格式不是自己想要的,可以通过日期获取年月日的信息,自己定制日期格式
		   var t = new Date();
		   var year = t.getFullYear();//返回年日期,以全格式返回
		   var month = t.getMonth();
		   var day = t.getDate();
		   document.write(year +"年"+ (month+1)+ "月" +day +"日");	   
//重点:怎样获取毫秒数?(从1970 年1月1日  00:00:00 000到当前时间)
	   var times = t.getTime();
	   document.write(times);   //一般会使用毫秒数当做时间戳
	   document.write(new Date().getTime());   
	</script>
	<br>
	<br>
	<br>
	<script type="text/javascript">
		function displayTime(){
			var time = new Date();
		    var strTime = time.toLocaleString();
			document.getElementById("timeDiv").innerHTML = strTime;	
			
			}
			//每隔一秒调用一次这个函数	
			function start(){
				//从这行代码吗执行结束开始,则会不间断的,每隔1000毫秒调用一次
				//displaytime函数
				v = window.setInterval("displayTime()",1000);
			}
			function stop(){
				window.clearInterval(v);
			}
	</script>
	<input type ="button" value ="显示系统时间" onclick = "start();"/>
	<input type="button" value ="停止系统时间" onclick = "stop();"/>
	<div id="timeDiv"></div>
</body>

JS中的Array数组(了解)

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-TgJtCXQh-1619408034030)(C:\Users\14505\AppData\Roaming\Typora\typora-user-images\image-20210424095258294.png)]$

a.push(10) 在数组的末尾添加一个元素

注意:在JS中的数组可以自动模拟栈的数据结构:后进先出,先进后出原则.

//push就是压栈

//pop弹栈

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-NBwVYvr7-1619408034032)(C:\Users\14505\AppData\Roaming\Typora\typora-user-images\image-20210424095721876.png)]$

BOM编程

总结:哪些方法可以通过浏览器往服务器发请求?

表单form得提交
超链接
document.location
window.location
window.open(‘url’)
直接在浏览器地址栏上输入URL,然后回车.(这个也可以手动输入,提交表单也可以是动态的)

以上所有的请求均可以携带数据给服务器,只有通过表单提交的数据才是动态的.

弹出确认消息框

<script type="text/javascript">
			function del(){
				if(window.confirm("亲,确认删除数据吗?")){
					alert("delete data .....");
				}
			}
		</script>

设置为顶级窗口

这个可以在登录界面使用,将登录界面设置为顶级窗口

一号窗口:

	<iframe src = "08-小界面.html" width = "500px" height ="500px" ></iframe>

二号窗口:

<body>
<script type="text/javascript">
			//如果这个窗口不是顶级窗口的话,将当前窗口设置为顶级窗口
			function setTop(){
				//window是当前浏览器窗口,代表08.html
				//当前窗口的顶级窗口如果不是自己
				//window.top就是当前窗口对应的顶级窗口
				//window.self表示当前自己的这个窗口			
if(window.top != window.self){
			//将当前窗口设置为顶级窗口
			//window.self.loaction是08的地址
			//将顶级窗口的wintow.top.location地址设置为025
			window.top.location = window.self.location;
			}
		}
	</script>
	0055555555<input type = "button" onclick = "setTop();"  value ="如果当前窗口不是顶级的,就将它设置为顶级的"/>
</body>

JSON

什么是json,有什么用?

JavaScript Onject Notation,简称JSON(数据交换格式)

JSON主要的作用是:一种标准的数据交换格式.(目前非常流行,90%以上的系统,系统A和系统B交换数据的话,都会采用JSON)
JSON是一种标准的轻量级的数据交换格式,特点是:

体积小,易解析
在实际的开发中有两种数据交换格式使用最多,其一是JSON,另一种是XML.

XML体积较大,解析麻烦,但是有其优点是:语法严谨(通常银行相关的系统之间进行数据交换的话会使用XML)
HTML和XML有一个父亲:SGML(标准通用的标记语言)

HTML主要做页面展示:所以语法松散,很随意

XML主要做数据存储和数据描述的:所以语法相当严格

语法格式:var jsonObj = {

“属性名”:属性值,

“属性名”,属性值,

“属性名”,“属性值”,

…

};

JSON对象的使用:

<script type="text/javascript">
			//创建一个JSON对象(JSON也可以被称为无类型对象)
			var studentObj = {
				"sno":"110",
				"sname":"张三",
				"sex":"男"
			};
			//访问JSON对象的属性
			alert(studentObj.sno + "," + studentObj.sname +"," + studentObj.sex);
			//JSON数组
			var students=[
				{"sno":"110","sname":"张三","sex":"男"},
				{"sno":"120","sname":"李四","sex":"男"},
				{"sno":"130","sname":"王五","sex":"男"},
			];
			
			//遍历
			for(var i = 0;i<students.length;i++){
				var stuObj = students[i];
				alert(stuObj.sno +","+stuObj.sname+","+ stuObj.sex);
			}
		</script>

复杂一些的JSON对象

	var user = {
				"usercode" :110,
				"username":"张三",
				"sex":true,
				"address":{"city":"北京","street":"大兴区","zipcode":"112211"},
			    "aihao":["smoke","drink","tt"]
			};

eval函数

<script type="text/javascript">
			/*
			eval函数的作用是,将字符串当做一段JS代码并4解释并执行
			java连接数据库,查询数据之后,将数据在java程序中	拼接成JSON格式的字符串,将json格式的字符串响应到浏览器
			也就是说java响应到浏览器上的仅仅是一个JSON格式的字符串,还不是一个JSON对象
			可以使用eval函数,将json格式的字符串转换成json对象
			
			*/
			// window.eval("var i =100");
			// alert("i=" +i);
			var fromJava= "{\"name\":\"zhangsan\",\"password\":\"123\"}";//这是java发送过来的json格式的字符串
				//将以上的json格式的字符串转换成json对象
				window.eval("var jsonObj = "+fromJava);
				//访问json对象
				alert(jsonObj.name +","+jsonObj.password);//在前端取数据  
			
		</script>

面试题:

在JS当中:[]和{}有什么区别?

[]是数组

	    "aihao":["smoke","drink","tt"]
		};


## eval函数

```javascript
<script type="text/javascript">
 		/*
 		eval函数的作用是,将字符串当做一段JS代码并4解释并执行
 		java连接数据库,查询数据之后,将数据在java程序中	拼接成JSON格式的字符串,将json格式的字符串响应到浏览器
 		也就是说java响应到浏览器上的仅仅是一个JSON格式的字符串,还不是一个JSON对象
 		可以使用eval函数,将json格式的字符串转换成json对象
 		
 		*/
 		// window.eval("var i =100");
 		// alert("i=" +i);
 		var fromJava= "{\"name\":\"zhangsan\",\"password\":\"123\"}";//这是java发送过来的json格式的字符串
 			//将以上的json格式的字符串转换成json对象
 			window.eval("var jsonObj = "+fromJava);
 			//访问json对象
 			alert(jsonObj.name +","+jsonObj.password);//在前端取数据  
 		
 	</script>

面试题:

在JS当中:[]和{}有什么区别?

[]是数组

{}是JSON

向上的青春233

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaScript02

文章目录JS的代码执行顺序JS代码设置节点的属性键盘事件捕捉回车JS中的void运算符JS的控制语句JS三大块DOM编程InnerHTML和innerText操作div和span正则表达式正则表达式的test（）方法？正则表达式的使用表单验证周期函数JS中的Array数组(了解)BOM编程弹出确认消息框设置为顶级窗口JSONeval函数面试题:面试题:JS的代码执行顺序第一种方法:<body onload="ready()"> <script type="text/j
复制链接

扫一扫