作者:John Resig_陈贤安 页数:274 出版社:empty |
第1章
JavaScript语言一直在稳步发展:变化不快但却未曾止步。经过过去这十年, JavaScript给人的印象已经从一门简单如玩具一般的语言演变到备受尊敬的编程语言,世界上众多公司和开发者都用它构造出种种不可思议的应用程序。现代的JavaScript编程语言一如既往地牢固、健壮, 功能强大到令人难以置信的地步。本书讨论的诸多内容都会展示, 为什么现代的JavaScript应用程序和从前有那么明显的不同。这一章提到的许多概念和方法也许算不上太新颖,但成千上万聪明程序员的认同促使它们的运用得以升华,并最终形成今天的格局。好吧,闲话少说,让我们看看究竟什么叫作现代的JavaScript程序设计。1.1面向对象的JavaScript始就被设计为一门彻底的面向对象语言。然而, 随着JavaScript的广为运用和接受, 其他语言(比如Ruby、Python和Perl) 的程序员们开始注意到它, 并将许多良好的编程习惯带到了JavaScript中来, 从而促进了JavaScript的发展。从语言的角度来看, 面向对象编程或面向对象的JavaScript一点都不算时髦, JavaScript一开不管是在写法上还是在运行上, 面向对象的JavaScript代码和其他具有对象特性的语言都不一样。在第2章将深入讨论是哪些方面让它如此独特, 但现在让我们先感受一下现代的JavaScript该是怎么一个写法。代码清单1-1中是两个对象构造函数的例子,示范用一个对象组合表示学校中的课程。代码清单1-1用面向对象的JavaScript表示课程及其安排
建立好一个面向对象的代码基础后, 开发专业质量的JavaScript代码的另一方面是, 保证有一在第4章,你将会看到一系列工具,用于开发一套优秀的测试用例制度,同时给复杂应用程编写现代的、分离式的代码包括两个方面:文档对象模型(Document Object Model, DOM)DOM是表达XML文档的常见方式, 它未必是最快的方式, 也未必是最轻量级的或者最容易使考虑到正确的(valid) HTML不过是XML的一个子集, 解析并浏览DOM文档的有效办法无c head>同于其他更常见的面向对象语言的方式组织起来的。你可以创建对象的构造函数、可以添加方法,也可以访问对象的属性。一个使用了上面两个类的例子如代码清单1-2所示。代码清单1-2给用户提供一个课程列表var my Schedule=new Schedule([随着JavaScript被程序员们逐渐接受, 设计良好的面向对象代码也日益普及。面向对象JavaScript的代码片段将贯穿全书, 这些片段最能体现代码的设计与实现。41.2个健壮的代码测试环境。如果你开发的代码同时还会被其他开发者经常使用和维护,适当的测试就尤其有必要了。给其他开发者提供一个坚实的基础来进行测试,是开发实践中代码维护最重要的方面。序提供简单的调试功能。其中一个是Firefox的Firebug插件。Firebug提供了一系列有用的工具, 包JavaScript代码则用来使之动态化。这种分离最重要的效果是, 代码在不同的浏览器间使用时是完全可以降级(或者升级)运行的,这样你可以给支持某些高级特性的浏览器提供更丰富的交互,用的, 但的确是应用最广泛的, 大部分Web开发的编程语言(比如Java、Perl、PHP、Ruby、Python和JavaScript) 都提供了相应的实现。DOM给开发者提供了一种定位XML层级结构的直观方法。疑能简化JavaScript的开发。归根结底, JavaScript中绝大部分的操作都是JavaScript和网页里不同的HTML元素之间的交互, 而DOM则是简化这一过程的出色工具。代码清单1-4中是使用DOM来遍历和查找页面中不同元素并操作它们的例子。代码清单1-4使用DOM定位并操作不同的DOM元素//创建一个Lecture对象的数组, 作为Schedule对象的唯一参数传入new Lecture( Gym , Mr.Smith ) ,new Lecture( Math , Mrs.Jones ) ,new Lecture( English , TBD )测试代码6第1章现代JavaScript程序设计同时不支持这些特性的浏览器也能合理地降级运行它所支持的部分。7和JavaScript事件。在本书中稍后部分会深入讨论这两个方面。1.4.1DOM8//获取文档中的所有
There area number of reasons why theli[j] .style.border=//获取ID为'everywhere'的元素//从文档中删除这个元素every.parentNode.removeChild(every) ;DOM is awesome,here are some:
1px solid#000 ;};cul>DOM是开发分离式JavaScript代码的第一步, 在HTML文档中进行简单快速的定位使事件(event) 是黏合应用程序中所有用户交互的“胶水”。在设计良好的JavaScript应用程序中, 既有数据来源, 又有这些数据的视觉表现(在HTML DOM中的表现) , 要在这两个方面之间进行同步就必须通过与用户交互, 并据此来更新用户界面。DOM和JavaScript事件的组合, 是决击键盘或离开页面等。你可以给这些事件注册一些函数,一旦事件发生就会执行。代码清单1-5展示了这种交互动作的一个实例,当用户把鼠标移到
JavaScript事件是复杂多变的, 本书中大部分的代码和应用程序都用到了某种形式的事件。第6章和附录B就是完全针对事件和它们的交互的。1.4.3JavaScript与CSS在DOM和事件交互的基础上产生了DHTML, 它的实质其实就是JavaScript和DOM元素上的CSS属性之间的交互。同时, 只给你的用户带来了最少量的兼容性问题。总之, DHTML的意义在于JavaScript和CSS组作为简便布局、分离式网页的标准, CSS(层叠样式表) 在给你(开发者) 提供大量功能的合起来能做到什么,你又该如何使用这种组合来创造使人印象深刻的效果。更高级的交互示例, 比如拖放HTML元素和动画效果在第7章会有详细讨论。1.5AjaxAjax:ANewApproachtoWebApplications(http://www.adaptivepath.com/publications/essays/archives/000385.php) 一文中提出的名词, 他是Adaptive Path这家信息体系结构(information architecture)10Ajax或异步JavaScript与XML(Asynchronous JavaScript and XML) , 是Jesse James Garrett在公司的创始人和总裁。这个名词描述的是客户端和服务器之间,在请求和提交附加信息时进行的高级交互动作。Ajax这个词涵盖了数据通信的数百种情况, 不过全是围绕一个前提进行的:这些客户端到服务器的附加请求都是在页面完全载入之后才提交的。这使得应用程序的开发者让用户在传统应用程序的慢速交互方式之外有新式交互方式可选择。图1-3是Garrett的有关Ajax文章中的插图,展示了应用程序中的交互数据流是如何随着后台执行的附加请求而改变的(用户很有可能不需要知道这些请求)。交互手段的应用程序的大量涌现。具有讽刺意味的是, 尽管兴趣现在才被激发起来, 但Ajax背后Garrett文章的发表激起了用户、开发者、设计师和管理者的兴趣, 从而催化了这类利用高级的技术其实并不新颖(早在2000年就已投入商业使用)。最大的区别在于,原来的应用程序用来和服务器通信的技术都是针对个别浏览器的(比如只有IE才支持的特性)。自从所有的现代浏览器都支持XMLHTTPRequest(从服务器收发XML数据的主要手段) 以后, 它们的地位就平等了,允许所有人都能享受这一技术带来的便利。
1.6浏览器支持11尽管多年以来JavaScript的实质变化甚少, 但被Google和Yahoo这样的公司接受为成熟的编程环境,从而也说明了人们对这门语言的理解和欢迎有了巨大的转变。1.6浏览器支持1214JavaScript开发中不好的一方面是, 这门语言及其实现与支持它的浏览器关联得过于紧密, 因而必然受到当前最受欢迎的浏览器所限制。既然用户未必选用支持JavaScript最好的浏览器, 我们也就被迫对哪些才是最重要的功能作出选择。许多开发者决定放弃那些支持起来过于麻烦的浏览器。因为浏览器的用户来源而支持它,或者因为它有某个你喜欢的特性而支持它,这两者之间具有微妙的平衡。最近Yahoo发布了一个JavaScript库, 它可以用来扩展你的Web应用程序。整个库中规定了一些设计模式上的守则供Web开发者们遵循, (我认为) 其中最重要的一份文档是Yahoo官方关于它支持和不支持的浏览器列表。虽然任何人或任何公司都可以开这么一份列表,但作为因特网上最繁忙的网站之一, Yahoo给出的这份文档的价值仍然是难以估量的。13Yahoo开发了一套分级浏览器支持策略:给一个浏览器分配一个具体等级, 根据其能力提供不同的内容。Yahoo给出的3个浏览器级别是A、X和C。有说服力。在本书里我会经常使用现代浏览器(modern browser) 这个词, 此时就是指Yahoo浏览口A级浏览器是完整支持并测试过的, 所有的Yahoo应用程序都要保证能在这些浏览器上工作。口X级浏览器是Yahoo已知的A级浏览器, 但尚未有能力对其充分测试, 或一个以前未曾出现过的新浏览器。给X级浏览器提供的内容是和A级一样的,希望它们能处理好这些比较高级(复杂)的内容。口C级浏览器通常被称作“不好”的浏览器, 它们不支持那些运行Yahoo应用程序必需的特性。给这些浏览器提供的功能性应用程序内容应该不包含JavaScript, 因为Yahoo的应用程序都是完全分离式的(即在不含JavaScript的情形下仍能工作) 。巧合的是, Yahoo的分级浏览器选择正好和我自己的选择相同, 因而(在本书中) 显得非常器支持图表判定的、具有A级支持的那些浏览器。因为这些浏览器支持的特性是已知且固定的,学习和开发经验会有趣快乐得多(因为避免了浏览器的不兼容性)。文档, 包括图1-6展示的浏览器支持图表, 以了解Yahoo所希望达到的目标。通过把这些信息提供给Web开发大众, Yahoo设置了一套让所有人遵循的“黄金标准”, 这是一件很棒的事情。口Core JavaScript 1.5:这是最新被接受的JavaScript版本, 支持完整的面向对象JavaScript特本书尝试涵盖所有现代的、专业的JavaScript编程技巧, 从独立开发人员到大型公司成员在内这一章里我们完成了本书所有需要讨论内容的一个简短概览, 包括专业JavaScript编程的基础强烈推荐你仔细阅读在http:/developer.yahoo.com/yui/articles/gbs/gbs.html的分级浏览器支持要了解更多关于浏览器支持的信息,可以看本书的附录C,在那里详细讨论了每个浏览器的优缺点。通常你会发现A级浏览器总处在开发的前列,能给你的开发提供许多额外的功能。在选择支持的浏览器时,归根结底选择的是你的程序希望提供什么特性。如果你希望支持Netscape Navigator 4或者IE 5, 这会严重限制程序里可以使用的功能, 因为这些浏览器都缺乏对现代编程技术的支持。12第1章现代JavaScript程序设计尽管如此,了解哪些浏览器比较先进有助于运用它所支持的强大特性,作为进一步开发的基础。
IE5.0不完全支持1.5,所以开发者们多半不喜欢提供这个浏览器的支持。口XML文档对象模型(DOM) 2:遍历HTML和XML文档的标准。它对编写快速的应用程序非常重要。口XMLHttpRequest:Ajax的核心——发起远程HTTP访问的简单一层,除IE5.5~6.0以外所有的现代浏览器都默认支持这种对象, 不过这两个浏览器可以用ActiveX创建一个兼容的对象来支持它。CSS:设计网页的必备。这看起来似乎是个奇怪的要求, 但对Web应用程序开发者来说, 支持CSS是至关重要的。考虑到所有的现代浏览器都能支持CSS, 问题就可以简化为它们在呈现时的区别上, 大部分的问题都由此而生。这也是为什么IE的Mac版本很少得到支持的原因。1.7小结的所有人,都可以用这些技巧来让代码更可用、可读,也更易交互。编写面向对象的代码、测试代码和打包分发。然后讲解了分离式DOM脚本编写的基础知识, 包括对文档对象模型的概览、事件, 以及CSS与JavaScript之间的交互。最后你了解到了Ajax的基础和现代浏览器中JavaScript的实现。总而言之, 这些内容足够将你带入专业JavaScript程序员的行列了。
对象(object) 是组成JavaScript的基本单元, 事实上, JavaScript中的一切都是对象, 而且充分发挥了这一点。不过JavaScript还包含了构成一门丰富坚实的面向对象语言的大量特性, 这使它无论是在功能还是在风格上都显得极为独特。闭包(closure) 以及上下文(con tx) , 而这些内容正是其他Java Scr it图书很少提及的。有了这些重要的基础知识之后, 我们就可以开始探索面向对象的Java Scr it重要的特性了, 包括对象的本章将从介绍Java Scr it语言中最重要的几个部分开始:引用(refernce) 、作用域(scope) ,如何行为、如何创建新的对象和设置不同权限的方法(method) 。严格地说, 这恐怕是全书最重要的一章了, 因为它会彻底改变你对Java Srt这门语言的看法。2.1语言特性的作用。我个人觉得这样的特性搭配得恰到好处,构成了这样一门比想象中还要强大的语言。和许多其他语言不同, Java Srpt之所以成为Java Srpt, 它的大量语言特性起到了至关重要2.1.1引用引用(refrence) 的概念是JavaScript的基础之一, “引用”是一个指向对象实际位置的指针。这是一个极为强大的特性,但有一个前提:实际的对象肯定不会是引用。字符串永远是字符串,数组永远是数组。不过多个变量却能够指向同一对象。Java Scr pt基于的就是这样一个引用系统。这门语言通过维护一系列对其他对象的引用,提供了极大的灵活性。代码清单2-1多个变量引用同一个对象此外, 对象可以包含一系列属性(property) , 这些属性也都不过是到其他对象(比如字符串、数字、数组等等)的引用。如果多个变量指向的是同一个对象,那该对象的类型一改变,所有这些变量也会跟着相应改变。在代码清单2-1中可以看到这样的一个例子:两个变量都指向同一个19对象,而对该对象内容的修改对这两个变量都会产生影响。
此外,虽然显得有点怪,但是还有一个用来判断传入参数类型的方法。如果没有提供参数,它的类型必为undefined, 我们要利用这一特性来作判断。代码清单2-6展示了这样一个简单函数,它用于显示错误信息,如果没有提供信息的内容,就显示默认的一条。代码清单2-6显示错误信息和默认信息function display error(msg){type of语句的应用为我们引入了下一个话题:类型检查。既然JavaScript(现在而言) 是一个动态类型(dynamically typed) 的语言, 类型检查必然是个非常有用而且重要的话题。有许多方法可以检查变量的类型,但我们这里只讨论两种特别有用的方法。第一种方法是使用显而易见的type of操作符。这个工具提供了一个字符串名称(stringname) , 用于表达变量内容的类型。当变量不是object或者array类型时, 这应该算是最完美的解决方法了。
第一部分认识现代JavaScript3.2打包·39
第1章现代JavaScript程序设计…·42
1.1面向对象的JavaScript…·43
1.2测试代码…….45
1.3打包分发…4
1.4分离式DOM脚本编程……48
1.5Ajax…
1.6浏览器支持54
1.7小结…55
第二部分专业JavaScript开发4.2.1JSUnit
第2章面向对象的JavaScript58
2.1语言特性.................59
2.2面向对象基础…
2.3小结5.2.3绑定到每一个HTML元素67
第3章创建可重用代码...
3.1标准化面向对象的代码……315.3.1等待整个页面的加载……70
Pro
JavaScript
Techniques
人民邮电出版社
POSTS&TELECOM PRESS
目录
第4章调试与测试的工具
4.1调试…
4.1.1错误控制台
4.1.2DOM查看器-
4.1.3Firebug
4.1.4Venkman
4.2测试……
4.2.2J3Unit…
4.2.3 Test.Simple
4.3小结…
5.2.1处理DOM中的空格
5.2.4标准的DOM方法…
5.3.3判断DOM何时加载完毕…
第三部分分离式JavaScript
第5章DOM62
5.DOM简介..62
5.2遍历DOM62
5.3等待HTML DOM的加载69
5.4在HTML文档中查找元素…73
简单的DOM遍历…
等待大部分DOM的加载
5.4.1通过类的值查找元素
使用CSS选择器查找元素…74
XPath……76
获取元素内的文本·
获取元素内的HTML…
使用DOM创建节点…
插入到DOM中…
注入HTML到DOM…
删除DOM节点…
重载浏览器的默认行为
add Event和remove Event … 100
JavaScript禁用的未雨绸缪……104
确保链接不依赖于JavaScript…104
10.4.1基于XML的RSS Feed…
10.4.2HTML注入器…
10.4.3JSON与JavaScript:
小结·
渐显…
鼠标位置…
视口…
moo.fx和j Query…
Scriptaculous…
改进表单…
表单验证
8.1.1必填字段…
8.1.2模式匹配…
8.1.3规则集合…
显示错误信息·
8.2.1验证…
8.2.2何时验证…
可用性的提升…
8.3.1悬停的说明…
8.3.2标记必填字段…
制作图库…
图库示例…
9.1.1Lightbox…
9.1.2Thick Box…
制作图库…
9.2.1分离加载…
9.2.2半透明的覆盖层…
9.2.3定位盒子…
9.2.4导航…
9.2.5幻灯片…
第10章
获取元素的内容…
操作元素特性
修改DOM…
小结
事件…
JavaScript事件简介…
6.1.1异步事件与线程…
6.1.2事件阶段…
常见事件特性…
6.2.1事件对象-
6.2.2this关键字·
6.2.3取消事件冒泡…
6.2.4
绑定事件监听函数…
6.3.1传统绑定…
6.3.2DOM绑定:W3C…
6.3.3DOM绑定:IE…
事件类型…
分离式脚本编程…
6.5.3监听CSS何时禁用…
6.5.4事件的亲和力…
小结…
JavaScript与CSS
访问样式信息…
动态元素…
7.2.1元素的位置…
7.2.2元素的尺寸…
7.2.3元素的可见性…
动画…
7.3.1滑动…
10.4数据的不同用途…
10.5小结
第四部分
Ajax导引
使用Ajax…
10.1.1HTTP请求…
10.1.2HTTP响应…
处理响应数据…
完整的Ajax程序包…
13.3Ajax请求…
13.4服务器端代码…
13.5处理JSON响应…
处理请求…
执行和格式化SQL
JavaScript 1.6…
JavaScript 1.7…
制作时钟…
简单行星模拟-
第六部分附录
远程执行…
用Ajax改进blog
永不终止的blog.
11.1.1blog的模板…
11.1.2数据源…
11.1.3事件检测·
11.1.4请求…
11.1.5结果…
实时网志…
小结…
自动补全的搜索
自动补全搜索的例子
制作页面……
监听键盘输入·
抓取结果…
导航结果列表·
12.5.1键盘导航…
12.5.2鼠标导航…
最终成果…
小结
Ajax wiki…
wiki是什么…
对话数据库
附加的案例研究:JavaScript blog … 216
应用程序的代码……217
13.7.1核心JavaScript代码……218
13.7.2JavaScript SQL库……221
13.7.3Ruby服务器端代码…221
小结…224
第五部分JavaScript的未来
第14章JavaScript路在何方…226
14.1JavaScript 1.6与1.7……226
14.2Web Applications 1.0….231
14.3Comet…238
14.4小结…240
附录ADOM参考手册242
附录B事件参考手册…257
附录C浏览器273
索引…275