引言

我们已经探讨过了必要的程序设计核心概念。现在是时候从细节中退出来，并高瞻远瞩地来看看你可以利用 JavaScript 来做些什么了——为什么你要花时间来学习这样一门复杂的功课，以及如何将其用到你的网页上？

过去的几年对我来说是一段有趣的时间，因为在这段时间里 JavaScript 的使用从一种边缘知识成为了 web 开发技能的主流。现在如果没有 JavaScript 技能的话，要想得到 web 开发师的工作是很艰难的。

让我们继续前进——本文的结构如下：

• 我是怎样喜欢上 JavaScript 的
• JavaScript 的缺点
• JavaScript 可以为你做些什么
• JavaScript 的常见应用
  • 进入 DOM 脚本
  • JavaScript 的其它时新应用
• 巧妙而负责地运用 JavaScript
• 总结

我是怎样喜欢上JavaScript的

当我第一次遇到JavaScript的时候，计算机的运行变得很慢，浏览器在解释JavaScript方面很糟糕，看起来JavaScript整个儿是个坏主意。我以前是从事后端开发的——将你要实现的所有功能都用Perl来编写，一切就不会有风险。

另一方面，互联网的速度很慢，文件的寄存成本非常高，这就是JavaScript产生的原因。该语言的执行是在访问网页的用户的计算机上进行的，这就意味着你用JavaScript编写的任何东西都不会增加你的服务器的处理负担。这就使得你对网站终端用户的响应灵敏得多，而且从服务器流量方面来说费用也更少。

近些年来，浏览器在执行Javascript方面要好一些了，计算机变得更快了，而带宽也便宜了许多，因此JavaScript的许多缺陷都变得不那么要紧了。无论如何，通过用JavaScript制作网页来减少与服务器的交互，都产生了响应更加灵敏的web应用程序，以及更好的用户体验。

JavaScript的缺点

尽管在当今时代已经有了很大的进步，JavaScript仍然有个缺陷：JavaScript是古怪的。这不是指该语言本身，而是指它的执行环境。你并不知道是自己网页的接收端是什么样的计算机，也不知道那台计算机是不是在做其它事情，到底有多繁忙，而且也不知道在浏览器的另一个标签中是否打开了其它的JavaScript，而导致一切慢得要停止。除非大多数的浏览器都对各个标签和窗体拥有不同的处理资源（又叫线程），这仍将是个问题。

此外，由于安全性的问题，或者是因为JavaScript经常会被用来制作搅扰用户的东西，而不是用来提升用户体验，它常常会被人们在浏览器中关掉。比如说，你会发现有许多网站违背你的心意，试图跳出一些弹出窗口，或者是用广告遮掉页面内容，除非你点击某个链接来除掉它。

JavaScript可以为你做些什么

让我们退后一步，来数算一下JavaScript的优点：

• JavaScript非常容易执行。你要做的仅仅是将它嵌入到HTML文档中，并告诉浏览器它是JavaScript即可。
• JavaScript是在web用户的电脑上工作的——即使当他们不在线时也可以！
• JavaScript使你能够创建高响应度的界面，该界面可以提升用户体验，并提供动态的功能，而不需要等待服务器响应并显示另一个页面。
• 如果用户需要的话，JavaScript可以将内容载入文档，而不用重新加载整个页面——我们一般把这个叫做Ajax。
• JavaScript可以对你的浏览器可能支持什么进行测试并相应地做出反应——这叫做非干扰性JavaScript的原理，有时也叫做防御性脚本。
• JavaScript有助于解决浏览器的问题，或为浏览器支持上的漏洞打补丁——比如解决某种浏览器中的CSS布局问题。

对于一门到最近为止一直被那些喜欢“更高级的程序设计语言”的程序员所蔑视的程序设计语言来说，这些优点已经很多了。JavaScript复兴的一部分原因在于我们现在所创建的web应用程序正变得越来越复杂，而要达到高交互性，不是需要Flash（或其它插件），就是需要脚本。JavaScript按理应该是最好的办法，因为它是一个web标准，生来就具有跨浏览器支持性（或多或少是这样的——不同的浏览器各有差异，而这些差异将在下一篇文章中适当的地方加以讨论），而且它与其它的开放web标准是相容的。

JavaScript的常见应用

