1.1 JavaScript 是什么 1

1

2

3

4

5

8

10

18

12

9

13

14

11

6

7

15

17

16

JavaScript简介

1.1 JavaScript 是什么

JavaScript是一种流行的通用脚本语言。使用JavaScript可以为呆板的Web页面注入活力，因为

基于JavaScript可以实现用户与页面的交互，并响应页面上发生的事件。JavaScript被形容为Web

页面之间的粘合剂①。不仅是商业站点，几乎所有的Web页面中都有JavaScript代码（见图1-1）。

——————————

① 不过JavaScript之父Brendan Eich认为不但如此。他在名为Innovators of the Net: Brendan Eich and JavaScript的文章中

写道：“ ‘ Web页面之间的黏合剂’ 这种说法的确琅琅上口，不过对于JavaScript真正发挥的作用来讲却描述得不

够公正。黏合剂会凝结变硬，但JavaScript要比黏合剂更具动态性。JavaScript更像催化剂，它可以触发反应，并使

事件继续执行下去。”

第 1 章

2 第 1 章 JavaScript 简介

图1-1 通过JavaScript赋予了生命力的一个动态Web页面（例如，将鼠标移动到箭头

后面的文字上，相应的文字就会变成带下划线的超链接形式）

LiveScript是JavaScript的前身，由Netscape的Brendan Eich于1995年开发完成，并同Netscape

Navigator 2.0 beta版一同发布。从LiveScript开始，JavaScript就成为了一种可以赋予静态HTML页

面生命力的脚本语言。JavaScript能运行在绝大多数平台上，并且与硬件无关。它是一种客户端语

言，运行于用户的浏览器中而不是服务器上①。微软的Internet Explorer和Mozilla Firefox是我们比

较常见的浏览器②，它们都直接内置了JavaScript（但JavaScript的应用不仅限于浏览器）。在语法

上，JavaScript同C、Perl和Java类似。例如，if语句同while和for循环几乎完全相同。同Perl一

样，JavaScript是一种解释语言，不是编译语言。

——————————

① 实际上。也存在服务器端实现的JavaScript版本，如Rhino。本书后面也简单提及。——编者注

② 目前主流浏览器Internet Explorer、Firefox、Chrome、Opera、Safari中，都内置了JavaScript引擎。——译者注

1.2 JavaScript 不是什么 3

1

2

3

4

5

8

10

18

12

9

13

14

11

6

7

15

17

16

由于JavaScript是同浏览器关联的，所以它跟HTML紧密集成。HTML在浏览器中由专门的网

络库和图形渲染器负责处理，而JavaScript代码则由浏览器内嵌的JavaScript解释器执行。当浏览

器请求页面的时候，服务器会通过网络将包括HTML和JavaScript语句在内的整个文档的全部内容

发送到客户端。在页面加载的时候，HTML内容会被按行读取并显示，遇到JavaScript起始标签后，

由JavaScript解释器进行解释。到达JavaScript结束标签后，继续进行HTML处理。

由浏览器处理的JavaScript被称作客户端JavaScript。虽然JavaScript大都被当做客户端脚本语

言来使用，不过也可以在Web浏览器以外的其他环境中使用。Netscape创建了服务器端的

JavaScript，以CGI语言（如Python或者Perl）的形式进行编程。不过本书的重点会放在JavaScript

最常见的使用方式上——运行于客户端，也就是浏览器上。

1.2 JavaScript 不是什么

JavaScript不是Java。“ Java同JavaScript就好比是汽车（Car）和地毯（Carpet）” ①，这种说法

尽管有些极端，但它告诉我们Java和JavaScript是非常不同的两种语言。

Java是由Sun公司开发的，而JavaScript由Netscape开发。Java应用可以脱离Web页面存在；而

JavaScript程序要嵌于Web页面中，并且在浏览器窗口中执行②。Java是一种强类型语言，有严格

的语法规则；而JavaScript是松散型语言并且更灵活。Java数据类型必须先声明再使用；而JavaScript

中诸如变量、参数和函数返回值类型等都不需要声明。Java程序是需要编译的；而JavaScript是被

——————————

① 出自Usenet讨论组，以及Beginning JavaScript with DOM Scripting and Ajax第4页。Christian Heilmann，APRESS，

2006。

② JavaScript解释器通常嵌入在Web浏览器中，但不限于浏览器。服务器和其他应用程序也都可以使用JavaScript解释器。

4 第 1 章 JavaScript 简介

浏览器内置的JavaScript引擎解释执行的。

JavaScript不是HTML，但JavaScript代码可以嵌入HTML文档，并用HTML的标签括起来。

JavaScript有自己的一套语法规则，需要按照特定的方式编写。JavaScript与HTML是两码事，但却

能在自身的语句中包含HTML内容。我们会在以后的讨论中进一步解释这些内容。

JavaScript不能用来读写客户端机器上的文件，写入cookie除外（详见第16章）。不能用

JavaScript来向服务器写入或者存储文件。JavaScript也不能用来打开或者关闭其他应用程序的窗

口。此外JavaScript还不能读取其他服务器发来的Web页面。

JavaScript是基于对象的，但并不严格地面向对象。这是由于它不像Java和C++一样，支持继

承和类这样传统的面向对象机制。同时Java和C++中的private、protected、public也不能应用于

JavaScript的方法上。

