JavaScript高级程序设计（二）在HTML中使用JavaScript
章节摘要
2.1 <script>元素
2.2 嵌入代码与外部文件
2.3 文档模式
2.4 <noscript>元素
2.1 <script>元素
向HTML页面中插入JavaScript的主要方法就是使用<script>元素。
HTML 4.01为<script>定义的6个属性：
- async：可选。表示应该立即下载脚本，但不应妨碍页面中的其他操作。比如下载资源或等待加载其他脚本。只对外部脚本文件有效。
- charset：可选。表示通过src属性指定的代码的字符集。由于大多数浏览器会忽略它的值，因此这个属性很少有人用。
- defer：可选。表示脚本可以延迟到文档完全被解析和显示之后再执行。只对外部脚本文件有效。IE7及更早版本对嵌人脚本也支持这个属性。
- language：已废弃。
- src：可选。表示包含要执行代码的外部文件。
- type：可选。表示编写代码使用的脚本语言的内容类型。默认为text/javascript。
两种使用<script>的方式：直接在页面中嵌入JavaScript代码 或 引用外部JavaScript文件。
嵌入代码：
<script type="text/javascript"> /*直接嵌入JavaScript代码，不需要src*/ function sayHi(){ alert("Hi!"); }
<script>
元素内部的JavaScript代码将被从上至下依次解释。就拿前面这个例子来说，解释器会解释到一个函数的定义，然后将该定义保存在自己的环境当中。在解释器对<script>元素内部的所有代码求值完毕以前，页面中的其余内容都不会被浏览器加载或显示。
注：代码中任何地方都不可出现"</script>"字符串。使用转义字符“\”后"<\/script>"就没问题了。
引用外部文件
<script type-"text/javascript" src="example.js"></script> /*必须要src属性，指向外部js文件链接，如果在这里写JS代码不会被忽略*/
外部文件只需要包含JavaScript代码即可，不需<script></script>。外部文件一般用“,js”扩展名，但不是必须的。src还可以指向外部域的js文件。如：
<script type-"text/javascript" src="http://www,example.com/example.js"></script>
在XHML中可忽略</script>。例如：
<script type-"text/javascript" src="example.js"/>
2.1.1 标签的位置
惯例是将<script>放入<head>元素中。目的是把所有的外部文件（包括CSS和JS文件）的引用放在相同的地方。
<script>标签位置比较
| 位置 | 目的 | 影响 |
| <head>中 | 把所有的外部文件（包括CSS和JavaScript文件）的引用放在相同的地方 | 必须等到全部JavaScript下载、解析、执行完后才会呈现页面的内容。会导致页面延迟，浏览器一片空白。 |
| <body>后 | 在解析JavaScript代码前，页面的内容将完全呈现在浏览器中。 | 用户会觉得浏览器窗口显示空白页面的时间缩短而感到打开页面的速度加快。 |
注：浏览器在遇到<body>后才开始呈现内容。
2.1.2 延迟脚本
defer属性相当于告诉浏览器立即下载，但延迟运行。（脚本在执行时不会影响页面的构造。）
使用了defer属性后脚本会延迟到浏览器遇到</html>后执行。
defer只适用于外部脚本文件。这一点HTML5已明确规定， 所以支持HTML5的实现会忽略给嵌入脚本设置的defer属性。有些浏览器会忽略这个属性，所以把需要延迟的脚本放入页面底端仍是最佳选择。
2.1.3 异步脚本
async属性于defer类似，都用于改变处理脚本的行为。async只适用于外部脚本文件，并告诉浏览器立即下载执行。与defer不同的是async不保证脚本的先后执行顺序，因此要确保脚本之间互不依赖。
建议异步脚本不要在加载期间修改DOM。异步脚本一定会在页面的load事件前执行。
注：在XHTML中要改为async=“async”。
2.1.4 在XHTML中的用法
XHTML（可扩展超文本标记语言）是将HTML作为XML的应用而重新定义的一个标准。规则比HTML严格，直接影响能否在嵌入JavaScript代码时使用<script />。
在XHTML里（<）会被解析成新标签，标签后又不能有空格，所以会报错。
- 解决方法一：使用相应的HTML（<；）实体来替换（<）；
- 解决方法二：使用CData片段包含JavaScript代码。CData片段区域可以包含不需要解析的任意格式的文本内容。CData片段格式：<![CDATA[ ]]>
如果有浏览器不兼容XHTML而不支持CData片段，则将CData注释掉即可。
2.2 嵌入代码与外部文件
最好使用外部文件来包含JavaScript代码。优点如下：
- 可维护性：遍及不同HTML页面的JavaScript会造成维护问题。但把所有JavaScnpt文件都放在一个文件夹中，维护起来就轻松多了。而且开发人员因此也能够在不触及HTML标记的情况下，集中精力编辑JavaScript代码。
- 可缓存：浏览器能够根据具体的设置 缓存 链接的所有外部JavaScript文件。
- 适应未来：通过外部文件来包含JavaScript无须使用前面提到XHTML或注释hack，HTML和XHTML包含外部文件的语法是相同的。
2.3 文档模式
IE5.5 引入的文档模式是通过文档类型（doctype）切换实现的。不同的文档模式主要影响CSS内容的呈现，有些情况也会影响到JavaScript的解释执行。
| 类型名 | 特征 |
| 混杂模式 | 让IE的行为与相同 |
| 标准模式 | 让IE的行为更接近标准模式 |
| 准标准模式 | 大部分符合标准，小部分如处理图片间隙不标准 |
所有浏览器默认开启混杂模式。
- 开启标准模式：
- 开启准标准模式：通过过渡型或框架集型文档类型来触发。
2.4 <noscript>元素
当浏览器不支持JavaScript时让页面平稳退化。<noscript>可以包含能够出现在<body>中的任何HTML元素——<script>除外。
以下情况会显示：
- 浏览器不支持脚本；
- 浏览器支持脚本，但脚本被禁用。
除了上述情况，浏览器不会呈现<noscript>中的内容，如下所示：
在能正常启用脚本的浏览器中，用户永远看不到这句话，虽然它是页面的一部分。
浙公网安备 33010602011771号