详情
本书以实例方式讲解了jQuery的概念和功能特性，其中涵盖了jQuery库、使用jQuery添加特效以及创建动画效果、jQuery插件的使用、事件处理、与表单的交互、数据处理，以及移动站点的开发等内容。读者在学完本书后，即可在自己的站点中活学活用jQuery的强大功能。
书名：jQuery与JavaScript入门经典
ISBN：978-7-115-36888-1
本书由人民邮电出版社发行数字版。版权所有，侵权必究。
您购买的人民邮电出版社电子书仅供您个人使用，未经授权，不得以任何方式复制和传播本书内容。
我们愿意相信读者具有这样的良知和觉悟，与我们共同保护知识产权。
如果购买者有侵权行为，我们可能对该用户实施包括但不限于关闭该帐号等维权措施，并可能追究法律责任。
• 著 [美] Brad Dayley
译 裴 强 袁国忠
责任编辑 傅道坤
• 人民邮电出版社出版发行 北京市丰台区成寿寺路11号
邮编 100164 电子邮件 315@ptpress.com.cn
网址 http://www.ptpress.com.cn
• 读者服务热线：(010)81055410
反盗版热线：(010)81055315
Brad Dayley: Sams Teach Yourself jQuery and JavaScript in 24 Hours
ISBN: 0672337347
Copyright © 2014 by Pearson Education, Inc.
Authorized translation from the English languages edition published by Pearson Education, Inc.
All rights reserved.
本书中文简体字版由美国Pearson公司授权人民邮电出版社出版。未经出版者书面许可，对本书任何部分不得以任何方式复制或抄袭。
版权所有，侵权必究。
本书采用直观、循序渐进的方法讲解了如何使用jQuery和JavaScript来创建具有极佳用户体验的动态Web应用，以及如何为各种设备开发具有吸引力的用户界面，以最大程度地满足用户的需求。
本书分为6部分，第1部分介绍了使用jQuery和JavaScript进行开发的基础知识；第2部分讲解了如何使用jQuery和JavaScript开发Web页面；第3部分介绍了构建具有丰富交互性的Web页面所需要的知识；第4部分介绍了一些高级概念；第5部分介绍了jQuery UI的相关知识；第6部分讲解了跨平台移动Web应用开发工具jQuery Mobile。
本书内容循序渐进、深入浅出、步骤详尽，而且富有大量适合动手练习的示例，可以帮助读者在短时间内掌握jQuery和JavaScript的相关知识，学会为各种流行的终端设备开发具有极佳用户体验的界面。本书适合对jQuery、jQuery Mobile 、JavaScript等感兴趣的前端开发人员以及移动应用开发人员阅读。此外，本书也是高等院校计算机及其相关专业课程的极佳教材。
我要借此机会感谢所有让本书得以付梓的人员。首先，感谢我的妻子和儿子给予灵感和支持，如果没有你们，本书根本不可能完成。
感谢Mark Taber确保本书没有偏离方向；感谢Russell Kloepfer所做的技术审阅；感谢Barbara Hacha将我天马行空的思想变成合乎逻辑的文字；感谢Tonya Simpson负责印制方面的杂务，最大限度地保证了本书的质量。
Brad Dayley 是一位资深软件工程师，拥有 20 多年企业级应用程序开发经验；使用HTML/CSS、JavaScript和jQuery开发过多种网页，其范围涵盖了企业级应用程序界面到复杂的富互联网应用，再到移动 Web 服务智能界面；还著有 Python Phrasebook和jQuery and JavaScript Phrasebook等图书。
当前，互联网用户多达几十亿。传统网站由包含大量链接的网页组成，这种网站正逐渐被包含高度交互元素的单页应用取代，并呈现出加速的趋势。其中的主要原因在于，用户不再像以前那样耐心地单击、等待并在网页之间切换，而希望网站犹如在其计算机和移动设备上运行的应用程序。
实际上，在您阅读本书期间，互联网上将新增数百万个网页。这些网页大多是使用HTML 编写的，它们使用 CSS 设置元素的样式，并使用 JavaScript 实现用户和后端服务之间的交互。
阅读本书后，您将对如何在网页中结合使用JavaScript和功能强大的jQuery库来提供丰富的用户交互有深入认识，知道如何使用动态代码让网页具有如下功能，从而创建出健壮的Web应用：对鼠标单击和手指轻扫快速做出响应；通过与后端服务交互将数据存储到Web服务器以及从Web服务器获取数据。
本书每章都介绍了创建专业级Web应用所需的基本知识。书中介绍的HTML和CSS基本知识，即便您以前从未使用过它们，也能快速上手。提供的大量代码示例，您可马上实现它们，而且随着学习的深入，您还能加以扩展。事实上，在本书的第1章，您就将使用jQuery和JavaScript创建一个动态网页。
请坐下来尽情享受这次使用jQuery和JavaScript开发Web应用的旅程吧。
本书并非只介绍jQuery和JavaScript，因为要创建出真正有用的Web应用，光了解这些语言的结构还不够。本书旨在让您通过24个简短而轻松的课程，掌握开发功能齐备的交互式Web应用所需的基本技能。本书涵盖如下关键技能和技术。
本书的大部分示例都包含如下内容。
本书的示例都很简单，理解和实现起来很容易。很多示例经过扩展后可直接用于网页中。事实上，每章末尾都有一些练习，让您对该章的示例进行扩展。
本书的所有示例都使用主流Web浏览器进行了兼容性测试，包括Google Chrome、Microsoft Internet Explorer和Mozilla Firefox。
每章末尾都有简短的问答环节，对每位读者都会有的疑问做出了解答；简短而全面的测验让您能够进行自测，确保您牢固地掌握了每个知识点；最后，提供了一两个练习，让您有机会将新学到的知识付诸应用。
本章介绍如下内容：
JavaScript及其配套库jQuery彻底改变了交互式网页和Web应用开发的游戏规则。长期以来，JavaScript一直是重要的动态网页开发工具，而随着jQuery、jQuery UI和jQuery Mobile等库的发展，Web开发与以前完全不同了。
本章简要地介绍jQuery和JavaScript开发领域。为此，将首先确保您明白动态Web开发。要有效地使用JavaScript和jQuery，您必须对Web服务器和Web浏览器之间的交互以及HTML和CSS有深入认识。
本章首先简要地介绍Web服务器和Web浏览器之间的交互及其涉及的各种技术，然后搭建并配置友好的jQuery和JavaScript开发环境，最后引领您编写第一个包含JavaScript和jQuery代码的网页。
Web服务器和Web浏览器之间的通信涉及很多组件，而JavaScript和jQuery能够与其中的每个主要组件交互。为帮助您更深入地认识这种交互，本节简要地介绍Web服务器/浏览器通信涉及的概念和技术。这里无意于做全面介绍，而只做大致讨论，让您能够明白这些技术之间的关系。
您对万维网的基本概念应该相当熟悉：在Web浏览器中输入地址或单击后，就将显示可用的信息。浏览器发送请求，服务器发送响应，浏览器再将其显示给用户。
这里的概念虽然简单，但必须执行多个步骤。接下来介绍涉及的组件、这些组件如何交互以及JavaScript和jQuery如何参与这些交互。
Web服务器是最重要的Web组件，没有它就没有数据可用。收到浏览器的请求后，Web服务器做出响应，浏览器再将这些数据显示出来。为响应浏览器，Web服务器需要做很多工作。例如，Web服务器及其组件检查请求的格式和有效性；为确保安全，它们还可能核实请求是否来自获得授权的用户。接下来，为生成响应，服务器可能与多个组件（乃至远程服务器）交互，以获得必要的数据。
除Web服务器外，最重要的组件就是浏览器了。浏览器向Web服务器发送请求，再向用户显示结果。浏览器在幕后执行了很多操作，它必须对来自服务器的响应进行分析，再决定如何向用户显示它们。
市面上的浏览器有很多，其中最受欢迎的是Firefox、Internet Explorer和Chrome。在显示网页方面，每款浏览器的行为都大致相同，但也存在一些差异。有鉴于此，对于您编写的JavaScript和jQuery脚本，必须在每款要支持的浏览器中进行详尽的测试。
浏览器收到响应后，将向用户显示最终输出，而JavaScript和jQuery可深深地涉足其中。对于从服务器返回的数据，这些脚本可修改其格式、内容、外观和行为。下面介绍浏览器的重要组成部分。
（1）DOM
浏览器通过创建文档对象模型（DOM）来渲染网页。DOM是一个树形结构，其根对象为HTML文档。根对象可能有多个子对象，而子对象又可包含其他子对象。例如，在包含一个列表的网页中，根对象有一个类型为列表的子对象，而这个子对象又有多个类型为列表元素的子对象。下面是一个简单的DOM树，它应用的网页包含一个标题以及一个由三个城市组成的列表。
浏览器知道如何显示DOM中的每个节点；为渲染网页，它读取每个节点并在浏览器窗口中绘制相应的像素。正如您在后面将看到的，JavaScript和jQuery让您能够直接与DOM交互：读取对象、修改对象乃至删除和添加对象。
（2）浏览器事件
浏览器跟踪多种事件，如网页加载完毕以及用户离开当前网页、按键、移动或单击鼠标，这些事件对jQuery和JavaScript程序来说至关重要。在JavaScript中，可根据事件的类型及其发生的位置采取响应的措施。
（3）浏览器窗口
浏览器还提供了有限的浏览器窗口访问功能，这让您能够使用JavaScript确定浏览器窗口的尺寸以及其他重要信息，进而根据这些信息决定脚本应如何做。
浏览器使用统一资源定位符（URL）来访问Web服务器上的文件。URL是独一无二的地址，用于访问Web服务器上的数据；Web服务器将URL关联到特定文件或资源。Web服务器知道如何分析URL，以决定使用哪些文件/资源来生成提供给浏览器的响应。在有些情况下，可能需要使用JavaScript来分析和生成URL，需要动态地链接到其他网页时尤其如此。
超文本标记语言（HTML）提供了基本的网页构件。HTML定义了一组元素，用于表示要加入到网页中的内容。每个元素都用一对标签括起，其语法如下。
例如，请看下面的元素。
浏览器知道如何正确地渲染每个标签的内容。例如，标签<p>用于表示段落，浏览器将在屏幕上显示起始标签<p>和结束标签</p>之间的文本。
HTML文件包含的标签的类型和位置决定了网页的格式和外观。浏览器读取标签，再按指定的方式渲染内容。
HTML5是下一代HTML，新增了一些媒体元素，如音频和视频。它还提供了大量的矢量图形标签，让您能够使用JavaScript直接在网页上绘制清晰的图像。
程序清单1.1所示的HTML可用于生成一个包含城市列表的简单网页。浏览器对其进行渲染后，得到的输出如图1.1所示。
程序清单1.1 一个简单的HTML文档，演示了在浏览器中渲染列表所需的HTML代码
图1.1 使用程序清单1.1所示的代码在浏览器中渲染得到的城市列表
创建网页时，面临的挑战之一是让它们看起来既漂亮又专业。浏览器默认提供的外观虽然可行，但与当今互联网用户期望的时尚而性感相距甚远。
层叠样式表（CSS）让您能够轻松地指定浏览器该如何渲染HTML元素。使用CSS可指定布局，还可指定各个元素在网页上的外观。为演示这一点，我给程序清单1.1所示的示例添加了一些CSS代码。在程序清单1.2中，第7～13行使用CSS修改了多种属性：修改了文本对齐方式和字体样式，还将项目列表符号从点改成了飞机图像，如图1.2所示。
程序清单1.2 在<STYLE>元素中使用一些CSS代码修改列表的外观
图1.2 CSS代码动态地修改浏览器中列表的外观
超文本传输协议（HTTP）定义了浏览器和Web服务器之间的通信。它定义了可发出的请求类型以及这些请求和HTTP响应的格式。
使用安全套接字层的超文本传输协议（HTTPS）添加了一个安全层（SSL/TLS），以确保连接的安全。Web浏览器通过HTTPS连接到Web服务器时，将获得一个证书，而用户可决定是否接受该证书。没有证书的用户发出请求时，Web服务器不会做出响应，这可确保请求来自安全的发起方。
下面简要地介绍HTTP报头以及两种最常见的HTTP请求：GET请求和POST请求。
（1）HTTP报头
HTTP报头让浏览器能够指定发送给服务器的请求以及从服务器返回的响应的行为和格式。HTTP报头是随HTTP请求和响应一起发送的。可使用JavaScript向Web服务器发送HTTP请求，因此您必须对其报头有大致了解。
Web服务器读取请求报头，并根据它们来决定如何生成发送给浏览器的响应。在响应中，Web浏览器添加响应报头，让浏览器知道如何处理响应中的数据。处理响应并渲染网页时，浏览器将首先读取并使用响应报头。
下面是一些常见的HTTP报头。
ACCEPT：指定响应可包含的内容类型。AUTHORIZATION：指定身份验证凭证，用于对发出请求的用户进行身份验证。COOKIE：浏览器之前应服务器请求而设置的Cookie值。Cookie是存储在客户端的键值对，可能是应服务器请求而设置的，也可能是使用JavaScript代码设置的；浏览器向服务器发送HTTP请求时，将同时发送Cookie。SET-COOKIE：来自服务器的Cookie值，浏览器启用了Cookie时将存储这些值。CONTENT-TYPE：来自Web服务器的响应包含的内容的类型。例如，对于文本，这个字段可能是“text/plain”，而对于.png图像，这个字段为“image/png”。CONTENT-LENGTH：请求体或响应体包含的数据量。HTTP请求和响应使用的报头还有很多，但上述清单足以让您对这些报头的用法有深入认识。
（2）GET请求
最常见的HTTP请求类型是GET请求。GET请求通常用于从Web服务器获取信息，如加载网页或获取要在网页上显示的图像。在浏览器中输入的URL中，指定了要获取的文件，如下所示。
GET请求只包含报头，而没有请求体数据。然而，要通过GET请求向服务器传递数据，可使用查询字符串。查询字符串作为URL的一部分被发送给Web服务器。要指定查询字符串，可在URL后面添加一个?字符，再指定一个或多个键值对（不同的键值对用&分隔），如下面的语法所示。
例如，下面的URL包含一个查询字符串，指定将参数gallery及其值01发送给服务器。
（3）POST请求
POST请求不同于GET请求，它没有查询字符串，而将需要发送给服务器的数据都编码到请求体中。POST请求通常用于修改Web服务器上数据的状态，例如，添加新用户的表单将其中的信息作为POST请求体的一部分发送给服务器。
最初，网页是静态的，这意味着浏览器渲染的文件就是存储在服务器上的文件，如图1.3所示。当试图打造支持用户交互、富媒体元素和大量数据的现代网站时，为支持各种静态网页而需要提供的网页数量将急剧增加。
图1.3 使用静态网页时，将Web服务器上的网页发送给浏览器，而浏览器原封不动地渲染它
一种更好的方式是，不在Web服务器上存储大量的静态HTML文件，而使用脚本根据Web服务器提供的数据动态地生成HTML，再由浏览器进行渲染。
这些脚本可以运行在服务器上，也可以运行在浏览器中。下面讨论这两种方法。大多数现代网站都结合使用服务器端和客户端脚本。
服务器端脚本编程指的是将服务器数据转换为HTML响应，再将其发送给浏览器。服务器端脚本编程的主要优点是，数据处理都是在服务器端完成的，从不通过互联网发送原始数据；另外，问题和数据修复都将在服务器中进行。其缺点是要求服务器有更大的处理能力，这可能降低有些应用的可扩展性。程序清单1.3是一个简单的PHP脚本，它动态地将城市列表添加到HTML文档中，再将该文档发送给浏览器。
图1.4是一个使用PHP服务器端脚本的示例。注意到发送给浏览器的文件与存储在服务器上的文件不同，但发送给浏览器的文件与浏览器渲染的文件相同。
程序清单1.3 一个在服务器上运行的PHP脚本，它填充城市列表项
图1.4 在Web服务器上执行PHP脚本，因此发送给浏览器的HTML文档不同于服务器实际存储的HTML文档
客户端脚本编程指的是将代码与网页一起发送给浏览器。这些代码要么在网页加载期间执行，要么在网页加载后执行。
客户端脚本编程有两大优点。一是数据处理将在客户端进行，这使得更容易扩展应用以支持大量用户；二是浏览器事件通常可在本地进行处理，无需向服务器发送请求，这让界面对用户交互的响应速度能够快得多。
JavaScript和jQuery无疑是最常用客户端脚本编程方式，本书将指出其中的原因。
（1）JavaScript是什么
JavaScript是一种编程语言，与其他编程语言很像。相比于其他编程语言，JavaScript的最大不同在于，浏览器内置了一个解释器，能够分析并执行JavaScript代码。这意味着使用JavaScript可编写能够直接访问浏览器和DOM的复杂应用。
能够访问DOM意味着可在网页中添加、修改或删除元素，而无需重新加载网页；能够访问浏览器意味着能够访问鼠标移动和单击等事件，这让JavaScript能够提供动态列表和拖放等功能。
（2）jQuery是什么
jQuery是个JavaScript库，其底层代码是使用JavaScript编写的，但将大量JavaScript代码封装成了易于使用的功能。jQuery的两大优点是提供了选择器和内置函数。
选择器让您能够快速访问特定的网页元素，如列表或表格。选择器还让您能够访问一系列元素，如所有段落或所有特定类的段落。这让您能够快速而轻松地访问特定的DOM元素。
jQuery还提供了大量内置功能，让您使用少量代码就能完成大量工作。例如，要隐藏特定元素或以动画方式调整元素的大小，只需编写一行代码。
（3）客户端脚本编程示例
程序清单1.4是一个简单的JavaScript客户端脚本。图1.5说明了数据在Web服务器和浏览器之间的传输过程。注意到存储在服务器的文件与发送给浏览器的文件相同，但JavaScript修改了浏览器加载的HTML文档。
程序清单1.4 一个简单的JavaScript客户端脚本，它在浏览器中运行以填充城市列表项
图1.5 JavaScript在浏览器中执行，因此浏览器渲染的HTML文档不同于发送给它的HTML文档
AJAX（Asynchronous JavaScript and XML，异步JavaScript和XML）指的是在网页加载后，使用JavaScript持续地与Web服务器通信。AJAX避免了用户交互时重新加载当前网页或加载其他网页，这减少了最初的Web服务器响应需要包含的数据量，还提高了网页的交互性。
为提供一个简单的AJAX示例，我编写了两个脚本：程序清单1.5和程序清单1.6。程序清单1.5是一个HTML文档，其中包含一些JavaScript代码，这些代码在网页加载后在客户端运行：向服务器发出AJAX请求，以便通过程序清单1.6所示的服务器端PHP脚本获取城市列表，再使用返回的城市列表生成HTML列表元素。
程序清单1.5 一个简单的JavaScript客户端脚本，它向服务器发出AJAX请求以获取城市列表，再使用它来生成HTML列表元素
程序清单1.6 一个服务器端PHP脚本，它返回一个简单的JSON字符串，供程序清单1.5所示的JavaScript脚本进行分析和使用
图1.6说明了AJAX请求/响应期间发生的通信过程。注意到再次向服务器发送了请求，以获取城市列表。
图1.6 JavaScript向服务器发送额外的请求，以获取用于填充网页的额外信息
简要地介绍动态Web编程后，该切入正题，为编写jQuery和JavaScript准备好开发环境了。
编写jQuery和JavaScript项目时，开发环境至关重要。开发环境应具有如下特点。
搭建Web开发环境涉及三个步骤。首先，需要安装一款IDE，它提供了创建和编辑代码的工具。其次，需要在浏览器中添加并启用JavaScript调试工具。第三，需要搭建用于开发的Web服务器，供您用来测试脚本。下面引领您完成所有这些任务。
对JavaScript开发而言，IDE最为重要。IDE提供了单一的用户界面，让您能够完成各种Web应用编写任务。实际上，可使用任何文本编辑器来编写HTML、CSS、JavaScript和jQuery代码，但您将发现易于使用的IDE可极大地提高效率。
市面上有多款这样的IDE，有些是开源的，有些价格不菲，请根据需要选择最合适的那款。选择的IDE应支持代码自动完成和错误检查，因为这两项功能可节省大量时间。
可供选择的IDE包括Dreamweaver、Visual Studio以及其他几款。然而，Eclipse包含大量插件并支持扩展。就jQuery和JavaScript而言，可考虑使用Aptana Studio，因为它易于安装和使用，且提供了Mac、Windows和Linux版。
（1）安装Aptana Studio
本书使用Aptana Studio，因此这里将详细介绍其安装和配置步骤，但本书介绍的所有编辑和调试概念也适用于其他IDE。
注意：
要安装Aptana Studio，必须先安装Java JRE或JDK。
您可从下面的网址下载Aptana Studio：www.aptana.com/products/studio3/download。
您应选择Standalone Version并指定您要安装到哪种操作系统上，如图1.7所示。下载安装程序后，执行它并按说明操作；安装过程非常简单。
安装Aptana Studio后，启动它。首次启动时，需要指定工作区的位置。工作区是存储项目和文件的地方，请选择一个方便管理的位置。
（2）配置Aptana Studio
安装Aptana Studio后，还需执行下面几个配置步骤。
1．选择菜单Commands>Bundle Development>Install Bundle，再从束列表（bundles list）中选择jQuery，并单击OK按钮。
2．选择菜单Windows>Preferences，以打开如图1.8所示的Preferences（首选项）对话框。在Preferences对话框中，选择Aptana Studio>Themes（如图1.8所示），再从下拉列表中选择一个主题。主题将设置窗口、菜单、选定内容和代码元素的颜色和字体。请选择最适合您的主题。在这个对话框中，还可对主题进行定制。
图1.7 Aptana Studio下载页面
注意：
在这个对话框中，还可导入和导出主题。本书的配套网站提供了一个名为AptanaTheme.tmTheme的文件，它就是编写本书时使用的主题。您可在这个对话框中导入这个主题。
图1.8 Aptana Studio Preferences对话框
3．选择左下角的选项卡Outline，并将其拖放到选项卡App Explorer旁边。这让您能够更好地查看脚本的大纲，并关闭底部不需要的选项卡Snippets和Sample。最终的结果应类似于图1.9所示。
4．尝试使用各种首选项和菜单，以熟悉界面。
至此，Aptana Studio便配置好了，可以开始创建项目了。
图1.9 移动选项卡Outline后的Aptana Studio界面
安装并配置Aptana Studio后，便可配置浏览器以调试JavaScript了。本节将介绍在三款主要浏览器中启用JavaScript调试的步骤。选择使用哪款浏览器无关紧要，本书使用的是Firefox。
Firefox提供的用户体验最为一致且最为可靠。另外，Firefox的跨平台支持也最为一致。
（1）在Firefox中安装Firebug
按如下步骤在Firefox中启用JavaScript调试。
1．打开Firefox。
2．选择菜单Tools（工具）> Add-Ons（附加组件）。
3．在右上角的搜索框中输入Firebug以搜索Firebug，再单击Install（安装）按钮安装它。
4．在右上角的搜索框中输入FireQuery以搜索FireQuery，再单击Install（安装）按钮安装它。FireQuery扩展Firebug，使其也支持jQuery。
5．重新启动Firefox后，单击Firebug按钮以显示Firebug控制台，如图1.10所示。
图1.10 启用Firebug后的Firefox
（2）在Internet Explorer中启用开发人员工具
请按如下步骤在Internet Explorer中启用JavaScript调试。
1．打开Internet Explorer。
2．单击Settings（设置）按钮并从下拉菜单中选择Developer Tools（开发人员工具），也可按F12键。
3．将显示开发人员控制台，如图1.11所示。
（3）在Chrome中启用JavaScript控制台
请按如下步骤在Chrome中启用JavaScript调试。
1．打开Chrome。
2．单击Settings（设置）按钮，并从下拉菜单中选择Tools（工具）>Developer Tools（开发者工具），也可按Ctrl+Shift+j（PC）或CMD + Shift + j（Mac）。
3．将显示JavaScript控制台，如图1.12所示。
图1.11 显示开发人员控制台后的Internet Explorer
图1.12 显示开发者控制台后的Chrome
浏览器准备就绪后，最后一步是安装并配置用于开发的简单服务器。在可能的情况下，通常最好在开发计算机上安装基本的Web服务器。
可供选择的Web服务器有多款，但最常用的是Apache和IIS。就开发服务器而言，最佳的选择是支持MySQL和PHP的Apache。本书使用XAMPP，因为它有Mac、Windows和Linux版。
XAMPP可从下述地址下载：www.apachefriends.org/en/xampp.html。
请按如下步骤安装XAMPP，并将其配置为开发服务器。
1．下载XAMPP安装程序并安装XAMPP。安装过程非常简单，但请将您选择的安装位置记录下来，后面要用。
2．启动XAMPP Control Panel，如图1.13所示。
图1.13 在XAMPP Control Panel中，选择Apache配置文件http.conf
3．在XAMPP Control Panel中，单击Apache的Config按钮，并选择文件httpd.conf在编辑器中打开这个Apache 配置文件。
4．在文件httpd.conf中添加如下指令，这样该服务器运行时您将能够直接访问目录code。
警告：
选项Allow from All允许任何人在该Web服务器运行时访问指定的文件夹。这非常适合调试。如果您希望安全性更高，请参阅Apache安全指南，其网址为http://httpd.apache.org/docs/2.2/configuring.html。
注意：
在第4步中，C:/xamp是XAMPP在Windows系统中的默认安装路径。如果您将XAMPP安装到了其他位置或使用的是Linux或Mac系统，则需在Directory指令中相应地调整指定的路径。
5．保存文件。
6．在目录/xamp/htdocs（或您设置的Apache根目录）中，创建一个名为code的目录。您将把自己编写的代码存储到这个目录。
7．在XAMPP Control Panel中，停止Apache服务再启动它。
8．在Web浏览器中输入如下地址，浏览器中将出现类似于图1.14所示的目录链接。
至此，Web服务器就已准备就绪，可将其用于Web开发了。
图1.14 核实 Web 浏览器能够访问新创建的目录code
安装IDE和Web服务器后，便可以开始创建项目了。本节介绍一些概念以及在Aptana Studio中创建项目的过程。
Web项目开始通常很小，只有几幅图像和几个文件，但随着时间的推移，将在项目中添加越来越多的文件，如果项目组织不善，很快就会变得混乱不堪。
为避免这种问题，应预先规划目录结构。什么样的目录结构最合适呢？这取决于具体需求、项目将包含多少图像、文件类型等因素。
一个简单的例子是，可采用类似于下面的基本目录结构。
上述列表旨在说明一种确保文件组织有序的方式；哪种组织方式最佳完全由您决定。您可能想添加更多的子目录，但不要使用太多的子目录，以免文件的URL过于混乱。
创建Web项目时，需要注意的另一个方面是文件名。下面是一些需要考虑的因素。
创建项目
本节介绍在Aptana Studio中创建项目的过程。在AptanaStudio和大部分IDE中，项目都为多文件网站和应用提供了一种组织、控制、生成和部署方式。
本节不会花太多时间讨论项目，只想让您对基本Web项目的工作原理有大致认识。
请按如下步骤在Aptana Studio中创建一个项目。
1．选择菜单File>New>Web Project打开Project Template（项目模板）对话框。
2．选择Default Project并单击Next按钮。
3．输入项目名。请使用简短而有意义的项目名，如本书使用的项目名TYjQueryCode。
4．取消选择复选框Use Default Location。
5．输入本章前面在文件httpd.conf中添加的目录（这里为c:\xampp\htdocs\code）。
6．单击Finish按钮，新项目将出现在选项卡Workspace中，如图1.15所示。
图1.15 选择要在哪里（设备还是模拟器上）运行应用程序
7．右击项目名并选择New>Folder，再将文件夹命名为hour01，用于存储本章的代码。
8．至此第一个项目便创建好了。
使用jQuery和JavaScript创建动态网页
创建项目后，便可开始创建动态网页了。在本节中，您将按指定的步骤创建一个非常简单的动态网页。这个网页是基于HTML的，它使用CSS指定样式，并使用jQuery和JavaScript实现交互。
添加HTML
创建简单网页的第一步是，指定可供样式化和操纵的HTML元素。请按如下步骤在Aptana中创建HTML文档。
1．右击前面创建的文件夹hour01。
2．从弹出菜单中选择New>File。
3．将文件命名为first.html并单击OK按钮，这将打开一个空文档。
4．输入下面的HTML代码。如果您不太熟悉HTML，也不用担心，本书后面将介绍足够的知识，让您能够使用它。
5．保存文件。
6．在Web浏览器中，输入下面的URL，您将看到文本Click Me。
就这么简单，至此所有的基本HTML元素都已准备就绪。在下一节，您将设置元素<span>的样式，让文本Click Me看起来更像按钮。
浏览器渲染的简单文本很乏味，但通过添加CSS样式，很容易解决这种问题。在本节中，您将使用CSS让文本看起来更像按钮。
请按如下步骤给<span>元素添加CSS样式。为方便您参考，程序清单1.7是您执行下述步骤对样式进行修改后的脚本。
1．在网页的<head>标签中，添加如下代码，给所有的<span>元素指定CSS样式。
2．在样式span中添加如下属性设置，将文本的背景色改为深蓝色。
3．在样式span中添加如下属性设置，将字体颜色改为白色，并将字体改为bold。
4．在样式span中添加如下属性设置，在文本周围加上边框。
5．在样式span中添加如下属性设置，以指定<span>元素的绝对位置。
6．保存文件。
7．在Web浏览器中输入如下URL，您将看到样式化后的Click Me，如图1.16所示。
图1.16 设置样式后，<span>元素看起来就像按钮
根据需要设置HTML元素的样式后，便可开始添加动态交互了。在本节中，您将导入托管的jQuery库，以便能够使用jQuery；然后，将浏览器鼠标事件mouseover关联到一个移动文本的JavaScript函数。
请按如下步骤在网页中添加jQuery和JavaScript交互。
1．给<span>元素添加一个ID，以便能够引用它；另外，给mouseover事件指定处理程序，如程序清单1.7的第30行所示。
2．在标签<head>中添加下面的代码行（如程序清单1.7的第5行所示）。这行代码从托管网站加载jQuery库。
3．在标签<head>中添加下面的JavaScript函数（如程序清单1.7的第6～13行所示）。这个函数创建一个数组，其中包含10～350的坐标值；每当用户在<span>元素上移动鼠标时，都随机地设置该元素的CSS属性top和left。
4．保存文件。
5．在Web浏览器中输入下面的URL，您将看到样式化的文本Click Me，如图1.16所示。
6．现在尝试单击按钮Click Me。每当被鼠标指向时，该按钮都将移动，让您无法单击它。
7．找个您讨厌的家伙，让他去单击这个按钮。
程序清单1.7 一个简单的jQuery和JavaScript交互式网页
在本章中，您学习了Web服务器和浏览器通信的基本知识、GET和POST请求的差别以及服务器端和客户端脚本的用途，还学习了DOM以及浏览器如何使用它来渲染显示给用户的网页。
您搭建了良好的Web开发环境，并创建了第一个项目。在创建这个项目的同时，您还结合使用HTML、CSS、jQuery和JavaScript创建了一个动态网页。
问：客户端脚本和服务器端脚本哪个更好？
答：这完全取决于您要完成什么任务。有些人认为只能采用这两种方式之一，实际上结合使用它们的方案是最佳的。一条不错的规则是，如果交互主要基于用户操作，如单击鼠标，就使用客户端脚本；如果数据验证和错误处理要求与服务器交互，就使用服务器端脚本。
问：为何浏览器处理JavaScript的方式各不相同？
答：为渲染HTML以及与JavaScript交互，浏览器使用了一个引擎，这个引擎对来自服务器的数据进行分析、创建对象并将其交给图形渲染引擎，后者再将这些对象显示到屏幕上。由于浏览器使用的引擎各不相同，因此它们解释脚本的方式存在细微差别，尤其是未标准化的边缘元素。如果要支持所有的浏览器，就需要在每款浏览器中对网页进行测试，核实它们能够正常运行。
作业包含一组问题及其答案，旨在加深您对本章内容的理解。请尽可能先回答问题，再看答案。
1．打开网页时发送的是GET请求还是POST请求？
2．哪种脚本能够访问浏览器鼠标事件：服务器端脚本、客户端脚本，还是两者都如此？
3．判断对错：所有浏览器都默认启用了JavaScript控制台。
4．定义DOM元素的外观时，使用哪种脚本最合适？
1．GET。
2．客户端。
3．错。在所有浏览器中，您都必须手工启用JavaScript调试。
4．使用CSS脚本来定义DOM元素的外观最简单。
1．修改本章的.html文件，每次移动按钮时都随机地设置其背景色。为随机选择颜色，请添加下面两行代码。
再在JavaScript代码中指定CSS属性background-color，如下所示。
2．在本章的.html文件中添加一个<span>元素，并让其行为与第一个<span>元素相同。为此，请在合适的位置添加下面两行代码（您应该知道该将它们放在什么地方）。
本章介绍如下内容：
编写JavaScript和jQuery应用程序时，面临的一项重大挑战是找出并修复脚本中的问题。简单的语法错误和无效值可能令您万般沮丧，浪费您大量时间。有鉴于此，出现了一些卓越的工具，可帮助您快速而轻松地找出脚本中的问题。在本章中，您将学习使用Firebug调试JavaScript的基本知识。虽然其他浏览器的开发控制台稍有不同，但大部分原理是相通的。另外，如果您不懂本章的示例代码，也不用担心，本书后面将介绍它们。在您大量地编写代码前，应明白如何调试。
您首先需要熟悉的工具之一是JavaScript控制台，它让您能够查看JavaScript脚本的输出：错误和日志消息将实时地显示到JavaScript控制台。
例如，脚本存在错误，导致浏览器无法对其进行分析时，这种错误将显示到控制台。除错误外，您还可使用console.log语句在JavaScript控制台显示调试消息。
注意：
除console.log外，您还可使用console.error()、console.assert()和其他语句向JavaScript控制台显示日志信息。有关如何使用Firebug控制台日志的更详细信息，请参阅https://getfirebug.com/wiki/index.php/Console_API。
JavaScript控制台是一个非常简单的工具，但功能强大。它由两部分组成：控件和日志项列表，如图2.1所示。
图2.1 Firebug JavaScript控制台显示日志消息和错误
请注意单击Console（控制台）标签时显示的菜单。使用该菜单可启用控制台，还可指定要在消息列表中显示的错误和日志消息类型。
控制台还提供了包含多个选项的工具栏，这些选项都可通过单击来开关。下面描述了每个选项。
在图2.1所示的消息列表部分，注意到有两种消息。一种是log语句显示的，另一种是错误。在这两条消息的右边，都显示了行号；如果您单击行号，将直接切换到代码。
在错误消息中，注意到上面的文本指出了错误，而下面的文本指出了实际的JavaScript代码。这对调试很有帮助，因为根据指出的错误和代码通常能够发现问题所在。
使用JavaScript控制台找出错误
要明白控制台的用法，最简单的方式是使用它来调试脚本。请看程序清单 2.1 所示的HTML代码，其中包含多种错误。请在Aptana中按如下步骤将这个程序清单加入到项目中。
1．右击项目并从弹出菜单中选择New>Folder。
2．将文件夹命名为hour02并单击Finish按钮。
3．右击新建的文件夹并从弹出菜单中选择New>File。
4．将文件命名为hour0201.html。
5．输入程序清单2.1所示的内容；如果您从配套网站下载了该文件，也可将其内容复制并粘贴到新文件中。
6．保存文件。
程序清单2.1 一个包含JavaScript错误的简单HTML文档
程序清单 2.1 所示代码的目的如下：在浏览器加载页面后向控制台显示消息 Page Is Loaded；每当用户单击浏览器中的文本Click Me时，都显示消息User Clicked。问题是这个脚本存在多个bug。
文件准备就绪后，按如下步骤使用JavaScript控制台来调试错误。
1．启动Firefox并单击Firebug图标。
2．在Firefox中输入下面的URL，以加载新创建的网页。
图2.2 JavaScript控制台显示页面加载期间发生的两个错误
3．在Firebug中，单击Console（控制台）标签以显示JavaScript控制台，如图2.2所示。
4．请注意控制台中显示的错误，如图2.2所示。第一个错误指出loadedFunction()的定义中缺少“，”。第二个错误指出loadedFunction未定义。结合这两个错误可知，loadedFunction()的定义有问题。从定义这个函数的语句可知，function被错误地拼写成了fnction。
5．在Aptana中，将第6行的单词fnction改为function。
6．回到 Firefox 并刷新网页。现在控制台只显示了 Page Is Loaded，这是函数loadedFunction()显示的消息，并非错误。
7．单击文本Click Me，控制台将新增一条错误消息，如图2.3所示。这条错误消息指出clickItNot未定义。在HTML文件中查找clickItNot，发现第15行将事件onclick关联到了clickItNot()，但定义的JavaScript函数名为clickIt()。
图2.3 JavaScript控制台显示一条日志消息和一条错误消息
8．在Aptana中，将第15行的clickItNot改为clickIt，再保存文件。
9．重新加载网页。
10．再次单击文本Click Me，控制台显示两条日志消息，而没有错误消息，如图2.4所示。至此，成功地完成了网页调试工作。
图2.4 JavaScript控制台显示两条日志消息，没有错误消息
调试HTML元素有时候很困难。浏览器渲染HTML文档时，简单的语法错误都可能导致严重的问题。另外，HTML元素的有些属性不影响网页的外观，但会影响网页的行为。
HTML检查器（Inspector）和DOM编辑器可帮助您找出并修复HTML代码中的问题。下面通过一些简单的示例演示如何使用这些工具。
HTML检查器让您能够查看浏览器分析的每个HTML元素，这让您能够从浏览器的角度审视HTML，让语法错误更为明显。
图2.5显示了Firebug的HTML检查器。HTML检查器提供了一些很有用的功能。
图2.5 Firebug的HTML检查器
注意：
将鼠标指向DOM树中的元素时，该元素将在网页中呈高亮显示：HTML元素的内容为淡蓝色、内边距为紫色、外边距为黄色。
使用HTML检查器调试HTML
下面使用程序清单 2.2 所示的代码来演示如何使用 HTML 检查器。这是一个基本的HTML文档，包含一个电影列表和一个标题，并要以斜体方式显示标题中的Favorite。然而，从图2.6所示的渲染结果可知显然存在一些问题：所有内容都为斜体，而第一个列表项没有项目符号。这些问题都是由两个字符导致的。
程序清单2.2 一个非常简单的HTML文档，其中存在一些HTML语法错误，如图2.6所示
图2.6 这个网页存在两个问题：应该只有单词 Favorite 为斜体；第一个列表项没有项目符号
请使用HTML检查器按如下步骤找出并修复HTML语法错误。
1．在项目的文件夹hour02中，新建文件hour0202.html，在其中输入程序清单2.2所示的代码，再保存这个文档。现在您应该能够熟练地完成这个过程。
2．启动Firefox，并单击Firebug图标以启用Firebug。
3．在Firefox中输入下面的URL，网页将类似于图2.6所示。
4．单击Firebug中的标签HTML，再依次展开标签<html>、<body>和<i>，如图2.7所示。注意到在标签<i>下，唯一的元素是另一个标签<i>。这不对，因此回到Aptana并查看第7行的标签<i>。注意到结束标签<i>缺少/。
5．将第二个<i>标签改为结束标签</i>，再保存文档。
6．在浏览器中刷新网页，注意到现在只有单词Favorite为斜体了，但第一个列表项还是没有列表符号，如图2.8所示。
图2.7 HTML检查器在DOM中显示了第二个<i>标签
图2.8 这个网页现在只有一个问题——第一个列表项没有列表符号
7．在HTML检查器中，依次展开标签<html>、<body>、<ul>和<ll>，如图2.9所示。在元素<ul>下，包含的不是4个<li>元素，而是一个<ll>元素，其中又包含<li>元素。本书还未介绍HTML标签，但如果您熟悉HTML列表，就知道ll不是合法的HTML标签，它应为<li>。
图2.9 从DOM可知，浏览器认为<ul>下是一个<ll>标签，而不是一组<li>标签
8．回到Aptana，将第9行的<ll>改为<li>并保存文档。
9．在浏览器中刷新网页，网页将正确地显示，如图2.10所示。
图2.10 格式设置正确的网页
调试HTML时，另一个重要的工具是DOM检查器。DOM检查器功能极其强大，让您能够查看DOM中每个HTML元素的特性（attribute）、属性、函数、子节点、父节点等一切。信息是以树视图的方式显示的，让您能够展开和折叠各个编组。
可通过两种方式访问DOM检查器：单击Firebug中的DOM标签；查看HTML时单击HTML检查器中的DOM标签。
图2.11显示的是主DOM检查器。在主DOM检查器中，可访问有关浏览器环境的各种信息。例如，在图2.11中，展开了window对象的screen特性，这让您能够看到浏览器窗口的可用尺寸和实际尺寸。
图2.11 Firebug的主DOM检查器
通常，在HTML检查器中打开DOM检查器是更佳的选择，如图2.12所示。使用HTML检查器中的DOM选项卡时，只能看到当前选定的HTML元素的DOM。这减少了显示的信息量；另外，还可在浏览器中快速修改HTML元素的特性值，让调试和开发工作容易得多。
图2.12 在DOM检查器中编辑HTML元素
在DOM检查器中编辑HTML元素的值
例如，可按如下步骤修改前述示例中HTML元素的值。
1．在FireFox中显示文件hour0202.html，并启用Firebug。
2．单击Firebug中的标签HTML。
3．依次展开节点<html>、<body>和<ul>。
4．选择第一个<li>节点。
5．单击右边的DOM标签，如图2.12所示。
6．在DOM检查器中，向下滚动到节点firstChild并展开它，这是一个<TextNode>元素。
7．双击特性data右边的值，并按图2.12那样修改文本。注意到网页中渲染的HTML元素也变了。操纵HTML节点的可编辑特性就这么简单。
要调试动态网页，还需知道如何调试CSS问题，因为要实现网页的动态性，很多时候都需使用JavaScript修改CSS布局。
如果JavaScript或jQuery脚本修改了DOM元素的CSS布局，查看Web浏览器中的代码不会有任何帮助，而需要查看浏览器应用于元素的CSS。为此，需要结合使用CSS检查器以及HTML检查器中的布局检查器和样式检查器。
CSS检查器让您能够访问网页加载的所有CSS脚本，如图2.13所示。CSS检查器顶部有两个下拉列表，左边的下拉列表让您能够在下面两个选项之间切换。
图2.13 在CSS检查器中编辑CSS属性
右边的下拉列表包含所有这样的文件，即已加载的包含CSS的文件。这让您能够选择要查看和编辑哪个CSS文档。
在CSS检查器中，还可以编辑CSS，如图2.13所示。请注意其中的禁用图标，单击这个图标将禁用相应的CSS属性，而这个图标也将从红色变成灰色。您还可以直接编辑CSS属性的值，如图2.13所示。
除编辑CSS文件外，还可查看和编辑特定元素的CSS属性，为此需要切换到HTML检查器。图2.14显示了HTML检查器中的“样式”选项卡。在样式检查器中，可查看和修改特定元素的属性值。
图2.14 在HTML检查器中，在样式检查器中编辑CSS属性
图 2.14 还演示了样式检查器的一些重要功能。注意到在菜单中选择了：hover，这将显示将鼠标指向选定元素时，将应用于该元素的CSS样式。另外，注意到选择器span:hover覆盖了选择器span的background-color设置。样式窗口显示了完整的CSS层次结构，让您能够知道属性值来自哪个CSS选择器以及哪些值被覆盖。
调试CSS时，另一个功能极其强大的工具是HTML检查器中的布局检查器。布局检查器提供了易于使用的可视化界面，让您能够查看选定HTML元素的CSS布局，如图2.15所示。
在布局检查器中，您可以使用、查看和修改下述方面。
图2.15 在HTML检查器的布局检查器中，查看CSS布局属性
编辑CSS布局
为帮助您理解如何使用Firebug调试和编辑CSS布局，来看程序清单2.3所示的代码。这些代码使用选项卡式方框显示信息。CSS属性存在一些问题，导致网页不能正确地显示，如图2.16所示。
注意到这些选项卡垂直地堆叠，且选项卡之间有空隙。
程序清单2.3 一个非常简单的HTML文档，其中存在一些HTML语法错误，如图2.16所示
图2.16 糟糕的选项卡CSS布局导致网页非常丑陋
请按如下步骤修复CSS布局。
1．在项目的文件夹hour02中，新建文件hour0203.html，再其中输入程序清单2.3所示的代码，再保存文档。
2．启动Firefox并单击Firebug图标以启用Firebug。
3．在Firefox中输入如下URL。
4．单击Firebug中的标签HTML，再依次展开元素<html>、<body>、<div id="container">、和<div id="tabs">，如图2.17所示。
5．选择元素<div id="container">并展开它。
6．选择子元素<div id="tabs">。
7．单击Layout（布局）标签，并将鼠标指向外边距矩形。查看用于包含标签的元素的外边距辅助线，它几乎与一个标签等宽，因此无法让全部三个标签并排显示。
图2.17 布局辅助线表明，没有足够的空间让三个标签并排显示
8．为修复这个问题，单击标签Style（样式），并将属性width改为300px，如图2.18所示。注意到三个标签并排显示了，但间距依然太大。
注意：
也可以在布局检查器中直接修改外边距、边框、高度、宽度和内边距值。
图2.18 修改<div>的宽度，让三个标签并排显示，但标签之间的间距依然太大
9．右击网页中的Name标签，并从弹出菜单中选择“使用Firebug查看元素”，将在HTML检查器中自动选择这个元素。
10．单击标签“布局”（Layout），并将鼠标指向外边距矩形，如图2.19所示。注意到<span>元素的外边距为5像素，这就是标签没有紧靠在一起的原因所在。
图2.19 布局辅助线表明，<span>元素的外边距不为零，导致标签不能紧靠在一起
11．切换到“样式”选项卡，并禁用<span>元素的margin属性，如图2.20所示。现在，标签紧靠在一起，并紧靠着信息框。
图2.20 禁用属性margin，让标签紧挨在一起，并紧靠着信息框
前面介绍了如何在JavaScript控制台中查找JavaScript和其他脚本的错误。如果脚本并未导致浏览器错误，只是运行方式不符合预期，该如何办呢？Firebug集成了一个优秀的调试器，可助一臂之力。
JavaScript调试器让您能够查看随网页加载到浏览器中的JavaScript脚本。除查看脚本外，您还可以设置断点、监控变量值以及查看调用栈，就像使用其他调试器时一样。
图2.21显示了Firebug提供的JavaScript调试器的组成部分。在JavaScript调试器中，您可使用如下功能。
图2.21 Firebug的JavaScript调试器提供了代码、监控、栈和断点视图
使用JavaScript调试器
下面的示例将帮助您熟悉JavaScript调试器。请看程序清单2.4所示的代码，这是一个基本网页，包含一个按钮和一个计数字符串。这个HTML文档包含两个<div>元素。第一个为<div id="clicker"onclick="countIt()">，定义了一个简单的按钮。当您单击这个按钮时，将调用JavaScript函数countIt( )。第二个是<div id="counter">，用于显示一个数字。
每当您单击按钮时，JavaScript函数countIt( )都将显示的数字加1。然而，这些JavaScript代码存在问题，导致数字增加到2后就不再增加了。
程序清单2.4 一个非常简单的HTML文档，其中的JavaScript代码有问题
请按如下步骤在JavaScript调试器中设置断点并调试问题。
1．在项目的文件夹hour02中，新建文件hour0204.html，添加程序清单2.4所示的代码，再保存文档。
2．启动Firefox并单击Firebug图标以启用Firebug。
3．在Firefox中输入下面的URL，注意到网页包含一个按钮和数字1。
4．单击Firebug中的标签“脚本”（Script），再从脚本选择列表中选择hour0204.html，您将在调试器的脚本区域看到程序清单2.4所示的代码。注意到第7～11行的函数设置div元素counter显示的值。
5．单击行号8的左边，在第8行设置一个断点。出现了一个红点，如图2.22所示。另外，确保在调试器中显示了“监控”选项卡。
6．单击网页中的按钮，调试器中将出现一个黄色箭头，而第8行呈高亮显示。脚本执行到这行后停止了。这个函数决定要在div元素中显示什么值。在“监控”选项卡中，注意到变量cnt还未定义。
图2.22 JavaScript调试器在第8行停止，因为在这里设置了断点。“监控”选项卡指出变量cnt未定义
7．单击“单步跳过”图标，变量cnt的值将变成1。
8．再次单击“单步跳过”图标，代码行cnt += 1；将变量cnt的值变成了2。
9．单击“单步退出”图标三次，跳出当前函数以及后续jQuery函数。注意到网页中显示的值变成了2。
10．单击“断续”按钮，让脚本执行完毕。到目前为止，一切顺利。
11．再次单击网页中的按钮。调试器将再次激活，并像第6步那样在第8行停止。注意到变量cnt的值再次变成了未定义。
12．单击“单步跳过”图标，变量cnt的值变成了1。再次单击“单步跳过”图标，变量cnt的值变成了2。单击页面中的按钮时，变量cnt重新变成了未定义，然后依次变为1和2。
13．为修复这种问题，在Aptana中调换第7和8行的位置，从而在函数incCount()外面定义变量cnt。这样，变量cnt将只被定义和设置一次（即脚本加载时），然后再定义函数incCount()。
14．保存这个文件，再在Firefox中刷新网页。这次脚本将在页面加载时停止执行。图2.23表明，JavaScript调试器在hour0204.html的第8行停止执行，这是因为第8行为函数定义而不是变量cnt的定义。
15．单击第8行的断点将其删除，再在第9行添加一个断点，如图2.23所示。
16．单击“断续”，按钮接着执行JavaScript并结束网页加载。
17．单击网页中的按钮，JavaScript将再次停止执行—这次是在第9行。这次您在“监控”选项卡中看不到变量cnt，除非展开元素Window（窗口），如图2.24所示。
18．为避免每次调试时都展开元素Window，单击监控列表开头的NewWatch Expression（新建监控表达式），如图2.24所示，再输入cnt并按回车键。在监控列表开头新增了监控表达式cnt，如图2.24所示。
19．单击“单步跳过”图标，变量cnt的值将变成2。再单击“断续”按钮接着往下执行。
20．再次单击网页中的按钮，这次变量cnt的值为2。单击“单步跳过”图标，变量cnt的值将变成3。
图2.23 将断点从函数定义行移到函数的第一行
图2.24 添加监控表达式cnt，以免每次都得展开元素Window
21．程序看起来没有问题，因此单击第9行的断点将其删除，再单击“断续”按钮接着往下执行。
22．现在每当您单击按钮时，显示的数字都将加1。至此，您成功地完成了JavaScript脚本调试。
这个示例非常简单，这是有意为之的，旨在让您能够轻松地按指定步骤做，从而熟悉调试器的工作原理。完成本书的练习时，您可能会多次用到这个调试器。请牢记基本的调试步骤：设置断点并在分步执行代码时查看变量的值。
大家常问的一个问题是，如何调试jQuery。即便是有丰富JavaScript调试经验的人，也会提出这样的问题。答案很简单，jQuery和各种插件也是JavaScript代码，要调试jQuery，可从网上下载未压缩的jQuery库，并将其存储到项目中。这将在本书后面介绍。
为何要下载未压缩的版本呢？因为压缩后的版本可读性极差，所有代码都放在一行中，在调试器中显示的效果很糟。未压缩的版本格式很好，可读性极强。
注意：
即便无法获得未压缩的jQuery库文件，可在Aptana中打开jQuery库文件，再选择菜单File>Format。Aptana将自动设置文件的格式，使其美观易读。大多数IDE都提供了这样的功能。
对于格式良好的jQuery库或其他JavaScript库，可像调试其他JavaScript文件一样调试它们。
调试JavaScript时，常用的一个极具价值的Firebug工具是网络流量分析器。要使用网络流量分析器，可单击Firebug中的标签Net（网络），如图2.25所示。它显示从浏览器向Web服务器发送的每个请求的信息，让您能够更深入地了解当前传输的数据、当前是否发送了请求以及请求的顺序是否正确。
图2.25 加载amazon.com的网络流量
图2.25显示了加载网页amazon.com涉及的网络流量。发出的请求很多，每个请求都在流量列表中占据一行。对于每个请求，都显示了如下信息。
对于有些复杂的网页，涉及的请求可能非常多。“网络”选项卡包含一些过滤器选项，让您能够只显示特定类型的请求，如HTML、CSS或JS。XHR表示AJAX用来通信的XMLHttpRequest，选择这个过滤器将只显示AJAX通信。
展开请求后，将显示大量其他有关请求的信息，如图2.26所示。在展开的请求中，包含的选项卡取决于请求和响应的类型，下面是一些最有用的内容。
图2.26 展开请求后，将显示其他选项卡，其中包含更多有关请求和服务器响应的信息
注意：
如果单击“网络”标签上的下拉箭头，将看到一个禁用浏览器缓存的选项。为调试并修复问题而更新了Web服务器上的文件时，这个选项很有用。选择该选项后，浏览器总是从Web浏览器获取最新的内容。
在本章中，您学习了各种调试动态网页的方式。您学习了如何在脚本中向JavaScript控制台输出消息，如何使用HTML检查器查看浏览器加载网页时生成的HTML元素。
您还完成了多个调试HTML、CSS和JavaScript问题的示例。您在本章学到的调试方法对阅读本书以及开发项目很有帮助，因为这些方法有助于消除常见的简单语法错误，为您节省大量时间，避免令人沮丧的情况发生。
问：有办法调试服务器端脚本吗？
答：有办法。这超出了本书的范围，但大多数语言都提供了远程调试错误的途径。调试PHP服务器端脚本时，可求助于ZEND，其网址为www.zend.com/en/community/pdt；开发Python服务器端脚本时，可考虑使用PyDev，其网址为pydev.org。
问：有办法调试Cookie吗？
答：就Cookie调试而言，您只需知道是否启用了Cookie、浏览器设置了哪些Cookie、这些Cookie的值是什么以及它们什么时候到期。这些信息都可在Firebug的Cookies选项卡中找到。Chrome和Internet Explorer在开发人员控制台中提供了类似的功能。
作业包含一组问题及其答案，旨在加深您对本章内容的理解。请尽可能先回答问题，再看答案。
1．在Firebug中，要获悉特定<div>标签的CSS属性background-color的值，该怎么办？
2．在Firebug中，要获悉浏览器窗口的可用尺寸该如何办？
3．要到达特定JavaScript代码行后停止执行，该如何办？
4．JavaScript停止执行后，如何获悉变量的值？
1．在HTML检查器中，选择该<div>标签，再查看“样式”选项卡。
2．在DOM选项卡中，展开节点Screen。
3．在脚本调试器中设置断点。
4．在脚本调试器中，查看“监控”选项卡。
1．修改文档hour0204.html，将变量cnt的值输出到JavaScript控制台。为此，可在第10行添加如下代码。
2．浏览一些网页，并使用“网络”选项卡查看网络流量。展开一些请求，并查看一些选项卡中显示的数据。这有助于您更深入地了解浏览器和Web服务器之间的数据传输情况。
