JavaScript入门经典（第4版）(修订版）

本书详细介绍了JavaScript编程。全书共分为24章，分别介绍了Web脚本编写和JavaScript语言的概念、JavaScript的基础知识、文档对象模型、JavaScript的高级功能、使用JavaScript创建多媒体应用程序及创建复杂脚本的技巧等知识。其中，每章内容均以前一章内容为基础。书中提供了简单直接的操作方法，读者能够从基础知识开始领会 JavaScript 编程的精髓。除了基本内容外，书中还提供了大量解决问题的说明、解决方案、提示信息等内容。另外在每一章的后面，还附加有实践练习、测试题和练习题，以便加深读者对基本概念的理解。

本书适合对Web应用开发感兴趣的初中级用户，也可作为大中专院校相关专业的教材。

万维网最初只是一个简单的信息库，但是后来发展极快，现在已经成为重要的娱乐、教学、广告和通信工具。在万维网发展的同时，其相关工具也得到了发展。像HTML这样简单的标记语言中已经加入了一些真正的编程语言，JavaScript就是其中之一。

不要被“编程”这个词吓倒。对许多人来讲，这个词让人联想到要整夜盯着屏幕，拼命要搞清楚用什么样精确的符号顺序可以得到满意的效果（别误解我的意思，我们中的一些人确实把这当成是享受）。

虽然 JavaScript 是一种编程语言，但是它非常简单。事实上，如果读者从前没有学习过编程，那么从这里学习编程是一个很好的开始。用JavaScript编程只需要很少的知识，在第2章中我们将编写第一个程序。

如果读者会用 HTML 编写网页，那么就能够非常简单地使用 JavaScript 来为其增色。JavaScript程序可以只有一行，也可以是一个完整的应用程序。本书将从简单的脚本开始，逐渐过渡到复杂的应用程序，例如一个扑克牌游戏程序。本书还将介绍 JavaScript 的一些最新应用，比如AJAX远程脚本。

如果读者已经开发网页很长一段时间了，那么一定知道网络是在不断发展变化的，很难跟得上最新发展的语言和工具。本书将帮助读者在网络开发工具箱中添加另一个利器——JavaScript，相信读者一定会喜欢它。

JavaScript和Web标准

JavaScript首次出现在浏览器上时，功能非常有限，为了充分利用JavaScript的功能，编程人员经常做到了极致。遗憾的是，这样导致了一些不良做法，比如，脚本只适用于一种浏览器，这给JavaScript带来了一些负面影响。

现在，由于大多数浏览器都支持 W3C（万维网联盟）制定的标准和 AJAX 等新技术， JavaScript的未来一片光明，这种新的、更可靠的脚本越来越受欢迎。新的脚本在重视添加交互性功能的同时，保证HTML既简明又符合标准，而不是刻意做得很“炫”。

在本书中，读者将学习到使用 JavaScript 和遵循网络标准的最佳方法。本书中所有示例都采用标准的技术，避免使用只适用于特定浏览器的特有技术，因此它们都可以在大多数主流浏览器上工作。

怎样使用本书

全书分为24章，每章介绍JavaScript的一个主题。本书首先介绍JavaScript的基础知识，然后进入更高级的主题。

本书共分为6个部分，每个部分重点介绍JavaScript的一个领域。

第一部分介绍JavaScript，描述它与其他语言一致的地方，解释JavaScript的基本语言特征。这部分还介绍了把JavaScript与Web文档连接起来的文档对象模型（DOM）。

第二部分介绍 JavaScript 语言的基本要素：变量、函数、对象、循环和条件、内置函数。这部分还将介绍可以为JavaScript增加功能的第三方程序库。

第三部分深入介绍几乎可以在所有JavaScript程序中应用的DOM对象，介绍了事件、窗口和表单。这部分还将介绍 CSS 和允许改变样式的 DOM 特性。最后还将介绍W3C的DOM标准，该标准允许使用JavaScript来修改页面的任何一部分。

第四部分介绍 JavaScript 的高级功能，一开始将介绍基本的脚本技术，使用该技术可以避免 JavaScript 影响 HTML 文档的功能性和有效性。这部分还将介绍如何对JavaScript应用程序进行调试。最后将介绍两种最先进的JavaScript功能，即AJAX和Greasemonkey。

第五部分描述了用于处理图形、动画、声音和浏览器插件的JavaScript功能。

第六部分的重点是帮助读者创建完整的 JavaScript 应用程序。这部分将介绍如何创建下拉菜单、用 JavaScript 编写的扑克游戏以及其他一些示例，最后一章将介绍JavaScript将有哪些新发展，以及接下来应学习哪些语言。

本书含有下列编排格式。

注意：这部分提供了可以提高JavaScript编程效率的有用信息。

提示：这部分给出了与正在阅读的内容相关的参考信息。

警告：这部分提醒读者注意在特定情况下可能出现的问题或者副作用。

与编程相关的术语和语言采用等宽字体。

实践练习：位于每章的最后，一步一步地指导读者如何创建自己的脚本或者如何使用该章介绍的技术，从而帮助读者利用学会的知识创建JavaScript实用程序。

问题与解答、测试题和练习题

在每一章的最后，有3个部分：“问题与解答”回答了一些与该章主题相关的最常见问题，“测试题”用来检验读者对该章内容的掌握程度，“练习题”可以让读者有机会获得与该章所讨论技术相关的更多经验。

示例代码下载

本书示例代码可从本书原出版公司网站下载。请登录 http://www.informit. com/product.aspx?isbn=0672328798，单击“Downloads”链接，再单击下面出现的code.zip链接即可下载。

本书作者 Michael Moncur 维护着一个关于 JavaScript 的英文网站，其地址是：http://www.jsworkshop.com/。该网站定期更新 JavaScript 语言、DOM、脚本示例链接以及一些详细的指南性文章。

如果对本书有什么问题或者建议，发现了什么错误，或者在运行脚本的时候遇到什么困难，读者可以通过 E-mail 与作者联系，邮箱是 js15@starlingtech.com（请先浏览网站，看看你的问题是不是已经回答过了）。

第1章了解 JavaScript

第2章创建简单的脚本

第3章开始 JavaScript 编程

第4章使用文档对象模型（DOM）

Web脚本编写的含义及其适用范围

脚本编写与程序编写的异同点

什么是JavaScript及其由来

在网页中如何包含JavaScript命令

不同浏览器处理JavaScript的方式有何不同

JavaScript能为网页做些什么

如何在JavaScript和其他语言之间做出选择

万维网（World Wide Web，WWW）最初只是一种纯文本媒体——最初的浏览器甚至不支持在网页中加入图像。虽然Web仍没有完全准备好为电视提供盈利的机会，但是它已经有了很大的改进。

现在的网站包含了很多功能：图形、声音、动画、视频以及有时会有用的文本内容。Web脚本编写语言，如JavaScript，是增加网页生动性并使其以全新方式与用户进行交流的最简单的方法之一。

本章将首先介绍Web脚本编写和JavaScript语言等基本概念，然后再讨论JavaScript如何与其他Web语言配合。

在科幻电影（以及其他许多虚构电影）里，我们通常看到的是计算机能够执行以日常英语所下达的命令。虽然这在不久的将来可能会成为现实，但就目前来说计算机还是更容易理解像BASIC、C和Java这样的编程语言。

如果读者知道如何使用超文本标记语言（Hypertext Markup Language，HTML）来创建Web文档，那么你就已经使用过一种计算机语言了。可以使用HTML标签来描述如何格式化文档，浏览器如何执行命令、以及如何向访问者显示格式化文档。

HTML是一种简单的文本标记语言，因此它并不能响应访问者的请求、做出决定或者自动执行重复的任务。类似交互式任务这样的操作需要更高级的语言来实现，即一种编程语言或者是脚本编写语言。

许多编程语言都很复杂，但是脚本编写语言通常比较简单。它们的语法简洁，完成任务所需的命令非常少，而且容易学习。Web 脚本编写语言可以帮助用户通过组合使用脚本和HTML来创建交互式网页。

电影或舞台演出都要遵循某种脚本，即指导演员如何进行表演的动作（或台词）列表。Web脚本为网络浏览器提供相同类型的指导。JavaScript脚本可以只是一行命令，也可以是一个完整的应用程序（不管是哪种情况，JavaScript脚本一般都在浏览器内运行）。

注意：JavaScript 是一种脚本编写语言还是一种编程语言？这取决于提问的角度。本书把JavaScript称为是一种脚本编写语言，但是在学完本书之后，读者完全可以在自己的简历中说自己会JavaScript编程。

有些编程语言必须编译（或转换）为机器代码才能执行，而 JavaScript 是一种解释型语言——浏览器会直接执行所遇到的每一行脚本。

解释型语言有一个主要的优点：编写或更改脚本非常简单。更改JavaScript脚本就像更改一个典型的HTML文档一样容易，而且只要在浏览器里再次加载该文档就可以使更改生效。

注意：解释型语言也有缺点——其运行速度不是很快，因此它们并不适合于复杂的工作，如图形处理，而且其运行还需要借助解释程序（对于JavaScript来说，解释程序就是浏览器）。

JavaScript由美国Netscape通信公司开发，该公司也是Netscape网络浏览器的开发商。JavaScript是第一种被浏览器支持的也是至今最流行的网络脚本编写语言。

注意：一小段历史插曲：JavaScript 最初被称为 LiveScript，1995 年首次在Netscape Navigator 2.0中引入。但是，它很快被重新命名为 JavaScript，以表明与Sun公司Java语言建立了市场关系。

学习JavaScript几乎与学习HTML一样轻松，而且它可以直接包含在HTML文档中。下面列出了JavaScript的一些功能：

在浏览器的状态栏或警告框里，作为网页的一部分，向访问者显示消息；

验证表单内容并进行计算（例如，订货表单会在用户输入项目数量时自动显示变化的总数）；

当访问者将鼠标移动到图像上面时，自动执行图像变化；

创建与访问者交互的广告栏，而不仅仅是显示一个图像；

检测可用浏览器或其特性，并且只在支持它们的浏览器上运行高级功能；

检测已安装的插件，并在需要某一插件程序时通知访问者；

在不需要访问者重新加载网页的情况下，修改整个或部分网页；

显示从远程服务器检索到的数据，或者与远程服务器交互数据。

实际上使用 JavaScript 可以实现更多的功能，包括创建整个应用程序。本书将通篇研究JavaScript的用途。

你可能已经知道HTML是用来创建Web文档的语言了。为了帮助你回忆，程序清单1.1显示了一个简短但是比较典型的Web文档。

<h1>The American Eggplant Society</h1>

<p>Welcome to our Web page. Unfortunately,

it's still under construction.</p>

这个文档包括在<head>标签里的标题和<body>标签里的页面正文。要在页面中添加JavaScript，可以使用一个类似的标签<script>。

使用<script>标签，可以向Web文档添加一个简短的脚本（在本例中只有一行），如程序清单1.2所示。

提示：如果想在浏览器里查看一下这个示例的效果，但又不想自己手动输入它，可以到本书英文版的网站下载相应的 HTML 文档（本书中所有程序清单都可以从该网站下载）。

<h1>The American Eggplant Society</h1>

<p>Welcome to our Web page. Unfortunately,

it's still under construction.

We last worked on it on this date:

document.write(document.lastModified);

JavaScript中的document.write语句（稍后将详细介绍）是把输出作为Web文档的一部分进行输出。在本例中，它用来显示文档的修改日期。

注意：程序清单1.2中的<script>标签包含有参数type="text/javascript"，用来为浏览器指定脚本编写语言。此外还可以指定JavaScript的版本，本章后面将详细介绍。

在这个示例里，我们将脚本放在了HTML文档的正文中。在实际应用中，可以在下列4个位置上使用脚本。

页面正文中——在这种情况下，脚本的输出会在浏览器加载页面时作为HTML文档的一部分来显示。

在<head>标签之间的页面标题中——标题中的脚本在HTML文档中不能创建输出，但是可以被其他脚本引用。标题常被用在函数中——函数是可单独使用的JavaScript语句组。本书第3章将详细介绍函数。

在某个HTML标签内，比如<body>或<form>——称为事件处理程序并允许脚本处理HTML元素。在事件处理程序中使用JavaScript时，不必使用<script>标签。本书第3章将详细介绍事件处理程序。

在一个独立文件中——JavaScript支持使用包含脚本的文件，其文件扩展名为.js；通过在<script>标签中指定一个文件，即可使该文件包含这些脚本。

在创建更复杂的脚本时，HTML文档很快会变得很大、很乱。为了避免出现这种问题，可以使用一个或多个外部JavaScript文件，也就是扩展名为.js且含有JavaScript语句的文件。

目前所有浏览器都支持外部脚本。如需使用外部脚本，则要在<script>标签中指定文件名：

由于可以把JavaScript语句放入单独的一个文件中，因此在起始和结束<script>标签之间不必插入任何内容——实际上，即使插入一些内容，浏览器也会忽略掉它。

可以使用文本编辑器来创建.js文件。它应该包含一条以上的JavaScript命令，而且只包含JavaScript——不包括<script>标签、其他HTML标签或HTML注解。将此.js文件保存到与引用该文件的HTML文档相同的目录中。第2章中提供了一个将HTML与脚本文件分开的示例。

提示：外部 JavaScript 文件有一个显著的优点：多个文档可以链接到同一个.js 文件。因为浏览器会在缓存中保存这个文件，所以这样可以缩短显示网页所需的时间。

JavaScript在它的许多应用中都要与访问者进行交互，即对事件（如单击某一链接或按钮）做出响应。可以通过在HTML标签中定义事件处理程序来告诉浏览器如何响应事件。例如，程序清单1.3定义了一个按钮，被单击时会显示一则消息。

<title>Event Test</title>

第9章将详细介绍JavaScript事件模型，以及如何创建简单和复杂的事件处理程序。

注意：也可以用外部脚本来定义事件处理程序，这是一种比较好的方法，因为这样可以把所有的JavaScript放在同一个位置，而不是分散在HTML文档的各个不同位置。详细信息参见第9章。

与HTML一样，JavaScript也需要用Web浏览器来显示，不同浏览器的显示可能有所不同。与 HTML 不同的是，JavaScript在不兼容的浏览器上显示会有很大的差别：不仅仅是文本显示不正确，而且脚本程序可能根本就不运行，还可能会显示错误提示信息，甚至可能导致浏览器崩溃。

接下来将简单介绍一下不同浏览器（或者相同浏览器的不同版本）是如何处理JavaScript的。

首先介绍一下不需要太多考虑不同浏览器的原因。利用 JavaScript 所做的工作几乎都会涉及文档对象模型（Document Object Model，DOM）——用来呈现 Web 文档的一组标准化对象集的运用。

DOM 包含用于处理当前文档中各个方面的对象。例如，可以读取表单字段中用户输入的值或者当前页面的文件名。

DOM 由万维网联盟（World Wide Web Consortium，W3C）定义，最新的浏览器都支持Level1 和 Level2 DOM，这样使用 JavaScript 就可以控制整个网页。

提示：早期版本的DOM只允许JavaScript操纵页面的某些部分，比如表单元素和链接。新版本的DOM可以控制HTML中定义的所有元素。

微软公司的 Internet Explorer（IE）在 Internet 上出现较晚，但现在已经成为最常用的浏览器之一。最新版 IE 支持绝大部分的 JavaScript 1.5 和 W3C 的 DOM。

Netscape浏览器曾经是最常用的Web浏览器，它是Mozilla基金会推出的一种开源的浏览器。后来推出了Mozilla浏览器，最近又推出了Firefox浏览器——一种基于Mozilla引擎的改进型浏览器。

Firefox浏览器适用于Windows、Macintosh和Linux平台，它是一种免费的、开源软件，可以在Mozilla网站http://www.mozilla.org/上下载。

注意：Netscape 4.0和Internet Explorer 4.0浏览器支持不同版本的动态HTML （DHTML）。推出DHTML主要是为了尝试克服当前DOM的局限性。新的W3C 的 DOM 不再需要这些专有模型，就可以编写能够在大多数浏览器上工作的标准代码。

还有很多其他类型的浏览器，例如，读者还可能听说过下面两种浏览器。

Safari：苹果公司的浏览器，捆绑在Mac操作系统中，是大多数Macintosh计算机的默认浏览器。

Opera：Opera软件公司出品，是一种以支持多种平台（包括移动电话）而闻名的浏览器。最新的 Opera 8.0支持 W3C的 DOM 和 JavaScript 1.5，适用于本书中的大多数脚本程序。

提示：还有很多其他类型的浏览器，但在创建工作脚本程序时，不需要了解每一种浏览器，只要遵循标准来创建脚本，该脚本就可以在支持 JavaScript的浏览器上运行。本书将重点介绍可以在当前所有浏览器上工作的基于一定标准的脚本。

JavaScript 语言最初在 Netscape 2.0 上发布，此后不断发展，陆续推出了多个版本：

JavaScript 1.0：原始版本，Netscape 2.0 和 Internet Explorer 3.0 支持。

JavaScript 1.1：Netscape 3.0 支持，Internet Explorer 4.0 支持大部分内容。

JavaScript 1.2：Netscape 4.0 支持，Internet Explorer 4.0 部分支持。

JavaScript 1.3：Netscape 4.5 和 Internet Explorer 5.0、6.0 支持。

JavaScript 1.5：Internet Explorer 6.0 部分支持，Netscape 6.0 和 Firefox 1.0 支持。

JavaScript 1.6：目前 Firefox 1.5 支持。

每一个版本都对较前一版本有所改进，并且会添加一些新功能。支持新版本的浏览器都会支持为早期版本编写的脚本程序，只有极少数的例外。

欧洲计算机制造协会（ECMA）已经为ECMAScript确定了ECMA-262规范，ECMAScript是 JavaScript 的标准化版本。JavaScript 1.3 遵循ECMA-262 标准，JavaScript 1.5 遵循 ECMA-262第3修订版。

注意：你也许还听说过JScript语言，这是微软公司对其JavaScript的叫法，通常与标准版本兼容。

Mozilla基金会支持Netscape公司开发开源的Firefox浏览器，它目前也正在与ECMA合作开发 JavaScript 2.0，该版本对应 ECMAScript 标准第 4 版。JavaScript 2.0 将针对其先前版本做出一些改进，提供更多模块化方法、更好的对象支持和功能，使得 JavaScript 不仅可用做Web语言，而且可用作为通用的脚本编写语言。

如前所述，读者可以在<script>标签中指定JavaScript的版本。例如，下面这个标签指定了JavaScript的版本为1.3：

有两种方法可用来在<script>标签中指定JavaScript语言。过去的方法是使用language属性，HTML 4.0 规范建议的新方法是使用 type 属性。为了保持与早期浏览器的兼容性，这两种属性都可以使用。

当在language属性中指定版本号时，只有在浏览器支持指定版本或更高版本时，脚本程序才会执行。

如果<script>标签没有指定版本号，那么支持JavaScript的浏览器都可运行该脚本。由于 JavaScript 语言自 1.0 版本后大部分内容保持不变，所以一般不需要担心 JavaScript 的版本。

提示：在大多数情况下，不需要指定JavaScript的版本。这样，脚本可以在所有支持JavaScript的浏览器上运行。只有当脚本需要使用某一版本的特有功能时才需要指定JavaScript的版本。

虽然 JavaScript 程序通常都是在 Web 浏览器内运行，本书重点介绍的也是基于 Web 的JavaScript，但是JavaScript在其他应用程序中的应用也日益广泛。例如：

用于 Web 应用程序和多媒体的 Adobe Dreamweaver和 Flash，可使用 JavaScript 进行扩展。

有几种服务器端版本的JavaScript，它们运行在Web服务器上，而非浏览器上。

微软公司的 Windows 脚本宿主（Windows Scripting Host，WSH），支持 JScript，即JavaScript的微软版本，是Windows的通用脚本语言。但是，目前WSH最广泛的应用是电子邮件病毒。

微软的通用语言运行库（Common Language Runtime，CLR），它是.NET 框架的一部分，支持JavaScript。

除了以上的例子外，即将发布的 JavaScript 2.0 还将做出许多改进，以便其更适用于作为通用的脚本编写语言。

如果你浏览过互联网，肯定会看到很多JavaScript的示例。下面先简要介绍一些JavaScript的典型应用，本书后面的章节将详细讨论这些应用。

JavaScript最常见的应用是网站导航系统。可以使用JavaScript创建一个导航工具，例如用于选择下一个页面的下拉菜单，即当鼠标移动到某导航链接上时所弹出的子菜单。

只要正确应用，这类 JavaScript 交互功能会使得浏览网站更方便，而且该功能在不支持JavaScript的浏览器上也是可以使用的。

JavaScript的另一个常用功能是验证表单。使用一个简单脚本就可以读取用户在表单中输入的值，并确保输入格式正确，例如保证输入的是邮政编码或者电话号码。这项功能可以提醒用户注意一些常见的错误并加以改正，而不必等待服务器的响应。在第11章将介绍如何编写验证表单功能的脚本。

JavaScript一个最早也是最讨厌的应用就是创建引人注目的特殊效果，例如在浏览器状态行显示滚动的信息，或者让页面的背景颜色闪烁。

上述这些技术已经过时了，但是要感谢W3C的DOM和最新浏览器，JavaScript现在可以制作出一些更吸引人的效果，例如在页面上创建可拖放的对象，或者在幻灯片的图片之间制作逐渐淡去的效果。

长期以来，JavaScript 最大的限制是没有办法与 Web 服务器进行通信，例如，可以用JavaScript确保电话号码的位数正确，但不能利用电话号码查找用户在数据库中的位置。

现在，JavaScript 的一些高级功能已经被大多数浏览器所支持，因此这已不再是问题了。脚本无需加载页面就可以从服务器中获取数据或者将数据传送回去保存。这些功能被统称为异步 JavaScript 和可扩展标记语言（Asynchronous JavaScript And XML，AJAX），或者称为远程脚本技术（Remote Scripting）。第 17 章将详细介绍如何开发 AJAX 脚本。

如果使用过谷歌的Gmail、雅虎邮箱或者最新版本的微软Hotmail邮箱，就可以看到AJAX的应用。所有这些邮箱都使用了远程脚本技术来将一个交互界面呈现在用户面前，该远程脚本连接到后端服务器。

JavaScript 不是在 Web 上唯一可用的语言，在某些情况下，它并不是最合适的工具。其他语言在某些情况下要比JavaScript好，例如Java。下面，我们将介绍其他一些常见Web语言的优点。

Java是由Sun公司开发的一个程序语言，可用来创建applet或者在网页中执行的程序。

Java是一种编译语言，但是其编译器产生的代码更适合于虚拟机而不是真正的计算机。虚拟机是一套二进制代码及其含义的规则，其功能适合Web浏览器。

虚拟机的代码由浏览器解释。因此，相同的 Java applet 在 PC 机、苹果机和 UNIX 机等不同运行平台和不同浏览器上执行方式都是一样的。

注意：Java 是印度尼西亚一个人口密度很大的小岛（爪哇岛），也用来指代咖啡。这个词的引入导致在计算机文化中广泛使用与咖啡相关的用语。

从这点来说，很显然 Java 是一种很好的语言，但是本书不会介绍它。虽然 Java 的名字和命令与JavaScript非常相似，但实质上这是两种完全不同的语言。

ActiveX是由微软公司开发的一种规范，它使普通的Windows程序可以在网页上运行。ActiveX程序可以用 Visual C++和 Visual Basic 编写，预先进行编译，然后再部署在 Web 服务器上。

ActiveX的应用程序称为控件（control），通过 Web 浏览器下载并执行，这与 Java applet一样。而与 Java applet 不同的是，这些控件下载后将安装在电脑上，不需要重复下载。

ActiveX的主要优点是它几乎无所不能。但这也是一个缺点：一些程序员已经把ActiveX用于向网页增添新的功能，例如关闭你的计算机和格式化你的硬盘。

幸运的是，ActiveX 包括了一个签名特性，用于识别这些控件的来源，并防止这些控件被修改。虽然这并不能防止控件来破坏系统，但是可以标识出所信任的控件来源。

ActiveX有两个主要的缺点：第一，它不像脚本语言或Java那样容易使用；第二，ActiveX只能在微软的IE上工作，而且只能运行在Windows平台中。

VBScript 也被称为 Visual Basic 的脚本语言版，是微软公司对抗 JavaScript 的产品。正如JavaScript 语法是基于 Java 一样，VBScript 语法是基于微软的 Visual Basic，Visual Basic 是Windows平台上一种非常流行的程序设计语言。

与 JavaScript 一样，VBScript 是一种简单的脚本编写语言，可以在 HTML 文档中插入VBScript。VBScript可以使用与JavaScript一样的方式来处理DOM。要使用VBScript脚本，可以使用<Script LANGUAGE="VBScript">标签。

VBScript 可以做很多与 JavaScript 相同的工作，它们看上去甚至也十分类似。VBScript有以下两个主要优点。

对于已经掌握 Visual Basic 的人来说，VBScript 比 JavaScript 更容易学习。

它可以与微软的标准Web嵌入工具ActiveX紧密结合。

VBScript的主要缺点是只有微软的IE浏览器支持它。而JavaScript可以在Netscape、IE以及其他许多浏览器上运行。JavaScript是一种更通用的语言，在互联网上到处可以看到它的身影。

通用网关接口（Common Gateway Interface，CGI）不是一种真正的语言，而是一个能够使程序在Web服务器上运行的规范。CGI程序可以用多种语言编写，包括Perl、C语言和Visual Basic。

在 Web 服务器上与传统 CGI 相配合使用的脚本编写语言有微软的 Active Server Pages、Java Server Pages、Cold Fusion 和 PHP。也可以使用 JavaScript 服务器端实现。

服务器端程序主要用于Web，几乎每次在表单中填写信息并按下提交按钮来发送信息到Web站点时，数据都是由服务器端程序来处理。

JavaScript 和服务器端语言的主要区别是：JavaScript 应用程序在客户端（浏览器）上执行，而服务器端程序是在Web服务器上执行。在服务器端执行的主要缺点是由于数据必须传送到Web服务器再返回，因此响应时间可能会很长。

另一方面，CGI的有些功能是JavaScript并不具备的。特别是CGI可以在服务器上读写文件，并且可以与其他的服务器组件（例如数据库）交互。虽然客户端的 JavaScript 程序可以从表单中读取并处理信息，但它不能在Web服务器上存储数据。

JavaScript 通常与服务器端语言配合使用。在最简单的表单中，JavaScript 处理客户端的一些工作，例如验证功能，而服务器端语言接收数据并存储在数据库中。通过 AJAX，这种交互可以在瞬间完成，甚至不用加载一个新页面。

经过这一个小时的学习，你已经掌握了什么是 Web 脚本，什么是 JavaScript。此外，还学习了如何将脚本插入到在HTML文档中（或者引用外部的JavaScript文件）、JavaScript的一些基本功能以及JavaScript与其他Web语言之间的区别。

如果你正在期待查看真正的 JavaScript 代码，本书下一章将指导你创建使用 JavaScript的一些示例。另外，你还将学习到处理JavaScript所需要的一些工具。

解答：理论上，用 JavaScript 编写的任何标准脚本能适合所有的浏览器；实际上，90%的情况下都适合。但是，有的浏览器可能与众不同，最低限度应该在微软的IE和Firefox这两种浏览器中测试一下。

问题：如果我计划学习Java或CGI，我所学的JavaScript还有用吗？

解答：当然。JavaScript 在很多应用中是一个理想的工具，例如验证表单。虽然 Java 和CGI有它们的价值，但它们都不能完成JavaScript的全部功能。

解答：有。如以文本为基础的浏览器和为盲人准备的工具中，它们不支持或部分支持JavaScript。手机浏览器通常对JavaScript的支持也很差。此外，很多人的IE和Firefox浏览器关闭了JavaScript支持，一些公司的防火墙以及广告拦截软件阻止了JavaScript。第2章将讲述如何解决浏览器不支持JavaScript的问题。

回答以下的问题，以检验你所学的知识。

1．为什么JavaScript和Java的名称很相似？

a．JavaScript是Java的一个缩减版本。

b．Netscape的市场部门希望这两者听起来有相关性。

c．它们都源自于一个叫Java的岛屿。

2．当用户浏览包含JavaScript程序的页面时，在哪里执行脚本？

a．在运行Web浏览器的用户机器上

c．一台在Netscape的核心计算机上

3．以下哪种语言是微软的IE和Netscape两种浏览器都支持的语言？

1．b．尽管语法上有一些是相似的，但JavaScript起一个与Java有关的名字主要是出于市场运作的考虑。

2．a．JavaScript程序在Web浏览器上执行。（确实有服务器端的JavaScript版本，但那是另外一个问题了。）

3．c．JavaScript是IE和Netscape都支持的语言，虽然在两种浏览器上的执行并不完全相同。

如果想在第2章之前学习一点JavaScript的知识，或者想了解一些JavaScript的最新发展，可以：

浏览本书网站，看一些JavaScript的新闻和本书中所更新的一些脚本；

浏览本书网站，看一些JavaScript应用的例子。

创建和测试脚本的软件工具

开始和结束脚本

格式化JavaScript语句

JavaScript脚本如何显示结果

在Web文档中包含脚本

使用浏览器测试脚本

处理脚本中的错误

在单独的文件中使用脚本

通过第1章的学习，你已经知道JavaScript是一种适用于网页的脚本编写语言。JavaScript命令可以直接插入到HTML文档中，这些脚本将在浏览器浏览页面时执行。

在本章中，我们将创建一个简单的脚本、编辑它并在Web浏览器中测试它。在此过程中，你将学习到创建和使用脚本所涉及的一些基本任务。

与很多编程语言不同，创建 JavaScript 脚本不需要特别的软件。实际上，你已经拥有了这些软件。

处理JavaScript的第一个工具是文本编辑器。JavaScript脚本被保存为简单的文本文件，通常是 HTML 文档的一部分。所有能够保存 ASCII 文本文件的编辑器都可以用来处理JavaScript脚本。

这类编辑器的范围很广，从简单的文本编辑器到字处理器。如果还没有找到特别满意的编辑器，你的计算机内就包含了这类简单的编辑器。对于 Windows 计算机，“记事本”就非常适合编辑JavaScript脚本。

警告：如果使用字处理器创建JavaScript程序，必须将它保存为ASCII文本，而不是保存为字处理文档。否则，浏览器不能识别该脚本程序。

有很多专用 HTML 编辑器可用于处理 JavaScript。实际上，很多编辑器提供了一些JavaScript专有的功能。例如，使用不同的颜色来显示JavaScript不同功能的语句或者有些编辑器还提供了自动创建脚本的功能。

在Windows计算机上，推荐使用下列编辑工具。

HomeSite——一种出色的 HTML 编辑器，它支持 JavaScript。HomeSite 是 Adobe Dreamweaver软件的一部分，也可以单独使用。

Microsoft FrontPage 2003——微软公司提供的可视化 HTML编辑器。Script Builder组件使得用户可以非常方便地创建简单的脚本。

TextPad——一种功能非常强大的文本编辑器，它包含了“记事本”中所没有的很多有用功能。图2.1是在TextPad中显示JavaScript文档的画面。

下列编辑器可以同时在Windows和Macintosh中使用。

Adobe Dreamweaver——一种可视化编辑器，可以处理 HTML、JavaScript 和Macromedia的Flash插件。

Adobe Golive——另一种可视化 HTML 编辑器，提供了设计和组织大型站点结构的功能。

此外，在Macintosh中，BBEdit、TextWrangler和Alpha都是很好的HTML编辑器，它们都可以用来创建网页和脚本。

注意：附录B提供了下载上述及其他一些HTML和JavaScript编辑器的网址。

处理 JavaScript 还需要另外两件工具：Web 浏览器和运行浏览器的计算机。由于本书覆盖了 JavaScript 1.5 所引入的一些新功能和最新的 W3C 的 DOM，所以推荐读者使用最新版本的Mozilla Firefox或Microsoft Internet Explorer。读者可以去Mozilla公司（http://www.mozilla.com）或微软公司（www.microsoft.com）的网站下载浏览器。

至少应该有 Firefox 1.0 版、Netscape 7.0 版或者 Internet Explorer 6.0 或以上版本。虽然Netscape 4.x 版和 Internet Explorer 4 可以运行本书大部分脚本，但它们不支持许多新特性。

读者可以按照自己的喜好选择任何的浏览器，但对于 JavaScript 开发人员来说，应该准备两个以上的浏览器，至少有 Firefox 和 Internet Explorer。这样就可以实现访问者通常使用的浏览器上的脚本测试。

注意：如果打算使脚本在互联网上具有通用性，还需要一个 Web 服务器，或者可以访问到一个 Web 服务器。当然，在你的电脑硬盘上可以直接运行本书中大部分JavaScript的例子。

JavaScript的一个常见和简单的应用是显示日期和时间。因为JavaScript是在浏览器中运行的，它显示的时间将是用户当前的时区。但是，也可以用JavaScript计算世界时间（UTC）。

注意：世界（协同）时间的UTC标准是以过去的格林威治时间（GreenwichMean Time，GMT）标准为基础自动计算的。它是本初子午线的时间，本初子午线穿过英国伦敦的格林威治。

为了简单介绍一下 JavaScript，我们将创建一个简单的脚本来在网页中显示当前时间和UTC时间。

编写脚本与编写其他大多数JavaScript程序一样，要以HTML语言<script>标签开始。就像读者在第1章看到的，在HTML文档中脚本包含在<script>和</script>标签内。

警告：要记住只有有效的 JavaScript 语句才能包括在开始和结束的<script>标签之中。如果浏览器发现在<script>标签之间存在无效的JavaScript语句，将会显示一个JavaScript错误信息。

要开始创建脚本，就打开最喜欢的文本编辑器，键入开始和结束的<script>标签，如下所示：

由于这个脚本没有使用任何 JavaScript 1.1 以后版本的新特性，因此不需要在<script>标签中具体指明版本号。这个脚本可以在 Netscape 2.0或 Internet Explorer 3.0 以上版本的浏览器中运行。

现在此脚本需要首先确定本地时间和UTC时间，然后在浏览器中显示它们。幸运的是，所有复杂工作（例如转换时间格式）都已经内置在JavaScript编译器中了。

要开始编写脚本，需要使用一个变量来存储当前日期。有关变量的更多知识，可参见第5章。变量是一个容器，可以保存一个值，这个值可以是数字、文本或者像本例子中的日期。

首先，在第一个<script>标签后面加入如下一行：

要保证在程序中使用相同的大写或小写字母组合，因为 JavaScript 命令和变量名称是大小写敏感的。

这个语句建立了一个名称为now的变量，并把当前的日期和时间存储在这个变量之中。这条语句和其他一些语句一样，使用了 JavaScript 内建的日期对象，使用该对象可以方便的处理日期和时间。有关日期的更多知识，可参见第8章。

注意：注意在前面的语句中结尾处有一个分号，它的作用是告诉浏览器语句结束了。分号不是必须写的，但使用它可以帮助你避免一些常见的错误。为了清楚起见，本书中将一直使用分号。

JavaScript内部存储了自1970年1月1日起以毫秒为单位的日期，并且包含了一系列以不同方式转换日期和时间的函数，因此，并不需要用户来计算如何将毫秒转换成日期和时间。

继续此脚本，在结束</script>标签前，加入两行语句：

localtime = now.toString();

utctime = now.toGMTString();

这两条语句创建了两个新的变量：一个是localtime，包含了可读性较好的当前时间和日期，另一个是utctime，包含对应的UTC时间。

注意：localtime和utctime变量存储了一段文本，如January 1,2001 12:00 PM。在编程用语中，文本被称为字符串。读者将在第5章中学习到更多的有关字符串的知识。

现在有两个变量了——localtime和utctime——这两个变量包含了此脚本中的返回结果。当然，这些变量并不能自动将其内容显示给用户。JavaScript包括了一些显示信息的方法，最简单的是document.write语句。

document.write语句显示一个文本字符串、数字或者其他内容。因为JavaScript程序是在一个Web页面中使用的，所以其输出将作为页面的一部分显示出来。要显示结果，需要在最后的</script>标签前加入如下语句：

document.write("<b>Local time:</b> " + localtime + "<br>");

document.write("<b>UTC time:</b> " + utctime);

这些语句告诉浏览器在包含脚本的Web页面中添加一些文本。此输出包括程序结果字符串以及localtime和utctime变量的内容。

请注意HTML标签，例如在引号中的</b>，由于JavaScript的输出将显示在Web页面中，它需要用HTML设定格式。在第一行中的<br>标签保证了两种时间在不同的行中显示。

注意：注意在前面语句中文本和变量之间使用的加号。在本例中，它告诉浏览器将变量和一个字符串文本合并。如果在两组数字间使用加号，它们会累加起来。

现在已经完成了一个计算结果并显示的脚本，如程序清单2.1所示。

localtime = now.toString();

utctime = now.toGMTString();

document.write("<b>Local time:</b> " + localtime + "<BR>");

document.write("<b>UTC time:</b> " + utctime);

要使用此脚本，需要在 HTML 文档中加入此脚本。HTML 文档最起码应该包括<html>标签、<head>标签和<body>标签的打开标签和结束标签。

如果把这些标签加入包含所写脚本的文档，并包含一些描叙性的文件头，其最后结果类似程序清单2.2。

<head><title>Displaying Times and Dates</title></head>

<h1>Current Date and Time</h1>

localtime = now.toString();

utctime = now.toGMTString();

document.write("<b>Local time:</b> " + localtime + "<BR>");

document.write("<b>UTC time:</b> " + utctime);

现在已经有一个完整的HTML文档了，将它保存成后缀为.htm或.html的文件。

注意：记事本和其他的 Window 文本编辑器默认将编写的脚本保存为扩展名为.txt的文件。要确保所存储的文件扩展名正确。

要测试所创建的脚本，只需在Web浏览器中载入所创建的HTML文档。打开Netscape或者 Internet Explorer 浏览器，从“文件”（File）菜单选择“打开”（Open），点击“选择文件”（File Selection）或“浏览”（Browse）按钮，找到你的 HTML 文件。在选中文件后，点击“打开”按钮浏览页面。

如果输入的脚本正确，浏览器将显示脚本的结果，如图2.2所示。（当然，结果可能与本书不一致，但应该与你计算机的时间设置相同。）

对于 Internet Explorer 6.0 以上版本的一个说明：根据用户安全设置的不同，脚本可能不被执行，浏览器顶部的一个黄色高亮显示条可能会显示一条安全警告。在这种情况下，点击这个黄色条并选择“允许被阻止的内容”（Allow Blocked Content），这样就可以运行此脚本了。（这是因为默认安全设置允许运行在线文档的 JavaScript ，但不允许运行本地文件中的JavaScript。）

提示：现在可以从本书网站下载 HTML 文档，如果输入的脚本不能运行，可以下载一个在线版本试试。

虽然现在的脚本显示的是正确的日期和时间，但它不像墙上或桌上放着的时钟那样吸引人。为了改进这个缺陷，可以利用一些其他的JavaScript特性和一些HTML来显示一个大的钟表。

要显示一个大钟表，需要分别有小时、分钟和秒的变量，JavaScript同样内建了这些函数：

hours = now.getHours();

mins = now.getMinutes();

secs = now.getSeconds();

通过使用 JavaScript 内置日期函数中的时间组件，这些语句可以加载小时、分钟和秒的变量。

将小时、分钟和秒分别存储在不同变量中之后，就可以创建 document.write 文件来显示它们：

document.write("<h1>");

document.write(hours + ":" + mins + ":" + secs);

document.write("</h1>");

第一条语句显示一个HTML<h1>文件头标签，用一种大字体显示时钟。第二条语句显示小时、分钟和秒的变量，用冒号分开。第三条语句加入一个结束</h1>标签。

可以在最初的日期和时间脚本中添加上述语句，就可以显示大钟表。程序清单 2.3 显示的是修改后的完整脚本。

<head><title>Displaying Times and Dates</title></head>

<h1>Current Date and Time</h1>

localtime = now.toString();

utctime = now.toGMTString();

document.write("<b>Local time:</b> " + localtime + "<BR>");

document.write("<b>UTC time:</b> " + utctime);

hours = now.getHours();

mins = now.getMinutes();

secs = now.getSeconds();

document.write("<h1>");

document.write(hours + ":" + mins + ":" + secs);

document.write("</h1>");

现在已经修改了脚本，保存HTML文档并在浏览器中打开修改过的文件。如果浏览器仍然打开着，只需点击“刷新”按钮就可以载入新的脚本。试着运行一下，确认窗口上部和新大钟表显示的时间是一样的。图2.3显示了此结果。

注意：这个脚本的时间格式并不是完美的，下午的时间是用24小时制显示的，并且没有开头的零，所以12:04只能显示为12:4。要解决这些问题，请参考第8章的内容。

当开发较复杂的JavaScript程序时，常会碰到错误。JavaScript的错误通常是由输入错误的语句所引起的。

为了演示一个 JavaScript 的错误信息示例，可以修改一条前面添加的语句，创建一个常见错误：遗漏其中一个括号，将程序清单2.3最后的document.write语句更改为：

document.write("</h1>";

保存此保存HTML文档并在浏览器中载入它。由于使用的浏览器的版本不同，会出现以下两种情况之一：显示一条错误信息或者脚本执行失败。

如果显示错误信息，可以把丢失的括号添上就解决问题。如果没有出现错误信息，就必须设置浏览器，让它显示错误信息以便诊断问题的原因。

在Netscape或Firefox浏览器中，在浏览器的地址栏键入“javascript：”，显示JavaScript控制台（JavaScript Console）。在 Firefox 中，也可以从“工具”菜单选择 JavaScript控制台。控制台如图2.4所示，其中显示了在此例子中所犯错误的信息。

在 Internet Explorer浏览器中，选择“工具”（Tool）菜单中的“Internet 选项”（Internet Options）。在“高级”（Advanced）选项卡中，取消选择“禁用脚本调试”（Disable Script Debugging）复选框，选中“显示每个脚本的错误信息”（Display a Notification About Every Script Error box）复选框。

注意：注意JavaScript控制台上边的区域，其中可以输入一个JavaScript语句，该语句会立即执行。这是检查JavaScript功能的便利方法。

在此例子中所犯的错误在 Firefox 和 Internet Explorer 中都能得到正确的解答，Firefox会显示“missing ) after argument list”，（参数列表后丢失“）”），而 Internet Explorer 中显示“Expected ‘)’”，（缺少括号“）”）。值得注意的是，并不是所有的错误信息都能如此显示出来。

