ppk谈JavaScript(世界级大师著作)

.　b 表现与结构的分离　
　 css修改　
　 更改结构还是表现　
　c 行为与结构的分离　
　 独立文件中的函数　
　 从html中移除事件处理程序　
　d 行为和表现的分离　
　 下拉菜单：hover或mouseover/mouseout　
　 相同的效果与相似的效果　
　e 可访问性概览　
　 什么是可访问性　
　 无脚本　
　 没有鼠标　
　 屏幕阅读器　
　 屏幕阅读器和事件　
　 可访问性和可用性　
　f 可访问性规则　
　 条理分明的html　
　 产生对脚本用户有意义的内容　
　 重定向用户　
　 键盘用户　
　 [ noscript ]标签　
　g 范例脚本　
　 限长的文本输入区　
　 易用的表单　
　 表单验证　
　 下拉菜单　
　 编辑样式表　
　 三明治拾取器　
　 xmlhttp测速计　
　 站点调查　
第3章　浏览器　
　a 浏览器　
　 mozilla家族　
　 windows的explorer　
　 safari　
　 opera　
　 其他图形桌面浏览器　
　 移动电话　
　 屏幕阅读器　
　b 兼容性问题　
　 问题　
　 解决方案　
　c 对象检测　
　 对象检测是如何工作的　
　 我们该走多远　
　d 浏览器检测　
　 为什么浏览器检测行不通　
　 浏览器检测的军备竞赛　
　 拆解浏览器字符串　
　 浏览器检测的正确使用　
　e 调试　
　 错误消息　
　 处理浏览器的bug　
　 范例　
　 报告浏览器bug　
第4章　准备
第5章　核心　
第6章　bom　
第7章　事件　
第8章　dom　
第9章　css修改　
第10章　数据检索　
后记

