JavaScript概述

于 2021-11-03 02:14:38 发布
阅读量1.2k 收藏 23
点赞数 4
分类专栏： 前端 文章标签： javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_47064622/article/details/121072474
版权

JavaScript

概念：客户端脚本语言

运行在客户端浏览器中。每一个浏览器都有JavaScript的解析引擎
脚本语言：不需要编译，可直接被浏览器解析执行

功能

可以增强用户和html页面的交互过程，
可以控制HTML元素，
让页面有一些动态的效果，增强用户的体验

JavaScript发展史

  1. 1992年，Nombase公司，开发出第一门客户端脚本语言，专门用于表单的校验，命名为：C–，后更名为：ScriptEase
  2. 1995年，Netscape（网景）公司，开发了一门客户端脚本语言：LiveScript。后来请SUN公司的专家，修改LiveScript，命名为JavaScript
  3. 1996年，微软抄袭JavaScript开发出JScript语言
  4. 1997年，ECMA（欧洲计算机制造商协会），ECMAScript。就是所有客户端脚本语言的标准
    JavaScript=ECMAScript+JavaScript自己特有的东西（BOM+DOM）

ECMAScript：客户端脚本语言的标准

基本语法

与html结合方式

内部JS：定义< script>，标签体内容就是js代码
行内JS：

	<input type="button" value="点我试试" onclick="javascript:alert('试试就试试')"; />

外部JS：定义< script>，通过src属性引入外部的js文件

	< script src="js/test01.js">< /script>

注意：
1. < script>可以定义在HTML页面的任何地方。但是定义的位置会影响执行顺序
2. < script>可以定义多个

注释

单行注释： //注释内容
多行注释：/* 注释内容 */

数据类型

  1. 原始数据类型（基本数据类型）：5种
    number：数字。整数/小数/NaN(not a number 一个不是数字的数字类型)
    string：字符串。字符串"abc" “a” ‘abc’
    boolean：true和false
    null：一个对象为空的占位符
    undefined：未定义。如果一个变量没有给初始值，则会被默认赋值为undefined
		<script>
			/*定义变量*/
			var a=3;
			//向网页弹出警告对话框
			alert(a);
			
			//定义number类型
			var num=1;
			var num2=1.2;
			var num3=NaN;
			//输出到页面上	typeof获取数据类型
			document.write(num+"---"+typeof(num)+"<br>");
			document.write(num2+"<br>");
			document.write(num3+"<br>");
			
			//定义string类型
			var str = "abc";
			var str2 = 'edf';
			document.write(str+"---"+typeof(str)+"<br>");
			document.write(str2+"<br>");
			
			//定义boolean
			var flag = true;
			//向网页控制台输出调试内容
			console.log(flag+"---"+typeof(flag));
			
			//定义null，undefined
			var obj = null;
			var obj2 = undefined;
			var obj3 ;
			document.write(obj+"---"+typeof(obj)+"<br/>");
			document.write(obj2+"---"+typeof(obj2)+"<br/>");
			document.write(obj3+"<br/>");
		</script>

在这里插入图片描述

  1. 引用数据类型：对象

变量

变量：存储数据的内存空间
Java语言是强类型语言，而JavaScript是 弱类型语言
1. 强类型：在开辟变量存储空间时，定义了空间将来存储的数据的数据类型。只能存储固定类型的数据
2. 弱类型：在开辟变量存储空间，不定义空间将来的存储数据类型，可以存放任意类型的数据
语法：
var 变量名 = 初始化值;
typeof运算符：获取变量的类型
注：null运算后得到的是object

运算符

一元运算符：只有一个运算数的运算符

++, --,+(正号)
++ --：自增（自减）
++（–）在前，先自增（自减），再运算
++（–）在后，先运算，再自增（自减）
+（-）：正负号
注意：在JS中，如果运算数不是运算所要求的的类型，那么js引擎会自动的将运算数进行类型转换
其他类型转number：

  1. string转number：按照字面值转换。如果字面值不是数字，则转为NaN（不是数字的数字）
  2. boolean转number：true转为1，false转为0
		<script type="text/javascript">
		/*
			一元运算符：只有一个运算数的运算符
				++, --,+(正号)
					++  --：自增（自减）
						++（--）在前，先自增（自减），再运算
						++（--）在后，先运算，再自增（自减）
					+（-）：正负号
					注意：在JS中，如果运算数不是运算所要求的的类型，那么js引擎会自动的将运算数进行类型转换
						其他类型转number：
							string转number：按照字面值转换。如果字面值不是数字，则转为NaN（不是数字的数字）
							boolean转number：true转为1，false转为0
		*/
			// ++ --
			var num = 3;
			var a = ++ num;
			document.write("<hr>")
			document.write(num+"<br>")
			document.write(a+"<br>");
			//+(-)
			var b = +"13";
			document.write(typeof(b)+"<br>");
			document.write(b+1+"<br>");
			
			var c = + true;
			var d = + false;
			document.write(c+"<br>");
			document.write(d+"<br>")
			document.write("<hr>")
		</script>
算数运算符

+、 -、 * 、/ 、% …

		<script type="text/javascript">
			/*算数运算符*/
			var a = 3;
			var b = 4;
			
			document.write(a+b+"<br>");
			document.write(a-b+"<br>");
			document.write(a*b+"<br>");
			document.write(a/b+"<br>");
			document.write(a%b+"<br>"+"<hr>");
		</script>
赋值运算符 = += -+ …
比较运算符

.>、 <、 >= 、 <= 、 == 、 ===(全等于)
比较方式：

  1. 类型相同：直接比较
    字符串：按照字典顺序比较。按位逐一比较，直到得出大小为止
  2. 类型不同：先进行类型转化，在比较
    ===：全等于。在比较之前，先判断类型，如果类型不一样，则直接返回false
		<script type="text/javascript">
			/*比较运算符
				比较方式：
					类型相同：直接比较
						字符串：按照字典顺序比较。按位逐一比较，直到得出大小为止
					类型不同：先进行类型转化，在比较
						===：全等于。在比较之前，先判断类型，如果类型不一样，则直接返回false
			*/
			document.write((3>4)+"<br>");
			document.write(("abc">"acd")+"<br>");
			document.write(("123"==123)+"<br>");
			document.write(("123"===123)+"<br>");
			document.write("<hr>");
		</script>
位运算符

直接对整数在内存中的二进制位进行操作（JS中的位运算要求运算数必须为整数）

  1. &：按位与
    当两个运算数的对应位都为1时，结果的对应位为1，否则结果的对应位为0
  2. |：按位或
    当两个运算数的对应位有一个为1时，结果为1；当两个运算数的对应位均为0时，结果值的对应位为0
  3. ^：按位非
    当两个运算数的对应位不相同时，结果的对应位为1；否则，当两个运算数的对应位相同时，结果为0
  4. <<：左移运算符
    将左侧的运算数向 左 移若干位，移动的次数由右侧运算数决定，该运算数必须是0-31之间的整数。移动到左侧的位丢失，右侧空缺的位为0
  5. . > >：右移运算符
    将左侧的运算数向 右 移若干位，移动的次数由右侧运算数决定。左侧移出的空位由符号位进行补充，如果左侧运算数为正，则补0，否则补1
    在这里插入图片描述
		<script type="text/javascript">
			var a = 6;
			var b = 5;
			// 与 &
			var result = a & b;
			document.write(result);//十进制（4）
			// 或 |
			var result2 = a | b;
			document.write(result2);//十进制（7）
			// 非 ^
			var result3 = a ^ b;
			document.write(result3);//十进制（3）
			// 左移 <<
			var result4 = a << 2;
			document.write(result4);//十进制（24）
			// 右移 >>
			var result5 = a >> 2;
			document.write(result5);//十进制（1）
		</script>
