JS总结篇

编程语言 2023-04-07 23:01:47 阅读次数: 0

文章目录

Object类型详解+ prototype类型

重点掌握：
prototype属性。（prototype翻译为原型）这个属性可以
给对象动态扩展属性和方法。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Object类型</title>
	</head>
	<body>
		<script type="text/javascript">
			/* 
				Object类型：
					1、在JS当中内置了一个类型Object，可以将Object类型看做是所有对象的超类/基类。
					2、在JS当中默认定义的类型，没有特殊说明的话，默认继承Object。
					3、Object类型中有哪些通用属性和方法呢？
						属性：
							prototype 属性 | constructor 属性
						方法：
							toLocaleString 方法 | toString 方法 | valueOf 方法
							
						重点掌握：
							prototype属性。（prototype翻译为原型）这个属性可以
							给对象动态扩展属性和方法。

			 */
			var obj = new Object();
			//console.log(typeof obj)
			
			// 演示prototype属性
			// 后期给Object类型的对象扩展一个doSome()方法
			Object.prototype.doSome = function(){
    
    
				console.log("测试prototype属性！~~~")
			}
			
			// 后期给Object类型的对象扩展一个username属性.
			Object.prototype.username = "zhangsan"
			
			// 调用doSome方法
			obj.doSome()
			
			// 访问对象的username属性
			//console.log(obj.username)
			
			// 可以给String扩展一个方法吗？
			// 给String类型的对象扩展一个mysubstr的方法.
			String.prototype.mysubstr = function(startIndex, length){
    
    
				// this表示当前的字符串对象
				return this.substr(startIndex, length);
			}
			
			//console.log("abcdef".mysubstr(2,3)) //cde
			//console.log("kingsoft".mysubstr(3,3))  //gso
			
		</script>
	</body>
</html>

JS中怎么定义类new对象调方法

关键看你怎么调用,如果没有使用new运算符调用,表示普通函数调用.不会在堆中new对象.
使用new运算符去调用这个函数,显然是把它当做一个类来看待,这个会导致浏览器的堆当中开辟一个新对象!

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>JS中怎么定义类new对象调方法</title>
	</head>
	<body>
		<script type="text/javascript">
			/* 
				1、在JS中怎么定义类？包括两种方式
					第一种方式：
						function 类名(形式参数列表){
							
							this.属性名 = 参数;
							this.属性名 = 参数;
							
							this.方法名 = function(){
								
							}
						}
					第二种方式：
						类名 = function(形式参数列表){
							
							this.属性名 = 参数;
							this.属性名 = 参数;
							
							this.方法名 = function(){
								
							}
						}
			 */
			
			// 既是一个函数,同时又是一个类的定义.函数名是:sayHello,类名是:sayHello
			/* function sayHello(){
				
			} */
			
			sayHello = function(){
    
    
				
			}

			// 关键看你怎么调用,如果没有使用new运算符调用,表示普通函数调用.不会在堆中new对象.
			sayHello();
			
			// 使用new运算符去调用这个函数,显然是把它当做一个类来看待,这个会导致浏览器的堆当中开辟一个新对象!
			var obj = new sayHello(); // obj是一个引用,保存内存地址指向对象!
			var obj2 = new sayHello();
			
			// 正式的定义一个员工类
			/* function Emp(x, y, z){
				// 属性
				this.empno = x;
				this.ename = y;
				this.sal = z;
				// 方法
				this.work = function(){
					console.log(this.ename + " is working!!!")
				}
			} */
			
			Emp = function(x, y, z){
    
    
				// 属性
				this.empno = x;
				this.ename = y;
				this.sal = z;
				// 方法
				this.work = function(){
    
    
					console.log(this.ename + " is working!!!")
				}
			}
			
			// 创建对象
			var e = new Emp();
			e.work();
			
			var e2 = new Emp(111);
			e2.work();
			
			var e3 = new Emp(2222, "KING");
			e3.work();
			
			var e4 = new Emp(3333, "SMITH", 800);
			console.log("e4.empno = " + e4.empno) //这个和java相同.
			console.log("e4.ename = " + e4.ename)
			console.log("e4.sal = " + e4.sal)
			
			/* 访问一个对象的属性还能这样，语法格式：引用["属性名"] */
			console.log("e4.empno = " + e4["empno"])
			console.log("e4.ename = " + e4["ename"])
			console.log("e4.sal = " + e4["sal"])
			
			e4.work();
			
			// 给Emp动态的扩展方法呢？
			// 后期动态扩展的方法
			Emp.prototype.getSal = function(){
    
    
				return this.sal;
			}
			
			// 调用扩展的方法.
			console.log(e4.getSal()) //800
			
		</script>
	</body>
</html>

null NaN undefined的区别

1、== 和 ===有什么区别？
== 等同运算符：只比较值是否相等。
=== 全等运算符：既比较值是否相等，同时又比较数据类型是否相同。
2、null undefined NaN的区别？
类型都是不一样的
null和undefined是等同关系。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>null NaN undefined的区别</title>
	</head>
	<body>
		<script type="text/javascript">
			/* 
				1、==和===有什么区别？
					== 等同运算符：只比较值是否相等。
					=== 全等运算符：既比较值是否相等，同时又比较数据类型是否相同。
				2、null undefined NaN的区别？
					类型都是不一样的
					null和undefined是等同关系。
			 */
			var v1 = true;
			var v2 = 1;
			
			// == 有点类似于Java语言中的equals方法.
			console.log(v1 == v2) // true
			
			console.log(v1 === v2) // false
			
			var v3 = 1;
			console.log(v3 === v2) //true
			
			// null的类型属于原始类型,typeof运算符的结果是:object
			console.log(typeof null) // "object"
			console.log(typeof NaN) // "number"
			console.log(typeof undefined) // "undefined"
			
			console.log(null == NaN) //false 
			console.log(null == undefined) //true
			console.log(undefined == NaN) //false
			
			console.log(null === NaN) //false 
			console.log(null === undefined) //false
			console.log(undefined === NaN) //false
		</script>
	</body>
</html>

JS的常用事件

