【阅读笔记】JavaScript 高级程序设计（二）

`<script>` 元素

向 HTML 页面中插入 JavaScript 的主要方法，就是 <script> 元素。这个元素由 Netscape（网景）创造并在 Netscape Navigator 2中首次实现，后来，这个元素被加入到正式的 HTML 规范中。HTML 4.01 为<script> 定义了 6 个属性：

async：可选。表示应该立即下载脚本，但不反感页面中的其他操作。
charset：可选。表示通过 src 属性指定的代码的字符集。
defer：可选。表示脚本可以延迟到文档完全被解析和显示之后才执行。
language：已废弃。原表示编写代码使用的脚本语言。
src：可选。表示包含要执行代码的外部文件。
可选。可以看成是 language 的替代属性；表示编写代码使用的脚本语言的内容类型（也被称为 MIME 类型）。

使用 <script> 有两种方式：

直接在页面中嵌入 JavaScript 代码，如：

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

包含在 <script> 元素内部的 JavaScript 代码将被从从上至下一次解释。

2.引入外部 JavaScript 文件，如：

<script type="text/javascript" src="外部文件路径"></script>

如果是在 XHTML 文档中，可以省略 </script> 标签。但是，不能在 HTML 文档中省略。因为这不符合 HTML 规范，并且也得不到某些浏览器的正确解析。

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

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

标签的位置

按照惯，所有的 <script> 元素都应该放在 <head> 元素中。这种做法的目的就是把所有的外部文件的引用都放在相同的地方，这意味着必须等到全部的外部文件都被下载、解析和执行完成以后，才开始呈现页面的内容，导致浏览器在呈现页面时出现明显的延迟，而延迟期间的浏览器窗口将会是一片空白。

因为了避免这个问题，现代 Web 应用程序一般都把全部的 JavaScript 引用放到 <body> 元素中页面内容后面。这样在解析包含的 JavaScript 代码之前，页面的内容将完全呈现在浏览器中。

使用外部文件的有点

可维护性
可缓存性：浏览器能够根据具体的设置魂村链接的所有外部 JavaScript 文件。
适应未来：通过外部文件来包含 JavaScript 无语使用注释hack。

文档模式

IE5.5 引入了文档模式概念，这个概念通过使用文档类型（doctype）切换实现的。最初的两个文档模式是：混杂模式（quirks mode）和标准模式（standards mode）。混杂模式会让 IE 的行为与（包含非标准特性的）IE5 相同，而标准模式则让 IE 的行为更接近标准行为。虽然这两种模式主要影响 CSS 内容的呈现，但在某些情况下也会影响到 JavaScript 的解释执行。

在 IE 引入文档模式概念后，其他浏览器也纷纷效仿。在此之后，IE 又提出一宗所谓的准标准模式（almost standards mode）。这种模式下的浏览器特性有很多都是符合标准的，但也不尽然，不标准地方主要体现在处理图片间隙的时候。

如果在文档开始处没有发现文档类型声明，浏览器则会默认开启混杂模式。如果不适用默写 hack 技术，跨浏览器的行为根本就没有一致性可言。

对于标准模式，可以通过使用下面任何一宗文档类型来开启：

HTML 4.01 严格类型

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" 
    "http://www.w3.org/TR/html4/strict.dtd">

XHTML 1.0 严格模式

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

HTML 5

    <!DOCTYPE html>

对于准标准模式，则可以通过使用过渡型（transitional）或框架集型（frameset）文档类型来触发：

HTML 4.01 过渡型

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
    "http://www.w3.org/TR/html4/loose.dtd">

HTML 4.01 框架集型

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" 
    "http://www.w3.org/TR/html4/frameset.dtd">

XHTML 1.0 过渡型

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

XHTML 1.0 框架集型

   <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">

准标准模式与标准模式非常接近，它们的差异几乎可以忽略不计。

元素

当浏览器不支持 JavaScript 或脚本被禁用shi，可以使用 <noscript> 元素，这个元素可以包含能够出现在文档 <body> 中的任何 HTML 元素 <script> 除外。

小结

使用 <script> 元素可以把 JavaScript 嵌入到 HTML 页面中，让脚本与标记混合在一起；也可以包含外部的 JavaScript 文件。我们需要注意的地方：

在包含外部 JavaScript 文件使，必须将 src 属性设置为指向文件的路径。
所有的 <script> 元素，在不使用 defer 和 async 的情况下，都会按照它们在页面中出现的先后顺序依次被解析。
由于浏览器按照由上至下的顺序进行加载，因此应该将 <script> 元素放主要内容之后，即 </body> 标签之前。
使用 defer 属性可以让脚本在文档完全呈现之后再执行。延迟脚本总是按照指定它们的顺序执行。
使用 async 属性可以表示当前脚本不必等待其他脚本，也不必阻塞文档呈现。不能保证异步脚本按照它们在页面中出现的顺序执行。