Web入门学习笔记

lskj

已于 2024-07-08 21:22:28 修改

阅读量589

点赞数 28

分类专栏：前端文章标签： web

于 2024-07-08 08:04:10 首次发布

本文链接：https://blog.csdn.net/weixin_45563821/article/details/140250347

版权

前端专栏收录该内容

4 篇文章 0 订阅

订阅专栏

学习视频链接：HTML/CSS/JavaScript

一、网页的组成部分

页面由三部分内容组成：分别是内容（结构）、表现、行为。

内容：我们在页面中可以看到的数据。

表现：指的是内容在页面上的展示形式。例如布局，大小，颜色等等。

行为：指的是页面中的元素与输入设备交互的响应。一般使用JavaScript技术实现。

二、HTML

HTML（Hyper Text Marked Language）超文本标记语言。

网页文件本身是一种文本文件，通过在文本文件中添加标记符，可以告诉浏览器如何显示其中的内容。例如图片如何显示。

1、HTML标签

（1）标签的格式：
	<标签名>封装的数据</标签名>
（2）标签名的大小写不敏感。
（3）标签拥有自己的属性。
	I.基本属性：可以修改简单的样式效果。
	II.时间属性：可以直接设置事件响应后的代码。
（4）标签分为单标签、双标签。
	I.单标签格式：<标签名 />
	II.双标签格式：<标签名>...</标签名>

（1）标签不能交叉嵌套。
（2）标签必须正确关闭。
（3）属性必须有值，属性值必须加引号。
（4）注释不能嵌套。
html代码不是很严谨，有时候标签不闭合，也不会报错。

2、常用特殊字符

显示效果	描述	实体名称
	空格	` `
<	小于	`<`
>	大于	`>`
&	和	`&`
"	双引号	`"`
’	单引号	`'`
✖	乘	`×`
➗	除	`&divdide;`

3、常用标签

<!--标题字：是HTML预留的格式
	align属性是对其属性（left、center、right），默认左对齐。
-->
	<h1 align="left">一级标题</h1>
	...
	<h6></h6>
<!--字体标签-->
	<font color="blue" face="黑体" size="6">字体标签</font>
	<del>删除字</del>
	<ins>插入字</ins>
	<b>粗体字</b>
	<i>斜体字</i>
<!--横线，独目标记-->
	<hr color="red" width="50%">
<!--换行，独目标记-->
	<br>
<!--预留格式（不改变格式）-->
	<pre>
		for(int i = 0; i < 10; i++){
			System.out.println("i = " + i);
		}
	</pre>
<!--上标、下标-->
	10<sup>2</sup>
	10<sub>m</sub>

3-1 列表

无序列表：<ul> 标签定义无序列表。

有序列表：<ol> 标签定义有序列表。

<li> 标签定义列表项目。<li> 标签可用在有序列表 <ol> 和无序列表<ul> 中。

type规定列表的项目符号的类型.
	type="disc" 
		disc-->●
		square-->■
		circle-->O
	type="a" type值也可自定义

<!--无序列表-->
<ul>
    <li>a
        <ui>
            <li>1</li>
            <li>2</li>
            <li>3</li>
        </ui>
    </li>
    <li>b</li>
    <li>c</li>
</ul>
<!--有序列表-->
<ol>
    <li>1
        <ui>
            <li>a</li>
            <li>b</li>
            <li>c</li>
        </ui>
    </li>
    <li>2</li>
    <li>3</li>
</ol>

3-2 表格

<table border="1px" align="center" width="50%" height="50%">
    <tr>
        <td>姓名</td>
        <td>学号</td>
    </tr>
    <tr>
        <td>张三</td>
        <td>2020</td>
    </tr>
</table>

<!--单元格合并以及th标签-->
<!--
	合并行（row）：rowspan=""，合并时删除下面的单元格。
	合并列（column）：colspan=""，合并时对删除没要求。
	colspan 属性设置跨列
	rowspan 属性设置跨行
th 标签也是单元格标签，与 td 不同的是多了居中、加粗，一般用于表格的首行。
-->
<table border="1px"  width="50%" height="50%">
    <tr>
        <th>序号</th>
        <th>姓名</th>
        <th>成绩</th>
    </tr>
    <tr>
        <td>01</td>
        <td>张三</td>
        <td rowspan="2">90</td>
    </tr>
    <tr>
        <td>02</td>
        <td>李四</td>
        <!--
		<td>90</td>
		-->
    </tr>
    <tr>
        <td>03</td>
        <td>王五</td>
        <td>89</td>
    </tr>
</table>

	thead tbody tfoot 在table中不是必须的，只是这样做便于后期的JS代码的编写。
	thead元素用于对HTML表格中的表头内容进行分组；<tbody>标签表格主体（正文），该标签用于组合HTML表格的主体内容；tfoot元素用于对HTML表格中的表注（页脚）内容进行分组。
	使用thead、tfoot以及tbody元素，必须使用全部的元素。它们的出现次序是：thead、tfoot、tbody。

3-3 超链接

<a>标签定义超链接，用于从一张页面链接到另一张页面。

href：hot references 热引用.

href后面的路径可以是绝对路径也可以是相对路径，可以是网络中某个资源的路径，也可以是本地资源的路径。

通过超链接可以从浏览器向服务器发送请求。
浏览器向服务器发送数据（请求：request）
服务器向浏览器发送数据（响应：response）

<!--超链接
	href属性：设置连接的地址
	target属性：设置在什么页面打开连接
		_self：当前窗口（默认）
		_blank：新窗口
        _top：顶级窗口
		_parent：父窗口
-->

3-4 img标签

<img>标签有两个必需的属性：src 属性和 alt 属性。

src属性是图片的路径；alt设置图片加载失败时显示的提示信息。

<img src="img/image.png" width="100px" title="我是图片哦" alt="图片找不到哦!"/>