逻辑运算符

&& || !
&&：与（短路）
||：或（短路）
!：非
其他类型转boolean
number：0或NaN为假，非0为真
string：除了空字符串（""），其他都为真
null&undefined：判断结果全为false
对象：判断结果全为true

		<script type="text/javascript">
			/*逻辑运算符：
				&&：与（短路）
				||：或（短路）
				!：非
					*其他类型转boolean
						number：0或NaN为假，非0为真
						string：除了空字符串（""），其他都为真
						null&undefined：判断结果全为false
						对象：判断结果全为true
			*/
			var flag = true;
			document.write(flag+"<br>");
			document.write(!flag+"<br>");
			
			// number
			var num =3;
			var num2 = 0;
			var num3 = NaN;
			document.write(!!num+"<br>");//!!将数据转换为一个布尔值并且不改变其原本的值
			document.write(!!num2+"<br>");
			document.write(!!num3+"<br>");
			// string
			var str1 = "abc";
			var str2 = "";
			document.write(!!str1+"<br>");
			document.write(!!str2+"<br>");
			// null&undefined
			var obj = null;
			var obj2;
			document.write(!!obj+"<br>");
			document.write(!!obj+"<br>");
			//对象
			var date = new Date();
			document.write(!!date+"<br>");
			document.write("<hr>");
			
			if(obj){//防止空指针异常
				alert(123);
			}
		</script>
三元运算符

? : 表达式
语法：表达式 ? 值1 : 值2
判断表达式的值，如果是true则取值1，如果是false则取值0

		<script type="text/javascript">
			/*三元运算符*/
			var a = 3;
			var b = 4;
			var c = a>b ? 1:0;
			alert(c);
		</script>

流程控制语句

  1. if…else…
  2. switch
    在java中，switch语句可以接受的数据类型 byte,int,short,char,枚举（1.5），String（1.7）
    switch(变量):
               case 值:
    在JS中，switch语句可以接受任意类型的原始数据类型
		<script type="text/javascript">
			var a = 1;
			switch(a){
				case 1:
					alert("number");
					break;
				case "abc":
					alert("string");
					break;
				case true:
					alert("true");
					break;
				case null:
					alert("null");	
					break;
				case undefined:
					alert("undefined");	
					break;	
			}
		</script>
  1. while
    do…while
    for
		<script type="text/javascript">
			//1-100求和
			var sum = 0;
			var num = 1;
			while(num <= 100){
				sum += num;
				num++;
			}
			document.write(sum+"<br>");
			
			var s = 0;
			for(var i=1;i<=100;i++){
				s += i;
			}
			document.write(s);
		</script>
练习（九九乘法表）
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>九九乘法表</title>
		<style type="text/css">
			td{
				border: 1px solid;
			}
		</style>
		<script type="text/javascript">
			document.write("<table align='center'>");
			for(var i=1;i<10;i++){
				document.write("<tr>");
				for(var j=1;j<=i;j++){
					document.write("<td>"+i+"*"+j+"="+(i*j)+"</td>");
				}
				document.write("</tr>");
			}
			document.write("</table>");
		</script>
	</head>
	<body>
	</body>
</html>

在这里插入图片描述

JS特殊语法

1.语句以 ; 结尾，如果一行只有一条语句 ; 可以省略（不建议）
2.变量的定义使用var关键字，也可以不使用
使用：定义的变量时局部变量
不用：定义的变量时全局变量

		<script type="text/javascript">
			/*特殊语法*/
			/*1.语句以 ; 结尾，如果一行只有一条语句 ; 可以省略（不建议）
			  2.变量的定义使用var关键字，也可以不使用
				*使用：定义的变量时局部变量
				*不用：定义的变量时全局变量
			*/
			a = 4;
			alert(a)
		</script>

自定义对象

  1. 使用Object()构造函数
  2. 对象直接量
		<script type="text/javascript">
		
			// 方法1
			var student = new Object();
			student.name = "张三";
			student.age = 18;
			// 匿名函数，函数名为showInfo
			student.showInfo = function(name){
				return "姓名："+name+", 年龄："+student.age;
			}
			alert(student.showInfo("李四"));
			
			// 方法2
			var student = {
				name : '张三',
				age : 18,
				showInfo :function(){
					return "姓名："+student.name+", 年龄:"+student.age;
				}
			};
			alert(student.showInfo());
		</script>

基本对象

Function对象：函数（方法）对象
1.创建
var fun = new Function(形式参数列表,方法体);
function 方法名称(形式参数列表){
            方法体
}
var 方法名 = function(形式参数列表){
            方法体
}
2.方法
3.属性:
length:代表形参的个数
4.特点:

  • 方法定义时，形参的类型不用写,返回值类型也可不写
  • 方法是一个对象，如果定义名称相同的方法，会覆盖
  • 在JS中，方法的调用只与方法的名称有关，与参数列表无关
  • 在方法声明中有一个隐藏的内置对象（数组），arguments，封装所有的实际参数

5.调用
方法名称（参数列表）;

		<script type="text/javascript">
			/*
				Function：函数（方法）对象
					1.创建：
						1. var fun = new Function(形式参数列表,方法体);
						2. function 方法名称(形式参数列表){
								方法体
							}
						3. var 方法名 = function(形式参数列表){
								方法体
							}
					2.方法
					3.属性:
						length:代表形参的个数
					4.特点:
						1.方法定义时，形参的类型不用写,返回值类型也可不写
						2.方法是一个对象，如果定义名称相同的方法，会覆盖
						3.在JS中，方法的调用只与方法的名称有关，与参数列表无关
						4.在方法声明中有一个隐藏的内置对象（数组），arguments，封装所有的实际参数
					5.调用
						方法名称（参数列表）;
			*/
		   
		   //创建方式1
		   var fun1 = new Function("a","b","alert(a);");
		   //调用方法
		   fun1(3,4);
		   alert(fun1.length);
		   
		   //创建方式2
		   function fun2(m,n){
			   document.write(m+n);
		   }
		   fun2(3,4);
		   
		   //创建方式3
		   var fun3 = function(x,y){
			   document.write(x+y);
		   }
		   fun3(3,5);
		   
			//求两个数的和
			function add(a,b){
				return a+b;
			}
			var sum = add(1,2);
			document.write(sum);
			
			//求任意个数的和
			function add(){
				var sum = 0;
				for(var i=0;i<arguments.length;i++){
					sum += arguments[i];
				}
				return sum;
			}
			var sum = add(1,2,3);
			document.write(sum);
		</script>

		<script type="text/javascript">
		//定义一个无参无返回值的函数
			function doSum(){
				totle = 0;
				for(i=0;i<=100;i++){
					totle += i;
				}
				document.write(totle);
			}
		//调用函数
			doSum();
			document.write("<hr/>")
			
		//定义一个有参无返回值的函数
			function doSum1(n){
				totle = 0;
				for(i=0;i<=n;i++){
					totle += i;
				}
				document.write(totle);
			}
		//调用函数
			doSum1(100);
			document.write("<hr/>")
			
		//定义一个无参有返回值的函数
			function doSum2(){
				totle = 0;
				for(i=0;i<=100;i++){
					totle += i;
				}
				return totle;
			}	
			t = doSum2();
			document.write(t);
			document.write("<hr/>");
			
		//定义一个有参有返回值的函数
		function doSum3(n){
			totle = 0;
			for(i=0;i<=n;i++){
				totle += i;
			}
			return totle;
		}	
		t = doSum3(100);
		document.write(t);
		document.write("<hr/>");
		
		function tt(a,b,c){
			document.write(arguments[0]);
			document.write(arguments[1]);
			document.write(arguments[2]);
			alert("共传递"+arguments.length+"个参数");
		}
		tt(12,"北京",20.6);
		
		</script>
