📌  相关文章
📜  如何在 html 中引用 javascript 文件 - Javascript (1)

📅  最后修改于: 2023-12-03 15:38:16.561000             🧑  作者: Mango

如何在 HTML 中引用 JavaScript 文件 - JavaScript

在 HTML 中，我们可以通过 script 标签来引用 JavaScript 文件。下面我们来一步步介绍如何实现。

步骤一：创建 JavaScript 文件

首先，我们需要创建一个 JavaScript 文件，将其中的代码保存到一个名为 example.js 的文件中。

function hello() {
  alert('Hello, world!');
}
步骤二：在 HTML 文件中添加 script 标签

在 HTML 文件的 head 或 body 中，我们可以使用 script 标签来引用 JavaScript 文件。我们可以直接使用 script 标签的 src 属性引用 example.js 文件。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>如何在 HTML 中引用 JavaScript 文件</title>
    <script src="example.js"></script>
  </head>
  <body>
    <button onclick="hello()">Hello world</button>
  </body>
</html>

此时，我们可以通过按钮的点击事件调用 example.js 中定义的 hello 函数。

步骤三：加载外部 JavaScript 文件的其他方法

除了使用 script 标签引用外部 JavaScript 文件，我们还可以通过以下方式来加载 JavaScript 文件：

1. 动态创建 script 标签

通过 JavaScript 动态创建 script 标签，并将其添加到 HTML 的 body 中。

var script = document.createElement('script');
script.src = 'example.js';
document.body.appendChild(script);
2. 使用 require.js 或其他模块加载器

使用模块加载器（如 require.js）可以方便地加载和管理 JavaScript 文件。

结论

通过 script 标签可以轻松地在 HTML 文档中引用外部的 JavaScript 文件，同时我们还介绍了动态创建 script 标签和使用模块加载器来加载 JavaScript 文件。