前言以前，Web实在是一个令人讨厌的地方。用简单旧式HTML构建的Web页面只是显示信息，而没有其他更多的东西。人们单击一个链接，然后等待载入一个新Web页面，这就是与它的交互。
现如今，大多数Web站点几乎具有和台式机上的程序一样的响应性，对于每次鼠标单击都迅速响应。这都得益于我们将要在本书中学习的内容，即JavaScript与jQuery。
JavaScriptJavaScript是一种程序设计语言，它允许用动画、交互性和动态的视觉效果来增强HTML的功能。
JavaScript可以通过提供即时反馈而使得Web页面更加有用。例如，当访问者选择要购买的一件商品的时候，一个具备JavaScript功能的购物车页面可以即时显示总金额、税费和运费。当某人试图提交一个遗漏了必需信息的Web表单时，JavaScript可以产生一条错误消息。
JavaScript还允许创建有趣的、动态的和交互式的界面。例如，使用JavaScript可以将由缩略图组成的一个静态页面转换为一场包含动画的幻灯片放映。或者，可以做一些更加微妙的事情，例如，通过将内容组织到很小的面板，访问者只要简单地单击一下鼠标就可以访问它们，从而可以在页面上放置更多的信息，而不必使页面显得拥挤（参见9.6节）。或者，添加一些有用的和吸引人的内容，例如，弹出的工具提示为Web页面上的项目提供补充信息（参见9.5节）。
JavaScript的主要优点之一是其即时性。它使得页面可以立即对于某人和页面的交互操作做出响应，例如单击一个链接、填充一个表单，或者只是在屏幕上移动鼠标等操作。JavaScript不会遭遇到和PHP这样的服务器端编程相关的令人沮丧的延迟，而后者依赖于Web浏览器和Web服务器之间的通信。因为JavaScript不会依赖于频繁加载和重新载入Web页面，所以使用它创建的Web页面在感观和操作方面都更像是桌面程序，而不像是一般的Web页面。
如果你访问Google Maps（http：maps.google.com），将会看到JavaScript的实际应用。Google Maps允许我们查看所在城市的地图（或者很多其他地方的地图），放大以获取街道和公交车站的详细视图，或者缩小以得到如何穿越城镇、州或全国的鸟瞰图。尽管在Google之前有很多的地图站点，但它们总是要求重新载入多个Web页面（这通常是一个很慢的过程）来获得想要的信息。相反，Google Maps不需要刷新页面，它对我们的选择做出快速响应。
使用JavaScript创建的程序，既有真正简单的程序（例如，弹出一个新的浏览器窗口，其中有一个Web页面），也有像Google Docs（http：docs.google.com）这样功能完备的Web应用程序，而后者允许我们使用Web浏览器来创建演示文稿、编辑文档和创建电子表格，其感觉就像是在计算机上直接运行的程序一样。
JavaScript简史JavaScript由Netscape的Brendan Eich于1995年后期只用了不到10天时间发明的，它几乎和Web本身一样老。尽管JavaScript在如今广受重视，但是它有着颇为跌宕起伏的历史。一度认为它是狂热爱好者的编程语言，用来添加不太有用的效果，如像证券报价机一样在Web浏览器状态栏底部滚动的消息，或者是跟随鼠标在页面上四处移动的、具有动画效果的蝴蝶。在JavaScript的早期，很容易在网上找到数以千计的JavaScript程序（也叫做脚本），但是，很多这样的脚本通常不会在所有的Web浏览器上都有效地运行，并且有时候甚至导致浏览器崩溃。
注意JavaScript和Java编程语言毫无关系。JavaScript最初名为LiveScript，但是，Netscape的市场营销人员确信，如果试图和当时热门的Java语言联系起来，JavaScript应该会得到更多的关注。但是，不要把两者混为一谈，尤其是在求职面试的时候。
在早期，JavaScript也遭遇到两个主流浏览器Netscape Navigator和Internet Explorer不兼容的问题。由于Netscape和Microsoft都试图通过添加新的（表面上）和更好的功能来超越对方，因此这两个浏览器常常以不同的方式工作，从而使得人们很难创建在两种浏览器中都能很好运行的JavaScript程序。
注意在Netscape引入了JavaScript之后，Microsoft引入了jScript，这是它们自己的JavaScript版本，包含在 Internet Explorer之中。
幸运的是，一片混战的日子已经过去，当前的浏览器（如Firefox、Safari、Chrome、Opera和Internet Explorer 9）都将它们操作JavaScript的很多方式标准化了，这使得编写在大多数浏览器下工作的JavaScript程序容易一些了（在当前的Web浏览器中仍然有一些不兼容，因此，你需要学习一些处理跨浏览器问题的技巧。我们将在本书中学习如何克服浏览器不兼容的问题）。
在过去的几年里，通过在Google、Yahoo!和Flickr等知名网站上的应用，JavaScript已经获得了重生。这些站点广泛地使用JavaScript来创建交互式的Web应用程序。现在来学习JavaScript是再好不过的时机了。有了丰富的知识和已经编写的高质量的脚本，即便你是初学者，也可以为Web站点添加高级的交互，你完全不必要成为一名计算机科学家。
注意JavaScript也称为ECMAScript。ECMAScript是JavaScript规范的“正式”名称，它由名为Ecma国际（http：www.ecmascript.org）的国际标准化组织负责开发和维护。
JavaScript随处可见JavaScript并不是仅用于Web页面。已经证明它是非常有用的一种编程语言，如果学习了JavaScript，你可以创建Yahoo！组件和Google App，为iPhone开发程序，并且在像Acrobat、Photoshop、Illustrator和Dreamweaver这些众多的Adobe程序中加入脚本编程功能。实际上，Dreamweaver已经为聪明的JavaScript程序员提供了一种方式来向程序中添加他们自己的命令。
在Yosemite版的Mac OS X操作系统中，Apple让用户通过JavaScript自动操作Mac系统。此外，JavaScript应用于许多实用的前端Web开发工具，如Gulp.js（可自动压缩图像、CSS和JavaScript文件）以及Bower（使得快速而方便地下载常见的JavaScript库，如jQuery、jQuery UI或AngularJS到本机上）。
JavaScript在服务器端开发方面也越来越受欢迎。Node.js平台（谷歌V8的一款 JavaScript引擎，可在服务器上运行JavaScript）完全被Walmart、PayPal、eBay这样的大公司接受。学习JavaScript甚至可以从事构建复杂的服务器端应用开发。事实上，JavaScript对前端（即 JavaScript在Web浏览器中运行）和后端（在Web服务器上运行）的组合称为全栈JavaScript开发。
换言之，现在是学习JavaScript的最好时机！
jQueryJavaScript有一个令人尴尬的小秘密：编写起来比较难。尽管JavaScript比很多其他编程语言要简单一些，但它仍然是一门编程语言。并且很多人（包括Web设计师）发现编程很难。更为复杂的是，不同的Web浏览器对JavaScript的理解不同，因此，在Chrome中正常运行的程序可能在Internet Explorer 9中完全没有反应。这种常见的情况可能导致在不同的机器和不同浏览器上要花很多时间进行测试，才能确保程序对站点的所有访问者都能正常工作。
这也是jQuery诞生的原因。jQuery是一个JavaScript库，其目的是使JavaScript编程更容易、更有趣。JavaScript库是一组复杂的JavaScript程序，它简化了有难度的编程任务，并且解决了跨浏览器的问题。换句话说，jQuery解决了JavaScript最头疼的两个问题，即不同Web浏览器复杂和繁琐的特性。
在JavaScript编程中，jQuery是Web设计师的秘密武器。有了jQuery，只用单独一行代码就能完成任务，而要编写自己的JavaScript代码来完成这些任务，要写上百行程序并且花很多时间进行浏览器测试。实际上，一本深入介绍JavaScript的图书，至少是本书厚度的两倍，并且，当你读完它时（如果你能设法读完的话），只需一点jQuery知识你就能够完成一半的编程任务。
这就是为什么本书主要介绍jQuery，它使你可以如此轻松地做到很多事情。jQuery的另一个美妙之处在于，你可以使用上千个易于使用的jQuery插件，向Web站点添加高级功能。例如，jQuery UI插件（参见9.1节）可创建许多复杂的用户界面元素，如标签面板、下拉菜单、弹出式日期选择器日历，只需要一行程序就能做到！
jQuery已经用于数百万个站点（http：trends.builtwith.comjavascriptjQuery），这一点也不令人惊奇。甚至像Drupal和WordPress这样流行的内容管理系统，也内置了支持jQuery的模块。你甚至可以找到一种叫做“jQuery程序员”的招聘职位，而根本不提JavaScript。当你学习jQuery的时候，你就加入了Web设计师和程序员的一个大社群，这些人使用一种简单和更为强大的方法来创建功能强大的交互式Web页面。
HTML：主题结构如果没有Web设计的两大支柱HTML和CSS，JavaScript一筹莫展。很多程序员提到，3种语言构成了一个Web页面的三个“层”：HTML提供了结构层，以一种更有意义的方式来组织图片和文字等内容；CSS（Cascading Style Sheet，层叠样式表）提供表现层，使得HTML中的内容很好地显示；JavaScript添加行为层，给Web页面带来活力，使它能够和Web访问者交互。
换句话说，要掌握JavaScript，我们还需要很好地理解HTML和CSS。
注意要了解HTML和CSS的完备介绍，请参阅Elisabeth Robson和Eric Freeman编写的《Head First HTML with CSS and XHTML》。如果需要CSS的技巧性主题的深入介绍，请参阅David Sawyer McFarland所著的《CSS3： The Missing Manual》（这两本书都由O''Reilly出版）。
HTML（HyperText Markup Language，超文本标记语言）使用叫做标签的简单命令来定义Web页面的各个部分。例如，下面的HTML代码创建了一个简单的Web页面：
Hey, I am the title of this web page.Hey, I am some body text on this web page.这个示例可能不是很令人兴奋，但是它具备了一个Web页面所需的所有基本元素。这个页面开始的第一行是文档类型声明，或者简称为doctype，它说明了页面的文档类型以及它符合哪个标准。HTML实际上有几种不同的版本，并且对于每个版本使用不同的doctype。在这个例子中，该页面的doctype是HTML5；一个HTML 4.01或XHTML文档的doctype更长一些，并且还包含了一个URL，它把Web浏览器指向互联网上的一个文件，其中包含了该类型文件的定义。
实际上，doctype告诉Web浏览器如何显示该页面。doctype甚至可以影响到CSS和JavaScript如何工作。如果doctype不正确或者缺少doctype，我们可能会发现脚本有很多跨浏览器的差别而最终四处碰壁。换句话说，总是要在HTML中包含一个doctype。
历史上有许多版本的HTML类型（HTML 4.01 Transitional，HTML 4.01 Strict，XHTML 1.0 Transitional，XHTML 1.0 Strict），但它们巨大、复杂的代码让人在使用它们时容易敲错。推荐使用代码HTML5中更短、更简单的doctype（）。
HTML标签如何工作在前面的示例中，和任何Web页面的HTML代码一样，可以看到大多数的命令都成对地出现，并且包含一段文本或其他命令。尖括号之间的内容，也就是那些标签，都是告诉Web浏览器如何显示页面的指令。标签就是超文本标记语言的“标记”部分。
开始标签告诉浏览器指令从哪里开始，而结束标签告诉指令在哪里结束。结束标签总是在第一个尖括号符号（表示一段文本的开始，而
表示其结束。某些标签未包含结束标签，比如、和
这类单标签。
对于功能正常的Web页面，必须至少包含如下3个标签：
标签出现在Web页面刚开始的地方（在doctype之后），并且在Web页面末尾再次出现（带有一个斜杠）。这个标签告诉Web浏览器，这个文档中包含的信息是使用HTML编写的，而不是用其他某种语言编写的。页面的所有内容（包括其他的标签）都出现在开始和结束标签中。
如果把Web页面看做一棵树，标签就是它的树干。从树干伸展出来的是两个分支，分别代表任何Web页面的两个主要部分，即标题和正文。
Web页面的标题由标签括起来，它包含了页面的标题。它还提供了可供浏览器和Web搜索引擎使用的其他不可见的信息（例如，搜索关键字）。
此外，标题还可以包含Web浏览器用来显示Web页面和增加交互性的信息。例如，把CSS放入文档的标题部分。文档的标题也经常包含指向JavaScript程序的链接和指向其他JavaScript文件的链接。
Web页面的正文包含在一对标签中，其中包括了出现在浏览器窗口中的所有信息，包括标题、文本、图片等。
在标签内，我们通常可以看到如下标签：
用标签告诉Web浏览器一段文本开始，而用
表示一段文本结束。
标签突出显示文本。如果把某段文本包含在成对的标签和中，将会得到粗体文本。HTML代码段Warning!告诉Web浏览器以粗体显示单词 “Warning!”。
标签（或者叫做锚点标签）在Web页面中创建了一个超链接。当单击的时候，超链接可以跳转到Web上的任何地方。通过在标签中放置一个Web地址，告诉浏览器该链接指向何处。例如，可以输入Click here!。
浏览器知道，当访问者单击了“Click here!”的时候，它应该跳转到Missing Manual Web站点。这个标签的href部分叫做属性，而这个URL（Uniform Resource Locator，统一资源定位符或Web地址）是值。在这个例子中，http：www.missingmanuals.com是href属性的值。
快速熟悉验证Web页面正如前面所介绍的，Web页面的doctype标识用来创建Web页面的HTML或XHTML的类型。规则根据类型而略有不同，例如，和HTML 4.01不同，XHTML不允许拥有一个未结束的标签，并且要求所有的标签名和属性都是小写的（例如，而不是）。HTML5包含了新的标签，并且允许你使用HTML或XHTML语法。由于每个HTML版本使用不同的规则，因此总是需要验证Web页面。
HTML验证器是确保Web页面编写正确的一个程序。它检查页面的doctype，然后分析页面中的代码看它是否符合doctype定义的规则。例如，验证器会标记出拼写错误的标签名或未结束的标签等错误。万维网联盟（World Wide Web Consortium，W3C）是负责Web上使用的众多技术的组织，它有一个免费的在线验证器，位于http：validator.w3.org。我们可以把自己的HTML代码复制并粘贴到一个Web表单，上传到一个Web页面，或者把验证器指向Web上已经存在的一个页面，验证器会分析HTML并报告该页面是否有效。如果有任何错误，验证器告诉你错误是什么以及错误发生在HTML文件的哪一行。
验证HTML不只是为了保证良好的形式，它也有助于确保JavaScript程序正常运行。很多JavaScript涉及操作一个Web页面的HTML：例如，标识一个特定的表单字段，或者在特定位置放置新的HTML（例如一条错误消息）。为了让JavaScript能够访问和操作Web页面，HTML必须保持正确的工作顺序。忘了结束一个标签，多次使用同样的ID名，或者不正确地嵌套HTML标签，都可能使得JavaScript代码不能正常运行或者根本无法运行。
CSS：为页面添加样式在网络时代早期，HTML曾经一度是需要掌握的唯一语言。我们可以构建带有彩色文本和图形的页面，并且使得单词以不同的大小、字体和颜色显示。但如今，访问者期待从Web站点得到更多，因此，我们需要使用一种新的、更为灵活的技术，即CSS，从而给页面更高级的视觉效果。CSS是一种格式化语言，可用
購物車/收銀台(0) | 在線留言板
| 付款方式
| 運費計算
| 聯絡我們
| 幫助中心 |
加入書簽
HOME
新書上架
