第二章 在HTML中使用JavaScript
<script>
元素
HTML4.01为script标签定义了6个属性
- async:可选。表示应该立即下载脚本,但不妨碍页面的其他操作,只对外部脚本有效。
- defer:可选。表示脚本可以延迟到文档完全被解析和显示之后再执行。只对外部脚本有效。IE7以及之前的也支持这个属性。
- language:已废弃。
- src:可选。表示包含执行的代码外部文件。
- type:可选。不过不是必须的,如果不指定其值是text/javascript
- charset:可选,但大多数浏览器会忽略它的值。所以很少人用这个属性。
包含在script元素内部的JavaScript代码将被从上至下依次解释。在解释器对<script>
元素内部有代码求值完毕之前,页面的其余部分不会被浏览器加载和显示。
注意
在<script>
嵌入JavaScript代码时,不要在代码中任何地方出现</script>
字符串。例如:
<script>
alert("/script");
</script>
会产生一个错误。可以使用转义字符“\”解决这个问题。
<script>
alert("\/script");
</script>
在解析外部JavaScript文件时,页面的处理同样也会暂时停止。
标签的位置
现代浏览器一般将<script>
元素中放在页面中内容的后面。这样,在解析JavaScript代码之前,页面的内容将完全呈现在浏览器中。而用户也会因为浏览器窗口显示空白页面的时间缩短而感到打开页面的速度加快了。
延迟脚本
defer属性表示浏览器应该立即下载脚本,但在页面加载解析完成之后再执行。HTML5规范要求按先后顺序执行,而且先于DOMContentLoaded事件执行。现实中并不一定会按先后顺序,也不一定会在DOMContentLoaded前执行。
建议
因此,最好只有一个defer属性的外部脚本。将延迟脚本放在页面内底部仍是最好的选择。
异步脚本
async和defer一样,只对外部脚本文件有效,告诉浏览器应该立即下载,但不能保证他们按先后顺序执行。制定async属性的目的是不让页面等待脚本的下载和执行,从而异步加载页面的其他内容。异步脚本一定会在页面的load时间前执行。但可能会在DOMContentLoaded之前或之后执行。
支持
FireFox3.6 Safari和Chrome
建议
不要在加载期间修改DOM。
嵌入代码与外部文件
优点
- 可维护性:避免不同HTML页面的JavaScript会造成维护问题。
- 可缓存:2个页面使用了同一个JS文件,那么这个文件只需下载一次。加载了页面的速度。
- 适应未来:XHTML也可以使用
文档模式
最初的文档模式包括:混杂模式和标准模式。
如果在文档的开头没有文档声明,那么所有浏览器将会打开混杂模式。但不同浏览器的混杂模式表现差异非常大。
<noscript>
元素
当浏览器不支持JavaScript时如何让页面平稳退化。最终方案就是创造了<noscript>
元素用以在不支持JavaScript的浏览器中显示替代内容。
这个元素可以包含能够出现在<body>
中的任何HTML元素–<script>元素除外
。包含在<noscript>
元素中的内容只有在以下情况下才会出现:
- 浏览器不支持脚本
- 支持脚本但是被禁用了