Array：数组对象，存储大量有序数据
  1. 创建：
    var arr = new Array(元素列表);
    var arr = new Array(默认长度);
    var arr = [元素列表];
  2. 方法：
  • join(参数)：将数组中的元素按照指定的分隔符拼接为字符串
  • push()：向数组的末尾添加一个或更多元素，并返回新的长度
  • shift() 删除第一个元素，并返回第一个元素的值
  • pop() 删除并返回数组的最后一个元素
  • unshift(element1,element2…) 向数组开头添加一个或多个元素，并返回新的长度
  • sort() 对数组元素进行排序 ,默认小到大
  • reverse() 颠倒数组中元素的顺序
  1. 属性：
    length：数组的长度
  2. 特点:
    JS中，数组元素的类型是可变的
    JS中，数组的长度可变
	<script type="text/javascript">
		/*
			Array：数组对象
				1.创建：
					1.var arr = new Array(元素列表);
					2.var arr = new Array(默认长度);
					3.var arr = [元素列表];
				2.方法：
					join(参数)：将数组中的元素按照指定的分隔符拼接为字符串
					push()：向数组的末尾添加一个或更多元素，并返回新的长度
				3.属性：
					length：数组的长度
				4.特点:
					1.JS中，数组元素的类型是可变的
					2.JS中，数组的长度可变
		*/
		//1.创建方式
		var arr1 = new Array(1,2,3);
		var arr2 = new Array(5);
		var arr3 = [1,"abc",true];
	   
		document.write(arr1+"<br>");
		document.write(arr2+"<br>");
		document.write(arr3+"<br>");
		
		document.write(arr3[0]+"<br>");
		document.write(arr3[1]+"<br>");
		document.write(arr3[2]+"<br>");
		
		//数组会自动进行扩容，此时arr3的长度为4，第四个元素没有进行赋值所以会显示undefined
		document.write(arr3[3]+"<br>");
		
		document.write(arr1.join("--")+"<br>");//默认是","
		// length 数组长度
		document.write(arr1.length);
		
		// push() 末尾添加
		arr1.push(11);
		document.write(arr1+"<br>");
		
		//shift() 删除第一个元素，并返回第一个元素的值
		document.write(arr1.shift());
		
		//pop() 删除并返回数组的最后一个元素
		document.write(arr1.pop());
		
		//unshift(element1,element2...) 向数组开头添加一个或多个元素，并返回新的长度
		document.write(arr1.unshift(1,2,3,4));
		document.write("<br>");
		
		//sort() 对数组元素进行排序 ,默认小到大
		function fun(a,b){
			return b-a;//大到小   a-b 小到大
		}
		document.write(arr1.sort(fun));
		
		// reverse() 颠倒数组中元素的顺序
		document.write("<br>");
		document.write(arr1.reverse());
	</script>
Boolean：定义了处理布尔值的操作
Date：定义所有处理日期和时间的操作
<script type="text/javascript">
		/*
			Date:日期对象
				1.创建：
					var date = new Date();
				2.方法：
					toLocaleString()：返回当前date对象对应的时间本地字符串格式
					getTime()：获取毫秒值。返回当前时间对象描述的时间到1970年1月1日零点的毫秒值差
		*/
	   var date = new Date();
	   document.write(date+"<br>");
	   document.write(date.toLocaleString()+"<br>");
	   document.write(date.getTime());
	</script>
Math：定义了所有数学运算
  1. 创建：
    特点：Math对象不用创建，直接使用。Math.方法名();
  2. 方法：
    random():返回0-1之间的一个随机数。包含0不包含1
    ceil(x)：向上取整
    floor(x)：向下取整
    round(x): 四舍五入
  3. 属性：
    PI
	<script type="text/javascript">
		/*
			Math：数学
				1.创建：
					特点：Math对象不用创建，直接使用。Math.方法名();
				2.方法：
					random():返回0-1之间的一个随机数。包含0不包含1
					ceil(x)：向上取整
					floor(x)：向下取整
					round(x): 四舍五入
				3.属性：
					PI
		*/
	   document.write(Math.PI+"<br>");//π值
	   document.write(Math.random()+"<br>");//0-1随机数
	   document.write(Math.ceil(4.2)+"<br>");//向上取整
	   document.write(Math.floor(4.2)+"<br>");//向下取整
	   document.write(Math.round(4.2)+"<br>");//四舍五入
	   
		/*
			取1-100之间的随机整数
				1.Math.random()产生随机数，范围[0,1)小数
				2.乘以100 -->[0,99.9999]小数
				3.舍弃小数部分：floor -->[0,99]整数
				4.+1 -->[1,100]整数
		*/
		var number = Math.floor((Math.random()*100))+1;
		document.write(number);
	</script>
Number：定义了处理数字的操作
Event：提供对JS事件的处理信息
String：定义了所有处理字符串的操作
		<script type="text/javascript">
			str="aBc";
			//toUpperCase() 将字符串中小写字母变为大写
			document.write(str.toUpperCase());
			
			//toLowerCase() 将字符串中大写字母变为小写
			document.write(str.toLowerCase());
			
			// length 获得字符串的长度
			document.write(str.length);
			
			// charAt(index) 返回字符串中 index 指定位置处的一个字符 
			// 如果index超出索引范围则返回空字符
			document.write('字符串str的第2个字符：'+str.charAt(1));
			
			// indexOf(str,[startIndex]) 在当前字符串中从左到右查找字符串 str，
			// 并返回 str 第一次出现时的位置索引，如果找不到则返回-1
			// substring(startIndex,endIndex) 获取 startIndex 和endIndex之间的字符
			email = "beijing_2000@126.com";
			document.write(email.substring(email.indexOf("@")+1));
			
			//lastIndexOf(search,[startIndex]) startIndex开始搜索的位置（右→左）
			document.write(email.lastIndexOf('j',6));
			
			// substr(startIndex,[length]) 从startIndex开始提取字符串中指定数目的字符
			document.write(email.substr(email.indexOf("@")+1,3));
			
			str = "星期日,星期一,星期二,星期三,星期四,星期五,星期六";
			arr = str.split(",");
			 for(i=0; i<arr.length;i++){
				 document.write(arr[i]+"<br/>");
			 }
		</script>
