HTML 与 JavaScript 的结合

天天向上

发布： 2025-02-22 14:16:53

原创

130 人浏览过

HTML 和 JavaScript 是构建 Web 应用的两大核心技术。HTML 用于构建页面的结构，而 JavaScript 用于增加页面的动态功能。HTML 与 JavaScript 的结合使得 Web 页面能够响应用户的交互，处理复杂的逻辑，更新页面内容等。

以下是 HTML 与 JavaScript 结合的几个重要概念和示例：

1. 在 HTML 中嵌入 JavaScript

1.1. `<script>` 标签

在 HTML 文件中，JavaScript 代码通常通过 <script> 标签嵌入。<script> 标签可以放在 HTML 文档的 <head> 部分，也可以放在 <body> 部分，甚至可以将外部 JavaScript 文件引入页面。

1.1.1. 内嵌 JavaScript

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>HTML 与 JavaScript 示例</title>
</head>
<body>
  <h1>欢迎来到我的网站</h1>

  <button onclick="changeText()">点击我</button>

  <script>
    function changeText() {
      document.querySelector('h1').textContent = '你点击了按钮！';
    }
  </script>
</body>
</html>

在这个示例中，当用户点击按钮时，JavaScript 函数 changeText() 会更改页面中 <h1> 标签的文本内容。

1.1.2. 外部 JavaScript 文件

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>HTML 与 JavaScript 示例</title>
</head>
<body>
  <h1>欢迎来到我的网站</h1>

  <button onclick="changeText()">点击我</button>

  <script src="script.js"></script>
</body>
</html>

script.js 文件内容：

function changeText() {
  document.querySelector('h1').textContent = '你点击了按钮！';
}

通过 src 属性，外部 JavaScript 文件被引入到 HTML 页面中，提供了更好的代码组织方式。

2. JavaScript 操作 DOM

DOM（文档对象模型）是 HTML 和 XML 文档的编程接口。JavaScript 可以通过 DOM 来访问和操作 HTML 元素，实现动态更新内容、响应用户交互等功能。

2.1. 选择和修改 DOM 元素

JavaScript 提供了多种方法来选择 DOM 元素，例如 document.getElementById(), document.querySelector(), document.querySelectorAll() 等。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>DOM 操作</title>
</head>
<body>
  <h1 id="heading">原始标题</h1>
  <button id="changeBtn">改变标题</button>

  <script>
    const button = document.getElementById('changeBtn');
    const heading = document.getElementById('heading');

    button.addEventListener('click', function() {
      heading.textContent = '标题已更改！';
    });
  </script>
</body>
</html>

在此示例中，当用户点击按钮时，JavaScript 通过 getElementById 获取 <h1> 元素，并通过 textContent 修改标题内容。

3. JavaScript 事件处理

JavaScript 可以响应用户在 HTML 页面上的操作，比如点击按钮、提交表单、鼠标移动等。事件处理器用于捕捉和响应这些事件。

3.1. 事件监听器

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>事件监听器</title>
</head>
<body>
  <button id="clickMe">点击我</button>

  <script>
    const button = document.getElementById('clickMe');

    // 添加事件监听器
    button.addEventListener('click', function() {
      alert('按钮被点击了！');
    });
  </script>
</body>
</html>

在此示例中，addEventListener 用于绑定一个点击事件，当按钮被点击时会弹出一个提示框。

3.2. 内联事件处理器

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>内联事件处理</title>
</head>
<body>
  <button onclick="alert('按钮被点击了！')">点击我</button>
</body>
</html>

这种方式将 JavaScript 代码直接写在 HTML 标签的事件属性中。不过，推荐使用外部脚本和事件监听器的方式，这样更符合分离结构和行为的设计理念。

4. 动态内容更新

JavaScript 可以动态地更新 HTML 内容，实现用户交互时页面的即时变化，无需重新加载整个页面。

4.1. 动态创建和删除元素

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>动态创建元素</title>
</head>
<body>
  <div id="container"></div>
  <button id="addBtn">添加新元素</button>

  <script>
    const container = document.getElementById('container');
    const addButton = document.getElementById('addBtn');

    addButton.addEventListener('click', function() {
      const newElement = document.createElement('p');
      newElement.textContent = '这是一个新创建的段落元素！';
      container.appendChild(newElement);
    });
  </script>
</body>
</html>

当用户点击按钮时，JavaScript 会创建一个新的 <p> 元素，并将其添加到页面中的 <div id="container"> 容器中。

5. 使用 JavaScript 与表单交互

JavaScript 可以用于处理表单数据、验证表单字段和提交表单等。

5.1. 表单验证

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>表单验证</title>
</head>
<body>
  <form id="myForm">
    <label for="name">姓名:</label>
    <input type="text" id="name" name="name" required>
    <button type="submit">提交</button>
  </form>

  <script>
    const form = document.getElementById('myForm');

    form.addEventListener('submit', function(event) {
      const name = document.getElementById('name').value;
      if (name === '') {
        alert('姓名不能为空');
        event.preventDefault(); // 阻止表单提交
      }
    });
  </script>
</body>
</html>

在此示例中，JavaScript 在表单提交时检查是否填写了姓名字段。如果没有填写，阻止表单提交并提示用户。

总结

HTML 和 JavaScript 的结合能够使 Web 页面更具动态性和交互性。通过 JavaScript，我们可以操作 DOM 元素、处理用户事件、动态更新内容、进行表单验证等。通过合理的组合和使用 HTML 和 JavaScript，可以构建功能丰富、用户友好的 Web 应用。