《Professional JavaScript for Web Developers》day02

《Professional JavaScript for Web Developers》day02

1.在HTML中使用JavaScript

1.1 <script>元素

HTML4.01为<script>定义了下列6个属性。

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

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

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

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

5）language：已废弃。原来用于表示编写代码使用的脚本语言。

6）type：可选。可以看成是language的替代属性；表示编写代码使用的脚本语言的内容类型（即MIME类型）目前type属性的值依然还是text-JavaScript。不过，这个属性并不是必须的，如果没有指定这个属性，默认值仍是text-JavaScript

1.1.1 标签的位置

现代web应用程序一般都把全部JavaScript应用放在<body>元素中页面内容的后面，如下所示：

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

这样，在解析包含的JavaScript代码之前，页面的内容将完全呈现在浏览器中。 而用户也会因为浏览器窗口显示空白页面的时间缩短而感到打开页面的速度加快了

1.1.2 延迟脚本

HTML4.01为<script>标签定义了defer属性。这个属性的用途是表明脚本在执行时不会影响页面的构造。也就是说，脚本会被延迟到整个页面都解析完毕再运行。因此，在<script>元素中设置defer属性，相当于告诉浏览器立即下载，但延迟执行。

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

因为有些浏览器会忽略这个属性，因此把延迟脚本放在页面底部仍是最佳选择。

1.1.3 异步脚本

HMTL5为<script>元素定义了async属性。这个属性与defer类似，都用于改变处理脚本的行为。且只适用于外部脚本，并告诉浏览器立即下载文件。但与defer不同的是，标记为async的脚本并不保证按照指定他们的先后顺序执行。

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

以上代码中，第二个脚本可能会在第一个脚本之前执行。因此，确保两者之间互不依赖非常重要。指定async的目的是不让页面等待两个脚本的下载和执行，从而异步加载页面的其他内容。为此，建议异步脚本不要在加载期间修改DOM

在XHTML中，要把async属性设置为 async = “async”

1.1.4 在XHMTL中的用法：略

1.1.5 不推荐使用的语法：略

1.2 文档模式

IE5.5引入了文档模式的概念，而这个概念是通过文档类型（doctype）切换实现的。

最初的两种文档模式是：混杂模式和标准模式。这两种模式主要影响CSS内容的呈现，但在某些情况下，也会影响JavaScript的解释执行。

在之后，IE又提出一种所谓的准标准模式。不标准的地方主要体现在处理图片间隙的时候（在表格中使用图片时，问题最明显）

如果在文档开始处没有发现文档类型声明，则所有浏览器都会默认开启混杂模式。但采用混杂模式不是什么值得推荐的做法，因为不同浏览器在这种模式下的行为差异非常大，如果不适用某些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 PUBILC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml-strict.dtd">

<!-- HTML 5 -->
<!DOCTYPE hmtl>

而对于准标准模式，则可以通过使用过渡型或框架集型文档类型来触发，如下所示：

<!-- 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 Transitonal//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">

准标准模式与标准模式非常接近，它们的差异几乎可以忽略不计。因此，当有人提到“标准模式”时，有可能是指这两种模式中的任何一种。

1.3 <noscript>元素

早期浏览器都面临一个特殊的问题，即当浏览器不支持JavaScript时如何让页面平稳的退化。对这个问题最终解决方案就是创造一个<noscript>元素，用以在不支持JavaScript的浏览器中显示代替的内容。这个元素可以包换出现在文档<body>中的任何HMTL元素（<script>除外）包含在<noscript>元素中的内容只有在下列情况下才显示出来：

1）浏览器不支持脚本

2）浏览器支持脚本，但脚本被禁用。

符合上述任何一个条件，浏览器都会显示<noscript>中的内容。而在除此之外的其他情况下，浏览器不会呈现<noscript>中的内容

<html>
    <head>
        <title>Example HTML page</title>
　　　　 <script type="text/javascript" defer="defer" src="example1.js"></script>
    </head>
    <body>
        <noscript>
            <p>本页面需要浏览器支持（启用）JavaScript。
        </noscript>
    <body>
</html>