RegExp：正则表达式对象

1.正则表达式：定义字符串的组成规则

  1. 单个字符[]
    如:[a] [ab] [a-zA-Z0-9_]
  2. 特殊符号代表特殊含义的单个字符：
    \d:单个数字字符[0-9]
    \w:单个单词字符[a-zA-Z0-9_]
  3. 量词符号：
    .? :表示出现0次或1次
    .* :出现0次或多次
    .+ :出现1次或多次
    {m,n} :表示 m <= 数量 <= n
           m 如果缺省：{,n} :最多n次
            n 如果缺省：{m,} :最少m次
  4. 开始结束符号
    ^ :开始
    $ :结束

2.正则对象：

  1. 创建：
    var reg = new RegExp(“正则表达式”);
    var reg = /正则表达式/;
  2. 方法：
    test(参数):验证指定的字符串是否符合正则定义的规范
	<script type="text/javascript">
		/*
			正则对象：
				创建：
					var reg = new RegExp("正则表达式");
					var reg = /正则表达式/;
				方法：
					test(参数):验证指定的字符串是否符合正则定义的规范
		*/
	   //使用字符串的形式定义正则表达式， 需要w前使用"\\",防止\w被转义
	   var reg = new RegExp("^\\w{6,12}$");
	   
	   var reg2 = /^\w{6,12}$/;
	   
	   document.write(reg);
	   document.write(reg2);
	   
	   var username = "zhangsan";
	   
	   //验证
	   var flag0 = reg.test(username);
	   var flag = reg2.test(username);
	   document.write(flag0);
	   document.write(flag);
	</script>
Global对象

  1. 特点：全局对象，Global中封装的方法不需要对象就可以直接调用，方法名();

  2. 方法：
    encodeURI()：url编码
    decodeURI()：url解码

    encodeURIComponent()：url编码,编码的字符更多
    decodeURIComponent()：url解码

    parseInt()：将字符串转化为数字
            逐一判断每一个字符是否是数字，直到不是数字为止，将前面数字部分转为number
    isNaN():判断一个值是否是NaN
            NaN参与的所有 == 全部为false
    eval()：计算JavaScript字符串，并把它作为脚本代码来执行

  3. URI编码
            每个字节前用%分隔

	<script type="text/javascript">
		/*
			Global对象：
				*特点：全局对象，Global中封装的方法不需要对象就可以直接调用，方法名();
				*方法：
					encodeURI()：url编码
					decodeURI()：url解码
					
					encodeURIComponent()：url编码,编码的字符更多
					decodeURIComponent()：url解码
					
					parseInt()：将字符串转化为数字
						*逐一判断每一个字符是否是数字，直到不是数字为止，将前面数字部分转为number
					isNaN():判断一个值是否是NaN
						*NaN参与的所有 == 全部为false
					eval()：计算JavaScript字符串，并把它作为脚本代码来执行
				*URI编码
					每个字节前用%分隔
		*/
		var str = "百度";
		var encode = encodeURI(str);
		document.write(encode+"<br>");//%E7%99%BE%E5%BA%A6
		
		var decode = decodeURI(encode);
		document.write(decode+"<br>");//百度
	 
		var encode2 = encodeURIComponent(str);
		document.write(encode2+"<br>");//%E7%99%BE%E5%BA%A6
		
		var decode2 = decodeURIComponent(encode2);
		document.write(decode2+"<br>");//百度
		
		var str1 = "123abc";
		var str2 = "a123abc";
		var number1 = parseInt(str1);
		var number2 = parseInt(str2);
		document.write(number1+1+"<br>");//124
		document.write(number2+1+"<br>");//NaN
		
		document.write(isNaN(number2));//true 
		
		var jscode = "alert(123)";
		eval(jscode);
	</script>

BOM 浏览器对象模型

  1. 概念：Browser Object Model 浏览器对象模型
    将浏览器的各个组成部分封装成对象
  2. 组成：
    Window ：窗口对象
    Navigator ：浏览器对象
    Screen ：显示器屏幕对象
    History ：历史记录对象
    Location ：地址栏对象
          创建（获取）：
                window.location
                location
         方法：
               reload ：重新加载当前文档。刷新
         属性
               href 设置或返回完整的URL

Window：窗口对象

1.创建
2.方法

1.与弹出框有关的方法
alert() 显示带有一段消息和一个确认按钮的警告框
confirm() 显示带有一段消息以及确认按钮和取消按钮的对话框
          如果用户点击确定按钮，则方法返回true
          如果用户点击取消按钮，则方法返回false
prompt() 显示可提示用户输入的对话框
          返回值：获取用户输入的值
2.与打开关闭有关的方法
open() 打开一个新的浏览器窗口
      返回新的window对象
close() 关闭浏览器窗口
      关闭调用close()方法的浏览器对象
3.与定时器有关的方式
setTimeout() 在指定的毫秒数后调用函数或计算表达式
      参数：
              js代码或者方法对象
              毫秒值
      返回值：唯一标识，用于取消定时器
clearTimeout() 取消setTimeout()方法设置的timeout
setInterval() 按照指定的周期(以毫秒计)来调用函数或计算表达式
clearInterval() 取消setInterval()方法设置的Interval

3.属性
获取其他BOM对象：
History
Location
Navigator
Screen
获取DOM对象 document

4.特点
Window对象不需要创建，可以直接使用window对象。window.方法名();
window引用可以省略。方法名();

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Window对象</title>
		<script type="text/javascript">
			alert("window");
			window.alert("window");
			
			var flag = confirm("确定退出?");
			if(flag){
				//退出操作
				alert("欢迎再次光临");
			}
			else{
				//提示
				alert("……");
			}
			
			//输入框
			var username = prompt("请输入用户名：");
			alert(username);
		</script>
		
		<script type="text/javascript">
			//一次性定时器
			var i = setTimeout(fun,3000);
			clearTimeout(i);
			function fun(){
				document.write('BangBang');
			}
			
			//循环定时器
			var id = setInterval(fun,2000);
			clearInterval(id);
		</script>
		
		<script type="text/javascript">
			//获取history
			var h1 = window.history;
			var h2 = window.history;
			
			document.write(h1+"<br>"+h2+"<br>");
			
			//document.getElementById();
			window.document.getElementById("");
		</script>
	</head>
	<body>
		<input type="button" id="openBtn" value="打开窗口" />
		<input type="button" id="closeBtn" value="关闭窗口" />
		
		<script type="text/javascript">
			//打开新窗口
			var openBtn = document.getElementById("openBtn");
			var newWindow;//新窗口
			openBtn.onclick = function(){
				newWindow = open("https://www.baidu.com");
			}
			
			//关闭新窗口
			var closeBtn = document.getElementById("closeBtn");
			closeBtn.onclick = function(){
				newWindow.close();
			}
		</script>
	</body>
