调用外部 JavaScript 文件有两种主要方法：使用 <script> 标签指定 JavaScript 文件的 URL。使用 defer 或 async 属性控制 JavaScript 文件的加载和执行方式。此外，可以通过 onclick 事件调用 JavaScript 函数或方法。

如何调用外部 JavaScript 文件

在 HTML 文档中调用外部 JavaScript 文件有两种主要方法：

1. <script> 标签

<script> 标签用于在 HTML 文档中加载外部 JavaScript 文件。它具有一个 src 属性，用于指定 JavaScript 文件的 URL：

<code class="html"><script src="my-script.js"></script></code>

2. defer 和 async 属性

defer 和 async 属性可以控制 JavaScript 文件的加载方式：

• defer：浏览器在加载完 HTML 文档后加载外部 JavaScript 文件，但执行脚本之前会解析 HTML 文档。这确保了 DOM 在 JavaScript 执行之前就绪。
• async：浏览器在解析 HTML 文档的同时加载外部 JavaScript 文件，并且在脚本加载后立即执行。

<code class="html"><script src="my-script.js" defer></script>
<script src="my-script.js" async></script></code>

调用 JavaScript 方法

一旦外部 JavaScript 文件加载完毕，就可以从 HTML 文档中调用其函数或方法：

<code class="html"><button onclick="myFunction()">Click Me</button>

<script>
  function myFunction() {
    // JavaScript 代码
  }
</script></code>

注意：

• 确保外部 JavaScript 文件的 URL 正确，否则浏览器将无法加载它。
• defer 和 async 属性可以提高页面加载性能，但可能会影响 JavaScript 执行顺序。
• 如果 JavaScript 文件包含依赖项，则需要先加载依赖项，然后再加载主脚本。