JavaScript不是唯一一种可以嵌入到应用程序中的语言。拿微软开发的VBScript来说，它同

JavaScript很类似，但是也嵌入到了微软的Internet Explorer中。

1.3 JavaScript 的用处

JavaScript程序被用来侦测和响应来自用户的事件，例如鼠标移到超链接或者图片之上等。这

些用户事件可以通过辅助导航、滚动消息和翻转、对话框、动态图像等方式来优化Web站点。有

了JavaScript，还可以在页面解析的同时动态控制页面的显示效果。在没有任何网络数据传输的情

况下，可以在表单提交至服务器之前就对用户所填内容进行验证。JavaScript还可用来检测用户的

1.4 JavaScript 及其在 Web 页面中的位置 5

1

2

3

4

5

8

10

18

12

9

13

14

11

6

7

15

17

16

浏览器是否装有插件，并在必要的情况下将用户引导至新的页面来获取插件。JavaScript拥有字符

串函数，支持正则表达式，可以此来检测电子邮件地址、社会保障号码、信用卡数据等的有效性。

JavaScript是一种编程语言，其核心语言描述了变量、数据类型、循环控制、if/else语句、switch

语句、函数和对象等的基本结构①。JavaScript可用来进行算术计算，操作日期和时间，并与数组、

字符串和对象协同操作等。JavaScript处理用户发起的事件、设置计时器、动态更改内容和样式。

JavaScript还能读写cookie值，并基于cookie值动态生成HTML。

1.4 JavaScript 及其在 Web 页面中的位置

分析图

1. 角色

图1-2中的角色是Web页面整个生命周期中所涉及的如下应用。

(1) 浏览器（Firefox、Internet Explorer、Safari、Opera）。这是执行JavaScript的地方。

(2) 网络（HTTP）。

(3) 服务器（Apache、Windows IIS、Zeus）。

(4) 服务器模块（PHP、ASP.NET、ColdFusion、Java servlet）。

(5) 外部文件以及/或者数据库（MySQL、Oracl、Sybase）。

2. 步骤

图1-2展示了一个Web页面从客户端发起请求到获得响应的整个生命周期。

——————————

① JavaScript语言的最新版是1.8.1。Mozilla公司和微软公司均提供支持。

6 第 1 章 JavaScript 简介

图1-2 一个典型Web页面的生命周期

(1) 在图的左侧，我们看到请求是从客户端或者说浏览器发起的。用户通过在浏览器的URL

地址栏中输入Web站点的地址来发起请求。“ 请求” 是通过HTTP（Hypertext Transfer Protocol，

超文本传输协议）提交至服务器的。另一侧的Web服务器作出响应，简单地将文件返回给客户

端浏览器。接着浏览器就会提取HTML标签，格式化页面并显示，然后等待另一个请求。如果

页面包含JavaScript标签，那么JavaScript解释器就会基于用户触发的事件来执行这些代码，这

些事件包括单击按钮、将鼠标移动到超链接或者图片上、提交表单等。正是有了JavaScript，

页面才具备了交互性。JavaScript检测所有在页面上发生的事件，并进行响应。它可以对表单

填写、反馈、动画、幻灯片放映和多媒体等进行处理。能响应按键、图片鼠标悬停、用户提

交表单等事件。JavaScript可以读取cookie并验证数据。可以动态修改HTML表格的某单元格，

修改某段落中的文字，或者为某个列表增加一行可选项。不过不是所有的事情JavaScript都能

胜任。它不能关闭其他程序打开的窗口，不能查询数据库，不能更新上传文件控件的值，也

不能对服务器端的文件进行写操作。在JavaScript解释器完成了自己的任务后，页面就完全显

客户端

服务器获取网页

联网

服务器

数据库

此处显示网页

1.5 Ajax 是什么 7

1

2

3

4

5

8

10

18

12

9

13

14

11

6

7

15

17

16

示出来了，此时便可再一次发起请求。在浏览器和服务器之间的往返被称作请求/响应循环，

是Web运转的基础。

(2) 在客户端和服务器端之间的云代表网络。这个网络可以像包含数万亿台电脑的Internet一

样非常巨大，也可以像一个公司的局域网一样小，还可以是一台个人台式电脑或者手持设备的无

线网络。用户不必关心网络的大小——这对用户是透明的。客户端同服务器传送文件的协议被称

作HTTP协议。

(3) 服务器端包括支持HTTP协议的Web服务器，例如Apache，微软公司的IIS和lighttpd①等。

Web服务器通常既能接收基于Web的请求，也能进行相应的响应，是一种泛型程序。在大多数情

况下，所谓的响应仅仅是从服务器本地文件系统中获取某个文件。对于动态Web页面而言，需

要处理很多JavaScript所不能胜任的工作，例如处理网页表单中的内容，发送电子邮件，启动一

个会话（session）或者是连接数据库等。这些事件都要在服务器端完成，Web服务器把查询请求

转发给对应的助手程序来处理。像Apache、IIS等Web服务器都有一组助手应用程序来处理各种

语言。助手程序有CGI/Perl脚本编译器之类的外部程序，也有ColdFusion， ASP.NET和PHP脚本

处理器等这种内嵌在服务器中的应用。举个例子，如果Web服务器收到一个PHP的请求，会先

