第2章在HTML中使用JavaScript2.1 <script>元素 HTML 4.01 为<script>定义了下

2.1 <script>元素

HTML 4.01 为<script>定义了下列 6 个属性。

 async:可选。表示立即下载脚本，但不妨碍页面其他操作。该属性只对引入外部脚本文件时有效。
 defer:可选。表示脚本可以延迟到文档完全被解析和显示之后再执行。该属性只对引入外部脚本文件时有效。
 src：可选。表示包含要执行代码的外部文件。
 charset：可选。表示通过 src 属性指定的代码的字符集。
 language：已废弃。
 type：可选。表示编写代码使用的脚本语言的内容类型

使用<script>元素的方式有两种：

直接在页面中嵌入 JavaScript 代码

使用<script>嵌入 JavaScript 代码时，记住不要在代码中的任何地方出现""字符串。因为按照解析嵌入式代码的规则，当浏览器遇到字符串""时，就会认为那是结束的</script>标签。而通过转义字符“ /”可以解决这个问题，例如：

<script type="text/javascript">
    function sayScript(){
        alert("<\/script>");
    }
</script>

引入外部 JavaScript文件。

当引入外部JavaScript 文件，那么src 属性就是必需的。例如：

<script type="text/javascript" src="example.js" />

需要注意的是，带有 src 属性的<script>元素不应该在其<script>和</script>标签之间再包含额外的 JavaScript 代码。如果包含了嵌入的代码，则只会下载并执行外部脚本文件，嵌入的代码会被忽略。

无论如何包含代码，只要不存在 defer 和 async 属性，浏览器都会按照<script>元素在页面中出现的先后顺序对它们依次进行解析。换句话说，在第一个<script>元素包含的代码解析完成后，第二个<script>包含的代码才会被解析，然后才是第三个、第四个……

标签的位置

按照传统的做法，所有<script>元素都应该放在页面的<head>元素中,这种做法的目的是把所有的外部文件的引用放在相同的地方。但是这样做意味着必须等到全部Javascript代码都被下载、解析和执行完成以后，才能开始呈现页面内容。为了避免这个问题，现代 Web 应用程序一般都把全部 JavaScript 引用放在<body>元素中页面内容的后面，如下例所示：

<!DOCTYPE html>
<html>
    <head>
        <title>Example HTML Page</title>
    </head>
    <body>
    <!-- 这里放内容 -->
    <script type="text/javascript" src="example1.js"></script>
    <script type="text/javascript" src="example2.js"></script>
    </body>
</html>

HTML 4.01 为<script>标签定义了 defer 属性。所以我们可以这样:

<!DOCTYPE html>
<html>
    <head>
        <title>Example HTML Page</title>
        <script type="text/javascript" defer="defer" src="example1.js"></script>
        <script type="text/javascript" defer="defer" src="example2.js"></script>
    </head>
    <body>
    <!-- 这里放内容 -->
    </body>
</html>

上例中，HTML5 规范要求defer属性保证，example1.js按照引入顺序优于example2.js执行，但是在现实当中各大厂商未必严格执行，所以最好只包含一个带有defer属性的<script>引入。

HTML5 为<script>元素定义了 async 属性

同样与 defer 类似，async 只适用于外部脚本文件，并告诉浏览器立即下载文件。但与 defer不同的是，标记为 async 的脚本并不保证按照指定它们的先后顺序执行。

第2章 在HTML中使用JavaScript