在 Internet Explorer中，每个错误都会显示一个错误对话框，而 Firefox 的JavaScript 控制台显示一个错误列表，并允许输入命令进行测试。因此，安装Firefox来调试和检查JavaScript是很有效的，即使选择 Internet Explorer 作为首选浏览器的用户也可以用此方法调试。

提示：当开发大型JavaScript程序时，寻找和解决错误显得更加重要。有关处理JavaScript错误的更多知识，参见第16章。

虽然如本章所示的简单脚本可以包含在HTML文件中，但将HTML和JavaScript分开是很好的习惯，这样做的好处是：

禁用JavaScript的浏览器或者不支持它的老版本浏览器，可以忽略此脚本。

当站点中多个页面都使用同一脚本的时候，浏览器只需要载入一次该 JavaScript 文件，其他页面只需使用缓冲区的JavaScript文件。

这样做更加容易维护HTML和JavaScript代码，特别是设计和编写脚本是由不同的工程师来完成的情况。

本书中的多数例子也将使用单独的JavaScript文件，因此你应该熟悉此技术。

在日期和时间这个例子中如果使用一个单独的 JavaScript 文件，就需要有两个文件。一个快速的方法是将程序清单2.3中的HTML和JavaScript组合文件分别存成两个文件，然后再编辑它们。

