2 在 HTML 中使用 JavaScript

2015-11-04 本文已影响81人闷油瓶小张

本章内容

使用<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>元素可以指定在不支持脚本的浏览器中显示的替代内容。