JavaScript学习笔记（未完待续）

文章目录

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

JavaScript是运行在浏览器上的脚本语言。简称JS。
JavaScript这个名字带有"Java"但是和Java没有关系，只是语法上有点类似。他们运行的位置不同。Java运行在JVM中，JavaScript运行在浏览器的内存当中。
JavaScript程序不需要手动编译，编写完源码之后，浏览器直接打开解释执行。
JavaScript的"目标程序"以普通文本形式保存，这种语言都叫做"脚本语言"。
Java的"目标程序"已.class形式存在，不能使用文本编译器打开，不是脚本语言。
JavaScript包括三大块：
ECMAScript：JS的核心语法（ES规范/ECMA-262标准）
DOM：Document Object Model（文档对象模型：对网页当中的节点进行增删改的过程。）HTML文档被当作一棵DOM树看待。

var domObje=document.getElementById("id"); 
1

BOM：Browser Object Model（浏览器对象模型）
关闭浏览器窗口、打开浏览器窗口、后退、前进、浏览器地址栏上的地址等，都是BOM编程。

2.HTML嵌入JavaScript的三种方式

2.1、第一种方式：事件句柄

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>HTML嵌入JavaScript的第一种方式title>
head>
    
<body>
    <input type="button" value="hello" onclick="window.alert('hello js')">

    <input type="button" value="hello" onclick='window.alert("hello js")'>

    
    <input type="button" value="hello" onclick="alert('hello zhangsan')
                                            alert('hello lisi')
                                            alert('hello wangwu')">

    <input type="button" value="hello" onclick="alert('hello zhangsan');
                                            alert('hello lisi');
                                            alert('hello wangwu');">


body>
html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43

2.2、第二种方式：脚本块

<script type="text/javascript">
    window.alert("first........");
script>
DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>HTML嵌入JavaScript的第二种方式title>
    <script type="text/javascript">
        /*
            暴露在脚本快当中的程序，在页面打开的时候执行，
            并且遵循自上而下的顺序依次逐行执行。（这个代码的执行不需要事件）
        */
        window.alert("head...........");
        
        //JS代码的注释，这是单行注释。
        /*
            JS代码的多行注释，和java一样。
        */
    script>
head>
<body>
    <input type="button" value="我是按钮对象1"/>
    
    
    <script type="text/javascript">
        window.alert("body..............");//alert函数会阻塞整个HTML页面的加载
    script>
    
    <input type="button" value="我是按钮对象2"/>
body>
html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35

2.3、第三种方式：引入外部独立的js文件

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>HTML嵌入JavaScript的第三种方式title>
head>
<body>
    <script type="text/javascript" src="js/1.js">
        //这里写的代码不会执行。
        //window.alert("hello world!");
    script>

    <script type="text/javascript">
        alert("kiss kiss");
    script>
body>
html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

js文件

window.alert("first");
window.alert("second");
window.alert("third");
1
2
3

3.JS的变量

Java中要求变量声明的时候是什么类型，不可变。编译器强行固定变量的数据类型称为强类型语言。（数据类型变量名;）
对比Java，JavaScript是一种弱类型语言，没有编译阶段，一个变量可以随意赋值，赋什么类型的值都行。（var 变量名;）

在js中可以执行，但在java中不能执行

var i=100;
i="abc";
i=false;
1
2
3

当系统没有赋值的时候，会默认赋undefined，undefined是系统的一个存在值。
当系统直接没声明直接调用一个值，会报错。

（图片3）

DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>变量title>
head>
<body>
	<script type="text/javascript">
		var a,b,c=200;
		alert("a="+a);
		alert("b="+b);
		alert("c="+c);
		
		a=false;
		alert(a);
		
		a="abc";
		alert(a);
		
		a=1.5;
		alert(a);
	script>
body>
html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

4.JS的函数

4.1、JS函数的定义和使用

函数类似java中的方法
java中定义方法的格式是

[修饰符列表] 返回值类型 方法名(形式参数列表){
	方法体;
}

public static int sum(int a ,int b){
	return a+b;
}

int sum=sum(1,2);
1
2
3
4
5
6
7
8
9

而js是一种弱类型，js中的函数不需要指定返回值类型，返回什么类型都行
函数的定义格式是

//第一种方式：
function 函数名(形式参数列表){
	函数体;
}
//第二种方式：
函数名=function(形式参数列表){
	函数体;
}
1
2
3
4
5
6
7
8

例如函数

//第一种函数定义格式
function sum(a,b){
	//a和b都是局部变量，他们都是形参（a和b都是变量名，变量名随意。）
	alert(a+b);
}

sum(a,b);//函数必须调用才能执行

//第二种函数定义格式
sayhello=function(username){
	alert("hello "+username);
}

sayhello("zhangsan");//调用函数
1
2
3
4
5
6
7
8
9
10
11
12
13
14

配合单击按钮框的完整代码

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>函数title>
head>
<body>
  <script type="text/javascript">
    //第一种函数定义格式
    function sum(a,b){
      //a和b都是局部变量，他们都是形参（a和b都是变量名，变量名随意。）
      alert(a+b);
    }
    
    //第二种函数定义格式
    sayhello=function(username){
      alert("hello "+username);
    }
    
    //调用函数（打开页面先执行）
    sayhello("lisi");
  script>

  <input type="button" value="计算10和20的和" onclick="sum(10,20)">
  <input type="button" value="sayhello" onclick="sayhello('zhansgan')">
body>
html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

4.2、JS函数的重载机制

重载的定义：方法名或者函数名一样，形参不同（个数，顺序，类型）

JS当中的函数在调用的时候，参数的类型没有限制，并且参数的个数也没有限制，js本身自带重载。（弱类型）
在JS当中，函数的名字不能重名，当函数重名的时候，后声明的函数会将之前声名的同名函数覆盖。

样例演示

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>重载机制title>
head>
<body>
  <script type="text/javascript">
    function sum(a,b){
      return a+b;
    }
    
    //调用函数sum
    var retValue=sum(1,2);
    alert(retValue); // 3
    
    var retValue2=sum("jack");//jack赋值给a变量，b变量没有赋值系统默认undefined
    alert(retValue2); // jackundefined
    
    var retValue3=sum();
    alert(retValue3); // NaN
    
    var retValue4=sum(1,2,3);
    alert(retValue4); // 3
    
    /*
      在JS当中，函数的名字不能重名，当函数重名的时候，后声明的函数会将之前声明的函数覆盖。
    */
    function test(username){
      alert("test");
    }
    
    function test(){
      alert("test test");
    }
    test("zhangsan"); // 这个调用的是第二个test()函数
  script>
