📌  相关文章
📜  在 html 中调用 javascript 文件(1)

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

在 HTML 中调用 JavaScript 文件

在 HTML 文档中，可以通过 <script> 元素来调用 JavaScript 代码或文件。

在 HTML 中直接引用 JavaScript 代码

可以在 HTML 文件中使用 <script> 元素来嵌入 JavaScript 代码。具体例子如下：

<!DOCTYPE html>
<html>
  <head>
    <title>Example</title>
  </head>
  <body>
    <h1>Hello World</h1>
    <script>
      console.log("Hello, World!");
    </script>
  </body>
</html>

在上述代码中，<script> 元素中包含的代码会被浏览器执行。

在 HTML 中调用 JavaScript 文件

为了方便维护和复用代码，我们通常会将 JavaScript 代码写在一个单独的文件中，然后在 HTML 中调用。具体例子如下：

  1. 创建一个名为 main.js 的 JavaScript 文件，将代码写入其中。
console.log("Hello, World!");
  1. 在 HTML 文件中使用 <script> 元素来调用 JavaScript 文件。
<!DOCTYPE html>
<html>
  <head>
    <title>Example</title>
  </head>
  <body>
    <h1>Hello World</h1>
    <script src="main.js"></script>
  </body>
</html>

在上述代码中，<script> 元素的 src 属性指定了要调用的 JavaScript 文件的路径。因此，浏览器会自动下载并执行 main.js 文件中的代码。

延迟执行和异步执行 JavaScript 文件

默认情况下，HTML 解析器在遇到 <script> 元素时会停止解析并等待 JavaScript 文件的下载与执行。因此，为了提高页面加载速度，我们通常会将 JavaScript 文件的调用放在 HTML 文档的末尾，或添加 defer 或 async 属性。

  • 延迟执行：defer 属性可以让浏览器在 HTML 解析完成后再去下载并执行 JavaScript 文件。
<!DOCTYPE html>
<html>
  <head>
    <title>Example</title>
  </head>
  <body>
    <h1>Hello World</h1>
    <script defer src="main.js"></script>
  </body>
</html>
  • 异步执行：async 属性可以让浏览器在下载 JavaScript 文件的同时继续解析 HTML 文档，但不保证 JavaScript 文件的执行顺序。
<!DOCTYPE html>
<html>
  <head>
    <title>Example</title>
  </head>
  <body>
    <h1>Hello World</h1>
    <script async src="main.js"></script>
  </body>
</html>

以上是在 HTML 中调用 JavaScript 文件的基本知识点。我们可以通过调用 JavaScript 文件实现更加复杂的功能，例如动态加载库、实现交互效果等。