</html>
轮播图
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>轮播图</title>
		<script type="text/javascript">
			/*
				1.页面上使用img标签展示图片
				2.定义一个方法，修改图片对象的src属性
				3.定义一个定时器，每隔3秒调用方法一次
			*/
			var i = 1;
			function fun(){
				i++;
				//判断 i 是否大于3
				if(i > 3){
					i = 1;
				}
				//获取image对象
				var image = document.getElementById("image");
				image.src = "img/banner_"+i+".jpg";
			}
			//定义定时器
			setInterval(fun,3000);
		</script>	
	</head>
	<body>
		<img id="image" src="img/banner_1.jpg" width="100%" height="100%">
	</body>
</html>

Location 地址栏对象

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Location对象</title>
	</head>
	<style type="text/css">
		p{
			text-align: center;
		}
		span{
			color: red;
		}
	</style>
	<body>
		<input type="button" id="btn" value="刷新" />
		<input type="button" id="baidu" value="百度" />
		
		<script type="text/javascript">
			//reload方法：定义一个按钮，点击按钮，刷新当前页面
			//1.获取按钮
			var btn = document.getElementById("btn");
			//2.绑定单击事件
			btn.onclick = function(){
				//3.刷新页面
				location.reload();
			}
			
			//获取href
			var href = location.href;
			document.write(href);//当前项目的href
			
			//点击按钮，访问百度 https://www.baidu.com
			var baidu = document.getElementById("baidu");
			baidu.onclick = function(){
				location.href = "https://www.baidu.com";
			}
		</script>
		
		<p>
			<span id="time">5</span>秒之后，自动跳转首页...
		</p>
		<script type="text/javascript">
			/**
			 * 自动跳转
			 * 		1.显示页面效果 <p>
			 * 		2.倒计时读秒效果实现
			 * 			* 定义一个方法，获取span标签，修改span标签体内容，时间---
			 * 			* 定义一个定时器，1秒后执行该方法
			 * 		3.在方法中判断时间如果 <= 0 ,则跳转到首页
			 */
			var second = 5;
			var time = document.getElementById("time");
			function showTime(){
				second -- ;
				if(second <= 0){
					location.href = "demo01-12.html";
				}
				
				time.innerHTML = second + "";
			}
			
			//设置定时器，1秒执行一次该方法
			setInterval(showTime,1000);
		</script>
	</body>
</html>

DOM

DOM简单学习：为了满足案例要求

  1. 功能：控制html文档的内容
  2. 代码：获取页面标签(元素)对象 Element
    document.getElementById(“id值”); :通过元素id获得元素对象
  3. 操作Element对象：
    1.修改属性值：
        明确获取的对象是哪一个
        查看API文档，找其中有哪些属性可以设置
    2.修改标签体内容：
    属性：innerHTML
	<body>
		<img id="light" src="img/off.gif" >
		<h1 id="title">标题</h1>
		<script type="text/javascript">
			//通过id获取元素对象
			var light = document.getElementById("light");
			alert(light);
			//更换路径
			light.src = "img/on.gif";
			
			//获取h1标签对象
			var title = document.getElementById("title");
			alert("……");
			//修改内容
			title.innerHTML="title";
		</script>
	</body>

事件简单学习

  1. 概念：某些组件被执行了某些操作后，触发某些代码的执行。
  2. 绑定事件：
    直接在html标签上，指定事件的属性，属性值就是js代码
    事件：onclick —单击事件
    通过js获取元素对象，指定事件属性，设置一个函数
<body>
		<img id="light" src="img/off.gif" ><!-- 电灯事件 -->
		
		<script type="text/javascript">
			/*
				1.获取图片对象
				2.绑定单击事件
				3.每次点击切换图片
					规则：
						*如果灯是开的 on，切换图片为 off
						*如果灯是关的 off，切换图片为 on
					使用标记flag来完成
			*/
			var light = document.getElementById("light");
			var flag = false;
			light.onclick = function(){
				if(flag==false){
					light.src = "img/on.gif";
					flag = true;
				} 
				else{
					light.src = "img/off.gif";
					flag = false;
				}
		   }
		</script>
	</body>

DOM详细

概念：Document object Model 文档对象模型

将标记语言文档的各个组成部分，封装成为对象。可以使用这些对象，对标记语言文档进行CRUD的动态操作。

W3C DOM标准（核心DOM、XML DOM、HTML DOM）

  1. 核心 DOM——针对任何结构化文档的标准模型
    Document：文档对象
    Element：元素对象
    Attribute：属性对象
    Text：文本对象
    Comment：注释对象

    Node：节点对象，其他5个的父对象

  2. XML DOM——针对xml文档的标准模型

  3. HTML DOM——针对HTML文档的标准模型

核心DOM模型

  1. Document：文档对象
  2. Element：元素对象
    获取/创建：通过document来获取和创建
            removeAttribute() ：删除属性
            setAttribute() ：设置属性
  3. Node：节点对象，其他5个的父对象
  • 特点：所有dom对象都可以被认为是一个节点
  • 方法：
    CRUD dom 树：
            appendChild() ：向节点的子节点列表的末尾添加新的子节点
            removeChild() ：删除(并返回)当前节点的指定子节点
            replaceChild() ：用新的节点替换一个子结点
  • 属性：
    parentNode 返回节点的父节点
Document 文档对象

1.创建(获取)：在html dom模型中可以使用window对象来获取
window.document
document
2.方法：

  • 获取Element对象：
    1.getElementById()：根据id属性值获取元素对象。id属性值一般唯一
    2.getElementsByTagName()：根据元素名称获取元素对象们。返回值是一个数组
    3.getElementsByClassName()：根据Class属性值获取元素对象们。返回值是一个数组
    4.getElementsByName()：根据name属性值获取元素对象们，返回值是一个数组
  • 创建其他DOM对象
    createAttribute()
    createComment()
    createElement()
    createTextNode()

3.属性

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Document文档对象</title>
		
	</head>
	<body>
		<div class="class1">div1</div>
		<div class="class2">div2</div>
		<input type="text" name="username" />
		
		<script type="text/javascript">
			
			var divs = document.getElementsByTagName("div");
			document.write(divs.length);
			
			var divs_class = document.getElementsByClassName("class1");
			document.write(divs_class.length);
			
			var ele_username = document.getElementsByName("username");
			document.write(ele_username.length);
			
			//在内存中创建了一个table标签
			var table = document.createElement("table");
			document.write(table);
		</script>
	</body>
</html>
Node 节点对象案例
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Node对象</title>
		<style type="text/css">
			div{
				border: 1px solid #FF0000;
			}
			#div1{
				width: 200px;
				height: 200px;
			}
			#div2{
				width: 100px;
				height: 100px;
			}
			#div3{
				width: 50px;
				height: 50px;
			}
		</style>
	</head>
	<body>
		<div id="div1">
			<div id="div2">div2</div>
			div
		</div>
		<!-- <a href="#" id="del">删除子节点</a> -->
		<!-- 
			超链接功能：
				1.可以被点击：样式
				2.点击后跳转到href指定的url
			需求：保留功能 1，去掉功能 2 
			实现：href = "javascript:void(0);"
		-->
		<a href="javascript:void(0);" id="del">删除子节点</a>
		<a href="javascript:void(0);" id="add">添加子节点</a>
		<!-- <input type="button" id="del" value="删除子节点" /> -->
		
		<script type="text/javascript">
			//1.获取超链接
			var element_a = document.getElementById("del");
			//2.绑定单击事件
			element_a.onclick = function(){
				var div1 = document.getElementById("div1");
				var div2 = document.getElementById("div2");
				div1.removeChild(div2);
			}
			
			var element_a2 = document.getElementById("add");
			element_a2.onclick = function(){
				var div2 = document.getElementById("div2");
				
				//给div2添加子节点
				//创建div节点
				var div3 = document.createElement("div");
				//设置div3属性
				div3.setAttribute("id","div3");
				
				div2.appendChild(div3);
			}
			
			//获取父节点
			var div2 = document.getElementById("div2");
			var div1 = div2.parentNode;
			document.write(div1);
		</script>
	</body>
