📌  相关文章
📜  将外部 JavaScript 添加到 HTML (1)

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

将外部 JavaScript 添加到 HTML

在 HTML 页面中，我们可以通过引入外部 JavaScript 文件来添加 JavaScript 的功能。这种方式使得我们可以在多个 HTML 页面中使用相同的 JavaScript 代码，从而避免重复编写代码，提高开发效率。

步骤

引入外部 JavaScript 文件的步骤如下：

  1. 创建 JavaScript 文件，例如 script.js，并编写 JavaScript 代码。
  2. 在 HTML 页面的 <head> 标签中通过 <script> 标签引入 JavaScript 文件。
<!DOCTYPE html>
<html>
  <head>
    <script src="script.js"></script>
  </head>
  <body>
  </body>
</html>

在上述代码中，src 属性指定了要引入的 JavaScript 文件的路径。可以是绝对路径或相对路径。如果文件在同一目录下，则可以使用相对路径。

引入多个 JavaScript 文件

如果需要引入多个 JavaScript 文件，则可以在 <head> 标签中使用多个 <script> 标签，每个标签引入一个文件。并且，为了确保每个文件按顺序加载，应该按顺序书写 <script> 标签。

<!DOCTYPE html>
<html>
  <head>
    <script src="script1.js"></script>
    <script src="script2.js"></script>
  </head>
  <body>
  </body>
</html>
引入外部 JavaScript 库

除了自己编写的 JavaScript 文件，还有许多优秀的 JavaScript 库供我们使用，例如 jQuery、Bootstrap 等。这些库一般需要下载到本地，然后通过 <script> 标签引入。

<!DOCTYPE html>
<html>
  <head>
    <script src="jquery.min.js"></script>
    <script src="bootstrap.min.js"></script>
  </head>
  <body>
    <nav class="navbar">
      <a class="navbar-brand" href="#">Navbar</a>
    </nav>
  </body>
</html>
总结

通过引入外部 JavaScript 文件，可以提高开发效率、减少代码重复量，并且方便管理和维护代码。在实际开发中，应该遵循一定的规范和约定，以确保 JavaScript 文件的正确引入和运行。