JS的常用事件：
（1）blur 失去焦点
（5）focus 获得焦点
----------------------------
（3）click 鼠标单击
（4）dblclick 鼠标双击
（6）keydown 键盘按下
（7）keyup 键盘弹起
----------------------------
（9）mousedown 鼠标按下
（10）mouseover 鼠标经过
（11）mousemove 鼠标移动
（12）mouseout 鼠标离开
（13）mouseup 鼠标弹起
----------------------------
（16）submit 表单提交
（14）reset 表单重置
----------------------------
（15）select 文本被选定
（2）change 下拉列表选中项改变，或文本框内容改变
（8）load 页面加载完毕
提醒：任何一个事件都有对应的事件句柄。事件句柄是在事件名称前添加on就行。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>JS的常用事件</title>
		<style type="text/css">
			input {
    
    
				border: 1px solid black;
				width: 300px;
				height: 50px;
			}
			#mouseDiv {
    
    
				border: 1px solid black;
				background-color: aqua;
				width: 300px;
				height: 300px;
			}
		</style>
	</head>
	<!-- 
		load事件：
			1、load事件不是在页面加载过程中触发的。
			2、load事件是在页面中所有的元素全部加载完毕之后才发生的。
	 -->
	<body onload="console.log('页面加载完毕了!')">
		<script type="text/javascript">
			/* 
				JS的常用事件：
					（1）blur				失去焦点
					（5）focus				获得焦点
					
					（3）click				鼠标单击
					（4）dblclick			鼠标双击
					
					（6）keydown				键盘按下
					（7）keyup				键盘弹起
					
					（9）mousedown			鼠标按下
					（10）mouseover			鼠标经过
					（11）mousemove			鼠标移动
					（12）mouseout			鼠标离开
					（13）mouseup			鼠标弹起
					
					（16）submit				表单提交
					（14）reset				表单重置
					
					（15）select				文本被选定
					（2）change				下拉列表选中项改变，或文本框内容改变
					（8）load				页面加载完毕
					
				提醒：任何一个事件都有对应的事件句柄。事件句柄是在事件名称前添加on就行。
			 */
		</script>
		
		测试选中文本事件：
		<textarea rows="10" cols="30" onselect="console.log('文本被选中了')"></textarea>
		<br>
		<input type="text" onselect="console.log('文本被选中了')"/>
		<br>
		<br>
		测试change事件：
		<select onchange="console.log('选项被修改!')">
			<option value ="">--请选择您的学历--</option>
			<option value ="gz">高中</option>
			<option value ="zk">专科</option>
		</select>
		<br>
		<br>
		
		测试表单的提交和重置事件：
		<form action="" onsubmit="alert('表单提交了')" onreset="console.log('表单重置了')">
			<input type="submit" value="提交"/>
			<input type="reset" value="重置"/>
		</form>
		
		测试失去焦点事件：<input type="text" onblur="console.log('失去焦点了')"/>
		<br>
		测试获取焦点事件：<input type="text" onfocus="console.log('获取焦点了')"/>
		<br>
		测试click事件：<input type="button" value="click事件" onclick="console.log('单击')"/>
		<br>
		测试dblclick事件：<input type="button" value="dblclick事件" ondblclick="console.log('双击')"/>
		<br>
		测试keydown事件：<input type="text" onkeydown="console.log('keydown....')" onkeyup="console.log('keyup....')"/>
		<br>
		测试keyup事件：<input type="text" onkeyup="console.log('keyup....')" />
		
		<br>
		测试mouse相关的时间：
			<div id="mouseDiv" onmouseover="console.log('鼠标经过了')"
							   onmousedown="console.log('鼠标按下了')"
							   onmouseout="console.log('鼠标离开了')"
							   onmouseup="console.log('鼠标弹起了')"
							   onmousemove="console.log('鼠标移动了')"></div>
			<br>
			
			
			
		
	</body>
</html>

<script type="text/javascript">
	alert("hello world!")
</script>

JS注册事件的第一种方式

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>JS注册事件的第一种方式</title>
	</head>
	<body>
		<script type="text/javascript">
			function sayHello(){
    
    
				console.log("hello jack!")
			}
			
			// 这是程序员主动的调用该函数,这个函数不是回调函数.
			//sayHello();
			
		</script>
		
		<!-- 这种注册事件的方式就是第一种方式：在标签中使用“事件句柄”，在事件句柄后面编写JS代码
			当这个事件句柄对应的事件发生之后，“注册”在事件句柄当中的这个代码被监听器调用。
			
			onclick 鼠标单击的事件句柄，只有当鼠标单击事件click发生之后，注册在onclick后面的代码
			会被执行。
			
			以下button标签中的sayHello()函数，在页面打开的时候并不会执行，
			只是在页面打开的过程中完成事件的绑定，完成事件的注册，以后只有
			当该事件发生之后sayHello()函数才会执行，像这种函数又一种特殊
			的称谓：回调函数。英语单  词叫做：callback function
			
			这个回调函数的特点是：
				监听器负责调用，程序员不负责调用。
				当事件发生之后，监听器会负责调用该函数。
				像这种函数被称为回调函数。callback。
			
			张三编写的java程序
			public class Test {
    
    
				public static void main(String[] args){
    
    
					// 站在“张三”的角度看method()方法属于正向调用。
					MyClass.method();
				}
			}
			李四编写的java程序
			public class MyClass {
    
    
				public static void method(){
    
    
					// 站在method()方法的实现角度来看，我们不负责调用这个method()
					// 是张三负责调用method()，我们负责实现，此时可以把这个method()叫做回调方法。
				}
			}
		 -->
		<input type="button" value="hello jack" onclick="sayHello()"/>
		
	</body>
</html>

JS注册事件的第二种方式

注意：hellobtnElt.onclick = sum //不要这样写: hellobtnElt.onclick =
sum()这样是调用

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>JS注册事件的第二种方式</title>
	</head>


	<body>
		
		<input type="button" value="hello" id="hellobtn" onclick="" />
		
		<script type="text/javascript">
			
			/* 定义一个函数 */
			function sum(){
    
    
				console.log("sum function invoke!")
			}
			
			/* 根据id获取button对象 */
			var hellobtnElt = document.getElementById("hellobtn");
			
			// 元素中有什么属性,就能"点"什么.
			/* 这行代码在页面打开的时候会执行，这行代码执行的意义是：将sum这个回调函数绑定到hellobtn的click事件上 */
			/* 这个回调函数sum在什么时候执行？click事件发生之后才会被监听器调用！ */
			//hellobtnElt.onclick = sum  //不要这样写:	hellobtnElt.onclick = sum()
			//这样是调用 
			
		
			// 回调函数可以是一个匿名函数
			// 这行代码的执行只是完成事件click的注册,给click事件注册一个回调函数.
			// 这行代码执行的时候，回调函数并不会被执行。
			// 只有当这个按钮发生click事件之后,这个回调函数会自动被监听器来调用.
			// hellobtnElt.onclick = function(){
    
    
			// 	console.log("我是一个回调函数，同时我没有名字，叫做匿名函数！")
			// }
			
		</script>
		
	</body>
</html>

关于代码的执行顺序

在这里插入图片描述


    <html>
        <head>
            <meta charset="utf-8"> 
            <title>关于代码的执行顺序</title>
        </head>
<!-- 在浏览器运行的时候注册到onload事件里面 
    待等到整个代码加载完毕之后由监听器来调用这个函数 -->
        <body  onload="myMethod()">
            <script>
                // //这是错误的js代码是从上向下执行  input还没执行
                // //  直接获取id是不对的

                //     var bnt1=document.getElementById("btn1");

                //     bnt1.οnclick=function(){
    
    
                //         console.log("hello world！！！");
                //     }
             
function myMethod(){
    
    

                //解决办法-可以把一下代码包起来 封装到另一个函数里面 另一个函数被注册到
                //onload事件里面

                var bnt1=document.getElementById("btn1");
                    bnt1.onclick=function(){
    
    
                        console.log("hello world！！！");
                    }
                }
                    
            </script>
<input type="button" value="按钮1" id="btn1" >
</body>
    </html>

在页面加载完毕之后调用函数

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>事件的最后一个完美的案例</title>
	</head>
	<body>
		<script type="text/javascript">
			
			/* 这段代码有3个回调函数。 */
			/* 最外层的回调函数是在load事件发生之后才会执行！ */
			window.onload = function(){
    
    
			
				/* //给id="btn1"的元素绑定鼠标单击
				var btn1Elt = document.getElementById("btn1");
				btn1Elt.onclick = function(){ // btn1被单击click之后,这个事件发生了,才会执行这个回调函数
					console.log("按钮1被点击了！")
				}
				
				//给id="btn2"的元素绑定鼠标单击
				var btn2Elt = document.getElementById("btn2");
				btn2Elt.onclick = function(){// btn2被单击click之后,这个事件发生了,才会执行这个回调函数
					console.log("按钮2被点击了！")
				} */
				//window.onload只能被被一个函数注册 若是多个的话就是最后注册的那个有效
				document.getElementById("btn1").onclick = function(){
    
    
					console.log("按钮1单击")
				}
				
				document.getElementById("btn2").onclick = function(){
    
    
					console.log("按钮2单击")
				}
				
				document.getElementById("username").onblur = function(){
    
    
					console.log("失去焦点了")
				}
				
			}
			
		</script>
		
		<input type="button" id="btn1" value="按钮1"/>
		<br>
		<input type="button" id="btn2" value="按钮2"/>
		<br>
		<input type="text" id="username" />
		
	</body>
