HTML中如何使用JavaScript

雖然，JavaScript的使用場景越發(fā)多樣化，可以在不同的環(huán)境上運(yùn)行，但大家較為熟悉的還是在HTML的交互，所以我們稍稍說一下，如何在HTML使用JavaScript。

JavaScript是通過<script>元素實(shí)現(xiàn)的，有以下兩種方式

1. 在頁面直接嵌入代碼

   <script type="text/javascript">
     function sayHello(){
       console.log('hello');
     }
   </script>
   

2. 引入外部JavaScript文件

   <!-- HTML4 and (x)HTML -->
   <script type="text/javascript" src="javascript.js"></script>
   <!-- HTML5 -->
   <script src="javascript.js"></script>
   

說一下script 元素

The HTML <script> element is used to embed or reference an executable script.
HTML script 元素 是用來嵌入或引用一個可執(zhí)行腳本

看一下它的常用屬性

• async ：HTML5屬性，該布爾值用來要求瀏覽器在是否允許的情況下異步執(zhí)行腳本。必須配合src屬性，如果src缺失，該值無效；動態(tài)插入的腳本默認(rèn)會在它加載完成后異步執(zhí)行。
• defer：必須配合src屬性，如果src缺失，該值無效；該布爾值被設(shè)定用來告知瀏覽器將在dom解析完成之后，DOMContentLoaded事件之前，執(zhí)行腳本;
• src：用來引用外部腳本的URI
• type： 定義src引用的腳本語言，支持的MIME類型包括text/javascript, text/ecmascript, application/javascript, 和application/ecmascript。如果沒有定義這個屬性，腳本會被視作JavaScript。

async和defer區(qū)別聯(lián)系
此處參考defer和async的區(qū)別的解答，區(qū)別如下：

1. defer 與 async 在網(wǎng)絡(luò)讀取的方式是一樣的，都是通過異步讀取的，不會阻塞html的解析；
2. defer 是在整個頁面都解析完畢之后執(zhí)行的，HTML5要求腳本按照他們出現(xiàn)的方式順序執(zhí)行，以下defer1.js應(yīng)該先于defer2.js執(zhí)行。（注意：這個順序只是理論上的，所以最好不要用這個當(dāng)做腳本之間的依賴執(zhí)行）

   <script src = 'defer1.js' defer></script>
<script src = 'defer2.js' defer></script>

3. async 是在腳本異步下載后直接執(zhí)行的，所以沒有順序可言。

文檔模式

IE5.5 提出了文檔模式的概念，使用 doctype 切換實(shí)現(xiàn)；
分類

• 混雜模式：會讓ie的行為與ie5相同
• 標(biāo)準(zhǔn)模式：會讓ie行為更接近標(biāo)準(zhǔn)行為

noscript

在瀏覽器不支持腳本和腳本被禁用時，會顯示noscript標(biāo)簽內(nèi)容