JavaScript/HTML 中的 JavaScript

JavaScript 語言最初是為了在瀏覽器中執行並處理使用者介面的動態方面而引入的，例如，使用者輸入驗證、頁面內容（DOM）或使用者介面外觀（CSS）的修改，或任何事件處理。這意味著必須存在從 HTML 到 JS 的連線點。HTML 元素 <script> 扮演著這個角色。它是一個普通的 HTML 元素，其內容是 JS。

<script> 元素幾乎可以出現在 HTML 檔案中的任何位置，既可以在 <head> 中，也可以在 <body> 中。選擇最佳位置只有少數幾個標準；請參閱下面。

內部 JavaScript 與外部 JavaScript

<script> 元素要麼直接包含 JS 程式碼，要麼透過其 src 屬性指向包含 JS 程式碼的外部檔案或 URL。第一種變體稱為 *內部 JavaScript* 或 *內聯 JavaScript*，第二種稱為 *外部 JavaScript*。

在 *內部 JavaScript* 的情況下，<script> 元素看起來像

<script>
  // write your JS code directly here. (This line is a comment in JS syntax)
  alert("Hello World!");
</script>

*內部指令碼* 的優點是 HTML 和 JS 都在一個檔案中，這對快速開發很方便。這通常用於臨時測試一些想法，以及指令碼程式碼很小或特定於該頁面的情況下。

對於 *外部 JavaScript*，<script> 元素看起來像

<!--  point to a file or to a URL where the code is located. (This line is a comment in HTML syntax) -->
<script src="myScript.js"></script>
<script src="js/myScript2.js"></script>
<script src="https://example.com/dist/js/externallib.js"></script>
<script src="https://example.com/dist/js/externallib.min.js"></script>

<!-- although there is nothing within the script element, you should consider that the HTML5 spec  -->
<!-- doesn't allow the abbreviation of the script element to: <script src="myScript.js" />         -->

為 JavaScript 程式碼建立獨立的檔案

將 JS 放在獨立的檔案中對於較大的程式來說是推薦的做法，尤其是對於在多個頁面上使用的程式。此外，這種拆分支援分離關注點的模式：一位專家負責 HTML，另一位負責 JS。此外，它支援將頁面的內容（HTML）與行為（JS）分開。

總的來說，使用 *外部指令碼* 被認為是軟體開發的最佳實踐。

遠端程式碼注入與本地庫

使用以下示例

<script src="https://example.com/dist/js/externallib.min.js"></script>

您可以將來自伺服器 https://example.com 的遠端維護程式碼注入到您的本地 Web 專案中。遠端程式碼更新可能會破壞您的本地專案，或者可能會將不需要的程式碼功能注入到您的 Web 專案中。另一方面，集中維護和更新的庫可以為您的專案提供服務，因為當從遠端伺服器再次獲取庫時，這些庫會自動更新您的專案中的錯誤修復。

壓縮程式碼與非壓縮程式碼

壓縮的 Javascript 程式碼會壓縮原始碼，例如，透過縮短像vImage這樣的綜合變數，將其轉換為單個字元變數a. 這會顯著減小庫的大小，從而減少網路流量並縮短網頁準備就緒的響應時間。為了開發和學習，將本地提供未壓縮的庫可能會有所幫助。

外部 JavaScript

有關更詳細的資訊，您可以參考 MDN ^[1]。

src 屬性

在開啟的 script 標記中新增 src="myScript.js" 表示 JS 程式碼將位於與 HTML 檔案相同的目錄中的名為 *myScript.js* 的檔案中。如果 JS 檔案位於其他位置，您必須將 src 屬性更改為該路徑。例如，如果它位於名為 *js* 的子目錄中，則讀取 src="js/myScript.js"。

type 屬性

JS 不是 Web 開發的唯一指令碼語言，但 JS 是客戶端最常用的語言（PHP 執行在伺服器端）。因此，它被認為是 HTML5 的預設指令碼型別。型別的正式表示法是：type="text/javascript"。舊的 HTML 版本瞭解許多其他指令碼型別。如今，所有這些都被評為 *遺留*。一些例子是：application/javascript, text/javascript1.5, text/jscript, 或 text/livescript。

在 HTML5 中，規範指出 - 如果您使用 JS - 應該從指令碼元素中省略 type 屬性 ^[2]，無論是 *內部指令碼* 還是 *外部指令碼*。

<!-- Nowadays the type attribute is unnecessary -->
<script type="text/javascript">...</script>

<!-- HTML5 code -->
<script>...</script>

async 和 defer 屬性

舊的瀏覽器只使用一兩個執行緒來讀取和解析 HTML、JS、CSS 等。這可能會導致糟糕的使用者體驗 (UX)，因為載入 HTML、JS、CSS、影像等順序執行時會導致延遲時間。當頁面首次載入時，使用者可能會感覺系統很慢。

當前的瀏覽器可以並行執行許多工。為了啟動關於 JS 載入和執行的並行執行，<script> 元素可以使用 async 和 defer 這兩個屬性進行擴充套件。

async 屬性會導致非同步指令碼載入（與其他任務並行），並在指令碼可用後立即執行。

<script async src="myScript.js"></script>

defer 的作用類似。它與 async 的區別在於執行被推遲到頁面完全解析之後。

<script defer src="myScript.js"></script>

<script> 元素的位置

script 元素幾乎可以出現在 HTML 檔案中的任何位置。但是，有一些加速網站速度的最佳實踐 ^[3]。有些人建議將其放在關閉的 </body> 標記之前。這會加快下載速度，並且還允許在渲染過程中直接操作文件物件模型 (DOM)。但是，上述 async 和 defer 屬性會啟動類似的行為。

<!DOCTYPE html>
<html>
<head>
  <title>Example page</title>
</head>
<body>
  <!-- HTML code goes here -->
  <script src="myScript.js"></script>
</body>
</html>

<noscript> 元素

使用者可能出於安全或其他原因在瀏覽器中停用了 JS。或者，他們使用非常舊的瀏覽器，根本無法執行 JS。為了在這種情況下通知使用者，可以使用 <noscript> 元素。它包含將在瀏覽器中顯示的文字。該文字應說明不會執行任何 JS 程式碼。

<!DOCTYPE html>
<html>
<head>
  <title>Example page</title>
  <script>
    alert("Hello World!");
  </script>
  <noscript>
    alert("Sorry, the JavaScript part of this page will not be executed because JavaScript is not running in your browser. Is JavaScript intentionally deactivated?");
  </noscript>
</head>
<body>
  <!-- HTML code goes here -->
</body>
</html>

XHTML 檔案中的 JavaScript

XHTML 的語法比 HTML 更嚴格。這會導致一些小的差異。

首先，對於內部 JavaScript，需要使用以下示例中所示的兩個附加行來引入和結束指令碼。

<script>
  // <![CDATA[
  alert("Hello World!");
  // ]]>
</script>

其次，對於外部 JavaScript，需要type 屬性。

參考

[1] MDN: The script 元素

[2] WHATWG: The type 屬性

[3] Yahoo: 加快網站速度的最佳實踐

[1]

[2]

[3]