《JavaScript 闖關記》之初探

劼哥stone發表於2016-10-21
JavaScript

當學習一門新的程式語言的時候，應該邊學邊做，反覆演練以加深理解。因此，你需要一個 JavaScript 直譯器。幸運的是，每一個 Web 瀏覽器都包含一個 JavaScript 直譯器。

可以通過在 HTML 檔案裡寫一個 <script> 元素來嵌入 JavaScript 程式碼，當瀏覽器載入 HTML 檔案的時候，它會自動執行這段程式碼。如果執行的是一小段 JavaScript 程式碼，則不必每次都這樣做。我們可以利用 Chrome 瀏覽器的「開發者工具」來執行這些小段程式碼，通常按 F12 或者 Ctrl+Shift+J 快捷鍵可以喚醒控制檯。

現代瀏覽器可以使用函式 console.log() 來向控制檯輸出訊息，通過這種方式可以非常方便地除錯程式碼。

<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 上的回答：stackoverflow.com/questions/4…

如果要通過 <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 程式碼。

元素的位置

按照慣例，所有的 <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>複製程式碼

小結

把 JavaScript 插入到 HTML 頁面中要使用 <script> 元素。使用這個元素可以把 JavaScript 嵌入到 HTML 頁面中，讓指令碼和標記混合在一起；也可以包含外部的 JavaScript 檔案。

在包含外部 JavaScript 檔案時，必須將 src 屬性設定為指向相應檔案的 URL。而這個檔案既可以是本伺服器上的檔案，也可以是其他任何域中的檔案。

所有 <script> 元素都會按照他們在頁面中出現的先後順序依次被解析。

關卡

現有一個網頁（程式碼如下），引用了大量的外部 JavaScript 檔案，開啟該網頁會一直顯示空白，直至外部 JavaScript 檔案全部下載完畢，才能正常顯示網頁內容「本頁面用來測試 <script> 載入順序~」，使用者體驗不好。請嘗試修改頁面中 <script> 元素的位置，實現以下效果：

  • 挑戰一：實現開啟頁面就能看到網頁內容「本頁面用來測試 <script> 載入順序~」，不必等外部 JavaScript 檔案全部下載完畢才顯示。
  • 挑戰二：實現在外部 JavaScript 檔案下載之前「開啟頁面載入效果」，外部 JavaScript 檔案全部下載完畢之後「關閉頁面載入效果」。

最終效果可參考 shijiajie.com/other/javas…

<!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>

    <!-- 引入 10MB 外部 JavaScript，比較耗時 -->
    <script src="http://qiniu.shijiajie.com/blog/javascript-lesson/1.2/external.js"></script>

</head>
<body>

    本頁面用來測試 &lt;script&gt; 載入順序~

</body>
</html>複製程式碼

更多

關注微信公眾號「劼哥舍」回覆「答案」，獲取關卡詳解。
關注 github.com/stone0090/j…，獲取最新動態。

相關文章