JS 文件怎么引入 HTML|极客笔记

JS 文件怎么引入 HTML

在 Web 开发中，我们经常需要使用 JavaScript 来实现网页的交互功能和动态效果。为了在 HTML 文件中使用 JavaScript，我们需要将 JavaScript 文件引入到 HTML 文件中。本文将详细介绍如何引入 JS 文件到 HTML 文件中。

内部引入

一种方法是将 JavaScript 代码直接写在 HTML 文件中，可以在 <script> 标签内部编写 JavaScript 代码，如下所示：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Internal JavaScript</title>
</head>
<body>
    <h1>Internal JavaScript Example</h1>

    <script>
        alert('Hello, World!');
    </script>
</body>
</html>

在上面的示例中，我们在 <script> 标签内部编写了一个 alert('Hello, World!'); 的 JavaScript 代码。当打开这个 HTML 文件时，就会弹出一个提示框显示 “Hello, World!”。

外部引入

通常我们会将 JavaScript 代码写在单独的 JS 文件中，然后在 HTML 文件中引入这些 JS 文件。这种方式的好处是可以将 JavaScript 代码和 HTML 代码分离，使得代码结构更清晰。

首先，我们需要创建一个 JavaScript 文件，例如 app.js，并将 JavaScript 代码写在这个文件中，例如：

// app.js
alert('Hello, World from External JavaScript!');

然后，在 HTML 文件中使用 <script> 标签引入这个外部的 JS 文件，如下所示：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>External JavaScript</title>
    <script src="app.js"></script>
</head>
<body>
    <h1>External JavaScript Example</h1>
</body>
</html>

在上面的示例中，我们使用 <script src="app.js"></script> 引入了外部的 app.js 文件。当打开这个 HTML 文件时，同样会弹出一个提示框显示 “Hello, World from External JavaScript!”。

值得注意的是，外部引入 JS 文件时，通常会放在 <head> 标签内或者 <body> 标签底部。如果放在 <head> 标签内的话，会在页面加载时先加载 JS 文件，而如果放在底部的话，会在页面加载完后再加载 JS 文件，可以提升页面加载速度和性能。

使用 `defer` 属性

另外，还有一种方式是使用 <script> 标签的 defer 属性，可以延迟 JS 文件的加载和执行，直到 HTML 解析完成。使用 defer 属性可以保证 JS 文件在 HTML 文件解析完成前不会执行，而且会按照在 HTML 文档中的顺序依次执行。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Deferred JavaScript</title>
    <script src="app.js" defer></script>
</head>
<body>
    <h1>Deferred JavaScript Example</h1>
</body>
</html>

使用 defer 属性可以避免 JS 文件阻塞页面加载，并且可以在 HTML 文件解析完成后再执行 JS 文件。

使用 `async` 属性

除了 defer 属性外，还可以使用 <script> 标签的 async 属性实现异步加载 JS 文件。使用 async 属性可以让 JS 文件在加载完成后立即执行，而不会阻塞后续页面的加载。需要注意的是，async 属性会打乱 JS 文件的顺序执行。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Async JavaScript</title>
    <script src="app.js" async></script>
</head>
<body>
    <h1>Async JavaScript Example</h1>
</body>
</html>

使用 async 属性可以提高页面加载的速度，但是可能会导致 JS 文件执行的顺序混乱。一般来说，在不需要保证 JS 文件顺序执行的情况下，可以使用 async 属性。