错误！文档中没有指定样式的文字。 1

(1)

(2)

(3)

(4)

本书循序渐进地讲述了 JavaScript 及相关的 CSS、DOM、Ajax、jQuery 等技术。书中从 JavaScript 语言基础开始，分别讨论了图像、框架、浏览器窗口、表单、正则表达式、用户事件和 cookie，并在上一版的基础上新增了两章，讲述 jQuery 框架的基础知识。本书不仅介绍了基础知识和使用方法，也深入探讨了 JavaScript 应用示例。

本书适合有志于从事 Web 开发和 Web 设计的初学者阅读，也是高校相关课程理想的教材。

图灵程序设计丛书

JavaScript基础教程（第8版）

定价：69.00元

读者服务热线：(010)51095186转604　印装质量热线：(010)67129223 反盗版热线：(010)67171154

著　　　　[美] Tom Negrino Dori Smith 译　　　　陈剑瓯　柳　靖

责任编辑　王军花执行编辑　李　静

人民邮电出版社出版发行　　北京市崇文区夕照寺街14号邮编　100061　　电子邮件　[email protected]

网址　http://www.ptpress.com.cn 北京　　　　　　印刷开本：800×1000　　1/16 印张：25.25

字数：694千字 2012年 4 月第 1 版

印数：1 — 4 000 册 2012年 4 月北京第 1 次印刷著作权合同登记号图字：01-2011-5243号

ISBN 978-7-115-27676-6

◆

(5)

错误！文档中没有指定样式的文字。 1

1

2

3

4

5

8

10 11 9 6

7 版权声明

Authorized translation from the English language edition entitled JavaScript : Visual Quickstart

Guide, Eighth Edition by Tom Negrino and Dori Smith, published by Pearson Education, Inc., publishing

as Peachpit Press, Copyright © 2012 by Tom Negrino and Dori Smith.

All rights reserved. No part of this book may be reproduced or transmitted in any form or by any means, electronic or mechanic, including photocopying, recording, or by an information storage retrieval system, without permission of Pearson Education, Inc.

CHINESE SIMPLIFIED language edition published by POST & TELECOM PRESS Copyright

© 2012.

本书中文简体字版由美国Pearson Education，Inc.授权人民邮电出版社独家出版。未经出版者书面许可，不得以任何方式复制或抄袭本书内容。

版权所有，侵权必究。

(6)

谨以本书纪念Bill Horwitz和Dorothy Negrino，他们饱含着求知的热情。

(7)

前言 1

1

2

3

4

5

8

10 11 9 6

7 前言

迎使用JavaScript！使用这种容易上手的程序设计语言，可以给网页增色，使网页更好用。本书是一本轻松的JavaScript入门教程，所以即使不是计算机高手，你也可以由此很快学会脚本编写。任何时候你都不需要借助工具包。就像我们的一位朋友说的：“我们已经够疯狂了，所以你没有必要这样做啦！”

读者对象

我们猜想既然你有兴趣学习JavaScript，那么肯定有创建HTML页面和Web站点的经验，而且希望更进一步，使站点更具交互性。学习本书并不要求你了解任何编程或脚本编程的知识，也不要求你是HTML专家（当然，如果你是HTML专家也无妨）。我们只假设你具备构建网页的基本知识，而且熟悉常用的HTML标签，比如链接、图像和表单。

在某些章首题为“目前需要了解的HTML知识”的表中，我们对HTML做了一些解释。并非每章都有这部分内容，只有在我们认为你需要速查的地方才会提供。有了这些HTML信息，你就不需要在阅读本书的同时，再去翻另一本书或者打开相关网页查找HTML属性的语法了

^①

。

如果你对编程有所了解，应该会注意到本书介绍JavaScript的方式与其他图书的风格很不一样。本书并不深入介绍JavaScript的语法和结构，而且本书也不是一本深入而全面的语言参考书

（当然附录A中提供了一些很有价值的内容）。这方面市面上已经有不少很好的书，附录D中列出了它们。本书和这些书之间的差异是，本书并不拘泥于形式，而是集中地演示如何用JavaScript 完成一些有用的任务，不赘述大量的额外信息。

在本书的前几版中，我们增加了对Ajax的介绍。这种技术结合使用了JavaScript和其他常用的 Web技术为网页增加交互性，并且改善了Web站点的用户体验。本书提供了Ajax基础知识和实际示例，帮助你给站点增加Ajax功能，而不必深入学习Web编程。在这个版本中，我们添加了更多示例和技术介绍，使用jQuery框架（你可能将其当做构建块）来向网站轻松添加有用的功能。

如何使用本书

本书采用一些特殊的版式，帮助你更轻松地学习和理解JavaScript。

组成本书的大部分内容由分步说明构成。我们在书中以特殊的字体样式表示HTML或

——————————

① 要学习HTML，推荐阅读《HTML5基础教程（第7版）》。——编者注

欢

(8)

JavaScript代码，比如：

window.onload = initLinks;

你还会注意到，HTML和JavaScript代码都显示为小写。这么做是因为，这个版本中的所有脚本都符合W3C（World Wide Web Consortium，万维网联盟）的HTML 5标准。当在JavaScript中看到引号时，总是直引号（'或"），而不是弯引号（‘或“）。弯引号会使JavaScript失效，在编写脚本时应该避免使用。

在与分步说明对应的脚本中，我们以粗体突出显示脚本中正在讨论的部分，这样你就能够马上找到我们正在讨论的代码。我们还常常在Web浏览器窗口的屏幕图中以灰色底纹突出显示其中某些重要的部分。

因为图书的页面比计算机屏幕窄，所以一些JavaScript代码行在页面上排不开。出现这种情况时，我们将代码行分为多行，在接续行前面使用箭头→表示这是续行，并且将续行缩进，如下所示：

dtString = "Hey, just what are you

→ doing up so late?";

关于浏览器

在第6版中有一个大的变化：我们不再支持那些版本非常老的浏览器或者那些在支持Web标准方面做得很差的浏览器。我们发现，几乎所有Web用户都升级到了现代浏览器，它们充分地支持公认的Web标准（比如HTML、CSS2和DOM）。这包括IE 7或更高版本，Firefox 1.0或更高版本，

Safari和Chrome的所有版本，以及Opera 7或更高版本。

我们在几种操作系统上的多个浏览器中测试了脚本，这些操作系统包括Windows（Vista和 Windows 7）、Mac OS X（10.4.11或更高版本）和Ubuntu Linux（我们只在Ubuntu的默认浏览器 Firefox中测试了脚本）。

我们使用最主流的浏览器——微软Windows版本的IE——虚拟测试了本书中的所有内容（我们使用了IE 7、IE 8和IE 9）。我们还用Mac平台和Windows平台上的Firefox 3和Firefox 4以及Safari 5 对脚本做了测试。使用Safari 5进行测试，意味着这些脚本对于从WebKit引擎衍生出来的任何浏览器（比如Google Chrome）都可以正常使用，对基于KHTML（Safari最开始使用的开源呈现引擎）的浏览器（比如Linux 浏览器Konqueror ）也可以正常使用。WebKit也是移动操作系统浏览器核心之一，比如苹果的iOS、Google的Android、Research in Motion的Blackberry 6及更高版本，以及HP 的WebOS。至此，我们主要将脚本在iPhone和iPad上面做了测试。

不必输入代码

一些JavaScript图书只在书中印刷出脚本代码，你在实践时必须自己输入代码。我们认为这种

方式已经过时了。作者们不得不完成这些艰苦的输入工作，但是你不必重复这些劳动。我们为本

书提供了一个配套Web站点，其中包含本书中的所有脚本，你可以将这些脚本复制并粘贴到自己

的网页中。这个站点还包含其他提示和脚本。如果我们在书中发现了任何错误，也会在这里给予

(9)

前言 3

1

2

3

4

5

8

10 11 9 6

7

更正。这个配套站点的网址是www.javascriptworld.com。

如果由于某种原因你打算输入某些脚本示例，那么可能会发现这些示例似乎不起作用，这是因为你没有这些示例所用的支持文件。例如，在图像上实现屏幕效果的示例中，需要图像文件。

