本章内容:
- 使用
<script>
元素 - 嵌入脚本与外部脚本
- 文档模式对JavaScript的影响
- 考虑禁用JavaScript的场景
只要一提到把 JavaScript放到网页中,就不得不涉及 Web 的核心语言——HTML。在当初开发 JavaScript的时候,Netscape要解决的一个重要问题就是如何做到让 JavaScript既能与 HTML 页面共存,又不影响那些页面在其他浏览器中的呈现效果。经过尝试、纠错和争论,终的决定就是 为 Web 增加统一的脚本支持。而 Web 诞生早期的很多做法也都保留了下来,并被正式纳入 HTML 规 范当中。
2.1 <script>
元素
<script>
元素属性
向 HTML页面中插入 JavaScript的主要方法,就是使用<script>
元素。这个元素由 Netscape创造 并在 Netscape Navigator 2中首先实现。后来,这个元素被加入到正式的 HTML规范中。HTML 4.01为<script>
定义了下列 6个属性。
- async:可选。表示应该立即下载脚本,但不应妨碍页面中的其他操作,比如下载其他资源或 等待加载其他脚本。只对外部脚本文件有效。
- charset:可选。表示通过 src 属性指定的代码的字符集。由于大多数浏览器会忽略它的值, 因此这个属性很少有人用。
- defer:可选。表示脚本可以延迟到文档完全被解析和显示之后再执行。只对外部脚本文件有 效。IE7及更早版本对嵌入脚本也支持这个属性。
- language:已废弃。原来用于表示编写代码使用的脚本语言(如 JavaScript、JavaScript1.2 或 VBScript)。大多数浏览器会忽略这个属性,因此也没有必要再用了。
- src:可选。表示包含要执行代码的外部文件。
- type:可选。可以看成是 language 的替代属性;表示编写代码使用的脚本语言的内容类型(也 称为 MIME类型)。虽然 text/javascript 和 text/ecmascript 都已经不被推荐使用,但人 们一直以来使用的都还是text/javascript。实际上,服务器在传送 JavaScript文件时使用的 MIME类型通常是 application/x–javascript,但在 type 中设置这个值却可能导致脚本被 忽略。另外,在非IE浏览器中还可以使用以下值:application/javascript和application/ecmascript。考虑到约定俗成和大限度的浏览器兼容性,目前 type 属性的值依旧还是 text/javascript。不过,这个属性并不是必需的,如果没有指定这个属性,则其默认值仍为 text/javascript。
使用<script>
元素
使用<script>
元素的方式有两种:直接在页面中嵌入 JavaScript 代码和包含外部 JavaScript 文件。
直接在页面中嵌入 JavaScript 代码
1 | <script type="text/javascript"> |
包含外部 JavaScript 文件
1 | <script type="text/javascript" src="example.js"></script> |
总结
无论如何包含代码,只要不存在 defer 和 async 属性,浏览器都会按照<script>
元素在页面中 出现的先后顺序对它们依次进行解析。换句话说,在第一个<script>
元素包含的代码解析完成后,第 二个<script>
包含的代码才会被解析,然后才是第三个、第四个……
2.1.1 标签的位置
按照传统的做法,所有