在网页开发中，JavaScript 可以通过不同的方式引入到 HTML 文档中，每种方式都有其适用场景。本文将详细介绍三种种常用的 JavaScript 引入方法，并提供完整的演示代码。

1.内联方式（Inline）内联方式是将 JavaScript 代码直接写在 HTML 标签的事件属性中，如 onclick、onload 等。这种方式通常用于简单的交互逻辑。

完整示例代码：

内联方式引入JavaScript示例

点击我（内联JS）

鼠标移到我上面会变色（内联JS效果）

特点：

代码直接写在 HTML 标签内适合非常简单的交互逻辑不便于代码复用和维护会导致 HTML 和 JavaScript 代码混杂

2.内部脚本（Internal）内部脚本是将 JavaScript 代码写在 HTML 文档的 script 标签内，通常放在 head 或 body 中。

完整示例代码：

内部脚本引入JavaScript示例

点击修改文本

这是一段可以被修改的文本

特点：

代码集中在 script 标签内可以在同一个 HTML 文件中多次使用适合中等复杂度的脚本仍然与 HTML 文档混合在一起

3.外部脚本（External）外部脚本是将 JavaScript 代码写在独立的 .js 文件中，然后在 HTML 文档中通过 script 标签的 src 属性引入。这是最推荐的方式。

完整示例代码：

首先创建 JavaScript 文件 external-script.js：

外部脚本引入JavaScript示例

点击我（外部JS）

特点：

代码与 HTML 完全分离，便于维护可以在多个页面中复用同一个 JS 文件浏览器可以缓存外部 JS 文件，提高加载速度适合大型项目和复杂逻辑通过 defer 或 async 属性可以控制加载和执行时机

总结三种引入方式各有优缺点，选择哪种方式取决于项目需求：

内联方式：适用于非常简单的交互，不推荐大量使用内部脚本：适用于中小型页面，逻辑相对简单的情况外部脚本：是最佳实践，适用于大多数项目，特别是需要代码复用和维护的场景

在实际开发中，应尽量采用外部脚本的方式，保持 HTML 和 JavaScript 代码的分离，提高代码的可维护性和复用性。