1、第 1 章 JavaScript 简史本章内容JavaScript 的起源浏览器之争DOM 的演变史对网页设计人员来说，这是一个充满着挑战和机遇的时代。近几年来，网页设计工作已经从一种混乱无序和即兴发挥的状态，逐渐发展为一种有着成熟的设计原则可供遵循的流水线作业。有越来越多的网页设计人员开始采用一种标准化的思路来建立网站，而实现这一思路和方法的具体技术则称为“Web 标准”。当网页设计人员谈论起与 Web 标准有关的话题时，XHTML（可扩展的超文本标记语言）和 CSS（层叠样式表）通常占据着核心地位。不过，由 W3C（万维网联盟）批准并由所有与标准相兼容的 Web 浏览器支持的第三方技术称为
2、 DOM（文档对象模型）。我们可以利用 DOM 去改善文档的可交互性，就像我们可以利用 CSS 给文档添加各种样式一样。在开始学习 DOM 之前，我们先回顾一下使网页具备可交互性的程序设计语言。这种语言就是 JavaScript，它已经诞生相当长的时间了。1.1 JavaScript 的起源JavaScript 是 Netscape 公司与 Sun 公司合作开发的。在 JavaScript 出现之前，Web 浏览器不过是一种能够显示超文本文档的软件的基本部分。而在 JavaScript 出现之后，网页的内容不再局限于枯燥的文本，它们的可交互性得到了显著的改善。JavaScript 的第一个版本
3、，即 JavaScript 1.0 版本，出现在 1995 年推出的 Netscape Navigator 2 浏览器中。在 JavaScript 1.0 发布时，Netscape Navigator 主宰着浏览器市场，微软的 IE 浏览器则扮演着追赶者的角色。微软在推出 IE 3 的时候发布了自己的 VBScript 语言并以 JScript 为名发布了 JavaScript 的一个版本，以此很快跟上了 Netscape 的步伐。面对微软公司的竞争，Netscape 和 Sun 公司联合 ECMA（欧洲计算机制造商协会）对 JavaScript 语言进行了标准化。其结果就是 ECMAScri
4、pt 语言，这使得同一种语言又多了一个名字。虽说 ECMAScript 这个名字没有流行开来，但人们现在谈论的 JavaScript 实际上就是 ECMAScript。到了 1996 年，JavaScript、ECMAScript、JScript随便你们怎么称呼它，已经站稳了脚跟。Netscape 和微软公司在它们各自的第 3 版浏览器中都不同程度地提供了对 JavaScript 1.1 语言的支持。这里必须指出的是，JavaScript 与 Sun 公司开发的 Java 程序语言没有任何联系。人们最初给 JavaScript 起的名字是 LiveScript，后来选择“JavaScript”
5、作为其正式名称的原因，大概是想让它听起来有系出名门的感觉，但令人遗憾的是，这一选择反而更容易让人们把这两种语言混为一谈，而这种混淆又因为各种 Web 浏览器确实具备这样或那样的 Java 客户端支持功能的事实被进一步放大和加剧。事实上，虽说 Java 在理论上几乎可以部署在任何环境中，但 JavaScript 却只局限于 Web 浏览器。JavaScript 是一种脚本语言，JavaScript 脚本通常只能通过 Web 浏览器去完成某种操作而不是像普通意义上的程序那样可以独立运行。因为需要由 Web浏览器进行解释和执行，所以 JavaScript 脚本不像 Java 和 C+等编译型程序设计
6、语言那样用途广泛。不过，这种相对的简单性也正是 JavaScript 的长处：因为比较容易学习和掌握，所以 JavaScript 很受那些本身不是程序员，但希望能够通过简单的剪贴操作把脚本嵌入他们的现有网页中的普通用户们的欢迎。JavaScript 还向程序员提供了一种操控 Web 浏览器的手段。例如，JavaScript 语言可以用来调整 Web 浏览器窗口的高度、宽度和屏显位置等属性。以这种办法给出 Web 浏览器本身的属性可以看做是 BOM（浏览器对象模型）。JavaScript 的早期版本还提供了一种初级的 DOM（文档对象模型）。什么是 DOM简单地说，DOM 是一套对文档的内容进行
7、抽象和概念化的方法。在现实世界里，人们对笔者称之为“世界对象模型”里的许多事物都有一个共同的理解。例如，当用“汽车”、“房子”和“树”等名词来称呼日常生活环境里的事物时，我们几乎可以百分之百地肯定对方知道我们说的是什么，而这是因为人们对这些名词所代表的具体事物都有着同样的认识。于是，当对别人说“汽车停在了车库里”时，可以相当有把握地假设他们不会把这句话理解为“小鸟关在了壁橱里”。我们的“世界对象模型”不仅可以用来描述客观存在的事物，还可以用来描述各种抽象概念。例如，假设有个人向我问路，而我给出的答案是“左边第三栋房子”。这个答案有没有意义将取决于那个人能否理解“第三”和“左边”等抽象概念的含义
8、。如果他不会数数或者分不清左右，则不管他是否理解这几个概念，我的回答对他都不会有任何帮助。在现实世界里，正是因为大家对抽象的世界模型有着基本的共识，人们才能用非常简单的话把比较复杂的含义表达出来并得到对方的理解。具体到这里的例子，我可以相当有把握地断定，那位老兄以及其他人对“第三”和“左边”等抽象概念的理解和我对这些概念的理解是完全一样的。这个道理对网页也同样适用。JavaScript 的早期版本向程序员提供了对 Web 文档的某些实际内容（主要是图像和表单）进行查询和操控的手段。因为“图像”和“表单”等名词是程序员都明白的概念，JavaScript 语言也预先定义了“images”和“for
9、ms”等关键字，我们才能像下面这样在 JavaScript 脚本里引用“文档中的第三个图像”或“文档中名为details的表单”：现在的人们通常把这种试验性质的初级 DOM 称为“第 0 级 DOM”（DOM Level 0）。在还未形成统一标准的初期阶段，“第 0 级 DOM”的常见用法包括对图像进行链接和显示以及在客户端进行某种形式的数据合法性验证。但从 Netscape和微软公司各自推出的第四代浏览器产品开始，DOM 受到了越来越多的开发人员和爱好者的关注。1.2 浏览器之争Netscape Navigator 4（NN 4）浏览器发布于 1997 年 6 月，IE 4 浏览器发布于同年
10、的 10 月。这两种浏览器都对它们的早期版本进行了许多改进，使用得到极大扩展的 DOM，可以通过 JavaScript 完成的功能大大增加，而网页设计人员也开始熟悉一个新的名词：DHTML。1.2.1 DHTMLDHTML 是“dynamic HTML”（动态 HTML）的简称。严格地说，DHTML 并不是一项单一的新技术，而是 HTML、CSS 和 JavaScript 这三种技术相结合的产物。DHTML 背后的含义是：利用 HTML 把网页标记为各种元素；利用 CSS 设计各有关元素的排版样式并确定它们在窗口中的显示位置；利用 JavaScript 实时地操控和改变各有关样式。DHTML
11、指的是上述三项技术的相互结合。利用 DHTML，复杂的动画效果一下子变得非常容易实现。例如，可以先用 HTML 标记一个如下所示的页面元素：然后，可以用 CSS 为这个页面元素定义如下所示的位置样式：接下来，只需利用 JavaScript 改变 myelement 元素的 left 和 top 样式，就可以让它在页面上随意移动。不过，这种简单性只停留在理论上因为 NN 4 和 IE 4 浏览器使用的是不同的且不兼容的 DOM，所以要想实际获得这种效果还需要程序员做很多工作。换句话说，虽然浏览器制造商的目标是一样的，但他们在解决 DOM 问题时采用的办法却完全不同。1.2.2 浏览器之间的冲突N
12、etscape 公司的 DOM 使用了其专有的元素，这些元素称为层（layer）。这些层都有唯一的 ID，JavaScript 代码需要像下面这样使用它们：而在微软公司的 DOM 中这个元素必须像下面这样使用：这两种 DOM 在细节方面的差异并不止于这一点。假设你想找出 myelement元素的 left 位置并把它赋值给变量 xpos，那么在 Netscape Navigator 4 浏览器里必须这样做：而在 IE 4 浏览器中，你需要使用如下所示的语句才能完成同样的工作：这就导致了一种很可笑的局面：程序员在编写 DOM 脚本代码时必须知道它们将运行在哪种浏览器环境里。在实际工作中，许多脚本
13、都不得不编写两次，一次为 NN 4 浏览器，另一次为 IE 4 浏览器。同时，为了确保能够正确地向不同的浏览器提供与之相应的脚本，程序员还必须编写一些代码去检测在客户端运行的浏览器到底是哪一种。DHTML 打开了一扇通往新世界的大门，但进入这扇大门的人们却发现这条路并不好走。因此，没多久，DHTML 就从一个大热门变成了一个人们不愿提起的名词，而对这种技术的评价也很快地变成了“宣传噱头”和“难以实现”。1.3 制定标准就在浏览器的制造商们为了压倒竞争对手而以 DOM 为武器展开一场营销大战的同时，W3C 不事声张地推出了一个标准化的 DOM。令人欣慰的是，Netscape、微软和其他一些浏览器
14、制造商们还能抛开彼此的敌意而与 W3C 携手制定新的标准，并于 1998 年 10 月完成了“第 1 级 DOM”（DOM Level 1）。回到刚才的例子，我们一起看看新的标准化 DOM 是如何解决同样的问题的。我们已经用标签定义了一个 ID 为 myelement 的页面元素，现在需要找出它的 left 位置并把这个值保存到变量 xpos 中。下面是需要用到的语法：乍看起来，这与刚才那两种非标准化的专有 DOM 相比并没有明显的改进。但事实上，标准化的 DOM 有着非常远大的抱负。浏览器制造商们感兴趣的只不过是一些通过 JavaScript 操控网页的具体办法，但 W3C 推出的标准化 D
15、OM 却可以让任何一种程序设计语言对使用任何一种标记语言编写出来的任何一份文档进行操控。1.3.1 浏览器以外的考虑DOM 是一种 API（应用编程接口）。简单地说，API 就是一组已经得到有关各方共同认可的基本约定。在现实世界中，相当于 API 的例子包括（但不限于）：摩尔斯码国际时区化学元素周期表以上这些都是不同学科领域中的标准，它们使得人们能够更方便地进行交流与合作。如果没有这样的标准，事情往往会演变成为一场灾难。别忘了，英制度量衡与公制度量衡之间的差异至少导致过一次火星探测任务的失败。在软件编程领域中，虽然存在着多种不同的语言，但很多任务却是相同或相似的。这也正是人们需要 API 的原
16、因。一旦掌握了某个标准，就可以把它应用在许多不同的环境中。虽然有关的语法会因为使用的程序设计语言而有所变化，但这些约定却总是保持不变的。因此，在学完这本关于如何通过 JavaScript 使用 DOM 的书之后，你们获得的关于 DOM 的新知识对你们今后的工作例如，需要使用诸如 PHP 或 Python之类的程序设计语言去解析一份 XML 文档的时候，也会有很大的帮助。W3C 对 DOM 的定义是：“一个与系统平台和编程语言无关的接口，程序和脚本可以通过这个接口动态地对文档的内容、结构和样式进行访问和修改。”W3C 推出的标准化 DOM，在独立性和适用范围等诸多方面，都远远超出了各自为战的浏览
17、器制造商们推出的各种专有 DOM。1.3.2 浏览器之争的结局我们知道，浏览器市场份额大战的赢家是微软公司，但具有讽刺意味的是，专有的 DOM 和 HTML 标记对这个最终结果并无影响。IE 浏览器之所以能击败其他对手，其主要原因不过是所有运行着 Windows 操作系统的个人电脑都预装了它而已。受浏览器之争影响最重的人群是那些网站和网页设计人员。需要同时支持多种浏览器的软件开发工作，曾经是程序员们的噩梦。除了刚才提到的那些在JavaScript 实现方面的差异之外，Netscape Navigator 和 IE 这两种浏览器在对 CSS 的支持方面也有许多非常不同的地方。有不少程序员都把编写
18、那些可以同时工作在这两种浏览器环境下的样式表和脚本的工作视为一种黑色艺术。为了打破浏览器制造商们筑起的专利壁垒，一群志同道合的程序员建立了名为 Web 标准计划（简称 WaSP，http:/webstandards.org/）的小组。WaSP 小组采取的第一个行动就是，鼓励浏览器制造商们接受 W3C 制定和推荐的各项标准也就是在浏览器制造商们的帮助下得以起草和完善的那些标准。或许是因为来自WaSP 小组的压力，又或许是因为企业的内部决策，浏览器制造商后来推出的下一代浏览器产品对 Web 标准的支持得到了极大的改善。1.3.3 新的开始微软公司在 IE 5 浏览器中内建了对 W3C 制定的标准化
19、 DOM 的支持，但同时继续支持其专有的 Microsoft DOM。 Netscape 公司采取的是一种更为坚决果断的做法，它们发布了一种与 NN 4无任何共同点的浏览器：Netscape Navigator 6（NN 6），该浏览器干脆跳过了主版本号并使用一个与以前完全不同的呈现引擎，新引擎对 CSS 提供了更多更好的支持。NN 6 也支持标准化的 DOM，但不再向后兼容早期的 Netscape DOM。之后，Netscape 和微软公司都发布过几个新版浏览器产品，而每个新版本都在老版本的基础上通过增加对各项 Web 标准的支持来不断完善自己。但令人遗憾的是，微软公司的浏览器开发工作在它们
20、推出 IE 6 之后停顿了下来，这使得 IE 6 中的 CSS 实现还存在一些问题没能得到彻底解决。尽管如此，它对“第 1 级 DOM”的支持还是非常坚定的。与此同时，其他一些浏览器也开始崭露头角。Apple 公司在 2003 年发布了Web 浏览器 Safari，它对 DOM 标准的支持完全没有问题。Firefox、Mozilla 和Camino 等浏览器对 DOM 的支持也非常完善，它们都采用了与 Nescape 6 和 Nescape 7 完全一样的开源呈现引擎。Opera 和 Konquerer 浏览器也提供了对 DOM 的良好支持。目前使用的 95%以上的浏览器都具备对 DOM 的内
21、建支持。发生在 20 世纪 90年代后期的浏览器大战已经离我们越来越遥远。虽说还没有一种浏览器能够提供对 W3C DOM 的完美支持，但现代的浏览器都至少实现了 W3C 相关标准中 95%的规范，而这意味着在编写 JavaScript 代码时几乎不需要考虑它们将运行在何种浏览器环境下了。虽然 IE 浏览器的开发工作停顿了下来，但网页设计人员的日子已经不像过去那么困难了。过去，程序员在编写 JavaScript 脚本时往往不得不增加一些代码去探测在客户端运行的是哪种浏览器；现在，程序员只需编写一次代码就几乎可以把它们应用在所有的场合了。只要遵守 DOM 标准，程序员就可以相当有把握地确信，自己编
22、写的脚本几乎在所有的环境下都可以正常工作。1.4 小结在前面对 JavaScript 发展简史的介绍中，笔者特别提到，不同的浏览器采用了不同的办法来完成同样的任务。这一无法回避的事实不仅主宰着如何编写JavaScript 脚本代码，还影响着 JavaScript 教科书的编写方式。JavaScript 教科书的作者往往会提供大量的示例代码以演示这种脚本语言的使用方法，而完成同一项任务的示例脚本往往需要为不同的浏览器编写两次或更多次。就像你们在绝大多数网站上查到的代码一样，在绝大多数 JavaScript 教科书的示例脚本中往往充斥着大量的浏览器检测代码和分支调用结构。类似地，在 JavaScr
23、ipt 技术参考文献中，函数和方法的清单也往往是一式多份至少需要标明哪种浏览器支持哪些函数和方法。如今这种情况已经有所改变。多亏了标准化的 DOM，不同的浏览器在完成同样的任务时采用的细节做法已经非常一致了。因此，在本书中，当演示如何使用 JavaScript 和 DOM 完成某项任务时，将不再需要撇开主题去探讨如何对付不同的浏览器。如果无特殊的必要，本书将尽量避免涉及任何一种特定的浏览器。此外，我们在本书后面的内容中将不再使用“DHTML”这个术语，因为我们认为这个术语与其说是一个技术性词汇，不如说是一个市场营销噱头。首先，它听起来很像是 HTML 或 XHTML 语言的另一种扩展，因而很容
24、易造成误解或混淆；其次，这个术语容易勾起一些痛苦的回忆如果你向 20 世纪 90 年代后期的程序员们提起“DHTML”，你将很难让他们相信它现在已经变成了一种简单、易用的标准化技术。DHTML 是 HTML/XHTML、CSS 和 JavaScript 相结合的产物，但把这些东西真正凝聚在一起的是 DOM。如果真的需要有个词汇来描述这一过程的话，我们就应该使用一个更精确的词汇。用 DHTML 来称呼与浏览器有关的编程工作并不是不可以，但用它来描述基于有关标准的代码编写工作就不那么恰当了。在探讨如何使用 W3C DOM 来处理文档和样式表时，我们认为“DOM 脚本程序设计”是一种更精确的说法。D
25、HTML 只适用于 Web 文档，“DOM 脚本程序设计”则涵盖了使用任何一种支持 DOM API 的程序设计语言去处理任何一种标记文档的所有情况。具体到 Web文档，JavaScript 语言的特点使它成为了 DOM 脚本程序设计的最佳选择。在正式介绍 DOM 脚本程序设计技巧之前，我们将在下一章先向大家简要地介绍一下 JavaScript 的语法。第 2 章 JavaScript 语法本章内容语句变量和数组操作符条件语句和循环语句函数与对象本章将对 JavaScript 语法中最重要的一些概念进行简要的介绍。2.1 准备工作编写 JavaScript 脚本不需要任何特殊的软件，一个普通的文
26、本编辑器和一个 Web 浏览器就足够了。用 JavaScript 编写的代码必须嵌在一份 HTML/XHTML 文档中才能得以执行。这可以通过两种办法做到。第一种办法是将 JavaScript 代码插入文档部分的标签间，如下所示：更好的办法是先把 JavaScript 代码存入一个独立的文件建议把.js 作为这种文件的扩展名，再利用标签的 src 属性指向该文件，如下所示：如果有兴趣试用一下本章中的示例，可以用文本编辑器先创建两个文件。首先，创建一个简单的 HTML 或 XHTML 文档框架，这个文件可以命名为诸如 test.html 之类的名称。这里的要点是，在这份文档的部分包含一个标签，该
27、标签的 src 属性设置为用文本编辑器将要创建的第二个文件的名字，比如 example.js。test.html 文件应该包含如下所示的内容：可以把本章中的任何一个示例拷贝到 example.js 文件中。虽说那些示例没有什么特别令人激动的地方，但它们可以把有关的语法演示得明明白白。在本书后面的章节里，将演示如何使用 JavaScript 改变文档的行为和内容。但就这一章的示例脚本而言，我们将只使用一个简单的对话框来显示消息。如果改变了 example.js 文件的内容，只需在 Web 浏览器中重新加载 test.html 文档即可查看到其执行效果。Web 浏览器将立刻以解释方式执行 Java
28、Script 代码。程序设计语言分为解释型和编译型两大类。Java 或 C+等语言需要一个编译器（compiler）。编译器是一种能够把用 Java 等高级语言编写出来的源代码翻译为直接在计算机上执行的二进制可执行文件的程序。解释型程序设计语言不需要编译器它们仅需要解释器。对于 JavaScript 语言，在 WWW 环境下，Web 浏览器将负责完成有关的解释和执行工作。浏览器中的 JavaScript 解释器将直接读入源代码并加以执行。如果没有解释器，JavaScript 代码将无法得到执行。如果用编译型程序设计语言编写的代码包含着错误，那些错误在代码编译阶段就会被发现并报告。对于解释型程序
29、设计语言，代码中的错误只有等到解释器实际执行到有关代码时才会被发现并报告。与解释型程序设计语言相比，编译型程序设计语言往往速度更快，可移植性也更好，但它们的学习曲线往往相当陡峭。JavaScript 的优点之一是比较容易学习和掌握，但千万不要因此而小看 JavaScript 能力：它能够完成许多相当复杂的编程任务。不过，本章将只介绍它的最基本的语法和用途。2.2 语法英语是一种解释型的语言。在阅读和处理别人用英语写出来的文字时，阅读者本人就相当于一个英语解释器。只要作者遵守了英语的语法规则，他想表达的意思就可以被阅读者正确地解读出来。语法（syntax）的广义含义包括语句、单词、标点符号等各个
30、方面，它的狭义含义则特指语句结构方面的各项规则。在接下来的讨论中，我们使用的是“语法”这个词的狭义含义。与那些有文字的人类语言一样，每种程序设计语言都有自己的语法。JavaScript 语言的语法与 Java 和 C+等其他一些程序设计语言的语法非常相似。2.3 语句用 JavaScript 或任何一种其他程序设计语言编写出来的脚本都是由一系列指令构成的，这些指令称为语句（statement）。只有按照正确的语法编写出来的语句才能得到正确的解释。JavaScript 语句与英语中的句子很相似。它们是任何一个脚本的基本构成单位。英语语法要求每个句子必须以一个大写字母开头、以一个句号结尾。Java
31、Script 在这方面的要求不那么严格，程序员只需简单地把各条语句放在不同的行上就可以分隔它们，如下所示：如果你想把多条语句放在同一行上，就必须像下面这样用分号来分隔它们：即使没有把多条语句放在同一行上，但在每条语句的末尾加上一个分号，也是一种良好的编程习惯：这可以让代码更容易阅读。将每条语句单独占用一行的做法可以让你本人或其他程序员更容易追踪 JavaScript 脚本的执行流程。注释JavaScript 解释器并不要求 JavaScript 脚本中的每条语句都必须是可执行的。有时，需要在脚本中写出一些仅供参考或提示性的信息，但并不希望 JavaScript 解释器真的去执行这样的语句。这种
32、语句称为注释（comment）。注释语句非常有用，它们可以让你把编写代码时的一些想法和考虑记载下来供今后参考，还可以帮助你追踪有关代码的执行流程。类似于日常生活中的便条，注释语句可以帮助程序员跟踪和追查在脚本中发生的事情。有多种在 JavaScript 脚本中插入注释的具体做法。例如，如果使用了两个斜杠作为一行的开头，这一行就将被解释为一条注释：如果使用这种记号方式，就必须在每行注释的开头加上两个斜杠。也就是说，像下面这样的做法是有问题的第 2 行将不会被解释为一条注释：如果你想写出两行注释，就必须把它们写成如下所示的样子：一条跨越多行的注释还可以用下面这个方式来给出：在整段注释内容的开头加上
33、一个“/*”，在整段注释内容的末尾加上一个“*/”。下面是一个多行注释的例子：这种记号方式在需要插入跨越多行的大段注释内容时很有用，它可以提高整个脚本的可读性。还可以使用 HTML 风格的注释，但这种做法仅适用于单行注释。换句话说，JavaScript 解释器对“”来结束这种注释语句，如下所示：但 JavaScript 不要求这样做，它会把“-”视为注释内容的一部分。请注意，HTML 允许上面这样的注释跨越多个行，但 JavaScript 要求这种注释的每行都必须在开头加上“2”的值是 false，所以我们将看到如下所示的结果。2.6.1 比较操作符JavaScript 还提供了许多几乎只能用
34、在条件语句里的操作符，其中包括诸如大于（）、小于（=）、小于或等于（=）之类的比较操作符。如果想比较两个值是否相等，可以使用“等于”比较操作符。这个操作符由两个等号构成（=）。别忘了，单个等号（=）是用于完成赋值操作的。如果你在条件语句的某个条件里使用了单个等号，那么只要相应的赋值操作取得成功，那个条件的求值结果就将是 true。下面是一个错误地进行“等于”比较的例子：上面这条语句的错误之处在于，它是把变量 your_mood 赋值给变量 my_mood，而不是在比较它们是否相等。因为这种赋值操作总会成功，所以这个条件语句的结果将永远是 true。下面才是进行“等于”比较的正确做法：这次，条件
35、语句的结果是 false。JavaScript 还提供了一个用来进行“不等于”比较的操作符，它由一个感叹号和一个等号构成（!=）。2.6.2 逻辑操作符JavaScript 允许我们把条件语句里的操作组合在一起。例如，如果想检查某个变量不妨假设这个变量的名字是 num，它的值是不是在 510 之间，我将需要进行两次比较操作：首先，比较这个变量是否大于或等于 5；然后，比较这个变量是否小于或等于 10。这两次比较操作叫作逻辑操作数（operand）。下面是把这两个逻辑操作数组合在一起的具体做法：在这里使用了“逻辑与”操作符，它由两个“&”字符构成（&），它是一个逻辑操作符。逻辑操作符的操作对象是
36、布尔值。每个逻辑操作数返回一个布尔值 true 或者是 false。“逻辑与”操作只有在它的两个操作数都是 true 时才会是 true。“逻辑或”操作符由两个垂直线字符构成（|）。只要它的操作数中有一个是 true，“逻辑或”操作就将是 true。如果它的两个操作数都是 true，“逻辑或”操作也将是 true。只有当它的两个操作数都是 false 时，“逻辑或”操作才会是 false。JavaScript 还提供了一个“逻辑非”操作符，它由一个感叹号（!）单独构成。“逻辑非”操作符只能作用于单个逻辑操作数，其结果是把那个逻辑操作数所返回的布尔值取反：如果那个逻辑操作数所返回的布尔值是 true，“逻辑非操作符将把它取反为 false：请注意，为避免产生歧义，在上面这条语句中把逻辑操作数放在了括号里我想让“逻辑非”操作符作用于括号里的所有内容。我们可以用“逻辑非”操作符把整个条件语句的结果颠倒过来。在下面的例子里，我特意使用了一对括号来确保 “逻辑非”操作符将作用于两个逻辑操作数的组合结果：
