html 包含 js 文件烧瓶 - Javascript (1)

📌 相关文章

📜 html 包含 js 文件烧瓶 - Javascript (1)

📅 最后修改于: 2023-12-03 14:41:54.879000 🧑 作者: Mango

HTML 包含 JS 文件介绍

当我们需要在 HTML 中使用 JavaScript 的时候，可以使用 <script> 标签将 JavaScript 代码写入 HTML 文件内。但是，如果我们的 JavaScript 代码非常大，或者我们需要在多个 HTML 文件中使用相同的 JavaScript 代码，那么将所有 JavaScript 代码都写在 HTML 文件内将变得非常不方便。

为了解决这个问题，我们可以将 JavaScript 代码写入一个独立的 .js 文件中，并通过在 HTML 文件内引用该文件的方式来使用该 JavaScript 代码。下面我们来看看如何将 JavaScript 代码写入 JavaScript 文件并在 HTML 文件中引用。

写入 JavaScript 文件

新建一个 js 文件，例如 myscript.js。
将需要的 JavaScript 代码写入 myscript.js 文件内，例如：

function sayHello() {
  alert("Hello World!");
}

在 HTML 文件中引入 JavaScript 文件

在 HTML 文件内，使用 <script> 标签来引用 myscript.js 文件，例如：

<!DOCTYPE html>
<html>
  <head>
    <title>HTML 包含 JS 文件介绍</title>
  </head>
  <body>

    <h1>HTML 包含 JS 文件介绍</h1>
    
    <button onclick="sayHello()">Say Hello</button>

    <script src="myscript.js"></script>

  </body>
</html>

在 HTML 文件内，使用 <script> 标签来嵌入 JavaScript 代码并修改需要内容展示，例如：

<!DOCTYPE html>
<html>
  <head>
    <title>HTML 包含 JS 文件介绍</title>
  </head>
  <body>

    <h1>HTML 包含 JS 文件介绍</h1>
    
    <button onclick="sayHello()">Say Hello</button>

    <script>
      function sayHello() {
        alert("Hello World!");
      }
    </script>

  </body>
</html>

总结

使用 JavaScript 文件可以帮助我们更好地管理 JavaScript 代码，同时也让代码更易于维护。在 HTML 文件中引入 JavaScript 文件只需要使用 <script> 标签，即可实现代码的重用和扩展。