body>
html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39

5.JS的全局变量和局部变量

在函数体之外声明的变量属于全局变量；在函数体当中声明的变量，包括一个函数的形参都属于局部变量
全局变量的生命周期是浏览器打开时声明，浏览器关闭时销毁，尽量少用。因为全局变量会一直在浏览器的内存当中，耗费内存空间
局部变量的生命周期是：函数开始执行时局部变量的内存空间开辟，函数执行结束之后，局部变量的内存空间释放，局部变量生命周期较短。

演示样例

//全局变量
var username="jack";

function hitUsername(){
	//局部变量
	var username="zhangsan";
	//就近原则：访问局部变量
	alert("username="+username);
}

//调用函数
hitUsername();

alert("username="+username);
1
2
3
4
5
6
7
8
9
10
11
12
13
14

先输出zhangsan，后输出jack
因为局部变量结束后便释放了，所以局部变量没有值
而如果单纯没有定义全局变量，在全局中输出局部变量那就会报错。

function accessAge(){
	var age=20;
	alert("age="+age);
}

accessAge();

//报错：Uncaught ReferenceError: age is not defined
alert("age="+age);
1
2
3
4
5
6
7
8
9

如果一个变量在声明的时候没有定义var，默认是全局变量（即使在局部变量中声明）

function myfun(){
	//当一个变量声明的时候没有使用var关键字，那么不管这个变量是在哪里声明的，都是全局变量。
	myname="jm";
}

//调用函数
myfun();

alert("myname="+myname); // myname=jm
1
2
3
4
5
6
7
8
9

6.JS中的数据类型

JS中的数据类型有：原始类型、引用类型

原始类型：Undefined、Number、String、Boolean、Null
引用类型：Object以及Object的子类

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"

var flag=false;
alert(typeof flag);//"boolean"

var obj=new Object();
alert(typeof obj);//"object"

//sayhello是一个函数
function sayhello(){
}
alert(typeof sayhello);//"function"
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

typeof：这个运算符可以在程序的运行阶段动态的获取变量的数据类型（typeof运算符的运算结果是以下6个字符串之一：注意字符串都是全部小写。“undefined”、“number”、“string”、“boolean”、“object”、“function”
在JS当中比较字符串是否相等使用"=="完成。没有equals

/*
typeof运算符的语法格式：
	typeof 变量名
*/
function sum(a,b){
	if(typeof a=="number"&&typeof b=="number"){
		return a+b;
	}
	alert(a+","+b+"必须都为数字！");
}
1
2
3
4
5
6
7
8
9
10

6.1、Undefined类型

当一个变量没有手动赋值，系统默认赋值undefined
或者也可以给一个变量手动赋值undefined

var i;//undefined
var j=undefined;//undefined

alert(i==j);//true

var k="undefined";//"undefined"是一个字符串类型
alert(j==k);// false
1
2
3
4
5
6
7

6.2、Number类型

Number类型包括整数、小数、正数、负数、不是数字、无穷大等
-1 0 1 2 2 3.14 100 … NaN Infinity等都属于Number类型

解释Infinity

//Infinity（当除数为0的时候，结果为无穷大）
alert(10/0);
1
2

解释NaN

var a=100;
var b="中国";
alert(a/b);//除号显然最后结果应该是一个数字，但是运算的过程中导致最后不是一个数字，那么最后的结果是NaN

var i="abc";
var j="10";
alert(i+j);//"abc10"，但此处的加号不是数学相加，而是字符串拼接
1
2
3
4
5
6
7

isNaN函数
is Not a Number
isNaN(数据)，结果是true表示不是一个数字，结果是false表示是一个数字

function sum(a,b){
	if(isNaN(a)||isNaN(b)){
		alert("参与运算的必须是数字！");
		return ;
	}
	return a+b;
}
sum(100,"abc");
alert(sum(100,200));
1
2
3
4
5
6
7
8
9

parseInt()或者parseFloat()
可以将字符串自动转换成数字

alert(parseInt(3.999));// 3
alert(parseInt("3.999"));// 3


alert(parseFloat("3.14")+1);// 4.140000000000001
alert(parseFloat("3.2")+1);// 4.2
1
2
3
4
5
6

Math.ceil()
向上取整

//Math.ceil()
alert(Math.ceil(-1.5));// -1
alert(Math.ceil(3.54));//4
1
2
3

6.3、Boolean类型

只有两个值：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
1
2
3
4
5
6
7
8

Boolean()，Boolean()函数的作用是将非布尔类型转换成布尔类型

语法格式:
	Boolean(数据)
1
2

6.4、NULL类型

只有一个值：null

alert(typeof null);//"object"
1

6.5、String类型

在JS当中字符串可以使用单引号，也可以使用双引号

var s1='abc';
var s2="efg";
1
2

两种创建对象的方式，但创建的对象的类型有所不同
String是一个内置的类，可以直接用，String的父类是Object

//第一种
var s="abc";
//第二种（使用JS内置的支持类String）
var s2=new String("abc");

//小String（属于原始类型String）
var x="king";
alert(typeof x);// "string"

//大String（属于Object类型）
var y=new Object("dog");
alert(typeof y);// "object"
1
2
3
4
5
6
7
8
9
10
11
12

常用函数

函数名	功能
indexOf	获取指定字符串在当前字符串中第一次出现处的索引
lastIndexOf	获取指定字符串在当前字符串中最后一次出现处的索引
replace	替换
substr	截取子字符串
substring	截取子字符串
toLowerCase	转换小写
toUpperCase	转换大写
spit	拆分字符串

alert("http://www.baidu.com".indexOf("http"));// 0
alert("http://www.baidu.com".indexOf("https"));// -1

//判断一个字符串中是否包含某个字符串？
alert("http://www.baidu.com".indexOf("https")>=0 ?"包含" :"不包含");// 不包含

//replace（注意：只替换了第一个）
alert("name=value%name=value%name=value%name=value".replace("%","&"));// name=value&name=value%name=value%name=value

//继续调用replace方法，就会替换第"二"个
//想全部替换需要使用正则表达式
alert("name=value%name=value%name=value%name=value".replace("%","&").replace("%","&"));// name=value&name=value&name=value%name=value
1
2
3
4
5
6
7
8
9
10
11
12

substr和substring的区别？

