JavaScript艺术与科学

　　本书由七位JavaScript领域的专家合作撰写，图文并茂，理论与实践紧密结合，通过大量示例代码帮助读者更好的理解和掌握最前沿的JavaScript知识与技巧。书中内容一共分为七章，涵盖表格处理、客户端Badge、canvas绘图、Firebug、元编程、3D迷宫以及混搭，囊括了近些年JavaScript用于网页应用开发的最佳实践与实用技巧。本书作为JavaScript中级读物，主要面向具有一定JavaScript经验的网页开发者，旨在帮助他们将JavaScript水平提升到一个新的高度。
　　

前言 i
适用读者 i
内容组织 ii
配套网站 iii
代码存档 iii
更新和勘误 iii
sitepoint论坛 iii
sitepoint新闻邮件 iii
反馈 iv
规范 iv
代码样例 iv
提示、记录和警告 v
第1章　玩转表格 1
1.1　表格剖析 1
1.1.1 用getelementbyid访问表格元素 4
1.1.2 用getelementsbytagname访问表格元素 6
1.2 按列排序 7
1.2.1 让表格可排序 7
1.2.2 执行排序 12
1.3 创建可拖拽的列 24

　　毫无疑问，过去十年是互联网的十年，也是互联网技术快速发展和普及的十年。从早期的HTML到后来的Web2.0，再到最近几年兴起的HTML5，一个贯穿始终的关键就是JavaScript。如今，JavaScript已经深入到网页开发的方方面面，如JSON、Ajax，等等。很难想象一个不使用JavaScript的网页会是什么样子，以致于当今浏览器都将JavaScript执行效率作为自己的卖点之一。因此，对于网页开发者来说，JavaScript便成为一门必须掌握的技能。可以毫不夸张地说，开发者的JavaScript技能水平直接影响最终网页的性能、鲁棒性及可用性。
　　JavaScript上手容易，精通难。本书就是为了帮助读者精通JavaScript而诞生的。本书不涉及任何关于JavaScript的基本知识，例如语法，而将注意力更多地放在JavaScript的编程技巧及实战经验上面。因此，对于刚接触JavaScript的读者而言，不建议直接阅读本书，而应该在了解了JavaScript的基本知识以后再尝试。通过对本书的阅读和实践，读者可以将自己的JavaScript水平从初学者提升到中级水平，并能够编写出高效、稳定、容错能力强、可用的网页应用。
　　本书的内容分为七章，分别介绍相对独立的话题。前四章讨论的内容包括如何用JavaScript操作表格，用JavaScript创建客户端Badge，用JavaScript和canvas元素进行绘图，以及用Firebug调试和测定JavaScript应用。这些话题比较轻松，难度也相对较低，读者甚至可以不按照顺序，而根据自己的兴趣偏好进行阅读。第5章是本书最难，也是最具有实用价值的一章。其中介绍的大量元编程技巧得到了广泛的实际应用，能否熟练掌握第5章的内容，是衡量一个JavaScript开发者水平的重要指标。最后两章分别介绍了两个相对复杂的应用示例，其中用到了一些第5章提到的元编程技巧，所以建议在阅读它们之前先阅读第5章的内容。
　　编程技能只有通过实战才能提高，JavaScript也不例外，甚至可以说更加需要实战经验。因此光靠阅读和想象是无法真正提升JavaScript编程水平的。本书有配套的代码库（在序中有详细获取方法），建议读者在阅读的同时能够实际体会那些示例并仔细研读相关的源代码。如果能够尝试修改代码以增加新功能那是再好不过了。希望通过阅读和实践，读者能够实现本书期望达到的目标：提升JavaScript编程水平，并能制作出高效、鲁棒、可用的网页应用，更好地服务于中国亿万网民。
　　我要感谢在翻译过程中帮助过我的人。感谢博文视点的周筠、徐定翔、卢鸫翔，还有刘唯一，没有你们的帮助和指导，翻译过程不会如此顺利。感谢好友申林，一起讨论遣词造句让我获益良多。最后感谢我妻子刘之育一直以来的支持和帮助。
　　郑文涛
　　2010年8月于北京
　　