.　　理想的情况下，这些脚本都应该有实用价值。例如，创建一个脚本把你所有的宠物按名字排序显示出来，然后点击宠物名字就会弹出一张傻乎乎的大头照，这样虽然很不错，但即使这个脚本阐释了一些原理（如对象和弹出框），它的实用价值还是为零。
　　所以，本书最大特色是提供了8个脚本程序，它们可都是我做的真刀真枪的实际项目，客户花钱买了的。
　　这8个脚本程序是为7个特定客户的特定商业目标而写的，而且每一个客户都明确表示他们对这些脚本程序很满意。事实上，他们中的6个又给了我新的项目，而那第7个客户没有给我新项目的唯一原因就是他的公司实在太小，只需要一个网站就足够用了。
　　所以，没有比这些示例更现实和更实用的了。
　　如何使用示例脚本
　　用现实中的示例有一点不好，那就是我不能每一章讲一个示例。因为我的客户可不会因为我还没有向你解释过DOM就让他的脚本程序只能用到JavaScript的基本语法和事件。
　　因此，这些示例用来讲解全书内容，它们全都用到了事件处理、可访问性、DOM脚本编程、HTML结构以及运行时改变CSS。
　　我把脚本拆成了多个片段，并且把它们按主题进行了排列。你可以http://www.quirksmode. org/book/找到所有的示例脚本。即使你不准备坐在电脑前阅读本书，我也建议你能事先对这些脚本有个了解。本书假设你已经对它们有了一个全面的了解，知道它们是做什么的以及为什么要这么做。下面我分别简要介绍一下这些脚本。
　　限长的文本输入区
　　2004年9月，一家名叫Lost Boys的网站代理，请我帮他们开发一个脚本程序，可以记住用户在文本输入区（textarea）中键入的字符数量，这就是限长的文本输入区脚本。随后我在A List Apart（网站）发表了一篇名为“JavaScript Triggers（JavaScript触发器）”的文章，用很大篇幅探讨了这个脚本方方面面的内容，接着在自己的博客评论区实现了这段脚本，并且在QuirksMode添加了一段描述。你可以http://alistapart.com/articles/scripttriggers找到这篇文章。
　　这是一个非常简单的DOM脚本，略微增强了页面。
　　
　　易用的表单
　　2003年4月，荷兰ING银行委托我创建一个演示用的抵押贷款申请表单。这几乎是现实存在的最复杂的表单，必须想办法隐藏无关的表单域，只在必要时才显示。例如，“离婚日期”域只有当填表人明确已离婚时才需要显示，其他任何时候都得把它隐藏起来。
　　所以，我写了易用的表单脚本，为庆祝这一成果，我还写了“Forms,Usability,and the W3C DOM（表单、可用性和W3C DOM）”一文，你可以http://www.digital-web.com/articles/forms_usability_ and_ the_ w3c_dom/找到这篇文章。你会注意到文章中脚本的版本比我们这本书用到的要老一些。
　　这个较为复杂的DOM脚本会在运行时不停地改变文档的结构。这个例子包含许多有价值的内容，如自定义属性、HTML元素之间关系的定义、标记的使用、全局事件以及在处理表单域时0级DOM的优势。
　　表单验证
　　为网站开发公司SQR开发的表单验证脚本是在2004年春季完工的。他们委托我为一个有大量表单的网站创建模板。很显然，表单需要验证脚本，所以我创建了这个表单验证脚本。它与自定义的validation属性绑定在一起，在用户出错时不是弹出一个警告窗口，而是在表单域旁边显示错误消息。
　　表单验证脚本包括基本的表单处理功能，它会生成一些HTML，而且用一个很有趣的方法来使用JavaScript关联数组。
　　下拉菜单
　　2004年1月，Orchid for Change联系到为他们建立站点。
　　Orchid需要的一个脚本是永恒的经典：下拉菜单。虽然它的可用性在某些时候还值得怀疑，但在过去的这么多年里以及未来一两年内，它似乎还是会继续成为需求量最大的脚本之一。
　　这个脚本极好地解释了如何让CSS和JavaScript紧密协作来保证良好的可访问性，如何兼容键盘的操作，怎样解决因为mouseout事件引发的问题，以及更多的高级特性。
　　编辑样式表
　　下一个例子也是为Orchid写的脚本。
　　Orchid有很多HTML模板，带有定义了大量页面元素（页头、导航、主要内容等）位置的样式表。客户只要选择一个预定义的模板就可以创建一个网站。
　　然而，为了让站点更有个性，需要向客户提供微调样式的机会，主要就是颜色、背景色、字体和排版样式。为此，每个站点都有另一个样式表，可以通过它加入独特的设计元素。
　　我编写了“编辑样式表”脚本来允许客户修改第二个样式表。客户只要在表单中输入希望的颜色和排版样式，就可以改动样式表并立刻显示出效果。
　　遗憾的是，这个脚本一直处于原型阶段，因此缺乏不少特性，特别是无法向服务器提交改变后的样式表并应用到整个站点上。尽管如此，这个脚本还是提供了一个编辑样式表的范例，并为HTML表单与脚本协同工作做了准备。
　　
　　三明治拾取器
　　这是我最喜欢的脚本范例。
　　2004年10月，我为Keurslager Drost建网站，他是一位肉店老板，还提供规模不大但很成功的速食餐饮服务。这个站点想要实现食物订购的流水线作业，并让访问者看到他能提供的全部食物。..
　　订购三明治成为这个站点的主要业务。因为超出预算，所以不可能使用一个完整的数据库解决方案，100来种的三明治就这么纵向排列在一个静态的HTML文件中，用户只好在庞大的列表中搜索。
　　在此情况下，我创建了“三明治拾取器”脚本。一个巨大的数据表包含着所有三明治的数据，而两张开始数据为空的表会包含搜索结果和订购信息。位于页面顶部的搜索框用来搜索三明治，脚本将正确的[ tr ]移动到页面顶部、紧跟在搜索框的下方。我加了一个小巧的订购系统，包含一个订购和一个删除按钮。点击这些按钮将[ tr ]移动到正确的表中。最后还有一个计算价格的脚本，从而完成页面操作。
　　这个脚本是一个有趣的由用户参与修改文档结构的例子，它也展示了JavaScript和CSS协作的一些要点。
　　XMLHTTP测速计
　　2005年9月，一家名叫Eend的网络公司委托我为其ISP Wanadoo公司写一个测试ADSL下载速度的脚本。需求非常简单：用户在一个表单中填入邮编和门牌号，然后一段XMLHttpRequest脚本就会在后台悄悄地向服务器发送这些信息，而服务器则会返回包含这用户所能得到的下载速度的一小段XML。
　　最后的结果（下载速度）会以动画形式显示出来（在最小速度和最大速度之间摆动）。除了视觉上要比较有趣之外，它还要清晰地表达出该下载速度是用户可以期待达到的速度，而不是ISP保证的。这对Wanadoo来说很重要，因为下载速度基本上是不可精确预测的。
　　这个脚本是一个使用XMLHTTP的简单例子，说明了怎么读服务器的反馈数据，演示了JavaScript动画的原理，还非常清楚地解释了setTimeout和setInterval之间的区别。
　　在线调查
　　在XMLHTTP测速计完工后不久，我开始为研究机构RM Interactive写一个不寻常又有趣的脚本。
　　这家公司受雇于大型网站，负责跟踪用户访问了哪些页面，并且在用户离开网站之后展示一个自愿参加的调查问卷。所有这些都是通过弹出窗口来实现的。
　　完成这些工作的脚本已经很老了，不能对付屏蔽弹出窗口的软件，对那些不支持JavaScript的用户来说也是不可访问的。而此时RM Interactive即将接手荷兰政府的项目，所以这些可访问性问题必须解决。
　　因此我完全重写了这个脚本，强化了可用性和可访问性。这个脚本将示范怎么绕过弹出窗屏蔽软件、监视主窗口中发生的事件、恢复弹出窗口与主窗口之间的通信，以及如何确定用户已经离开了网站。
　　请注意，“在线调查”是唯一使用了两个JavaScript文件的范例：主站的所有页面都加上了survey.js，而弹出窗口用了popup.js。
　　错误
　　这些真实的脚本必然会存在真实的错误。在写这本书的时候我注意到有两个比较特殊的错误。
　　?三明治拾取器有一个可访问性错误。理论上，它的页面对不支持脚本的用户是可访问的，但是事实上在不支持脚本的情况下可用性会被严重阻碍，我们将在2G讨论这点。
　　?表单验证用到了自定义的validation属性（即不属于(X)HTML规范的属性）。写第4章的时候，我发现它和“易用的表单”及“限长的文本输入区”有所不同，其实它可以不用自定义属性。把这些信息转而写到类属性里会让脚本与CSS表现层更紧密地合作。这点将在4B讨论。
　　我决定不更正这些错误，因为它们都很有教育意义，让我们可以更深入地了解JavaScript与HTML、可访问性、Web标准、CSS之间的关系。
　　本书结构
　　我们会在前4章讨论一些比较高级的主题，后6章将关注技术主题。
　　第1章讨论JavaScript的目标、技术概览以及JavaScript的历史，以说明它的目标是如何被重新定义的。
　　第2章讨论JavaScript的上下文环境，应是一个满足可用性、可访问性和符合标准的网站，它的结构层、表现层和行为层是分离的。
　　第3章讨论浏览器之间的兼容性问题和处理它们的策略。
　　第4章讨论JavaScript与HTML结构层的交互、初始化和[ script ]标签。
　　第5章～第10章全方位讨论JavaScript技术：核心、BOM（浏览器对象模型）、事件、DOM（文档对象模型）、改变CSS以及数据获取。1B包括这些主题的概述。
　　本书约定
　　最后来说明一下本书中的一些版式约定。
　　节
　　本书分为10章，每章又划分为标号为A、B、C等的节。
　　书中涉及的主题密不可分。印刷版图书的一个缺点就是无法使用超链接，因此，我使用了一些章号和节号间的交叉引用。例如，“我们将在4B中详细介绍这个内容”。
　　代码示例
　　很多章都布满了代码示例，类似
　　var rows = document.getElementsByTagName('tr');
　　for (var i=0;i[ rows.length;i++) {
　　var cells = rows[i].getElementsByTagName('td');
　　}
　　如果它们来自一个示例脚本，我会给出行号，如
　　[示例脚本名，第14～17行]
　　var rows = document.getElementsByTagName('tr');
　　for (var i=0;i[ rows.length;i++) {
　　var cells = rows[i].getElementsByTagName('td');
　　}
　　偶尔我也会简化示例脚本，因为我想集中讲述某个特性，而忽略其他内容。在这种情况下，会在行号中标出“节选”字样。“有改动”字样意思是根据旁边正文的说明，对脚本做了些改动。
　　代码中的某些行太长，书中会分为两行打印。这种情况下，行末会有特殊标记，表示“下一行的代码实际应在本行中”，例如，
　　var writerootRows = document.getElementById('writeroot').?
　　getElementsByTagName('tr');
　　JavaScript有时允许在标明位置分行，有时不允许。为了避免错误，最好是认为所有代码在源文件中位于一行上。
　　书中偶尔也会给出错误的反面示例，类似
　　 var rows = getElementsByTagName('tr');
　　for (var i=0;i[ rows.length;i++) {
　　 var cells = rows.getElementsByTagName('td');
　　}
　　其上下文会解释为什么这些示例是错误的。
　　代码示例有时也包含用方括号括起的文字，如
　　var rows = [get the rows in the start table];
　　for (var i=0;i[ rows.length;i++) {
　　var cells = rows[i].getElementsByTagName('td');
　　}
　　这表明，我们将先这么做，但暂不讨论如何做。我希望你把注意力放在示例中的实际代码上，虽然这些应该加以说明，但我并不打算详细讨论，以免分散你的注意力。
　　你不能将这样的方括号与数组中表示键的方括号相混淆，后者在5K和5L中会用到，它们通常是有明显区别的。
　　浏览器的名称
　　本书主要涉及4种浏览器，我通常称之为Explorer、Mozilla、Opera和Safari，其后接版本号。
　　Mozilla包括基于Gecko呈现引擎的各种浏览器，如Firefox、Camino和Netscape。
　　Explorer指Windows之上的微软Internet Explorer浏览器（5.0及以上版本）。
　　我使用这样的名称已经很久了，过去的7年中，我在www.quicksmode.org上也是一直这么使用的。我希望本书可以和这个网站相一致，因此也通篇使用了Explorer。
　　虽然有些读者会反驳说，它实际上就应该叫Internet Explorer，以区别Windows Explorer，但我认为不会有人会把WWW浏览器与文件管理器相混淆，特别是在它们紧密结合的今天。
　　如第3章所提到的，Windows版本的Explorer与Mac版本的Explorer是截然不同的浏览器。因为从JavaScript的角度看，Mac版的Explorer即将过时，而且也不是非常好的浏览器。没有限定词的Explorer总是指Windows版本的。当我提到Mac版时，我会明确地说“Mac的”。
　　时间
　　本书最后完成于2006年5月。显然，它不涉及我在这之后所进行的开发活动。
　　在写本书期间，我用以下浏览器测试了我的脚本：...
　　Explorer 6.0和7.0 beta 2 preview
　　Mozilla 1.7.12和Firefox 1.5
　　Opera 8.54和9 beta
　　Safari 1.3.2
　　Konqueror 3.0.5
　　iCab 3.0
　　

.