//substr(startIndex,length);
alert("123456789".substr(2,4));// 3456

//substring(startIndex,endIndex) 注意：不包含endIndex
alert("123456789".substring(2,4));// 34
1
2
3
4
5

6.6、Object类型

Object类型是所有类型的超类，自定义的任何类型，默认继承Object

js定义类的方式

定义类的语法：
	第一种方式：
		function 类名(){
			
		}
	第二种方式：
		类名=function(){
		
		}
创建对象的语法：
	new 构造方法名(实参);//构造方法和类名一致
1
2
3
4
5
6
7
8
9
10
11

js的类定义以及讨论

//定义一个学生类
function Student(){
	alter("student.........");
}

//当做普通函数调用
Student();

//当做类来创建对象
var stu=new Student();
alter(stu);//[object Object]
1
2
3
4
5
6
7
8
9
10
11

JS中的类的定义，同时又是一个构造函数的定义
在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,"jack",55);
alert(u2.sno);
alert(u2.sname);
alert(u2.sage);

//访问一个对象的属性，还可以使用这种方法
alert(u2["sno"]);
alert(u2["sname"]);
alert(u2["sage"]);
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

也可以换种方式定义类

Product=function(a,b,c){
	//属性
	this.pno=a;
	this.pname=b;
	this.price=c;
	//函数
	this.getPrice=function(){
		return this.price;
	}
}

var xigua=new Product(111,"西瓜",5.0);
var price=xigua.getPrice();
alert(price);
1
2
3
4
5
6
7
8
9
10
11
12
13
14

属性有：prototype属性（常用的，主要是这个）：作用是给类动态的扩展属性和函数。除此之外，还有constructor属性。

// 可以通过prototype这个属性来给类动态扩展属性以及函数
Product.prototype.getPname=function(){
	return this.pname;
}

// 调用后期扩展的getPname()函数
var pname=xigua.getPname();
alert(pname);

// 给String扩展一个函数
String.prototype.suiyi=function(){
	alert("这是给Stirng类型扩展的一个函数，叫做suiyi")
}

// 调用后期扩展的suiyi()函数
"abc".suiyi();

// 调用后期扩展的shuxing属性
String.prototype.shuxing="属性";
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

对比一下java类型定义与js类型定义
java语言怎么定义类，怎么创建对象？（强类型）

public class User(){
	Private String username;
	Private String password;
	Public User(){
	}
	Public User(String username,String password){
		this.username=username;
		this.password=password;
	}
}
User user = new User();
User user2=new User("lisi","123");
1
2
3
4
5
6
7
8
9
10
11
12

JS语言怎么定义类，怎么创建对象？（弱类型）

User = function(username,password){
	this.username=username;
	this.password=password;
}
var u=new User();
var u=new User("zhangsan");
var u=new User("zhangsan","123");
1
2
3
4
5
6
7

6.7、null、NaN、undefined类型

数据类型不一致
==（等同运算符：只判断值是否相等）
===（全等运算符：既判断值是否相等，又判断数据类型是否相等）

//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(NaN == undefined);// false

//在JS当中有两个比较特殊的运算符
alert(null === NaN); // false
alert(null === undefined);// false
alert(NaN === undefined);// false
1
2
3
4
5
6
7
8
9
10
11
12
13
14

7.JS事件

任何一个事件都会对应一个事件句柄，事件句柄是在事件前添加on
onXXX这个事件句柄出现在一个标签的属性位置上。（事件句柄以属性的形式存在。）

7.1、常用事件

blur失去焦点、foucs获得焦点
（所谓焦点是光标的获得与失去）

click鼠标单击、dblclick鼠标双击

keydown键盘按下、keyup键盘弹起

mousedown鼠标按下、mouseover鼠标经过
mousemove鼠标移动、mouseout鼠标离开
mouseup鼠标弹起

reset表单重置、submit表单提交

change下拉列表选中项改变，或文本框内容改变
select文本被选定
load页面加载完成（整个HTML页面中所有的元素全部加载完毕之后发生。）

7.2、注册事件方式

回调函数的特点：A程序写回调函数但是不自己调用，由B程序负责调用该函数。

注册事件的第一种方式，直接在标签中使用事件句柄

	<script type="text/javascript">
		function sayhello(){
			alert("hello js");
		}
	</script>
	
	<!--以下代码的含义是：将sayhello函数注册到按钮上，等待click事件发生之后，该函数被浏览器调用。我们称这个函数为回调函数-->
	<input type="button" value="hello" onclick="sayhello()"/>
1
2
3
4
5
6
7
8

注册事件的第二种方式，使用js代码完成事件注册

	<input type="button" value="hello" id="mybtn"/>
	<script type="text/javascript">
		function doSome(){
			alert("doSome....");
		}
		//第一步：先获取这个按钮对象（document是全部小写，内置对象，可以直接用，document就代表整个HTML页面）
		var btnObj=document.getElementById("mybtn");
		//第二步：给按钮对象的onclick属性赋值
		btnObj.onclick=doSome;//注意：别加小括号，btnObj.οnclick=doSome();这种错误的写法
		//这行代码的含义是，将回调函数doSome注册到click时间上。
	</script>
1
2
3
4
5
6
7
8
9
10
11

注册事件的第三种方式，使用匿名函数

	<input type="button" value="hello" id="mybtn"/>
	<script type="text/javascript">
		var mybtn=document.getElementById("mybtn");
		mybtn.onclick=function(){//匿名函数，这个匿名函数也是一个回调函数
			alert("test.........")//这个函数在页面打开的时候只是注册上，不会被调用，在click事件发生之后才会调用			
		}
	</script>
1
2
3
4
5
6
7

合并注册事件的写法

	<input type="button" value="hello" id="mybtn"/>
	<script type="text/javascript">
		document.getElementById("mybtn").onclick=function(){
			alert("6666666666");
		}
	</script>
1
2
3
4
5
6

7.3、代码执行顺序

先看一段与上文中不同顺序的程序

	<script type="text/javascript">
		// 第一步:根据id获取节点对象
		var btn=document.getElementById("btn"); // 返回null(因为代码执行到此处的时候id="btn"的元素还没有加载到内存)
		
		// 第二步:给节点对象绑定事件
		btn.onclick=function(){
			alert("hello js");
		}
	</script>
	<input type="button" value="hello" id="btn"/>
1
2
3
4
5
6
7
8
9
10

执行错误，返回了null，因为还未获取到id元素。

