正文

HTML中链接.js文件的方法：快速掌握添加JavaScript脚本步骤

/0 浏览量
0820

在HTML文档中添加JavaScript脚本，可以让你的网页实现更多动态效果和交互功能。以下是一步一步的指南，帮助你快速掌握如何在HTML中链接.js文件。

步骤一：创建JavaScript文件

首先，你需要创建一个JavaScript文件，通常我们将其命名为script.js。在这个文件中，你可以编写JavaScript代码，实现各种功能。

// script.js
function sayHello() {
    alert('Hello, World!');
}

步骤二：在HTML文件中引用JavaScript文件

要在HTML文件中引用你的JavaScript文件，你有两种方法：内联脚本和外部脚本。

方法一：内联脚本

内联脚本是指在HTML文件中直接写入JavaScript代码。这适用于简单的脚本，但不推荐用于复杂的脚本，因为它会使得HTML文件变得冗长。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Example Page</title>
</head>
<body>
    <h1>这是一个示例页面</h1>
    <button onclick="sayHello()">点击我</button>

    <script>
        function sayHello() {
            alert('Hello, World!');
        }
    </script>
</body>
</html>

方法二：外部脚本

外部脚本是指将JavaScript代码保存在一个单独的文件中，然后在HTML文件中引用它。这是推荐的做法，因为它可以将HTML和JavaScript代码分离，使文件结构更清晰。

步骤2.1：在HTML文件中添加<script>标签

在HTML文件的<head>或<body>部分添加一个<script>标签，并设置其src属性为你的JavaScript文件的路径。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Example Page</title>
    <script src="script.js"></script>
</head>
<body>
    <h1>这是一个示例页面</h1>
    <button onclick="sayHello()">点击我</button>
</body>
</html>

步骤2.2：确保文件路径正确

确保HTML文件和JavaScript文件位于同一目录下，或者提供正确的相对路径或绝对路径。

步骤三：测试你的脚本

保存所有文件，并在浏览器中打开HTML文件。点击按钮，你应该会看到一个弹窗显示“Hello, World!”。

总结

通过以上步骤，你已经学会了如何在HTML中链接.js文件。记住，使用外部脚本可以使你的网页结构更清晰，便于维护和扩展。随着你技能的提升，你可以尝试编写更复杂的JavaScript代码，让你的网页变得更加生动和有趣。

-- 展开阅读全文 --