JavaScript - Placement in HTML File
Hallo那里，未来的JavaScript巫师们！我很高兴能成为你们进入JavaScript放置的神奇世界之旅的向导。作为一名教编程多年的老师，我迫不及待想与你们分享我的知识和经验。所以，拿起你们的虚拟魔杖（键盘），让我们开始吧！
JavaScript Placement in HTML File
在我们开始施法（写代码）之前，了解我们可以在HTML文档中放置JavaScript咒语的位置至关重要。就像魔术师需要知道从帽子里拉出兔子的正确位置一样，我们需要知道放置JavaScript的正确位置，以使其有效地发挥魔法。
我们在HTML文件中添加JavaScript有三个主要位置：
- 在
<head>部分中 - 在
<body>部分中 - 在外部文件中
让我们详细探索这些选项，好吗？
JavaScript in <head>...</head> section
将JavaScript放在 <head> 部分中就像在表演前准备你的咒语。这是放置需要在页面内容出现之前加载的脚本的绝佳位置。
以下是一个示例：
<!DOCTYPE html>
<html>
<head>
<title>Meine magische Webseite</title>
<script>
function greet() {
alert("Willkommen in der Welt der JavaScript-Magie!");
}
</script>
</head>
<body>
<h1>Mein erster JavaScript-Zauber</h1>
<button onclick="greet()">Begrüßungszauber wirken</button>
</body>
</html>在这个例子中，我们在 <head> 部分定义了一个名为 greet() 的函数。这个函数创建一个带有欢迎信息的警告框。然后我们在 <body> 部分使用这个函数，当按钮被点击时。
为什么要放在 <head> 中呢？嗯，这样可以确保我们的咒语（函数）在页面加载时即可使用。但是要小心！在 <head> 中放置太多咒语会减慢页面初始加载时间。
JavaScript in <body>...</body> section
将JavaScript放在 <body> 部分中就像在表演过程中进行魔术表演。这对于需要与HTML元素交互或需要在页面加载后执行的脚本来说非常完美。
让我们看一个例子：
<!DOCTYPE html>
<html>
<head>
<title>Meine magische Webseite</title>
</head>
<body>
<h1>Mein zweiter JavaScript-Zauber</h1>
<p id="demo">Beobachtet, wie sich dieser Text verwandelt!</p>
<script>
document.getElementById("demo").innerHTML = "Abrakadabra! Der Text hat sich verändert!";
</script>
</body>
</html>在这个神奇的演示中，我们将JavaScript直接放在关闭的 </body> 标签之前。这个脚本找到一个id为 "demo" 的元素并改变其内容。通过将脚本放在 <body> 的末尾，我们确保在咒语尝试操作它们之前，所有HTML元素都已加载。
JavaScript in <body> and <head> Sections
有时，魔术师需要提前准备一些技巧，并在表演过程中执行其他技巧。同样，我们可以同时使用 <head> 和 <body> 部分来放置我们的JavaScript。
以下是如何操作的示例：
<!DOCTYPE html>
<html>
<head>
<title>Meine magische Webseite</title>
<script>
function changeColor(newColor) {
document.body.style.backgroundColor = newColor;
}
</script>
</head>
<body>
<h1>Mein dritter JavaScript-Zauber</h1>
<button onclick="changeColor('rot')">Rote Magie</button>
<button onclick="changeColor('blau')">Blaue Magie</button>
<script>
document.write("<p>Dieser Text wurde von JavaScript beschworen!</p>");
</script>
</body>
</html>在这个迷人的示例中，我们在 <head> 中定义了一个改变背景颜色的函数。然后，在 <body> 中，我们有按钮调用这个函数，以及另一个直接写入页面的脚本。
JavaScript in External File
现在，到了我们的大结局 - 外部JavaScript文件！这就像拥有一个可以在多个表演中使用的咒语书。它可以让你的HTML保持整洁，JavaScript可重用。
首先，创建一个名为 magic.js 的文件，内容如下：
function revealSecret() {
document.getElementById("secret").innerHTML = "Das Geheimnis ist... JavaScript ist großartig!";
}然后，在你的HTML文件中：
<!DOCTYPE html>
<html>
<head>
<title>Meine magische Webseite</title>
<script src="magic.js"></script>
</head>
<body>
<h1>Mein vierter JavaScript-Zauber</h1>
<p id="secret">Das Geheimnis ist versteckt...</p>
<button onclick="revealSecret()">Das Geheimnis enthüllen</button>
</body>
</html>通过在 <script> 标签中使用 src 属性，我们链接了外部JavaScript文件。这样，我们可以在多个页面上使用相同的咒语（函数）！
Advantages of using the <script> tag
现在我们已经探索了放置JavaScript的不同方式，让我们总结一下使用 <script> 标签的优点：
| Vorteil | Beschreibung |
|---|---|
| Flexibilität | Kann in <head> oder <body> platziert werden |
| External Files | Ermöglicht das Verlinken externer .js-Dateien |
| Multiple Scripts | Es können mehrere <script>-Tags in einem Dokument vorhanden sein |
| Attributes | Unterstützt nützliche Attribute wie src, async und defer
|
| In-line Code | Kann direkt JavaScript-Code enthalten |
Denken Sie daran, junge Zauberer, die Platzierung Ihres JavaScript kann den Leistung und das Verhalten Ihrer Webseite erheblich beeinflussen. Wählen Sie weise, und Ihre Webseiten werden mit wunderbarer Magie gefüllt sein, die Ihre Benutzer fesselt und erfreut!
Als wir diese magische Lektion beenden, hoffe ich, dass Sie ein solides Verständnis der JavaScript-Platzierung gewonnen haben. Denken Sie daran, Übung macht den Meister, also experimentieren Sie weiterhin mit diesen Techniken. Bevor Sie es wissen, werden Sie Web-Erlebnisse schaffen, die so faszinierend sind wie jede Magie-Show!
Nun, geht forth und codet, meine Lehrlinge! Die Welt der Web-Entwicklung erwartet Ihren magischen Touch!
Credits: Image by storyset