所以我们添加上面的一个函数load()
页面加载完的时候才会发生
不常用：

	<!--load事件发什么时候发生？页面全部元素加载完成之后才会发生。-->
	<body onload="ready()">
	<script type="text/javascript">
		function ready(){
			var btn=document.getElementById("btn");
			btn.onclick=function(){
				alert("hello js");
			}
		}
	</script>
	<input type="button" value="hello" id="btn"/>
	</body>
1
2
3
4
5
6
7
8
9
10
11
12

	<body onload="ready()">
	//等同于
	//需要写在script内
	window.onload=ready;
1
2
3
4

常用：

	<script type="text/javascript">
		//页面加载的过程中，将a函数注册给了load事件
		//页面加载完成之后，load事件发生了，此时执行回调函数a
		//回调函数a执行的过程中，把b函数注册给了id="btn"的click事件
		//当id="btn"的节点发生click事件之后，b函数被调用并执行
		window.onload=function(){//这个回调函数叫做a
			document.getElementById("btn").onclick=function(){//这个回调函数叫做b
				alert("hello js");
			}
		}
	</script>
	<input type="button" value="hello" id="btn"/>
1
2
3
4
5
6
7
8
9
10
11
12

7.4、设置节点的属性

通过点击一个按钮框，将其改变为复选框

	<script type="text/javascript">
		window.onload=function(){
			document.getElementById("btn").onclick=function(){
				document.getElementById("mytext").type="checkbox";
			}
		}
	</script>
	
	<input type="text" id="mytext">
	<input type="button" value="将文本框修改为复选框" id="btn"/>
1
2
3
4
5
6
7
8
9
10

7.5、捕捉回车键

回车键的键值是13，ESC键的键值是27
按钮键是onclick，而回车键是onkeydown
回调函数的参数可以有，也可以没有，都会调用回调函数

	<script type="text/javascript">
		window.onload=function(){
			document.getElementById("username").onkeydown=function(a,b,c){
				//获取键值
				alert(a);//[object KeyboardEvent]
				//alert(b);
				//alert(c);
			}
		}
	</script>
	<input type="text" id="username">
1
2
3
4
5
6
7
8
9
10
11

回车键摁下，浏览器会new一个对象，用函数接受当前的事件，用当前事件调用属性获取值。

	<script type="text/javascript">
		window.onload=function(){
			document.getElementById("username").onkeydown=function(event){
				//获取键值
				//对于"键盘事件对象"来说，都有keyCode属性用来获取键值
				alert(event.keyCode);
			}
		}
	</script>
	<input type="text" id="username">
1
2
3
4
5
6
7
8
9
10

如果捕获回车键，需要在事件函数中判断是否为键值

	<script type="text/javascript">
		window.onload=function(){
			document.getElementById("username").onkeydown=function(event){
				if(event.keyCode === 13){
						alert("正在验证......");
				}
			}
		}
	</script>
	<input type="text" id="username">
1
2
3
4
5
6
7
8
9
10

7.6、JS运算符

此处只讲void运算符void(表达式)

执行表达式，但不返回任何结果
javascript:void(0)其中javascript:作用是告诉浏览器后面是一段JS代码。以下程序的javascript是不能省略的。

		<a href="javascript:void(0)" onclick="window.alert('test code')">
			既保留住超链接的样式，同时用户点击该超链接的时候执行一段JS代码，但页面还不能跳转。
		</a>
1
2
3

void()这个小括号当中必须有值，不然会有语法错误

href=""默认空字符串或者是null或者false都是会跳转的，必须要是以上格式才行

7.7、JS的控制语句

for循环和for in使用

  <script type="text/javascript">
    //创建
    var arr=[false,"abc",123,3.14];
    //遍历数组
    for(var i=0;i<arr.length;i++){
      alert(arr[i]);
    }
    
    //for...in
    for(var i in arr){
      //alert(i);
      alert(arr[i]);
    }
    
    User=function(username,password){
      this.username=username;
      this.password=password;
    }
    
    //for..in语句可以遍历对象的属性
    var u=new User("zhangsan","123");
    alert(u.username+","+u.password);
    alert(u["username"]+","+u["password"]);
    
    for(var shuXingMing in u){
      //alert(shuXingMing); 输出的是username和password
      //alert(typeof shuXingMing); //shuXingMing是一个字符串
      alert(u[shuXingMing]);
    }
    
  </script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

with结构
with语句的调用先放在()内，在里面调用属性即可

    with(u){
      alert(username+","+password);
    }
1
2
3

8.DOM

DOM：Document Object Model（文档对象模型：对网页当中的节点进行增删改的过程。）HTML文档被当作一颗DOM树来看待。

var domObj=document.getElementById("id");
1

DOM和BOM的区别

BOM的顶级对象是：window
DOM的顶级对象是：document
实际上BOM是包括DOM的！

（图片5！！！！！！！！！！！！！！！！！！！！！！！）

8.1、设置和获取文本框的value

1.通过单击按钮框获取或修改value值

  <script type="text/javascript">
    window.onload=function(){
      document.getElementById("btn").onclick=function(){
        //获取文本框的value
        //alert(document.getElementById("username").value);
        //修改文本框的value为"张三"
        document.getElementById("username").value="张三";
      }
    }
  </script>
  <input type="text" id="username"/>
  <input type="button" value="单击获取文本框的value" id="btn"/>
1
2
3
4
5
6
7
8
9
10
11
12

2.将第一个文本框中的value赋值到第二个文本框上

  <script type="text/javascript">
    window.onload=function(){
      document.getElementById("btn").onclick=function(){
        document.getElementById("username2").value=
        document.getElementById("username").value;
      }
    }
  </script>
  <input type="text" id="username"/>
  <input type="text" id="username2"/>
  <input type="button" value="单击此处将第一个文本框中的文本赋值到第二个文本框中" id="btn">
1
2
3
4
5
6
7
8
9
10
11

3.失去焦点对象获取value值，通过this指针

  <!--blur事件，失去焦点事件-->
  <!--以下代码中的this代表的是当前input节点对象，this.value就是这个节点对象的value属性。-->
  <input type="text" onblur="alert(this.value)">
1
2
3

8.2、innerHTML和innerText属性

相同点：都是设置元素内部的内容。
不同点：
innerHTML会把后面的"字符串"当做一段HTML代码解释并执行
innerText只是把后面的"字符串"当作普通的字符串来看待。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>innerHTML和innerText</title>
    <style type="text/css">
        #div1{
            background-color:yellow;
            width:300px;
            height:300px;
            border:2px solid black;
            position:absolute;
            top:100px;
            left:100px;
        }
    </style>