查找哪个助手程序是用来处理PHP请求的，然后把请求转发给PHP模块，最后等待这个模块返回

结果。

1.5 Ajax 是什么

Ajax是Asny chronous JavaScript and XML（异步JavaScript和XML）的缩写形式，这种说法是

在2005年由Jesse James Garrett首创的。Ajax并不新鲜，早在1996年就有了。Ajax用来在无需等待

服务器端响应的情况下创建快速的交互。在图1-2的Web生命周期中可以看到，浏览器向服务器发

出了一项请求，然后等待响应。通常会在地址栏上显示一个转动着的轮子形状的载入图标，提醒

用户页面正在加载。在用户等待的同时，浏览器也在一起等待，然后等到每个请求序列都完成后，

还要继续等待整个页面全部重新加载一次才能看到新页面的内容。Ajax可以在无需刷新整个页面

的情况下实现数据在浏览器和服务器间的传送，页面中只有一部分内容被替换掉。即使用户在

进行滚动、缩放、填写表单等操作的同时，请求照样可以发出。由于交互是异步的，所以请求会

无需任何等待时间而得到最快速的响应。Ajax的应用实例有很多，如Ajax Stock Qutos Ticker

（SentoSoft LTD）、Flickr的图片存储和显示、Gmail、Google Suggest等，而最棒的一个例子莫过

于maps.google.com上的Google Maps了（见图1-3）。

——————————

① Lighttpd是众多OpenSource轻量级的Web服务器中较为优秀的一个。——译者注

8 第 1 章 JavaScript 简介

在浏览Google Maps网站的时候，用户会感受到完整而快速的交互性。用户可以对地图进行

放大、缩小、随意拖动，在地图上获取两点间的位置信息、观察地形、查看交通状况、浏览卫星

图片等。在第18章我们会详细讨论这种技术的实现细节，不过暂时我们可以将它视为增强型的

JavaScript。

图1-3 Google使用Ajax进行交互（©2010 Google）

1.6 JavaScript 是什么样子的

示例1-1演示了一小段JavaScript代码。在Web页面上显示简单的HTML表格单元格，其中有一

条滚动消息（见图1-4）。没有JavaScript的话，这段消息就是静态的。而有了JavaScript以后，消息

会持续不断地沿着屏幕滚动，为死气沉沉的页面带来了生机。以后我们会详细解释这段代码，在

这里，只是用来告诉大家JavaScript代码是什么样子。注意<script></script>这两个加粗了的

1.6 JavaScript 是什么样子的 9

1

2

3

4

5

8

10

18

12

9

13

14

11

6

7

15

17

16

标签，在这两个标签中间就是能产生滚动效果的JavaScript代码。不用多久，我们就能看懂并编写

这类脚本了。

示例1-1

图1-4 JavaScript生成了滚动文字（示例1-1的输出效果）

这就是JavaScript。耐心点，不用多久你就能写出比这更好的代码了

10 第 1 章 JavaScript 简介

1.7 JavaScript 及其在 Web 开发中承担的角色

在开始学习JavaScript以后，我们会把JavaScript直接嵌入到HTML页面中。我们了解了核心编

程架构以后，就会明白页面是如何通过文档对象模型（DOM）来进行组织的，同时也会知道为

何JavaScript能够访问到页面中的所有元素。最后我们还会介绍层叠样式表（CSS），这是一种能

让开发人员通过格式化展现方式实现页面设计的技术。HTML、CSS和JavaScript三者结合，可以

让开发人员制作出结构化、样式化和交互性的Web页面。随着开发人员知识的不断增长，开发出

来的Web页面也在成长，直到有一天可以创建出更多的页面并将它们链接到一起。届时开发人员

还必须确保不论访客在使用什么浏览器，都会得到一个好的用户体验，同时试着在幕后对站点进

行管理。从这些角度来看，Web设计者已经认可的Web页面有三个基础：内容、内容展现的方式

和内容的处理逻辑。

三层

当Web页面在客户端（浏览器）进行设计的时候，很可能先是一份简单的HTML静态页面。

随后设计师会添加一些样式，让其视觉上拥有漂亮的外观。最后为了让页面显得生动，就需要添

加JavaScript代码，实现用户的交互功能，使得页面可以完成某些操作。这样，一个完整的Web

页面可以被分成独立的三层：内容或结构层、样式或展现层、行为层（见图1-5）。每层都需要细

致的设计和娴熟的技术。设计师不一定非得会编程，反过来，程序员也没有必要一定懂设计。层

的分离使得设计师能够专注于他所擅长的领域，同时程序员可以在JavaScript应用中调试代码而不

用担心打乱了页面设计。当然层与层之间的界线往往很模糊，不过从行为中分离内容结构和样式，

1.7 JavaScript 及其在 Web 开发中承担的角色 11

1

2

3

4

5

8

10

18

12

9

13

14

11

6

7

15

17

16

可以使得维护变得更简单，能减少重复性工作，甚至减少调试工作。

图1-5 组成Web页面的三层

1. 内容或结构

在Web开发中，HTML/XML标记组成了内容层，并且搭建了Web页面的结构。内容层就是访

问者到达Web页面后能看到的东西。内容包括文本或者图片，以及访问者用来在站点内导航的超

链接等。由于HTML/XML元素被用来搭建页面内容结构，因此误用了这些元素后虽然不会马上

