本书讲述了JavaScript和DOM的基础知识,但重点放在DOM编程技术背后的思路和原则:预留退路、循序渐进和以用户为中心等,这些概念对于任何前端Web开发工作都非常重要。本书将这些概念贯穿在书中的所有代码示例中,使你看到用来创建图片库页面的脚本、用来创建动画效果的脚本和用来丰富页面元素呈现效果的脚本,最后结合所讲述的内容创建了一个实际的网站。\r\n 本书适合Web设计师和开发人员阅读。
第1章 JavaScript简史 \r\n 1.1 JavaScript的起源 \r\n 1.2 浏览器之争 \r\n 1.3 制定标准 \r\n 1.4 小结 \r\n第2章 JavaScript语法 \r\n 2.1 准备工作 \r\n 2.2 语法 \r\n 2.3 语句 \r\n 2.4 变量 \r\n 2.5 操作 \r\n 2.6 条件语句 \r\n 2.7 循环语句 \r\n 2.8 函数 \r\n 2.9 对象 \r\n 2.10 小结 \r\n第3章 DOM \r\n 3.1 文档:DOM中的“D” \r\n 3.2 对象:DOM中的“O” \r\n 3.3 模型:DOM中的“M” \r\n 3.4 趁热打铁 \r\n 3.5 小结 \r\n第4章 案例研究:JavaScript美术馆 \r\n 4.1 编写标记语言文档 \r\n 4.2 编写JavaScript函数 \r\n 4.3 JavaScript函数的调用 \r\n 4.4 对JavaScript函数进行功能扩展 \r\n 4.5 小结 \r\n第5章 JavaScript编程原则和良好习惯 \r\n 5.1 不要误解JavaScript \r\n 5.2 预留退路 \r\n 5.3 向CSS学习 \r\n 5.4 分离JavaScript \r\n 5.5 向后兼容性 \r\n 5.6 小结 \r\n第6章 案例研究:JavaScript美术馆改进版 \r\n 6.1 快速回顾 \r\n 6.2 解决“预留退路”问题 \r\n 6.3 解决“分离JavaScript”问题 \r\n 6.4 JavaScript函数的优化:不要做太多的假设 \r\n 6.5 DOM Core和HTML-DOM \r\n 6.6 小结 \r\n第7章 动态创建HTML内容 \r\n 7.1 document.write()方法 \r\n 7.2 innerHTML属性 \r\n 7.3 DOM提供的方法 \r\n 7.4 重回“JavaScript美术馆” \r\n 7.5 小结 \r\n 7.6 下章简介 \r\n第8章 充实文档的内容 \r\n 8.1 不应该做的事情 \r\n 8.2 把“不可见”变成“可见” \r\n 8.3 原始内容 \r\n 8.4 XHTML文档 \r\n 8.5 CSS \r\n 8.6 JavaScript代码 \r\n 8.7 小结 \r\n 8.8 下章简介 \r\n第9章 CSS-DOM \r\n 9.1 三位一体的网页 \r\n 9.2 style属性 \r\n 9.3 何时该用DOM脚本去设置样式信息 \r\n 9.4 className属性 \r\n 9.5 小结 \r\n第10章 用JavaScript实现动画效果 \r\n 10.1 何为动画 \r\n 10.2 实用的动画 \r\n 10.3 改进动画效果 \r\n 10.4 最后的优化 \r\n 10.5 小结 \r\n第11章 学以致用:JavaScript网站设计实战 \r\n 11.1 案例背景介绍 \r\n 11.2 页面视觉效果设计 \r\n 11.3 CSS \r\n 11.4 颜色 \r\n 11.5 XHTML文档 \r\n 11.6 JavaScript脚本 \r\n 11.7 小结 \r\n 11.8 下章简介 \r\n第12章 展望DOM脚本编程技术 \r\n 12.1 Web的现状 \r\n 12.2 Ajax技术 \r\n 12.3 Web应用 \r\n 12.4 小结 \r\n附录 DOM方法和属性
Jeremy Keith 国际知名的Web设计师,Web标准计划(webstandards.org)成员,DOM Scripting任务组负责人之一。除本书外,他还正在撰写众所期待的《Bulletproof Ajax》一书(中文版将由人民邮电出版社出版)。可以通过其个人网站adactio.com与他联系。
这是一本讲述一种程序设计语言的书,但它也适合Web设计师阅读。具体地说,本书是为那些喜欢使用CSS和XHTML并愿意遵守编程规范的Web设计师们编写的。
本书由代码和概念两大部分构成。不要被那些代码吓倒:我知道它们乍看起来很唬人,可一旦抓住了代码背后的概念,你们就会发现用一种新语言去阅读和编写代码并没有多么困难。学习一种新的程序设计语言看起来很难,但事实却并非如此。DOM脚本看起来似乎比CSS更复杂,可一旦领悟了它的语法,你们就会发现自己又多掌握了一样功能强大的Web开发工具。
归根结底,代码都是思想和概念的体现。我在这里要告诉大家一个秘密:其实没人能把一种程序设计语言的所有语法和关键字都记住。如果有拿不准的地方,查阅参考书就全解决了。
本书不是一本参考大全。我将只讨论编写和运行JavaScript脚本所必需的最基本的语法。我的真正目的是为了让大家理解DOM脚本编程技术背后的思路和原则。这些思路和原则或许已经是你们早就熟悉的了:预留退路、循序渐进、以用户为中心的设计。这些概念其实对任何前端Web开发工作都非常重要。
这些思路贯穿在本书的所有代码示例中。你们将会看到用来创建图片库页面的脚本、用来创建动画效果的脚本和用来丰富页面元素呈现效果的脚本。如果你们愿意,完全可以把这些例子剪贴到自己的代码中,但更重要的是理解这些代码背后的“如何”和“为什么”。
如果你们已经在使用CSS和XHTML来把设计思路转化为活生生的网页,就应该知道Web标准有多么的重要。还记得你们第一次意识到自己根本不必使用<font>标签时感受到的震撼吗?还记得你们是在何时发现自己只需修改一个CSS文件就可以改变整个网站的视觉效果吗?DOM技术有着同样强大的威力。
不过,能力越大,责任也就越大。因此,我不仅想让你们看到用DOM脚本实现的超酷效果,更想让你们看到怎样才能利用DOM脚本编程技术以一种既方便自己更体贴用户的方式去充实和完善你们的网页。
如果需要本书所讨论的相关代码示例的完整清单 ,http://www.friendsofed.com网站搜索本书的主页就可以查到。你们还可以在这个网站找到friends of ED出版社出版的其他好书,它们的内容涉及Web标准、Flash、DreamWeaver以及许多细分的计算机领域。
你们对JavaScript的热情不应该在合上本书时就冷却下来。我已经在http//domscripting. com/处开设了一个网站,我将在那里继续与大家共同探讨现代的、标准化的JavaScript。我希望你们能到该网站看看。与此同时,我更希望本书能够对大家有所帮助。祝你们好运!
致谢
没有我的朋友和同事Andy Budd (www.andybudd.com)和Richard Rutter(www.clagnut.com)的帮助,本书的面世就无从谈起。Andy在我们的家乡Brighton开设了一个名为Skillswap(www.skillswap.org)的免费培训网站。在2004年7月,Richard和我在那里做了一次关于JavaScript和DOM的联合演讲。演讲结束后,我们来到附近的一家小酒馆,在那里,Andy建议我把演讲的内容扩展成一本书。
我接受了这个想法,并就此事请教了friends of ED出版社的Chris Mills。Chris非常支持我的想法,完全没有顾虑到我以前从未写过书的事实。friends of ED的每个人一直都在帮助和鼓励我。我要特别感谢我的项目经理Beckie Stones和我的文字编辑Julie Smith对我这个初出茅庐的作者给予的支持和谅解。
如果没有两方面的帮助,我大概永远也学不会编写JavaScript代码。一方面是几乎每个Web浏览器里都有的“view source”(查看源代码)选项。谢谢你,“view source”。另一方面是那些多年来一直在编写让人叹为观止的代码并解说重要思路的JavaScript大师们。Scott Andrew、Aaron Boodman、Steve Champeon、Peter-Paul Koch、Stuart Langridge和Simon Willison只是我现在能想到的几位。感谢你们所有人让我分享你们的聪明才智。
感谢Molly Holzschlag与我分享她的经验和忠告,感谢她对本书初稿给予反馈意见。感谢Derek Featherstone与我多次愉快地讨论JavaScript问题,我喜欢他思考和分析问题的方法。
我还要特别感谢Aaron Gustafson,他在我写作本书期间向我提供了许多宝贵的反馈和灵感。
在写作本书期间,我有幸参加两次非常棒的盛会:在得克萨斯州Austin举办的“South by Southwest”和在伦敦举办的@media。我要感谢这两次盛会的组织者Hugh Forrest和Patrick Griffiths,是他们让我有机会结识那么多最友善的人——我从没想过我能有机会与他们结为朋友和同事。
最后,我要感谢我的妻子Jessica Spengler,这不仅是因为她一直在默默地支持我,更因为她对本书初稿做出的专业帮助。谢谢你,我的人生伴侣。
序言
“JavaScript?别提了,用它编写程序特别麻烦。靠它建立起来的网站也不好用,动不动就弹出一个报错窗口什么的。你要是用了它,说不定它会趁你没看见的时候踢你的狗一脚呢。”
这就是JavaScript给我留下的印象……
作为一名Web设计师(或者称开发人员),我对JavaScript的态度是能不用就不用,你是不是也和我一样呢?像我们这样的人肯定还不少。从“.com”盛极一时的年代开始,因为过时的网络教程中有太多质量低劣的示例脚本,所以人们对JavaScript产生抵触情绪,这根本不让我感到意外。
幸运的是,有一群像Jeremy Keith这样的人在努力地为人们指明正确的方向。在这本书中,他向我们证明了事情并不像我们想像得那么糟糕;只要运用得当,再注意避开那些传统的JavaScript陷阱,DOM脚本编程技术就可以成为Web开发工具箱中又一件功能强大甚至是不可或缺的好东西。
事实上,DOM脚本编程技术的现状让我想起了2002年前后的CSS。在那之前,CSS一直被人们认为是一种古怪的Web显示语言,除了用它来改变字体,几乎没有什么人用它来干其他事情。
但没过多久,人们对利用CSS设计网页布局的兴趣就一发而不可收了,整个潮流也从那时扭转了过来。Wired和ESPN等著名企业用CSS重新设计网站的做法改变了人们的旧思想。我也在2003年初加入了向Web设计人员推广CSS技术的CSS Zen Garden组织。到了那年年底,CSS已经从少数人的个人爱好变成了许多公司对网站开发人员的一种预期和要求。
现在,我们看到DOM脚本编程技术也正呈现出一种类似的上升趋势。受Google Maps和Flickr等著名公司在最近利用DOM脚本编程技术推出的新型服务的影响和带动,对DOM脚本编程人才的需求正在日益增加。与过去相比,有越来越多像你和我这样的人开始迷上了脚本编程技术,并开始学习如何利用DOM的力量增强而不是妨碍网站的可用性。
我们是幸运的,因为现在有这本书来指导我们。我也想像不出还有什么人能够比Jeremy Keith更适合做我们的领路人。作为Web标准计划DOM Scripting任务组的台柱,他一直站在脚本编程技术领域各种最新研发方向的最前端。再说,我从他那里“偷学”代码已经有好几年了,手中有了这本书,我也就用不着再不好意思了。
这的确是一本值得一读再读的好书。在磕磕绊绊地看懂了前几段示例代码之后,我已经迫不及待地想看到更多的例子了。学完第1章后,我已经完全被吸引住了。Jeremy Keith是极少数能把高深的概念用简明易懂的语言解释透彻的天才,他的著作不仅可以让我们知道应该怎么做,还能让我们明白为什么要那样做。
是抛开“浏览器嗅探”(browser sniffing)技术而拥抱“对象检测”(object detection)技术的时候了。再也不用假设你们网站的访问者都已经激活了JavaScript支持功能了。让我们舍弃那些内嵌在HTML文档里的事件处理函数吧,因为我们再也不需要那样做了。Web一天一个样,而这本书里的技术会让我们每个人都获益。
译者序
网上的生活越来越丰富多彩。从最初的(X)HTML网页,到一度热炒的DHTML概念,再到近几年流行起来的CSS,网站和网页的设计工作变得越来越简便,网上的内容越来越富于变化和色彩。但是,很多网页设计者和网民朋友都不太喜欢JavaScript,这主要有以下几方面原因。第一,很多网页设计者认为JavaScript的可用性很差——早期的浏览器彼此很少兼容,如果想让自己编写出来的JavaScript脚本在多种浏览器环境里运行,就必须编写许多用来探测浏览器的具体品牌和具体版本的测试及分支代码(术语称之为“浏览器嗅探”代码)。这样的脚本往往到处是if...else语句,既不容易阅读,又不容易复查和纠错,更难以做到让同一个脚本适用于所有的浏览器。第二,对广大的网民来说,JavaScript网页的可访问性很差——浏览器会时不时地弹出一个报错窗口甚至导致系统死机,让人乘兴而来、败兴而去。第三,JavaScript被很多网站用来实现弹出广告窗口的功能,
无封面