</html>

捕捉回车

新知识点:所有的“键盘事件对象”,有keyCode属性,这个keyCode属性可以获取键值. keyCode是键盘事件对象的属性.
记住:键盘上回车键的键值永远都是13.ESC键的键值永远都是27.

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>捕捉回车键(怎么在JS中捕捉键值。)</title>
	</head>
	<body>
		
		<script type="text/javascript">
			
			/* function sum(x , y){
				
			}
			
			sum();
			sum(1);
			sum(1,2);
			sum(1,2,3);
			*/
		   
			/* function myfun(){
				console.log("执行了myfun....没有参数的！")
			} */
			
			/* function myfun(fdsafdsafds){
				console.log("执行了myfun....有参数的！")
			}
			
			myfun("abc") 这样也可以调用无参的函数 只是无参函数会对你传过来的参数视而不见*/ 
			
			//这句话可以这样理解吗，监听器会检查到onload事件，监听器会在形参中传一个onload的对象
			
			// x, y都是变量名,随意的,随便写.只要符合标识符命名规范就行.
			window.onload = function(x){
    
     // x代表的就是load事件对象.
				// 给id="username"的节点绑定keydown事件
				// 后面的这个回调函数是我们负责编写的,但是调用者是监听器.
				// 监听器调用这个回调函数的时候会传过来一个事件对象.
				// 你如果需要使用这个事件对象的时候,你可以写上,你不需要这个事件对象的时候,可以省略.
				document.getElementById("username").onkeydown = function(y){
    
     // y代表的就是一个keydown事件对象.
					//console.log("keydown.....")
					// 在这里捕捉键值,当用户敲回车键了,则登录
					// 新知识点:所有的“键盘事件对象”,有keyCode属性,这个keyCode属性可以获取键值.
					// keyCode是键盘事件对象的属性.
					// 记住:键盘上回车键的键值永远都是13.ESC键的键值永远都是27.
					if(y.keyCode == 13) {
    
    
						console.log("登录，正在进行身份认证，请稍后...");
					}else if(y.keyCode == 27){
    
    
						console.log("系统安全退出了！")
					}
				}
			}
			
		</script>
		
		用户名：<input type="text" id="username" />
		
	</body>
</html>

void()运算符

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>void运算符</title>
	</head>
	<body>
		<script type="text/javascript">
			/* 
				1、JS当中也有很多运算符
					算术运算符
					逻辑运算符
					关系运算符
					位运算符
					三目运算符
					赋值运算符
					.....
					和java那一套是一样的。这里就不再说了。
					
				2、我们这里主要学习一下JavaScript当中的void和typeof运算符。
					typeof 运算符：可以在程序运行阶段动态获取变量的数据类型，结果有6个字符串：
						"number"
						"undefined"
						"boolean"
						"string"
						"object"
						"function"
				
					void运算符：
						语法格式：
							void(表达式)
							执行表达式，但不返回任何结果。
							即使表达式有执行结果，最终经过void运算之后就什么都没了。
			 */
		</script>
		
		页面顶部！
		<br>
		<input type="button" value="按钮" onclick="alert('hello world')" />
		<!-- 添加javascript:表示告知后面是一段JS代码，大部分情况下javascript: 是可以省略的！ -->
		<input type="button" value="按钮" onclick="javascript:alert('hello world')" />
		
		<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>
		
		<!-- 
			1、添加href属性，这样可以保留住超链接的样式。
			2、onclick后面可以编写JS代码，这样点击的时候JS代码执行了。
			3、执行完JS代码还必须让页面不跳转！
			
			关键的位置是：怎么保证不跳转呢？
				如果没有跳转路径的话,它自然就不跳转了。
			
			href="javascript:void(0)"
				void运算符执行表达式，但是不返回任何结果：void(表达式) 执行结束之后啥也没有，并且也没有 ""
				
				这样记忆：
					href后面添加一个：javascript:void(0)
					表示把href的连接地址废弃掉。
		 -->
		<a href="javascript:void(0)" 
		onclick="alert('执行JS代码了!')">
		要求：保留住超链接的样式，并且点击我执行一段JS代码，执行完JS代码之后保证页面不跳转！
	</a>
		
		<br><br><br><br><br><br><br><br><br><br><br><br>
	</body>
</html>

JS的控制语句

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>JS的控制语句</title>
	</head>
	<body>
		<script type="text/javascript">
			/* 
				1、JS中的控制语句，和java相同，JS中除了java的控制语句之外，还有一些特别的：
					选择结构：
						if语句
						switch语句
					循环结构：
						for
						while
						do..while
					转向语句：
						break
						continue
						return
				2、JS有哪些特殊的语句呢？
					了解一下，不需要掌握：
						for..in 语句
						with    语句
			 */
			for(var i = 0; i < 10; i++){
    
    
				console.log("i = " + i)
			}
			
			var username = "";
			if(username) {
    
     // Boolean()函数
				console.log("welcome," + username)
			}else{
    
    
				console.log("username不能为空！")
			}
			
			// 数组(JS中的数组对象创建的时候使用的是：中括号)
			//var arr = [1,24,5,65,76,7];
			// 在JS的数组中数据的类型随意,可以不一致.
			var arr = [true,"abc",5,false,76,3.14];
			
			// 对数组遍历
			/* for(var i = 0; i < arr.length; i++){ //数组有length属性.
				console.log(arr[i])
			} */
			
			// for..in语句
			for(var fdsafdsafds in arr){
    
     //arr是数组的话,fdsafdsafds就是数组的下标.
				//fdsafdsafds是数组的下标
				//console.log(fdsafdsafds)
				console.log(arr[fdsafdsafds])
			}
			
			// for..in语句还可以取对象的属性值.
			Employee = function(empno,ename){
    
    
				this.empno = empno;
				this.ename = ename;
			}
			
			var e = new Employee(7369, "SMITH");
			console.log(e.empno + "," + e.ename)
			console.log(e["empno"] + "," + e["ename"])
			
			// for..in语句遍历对象的属性
			for(var fdsafdsa in e){
    
     // e是JS对象的话,fdsafdsa就是对象的属性名.并且属性名是字符串.
				//console.log(fdsafdsa)
				//console.log(typeof fdsafdsa) //string
				console.log(e[fdsafdsa])
				
				// 这种方式就不行了.
				//console.log(e.fdsafdsa)
			}
			
			var x = new Employee(7369, "SMITH");
			//console.log(x.empno + "," + x.ename)
			// with语句.
			with(x) {
    
    
				console.log(empno + "," + ename)
				console.log(empno + "," + ename)
				console.log(empno + "," + ename)
				console.log(empno + "," + ename)
				console.log(empno + "," + ename)
				console.log(empno + "," + ename)
				console.log(empno + "," + ename)
				console.log(empno + "," + ename)
				console.log(empno + "," + ename)
				console.log(empno + "," + ename)
				console.log(empno + "," + ename)
				console.log(empno + "," + ename)
				console.log(empno + "," + ename)
				console.log(empno + "," + ename)
				console.log(empno + "," + ename)
				console.log(empno + "," + ename)
			}
			
		</script>
	</body>
</html>

