HTML中的JavaScript 一

在前面几章中，学习了JavaScript的核心ECMAScript以及该语言工作方式的基础知识。从本章开始，重点将转移到如何在Web浏览器中使用JavaScript。

自Netscape Navigator 2.0初次引入JavaScript以来，Web浏览器已有了长足的发展。今天的浏览器不再只能处理传统的HTML文件，它们能处理各种格式的文件。具有讽刺意味的是，这些文件中的大多数都采用JavaScript作为动态改变客户端内容的方式。这一章探讨如何把JavaScript嵌入HTML及其他语言，并介绍了BOM（浏览器对象模型）的一些基本概念。

5.1 HTML中的JavaScript

当然，第一个利用嵌入式JavaScript的语言还是HTML，因此首先讨论的自然是如何在HTML中使用JavaScript。HTML中嵌入JavaScript是从引入用于JavaScript的标签和为HTML的一些通用部分增加了新特性开始的。

5.1.1 <script/>标签

HTML页面中包含JavaScript使用<script/>标签实现的。该标签通常放置在页面的<head/>标签中，最初定义的<script/>标签具有一个或两个特性，language特性声明要使用的脚本语言，src特性是可选的，声明要加入页面的外部JavaScript文件。language特性一般被设置为JavaScript，不过也可用它声明JavaScript的确切版本，如JavaScript 1.3（如果省略language特性，浏览器默认使用最新的JavaScript版本）。

尽管<script/>最初是为JavaScript设计的，但可以用于声明任意多种不同的客户端脚本语言，language特性用于声明使用的代码的类型。例如，可把language特性设置为VBScript，使用IE的VBScript语言（只适用于Windows）。

如果未声明src特性，在<script/>中即可以任意形式编写JavaScript代码。如声明了src特性，那么<script/>中的代码可能就是无效的（由浏览器决定）。例如：

这个例子中既有内嵌的JavaScript代码，又有对外部JavaScript文件的链接。使用src特性，即可像引用图像和样式表一样引用JavaScript文件。

虽然大多数浏览器并未要求，但根据规约，外部JavaScript文件的扩展名应为.js（这样可以使用JSP、PHP或其他服务器端的脚本语言动态生成JavaScript代码）。

5.1.2 外部文件格式

外部JavaScript语言的格式非常简单。事实上，它们只包含JavaScript代码的纯文本文件。在外部文件中不需要<script/>标签，引用文件的<script/>标签出现在HTML页中。这使得外部JavaScript文件看起来很像其他程序设计语言的源代码文件。

例如，考虑下面的内嵌代码：

要把函数sayHi()放在外部文件external.js中，需要复制函数文本自身（如图5-1所示）。

图 5-1

然后可更新HTML代码，加入这个外部文件：

对于JavaScript源文件中可加入哪些代码并无规定，这意味着可以给JavaScript文件加入任意多个类定义、函数，等等。

5.1.3 内嵌代码和外部文件

何时应该采用内嵌代码，何时采用外部文件呢？虽然关于这一点并无确定而且简洁的规则可循，不过一般认为，大量的JavaScript代码不应内嵌在HTML文件中，原因如下：

q 全性——只要查看页面的源代码，任何人都可确切地知道其中的代码做了什么。如果怀有恶意的开发者查看了源代码，就可能发现安全漏洞，危及整个站点或应用程序的安全。此外，在外部文件中还可加入版权和其他知识产权通告，而不打断页面流。

q 代码维护——如果JavaScript代码散布于多个页面，那么代码维护将变成一场恶梦。把所有JavaScript文件放在一个目录中要容易得多，这样在发生JavaScript错误时，就不会对放置代码的位置有任何疑问。

q 缓存——浏览器会根据特定的设置缓存所有外部链接的JavaScript文件，这意味着如果两个页面使用同一个文件，只需要下载该文件一次。这将加快下载速度。把同一段代码放在多个页面中，不止浪费，还增加了页面大小，从而增加下载时间。

5.1.4 标签放置

一般说来，所有代码和函数的定义都在HTML页的<head/>标签中，这样在显示页面主体后，代码就被完全装载进浏览器，可供使用了。唯一该出现在<body/>标签中的是调用前面定义的函数的代码。

<script/>放在<body/>内时，只要脚本所属的那部分页面被载入浏览器，脚本就会被执行。这样在载入整个页面之前，也可执行JavaScript代码。例如：

在这段代码中，方法sayHi()在页面显示所有文本前调用，这意味着警告消息将在文本"This is the first text the user will see."显示前弹出。建议不采用这种在页面的<body/>标签内调用JavaScript函数的方法，应该尽量避免它。相反的，建议在页面主体中只使用事件处理函数（event handler），例如：