但请放心，这些文件都放在本书的Web站点上了，而且打包好了供你下载。你找到的可下载文件包含所有脚本、HTML文件、CSS文件以及用到的所有媒体文件。如果你遇到任何问题，可以查看配套Web站点上的FAQ（常见问题）。

如果阅读了FAQ，而你的问题还没有解决，可以通过[email protected]给我们发邮件。

很抱歉地说一声，因为收到的邮件太多，所以我们不可能也不会回复那些把本书问题发送到我们个人邮件地址的邮件。但是，我们可以保证发送到[email protected]的邮件会得到答复。

开始吧

JavaScript最好的一点是它很容易用一个简单的脚本在网页上实现很酷的效果，然后根据需要逐渐添加更复杂的素材。你不必等到学完整本书，就可以开始改进自己的网页。等到你看完本书的时候，将能用Ajax和jQuery给站点添加高级的交互效果了。

当然，千里之行，始于足下。欢迎光临，请勿将手伸出窗外，照相时请不要用闪光灯。探索 JavaScript的旅程已经开始。

致谢

特别感谢我们的编辑Nancy Peterson，她的专业精神、冷静沉着和温暖的关怀使本书的写作过程非常愉悦。

感谢Tracey Croom出色的制作工作和Scout Festa熟练的文字加工工作。

我们衷心感谢本书的排版人员Danielle Foster，她优雅镇定地完成了排版工作。感谢给本书编索引的Emily Glossbrenner，她做了一项吃力不讨好的工作。

我们要感谢Peachpit出版社的Nancy Ruenzel和Nancy Davis所给与的支持。

我们要感谢采用本书以前的版本作为课程教材的所有高中、大专院校的教师。

在我们签署了本书的合同之后，着手开工之前，Dori在Stack Exchange （http://www.stackex change.com）找到了她梦寐以求的工作。如果没有别人的大力帮助，她不可能在两份工作同时进行的情况下还能保持清醒的头脑。因此Dori心中充满感激，特别要感谢下列人士。



感谢Stack的所有同事，尤其是Joel Spolsky、Jeff Atwood、Robert Cartaino、Rebecca Chernoff 以及Josh Heyer。他们拿出了大量的时间和耐心来帮助我，才让我在创作本书的过程中没把工作丢掉。



也非常感谢Peachpit公司那位极具耐心的女士——我们做了14年同事，但我仍然很敬佩她的创造力。



我要特别地感谢本书的另一位作者Tom Negrino。他为这版书所做的工作远远超出了原先

的分工，甚至还将他（和我）的结婚十周年纪念推迟到了本书完成之后。

(10)

2 3 4 5 6 7 8 9 10 11 12 13 14 15 16

18 17

2 3 4 5 6 7 8 9 10 11 12 13 14 15 16

18 17

第 11 章建立动态页面

... 206

11.1 在网页上显示当前日期... 206

11.2 处理周中的日期... 208

11.3 根据时间对消息进行定制... 209

11.4 根据时区显示日期... 210

11.5 把 24 小时制转换为 12 小时制 ... 213

11.6 创建倒数计数器... 216

11.7 隐藏和显示层 ... 219

11.8 移动文档中的对象... 221

11.9 日期方法 ... 223

第 12 章 JavaScript 应用示例

... 225

12.1 使用可折叠菜单... 225

12.2 添加下拉菜单 ... 228

12.3 改进下拉菜单 ... 230

12.4 带说明的幻灯片... 233

12.5 一个无聊的姓名生成器... 236

12.6 柱状图生成器 ... 240

12.7 样式表切换器 ... 246

第 13 章 Ajax 简介

... 253

13.1 Ajax 的定义... 253

13.2 读取服务器数据... 255

13.3 解析服务器数据... 261

13.4 刷新服务器数据... 266

13.5 从服务器获得数据... 267

13.6 用 Ajax 预览链接... 270

13.7 自动补全表单字段... 273

第 14 章工具包、框架和库

... 279

14.1 添加 jQuery ... 280

14.2 使用 jQuery 更新页面... 282

14.3 使用 jQuery 交互... 282

14.4 交互与更新 ... 284

14.5 自动完成字段 ... 287

第 15 章用 jQuery 设计页面

... 289

15.1 突出显示新元素... 289

15.2 创建可折叠菜单... 292

15.3 创建更漂亮的对话框... 294

15.4 条纹表格 ... 298

15.5 表格排序 ... 301

第 16 章基于 jQuery 的应用

... 306

16.1 以 jQuery 为基础... 306

16.2 使用 ThemeRoller 定制外观... 307

16.3 在页面中添加日历... 309

16.4 拖放元素 ... 313

16.5 使用 jQuery 处理外部数据... 316

16.6 使用 jQuery 插件... 322

第 17 章 bookmarklet

... 328

17.1 第一个 bookmarklet ... 328

17.2 改变页面的背景颜色... 333

17.3 改变页面样式 ... 334

17.4 查询单词 ... 335

17.5 查看图像 ... 337

17.6 显示 ISO Latin 字符... 339

17.7 将 RGB 值转换为十六进制... 340

17.8 对值进行转换 ... 341

17.9 bookmarklet 计算器... 342

17.10 缩短 URL ... 344

17.11 检验页面 ... 344

17.12 通过电子邮件发送页面... 345

17.13 改变页面大小 ... 346

附录 A JavaScript 的版本演化和参考资料

... 348

附录 B JavaScript 保留字

... 373

附录 C CSS 参考

... 376

附录 D 其他学习资源

... 386

(13)

1.1 JavaScript 是什么 1

1 2 3 4 5

8

10 17 6 7

12 11 9

13 15 14

16 了解 JavaScript

于 Web 站点的开发者来说，HTML 的发展是一件好坏参半的事。在万维网发展的早期，HTML 相当简单，很容易就能够掌握设计网页所需知道的一切。

随着 Web 的发展，页面设计人员还希望他们的页面能够与用户进行交互，HTML 很快就显得不足以满足这一需求了。Netscape 发明了 JavaScript，作为控制浏览器和给网页添加活力和交互性的方法。

自从诞生以来，JavaScript 已经经历了不小的演化（尽管有时候在不同的浏览器上演化的方向有所不同）。在本书后面，我们将详细讨论 JavaScript 的演化。

在本章中，你将了解 JavaScript 是什么（以及不是什么），它可以做什么（以及不能做什么）和 JavaScript 语言的一些基础知识。另外，还会向你介绍 Ajax，这是 JavaScript 和其他技术的一种组合，

它在 Web 站点的交互性和创造性方面掀起了新的浪潮。

1.1 JavaScript 是什么

JavaScript 是一种可以用来给网页增加交互性的编程语言。但是，如果你不是程序员，那么也不必担心。Web 上有大量 JavaScript 代码，复制一下并稍做修改，就可以供自己使用。实际上，这种“站在其他程序员肩膀上”的方式正是熟悉 JavaScript 的好方法。

为了帮助你熟悉 JavaScript，我们建立了一个与本书配套的 Web 站点。在这个站点上提供了本书中的所有脚本（这样，你就不用自己输入了），以及更多的说明、附加资料和更新内容。站点的网址是 www.javascriptworld.com。

常常会看到 JavaScript 被称为“脚本语言”（scripting language），这暗示着它更适合编写脚本而不是程序。这实际上并没有根本性的差异。JavaScript 脚本也是一种程序，它们包含在 HTML 页面内部

（原先编写脚本的方式），或者驻留在外部文件中（现在的首选方法）。在 HTML 页面上，因为脚本文本包围在

标签中，所以它不会显示在用户的屏幕上，而 Web 浏览器知道应该运行 JavaScript 程序。

标签常常放在 HTML 页面的

<head>

部分中，如脚本 1-1 所示。但是如果愿意，也可以将脚本放在

<body>

部分中。如果你还不熟悉这些 HTML 概念，需要关于 HTML 的更多信息，那么我们建议你读一下 Elizabeth Castro 的《HTML XHTML CSS 基础教程（第 6 版）》。