Array的常用方法

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Array的常用方法</title>
	</head>
	<body>
		<script type="text/javascript">
			// 创建一个长度为0的数组对象
			var a = [];
			
			console.log("数组的元素个数是：" + a.length)
			
			// 添加元素
			a.push(100);
			a.push(200);
			a.push(300);
			a.push(10);
			a.push(20);
			
			console.log("数组的元素个数是：" + a.length)
			
			a = [1,2,3];
			// push方法:向数组中添加一个元素,并且加到末尾.
			a.push(false);
			for(var i in a){
    
    
				console.log(a[i])
			}
			console.log(a.length) //4
			// pop方法:将数组末尾的元素弹出,并且数组长度-1
			console.log(a.pop()) //false
			console.log(a.length) //3
			
			// 注意:数组的push和pop方法联合起来,实际上是模拟了栈数据结构!
			var arr = [];
			arr.push(1)
			arr.push(2)
			arr.push(3)
			
			console.log(arr.pop())
			console.log(arr.pop())
			console.log(arr.pop())
			
			// 翻转数组
			var array = [1,5,65,6,67];
			// 翻转
			array.reverse();
			// 遍历
			for(var i in array){
    
    
				console.log("%%%%====>" + array[i])
			}
			
			// 连接(将数组中的每一个元素以“$”连接成一个字符串)
			//var str = array.join("$")
			var str = array.join("-")
			console.log(str) //"67-6-65-5-1"
			
		</script>
	</body>
</html>

JS内置对象Date

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>JS内置对象Date</title>
	</head>
	<body>
		<script type="text/javascript">
			/* 
				JS的内置对象：Date
			*/
		    var time = new Date(); // 获取系统当前时间的.
			//console.log(time.getYear()) //120 (getYear()方法过时了，不建议用了，获取的年是两位的。1985最终获取之后是85)
			
			console.log(time) //Date Thu Mar 26 2020 17:55:13 GMT+0800 (中国标准时间)
			
			// 进行格式转换
			// 可以将年月日的信息都拿出来.然后自己拼接格式.
			var year = time.getFullYear();
			var month = time.getMonth(); // 0-11 表示 1-12
			//var day = time.getDay(); // 获取的是星期几
			var day = time.getDate(); // 获取一个月份中的第几天
			console.log(year + "年" + (month + 1) + "月" + day + "日")
			
			// 获取时分秒毫秒
			/* time.getHours()
			time.getMinutes()
			time.getSeconds()
			time.getMilliseconds() */
			
			//在JS中提供了一个函数toLocaleString(),其实这个函数是Object中的.
			// 转换成具有本地语言环境的日期格式
			var strTime = time.toLocaleString();
			console.log(strTime) //2020/3/26 下午5:59:55
			
			// 怎么获取自"1970年1月1日 00:00:00 000"到系统当前时间的总毫秒数.
			var now = new Date();
			var timeMillis = now.getTime(); //这个getTime()方法是一个重点方法.
			console.log(timeMillis)
			
		</script>
	</body>
</html>

BOM和DOM的关系

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>BOM和DOM的关系</title>
	</head>
	<body>
		
		<div id="div1">
			
		</div>
		
		<script type="text/javascript">
			/* BOM是浏览器，DOM是浏览器上的网页，所以BOM是包含DOM的。 */
			window.onload = function(){
    
    
				
				console.log(window.document)
				console.log(document)
				
				// window对象是BOM的顶级老大
				// document对象是DOM的顶级老大
				// 实际上完整的写法是: window.document, 只不过window. 可以省略.
				//var divObj = window.document.getElementById("div1")
				var divObj = document.getElementById("div1")
				console.log("========>" + divObj)
			}
		</script>
	</body>
</html>

eval函数

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>eval函数</title>
	</head>
	<body>
		<script type="text/javascript">
			
			// eval函数可以将一个字符串当做一段JS代码解释执行!
			window.eval("var i = 100")
			
			//var i = 10011
			console.log(i)
			
		</script>
	</body>
</html>

操作div和span：innerHTML和innerText属性

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>操作div和span：innerHTML和innerText属性</title>
		<style type="text/css">
			#div1 {
    
    
				background-color: burlywood;
				border: 1px solid red;
				width: 400px;
				height: 50px;
			}
			
			#span1 {
    
    
				background-color: red;
			}
		</style>
	</head>
	<body>
		
		<script type="text/javascript">
			window.onload = function(){
    
    
				document.getElementById("btn").onclick = function(){
    
    
					// 设置div中的内容
					var divElt = document.getElementById("div1");
					// 通过元素的innerHTML属性来设置内部的内容
					// innerHTML 是属性,不是一个方法.
					// innerHTML属性会将后面的字符串当做一段HTML代码解释并执行!
					divElt.innerHTML = "<font color='red'>用户名不能为空！</font>";
						
					// innerText也可以设置元素当中的内容.和innerHTML有什么区别呢？
					// innerText后面的字符串即使是一个HTML代码,也不会当做HTML执行,只是看做普通文本.
					//divElt.innerText = "<font color='red'>用户名不能为空！</font>";
				}
				
				var spanbtn = document.getElementById("spanbtn");
				spanbtn.onclick = function(){
    
    
					var span1 = document.getElementById("span1");
					//span1.innerHTML = "<a href='http://www.baidu.com'>百度</a>";
					span1.innerText = "<a href='http://www.baidu.com'>百度</a>";
				}
				
			}
		</script>
		
		<input type="button" id="btn" value="设置div中的内容"/>
		<input type="button" id="spanbtn" value="设置span中的内容"/>
		
		<!-- div独占一行！ -->
		<div id="div1"></div>
		
		<!-- span的大小会随着span中的内容多少变化而变化。 -->
		<span id="span1"></span>
		
	</body>
</html>

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

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>复选框的全选和取消全选</title>
	</head>
	<body>
		
		<script type="text/javascript">
			// 页面加载完毕之后
			window.onload = function(){
    
    
				
				/* // 给id = "firstChk"元素绑定click
				var firstChkElt = document.getElementById("firstChk");
				firstChkElt.onclick = function(){
					// 获取到所有的复选框对象
					var aihaos = document.getElementsByName("aihao");
					
					if(firstChkElt.checked){ //get复选框的选中状态
						// 遍历数组
						for(var i = 0; i < aihaos.length; i++){
							var aihaoChk = aihaos[i];
							aihaoChk.checked = true; //set复选框的选中状态
						}	
					}else{
						// 遍历数组
						for(var i = 0; i < aihaos.length; i++){
							var aihaoChk = aihaos[i];
							aihaoChk.checked = false;//set复选框的选中状态
						}
					}
				} */
				
				// 改良代码
				var firstChkElt = document.getElementById("firstChk");
				var aihaos = document.getElementsByName("aihao");
				firstChkElt.onclick = function(){
    
    
					for(var i = 0; i < aihaos.length; i++){
    
    
						aihaos[i].checked = firstChkElt.checked;
					}
				}
				
				// 给每一个name="aihao"复选框绑定鼠标单击事件
				for(var i = 0; i < aihaos.length; i++){
    
    
					aihaos[i].onclick = function(){
    
    
						// 在这里控制第一个复选框的选中状态
						// 第一个复选框选中还是不选中取决于什么？
						// 所有的aihao复选框的总数量,如果和总选中的数量相同的时候,第一个复选框选中,反之取消选中.
						var count = aihaos.length; //总数量
						var checkedCount = 0; //默认选中的数量是0
						for(var i = 0; i < aihaos.length; i++){
    
    
							if(aihaos[i].checked){
    
    
								checkedCount++;
							}
						} // 循环结束之后,所有的被选中的复选框数量就统计完了.
						// 第一个复选框是选中呢,还是取消选中呢？
						firstChkElt.checked = (count == checkedCount);
					}
				}
			}
		</script>
		
		<input type="checkbox" id="firstChk"/>
		<br>
		<input type="checkbox" name="aihao" value="smoke"/>抽烟
		<br>
		<input type="checkbox" name="aihao" value="drink"/>喝酒
		<br>
		<input type="checkbox" name="aihao" value="firehair"/>烫头
		<br>
		
	</body>
