JavaScript学习笔记-B站动力节点

文章目录

1.1.什么是JavaScript，有什么用？
1.，CSS，JavaSript三者关系
2.在HTML中怎么嵌入JavaScript代码？
的标识符和关键字
4.关于JS中的变量
的函数初步
6.局部变量和全局变量
7.数据类型
类型
类型
类型
类型
类型
NaN undefined这三个值有什么区别
的常用事件和注册事件的两种方式
代码的执行顺序（load事件）
----以后的代码都是按照以下这种方式写的----
代码设置节点的属性（load事件）
代码捕捉回车键（keydown事件）
的void运算符
的控制语句和JS的数组
包括三块：ECMAScript、DOM、BOM
编程-获取文本框的value
编程-innerHTML和innerText操作div和span
编程-关于正则表达式
编程-去除字符串前后空白的trim函数
编程-表单验证
编程-复选框的全选和取消全选
编程-获取下拉列表选中项的value
28.编程-显示网页时钟和JS内置对象(内置支持类)Date
28.2.内置支持类Array
29.学会使用浏览器的F12
编程-window对象的open和close方法
编程-弹出消息框和确认框
编程-将当前窗口设置为*窗口
编程-window的history对象(类)
编程-设置浏览器地址栏上的URL
-介绍
-复杂一些的JSON对象
-eval函数
-DOM-拼接html的方式，设置table的tbody

1.1.什么是JavaScript，有什么用？

JavaScript是运行在浏览器上的脚本语言。简称JS。

JavaScript是网景公司（NetScape）的 布兰登艾奇（JavaScript之父）开发的，最初叫做LiveScript。

LiveScript的出现让浏览器更加的生动了，不再是单纯的静态页面了。页面更具有交互性。


在历史的某个阶段，SUN公司和网景公司他们之间有合作关系，SUN公司把LiveScript的名字修改为JavaScript。

JavaScript这个名字中虽然带有“Java”但是和Java没有任何关系，只是语法上优点类似。
他们运行的位置不同，Java运行在JVM当中，JavaScript运行在浏览器的内存当中。

JavaScript程序不需要我们程序员手动编译，编写完源代码之后，浏览器直接打开解释执行。
JavaScript的“目标程序”以普通文本形式保存，这种语言都叫做“脚本语言”。

Java的目标程序以.class形式存在，不能使用文本编辑器打开，不是脚本语言。

网景公司1998年被美国在线收购。

网景公司最著名的就是领航者浏览器：Navigator浏览器。

LiveScript的出现，最初的时候是为Navigator浏览器量身定制一门语言，不支持其他浏览器。

当Navigator浏览器使用非常广泛的时候，微软害怕了，于是微软在最短的时间内组建了一个团队，
开始研发只支持IE浏览器的脚本语言，叫做JScript。

JavaScript和JScript并存的年代，程序员是很痛苦的，因为程序员要写两套程序。
在这种情况下，有一个非营利性组织站出来了，叫做ECMA组织（欧洲计算机协会）
ECMA根据JavaScript制定了ECMA-262号标准，叫做ECMA-Script。

现代的javascript和jscript都实现了ECMA-Script规范。（javascript和jscript统一了。）

以后大家会学习一个叫做JSP的技术，JSP和JS有啥区别？
	JSP : JavaServer Pages（隶属于Java语言的，运行在JVM当中）
	JS : JavaScript（运行在浏览器上。）

1.，CSS，JavaSript三者关系

CSS和JavaScript为HTML服务

CSS好比是HTML的化妆品一样。修饰HTML页面，设置HTML页面中的某些元素的样式，让HTML页面更好看。
JavaScript让网页能够动起来，更加生动，页面更具有交互性。

2.在HTML中怎么嵌入JavaScript代码？

三种方式

第一种方式：
	<标签 ... 事件句柄="js代码" />

第二种方式：脚本块的方式
	<script type="text/javascript">
		js代码
	</script>

第三种方式：
	引入外部独立的js文件(推荐使用)

<!doctype html>
<html>
	<head>
		<title>HTML中嵌入JS代码的第一种方式</title>
	</head>
	<body>
		
		<!--
			1.要实现的功能：
				用户点击以下按钮，弹出消息框。

			是一门事件驱动型的编程语言，依靠事件去驱动，然后执行相应的程序。
			  在JS中有很多事件，其中一个事件叫做：鼠标单击(单词：click)。
			  并且任何事件都会对应一个事件句柄，事件句柄是以HTML标签的属性存在的。
			  事件句柄写法：在事件单词前加一个on。(比如鼠标单击事件的事件句柄是onclick)
			
			3.οnclick="js代码"，执行原理是什么？
				页面打开的时候，js代码并不会执行，只是把这段JS代码注册到按钮的click事件上了。等这个按钮发生click事件之后，注册在onclick后面的js代码会被浏览器自动调用。

			4.怎么使用js代码弹出消息框？
				在js中有一个内置的对象叫做window(全部小写)，可以直接拿来使用，window代表的是浏览器对象。
				
				window对象有一个函数叫做：alert，用法是：("消息");这样就可以弹窗了。
		
			中的字符串可以使用单引号，也可以使用双引号。

			中的一条语句结束之后可以使用分号，也可以不用。
		-->
		<input type="button" value="hello" onclick="('hello')"/>


		<!--
			οnclick='("hello")'
			外面是单引号，里面就该是双引号
		-->
		<input type="button" value="hello" onclick='("hello jscode")'/>


		<!--连续出现三个弹窗-->
		<input type="button" value="hello" onclick="('hello zhangsan')
													('hello lisi')
													('hello wangwu')"/>

		<!--window.可以省略不写-->
		<input type="button" value="hello" onclick="alert('hello zhangsan')
													alert('hello lisi')
													alert('hello wangwu')"/>

	</body>
</html>

<!doctype html>
<html>
	<head>
		<title>HTML中嵌入JS代码的第二种方式</title>
	</head>
	<body>

		<!--这个按钮会先执行，再执行下面的javaScript代码-->
		<input type="button" value="我是一个按钮" />


		<!--
			第二种方式：脚本块的方式
				<script type="text/javascript">
					js代码
				</script>
			
			javaScript的脚本块在整篇代码中(在一个页面中)可以出现多次，没有要求。
			javaScript的脚本块在整篇代码中出现的位置没有要求，可以在<!doctype html>上面
		-->
		<script type="text/javascript">
			/*
				暴露在脚本块当中的程序，在页面打开的时候执行，并且遵守自上而下的顺序依次逐行执行(这个代码的执行不需要事件)。

			*/
			window.alert("Hello World!");
			
			//alert函数会阻塞整个HTML页面的加载
			//点击弹窗的确定键后，该行语句才执行结束，才会接着执行下一条语句
			window.alert("Hello	JavaScript!");

			//js代码单行注释

			/*
				js代码多行注释
			*/

		</script>

	</body>
</html>

html注释：
	<!---->
	
css注释：
	要写在style里
	<style type="text/css">
		/* */
	</style>

JavaScript注释：
	要写在script里
	<script type="text/javascript">
		//单行注释
		/*  多行注释  */
	</script>

java注释：
	//单行注释
	/* 多行注释 */
	/**
	*javadoc注释，这里的注释信息会被工具解析提取生成帮助文档
	*
	*/

<!doctype html>
<html>
	<head>
		<title>HTML中嵌入JS代码的第三种方式</title>
	</head>
	<body>
		<!--引入外部独立的js文件(推荐使用)-->

		<!--在需要的位置引入js脚本文件-->
		<!--引入外部独立的js文件时，js文件中的代码会遵循自上而下的顺序依次逐行执行-->
		<script type="text/javascript" src="js/"></script>

		<!--
			同一个js文件可以被引入多次，但实际开发中这种需求很少
			<script type="text/javascript" src="js/"></script>

			注意：这种方式不行
			<script type="text/javascript" src="js/" />
		-->


		<script type="text/javascript" src="js/">
			//在这里之间写的代码不会执行
			//("Test");
		</script>


		<!--
			HTML中嵌入JS代码的第二种脚本块方式和第三种方式可以一起写：
			
			<script type="text/javascript" src="js/"></script>

			<script type="text/javascript">
				("hello");
			</script>
		-->

	</body>
</html>

的标识符和关键字

JS的标识符命名规则和规范参照java
	命名规则(语法上的规定)：
		1.必须由数字、字母、下划线、美元符号组成
		2.不能以数字开头
		3.严格区分大小写
		4.不能使用关键字做标识符
		5.理论上没有长度限制
	命名规范：
		1.类名和接口名首字母大写，后面每个字母首字母大写
		2.方法名和变量的名字首字母小写，后面每个单词首字母大写
		3.常量名要求全部大写，并且单词与单词之间以下划线_相隔
		4.驼峰命名方式
		5.见名知意

4.关于JS中的变量

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>关于JS中的变量</title>
	</head>
	<body>
		
		<script type="text/javascript">
		/*
			回顾java中的变量：
				中怎么定义/声明变量？
					数据类型 变量名;
						例如：
							int i;
							double d;
							boolean flag;
				中的变量怎么赋值？
					使用“=”运算符进行赋值运算（"="运算符右边先执行，将右边执行的结果赋值给左边的变量）
						变量名 = 值;
						例如：
							i = 10;
							d = 3.14;
							flag = false;
				语言是一种强类型语言，强类型怎么理解？
					java语言存在编译阶段，假设有代码：int i;
					那么在Java中有一个特点是：
						java程序编译阶段就已经确定了i变量的数据类型，该i变量的数据类型在编译阶段是int类型，
						那么这个变量到最终内存释放，一直都是int类型，不可能变成其他类型。
						
						int i = 10;
						double d = i; 
						这行代码是说声明一个新的变量d，double类型，把i变量中保存的值传给d。
						i还是int类型。
							
						i = "abc"; 这行代码编译的时候会报错，因为i变量的数据类型是int类型，不能将字符串赋给i。
							
				java中要求变量声明的时候是什么类型，以后永远都是这种类型，不可变。
				编译期强行固定变量的数据类型，称为强类型语言。
							
			javascript当中的变量？
				怎么声明变量？
					var 变量名;
				怎么给变量赋值？
					变量名 = 值;
				javascript是一种弱类型语言，没有编译阶段，一个变量可以随意赋值，赋什么类型的值都行。
					var i = 100;
					i = false;
					i = "abc";
					i = new Object();
					i = 3.14;
					
				重点：javascript是一种弱类型编程语言。0
		*/
		
		//在JS当中，当一个变量没有手动赋值的时候，系统默认赋值undefined
		//undefined 在JS中是一个具体存在值
		var i;
		window.alert("i =" + i);
		
		alert(undefined);
		var k = undefined;
		alert("k = " + k);
		
		//一个变量没有声明/定义,直接用?
		// alert(age); 语法错误：age is not defined (变量age不存在,不能这样写)
		
		var a, b, c = 200;
	    alert("a = " + a); //a=undefined
     	alert("b = " + b); //b=undefined
 		alert("c = " + c); //c=200
		   
		a = false;
		alert(a); 
		   
		a = "abc";
		alert(a); 
		   
		a = 1.2;
		alert(a);
		 
		</script>
		   
	</body>