<img src="img/image.png" width="100px" title="我是图片哦" alt="图片找不到哦!"></img>

3-5 iframe

iframe可以在一个html页面上打开一个下窗口，加载一个单独的页面。

iframe和a标签组合使用：
	1、在iframe标签中使用name属性定义一个名称。
	2、在a标签的target属性上设置iframe的name的属性值。

<!--iframe标签可以在页面上开辟一个小区域显示一个单独的页面-->
<html>
    <head>
        <meta chareset="UTF-8">
        <title>iframe标签</title>
    </head>
    <body>
        单独的页面<br>
        <iframe src="test01.html" width="500" height="400" name="iframe"></iframe>
        <br>
        <ul>
            <li><a href="test01.html" target="iframt">test01.html</a></li>
            <li><a href="test02.html" target="iframe">test02.html</a></li>
        </ul>
    </body>
</html>

<html>
    <head>
        <meta charset="UTF-8">
        <title>test01.html</title>
    </head>
    <body>
        <h1 align="center">test01页面</h1>
        <br>
        <font color="red" face="宋体" size="5">This is a test page.</font>
    </body>
</html>

<html>
    <head>
        <meta charset="UTF-8">
        <title>test02.html</title>
    </head>
    <body>
        <h1 font-size="50%" align="center">test02页面</h1>
        <br>
        <table border="1px" width="50%" height="50%">
            <tr>
                <th>序号</th>
                <th>姓名</th>
            </tr>
            <tr>
                <td>01</td>
                <td>a</td>
            </tr>
            <tr>
                <td>02</td>
                <td>b</td>
            </tr>
        </table>
    </body>
</html>

3-6 表单

1、表单有什么用？
	收集用户信息。表单展现之后，用户填写表单，点击提交按钮提交数据给服务器。
2、怎么画一个表单？
	使用form标签画表单。
3、一个网页当中可以有多个表单form。
4、表单最终是需要提交数据给服务器的，form标签有一个action属性，这个属性用来指定服务器地址：
	action属性用来指定数据提交给哪个服务器。
	action属性和超链接中的href属性一样。都可以向服务器发送请求（request）

表单是以什么格式提交数据给服务器的？
	http://localhost:8080/jd/login?username=zhangsan&userpwd=123
	格式：action?name=value&name=value&name=value&name=value&name=value...
	W3C的HTTP协议规定的，必须以这种格式提交给服务器。

type="text"是文件输入框  value设置默认显示内容
type="password" 是密码输入框  value设置默认显示内容
type="radio"    是单选框    name属性可以对其进行分组   checked="checked"表示默认选中
type="checkbox" 是复选框   checked="checked"表示默认选中
type="reset"    是重置按钮      value属性修改按钮上的文本
type="submit"   是提交按钮      value属性修改按钮上的文本
type="button"   是按钮          value属性修改按钮上的文本
type="file"     是文件上传域
type="hidden"   是隐藏域   当我们要发送某些信息，而这些信息，不需要用户参与，就可以使用隐藏域（提交的时候同时发送给服务器）

select 标签是下拉列表框
	multiple="multiple"支持多选，size设置显示条目数量
option 标签是下拉列表框中的选项 selected="selected"设置默认选中
textarea 表示多行文本输入框 （起始标签和结束标签中的内容是默认值）
       rows 属性设置可以显示几行的高度
       cols 属性设置每行可以显示几个字符宽度

<!--创建一个个人信息注册的表单界面-->
<form action="http://localhost:8080" method="post">
    <input type="hidden" name="action" value="login" />
    <h1 align="center">用户注册</h1>
    <table align="center">
        <tr>
            <td>用户名称：</td>
            <td>
                <input type="text" name="username" />
            </td>
        </tr>
        <tr>
            <td>用户密码：</td>
            <td>
                <input type="password" name="userpwd" />
            </td>
        </tr>
        <tr>
            <td>确认密码：</td>
            <td>
                <input type="password" />
            </td>
        </tr>
        <tr>
            <td>性别：</td>
            <td>
                <input type="radio" name="sex" value="boy" checked="checked" />男
	    		<input type="radio" name="sex" value="girl" />女
            </td>
        </tr>
        <tr>
            <td>兴趣爱好：</td>
            <td>
                <input type="checkbox" name="interset" value="Java" checked="checked" />Java
	    		<input type="checkbox" name="interest" value="C" />C
	    		<input type="checkbox" name="interset" value="Python" />Python
            </td>
        </tr>
        <tr>
            <td>学历：</td>
            <td>
                <select name="education">
	        		<option value="highSchool">高中</option>
	        		<option value="specialty">专科</option>
	        		<option value="bachelor" selected="selected">本科</option>
	        		<option value="master">硕士</option>
	        		<option value="doctor">博士</option>
	    		</select>
            </td>
        </tr>
        <tr>
            <td>自我评价：</td>
            <td>
                <textarea rows="10" cols="20" name="self-evaluation"></textarea>
            </td>
        </tr>
        <tr>
            <td align="left">
                <input type="reset" />
            </td>
            <td align="right">
                <input type="submit" />
            </td>
        </tr>
    </table>
</form>

action属性设置提交的服务器地址
method属性：
	get:采用get方式提交的时候，用户提交的信息会显示在浏览器的地址栏上。
	post：采用post方式提交的时候，用户提交的信息不会显示在浏览器地址栏上。
			当用户提交的信息中含有敏感信息，例如：密码，建议采用post方式提交。		
		method属性不指定，或者指定get，这种情况下都是get。
		只有当method属性指定为post的时候才是post请求。剩下所有的请求都是get请求。
        
		post提交的时候提交的数据格式和get还是一样的，只不过不再地址栏上显示出来。
		POST提交的数据还是：name=value&name=value&name=value.....

表单提交的时候，数据没有发送给服务器的三种情况：
1、表单项没有name属性值
2、单选、复选（下拉列表中的option标签）都需要添加value属性，以便发送给服务器
3、表单项不在提交的form标签中

