本章內(nèi)容
- 使用<script>元素
- 嵌入腳本與外部腳本
- 文檔模式對(duì) JavaScript 的影響
- 考慮禁用 JavaScript 的場(chǎng)景
2.1 <script> 元素
HTML 4.0.1為 <script> 定義了下列6個(gè)屬性。
- 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 標(biāo)簽的位置
按照慣例所有<script>元素都應(yīng)該放在頁(yè)面的<head>元素中。在<head>中包含所有 JavaScript 文件，意味著必須等到全部 JavaScript 代碼都被下載、解析完成以后，才能開(kāi)始呈現(xiàn)頁(yè)面的內(nèi)容。
為避免這個(gè)問(wèn)題，現(xiàn)代 Web 應(yīng)用程序一般都把全部 JavaScript 引用放在<body>元素中頁(yè)面的內(nèi)容后面。
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 不推薦使用的語(yǔ)法
沒(méi)有必要在使用
2.2 嵌入代碼與外部文件
- 可維護(hù)性
- 可緩存
- 適應(yīng)未來(lái)
2.3 文檔模式
<!-- HTML 5 -->
<!DOCTYPE html>
2.4 <noscript>元素
- 瀏覽器不支持腳本
- 瀏覽器支持腳本，但腳本被禁用
<body>
<noscript>
<p>本頁(yè)面需要瀏覽器支持 （啟用）JavaScript.
</noscript>
</body>
2.5 小結(jié)
- 在包含外部 JavaScript 文件時(shí)，必須將 src 屬性設(shè)置為指向相應(yīng)文件的 URL。
- 所有<script>元素都會(huì)按照它們?cè)陧?yè)面中出現(xiàn)的先后順序依次被解析。在不使用 defer 和 async 屬性的情況下。
- 一般應(yīng)該把<script>元素放在</body>標(biāo)簽前面。
- 使用 defer 屬性可以讓腳本在文檔完全呈現(xiàn)之后再執(zhí)行。延遲腳本總是按照指定它們的順序執(zhí)行。
- 使用 async 屬性可以表示當(dāng)前腳本不必等待其他腳本， 也不必阻塞文檔呈現(xiàn)。不能保證異步腳本按照它們?cè)陧?yè)面中出現(xiàn)的順序執(zhí)行。
另外，使用<noscript>元素可以指定在不支持腳本的瀏覽器中顯示的替代內(nèi)容。
