在HTML中引入JavaScript的方法包括：内联脚本、内部脚本、外部脚本、异步加载、延迟加载。其中，外部脚本是最推荐的方式，因为它有助于代码的可维护性和页面加载速度。下面我们将详细介绍这些方法，并提供代码示例。
一、内联脚本
内联脚本是将JavaScript代码直接嵌入到HTML元素的事件属性中。这种方法简单直接，但不推荐用于复杂的应用程序，因为它会增加HTML的复杂度和维护难度。
示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Inline Script Example</title>
</head>
<body>
<button onclick="alert('Hello, World!')">Click Me</button>
</body>
</html>
二、内部脚本
内部脚本是将JavaScript代码放在HTML文档的<script>标签内。这种方法适用于小型项目或简单的功能，但对于大型项目，仍然推荐使用外部脚本。
示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Internal Script Example</title>
<script>
function showMessage() {
alert('Hello, World!');
}
</script>
</head>
<body>
<button onclick="showMessage()">Click Me</button>
</body>
</html>
三、外部脚本
外部脚本是将JavaScript代码放在单独的.js文件中，然后在HTML文档中通过<script>标签引入。这种方法有助于分离HTML和JavaScript代码，提升代码的可维护性和可复用性。
示例：
HTML文件：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>External Script Example</title>
<script src="script.js"></script>
</head>
<body>
<button onclick="showMessage()">Click Me</button>
</body>
</html>
JavaScript文件（script.js）：
function showMessage() {
alert('Hello, World!');
}
四、异步加载
异步加载是通过在<script>标签中添加async属性，使得外部JavaScript文件可以异步加载。这种方法适用于不依赖于其他脚本或DOM的JavaScript文件，从而加快页面的加载速度。
示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Async Script Example</title>
<script async src="script.js"></script>
</head>
<body>
<button onclick="showMessage()">Click Me</button>
</body>
</html>
五、延迟加载
延迟加载是通过在<script>标签中添加defer属性，使得外部JavaScript文件在HTML文档完全解析后再执行。这种方法适用于依赖于DOM的JavaScript文件。
示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Defer Script Example</title>
<script defer src="script.js"></script>
</head>
<body>
<button onclick="showMessage()">Click Me</button>
</body>
</html>
六、使用模块化引入
现代JavaScript可以使用ES6模块化语法，通过type="module"属性来引入外部JavaScript文件。这种方法可以更好地组织代码，并支持模块化编程。
示例：
HTML文件：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Module Example</title>
<script type="module" src="main.js"></script>
</head>
<body>
<button onclick="showMessage()">Click Me</button>
</body>
</html>
JavaScript文件（main.js）：
import { showMessage } from './utils.js';
document.querySelector('button').addEventListener('click', showMessage);
JavaScript文件（utils.js）：
export function showMessage() {
alert('Hello, World!');
}
七、总结
在HTML中引入JavaScript的方式多种多样，选择适合的方式可以提升项目的可维护性和性能。外部脚本是最推荐的方式，特别是在大型项目中，它有助于分离关注点，提升代码的可读性和可维护性。此外，异步加载和延迟加载的方式可以优化页面的加载速度，提升用户体验。
在实际项目中，使用研发项目管理系统PingCode和通用项目协作软件Worktile，可以帮助团队更好地管理和协作，提升开发效率。
相关问答FAQs：
1. 如何在HTML中引入JavaScript？
在HTML中引入JavaScript有两种常见的方式。第一种是使用<script>标签直接嵌入JavaScript代码，例如：
<script>
// 这里是JavaScript代码
</script>
第二种是通过<script>标签引入外部的JavaScript文件，例如：
<script src="script.js"></script>
请注意，script.js是你要引入的JavaScript文件的路径。确保路径正确，并且文件名和扩展名正确。
2. 如何将JavaScript代码嵌入到HTML中？
可以使用<script>标签将JavaScript代码嵌入到HTML中。例如，如果你想在HTML文件中插入一段JavaScript代码，可以这样写：
<script>
function myFunction() {
// 这里是JavaScript代码
}
</script>
在需要调用JavaScript函数的地方，可以直接调用myFunction()。
3. 如何在HTML中引入外部的JavaScript文件？
要在HTML中引入外部的JavaScript文件，需要使用<script>标签，并指定外部文件的路径。例如，如果你有一个名为script.js的JavaScript文件，并且它位于与HTML文件相同的目录下，可以这样引入：
<script src="script.js"></script>
确保路径和文件名正确，这样浏览器就可以正确加载和执行外部的JavaScript文件了。
文章包含AI辅助创作，作者：Edit1，如若转载，请注明出处：https://docs.pingcode.com/baike/3880056