　　曾几何时，JavaScript是个不光彩的词。 在网页刚诞生的早期，开发者只是用JavaScript生成一些无聊的动画或是华而不实的玩意儿。这些不当甚至是错误的用法给它带来了不好的名声。 幸好，那些日子已经远离我们，而本书将向你展示的是最近的发展。其中所折射的是JavaScript发展过程中的转折点——许多涉及到的效果和技巧在几年前还被认为是不可能实现的。 作为一门逐渐成熟起来的编程语言，JavaScript已经非常流行，随之出现了许多非常实用的技巧，并基于此演化出大量软件框架。作为长期的JavaScript爱好者，我们一直认为它具有很大的潜力。如今，优秀网页应用的点睛之处往往是用JavaScript实现的。如果说CSS是二十一世纪头几年的宠儿，那么JavaScript已经毫无争议的取代了CSS的地位。 在本书中，我们组成了一个专家团队——他们都是JavaScript开发者中名副其实的专家——帮你将JavaScript技能提升到更高的水平。你即将打开潘多拉的魔盒，展现在你面前的包括让人印象深刻的mashup、令人惊叹的动态图形，以及细致入微的用户体验提升。一旦你了解到JavaScript所具备的能力，便可以用书中的代码去为用户创造惊奇的用户体验。当然，如果有心，你也可以用学到的知识改变整个世界。 我们期待到你的网站发布派对上喝一杯！ 适用读者 Who Should Read This Book? 本书面向中等水平的JavaScript开发人员，在不牺牲网页可用性和实用性的前提下，帮助他们提高JavaScript技能水平。如果以前从没写过一行JavaScript代码，这本书可能不太适合你，后面章节中的某些逻辑对你来说会有点难。 如果你只有少量的JavaScript经验，却非常熟悉另外一门编程语言（比如PHP或Java），那也没问题——我们会手把手地教，你可以下载所有的代码并亲自实践。如果你已经是一个很有经验的JavaScript开发人员，如果你一无所获，我们会非常非常吃惊。坦白地讲，如果仅仅学到一点点，你应当到SitePoint联系我们——可能会有一个书籍项目等你搞定。 内容组织 What s Covered in This Book? 第1章：玩转表格 HTML表格在网页开发者中的名声很坏，这可能是因为多年来人们将其错误地使用在页面布局中，亦或是因为它们用起来太无聊了。在这一章，Ara Pehlivanian会证明，合理地使用表格不仅不会无聊，反而会带来很多乐趣，尤其是结合了JavaScript以后。Ara首先会介绍DOM，然后展示如何制作用鼠标或键盘进行排序和拖拽的表格列。 第2章：创建客户端Badge Badge是指那些可以放到你博客上以增加个性化的第三方数据（比如缩略图、链接等）片段。 Christian Heilmann将带我们经历从无到有使用JSON制作Badge的整个过程，如果第三方服务器的连接失败，还有第二套应急方案。 第3章：用canvas绘制向量图形 在这一章，Cameron Adams会介绍canvas元素，并展示如何用它构建所有现代浏览器都支持的向量图形：从静态图示，到数据库驱动的结构图和饼图。读完之后，你再也不会用老眼光看待网页里的图形。 第4章：用Firebug进行调试和测定 Firebug是Firefox浏览器的一个插件，但是仅把它叫做插件是不公平的——Firebug是一个全功能的编辑、调试、测定工具。它将曾经痛苦的JavaScript调试优化工作变得更加简单、有趣。这里，Michael Mahemoff将揭示大量专家级的技巧和隐藏的知识，让你更加深入地了解这个不可缺少的开发工具。 第5章：用JavaScript进行元编程 这里，Dan Webb带我们走入JavaScript语言本身的原理之中。通过了解一些元编程的理论，他将展示如何使用JavaScript扩展语言自身，提升面向对象的能力，增强对老版本浏览器的支持，并增加一些方法和操作符让JavaScript开发更方便。 第6章：用CSS和JavaScript构建三维迷宫 就当你觉得已经了解了全部的时候，James Edwards通过制作一个实际的游戏——供玩家探索三维迷宫！——向你展示了如何将CSS和JavaScript技术发挥到极致。这章结尾介绍了一个平面图生成器和一些提高可用性的功能，比如键盘导航和说明。通过这些内容，本章强调了这样一个事实：JavaScript的潜力很大，没有做不到，只有想不到。 第7章：Flickr和Google地图的混搭 你有想过结合最好的照片管理网站Flickr和最好的地图服务网站Google地图，来制作一个属于自己的高级应用么？你可以的。Simon Willison会向你展示：借助于JavaScript API，结合两个第三方网站制作一个mashup比你想象的容易。 配套网站 The Book s Web Site 本书的配套网站在http://www.sitepoint.com/books/jsdesign1/，你可以通过它获取如下资源。 代码存档 The Code Archive 在阅读本书的过程中，你会注意到很多代码样本上面有文件名。它们对应于代码库（一个包含本书中所有完整实例的ZIP下载包）中的相关文件。你可以点击配套网站上的Code Archive链接下载。 更新和勘误 Updates and Errata 错误是难免的，细心的读者一定会在本书中发现至少一到两处错误。配套网站上的Corrections and Typos页面提供了最新的排版和代码错误，并会根据最新发布的浏览器和相关标准提供必要的更新 。 SitePoint论坛 The SitePoint Forums 如果你想和其他网页开发者交流关于本书的想法，你应当加入SitePoint的在线社区 。特别是JavaScript论坛 ，提供了丰富的超越本书解决方案的信息，还有很多有趣并且经验丰富的JavaScript开发者。在这里，你能学到新的技巧，快速获得解答，并得到快乐。 SitePoint新闻邮件 The SitePoint Newsletters 除了出版书籍，SitePoint还会发布免费的电子邮件新闻，包括The SitePoint Tribune、The Site-Point Tech Times和The SitePoint Design View。它们可以让你获取最新的关于网页开发的新闻、产品发布、趋势、提示和技巧。赶紧去http://www.sitepoint.com/newsletter/注册吧。 反馈 Your Feedback 如果论坛不能帮你解决问题，或者你因为其他事情想联系我们，最好的方式是给books@sitepoint.com发送电子邮件。我们有一个电子邮件支持系统跟踪你的请求，以及热情的工作人员可以解答你的问题。我们特别欢迎改进建议或是你发现的错误。 规范 Convertions Used in This Book 为了标记不同类型的信息，我们在本书中使用了一些排版和布局风格。注意如下几点。 代码样例 Code Samples 本书中的代码用等宽字体显示，如下： [h1]A perfect summer s day[/h1]
　　It was a lovely day for a walk in the park. The birds were singing and the kids were all back at school.
　　 如果代码被包含在代码存档里，代码上方会显示对应的文件名，如下： example.css .footer { background-color: #CCC; border-top: 1px solid #333; } 如果只显示了文件中的一部分代码，文件名后面会加上excerpt： example.css (excerpt) border-top: 1px solid #333; 有些代码应当写成一行，但是由于页面空间的限制，我们需要做断行处理。→用来表示这样的换行，它实际代码中是不存在的。垂直省略号（ ）表示为了节省空间而省略掉的代码。 if (a == b) { } URL.open.("http://www.sitepoint.com/blogs/2007/11/01/the-php-anthology-101-essent→ial-tips-tricks-hacks-2nd-edition"); 提示、记录和警告 Tips, Notes, and Warnings 嘿，你！ 对你有帮助的小提示。 呃，打扰一下 有用的信息，它们和主题相关，但并不关键。你可以把它们当作额外的补充信息。 你要确保…… ……注意这些重要的信息。 当心！ 这些警告会着重强调你可能会遇到的陷阱。