</html>

的函数初步

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>JS的函数初步</title>
	</head>
	<body>
		<script type="text/javascript">
			/*
				中的函数：
					等同于java语言中的方法，函数也是一段可以被重复利用的代码片段。
					函数一般都是可以完成某个特定功能的。
					
				2.回顾java中的方法？
					[修饰符列表] 返回值类型 方法名(形式参数列表){
						方法体;
					}
					
					例如：
					public static boolean login(String username,String password){
						...
						return true;
					}
					
					boolean loginSuccess = login("admin","123");
					
				中的变量是一种弱类型的，那么函数应该怎么定义呢？
					语法格式：
						第一种方式：
							function 函数名(形式参数列表){
								函数体;
							}
							
						第二种方式：
							函数名 = function(形式参数列表){
								函数体;
							}
						
						JS中的函数不需要指定返回值类型，返回什么类型都行。
			*/
		   
			function sum(a,b){
				//a和b都是局部变量,他们都是形参(a和b都是变量名，变量名随意)
				window.alert(a+b);
			}
			
		    //函数必须调用才能执行的.
		    //sum(10, 20);
			
		    // 定义函数sayHello
		    sayHello = function(username){
				window.alert("hello " + username);
		    }
		   
		   //调用函数
		   //sayHello("zhangsan");
		   
		</script>
		
			<!--使用事件句柄和脚本块联合的方式，并在事件句柄中调用脚本块中的函数-->
			<input type="button" value="hello" onclick="sayHello('jack');" /> 
			<input type="button" value="计算10和20的求和" onclick="sum(10, 20);" />
			
	</body>
</html>

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>JS的函数初步</title>
	</head>
	<body>
		
		<script type="text/javascript">
			/*
				java中的方法有重载机制，JS中的函数能重载吗？
					JS当中的函数在调用的时候，参数的类型没有限制，并且参数的个数也没有限制，JS就是这么随意（弱类型）
				
				重载的含义：
					方法名或者函数名一样，形参不同（个数、类型、顺序）
					JS中的函数不需要重载。
			*/
		   function sum(a, b){
			   return a + b;
		   }
		   
		   // 调用函数sum
		   var retValue = sum(1, 2);
		   alert(retValue);
		   
		   var retValue2 = sum("jack"); // jack赋值给a变量,b变量没有赋值系统默认赋值undefined
		   alert(retValue2); // jackundefined
		   
		   var retValue3 = sum();
		   alert(retValue3); // NaN (NaN是一个具体存在的值，该值表示不是数字。Not a Number)
		   
		   var retValue4 = sum(1, 2, 3);
		   alert("结果=" + retValue4); // 结果=3(第三个3没了)
		   
		   
		    /*
		   在JS当中，函数的名字不能重名，当函数重名的时候，后声明的函数会将之前声明的同名函数覆盖。
		   */
		   function test1(username){
			   alert("test1");
		   }
		   
		   function test1(){
			   alert("test1 test1");
		   }
		   
		   test1("lisi"); // 这个调用的是第二个test1()函数.
		   
		</script>
		
	</body>
</html>

6.局部变量和全局变量

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>设置table的tbody</title>
	</head>
	<body>
		<script type="text/jscript">
			/*
				全局变量：
					在函数体之外声明的变量属于全局变量，全局变量的生命周期是：
						浏览器打开时声明，浏览器关闭时销毁，尽量少用。
						因为全局变量会一直在浏览器的内存当中，耗费内存空间。
						能使用局部变量尽量使用局部变量。
				局部变量：
					在函数体当中声明的变量，包括一个函数的形参都属于局部变量。
					局部变量的生命周期是：
						函数开始执行时局部变量的内存空间开辟，函数执行结束之后，局部变量的内存空间释放。
					    局部变量生命周期较短。
			*/
		   
		   // 全局变量
		   var i = 100;
		   
		   function accessI(){
			   // 访问的是全局变量
			   alert("i = " + i);
		   }
		   accessI();
		   
		   
		   // 全局变量
		   var username = "jack";
		   function accessUsername(){
			   // 局部变量
			   var username = "lisi";
			   // 就近原则:访问局部变量
			   alert("username = " + username);
		   }
		   // 调用函数
		   accessUsername();
		   // 访问全局变量
		   alert("username = " + username);
		   
		   
		   function accessAge(){
			   var age = 20;
			   alert("年龄 = " + age);
		   }
		   
		   accessAge();
		   
		   // 报错(语法不对，无法调用局部变量)
		   // alert("age = " + age);
		   
		   
		   // 以下语法是很奇怪的.
		   function myfun(){
			   // 当一个变量声明的时候没有使用var关键字,那么不管这个变量是在哪里声明的,都是全局变量.
			   myname = "dujubin";
		   }
		   
		   myfun();// 访问函数
		   
		   alert("myname = " + myname); // myname = dujubin
		   
		</script>
	</body>
</html>

7.数据类型

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>JS中的数据类型</title>
	</head>
	<body>
		<script type="text/javascript">
			/*
				1.虽然JS中的变量在声明的时候不需要指定数据类型，但是在赋值，每一个数据还是有类型的，所以
				这里也需要学习一下JS包括哪些数据类型？
					JS中数据类型有：原始类型、引用类型。
					原始类型：Undefined、Number、String、Boolean、Null
					引用类型：Object以及Object的子类
					
				规范(ECMAScript规范)，在ES6之后，又基于以上的6种类型之外添加了一种新的类型：Symbol
				
				中有一个运算符叫做typeof，这个运算符可以在程序的运行阶段动态的获取变量的数据类型。
					typeof运算符的语法格式：
						typeof 变量名
					typeof运算符的运算结果是以下6个字符串之一：注意字符串都是全部小写。
						"undefined"
						"number"
						"string"
						"boolean"
						"object"
						"function"
						
				4.在JS当中比较字符串是否相等使用“==”完成。没有equals。
			*/
		   
		   // 求和,要求a变量和b变量将来的数据类型必须是数字,不能是其他类型
		   // 因为以下定义的这个sum函数是为了完成两个数字的求和.
		   function sum(a, b){
			   if(typeof a == "number" && typeof b == "number"){
				   return a + b;
			   }
			   alert(a + "," + b + "必须都为数字！");
		   }
		   
		   // 别人去调用以上你写的sum函数.
		   var retValue = sum(false, "abc");
		   alert(retValue); //没有返回值，赋默认值 undefined
		   
		   var retValue2 = sum(1, 2);
		   alert(retValue2); // 3
		   
		  
		   
		   var i;
		   alert(typeof i); // "undefined"
		  
		   var k = 10;
		   alert(typeof k); // "number"
		  
		   var f = "abc";
		   alert(typeof f); // "string"
		  
		   var d = null;
		   alert(typeof d); // "object"  null属于Null类型,但是typeof运算符的结果是"object"(无法解释，是个bug)
		  
		   var flag = false;
		   alert(typeof flag); // "boolean"
		  
		   var obj = new Object();
		   alert(typeof obj); // "object"
		  
		   // sayHello是一个函数.
		   function sayHello(){
			  
		   }
		   alert(typeof sayHello); // "function"
		   
		</script>
	</body>
</html>

类型

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Undefined类型</title>
	</head>
	<body>
		<script type="text/javascript">
			/*
				Undefined类型只有一个值，这个值就是 undefined
				当一个变量没有手动赋值，系统默认赋值undefined
				或者也可以给一个变量手动赋值undefined。
			*/
		   var i; // undefined
		   var k = undefined; // undefined
		   
		   alert(i == k); // true
		   
		   var y = "undefined"; // "undefined" 是字符串
		   alert(y == k); // false
		   
		</script>
	</body>
</html>

类型

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Number类型</title>
	</head>
	<body>
		<script type="text/javascript">
			/*
				类型包括哪些值？(java中使用byte short int long float double 6个类型来表示数字，js中只使用了一个Number)
					-1 0 1 2 2.3 3.14 100 .... NaN Infinity
					整数、小数、正数、负数、不是数字、无穷大都属于Number类型。
				() : 结果是true表示不是一个数字，结果是false表示是一个数字。
				()函数
				()函数
				() 函数（Math是数学类，数学类当中有一个函数叫做ceil()，作用是向上取整(大于等于自己的最小整数)）
			*/
		   
		   var v1 = 1;
		   var v2 = 3.14;
		   var v3 = -100;
		   var v4 = NaN;
		   var v5 = Infinity;
		   
		   // "number"
		   alert(typeof v1);
		   alert(typeof v2);
		   alert(typeof v3);
		   alert(typeof v4);
		   alert(typeof v5);
		   
		   // 关于NaN (表示Not a Number，不是一个数字，但属于Number类型)
		   // 什么情况下结果是一个NaN呢？
		   // 运算结果本来应该是一个数字,最后算完不是一个数字的时候,结果是NaN.
		   var a = 100;
		   var b = "中国人";
		   // 除号显然最后结果应该是一个数字,但是运算的过程中导致最后不是一个数字,那么最后的结果是NaN
		   alert(a / b); 
		   
		   var e = "abc";
		   var f = 10;
		   alert(e + f); //"abc10"(+号两边如果有字符串，会做字符串拼接，而不是做加法运算)
		   
		   // Infinity (当除数为0的时候，结果为无穷大)
		   alert(10 / 0);
		   
		   // 思考:在JS中10 / 3 = ?
		   alert(10 / 3); // 3.3333333333333335
		   
		   
		   
		   // 关于isNaN函数？
		   // 用法：isNaN(数据),结果是true表示不是一个数字, 结果是false表示是一个数字.
		   // isNaN : is Not a Number 
		   function sum(a, b){
			   if(isNaN(a) || isNaN(b)){
				   alert("参与运算的必须是数字！");
				   return;
			   }
			   return a + b;
		   }
		   sum(100, "abc"); //参与运算的必须是数字！
		   alert(sum(100, 200)); //300
		   
		   // parseInt():可以将字符串自动转换成数字,并且取整数位.
		   alert(parseInt("3.9999")); // 3
		   alert(parseInt(3.9999)); // 3
		   
		   // parseFloat():可以将字符串自动转换成数字.
		   alert(parseFloat("3.14") + 1); // 4.14
		   alert(parseFloat("3.2") + 1); // 4.2
		   
		   // ()
		   alert(Math.ceil("2.1")); // 3
		   
		   
		</script>
	</body>