脚本 1-1 这个非常简单的脚本在浏览器窗口中输出“Hello, Cleveland!”

<!DOCTYPE html>

<html>

对

第 1 章

(14)

<head>

<title>Barely a script at all</title>

window.onload = function() {

document.getElementById ("myMessage").innerHTML = "Hello, Cleveland!";

} </script>

</head>

<body>

</h1>

</body>

</html>

1.2 JavaScript 不是 Java

尽管名字中有 Java，但是 JavaScript 和 Java 之间没有太大的关系。Java 是一种功能完备的编程语言，由 Sun 公司开发，由 Oracle 公司推广（自从 Oracle 收购 Sun 公司以来）。Java 是 C 和 C++编程语言之后的又一种主流语言，程序员可以使用它创建完整的应用程序和控制消费类电子设备。与其他语言不同，Java 宣称具有跨平台兼容性。也就是说，程序员应该能够编写出可以在所有种类的机器上运行的 Java 程序，无论机器运行的是 Windows、Mac OS X 还是任何风格的 Unix。但实际上，Java 不总是能够实现这个梦想，因为 Sun 公司和微软公司在这种语言的发展方向方面有很大的分歧。微软公司首先试图以自己的方式将 Java 集成到 Windows 中（Sun 公司认为，这种方式会使 Java 在 Windows 上以一种方式工作，而在其他机器上以另一种方式工作，从而破坏了 Java 的跨平台兼容性）。随后，微软公司从 Windows 中完全去除了 Sun 公司的 Java，而创建了自己的类 Java 语言：C#。经过两公司之间的一轮诉讼之后，Sun 公司占据了上风，微软从 Windows 中移除了 Java，现在可以在 Windows （或 Linux）上安装最新的 Java 版本（www.java.com/getjava/）。Mac OS X 操作系统在安装时会附带 Java。

除了单独的应用程序之外，Java 主要用于在客户端（client side，即用户的浏览器中）创建 applet。

applet 是一种通过因特网下载并在 Web 浏览器中运行的小程序。因为 Java 具有跨平台性质，所以这些 applet 应该能够在任何支持 Java 的浏览器中以相同的方式运行。在近几年中，我们看到许多 Java applet 被 Adobe Flash 动画替代了，因为一般来说 Adobe Flash 动画比 Java applet 更容易创建。近几年来，

随着计算处理速度和浏览器中 JavaScript 功能的不断提升，在客户端使用 Java 的情况越来越少。然而，Java 已经成为一种在服务器端编写代码的流行语言。

可以使用

HTML 标签将 Java applet 嵌入网页，还要提供指定 applet 的附加信息。当浏览器看到

标签时，它会从服务器下载 Java applet，然后 applet 就会在这个标签中指定的屏幕区域中运行（见图 1-1）。

图 1-1 这个 Java applet 实现了一种西洋跳棋游戏

(15)

1.5 JavaScript 不能做什么 3

1 2 3 4 5

8

10 17 6 7

12 11 9

13 15 14

16 1.3 JavaScript 的起源

既然 JavaScript 与 Java 无关，那么为什么它们的名称如此相似呢？这是计算机行业最烦人的恶习之一：为了获得市场营销方面的成功，而不顾及产品实质。

当 Netscape 在其 Navigator Web 浏览器中添加了一些基本脚本功能时，它最初将这种脚本语言称为 LiveScript。与此同时，Java 开始大行其道，它被认为是计算行业中下一项伟大的革新。当 Netscape 在 Navigator 2 中支持运行 Java applet 时，它也将 LiveScript 改名为 JavaScript，希望以此借用 Java 的声势。尽管 JavaScript 和 Java 是非常不同的编程语言，但这一事实并没有阻止 Netscape 采用这种市场营销手段。从那时候开始，我们这些技术作家只好不厌其烦地解释 JavaScript 和 Java 是不同的东西。

当然，我们靠这挣了不少钱，从这个角度来说，我们可能应该感谢这些市场营销专家。

当微软公司看到 JavaScript 在 Web 开发人员中流行起来时，它意识到必须在 IE 中添加一些脚本功能。它原本可以采用 JavaScript，但是与通常情况一样，微软公司又自行其事，建立了自己的脚本语言，这种语言非常像 JavaScript，但又不完全相同。JavaScript 的微软版本称为 JScript。

1.4 JavaScript 可以做什么

用 JavaScript 可以做许多事情，使网页更具交互性，给站点的用户提供更好、更令人兴奋的体验。

JavaScript 使你可以创建活跃的用户界面，当用户在页面间导航时向他们提供反馈。例如，你可能在一些站点上见过，当鼠标指针停留在按钮上时，会突出显示按钮。这是用 JavaScript 实现的，使用了一种称为翻转器（rollover）的技术（见图 1-2）。

可以使用 JavaScript 来确保用户以表单形式输入有效的信息，这可以节省你的业务时间和开支。

如果表单需要进行计算，那么可以在用户机器上用 JavaScript 来完成，而不需要任何服务器端处理。

你应该知道一种区分程序的方式：在用户机器上运行的程序称为客户端（client-side）程序，在服务器上运行的程序（包括后面要讨论的 CGI）称为服务器端（server-side）程序。

使用 JavaScript，根据用户的操作可以创建自定义的 Web 页面。假设你正在运行一个旅行指南站点，用户单击夏威夷作为旅游目的地。你可以在一个新窗口中显示最新的夏威夷旅游指南。JavaScript 可以控制浏览器，所以你可以打开新窗口、显示警告框以及在浏览器窗口的状态栏中显示自定义的消息。因为 JavaScript 有一套日期和时间特性，可以生成时钟、日历和时间戳文档。

JavaScript 还可以处理表单，设置 cookie，即时构建 HTML 页面以及创建基于 Web 的应用程序。

1.5 JavaScript 不能做什么

JavaScript 是一种客户端语言。

^①

也就是说，设计它的目的是在用户的机器上而不是服务器上执行任务。因此，JavaScript 有一些固有的限制，这些限制主要出于如下安全原因。

——————————

① 实际上，也存在服务器端实现的 JavaScript 版本，如 Rhino。——编者注

图 1-2 翻转器是一个当鼠标指针停留在其上时会改变的图像

(16)



JavaScript 不允许写服务器机器上的文件。尽管写服务器上的文件在许多方面是很方便的（比如存储页面单击数或用户填写的表单数据），但是 JavaScript 不允许这么做。而是需要用服务器上的一个程序处理和存储这些数据。这个程序可以是用 Java、Perl 或 PHP 等语言编写的 CGI

（运行在服务器上的程序）。



JavaScript 不能关闭不是由它自己打开的窗口。这是为了避免一个站点关闭其他任何站点的窗口，从而独占浏览器。



JavaScript 不能从来自另一个服务器的已经打开的网页中读取信息。换句话说，网页不能读取已经打开的其他窗口中的信息，因此无法探察访问这个站点的冲浪者还在访问其他哪些站点。

1.6 Ajax 是什么

简单的回答是，Ajax 是一种创建交互式 Web 应用程序的方式。这究竟是什么意思呢？我们来考虑一下可能通过 Web 站点做的事情。例如，你可能想和自己的爱人出去吃饭（如果你没有爱人，可以和自己的朋友、亲戚或宠物一起去吃饭。虽然大部分人不会和宠物一起去吃饭，但这只是题外话。）。

所以，你希望知道如何从当前的地点到达市内大家都在谈论的那家有名的新餐馆。你决定到一个提供地图的 Web 站点上查找路线。你会进入这个站点，输入餐馆的地址，站点会显示一张标出了这个餐馆的地图。这个站点会显示带边框的地图，如果希望改变地图的视域，那么可以单击边框。单击边框，

等大约 5～10 秒，地图就会重新绘制，如果希望再次改变视域，就重复操作。这个过程很慢，而且响应性很差。如果只是单击地图并向希望的方向拖动它，地图视域就会随着鼠标拖动而移动，那不是更好吗？

可以通过用 Ajax 构建的 Web 应用程序向用户提供这种动态的交互性（见图 1-3）。这样的话，用户几乎不需要等待，并一直有控制能力，而且可以创建具有与传统桌面应用程序相同用户体验的基于 Web 的应用程序。这样，用户就能够更快、更轻松地查明如何从家到达那家有名的餐馆。