产生视觉效果方面的问题，但是在应用CSS和JavaScript的时候情况可能就不一样了。举例来说，

打乱heading的顺序引发字体大小的变化，先是H1、H3然后才用H2标签，这就是一个不正确的顺

序。这些标签旨在定义页面显示的结构。浏览器将Web页面视为由对象组成的树状结构模型，在

这个模型中，每个HTML元素（例如HEAD、BODY、H1）都是一个对象。这个文档树，也就是

DOM，为我们的页面定义了逻辑分层结构，这也成为了创建动态内容的一个重要工具。正是因

JavaScript行为层

CSS样式层

HTML内容层

12 第 1 章 JavaScript 简介

为结构是如此重要，所以在进入下一层（CSS展现层）之前，有效标记应该是第一重要的。在1.12

节我们会讨论标记验证工具。

2. 样式或展现

样式或展现是指在什么样的媒体类型上页面会如何显示。这一层是由CSS定义的。没有CSS

的话，几乎所有的展现都是包含在HTML标签内的。所有的字体颜色、背景样式、元素位置和对

齐方式、边框等都必须明确标注，往往重复性很高，都包含在页面的HTML标记中。假如开发人

员决定要将页面中所有的标题设置成蓝色，那么必须逐一去设置页面中的标题。CSS的出现改变

了这种状况。设计师通过CSS可以将展现类的内容分离出来，单独保存为样式表，从而使得HTML

标签大大简化了。有了CSS以后，在一处修改字体颜色就可以影响到站点中的所有页面。尽管样

式代码可以嵌入页面中，不过最常见的方式还是在独立的CSS文件中保存样式代码，以便进行统

一的样式更改。通过一份CSS文件，即可控制任意多份页面的样式。使用外部样式表的方式可以

为页面瘦身，减少代码量，并且可以让开发人员在不影响HTML内容的情况下对整个页面进行样

式修正。此外，CSS还可以同JavaScript和DOM协作，创建动态展现内容，也就是DHTML。

3. 行为

行为层是指能让页面执行一些动作的层。对于大部分Web页面来说，行为的第一层是

JavaScript。JavaScript可以基于用户交互来动态控制Web页面的元素，这些用户交互包括敲击键盘、

移动鼠标、提交表单等。JavaScript还便于进行在线样式变更。虽然传统意义上CSS和JavaScript

是分离的两层，但有了DOM之后，这两者紧密协作，之间的界线也越来越模糊。JavaScript代码

1.8 JavaScript 和事件 13

1

2

3

4

5

8

10

18

12

9

13

14

11

6

7

15

17

16

也通常保存在外部文件中，这些外部文件被放在库中，便于其他程序共享访问。可参考

http://JavaScriptlibraries.com/。

4. 不唐突的JavaScript

“ 确保你使用的是不唐突的JavaScript。” 在真正开始使用JavaScript后开发人员可能会听人提

到这句话，它指的是我们刚才讨论的三层结构。JavaScript代码放置在自己的文件中，而

HTML/XHTML/XML和CSS也分别保留在它们相应的文件中，通过这种技巧就可以将JavaScript

从Web开发的其他两层中彻底分离出来。在接下来的章节中，我们会把大部分的JavaScript示例代

码同HTML文档放在一份文件中，这是因为这些文件都比较小，而且我们的目的在于演示

JavaScript语言的某个方面。所以在学习之初，我们用的是“ 唐突的” JavaScript。

在有了JavaScript基础并开始开发大型应用的时候，开发人员可能会想更全面地对此进行了

解 。 对 于 不 唐 突 的 JavaScript 的 七 条 规 则 ， 可 以 参 考 http://icant.co.uk/articles/seven-rules-of-

unobtrusive-JavaScript/。

1.8 JavaScript 和事件

HTML是静态的，它组织和定义了在浏览器中Web页面的元素会如何呈现。例如，HTML可

以用来创建按钮、表格、文本框以及填写表单，却无法对用户的输入作出响应。而JavaScript是动

态的，它可以异步响应用户触发的事件。例如，用户填写完表单，单击按钮、链接或图片，或者

将鼠标移动到超链接上的时候，JavaScript可以分别作出响应，并与用户产生动态交互。JavaScript

14 第 1 章 JavaScript 简介

可以在信息提交至服务器之前检查用户输入并进行验证，也可以在鼠标移至超链接或单击按钮的

时候显示一幅新图片，还可以改变页面上对象的位置，甚至在线添加、删除、修改HTML元素。

这些事件会在第13章进行详细的讨论。但在学习JavaScript之初，开发人员就应该对这些事件给予

足够重视，因为这是JavaScript的基础，而且在以后的示例代码中都会用到它们。

最简单的事件形式是跟HTML紧密结合的。在下面这个例子中，用<form>标签和相关属性

创建了HTML表单。同type和value属性类似，JavaScript的onClick事件处理函数也是HTML

<form>标签的一个属性。输入字段的类型是button，为其赋值为Pinch me。当用户在浏览器

窗口中单击此按钮的时候，会触发名为click的JavaScript事件。为onClick事件处理函数赋

的值就是在单击按钮以后要执行的命令。在我们的例子中，会弹出一个显示“ OUCH！！” 的小窗

口。示例1-2的输出效果见图1-6和图1-7。

示例1-2

图1-6 用户单击按钮，触发单击事件

