技术文摘
如何在 HTML 中嵌入 JS
2025-01-09 20:11:22 小编
如何在 HTML 中嵌入 JS
在网页开发中，将 JavaScript（JS）嵌入 HTML 是一项基础且关键的技能。它能为静态的网页增添交互性与动态效果，极大提升用户体验。下面就来详细探讨几种在 HTML 中嵌入 JS 的方法。
第一种方法是使用内联脚本。只需在 HTML 标签内直接使用 script 标签来编写 JS 代码。例如：
<!DOCTYPE html>
<html>
<head>
<title>内联脚本示例</title>
</head>
<body>
<button onclick="alert('你点击了按钮！')">点击我</button>
<script>
document.write('<p>这是通过内联脚本添加的段落。</p>');
</script>
</body>
</html>
在这个例子中，onclick 事件处理程序直接写在按钮标签内，当按钮被点击时会弹出一个警告框。而在 script 标签内编写的代码则直接在页面中输出了一段文本。内联脚本适合简短的代码片段，但不适合复杂逻辑，因为它会使 HTML 代码变得混乱，不利于维护。
第二种常用的方法是使用内部脚本。在 HTML 的 head 或 body 部分添加 script 标签，将 JS 代码写在其中。如下所示：
<!DOCTYPE html>
<html>
<head>
<title>内部脚本示例</title>
<script>
function greet() {
alert('欢迎来到我们的网站！');
}
</script>
</head>
<body>
<button onclick="greet()">问候</button>
</body>
</html>
这里，我们在 head 部分定义了一个函数 greet，然后在按钮的 onclick 事件中调用它。内部脚本可以将相关的 JS 代码集中在一起，相较于内联脚本，代码结构更清晰，适合实现页面特定部分的交互逻辑。
最后一种方法是使用外部脚本。首先创建一个独立的 .js 文件，将 JS 代码写在其中。例如，创建 script.js 文件并写入：
function showMessage() {
console.log('这是来自外部脚本的消息');
}
然后在 HTML 文件中通过 script 标签的 src 属性引入这个外部文件：
<!DOCTYPE html>
<html>
<head>
<title>外部脚本示例</title>
<script src="script.js"></script>
</head>
<body>
<button onclick="showMessage()">点击显示消息</button>
</body>
</html>
使用外部脚本有利于代码的复用和维护，多个页面可以引用同一个 .js 文件。外部脚本文件可以被浏览器缓存，提高页面加载速度。
掌握在 HTML 中嵌入 JS 的不同方法，并根据实际需求灵活运用，是网页开发者必备的技能，能够帮助创建出功能强大且富有交互性的网站。