JavaScript的使用在我们对其进行利用的这些年间已经发生了变化。起初，网站上的JavaScript交互大多数都仅限于与表单的交互，为用户提供反馈信息，以及检测用户是否进行了特定操作。我们用alert()来对用户进行通知（如图1所示），用confirm()来询问用户是否要做某些操作，用prompt()或表单域来获取用户输入。

图1：用alert()语句来对终端用户进行错误信息通知，这是我们在JavaScript早期唯一可以做的事情。这既不好看也不精巧。

在出错时，上面的这个例子通常会触发阻止用户向服务器发送某个表单的校验脚本，以及简单的转换器和计算器。此外，我们还成功地创建了像提示语这样的没什么使用价值的东西来询问用户的名字，仅仅只为了在下一刻将其打印出来。

我们以前还会用到的另一个函数是document.write())，用来向文档中添加内容。我们还用过弹出窗口和框架，然后大大失去了继续研究的勇气，我们还曾经绞尽脑汁地试图使它们相互对话。琢磨这些技术可以叫任何一个开发师痛苦得前后摇晃，抱头呻吟“让它们离我远点”，所以我们还是不要老谈论这些东西——JavaScript有更好的使用方法！

进入DOM脚本

在浏览器开始支持和执行文档对象模型(DOM)的时候，JavaScript 就开始变得更加有趣了，文档对象模型可以让我们与网页之间的交互丰富得多。

DOM是文档的一种对象表征。比如，前面那个段落（可以用“查看源文件”来查看其源代码）从DOM的角度来讲，就是一个nodeName为p的元素节点。它包含了三个child nodes——一个nodeValue值为“当浏览器开始支持和执行”的文本节点，一个nodeName 为a的元素节点，以及另一个文本节点，其nodeValue为“JavaScript就开始变得更加有趣了，文档对象模型可以让我们与网页之间的交互丰富得多。”。a节点还有一个叫做href的属性节点，其值为“http://www.w3.org/DOM/”，以及一个nodeValue为“文档对象模型(DOM)”的文本子节点。

你也可以用一张树状图来直观地表示这个段落，如图2所示。

图2：我们用来做范例的DOM树的直观表示。

用人类的语言来讲，你可以说DOM说明了该文档中一切内容的类型，值和层级——目前你并不需要知道得更多了。要了解关于DOM的更多信息，请参阅本教程后面的DOM之旅一文。

利用DOM，你可以：

• 访问文档中的任意元素并对其外观，内容和属性进行操作。
• 创建新元素和内容，并在需要时将它们应用到文档中去。

这就意味着我们可以不必再依赖于窗体，框架，表单和不咋好看的警告对话框了，而且可以用一种样式化得很好的形式为用户提供反馈信息，如图3所示：

图3：通过DOM你可以创建更美观而又不那么唐突的报错信息。

DOM再加上事件处理，就构成了一个非常强大的装备库，可以创建出交互式的漂亮的界面。

事件处理是指我们的代码对浏览器中发生的事件做出反应。事件处理的对象可以使浏览器中自动发生的事件——比如页面载入完成——但大多数时候我们是针对用户对浏览器进行的操作做出反应。

用户可能会调整窗口大小，滚动页面，敲击特定按键或用鼠标点击链接，按钮以及元素。利用事件处理，我们就可以等这些事情发生的时候告诉web页面对这些行为做出我们想要的响应。但在以前的时候，对任何链接的点击都会为网站访客打开另一个文档，现在我们可以对这个功能进行劫持，并实现其它的效果，比如显示和隐藏某个面板，或者是获取该链接中的信息并用它来连接到web服务。

在本教程随后的JavaScript中的事件处理一文中，对事件的讨论要详细得多。

JavaScript的其它时新应用

这基本上就是指我们目前用JavaScript所做的事情。我们对那些老式的，可靠而且正确的web界面进行提升——链接的点击，信息的输入以及表单的发送，等等——从而使该web界面对终端用户的响应更加灵敏。比如说：

