死亡是一座永恒的灯塔

0%

第二章 在HTML中使用JavaScript

本章内容:

  • 使用<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
2
3
4
5
<script type="text/javascript">
function sayHi() {
alert("Hi!");
}
</script>

包含外部 JavaScript 文件

1
<script type="text/javascript" src="example.js"></script>

总结

无论如何包含代码,只要不存在 defer 和 async 属性,浏览器都会按照<script>元素在页面中 出现的先后顺序对它们依次进行解析。换句话说,在第一个<script>元素包含的代码解析完成后,第 二个<script>包含的代码才会被解析,然后才是第三个、第四个……

2.1.1 标签的位置

按照传统的做法,所有

坚持技术分享,您的支持将鼓励我继续创作!