Ajax 是 Asynchronous JavaScript and XML（异步 JavaScript 和 XML）的缩写，这个词是由 Web 开发人员 Jesse James Garrett 在 2005 年年初首创的。

严格地说，Ajax 只是 JavaScript 的一小部分（尽管这一部分特别流行）。但是，随着频繁地使用，这个词不再指某种技术本身（比如 Java 或 JavaScript）。

在大多数情况下，Ajax 一般是指以下这些技术的组合：



XHTML；



CSS（Cascading Style Sheet，层叠样式表）；



使用JavaScript访问的DOM（Document Object Model，文档对象模型）；



XML或JSON，这是在服务器和客户端之间传输的数据格式；

图 1-3 支持 Ajax 的 Google Maps 可以提供更流畅更具交互性的用户体验

(17)

1.7 组合式（snap-together）语言 5

1 2 3 4 5

8

10 17 6 7

12 11 9

13 15 14

16



XMLHttpRequest，用来从服务器获取数据。

这个列表有点儿复杂，尤其是对于在 JavaScript 或其他 Web 编程方面经验不太丰富的人。但是，

不必担心，我们在本书中会介绍这些技术。在学到关于 Ajax 的章节时，你应该已经掌握了组成 Ajax 的各种技术。

Ajax 的好处是，应用程序的大多数处理在用户的浏览器中发生，而且对服务器的数据请求往往很短。所以可以使用 Ajax 建立功能丰富的应用程序，这些应用程序依赖基于 Web 的数据，但是其性能远远超过老式方法，因为老式方法要求服务器传回整个 HTML 页面来响应用户操作。

一些公司已经在 Ajax 方面投入大量资金，尤其是 Google。Google 已经建立了几个著名的 Ajax 应用程序，包括 Gmail（基于 Web 的电子邮件）、Google Calendar、Google Docs 和 Google Maps。另一个大型的 Ajax 支持者是 Yahoo!，它使用 Ajax 增强个性化的 My Yahoo!门户、Yahoo!首页、Yahoo!

Mail，等等。这两家公司都向公众开放了其 Web 应用程序的接口，人们可以使用这些接口建立有意思的新应用程序。例如，许多人为 Google Maps 创建了 mashup（混搭），这些程序会获得地图并在地图上加上有意思、有用或好玩的信息，比如洛杉矶地区所有日本餐馆的位置或电影摄影棚的位置。

 ^提示



在 Google Maps Mania（googlemapsmania.blogspot.com）上可以找到许多 Google Maps mashup 的列表。

1.7 组合式（snap-together）语言

还有一点我们应该注意：JavaScript 是一种面向对象（object-oriented）的语言。这意味着什么呢？

1.7.1 对象

首先，我们来考虑对象。对象（object）就是某种东西。在现实中，一只猫、一台计算机和一辆自行车都是对象（见图 1-4）。对于 JavaScript，它处理的对象都在 Web 浏览器中，比如窗口、表单，

以及如按钮和复选框的表单元素（见图 1-5）。

图 1-4 猫对象（这只猫名叫 Pixel）

图 1-5 按钮和复选框是浏览器对象，

可以用 JavaScript 来操纵

因为你可以有多只猫或者多个窗口，所以给它们起名字是有意义的。你可以把自己的宠物叫做一

号猫和二号猫，但是这不是一种好想法，原因有两个：首先，如果它们有唯一的名称，就更容易区分

它们；其次，这有点不礼貌。因此，本书中的所有示例将给对象起唯一的名字。

(18)

 ^提示



在因特网上可能会看到一些脚本用

window[0]

和

form[1]

这样的名称来称呼对象。由于以上原因，这种方式并不好。如果给脚本中的不同对象起名字，而不是使用数字，那么跟踪对象会容易得多。



有些爱挑剔的程序员会认为，JavaScript 不是面向对象的，而是基于对象（object-based）的。

在本书中，这两个意思相同。

1.7.2 属性

对象具有属性（property）。猫有毛皮，计算机有键盘，自行车有轮子。在 JavaScript 环境中，文档有标题，表单可以有复选框。

改变对象的属性就修改了这个对象。相同的属性名可以用于完全不同的对象。假设有一个名为

empty

的属性。在任何合适的地方都可以使用

empty

，所以可以说猫的肚子空了，也可以说猫的食盆

空了。

注意，计算机的键盘和自行车的轮子不仅仅是属性，它们本身也是对象，可以具有自己的属性。

所以，对象可以有子对象。

1.7.3 方法

对象可以做的事情称为方法（method）。猫会叫，计算机会崩溃，自行车可以前进。JavaScript 对象也有方法：按钮的

click()

，窗口的

open()

，文本的

selected()

。圆括号表示它们是方法，而不是属性。

 ^提示



可以把对象和属性看做名词，把方法看做动词。前者是东西，后者是这些东西可以完成的活动或对它们执行的操作。

1.7.4 将对象、属性和方法组合在一起

可以将对象、属性和方法组合在一起，从而更好地描述对象或过程。在 JavaScript 中，这些成分由点号分隔（就像因特网地址中的那样）。这称为点号语法（dot syntax）。下面是按这种方式编写的对象及其属性的一些示例：

bicycle.wheels cat.paws.front.left computer.drive.dvd document.images.name window.status

下面是按照点号语法编写的对象及其方法的一些示例：

cat.purr() document.write()

forms.elements.radio.click()

(19)

1.8 处理事件 7

1 2 3 4 5

8

10 17 6 7

12 11 9

13 15 14

16 1.7.5 DOM简介

在网页上，组成页面（或文档）的对象被组织在一个树型结构中。在构建 HTML 页面之前，你一定要了解这种结构。页面的顶级包含在

<html>

标签中，在其中会找到

<head>

和

<body>

标签，而其他标签包含在这两个标签中，依次类推。某些浏览器可以显示这种树型结构，如图 1-6 所示。JavaScript 将文档树中的每一项都当做对象，可以使用 JavaScript 操纵这些对象。用来表示文档中对象的标准模型就称为 DOM（Document Object Model）。

树中的每个对象也称为树的节点（node）。可以使用 JavaScript 修改树的任何方面，包括添加、访问、

修改和删除树上的节点。树上的每个对象是一个节点。如果节点包含 HTML 标签，那么它就称为元素节

点（element node），否则，就称为文本节点（text node），当然，元素节点可以包含文本节点。这就是目前关于 DOM 和节点需要知道的所有知识，在本书中（尤其是第 10 章）会看到关于它们的更多信息。

1.8 处理事件

事件（event）是用户在访问页面时执行的操作。提交表单和在图像上移动鼠标就是两种事件。

JavaScript 使用称为事件处理程序（event handler）的命令来处理事件。用户在页面上的操作会触发脚本中的事件处理程序。表 1-1 列出了最常用的 12 种 JavaScript 事件处理程序。在第 8 章中，我们会讨论其他更高级的事件处理程序。

表1-1 事件处理程序

事件它处理什么

onabort 用户终止了页面的加载

onblur 用户离开了对象

onchange 用户修改了对象

onclick 用户单击了对象

onerror 脚本遇到了一个错误

onfocus 用户激活了对象

onload 对象完成了加载

onmouseover 鼠标指针移动到对象上

onmouseout 鼠标指针离开了对象

onselect 用户选择了对象的内容

onsubmit 用户提交了表单

onunload 用户离开了页面

图 1-6 可以使用 DOM Inspector（Firefox 的一个插件）查看文档的树型结构。在 Safari 和 IE 中也有相似的特性

(20)

例如，猫就可以通过执行

purr

（打呼噜）和

stretch

（伸懒腰）操作来处理

onpetting

（亲热）

事件。

在 JavaScript 中，如果用户单击了一个按钮，那么

onclick

事件处理程序会注意到这一操作，并执行分配给它的任务。

在编写脚本时，不必预测出用户可能采取的所有操作，只需处理那些你希望提供特殊处理的事件。