表单项写了name属性的，一律会提交给服务器。不想提交这一项，就不要写name属性。

文本框和密码框的value不需要程序员指定，用户输入什么value就是什么。

当name没有写的时候，该项不会提交给服务器。但是当value没有写的时候，value的默认值是空字符串""，会将空字符串提交给服务器。

<!--
readonly和disable：
	readonlu和disable都是只读不能更改。
	但是readonly可以提交给服务器，disable数据不会提交（即使有name属性也不会提交）
-->
<form action="http://localhost:8080">
    用户编号：<input type="text" name="userid" value="001" readonly />
    <br>
    用户名称：<input type="text" name="username" value="zhangsan" disable />
    <br>
    <input type="submit" value="提交数据" />
</form>

maxlength设置文本框中可输入的字符数量。

<input type="text" maxlength="3" />

4、HTML中的元素的id属性

在HTML文档中，任何元素（节点）都有id属性，id属性是该结点的唯一标识。所以在同一个HTML文档中id值不能重复。

表单提交数据时，只和name有关系，和id无关。

JavaScript可以对HTML文档中的任意节点进行增删改操作，增删改之前需要先拿到这个节点，通常通过id来拿节点对象。

HTML文档是一棵树，树上有很多节点，每一个节点都有唯一的id。JavaScript只要是对这棵DOM树上的节点进行增删改。DOM（document）树。

5、div、span和p标签

div和span相当于图层（盒子），可以保证页面的灵活布局。并且两者是可以定位的，只要定下其左上角的x和y的坐标。

div标签默认独占一行。

span标签的长度是封装数据的长度（<span>封装的数据</span>）。

p标签（段落标签）默认在段落的上方或下方个空出一行。（如果已经有，就不会再空）

<div id="div1">这是一个div</div>
<div id="div2">
    <div>
        <div>这里有一个嵌套div</div>
    </div>
</div>

<span id="span">这是一个span</span>

三、CSS

层叠样式表(Cascading Style Sheets)是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。

CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。

CSS能够对网页中元素位置的排版进行像素级精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力。

1、HTML引入CSS样式

1-1、第一种方式

在标签内部使用style属性来设置元素的css样式，这种方式称为内联定义方式。
语法格式

<标签 style="样式名:样式值;样式名:样式值;样式名:样式值;..."></标签>

1-2、第二种方式

在head标签中使用style块，这种方式被称为样式块方式。
语法格式

<head>
	<style type="text/css">
		选择器{
			样式名:样式值;
			样式名:样式值;
			...
		}
		选择器{
			样式名:样式值;
			样式名:样式值;
			...
		}
	</style>
</head>

1-3、第三种方式

链入外部样式表文件，这种方式最常用。

将样式写到一个独立的xxx.css文件当中，在需要的网页上直接引入css文件，样式就引入了。
语法格式

<link type="text/css" rel="stylesheet" href="css文件的路径" />

这种方式易维护，维护成本较低。

2、CSS选择器

2-1、标签名选择器

标签名选择器格式

标签名{
	属性:值;
}

2-2、id选择器

id选择器格式

#id属性值{
	属性:值;
}

2-3、class（类）选择器

.class属性值{
	属性:值;
}

2-4、组合选择器

选择器1,选择器2,选择3,...{
	属性:值;
}

组合选择器可以让多个选择器共用一个css样式代码。

3、常用样式

字体颜色：
	color:red;
	值可以是颜色英文名，也可以是rgb值或十六进制表示值。如：rgb(255,0,0)，#F5F5DC（十六进制必须加#）
宽、高度：
	width:1px;
	height:20%;
	值可以是像素值，也可以是百分比值。
背景颜色：
	background-color:#FFFFF0;
字体样式：
	color:#FFFFF0;
	font-size:16px;
实现边框：
	border:1px solid red;
div居中：
	margin-left:auto;
	margin-right:auto;
文本居中：
	text-align:center;
超链接去除下划线：
	text-decoration:none;
首行缩进2字符：
	text-indent: 2em;
行高：
	line-height: 20px;
表格细线：
	table{
		border:1px soild black;  //设置边框
		border-collapse:collapse;  //将边框合并
	}
	td,th{
		border:1px solid black;
	}
列表去除修饰：
	ul{
		list-style:none;
	}

四、JavaScript

JavaScript是运行在浏览器上的脚本语言，简称JS。由网景公司（NetScape）的布兰登艾奇开发的。最初叫做LiveScript。

1、交互性（它可以做的就是信息的动态交互）
2、安全性（不允许直接访问本地硬盘）
3、跨平台性（只要是可以解释JS的浏览器都可以执行，和平台无关）

JS是弱类型（类型可变）语言，Java是强类型（类型确定，不可变）语言。

JS是一门事件驱动型的编程语言，依靠事件去驱动，然后执行对应的程序。

1、HTML中嵌入JavaScript

1-1、第一种方式

标签中加事件句柄。

1、使用js代码弹出消息框
	window对象有一个函数:alert，用法:wondow.alert("消息");这样就可以弹窗了
2、js中的字符串可以是双引号，也可以是单引号
3、js中一条语句结束之后可以使用分号，也可以不使用
4、事件与事件句柄的区别：
	事件句柄是在时间的前面加上on，事件句柄以HTML的标签属性存在。

<input type="button"  value="点击按钮" onclick="window.alert('hello world!')" />
<!--window可以省略不写-->
<input type="button"  value="点击按钮" onclick="alert('hello world!')" />

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

1-2、第二种方式

脚本块的方式。在一个页面当中可以出现多次。没有要求。脚本块出现位置也没有要求，随意。

/*
	暴露在脚本块当中的程序，在页面打开的时候执行，并且遵守自上而下的顺序依次逐行执行。（这个代码的执行不需要事件）
			*/
