JavaScript 入门（下）

谁借莪１个温暖的怀抱￠ 2023-06-24 08:11 8阅读 0赞

**目录**

一、JavaScript简介

二、JavaScript的特点

1、动态改变页面内容

2、动态改变网页的外观

3、验证表单数据

4、响应事件

三、内容

1、数组对象

一、数组基础

二、数组的属性和方法

2、数值对象

3、窗口对象

一、窗口对象简介

二、打开和关闭窗口

三、改变窗口大小

四、窗口历史

五、定时器

4、JavaScript对话框

一、alert()

二、confirm()

三、prompt()

5、文档对象

一、document对象简介

二、训练题（1）网页动态标题

5、DOM对象

一、DOM节点属性

二、DOM节点操作

6、JavaScript对象

一、事件是什么？

二、JavaScript事件

--------------------

###    预备知识与后续知识及项目案例 ###

[\[HTML入门与进阶以及HTML5\]][HTML_HTML5]  
[\[CSS\]][CSS]  
[\[JS-上\]][JS-]  
[\[JS-下\]][JS- 1]  
[\[jQuery\]][jQuery]  
[\[Node.js + Gulp 知识点汇总\]][Node.js _ Gulp]  
[\[MongoDB + Express 入门及案例代码\]][MongoDB _ Express]  
[\[Vue项目开发-仿蘑菇街电商APP\]][Vue_-_APP]

# 一、JavaScript简介 #

JavaScript，就是我们通常所说的JS，是一种嵌入到HTML页面中的脚本语言，由浏览器一边解释一边执行。

我们在“[HTML入门教程][HTML]”中的“[前端技术简介][Link 1]”中深入浅出地讲解了HTML、CSS和JavaScript之间的关系，这一篇文章分量很重，大家没看过的记得回去看一下。

HTML、CSS和JavaScript的关系如下：

“HTML是网页的结构，CSS是网页的外观，而JavaScript是页面的行为。”

我们都知道单纯的HTML页面是静态的（只供浏览），而JavaScript的出现，把静态的页面转换成支持用户交互并响应相应事件的动态页面。那么在我们平常的浏览的网页中，都有哪些地方用到了JavaScript呢？

我们就拿绿叶学习网来说，导航、tabs选项卡、回顶部这些地方都用到了JavaScript。HTML只是一门描述性的语言，这些地方单纯地使用HTML是无法实现的，而必须使用编程的方式来实现，那就必须使用JavaScript了。

![JavaScript图片切换][JavaScript]

![JavaScript tabs选项卡][JavaScript tabs]

![JavaScript 回顶部特效][JavaScript 1]

# 二、JavaScript的特点 #

HTML页面是静态的，而JavaScript可以弥补HTML语言的缺陷，实现Web页面客户端的动态效果。JavaScript的作用有以下几点：

### 1、动态改变页面内容 ###

HTML页面是静态的，一旦编写，内容是无法改变的。JavaScript可以弥补这个不足，可以将内容动态地显示在网页中。

### 2、动态改变网页的外观 ###

JavaScript通过修改网页元素的CSS样式，达到动态地改变网页的外观。

### 3、验证表单数据 ###

我们常见的在各大网站中的注册中的验证功能，就是JavaScript实现的。

### 4、响应事件 ###

JavaScript是基于事件的语言。例如点击一个按钮弹出一个对话框，就是鼠标点击触发的事件，例如绿叶学习网教程文章中的点赞效果：

对于JavaScript的理解，就一句话：如果没有使用JavaScript，网页就是静态的，唯一的功能就是给用户浏览。加入了JavaScript，网页变得绚丽多彩起来。

# 三、内容 #

## 1、数组对象 ##

### 一、数组基础 ###

**1、数组是什么？**

在JavaScript中，我们可以使用“数组”来存储一组“相同数据类型”的数据结构。

**2、创建数组**

在JavaScript中，创建数组共有3种方法：

（1）新建一个长度为0的数组

举例：

<table> 
 <tbody> 
  <tr> 
   <td> <p>1</p> </td> 
   <td> <p><code>var</code> <code>myArr = </code><code>new</code> <code>Array();</code></p> </td> 
  </tr> 
 </tbody> 
</table>

（2）新建长度为n的数组

举例：

<table> 
 <tbody> 
  <tr> 
   <td> <p>1</p> <p>2</p> <p>3</p> <p>4</p> </td> 
   <td> <p><code>var</code> <code>myArr = </code><code>new</code> <code>Array(3);</code></p> <p><code>myArr[0]=</code><code>"HTML"</code><code>;</code></p> <p><code>myArr[1]=</code><code>"CSS"</code><code>;</code></p> <p><code>myArr[2]=</code><code>"JavaScript"</code><code>;</code></p> </td> 
  </tr> 
 </tbody> 
</table>

（3）新建指定长度的数组，并赋值

举例：

<table> 
 <tbody> 
  <tr> 
   <td> <p>1</p> </td> 
   <td> <p><code>var</code> <code>myArr = </code><code>new</code> <code>Array(1,2,3,4);</code></p> </td> 
  </tr> 
 </tbody> 
</table>

注意，在JavaScript中，数组的索引是从0开始的，而不是从1开始的。

**3、数组元素的赋值与获取**

在JavaScript中，数组元素的赋值与获取都是通过数组下标来实现。

### 二、数组的属性和方法 ###

**1、数组的属性**

在Array对象中有3个属性，分别是length、constructor和prototype。在初学者阶段，我们仅仅掌握length这个属性就可以了。

**2、数组的方法**

<table>  Array对象常用方法  
 <thead> 
  <tr> 
   <th>方法</th> 
   <th>说明</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>slice()</td> 
   <td>获取数组中的某段数组元素</td> 
  </tr> 
  <tr> 
   <td>unshift()</td> 
   <td>在数组开头添加元素</td> 
  </tr> 
  <tr> 
   <td>push()</td> 
   <td>在数组末尾添加元素</td> 
  </tr> 
  <tr> 
   <td>shift()</td> 
   <td>删除数组中第一个元素</td> 
  </tr> 
  <tr> 
   <td>pop()</td> 
   <td>删除数组最后一个元素</td> 
  </tr> 
  <tr> 
   <td>toString()</td> 
   <td>将数组转换为字符串</td> 
  </tr> 
  <tr> 
   <td>join()</td> 
   <td>将数组元素连接成字符串</td> 
  </tr> 
  <tr> 
   <td>concat()</td> 
   <td>多个数组连接为字符串</td> 
  </tr> 
  <tr> 
   <td>sort()</td> 
   <td>数组元素正向排序</td> 
  </tr> 
  <tr> 
   <td>reverse()</td> 
   <td>数组元素反向排序</td> 
  </tr> 
 </tbody> 
</table>

## 2、数值对象 ##

下面都是这一章所讲解到的Math对象比较重要的方法：

<table>  Math对象的方法  
 <thead> 
  <tr> 
   <th>方法</th> 
   <th>说明</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>max(x,y)</td> 
   <td>返回x和y中的最大值</td> 
  </tr> 
  <tr> 
   <td>min(x,y)</td> 
   <td>返回x和y中的最小值</td> 
  </tr> 
  <tr> 
   <td>pow(x,y)</td> 
   <td>返回x的y次幂</td> 
  </tr> 
  <tr> 
   <td>abs(x)</td> 
   <td>返回数的绝对值</td> 
  </tr> 
  <tr> 
   <td>round(x)</td> 
   <td>把数四舍五入为最接近的整数</td> 
  </tr> 
  <tr> 
   <td>random()</td> 
   <td>返回0~1之间的随机数</td> 
  </tr> 
  <tr> 
   <td>ceil(x)</td> 
   <td>对一个数进行上舍入</td> 
  </tr> 
  <tr> 
   <td>floor(x)</td> 
   <td>对一个数进行下舍入</td> 
  </tr> 
 </tbody> 
</table>

## 3、窗口对象 ##

现在大家都知道了，假如我们要学习一个“XXX对象”，那肯定学习它的属性和方法。window对象也是同样的道理。

关于window对象的属性很多，但是我们在[JavaScript入门][JavaScript 2]阶段一个都用不着！所以这一章大家只需要认真掌握window对象的方法即可。

<table>  window对象方法  
 <thead> 
  <tr> 
   <th>方法</th> 
   <th>说明</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>open()、close()</td> 
   <td>打开窗口、关闭窗口</td> 
  </tr> 
  <tr> 
   <td>resizeBy()、resizeTo()</td> 
   <td>改变窗口大小</td> 
  </tr> 
  <tr> 
   <td>moveBy()、moveTo()</td> 
   <td>移动窗口</td> 
  </tr> 
  <tr> 
   <td>setTimeout()、clearTimeout()</td> 
   <td>设置或取消“一次性”执行的定时器</td> 
  </tr> 
  <tr> 
   <td>setInterval()、clearInterval()</td> 
   <td>设置或取消“重复性”执行的定时器</td> 
  </tr> 
 </tbody> 
</table>

### 一、窗口对象简介 ###

之前几个章节都是JavaScript的基础部分，大家要真想掌握JavaScript，就必须得把基础给打扎实。这一章我们进入JavaScript的核心技术，其实核心技术部分也是比较简单的，大家不要一看到就退缩。

在之前我们接触过很多JavaScript对象，例如什么[数组对象Array][Array]、[日期对象Date][Date]等。.这一章我们来学习JavaScript最核心的对象之一：window对象。

在JavaScript中，一个浏览器窗口就是一个window对象。window对象主要用来控制由窗口弹出的对话框、打开窗口或关闭窗口、控制窗口的大小和位置等等。一句话，window对象就是用来操作“浏览器窗口”的一个对象。

**1、window对象属性**

市面上很多教程在讲解window、document等对象时，不管是常用的还是不常用的属性和方法，先一上来就帮你全部列出来，读者看得头都大。其实在JavaScript入门阶段，对于window对象的属性和方法，我们只需要掌握一些常用的就行，其他需要深入的我们在JavaScript进阶再给大家详细探讨。