第一个文件为datetime.html，是一个HTML文件，将<script>标签之间的所有内容清除，并在开始的<script>中加入src=“datetime.js”。最终文件如程序清单2.4所示。

<head><title>Displaying Times and Dates</title></head>

<h1>Current Date and Time</h1>

src = "datetime.js">

第二个文件为datetime.js，只包含JavaScript命令，就是从上面HTML文件中清除的内容。这个文件不要使用<script>标签或其他HTML标签。JavaScript文件见程序清单2.5。

localtime = now.toString();

utctime = now.toGMTString();

document.write("<b>Local time:</b> " + localtime + "<BR>");

document.write("<b>UTC time:</b> " + utctime);

hours = now.getHours();

mins = now.getMinutes();

secs = now.getSeconds();

document.write("<h1>");

document.write(hours + ":" + mins + ":" + secs);

document.write("</h1>");

注意：如果 Internet Explorer 没有执行脚本，而是在浏览器窗口的上方黄色条中显示一个警告信息，只需简单的点击一下这个信息条，选择“允许被阻止的内容”。

随着创建的脚本越来越复杂，就会发现将HTML和JavaScript文件分开可以减少很多麻烦。在下一章中将讨论这个问题以及一些更好的JavaScript实践经验。

在本章中，编写了一个简单的 JavaScript 程序，并在浏览器中进行了测试。你已经学到了处理 JavaScript 所需要的工具——编辑器和浏览器，此外还学习了如何修改和测试脚本， JavaScript程序发生错误时的情形，以及如何在单独的JavaScript文件中使用脚本。

