你好，世界！

本教學課程的這一部分是關於核心 JavaScript，也就是該語言本身。

但是，我們需要一個工作環境來執行我們的腳本，而且由於這本書是在線上，因此瀏覽器是一個不錯的選擇。我們會將瀏覽器特定指令（例如 alert）的數量減至最少，這樣如果你打算專注於其他環境（例如 Node.js），就不會花時間在這些指令上。我們會在本教學課程的下一部分中專注於瀏覽器中的 JavaScript。

因此，首先，讓我們看看如何將腳本附加到網頁。對於伺服器端環境（例如 Node.js），你可以使用類似於 "node my.js" 的指令來執行腳本。

「script」標籤

JavaScript 程式幾乎可以在任何地方插入 HTML 文件中，方法是使用 <script> 標籤。

例如

<!DOCTYPE HTML>
<html>

<body>

  <p>Before the script...</p>

  <script>
    alert( 'Hello, world!' );
  </script>

  <p>...After the script.</p>

</body>

</html>

你可以按一下上面方框右上角的「播放」按鈕來執行範例。

<script> 標籤包含 JavaScript 程式碼，當瀏覽器處理標籤時，會自動執行該程式碼。

現代標記

<script> 標籤有幾個現今已鮮少使用，但仍可能在舊程式碼中找到的屬性

type 屬性：<script type=…>

舊的 HTML 標準 HTML4 要求腳本要有 type。通常是 type="text/javascript"。現在已不再需要。此外，現代的 HTML 標準完全改變了此屬性的意義。現在，它可用於 JavaScript 模組。但那是進階主題，我們會在教學課程的另一部分討論模組。

language 屬性：<script language=…>

此屬性用於顯示腳本的語言。由於 JavaScript 是預設語言，此屬性已不再有意義。無需使用它。

腳本前後的註解。

在非常古老的書籍和指南中，您可能會在 <script> 標籤中找到註解，如下所示

          <script type="text/javascript"><!--
    ...
//--></script>
        

此技巧不再用於現代 JavaScript。這些註解會將 JavaScript 程式碼隱藏起來，以防舊瀏覽器不知道如何處理 <script> 標籤。由於過去 15 年發布的瀏覽器沒有此問題，因此此類註解可幫助您識別非常舊的程式碼。

外部腳本

如果我們有很多 JavaScript 程式碼，可以將它們放入一個獨立的檔案中。

使用 src 屬性將腳本檔案附加到 HTML

<script src="/path/to/script.js"></script>

在此，/path/to/script.js 是從網站根目錄到腳本的絕對路徑。也可以提供從目前頁面的相對路徑。例如，src="script.js"，就像 src="./script.js"，表示目前資料夾中的檔案 "script.js"。

我們也可以提供完整的 URL。例如

          <script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.11/lodash.js"></script>
        

若要附加多個腳本，請使用多個標籤

          <script src="/js/script1.js"></script>
<script src="/js/script2.js"></script>
…
        

原則上，只有最簡單的腳本會放入 HTML。較複雜的腳本會放在獨立的檔案中。

獨立檔案的好處是瀏覽器會下載它並將它儲存在其快取中。

其他參照相同腳本的頁面會從快取中取得它，而不是下載它，因此檔案實際上只會下載一次。

這會減少流量並加快頁面速度。

單一 <script> 標籤不能同時具有 src 屬性和內部程式碼。

這無法運作

          <script src="file.js">
  alert(1); // the content is ignored, because src is set
</script>
        

我們必須選擇外部 <script src="…"> 或具有程式碼的常規 <script>。

上述範例可以拆分成兩個指令碼才能運作

          <script src="file.js"></script>
<script>
  alert(1);
</script>
        

摘要

我們可以使用 <script> 標籤將 JavaScript 程式碼新增到網頁中。
type 和 language 屬性不是必要的。
使用 <script src="path/to/script.js"></script> 可以插入外部檔案中的指令碼。

還有很多關於瀏覽器指令碼及其與網頁互動的知識要學習。但請記住，本教學課程的這一部分是針對 JavaScript 語言，因此我們不應分心於瀏覽器對它的特定實作。我們將使用瀏覽器作為執行 JavaScript 的方法，這對於線上閱讀非常方便，但這只是眾多方法之一。

「script」標籤

現代標記

外部腳本

摘要

任務

顯示警示

使用外部指令碼顯示警示

留言

章節

課程導覽