</html>

HTML DOM

  1. 标签体的设置和获取：innerHTML
  2. 使用html元素对象的属性
  3. 控制元素样式
    使用元素的style属性来设置
    提前定义好类选择器的样式，通过元素的className属性值来设置其class值
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>HTML DOM</title>
		<style type="text/css">
			.d1{
				border: 1px solid red;
				width: 200px;
				height: 200px;
			}
			
			.d2{
				border: 1px solid blue;
				width: 100px;
				height: 100px;
			}
		</style>
	</head>
	<body>
		<div id="div1">
			div
		</div>
		<div id="div2">
			div2
		</div>
		<script type="text/javascript">
			var div = document.getElementById("div1");
			var innerHTML = div.innerHTML;
			
			//div标签中替换一个文本输入框
			div.innerHTML = "<input type='text'>";
			//div标签中追加一个文本输入框
			div.innerHTML += "<input type='text'>";
		</script>
		
		<script type="text/javascript">
			/**
			 * 控制样式
			 */
			var div1 = document.getElementById("div1");
			div1.onclick = function(){
				//修改样式方式1
				div1.style.border = "1px solid red";
				div1.style.height = "500px";
				
				//font-size -->fontSize
				div1.style.fontSize = "50px";
			}
			
			var div2 = document.getElementById("div2");
			div2.onclick = function(){
				div2.className = "d1";
			}
		</script>
	</body>
</html>

事件（监听机制）

  1. 概念：某些组件被执行了某些操作后，出触发某些代码的执行
    事件：某些操作，如：单击，双击，鼠标移动
    事件源：组件。如：按钮 文本输入框
    监听器：代码
    注册监听：将事件、事件源、监听器结合在一起。当事件源上发生了某个事件，则触发执行某个监听器代码。
  2. 常见的事件：
  • 单击事件：
    onclick 单击事件
    ondblclick 双击事件
  • 焦点事件
    onblur 失去焦点
            一般用于表单校验
    onfocus 元素获得焦点
  • 加载事件
    onload ：一张页面或一幅图像完成加载
  • 鼠标事件
    onmousedown 鼠标按按键被按下
        定义方法时，定义一个形参，接受event对象
        event对象的button属性可以获取鼠标按键被点击（鼠标左键0，中键1，右键2）
    onmouseup 鼠标按键被松开
    onmousemove 鼠标被移动
    onmouseover 鼠标移动到某元素之上
    onmouseout 鼠标从某元素移开
  • 键盘事件
    onkeydown 某个键盘按键被按下
    onkeyup 某个键盘按键被松开
    onkeypress 某个键盘按键被按下并松开
  • 选中和改变
    onchange 域的内容被改变
    onselect 文本被选中
  • 表单事件：
    onsubmit 确认按钮被点击
        可以阻止表单的提交（方法返回false则表单被阻止提交）
    onreset 重置按钮被点击
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>常见事件</title>
		<script type="text/javascript">
			//加载完成事件 onload
			window.onload = function(){
				
				// 失去焦点事件 onblur
				document.getElementById("username").onblur = function(){
					alert("失去焦点");
				}
				
				//绑定鼠标事件 移动到元素之上
				document.getElementById("username").onmouseover = function(){
					alert("鼠标移动到元素之上");
				}
				
				//绑定鼠标 点击 事件 
				document.getElementById("username").onmousedown = function(event){
					alert(event.button);
				}
				
				//绑定键盘 点击 事件
				document.getElementById("username").onkeydown = function(event){
					// alert(event.keyCode);
					if(event.keyCode == 13){//按回车时值为13
						alert("提交表单");
					}
				}
				
				//域的内容改变 onchange
				document.getElementById("city").onchange = function(event){
					alert("改变");
				}
				
				//提交表单方法 1
				document.getElementById("form").onsubmit = function(){
					//校验用户名格式是否正确 true时可以提交；false时不可以提交
				 	var flag = false;
					
				 	return flag;
				 }
				 
			}
			//提交表单方法 2
			function checkForm(){
				return true;
			}
		</script>
	</head>
	<body>
		<form action="#" id="form" onclick="return checkForm();">
			<input id="username" name="username"/>
			
			<select id="city">
				<option value ="">--请选择--</option>
				<option value ="">--北京--</option>
				<option value ="">--上海--</option>
				<option value ="">--西安--</option>
			</select>
			
			<input type="submit" value="提交"/>
		</form>
	</body>
</html>

