JavaScript 在 HTML 文件中的放置位置

你好，未来的 JavaScript 巫师们！我很高兴能成为你们在这神奇世界中的向导，探索 JavaScript 放置的奥秘。作为一名有着多年教学经验的编程老师，我迫不及待地想与你们分享我的知识和经验。那么，拿起你们的虚拟魔杖（键盘），让我们开始吧！

JavaScript - Placement

在 HTML 文件中放置 JavaScript

在我们开始施法（编写代码）之前，了解我们可以在 HTML 文档中放置 JavaScript 咒语的位置至关重要。就像魔术师需要知道从哪里拉出兔子一样，我们需要知道放置 JavaScript 的最佳位置，以便它能够有效地发挥魔法。

在 HTML 文件中添加 JavaScript 有三个主要位置：

在 <head> 部分中
在 <body> 部分中
在外部文件中

让我们详细探索这些选项，好吗？

`<head>...</head>` 部分中的 JavaScript

在 <head> 部分放置 JavaScript 就像在表演前准备你的咒语。这是放置需要在页面内容出现前加载的脚本的绝佳位置。

以下是一个例子：

<!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

在 <body> 部分放置 JavaScript 就像在表演中施展魔术一样。这对于与 HTML 元素交互或需要在页面加载后执行的脚本来说非常完美。

让我们看一个例子：

<!DOCTYPE html>
<html>
<head>
<title>我的神奇网页</title>
</head>
<body>
<h1>我的第二个 JavaScript 咒语</h1>
<p id="demo">看这段文本如何变化！</p>

<script>
document.getElementById("demo").innerHTML = "Abracadabra! 文本已经改变！";
</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 代码