</head>
<body>
    <script type="text/javascript">
        window.onload=function(){
            var btn=document.getElementById("btn");
            btn.onclick=function(){
                var divElt=document.getElementById("div1");
                divElt.innerHTML="用户名不能为空！！";
            }
        }
    </script>
    <input type="button" value="设置div中的内容" id="btn">
    <div id="div1"></div>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

8.3、正则表达式

正则表达式（Regular Expression）：主要用在字符串格式匹配方面
常用正则表达式符号

符号	功能
.	匹配除换行符以外的任意字符
\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-Za-z0-9中的任意1个字符
[A-Za-z0-9-] 表示A-Z、a-z、0-9、- ，以上所有字符中的任意1个字符
简单的正则表达式要会写
QQ号的正则表达式：¹[0-9]{4,}$
email正则：^\w+([-+.]\w+)@\w+([-.]\w+).\w+([-.]\w+)*$

创建表达式对象以及调用方式
第一种创建方式：var regExp = /正则表达式/flags;
第二种创建方式:使用内置支持类RegExp，var regExp = new RegExp(“正则表达式”,“flags”);

flags参数：

g：全局匹配
i：忽略大小写
m：多行搜索（ES规范制定之后才支持）
当前面试正则表达式的时候，m不能用
当前面是普通字符串的时候，m才可以使用

使用方式：
正则表达式对象具有test()方法

true/false=正则表达式对象.test(用户填写的字符串);
1

true：字符串匹配成功
false：字符串匹配失败

8.3.1、验证邮箱格式

代码示例验证邮箱是否正确

<body>
  <script style="text/javascript">
    window.onload=function(){
      //给按钮绑定click
      document.getElementById("btn").onclick=function(){
        var email=document.getElementById("email").value;
        var emailRegExp=/^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/;
        var ok=emailRegExp.test(email);
        if(ok){
          //合法
          document.getElementById("emailError").innerText="邮箱地址合法";
        } else {
          //不合法
          document.getElementById("emailError").innerText="邮箱地址不合法";
        }
      }
      //给文本框绑定focus，当邮箱格式不对光标回到文本框时，文本清空
      document.getElementById("email").onfocus=function(){
        if(document.getElementById("emailError").innerText=="邮箱地址不合法"){
          document.getElementById("email").value="";
        }
        document.getElementById("emailError").innerText="";
      }
    }
  </script>
  
  <input type="text" id="email">
  <span id="emailError" style="color:red;font-size:15px"></span><br>
  <input type="button" value="验证邮箱" id="btn">
</body>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

8.3.2、扩展字符串trim()函数

trim()：去除字符串前后空白字符

<body>
  <script type="text/javascript">
    window.onload=function(){
      document.getElementById("btn").onclick=function(){
        //获取用户名
        var username=document.getElementById("username").value;
        //去除前后空白
        username=username.trim();
        //测试
        alert("--->"+username+"<--");
      }
      
    }
  </script>
    <input type="text" id="username"/>
    <input type="button" value="获取用户名" id="btn"/>
</body>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

低版本的IE浏览器不支持trim()函数，可以自己对String类扩展一个全新的trim()函数，重写覆盖trim()函数，在trim()函数中写正则表达式

<body>
  <script type="text/javascript">
    //扩展trim函数，因为旧版本IE浏览器不支持trim函数
    String.prototype.trim = function(){
        return this.replace(/^\s+|\s+$/g,"");
    }
    window.onload=function(){
      document.getElementById("btn").onclick=function(){
        //获取用户名
        var username=document.getElementById("username").value;
        //去除前后空白
        username=username.trim();
        //测试
        alert("--->"+username+"<--");
      }
      
    }
  </script>
    <input type="text" id="username"/>
    <input type="button" value="获取用户名" id="btn"/>
</body>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

8.4、表单验证

需求：
（1）用户名不能为空
（2）用户名必须在6-14位之间
（3）用户名只能有数字和字母组成，不能含有其它符号（正则表达式）
（4）密码和确认密码一致，邮箱地址合法。
（5）统一失去焦点验证
（6）错误提示信息统一在span标签中提示（不能用div，div会换行）并且要求字体12号，红色。
（7）文本框再次获得焦点后，清空错误提示信息，如果文本框中数据不合法要求清空文本框的value
（8）最终表单中所有项均合法方可提交

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表单验证</title>
    <style type="text/css">
      span{
        color:red;
        font-size:12px;
      }
    </style>
