JavaScript/JavaScript within HTML

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

<script> 元素幾乎可以出現在 HTML 文件中的任何位置，<head> 以及 <body> 中。選擇最佳地點只有幾個標準；參見下文。

內部與外部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 an URL where the code is located. (This line is a comment in HTML syntax) -->
<script src="myScript.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.1/dist/js/bootstrap.bundle.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" />         -->

對於較大的程序，尤其是在多個頁面上使用的程序，建議將您的JS放在單獨的文件中。此外，這種拆分支持關注點分離的模式：一位專家負責HTML，另一位專家負責JS。此外，它還支持將頁面內容(HTML)與其行為(JS)分開。

總的來說，使用「外部腳本」被認為是軟體開發的最佳實踐。

外部JavaScript

更多詳細信息可以參考MDN ^[1]。

`src` 屬性

將src="myScript.js"添加到開始 script 標記意味著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...。這可能會導致糟糕的用戶體驗，因為在加載HTML、JS、CSS、圖像等時會出現延遲。當頁面第一次加載時，用戶可能會有系統慢的印象。

當前的瀏覽器可以並行執行許多任務。為了啟動與JS加載和執行相關的並行執行，可以使用async和defer兩個屬性擴展<script>元素。

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：腳本元素
↑ WHATWG: The type attribute
↑ Yahoo: Best practices for speeding up your website

[1] MDN：腳本元素

[2] WHATWG: The type attribute

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

[1]

[2]

[3]

內部與外部JavaScript

外部JavaScript

src 屬性

type 屬性

async和defer特性

<script>元素的位置

<noscript>元素