JavaScript学习笔记

Jm呀

已于 2023-03-01 18:26:50 修改

阅读量802

点赞数 12

分类专栏：前端文章标签： javascript 学习前端 java 开发语言

于 2022-08-07 21:58:34 首次发布

本文链接：https://blog.csdn.net/m0_66689823/article/details/126217353

版权

前端专栏收录该内容

6 篇文章 1 订阅

订阅专栏

文章目录

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");

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>
    <!--
        1.要实现的功能，弹出消息框。

        2.JS是一门事件驱动型的编程语言，依靠事件去驱动，然后执行对应的程序。
        在JS中有很多事件，其中有一个事件叫做：鼠标单击，单词：click。并且任何
        时间都会对应一个事件句柄叫做：onclick。【注意：事件和事件句柄的区别是：
        事件句柄是在事件单词前添加一个on。】，而事件句柄是以HTML标签的属性存在的。

        3.οnclick="js代码"，执行原理是什么？
            页面打开的时候，js代码并不会执行，只是把这段JS代码注册到按钮的click事件上了。
            等这个按钮发生click事件之后，注册在onclick后面的js代码会被浏览器自动调用。

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

        5.JS中的字符串可以使用双引号，也可以使用单引号。

        6.JS中的一条语句结束之后可以使用分号";"，也可以不用。
    -->
<body>
    <input type="button" value="hello" onclick="window.alert('hello js')">

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

    <!--window，可以省略-->
    <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>

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"/>
    
    <!--
        JavaScript的脚本块在一个页面当中可以出现多次。没有限制。
        JavaScript的脚本块出现位置也没有要求，随意。
    -->
    <script type="text/javascript">
        window.alert("body..............");//alert函数会阻塞整个HTML页面的加载
    </script>
    
    <input type="button" value="我是按钮对象2"/>
</body>
</html>

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>

js文件

window.alert("first");
window.alert("second");
window.alert("third");

3.JS的变量

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

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

var i=100;
i="abc";
i=false;

当系统没有赋值的时候，会默认赋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>

4.JS的函数

4.1、JS函数的定义和使用

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

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

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

int sum=sum(1,2);

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

//第一种方式：
function 函数名(形式参数列表){
	函数体;
}
//第二种方式：
函数名=function(形式参数列表){
	函数体;
}

例如函数

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

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

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

sayhello("zhangsan");//调用函数

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

<!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>

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>

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

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

演示样例

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

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

//调用函数
hitUsername();

alert("username="+username);

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

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

accessAge();

//报错：Uncaught ReferenceError: age is not defined
alert("age="+age);

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

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

//调用函数
myfun();

alert("myname="+myname); // myname=jm

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"

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+"必须都为数字！");
}

6.1、Undefined类型

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

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

alert(i==j);//true

var k="undefined";//"undefined"是一个字符串类型
alert(j==k);// false

6.2、Number类型

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

解释Infinity

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

解释NaN

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

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

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));

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

Math.ceil()
向上取整

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

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

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

语法格式:
	Boolean(数据)

6.4、NULL类型

只有一个值：null

alert(typeof null);//"object"

6.5、String类型

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

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

两种创建对象的方式，但创建的对象的类型有所不同
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"

常用函数

函数名	功能
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

substr和substring的区别？

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

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

6.6、Object类型

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

js定义类的方式

定义类的语法：
	第一种方式：
		function 类名(){
			
		}
	第二种方式：
		类名=function(){
		
		}
创建对象的语法：
	new 构造方法名(实参);//构造方法和类名一致

js的类定义以及讨论

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

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

//当做类来创建对象
var stu=new Student();
alter(stu);//[object Object]

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"]);

也可以换种方式定义类

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);

属性有：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="属性";

对比一下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");

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");

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

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()"/>

注册事件的第二种方式，使用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>

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

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

合并注册事件的写法

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

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"/>

执行错误，返回了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>

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

常用：

	<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"/>

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"/>

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">

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

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

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

	<script type="text/javascript">
		window.onload=function(){
			document.getElementById("username").onkeydown=function(event){
				if(event.keyCode === 13){
						alert("正在验证......");
				}
			}
		}
	</script>
	<input type="text" id="username">

7.6、JS运算符

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

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

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

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>

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

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

8.DOM

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

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

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"/>

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">

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

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

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="<font color='red'>用户名不能为空！！</font>";
            }
        }
    </script>
    <input type="button" value="设置div中的内容" id="btn">
    <div id="div1"></div>
</body>
</html>

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(用户填写的字符串);

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>

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>

低版本的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>

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>

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>

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>

换一种写法，使用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>

8.7、内置支持类

8.7.1、获取日期（Date）

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

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("<br>");//换行
document.write("今天是这个周的第"+dayOfWeek+"天");

通过结合按钮框，一点击就显示有系统时间
系统开始时间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>

8.7.2、数组内置类

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

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

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

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

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

//遍历
for(var i=0;i<arr2.length;i++){
	document.write(arr2[i]+" ");
}

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

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);

数组相关的方法：
连接字符串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"

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')"/>

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

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

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

9.2、弹出框

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

弹出消息框

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

弹出确认框

<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()"/>

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)"/>

9.4、设置地址栏的url

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

或者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()"/>

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);

数组遍历

//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);
}

JSON的代码格式为：

var jsonObj={
	"属性名":"属性值",
	"属性名":"属性值",
	"属性名":"属性值",
	"属性名":"属性值",
	"属性名":"属性值",
	......
};

对比：
之前没有使用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);

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);

代码示例：
自行设计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);
}

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"]);

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>条数

本身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},
	]
};

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

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

完整代码演示

<!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+="</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>
		<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>

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 ↩︎

Jm呀

关注

12
点赞
踩
2

收藏

觉得还不错? 一键收藏
打赏
0
评论
JavaScript学习笔记

JavaScript是运行在浏览器上的脚本语言。简称JS。JavaScript这个名字带有"Java"但是和Java没有关系，只是语法上有点类似。他们运行的位置不同。Java运行在JVM中，JavaScript运行在浏览器的内存当中。JavaScript程序不需要手动编译，编写完源码之后，浏览器直接打开解释执行。JavaScript的"目标程序"以普通文本形式保存，这种语言都叫做"脚本语言"。Java的"目标程序"已.class形式存在，不能使用文本编译器打开，不是脚本语言。...............
复制链接

扫一扫