当前位置：首页 > ops >正文

HTML 和 JavaScript 关联的基础教程

ops 2025/8/30 10:45:30

HTML 和 JavaScript 是构建现代网页的核心技术。HTML 负责页面结构，JavaScript 负责动态交互。以下是两者的基本关联方式。

内联方式：直接在 HTML 中嵌入 JavaScript

在 HTML 文件中，可以通过 <script> 标签直接编写 JavaScript 代码。这种方式适合小型脚本或快速测试。

<!DOCTYPE html>
<html>
<head><title>内联 JavaScript 示例</title>
</head>
<body><h1 id="demo">Hello World!</h1><button onclick="changeText()">点击我</button><script>function changeText() {document.getElementById("demo").innerHTML = "文本已改变！";}</script>
</body>
</html>

外部引入：链接独立的 JavaScript 文件

对于复杂的逻辑，通常将 JavaScript 代码保存在独立的 .js 文件中，然后通过 <script> 标签的 src 属性引入。

HTML 文件（index.html）:

<!DOCTYPE html>
<html>
<head><title>外部 JavaScript 示例</title>
</head>
<body><h1 id="demo">Hello World!</h1><button onclick="changeText()">点击我</button><!-- 引入外部 JavaScript 文件 --><script src="script.js"></script>
</body>
</html>

JavaScript 文件（script.js）:

function changeText() {document.getElementById("demo").innerHTML = "文本已改变！";
}

事件监听：通过 JavaScript 动态绑定事件

除了在 HTML 中直接绑定事件（如 onclick），还可以通过 JavaScript 动态添加事件监听器，这种方式更灵活且易于维护。

<!DOCTYPE html>
<html>
<head><title>事件监听示例</title>
</head>
<body><h1 id="demo">Hello World!</h1><button id="myButton">点击我</button><script>document.getElementById("myButton").addEventListener("click", function() {document.getElementById("demo").innerHTML = "文本已改变！";});</script>
</body>
</html>

DOM 操作：动态修改 HTML 内容

JavaScript 可以通过 DOM（文档对象模型）接口动态修改 HTML 元素的内容、样式或结构。

<!DOCTYPE html>
<html>
<head><title>DOM 操作示例</title>
</head>
<body><h1 id="demo">Hello World!</h1><button id="myButton">点击我</button><script>const button = document.getElementById("myButton");const heading = document.getElementById("demo");button.addEventListener("click", function() {heading.innerHTML = "文本已改变！";heading.style.color = "red";});</script>
</body>
</html>

异步加载：延迟或异步执行脚本

通过 <script> 标签的 defer 或 async 属性，可以控制脚本的加载和执行时机，优化页面性能。

<!DOCTYPE html>
<html>
<head><title>异步加载示例</title><!-- 延迟执行，等到 HTML 解析完成后再运行 --><script src="script.js" defer></script>
</head>
<body><h1 id="demo">Hello World!</h1><button id="myButton">点击我</button>
</body>
</html>