初探 · 《JavaScript 闖關記》

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