</html>

类型

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Boolean类型</title>
	</head>
	<body>
		<script type="text/javascript">
			/*
				中的布尔类型永远都只有两个值：true和false（这一点和java相同）
				2.在Boolean类型中有一个函数叫做：Boolean()。
					语法格式：
						Boolean(数据) 
					Boolean()函数的作用是将非布尔类型转换成布尔类型。
			*/
		   
		   /*
			if(布尔类型)
			如果括号里不是布尔类型，会自动调用函数Boolean()，将非布尔类型转换成布尔类型
				用法：
					Boolean("有")--->true
					Boolean("没有")--->false
					
				规律:“有"就转换成true,"没有"就转换成false.
				alert(Boolean(1)); // true
				alert(Boolean(0)); // false
				alert(Boolean("")); // false
				alert(Boolean("abc")); // true
				alert(Boolean(null)); // false
				alert(Boolean(NaN)); // false
				alert(Boolean(undefined)); // false
				alert(Boolean(Infinity)); // true
		   */
		   
		   var username = "";//用户名不能为空
		   //var username = "jack"; 欢迎你jack
		   
		   if(username){
				alert("欢迎你" + username);
		   }else{
		   		alert("用户名不能为空！");
		   }
		   
		   /*
		   if(Boolean(username)){
			   alert("欢迎你" + username);
		   }else{
			   alert("用户名不能为空！");
		   }
		   */
		  
		   
		   /*
		   死循环
			while(10 / 3){
				alert("hehe");
			}
		   */
		   
		   for(var i = 0; i < 10; i++){
			   alert("i = " + i);
		   }
		   
		   
		   
		   // Null类型只有一个值,null
		   alert(typeof null); //注意：typeof null 为 "object"
			
			
		</script>

	</body>
</html>

类型

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<script type="text/javascript">
			/*
				String类型：
					1.在JS当中字符串可以使用单引号，也可以使用双引号。
						var s1 = 'abcdef';
						var s2 = "test";
					2.在JS当中，怎么创建字符串对象呢？
						两种方式：
							第一种：var s = "abc";
							第二种（使用JS内置的支持类String）： var s2 = new String("abc");
						需要注意的是：String是一个内置的类，可以直接用，String的父类是Object。
					3.无论小string还是大String，他们的属性和函数都是通用的。
					4.关于String类型的常用属性和函数？
						常用属性：
							length 获取字符串长度
						常用函数：
							indexOf			获取指定字符串在当前字符串中第一次出现处的索引
							lastIndexOf		获取指定字符串在当前字符串中最后一次出现处的索引
							replace			替换
							substr			截取子字符串
							substring		截取子字符串
							toLowerCase		转换小写
							toUpperCase		转换大写
							split			拆分字符串
			*/
		   
		   // 小string(属于原始类型String)
		   var x = "king";
		   alert(typeof x); // "string"
		   
		   // 大String(属于Object类型)
		   var y = new String("abc");
		   alert(typeof y); // "object"
		   
		   
		   //无论小string还是大String，他们的属性和函数都是通用的。
		   
		   //字符串的length属性，获取字符串的长度
		   alert(x.length); // 4
		   alert(y.length); // 3
		   
		   //字符串的indexOf函数，获取指定字符串在当前字符串中第一次出现处的索引
		   alert("".indexOf("http")); // 0
		   alert("".indexOf("https")); // -1
		   
		   // 判断一个字符串中是否包含某个子字符串？
		   alert("".indexOf("https") >= 0 ? "包含" : "不包含"); // 不包含
		   
		   
		   // replace函数 (注意：只替换了第一个)
		   alert("name=value%name=value%name=value".replace("%","&")); // name=value&name=value%name=value
		   
		   // 继续调用replace方法,就会替换第“二”个.
		   // 想全部替换需要使用正则表达式(后面再讲).
		   alert("name=value%name=value%name=value".replace("%","&").replace("%", "&")); // name=value&name=value&name=value
		   
		   
		   // 考点:经常问 substr和substring的区别？
		   // substr(startIndex, length) 下标从0开始
		   alert("abcdefxyz".substr(2,4)); //cdef
		   
		   // substring(startIndex, endIndex) 注意:不包含endIndex
		   alert("abcdefxyz".substring(2,4)); //cd
		
		</script>
	</body>
</html>

可以查看帮助文档

在这里插入图片描述

类型

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Object类型</title>
	</head>
	<body>
		<script type="text/javascript">
			/*
				Object类型：
					类型是所有类型的超类，自定义的任何类型，默认继承Object。
					
					类包括哪些属性？
						prototype属性（常用的，主要是这个）：作用是给类动态的扩展属性和函数。
						constructor属性
					
					类包括哪些函数？
						toString()
						valueOf()
						toLocaleString()
					
					4.在JS当中定义的类默认继承Object，会继承Object类中所有的属性以及函数。
					换句话说，自己定义的类中也有prototype属性。
					
					5.在JS当中怎么定义类？怎么new对象？
						定义类的语法：
							第一种方式：
								function 类名(形参){
									
								}
							第二种方式：
								类名 = function(形参){
									
								}
								
						创建对象的语法：
							new 构造方法名(实参); // 构造方法名和类名一致。
			*/
		   function sayHello(){}
		   
		   // 把sayHello当做一个普通的函数来调用.
		   sayHello();
		   
		   // 这种方式就表示把sayHello当做一个类来创建对象.
		   var obj = new sayHello(); // obj是一个引用,保存内存地址指向堆中的对象.
		   
		   
		   // 定义一个学生类
		   function Student(){
			   alert("Student.....");
		   }
		   
		   // 当做普通函数调用
		   Student();
		   
		   // 当做类来创建对象
		   var stu = new Student();
		   alert(stu); // [object Object]
		   
		   //可以通过函数名首字母小写,类名首字母大写来区分是函数还是类
		   
		   
		   
		   
		   // JS中的类的定义,同时又是一个构造函数的定义
		   // 在JS中类的定义和构造函数的定义是放在一起来完成的.
		   function User(a, b, c){ // a b c是形参,属于局部变量.
			   // 声明属性 (this表示当前对象)
			   // User类中有三个属性:sno/sname/sage
			   this.sno = a;
			   this.sname = b;
			   this.sage = c;
		   }
		   
		   // 创建对象
		   var u1 = new User(111, "zhangsan", 30);
		   // 访问对象的属性
		   alert(u1.sno);
		   alert(u1.sname);
		   alert(u1.sage);
		   
		   var u2 = new User(222, "jackson", 55);
		   alert(u2.sno);
		   alert(u2.sname);
		   alert(u2.sage);
		   
		   // 访问一个对象的属性,还可以使用这种语法
		   alert(u2["sno"]);
		   alert(u2["sname"]);
		   alert(u2["sage"]);
		   
		   
		   
		   
		   // 定义类的另一种语法
		   /*
		   Emp = function(a, b){
			    = a;
			    = b;
		   }
		   */
		  
		  Emp = function(ename,sal){
			  // 属性
			  this.ename = ename;
			  this.sal = sal;
		  }
		  
		  var e1 = new Emp("SMITH", 800);
		  alert(e1["ename"] + "," + e1.sal);
		  
		   
		   
		   
		   //另一个例子
		   Product = function(pno,pname,price){
			   // 属性
			   this.pno = pno;
			   this.pname = pname;
			   this.price = price;
			   // 函数
			   this.getPrice = function(){
				   return this.price;
			   }
		   }
		   
		   var xigua = new Product(111, "西瓜", 4.0);
		   var pri = xigua.getPrice();
		   alert(pri); // 4.0
		   
		   
		   
		   
		   // 可以通过prototype这个属性来给类动态扩展属性以及函数
		   //意思是在类写完之后,又想给类添加新的属性/函数,这样就可以使用属性prototype
		   
		   Product.prototype.getPname = function(){
			   return this.pname;
		   }
		   
		   // 调用后期扩展的getPname()函数
		   var pname = xigua.getPname();
		   alert(pname);

			// 给String扩展一个函数
		   String.prototype.suiyi = function(){
			   alert("这是给String类型扩展的一个函数，叫做suiyi");
		   }
		   
		   "abc".suiyi();
		   
		</script>
	</body>
</html>


<!--
	java语言怎么定义类，怎么创建对象？（强类型）
		public class User{
			private String username;
			private String password;
			
			public User(){
				
			}
			
			public User(String username,String password){
				 = username;
				 = password;
			}
			
		}
		
		User user = new User();
		User user = new User("lisi","123");
		
	JS语言怎么定义类，怎么创建对象？（弱类型）
		User = function(username,password){
			 = username;
			 = password;
		}
		
		var u = new User();
		var u = new User("zhangsan");
		var u = new User("zhangsan","123");
-->

NaN undefined这三个值有什么区别

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>null NaN undefined这三个值有什么区别</title>
	</head>
	<body>
		<script type="text/javascript">
			
			// null NaN undefined 数据类型不一致.
			alert(typeof null); // "object"
			alert(typeof NaN); // "number"
			alert(typeof undefined); // "undefined"
			
			// null和undefined可以等同.
			alert(null == NaN); // false
			alert(null == undefined); // true
			alert(undefined == NaN); // false
		
			
			
			// 在JS当中有两个比较特殊的运算符
			// ==(等同运算符：只判断值是否相等)
			// ===(全等运算符：既判断值是否相等，又判断数据类型是否相等)
			alert(null === NaN); // false
			alert(null === undefined); // false
			alert(undefined === NaN); // false
			
			// == 是等同运算符
			alert(1 == true); // true
			alert(1 === true); // false
			
		</script>

	</body>
</html>

