HTML 和 JavaScript 关联的基础教程

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

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

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

html 复制代码

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

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）:

javascript 复制代码

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

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

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

html 复制代码

<!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 元素的内容、样式或结构。

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 属性，可以控制脚本的加载和执行时机，优化页面性能。

html 复制代码

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

总结

HTML 和 JavaScript 的关联方式多种多样，可以根据需求选择适合的方法。内联方式适合简单脚本，外部引入适合复杂逻辑，事件监听和 DOM 操作则提供了更高的灵活性和控制力。