html中怎么引入js函数

在网页设计的世界里，JavaScript 是一种非常强大的脚本语言，它能让网页变得生动起来，实现各种互动功能，想要在 HTML 中引入 JavaScript 函数，有几种方法可以轻松实现，下面，我就来详细聊聊如何在 HTML 中巧妙地嵌入 JS 函数。

### 内联方式

最直接的方式就是在 HTML 标记中直接使用 JavaScript，你可以在按钮的点击事件中直接写入 JS 代码：

```html

```

这种方式简单直接，但不太适合复杂的逻辑，因为它会使得 HTML 代码变得混乱，难以维护。

### 外部文件引入

对于更复杂的项目，推荐将 JavaScript 代码放在单独的文件中，这样做的好处是代码分离，易于管理和维护，你可以创建一个 `.js` 文件，比如叫做 `script.js`，然后将它引入到 HTML 中：

```html

```

在 `script.js` 文件中，你可以定义一个函数：

```javascript

function sayHello() {

alert('Hello, World!');

```

然后在 HTML 中，你可以通过 `onclick` 属性来调用这个函数：

```html

```

```

同样可以在 HTML 中通过 `onclick` 属性调用这个函数：

```html

```

### 模块化

```

在 `script.js` 中，你可以这样定义模块：

```javascript

export function sayHello() {

alert('Hello, World!');

```

这种方式可以让你的代码更加模块化，便于管理和复用。

### 异步加载

如果你的 JavaScript 文件很大，或者你想在页面加载完成后再加载 JavaScript，可以使用异步加载的方式：

```html

```

`defer` 属性告诉浏览器在文档解析完成后，但在执行之前异步加载脚本。

### 动态脚本加载

你可能需要根据某些条件动态地加载 JavaScript 文件，这可以通过 JavaScript 代码来实现：

```html

```

你可以根据需要调用 `loadScript()` 函数来动态加载脚本。

就是在 HTML 中引入 JavaScript 函数的几种常见方法，每种方法都有其适用场景，选择合适的方式可以让你的网页开发更加高效和有序，希望这些信息能帮助你在构建网页时更加得心应手。