</html>

复选框的全选和取消全选

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>复选框的全选和取消全选</title>
	</head>
	<body>
		
		<script type="text/javascript">
			// 页面加载完毕之后
			window.onload = function(){
    
    
				
				/* // 给id = "firstChk"元素绑定click
				var firstChkElt = document.getElementById("firstChk");
				firstChkElt.onclick = function(){
					// 获取到所有的复选框对象
					var aihaos = document.getElementsByName("aihao");
					
					if(firstChkElt.checked){ //get复选框的选中状态
						// 遍历数组
						for(var i = 0; i < aihaos.length; i++){
							var aihaoChk = aihaos[i];
							aihaoChk.checked = true; //set复选框的选中状态
						}	
					}else{
						// 遍历数组
						for(var i = 0; i < aihaos.length; i++){
							var aihaoChk = aihaos[i];
							aihaoChk.checked = false;//set复选框的选中状态
						}
					}
				} */
				
				// 改良代码
				var firstChkElt = document.getElementById("firstChk");
				var aihaos = document.getElementsByName("aihao");
				firstChkElt.onclick = function(){
    
    
					for(var i = 0; i < aihaos.length; i++){
    
    
						aihaos[i].checked = firstChkElt.checked;
					}
				}
				
				// 给每一个name="aihao"复选框绑定鼠标单击事件
				for(var i = 0; i < aihaos.length; i++){
    
    
					aihaos[i].onclick = function(){
    
    
						// 在这里控制第一个复选框的选中状态
						// 第一个复选框选中还是不选中取决于什么？
						// 所有的aihao复选框的总数量,如果和总选中的数量相同的时候,第一个复选框选中,反之取消选中.
						var count = aihaos.length; //总数量
						var checkedCount = 0; //默认选中的数量是0
						for(var i = 0; i < aihaos.length; i++){
    
    
							if(aihaos[i].checked){
    
    
								checkedCount++;
							}
						} // 循环结束之后,所有的被选中的复选框数量就统计完了.
						// 第一个复选框是选中呢,还是取消选中呢？
						firstChkElt.checked = (count == checkedCount);
					}
				}
			}
		</script>
		
		<input type="checkbox" id="firstChk"/>
		<br>
		<input type="checkbox" name="aihao" value="smoke"/>抽烟
		<br>
		<input type="checkbox" name="aihao" value="drink"/>喝酒
		<br>
		<input type="checkbox" name="aihao" value="firehair"/>烫头
		<br>
		
	</body>
</html>

获取一个文本框的value

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>获取一个文本框的value</title>
	</head>
	<body>
		
		<script type="text/javascript">
			window.onload = function(){
    
    
				document.getElementById("btn").onclick = function(){
    
    
					// 获取文本框对象
					var usernameElt = document.getElementById("username");
					// 获取value
					var username = usernameElt.value; // 文本框的value属性用来获取用户填写的信息.
					alert(username)
				}
			}
		</script>
		
		用户名：<input type="text" id="username" />
		<br>
		<input type="button" id="btn" value="获取用户名"/>
	</body>
</html>

获取下拉列表选中项的value

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>获取下拉列表选中项的value</title>
	</head>
	<body>
		<!-- 
			数据库表存储省份和市区的数据
			t_province
			code(pk)     name
			----------------------
			001          山东省
			002          山西省
			
			t_city
			code(pk)       name             pcode(fk)
			------------------------------------------
			1               济南             001
			2               烟台             001
			
			只要前端浏览器能够获取到山东省的code，假设code=001
			那么后台java程序执行sql语句的时候这样执行：
				select * from t_city where pcode = ?;
				ps.setString(1, "001");
		 -->
		 <!-- 这里的this代表当前的下拉列表对象。-->
		<select id="province" onchange="alert(this.value)"> 
			<option value ="">--请选择省份--</option>
			<option value ="001">河北省</option>
			<option value ="002">河南省</option>
			<option value ="003">山东省</option>
			<option value ="004">山西省</option>
		</select>
		
		<script type="text/javascript">
			window.onload = function(){
    
    
				document.getElementById("province2").onchange = function(){
    
    
					//这里的this代表的就是当前发生change事件的这个节点对象.
					//console.log(this.value)
					console.log(document.getElementById("province2").value)
				}
			}
		</script>
		
		<select id="province2" >
			<option value ="">--请选择省份--</option>
			<option value ="001">河北省</option>
			<option value ="002">河南省</option>
			<option value ="003">山东省</option>
			<option value ="004">山西省</option>
		</select>
		
	</body>
</html>

显示网页时钟

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>显示网页时钟</title>
	</head>
	<body>
		
		<script type="text/javascript">
			/* window.onload = function(){
				document.getElementById("displayTimeBtn").onclick = function(){
					// 获取系统当前时间,把时间显示到div中
					var nowTime = new Date();
					// 显示到div当中
					document.getElementById("timediv").innerHTML = nowTime.toLocaleString();
				}
			} */
			
			/* function display(){
				console.log("显示时间")
			} */
			
			// 设置每个1S执行一次display()函数
			//window.setInterval("display()", 1000)
			
			window.onload = function(){
    
    
				document.getElementById("displayTimeBtn").onclick = function(){
    
    
					// 每隔1S调用一次displayTime()函数(设置周期性调用。)
					// 返回值是一个可以取消周期性调用的value.
					v = window.setInterval("displayTime()", 1000)
				}
				
				document.getElementById("stopTimeBtn").onclick = function(){
    
    
					// 停止周期性的调用.
					window.clearInterval(v)
				}
			}
			
			function displayTime(){
    
    
				var nowTime = new Date();
				document.getElementById("timediv").innerHTML = nowTime.toLocaleString();
			}
			
		</script>
		
		<input type="button" value="显示系统当前时间" id="displayTimeBtn"/>
		<input type="button" value="时间停止" id="stopTimeBtn"/>
		
		<div id="timediv"></div>
		
	</body>
</html>

窗口的开启和关闭

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>窗口的开启和关闭</title>
	</head>
	<body>
		<!-- window.open开启一个新窗口 -->
		<!-- window.open(url, target) ，和超链接效果差不多，都是可以发送请求给服务器的-->
		
		<!-- 开启一个窗口，默认是开启一个新窗口。 -->
		<input type="button" value="开启百度" onclick="window.open('http://www.baidu.com')"/>
		
		<!-- 开启一个窗口，在当前窗口中显示 -->
		<input type="button" value="开启百度" onclick="window.open('http://www.baidu.com', '_self')"/>
		<!-- 开启一个窗口，在新窗口中显示 -->
		<input type="button" value="开启百度" onclick="window.open('http://www.baidu.com', '_blank')"/>
		<!-- 开启一个窗口，在父窗口中显示 -->
		<input type="button" value="开启百度" onclick="window.open('http://www.baidu.com', '_parent')"/>
		<!-- 开启一个窗口，在顶级窗口中显示 -->
		<input type="button" value="开启百度" onclick="window.open('http://www.baidu.com', '_top')"/>
		
		<input type="button" value="002" onclick="window.open('002.html')"/>
		
	</body>
</html>