这里，使用<input/>标签创建一个按钮，点击它时调用sayHi()方法。onclick特性声明一个事件处理函数，即响应特定事件的代码。第9章将详细讨论事件和事件处理函数。

注意，开始载入页面时，JavaScript就开始运行了，因此有可能调用尚未存在的函数。在前面的例子中，把原来的<script/>标签放在函数调用后就会引发错误：

这个例子将引发错误，因为在定义sayHi()之前就调用了它。由于JavaScript是从上到下载入的，所以在遇到第二个<script/>标签前，函数sayHi()还不存在。注意这种问题，此外，如前所述，使用事件和事件处理函数调用JavaScript函数。

5.1.5 隐藏还是不隐藏

初次引入JavaScript时，只有一种浏览器支持它，因此大家开始关心，不支持JavaScript的浏览器如何处理<script/>标签及其中包含的代码。最后，设计了一种用于对旧的浏览器隐藏JavaScript代码（这是一个短语，在当今因特网上的许多Web站点的源代码中都能找到它）的格式。下面的代码在内嵌代码周围加入HTML注释，这样其他浏览器就不会在屏幕上显示这段代码。

第一行紧接起始标签<script>开始一条HTML注释。这样做是有效的，因为浏览器仍然把该行余下的部分看成HTML的一部分，JavaScript代码从下一行开始。接下来的是常规的函数定义。第2行到最后一行是最有趣的部分，因为它以单行JavaScript注释标记（两个前斜线）开始，后面是HTML注释的结尾标记（-->）。这一行仍被看作JavaScript代码，所以单行注释标记是避免语法错所必需的。不过，旧的浏览器只承认HMLT注释的结束标记，因此，将忽略所有JavaScript代码。但是，支持JavaScript的浏览器只忽略该行，继续执行</script>标签。

尽管这种隐藏代码的方法在Web早期非常流行，今天却不再是必需的。目前，大多数Web浏览器都支持JavaScript，而不支持JavaScript的浏览器通常足够聪明，自己就能够忽略JavaScript代码。

5.1.6 <noscript/>标签

不支持JavaScript的浏览器另外令人关注的是如何提供替代的内容。隐藏代码只是解决方法的一部分，开发者还需要一种方法，声明在JavaScript不能用时应该显示的内容。解决方法是采用<noscript/>标签，它可包含任何HTML代码（除<script/>）。支持或启用JavaScript的浏览器会忽略这些HTML代码，不支持或者禁用JavaScript的浏览器则显示<noscript/>的内容。例如：

在这个例子中，<noscript/>标签中有一条消息，告诉用户浏览器不支持JavaScript。第8章解释<noscript/>的实际用法。

5.1.7 XHTML中的改变

近来，随着XHTML（可扩展HTML）标准的出现，<script/>标签也经历了一些改变。该标签不再用language特性，而用type特性声明内嵌代码或要加入的外部文件的mime类型，JavaScript的mime类型是"text/javascript"。例如：

即使许多浏览器不完全支持XHTML，但大多数开发者现在都用type特性，而不用language特性，以提供更好的XHTML支持。省略language特性不会带来任何问题，因为如前所述，所有浏览器都默认<script/>的该属性值为JavaScript。

XHTML的第二个改变是使用CDATA段。XML中的CDATA段用于声明不应被解析为标签的文本（XHTML也是如此），这样就可以使用特殊字符，如小于（<）、大于（>）、和号（&）和双引号（"），而不必使用它们的字符实体。考虑下面的代码：

这个函数相当简单，它比较数字a和b，然后显示消息说明它们的关系。但是，在XHTML中，这段代码是无效的，因为它使用了三个特殊符号，即小于、大于和双引号。要修正这个问题，必须分别用这三个字符的XML实体&lt;、&gt;和&quot;替换它们：

这段代码存在两个问题。首先，开发者不习惯用XML实体编写代码。这使代码很难读懂。其次，在JavaScript中，这种代码实际上将视为有语法错，因为解释程序不知道XML实体的意思。用CDATA段即可以以常规形式（即易读的语法）编写JavaScript代码。正式加入CDATA段的方法如下：

虽然这是正式方式，但还要记住，大多数浏览器都不完全支持XHTML，这就带来主要问题，即这在JavaScript中是个语法错误，因为大多数浏览器还不认识CDATA段。

当前使用的解决方案模仿了“对旧浏览器隐藏”代码的方法。使用单行的JavaScript注释，可在不影响代码语法的情况下嵌入CDATA段：

现在，这段代码在不支持XHTML的浏览器中也可运行。

与type特性一样，随着开发者为浏览器中的XHTML准备更好的支持，CDATA的这种用法也越来越流行。但是，为避免CDATA的问题，最好还是用外部文件引入JavaScript代码。