攻下《JavaScript高级程序设计》——第二章在HTML中使用JavaScript

电玩女神 2022-01-20 06:39 197阅读 0赞

从上一章我们知道了，JavaScript是一种专门为网页交互而设计的脚本语言，那么，它就免不了和HTML打交道，所以在设计JavaScript的时候，Netscape首要面临的就是，怎么让HTML和JavaScript共存。本章也是围绕着这一问题而展开……

# 1.怎么在HTML中嵌入JavaScript #

答：**通过< script>元素**。

## 1.1 使用方法 ##

在HTML中嵌入JavaScript，通过< script>元素，使用方式有**两种**，

一个是**直接在< script>< /script>中嵌入JavaScript代码**：

另一个是 **引入外部JavaScript文件**：

虽说嵌入代码和外部文件这两种方法并没有被要求应该用哪种，但是 **外部文件引用方式**有以下几点明显优势：

1.可维护性高。分门别类地放在一个文件夹当然要比一股脑地写在一起容易维护；

2.可缓存。浏览器能够根据具体的设置来缓存所有外部JavaScript文件。也即是说，如果有同一个JavaScript文件被两个不同页面引用，那么该文件只用下载一次就够了；

3.兼容性好。 在XHTML中，直接嵌入代码可能会发生错误，而引入外部文件则不会。

## 1.2 < script>标签在HTML中存在位置 ##

按照传统的做法，所有的< script>元素都应该放在< head>中，这样做是为了将所有的外部文件引入都放在同一个位置，如下图：

但是这样有一个很大的问题，这要从网页的加载顺序说起，我们网页解析的时候顺序是 **从上往下依次顺序加载**，设想如果有一个很大很复杂的JavaScript文件存在于< head>中，那么整个后面的内容都要等这个JavaScript文件加载完才能继续加载。这样的交互体验很差，在JavaScript文件加载完之前，界面上将是一片空白。所以为了解决这个问题，人们就想了个办法，把< script>标签放在< body>标签里面、页面内容后面，如图：

## 1.3 < script>元素各属性 ##

讲了< script>怎么引入文件以及它的存在位置，那么下面看看< script>本身又是个什么玩法。

在W3CSchool上，关于< script>标签的属性有这么两个表格，如图，分别是必选属性和可选属性，这里与《JavaScript高级程序设计》中所描述的有一点点出入。

（图来自W3CSchool）

在《JavaScript高级程序设计》这本书中，对于各个属性的定义，如同上图。下面来详细看一下上图中比较重要的几个属性：

**type属性**

与W3CSchool网站上不同的一点是，关于type属性，在《高程》中写的是可选属性。人们一直以来，最习惯的type是text/javascript，但其实，如果不指定这个属性，其默认值仍为text/javascript。但是，有一点必须注意，**如果你是在< script>标签中嵌入JavaScript代码，那就必须要指定type属性**（亲测为true，不然代码不会被执行）。

**async属性**

首先，async适用于外部脚本文件。 在讲async属性，请大家先回忆一下正常情况下网页的加载顺序，即从上至下依次执行，遇到< script>则停下来加载其脚本，加载完再继续往下。但加了async属性就不一样了。

熟悉异步编程的童鞋应该都知道，async代表异步。当做< script>的属性，如其名，它也是相当于在异步加载。加了async属性，就意味着，浏览器解析到脚本这里了，它会立即加载这个脚本，并且页面中的其他操作依旧继续。就好比做家务流程，制定计划，一叠被子，二洗衣服，三扫地，洗衣服就相当于加了async属性的脚本，当叠完被子之后，开始洗衣服，把衣服丢进洗衣机，开启，之后你就可以直接开始下个流程叠被子了，你并不用坐那儿等着衣服洗完再开始叠被子。

来看看下面这段代码，你应该很清楚它的执行顺序了：

如上图，网页的渲染并不会因为等待加载JavaScript文件而暂停。但有一点要注意的是，至于同时加了async的两个脚本，它们并不会按照指定的先后顺序执行。如图，脚本文件test1不一定先于test2执行。

**defer属性**

同样的，defer也适用于外部脚本文件。

defer是延迟的意思，加上defer属性的脚本都会被延迟到整个页面都解析完了之后再运行，如图：

与async不同的是，HTML5规范要求，加了defer属性的脚本，按照他们出现的先后顺序执行。但其实现实中延迟脚本不一定会按照顺序执行，因此在开发中最好只包含一个延迟脚本。还有一点需要注意的是，defer属性并不是百分百地兼容所有浏览器，所以把延迟脚本写在页面底部是最保险的。

# 2.在HTML中嵌入JavaScript，不兼容怎么办 #

在JavaScript诞生初期，有些浏览器并不支持JavaScript。为了让页面平稳退化，出现了< noscript>元素。只有在浏览器不支持脚本，或者说支持脚本但脚本被禁用时才会显示< noscript>标签中的内容。如图：

< noscript>和< script>就像是if else，如果支持就显示< script>，如果不支持就显示< noscript>。

第二章到这里就讲完啦~~继续下一章！！加油加油！！！