在 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>