关于window对象的属性很多，但是我们在[JavaScript入门教程][JavaScript 2]阶段一个都用不着！所以这一章大家只需要认真掌握window对象的方法即可。

**2、window对象方法**

上面，我把window对象属性去掉，并且筛选出最常用的方法。在JavaScript入门之时，只需要掌握这些就已经足够我们走很远了。

### 二、打开和关闭窗口 ###

在JavaScript中，打开和关闭新的窗口，这是很常见的一种操作。

在绿叶学习网的JavaScript在线测试工具中，当点击“调试代码”按钮时，就会打开一个新的窗口，并把HTML文档输出到新的页面中去。这里面涉及的方法，就是这一节我们要说到的“使用JavaScript打开和关闭窗口”。

**1、JavaScript打开窗口**

在JavaScript中，我们可以使用window对象中的open()方法来打开一个新窗口。

语法：

<table> 
 <tbody> 
  <tr> 
   <td> <p>1</p> </td> 
   <td> <p><code>window.open(URL, 窗口名称, 参数);</code></p> </td> 
  </tr> 
 </tbody> 
</table>

说明：

URL：指的是打开窗口的地址，如果URL为空字符串，则浏览器打开一个空白窗口，并且可以使用document.write()方法动态输出HTML文档。

窗口名称：指的是window对象的名称，可以是a标签或form标签中target属性值。如果指定的名称是一个已经存在的窗口名称，则返回对该窗口的引用，而不会再新打开一个窗口。

参数：对打开的窗口进行属性设置。

<table>  参数以及说明  
 <thead> 
  <tr> 
   <th>方法</th> 
   <th>说明</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>top</td> 
   <td>窗口顶部距离屏幕顶部的距离，默认单位为px</td> 
  </tr> 
  <tr> 
   <td>left</td> 
   <td>窗口左边距离屏幕左边的距离，默认单位为px</td> 
  </tr> 
  <tr> 
   <td>width</td> 
   <td>窗口的宽度，默认单位为px</td> 
  </tr> 
  <tr> 
   <td>height</td> 
   <td>窗口的高度，默认单位为px</td> 
  </tr> 
  <tr> 
   <td>scrollbars</td> 
   <td>是否显示滚动条</td> 
  </tr> 
  <tr> 
   <td>resizable</td> 
   <td>窗口大小是否固定</td> 
  </tr> 
  <tr> 
   <td>toolbar</td> 
   <td>浏览器工具条，包括前进或后退按钮</td> 
  </tr> 
  <tr> 
   <td>menubar</td> 
   <td>菜单条，一般包括文件、编辑及其它一些条目</td> 
  </tr> 
  <tr> 
   <td>location</td> 
   <td>地址栏，是可以输入URL的浏览器文本区</td> 
  </tr> 
  <tr> 
   <td>location</td> 
   <td>地址栏，是可以输入URL的浏览器文本区</td> 
  </tr> 
 </tbody> 
</table>

这些可选参数都不是那么常用，大家不记住也没啥关系，以后需要的时候回到这里查询一下就OK了。

下面举几个常用的窗口打开的例子：

（1）打开一个新窗口：