的常用事件和注册事件的两种方式

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>JS的常用事件</title>
	</head>
	<body>
		<script type="text/javascript">
			/*
				JS中的常用事件：
				
					blur  失去焦点	
					focus 获得焦点
					
					click    鼠标单击
					dblclick 鼠标双击 (doubleclick)
					
					keydown  键盘按下
					keyup    键盘弹起
					
					mousedown 鼠标按下
					mouseover 鼠标经过
					mousemove 鼠标移动
					mouseout  鼠标离开
					mouseup   鼠标弹起
					
					reset  表单重置
					submit 表单提交
					
					change 下拉列表选中项改变，或文本框内容改变
					select 文本被选定
					load   页面加载完毕（整个HTML页面中所有的元素全部加载完毕之后发生）
				
				任何一个事件都会对应一个事件句柄，事件句柄是在事件前添加on。
				onXXX这个事件句柄出现在一个标签的属性位置上。（事件句柄以属性的形式存在）
			*/
		   
		   // 对于当前程序来说,sayHello函数被称为回调函数(callback函数)
		   // 回调函数的特点:自己把这个函数代码写出来了,但是这个函数不是自己负责调用,由其他程序负责调用该函数.
		   function sayHello(){
			   alert("hello js!");
		   }
		   
		   /*
			java中也有回调函数机制：
				public class MyClass{
					
					public static void main(String[] args){
						// 主动调用run()方法，站在这个角度看run()方法叫做正向调用。
						run();
					}
					
					// 站在run方法的编写者角度来看这个方法，把run方法叫做回调函数。
					public static void run(){
						("run...");
					}
				}
			*/
		   
		</script>
		
		
		<!--注册事件的第一种方式：直接在标签中使用事件句柄-->
		<!--
			以下代码的含义是：
				将sayHello函数 注册 到按钮上，等待click事件发生之后，该函数被浏览器调用。
				我们称这个函数为回调函数。
		-->
		<input type="button" value="hello" onclick="sayHello()"/>
		
		
		
		
		<!--第二种注册事件的方式-->
		
		<input type="button" value="hello2" id="mybtn" />
		
		<input type="button" value="hello3" id="mybtn1" />
		
		<input type="button" value="hello4" id="mybtn2" />
		
		<script type="text/javascript">
		   //第二种注册事件的方式，是使用纯JS代码完成事件的注册。
		   
		   	function doSome(){
				alert("do some!");
			}
			
		   // 第一步:先获取这个按钮对象(document是全部小写，内置对象，可以直接用，document就代表整个HTML页面)
		   //通过document对象的getElementById(...)方法(通过id获得元素),返回一个button对象
		   var btnObj = document.getElementById("mybtn");
		   
		   // 第二步:给按钮对象的onclick属性赋值(这里通过函数调用的方法)
		   // 注意:千万别加小括号. doSome()代表返回值，函数会立即执行；doSome代表这个函数
		   // = doSome();--->如果这样写,不按按钮就会出现弹窗
		   // 这行代码的含义是,将回调函数doSome注册到click事件上.
		   btnObj.onclick = doSome; 
		   
		   //到此第二种方式结束
		   
		   //可以通过匿名函数代替上述函数
		   var mybtn1 = document.getElementById("mybtn1");
		   // 这个函数没有名字,叫做匿名函数,这个匿名函数也是一个回调函数.
		   // 这个函数在页面打开的时候只是注册上,不会被调用,在click事件发生之后才会调用.
		   mybtn1.onclick = function(){ 
			   alert("test.........."); 
		   }
		   
		   //一行代码写完第二种方式(以后第二种方式就用这种)
		   document.getElementById("mybtn2").onclick = function(){
			   alert("test22222222.........");
		   }
		   
		</script>
		
		
	</body>
</html>

代码的执行顺序（load事件）

初步：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>JS代码的执行顺序</title>
	</head>
	
	<!-- load事件什么时候发生？页面全部元素加载完毕之后才会发生-->
	<body onload="ready()">
		
		<!--
			这样写的顺序是错的
				页面打开之后，会自上而下执行。
			
			<script type="text/javascript">
				第一步:根据id获取节点对象
				返回null(因为代码执行到此处的时候的元素还没有加载到内存)
				var btn = ("btn"); 
				
				第二步:给节点对象绑定事件
				 = function(){
					alert("hello js");
				}
				
			</script>
			
			<input type="button" value="hello"  />
			
		-->

		<!--
			如何解决上述问题？
				1.把按钮写在前面
				2.使用load事件
					load事件发生之后，ready()函数才会执行；
					load事件什么时候发生？
						页面加载完毕之后(页面所有元素加载完毕之后)，load事件才会发生。
		-->
		<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>
</html>

最终：如果顺序写成上面这样，事件注册的第二种方式按照以下代码写

----以后的代码都是按照以下这种方式写的----

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>JS代码的执行顺序</title>
	</head>
	<body>
		
		<!--
			<body οnlοad="ready()"> 不把onload写在这里了
			
			<script type="text/javascript">
				
			    = ready;  不能写=ready() 这是函数的返回值 参照事件的第二种注册方式
				
			   function ready(){
				   var btn = ("btn");
				    = function(){
				   	alert("hello js");
				   }
			   }
			   
			</script>
			
			<input type="button" value="hello"  />
		-->
	
		<!--再使用匿名函数简化-->
		<script type="text/javascript">
			// 页面加载的过程中,将a函数注册给了load事件
			// 页面加载完毕之后,load事件发生了,此时执行回调函数a
			
			// 回调函数a执行的过程中,把b函数注册给了的click事件
			// 当的节点发生click事件之后,b函数被调用并执行.
			
			window.onload = function(){ // 这个回调函数叫做a
				document.getElementById("btn").onclick = function(){ // 这个回调函数叫做b
					alert("hello js..........");
				}
			}
			
		</script>
		
		<input type="button" value="hello" id="btn" />
		
	</body>
</html>

代码设置节点的属性（load事件）

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		
		<script type="text/javascript">
			window.onload = function(){
				document.getElementById("btn").onclick = function(){
					var mytext = document.getElementById("mytext");
					// 一个节点对象中只要有的属性都可以"."
					mytext.type = "checkbox";
				}
			}
		</script>
		
		<!--
			如何将文本框修改为复选框？
				即把text改为checkbox
				先给文本框和按钮加上id，再看上面代码
		-->
		<input type="text" id="mytext"/>
		
		<input type="button" value="将文本框修改为复选框" id="btn"/>
		
		<!--总结：一个节点有什么属性都可以：节点的id.属性 = "..." 来设置-->
		
	</body>
</html>

代码捕捉回车键（keydown事件）

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>JS代码捕捉回车键</title>
	</head>
	<body>
		<!--
			什么叫捕捉回车键？
				有时候在网页中，用户填完信息后，不点登录按钮，而是按回车键(按回车键也能登录)
				如何捕捉这个回车键？
					在文本框/密码框捕捉回车键，使用keydown事件
		-->
		<script type="text/javascript">
			window.onload = function(){
				var usernameElt = document.getElementById("username");
				/*
				随便按键盘上的一个键，就会触发keydown事件：
					 = function(){
						alert(111);
					}
			   */
			  
				/*
				我们的任务是:获取用户所按的键,而键盘上的每个键都有对应的键值,即获取键值
				回车键的键值是13;ESC键的键值是27
				在浏览器中,当keydown事件发生时,浏览器会将当前事件对象(keydown事件对象)当作形参传到下面函数,来调用下面这个回调函数.
				event只是一个形参的名字,写a/b/c...都可以,但为了程序的可读性，写event
					 = function(event){}
					
					当某事件发生时，浏览器会new一个当前事件对象，去调用回调函数(将当前事件对象传给函数的形参)
					
					 = function(){ alert(111); }--->会new当前事件对象传给回调函数，但没有形参接受
					
					 = function(a){ alert(a); } [object KeyboardEvent] 这就是当前事件对象
					
					 = function(a,b){ alert(b); } undefined 因为当前对象传给了a，b没有任何东西
					
					 = function(a,b,c){ alert(c); } undefined 
				
					
					 = function(event){
						//获取键值 回车键的键值是13;ESC键的键值是27
						//对于“键盘事件对象"来说,都有keyCode属性用来获取键值.
						alert();
					}
				*/
			    
				usernameElt.onkeydown = function(event){
				  if(event.keyCode === 13){
					  alert("正在进行验证....");
				  }
			    }	
				
			}
			
		</script>
		
		<input type="text" id="username"/>
		
	</body>
</html>

的void运算符

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>JS的void运算符</title>
	</head>
	<body>
		
		<!--JS有很多运算符，只讲void-->
		页面顶部
		<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>

		<!--实现一个功能：既保留住超链接的样式，同时用户点击该超链接的时候执行一段JS代码，但页面还不能跳转-->
		<!--
		
		<a href="..." οnclick="('test code')">既保留住超链接的样式，同时用户点击该超链接的时候执行一段JS代码，但页面还不能跳转。</a>
		上述代码中，页面会跳转到...所写的东西
			href=""  代表当前路径，会跳到当前页面
			要页面不能跳转，就要让...所写的东西消失
		
		方法：使用void()运算符
			void运算符的语法：
				void(表达式)
			运算原理：执行表达式，但不返回任何结果。
			
		但是这样写：href="void(0)" 也不行，会把void(0)当作某个路径跳过去了
		要这样写：	
			href="javascript:void(0)"
				其中javascript:作用是告诉浏览器后面是一段JS代码。
				以下程序的javascript:是不能省略的。
				
		注意：void(这里写的东西不唯一，但必须要写些东西/表达式) 
		
		href="javascript:void(0)"这样写之后，页面就不会跳转了，因为void(表达式) 执行表达式之后不会返回任何结
			
		-->
		
		<a href="javascript:void(0)" onclick="('test code')">既保留住超链接的样式，同时用户点击该超链接的时候执行一段JS代码，但页面还不能跳转。</a>


		<br><br><br>
		
	</body>
</html>

把鼠标放到超链接上，有时会看到左下角的javascript:void(0)

在这里插入图片描述

