第二章：在HTML中使用JavaScript
思维导图
一、使用<script>元素
属性：
-
async
- 应该立即下载脚本，但不妨碍页面中其他操作。（如下载其他资源或等待加载其他脚本)
- 只对外部脚本文件有效。
-
charset
- 通过src属性指定的代码的字符集。（用的少）
-
defer
- 脚本可以延迟到文档完全被解析和显示之后再执行。
- 只对外部脚本文件有效。
-
language
- （已废弃）原用于表示编写代码使用的脚本语言（JavaScript，JavaScript1.2，VBScript等）
-
src
- 包含要执行代码的外部文件
-
type
- 可以看成language的替代属性
- 表示编写代码使用的脚本语言的内容类型（MIME类型）
- 然text/javascript和text/ecmascript都已经不被推荐使用，但人们一直以来使用的都还是text/javascript
使用方式：
-
直接在页面中嵌入JavaScript代码
- 包含在
<script>元素内部的JavaScript代码将被从上至下依次解释。
- 包含在
-
包含外部JavaScript文件
-
只要不存在defer和async属性，浏览器都会按照
<script>元素在页面中出现的先后顺序对它们依次进行解析。
标签的位置
- 1、都放在
<head>元素中，目的就是把所有外部文件（包括CSS文件和JavaScript文件）的引用都放在相同的地 - 2、为解决浏览器呈现页面出现延迟留白问题，一般把JavaScript放在
</body>元素前
延迟脚本
<script>中定义defer属性- 用途：表明脚本在执行时不会影响页面的构造【即：脚本会被延迟到整个页面都解析完毕后再运行】
- 告知浏览器：立即下载，延迟执行
异步脚本
<script>中定义async属性- 只适用于外部脚本文件，告诉浏览器立即下载文件
- 标记async的脚本并不保证按照指定它们的先后顺序执行
- 建议异步脚本不要在加载期间修改DOM
在XHTML中使用<script>
二、嵌入脚本与外部脚本
使用外部文件优点：
-
可维护性
- 遍及不同HTML页面的JavaScript会造成维护问题。
- 把所有JavaScript文件都放在一个文件夹中，维护起来就轻松多了
-
可缓存
- 浏览器能够根据具体的设置缓存链接的所有外部JavaScript文件。
- 如果有两个页面都使用同一个文件，那么这个文件只需下载一次
- 最终结果就是能够加快页面加载的速度。
-
适应未来
- 通过外部文件来包含JavaScript无须使用前面提到XHTML或注释hack。
- HTML和XHTML包含外部文件的语法是相同的。
三、文档模式对JavaScript的影响
文档模式
- 混杂模式（quirks mode）
- 标准模式（standards mode）
四、考虑禁用JavaScript的场景
<noscript>元素
-
问题：当浏览器不支持JavaScript时如何让页面平稳地退化
-
包含在
<noscript>元素中的内容显示情况：- 浏览器不支持脚本
- 浏览器支持脚本，但脚本被禁用
五、小结：
把JavaScript插入到HTML页面中要使用<script>元素。
使用这个元素可以把JavaScript嵌入到HTML页面中，让脚本与标记混合在一起；
也可以包含外部的JavaScript文件。
注意点：
- 1、在包含外部JavaScript文件时，必须将src属性设置为指向相应文件的URL。
【而这个文件既可以是与包含它的页面位于同一个服务器上的文件，也可以是其他任何域中的文件。】 - 2、所有
<script>元素都会按照它们在页面中出现的先后顺序依次被解析。（不使用defer和async下，只有解析完前面<script>元素中的代码后，才会开始解析后面<script>元素中的代码） - 3、浏览器会先解析完不使用defer属性的
<script>中的代码，然后再解析后面的内容【一般把script放到页面最后，</body>前】 - 4、使用defer属性，可以让脚本在文档完全呈现之后再执行。延迟脚本总是按照指定它们的顺序执行。
- 5、使用async属性，可以表示当前脚本不必等待其他脚本，也不必阻塞文档呈现。 【不能保证异步脚本按照它们在页面中出现的顺序执行】
使用<noscript>元素可以指定在不支持脚本的浏览器中显示的替代内容。