alert和confirm方法

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>alert和confirm方法</title>
	</head>
	<body>
		<script type="text/javascript">
			function sayHello(){
    
    
				// 弹出消息框
				window.alert("hello world!");
			}
			
			function del(){
    
    
				// 删除数据之前一定要提示用户是否真的删除,用户点击了确定才表示真的删除.
				// 确认框
				//var ok = window.confirm("亲，确认删除数据吗？")
				//console.log(ok) //返回值是一个布尔类型.
				
				/* if(ok){
					alert("数据正在删除中，请稍后...")
				} */
				
				if(window.confirm("亲，确认删除数据吗？")){
    
    
					alert("数据正在删除中，请稍后...")
				}
			}
		</script>
		
		<input type="button" value="hello" onclick="sayHello()"/>
		
		<input type="button" value="删除" onclick="del()"/>
	</body>
</html>

将当前窗口设置为顶级窗口

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		005页面
		<script type="text/javascript">
			/* 如果当前这个窗口不是顶级窗口的话，将当前窗口设置为顶级窗口。 */
			function setTop(){
    
    
				// window是当前浏览器窗口,代表005.html
				// “当前窗口的顶级窗口"如果"不是自己"
				// window.top就是当前窗口对应的顶级窗口.
				// window.self表示当前自己这个窗口
				// window.top 是004窗口
				// window.self 是005窗口
				//console.log((window.top != window.self))
				
				if(window.top != window.self){
    
    
					// 将当前窗口设置为顶级窗口
					// window.self.location 是005的地址
					// 将顶级窗口的window.top.location地址设置为005
					window.top.location = window.self.location;
				}
			}
		</script>
		
		<input type="button" onclick="setTop()" value="如果当前窗口不是顶级窗口的话,将当前窗口设置为顶级窗口"/>
		
	</body>
</html>

历史记录

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


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

window.location.href打开网页的多种方式

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>window.location.href</title>
	</head>
	<body>
		<script type="text/javascript">
			function goBaidu(){
    
    
				//window.location.href = "http://www.baidu.com";
				//window.location = "http://www.jd.com";
				
				//document.location.href = "http://www.126.com";
				document.location = "http://www.baidu.com";
			}
		</script>
		
		<!-- 
			跳转页面可以通过多种方式：（这些都是发送请求！！！！）
			
				第一种方式：直接在浏览器地址栏上写URL。（重点）
				
				第二种方式：可以点击超链接（重点）
				
				第三种方式：提交表单（重点）
				
				第四种方式：window.open(url,target)  （了解）
				
				第五种方式：js代码（重点）
							window.location.href
							window.location
							document.location.href
							document.location
							
				通过浏览器向服务器发送请求，通常是以上的五种方式。
		 -->
		<input type="button" value="百度" onclick="goBaidu();"/>
	</body>
</html>

alert和confirm方法

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>alert和confirm方法</title>
	</head>
	<body>
		<script type="text/javascript">
			function sayHello(){
    
    
				// 弹出消息框
				window.alert("hello world!");
			}
			
			function del(){
    
    
				// 删除数据之前一定要提示用户是否真的删除,用户点击了确定才表示真的删除.
				// 确认框
				//var ok = window.confirm("亲，确认删除数据吗？")
				//console.log(ok) //返回值是一个布尔类型.
				
				/* if(ok){
					alert("数据正在删除中，请稍后...")
				} */
				
				if(window.confirm("亲，确认删除数据吗？")){
    
    
					alert("数据正在删除中，请稍后...")
				}
			}
		</script>
		
		<input type="button" value="hello" onclick="sayHello()"/>
		
		<input type="button" value="删除" onclick="del()"/>
	</body>
</html>

什么是JSON？

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<script type="text/javascript">
			/* 
			1、什么是JSON？
				JavaScript Object Notation（JavaScript标记对象）
				简称JSON。
				JSON是一种轻量级的数据交换格式。
				
				什么是轻量级：
					体现在JSON的体积小。虽然一个小的体积可能表示的数据很多。
				
				什么是数据交换：
					C语言和Java语言之间交换数据，
					python和Java语言之间交换数据，
					javascript和java之间交换数据。
				
				透露一下：在现代的开发中，能够做数据交换的，包括两个：
					第一个：JSON
					第二个：XML
					JSON和XML都是非常标准的数据交换格式。
						XML体积大，解析难度大。
						JSON体积小，解析更容易。
						XML和JSON相对比来说，XML的语法严格，json的语法相对松散。
				
			2、在JavaScript当中，json是以对象的形式存在的。
			
			3、在javascript当中，怎么定义JSON格式的对象，怎么访问对象的属性呢？
				语法格式：
					var jsonObj = {
							"属性名" : 属性值,
							"属性名" : 属性值,
							"属性名" : 属性值,
							"属性名" : 属性值,
							"属性名" : 属性值,
							"属性名" : 属性值,
							....
					}
					
					注意：属性值，可以是任意类型。
					JSON是一种无类型的对象，直接一个大括号包起来就是一个JSON对象了。
					
			4、注意：在JS中[]和{}有什么区别？
				[] 是数组对象
				{} 是json对象
			 */
			var emp = {
    
    
				"empno" : 7369,
				"ename" : "smith",
				"sal" : 800
			}
			
			// 怎么访问对象的属性？
			// 第一种方式
			console.log(emp.empno)
			console.log(emp.ename)
			console.log(emp.sal)
			
			// 第二种方式
			console.log(emp["empno"])
			console.log(emp["ename"])
			console.log(emp["sal"])
			
			var person = {
    
    
				"name" : "zhangsan",
				"sex" : false,
				"aihao" : ["抽烟","喝酒","烫头"]
			}
			
			console.log(person.name)
			
			console.log(person.sex ? "男" : "女"),
			
		 aihaos = person.aihao;
			for(var i = 0; i < aihaos.length; i++){
    
    
				console.log(aihaos[i])
			}
			
		</script>
	</body>
</html>

JSON对象的属性值可以是JSON对象吗

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>JSON对象的属性值可以是JSON对象吗</title>
	</head>
	<body>
		<script type="text/javascript">
			// json对象1
			/* var addr = {
				"city" : "北京",
				"street" : "大兴"
			} */
			
			// json对象2
			/* var user = {
				"username" : "zhangsan",
				"password" : "123",
				"email" : "[email protected]",
				"address" : addr
			} */
			
			var user = {
    
    
				"username" : "zhangsan",
				"password" : "123",
				"email" : "[email protected]",
				"address" : {
    
    "city" : "深圳","street" : "宝安"}
			}
			
			// zhangsan住在哪个城市怎么访问？
			console.log(user.username + "居住在" + user.address.city)
		</script>
	</body>
</html>

设计一个JSON格式的数据可以表示全班人数和每个学生信息

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>设计一个JSON格式的数据可以表示全班人数和每个学生信息</title>
	</head>
	<body>
		<script type="text/javascript">
			//设计一个JSON格式的数据可以表示全班人数和每个学生信息
			var students = {
    
    
				"total" : 3,
				"data" : [{
    
    "name":"陈赓", "age":20},{
    
    "name":"吴雨阳","age":21},{
    
    "name":"殷远庭", "age":23}]
			};
			
		 //理解了吗？JSON很容易解析,一顿"点"就行.
			console.log(students.data[0].name)
			
			// 访问以上的json对象,将总人数取出,将每个学生的信息取出
			console.log("总人数：" + students.total)
			
			// 访问每一个学生数据
			var arr = students.data;
			for(var i = 0; i < arr.length; i++){
    
    
				var s = arr[i];
				console.log("姓名：" + s.name + ",年龄：" + s.age)
			}
			
		</script>
	</body>
</html>