的控制语句和JS的数组

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>JS的控制语句</title>
	</head>
	<body>
		
		<script type="text/javascript">
			/*
			JS的控制语句：
				1、if
				2、switch
				
				3、while
				4、do .. while..
				5、for循环
				
				6、break
				7、continue
				
				8、for..in语句（了解）
				9、with语句（了解）
				
				前7个和java用法相同，只讲第8个和第9个
			*/
		   
		   // 创建JS数组 (JS中数组中元素的类型随意.元素的个数随意，数组大小会自动扩容)
		   var arr = [false,true,1,2,"abc",3.14];  
		   
		   // 遍历数组for循环
		   for(var i = 0; i < arr.length; i++){
			   alert(arr[i]);
		   }
		   
		   
		   
		   
		   // for..in语句第一种用法：用在数组方面
		   for(var i in arr){//i是arr数组的元素下标
			   //alert(i); 输出 0 1 2 3 4 5
			   alert(arr[i]); //输出数组元素
		   }
		 
		   
		   // for..in语句第二种用法：可以遍历对象的属性
		   //User类
		   User = function(username,password){
			   this.username = username;
			   this.password = password;
		   }
		   
		   var u = new User("张三", "444");
		   alert(u.username + "," + u.password);//输出 张三,444
		   alert(u["username"] + "," + u["password"]);//输出 张三,444
		   
		   //属性名--->shuXingMing
		   for(var shuXingMing in u){
			   
			   //alert(shuXingMing); 输出username password
			   //alert(typeof shuXingMing); 输出string string
			   
			   //alert(); 输出 undefined undefined
			   alert(u[shuXingMing]);//shuXingMing本就是字符串，不需要加双引号，输出：张三 444 
		   }
		   
		   
		   //with的用法
		   /*
			alert();
			alert();
			都有u，使用with,可以不写u，如下：
		   */
		  
		   with(u){
			   alert(username + "," + password);
		   }
		   
		</script>
		
	</body>
</html>

<!--
java数组：
	public class Test{
		public static void main(String[] args){
			int[] arr = {1,2,3,4,5,6};
			int[] arr2 = new int[5]; // 等同于：int[] arr2 = {0,0,0,0,0};
			String[] arr3 = {"a","b","c"};
			String[] arr4 = new String[3]; // 等同于：String[] arr4 = {null,null,null};
		}
	}
-->

包括三块：ECMAScript、DOM、BOM

ECMAScript：JavaScript的核心语法

DOM编程：处理网页内容
	是通过JavaScript对HTML中的dom节点进行操作，DOM是有规范的，规范是W3C制定的。
	文档对象模型 Document Object Model


BOM编程：是对浏览器本身的操作
	浏览器对象模型 Brower Object Model
	例如：前进、后退、地址栏、关闭窗口、弹窗等
	由于浏览器有不同的厂家制造，所有BOM缺少规范，一般只有一个默认的行业规范


JavaScript包括三大块：
	ECMAScript：JS的核心语法（ES规范 / ECMA-262标准）
	
	DOM：Document Object Model（文档对象模型：对网页当中的节点进行增删改的过程）
		 HTML文档被当做一棵DOM树来看待。
		 	一个HTML文档中有head和body，head和body里又有被标上不同id的不同标签。
		 
		 //DOM编程的代表，通过id获取元素对象
		 var domObj = ("id"); 
				
	BOM：Browser Object Model（浏览器对象模型）
		 关闭浏览器窗口、打开一个新的浏览器窗口、后退、前进、浏览器地址栏上的地址等
		 都是BOM编程。
	
	DOM和BOM的区别和联系？
		BOM的*对象是：window
		DOM的*对象是：document
		实际上BOM是包括DOM的！(网页是在浏览器上的)

	<script type="text/javascript">
		 = function(){
		
		   //其实("btn")是("btn")
		   //省略了window.--->BOM是包括DOM的
		   var btnElt = ("btn");
		   alert(btnElt); // object HTMLInputElement
	   
	   }
	</script>
	
	<input type="button"  value="hello" />

在这里插入图片描述

编程-获取文本框的value

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>DOM编程-获取文本框的value</title>
	</head>
	<body>

		<!--点击按钮，获取文本框中填写的东西-->
		<script type="text/javascript">
			window.onload = function(){
				var btnElt = document.getElementById("btn");// 获取btn节点
				btnElt.onclick = function(){

					//.value属性可以获取文本框的内容
					var usernameElt = document.getElementById("username");// 获取username节点
					var username = usernameElt.value;//获取文本框的value
					alert(username);
				
					//一行代替上面三行 
					//alert(("username").value);
				 
					//.value="..." 还可以修改它的value
					//("username").value = "zhangsan";
			  }
		  }
		</script>
		
		<input type="text" id="username" />
		<input type="button" value="获取文本框的value" id="btn"/> 


		<hr>

		
		<!--案例：有两个文本框，点第一个文本框的按钮可以把第一个文本框的内容设置给第二个文本框-->
		<script type="text/javascript">
		
		window.onload = function(){
			document.getElementById("btn1").onclick = function(){
				document.getElementById("text2").value = document.getElementById("text1").value;
			}
		}
		
		</script>
		
		<input type="text" id="text1"> <!--第一个文本框-->
		<input type="button" value="获取text1的value设置给text2" id="btn1"> <!--第一个按钮-->
		<br>
		<input type="text" id="text2"> <!--第二个文本框-->
		
		
		<!--blur事件：失去焦点事件-->
		<!--οnblur="当失去焦点时执行这段代码"  焦点就是闪烁的光标-->
		<!--以下代码中的this代表的是当前input节点对象,就是这个节点对象的value属性。-->
		<!--以下这种也是获取文本框的value-->
		<input type="text" onblur="alert()" />
				
	</body>
</html>

编程-innerHTML和innerText操作div和span

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>DOM编程-innerHTML和innerText操作div和span</title>
		
		<!--使用id选择器先设置一下div的样式-->
		<style type="text/css">
			#div1{
				background-color: aquamarine;
				width: 300px;
				height: 300px;
				border: 1px black solid;
				position: absolute;
				top: 100px;
				left: 100px;
			}
		</style>

	</head>
	<body>
		
		<!--
			innerText和innerHTML属性有什么区别？
				相同点：都是设置元素内部的内容。
				不同点：
					innerHTML会把后面的“字符串”当做一段HTML代码解释并执行。
					innerText，即使后面是一段HTML代码，也只是将其当做普通的字符串来看待。
		-->
		
		<script type="text/javascript">
			window.onload = function(){
				var btn = document.getElementById("btn");
				btn.onclick = function(){
					// 设置div的内容
					
					// 第一步:获取div对象
					var divElt = document.getElementById("div1");
					
					// 第二步:使用innerHTML属性/innerText属性来设置元素内部的内容
					
					/*
						 = "写东西/HTML代码--->执行并展示出效果";
						 = "不管写的是不是HTML代码，都只当作普通文本，不执行并展示出效果";
					*/
					//  = "fjdkslajfkdlsajkfldsjaklfds";
					divElt.innerHTML = "<font color='red'>用户名不能为空！</font>";
					// = "<font color='red'>用户名不能为空！</font>";
				}
			}
		</script>
		
		
		<!--要求：点击按钮，设置div的内容-->
		<input type="button" value="设置div中的内容" id="btn" />
		
		<!--
			<div >写东西/JS代码</div> 这种方式可以直接设置div的内容
			<div >实际上，上面那种写法就是将信息写在这里</div>
		-->
		<div id="div1"></div>
		
	</body>
</html>

编程-关于正则表达式

正则表达式不会写就百度

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>DOM编程-关于正则表达式</title>
	</head>
	<body>
		
		<script type="text/javascript">
			/*
				1.什么是正则表达式，有什么用？
					正则表达式：Regular Expression
					正则表达式主要用在字符串格式匹配方面。
					
				2.正则表达式实际上是一门独立的学科，在Java语言中支持，C语言中也支持，javascript中也支持。
				大部分编程语言都支持正则表达式。正则表达式最初使用在医学方面，用来表示神经符号等。目前使用最多
				的是计算机编程领域，用作字符串格式匹配。包括搜索方面等。
				
				3.正则表达式，对于我们javascript编程来说，掌握哪些内容呢？
					第一：常见的正则表达式符号要认识。
					第二：简单的正则表达式要会写。
					第三: 他人编写的正则表达式要能看懂。
					第四：在javascript当中，怎么创建正则表达式对象！（new对象）
					第五：在javascript当中，正则表达式对象有哪些方法！（调方法）
					第六：要能够快速的从网络上找到自己需要的正则表达式。并且测试其有效性。
				
				4.常见的正则表达式符号？
					.  匹配除换行符以外的任意字符 
					\w 匹配字母或数字或下划线或汉字 
					\s 匹配任意的空白符 
					\d 匹配数字 
					\b 匹配单词的开始或结束 
					^  匹配字符串的开始 
					$  匹配字符串的结束
					 
					//匹配次数的： 
					*     重复零次或更多次 
					+     重复一次或更多次 
					?     重复零次或一次 
					{n}   重复n次 
					{n,}  重复n次或更多次 
					{n,m} 重复n到m次
					
					//匹配反义词： 
					\W       匹配任意不是字母，数字，下划线，汉字的字符 
					\S       匹配任意不是空白符的字符 
					\D       匹配任意非数字的字符 
					\B       匹配不是单词开头或结束的位置 
					[^x]     匹配除了x以外的任意字符 
					[^aeiou] 匹配除了aeiou这几个字母以外的任意字符 
					
					正则表达式当中的小括号()优先级较高。
					[1-9] 表示1到9的任意1个数字（次数是1次）
					[A-Za-z0-9] 表示A-Z a-z 0-9中的任意1个字符
					[A-Za-z0-9-] 表示A-Z、a-z、0-9、-  以上所有字符中的任意1个字符(A-Z是区间，最后一个-是减号)
					
					| 表示或者
				
				5.简单的正则表达式要会写
					QQ号的正则表达式：^[1-9][0-9]{4,}$

				6.他人编写的正则表达式要能看懂？
					email邮箱地址正则：^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$
						^
						\w+
						([-+.]\w+)*
						@
						\w+
						([-.]\w+)*
						\.
						\w+
						([-.]\w+)*
						$
				
				7.怎么创建正则表达式对象，怎么调用正则表达式对象的方法？
					第一种创建方式：
						var regExp = /正则表达式/[flags];
					第二种创建方式:使用内置支持类RegExp
						var regExp = new RegExp("正则表达式",["flags"]);
						
					关于flags(flags可以有也可以没有)：
						g：全局匹配
						i：忽略大小写匹配
						m：多行搜索匹配（ES规范制定之后才支持m）
						   当前面是正则表达式的时候，m不能用。只有前面是普通字符串的时候，m才可以使用。
						
					正则表达式对象的test()方法？
						true / false = 正则表达式对象.test(用户填写的字符串);
						true : 字符串格式匹配成功
						false: 字符串格式匹配失败
			*/
		   
		   
			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);
				   if(ok){
						//合法
						document.getElementById("emailError").innerText = "邮箱地址合法";
				   }else{
					   // 不合法
					   document.getElementById("emailError").innerText = "邮箱地址不合法";
				   }
			   }
			   
			   
			   // 使文本框获得焦点时后面的span提示信息消失
			   //给文本框绑定focus(获得焦点)
			   document.getElementById("email").onfocus = function(){
				   document.getElementById("emailError").innerText = "";
			   }
			   
		   }
		   
		</script>
		
		<!--点击按钮，验证输入的邮箱格式是否正确-->
		<input type="text" id="email" />
		
		<!--使用span输出提示邮箱是否合法信息-->
		<span id="emailError" style="color: red; font-size: 12px;"></span>
		
		<br>
		<input type="button" value="验证邮箱" id="btn" />
	
	</body>
