（原）JavaScript高级程序设计(第3版)--学习笔记--02: 在HTML中使用JavaScritp--0001-- <script>元素

 

2.1 <script>元素

向HTML页面中插入JavaScript的主要方法，就是使用<script>元素；

 

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

    * async：可选。表示应该立即下载脚本，但不应妨碍页面中的其他操作，比如下载其他资源或者等待加载其他脚本。只对外部脚本文件有效。

    * charset：可选。表示通过 src 属性指定的代码的字符集。（大多数浏览器会忽略它的值，所以这个属性很少有人用）。

    * defer：可选。表示脚本可以延迟到文档完全被解析和显示之后再执行。只对外部脚本文件有效。

    * language：已废弃。原来用于表示编写代码使用的脚本语言（如JavaScript、JavaScript1.2或VBScript）。

    * src：可选。表示包含要执行代码的外部文件。

    * type：可选。可以看成是language的替代属性；表示编写代码使用的脚本语言的内容类型（也称为MIME类型。）。服务器在传送JavaScript文件时使用的MIME类型通常是application/x-javascript。目前type属性值依旧还是：text/javascript。如果没有这个属性，默认值仍为：text/javascript。

 

使用<script>元素的方式有两种：直接在页面中嵌入 JavaScript 代码和包含外部 JavaScript 文件。

 

在使用<script>元素嵌入 JavaScript代码时，只须为<script>指定 type 属性。然后将 JavaScript 代码直接放在元素内部即可，如下：

<script type = "text/javascript">
    function sayHi() {
        alert( "Hi!" );
    };
</script>

包含在<script>元素内部的 JavaScript 代码将被从上至下一次解释。解释器会解释一个函数的定义，然后将该定义保存在自己的环境当中。在解释器对<script>元素内部的所有代码求值完毕以前，页面中的其余内部都不会被浏览器加载或显示。

 

在使用<script>嵌入 JavaScript 代码时，记住不要在代码中的任何地方出现"</script>"字符串。如下错误：

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

按照解析嵌入代码的规则，当浏览器遇到字符串"</script>"时，就会认为那是结束的</script>标签。从而错误。

通过：转义字符 "\" 可以解决这个问题，例如：

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

这样写代码，浏览器可以接受，因而也就不会导致错误。

 

如果要通过<script>元素来包含外部 JavaScript 文件，那么 src 属性就是必需的。这个属性的值是一个指向外部 JavaScript 文件的链接，例如：

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

在这个例子中，外部文件example.js将被加载到当前页面中。与解析嵌入式 JavaScript 代码一样，在解析外部 JavaScript 文件（包含下载该文件）时，页面的处理也会暂时停止。如果是在 XHTML 文档中，可以省略前面示例代码中结束的</script>标签，例如：

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

但是，不能在 HTML 文档使用这种语法。原因是这种语法不符合 HTML 规范，也得不到某些浏览器（尤其是IE）的正确解析。

 

      按照惯例，外部 JavaScript 文件带有.js扩展名。但这个扩展名不是必须的。因为浏览器不会检查包含 JavaScript 的文件的扩展名。这样一来，使用JSP、PHP或其他服务器端语言动态生成 JavaScript 代码也就成为了可能。
     但是，服务器通常还是需要看扩展名决定为响应应用那种 MIME 类型。如果不使用 .js 扩展名，请确保服务器能返回正确的 MIME 类型。 

 

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

 

另外，通过<script>元素的 src 属性还可以包含来自外部域的 JavaScript 文件。这一点既让<script>元素倍显强大，又让它备受争议。例如：

    <script type="text/javascript" src=http://www.somewhere.com/.afile.js></script>

这样，位于外部域中的代码也会被加载和解析。

利用这一点就可以在必要时通过不同的域来提供 JavaScript 文件。

不过在访问自己不能控制的服务器上的 JavaScript 文件时则要多加小心。如果不幸遇到怀有恶意的程序员，那他们随时都可能替换该文件中的代码。so，如果想包含来自不同域的代码，则要么你是那个域的所有者，要么那个域的所有者值得信赖。

 

无论如何包含代码，只要不存在 defer 和 async 属性，浏览器都会按照<script>元素在页面中的先后顺序对他们依次进行解析。