java传过来的是一个字符串怎么变成json对象呢

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>java传过来的是一个字符串怎么变成json对象呢</title>
	</head>
	<body>
		
		<script type="text/javascript">
			/* 
				1、java和javascript两个语言怎么交换数据呢？
					可以使用JSON格式的字符串。
					JSON就是一种轻量级的数据交换格式。
					
				2、java的JDBC连接数据库查询数据，然后将数据拼接成JSON格式的字符串，
				将JSON格式的字符串传给javascript，然后在javascript当中把json格式
				的字符串转换成JSON对象，这样就可以从json对象中取数据了，这样就完成了
				数据的交换。
			 */
			
			// json对象
			/* var json = {
				"name" : "zhangsan",
				"age" : 20
			} */
 			 
			// 双引号当中的是一个普通的不能再普通的字符串,这个字符串是java给我们浏览器的.
			var fromJavaJSON = "{\"name\":\"zhangsan\", \"age\":20}";  //这个不是json对象,是一个字符串.
			
			// 你需要将json格式的字符串转换成json对象.
			// eval函数的作用是:将后面的字符串当做一段JS代码解释并执行.
			window.eval("var stu = " + fromJavaJSON) //重点中的重点,这个可以将json格式的字符串转换成json对象.
			
			// 上面代码执行结束之后,等同于这里创建了一个json对象.
			/* var stu = {
				"name" : "zhangsan",
				"age" : 20
			}; */
			
			// 转换成json对象的目的是为了取数据.(这样javascript和java之间两个不同的编程语言就完成了数据的交换！)
			console.log(stu.name + "," + stu.age)
			
			window.eval("var i = 0")
			alert(i)
		</script>
		
	</body>
</html>

拼接html的方式，设置table的tbody（非常具有代表性的案例，必须敲5遍。）

<html>
    <head>
        <title>json</title>
    </head>
<script>

//来自java的数据
var fromJava = "{\"total\" : 2, \"students\" : [{\"name\":\"李四\",\"age\":19},{\"name\":\"王五\",\"age\":18}]}";

//设置鼠标点击事件
window.onload=function(){
    
    
    //获得按钮的id 
    document.getElementById("btn").onclick=function(){
    
    
        利用eval转换
        window.eval("var stu="+fromJava);
    
        //给span设置数据
      document.getElementById("spanid").innerHTML=stu.total;
        
      //拼接HTML
      var htmlStr="";
      var stuarr=stu.students

      for(var i=0;i<stuarr.length;i++){
    
    
         var temp=stuarr[i];//获取一个json对象
                   htmlStr+= "<tr>";
                   htmlStr+= "<td>"+(i+1)+"</td>";
                   htmlStr+= "<td>"+temp.name+"</td>";
                   htmlStr+="<td>"+temp.age+"</td>";
                   htmlStr+="</tr>";
      }
    
        //给表格设置数据
        document.getElementById("tbodyid").innerHTML=htmlStr;

   
        
    }
}



</script>

    <body>

        <!-- 按此按钮就可以查看下面表里面的详情 -->
        <input type="button" id="btn" value="查看表的内容">
   <hr>
        <table>
            <tr>
                <th>序号</th>
                <th>学生姓名</th>
                <th>学生年龄</th>
            </tr>
            <tbody id="tbodyid">
                <tr>
                    <td>1</td>
                    <td>张三</td>
                    <td>20</td>
                </tr>
                <tr>
                    <td>1</td>
                    <td>张三</td>
                    <td>20</td>
                </tr>
            </tbody>
        </table>
        <!-- 通过id可以改变span块；里面的值 -->
        总数据条数:<span id="spanid">0</span>
        
    </body>
</html>

什么是正则表达式?

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>正则表达式</title>
	</head>
	<body>
		<script type="text/javascript">
			/* 
				1、什么是正则表达式，有什么用？
					正则表达式是一门独立的学科，基本每个语言都支持。
					正则表达式不是JS专属的。不过在JS中使用居多。
					通常使用正则表达式进行字符串格式匹配。
					
					正则表达式是有一堆特殊的符号组成的一个表达式。
					每一个特殊的符号都有特殊的代表含义。
					
					例如：
						qq号的正则表达式。
						邮箱地址的正则表达式。
						
					邮箱地址格式验证：
						程序中有一个邮箱地址的正则表达式。
						用户输入了一个邮箱地址。
						那么邮箱地址的正则表达式和邮箱地址进行匹配，能匹配成功，表示合法，反之表示不合法。
						
				2、对于javascript程序员来说，我们对于正则表达式掌握到什么程度呢？
					第一：能够看懂正则表达式
					第二：简单的正则要会写
					第三：要能够独立的从网络当中搜索到你想要的正则表达式（搜索能力要有）
					第四：要会创建JS的正则表达式对象。
					第五：要会调用JS正则表达式对象的方法。
				
				3、常见的正则表达式符号有哪些？
					. 匹配除换行符以外的任意字符 
					\w 匹配字母或数字或下划线或汉字 
					\s 匹配任意的空白符 
					\d 匹配数字 
					\b 匹配单词的开始或结束 
					^ 匹配字符串的开始 
					$ 匹配字符串的结束 
					
					* 重复零次或更多次 0-N次
					+ 重复一次或更多次  1-N次
					? 重复零次或一次  0或1次
					{n} 重复n次  n次
					{n,} 重复n次或更多次  n+次
					{n,m} 重复n到m次  n到m次
					注意：数量永远匹配的都是前面的那个字符出现的次数。
					
					\W 匹配任意不是字母，数字，下划线，汉字的字符 
					\S 匹配任意不是空白符的字符 
					\D 匹配任意非数字的字符 
					\B 匹配不是单词开头或结束的位置 
					[^x] 匹配除了x以外的任意字符 
					[^aeiou] 匹配除了aeiou这几个字母以外的任意字符 
					
					| 表示或者
					
					[a-z]{1} a到z所有的字符中的任意1个。
					
					[a-zA-Z0-9]{3,} 前面这堆中的任意字符至少出现3个。
					
					[1-9][0-9]{4,}    qq号的正则表达式，最小的qq号是10000
					
					[1-9] 没有指定数量的时候，默认是1个。
					
				4、邮箱的正则表达式：
					^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$
					这个邮箱地址从网上找了之后不一定能用，你需要测试。反复测试。
				
				5、在JS中怎么创建正则表达式对象呢？
				
					包括两种方式，重点使用第一种
					
					第一种方式：直接量语法
						var regExp = /正则表达式/标记
						
					第二种方式：使用内置类RegExp类。
						var regExp = new RegExp("正则表达式", "标记")
					
					标记是可选项！！！！！都有哪些值可选呢？
						g：全局 global
						i: 忽略大小写 ignorecase
						gi: 全局扫描，并且忽略大小写。
				
				6、正则表达式对象有一个很重要的方法：
					var emailRegExp = /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/
					var ok = emailRegExp.test("用户输入的字符串");
					返回值ok是true表示，匹配成功了。
					
					其实在JS中，字符串String也是支持正则表达式的。
			 */
			// 字符串对象使用正则表达式
			console.log("1980-11-10".replace("-", "/"))
			// g表示global全局的,所有的 - 替换成/
			console.log("1980-11-10".replace(/-/g, "/"))
			
			function checkEmail(){
    
    
				//获取邮箱地址
				var email = document.getElementById("email").value;
				// 创建正则表达式对象
				var regExp = /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/;
				// 验证
				var ok = regExp.test(email);
				if(ok){
    
    
					alert("邮箱地址合法")
				}else{
    
    
					alert("邮箱地址不合法");
				}
			}
			
		</script>
		
		邮箱地址：<input type="text" id="email" />
		<input type="button" value="验证邮箱地址" onclick="checkEmail()"/>
	</body>
</html>

表单验证

（1）用户名不能为空
（2）用户名必须在6-14位之间
（3）用户名只能有数字和字母组成，不能含有其它符号（正则表达式）

（4）密码和确认密码一致
（5）统一失去焦点验证
（6）错误提示信息统一在span标签中提示，并且要求字体12号，红色。