在编写这个脚本的过程中，已经使用了一些JavaScript的基本功能：变量、document.write语句以及与日期时间有关的函数。

至此，你已经学习了一些JavaScript语法，在第3章中再学习更多细节。

问题：为什么我需要在多个浏览器中测试脚本？在两个浏览器中JavaScript运行的方式不一致吗？

解答：虽然 JavaScript 是标准化的，但不同浏览器对它的编译可能不会完全一致。你的脚本可能有很小的缺陷，在某一个浏览器中没有影响，但在另一个上面就会发生错误。而且，当使用更高级的 JavaScript 特性时，需要用不同的方式处理浏览器，因此需要在每个浏览器中进行测试，这方面的内容将在第15章学习。

问题：当我在浏览器上运行脚本时，浏览器窗口显示的是脚本内容而不是运行的结果，我什么地方做错了？

解答：这可能有三方面的原因。首先，你可能遗漏了开始或结束的<script>标签。检查一下，确认第一行有<script LANGUAGE="JavaScript" type="text/javascript">。第二，你的文件可能保存成扩展名为.txt的文件了，导致浏览器将它作为一个文本文件处理了。将文件的扩展名改为.htm或.html就可以解决此问题。第三，确保你的浏览器支持JavaScript，而且在参数设置中没有禁用JavaScript。

问题：为什么在语句中的<b>和<br>标签允许输出时间？我认为在<script>标签中应该不允许HTML标签。

解答：因为这个特殊的标签是在引号里面的，它被认为是脚本的有效部分。脚本输出（包括任何HTML标签）都将被浏览器解释和显示。你可以在引号中使用其他HTML标签来添加格式，如我们使用<h1>标签来显示大钟表。

回答以下的问题，以检验你所学的JavaScript知识。

1．用什么软件可以编辑JavaScript程序？

2．JavaScript程序中变量的用途是什么？

a．存储数字、日期或其他值

c．使人回忆起中学所学的代数

3．在HTML文件中，什么应该出现在JavaScript脚本的最后？

a．<script LANGUAGE="JavaScript">标签

1．b．任何文本编辑器都可以用来创建脚本。也可以使用字处理软件，要注意的是需要把文件按文本形式存储，并且扩展名为.html或.htm。

2．a．变量用来存储数字、日期或其他值。

3．b．脚本结束应使用</script>标签。