<script type="text/javascript">
    //alert有阻塞当前页面加载的作用。（阻挡，直到用户点击确定按钮。）
    window.alert("hello world!")
</script>

1-3、第三种方式

引入外部独立的JS文件。

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

<!--引入外部独立的js文件时，在<script></script>之间写的代码不会执行-->

2、变量的声明与赋值

声明变量：
	var 变量名;
变量赋值：
	变量名 = 值;
javascript是一种弱类型语言，没有编译阶段，一个变量可以随意赋值，赋什么类型的值都行。

在JS当中,当一个变量没有手动赋值的时候,系统默认赋值undefined

undefined 在JS中是一个具体存在值。

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

当一个变量声明时，没有使用var关键字，无论这个变量在哪里声明的都是全局变量。

3、函数的定义与调用

函数的定义：
	function 函数名(形参列表){
		函数体
	}
	
	var 函数名 = function(形参列表){
		函数体
	}

函数必须调用才能执行。

<script type="text/javascript">
    /*
    	函数的定义与调用
    */
    function sayHello(username){
        alert("hello "+username)
    }
    var sum = function(a,b){
        return a+b;
    }
    //调用函数
    sayHello("test");
    var retValue = sum(1,2);
    alert(retValue);
</script>

Java中有重载机制，在JavaScript中函数的重载会直接覆盖上一次的定义。

即在JS当中，函数的名字不能重名，当函数重名的时候，后声明的函数会将之前声明的同名函数覆盖。

4、数据类型

原始类型：
	ES6版本之前：Undefined、Number、String、Boolean、Null
引用类型：Object以及Object的子类
	ES规范（ECMAScript规范），在ES6之后，又基于以上的6种类型之外添加了一种新的类型：Symbol

JS中有一个运算符叫做typeof，这个运算符可以在程序的运行阶段动态的获取变量的数据类型。

typeof运算符的语法格式：
    typeof 变量名
typeof运算符的运算结果是6个字符串之一："undefined"、"number"、"string"、"boolean"、"object"、"function"。

字符串全部都是小写。null属于Null类型，但是typeof运算符的结果是"object"。

4-1、Undefined

Undefined类型只有一个值，这个值就是 undefined。当一个变量没有手动赋值，系统默认赋值undefined。或者也可以给一个变量手动赋值undefined。

var i;  //undefined-->Undefined
var j = undefined;  //undefined-->Undefined
var k = "undefined";  //"undefined"-->String

4-2、Number

数值类型：包括整数、小数、正数、负数、NaN（Not a Number不是数字）、Infinity（无穷大）。

运算结果应该是一个数字，最后算完不是一个数字，但是运算的过程中导致最后不是一个数字，结果是NaN。

var a = 1;
var b = "字符串";
alert(a/b);  //NaN

当除数为0的时候，结果为无穷大。

alert(1/0);  //Infinity

isNaN函数：
	用法：isNaN(数据)，结果是true表示不是一个数字，结果是false表示是一个数字。
pareInt()函数：可以将字符串自动转换成数字，并且取整。
	alert(parseInt("3.14159"));   //3
pareFloat()函数：可以将字符串自动转换成数字。
	alert(parseFloat("3.14159"));  //3.14159
Math.ceil()函数：向上取整。
	alert(Math.ceil("3.1"));  //4

4-3、Boolean

JS中的布尔类型，只有两个值：true和false。

Boolean()函数：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

4-4、String

在JS当中比较字符串是否相等使用“==”完成。

1、在JS中字符串可以使用单引号，也可以使用双引号。
	var s1 = 'test';
	var s2 = "test";
2、在JS当中，怎么创建字符串对象呢？
    两种方式：
    第一种：var s = "abc";    //"string"
    第二种（使用JS内置的支持类String）： var s2 = new String("abc");   //String-->属于Object
    需要注意的是：String是一个内置的类，可以直接用，String的父类是Object。
3、无论小string还是大String，它们的属性和函数都是通用的。
4、关于String类型的常用属性和函数？
    常用属性：
    length 获取字符串长度
    常用函数：
    indexOf			获取指定字符串在当前字符串中第一次出现处的索引
    lastIndexOf		获取指定字符串在当前字符串中最后一次出现处的索引
    replace			替换
    substr			截取子字符串，substr(startIndex,length)
    substring		截取子字符串，subString(startIndex.endIndex)，不包含endIndex
    toLowerCase		转换小写
    toUpperCase		转换大写
    split			拆分字符串
    trim			去除字符串的前后空白。

4-5、Object

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

Object类属性：
	prototype属性：给类动态的扩展属性和函数。
	constructor属性
Object类函数：
	toString()
	valueOf()
	toLocaleString()
在JS中定义的类默认继承Object，会继承Object类中的所有属性以及函数。

JS中定义类，以及创建对象：
	定义类：
		function 类名(形参){
		
		}
		
		类名 = function(形参){
		
		}
	创建对象：
		new 构造方法名(实参);   //构造方法名和类名一致。

<script type="text/javascript">
    // JS中的类的定义,同时又是一个构造函数的定义
    // 在JS中类的定义和构造函数的定义是放在一起来完成的.
    function User(sno, sname, sage){ //sno sname sage是形参,属于局部变量.
        // 声明属性 (this表示当前对象)
        // User类中有三个属性:sno/sname/sage
        this.sno = sno;
        this.sname = sname;
        this.sage = sage;
    }

    // 创建对象
    var u = new User(10001, "zhangsan", 19);
    // 访问对象的属性
    alert(u.sno);
    alert(u.sname);
    alert(u.sage);
    //通过prototype属性给User类动态扩展 函数
    User.prototype.getSname = function(){
        return this.sname;
    }
    //调用扩展的函数
    var retValue  = u.getSname();
    alert("sname = "+retValue);

    //通过prototype属性给User类动态扩展 属性
    User.prototype.sgrade = null;

    User.prototype.getSgrade = function(){
        return this.sgrade;
    }
    //给扩展的属性赋值
    u.sgrade = 90;

    retValue  = u.getSgrade();
    alert("sgrade = "+retValue);