动态表格

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>动态表格</title>
		<style type="text/css">
			body{
				text-align: center;
			}
			th{
				text-align: center;
				padding-left: 40px;
				padding-right: 40px;
			}
			.over{
				background-color: aqua;
			}
			.out{
				background-color: #FFFFFF;
			}
		</style>
		<script type="text/javascript">
		/**
		 * 全选：
		 * 		获取所有的checkbox
		 * 		遍历checkbox，设置每一个checkbox的状态为选中 checked
		 */
		
		//1.在页面加载完后绑定事件
			window.onload = function(){
				//2.给全选按钮绑定单击事件
				document.getElementById("selectAll").onclick = function(){
					//全选
					//1.获取所有的checkbox
					var boxs = document.getElementsByName("checkbox");
					//2.遍历
					for(var i=0;i<boxs.length;i++){
						//3.设置每一个checkbox的状态为选中 checked
						boxs[i].checked = true;
					}
				}
				
				document.getElementById("unselectAll").onclick = function(){
					//全不选
					//1.获取所有的checkbox
					var boxs = document.getElementsByName("checkbox");
					//2.遍历
					for(var i=0;i<boxs.length;i++){
						//3.设置每一个checkbox的状态为未选中 checked
						boxs[i].checked = false;
					}
				}
				
				document.getElementById("opposite").onclick = function(){
					//反选
					//1.获取所有的checkbox
					var boxs = document.getElementsByName("checkbox");
					//2.遍历
					for(var i=0;i<boxs.length;i++){
						//3.设置每一个checkbox的状态相反
						boxs[i].checked = ! boxs[i].checked;
					}
				}
				document.getElementById("first").onclick = function(){
					//第一个checkbox点击
					//1.获取所有的checkbox
					var boxs = document.getElementsByName("checkbox");
					//2.遍历
					for(var i=0;i<boxs.length;i++){
						//3.设置每一个checkbox的状态与第一个checkbox的状态一样
						boxs[i].checked = this.checked;
					}
				}
				//给所有tr绑定鼠标移动到元素之上和移出元素之上的事件
				var trs = document.getElementsByTagName("tr");
				for(var i=0;i<trs.length;i++){
					//移到元素之上
					trs[i].onmouseover = function(){
						this.className =  "over";
					}
					//移出元素
					trs[i].onmouseout  = function(){
						this.className =  "out";
					}
				}
			}
		</script>
	</head>
	<body>
		<div>
			<input type="text" id="id" placeholder="请输入编号" />
			<input type="text" id="name" placeholder="请输入姓名" />
			<input type="text" id="sex" placeholder="请输入性别" />
			<input type="button" id="btn_add" value="添加" />
		</div>
		<table border="1" cellspacing="" cellpadding="" align="center">
			<caption>学生信息表</caption>
			<tr>
				<th><input type="checkbox" name="checkbox" id="first"/></th>
				<th>编号</th>
				<th>姓名</th>
				<th>性别</th>
				<th>操作</th>
			</tr>
			<tr>
				<td>
					<input type="checkbox" name="checkbox"/>
				</td>
				<td>1</td>
				<td>张三</td>
				<td>男</td>
				<td><a href="javascript:void(0)" onclick="delTr(this)">删除</a></td>
			</tr>
		</table>
		<input type="button" id="selectAll" value="全选" />
		<input type="button" id="unselectAll" value="全不选" />
		<input type="button" id="opposite" value="反选" />
		<script type="text/javascript">
			/**
			 * 1.添加
			 * 		*给添加按钮绑定单击事件
			 * 		*获取文本框的内容
			 * 		*创建tr，td，设置td的文本框的内容
			 * 		*创建tr
			 * 		*将td添加到tr中
			 * 		*获取table，将tr添加到table中
			 * 2.删除
			 * 		*确定点击的是哪个超链接
			 * 			<a href="javascript:void(0)" οnclick="delTr(this)">
			 * 		*如何删除
			 * 			removeChild()：通过父节点删除子节点
			 */
			
			//添加
			/*
			var btn_add = document.getElementById("btn_add");//添加按钮
			btn_add.onclick = function(){
				var id = document.getElementById("id").value;//编号
				var name = document.getElementById("name").value;//姓名
				var sex = document.getElementById("sex").value;//性别
				
				//id的td
				var td_id = document.createElement("td");
				var text_id = document.createTextNode(id);//文本节点
				td_id.appendChild(text_id);
				//name的td
				var td_name = document.createElement("td");
				var text_name = document.createTextNode(name);
				td_name.appendChild(text_name);
				//sex的td
				var td_sex = document.createElement("td");
				var text_sex = document.createTextNode(sex);
				td_sex.appendChild(text_sex);
				
				//a的td
				var td_a = document.createElement("td")
				var ele_a = document.createElement("a");
				ele_a.setAttribute("href","javascript:void(0)");
				ele_a.setAttribute("onclick","delTr(this)");
				var text_a = document.createTextNode("删除");
				ele_a.appendChild(text_a);
				td_a.appendChild(ele_a);
				
				var tr = document.createElement("tr");
				tr.appendChild(td_id);
				tr.appendChild(td_name);
				tr.appendChild(td_sex);
				tr.appendChild(td_a);
				
				var table = document.getElementsByTagName("table")[0];
				table.appendChild(tr);
			}
			*/
		   
			//使用innerHTML添加
			document.getElementById("btn_add").onclick = function(){
				var id = document.getElementById("id").value;//编号
				var name = document.getElementById("name").value;//姓名
				var sex = document.getElementById("sex").value;//性别
				
				var tbody = document.getElementsByTagName("tbody")[0];
				//追加一行
				tbody.innerHTML += "<tr>"+
					"<td><input type='checkbox' name='checkbox'/></td>"+
					"<td>"+id+"</td>"+
					"<td>"+name+"</td>"+
					"<td>"+sex+"</td>"+
					"<td><a href='javascript:void(0)' οnclick='delTr(this)'>删除</a></td>"+
				"</tr>";
			}
			// 删除
			function delTr(obj){
				var table = obj.parentNode.parentNode.parentNode;
				var tr = obj.parentNode.parentNode;
				
				table.removeChild(tr);
			}
		</script>
	</body>
</html>

在这里插入图片描述

用户注册（表单校验）

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>用户注册(表单校验)</title>
		<style type="text/css">
			body{
				background-color: #dbffec;
			}
			.body{
				border: 4px solid #dfdfdf;
				width: 700px;
				height: 400px;
				background-color: #ffffff;
				margin: 30px;
			}
			.left{
				width:150px;
				float: left;
				padding-left: 20px;
				padding-top: 20px;
			}
			.right{
				width:140px;
				float: right;
				margin-top: 20px;
			}
			.center{
				width:380px;
				float: left;
				margin-left: 5px;
				padding-top: 35px;
			}
			#l1 #l2{
				font:bold 15px "黑体";
			}
			td{
				text-align: right;
			}
			a{
				font-size: 15px;
				color: #ffda03;
				text-decoration: none;
			}
			#register{
				width: 60px;
				height: 30px;
				background-color:#ffda03 ;
				border:0px ;
			}
			
		</style>
		<script type="text/javascript">
			/**
			 * 1.给表单绑定事件 onsubmit。监听器中判断每一个方法校验的结果。
			 * 		如果都为true，则监听器方法返回true
			 * 		如果有一个为false，则监听器方法返回false
			 * 2.定义一些方法分别校验各个表单项
			 * 3.给各个表单项绑定onblur事件
			 */
			
			window.onload = function(){
				//给表单绑定onsubmit事件
				document.getElementById("form").onsubmit = function(){
					//调用用户校验方法 checkUsername();
					//调用密码校验方法 checkPassword();
					//return checkUsername() && checkPassword()
					
					return checkUsername() && checkPassword();
				}
				
				//给用户名和密码框分别绑定离焦事件
				document.getElementById("username").onblur = checkUsername;
				document.getElementById("password").onblur = checkPassword;
			}
			
			//校验用户名
			function checkUsername(){
				//1.获取用户名的值
				var username = document.getElementById("username").value;
				
				//2.定义正则表达式
				var reg_username = /^\w{6,12}$/;
				
				//3.判断值是否符合正则的规则
				var flag = reg_username.test(username);
				
				//4.提示信息
				var s_username = document.getElementById("s_username");
				
				if(flag){
					s_username.innerHTML = "<img src='img/gou.png' width='30px' height='25px'/>";
				}
				else{
					s_username.innerHTML = "用户名格式有误";
				}
				return flag;
			}
			
			//校验密码
			function checkPassword(){
				//1.获取密码的值
				var password = document.getElementById("password").value;
				
				//2.定义正则表达式
				var reg_password = /^\w{6,12}$/;
				
				//3.判断值是否符合正则的规则
				var flag = reg_password.test(password);
				
				//4.提示信息
				var s_password = document.getElementById("s_password");
				
				if(flag){
					s_password.innerHTML = "<img src='img/gou.png' width='30px' height='25px'/>";
				}
				else{
					s_password.innerHTML = "密码格式有误";
				}
				return flag;
			}
		</script>
	</head>
	<body>
		<div class="body">
			<div class="left">
				<span id="l1" style="color: #ffda03;">
					新用户注册
				</span><br>
				<span id="l2" style="color: #c7c7c7;">
					USER REGISTER
				</span>
			</div>
			<div class="center">
				<form action="" id="form" method="get">
					<table border="0" cellspacing="10" cellpadding="0">
						<tr>
							<td><label for="username">用户名</label></td>
							<td>
								<input type="text" id="username" size="20" name="username" placeholder=" 请输入用户名"/>
							</td>
							<td>
								<span id="s_username" style="color: #FF0000; font-size: 15px;"></span>
							</td>
						</tr>
						<tr>
							<td><label for="password">密码</label></td>
							<td>
								<input type="password" id="password" name="password" size="20" placeholder=" 请输入密码"/>
							</td>
							<td>
								<span id="s_password" style="color: #FF0000; font-size: 15px;"></span>
							</td>
						</tr>
						<tr>
							<td><label for="email">Email</label></td>
							<td>
								<input type="email" id="email" name="email" size="20" placeholder=" 请输入Email"/>
							</td>
						</tr>
						<tr>
							<td><label for="name">姓名</label></td>
							<td>
								<input type="text" id="name" name="name" size="20" placeholder=" 请输入真实姓名"/>
							</td>
						</tr>
						<tr>
							<td><label for="phone">手机号</label></td>
							<td>
								<input type="tel" id="phone" name="phone" size="20" placeholder=" 请输入您的手机号"/>
							</td>
						</tr>
						<tr>
							<td>性别</td>
							<td style="text-align: left;">
								<input type="radio" name="sex" value="male"/>男
								<input type="radio" name="sex" value="fmale"/>女
							</td>
						</tr>
						<tr>
							<td>出生日期</td>
							<td>
								<input type="text" name="date" size="20" placeholder=" 年 / 月 / 日"/>
							</td>
						</tr>
						<tr>
							<td><label for="check">验证码</label></td>
							<td>
								<table border="0" cellspacing="0" cellpadding="0">
									<tr>
										<td>
											<input type="text" id="check" size="11" name="check" placeholder=" 请输入验证码"/>
										</td>
										<td>
											&nbsp;<img src="img/check.png" width="50px" height="25px" align="center">
										</td>
									</tr>
								</table>
							</td>
						</tr>
						<tr>
							<td colspan="2" style="text-align: center;"><input type="submit" value="注册" id="register"/></td>
						</tr>
					</table>
				</form>
			</div>
			<div class="right">
				<span style="font-size: 15px;">已有账号?</span>
				<a href="#">立即登录</a>
			</div>
		</div>
	</body>
