环境搭建 - 浏览器环境 - 在 HTML 中嵌入 JavaScript

在前端开发的世界里，HTML 负责构建网页的结构，CSS 为网页增添绚丽的外观，而 JavaScript 则赋予网页交互性和动态性。今天，我们就来探索如何在 HTML 中嵌入 JavaScript，让我们的网页“活”起来。

为什么要在 HTML 中嵌入 JavaScript

想象一下，你设计了一个精美的网页，有漂亮的图片和布局，但用户点击按钮却没有任何反应，页面也不会根据用户的操作发生变化。这时候，JavaScript 就派上用场了。它可以让按钮响应点击事件，根据用户输入进行计算，动态地更新页面内容，为用户带来更加丰富和有趣的体验。

嵌入 JavaScript 的方式

1. 内联脚本

内联脚本是将 JavaScript 代码直接写在 HTML 标签的事件属性中。这种方式简单直接，但不推荐在大型项目中使用，因为它会让 HTML 代码变得复杂，不利于维护。

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

在这个例子中，当用户点击按钮时，会弹出一个提示框显示“你点击了我！”。

2. 内部脚本

内部脚本是将 JavaScript 代码放在 HTML 文件的 <script> 标签中。通常，<script> 标签会放在 <head> 或 <body> 标签内。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>内部脚本示例</title>
    <script>
        function sayHello() {
            alert('Hello, World!');
        }
    </script>
</head>
<body>
    <button onclick="sayHello()">点击打招呼</button>
</body>
</html>

在这个例子中，我们在 <head> 标签内定义了一个 sayHello 函数，当用户点击按钮时，会调用这个函数并弹出提示框显示“Hello, World!”。

3. 外部脚本

外部脚本是将 JavaScript 代码放在一个单独的 .js 文件中，然后在 HTML 文件中通过 <script> 标签引入。这种方式有利于代码的复用和维护，是大型项目中常用的方式。

首先，创建一个名为 script.js 的文件，内容如下：

function showMessage() {
    alert('这是外部脚本的消息！');
}

然后，在 HTML 文件中引入这个脚本：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>外部脚本示例</title>
    <script src="script.js"></script>
</head>
<body>
    <button onclick="showMessage()">点击显示消息</button>
</body>
</html>

总结

嵌入方式	优点	缺点	适用场景
内联脚本	简单直接，无需额外文件	代码耦合度高，不利于维护	小型简单页面
内部脚本	代码集中在 HTML 文件中，便于管理	HTML 文件体积增大，不利于复用	小型项目
外部脚本	代码复用性高，便于维护	需要额外的文件管理	大型项目

通过以上三种方式，我们可以在 HTML 中轻松嵌入 JavaScript，为网页增添交互性和动态性。希望大家在实际开发中能够根据项目的需求选择合适的嵌入方式，让我们的网页更加精彩！