• 一张注册表单可以在你输入用户名的时候核对该用户名是否可用，免得你忍受令人郁闷的页面重新加载。
• 搜索框可以在你进行输入的时候为你提供建议的结果，该建议是基于你当时已输入的内容的（比如说，输入“bi”可能会产生供你选择的包含该字符串的建议，例如“bird”，“big”和“bicycle”）。这种使用方式叫做自动补全功能。
• 经常发生变化的信息可以定时加载，而不需要经过用户的介入，比如体育比赛结果或股市行情显示器。
• 可有可无的而又对某些用户来说有多余之嫌的信息可以只在用户选择要访问它们的时候才被载入。比如说，某个网站的导航菜单可能有6个链接，但只会在用户激活某个菜单项的时候按需显示那些连接到更深层的页面的链接。
• JavaScript可以解决布局问题。利用JavaScript你可以找到页面上任何一个元素所在的位置和区域，以及浏览器窗口的尺寸。利用这些信息你就可以避免元素的重叠和其它类似的问题。比如说，假设你有一个若干层级的菜单；通过在其显示之前检查是否有足够的空间来显示子菜单，你就可以避免滚动条的出现和菜单项的重叠。
• JavaScript可以对HTML提供的界面进行美化。虽然页面上有一个文本输入框也不错，你可能还是会想要一个下拉列表框来让你在一个预设值列表中进行选择或自行输入。通过JavaScript你就可以增强一个普通输入框的功能，来实现这个效果。
• 你可以用JavaScript来为页面上的元素添加动画效果——比如显示和隐藏信息，或高亮显示页面上的特定部分——这个用处将有利于实现更实用，更丰富的用户体验。在本教程随后的JavaScript 动画一文中有更多关于这一点的信息。

巧妙而负责地使用JavaScript

使用JavaScript你几乎什么都能做——尤其是当你将它与诸如Canvas或可缩放矢量图像（SVG）之类的技术结合使用的时候。然而，能力越强，责任越大，在使用JavaScript的时候你应当牢记下面这些原则。

• JavaScript可能会不可用——不过这种情况很容易检测到，因此实际上算不得一个问题。不过在创建依赖于JavaScript的效果时一定要记住这一点，同时你还应该当心，确保你的网站在JavaScript不可用时不会崩溃（例如，必不可少的功能变得不可用）。
• 如果JavaScript的使用不能帮助用户更快速而高效地达成某个目标，那么你对JavaScript的使用方式可能是错误的。
• 利用JavaScript我们常常会打破人们在长期使用网络的过程中所习惯了的惯例（比如，点击链接以跳转到另一个页面，或一个小筐子的图标就表示“购物车”）。虽然这些使用模式可能已经过时了，而且效率又低，对它们的改变还是意味着迫使用户改变自己所习惯的方式——而这会使人们觉得不自在。我们都喜欢拥有支配权，而且一旦我们学会了某事，就很难适应改变。你的JavaScript解决方案用起来的感觉应该比以前的交互要好些，但不要跟原来差别太大，以致用户无法将其与自己以前的经验联系起来。如果你成功地使一个网站访客说出“啊哈——这样我就不用干等着了”或者“酷——现在我就可以不必经过这个非常烦人的步骤了”这样的话，你就很好地使用了JavaScript。
• JavaScript绝不能作为一种安全措施。如果你需要防止用户访问数据，或者你可能要处理敏感数据的话，就不要依靠JavaScript。任何JavaScript的保护措施都很容易被反向生成并克服，因为所有的代码都能在客户端主机上读到。此外，用户也可以在自己的浏览器中直接关掉JavaScript。

总结

JavaScript是一种用在网上的极好的技术。它不是非常难学，而且用途也很多。JavaScript可以很好地与其它web技术一起使用——比如HTML和CSS——而且甚至可以与Flash之类的插件进行交互。JavaScript使我们可以创建高响应度的用户界面，避免令人郁闷的页面重新加载，甚至还可以解决CSS的支持问题。通过适当的浏览器附加软件（比如谷歌离线应用开发工具或雅虎Browser Plus），你甚至可以用JavaScript来使联机系统在离线时仍然可用，并且在计算机联线之后立刻实现自动同步。

JavaScript也不受浏览器的限制。与其它程序设计语言相比，JavaScript的速度更快，内存占用更小，这使得它的应用变得越来越普及——从对像汇稿员一样的程序上的重复性工作进行自动化，直到作为一种带有独立的语法分析器的服务器端语言，都有它的影踪。JavaScript的发展前途是光明的；不管你作为一个web开发师在不久的将来会做些什么，我确信你迟早会用到JavaScript。