</html>

在这里插入图片描述

斯言
关注
专栏目录
JS概述
Bing's Blog
05-04 599
JS概述@(JavaScript)语言核心两个重要的数据类型是： + 对象 + 数组对象：键值对集合var book = { topic:&amp;amp;amp;quot;Javascript&amp;amp;amp;quot;, fat:true };对象属性的访问book.topic // Way 1 book[&amp;amp;amp;quot;fat&amp;amp;amp;quot;] // Way 2赋值即创造这个在其他语言环境中是不常见的，
Java web前端——JavaScript基础使用
冷漠的小猿
09-02 4310
JavaScript概述 1.1 JavaScript简介 JavaScript(LiveScript)一种解释性脚本语言，是一种动态类型、弱类型、基于原型继承的语言，内置支持类型。它的解释器被称为JavaScript引擎，为浏览器的一部分，广泛用于客户端的脚本语言，最早是在HTML（标准通用标记语言下的一个应用）网页上使用，用来给HTML网页增加动态功能。 1.2 JavaScript发...
前端基础之JavaScript
weixin_30653097的博客
05-30 193
JavaScript概述 ECMAScript和JavaScript的关系 1996年11月，JavaScript的创造者--Netscape公司，决定将JavaScript提交给国际标准化组织ECMA，希望这门语言能够成为国际标准。次年，ECMA发布262号标准文件（ECMA-262）的第一版，规定了浏览器脚本语言的标准，并将这种语言称为ECMAScript，这个版本就是1.0版。 该...
JavaScript 概述
02-29 397
JavaScript 概述 什么是JavaScript JavaScript 是世界上最流行的客户端脚本语言，主要用于为网页添加交互。 前端三大语言 　　- HTML ：超文本标记语言——专门编写网页内容的语言。 　　- CSS：层叠样式表——专门编写网页样式的语言。 　　- JavaScript：专门为网页添加交互行为的语言。 JavaScript 能做什么 　　客户端数据...
搭建 JavaScript 开发环境
Chrise-Song的博客
06-10 3990
搭建 JavaScript 开发环境安装过程 Node.js第一个 JavaScript 程序NPM 简单介绍 搭建环境，无外乎就是书写代码的环境以及运行代码的环境。 对于书写代码的环境，前面我们也有提过，书写 JavaScript 代码使用记事本都能够书写，但是，使用工具的话可以让我们书写代码的速度更快，事半功倍。 书写代码的工具可以分为两大类：文本型代码编辑器以及集成开发环境（IDE） 常见的文本型代码编辑器如下： 记事本 Sublime Atom Brackets VScode 常见的集成开发环境
javascript开发技术大全－第1章javascript概述
01-19
略 1.3 javascript与浏览器 略 1.4 javascript 作用 摘自《3Cschool》 JavaScript 能做什么？ JavaScript 为 HTML 设计师提供了一种编程工具 HTML 创作者往往都不是程序员，但是 JavaScript 却是一种只拥有极其简单...
javascript 概述
02-02
javascript一点小知识，大家一起来看看 内容不多，但是对刚接触这门语言的应该有点帮助
JavaScript概述及基本语法
12-04
JavaScript仅是一种解释性语言，Javascript的用途是:1.嵌入动态文本于HTML页面;2.对浏览器事件做出响应; 3.读写HTML元素;4.在数据被提交到服务器之前验证数据;5.检测访客的浏览器信息; 6.控制cookies，包括创建和...
JavaScript概述（一）
xiaouncle的博客
04-03 433
本文中记录的是关于JavaScript的最基本的内容，虽然基本，但是我觉得很重要，所以记录下来，供大家参考。 1、脚本语言简介 脚本语言的特点是语法简单，一般以文本形式保存，并且不需要编译成目标程序，在调用的时候直接解释执行，这可以当做脚本语言的判断标准。比如说JavaScript，你只需要用记事本新建一个html，然后在里面加上一段脚本就可以了，用浏览器打开html文件时自然会调用JS...
【JavaScript】——概述
杨晓敏
01-11 1197
一、概述 JavaScript 是一种具有面向对象能力的、解释型的程序设计语言。也就是说，它是基于对象和事件驱动并具有相对安全性的客户端脚本语言。 因为他不需要在一个语言环境下运行， 而只需要支持它的浏览器即可。 它的主要目的是， 验证发往服务器端的数据、 增加 Web互动、加强用户体验度等。       二、特点         1、解释性          JavaScript
javascript概述
最新发布
05-07
JavaScript是一种高级的、解释型的编程语言，用于在网页上实现交互和动态效果。它是一种基于对象和事件驱动的语言，可以通过嵌入到HTML页面中来实现网页的动态化。 JavaScript最初是为了在网页上添加简单的交互功能...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值