（7）文本框再次获得焦点后，清空错误提示信息 （8）最终表单中所有项均合法方可提交

1.创建表单 [用户名,密码,确认密码,普通按键提交]
2.在按键上创建onclick事件
3.给用户名创建失去焦点事件失去焦点了就验证提交的数据合法吗
4.再给用户名设置聚集焦点(focus)再次聚焦焦点之后错误信息就消失
5.给确认密码设置失去焦点就验证数据的合法性
6.再给确认密码设置聚集焦点(focus)再次聚焦焦点之后错误信息就消失
7.给普通按钮设置单击事件 利用usernameElt.focus(); usernameElt.blur();
来测试表单中的数据合法性

<html>
    <head>
        <title>表单验证</title>
    </head>
    <style  type="text/css">
        span{
    
    
          font-size: 12px;
          color: red;  
        }
    </style>
   
    <script>
        /* 
			（1）用户名不能为空
			（2）用户名必须在6-14位之间
			（3）用户名只能有数字和字母组成，不能含有其它符号（正则表达式）
			（4）密码和确认密码一致
			（5）统一失去焦点验证
			（6）错误提示信息统一在span标签中提示，并且要求字体12号，红色。
			（7）文本框再次获得焦点后，清空错误提示信息
			（8）最终表单中所有项均合法方可提交
			 */

        /**
         * 1.创建表单 [用户名,密码,确认密码,普通按键提交]
         * 2.在按键上创建onclick事件
         * 3.给用户名创建失去焦点事件失去焦点了就验证提交的数据合法吗
         * 4.再给用户名设置聚集焦点(focus)再次聚焦焦点之后错误信息就消失
         * 5.给确认密码设置失去焦点就验证数据的合法性
         * 6.再给确认密码设置聚集焦点(focus)再次聚焦焦点之后错误信息就消失
         * 7.给普通按钮设置单击事件 利用usernameElt.focus(); usernameElt.blur();
         * 来测试表单中的数据合法性
         */

         window.onload=function(){
    
    
                //获得用户名错误信息 userError 
                var userErrorSpan =document.getElementById("userError");
                
                //设置用户名失去焦点事件完事就验证
                var usernameElt=document.getElementById("username");


                usernameElt.onblur=function(){
    
    

                    console.log("hello")
                    //获得用户名信息
                    var namevalue= usernameElt.value;

                    // 去除掉前后空白
					namevalue=namevalue.trim();

                    //判断用户名信息是否正确
                    if(namevalue==""){
    
    
                        userErrorSpan.innerHTML="用户名不能为空..."
                        
                    }
                    else {
    
    
                        //先判断长度合不合法
                        if(namevalue.length<6||namevalue.length>14){
    
    
                        //设置span对象
                        userErrorSpan.innerHTML="用户名长度必须是6-14位"
                    } else{
    
    //否则就是长度合法--判断内容合法吗
                       // 用户名不为空,并且长度也合法,接下来继续判断用户名中是否有特殊符号
							var regExp = /^[a-zA-Z0-9]+$/
                            var ok=regExp.test(namevalue);
                            if(ok){
    
    
                                userErrorSpan.innerHTML="" 
                            }else{
    
    
                                userErrorSpan.innerHTML="输入的内容只能是数字字母" 
                            }
                    }
                    }
                    
                }
                //设置用户名聚集焦点 --也是清空span错误信息的意思
                usernameElt.onfocus=function(){
    
    
                    userErrorSpan.innerHTML="";
                }

                //获得密码对象
                 var userpwdElm = document.getElementById("userpwd");

                //设置确认密码的失去焦点并验证
                var confirmpwdElm=document.getElementById("confirmpwd");
                //获得确认密码错误信息 
                var pwdErrorSpan = document.getElementById("pwdError");

                confirmpwdElm.onblur=function(){
    
    
                      var confirmValue=confirmpwdElm.value;  
                      var userpwdValue =userpwdElm.value;
                    //测试密码不为空 
                    if(confirmValue==""){
    
    
                        pwdErrorSpan.innerHTML="密码不能为空...."
                    }else if(confirmValue!=userpwdValue){
    
    
                        pwdErrorSpan.innerHTML="确认密码和原密码不相同..."                        
                    }else{
    
    
                        pwdErrorSpan.innerHTML="" 
                    }
                }

                //给确认密码设置聚焦事件也就是清除错误信息 
                confirmpwdElm.onfocus=function(){
    
    
                    pwdErrorSpan.innerHTML="" 
                }
            //提交表单-- 先获取按钮单击事件
            document.getElementById("btn").onclick=function(){
    
    
                /*
                重点!!!
                如何在按提交时确认表单信息是否合法 用各个对象 调用blur focus
                先focus清空 在调用blur失去焦点 测试数据合法性 
                */
               usernameElt.focus();
               usernameElt.blur();

               //在测试密码
               confirmpwdElm.focus();
               confirmpwdElm.blur();
                //如果有错误在上面调佣Blur之后就会显示

                //提交
                //获取表单对象
                var userForm=document.getElementById("userForm");
                //判断密码的span块和用户名的span块是否为空
                if( pwdErrorSpan.innerHTML==""&&userErrorSpan.innerHTML==""){
    
    
                    userForm.submit();
                }
                
            }



         }
         
        
    </script>
    <body>
        <!-- 创建表单 -->
        <form action="http://www.baidu.com" id="userForm">
            用户名 : <input type="text" name="username" id="username"/> <span id="userError"></span>
           <br>
            密码  : <input type="password" name="userpwd" id="userpwd"/>
            <br>
            确认密码: <input type="password" name="confirmpwd" id="confirmpwd" /> <span id="pwdError"></span>
            <br>
            <input type="button" value="提交" id="btn">
        </form>
    </body>
</html>

猜你喜欢

转载自blog.csdn.net/m0_56398287/article/details/127336095
今日推荐
基于大语言模型的开源知识库问答系统 MaxKB GitHub Star 数量突破 5,000 个！
美国拟限制 AI 大模型出口中国和俄罗斯
苹果将与 OpenAI 达成协议，将 ChatGPT 应用于 iPhone
openKylin 社区生态委员会第六次会议圆满召开
阿里云正式发布通义千问 2.5
Python 3.13 发布首个 Beta：实验性自由线程模式和 JIT、改进交互式解释器
Stack Overflow 拿我的代码去训练 AI 大模型，还封了我的账号
Pop!_OS 的 COSMIC 桌面完成 App Store 上架工作
报告：Django 仍然是 74% 开发者的首选
《2024 年一季度互联网投融资运行情况》研究报告
15 年前上了“FFmpeg 耻辱柱”，今天他还得谢谢咱——腾讯QQPlayer一雪前耻？
TIOBE 5 月榜单：Fortran “复活”进入 Top 10
周排行
BPM为企业带来的实际利益
好程序员web前端分享css常用属性缩写
Java文件下载（excel）
css样式的动态添加及显示和隐藏等零碎用法
axios全局配置以及拦截器
使用Logstash来实时同步MySQL和log日志数据到ES
C++获取当前时间（年月日、时分秒、毫秒）
Odoo产品分析 (四) -- 工具板块(11) -- 网站即时聊天(1)
Java环境配置正确，但是java、javac、java -version均返回“不是内部或外部命令，也不是可运行的程序或批处理文件”？
01 官网下载各种CentOS教程（超详细版）
每日归档
更多
2024-05-14(0)
2024-05-13(18)
2024-05-12(0)
2024-05-11(38)
2024-05-10(38)
2024-05-09(35)
2024-05-08(42)
2024-05-07(14)
2024-05-06(40)
2024-05-05(0)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022