當(dāng)學(xué)習(xí)一門新的編程語言的時候，應(yīng)該邊學(xué)邊做，反復(fù)演練以加深理解。因此，你需要一個 JavaScript 解釋器。幸運(yùn)的是，每一個 Web 瀏覽器都包含一個 JavaScript 解釋器。
可以通過在 HTML 文件里寫一個 <script> 元素來嵌入 JavaScript 代碼，當(dāng)瀏覽器加載 HTML 文件的時候，它會自動執(zhí)行這段代碼。如果運(yùn)行的是一小段 JavaScript 代碼，則不必每次都這樣做。我們可以利用 Chrome 瀏覽器的「開發(fā)者工具」來運(yùn)行這些小段代碼，通常按 F12 或者 Ctrl+Shift+J 快捷鍵可以喚醒控制臺。
現(xiàn)代瀏覽器可以使用函數(shù)
console.log()來向控制臺輸出消息，通過這種方式可以非常方便地調(diào)試代碼。
<script> 元素
使用 <script> 元素的方式有兩種：
- 直接在頁面中嵌入 JavaScript 代碼。
- 包含外部 JavaScript 文件。
使用 <script> 元素嵌入 JavaScript 代碼時，只需為 <script> 指定 type 屬性。然后，像下面這樣把 JavaScript 代碼直接放在元素內(nèi)部即可：
<script type="text/javascript">
function sayHello(){
console.log("Hello!");
}
</script>
在 HTML5 規(guī)范中，
<script>的type屬性默認(rèn)是"text/javascript"，所以可以省略；但是在 HTML 4.01 和 XHTML 1.0 規(guī)范中，type屬性是必須的。可以參考 Stack Overflow 上的回答：http://stackoverflow.com/questions/4243577/which-is-better-script-type-text-javascript-script-or-script-scr
如果要通過 <script> 元素來包含外部 JavaScript 文件，那么 src 屬性就是必需的。這個屬性的值是一個指向外部 JavaScript 文件的鏈接，例如：
<script type="text/javascript" src="example.js"></script>
包含在 <script> 元素內(nèi)部的 JavaScript 代碼將被從上至下依次解釋，在解釋器對 <script> 元素內(nèi)部的所有代碼求值完畢之前，頁面中的其余內(nèi)容都不會被瀏覽器加載或顯示。
需要注意的是，帶有 src 屬性的 <script> 元素不應(yīng)該在其 <script> 和 </script> 元素之間再包含額外的 JavaScript 代碼。如果包含了嵌入的代碼，則只會下載并執(zhí)行外部腳本文件，嵌入的代碼會被忽略。
<script type="text/javascript" src="example.js">
console.log("Hello!"); //永遠(yuǎn)不會執(zhí)行
</script>
另外，通過 <script> 元素的 src 屬性還可以包含來自外部域的 JavaScript 文件。例如：
<script type="text/javascript" src="https://code.jquery.com/jquery-3.0.0.min.js"></script>
在 HTML 中嵌入 JavaScript 代碼雖然沒有問題，但一般認(rèn)為最好的做法還是盡可能使用外部文件來包含 JavaScript 代碼。
元素的位置
按照慣例，所有的 <script> 元素都應(yīng)該放在頁面的 <head> 元素中，例如：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<script type="text/javascript" src="example1.js"></script>
<script type="text/javascript" src="example2.js"></script>
</head>
<body>
<!-- 這里放內(nèi)容 -->
</body>
</html>
可是這種做法意味著必須等到全部 JavaScript 代碼都被下載、解析和執(zhí)行完成之后，才能開始呈現(xiàn)頁面的內(nèi)容（瀏覽器在遇到 <body> 元素時才開始呈現(xiàn)內(nèi)容）。對于那些需要加載很多 JavaScript 代碼的頁面來說，會導(dǎo)致頁面出現(xiàn)明顯的延遲（瀏覽器窗口一片空白）。為了避免這個問題，最好的做法是把 <script> 元素放到 HTML 文檔的最后面，</body> 元素之前，例如：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<!-- 這里放內(nèi)容 -->
<script type="text/javascript" src="example1.js"></script>
<script type="text/javascript" src="example2.js"></script>
</body>
</html>
小結(jié)
把 JavaScript 插入到 HTML 頁面中要使用 <script> 元素。使用這個元素可以把 JavaScript 嵌入到 HTML 頁面中，讓腳本和標(biāo)記混合在一起；也可以包含外部的 JavaScript 文件。
在包含外部 JavaScript 文件時，必須將 src 屬性設(shè)置為指向相應(yīng)文件的 URL。而這個文件既可以是本服務(wù)器上的文件，也可以是其他任何域中的文件。
所有 <script> 元素都會按照他們在頁面中出現(xiàn)的先后順序依次被解析。
關(guān)卡
現(xiàn)有一個網(wǎng)頁（代碼如下），引用了大量的外部 JavaScript 文件，打開該網(wǎng)頁會一直顯示空白，直至外部 JavaScript 文件全部下載完畢，才能正常顯示網(wǎng)頁內(nèi)容「本頁面用來測試 <script> 加載順序~」，用戶體驗不好。請嘗試修改頁面中 <script> 元素的位置，實現(xiàn)以下效果：
- 挑戰(zhàn)一：實現(xiàn)打開頁面就能看到網(wǎng)頁內(nèi)容「本頁面用來測試
<script>加載順序~」，不必等外部 JavaScript 文件全部下載完畢才顯示。 - 挑戰(zhàn)二：實現(xiàn)在外部 JavaScript 文件下載之前「開啟頁面加載效果」，外部 JavaScript 文件全部下載完畢之后「關(guān)閉頁面加載效果」。
最終效果可參考 http://shijiajie.com/other/javascript-lesson/1.2
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>javascript-lesson-1.2</title>
<link rel="stylesheet" >
<!-- 開啟頁面加載效果 -->
<script src="http://qiniu.shijiajie.com/blog/javascript-lesson/1.2/layer.js"></script>
<script>layer.open({ type: 2, shadeClose: false });</script>
<!-- 關(guān)閉頁面加載效果 -->
<script>setTimeout(function(){ layer.closeAll(); },500);</script>
<!-- 引入 10MB 外部 JavaScript，比較耗時 -->
<script src="http://qiniu.shijiajie.com/blog/javascript-lesson/1.2/external.js"></script>
</head>
<body>
本頁面用來測試 <script> 加載順序~
</body>
</html>
更多
關(guān)注微信公眾號「劼哥舍」回復(fù)「答案」，獲取關(guān)卡詳解。
關(guān)注 https://github.com/stone0090/javascript-lessons，獲取最新動態(tài)。