</script>

4-6、null、NaN、undefined

三者数据类型不一样。

null—>“object”

NaN—>“number”

undefined—>“undefined”

在JS中有两个比较特殊的运算符
	==（等同运算符：只判断值是否相等）
	===（全等运算符：即判断是否相等。又判断数据类型是否相等）
alert(null == NaN);   //false
alert(null == undefined);  //true
alert(NaN == undefined);  //false

alert(null === NaN); //false
alert(null === undefined);  //false
alert(NaN === undefined);  //false

5、JS中的事件

blur失去焦点
focus获得焦点

click鼠标单击
dbclick鼠标双击

keydown键盘按下
keyup键盘弹起

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

reset表单重置
submit表单提交

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

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

事件注册：
	静态注册事件：
		直接在标签中使用事件句柄。
		通过html标签的事件属性直接赋于事件响应后的代码，这种方式我们叫静态注册。
			<input type="button" value="点击按钮" onclick="alert("hello!")" />
	动态注册事件：
		使用JS代码完成时间的注册。
		先通过js代码得到标签的dom对象，然后再通过dom对象.事件名 = function(){} 这种形式赋于事件响应后的代码，叫动态注册。
		动态注册基本步骤：
			1、获取标签对象
			2、标签对象.事件名 = fucntion(){}

<!--script脚本块中的代码会在页面打开时按照自上而下的顺序执行-->
<!--若把input标签置于script脚本块后面，则会报错btn is null，因为代码执行到获取按钮对象时id="btn"的元素还没有加载到内存-->
<input type="button" value="点击按钮" id="btn" />
<script type="text/javascript">
    function test(){
        alert("Test!");
    }
    //1、先获取这个按钮对象（document是全部小写，内置对象，可以直接使用，document就代表整个HTML页面。）
    var btnObj = document.getElementById("btn");
    //2、给按钮对象的onclick属性赋值
    btn.onclick = test; // 注意:千万别加小括号. btn.onclick = test();这是错误的写法。
    
</script>

因为load事件是在页面全部元素加载完毕之后才会发生。

所以可以使用load事件解决以上btn is null问题。

<script type="text/javascript">
    window.onload = function(){
        document.getElementById("btn").onclick = functoin(){
            alert("Test!");
        }
    }
</script>
<input type="button" value="点击按钮" id="btn" />

6、JS捕捉回车键

<script type="text/javascript">
    window.onload = function(){
        var usernameElt = document.getElementById("username");
        //回车键键值13，ESC键键值27
        usernameElt.onkeydown = function(event){
            //获取键值
            //对于“键盘事件对象”来说，都有keyCode属性用来获取键值。
            //alert(event.keyCode);
            if(event.keyCode === 13){
                alert("正在进行验证用户名...");
            }
        }
    }
</script>
用户名：<input type="text" id="username" />

7、void运算符

void运算符的语法：void(表达式)

运算原理：执行表达式，但不返回任何结果。

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

8、数组、控制语句

JS中数组的定义格式：
	var 数组名 = []; // 空数
	var 数组名 = [1,'abc',true];     // 定义数组同时赋值
JS中数组中元素的类型随意.元素的个数随意。
JS中的数组可以自动模拟栈数据结构：后进先出，先进后出原则。（push压栈，pop弹栈）

控制语句：
	if	switch
	while	do..while	for循环
	break	continue
	（了解）for..in		with语句

<script type="text/javascript">
    //创建JS数组
    var arr = [false,true,100,"abc",3.14159];
    //遍历数组
    for(var i = 0;i < arr.length;i++){
        alert(arr[i]);
    }
    //for..in
    for(var i in arr){
        alert(arr[i]);
    }
    
    // for..in语句可以遍历对象的属性
    User = function(username,password){
        this.username = username;
        this.password = password;
    }

    var u = new User("张三", "444");
    alert(u.username + "," + u.password);
    alert(u["username"] + "," + u["password"]);

    for(var i in u){
        //alert(i)
        //alert(typeof i) // i是一个字符串
        alert(u[i]);
    }
</script>

9、DOM编程

1、JavaScript包括三大块：
	ECMAScript：JS的核心语法（ES规范/ECMA-262标准）
	DOM：Document Object Model（文档对象模型：对网页当中的节点进行增删改的过程。）HTML文档被当作一棵DOM树来看待。
	BOM：Browser Object Model（浏览器对象模型）
		关闭浏览器窗口、打开一个新的浏览器窗口、后退、前进、浏览器地址栏上的地址等，都是BOM编程。
2、DOM和BOM的区别与联系：
	BOM的顶级对象是：window
	DOM的顶级对象是：document
	实际上BOM是包括DOM的。

在这里插入图片描述

9-1、获取文本框的value

<script type="text/javascript">
    window.onload = function(){
        var btnElm = document.getElementById("btn");
        btn.onclick = function(){
            //获取username节点
            var usernameEle = document.getElementById("username");
            var username = usernameEle.value;
            alert(username);
            //alert(document.getElementById("username").value);
            //修改value
            document.getElementById("username").value = "Lucy";
        }
    }
</script>
<input type="text" id="username" />
<input type="button" value="获取文本框的value" id="btn" />

9-2、innerHTML和innerText操作div和span

innerHTML与innerText属性的区别：
	相同点：都是设置元素内部的内容。
	不同点：
		innerHTML会把后面的“字符串”当作一段HTML代码解释并执行。
		innerText，即使后面是一段HTML代码，也只是将其当作普通字符串来看待。