例如，如果没有

onload

事件处理程序，页面也会顺利地加载。但是，如果希望在加载页面时触发一个脚本，就要使用

onload

命令。

1.9 值和变量

在 JavaScript 中，一段信息就是一个值（value）。值有不同的类型，大家最熟悉的类型是数字。

字符串（string）值是包围在引号中的一个或多个单词。表 1-2 列出了 JavaScript 值的其他类型。

表1-2 值类型

类型描述示例

数字任何数字值 3.141592654

字符串引号中的字符 "Hello, world!"

布尔值（Boolean） true或 false true

空值（null）空且无含义

对象与对象相关联的任何值

函数函数返回的值

变量（variable）是用来保存值的。例如，变量

myName

被赋值为字符串

"Dori"

。编写这一赋值的一种方式是

myName="Dori"

。等号可以读作“设置为”。换句话说，变量

myName

现在包含值

"Dori"

。

 ^提示



JavaScript 是区分大小写的。这意味着

^myname

与

myName

并不相同，也与

MyName

不相同。



变量名不能包含空格或其他标点符号，也不能以数字开头。它们还不能是 JavaScript 保留字之一。附录 B 列出了 JavaScript 保留字。

1.9.1 操作符

操作符（operator）是用来操作变量的符号。你应该已经熟悉简单算术中的操作符，加号和减号就是操作符。表 1-3 列出了大多数常见的操作符。

表1-3 操作符

操作符作用

x + y（数字）将 x 和 y 相加

x + y（字符串）将 x 和 y 拼接在一起

x – y 从 x 中减去 y

(21)

1.9 值和变量 9

1 2 3 4 5

8

10 17 6 7

12 11 9

13 15 14

16

（续）

操作符作用

x * y 将 x 和 y 相乘

x / y 将 x 除以 y

x % y x和 y 的模（即 x 除以 y 的余数）

x++,++x 给 x 加 1（相当于 x = x + 1）

x--,--x 给 x 减 1（相当于 x = x - 1）

-x x的相反数

 ^提示

 x++

和

++x

都是给

x

加 1，但是它们并不相同。前者在完成赋值之后再递增

x

，而后者正相反。

例如，如果

x

是 5，

y=x++

会将

y

设置为

5

，

x

设置为

6

；而

y=++x

会将

x

和

y

都设置为 6。递减操作符

--

的工作方式与它相似。



如果在将两个值相加时混合使用数字和字符串，那么结果是一个字符串。例如，

"cat"+5

的结果是

"cat5"

。

1.9.2 赋值和比较

在将一个值放进变量中时，就是将这个值赋给这个变量，这个任务要使用赋值操作符来完成。例如，使用等号操作符进行赋值，比如

hisName="Tom"

。表 1-4 列出了所有的赋值操作符。

表1-4 赋值

赋值作用

x = y 将 x 设置为 y 的值

x += y 相当于 x = x + y

x -= y 相当于 x = x - y

x *= y 相当于 x = x * y

x /= y 相当于 x = x / y

x = % y 相当于 x = x y%

除等号之外，其他赋值操作符都是用来修改变量值的简写形式。例如，

x=x+5

的简写形式是

x+=5

。为清楚起见，本书中的大多数地方都使用比较长的形式。

1.9.3 比较

常常需要对两个变量的值进行比较，或者将一个变量的值与一个字面值（即输入表达式中的值）

进行比较。例如，可能希望将周中日的值与

"Tuesday"

进行比较，这可以通过检查

todaysDate=="Tuesday"

来完成。比较操作符的完整列表见表 1-5。

(22)

表1-5 比较

比较作用

x == y 如果 x 和 y 相等，那么返回 true

x === y 如果 x 和 y 完全相同，那么返回 true

x != y 如果 x 和 y 不等，那么返回 true

x !== y 如果 x 和 y 不完全相同，那么返回 true

x > y 如果 x 大于 y，那么返回 true

x >= y 如果 x 大于等于 y，那么返回 true

x < y 如果 x 小于 y，那么返回 true

x <= y 如果 x 小于等于 y，那么返回 true

x && y 如果 x 和 y 都是 true，那么返回 true

x || y 如果 x 或 y 之一是 true，那么返回 true

!x 如果 x 是 false，那么返回 true

 ^提示



如果对字符串进行比较，那么要知道“a”大于“A”，“abracadabra”小于“be”。

1.10 编写对 JavaScript 友好的 HTML

因为将使用 JavaScript 操纵文档中的对象，所以希望以适当的方式编写 HTML，使脚本能够轻松地处理 HTML。这基本上意味着要编写现代的符合标准的 HTML，并使用 CSS 将文档的结构与它的表现分隔开。

我们说“现代的 HTML”的意思不仅仅指使用 validator.w3.org 上的 Web 工具进行 W3C 检验，还应该提前考虑可能对页面进行什么操作，并添加适当的标签和属性，使 JavaScript 能够轻松地访问对象。需要哪些标记呢？很高兴你这么问。

1.10.1 结构、表现和行为

CSS 是一种用于 Web 的标准布局语言，可以控制版面、颜色以及元素和图像的大小和位置。HTML 文档应该利用外部样式表来定义文档中使用的样式。JavaScript 也应该放在外部文档中，这个文档应该只包含 JavaScript 代码。

按照这种方式进行分离，站点将包含以下 3 种文本文件。



HTML：包含页面的内容和结构。



CSS：控制页面的外观和表现。



JavaScript：控制页面的行为。

如果这么做，对站点进行修改就会很容易，甚至修改全站点范围的效果也很容易。

1.10.2 div和span

如果你习惯于传统的 HTML 风格，比如将所有东西都放在表格中并使用分隔线 GIF 来形成想要

(23)

1.10 编写对 JavaScript 友好的 HTML 11

1 2 3 4 5

8

10 17 6 7

12 11 9

13 15 14

16

的布局，那么一些概念对你来说是新的，所以这里快速概述一下。

现在 HTML 和 XHTML 有两个只用来标出范围的标签：

<div>

和

<span>

。它们用来将内容划分成语义性（semantic）的块，也就是具有相似含义（meaning）的块。一个表格单元格或段落中的内容可能具有共同点，也可能没有，但是每个

<div>

和

<span>

中的内容应该具有相似的含义。

那么，

<div>

和

<span>

有什么区别呢？

<div>

是一个块级（block

-

level）元素，也就是说，它与前后元素之间有物理换行。但

<span>

不是块级的，它是行内的（inline），所以可以将它应用于句子中的一个短语。

你不需要抛弃原来掌握的 HTML 知识！但是要掌握这两个标签，你会吃惊地发现会经常需要使用它们。

1.10.3 class和id

在 HTML 文档中，将内容分隔为这些有意义的块。但是在此之后，仍然需要标识出那些需要修改其表现或行为的内容片段。为此，主要使用两个属性：

class

和

id

。CSS 和 JavaScript 都可以利用这些属性。CSS 样式表在规则中使用这些属性定义页面的外观，而 JavaScript 文件在代码中使用这些属性来影响页面上元素的行为。



类（class）标识出可能会多次使用的元素。例如，假设你要为电影院编写一个页面。可以为电影标题定义一个类，然后通过这个类指定标题应该是 14 像素、粗体和深蓝色的。

.movieTitle { font: bold 14px;

color: #000099;

}

应该将页面上的每个电影标题包围在一个标签中，并指定这个标题类型的

class

属性，如下所示：

<p>We're currently showing <span class="movieTitle">The Aviator</span> and <span class="movieTitle">

➝The Outlaw</span>.</p>

 id

标识出的元素对于文档是唯一的。例如，如果在页面上电影院的名称只出现一次，那么可

以使用

id

创建一个样式规则，定义电影院名称的外观是什么样的，如下所示：

#theaterName { font: bold 28px;

color: #FF0000;

}

要显示电影院的名称时，只需在受影响的标签中添加这个

id

属性：

<h1 id="theaterName">The Raven Theater Presents:</h1>

上面示例中用于 CSS 的手段也可以应用于 JavaScript。在给 div 和 span（或任何其他元素）分配

了

class

和