</head>
<body>
  <script type="text/javascript">
    window.onload=function(){
      //获取username的文本框
      var usernameElt=document.getElementById("username");
      //获取username的span标签
      var usernameErrorSpan=document.getElementById("usernameError");
      
      //给username的文本框绑定blur事件
      document.getElementById("username").onblur=function(){
        var username=usernameElt.value;
        //去除前后空字符
        username=username.trim();
        //以下对名字进行判断是否合法！！
        if(username==""){
          //用户名为空，不合法
          //alert("名字不能为空");
          usernameErrorSpan.innerText="名字不能为空";
        } else {
          //用户名不为空
          //继续判断名字长度是否在[6,14]
          if(username.length<6||username.length>14){
            //名字长度不合法
            //alert("名字的长度必须在6-14位之间");
            usernameErrorSpan.innerText="名字的长度必须在6-14位之间";
          } else {
            //名字长度合法
            //继续判断是否有特殊符号
            var nameRegExp=/^[0-9A-Za-z]+$/;//名字的正则表达式
            var ok=nameRegExp.test(username);
            if(ok){
              //用户名合法
            } else {
              //用户名不合法
              //alert("用户名只能由数字和字母组成");
              usernameErrorSpan.innerText="用户名只能由数字和字母组成";
            }
          }
        }
      }
      
      //给username的文本框绑定focus事件
      usernameElt.onfocus=function(){
        //有提示内容，说明用户名合法
        if(usernameErrorSpan.innerText!=""){
          usernameElt.value="";
        }
        //光标点击文本框之后,清空提示
        usernameErrorSpan.innerText="";
      }
      
      
      //获得userpwd的文本框
      var userpwdElt=document.getElementById("userpwd");
      //获得userpwd2的文本框
      var userpwd2Elt=document.getElementById("userpwd2");
      //获得userpwd2Error的span标签
      var userpwd2ErrorSpan=document.getElementById("userpwd2Error");
      
      //给userpwd2文本框绑定blur事件
      userpwd2Elt.onblur=function(){
        var userpwd=userpwdElt.value;
        var userpwd2=userpwd2Elt.value;
        if(userpwd!=userpwd2){
          //密码不一致
          //alert("密码不一致");
          userpwd2ErrorSpan.innerText="密码不一致";
        } else {
          //密码一致
        }
      }
      
      //给userpwd2文本框绑定focus事件
      userpwd2Elt.onfocus=function(){
        if(userpwd2ErrorSpan.innerText!=""){
          userpwd2.value="";
        }
        userpwd2ErrorSpan.innerText="";
      }
      
      
      //获得email文本框
      var emailElt=document.getElementById("email");
      //获得emailError的span标签
      var emailErrorSpan=document.getElementById("emailError");
      
      //给email文本框绑定blur事件
      emailElt.onblur=function(){
        var emailRegExp=/^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/;//邮箱正则表达式
        var email=emailElt.value;
        var ok=emailRegExp.test(email);
        if(ok){
          //邮箱格式合法
        } else {
          //alert("邮箱格式不合法");
          emailErrorSpan.innerText="邮箱格式不合法";
        }
      }
      
      //给email文本框绑定focus事件
      emailElt.onfocus=function(){
        if(emailErrorSpan.innerText!=""){
          emailElt.value="";
        }
        emailErrorSpan.innerText="";
      }
      
      
      //最后一步，表单中所有项均合法方可提交
      //获得提交按钮
      var submitBtnElt=document.getElementById("submitBtn");
      //给提交按钮绑定click事件
      submitBtnElt.onclick=function(){
        //触发username的blur userpwd2的blur email的blue
        //不需要人工操作，使用纯JS代码触发事件
        usernameElt.focus();
        usernameElt.blur();
        
        userpwd2Elt.focus();
        userpwd2Elt.blur();
        
        emailElt.focus();
        emailElt.blur();
        
        //当所有表单都是合法的时候，提交表单
        if(usernameErrorSpan.innerText==""&&userpwd2ErrorSpan.innerText==""&&emailErrorSpan.innerText==""){
          //获取表单对象
          var userformElt=document.getElementById("userform");
          //提交表单
          userformElt.submit();
        }
      }
      
    }
  </script>
  <form id="userform" action="http://loaclhost:8080/jd/save" method="get">
    用户名<input type="text" name="username" id="username"/><span id="usernameError"></span><br>
    密码<input type="text" name="userpwd" id="userpwd"/><br>
    确认密码<input type="text" id="userpwd2"/><span id="userpwd2Error"></span><br>
    邮箱<input type="text" name="email" id="email"/><span id="emailError"></span><br>

    <input type="button" value="注册" id="submitBtn">
    <input type="reset" value="重置" id="resetBtn">
  </form>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158

8.5、复选框的全选和取消全选

获取所有name相同的元素：
var aihaos = document.getElementsByName(“aihao”);

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>复选框的全选和取消全选</title>
</head>
<body>
  <script type="text/javascript">
    window.onload=function(){
		
      //获取headChk元素
      var firstChk=document.getElementById("firstChk");
	  //获取所有的aihao元素
	  var aihaos=document.getElementsByName("aihao");
      //给firstChk绑定click事件
      firstChk.onclick=function(){
        for(var i=0;i<aihaos.length;i++){
          aihaos[i].checked=firstChk.checked;
        }
      }
	  
	  //统计aihaos集合的元素总数量
	  var all=aihaos.length;
	  for(var i=0;i<aihaos.length;i++){
		  aihaos[i].onclick=function(){
			  var checkedCount=0;
			  for(var j=0;j<aihaos.length;j++){
				  if(aihaos[j].checked){
					  checkedCount++;
				  }
			  }
			  //总数量和选中的数量相等时，第一个复选框选中
			  firstChk.checked=(checkedCount==all);
		  }
	  }
    }
  </script>
  <input type="checkbox" id="firstChk"/><br>
  <input type="checkbox" name="aihao" value="smoke"/>抽烟<br>
  <input type="checkbox" name="aihao" value="drink"/>喝酒<br>
  <input type="checkbox" name="aihao" value="code"/>编程<br>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43

8.6、获取下拉列表选项中的value

通过onorange的事件获取当亲下拉列表的值，this代表当前

		<select onchange="alert(this.value)">
			<option value="">--请选择省份--</option>
			<option value="001">山东</option>
			<option value="002">北京</option>
			<option value="003">江苏</option>
			<option value="004">浙江</option>
			<option value="005">上海</option>
		</select>
1
2
3
4
5
6
7
8

换一种写法，使用js代码。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>获取下拉列表选项中的value</title>
	</head>
	<body>
		<script text/javascript>
			window.onload=function(){
				//获取省份元素
				var procinceListElt=document.getElementById("provinceList");
				//给省份元素添加change事件
				procinceListElt.onchange=function(){
					//获取选项中的value
					alert(procinceListElt.value);
				}
			}
		</script>
		
		<select id="provinceList">
			<option value="">--请选择省份--</option>
			<option value="001">山东</option>
			<option value="002">北京</option>
			<option value="003">江苏</option>
			<option value="004">浙江</option>
			<option value="005">上海</option>
		</select>
	</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

8.7、内置支持类

8.7.1、获取日期（Date）

var nowTime=new Date();
document.write(nowTime);
1
2

Tue Aug 09 2022 22:56:34 GMT+0800 (中国标准时间)
日期格式不符合我们的观感！
转换成具有本地语言环境的日期格式：nowTime=nowTime.toLocaleString();
2022/8/9 22:58:15

如果需要自己组建一个日期格式可以这样写：

获取年份信息getFullYear();
获取月份日期getMonth();
获取当日信息getDate();
获取当前系统的毫秒数（从1970年1月1日 00:00:000到当前系统时间的总毫秒数）getTime();

