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這樣的綜合變數為單個字元變數. 這會大大減少庫的大小，從而減少網路流量和網頁準備就緒之前的響應時間。對於開發和學習，在本地使用未壓縮的庫可能會有所幫助。

外部 JavaScript

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

src 屬性

在開始的script 標記中新增src="myScript.js" 表示 JS 程式碼將位於名為myScript.js 的檔案中，該檔案與 HTML 檔案位於同一目錄中。如果 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: script 元素

[2] WHATWG: type 屬性

[3] 雅虎: 加速網站的最佳實踐

[1]

[2]

[3]