在 HTML 中使用 JavaScript

本章内容

使用 <script> 元素
嵌入脚本与外部脚本
文档模式对JavaScript的影响
考虑禁用JavaScript的场景

2.1 `<script>`元素

向HTML中插入Javascript的主要方法就是通过<script>元素，所以它是一个HTML元素。HTmML4.01为<script>定义了下列6个属性。

async: 可选。表示立即下载脚本，单不妨碍页面中其他操作。只对外部脚本文件有效。
charset: 可选。表示通过src属性指定的代码的字符集。（很少用）
defer: 可选。表示脚本可以延迟到文档完全解析和*显示之后再执行。
language: 已废弃。
src：可选。表示包含要执行的外部文件代码地址。
type：可选。language的替代属性；表示编写代码使用的脚本语言的内容类型（MIME），一般不设置默认为 text/javascript

一般使用<script>元素内部的JavaScript代码时，只需为它指定 type 属性，如下：

<script type="text/javascript">
  function sayHi(){
    alert("Hi!")
  }
</script>

注意！！！不要在代码中任何地方出现“</script>”，因为出现此标签，解析器就会认为这是结束标签而出现错误，解决方法是将结束标签转义后 </script>。

外部js文件引用需要制定src属性，如下：

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

2.1.1 标签的位置

按照惯例，所有的 <script>元素都应该放到页面的 <head>元素中，如下：

<!DOCTYPE html>
<html>
  <head>
    <title>Example Page</title>
    <script type="text/javascript" src="example.js"></script>
  </head>
  <body>
    <!-- 这里放内容 -->
  </body>
</html>

但是这样会阻塞页面渲染，因为解析器是单线程解析文档对象，所以在开发中一般会将<scrit>元素放到页面元素之后，如下：

<!DOCTYPE html>
<html>
  <head>
    <title>Example Page</title>
  </head>
  <body>
    <!-- 这里是内容 -->

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

2.1.2 延迟脚本

之前提过，HTML 4.01 为<script> 标签定义了 defer 属性。这个属性让脚本在执行时不会影响页面的构造，即告诉脚本会被延迟到整个页面解析完成后再运行。立即下载，延迟运行

<!DOCTYPE html>
<html>
  <head>
      <title>Example Page</title>
      <script type="text/javascript" defer="defer" src="example.js">
  </head>
  <body>
    <!-- 这里是内容 -->
  </body>
</html>

2.1.3 异步脚本

HTML5 为<script>元素定义了async属性。这个和 defer 属性类似，都用于改变处理脚本行为。同样只适用于外部脚本，但不同的是：async属性并不保证按照指定他们的顺序先后执行：

<!DOCTYPE html>
<html>
  <head>
      <title>Example Page</title>
      <script type="text/javascript" async src="example1.js">
      <script type="text/javascript" async src="example2.js">
  </head>
  <body>
    <!-- 这里是内容 -->
  </body>
</html>

上面代码中，第二个脚本可能先于第一个脚本执行。所以运用此属性，首先要确保两个文件之间不互相依赖，异步脚本不要在加载期间修改DOM

2.2 `<noscript>`元素

此元素存在是因为早起浏览器遇到当浏览器不支持JavaScript时如何让页面平稳的退化。以替代不支持<script>的浏览器页面：

浏览器不支持脚本
浏览器支持脚本，但脚本被禁止

<html>
  <head>
      <title>Example Page</title>
      <script type="text/javascript" async src="example1.js">
      <script type="text/javascript" async src="example2.js">
  </head>
  <body>
    <!-- 这里是内容 -->
    <noscript>
      <p>本页面需要浏览器开启支持JavaScript</p>
    </noscript>
  </body>
</html>