id

之后，就可以修改这些元素：不但可以用 CSS 修改它们的外观，还可以用 JavaScript

修改它们的行为。本书的其余部分主要讨论这个主题。

 ^提示



有些人可能会在 CSS 中使用

#

和

.

时出现混淆，因为他们想不起哪个符号用于

class

，哪个符号

用于

id

。我们的记忆方法是：在给定的页面上，一个

id

只能出现一次。“1”是一个数字，而

井号（

#

）也称为数字符，所以这个符号用于

id

。

(24)

1.11 要使用什么工具

因为 JavaScript 只是纯文本，所以可以使用几乎任何文本编辑器来编辑 JavaScript。甚至可以使用 Microsoft Word 这样的字处理程序，但是一定要确保 Word 将文件保存为 Text Only，而不是采用它自己的文件格式。HTML、JavaScript 和 CSS 文件必须是纯文本格式的，这样 Web 浏览器才能理解它们。

最好是使用以纯文本作为标准格式的程序。在 Windows 上，许多人使用记事本（见图 1-7）。在 Mac 上，可以使用 TextEdit，但是专业人员喜欢 Bare Bones 软件公司开发的 BBEdit（见图 1-8）。在 Unix 机器上，Emacs 是最好的文本编辑器之一。无论你使用什么程序，不要忘记用扩展名.html、.css 或.js 保存纯文本文件，这样才能顺利地将文件上传到 Web 服务器。

图 1-7 Windows 7 上的记事本图 1-8 Mac OS X 上的 BBEdit

还可以使用某种 WYSIWYG（What You See Is What You Get，所见即所得）的 HTML 编辑器，比如 Adobe Dreamweaver。只需切换到 HTML Source 模式，就可以编写脚本了。

 ^提示



如果你是 Mac 用户，那么试试 Bare Bones 软件公司开发（www.barebones.com）的 TextWrang- ler。它的特性不如 BBEdit 那么全面，但是它有一个大优点：它是免费的。



如果你想了解如何在 Dreamweaver 中使用代码工具的更多内容，推荐你阅读我们著的

Dreamweaver CSS: Visual QuickStart Guide 一书。

(25)

2.1 将脚本放在哪里 13

1 2 3 4 5

8

10 17 6 7

12 11 9

13 15 14

16 开始

身够了，现在该编写脚本了。在本章中，你将学习把脚本放在 HTML 中的什么位置，如何在脚本中编写注释，让自己在过了一段时间之后仍然能够轻松地理解这些脚本，以及如何使用脚本与用户进行通信。还会看到如何使页面自动地转到另一个页面（这称为重定向，redirection）。

我们开始吧！

目前需要了解的 HTML 基础知识见表 2-1。

表2-1 目前需要了解的 HTML 知识

标签属性意义

html 包含网页的 HTML 部分

head 包含网页的页头部分

script 包含网页的脚本或对外部脚本文件的引用。脚本常常是 JavaScript，但不一定

脚本所用的编程语言。必须有的属性

src 外部脚本的位置

title 包含网页的标题

body 包含网页的内容

h1...h6 这些标签的内容作为标题信息。h1 是最大尺寸的标题，h6 是最小尺寸的标题

a 链接到另一个网页

href 指定当单击链接时，用户应该转到哪里

id 分配给链接的 id

2.1 将脚本放在哪里

脚本可以放在 HTML 页面上的两个位置：

<head>

和

</head>

标签之间（称为头脚本，header script），

或者

<body>

和

</body>

标签之间（体脚本，body script）。脚本 2-1 是体脚本的一个示例。

热

第 2 章

(26)

脚本 2-1 脚本总是需要包围在

和

</script>

HTML 标签之间

<!DOCTYPE html>

<html>

<head>

<title>My first script</title>

</head>

<body>

<h1>

document.write("Hello, world!");

</script>

</h1>

</body>

</html>

有一个标出脚本的 HTML 容器标签，这个标签以

开头，以

</script>

结束。

➾ 编写第一个脚本 1.

这是

script

开始标签，告诉浏览器后面的代码是

JavaScript 而不是 HTML。

2.

document.write("Hello, world!");

这是 JavaScript 的第一行：它获得文档窗口并在其中写入

"Hello, world!"

，如图 2-1 所示。请注意这一行末尾的分号（;），这告诉浏览器的 JavaScript 解释器这一行结束了。除了极少的例外情况，本书中每行 JavaScript 代码的末尾都使用分号。

3.

</script>

这结束 JavaScript，并告诉浏览器后面的代码是 HTML。

 ^提示

 script

标签的

language

属性和

type

属性（这里没有使用）已经废弃了，这意味着 W3C（负责

的标准组织）已经将这个属性标记为在标准的未来版本中不必支持的属性，但还有不少旧脚本仍在使用它。



如果每一行上只有一个语句，那么在 JavaScript 行的末尾使用分号是可选的。为了使代码清晰，

我们在本书中坚持使用分号（;）。由于同样的原因，我们建议你养成在代码中包含分号的习惯。



对于本书中的大多数地方，我们在代码解释中省略了

标签。可以看到，在脚本代码中仍然有这个标签，而且仍然需要它，但是我们不会反复解释它。



一个页面上可以有任意数量的<

script>

标签（因此有多个脚本）。

2.2 关于函数

在讲述下一个示例之前，你需要了解一下函数，在编写 JavaScript 时常常要用到它们。函数

（function）是一组执行某一任务的 JavaScript 语句。每个函数必须有一个名称（除了一个非常少见的

图 2-1 “ Hello, world!”示例是编程图书中的传统示例，我们也不想违反传统

(27)

2.3 使用外部脚本 15

1 2 3 4 5

8

10 17 6 7

12 11 9

13 15 14

16

例外，这会在本书后面讨论），并可被脚本的其他部分调用。

在脚本运行期间，可以根据需要调用函数任意次。例如，假设你已经获得了用户在表单中输入的一些信息，并使用 JavaScript 将它保存起来了（在第 6 章中提供了关于这类问题的更多信息）。如果需要一次又一次地使用此信息，那么可以在脚本中反复使用相同的代码。但是，更好的方法是将这段代码编写成函数，然后在需要的时候调用这个函数。

函数由单词

function

加上函数名组成。函数名后面是圆括号，再后面是左花括号。组成函数内容的语句出现在后面的行上，然后用右花括号结束这个函数。函数的形式如下所示：

function saySomething() {

alert("Four score and seven years ago");

}

注意到

alert

所在的行缩进了吗？这会使代码更易读。第一个花括号和最后一个花括号（你会注

意到这两行没有缩进）之间的所有语句都是函数部分。这就是目前需要知道函数方面的内容。在下一章和后续几章中，会介绍函数方面的更多内容。

2.3 使用外部脚本

在 HTML 页面上直接使用脚本（就像前面的示例那样）的问题是脚本只能供当前页面使用。因此，

这种脚本有时候称为内部脚本（internal script）。但是，经常希望让多个 HTML 页面共享一个脚本。这要通过包含外部脚本（external script）的引用来实现，也就是只包含 JavaScript 的单独文件。这些外部文件称为

.

js 文件，因为无论它们叫什么，文件名都应该以

^.

js 后缀结尾。各个页面只需在

^script

标签中添加

src

属性，就可以调用

.

js 文件。

这就大大减少了每个页面上的代码，更重要的是，这会使站点更容易维护。当需要对脚本进行修改时，只需修改

.

js 文件，所有引用这个文件的 HTML 页面会自动受到修改的影响。

在第一个外部脚本示例中，脚本 2

-

2 包含引用外部文件的 HTML，脚本 2

-

3 是外部 JavaScript 文件。

脚本 2-2 这段简单的 HTML 在

script

标签中包含对外部 JavaScript 文件的引用

<!DOCTYPE html>

<html>

<head>

<title>My second script</title>

</head>

<body>

</h1>

</body>

</html>

脚本 2-3 第一个外部 JavaScript 文件

window.onload = writeMessage;

function writeMessage() {

document.getElementById("helloMessage").innerHTML = "Hello, world!";

}

(28)

➾ 使用外部脚本

