作者：（英）Jeremy Keith （加）Jeffrey Sambells 著
出版社：人民邮电出版社
格式: AZW3, DOCX, EPUB, MOBI, PDF, TXT
JavaScript DOM编程艺术(第2版)试读：
前言
这是一本讲述一种程序设计语言的书，但它不是专门写给程序员的，而主要是写给Web设计师的。具体地说，本书是为那些喜欢使用CSS和HTML并愿意遵守编程规范的Web设计师们编写的。
本书由代码和概念两大部分构成。不要被那些代码吓倒，我知道它们乍看起来很唬人，可只要抓住了代码背后的概念，就会发现你是在用一种新语言去阅读和编写代码。
学习一种新的程序设计语言看起来可能很难，但事实却并非如此。DOM脚本看起来似乎比CSS更复杂，可只要领悟了它的语法，你就会发现自己又掌握了一样功能强大的Web开发工具。归根结底，代码都是思想和概念的体现。
我在这里要告诉大家一个秘密：其实没人能把一种程序设计语言的所有语法和关键字都记住。如果有拿不准的地方，查阅参考书就全解决了。但本书不是一本参考大全。本书只介绍最基本的JavaScript语法。
本书的真正目的是让大家理解DOM脚本编程技术背后的思路和原则，或许你对其中一部分早就熟悉了。平稳退化、渐进增强、以用户为中心的设计对任何前端Web开发工作都非常重要。这些思路贯穿在本书的所有代码示例中。
你将会看到用来创建图片库页面的脚本、用来创建动画效果的脚本和用来丰富页面元素呈现效果的脚本。如果你愿意，完全可以把这些例子剪贴到自己的代码中，但更重要的是理解这些代码背后的“如何”和“为什么”。
如果你已经在使用CSS和HTML来把设计思路转化为活生生的网页，就应该知道Web标准有多么重要。还记得你是在何时发现自己只需修改一个CSS文件就可以改变整个网站的视觉效果吗？DOM技术有着同样强大的威力。不过，能力越大，责任也就越大。因此，我不仅想让你看到用DOM脚本实现的超酷效果，更想让你看到怎样才能利用DOM脚本编程技术以一种既方便自己更体贴用户的方式去充实和完善网页。1
如果需要本书所讨论的相关代码，到www.friendsofed.com网站搜索本书的主页就可以查到。还可以在这个网站找到friends of ED出版社的所有其他好书，内容涉及Web标准、Flash、DreamWeaver以及许多细分的计算机领域。本书代码示例也可从图灵网站www.turingbook.com本书网页免费注册下载。——编者注你对JavaScript的探索不应该在合上本书时就停止下来。我开设了http://domscripting.com/网站，在那里继续与大家共同探讨现代的、标准化的JavaScript。我希望你能到该网站看看。与此同时，我更希望本书能够对大家有所帮助。祝你们好运！致谢1
没有我的朋友和同事Andy Budd（http://www.andybudd.com）与Richard Rutter（http://www.Clagnut.com）的帮助，本书的面世就无从谈起。Andy在我们的家乡Brighton开设了一个名为Skillswap（http://www.skillswap.org）的免费培训网站。在2004年7月，Richard和我在那里做了一次关于JavaScript和DOM的联合演讲。演讲结束后，我们来到附近的一家小酒馆，在那里，Andy建议我把演讲的内容扩展成一本书，也就是本书的第1版。Andy Budd是超级畅销书《精通CSS：高级Web标准解决方案（第2版）》的作者，该书已由人民邮电出版社出版。——编者注如果没有两方面的帮助，我大概永远也学不会编写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，他在我写作本书期间向我提供了许多宝贵的反馈和灵感。在写作第1版期间，我有幸参加了两次非常棒的盛会：在得克萨斯州Austin举办的“South by Southwest”和在伦敦举办的@media。我要感谢这两次盛会的组织者Hugh Forrest和Patrick Griffiths，是他们让我有机会结识那么多最友善的人——我从没想过我能有机会与他们成为朋友和同事。最后，我要感谢我的妻子Jessica Spengler，不仅因为她永远不变的支持，还因为她在本书初稿的校对工作中做出的专业帮助。谢谢你，我的人生伴侣。——Jeremy Keith 第1章 JavaScript简史
本章内容● JavaScript的起源● 浏览器战争● DOM的演变史
本书第1版面世的时候，做一名Web设计师是件很让人很兴奋的事。5个年头过去了，这个职业依然保持着强大的吸引力。特别是JavaScript，经历了从被人误解到万众瞩目的巨大转变。Web开发呢，也已从混乱无序的状态，发展成一门需要严格训练才能从事的正规职业。无论设计师还是开发人员，在创建网站的过程中都积极地采用标准技术，Web标准已经深入人心。
当网页设计人员谈论起与Web标准有关的话题时，HTML（超文本标记语言）和CSS（层叠样式表）通常占据着核心地位。不过，W3C（万维网联盟）已批准另一项技术，所有与标准相兼容的Web浏览器都支持它，这就是DOM（文档对象模型）。我们可以利用DOM给文档增加交互能力，就像利用CSS给文档添加各种样式一样。
在开始学习DOM之前，我们先检视一下使网页具备交互能力的程序设计语言。这种语言就是JavaScript，它已经诞生相当长的时间了。1.1 JavaScript的起源
JavaScript是Netscape公司与Sun公司合作开发的。在JavaScript出现之前，Web浏览器不过是一种能够显示超文本文档的简单的软件。而在JavaScript出现之后，网页的内容不再局限于枯燥的文本，它们的可交互性得到了显著的改善。JavaScript的第一个版本，即JavaScript 1.0版本，出现在1995年推出的Netscape Navigator 2浏览器中。
在JavaScript 1.0发布时，Netscape Navigator主宰着浏览器市场，微软的IE浏览器则扮演着追赶者的角色。微软在推出IE 3的时候发布了自己的VBScript语言，同时以JScript为名发布了JavaScript的一个版本，以此很快跟上了Netscape的步伐。面对微软公司的竞争，Netscape和Sun公司联合ECMA（欧洲计算机制造商协会）对JavaScript语言进行了标准化。于是出现了ECMAScript语言，这是同一种语言的另一个名字。虽说ECMAScript这个名字没有流行开来，但人们现在谈论的JavaScript实际上就是ECMAScript。
到了1996年，JavaScript、ECMAScript、JScript——随便你们怎么称呼它——已经站稳了脚跟。Netscape和微软公司在各自的第3版浏览器中都不同程度地支持JavaScript 1.1语言。
注意 JavaScript与Sun公司开发的Java程序语言没有任何联系。JavaScript最开始的名字是LiveScript，后来选择“JavaScript”作为其正式名称的原因，大概是想让它听起来有系出名门的感觉。但令人遗憾的是，这一选择容易让人们把这两种语言混为一谈，而这种混淆又因为各种Web浏览器确实具备这样或那样的Java客户端支持功能而进一步加剧。事实上，Java在理论上几乎可以部署在任何环境，但JavaScript却倾向于只应用在Web浏览器。
JavaScript是一种脚本语言，通常只能通过Web浏览器去完成一些操作而不能像普通意义上的程序那样独立运行。因为需要由Web浏览器进行解释和执行，所以JavaScript脚本不像Java和C++等编译型程序设计语言那样用途广泛。不过，这种相对的简单性也正是JavaScript的长处：比较容易学习和掌握，所以那些本身不是程序员，但希望通过简单的剪贴操作把脚本嵌入现有网页的普通用户很快就接受了JavaScript。
JavaScript还向程序员提供了一些操控Web浏览器的手段。例如，JavaScript语言可以用来调整Web浏览器窗口的高度、宽度和位置等属性。这种设定浏览器属性的办法可以看做是BOM（浏览器对象模型）。JavaScript的早期版本还提供了一种初级的DOM。1.2 DOM
什么是DOM？简单地说，DOM是一套对文档的内容进行抽象和概念化的方法。
在现实世界里，人们对所谓的“世界对象模型”都不会陌生。例如，当用“汽车”、“房子”和“树”等名词来称呼日常生活环境里的事物时，我们可以百分之百地肯定对方知道我们说的是什么，这是因为人们对这些名词所代表的东西有着同样的认识。于是，当对别人说“汽车停在了车库里”时，可以断定他们不会理解为“小鸟关在了壁橱里”。
我们的“世界对象模型”不仅可以用来描述客观存在的事物，还可以用来描述抽象概念。例如，假设有个人向我问路，而我给出的答案是“左边第三栋房子”。这个答案有没有意义将取决于那个人能否理解“第三”和“左边”的含义。如果他不会数数或者分不清左右，则不管他是否理解这几个概念，我的回答对他都不会有任何帮助。在现实世界里，正是因为大家对抽象的世界对象模型有着基本的共识，人们才能用非常简单的话表达出复杂的含义并得到对方的理解。具体到这里的例子，你可以相当有把握地断定，其他人对“第三”和“左边”的理解和我完全一样。
这个道理对网页也同样适用。JavaScript的早期版本向程序员提供了查询和操控Web文档某些实际内容（主要是图像和表单）的手段。因为JavaScript预先定义了“images”和“forms”等术语，我们才能像下面这样在JavaScript脚本里引用“文档中的第三个图像”或“文档中名为‘details’的表单”：document.images[2]document.forms['details']
现在的人们通常把这种试验性质的初级DOM称为“第0级DOM”（DOM Level 0）。在还未形成统一标准的初期阶段，“第0级DOM”的常见用途是翻转图片和验证表单数据。Netscape和微软公司各自推出第四代浏览器产品以后，DOM开始遇到麻烦，陷入困境。1.3 浏览器战争
Netscape Navigator 4发布于1997年6月，IE 4发布于同年10月。这两种浏览器都对它们的早期版本进行了许多改进，大幅扩展了DOM，使能够通过JavaScript完成的功能大大增加。而网页设计人员也开始接触到一个新名词：DHTML。1.3.1 DHTML
DHTML是“Dynamic HTML”（动态HTML）的简称。DHTML并不是一项新技术，而是描述HTML、CSS和JavaScript技术组合的术语。DHTML背后的含义是：● 利用HTML把网页标记为各种元素；● 利用CSS设置元素样式和它们的显示位置；● 利用JavaScript实时地操控页面和改变样式。
利用DHTML，复杂的动画效果一下子变得非常容易实现。例如，用HTML标记一个页面元素：
然后用CSS为这个页面元素定义如下位置样式：#myelement { position: absolute; left: 50px; top: 100px;}
接下来，只需利用JavaScript改变myelement元素的left和top样式，就可以让它在页面上随意移动。不过，这只是理论而已。
不幸的是，NN 4和IE 4浏览器使用的是两种不兼容的DOM。换句话说，虽然浏览器制造商的目标一样，但他们在解决DOM问题时采用的办法却完全不同。1.3.2 浏览器之间的冲突
Netscape公司的DOM使用了专有元素，这些元素称为层（layer）。层有唯一的ID，JavaScript代码需要像下面这样引用它们：document.layers['myelement']
而在微软公司的DOM中这个元素必须像下面这样引用：document.all['myelement']
这两种DOM的差异并不止这一点。假设你想找出myelement元素的left位置并把它赋值给变量xpos，那么在Netscape Navigator 4浏览器里必须这样做：var xpos = document.layers['myelement'].left;
而在IE 4浏览器中，需要使用如下所示的语句才能完成同样的工作：var xpos = document.all['myelement'].leftpos;
这就导致了一种很可笑的局面：程序员在编写DOM脚本代码时必须知道它们将运行在哪种浏览器环境里，所以在实际工作中，许多脚本都不得不编写两次，一次为Netscape Navigator，另一次为IE。同时，为了确保能够正确地向不同的浏览器提供与之相应的脚本，程序员还必须编写一些代码去探查在客户端运行的浏览器到底是哪一种。
DHTML打开了一个充满机会的新世界，但想要进入其中的人们却发现这是个充满苦难的世界。因此，没多久，DHTML就从一个大热门变成了一个人们不愿提起的名词，而对这种技术的评价也很快地变成了“宣传噱头”和“难以实现”。1.4 制定标准
就在浏览器制造商以DOM为武器展开营销大战的同时，W3C不事声张地结合大家的优点推出了一个标准化的DOM。令人欣慰的是，Netscape、微软和其他一些浏览器制造商们还能抛开彼此的敌意而与W3C携手制定新的标准，并于1998年10月完成了“第1级DOM”（DOM Level 1）。
回到刚才的例子，我们已经用
乍看起来，这与刚才那两种非标准化的专有DOM相比并没有明显的改进。但事实上，标准化的DOM有着非常远大的抱负。
浏览器制造商们感兴趣的只不过是通过JavaScript操控网页的具体办法，但W3C推出的标准化DOM却可以让任何一种程序设计语言对使用任何一种标记语言编写出来的任何一份文档进行操控。1.4.1 浏览器以外的考虑
DOM是一种API（应用编程接口）。简单地说，API就是一组已经得到有关各方共同认可的基本约定。在现实世界中，相当于API的例子包括（但不限于）摩尔斯码、国际时区、化学元素周期表。以上这些都是不同学科领域中的标准，它们使得人们能够更方便地交流与合作。如果没有一个统一的标准，事情往往会演变成为一场灾难。别忘了，因混淆英制度量衡与公制度量衡至少导致过一次火星探测任务的失败。
在软件编程领域中，虽然存在着多种不同的语言，但很多任务却是相同或相似的。这也正是人们需要API的原因。一旦掌握了某个标准，就可以把它应用在许多不同的环境中。虽然语法会因为使用的程序设计语言而有所变化，但这些约定却总是保持不变的。
因此，虽然本书的重点是教会你如何通过JavaScript使用DOM，当你需要使用诸如PHP或Python之类的程序设计语言去解析XML文档的时候，你获得的DOM新知识将会有很大的帮助。
W3C对DOM的定义是：“一个与系统平台和编程语言无关的接口，程序和脚本可以通过这个接口动态地访问和修改文档的内容、结构和样式。”W3C推出的标准化DOM，在独立性和适用范围等诸多方面，都远远超出了各自为战的浏览器制造商们推出的各种专有DOM。1.4.2 浏览器战争的结局
我们知道，浏览器市场份额大战中微软公司战胜了Netscape，具有讽刺意味的是，专有的DOM和HTML标记对这个最终结果几乎没有产生影响。IE浏览器注定能击败其他对手，不过是因为所有运行Windows操作系统的个人电脑都预装了它。
受浏览器战争影响最重的人群是那些网站设计人员。跨浏览器开发曾经是他们的噩梦。除了刚才提到的那些在JavaScript实现方面的差异之外，Netscape Navigator和IE这两种浏览器在对CSS的支持方面也有许多非常不同的地方。而编写那些可以同时支持这两种浏览器的样式表和脚本的工作也成了一种黑色艺术。
浏览器制造商的自私姿态遭到人们的激烈反对，一个名为Web标准计划（简称WaSP，http://webstandards.org/）的小组应运而生。WaSP小组采取的第一个行动就是，鼓励浏览器制造商们采用W3C制定和推荐的各项标准，也就是在浏览器制造商们的帮助下得以起草和完善的那些标准。
或许是因为来自WaSP小组的压力，又或许是因为企业的内部决策，下一代浏览器产品对Web标准的支持得到了极大的改善。1.4.3 崭新的起点
早期浏览器大战至今，浏览器市场已经发生了巨大的变化，而且到了今天，这一切也几乎每天都有变化。有的浏览器，比如Netscape Navigator，差不多已经从人们的视野中消失了，而新一代浏览器则陆续登台亮相。苹果公司在2003年首次发布了它的Safari浏览器（基于WebKit），它从一开始就坚定不移地遵循DOM标准。今天，包括Firefox、Chrome、Opera和IE，以及一些基于WebKit的其他浏览器都对DOM有着良好的支持。很多最潮的智能手机浏览器都在使用WebKit渲染引擎，推动着手持浏览器开发不断向前，让手机上网的体验甚至好过了使用某些桌面浏览器。
注意 WebKit（http://webkit.org）是Safari和Chrome采用的一个开源Web浏览器引擎。以WebKit和Gecko（Firefox的核心，https://developer.mozilla.org/en/Gecko）为代表的开源引擎，在促进微软的Trident（IE的核心）等专有浏览器引擎逐步向Web标准靠拢方面起到特别积极的作用。
今天，几乎所有的浏览器都内置了对DOM的支持。20世纪90年代后期的浏览器大战的硝烟已经散尽。现在的浏览器厂商无一不在争先恐后地实现最新规范。我们已经目睹了由异步数据传输技术（Ajax）所引发的学习DOM脚本编程的热潮，而HTML5 DOM的众多新特性，怎能不让人对Web的未来浮想联翩？HTML5极大地改进了标记的语义，让我们通过
Web设计师的日子已经今非昔比。尽管还没有一款浏览器完美无瑕地实现W3C DOM，但所有现代浏览器对DOM特性的覆盖率都基本达到了95%，而且每款浏览器都几乎会在第一时间实现最新的特性。这意味着什么？意味着大量的任务都不必依靠分支代码了。以前，为了探查浏览器，我们不得不编写大量分支判断脚本，现在，终于可以实现“编写一次，随处运行”的梦想了。只要遵循DOM标准，就可以放心大胆地去做，因为你的脚本无论在哪里都不会遇到问题。1.5 小结
在前面对JavaScript发展简史的介绍中，笔者特别提到，不同的浏览器采用了不同的办法来完成同样的任务。这一无法回避的事实不仅主宰着如何编写JavaScript脚本代码，还影响着JavaScript教科书的编写方式。
JavaScript教科书往往会提供大量的示例代码以演示这种脚本语言的使用方法，而完成同一项任务的示例脚本往往需要为不同的浏览器编写两次或更多次。就像你在绝大多数网站上查到的代码一样，在绝大多数JavaScript教科书的示例脚本中往往充斥着大量的浏览器探查代码和分支调用结构。类似地，在JavaScript技术文档中，函数和方法的清单也往往是一式多份——至少需要标明哪种浏览器支持哪些函数和方法。
如今这种情况已经有所改变。多亏了标准化的DOM，不同的浏览器在完成同样的任务时采用的做法已经非常一致了。因此，在本书中，当演示如何使用JavaScript和DOM完成某项任务时，将不再需要撇开主题去探讨如何对付不同的浏览器。如果无特殊的必要，本书将尽量避免涉及任何一种特定的浏览器。
此外，我们在本书后面的内容中将不再使用“DHTML”这个术语，因为这个术语与其说是一个技术性词语，不如说是一个市场营销噱头。首先，它听起来很像是HTML或XHTML语言的另一种扩展，因而很容易造成误解或混淆；其次，这个术语容易勾起一些痛苦的回忆——如果你向20世纪90年代后期的程序员们提起“DHTML”，你将很难让他们相信它现在已经变成了一种简单、易用的标准化技术。
DHTML曾被认为是HTML/XHTML、CSS和JavaScript相结合的产物，就像今天的HTML5那样，但把这些东西真正凝聚在一起的是DOM。如果真的需要来描述这一过程的话，“DOM脚本程序设计”更精确，它表示使用W3C DOM来处理文档和样式表。DHTML只适用于Web文档，“DOM脚本程序设计”则涵盖了使用任何一种支持DOM API的程序设计语言去处理任何一种标记文档的情况。具体到Web文档，JavaScript的无所不在使它成为了DOM脚本程序设计的最佳选择。
在正式介绍DOM脚本程序设计技巧之前，我们将在下一章先简要地复习一下JavaScript的语法。 第2章 JavaScript语法
本章内容● 语句● 变量和数组● 操作符● 条件语句和循环语句● 函数与对象
本章将简要复习一下JavaScript语法，并介绍其中最重要的一些概念。2.1 准备工作
编写JavaScript脚本不需要任何特殊的软件，一个普通的文本编辑器和一个Web浏览器就足够了。
用JavaScript编写的代码必须通过HTML/XHTML文档才能执行。有两种方式可以做到这点。第一种方式是将JavaScript代码放到文档
标签中的 Mark-up goes here...一种更好的方式是把JavaScript代码存为一个扩展名为 .js 的独立文件。典型的作法是在文档的
部分放一个 Mark-up goes here...但最好的做法是把
这样能使浏览器更快地加载页面（第5章将详细讨论这个问题）。
注意 前面例子中的
可以把本章中的任何一个示例复制到你的example.js文件中。虽说那些示例没有什么特别令人激动的地方，但它们可以把有关的语法演示得明明白白。
在本书后面的章节里，我们将演示如何使用JavaScript改变文档的行为和内容。但在本章里，我们只使用一个简单的对话框来显示消息。
如果改变了example.js文件的内容，只需在Web浏览器中重新载入test.html文档即可看到效果。Web浏览器会立刻解释并执行你的JavaScript代码。
程序设计语言分为解释型和编译型两大类。Java或C++等语言需要一个编译器（compiler）。编译器是一种程序，能够把用Java等高级语言编写出来的源代码翻译为直接在计算机上执行的文件。
解释型程序设计语言不需要编译器——它们仅需要解释器。对于JavaScript语言，在互联网环境下，Web浏览器负责完成有关的解释和执行工作。浏览器中的JavaScript解释器将直接读入源代码并执行。浏览器中如果没有解释器，JavaScript代码就无法执行。
用编译型语言编写的代码有错误，这些错误在代码编译阶段就能被发现。而解释型语言代码中的错误只能等到解释器执行到有关代码时才能被发现。
与解释型语言相比，编译型语言往往速度更快，可移植性更好，但它们的学习曲线也往往相当陡峭。
JavaScript的优点之一就是相当容易入门，但千万不要因此小看JavaScript，其实它能完成许多相当复杂的编程任务。不过，本章主要介绍它最基本的语法和用法。2.2 语法
英语是一种解释型语言。在阅读和处理我们用英语写出来的文字时，你就相当于一个英语解释器。只要遵守英语的语法规则，我们想表达的意思就可以被正确地解读。这些语言结构方面的各项规则，我们就称之为“语法”。
如同书面的人类语言，每种程序设计语言也都有自己的语法。JavaScript的语法与Java和C++语言的语法非常相似。2.2.1 语句
用JavaScript编写的脚本，与其他语言编写出来的脚本一样，都由一系列指令构成，这些指令叫做语句（statement）。只有按照正确的语法编写出来的语句才能得到正确的解释。
JavaScript语句与英语中的句子很相似。它们是构成任何一个脚本的基本单位。
英语语法要求每个句子必须以一个大写字母开头、以一个句号结尾。JavaScript在这方面的要求不那么严格，程序员只需简单地把各条语句放在不同的行上就可以分隔它们，如下所示：first statementsecond statement
如果你想把多条语句放在同一行上，就必须像下面这样用分号来分隔开它们：first statement; second statement;
我们建议在每条语句的末尾都加上一个分号，这是一种良好的编程习惯：first statement;second statement;
这样做让代码更容易阅读。让每条语句独占一行的做法能更容易跟踪JavaScript脚本的执行顺序。2.2.2 注释
不是所有的语句都需要JavaScript解释器去解释并执行。有时你需要在脚本中写一些仅供自己参考或提醒自己的信息，你希望JavaScript解释器能直接忽略掉这些信息。这类语句就是注释（comment）。
注释能有效帮助你了解代码流程。在代码中它们扮演生活中便条的角色，可以帮助你弄清楚你的脚本到底干了些什么。
有多种方式可以在JavaScript脚本中插入注释。例如，如果用两个斜线作为一行的开始，这一行就会被当成一条注释：// 自我提醒：有注释是好事
如果使用这种注释方式，就必须在每个注释行的开头加上两个斜线。像下面这样的写法脚本就会出问题：// 自我提醒： 有注释是好事
必须把它们写成类似下面这样才行：// 自我提醒：// 有注释是好事
如果打算注释很多行，你可以在注释内容的开头加上一个斜线和一个星号（/*），在注释内容的末尾加上一个星号和一个斜线（*/）。下面是一个多行注释的例子：/* 自我提醒： 有注释是好事 */
这种注释方式在需要插入大段注释时很有用，它可以提高整个脚本的可读性。
还可以使用HTML风格的注释，但这种做法仅适用于单行注释。其实JavaScript解释器对“”来结束注释，如下所示：
但JavaScript不要求这样做，它会把“-->”视为注释内容的一部分。
请注意，HTML允许上面这样的注释跨越多个行，但JavaScript要求这种注释的每行都必须在开头加上“<!--”来作为标志。</p>
因为JavaScript解释器在处理这种风格的注释时与大家所熟悉的HTML做法不同，为避免发生混淆，最好不要在JavaScript脚本中使用这种风格的注释。建议大家用“//”来注释单行，用“/*”注释多行。2.2.3 变量
在日常生活里，有些东西是固定不变的，有些东西则会发生变化。例如，人的姓名和生日是固定不变的，但心情和年龄却会随着时间变化而变化。人们把那些会发生变化的东西称为变量（variable）。
我的心情会随着我的感受变化而变化。假设我有一个变量mood（意思是“心情”），我可以把此时此刻的心情存放到这个变量中。不管这个变量的值是“happy”还是“sad”，它的名字始终是mood。我可以随时改变这个值。
类似地，假设我现在的年龄是33岁。一年之后，我的年龄就是34岁。我可以使用变量age来存放我的年龄并在生日那天改变这个值。当我现在去查看age变量时，它的值是33；但一年之后，它的值将变成34。
把值存入变量的操作称为赋值（assignment）。我把变量mood赋值为“happy”，把变量age赋值为33。
在JavaScript中你可以这样给这些变量赋值：mood = "happy";age = 33;
一个变量被赋值以后，我们就说该变量包含这个值。变量mood现在包含值“happy”，变量age现在包含值33。我们可以用如下所示的语句把这两个变量的值显示在一个弹出式警告窗口中：alert(mood);alert(age);
图2-1是一个显示mood变量值的例子。图 2-1
图2-2是一个显示age变量值的例子。图 2-2
我们会在本书后面的章节中利用变量做一些很有用的事情，别着急。
请注意，JavaScript允许程序员直接对变量赋值而无需事先声明。这在许多程序设计语言中是不允许的。有很多语言要求在使用任何变量之前必须先对它做出“介绍”，也称为声明（declare）。
在JavaScript脚本中，如果程序员在对某个变量赋值之前未声明，赋值操作将自动声明该变量。虽然JavaScript没有强制要求程序员必须提前声明变量，但提前声明变量是一种良好的编程习惯。下面的语句对变量mood和age做出了声明：var mood;var age;
不必单独声明每个变量，你也可以用一条语句一次声明多个变量：var mood, age;
你甚至可以一石两鸟：把声明变量和对该变量赋值一次完成：var mood = "happy";var age = 33;
甚至还可以像下面这样：var mood = "happy", age = 33;
像上面这样声明和赋值是最有效率的做法，这一条语句的效果相当于下面这些语句的总和：var mood, age;mood = "happy";age = 33;
在JavaScript语言里，变量和其他语法元素的名字都是区分字母大小写的。名字是mood的变量与名字是Mood、MOOD或mOOd的变量没有任何关系，它们不是同一个变量。下面的语句是在对两个不同的变量进行赋值：var mood = "happy";MOOD = "sad";
JavaScript语法不允许变量名中包含空格或标点符号（美元符号“$”例外）。下面这条语句将导致语法错误：var my mood = "happy";
JavaScript变量名允许包含字母、数字、美元符号和下划线（但第一个字符不允许是数字）。为了让比较长的变量名更容易阅读，可以在变量名中的适当位置插入下划线，就像下面这样：var my_mood = "happy";
另一种方式是使用驼峰格式(camel case)，删除中间的空白（下划线），后面的每个新单词改用大写字母开头：var myMood = "happy";
通常驼峰格式是函数名、方法名和对象属性名命名的首选格式。
在上面这条语句中，单词“happy”是JavaScript语言中的一个字面量（literal），也就是可以直接在JavaScript代码中写出来的数据。文本“happy”除了表示它自己以外不表示任何别的东西，正如大力水手Popeye的名言：“它就是它！”与此形成对照的是，单词“var”是一个关键字，my_mood是一个变量名字。2.2.4 数据类型
变量mood的值是一个字符串，变量age的值则是一个数。虽然它们是两种不同类型的数据，但在JavaScript中对这两个变量进行声明和赋值的语法却完全一样。有些其他的语言要求在声明变量的同时还必须同时声明变量的数据类型，这种做法称为类型声明（typing）。
必须明确类型声明的语言称为强类型（strongly typed）语言。JavaScript不需要进行类型声明，因此它是一种弱类型（weakly typed）语言。这意味着程序员可以在任何阶段改变变量的数据类型。
以下语句在强类型语言中是非法的，但在JavaScript里却完全没有问题：var age = "thirty three";age = 33;
JavaScript并不在意变量age的值是一个字符串还是一个数。
接下来，我们一起来复习一下JavaScript中最重要的几种数据类型。01. 字符串字符串由零个或多个字符构成。字符包括（但不限于）字母、
数字、标点符号和空格。字符串必须包在引号里，单引号或双引
号都可以。下面这两条语句含义完全相同：
var mood = 'happy';
var mood = "happy";你可以随意选用引号，但最好是根据字符串所包含的字符来
选择。如果字符串包含双引号，就把整个字符串放在单引号里；
如果字符串包含单引号，就把整个字符串放在双引号里：
var mood = "don't ask";如果想在上面这条语句中使用单引号，就必须保证字母“n”和“t”之间的单引号能被当成这个字符串的一部分。这种
情况下这个单引号需要被看做一个普通字符，而不是这个字符串
的结束标志。这种情况我们需要对这个字符进行转义（escaping）。在JavaScript里用反斜线对字符进行转义：
var mood = 'don\'t ask';类似地，如果想用双引号来包住一个本身就包含双引号的字
符串，就必须用反斜线对字符串中的双引号进行转义：
var height = "about 5'10\" tall";实际上这些反斜线并不是字符串的一部分。你可以自己去验
证一下：把下面这段代码添加到你的example.js文件中，然后重
新加载test.html文件：
var height = "about 5'10\" tall";
alert(height);图2-3是用反斜线对有关字符转义的一个屏幕输出示例。图 2-3我个人比较喜欢用双引号来包住字符串。作为一个好的编程
习惯，不管选择用双引号还是单引号，请在整个脚本中保持一致。
如果在同一个脚本中一会儿使用双引号，一会儿又使用单引号，
代码很快就会变得难以阅读和理解。02. 数值如果想给一个变量赋一个数值，不用限定它必须是一个整
数。JavaScript允许使用带小数点的数值，并且允许任意位小数，
这样的数称为浮点数（floating-point number）：
var age = 33.25;也可以使用负数。在有关数值的前面加上一个减号（-）表
示它是一个负数：
var temperature = -20;JavaScript也支持负数浮点数：
var temperature = -20.33333333以上是数值数据类型的例子。03. 布尔值另一种重要的数据类型是布尔（boolean）类型。布尔数据只有两个可选值——true或false。假设需要这样一
个变量：如果我正在睡觉，这个变量将存储一个值；如果我没有
睡觉，这个变量将存储另一个值。可以用字符串数据类型把变量
赋值为“sleeping”或“not sleeping”，但使用布尔数据类型显
然是一个更好的选择：
var sleeping = true;从某种意义上讲，为计算机设计程序就是与布尔值打交道。
作为最基本的事实，所有的电子电路只能识别和使用布尔数据：
电路中有电流或是没有电流。不管是使用术语true和 false、yes
和 no或者1和0，重要的是只能取两种可取值中的一种。布尔值不是字符串，千万不要把布尔值用引号括起来。布尔
值false与字符串值"false"是两码事！下面这条语句将把变量married设置为布尔值true：
var married = true;下面这条语句把变量married设置为字符串”true”：
var married = "true";2.2.5 数组
字符串、数值和布尔值都是标量（scalar）。如果某个变量是标量，它在任意时刻就只能有一个值。如果想用一个变量来存储一组值，就需要使用数组（array）。
数组是指用一个变量表示一个值的集合，集合中的每个值都是这个数组的一个元素（element）。例如，我们可以用名为beatles的变量来保存Beatles乐队全体四位成员的姓名。
在JavaScript中，数组可以用关键字Array声明。声明数组的同时还可以指定数组初始元素个数，也就是这个数组的长度（length）：var beatles = Array(4);
有时，我们无法预知某个数组有多少个元素。没有关系，JavaScript根本不要求在声明数组时必须给出元素个数，我们完全可以在声明数组时不给出元素个数：var beatles = Array();
向数组中添加元素的操作称为填充（populating）。在填充数组时，不仅需要给出新元素的值，还需要给出新元素在数组中的存放位置，这个位置就是这个元素的下标（index）。数组里一个元素一个下标。下标必须用方括号括起来：array[index] = element;
现在来填充刚才声明的beatles数组，我们按照Beatles乐队成员的传统顺序（即John、Paul、George和Ringo）进行填充。第一个：beatles[0] = "John";
用0而不是1作为第一个下标多少会让人感到有些不习惯，这是JavaScript世界里的一条规则，所以我们只能这么做。人们很容易忘记这一点，很多程序员新手在刚接触数组时经常在这个问题上犯错误。
下面是声明和填充beatles数组的全过程：var beatles = Array(4);beatles[0] = "John";beatles[1] = "Paul";beatles[2] = "George";beatles[3] = "Ringo";
我们现在可以在脚本中通过下标值“2”（beatles[2]）来获取元素“George”了。请注意，beatles数组的长度是4，但它最后一个元素的下标却是3。因为数组下标是从0开始计数的，你或许需要一些时间才能习惯这一事实。
像上面这样填充数组未免有些麻烦。有一种相对简单的方式：在声明数组的同时对它进行填充。这种方式要求用逗号把各个元素隔开：var beatles = Array( "John", "Paul", "George", "Ringo" );
上面这条语句会为每个元素自动分配一个下标：第一个下标是0，第二个是1，依次类推。因此，beatles[2]仍将对应于取值为“George”的元素。
我们甚至用不着明确地表明我们是在创建数组。事实上，只需用一对方括号把各个元素的初始值括起来就可以了：var beatles = [ "John", "Paul", "George", "Ringo" ];
数组元素不必非得是字符串。可以把一些布尔值存入一个数组，还可以把一组数值存入一个数组：var years = [ 1940, 1941, 1942, 1943 ];
甚至可以把这3种数据类型混在一起存入一个数组：var lennon = [ "John", 1940, false ];
数组元素还可以是变量：var name = "John";beatles[0] = name;
这将把beatles数组的第一个元素赋值为“John”。
数组元素的值还可以是另一个数组的元素。下面两条语句将把beatles数组的第二个元素赋值为“Paul”：var names = [ "Ringo", "John", "George", "Paul" ];beatles[1] = names[3];
事实上，数组还可以包含其他的数组！数组中的任何一个元素都可以把一个数组作为它的值：var lennon = [ "John", 1940, false ];
试读结束[说明：试读内容隐藏了图片]