1.9 标准化 JavaScript 和 W3C 15

1

2

3

4

5

8

10

18

12

9

13

14

11

6

7

15

17

16

图1-7 单击Pinch me按钮后，触发了onClick事件处理函数

表1-1列出了一些JavaScript能够处理的事件。

表1-1 JavaScript事件处理函数

事件处理函数 如何触发

onAbort 终止了图片加载

onBlur 用户移出了某表单元素

onChange 用户修改了表单元素的值

onClick 用户单击了类似按钮的表单元素

onError 程序在加载图片的时候出现错误

onFocus 用户激活了某表单元素

onLoad 页面加载完毕

onMouseOut 鼠标从某对象上移出了

onMouseOver 鼠标移动到某对象上

onSubmit 用户提交表单

onUnLoad 用户离开了窗口或框架页

1.9 标准化 JavaScript 和 W3C

ECMAScript的另一个名字更被人熟知，那就是JavaScriptTM。它不仅是各个Web浏览器的核

心组件，也是促使万维网的应用具备可交互性的核心标准之一。

——Ecma International

20世纪90年代，微软的Internet Explorer和Netscape一直在浏览器市场争夺统治地位。它们以

16 第 1 章 JavaScript 简介

非常快的速度往各自的浏览器中添加新特性和专有功能，进而导致了两者的不兼容性，往往同一

个页面在两种浏览器中的显示效果是不同的。这段浏览器战争时代最终以微软Internet Explorer

的胜利宣告结束。现在，主流浏览器之间看起来相对比较和平，原因是W3C（World Wide Web

Consortium，万维网联盟）设立了一些标准，只有遵循这些标准的浏览器才能称为合格的浏览器。

为了确保Web页面开发商所遵循的JavaScript标准只有同一个版本，ECMA （European

Computer Manufacturer Association，欧洲计算机制造商协会①）同Netscape合作发布了JavaScript

的国际标准——ECMAScript。ECMAScript基于核心的JavaScript，在所有支持标准的应用中都能

保持一致。ECMA标准的第一版被纳入了ECMA-262规范中。不论是JavaScript（Mozilla公司版本）

还是JScript（微软公司专门为Internet Explorer设计的版本）都是ECMAScript的超集，虽然两者

都有各自的一些特性，但都在努力做好与ECMA的兼容性②。在ECMAScript发布后，W3C开始

致力于DOM标准化，也就是熟知的DOM 1，并在1998年末推荐使用。DOM 2发布于2000年末。

而最近的DOM规范是在2004年4月发布的。到了2005年绝大部分W3C DOM都已被常见的支持

ECMAScript的浏览器支持了。其中包括微软的Internet Explorer 6（2001）、基于Gecko的浏览器

（如Mozilla Firefox和Camino）、Konqueror、Opera和Safari。事实上95%的主流浏览器都支持DOM

规范。

最新的ECMA-252第5版规范的信息可以从http://www.ecmascript.org/获取到。

——————————

① 欧洲计算机制造商协会是ECMA1994年之前的名称，由于其国际性，现在一般直接说Ecma国际。——编者注

② ECMAScript第5版添加了一些新特性，现已具备使用和测试条件了（2009）。

1.9 标准化 JavaScript 和 W3C 17

1

2

3

4

5

8

10

18

12

9

13

14

11

6

7

15

17

16

1.9.1 JavaScript 对象

与JavaScript相关的所有事情都涉及对象，就像在现实生活中要做什么事情都离不开物品一

样。在JavaScript看来，Web页面就是很多不同类型的对象，有浏览器对象、页面对象，每个页面

的元素也都是一种对象，例如表单、图片、链接等。事实上页面中的所有HTML元素（H1、P、

TD、FORM和HREF）都可被看作对象。JavaScript有一组内置的核心对象，通过它可以操作字符

串、数字、函数、日期等。JavaScript还允许用户自己创建对象。当看到以下的代码

document.write("Hello, world");

时，当前页面就是document对象。对象后面有一个点将对象和write方法分开。方法就是一种

函数，通过它可以操作对象。方法后面一般带有一组括号，括号中可能包含参数也可能为空。在

这个简单的例子中，括号中包含的是“ Hello, world” 字符串，用来告诉JavaScript将这个字符串

写到页面窗口上，即浏览器中。在第8章我们会详细讨论对象的细节。因为所有的东西在JavaScript

中都被当做是对象，所以在学习之初理解这些概念是非常重要的。

1.9.2 文档对象模型

什么是DOM？DOM就是一个由HTML/XML组成的基本Web文档。浏览器的任务就是把这些

标记转换成Web页面，以便用户能在浏览器窗口中看到文本、输入框、图片、表格等信息。解析

HTML页面并保存为模型也是浏览器的一项工作，这种模型就叫做DOM。它跟家族树的结构很类

似，由父节点、子节点、兄弟节点等组成。树中的每个元素都同其他元素有关联。这些元素被称

为节点，最基本的父节点位于树顶。有了这样一种自上而下的树状模型，文档的各个元素便可被

18 第 1 章 JavaScript 简介

JavaScript访问（也可被其他应用访问）。JavaScript程序便因此具备了控制整个Web页面的能力。

这些能力包括导航、创建、添加、修改或者动态删除元素及相关内容。

之前我们提到过，在DOM 1①（见http://www.w3.org/DOM）中，W3C开发的应用程序接口（API）

