在网页设计的世界里，JavaScript 就像是魔法师，能让静态的 HTML 页面变得生动有趣，想要在你的网页中施展这个魔法，你只需要几种简单的方法来引用 JavaScript 代码。
我们可以在 HTML 文件中直接编写 JavaScript 代码，这就像是在你的魔法书中直接写下咒语，你可以在<script> 标签中写下你的 JavaScript 代码，然后放在 HTML 的<head> 或<body> 部分。
<!DOCTYPE html>
<html>
<head>
<title>我的魔法页面</title>
<script>
// 你的咒语放在这里
function sayHello() {
alert('你好，魔法世界！');
}
</script>
</head>
<body>
<button onclick="sayHello()">点击我说你好</button>
</body>
</html>在这个例子中，我们创建了一个按钮，当点击时会触发sayHello 函数，弹出一个对话框说“你好，魔法世界！”。
如果你的 JavaScript 咒语太长，或者你想要保持 HTML 的整洁，你可以选择将 JavaScript 代码放在外部文件中，这就像是将你的咒语保存在单独的魔法卷轴中，要这样做，你需要创建一个.js 文件，然后将你的 JavaScript 代码写在里面，在你的 HTML 文件中，使用<script> 标签并设置src 属性来引用这个外部文件：
<!DOCTYPE html>
<html>
<head>
<title>我的魔法页面</title>
</head>
<body>
<button id="magicButton">点击我说你好</button>
<script src="magic.js"></script>
</body>
</html>在magic.js 文件中：
// 你的咒语放在这里
document.getElementById('magicButton').onclick = function() {
alert('你好，魔法世界！');
};这样，当你点击按钮时，就会触发magic.js 文件中的代码，弹出对话框。
还有一个小技巧，如果你想确保在 HTML 元素加载完成后再运行 JavaScript 代码，可以在<script> 标签中使用defer 属性，这样，你的 JavaScript 代码会在 HTML 元素加载完毕后，但在DOMContentLoaded 事件之前执行：
<script src="magic.js" defer></script>
如果你的页面需要在特定条件下加载 JavaScript 代码，可以使用async 属性，这样，JavaScript 文件会在后台加载，不会阻塞页面的其他部分加载：
<script src="magic.js" async></script>
通过这些方法，你可以灵活地在你的网页中引用 JavaScript 代码，让你的页面更加生动和互动，合理地组织和引用 JavaScript 代码，可以让你的魔法更加高效和强大。
还没有评论，来说两句吧...