1.

这一行在脚本 2

-

2 中。在

script

标签中添加

src

属性会使浏览器寻找引用的文件。产生的网页看起来就像将脚本直接放在页面的

script

标签中一样，而实际上脚本放在外部的

.

js 文件中。

使用外部脚本只需要这一行。接下来，我们看看这个脚本中的内容。

2. 在脚本 2-3 中，这一行的第一部分

window.onload

是一个事件处理程序，我们在第 1 章中讨论过了。等号后面是一个函数名

writeMessage

。这一行的意思是“当窗口完成加载时，运行

writeMessage

函数”。

3.

function writeMessage() {

这一行创建

writeMessage()

函数。

4. 再看看脚本 2-2，就会发现有一个

<h1>

标签，它的

id

为

helloMessage

。在后面你会学到关于

id

的更多知识，目前只

需知道

id

是它所属的元素在页面上的唯一标识符。换句话说，在给定的页面上，只能有一个元素具有这个特定的

id

。这使 JavaScript 很容易通过使用

getElementById()

方法来获得和操作这个元素。

innerHTML

属性仅仅是获得等号右边的字符串，并将它直接放到页面中，就像是我们在 HTML 中编写了这个字符串一样。所以，这行 JavaScript 代码的意思是“获得字符串‘Hello, world!’ ，并将它放在文档中名为

helloMessage

的元素中”。结果如图 2-2 所示，也和图 2-1 一样。

 ^提示



支持外部 JavaScript 文件的浏览器包括：微软的 IE 4 及更高版本、Netscape 3 及更高版本，以及此后发布的几乎所有浏览器，包括 Firefox、Safari 和 chrome 等现代浏览器。



有时候使用外部 JavaScript 文件这种方式来对用户隐藏 JavaScript。但是，如果用户的技术经验很丰富，有能力检查他们的浏览器缓存文件（浏览器已经看到的所有东西都存储在那里），那么这种方法是无效的。



在脚本 2-1（以及本书的先前版本）中，我们使用

document.write()

将信息插入 HTML 页面。

在这一版中，我们主要使用设置

innerHTML

的方法，因为它更通用。一些人反对使用

innerHTML

属性，因为 W3C 已经废弃了它。但是，即使是这些心存疑虑的人也得承认，它是最简单的可以跨浏览器工作的方法，所以我们在本书中主要采用这种方法。第 10 章将介绍在 HTML 页面上添加或修改信息的“正式”方法。



如果你以前见过函数，那么可能会认为步骤 2 中的

writeMessage

引用应该是

writeMessage()

。这种想法是不对的，因为这是两种不同的东西：带圆括号的函数名意味着正在调用这个函数；

如果没有圆括号（就像这里的情况），就是将它赋值给事件处理程序，以便在此事件发生时运行它。

图 2-2 将 JavaScript 转移到外部文件中的结果看起来与前一个示例一样，

但这种方式更好

(29)

2.4 在脚本中添加注释 17

1 2 3 4 5

8

10 17 6 7

12 11 9

13 15 14

16 2.4 在脚本中添加注释

养成在脚本中添加注释的习惯是一种很好的做法。JavaScript 不会将插入的注释解释为脚本命令。

尽管在编写脚本时，它可能看起来非常清晰，但是如果你过几个月再看这个脚本，就可能觉得它很晦涩。注释有助于解释你为什么按照某种方式解决问题。对脚本进行注释的另一个原因是，别人可能希望重用和修改你的脚本，注释对他们也有帮助。

脚本 2

-

4 给出了两种脚本注释的示例。第一种用于比较长的多行注释，第二种显示如何编写单行注释。

脚本 2-4 这里的代码演示如何给脚本加有助于你和别人理解代码的注释

/*

This is an example of a long JavaScript comment. Note the characters at the beginning and ending of the ➝comment.

This script adds the words "Hello,world!" into the body area of the HTML page.

*/

window.onload = writeMessage; // Do this when page finishes loading function writeMessage() {

// Here's where the actual work gets done

}

注意，我们没有给出这个示例的 HTML，因为它与脚本 2

-

2 是相同的。从现在开始，如果 HTML 与前一个示例相比没有变化，我们就不再重复显示它了。

➾ ^{对脚本进行注释}

1. /*

This is an example of a long JavaScript comment. Note the characters at the beginning and

➝ending of the comment.

This script adds the words "Hello, world!" into the body area of the HTML page.

对于多行的注释，行开头的

/*

让 JavaScript 忽略此后的所有内容，直到注释的末尾为止。

2. */

这是注释的末尾。

3.

// Do this when page finishes loading function writeMessage() {

// Here

'

s where the actual work gets done

document.getElementById ("helloMessage").innerHTML = "Hello, world!";

}

这里是与前一个示例一样的脚本，但是加上了单行的注释。单行注释可以单独占据一行，也可以跟在代码行后面。在单行注释后面，同一行上不能再编写代码了；多行注释不能与代码同在一行上。

是的，我们也厌倦了“Hello

,

world!”示例，但这是传统，所有编程图书都以这个示例开始讲解。

现在就来看点儿新鲜的东西吧！

(30)

2.5 向用户发出警告

JavaScript 的主要用途之一是向浏览站点的人提供反馈。可以创建一个弹出的警告窗口，向用户提供关于页面必须了解的重要信息。

在用户界面设计中，简单就是好。例如，你可以用一大片警告文本和巨大的动画引起用户的注意，

但是这就有点儿物极必反了。相反，应该像脚本 2

-

5（HTML，它仅仅调用外部脚本）和脚本 2

^-

6（Java- Script）这样，创建一个漂亮、简洁的警告窗口。现在，你知道我们为什么是技术作家而不是设计人员了。

脚本 2-5 这个示例的 HTML 包含

和

脚本 2-6 警告对话框帮助你与用户进行通信

alert("Welcome to my JavaScript page!");

➾ ^{向用户发出警告}

 alert("Welcome to my JavaScript page!");

是的，这就是所需的所有代码，其效果如图 2-3 所示。把希望显示的文本放在

alert()

方法的直引号中就行了。

图 2-3 这个脚本只弹出一个对话框。显示的 4 个示例从上到下依次是在 Mac OS X 上的 Firefox 2、

微软 XP 上的 IE 6、微软 Vista 上的 IE 8 和 Mac OS X 上的 Safari 3 中的对话框的外观

错误！文档中没有指定样式的文字。 1

JavaScript基础教程（第8版）

错误！文档中没有指定样式的文字。 1

1

2

3

4

5

8

10

11 9 6

7

版 权 声 明

Authorized translation from the English language edition entitled JavaScript : Visual Quickstart

as Peachpit Press, Copyright © 2012 by Tom Negrino and Dori Smith.

All rights reserved. No part of this book may be reproduced or transmitted in any form or by any means, electronic or mechanic, including photocopying, recording, or by an information storage retrieval system, without permission of Pearson Education, Inc.

CHINESE SIMPLIFIED language edition published by POST & TELECOM PRESS Copyright

© 2012.

本书中文简体字版由美国Pearson Education，Inc.授权人民邮电出版社独家出版。未经出版者 书面许可，不得以任何方式复制或抄袭本书内容。

版权所有，侵权必究。

谨以本书纪念Bill Horwitz和Dorothy Negrino，他们饱含着求知的热情。

前 言 1

1

2

3

4

5

8

10

11 9 6

7

前 言

读者对象

。

如果你对编程有所了解，应该会注意到本书介绍JavaScript的方式与其他图书的风格很不一 样。本书并不深入介绍JavaScript的语法和结构，而且本书也不是一本深入而全面的语言参考书

如何使用本书

本书采用一些特殊的版式，帮助你更轻松地学习和理解JavaScript。

组成本书的大部分内容由分步说明构成。我们在书中以特殊的字体样式表示HTML或

——————————

欢

JavaScript代码，比如：

在与分步说明对应的脚本中，我们以粗体突出显示脚本中正在讨论的部分，这样你就能够马 上找到我们正在讨论的代码。我们还常常在Web浏览器窗口的屏幕图中以灰色底纹突出显示其中 某些重要的部分。