</html>

在这里插入图片描述

编程-去除字符串前后空白的trim函数

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>去除字符串的前后空白trim</title>
	</head>
	<body>
		
		<script type="text/javascript">
			
			window.onload = function(){
				document.getElementById("btn").onclick = function(){
					// 获取用户名
					var username = document.getElementById("username").value;
					// 去除前后空白(这是字符串String的函数)
					username = username.trim();
					// 测试
					alert("--->" + username + "<----");
				}
			}
			
			
			// 低版本的IE浏览器不支持字符串的trim()函数,怎么办？
			// 可以使用prototype属性自己对String类扩展一个全新的trim()函数!
			String.prototype.trim = function(){
				/*
					alert("扩展之后的trim方法"); 
					自己扩展了这个函数之后,后期使用的trim是自己扩展的函数,不再使用原来的trim函数
						即可以使用prototype属性重写已经写好的代码/函数。
				*/
			   
			    /*
					去除当前字符串的前后空白
					在当前的方法中的this代表的就是当前字符串.
					使用String类的replace方法：
						replace(xxx,yyy);--->用yyy替换xxx
						(前空白,"").replace(后空白,"");
							使用正则表达式来表示前空白和后空白：
								正则表达式写法：/正则表达式/
								前空白：/^\s+/
								后空白：/\s+$/
						
						(/^\s+/,"").replace(/\s+$/,"");
						只用一次replace:
							/正则表达式/flags
							flags=g 全局匹配
							/^\s+或\s+$/g
				*/
				return this.replace(/^\s+|\s+$/g, "");
			}
		
		</script>
		
		<!--要求：按按钮时，获取用户名并且去除前后空白-->
		<input type="text" id="username" />
		<input type="button" value="获取用户名" id="btn" />
	
	</body>
</html>

编程-表单验证

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>表单验证</title>
		
		<!--第三步：设置span的样式：标签选择器-->
		<style type="text/css">
			span {
				color: red;
				font-size: 12px;
			}
		</style>

	</head>
	<body>
		
		<!--
			需求：表单验证
			（1）用户名不能为空
			（2）用户名必须在6-14位之间
			（3）用户名只能有数字和字母组成，不能含有其它符号（正则表达式）
			（4）密码和确认密码一致，邮箱地址合法。
			（5）统一失去焦点验证
			（6）错误提示信息统一在span标签中提示，并且要求字体12号，红色。
			（7）文本框再次获得焦点后，清空错误提示信息，如果文本框中数据不合法要求清空文本框的value
			（8）最终表单中所有项均合法方可提交
		-->
		
		<!--该表单验证还不够严谨，有些功能没实现-->
		
		<script type="text/javascript">
			//第四步：统一失去焦点验证
			//第五步：用户名
			window.onload = function(){
				
			   // 获取username的span标签
			   var usernameErrorSpan = document.getElementById("usernameError");//第六步
			   
			   var usernameElt = document.getElementById("username");
			   // 给用户名文本框绑定blur事件
			   usernameElt.onblur = function(){
				   // 获取用户名
				   var username = usernameElt.value;
				   // 去除前后空白
				   username = username.trim();
				   // 判断用户名是否为空
				   /*
				   第一种方式：
				   if(username){
					   // 代表username不是空字符串
					   alert("username = " + username);
				   }else{
					   // 代表username是空字符串
					   alert("username是空字符串");
				   }
				   */
				   //第二种方式： if( == 0){}
				   //第三种方式:
				   if(username === ""){
					   // 用户名为空
					   usernameErrorSpan.innerText = "用户名不能为空";
				   }else{
					   // 用户名不为空(第八步)
					   // 继续判断长度[6-14]
					   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 = "用户名只能由数字和字母组成";
						   }
					   }

				   }
			   }
			   
			   /*
				第七步：
					1.文本框输入的value错误,删除valuie
					2.光标回到文本框，span错误提示信息消失
			    */
			   // 给username这个文本框绑定获得焦点事件
			   usernameElt.onfocus = function(){
				   // 清空非法的value
				   if(usernameErrorSpan.innerText != ""){
					   usernameElt.value = "";   
				   }
				   
				   // 清空span
				   usernameErrorSpan.innerText = "";
			   }
			   
			   
		
			   
			   // 获取密码错误提示的span标签(第十步)
			   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的span(第十三步)
			   var emailSpan = document.getElementById("emailError");
			   
			   //第十二步:
			   // 给email绑定blur事件
			   var emailElt = document.getElementById("email");
			   emailElt.onblur = function(){
				   // 获取email
				   var email = emailElt.value;
				   
				   //email能不能为空/前后空白就不写了
				   
				   // 编写email的正则
				   var emailRegExp = /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/;
				   var ok = emailRegExp.test(email);
				   if(ok){
					   // 合法
				   }else{
					   // 不合法(第十三步)
					   emailSpan.innerText = "邮箱地址不合法";
				   }
			   }
			   
			   //第十四步:与第七步,第十一步相同
			   // 给emailElt绑定focus
			   emailElt.onfocus = function(){
				   if(emailSpan.innerText != ""){
					   emailElt.value = "";
				   }
				   emailSpan.innerText = "";
			   }
			   
			   
			   //第十五步:最终表单中所有项均合法方可提交
			   //第十五步2：给提交按钮绑定鼠标单击事件
			   var submitBtnElt = document.getElementById("submitBtn");
			   submitBtn.onclick = function(){
				   /*
						第十五步5:
							下面的if(表单所有项目都是合法的){
								
							}
						表单所有项目都是合法的 怎么写？
							三个span错误提示都没有
							但是，最开始什么都不写，三个span错误提示也都没有
							解决办法：
								先点一下文本框，即focus；在让光标消失，即blur；
								这样就会出现span错误提示信息：不能为空
								有相应的方法代替上述手动操作：
									.focus()
									.blur()
					*/
				   // 触发username的blur userpwd2的blur email的blur
				   // 不需要人工操作,使用纯JS代码触发事件.
				   usernameElt.focus();
				   usernameElt.blur();
				   
				   userpwd2Elt.focus();
				   userpwd2Elt.blur();
				   
				   emailElt.focus();
				   emailElt.blur();
				   
				   
				   // 当所有表单项都是合法的时候,提交表单(第十五步3)
				   if(usernameErrorSpan.innerText == "" && pwdErrorSpan.innerText == "" && emailSpan.innerText == ""){
					   //第十五步4，提交表单，使用form对象的submit方法，给form标签添加id
					   
					   // 获取表单对象
					   var userFormElt = document.getElementById("userForm");
					   
					   // 可以在这里设置action,也可以不在这里.
					   userFormElt.action = "http://localhost:8080/jd/save";
					   
					   // 提交表单
					   userFormElt.submit();
				   }
			   }
			}
			
		</script>
		
		<!--第一步：首先画一个表单：这个表单提交应该使用post，这里为了检测，所以使用get-->
		<!--第二步：使用span在框框后写错误提示信息，不使用div，因为div独占一行-->
		
		<!--
			第十五步4修改了这个form
			<form action= "http://localhost:8080/jd/save" method="get">
		-->
		<form id="userForm" method="get">
			
			用户名<input type="text" name="username" id="username"/><span id="usernameError"></span><br>
			<br>
			密码<input type="password" name="userpwd" id="userpwd"/>
			<br>
			确认密码<input type="password" id="userpwd2" /><!--不需要提交，name不需要写--><span id="pwdError"></span><br>
			<br>
			邮箱<input type="text" name="email" id="email" /><span id="emailError"></span><br>
			<br>
			
			<!--
				第十五步1：先把具有提交功能的按钮submit改为button
						 但是这样就无法提交了，那么就给这个按钮加id和安装鼠标单击事件
					<input type="submit" value="注册" />
			-->
		    <input type="button" value="注册" id="submitBtn"/> 
			<input type="reset" value="重置" />

		</form>
		
		
	</body>
</html>

编程-复选框的全选和取消全选

查看W3School离线手册.chm
JavaScript--->HTML DOM--->DOM参考--->HTML对象---> <input> checkbox

