JavaScript/HTML 中的 JavaScript
JavaScript 語言最初是為了在瀏覽器中執行並處理使用者介面的動態方面而引入的，例如：驗證使用者輸入、修改頁面內容（DOM）或使用者介面外觀（CSS），或者任何事件處理。這意味著 HTML 與 JS 之間必須存在一個互連點。HTML 元素 <script> 扮演著這個角色。它是一個普通的 HTML 元素，它的內容是 JS。
<script> 元素幾乎可以出現在 HTML 檔案中的任何位置，既可以在 <head> 中，也可以在 <body> 中。選擇最佳位置只有幾個標準；請參閱 下方。
<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" /> -->
將您的 JS 放在一個單獨的檔案中，對於大型程式來說是推薦的做法，尤其是對於那些在多個頁面上使用的程式。此外，這種拆分支援 分離關注點 的模式：一個專家負責 HTML，另一個負責 JS。此外，它還支援頁面內容（HTML）與其行為（JS）的分離。
總的來說，使用 _外部指令碼_ 被認為是軟體開發的 最佳實踐。
使用以下示例
<script src="https://example.com/dist/js/externallib.min.js"></script>
您可以在本地 Web 專案中注入來自伺服器 https://example.com 的遠端維護程式碼。遠端程式碼更新可能會破壞您的本地專案，或者可能將不需要的程式碼功能注入您的 Web 專案。另一方面，集中維護和更新的庫由於錯誤修復而可以服務您的專案，這些錯誤修復會在您從遠端伺服器再次獲取庫時自動更新到您的專案中。
壓縮的 JavaScript 程式碼會壓縮原始碼，例如透過縮短綜合變數，比如vImage為單個字元變數a。這會顯著減小庫的大小，因此減少網路流量和響應時間，直到網頁準備好為止。對於開發和學習，將未壓縮的庫本地可用可能會有所幫助。
有關更多詳細資訊，您可以參考 MDN [1]。
在開啟的 script 標籤中新增 src="myScript.js" 表示 JS 程式碼將位於與 HTML 檔案相同的目錄中的名為 _myScript.js_ 的檔案中。如果 JS 檔案位於其他位置，則必須將 src 屬性更改為該路徑。例如，如果它位於名為 _js_ 的子目錄中，則讀取 src="js/myScript.js"。
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>
舊瀏覽器僅使用一個或兩個執行緒來讀取和解析 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 元素幾乎可以出現在 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>
可能會發生使用者出於安全或其他原因在其瀏覽器中停用了 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 的語法比 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