标准已被所有主流浏览器支持，包括微软的Internet Explorer 6（2001）、基于Gecko的浏览器（如

Mozilla Firefox和Camino）、Konqueror、Opera和Safari。

在学习了JavaScript的基础之后，开发人员将会看到如何创建和操作对象、如何使用核心对象，

以及如何基于DOM使用JavaScript来控制整个Web页面。有了CSS、DOM和JavaScript，开发人员

可以动态地更改页面元素位置、绘制动画、创建滚动信息、基于用户事件使用漂亮的字体和颜色

改变页面风格，这些用户事件包括鼠标移动到一幅图片或超链接上、单击某个图标、提交填写完

的表单，或者仅仅是打开和关闭新窗口。图1-8显示的是一个HTML表格，从中我们可以看到它是

如何像W3C描述的那样将页面转化为了一棵树，其中每个元素都同它的父节点和兄弟节点相连。

——————————

① DOM Level 2和3也都已由W3C开发完成，但是绝大部分浏览器都支持DOM Level 1。

1.10 关于浏览器 19

1

2

3

4

5

8

10

18

12

9

13

14

11

6

7

15

17

16

图1-8 http://www.w3.org/TR/DOM-Level-2-Core/introduction.html

1.10 关于浏览器

当用户收到包含JavaScript的页面时，脚本会被发送至JavaScript解释器，在翻译器中执行脚本。

因为每种浏览器都有自己的解释器，所以代码如何执行往往也存在差别。同时浏览器厂商间的竞

争以及对各自旗下浏览器的修改升级，通常会引发新的不兼容性。不仅仅是不同类型的浏览器会

不兼容，即使是同一个的浏览器的不同版本也会存在这样的现象。因为主流浏览器融入了W3C标

准，所以相对以前，这种不一致的现象有逐渐减少的趋势。表1-2列出了现今的主流浏览器。

示例表格的DOM图形化表示如下所示。

示例表格的DOM图形化表示

20 第 1 章 JavaScript 简介

表1-2 主流浏览器

浏 览 器 网 站

Internet Explorer microsoft.com/windows/ie

Firefox mozilla.org/products/firefox

Safari apple.com/safari

Opera opera.com

Google Chrome google.com/chrome

Konqueror konqueror.org/

通过示例1-3的这小段代码就可以识别用户使用的是何种浏览器。尽管应用的名字可能会把

Firefox显示成Netscape，把Opera显示成Microsoft Internet Explorer，不过检查客户端的话，可以在

输出字符串中找到Firefox或者Opera（见图1-9）。用于检测浏览器类型的程序被称为浏览器探测

器。在第10章我们会有一个完整的示例。

示例1-3

1.10 关于浏览器 21

1

2

3

4

5

8

10

18

12

9

13

14

11

6

7

15

17

16

图1-9 示例1-3的输出

1.10.1 JavaScript 的版本

JavaScript也有历史。先由Netscape发明，第一个版本是JavaScript 1.0。这门新语言的第1版有

很多问题，存在了相当长的一段时间后才被更简洁的版本替代。微软公司也有一个与JavaScript

相当的脚本语言，叫做JScript。表1-3列出了JavaScript和JScript的各种版本。关于JavaScript的版

本和开发可参见http://ejohn.org/blog/versions-of-JavaScript/。

表1-3 JavaScript版本

JavaScript或者JScript版本 支持的浏览器

JavaScript 1.0（1996） Netscape Navigator 2.0、Internet Explorer 3.0

JavaScript 1.1（1996） Netscape Navigator 3.0、Internet Explorer 4.0

JavaScript 1.2（1997） Netscape Navigator 4.0-4.05、Internet Explorer 4.0

JavaScript 1.3（1998） ECMA-232、Netscape Navigator 4.06-4.7x、Internet Explorer 5.0

JavaScript 1.5（2000） ECMA-232、Netscape Navigator 6.0+，Mozilla Firefox、Internet

Explorer 5.5+, JScript 5.5、5.6、5.7、6

JavaScript 1.6（2006） Mozilla Firefox、Safari

JavaScript 1.7（2006） Mozilla Firefox、Safari、Google Chrome

JavaScript 1.8（2008） Mozilla Firefox

注：FireFox、Internet Explorer、Opera以及这些浏览器的新版本都支持JavaScript。此外HotJava 3也提供对JavaScript的支

持，此外还有Mac下的iCab、WebTV、OS X下的OmniWeb、QNX Voyager和Linux KDE环境下的Konqueror、NetBox

22 第 1 章 JavaScript 简介

for TV、AWeb和Voyager 3 for Amiga、SEGA Dreamcast和RISC OS下的ANT Fresco。

那么现在JavaScript发展到什么程度了？2009年12月，ECMA-262标准发布第5版。虽然

JavaScript只是ECMAScript的一种方言，不过JavaScript 1.8已经可以同ECMAScript第3版相媲美

了，并且是当前应用最广泛的版本（JavaScript 1.9也可以下载了）。为弄明白 JavaScript 2

（ECMAScript版本4）的一些提案，几年前Brendan Eich（JavaScript的发明者）在Web上发布了一

篇有意思的文章。不管怎么说，这篇文章指出了JavaScript语言当前状态下的优势和劣势，以及试

图去改变它会面临的障碍（见图1-10）。

