JavaScript - 在 HTML 文件中的放置位置

你好，未來的 JavaScript 巫師們！我很興奮能成為你們在這個神奇的 JavaScript 放置世界中的引路人。作為一個教導編程多年的老師，我迫不及待地想與你們分享我的知識和經驗。所以，拿起你們的虛擬魔杖（鍵盤），讓我們一起進入這個世界吧！

JavaScript - Placement

在 HTML 文件中放置 JavaScript

在我們開始施展法術（編寫代碼）之前，了解我們可以在 HTML 文件中放置 JavaScript 的位置是至關重要的。就像魔術師需要知道從帽子中抽出兔子正確的位置一樣，我們也需要知道將 JavaScript 放置在何處才能有效地發揮它的魔力。

我們可以在 HTML 文件中加入 JavaScript 的三個主要位置：

在 <head> 區段中
在 <body> 區段中
在外部文件中

讓我們詳細探討這些選項，好嗎？

在 `<head>...</head>` 區段中的 JavaScript

將 JavaScript 放置在 <head> 區段中，就像在表演之前準備好法術一樣。這是放置需要在頁面內容出現之前加載的腚本的好地方。

以下是一個範例：

<!DOCTYPE html>
<html>
<head>
<title>我的神奇網頁</title>
<script>
function greet() {
alert("歡迎來到 JavaScript 魔法的世界！");
}
</script>
</head>
<body>
<h1>我的第一個 JavaScript 法術</h1>
<button onclick="greet()">施展問候法術</button>
</body>
</html>

在這個範例中，我們在 <head> 區段中定義了一個名為 greet() 的函數。這個函數會創建一個帶有歡迎信息的警示框。然後，我們在 <body> 區段中使用這個函數，當按鈕被點擊時。

為什麼要把它放在 <head> 中呢？這樣可以確保我們的法術（函數）在頁面加載時立即準備好。但是請小心！在 <head> 中放置太多的法術會減慢頁面的初始加載時間。

在 `<body>...</body>` 區段中的 JavaScript

將 JavaScript 放置在 <body> 區段中，就像在表演過程中施展魔術一樣。這對於與 HTML 元素交互或在頁面加載後需要執行的腢本來說是完美的。

讓我們看一個範例：

<!DOCTYPE html>
<html>
<head>
<title>我的神奇網頁</title>
</head>
<body>
<h1>我的第二個 JavaScript 法術</h1>
<p id="demo">看這段文字的變化！</p>

<script>
document.getElementById("demo").innerHTML = "阿布拉卡達布拉！文字已經改變！";
</script>
</body>
</html>

在這個神奇的演示中，我們將 JavaScript 放置在關閉的 </body> 標籤之前。這段腢本找到 id 為 "demo" 的元素並更改其內容。將腢本放在 <body> 的結尾可以確保在我們的法術嘗試操縱它們之前，所有的 HTML 元素都已加載。

在 `<body>` 和 `<head>` 區段中的 JavaScript

有時，魔術師需要在表演前準備一些戲法，並在表演中施展其他戲法。同樣地，我們也可以在 <head> 和 <body> 區段中使用 JavaScript。

以下是如何操作的範例：

<!DOCTYPE html>
<html>
<head>
<title>我的神奇網頁</title>
<script>
function changeColor(newColor) {
document.body.style.backgroundColor = newColor;
}
</script>
</head>
<body>
<h1>我的第三個 JavaScript 法術</h1>
<button onclick="changeColor('red')">紅色魔法</button>
<button onclick="changeColor('blue')">藍色魔法</button>

<script>
document.write("<p>這段文字是由 JavaScript 召喚出來的！</p>");
</script>
</body>
</html>

在這個迷人的範例中，我們在 <head> 中定義了一個改變背景顏色的函數。然後，在 <body> 中，我們有按鈕調用這個函數，以及另一段直接寫入頁面的腢本。

在外部文件中的 JavaScript

現在，讓我們來到高潮——外部 JavaScript 文件！這就像有一本可以應用在多個表演中的魔法書。它可以讓你的 HTML 保持乾淨，並讓 JavaScript 可重用。

首先，創建一個名為 magic.js 的文件，內容如下：

function revealSecret() {
document.getElementById("secret").innerHTML = "秘密是... JavaScript 太棒了！";
}

然後，在你的 HTML 文件中：

<!DOCTYPE html>
<html>
<head>
<title>我的神奇網頁</title>
<script src="magic.js"></script>
</head>
<body>
<h1>我的第四個 JavaScript 法術</h1>
<p id="secret">秘密被藏匿了...</p>
<button onclick="revealSecret()">揭開秘密</button>
</body>
</html>

通過在 <script> 標籤中使用 src 屬性，我們鏈接了外部 JavaScript 文件。這樣，我們就可以在多個頁面上使用相同的法術（函數）！

使用 `<script>` 標籤的優勢

現在，我們已經探討了放置 JavaScript 的不同方式，讓我們總結一下使用 <script> 標籤的優勢：

優勢	描述
靈活性	可以放置在 `<head>` 或 `<body>` 中
外部文件	允許鏈接到外部的 .js 文件
多個腢本	可以在一個文件中使用多個 `<script>` 標籤
屬性	支持有用的屬性，如 `src`、`async` 和 `defer`
內聯代碼	可以直接包含 JavaScript 代碼