在这里插入图片描述

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>复选框的全选和取消全选</title>
	</head>
	<body>
		
		<script type="text/javascript">
			/*
			 = function(){
				var firstChk = ("firstChk");
				 = function(){
					
						获取第一个复选框的选中状态(复选框对象是checkbox对象)
						checkbox对象有一个属性：checked
						 = true; 复选框被选中
						 = false; 复选框未被选中
						
						alert();
					
				   
				   //(要获取剩下三个复选框)根据name获取所有元素
				   //name相同,返回的是那3个name相同的元素,此时返回的是数组/元素
				   var aihaos = ("aihao");
				   if( == true){
					   //全选
					   for(var i= 0; i <; i++){
						   aihaos[i].checked = true;
					   }
				   }else{
					   //取消全选
					   for(var i= 0; i <; i++){
						   aihaos[i].checked = false;
					   }
				   }
				}
			}
			*/
		   
		   //简化上述代码
		   	window.onload = function(){
				
				var aihaos = document.getElementsByName("aihao");//获取除第一个复选框以外的所有复选框
				var firstChk = document.getElementById("firstChk");//获取第一个复选框
				firstChk.onclick = function(){//点击第一个复选框时执行以下函数
					   for(var i= 0; i <aihaos.length; i++){//所有复选框都被选中
						   aihaos[i].checked = firstChk.checked;
					   }
				}
				
				
				
				//另一个要求:当下面三个复选框都选上时,第一个复选框自动选上
				//即：总数量和选中的数量相等的时候,第一个复选框选中.

				var all = aihaos.length;//获得所有的复选框数量(除第一个复选框)
				
				// 对上面获得的aihaos数组进行遍历
				for(var i = 0; i < aihaos.length; i++){
					//第一个循环是给每一个复选框都注册click事件和绑定回调函数
					//即<input type="checkbox" name="aihao" value="smoke" οnclick="alert(回调函数)" />抽烟
					//然后当某个复选框被选中时执行回调函数
					aihaos[i].onclick = function(){
						var checkedCount = 0;//记录被选中的复选框数量
						
						//第二个循环是判断有几个复选框被选中
						for(var i = 0; i < aihaos.length; i++){
							if(aihaos[i].checked == true){
								checkedCount++;
							}
						}
						
						/*
						if(all == checkedCount){
							 = true;
						}else{
							 = false;
						}
						简化这个代码：
						*/
						firstChk.checked = (all == checkedCount);

					}
				}
				
		    }
			
		</script>
		
		<!--要求：点击第一个checkbox，下面三个checkbox全选；不点击，取消全选-->
		<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="tt" />烫头
		
	</body>
</html>