图1-10 JavaScript 2及其网站，Brendan Eich的信息文件

1.10.2 你的浏览器遵循标准吗

现在主流的浏览器使用的是JavaScript 1.5及更高版本，这些版本的JavaScript都普遍遵循W3C

的标准。示例1-4的代码可以用来检测用户所使用的JavaScript是否是遵循DOM标准的主流版本

1.10 关于浏览器 23

1

2

3

4

5

8

10

18

12

9

13

14

11

6

7

15

17

16

（见图1-11）。getElementById和createTextNode都是W3C标准的一部分，为DOM提供支持。

示例1-4

图1-11 Internet Explorer支持标准

1.10.3 浏览器是否已启用 JavaScript

要检测浏览器是否启用了JavaScript，在Firefox下可以去目录Tools menu/Options/Content查看。

如果用户使用的是Safari浏览器，则选择menu/Preferences/Security。对于Internet Explorer，选择Tools

menu/Internet Options/Security/CustomLevel，去启用脚本（见图1-12）。如果是Opera，选择menu/

Preferences/Advanced/Content，单击Enable JavaScript。有一种简便的方法可以快速检测浏览器是否

启用了JavaScript，那就是访问http://www.mistered.us/test/alert.shtml并按提示操作（见图1-13）。

24 第 1 章 JavaScript 简介

图1-12 在Internet Explorer中启用JavaScript

图1-13 你的浏览器启用JavaScript了吗

1.11 JavaScript 代码放在哪儿

在学习JavaScript之前，开发人员应该具备一些基本的HTML知识，知道如何创建HTML文档。

虽然你并不需要是HTML的专家，但起码应该了解HTML的文档结构，会利用各种标签来将各种

1.11 JavaScript 代码放在哪儿 25

1

2

3

4

5

8

10

18

12

9

13

14

11

6

7

15

17

16

各样的内容显示 在浏览 器上。生成 HTML文档 后 ，再添加 JavaScript 代码就 非常简单了 。

（http://www.w3schools.com上有非常棒的教程。）而对于CSS，本书拿出了一章的篇幅来讲解。有

了CSS，就可以通过改变字体、颜色、背景、外边距等方式，仅仅用一个文件就能控制整个Web

页面的布局和样式。Web站点可以使用HTML、CSS和JavaScript来分别控制结构、样式和行为。

客户端的JavaScript代码是嵌入到HTML文档中的，代码可以放置在HTML的<head>和

</head>标签之间，也可以放置在<body>和</body>之间。很多开发人员倾向于将JavaScript代

码放在<head>标签里面，在后面会看到，有时候<head>标签中间是最适合放置函数定义和对象

的地方。如果开发人员希望在页面的特定部位显示一段文本，那就可能要把JavaScript代码放在

<body>标签里面（示例1-5所示）。否则页面上会出现多段脚本代码，而且在<head>和<body>

两种标签里面都得放置JavaScript代码。不管放在哪里，JavaScript代码都是以<script>标签开始，

以</script>结束的。如果JavaScript代码又长又复杂，或者有可能被多个页面共享使用，那么

就应该将它放置在一个独立的外部文件中（.js的文本文件），然后在页面中进行加载。实际上，

从一开始编写带有 JavaScript的Web页面时，就应该为每个实体创建单独的文件，以养成

HTML/CSS内容跟程序逻辑（JavaScript）分离的习惯。

当浏览器显示某个页面的时候，会从上到下逐行读取HTML代码，然后处理并显示。遇到

JavaScript代码时，就会通过JavaScript解释器来读取和执行，直到JavaScript代码结束。然后继续

解析和显示HTML，到页面结束为止。

示例1-5

26 第 1 章 JavaScript 简介

解释

1. doctype 声明用来告诉 Web 浏览器这个页面会用哪种标记语言，应该放在 HTML 文档的第一行。而

且在 XHTML 文档中，doctype 声明是必不可少的。doctype 的声明指向一种 DTD（Document Type

Definition，文档类型定义）。DTD 指定了标记语言的规则，这样浏览器就能正确显示页面内容了。

这个例子中的页面被声明为 HTML 4.01 Strict。HTML 4.01 Strict 是 HTML 4.01 的一种版本，在结

构语义和表现两者之间，它更注重结构语义。HTML 4 Strict 不支持弃用的元素和属性、框架和链

接目标。在本书的大部分例子中，为了节省篇幅，将会省略此声明。但在实际编码的时候，可别忘

了在页面中包含 doctype 声明。

2. 这是 HTML 文档的起始标签。

3. 这是 HTML 的<head>标签。<head>标签中放置的是所有不属于页面<body>部分的元素，例如

<title>和 JavaScript。

4. <body>标签为整个页面定义了背景色和字体颜色。

5. <script>标签是 JavaScript 代码的起始标志，由文本内容和 JavaScript 代码混合组成。JavaScript

代码放置在此标签与</script>结束标签之间。JavaScript 解释器只能理解 JavaScript 代码，不理

解 HTML。

JavaScript 的 writeln 方法被 document 调用。用括号括起来的字符串被传入 JavaScript 解释器。如

果 JavaScript 解释器读到 HTML 内容，就会将其发送至 HTML 呈现器，然后这部分内容就会在浏

览器中显示出来。在遇到 JavaScript 的结束标签后，HTML 恢复正常的解析和展现。