<html>
    <head>
        <meta charset="UTF-8">
        <title>innerHTML和innerText</title>
        <style type="text/css">
            #div{
                background-color:#FFFACD;
                width:300px;
                height:300px;
                border:1px black solid;
                position:absolute;
                top:100px;
                left:100px;
            }
        </style>
    </head>
    <body>
        <script type="text/javascript" >
            window.onload  = function(){
                var btn = document.getElementById("btn");
                btn.onclick = function(){
                    //设置div的内容
                    //1、获取div对象
                    var divElt = document.getElementById("div");
                    //2、使用innerHTML属性来设置元素内部的内容
                    divElt.innerHTML = "这是innerHTML测试的文字！";
                    divElt.innerHTML = "<font color='red'>颜色为红色的文字</font>";
                    //使用innerText属性设置元素内部的内容
                    divElt.innerText = "这是innerText测试的文字！";
                    divElt.innerText = "<font color='red'>innerText内容</font>";
                }
            }
        </script>
        <div id="div"></div>
        <input type="button" value="设置div中的内容" id="btn" />
    </body>
</html>

9-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个字符。

    | 表示或者

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

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

正则表达式对象的test()方法？
true / false = 正则表达式对象.test(用户填写的字符串);
true : 字符串格式匹配成功
false: 字符串格式匹配失败

常用正则表达式：
    整数或者小数：^[0-9]+\.{0,1}[0-9]{0,2}$
    只能输入数字：”^[0-9]*$”
    只能输入n位的数字：”^\d{n}$”
    只能输入至少n位的数字：”^\d{n,}$”
    只能输入m~n位的数字：”^\d{m,n}$”
    只能输入零和非零开头的数字：”^(0|[1-9][0-9]*)$”。
    只能输入有两位小数的正实数：”^[0-9]+(.[0-9]{2})?$”。
    只能输入有1~3位小数的正实数：”^[0-9]+(.[0-9]{1,3})?$”。
    只能输入非零的正整数：”^\+?[1-9][0-9]*$”。
    只能输入非零的负整数：”^\-[1-9][]0-9″*$。
    只能输入长度为3的字符：”^.{3}$”。
    只能输入由26个英文字母组成的字符串：”^[A-Za-z]+$”。
    只能输入由26个大写英文字母组成的字符串：”^[A-Z]+$”。
    只能输入由26个小写英文字母组成的字符串：”^[a-z]+$”。
    只能输入由数字和26个英文字母组成的字符串：”^[A-Za-z0-9]+$”。
    只能输入由数字、26个英文字母或者下划线组成的字符串：”^\w+$”。
    验证身份证号（15位或18位数字）：”^\d{15}|\d{18}$”。
    验证用户密码：”^[a-zA-Z]\w{5,17}$”
    只能输入汉字：”^[\u4e00-\u9fa5]{0,}$”
    验证Email地址：”^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$”。
    验证InternetURL：”^http://([\w-]+\.)+[\w-]+(/[\w-./?%&=]*)?$”。
    验证电话号码：”^(\(\d{3,4}-)|\d{3.4}-)?\d{7,8}$”

<script type="text/javascript">
    window.onload = function(){
        document.getElementById("btn").onclick = function(){
            var email = document.getElementById("eamil").value;
            var emailRegExp  = /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/;
            if(emailRegExp.test(email)){
            	document.getElementById("emailMsg").innerHTML = "<font color='green'>√</font>";
            }else{
                document.getElementById("emailMsg").innerText = "×";
            }
        }
        document.getElementById("email").onfocus = function(){
            document.getElementById("emailMsg").innerText = "";
        }
    }
</script>
<input type="text" id="email" />
<span id="emailMsg" style="color:red;font-size:12px;"></span>
<br>
<input type="button" value="校验邮箱" id="btn" />

9-4、表单验证

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>test</title>
		<style type="text/css">
			span{
				color: #FF0000;
				font-size: 16px;
			}
		</style>
	</head>
	<body>
		<script type="text/javascript">
		    window.onload = function(){
				var usernameElt = document.getElementById("username");
				var nameSpan = document.getElementById("nameMsg");
				//username失去焦点
				usernameElt.onblur = function(){
					var username = usernameElt.value;
					username = username.trim();
					//判断用户名是否为空
					if(username.length == 0){
						nameSpan.innerText = "× 用户名不能为空！";
					}
			    }
				//username获得焦点
				usernameElt.onfocus = function(){
					if(nameSpan.innerText != ""){
						usernameElt.value = "";
					}
					nameSpan.innerText = "";
				}
				//userpwd失去焦点
				var userpwdElt = document.getElementById("userpwd");
				var pwdSpan = document.getElementById("pwdMsg");
				userpwdElt.onblur = function(){
					var pwd = /^[a-zA-Z]\w{5,17}$/;
					var userpwd = userpwdElt.value;
					if(!(pwd.test(userpwd))){
						pwdSpan.innerText = "× 密码以字母开头，长度在6~18之间，只能包含字母、数字和下划线";
					}
				}
				//userpwd获得焦点
				userpwdElt.onfocus = function(){
					if(pwdSpan.innerText != ""){
						userpwdElt.value = "";
					}
					pwdSpan.innerText = "";
				}
				//confirmPwd失去焦点
				var confirmPwdElt = document.getElementById("confirmPwd");
				var confirmSpan = document.getElementById("confirmPwdMsg");
				confirmPwdElt.onblur = function(){
					var confirmPwd = confirmPwdElt.value;
					if(confirmPwd != document.getElementById("userpwd").value){
						confirmSpan.innerText = "× 两次输入密码不一致！";
					}
				}
				//confirmPwd获得焦点
				confirmPwdElt.onfocus = function(){
					if(confirmSpan.innerText != ""){
						confirmPwdElt.value = "";
					}
					confirmSpan.innerText = "";
				}
				
				//重置
				document.getElementById("reset").onclick = function(){
					nameSpan.innerText = "";
					pwdSpan.innerText = "";
					confirmSpan.innerText = "";
				}
				//注册
				document.getElementById("registerBtn").onclick = function(){
					usernameElt.focus();
					usernameElt.blur();
					
					userpwdElt.focus();
					userpwdElt.blur();
					
					confirmPwdElt.focus();
					confirmPwdElt.blur();
					if( nameSpan.innerText == "" && pwdSpan.innerText == "" && confirmSpan.innerText == ""){
						var form = document.getElementById("myform");
						form.submit();
					}else{
						alert("请正确填入相关信息完成注册！");
						nameSpan.innerText = "";
						pwdSpan.innerText = "";
						confirmSpan.innerText = "";
						usernameElt.value = "";
						userpwdElt.value = "";
						confirmPwdElt.value = "";
					}
				}
		   }
		</script>
		<form action:"localhost:8080" method="post" id="myform">
			<div align="center" >注册用户</div>
			<br>
			<table align="center">
				<tr>
					<td>
						用户名称：
					</td>
					<td>
						<input type="text" id="username" name="username"/>
					</td>
					<td>
						<span id="nameMsg"></span>
					</td>
				</tr>
				<tr>
					<td>
						用户密码：
					</td>
					<td>
						<input type="password" id="userpwd" name="userpwd"/>
					</td>
					<td>
						<span id="pwdMsg"></span>
					</td>
				</tr>
				<tr>
					<td>
						确认密码：
					</td>
					<td>
						<input type="password" id="confirmPwd" />
					</td>
					<td>
						<span id="confirmPwdMsg" ></span>
					</td>
				</tr>
				<tr>
					<td align="center">
						<input type="reset" value="重置" id="reset" />
					</td>
					<td align="center">
						<input type="button" value="注册" id="registerBtn" />
					</td>
				</tr>
			</table>
		</form>
	</body>
	