因为图书的页面比计算机屏幕窄，所以一些JavaScript代码行在页面上排不开。出现这种情况 时，我们将代码行分为多行，在接续行前面使用箭头→表示这是续行，并且将续行缩进，如下所示：

关于浏览器

Safari和Chrome的所有版本，以及Opera 7或更高版本。

我们在几种操作系统上的多个浏览器中测试了脚本，这些操作系统包括Windows（Vista和 Windows 7）、Mac OS X（10.4.11或更高版本）和Ubuntu Linux（我们只在Ubuntu的默认浏览器 Firefox中测试了脚本）。

不必输入代码

一些JavaScript图书只在书中印刷出脚本代码，你在实践时必须自己输入代码。我们认为这种

方式已经过时了。作者们不得不完成这些艰苦的输入工作，但是你不必重复这些劳动。我们为本

书提供了一个配套Web站点，其中包含本书中的所有脚本，你可以将这些脚本复制并粘贴到自己

的网页中。这个站点还包含其他提示和脚本。如果我们在书中发现了任何错误，也会在这里给予

前 言 3

1

2

3

4

5

8

10

11 9 6

7

更正。这个配套站点的网址是www.javascriptworld.com。

如果由于某种原因你打算输入某些脚本示例，那么可能会发现这些示例似乎不起作用，这是 因为你没有这些示例所用的支持文件。例如，在图像上实现屏幕效果的示例中，需要图像文件。

但请放心，这些文件都放在本书的Web站点上了，而且打包好了供你下载。你找到的可下载文件 包含所有脚本、HTML文件、CSS文件以及用到的所有媒体文件。如果你遇到任何问题，可以查 看配套Web站点上的FAQ（常见问题）。

如果阅读了FAQ，而你的问题还没有解决，可以通过[email protected]给我们发邮件。

很抱歉地说一声，因为收到的邮件太多，所以我们不可能也不会回复那些把本书问题发送到我们 个人邮件地址的邮件。但是，我们可以保证发送到[email protected]的邮件会得到答复。

开始吧

当然，千里之行，始于足下。欢迎光临，请勿将手伸出窗外，照相时请不要用闪光灯。探索 JavaScript的旅程已经开始。

致谢

特别感谢我们的编辑Nancy Peterson，她的专业精神、冷静沉着和温暖的关怀使本书的写作 过程非常愉悦。

感谢Tracey Croom出色的制作工作和Scout Festa熟练的文字加工工作。

我们衷心感谢本书的排版人员Danielle Foster，她优雅镇定地完成了排版工作。感谢给本书编 索引的Emily Glossbrenner，她做了一项吃力不讨好的工作。

我们要感谢Peachpit出版社的Nancy Ruenzel和Nancy Davis所给与的支持。

我们要感谢采用本书以前的版本作为课程教材的所有高中、大专院校的教师。

感谢Stack的所有同事，尤其是Joel Spolsky、Jeff Atwood、Robert Cartaino、Rebecca Chernoff 以及Josh Heyer。他们拿出了大量的时间和耐心来帮助我，才让我在创作本书的过程中没 把工作丢掉。

也非常感谢Peachpit公司那位极具耐心的女士——我们做了14年同事，但我仍然很敬佩她 的创造力。

我要特别地感谢本书的另一位作者Tom Negrino。他为这版书所做的工作远远超出了原先

的分工，甚至还将他（和我）的结婚十周年纪念推迟到了本书完成之后。

2 3 4 5 6 7 8 9 10 11 12 13 14 15 16

18 17

版权声明

本书中文简体字版由美国Pearson Education，Inc.授权人民邮电出版社独家出版。未经出版者书面许可，不得以任何方式复制或抄袭本书内容。

前言 1

前言

如果你对编程有所了解，应该会注意到本书介绍JavaScript的方式与其他图书的风格很不一样。本书并不深入介绍JavaScript的语法和结构，而且本书也不是一本深入而全面的语言参考书

在与分步说明对应的脚本中，我们以粗体突出显示脚本中正在讨论的部分，这样你就能够马上找到我们正在讨论的代码。我们还常常在Web浏览器窗口的屏幕图中以灰色底纹突出显示其中某些重要的部分。

因为图书的页面比计算机屏幕窄，所以一些JavaScript代码行在页面上排不开。出现这种情况时，我们将代码行分为多行，在接续行前面使用箭头→表示这是续行，并且将续行缩进，如下所示：

前言 3

如果由于某种原因你打算输入某些脚本示例，那么可能会发现这些示例似乎不起作用，这是因为你没有这些示例所用的支持文件。例如，在图像上实现屏幕效果的示例中，需要图像文件。

但请放心，这些文件都放在本书的Web站点上了，而且打包好了供你下载。你找到的可下载文件包含所有脚本、HTML文件、CSS文件以及用到的所有媒体文件。如果你遇到任何问题，可以查看配套Web站点上的FAQ（常见问题）。

很抱歉地说一声，因为收到的邮件太多，所以我们不可能也不会回复那些把本书问题发送到我们个人邮件地址的邮件。但是，我们可以保证发送到[email protected]的邮件会得到答复。

特别感谢我们的编辑Nancy Peterson，她的专业精神、冷静沉着和温暖的关怀使本书的写作过程非常愉悦。

我们衷心感谢本书的排版人员Danielle Foster，她优雅镇定地完成了排版工作。感谢给本书编索引的Emily Glossbrenner，她做了一项吃力不讨好的工作。

感谢Stack的所有同事，尤其是Joel Spolsky、Jeff Atwood、Robert Cartaino、Rebecca Chernoff 以及Josh Heyer。他们拿出了大量的时间和耐心来帮助我，才让我在创作本书的过程中没把工作丢掉。

也非常感谢Peachpit公司那位极具耐心的女士——我们做了14年同事，但我仍然很敬佩她的创造力。

目录

第 1 章了解 JavaScript

第 2 章开始

第 3 章第一个 Web 应用程序

第 4 章处理图像

2 目录

第 5 章窗口与框架

第 6 章表单处理

第 7 章表单和正则表达式

第 8 章处理事件

第 10 章对象和 DOM

第 11 章建立动态页面

第 14 章工具包、框架和库

第 15 章用 jQuery 设计页面

第 16 章基于 jQuery 的应用

附录 A JavaScript 的版本演化和参考资料

随着 Web 的发展，页面设计人员还希望他们的页面能够与用户进行交互，HTML 很快就显得不足以满足这一需求了。Netscape 发明了 JavaScript，作为控制浏览器和给网页添加活力和交互性的方法。

自从诞生以来，JavaScript 已经经历了不小的演化（尽管有时候在不同的浏览器上演化的方向有所不同）。在本书后面，我们将详细讨论 JavaScript 的演化。

为了帮助你熟悉 JavaScript，我们建立了一个与本书配套的 Web 站点。在这个站点上提供了本书中的所有脚本（这样，你就不用自己输入了），以及更多的说明、附加资料和更新内容。站点的网址是 www.javascriptworld.com。

常常会看到 JavaScript 被称为“脚本语言”（scripting language），这暗示着它更适合编写脚本而不是程序。这实际上并没有根本性的差异。JavaScript 脚本也是一种程序，它们包含在 HTML 页面内部

（原先编写脚本的方式），或者驻留在外部文件中（现在的首选方法）。在 HTML 页面上，因为脚本文本包围在

部分中，如脚本 1-1 所示。但是如果愿意，也可以将脚本放在

部分中。如果你还不熟悉这些 HTML 概念，需要关于 HTML 的更多信息，那么我们建议你读一下 Elizabeth Castro 的《HTML XHTML CSS 基础教程（第 6 版）》。

随着计算处理速度和浏览器中 JavaScript 功能的不断提升，在客户端使用 Java 的情况越来越少。然而，Java 已经成为一种在服务器端编写代码的流行语言。

HTML 标签将 Java applet 嵌入网页，还要提供指定 applet 的附加信息。当浏览器看到

标签时，它会从服务器下载 Java applet，然后 applet 就会在这个标签中指定的屏幕区域中运行（见图 1-1）。