6. 这是 JavaScript 的结束标签。输出结果见图 1-14。

图1-14 示例1-5的输出，JavaScript已经被嵌入页面中

7. 继续输出页面 body 中的标签和文本。

1.11 JavaScript 代码放在哪儿 27

1

2

3

4

5

8

10

18

12

9

13

14

11

6

7

15

17

16

8. 页面 body 部分到此结束。

9. 这是 HTML 页面的结束标签。

外部文件形式的 JavaScript

如果脚本比较长或者需要被多个页面共享使用，那么通常会被放在一个外部文件中，与

HTML页面分离开。在实际的Web站点开发中，保持JavaScript和HTML或者CSS文件的分离（参

见1.7.1节）是非常重要的。这样做的好处是可以在站点的每个页面间共享一系列函数，在需要对

函数作修改时，不必逐个打开每个页面去修改，而是仅仅修改一份文件即可。JavaScript外部文件

完全由JavaScript代码构成，并保存为.js文件。在HTML页面中引入.js文件，需要在<head>标签

中使用<script>标签。在<script>标签中，只要将外部JavaScript文件的路径指定给它的src

属性即可。如果脚本文件位于其他服务器上，那么外部文件名需要包含完整的URL地址；如果位

于当前目录，则需要路径名称或只需要脚本名称即可。一个文件中可以引入多个.js脚本。

示例1-6和示例1-7虽然不长，但是可以帮助大家理解外部文件的使用方式。welcome.js脚本

包含一个JavaScript函数（参见第7章）。

示例1-6

示例1-7

这个外部文件名叫welcome.js

28 第 1 章 JavaScript 简介

解释

1. JavaScript 标签的 src 属性被赋予了一个文件名（文件名必须以.js 结尾），该文件中包含有 JavaScript

代码。文件名是 welcome.js，内有一个 JavaScript 函数。当用户单击 Welcome Me！按钮的时候，会

调用这个函数，见图 1-15。

2. JavaScript 程序到此结束。

3. 这是一个 HTML 输入按钮。当用户单击按钮时，会调用名为 welcome()的 JavaScript 函数。该函

数是在外部文件 welcome.js 中定义的。

图1-15 在单击Welcome Me！按钮之后，位于外部文件中的函数被调用了

如图1-16所示，Pearson Education使用了很多外部JavaScript文件（.js）来搭建他们的Web

站点。

1.12 验证标签 29

1

2

3

4

5

8

10

18

12

9

13

14

11

6

7

15

17

16

图1-16 使用外部JavaScript文件浏览Web页面的源代码

1.12 验证标签

JavaScript代码并非独立存在，而是同HTML/XHTML以及CSS集成在一起的。因此找一个验

证工具来检测标签是否正确是非常重要的。特别是在融入DOM和W3C标准之后，这种验证工具

的重要性就尤为突出了。网上有很多工具可以辅助开发人员确保标签的正确性。

1.12.1 W3C 验证工具

W3C的验证工具如图1-17所示。该工具支持通过URL、上传文件或者直接输入的方式进行检

测。W3C验证工具支持HTML、XHTML、SMIL、MathML等格式的Web文档的标签验证，但是

要评估诸如RSS/Atom反馈或者CSS样式表、MobileOK等特定的内容，或者查找死链接的话，还

有其他的验证工具可用。

30 第 1 章 JavaScript 简介

图1-17 一份HTML页面的W3C标签验证

1.12.2 Validome 验证工具

Validome（www.validome.org）是另一款出色的在线页面及XHTML文档验证工具。打开

Validome的网页，选择输入URL地址或者从本地硬盘上传文件。然后单击Validate即可（见图

1-18）。

1.13 应知应会 31

1

2

3

4

5

8

10

18

12

9

13

14

11

6

7

15

17

16

图1-18 Validome验证工具

1.13 应知应会

本章介绍了JavaScript编程语言，它的发展历史，在Web开发中的重要性，以及如何与Web页

面集成。在深入学习之前，应该了解如下内容。

(1) 编译语言同脚本语言的区别。

(2) JavaScript在何处定义，客户端还是服务器端。

(3) JavaScript用来干什么。

32 第 1 章 JavaScript 简介

(4) JavaScript如何让页面具有可交互性。

(5) JavaScript程序保存在什么地方。

(6) JavaScript程序大致是什么样子的。

(7) Ajax用来干什么，以及它的使用示例。

(8) W3C代表什么。

(9) 为什么要将DOM标准化。

(10) 不唐突的JavaScript是什么意思。

(11) 网上哪儿可以找到好的HTML教程。

练 习

1. 描述一个 Web 页面的生命周期。

2. 你使用的是哪种浏览器，什么版本，你是如何知道的？

3. 举一个 JavaScript 事件处理器的例子，将示例 1-2 复制到你的编辑器中，并在浏览器中查看运行

结果。

4. JavaScript 和 JScript 的区别是什么?

5. 在 HTML 页面中，JavaScript 标签应该放在哪儿？JavaScript 识别 HTML 吗？

6. 什么是 DOM？

7. 解释 Web 页面的三层。

8. 如何以外部文件方式引用 JavaScript？

9. 编写一段 JavaScript 程序，以大号蓝色字体打印欢迎消息。检测是否已启用 JavaScript。添加注释

说明编程思路。