JavaScript/JavaScript 在 HTML 中

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>

你可以在你的本地 web 專案中注入來自伺服器https://example.com 的遠端維護的程式碼。遠端程式碼更新可能會破壞你的本地專案，或者可能將不必要的程式碼功能注入到你的 web 專案中。另一方面，集中維護和更新的庫由於 bug 修復而可以為你的專案服務，這些 bug 修復會在從遠端伺服器再次獲取庫時自動更新到你的專案中。

壓縮與非壓縮程式碼

壓縮的 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 屬性。

參考

↑ MDN: The script element
↑ WHATWG: The type attribute
↑ Yahoo: Best practices for speeding up your website

[1] MDN: The script element

[2] WHATWG: The type attribute

[3] Yahoo: Best practices for speeding up your website

[1]

[2]

[3]