//当以上格式不是自己想要的，可以通过日期获取年月日等信息，自定制日期格式。
var date=new Date();
var year=date.getFullYear();//返回年信息，以全格式返回
var month=date.getMonth();//月份：0-11
var dayOfWeek=date.getDay();//获取一周的第几天（1-7）
var day=date.getDate();//获取日信息
document.write(year+"年"+(month+1)+"月"+day+"日");
document.write("
");//换行
document.write("今天是这个周的第"+dayOfWeek+"天");
1
2
3
4
5
6
7
8
9

通过结合按钮框，一点击就显示有系统时间
系统开始时间setInterval(“函数名”,间隔毫秒时间数)
终止系统时间，通过传输开始执行的数据clearInterval(传输开始执行的数据)

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>获取日期</title>
	</head>
	<body>
<script type="text/javascript">
	function displayTime(){
		var time=new Date();//新建一个date对象
		var strTime=time.toLocaleString();//转换成本地时间格式
		document.getElementById("timeDiv").innerText=strTime;
	}
	
	//每隔一秒调用一次displayTime()函数
	function start(){
		//从这行代码执行开始，则会不间断的，每隔1000毫秒调用一次displayTime()函数
		v=window.setInterval("displayTime()",1000);
	}
	
	function stop(){
		window.clearInterval(v);
	}
</script>
<input type="button" value="显示系统时间" onclick="start()"/>
<input type="button" value="暂停系统时间" onclick="stop()"/>
<div id="timeDiv"></div>
	</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

8.7.2、数组内置类

数组定义用[]，而java的数组定义用{}
数组类型随意
数组可越界扩容

//创建长度为0的数组
var arr=[];
document.write(arr.length+"
");// 0

//数据类型随意
var arr2=[true,3.14,"abc",100];
document.write(arr2.length+"
");// 4

arr2[6]="six";//自动扩容

document.write(arr2.length+"
");// 7

//遍历
for(var i=0;i<arr2.length;i++){
	document.write(arr2[i]+" ");
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

另一种创建数组对象的方式

var a=new Array();
alert(a.length);// 0

var a2=new Array(3);// 3表示长度
alert(a2.length);// 3

var a3=new Array(3,2);//长度为最后一个（覆盖）
alert(a3.length);
1
2
3
4
5
6
7
8

数组相关的方法：
连接字符串join(“连接符”);
数组末尾添加元素push(元素);
数组末尾弹出元素pop();
反转数组reverse();

var a=[1,2,3,4];
var str=a.join("-");
alert(str);//"1-2-3-4"

//在数组的末尾添加一个元素
a.push(10);
alert(a.join("-"));//"1-2-3-4-10"

//将末尾元素弹出
var endElt=a.pop();
alert(endElt);// 10
alert(a.join("-"));//"1-2-3-4"

//注意:JS中的数组可以自动模拟栈数据结构：后进先出，先进后出原则。
//push压栈
//pop弹栈

//反转数组
a.reverse();
alert(a.join("-"));//"4-3-2-1"
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

9.BOM

BOM编程中，window是顶级对象，代表浏览器窗口。

9.1、open和close

window有open()和close()方法，可以开启窗口和关闭窗口。
打开window.open()
关闭window.close()

<input type="button" value="开启百度(新窗口)" onclick="window.open('http://www.baidu.com')"/>
<input type="button" value="开启百度(当前窗口)" onclick="window.open('http://www.baidu.com','_self')"/>
<input type="button" value="开启百度(新窗口)" onclick="window.open('http://www.baidu.com','_blank')"/>
<input type="button" value="开启百度(父窗口)" onclick="window.open('http://www.baidu.com','_parent')"/>
<input type="button" value="开启百度(顶级窗口)" onclick="window.open('http://www.baidu.com','_top')"/>

<input type="button" value="打开表单验证" onclick="window.open('002.open.html')"/>
1
2
3
4
5
6
7

补充当前窗口与顶级窗口
覆盖整个页面的窗口只有一个可以理解为顶级窗口

将当前窗口设置为顶级窗口代码演示

if(window.top!=window.self){					window.top.location=window.self.location;
}
1
2

9.2、弹出框

消息框window.alert(“消息框”)
确认框window.confirm(“确认框”)

弹出消息框

<input type="button" value="弹出消息框" onclick="window.alert('消息框！')"/>
1

弹出确认框

<script>
	function del(){
		/*
			var ok=window.confirm('亲，确认删除数据吗？');
			//返回值为true或false
			//点击确定为true
			//点击false为true
			if(ok){
				alert("删除数据ing");
			}
		*/
		if(window.confirm('亲，确认删除数据吗？')){
			alert("删除数据ing");
		}
	}
</script>
<input type="button" value="弹出确认框" onclick="del()"/>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

9.3、历史记录

历史纪录的后退window.history.back()或者是window.history.go(-1)
历史纪录的前进window.history.go(1)

<input type="button" value="后退" onclick="window.history.back()"/>
<input type="button" value="后退" onclick="window.history.go(-1)"/>
<input type="button" value="前进" onclick="window.history.go(1)"/>
1
2
3

9.4、设置地址栏的url

var xx=window.location;
xx.href="修改后的url";
1
2

或者window.location.href=“修改后的url”;
或者window.location=“修改后的url”;
或者document.location.href=“修改后的url”;
或者document.location=“修改后的url”;

样例演示

<script>
	function goUrl(){
		var xx=window.location;
		xx.href=document.getElementById("mytext").value;
	}
</script>
<input type="text" name="url" id="mytext"/>
<input type="button" value="转入新页面" onclick="goUrl()"/>
1
2
3
4
5
6
7
8

9.5、总结：有哪些方法可以通过浏览器往服务器发请求

1.表单form的提交====
2.超链接。点击进入
3.document.location=“url”;
4.window.location=“url”;
5.window.open(“url”);
6.直接在浏览器地址栏上输入url，然后回车（手动输入，也是动态的）

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

10.JSON

JavaScript Object Notation（JavaScript对象标记），简称JSON。
JSON是一种轻标准的轻量级的数据交换格式
特点是：体积小，易解析
JSON主要的作用是：一种标准的数据交换格式。
在实际的开发中有两种数据交换格式使用最多，第一种是JSON，另一种是XML。XML体积较大，解析麻烦，但是有优点是：语法严谨。（银行通常会使用）

10.1、JSON的代码格式

两种数据要交换可以用JSON或者XML，通过与Java交换
对比一下数据的轻量级

//创建JSON对象（JSON也可以称为无类型对象。体积小，易解析。）
var studentObj={
	"sno":"110",
	"sname":"zhangsan",
	"sex":"男"
};

//访问JSON对象的属性
alert(studentObj.sno+","+studentObj.sname+","+studentObj.sex);
1
2
3
4
5
6
7
8
9

数组遍历

//JSON数组
var students=[
	{"sno":"1","sname":"zhangsan","sex":"男"},
	{"sno":"2","sname":"xiaowang","sex":"女"},
	{"sno":"3","sname":"zhaoliu","sex":"男"}
];

//遍历JSON数组
for(var i=0;i<students.length;i++){
	var student=students[i];
	alert(student.sno+","+student.sname+","+student.sex);
}
1
2
3
4
5
6
7
8
9
10
11
12

JSON的代码格式为：

var jsonObj={
	"属性名":"属性值",
	"属性名":"属性值",
	"属性名":"属性值",
	"属性名":"属性值",
	"属性名":"属性值",
	......
};
1
2
3
4
5
6
7
8

对比：
之前没有使用JSON的时候，定义类，创建对象，访问对象那个的属性

Student=function(sno,sname,sex){
	this.sno=sno;
	this.sname=sname;
	this.sex=sex;
}
var student=new Student("123","ikun","男");
alert(student.sno+","+student.sname+","+student.sex);
1
2
3
4
5
6
7

10.2、JSON对象

通过键值对进行编写
可以json嵌套json

var user={
	"usercode":110,
	"username":"张三",
	"sex":true,
	"address":{
		"city":"山东",
		"street":"烟台",
		"zipcode":"27777"
	},
	"aihao":["smoke","drink","code"]
};

//访问人名以及居住的城市
alert(user.username+"居住在"+user.address.city);	
1
2
3
4
5
6
7
8
9
10
11
12
13
14

代码示例：
自行设计JSON格式的数据，这个JSON格式的数据可以描述整个班级中每一个学生的信息，以及总人数信息。

var jsonDate={
	"total":3,
	"students":[
		{"name":"zhangsan","no":"1"},
		{"name":"lisi","no":"2"},
		{"name":"wangwu","no":"3"}
	]
};

alert("总人数："+jsonDate.total);
for(var i=0;i<jsonDate.students.length;i++){
	var stu=jsonDate.students[i];
	alert(stu.name+","+stu.no);
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14

10.3、eval()函数

通过eval连接前后端的函数
功能：将字符串当作一段JS代码解释并执行
例如：window.eval(“var i=100”);

主要在实战中

java连接数据库，查询数据之后，将数据在java程序中拼接成JSON格式的"字符串"，将JSON格式的字符串相应到浏览器
java响应到浏览器上的仅仅是一个"JSON格式的字符串"，还不是一个JSON对象
可以使用eval函数，将JSON格式的字符串转换成JSON对象

//这是java程序发送过来的json格式的字符串
//\这是转义字符，字符串用双引号括起来，那么字符串中想要表达双引号，要用转义字符。
var fromJava="{\"name\":\"zhangsan\",\"password\":\"123\"}";
//将以上的json格式的字符串转换成json对象
window.eval("var jsonObj="+fromJava);
//访问json对象
alert(jsonObj.name+","+jsonObj.password);
//还可以采用这种方式
alert(jsonObj["name"]+jsonObj["password"]);		
1
2
3
4
5
6
7
8
9

10.4、设置table的tbody

将java中的数据展示到table中
表格页面的html格式如下

<input type="button" value="显示员工信息列表" id="displayBtn"/>
<h2>员工信息表</h2>
<hr>
<table id="emptbody" border="1px" width="50%">
	<tr>
		<th>1111</th>
		<th>SMITH</th>
		<th>800</th>
	</tr>
	<tr>
		<td>2222</td>
		<td>JACKSON</td>
		<td>2000</td>
	</tr>
	<tr>
		<td>3333</td>
		<td>KULI</td>
		<td>1500</td>
	</tr>
</table>
总共<span id="count">0</span>条数
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

本身tbody没有数据，通过点按钮，将json数据显示到页面上
json的数据如下

var data={
	"total":4,
	"emps":[
		{"empno":7701,"ename":"SMITH","sal":800},
		{"empno":7702,"ename":"SMITH2","sal":1800},
		{"empno":7703,"ename":"SMITH3","sal":2800},
		{"empno":7704,"ename":"SMITH4","sal":3800},
	]
};
1
2
3
4
5
6
7
8
9

通过点击按钮框实现的代码逻辑如下
每循环一次加一个html的页面以及条数
数据加载到tbody中

document.getElementById("emptbody").innerHTML
document.getElementById("count").innerHTML=data.total;
1
2

完整代码演示

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>设置table的tbody</title>
	</head>
	<body>
		<script type="text/javascript">
			var data={
				"total":4,
				"emps":[
					{"empno":7701,"ename":"SMITH","sal":800},
					{"empno":7702,"ename":"SMITH2","sal":1800},
					{"empno":7703,"ename":"SMITH3","sal":2800},
					{"empno":7704,"ename":"SMITH4","sal":3800}
				]
			};
			//把json代码数据展示到table中
			window.onload=function(){
				var btnElt=document.getElementById("displayBtn");
				btnElt.onclick=function(){
					var emps=data.emps;
					var html="";
					for(var i=0;i<emps.length;i++){
						var emp=emps[i];
						html+="";
						html+=""+emp.empno+"";
						html+=""+emp.ename+"";
						html+=""+emp.sal+"";
						html+="";
					}
					document.getElementById("emptbody").innerHTML=html;
					document.getElementById("count").innerHTML=data.total;
				}
			}
		</script>
		<input type="button" value="显示员工信息列表" id="displayBtn"/>
		<h2>员工信息表</h2>
		<hr>
		<table id="emptbody" border="1px" width="50%">
			<!-- <tr>
				<th>1111</th>
				<th>SMITH</th>
				<th>800</th>
			</tr>
			<tr>
				<td>2222</td>
				<td>JACKSON</td>
				<td>2000</td>
			</tr>
			<tr>
				<td>3333</td>
				<td>KULI</td>
				<td>1500</td>
			</tr> -->
		</table>
		总共<span id="count">0</span>条数
	</body>
	
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60

10.5、面试题

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

[]是数组
{}是JSON
java中的数组：int[] arr={1,2,3};
JS中的数组：var arr=[1,2,3];
JSON：var jsonObj={“email”:“242@qq.com”,“age”:15};

1-9 ↩︎

相关阅读:
【Java Web】Kafka，构建TB级异步消息系统
 TextRCNN、TextCNN、RNN
第一章概述
 2022年卡塔尔世界杯黑科技盘点
 c# webapi 处理跨源问题
 Java项目：ssm客户关系管理系统
 高并发架构设计经验
 温湿度计传感器DHT11控制数码管显示verilog代码及视频
 Windows11配置SQL Server Managment Studio 18（SSMS）
jmeter生成html格式接口自动化测试报告
原文地址：https://blog.csdn.net/m0_66689823/article/details/126217353