编程-获取下拉列表选中项的value

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>获取下拉列表选中项的value</title>
	</head>
	<body>
		
		<!--
			要求：假如选择河北省，得到它的value 001
				使用change事件(下拉列表选中项改变，或文本框内容改变)，加入onchange事件句柄
			
			第一种写法：
			<select οnchange="alert()">
				<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(){
				var provinceListElt = document.getElementById("provinceList");
				provinceListElt.onchange = function(){
					// 获取选中项的value
					alert(provinceListElt.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>

<!--
实际上的功能是：选择地区时，根据下拉列表，先选择省，再选择省里的市...(这个功能目前还实现不了)
	省份和市区的关系是：1对多
	省份表t_province
	id      pcode      pname
	----------------------------
	1       001        河北省
	2       002        河南省
	3       003        山东省
	4       004        山西省

	市区表t_city
	id      ccode      cname       pcode(fk)
	----------------------------------------------
	1       101        石家庄         001
	2       102        保定         001
	3       103        邢台         001
	4       104        承德         001
	5       105        张家口         001
	6       106        邯郸         001
	7       107        衡水         001

	前端用户选择的假设是河北省，那么必须获取到河北省的pcode，获取到001
	然后将001发送提交给服务器，服务器底层执行一条SQL语句：
		select * from t_city where pcode = '001';
		
		返回一个List集合，List<City> cityList;
		
		cityList响应浏览器，浏览器在解析cityList集合转换成一个新的下拉列表。
-->

28.编程-显示网页时钟和JS内置对象(内置支持类)Date

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>显示网页时钟</title>
	</head>
	<body>
		
		<script type="text/javascript">
			//首先学习JS内置的支持类：Date类，用来获取时间/日期//
			//获取系统当前时间
			var nowTime = new Date();
			//输出系统当前时间
			//(nowTime);Sat Feb 19 2022 15:44:03 GMT+0800 (中国标准时间)
			//上一种输出格式看不懂,换一种方式,转换成具有本地语言环境的日期格式.
			nowTime = nowTime.toLocaleString();
		    document.write(nowTime);// 2022/2/19 15:45:15
			
			//javascript里面换行不能直接写<br>
		    document.write("<br>");
			
			//若以上格式还是不满意.可以获取年月日,自己设定格式
		    var t = new Date();
			//如果使用getYear(),那么2022年只会出现22年
		    var year = t.getFullYear();	// 返回年信息,以全格式返回.
		    var month = t.getMonth(); // 月份是:0-11
			// var dayOfWeek = (); 获取的一周的第几天(0-6)
		    var day = t.getDate(); // 获取日信息.
		    document.write(year + "年" + (month+1) + "月" + day + "日");
			
			document.write("<br>");
			
		   /*	
			重点:怎么获取毫秒数？(从1970年1月1日 00:00:00 000到当前系统时间的总毫秒数)
			var times = ();
			(times); 
			一般会使用毫秒数当做时间戳. (timestamp)
		   */
		   document.write(new Date().getTime());
		   
		</script>
		
		
		
		
		<script type="text/javascript">
			
			function displayTime(){
				var time = new Date();
				var strTime = time.toLocaleString();
				document.getElementById("timeDiv").innerHTML = strTime;
			}


			
			/*
			(code,millisec) 方法可按照指定的周期（以毫秒计）来调用函数或计算表达式。
				code:要调用的函数或要执行的代码串。
				millisec:周期性执行或调用 code 之间的时间间隔，以毫秒计。
				返回值：一个可以传递给 () 从而取消对 code 的周期性执行的值。
				setInterval() 方法会不停地调用函数，直到 () 被调用或窗口被关闭
			*/	
				
			// 每隔1秒调用displayTime()函数
			function start(){
				// 从这行代码执行结束开始,则会不间断的,每隔1000毫秒调用一次displayTime()函数.
				v = window.setInterval("displayTime()", 1000);	
			}
			
			function stop(){
				window.clearInterval(v);
			}
			
		</script>
		
		<br>
		
		<input type="button" value="显示系统时间" onclick="start();"/>
		<input type="button" value="系统时间停止" onclick="stop();" />
		
		<!--一点击按钮，就把时间显示在div上-->
		<div id="timeDiv"></div>

	</body>
</html>

28.2.内置支持类Array

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>内置支持类Array</title>
	</head>
	<body>
		
		<script type="text/javascript">
			/*
				// 创建长度为0的数组
				var arr = [];
				alert(); 0
				
				// 数据类型随意
				var arr2 = [1,2,3,false,"abc",3.14];
				alert(); 6
				
				// 下标会越界吗
				arr2[7] = "test"; // 不会，自动扩容.
				
				("<br>");
				
				// 遍历
				for(var i = 0; i < ; i++){
					(arr2[i] + "<br>");
				}
				
				
				// 另一种创建数组的对象的方式
				var a = new Array();
				alert();  0
				
				var a2 = new Array(3); // 3表示长度.
				alert(); 3
				
				var a3 = new Array(3,2); //3,2表示数组中的元素 不是长度了
				alert(); // 2
			*/
		   
			
			
		   var a = [1,2,3,9];
		   var str = a.join("-");
		   alert(str); // "1-2-3-9"
		   
		   // 在数组的末尾添加一个元素(数组长度+1)
		   a.push(10);
		   alert(a.join("-"));//1-2-3-9-10
		   
		   // 将数组末尾的元素弹出(数组长度-1)
		   var endElt = a.pop();
		   alert(endElt); //10
		   alert(a.join("-")); //1-2-3-9
		   
		   // 注意:JS中的数组可以自动模拟栈数据结构:后进先出,先进后出原则.
		   // push压栈
		   // pop弹栈
		   
		   // 反转数组.
		   a.reverse();
		   alert(a.join("-"));//9-3-2-1

		</script>
		
	</body>
</html>

29.学会使用浏览器的F12

编程-window对象的open和close方法

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>BOM编程-open和close</title>
	</head>
	<body>
		
		<script type="text/javascript">
			/*
				1、BOM编程中，window对象是*对象，代表浏览器窗口。
				2、window有open和close方法，可以开启窗口和关闭窗口。
				()
				()
			*/   
		</script>
		
		<input type="button" value="开启百度(新窗口)" onclick="('');" />
		
		<input type="button" value="开启百度(当前窗口)" onclick="('', '_self');" />
		
		<input type="button" value="开启百度(新窗口)" onclick="('', '_blank');" />
		
		<input type="button" value="开启百度(父窗口)" onclick="('', '_parent');" />
		
		<input type="button" value="开启百度(*窗口)" onclick="('', '_top');" />
		
		<input type="button" value="打开表单验证"  onclick="('002-BOM编程-open和')"/>

		
	</body>
</html>

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>BOM编程-open和close</title>
	</head>
	<body>
		<!--与上面程序的最后一行代码交互-->
		<input type="button" value="关闭当前窗口" onclick="();" />
	</body>
</html>

编程-弹出消息框和确认框

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>弹出消息框和确认框</title>
	</head>
	<body>
		<!--
			() 弹出消息框
			() 弹出确认框
		-->
		
		<script type="text/javascript">
			function del(){
				/*
					确认框
					var ok = ("亲，确认删除数据吗？");
					//alert(ok);
					if(ok){
						alert("delete data ....");
					}
				*/
			    if(window.confirm("亲，确认删除数据吗？")){
			    	alert("delete data ....");
			    }
			}
		</script>
		
		<!--删除操作的时候都要提前先得到用户的确认。-->
		<input type="button" value="弹出确认框(删除)" onclick="del();" />
		
		<input type="button" value="弹出消息框" onclick="('消息框!')" />
	
		
	</body>
</html>

编程-将当前窗口设置为*窗口

在这里插入图片描述

004-当前窗口设置为*窗口.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>将当前窗口设置为*窗口</title>
	</head>
	<body>
		<script type="text/javascript">
			/*
				如果当前这个窗口不是*窗口，将当前窗口设置为*窗口
				004为*窗口，004中套了一个005页面，将005设置为顶层窗口
			*/	
		</script>
		
		<!--
			如何让004页面中套一个005页面？
				使用內联框架iframe
		-->
		<iframe src="" width="500px" height="500px"></iframe>
		
	</body>
</html>

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

在这里插入图片描述

编程-window的history对象(类)

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>006-history对象(类)</title>
	</head>
	<body>
		<!--演示浏览器上的前进后退按钮-->
		
		<a href="">007页面</a>
		
		<!--前进，从006页面，到007页面；
			先点击上方链接到达007页面，然后点击007页面的后退按钮回到006页面，再按前进按钮就到了007页面
		-->
		<input type="button" value="前进" onclick="(1)" />
	
	</body>
</html>

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>007-history对象(类)</title>
	</head>
	<body>
		007 Page!
		
		<!--
			演示浏览器上的后退按钮，从007页面退到006页面
				两种方法：
					()
					(-1)
		-->
		
		<!--运行006，点击007链接，到达007页面，点击后退按钮，返回006页面-->
		<input type="button" value="后退" onclick="()"/>
		
		<input type="button" value="后退" onclick="(-1)"/>
		
	</body>
</html>

在这里插入图片描述

编程-设置浏览器地址栏上的URL

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>设置浏览器地址栏上的URL</title>
	</head>
	<body>
		
		<script type="text/javascript">
			function goBaidu(){
				//首先获取地址栏对象
				var locationObj = window.location;			
				//设置地址栏的URL
				locationObj.href = "";
			
				//上面两步连在一起写
				// = "";
				
				//href可以省略不写
				// = "";
				
				//这样写也行
				// = "";
				//href也可以省略
				// = "";
			
			}
		</script>
		
		<input type="button" value="百度" onclick="goBaidu()" />
		
	</body>
</html>

<!--
	总结，有哪些方法可以通过浏览器往服务器发请求？
		1、表单form的提交（可以是get，也可以是post）
		2、超链接(get请求)<a href="http://localhost:8080/oa/save?username=zhangsan&password=123">用户只能点击这个超链接</a>
		3、=url;
		4、=url;
		5、("url")
		6、直接在浏览器地址栏上输入URL，然后回车(get请求)（这个也可以手动输入，提交数据也可以成为动态的。）
		
		以上所有的请求方式均可以携带数据给服务器，只有通过表单提交的数据才是动态的。
-->

-介绍

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>001</title>
	</head>
	<body>
		
		<script type="text/javascript">
			/*
				1、什么是JSON，有什么用？
					JavaScript Object Notation（JavaScript对象标记），简称JSON。(数据交换格式)
					JSON主要的作用是：一种标准的数据交换格式。
					（目前非常流行，90%以上的系统，系统A与系统B交换数据的话，都是采用JSON。）
					（比如：	C语言与Java之间进行数据交换）
				2、JSON是一种标准的轻量级的数据交换格式。特点是：
					体积小，易解析。
				3、在实际的开发中有两种数据交换格式，使用最多，其一是JSON，另一个是XML。
					XML体积较大，解析麻烦，但是有其优点是：语法严谨。
					（通常银行相关的系统之间进行数据交换的话会使用XML。）
				4、JSON的语法格式：
					var jsonObj = {
						"属性名" : 属性值,
						"属性名" : 属性值,
						"属性名" : 属性值,
						"属性名" : 属性值,
						....
					};
			*/
		   
		   // 创建JSON对象(JSON也可以称为无类型对象。轻量级，轻巧。体积小。易解析。)
		    var studentObj = {
				"sno" : "110",
				"sname" : "张三",
				"sex" : "男"
			};
			
			// 访问JSON对象的属性
			alert(studentObj.sno + "," + studentObj.sname + "," + studentObj.sex);
			
			
			
			// 之前没有使用JSON的时候,定义类,创建对象,访问对象的属性.
			Student = function(sno,sname,sex){
				this.sno = sno;
				this.sname = sname;
				this.sex = sex;
			}
			var stu = new Student("111","李四","男");
			alert(stu.sno + "," + stu.sname + "," + stu.sex);
			
			
			
			
			// JSON数组
			var students = [
				//三个JSON对象
				{"sno":"110","sname":"张三","sex":"男"},
				{"sno":"120","sname":"李四","sex":"男"},
				{"sno":"130","sname":"王五","sex":"男"}
			];
			
			// 遍历(JSON解析很简单，就是遍历)
			for(var i = 0; i < students.length; i++){
				var stuObj = students[i];
				alert(stuObj.sno + "," + stuObj.sname + "," + stuObj.sex);
			}
			
		</script>

	</body>
</html>

XML介绍：

<?xml version="1.0" encoding="GBK"?>

<!--
	HTML和XML有一个父亲：SGML（标准通用的标记语言。）
	HTML主要做页面展示：所以语法松散。很随意。
	XML主要做数据存储和数据描述的：所以语法相当严格。
-->
<students>
	<student sno="110">
		<sname>张三</sname>
		<sex>男</sex>
	</student>
	<student sno="120">
		<sname>李四</sname>
		<sex>男</sex>
	</student>
	<student sno="130">
		<sname>王五</sname>
		<sex>男</sex>
	</student>
</students>

-复杂一些的JSON对象

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>复杂一些的JSON对象</title>
	</head>
	<body>
		
		<script type="text/javascript">
			var user = {
				"usercode" : 110,
				"username" : "张三",
				"sex" : true,
				"address" : {//家庭住址address可以是一个JSON对象
					"city" : "北京",
					"street" : "大兴区",
					"zipcode" : "12212121",
				},
				"aihao" : ["smoke","drink","tt"] //爱好是一个数组
			};
			
			// 访问人名以及居住的城市
			alert(user.username + "居住在" + user.address.city);
			
			/*
				请自行设计JSON格式的数据，这个JSON格式的数据可以描述整个班级中每一个学生的信息，以及总人数信息。
			*/
		    var jsonData = {
				"total" : 3,
				"students" : [
					{"name":"zhangsan","birth":"1980-10-20"},
					{"name":"lisi","birth":"1981-10-20"},
					{"name":"wangwu","birth":"1982-10-20"}
				]
			};
			
		</script>
		
	</body>
</html>

-eval函数

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>eval函数</title>
	</head>
	<body>
		
		<script type="text/javascript">
			//window对象的eval函数的作用是：将字符串当做一段JS代码解释并执行。
		    window.eval("var i = 100;");
		    alert("i = " + i); // i = 100
			
			
			/*
			java连接数据库,查询数据之后,将数据在java程序中拼接成JSON格式的“字符串”,将json格式的字符串响应到浏览器
			也就是说java响应到浏览器上的仅仅是一个"JSON格式的字符串",还不是一个json对象.
			可以使用eval函数,将json格式的字符串转换成json对象.
			*/
		    var fromJava = "{\"name\":\"zhangsan\",\"password\":\"123\"}"; //这是java程序给发过来的json格式的"字符串"
			window.eval("var jsonObj = " + fromJava);
		   
		    // 访问json对象
		    alert(jsonObj.name + "," + jsonObj.password); // 在前端取数据.
			
			//JSON配合eval函数,才能真正实现后台和前端的数据交换
			
			
			
		   /*
			面试题：
				在JS当中：[]和{}有什么区别？
					[] 是数组。
					{} 是JSON。
				
				java中的数组：int[] arr = {1,2,3,4,5};
				JS中的数组：var arr = [1,2,3,4,5];
				JSON：var jsonObj = {"email" : "zhangsan@","age":25};
		   */
		  
		  
		   var json = {
			   "username" : "zhangsan"
		   };
		   
		   // JS中访问json对象的属性(第一种方式)
		   alert(json.username);
		   
		   // JS中访问json对象的属性(第二种方式)
		   alert(json["username"]);
			
		</script>
		
		<!--
			JSON是一种行业内的数据交换格式标准。
			JSON在JS中以JS对象的形式存在。
		-->
		
	</body>
</html>

-DOM-拼接html的方式，设置table的tbody

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>设置table的tbody</title>
	</head>
	<body>
		
		<script type="text/javascript">
			// 有这些json数据
			var data = {
				"total" : 4,
				"emps" : [//JSON数组,里面使JSON对象
					{"empno":7369,"ename":"SMITH","sal":800.0},
					{"empno":7361,"ename":"SMITH2","sal":1800.0},
					{"empno":7360,"ename":"SMITH3","sal":2800.0},
					{"empno":7362,"ename":"SMITH4","sal":3800.0}
				]
			};
			
			// 希望把数据展示到table当中.
			window.onload = function(){
				var displayBtnElt = document.getElementById("displayBtn");
				displayBtnElt.onclick = function(){
					var emps = data.emps;
					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>";
					}
					document.getElementById("emptbody").innerHTML = html;
					document.getElementById("count").innerHTML = data.total;
				}
			}
			
		</script>
		
		<!--以后开发就是：
			通过底层java语言jdbc把数据库里面的数据查出来，
			查出来之后发给浏览器，浏览器将json格式的字符串转换成json对象，
			把json对象的数据放在表格里
			
			这个程序就是这个意思
		-->
		<!--按完这个按钮之后，将上面JSON的数据放到tbody中-->
		<input type="button" value="显示员工信息列表" id="displayBtn" />
			
		<h2>员工信息列表</h2>
		<hr>
		<!--先把table画出来-->
		<table border="1px" width="50%">
			<tr>
				<th>员工编号</th>
				<th>员工名字</th>
				<th>员工薪资</th>
			</tr>
			<tbody id="emptbody">
                <!-- 
					<tr>
					<td>7369</td>
					<td>SMITH</td>
					<td>800</td>
				</tr>
				<tr>
					<td>7369</td>
					<td>SMITH</td>
					<td>800</td>
				</tr>
				<tr>
					<td>7369</td>
					<td>SMITH</td>
					<td>800</td>
				</tr>
				-->
			</tbody>
		</table>
		
		总共<span id="count">0</span>条数
		
	</body>
</html>

注：该文章部分转载自动力节点

JavaScript学习笔记-B站动力节点

文章目录

1.1.什么是JavaScript，有什么用？

1.，CSS，JavaSript三者关系

2.在HTML中怎么嵌入JavaScript代码？

的标识符和关键字

4.关于JS中的变量

的函数初步

6.局部变量和全局变量

7.数据类型

类型

类型

类型

类型

类型

NaN undefined这三个值有什么区别

的常用事件和注册事件的两种方式

代码的执行顺序（load事件）

----以后的代码都是按照以下这种方式写的----

代码设置节点的属性（load事件）

代码捕捉回车键（keydown事件）

的void运算符

的控制语句和JS的数组

包括三块：ECMAScript、DOM、BOM

编程-获取文本框的value

编程-innerHTML和innerText操作div和span

编程-关于正则表达式

编程-去除字符串前后空白的trim函数

编程-表单验证

编程-复选框的全选和取消全选

编程-获取下拉列表选中项的value

28.编程-显示网页时钟和JS内置对象(内置支持类)Date

28.2.内置支持类Array

29.学会使用浏览器的F12

编程-window对象的open和close方法

编程-弹出消息框和确认框

编程-将当前窗口设置为*窗口

编程-window的history对象(类)

编程-设置浏览器地址栏上的URL

-介绍

-复杂一些的JSON对象

-eval函数

-DOM-拼接html的方式，设置table的tbody

相关文章