JavaScript 位置
<script> 標籤
在 HTML 中，JavaScript 程式碼插入在 <script> 和 </script> 標籤之間。
舊的 JavaScript 示例可能會使用 type 屬性：<script type="text/javascript">。
type 屬性不是必需的。JavaScript 是 HTML 中預設的指令碼語言。
JavaScript 函式和事件
JavaScript 函式是一段 JavaScript 程式碼塊，可以在“呼叫”時執行。
例如，當發生事件時，例如使用者點選按鈕時，可以呼叫函式。
您將在後面的章節中學習更多關於函式和事件的知識。
<head> 或 <body> 中的 JavaScript
您可以在 HTML 文件中放置任意數量的指令碼。
指令碼可以放置在 HTML 頁面的 <body> 部分，或 <head> 部分，或兩者兼有。
<head> 中的 JavaScript
在此示例中，JavaScript 函式放置在 HTML 頁面的 <head> 部分。
當點選按鈕時，該函式被呼叫（執行）
示例
<!DOCTYPE html>
<html>
<head>
<script>
function myFunction() {
document.getElementById("demo").innerHTML = "段落已更改。";
}
</script>
</head>
<body><h2>Head 中的 JavaScript 演示</h2>
<p id="demo">一段文字</p>
<button type="button" onclick="myFunction()">試一試</button>
</body>
</html>
自己動手試一試 »
<body> 中的 JavaScript
在此示例中，JavaScript 函式放置在 HTML 頁面的 <body> 部分。
當點選按鈕時，該函式被呼叫（執行）
示例
<!DOCTYPE html>
<html>
<body>
<h2>Body 中的 JavaScript 演示</h2>
<p id="demo">一段文字</p>
<button type="button" onclick="myFunction()">試一試</button>
<script>
function myFunction() {
document.getElementById("demo").innerHTML = "段落已更改。";
}
</script>
</body>
</html>
自己動手試一試 »
將指令碼放置在 <body> 元素的底部可以提高顯示速度，因為指令碼解釋會減慢顯示。
外部 JavaScript
指令碼也可以放置在外部檔案中
外部檔案：myScript.js
function myFunction() {
document.getElementById("demo").innerHTML = "段落已更改。";
}
當在許多不同的網頁中使用相同的程式碼時，外部指令碼很實用。
JavaScript 檔案具有副檔名 .js。
要使用外部指令碼，請將指令碼檔案的名稱放在 <script> 標籤的 src（源）屬性中
您可以根據需要將外部指令碼引用放置在 <head> 或 <body> 中。
該指令碼的行為將與它位於 <script> 標籤所在位置的行為完全相同。
外部指令碼不能包含 <script> 標籤。
外部 JavaScript 的優點
將指令碼放置在外部檔案中具有一些優點
- 它將 HTML 與程式碼分離
- 它使 HTML 和 JavaScript 更易於閱讀和維護
- 快取的 JavaScript 檔案可以加快頁面載入速度
要向一個頁面新增多個指令碼檔案 - 請使用多個 script 標籤
示例
<script src="myScript1.js"></script>
<script src="myScript2.js"></script>
外部引用
外部指令碼可以透過 3 種不同的方式引用
- 使用完整的 URL（完整的網址）
- 使用檔案路徑（如 /js/）
- 不帶任何路徑
此示例使用完整的 URL 連結到 myScript.js
此示例使用檔案路徑連結到 myScript.js
此示例不使用任何路徑連結到 myScript.js
You can read more about file paths in the chapter HTML File Paths.