</html>

9-5、复选框全选、取消全选

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>test</title>
	</head>
	<body>
		<script type="text/javascript" >
			window.onload = function(){
				//alert(document.getElementById("allBox").checked);
				var allBox = document.getElementById("allBox");
				var checkBox = document.getElementsByName("hobby");
				//alert(checkBox);
				allBox.onclick = function(){
					for(var i = 0;i < checkBox.length;i++){
						//alert(checkBox[i].checked);
						checkBox[i].checked = allBox.checked;
					}
				}
				for(var i = 0;i < checkBox.length;i++){
					//alert("test!"+i);
					checkBox[i].onclick = function(){
						//alert("----"+i);
						var count = 0;
						for(var j = 0; j < i;j++){
							//alert("*****"+j);
							if(checkBox[j].checked){
								count++;
								//alert("true = "+count);
							}
						}
						/* if(checkBox.length == count){
							allBox.checked = true;
						}else{
							allBox.checked = false;
						} */
						allBox.checked = (checkBox.length == count);
					}
				}
			}
		</script>
		<input type="checkbox" id="allBox" /><br>
		<input type="checkbox" name="hobby" value="pingpong" />乒乓球<br>
		<input type="checkbox" name="hobby" value="basketball" />篮球<br>
		<input type="checkbox" name="hobby" value="football" />足球<br>
		<input type="checkbox" name="hobby" value="badminton" />羽毛球<br>
		<input type="checkbox" name="hobby" value="baseball" />棒球<br>
	</body>	
</html>

9-6、获取下拉列表的value

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>test</title>
	</head>
	<body>
		<script type="text/javascript" >
			window.onload = function(){
				document.getElementById("diploma").onchange = function(){
					alert("你选择的学历是："+document.getElementById("diploma").value);
				}
			}
		</script>
		<select id="diploma">
			<option value="">---请选择学历---</option>
			<option value="highschool">高中</option>
			<option value="specialty">专科</option>
			<option value="bachelor">本科</option>
			<option value="master">硕士</option>
			<option value="doctor">博士</option>
		</select>
	</body>	
</html>

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>test</title>
	</head>
	<body>
		<script type="text/javascript" >
			window.onload = function(){
				document.getElementById("diploma").onchange = function(){
					alert("你选择的学历是："+document.getElementById("diploma").value);
				}
			}
		</script>
		<select id="diploma">
			<option value="">---请选择学历---</option>
			<option >高中</option>
			<option >专科</option>
			<option >本科</option>
			<option >硕士</option>
			<option >博士</option>
		</select>
	</body>	
</html>

9-7、网页显示时间

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>test</title>
	</head>
	<body>
		<script type="text/javascript" >
			var displayTime = function(){
				var time = new Date();
				document.getElementById("time").innerText = time.getFullYear()+"年"+(time.getMonth()+1)+"月"+time.getDate()+"日"+time.getHours()+"时"+time.getMinutes()+"分"+time.getSeconds()+"秒";
			}
			function display(){
				s = window.setInterval("displayTime()",1000);
				//displayTime();
			}
			function stop(){
				window.clearInterval(s);
				document.getElementById("time").innerText = "";
			}
		</script>
		<span id="time" ></span><br>
		<input type="button" value="显示时间" onclick="display()" />
		<input type="button" value="停止显示" onclick="stop()" />
	</body>	
</html>

10、BOM编程

BOM编程中，window对象是顶级对象，代表浏览器窗口。
	1、open和close方法，可以开启窗口和关闭窗口。
	2、弹出消息框、确认框：
		alert、confirm
	3、history包含浏览器的历史
		history.back() 与在浏览器点击后退按钮相同
		history.forward() 与在浏览器中点击按钮向前相同
		history.go() 负数（如-1）表示后退，其余表示前进
	4、location用于获得当前页面的地址 (URL)，并把浏览器重定向到新的页面。
		location(.href)	返回或修改当前页面的 URL

11、JSON

JavaScript Object Notation（JavaScript对象表示法），简称JSON，是一种轻量级的数据交换格式。

JSON也可以称为无类型对象。轻量级，轻巧。体积小。易解析。