<table> 
 <tbody> 
  <tr> 
   <td> <p>1</p> </td> 
   <td> <p><code>window.open(</code><code>"<a href="http://www.lvyestudy.com/" rel="nofollow">http://www.lvyestudy.com</a>"</code><code>,</code><code>""</code><code>,</code><code>""</code><code>);</code></p> </td> 
  </tr> 
 </tbody> 
</table>

上面是打开一个新窗口，并且在新窗口加载绿叶学习网首页。

（2）打开一个指定位置的窗口：

<table> 
 <tbody> 
  <tr> 
   <td> <p>1</p> </td> 
   <td> <p><code>window.open(</code><code>"<a href="http://www.lvyestudy.com/" rel="nofollow">http://www.lvyestudy.com</a> "</code><code>,</code><code>""</code><code>,</code><code>"top=200,left=200"</code><code>);</code></p> </td> 
  </tr> 
 </tbody> 
</table>

（3）打开一个指定大小的窗口：

<table> 
 <tbody> 
  <tr> 
   <td> <p>1</p> </td> 
   <td> <p><code>window.open(</code><code>"<a href="http://www.lvyestudy.com/" rel="nofollow">http://www.lvyestudy.com</a> "</code><code>,</code><code>""</code><code>,</code><code>"width=200,height=200"</code><code>);</code></p> </td> 
  </tr> 
 </tbody> 
</table>

（4）打开一个固定大小的窗口：

<table> 
 <tbody> 
  <tr> 
   <td> <p>1</p> </td> 
   <td> <p><code>window.open(</code><code>"<a href="http://www.lvyestudy.com/" rel="nofollow">http://www.lvyestudy.com</a> "</code><code>,</code><code>""</code><code>,</code><code>"width=200,height=200,resizable"</code><code>);</code></p> </td> 
  </tr> 
 </tbody> 
</table>

（5）打开一个显示滚动条的窗口：

<table> 
 <tbody> 
  <tr> 
   <td> <p>1</p> </td> 
   <td> <p><code>window.open(</code><code>"<a href="http://www.lvyestudy.com/" rel="nofollow">http://www.lvyestudy.com</a> "</code><code>,</code><code>""</code><code>,</code><code>"width=200,height=200,scrollbars"</code><code>);</code></p> </td> 
  </tr> 
 </tbody> 
</table>

举例：

<table> 
 <tbody> 
  <tr> 
   <td> <p>1</p> <p>2</p> <p>3</p> <p>4</p> <p>5</p> <p>6</p> <p>7</p> <p>8</p> <p>9</p> <p>10</p> <p>11</p> <p>12</p> <p>13</p> <p>14</p> </td> 
   <td> <p><code>&lt;!DOCTYPE html&gt;</code></p> <p><code>&lt;html xmlns=</code><code>"<a href="http://www.w3.org/1999/xhtml" rel="nofollow">http://www.w3.org/1999/xhtml</a>"</code><code>&gt;</code></p> <p><code>&lt;head&gt;</code></p> <p><code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>&lt;title&gt;&lt;/title&gt;</code></p> <p><code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>&lt;script type=</code><code>"text/javascript"</code><code>&gt;</code></p> <p><code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>function</code> <code>openWindow() { </code></p> <p><code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>window.open(</code><code>"<a href="http://www.lvyestudy.com/" rel="nofollow">http://www.lvyestudy.com</a> "</code><code>, </code><code>""</code><code>, </code><code>"width=200,height=200,resizable"</code><code>);</code></p> <p><code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>}</code></p> <p><code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>&lt;/script&gt;</code></p> <p><code>&lt;/head&gt;</code></p> <p><code>&lt;body&gt;</code></p> <p><code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>&lt;input id=</code><code>"btn"</code> <code>type=</code><code>"button"</code> <code>value=</code><code>"打开窗口"</code> <code>onclick=</code><code>"openWindow()"</code><code>/&gt;</code></p> <p><code>&lt;/body&gt;</code></p> <p><code>&lt;/html&gt;</code></p> </td> 
  </tr> 
 </tbody> 
</table>

在浏览器预览效果如下：

![JavaScript打开窗口][JavaScript 3]

分析：

![JavaScript window.open()][JavaScript window.open]

此外还需要注意一点，window.open()方法中的参数width和height设置的时候是不需要加单位（px）的，浏览器默认就已经给我们添加单位。

**2、JavaScript关闭窗口**

在JavaScript中，我们可以使用window对象中的close()方法来关闭一个窗口。

（1）、关闭当前窗口

在JavaScript中，如果想要关闭当前的窗口，有3种方式：

<table> 
 <tbody> 
  <tr> 
   <td> <p>1</p> <p>2</p> <p>3</p> </td> 
   <td> <p><code>window.close();</code></p> <p><code>close();</code></p> <p><code>this</code><code>.close();</code></p> </td> 
  </tr> 
 </tbody> 
</table>

（2）、关闭子窗口

所谓的“关闭子窗口”就是关闭之前使用window.open()方法动态创建的子窗口。

语法：

<table> 
 <tbody> 
  <tr> 
   <td> <p>1</p> </td> 
   <td> <p><code>窗口名.close();</code></p> </td> 
  </tr> 
 </tbody> 
</table>

说明：

使用window.open()方法动态创建的窗口时，我们可以将窗口以变量形式保存，然后再使用close()方法关闭动态创建的窗口。

举例：

<table> 
 <tbody> 
  <tr> 
   <td> <p>1</p> <p>2</p> <p>3</p> <p>4</p> <p>5</p> <p>6</p> <p>7</p> <p>8</p> <p>9</p> <p>10</p> <p>11</p> <p>12</p> <p>13</p> <p>14</p> <p>15</p> <p>16</p> </td> 
   <td> <p><code>&lt;!DOCTYPE html&gt;</code></p> <p><code>&lt;html xmlns=</code><code>"<a href="http://www.w3.org/1999/xhtml" rel="nofollow">http://www.w3.org/1999/xhtml</a>"</code><code>&gt;</code></p> <p><code>&lt;head&gt;</code></p> <p><code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>&lt;title&gt;&lt;/title&gt;</code></p> <p><code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>&lt;script type=</code><code>"text/javascript"</code><code>&gt;</code></p> <p><code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>var</code> <code>newWindow = window.open(</code><code>"<a href="http://www.lvyestudy.com/" rel="nofollow">http://www.lvyestudy.com</a>"</code><code>,</code><code>""</code><code>,</code><code>"width=200,height=200"</code><code>);</code></p> <p><code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>function</code> <code>closeWindow()</code></p> <p><code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>{ </code></p> <p><code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>newWindow.close();</code></p> <p><code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>}</code></p> <p><code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>&lt;/script&gt;</code></p> <p><code>&lt;/head&gt;</code></p> <p><code>&lt;body&gt;</code></p> <p><code>&lt;input type=</code><code>"button"</code> <code>value=</code><code>"关闭窗口"</code> <code>onclick=</code><code>"closeWindow()"</code><code>/&gt;</code></p> <p><code>&lt;/body&gt;</code></p> <p><code>&lt;/html&gt;</code></p> </td> 
  </tr> 
 </tbody> 
</table>

在浏览器预览效果如下：

![JavaScript关闭窗口][JavaScript 4]父窗口

![JavaScript window.close()][JavaScript window.close]子窗口

分析：

你会看到，浏览器会打开2个窗口。当我们点击“关闭窗口”按钮后，被打开的“子窗口”就会被关闭。

### 三、改变窗口大小 ###

在JavaScript中，可以使用window对象的resizeTo()方法或resizeBy()方法来改变窗口的大小。

**1、resizeTo()方法**

语法：

<table> 
 <tbody> 
  <tr> 
   <td> <p>1</p> </td> 
   <td> <p><code>window.resizeTo(x, y)</code></p> </td> 
  </tr> 
 </tbody> 
</table>

说明：

x表示改变后的水平宽度，y表示改变后的垂直高度。x和y的单位都是px，浏览器自带单位，我们只需要使用数值即可。

举例：

<table> 
 <tbody> 
  <tr> 
   <td> <p>1</p> <p>2</p> <p>3</p> <p>4</p> <p>5</p> <p>6</p> <p>7</p> <p>8</p> <p>9</p> <p>10</p> <p>11</p> <p>12</p> <p>13</p> <p>14</p> <p>15</p> </td> 
   <td> <p><code>&lt;!DOCTYPE html&gt;</code></p> <p><code>&lt;html xmlns=</code><code>"<a href="http://www.w3.org/1999/xhtml" rel="nofollow">http://www.w3.org/1999/xhtml</a>"</code><code>&gt;</code></p> <p><code>&lt;head&gt;</code></p> <p><code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>&lt;title&gt;&lt;/title&gt;</code></p> <p><code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>&lt;script type=</code><code>"text/javascript"</code><code>&gt;</code></p> <p><code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>function</code> <code>resizeWindow()</code></p> <p><code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>{ </code></p> <p><code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>window.resizeTo(200,200);</code></p> <p><code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>}</code></p> <p><code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>&lt;/script&gt;</code></p> <p><code>&lt;/head&gt;</code></p> <p><code>&lt;body&gt;</code></p> <p><code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>&lt;input type=</code><code>"button"</code> <code>value=</code><code>"改变大小"</code> <code>onclick=</code><code>"resizeWindow()"</code><code>/&gt;</code></p> <p><code>&lt;/body&gt;</code></p> <p><code>&lt;/html&gt;</code></p> </td> 
  </tr> 
 </tbody> 
</table>

在浏览器预览效果如下：

![JavaScript resizeTo()方法][JavaScript resizeTo]

分析：

当我们点击“改变大小”按钮之后，当前窗口的的宽度为200px，而高度变为200px。注意resizeTo(x,y)方法中的x和y是不需要加px作为单位的，因为浏览器默认已经带有px作为单位。

**2、resizeBy()方法**

语法：

<table> 
 <tbody> 
  <tr> 
   <td> <p>1</p> </td> 
   <td> <p><code>window.resizeBy(x, y)</code></p> </td> 
  </tr> 
 </tbody> 
</table>

说明：

当x、y的值大于0时为扩大，小于0时为缩小。其中x和y的单位都是px。

x表示窗口水平方向每次扩大或缩小的数值，y表示垂直方向窗口每次扩大或缩小的数值。

resizeTo(x,y)与resizeBy(x,y)不同在于：resizeTo(x,y)中的x、y是“改变后”的数值，而resizeBy(x,y)中的x、y是“增加或减少”的数值。“to”表示一个结果，“by”表示一个过程，大家好好琢磨“to”和“by”的英文含义就懂了。

举例：

<table> 
 <tbody> 
  <tr> 
   <td> <p>1</p> <p>2</p> <p>3</p> <p>4</p> <p>5</p> <p>6</p> <p>7</p> <p>8</p> <p>9</p> <p>10</p> <p>11</p> <p>12</p> <p>13</p> <p>14</p> <p>15</p> <p>16</p> <p>17</p> <p>18</p> </td> 
   <td> <p><code>&lt;!DOCTYPE html&gt;</code></p> <p><code>&lt;html xmlns=</code><code>"<a href="http://www.w3.org/1999/xhtml" rel="nofollow">http://www.w3.org/1999/xhtml</a>"</code><code>&gt;</code></p> <p><code>&lt;head&gt;</code></p> <p><code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>&lt;title&gt;&lt;/title&gt;</code></p> <p><code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>&lt;script type=</code><code>"text/javascript"</code><code>&gt;</code></p> <p><code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>function</code> <code>resizeToWindow() { </code></p> <p><code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>window.resizeTo(200,200);</code></p> <p><code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>}</code></p> <p><code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>function</code> <code>resizeByWindow() { </code></p> <p><code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>window.resizeBy(50,50);</code></p> <p><code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>}</code></p> <p><code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>&lt;/script&gt;</code></p> <p><code>&lt;/head&gt;</code></p> <p><code>&lt;body&gt;</code></p> <p><code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>&lt;input type=</code><code>"button"</code> <code>value=</code><code>"resizeTo"</code> <code>onclick=</code><code>"resizeToWindow()"</code><code>/&gt;</code></p> <p><code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>&lt;input type=</code><code>"button"</code> <code>value=</code><code>"resizeBy"</code> <code>onclick=</code><code>"resizeByWindow()"</code><code>/&gt;</code></p> <p><code>&lt;/body&gt;</code></p> <p><code>&lt;/html&gt;</code></p> </td> 
  </tr> 
 </tbody> 
</table>

在浏览器预览效果如下：

![JavaScript resizeBy()方法][JavaScript resizeBy]

分析：

我们首先点击“resizeTo”按钮把当前窗口宽度设置为200px，而高度也设置为200px。然后每当我们点击1次“resizeBy”按钮，我们会发现当前窗口的宽度和高度都会增加50px。这样都是由于window.resizeBy(50,50)的结果。

### 四、窗口历史 ###

平常在使用浏览器当中，我们都会经常使用浏览器中的“前进”和“后退”。其实浏览器都会帮我们保存浏览的历史（即窗口历史）。那么在JavaScript中，我们该如何来操作这些窗口历史呢？

在JavaScript中，我们使用window对象中的history对象进行访问窗口历史。很多人对“window对象中的history对象”这一句不太理解，其实“对象里面也可以有子对象”的。看过JSON教程的读者都知道，我们可以在一个对象里面再定义一个子对象。

我们在JavaScript进阶教程的“JavaScript对象”这一节再详细为大家探讨。

既然提到对象，那肯定少不了还是按照“对象的属性”和“对象的方法”这两个套路来给大家讲解了。

**1、history对象属性**

在JavaScript中，hisotry对象常用的属性如下：

<table>  history对象属性  
 <thead> 
  <tr> 
   <th>属性</th> 
   <th>说明</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>current</td> 
   <td>当前窗口的URL</td> 
  </tr> 
  <tr> 
   <td>next</td> 
   <td>历史列表中的下一个URL</td> 
  </tr> 
  <tr> 
   <td>previous</td> 
   <td>历史列表中的前一个URL</td> 
  </tr> 
  <tr> 
   <td>length</td> 
   <td>历史列表的长度，用于判断列表中的入口数目</td> 
  </tr> 
 </tbody> 
</table>

这些history对象属性比较少用，大家看一下就可以了。

**2、history对象方法**

在JavaScript中，hisotry对象常用的方法如下：

<table>  history对象方法  
 <thead> 
  <tr> 
   <th>方法</th> 
   <th>说明</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>go()</td> 
   <td>进入指定的网页</td> 
  </tr> 
  <tr> 
   <td>back()</td> 
   <td>返回上一页</td> 
  </tr> 
  <tr> 
   <td>forward()</td> 
   <td>进入下一页</td> 
  </tr> 
 </tbody> 
</table>

我们常见的“上一页”与“下一页”实现代码如下：

语法：

<table> 
 <tbody> 
  <tr> 
   <td> <p>1</p> <p>2</p> </td> 
   <td> <p><code>&lt;a href=</code><code>"javascript:window.history.forward();"</code><code>&gt;下一页&lt;/a&gt;</code></p> <p><code>&lt;a href=</code><code>"javascript:window.history.back();"</code><code>&gt;上一页&lt;/a&gt;</code></p> </td> 
  </tr> 
 </tbody> 
</table>

注意一下，这种“上一页”与“下一页”是针对浏览器历史记录而言，不能用来制作类似绿叶学习网那种分页特效。两者是完全不同的概念！

![JavaScript窗口历史][JavaScript 5]分页效果

当然，我们还可以使用hisotry.go()方法指定要访问的历史记录。若参数为正数，则向前移动；若参数为负数，则向后移动，例如：

<table> 
 <tbody> 
  <tr> 
   <td> <p>1</p> <p>2</p> </td> 
   <td> <p><code>&lt;a href=</code><code>"javascript:window.history.go(-1);"</code><code>&gt;向后退1次&lt;/a&gt;</code></p> <p><code>&lt;a href=</code><code>"javascript:window.history.back(2);"</code><code>&gt;向后前进2次&lt;/a&gt;</code></p> </td> 
  </tr> 
 </tbody> 
</table>

使用history.length属性能够访问history数组的长度，可以很容易地转移到列表的末尾，例如：

<table> 
 <tbody> 
  <tr> 
   <td> <p>1</p> </td> 
   <td> <p><code>&lt;a href=</code><code>"javascript:window.history.length-1;"</code><code>&gt;末尾&lt;/a&gt;</code></p> </td> 
  </tr> 
 </tbody> 
</table>

在JavaScript中，操作窗口历史语法很简单，也不是那么常用。一般情况下，在404页面中，为了用户体验，往往会有一个提供“返回上一页”的选项，这其中就用到了下面这种语法：

<table> 
 <tbody> 
  <tr> 
   <td> <p>1</p> </td> 
   <td> <p><code>&lt;a href=</code><code>"javascript:window.history.go(-1);"</code><code>&gt;返回上一页&lt;/a&gt;</code></p> </td> 
  </tr> 
 </tbody> 
</table>

由于窗口历史必须在实际环境才会有效，即使提供在线测试也不会有效果，请大家自行在本地测试。

### 五、定时器 ###

什么叫定时器？我们可以看到绿叶学习网首页有一个“图片轮播”特效，每隔2s图片变换一次，这里就用到了定时器。啊，定时器，太重要了！天塌下来，大家都要扛着把它学会先。

定时器用途非常广，在图片轮播、在线时钟、弹窗广告等地方大显身手。凡是自动执行的东西，很大可能都是跟定时器有关。

在JavaScript中，关于定时器的实现，我们有2组方法：

*  （1）setTimeout()和clearTimeout()；
 *  （2）setInterval()和clearInterval()；

这一节的例子使用“在线测试”不会有效果，请大家自行把代码复制到本地编辑器进行测试预览。下面我们详细分析这2组方法的用法与不同。

**1、setTimeout()和clearTimeout()**

在JavaScript中，我们可以使用setTimeout()方法来设置“一次性”调用的函数。其中clearTimeout()可以用来取消执行setTimeout()方法。

语法：

<table> 
 <tbody> 
  <tr> 
   <td> <p>1</p> </td> 
   <td> <p><code>var</code> <code>变量名 = setTimeout(code , time);</code></p> </td> 
  </tr> 
 </tbody> 
</table>

说明：

参数code可以是一段代码，也可以是一个调用的函数名；

参数time表示时间，表示要过多长时间才执行code中的内容，单位为毫秒。

举例：参数code是一段代码

<table> 
 <tbody> 
  <tr> 
   <td> <p>1</p> <p>2</p> <p>3</p> <p>4</p> <p>5</p> <p>6</p> <p>7</p> <p>8</p> <p>9</p> <p>10</p> <p>11</p> <p>12</p> <p>13</p> <p>14</p> </td> 
   <td> <p><code>&lt;!DOCTYPE html&gt;</code></p> <p><code>&lt;html xmlns=</code><code>"<a href="http://www.w3.org/1999/xhtml" rel="nofollow">http://www.w3.org/1999/xhtml</a>"</code><code>&gt;</code></p> <p><code>&lt;head&gt;</code></p> <p><code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>&lt;title&gt;&lt;/title&gt;</code></p> <p><code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>&lt;script type=</code><code>"text/javascript"</code><code>&gt;</code></p> <p><code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>window.onload = </code><code>function</code> <code>() { </code></p> <p><code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>setTimeout(</code><code>"alert('欢迎来到绿叶学习网');"</code><code>, 2000);</code></p> <p><code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>}</code></p> <p><code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>&lt;/script&gt;</code></p> <p><code>&lt;/head&gt;</code></p> <p><code>&lt;body&gt;</code></p> <p><code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>&lt;p&gt;2秒后提示欢迎语。&lt;/p&gt;</code></p> <p><code>&lt;/body&gt;</code></p> <p><code>&lt;/html&gt;</code></p> </td> 
  </tr> 
 </tbody> 
</table>

在浏览器预览效果如下：

![setTimeout()和clearTimeout()][setTimeout_clearTimeout]

分析：

打开页面2秒后，浏览器会弹出欢迎语。由于setTimeout()方法只会执行一次，所以只会弹出一次对话框。弹出对话框如下图：

![JavaScript定时器][JavaScript 6]

举例2：参数code是一个函数名

<table> 
 <tbody> 
  <tr> 
   <td> <p>1</p> <p>2</p> <p>3</p> <p>4</p> <p>5</p> <p>6</p> <p>7</p> <p>8</p> <p>9</p> <p>10</p> <p>11</p> <p>12</p> <p>13</p> <p>14</p> <p>15</p> <p>16</p> <p>17</p> </td> 
   <td> <p><code>&lt;!DOCTYPE html&gt;</code></p> <p><code>&lt;html xmlns=</code><code>"<a href="http://www.w3.org/1999/xhtml" rel="nofollow">http://www.w3.org/1999/xhtml</a>"</code><code>&gt;</code></p> <p><code>&lt;head&gt;</code></p> <p><code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>&lt;title&gt;&lt;/title&gt;</code></p> <p><code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>&lt;script type=</code><code>"text/javascript"</code><code>&gt;</code></p> <p><code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>window.onload = </code><code>function</code> <code>() { </code></p> <p><code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>setTimeout(</code><code>"welcome()"</code><code>, 2000);</code></p> <p><code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>}</code></p> <p><code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>function</code> <code>welcome() { </code></p> <p><code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>alert(</code><code>"欢迎来到绿叶学习网"</code><code>);</code></p> <p><code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>}</code></p> <p><code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>&lt;/script&gt;</code></p> <p><code>&lt;/head&gt;</code></p> <p><code>&lt;body&gt;</code></p> <p><code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>&lt;p&gt;2秒后提示欢迎语。&lt;/p&gt;</code></p> <p><code>&lt;/body&gt;</code></p> <p><code>&lt;/html&gt;</code></p> </td> 
  </tr> 
 </tbody> 
</table>

在浏览器预览效果如下：

![JavaScript setTimeout()和clearTimeout()][JavaScript setTimeout_clearTimeout]

分析：

举例1和举例2实际效果是相同的，只不过参数code不一样罢了。

**2、setInterval()和clearInterval()**

在JavaScript中，我们可以使用setInterval()方法来设置“重复性”调用的函数。其中clearInterval()可以用来取消执行setTimeout()方法。

语法：

<table> 
 <tbody> 
  <tr> 
   <td> <p>1</p> </td> 
   <td> <p><code>var</code> <code>变量名 = setInterval (code , time);</code></p> </td> 
  </tr> 
 </tbody> 
</table>

说明：

参数code可以是一段代码，也可以是一个调用的函数名；

参数time表示时间，表示要过多长时间才执行code中的内容，单位为毫秒。

setTimeout()方法与setInterval()方法的语法很相似，实际上这两者在用法方面区别非常大。其中setTimeout()方法内的代码只会执行一次，而setInterval()方法内的代码会重复性执行，除非你使用clearInterval()方法来取消执行。

举例：

在浏览器预览效果如下：

![setInterval()和clearInterval()][setInterval_clearInterval]

分析：

window.onload表示在页面加载完毕执行，在“[JavaScript页面相关事件][JavaScript 7]”我们会详细讲解到。

setInterval()方法会重复执行某一段代码或函数。如果这个例子使用setTimeout方法就不能实现了，因为setTimeout()方法只会执行一次，而setInterval()会重复执行。

举例：

<table> 
 <tbody> 
  <tr> 
   <td> <p>1</p> <p>2</p> <p>3</p> <p>4</p> <p>5</p> <p>6</p> <p>7</p> <p>8</p> <p>9</p> <p>10</p> <p>11</p> <p>12</p> <p>13</p> <p>14</p> <p>15</p> <p>16</p> <p>17</p> <p>18</p> <p>19</p> <p>20</p> <p>21</p> <p>22</p> <p>23</p> <p>24</p> <p>25</p> <p>26</p> <p>27</p> <p>28</p> <p>29</p> <p>30</p> <p>31</p> <p>32</p> <p>33</p> <p>34</p> </td> 
   <td> <p><code>&lt;!DOCTYPE html&gt;</code></p> <p><code>&lt;html xmlns=</code><code>"<a href="http://www.w3.org/1999/xhtml" rel="nofollow">http://www.w3.org/1999/xhtml</a>"</code><code>&gt;</code></p> <p><code>&lt;head&gt;</code></p> <p><code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>&lt;title&gt;&lt;/title&gt;</code></p> <p><code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>&lt;script type=</code><code>"text/javascript"</code><code>&gt;</code></p> <p><code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>//定义全局变量，用于记录秒数</code></p> <p><code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>var</code> <code>n = 0;</code></p> <p><code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>window.onload = </code><code>function</code> <code>() { </code></p> <p><code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>//设置定时器，重复执行函数add()</code></p> <p><code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>var</code> <code>t = setInterval(</code><code>"add()"</code><code>, 1000);</code></p> <p><code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>//点击“暂停”按钮事件</code></p> <p><code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>document.getElementById(</code><code>"btn_pause"</code><code>).onclick = </code><code>function</code> <code>() { </code></p> <p><code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>clearInterval(t);</code></p> <p><code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>}</code></p> <p><code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>//点击“继续”按钮事件</code></p> <p><code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>document.getElementById(</code><code>"btn_continue"</code><code>).onclick = </code><code>function</code> <code>() { </code></p> <p><code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>if</code> <code>(confirm(</code><code>"你还要继续装逼？"</code><code>)){ </code></p> <p><code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>t = setInterval(</code><code>"add()"</code><code>, 1000);</code></p> <p><code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>} </code></p> <p><code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>}</code></p> <p><code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>}</code></p> <p><code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>//定义计时函数</code></p> <p><code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>function</code> <code>add() { </code></p> <p><code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>n++;</code></p> <p><code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>document.getElementById(</code><code>"num"</code><code>).innerHTML = n;</code></p> <p><code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>}</code></p> <p><code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>&lt;/script&gt;</code></p> <p><code>&lt;/head&gt;</code></p> <p><code>&lt;body&gt;</code></p> <p><code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>&lt;p&gt;你已经装了&lt;span id=</code><code>"num"</code><code>&gt;0&lt;/span&gt;秒的“逼”，赶紧暂停吧！&lt;/p&gt;</code></p> <p><code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>&lt;input id=</code><code>"btn_pause"</code> <code>value=</code><code>"暂停"</code> <code>type=</code><code>"button"</code><code>/&gt;</code></p> <p><code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>&lt;input id=</code><code>"btn_continue"</code> <code>value=</code><code>"继续"</code> <code>type=</code><code>"button"</code> <code>/&gt;</code></p> <p><code>&lt;/body&gt;</code></p> <p><code>&lt;/html&gt;</code></p> </td> 
  </tr> 
 </tbody> 
</table>

在浏览器预览效果如下：

![JavaScript setInterval()和clearInterval()][JavaScript setInterval_clearInterval]

分析：

这里我做了一个小程序，其中使用setInterval()方法重复执行计时函数，并且利用按钮点击事件配合clearInterval()方法来进行“暂停”。

对于初学者来说，这个程序可能有点复杂，涉及了JavaScript对话框、DOM操作和JavaScript事件。请大家学习了后续课程再来看看。

这一节，我们把定时器的语法简单给大家做个介绍，在后面课程或者以后开发中，你们会经常见到定时器的身影。

**总结

1、在JavaScript中，关于定时器的实现，我们有2组方法：

*  （1）setTimeout()和clearTimeout()；
 *  （2）setInterval()和clearInterval()；

2、setTimeout()方法内的代码只会执行一次，而setInterval()方法内的代码会重复性执行。

## 4、JavaScript对话框 ##

在JavaScript中，对话框共有3种，这3种对话框分别使用以下3种方法定义：

*  （1）alert()；
 *  （2）confirm()；
 *  （3）prompt()；

其中前两种用得比较多，最后一种在实际开发中用得比较少。

### 一、alert() ###

在JavaScript中，我们可以使用[window对象][window]中的[alert()方法][alert]来弹出一个提示框。该对话框效果如下：

![JavaScript alert()方法][JavaScript alert]

语法：

<table> 
 <tbody> 
  <tr> 
   <td> <p>1</p> </td> 
   <td> <p><code>alert(message)</code></p> </td> 
  </tr> 
 </tbody> 
</table>

说明：

该对话框只是用于提示，并不能对JavaScript脚本产生任何影响。message是必选参数，即提示框的信息，这是一个字符串。alert()方法没有返回值。

### 二、confirm() ###

在JavaScript中，[confirm()方法][confirm]对话框一般用于确认信息，它只有一个参数，返回值为true或false。该对话框效果如下：

![JavaScript confirm()方法][JavaScript confirm]

语法：

<table> 
 <tbody> 
  <tr> 
   <td> <p>1</p> </td> 
   <td> <p><code>confirm(message)</code></p> </td> 
  </tr> 
 </tbody> 
</table>

说明：

message是必选项，表示弹出对话框中的文本，这是一个字符串。如果用户点击“确定”，则confirm()返回true。如果用户点击“取消”按钮，则confirm()返回false。confirm()方法往往都是和按钮结合使用。

### 三、prompt() ###

在JavaScript中，prompt()方法对话框用于输入并返回用户输入的字符串。该对话框效果如下：

![JavaScript prompt()方法][JavaScript prompt]

语法：

<table> 
 <tbody> 
  <tr> 
   <td> <p>1</p> </td> 
   <td> <p><code>prompt(message);</code></p> </td> 
  </tr> 
 </tbody> 
</table>

说明：

参数message表示对话框提示内容，这是一个字符串。

**总结

1、这3种对话框特点如下：

（1）alert()：仅有提示文字，没有返回值；

（2）confirm()：具有提示文字，返回“布尔值”（true或false）；

（3）prompt()：具有提示文字，返回“字符串”；

## 5、文档对象 ##

### 一、document对象简介 ###

前两章，我们已经把window对象详细给大家探讨了一遍。这次我们介绍另一个网页中核心的对象：“document对象”。注意，document对象是window对象中的子对象。

谈到document对象，其实我们在之前的课程中已经接触很多次了。还记得document.write()吗？这就是document对象的一个方法。

document对象除了write()方法外，跟其他对象一样，也有自身一套属性和方法。

document对象，即文档对象。顾名思义，其实很好理解，文档对象嘛，操作的都是HTML文档。为了更好理解什么叫“HTML文档”，请看一下[CSS入门教程][CSS 1]中“[正常文档流][Link 2]”这一节。

**1、document对象属性**

<table>  document对象属性  
 <thead> 
  <tr> 
   <th>属性</th> 
   <th>说明</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>title</td> 
   <td>文档标题，即title标签内容</td> 
  </tr> 
  <tr> 
   <td>URL</td> 
   <td>文档地址</td> 
  </tr> 
  <tr> 
   <td>fileCreateDate</td> 
   <td>文档创建日期</td> 
  </tr> 
  <tr> 
   <td>fileModifiedDate</td> 
   <td>文档修改时间（精确到天）</td> 
  </tr> 
  <tr> 
   <td>lastModified</td> 
   <td>文档修改时间（精确到秒）</td> 
  </tr> 
  <tr> 
   <td>fileSize</td> 
   <td>文档大小</td> 
  </tr> 
  <tr> 
   <td>fgColor</td> 
   <td>定义文档的前景色</td> 
  </tr> 
  <tr> 
   <td>bgColor</td> 
   <td>定义文档的背景色</td> 
  </tr> 
  <tr> 
   <td>linkColor</td> 
   <td>定义“未访问”的超链接颜色</td> 
  </tr> 
  <tr> 
   <td>alinkColor</td> 
   <td>定义“被激活”的超链接颜色</td> 
  </tr> 
  <tr> 
   <td>vlinkColor</td> 
   <td>定义“访问过”的超链接颜色</td> 
  </tr> 
 </tbody> 
</table>

**2、document对象方法**

<table>  document对象方法  
 <thead> 
  <tr> 
   <th>方法</th> 
   <th>说明</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>document.write()</td> 
   <td>输入文本到当前打开的文档</td> 
  </tr> 
  <tr> 
   <td>document.writeIn()</td> 
   <td>输入文本到当前打开的文档，并添加换行符“\n”</td> 
  </tr> 
  <tr> 
   <td>document.getElementById()</td> 
   <td>获取某个id值的元素</td> 
  </tr> 
  <tr> 
   <td>document.getElementsByName()</td> 
   <td>获取某个name值的元素，用于表单元素</td> 
  </tr> 
 </tbody> 
</table>

上面列出了document对象常用的属性和方法，跟window对象的学习一样，在[JavaScript入门][JavaScript 2]阶段，站长只会给大家讲解最实用的。对于那种压根儿用不上的，我也懒得花时间去写。

### 二、训练题（1）网页动态标题 ###

在浏览网页的时候，我们经常看到不少网页标题在闪动。这一节我们给大家讲解一个实际开发中的技巧“网页动态标题”。

实现代码如下：

<table> 
 <tbody> 
  <tr> 
   <td> <p>1</p> <p>2</p> <p>3</p> <p>4</p> <p>5</p> <p>6</p> <p>7</p> <p>8</p> <p>9</p> <p>10</p> <p>11</p> <p>12</p> <p>13</p> <p>14</p> <p>15</p> <p>16</p> <p>17</p> <p>18</p> <p>19</p> <p>20</p> <p>21</p> <p>22</p> <p>23</p> <p>24</p> <p>25</p> <p>26</p> <p>27</p> <p>28</p> <p>29</p> </td> 
   <td> <p><code>&lt;!DOCTYPE html&gt;</code></p> <p><code>&lt;html xmlns=</code><code>"<a href="http://www.w3.org/1999/xhtml" rel="nofollow">http://www.w3.org/1999/xhtml</a>"</code><code>&gt;</code></p> <p><code>&lt;head&gt;</code></p> <p><code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>&lt;title&gt;&lt;/title&gt;</code></p> <p><code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>&lt;script type=</code><code>"text/javascript"</code><code>&gt;</code></p> <p><code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>//定义全局变量，用于标识</code></p> <p><code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>var</code> <code>flag = 0;</code></p> <p><code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>window.onload = </code><code>function</code> <code>() { </code></p> <p><code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>//定时器</code></p> <p><code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>setInterval(</code><code>"titleChange()"</code><code>, 1000);</code></p> <p><code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>}</code></p> <p><code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>//定义函数</code></p> <p><code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>function</code> <code>titleChange() { </code></p> <p><code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>if</code><code>(flag==0)</code></p> <p><code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>{ </code></p> <p><code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>document.title = </code><code>"★☆★绿叶学习网★☆★"</code><code>;</code></p> <p><code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>flag = 1;</code></p> <p><code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>}</code></p> <p><code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>else</code></p> <p><code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>{ </code></p> <p><code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>document.title = </code><code>"☆★☆绿叶学习网☆★☆"</code><code>;</code></p> <p><code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>flag = 0;</code></p> <p><code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>}</code></p> <p><code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>}</code></p> <p><code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>&lt;/script&gt;</code></p> <p><code>&lt;/head&gt;</code></p> <p><code>&lt;body&gt;</code></p> <p><code>&lt;/body&gt;</code></p> <p><code>&lt;/html&gt;</code></p> </td> 
  </tr> 
 </tbody> 
</table>

在浏览器预览效果如下：

![JavaScript实现网页动态标题\_][JavaScript 8]

分析：

这个例子使用在线测试不会有效果，请大家在本地编辑器中测试预览。

这里主要使用了页面加载事件window.onload和[JavaScript定时器][JavaScript 9]。算法很简单，只要使用了一个全局变量作为标识。

## 5、DOM对象 ##

DOM，全称“Document Object Model（文档对象模型）”，它是由W3C组织定义的一个标准。

很多书籍一上来就大篇幅地展开说明DOM的历史和定义，看了老半天也不知道DOM是什么鬼。在这里，关于DOM的风流逸事就不展开了，免得初学者看得一头雾水，也浪费时间。

在前端开发时，我们往往需要在页面某个地方添加一个元素或者删除元素，这种添加元素、删除元素的操作就是通过DOM来实现的。

说白了，DOM就是一个接口，我们可以通过DOM来操作页面中各种元素，例如添加元素、删除元素、替换元素等。这下大家就懂了吧。

记住，DOM就是文档对象模型，文档对象模型就是DOM，很多人在学习DOM的时候看到“文档对象模型”还不知道是什么？= =||

在DOM学习中，记住最重要的一句话：每一个元素节点都看成一个“对象”。由于元素节点也是一个对象，因此他们有自身的属性和方法。

### 一、DOM节点属性 ###

<table>  DOM常用的节点属性  
 <thead> 
  <tr> 
   <th>属性</th> 
   <th>说明</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>parentNode</td> 
   <td>获取当前节点的父节点</td> 
  </tr> 
  <tr> 
   <td>childNodes</td> 
   <td>获取当前节点的子节点集合</td> 
  </tr> 
  <tr> 
   <td>firstChild</td> 
   <td>获取当前节点的第一个子节点</td> 
  </tr> 
  <tr> 
   <td>lastChild</td> 
   <td>获取当前节点的最后一个子节点</td> 
  </tr> 
  <tr> 
   <td>previousSibling</td> 
   <td>获取当前节点的前一个兄弟节点</td> 
  </tr> 
  <tr> 
   <td>nextSibling</td> 
   <td>获取当前节点的后一个兄弟节点</td> 
  </tr> 
  <tr> 
   <td>attributes</td> 
   <td>元素的属性列表</td> 
  </tr> 
 </tbody> 
</table>

### 二、DOM节点操作 ###

在JavaScript中，可以通过以下2种方式来选中指定元素：

（1）getElementById()；

在JavaScript中，如果想通过id来选中元素，我们可以使用document对象的getElementById()方法。

getElementById()方法类似于CSS中的id选择器。

语法：

<table> 
 <tbody> 
  <tr> 
   <td> <p>1</p> </td> 
   <td> <p><code>document.getElementById(</code><code>"元素id"</code><code>);</code></p> </td> 
  </tr> 
 </tbody> 
</table>

举例：

<table> 
 <tbody> 
  <tr> 
   <td> <p>1</p> <p>2</p> <p>3</p> <p>4</p> <p>5</p> <p>6</p> <p>7</p> <p>8</p> <p>9</p> <p>10</p> <p>11</p> <p>12</p> <p>13</p> </td> 
   <td> <p><code>&lt;!DOCTYPE html&gt;</code></p> <p><code>&lt;html xmlns=</code><code>"<a href="http://www.w3.org/1999/xhtml" rel="nofollow">http://www.w3.org/1999/xhtml</a>"</code><code>&gt;</code></p> <p><code>&lt;head&gt;</code></p> <p><code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>&lt;title&gt;&lt;/title&gt;</code></p> <p><code>&lt;/head&gt;</code></p> <p><code>&lt;body&gt;</code></p> <p><code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>&lt;div id=</code><code>"lvye"</code><code>&gt;绿叶学习网JavaScript入门教程&lt;/div&gt;</code></p> <p><code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>&lt;script type=</code><code>"text/javascript"</code><code>&gt;</code></p> <p><code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>var</code> <code>e = document.getElementById(</code><code>"lvye"</code><code>);</code></p> <p><code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>e.style.color = </code><code>"red"</code><code>;</code></p> <p><code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>&lt;/script&gt;</code></p> <p><code>&lt;/body&gt;</code></p> <p><code>&lt;/html&gt;</code></p> </td> 
  </tr> 
 </tbody> 
</table>

在浏览器预览效果如下：

![getElementById()][getElementById]

分析：

这里使用document.getElementById()的方法获取id为lvye的div元素，然后把这个DOM对象赋值给变量e，然后使用DOM对象的style对象来设置div元素颜色为红色。

（2）getElementsByName()；

在JavaScript中，如果想通过name来选中元素，我们可以使用document对象的getElementsByName()方法。

语法：

<table> 
 <tbody> 
  <tr> 
   <td> <p>1</p> </td> 
   <td> <p><code>document.getElementsByName(</code><code>"表单元素name值"</code><code>);</code></p> </td> 
  </tr> 
 </tbody> 
</table>

说明：

getElementsByName()方法都是用于获取表单元素。

与getElementById()方法不同的是，使用该方法的返回值是一个数组，而不是一个元素。因此，我们想要获取具体的某一个表单元素，就必须通过数组下标来获取。

注意，是getElementsByName()而不是getElementByName()。数组嘛，当然是复数。

举例：

<table> 
 <tbody> 
  <tr> 
   <td> <p>1</p> <p>2</p> <p>3</p> <p>4</p> <p>5</p> <p>6</p> <p>7</p> <p>8</p> <p>9</p> <p>10</p> <p>11</p> <p>12</p> <p>13</p> <p>14</p> <p>15</p> </td> 
   <td> <p><code>&lt;!DOCTYPE html&gt;</code></p> <p><code>&lt;html xmlns=</code><code>"<a href="http://www.w3.org/1999/xhtml" rel="nofollow">http://www.w3.org/1999/xhtml</a>"</code><code>&gt;</code></p> <p><code>&lt;head&gt;</code></p> <p><code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>&lt;title&gt;&lt;/title&gt;</code></p> <p><code>&lt;/head&gt;</code></p> <p><code>&lt;body&gt;</code></p> <p><code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>&lt;input name=</code><code>"web"</code> <code>id=</code><code>"radio1"</code> <code>type=</code><code>"radio"</code> <code>value=</code><code>"HTML"</code><code>/&gt;</code></p> <p><code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>&lt;input name=</code><code>"web"</code> <code>id=</code><code>"radio2"</code> <code>type=</code><code>"radio"</code> <code>value=</code><code>"CSS"</code><code>/&gt;</code></p> <p><code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>&lt;input name=</code><code>"web"</code> <code>id=</code><code>"radio3"</code> <code>type=</code><code>"radio"</code> <code>value=</code><code>"JavaScript"</code><code>/&gt;</code></p> <p><code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>&lt;input name=</code><code>"web"</code> <code>id=</code><code>"radio4"</code> <code>type=</code><code>"radio"</code> <code>value=</code><code>"jQuery"</code><code>/&gt;</code></p> <p><code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>&lt;script type=</code><code>"text/javascript"</code><code>&gt;</code></p> <p><code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>alert(document.getElementsByName(</code><code>"web"</code><code>)[0].value);</code></p> <p><code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>&lt;/script&gt;</code></p> <p><code>&lt;/body&gt;</code></p> <p><code>&lt;/html&gt;</code></p> </td> 
  </tr> 
 </tbody> 
</table>

在浏览器预览效果如下：

![getElementsByName()][getElementsByName]

分析：

getElementsByName()方法在实际开发中比较少用，大家了解一下即可。

其实可以这样说， getElementById()和getElementsByName()这两种方法是“JavaScript选择器”。

除了getElementById()和getElementsByName()这两种方法，JavaScript还提供另外一种getElementByTagName()方法，这个方法类似于CSS中的元素选择器。但是getElementByTagName()方法有个很大缺点，它会把整个页面中相同的元素都选中。用起来也比较麻烦，实际开发中很少用到。

**1、创建节点**

在JavaScript中，创建新节点都是先用document对象中的createElement()和createTextNode()这2种方法创建一个元素节点，然后再通过appendChild()、insertBefore()等方法把新元素节点插入现有的元素节点中去。

语法：

<table> 
 <tbody> 
  <tr> 
   <td> <p>1</p> <p>2</p> <p>3</p> </td> 
   <td> <p><code>var</code> <code>e = document.createElement(</code><code>"元素名"</code><code>);</code></p> <p><code>var</code> <code>txt = document.createTextNode(</code><code>"元素内容"</code><code>);</code></p> <p><code>e.appendChild(t);&nbsp;&nbsp;&nbsp; </code><code>//把元素内容插入元素中去</code></p> </td> 
  </tr> 
 </tbody> 
</table>

**2、插入节点**

在JavaScript中，插入节点有2种方法：appendChild()和insertBefore()。

（1）appendChild()

在JavaScript中，我们可以使用appenChild()方法把新的节点插入到当前节点的“内部”。

语法：

<table> 
 <tbody> 
  <tr> 
   <td> <p>1</p> </td> 
   <td> <p><code>obj.appendChild(</code><code>new</code><code>)</code></p> </td> 
  </tr> 
 </tbody> 
</table>

说明：

obj表示当前节点，new表示新节点。

（2）insertBefore()

在JavaScript中，我们可以使用insertBefore()方法将新的子节点添加到当前节点的“末尾”。

语法：

<table> 
 <tbody> 
  <tr> 
   <td> <p>1</p> </td> 
   <td> <p><code>obj.insertBefore(</code><code>new</code><code>,ref)</code></p> </td> 
  </tr> 
 </tbody> 
</table>

说明：

obj表示父节点；

new表示新的子节点；

ref指定一个节点，在这个节点前插入新的节点。

**3、删除节点**

在JavaScript中，我们可以使用removeChild()方法来删除当前节点下的某个子节点。

语法：

<table> 
 <tbody> 
  <tr> 
   <td> <p>1</p> </td> 
   <td> <p><code>obj.removeChild(oldChild);</code></p> </td> 
  </tr> 
 </tbody> 
</table>

说明：

参数obj表示当前节点，而参数oldChild表示需要当前节点内部的某个子节点。

**4、复制节点**

在JavaScript中，我们可以使用cloneNode()方法来实现复制节点。

语法：

<table> 
 <tbody> 
  <tr> 
   <td> <p>1</p> </td> 
   <td> <p><code>obj.cloneNode(bool)</code></p> </td> 
  </tr> 
 </tbody> 
</table>

说明：

参数obj表示被复制的节点，而参数bool是一个布尔值，取值如下：

（1）1或true：表示复制节点本身以及复制该节点下的所有子节点；

（2）0或false：表示仅仅复制节点本身，不复制该节点下的子节点；

**5、替换节点**

在JavaScript中，我们可以使用replaceChild()方法来实现替换节点。

语法：

<table> 
 <tbody> 
  <tr> 
   <td> <p>1</p> </td> 
   <td> <p><code>obj.replaceChild(</code><code>new</code><code>,old)</code></p> </td> 
  </tr> 
 </tbody> 
</table>

说明：

obj，表示被替换节点的父节点；

new，表示替换后的新节点；

old，需要被替换的旧节点。

**6、innerHTML和innerText**

在JavaScript中，我们可以使用innerHTML和innerText这2个属性很方便地获取和设置某一个元素内部子元素或文本。

innerHTML属性被多数浏览器所支持，而innerText只能被IE、chrome等支持而不被Firefox支持。

**7、JavaScript操作CSS样式**

在JavaScript中，对于元素的CSS操作，我们使用的是DOM对象中的style对象来操作。

语法：

<table> 
 <tbody> 
  <tr> 
   <td> <p>1</p> </td> 
   <td> <p><code>obj.style.属性名;</code></p> </td> 
  </tr> 
 </tbody> 
</table>

说明：

obj指的是DOM对象，也就是通过document.getElementById()等获取而来的DOM元素节点。

## 6、JavaScript对象 ##

### 一、事件是什么？ ###

在JavaScript中，事件往往是页面的一些动作引起的，例如当用户按下鼠标或者提交表单，甚至在页面移动鼠标时，事件都会出现。

### 二、JavaScript事件 ###

在JavaScript中，调用事件的方式共有2种：

（1）在script标签中调用；

在script标签中调用事件，也就是在<script></script标签内部调用事件。

语法：

<table> 
 <tbody> 
  <tr> 
   <td> <p>1</p> <p>2</p> <p>3</p> <p>4</p> <p>5</p> </td> 
   <td> <p><code>var</code> <code>变量名 = document.getElementById(</code><code>"元素id"</code><code>);</code><code>//获取某个元素，并赋值给某个变量</code></p> <p><code>变量名.事件处理器 = </code><code>function</code><code>()</code></p> <p><code>{ </code></p> <p><code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>……</code></p> <p><code>}</code></p> </td> 
  </tr> 
 </tbody> 
</table>

举例：

<table> 
 <tbody> 
  <tr> 
   <td> <p>1</p> <p>2</p> <p>3</p> <p>4</p> <p>5</p> <p>6</p> <p>7</p> <p>8</p> <p>9</p> <p>10</p> <p>11</p> <p>12</p> <p>13</p> <p>14</p> <p>15</p> </td> 
   <td> <p><code>&lt;!DOCTYPE html&gt;</code></p> <p><code>&lt;html xmlns=</code><code>"<a href="http://www.w3.org/1999/xhtml" rel="nofollow">http://www.w3.org/1999/xhtml</a>"</code><code>&gt;</code></p> <p><code>&lt;head&gt;</code></p> <p><code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>&lt;title&gt;&lt;/title&gt;</code></p> <p><code>&lt;/head&gt;</code></p> <p><code>&lt;body&gt;</code></p> <p><code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>&lt;input id=</code><code>"btn"</code> <code>type=</code><code>"button"</code> <code>value=</code><code>"提交"</code> <code>/&gt;</code></p> <p><code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>&lt;script type=</code><code>"text/javascript"</code><code>&gt;</code></p> <p><code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>var</code> <code>e = document.getElementById(</code><code>"btn"</code><code>);</code></p> <p><code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>e.onclick = </code><code>function</code> <code>() { </code></p> <p><code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>alert(</code><code>"绿叶学习网"</code><code>);</code></p> <p><code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>}</code></p> <p><code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>&lt;/script&gt;</code></p> <p><code>&lt;/body&gt;</code></p> <p><code>&lt;/html&gt;</code></p> </td> 
  </tr> 
 </tbody> 
</table>

在浏览器预览效果如下：

![JavaScript事件调用方式][JavaScript 10]

分析：

当点击了按钮之后，JavaScript就会调用鼠标的点击（onclick）事件，效果如下：

![JavaScript调用事件][JavaScript 11]

很多人觉得很奇怪，document.getElementById()获取的是一个元素，能赋值给一个变量吗？答案是可以的。那问题又来了，为什么要使用document.getElementById()来获取一个元素赋值给一个变量呢？用以下代码不行么？

<table> 
 <tbody> 
  <tr> 
   <td> <p>1</p> <p>2</p> <p>3</p> <p>4</p> <p>5</p> </td> 
   <td> <p><code>&lt;script type=</code><code>"text/javascript"</code><code>&gt;</code></p> <p><code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>document.getElementById(</code><code>"btn"</code><code>).onclick = </code><code>function</code><code>{ </code></p> <p><code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>alert(</code><code>"绿叶学习网"</code><code>);</code></p> <p><code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>}</code></p> <p><code>&lt;/script&gt;</code></p> </td> 
  </tr> 
 </tbody> 
</table>

其实上述代码也是可行的，只不过呢，如果不使用document.getElementById()来获取一个元素赋值给一个变量，以后我们如果要对该元素进行多次不同操作，岂不是每次都要写document.getElementById()？这样的话，代码就会显得很冗余。

（2）在元素中调用；

在元素事件中引入JS，就是指在元素的某一个属性中直接编写JavaScript程序或调用JavaScript函数，这个属性指的是元素的“事件属性”。

举例1：（在元素事件属性中直接编写JavaScript）

<table> 
 <tbody> 
  <tr> 
   <td> <p>1</p> <p>2</p> <p>3</p> <p>4</p> <p>5</p> <p>6</p> <p>7</p> <p>8</p> <p>9</p> </td> 
   <td> <p><code>&lt;!DOCTYPE html&gt;</code></p> <p><code>&lt;html xmlns=</code><code>"<a href="http://www.w3.org/1999/xhtml" rel="nofollow">http://www.w3.org/1999/xhtml</a>"</code><code>&gt;</code></p> <p><code>&lt;head&gt;</code></p> <p><code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>&lt;title&gt;&lt;/title&gt;</code></p> <p><code>&lt;/head&gt;</code></p> <p><code>&lt;body&gt;</code></p> <p><code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>&lt;input type=</code><code>"button"</code> <code>onclick=</code><code>"alert('绿叶学习网')"</code> <code>value=</code><code>"按钮"</code><code>/&gt;</code></p> <p><code>&lt;body&gt;</code></p> <p><code>&lt;/html&gt;</code></p> </td> 
  </tr> 
 </tbody> 
</table>

在浏览器预览效果如下（点击按钮后的效果）：

![在元素中调用JavaScript事件][JavaScript 12]

举例：

<table> 
 <tbody> 
  <tr> 
   <td> <p>1</p> <p>2</p> <p>3</p> <p>4</p> <p>5</p> <p>6</p> <p>7</p> <p>8</p> <p>9</p> <p>10</p> <p>11</p> <p>12</p> <p>13</p> <p>14</p> <p>15</p> </td> 
   <td> <p><code>&lt;!DOCTYPE html&gt;</code></p> <p><code>&lt;html xmlns=</code><code>"<a href="http://www.w3.org/1999/xhtml" rel="nofollow">http://www.w3.org/1999/xhtml</a>"</code><code>&gt;</code></p> <p><code>&lt;head&gt;</code></p> <p><code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>&lt;title&gt;&lt;/title&gt;</code></p> <p><code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>&lt;script type=</code><code>"text/javascript"</code><code>&gt;</code></p> <p><code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>function</code> <code>alertMessage()</code></p> <p><code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>{ </code></p> <p><code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>alert(</code><code>"绿叶学习网"</code><code>);</code></p> <p><code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>}</code></p> <p><code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>&lt;/script&gt;</code></p> <p><code>&lt;/head&gt;</code></p> <p><code>&lt;body&gt;</code></p> <p><code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>&lt;input type=</code><code>"button"</code> <code>onclick=</code><code>"alertMessage()"</code> <code>value=</code><code>"按钮"</code><code>/&gt;</code></p> <p><code>&lt;body&gt;</code></p> <p><code>&lt;/html&gt;</code></p> </td> 
  </tr> 
 </tbody> 
</table>

在浏览器预览效果（点击按钮后的效果）如下：

![在元素中调用事件][format_png]

分析：

那么这两种方法有什么本质的区别呢？其实，第2种方法不需要使用getElementById()等方法来获取DOM，然后才调用函数或方法。因为它是直接在JavaScript元素中调用的。

这2种调用JavaScript事件的方式，大家刚刚开始看不理解没关系，我们只是给大家说个语法，留个印象。在接下来的章节中，我们会经常接触。

**1、鼠标事件**

<table>  JavaScript鼠标事件  
 <thead> 
  <tr> 
   <th>事件</th> 
   <th>说明</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>onclick</td> 
   <td>鼠标单击事件</td> 
  </tr> 
  <tr> 
   <td>ondbclick</td> 
   <td>鼠标双击事件</td> 
  </tr> 
  <tr> 
   <td>onmouseover</td> 
   <td>鼠标移入事件</td> 
  </tr> 
  <tr> 
   <td>onmouseout</td> 
   <td>鼠标移出事件</td> 
  </tr> 
  <tr> 
   <td>onmousemove</td> 
   <td>鼠标移动事件</td> 
  </tr> 
  <tr> 
   <td>onmousedown</td> 
   <td>鼠标按下事件</td> 
  </tr> 
  <tr> 
   <td>onmouseup</td> 
   <td>鼠标松开事件</td> 
  </tr> 
 </tbody> 
</table>

**2、键盘事件**

JavaScript键盘事件只有3个：

<table>  JavaScript键盘事件  
 <thead> 
  <tr> 
   <th>方法</th> 
   <th>说明</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>onkeydown</td> 
   <td>按下键事件（包括数字键、功能键）</td> 
  </tr> 
  <tr> 
   <td>onkeypress</td> 
   <td>按下键事件（只包含数字键）</td> 
  </tr> 
  <tr> 
   <td>onkeyup</td> 
   <td>放开键事件（包括数字键、功能键）</td> 
  </tr> 
 </tbody> 
</table>

三个事件的执行顺序如下：onkeydown -> onkeypress ->onkeyup。

**3、表单事件**

在JavaScript中，常用的表单事件有4种：

<table>  JavaScript鼠标事件  
 <thead> 
  <tr> 
   <th>事件</th> 
   <th>说明</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>onfocus</td> 
   <td>获取焦点事件</td> 
  </tr> 
  <tr> 
   <td>onblur</td> 
   <td>失去焦点事件</td> 
  </tr> 
  <tr> 
   <td>onchange</td> 
   <td>状态改变事件</td> 
  </tr> 
  <tr> 
   <td>onselect</td> 
   <td>选中文本事件</td> 
  </tr> 
 </tbody> 
</table>

**4、编辑事件**

在JavaScript中，常见的编辑事件有3种：

<table>  JavaScript编辑事件  
 <thead> 
  <tr> 
   <th>方法</th> 
   <th>说明</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>oncopy</td> 
   <td>复制事件</td> 
  </tr> 
  <tr> 
   <td>oncut</td> 
   <td>剪切事件</td> 
  </tr> 
  <tr> 
   <td>onpaste</td> 
   <td>粘贴事件</td> 
  </tr> 
 </tbody> 
</table>

这3个事件都对应有一个“onbeforeXXX”事件，表示发生在该事件之前的事件。

**5、页面相关事件**

在JavaScript中，常用的页面相关事件有3种：

<table>  JavaScript编辑事件  
 <thead> 
  <tr> 
   <th>方法</th> 
   <th>说明</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>onload</td> 
   <td>页面加载事件</td> 
  </tr> 
  <tr> 
   <td>onresize</td> 
   <td>页面大小事件</td> 
  </tr> 
  <tr> 
   <td>onerror</td> 
   <td>页面或图片加载出错事件</td> 
  </tr> 
 </tbody> 
</table>

[HTML_HTML5]: https://blog.csdn.net/wuyxinu/article/details/103515157
[CSS]: https://blog.csdn.net/wuyxinu/article/details/103583618
[JS-]: https://blog.csdn.net/wuyxinu/article/details/103642800
[JS- 1]: https://blog.csdn.net/wuyxinu/article/details/103646041
[jQuery]: https://blog.csdn.net/wuyxinu/article/details/103669718
[Node.js _ Gulp]: https://blog.csdn.net/wuyxinu/article/details/103774211
[MongoDB _ Express]: https://blog.csdn.net/wuyxinu/article/details/103836507
[Vue_-_APP]: https://blog.csdn.net/wuyxinu/article/details/103684950
[HTML]: http://www.lvyestudy.com/les_hj/html_list.aspx
[Link 1]: http://www.lvyestudy.com/les_hj/hj_1.1.aspx
[JavaScript]: https://imgconvert.csdnimg.cn/aHR0cDovL3d3dy5sdnllc3R1ZHkuY29tL0FwcF9pbWFnZXMvbGVzc29uL2pzLzEtMS0xLnBuZw?x-oss-process=image/format,png
[JavaScript tabs]: https://imgconvert.csdnimg.cn/aHR0cDovL3d3dy5sdnllc3R1ZHkuY29tL0FwcF9pbWFnZXMvbGVzc29uL2pzLzEtMS0yLnBuZw?x-oss-process=image/format,png
[JavaScript 1]: https://imgconvert.csdnimg.cn/aHR0cDovL3d3dy5sdnllc3R1ZHkuY29tL0FwcF9pbWFnZXMvbGVzc29uL2pzLzEtMS0zLnBuZw?x-oss-process=image/format,png
[JavaScript 2]: http://www.lvyestudy.com/les_js/js_list.aspx
[Array]: http://www.lvyestudy.com/les_js/js_8.1.aspx
[Date]: http://www.lvyestudy.com/les_js/js_7.1.aspx
[JavaScript 3]: https://imgconvert.csdnimg.cn/aHR0cDovL3d3dy5sdnllc3R1ZHkuY29tL0FwcF9pbWFnZXMvbGVzc29uL2pzLzEwLTItMS5wbmc?x-oss-process=image/format,png
[JavaScript window.open]: https://imgconvert.csdnimg.cn/aHR0cDovL3d3dy5sdnllc3R1ZHkuY29tL0FwcF9pbWFnZXMvbGVzc29uL2pzLzEwLTItMi5wbmc?x-oss-process=image/format,png
[JavaScript 4]: https://imgconvert.csdnimg.cn/aHR0cDovL3d3dy5sdnllc3R1ZHkuY29tL0FwcF9pbWFnZXMvbGVzc29uL2pzLzEwLTItMy5wbmc?x-oss-process=image/format,png
[JavaScript window.close]: https://imgconvert.csdnimg.cn/aHR0cDovL3d3dy5sdnllc3R1ZHkuY29tL0FwcF9pbWFnZXMvbGVzc29uL2pzLzEwLTItNC5wbmc?x-oss-process=image/format,png
[JavaScript resizeTo]: https://imgconvert.csdnimg.cn/aHR0cDovL3d3dy5sdnllc3R1ZHkuY29tL0FwcF9pbWFnZXMvbGVzc29uL2pzLzEwLTMtMS5wbmc?x-oss-process=image/format,png
[JavaScript resizeBy]: https://imgconvert.csdnimg.cn/aHR0cDovL3d3dy5sdnllc3R1ZHkuY29tL0FwcF9pbWFnZXMvbGVzc29uL2pzLzEwLTMtMi5wbmc?x-oss-process=image/format,png
[JavaScript 5]: https://imgconvert.csdnimg.cn/aHR0cDovL3d3dy5sdnllc3R1ZHkuY29tL0FwcF9pbWFnZXMvbGVzc29uL2pzLzEwLTUtMS5wbmc?x-oss-process=image/format,png
[setTimeout_clearTimeout]: https://imgconvert.csdnimg.cn/aHR0cDovL3d3dy5sdnllc3R1ZHkuY29tL0FwcF9pbWFnZXMvbGVzc29uL2pzLzEwLTYtMS5wbmc?x-oss-process=image/format,png
[JavaScript 6]: https://imgconvert.csdnimg.cn/aHR0cDovL3d3dy5sdnllc3R1ZHkuY29tL0FwcF9pbWFnZXMvbGVzc29uL2pzLzEwLTYtMi5wbmc?x-oss-process=image/format,png
[JavaScript setTimeout_clearTimeout]: https://imgconvert.csdnimg.cn/aHR0cDovL3d3dy5sdnllc3R1ZHkuY29tL0FwcF9pbWFnZXMvbGVzc29uL2pzLzEwLTYtMy5wbmc?x-oss-process=image/format,png
[setInterval_clearInterval]: https://imgconvert.csdnimg.cn/aHR0cDovL3d3dy5sdnllc3R1ZHkuY29tL0FwcF9pbWFnZXMvbGVzc29uL2pzLzEwLTYtNC5wbmc?x-oss-process=image/format,png
[JavaScript 7]: http://www.lvyestudy.com/les_js/js_14.7.aspx
[JavaScript setInterval_clearInterval]: https://imgconvert.csdnimg.cn/aHR0cDovL3d3dy5sdnllc3R1ZHkuY29tL0FwcF9pbWFnZXMvbGVzc29uL2pzLzEwLTYtNS5wbmc?x-oss-process=image/format,png
[window]: http://www.lvyestudy.com/les_js/js_10.1.aspx
[alert]: http://www.lvyestudy.com/les_js/js_11.2.aspx
[JavaScript alert]: https://imgconvert.csdnimg.cn/aHR0cDovL3d3dy5sdnllc3R1ZHkuY29tL0FwcF9pbWFnZXMvbGVzc29uL2pzLzExLTUtMS5wbmc?x-oss-process=image/format,png
[confirm]: http://www.lvyestudy.com/les_js/js_11.3.aspx
[JavaScript confirm]: https://imgconvert.csdnimg.cn/aHR0cDovL3d3dy5sdnllc3R1ZHkuY29tL0FwcF9pbWFnZXMvbGVzc29uL2pzLzExLTUtMi5wbmc?x-oss-process=image/format,png
[JavaScript prompt]: https://imgconvert.csdnimg.cn/aHR0cDovL3d3dy5sdnllc3R1ZHkuY29tL0FwcF9pbWFnZXMvbGVzc29uL2pzLzExLTUtMy5wbmc?x-oss-process=image/format,png
[CSS 1]: http://www.lvyestudy.com/les_cj/css_list.aspx
[Link 2]: http://www.lvyestudy.com/les_cj/cj_12.1.aspx
[JavaScript 8]: https://imgconvert.csdnimg.cn/aHR0cDovL3d3dy5sdnllc3R1ZHkuY29tL0FwcF9pbWFnZXMvbGVzc29uL2pzLzEyLTgtMS5wbmc?x-oss-process=image/format,png
[JavaScript 9]: http://www.lvyestudy.com/les_js/js_10.6.aspx
[getElementById]: https://imgconvert.csdnimg.cn/aHR0cDovL3d3dy5sdnllc3R1ZHkuY29tL0FwcF9pbWFnZXMvbGVzc29uL2pzLzEzLTQtMS5wbmc?x-oss-process=image/format,png
[getElementsByName]: https://imgconvert.csdnimg.cn/aHR0cDovL3d3dy5sdnllc3R1ZHkuY29tL0FwcF9pbWFnZXMvbGVzc29uL2pzLzEzLTQtMi5wbmc?x-oss-process=image/format,png
[JavaScript 10]: https://imgconvert.csdnimg.cn/aHR0cDovL3d3dy5sdnllc3R1ZHkuY29tL0FwcF9pbWFnZXMvbGVzc29uL2pzLzE0LTItMS5wbmc?x-oss-process=image/format,png
[JavaScript 11]: https://imgconvert.csdnimg.cn/aHR0cDovL3d3dy5sdnllc3R1ZHkuY29tL0FwcF9pbWFnZXMvbGVzc29uL2pzLzE0LTItMi5wbmc?x-oss-process=image/format,png
[JavaScript 12]: https://imgconvert.csdnimg.cn/aHR0cDovL3d3dy5sdnllc3R1ZHkuY29tL0FwcF9pbWFnZXMvbGVzc29uL2pzLzE0LTItMy5wbmc?x-oss-process=image/format,png
[format_png]: https://imgconvert.csdnimg.cn/aHR0cDovL3d3dy5sdnllc3R1ZHkuY29tL0FwcF9pbWFnZXMvbGVzc29uL2pzLzE0LTItNC5wbmc?x-oss-process=image/format,png