本章内容
- 使用<script>元素
- 嵌入脚本与外部脚本
- 文档模式对 JavaScript 的影响
- 考虑禁用 JavaScript 的场景
2.1 <script> 元素
HTML 4.0.1为 <script> 定义了下列6个属性。
- async: 可选。
- charset: 可选。
- defer: 可选。
- language: 已废弃。
- src: 可选。
- type: 可选。
<script type="text/javascript">
function sayHi () {
alert("Hi!");
}
</script>
<script type="text/javascript" src="example.js"></script>
2.1.1 标签的位置
按照惯例所有<script>元素都应该放在页面的<head>元素中。在<head>中包含所有 JavaScript 文件，意味着必须等到全部 JavaScript 代码都被下载、解析完成以后，才能开始呈现页面的内容。
为避免这个问题，现代 Web 应用程序一般都把全部 JavaScript 引用放在<body>元素中页面的内容后面。
2.1.2 延迟脚本
<script type="text/javascript" defer="defer" src="example.js"></script>
2.1.3 异步脚本
<script type="text/javascript" async src="example.js"></script>
2.1.4 在 XHTML 中的用法
<script type="text/javascript">
//<![CDATA[
//Your code here.
//]]>
</script>
2.1.5 不推荐使用的语法
没有必要在使用
2.2 嵌入代码与外部文件
- 可维护性
- 可缓存
- 适应未来
2.3 文档模式
<!-- HTML 5 -->
<!DOCTYPE html>
2.4 <noscript>元素
- 浏览器不支持脚本
- 浏览器支持脚本，但脚本被禁用
<body>
<noscript>
<p>本页面需要浏览器支持 （启用）JavaScript.
</noscript>
</body>
2.5 小结
- 在包含外部 JavaScript 文件时，必须将 src 属性设置为指向相应文件的 URL。
- 所有<script>元素都会按照它们在页面中出现的先后顺序依次被解析。在不使用 defer 和 async 属性的情况下。
- 一般应该把<script>元素放在</body>标签前面。
- 使用 defer 属性可以让脚本在文档完全呈现之后再执行。延迟脚本总是按照指定它们的顺序执行。
- 使用 async 属性可以表示当前脚本不必等待其他脚本， 也不必阻塞文档呈现。不能保证异步脚本按照它们在页面中出现的顺序执行。
另外，使用<noscript>元素可以指定在不支持脚本的浏览器中显示的替代内容。