var jsonObj = {
    "属性名" : 属性值,
    "属性名" : 属性值,
    "属性名" : 属性值,
    "属性名" : 属性值,
    ....
};
在JS中，[]是数组，{}是JSON。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>test</title>
	</head>
	<body>
		<script type="text/javascript">
			//创建JSON对象
			var students = {
				_id:1001,
				"name":"张三",
				"sex":"男",
				"major":"计算机"
			};
			//访问JSON对象的属性
			alert(students._id+students.name+students.sex+students.major);
			//创建JSON数组
			var Student = [{_id:1,"name":"王晓丽","age":19,"sex":"女","major":"计算机"},
						  {_id:2,"name":"张明","age":21,"sex":"男","major":"计算机"},
						  {_id:3,"name":"秋雅","age":20,"sex":"女","major":"播音主持"},
						  {_id:4,"name":"张欣欣","age":18,"sex":"女","major":"计算机"},
						  {_id:5,"name":"袁华","age":20,"sex":"男","major":"播音主持"},
						  {_id:6,"name":"马冬梅","age":20,"sex":"女","major":"表演"},
						  {_id:7,"name":"夏洛","age":22,"sex":"男","major":"表演"},
						  {_id:8,"name":"李大春","age":23,"sex":"男","major":"表演"}];
			//遍历JSON数组
			for(var i = 0;i < Student.length;i++){
				var stu = Student[i];
				alert("id："+stu._id+"\n姓名："+stu.name+"\n年龄："+stu.age+"\n性别："+stu.sex+"\n专业："+stu.major);
			}
		</script>
	</body>	
</html>

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>test</title>
	</head>
	<body>
		<script type="text/javascript">
			//创建JSON数组
			var Student = [{_id:1,"name":"王晓丽","age":19,"sex":"女","major":"计算机","hobbies":["跳舞","唱歌","画画"],"address":{"city":"贵阳","area":"观山湖区",}},
						  {_id:2,"name":"张明","age":21,"sex":"男","major":"计算机","hobbies":["打篮球","跑步"],"address":{"city":"贵阳","area":"花溪区",}},
						  {_id:3,"name":"秋雅","age":20,"sex":"女","major":"播音主持","hobbies":["弹琴","刺绣","唱歌"],"address":{"city":"贵阳","area":"南明区",}},
						  {_id:4,"name":"张欣欣","age":18,"sex":"女","major":"计算机","hobbies":["学英语","画画"],"address":{"city":"贵阳","area":"白云区",}}];
			//遍历JSON数组
			for(var i = 0;i < Student.length;i++){
				var stu = Student[i];
				//alert(111);
				//alert(stu.address.city);
			   alert("id："+stu._id+"\n姓名："+stu.name+"\n年龄："+stu.age+"\n性别："+stu.sex+"\n专业："+stu.major+"\n兴趣爱好："+stu.hobbies+"\n地址："+stu.address.city+"市"+stu.address.area);
			}
		</script>
	</body>	
</html>

eval函数：将字符串当作一段JS代码解释并执行。

eval(string)
	string（必需）要计算的字符串，其中含有要计算的 JavaScript 表达式或要执行的语句。

<script type="text/javascript">
    window.eval("var s = '我爱学习！'");
    alert("s = "+s);  //s = 我爱学习！
</script>

Java连接数据库后查询的数据在java程序中拼接成JSON格式的“字符串”，将JSON格式的字符串响应到浏览器。
也就是说Java响应到浏览器上的仅仅是一个JSON格式的字符串，还不是一个JSON对象。使用eval函数将JSON格式的字符串转换成JSON对象。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>test</title>
	</head>
	<body>
		<script type="text/javascript">
			var Student = {
					"total":8,
					"information":[
						  {_id:1,"name":"王晓丽","age":19,"sex":"女","major":"计算机"},
						  {_id:2,"name":"张明","age":21,"sex":"男","major":"计算机"},
						  {_id:3,"name":"秋雅","age":20,"sex":"女","major":"播音主持"},
						  {_id:4,"name":"张欣欣","age":18,"sex":"女","major":"计算机"},
						  {_id:5,"name":"袁华","age":20,"sex":"男","major":"播音主持"},
						  {_id:6,"name":"马冬梅","age":20,"sex":"女","major":"表演"},
						  {_id:7,"name":"夏洛","age":22,"sex":"男","major":"表演"},
						  {_id:8,"name":"李大春","age":23,"sex":"男","major":"表演"}
					]
			};
			window.onload = function(){
				document.getElementById("displayBtn").onclick = function(){
					var info = "";
					var infos = Student.information;
					for(var i = 0;i < infos.length;i++){
						//alert(i);
						var data = infos[i];
						info += "<tr>";
						info += "<td>"+data._id+"</td>";
						info += "<td>"+data.name+"</td>";
						info += "<td>"+data.age+"</td>";
						info += "<td>"+data.sex+"</td>";
						info += "<td>"+data.major+"</td>";
						info += "</tr>";
					}
					document.getElementById("infoTbody").innerHTML = info;
					document.getElementById("totalSpan").innerHTML = Student.total;
				}
				document.getElementById("clearBtn").onclick = function(){
					document.getElementById("infoTbody").innerHTML = "";
					document.getElementById("totalSpan").innerHTML = "0";
				}
			}
		</script>
		<input type="button" value="显示" id="displayBtn" />
		<input type="button" value="清空" id="clearBtn" />
		<h3 align="center">显示信息</h3>
		<hr>
		<table align="center" border="1px" width="50%">
			<tr>
				<th>序号</th>
				<th>姓名</th>
				<th>年龄</th>
				<th>性别</th>
				<th>专业</th>
			</tr>
			<tbody id="infoTbody"></tbody>
		</table>
		<h4 align="center">
			总共<span id="totalSpan">0</span>条记录
		</h4>
	</body>	
</html>