在网页开发中，JavaScript 可以通过不同的方式引入到 HTML 文档中，每种方式都有其适用场景。本文将详细介绍三种种常用的 JavaScript 引入方法，并提供完整的演示代码。
1.内联方式（Inline）
内联方式是将 JavaScript 代码直接写在 HTML 标签的事件属性中，如 onclick、onload 等。这种方式通常用于简单的交互逻辑。
完整示例代码：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>内联方式引入JS</title>
</head>
<body>
<h1>内联方式引入JavaScript示例</h1>
<!-- 内联事件处理器 -->
<button onclick="alert('按钮被点击了！这是内联JS效果')">
点击我（内联JS）
</button>
<p onmouseover="this.style.color='red'" onmouseout="this.style.color='black'">
鼠标移到我上面会变色（内联JS效果）
</p>
</body>
</html>
特点：
代码直接写在 HTML 标签内
适合非常简单的交互逻辑
不便于代码复用和维护
会导致 HTML 和 JavaScript 代码混杂
2.内部脚本（Internal）
内部脚本是将 JavaScript 代码写在 HTML 文档的 script 标签内，通常放在 head 或 body 中。
完整示例代码：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>内部脚本引入JS</title>
<!-- 内部脚本，放在head中 -->
<script>
// 页面加载完成后执行
window.onload = function() {
console.log('页面加载完成！');
showWelcomeMessage();
}
function showWelcomeMessage() {
alert('欢迎访问本页面！这是内部JS效果');
}
</script>
</head>
<body>
<h1>内部脚本引入JavaScript示例</h1>
<button onclick="changeText()">点击修改文本</button>
<p id="demo">这是一段可以被修改的文本</p>
<!-- 也可以在body底部放置script标签 -->
<script>
function changeText() {
document.getElementById('demo').innerHTML = '文本已被内部JS修改！';
document.getElementById('demo').style.color = 'blue';
}
</script>
</body>
</html>
特点：
代码集中在 script 标签内
可以在同一个 HTML 文件中多次使用
适合中等复杂度的脚本
仍然与 HTML 文档混合在一起
3.外部脚本（External）
外部脚本是将 JavaScript 代码写在独立的 .js 文件中，然后在 HTML 文档中通过 script 标签的 src 属性引入。这是最推荐的方式。
完整示例代码：
首先创建 JavaScript 文件 external-script.js：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>外部脚本引入JS</title>
<!-- 引入外部JS文件 -->
<script src="external-script.js" defer></script>
</head>
<body>
<h1>外部脚本引入JavaScript示例</h1>
<button id="externalBtn">点击我（外部JS）</button>
<div id="message"></div>
<!-- 也可以在body底部引入 -->
<!-- <script src="external-script.js"></script> -->
</body>
</html>
特点：
代码与 HTML 完全分离，便于维护
可以在多个页面中复用同一个 JS 文件
浏览器可以缓存外部 JS 文件，提高加载速度
适合大型项目和复杂逻辑
通过 defer 或 async 属性可以控制加载和执行时机
总结
三种引入方式各有优缺点，选择哪种方式取决于项目需求：
内联方式：适用于非常简单的交互，不推荐大量使用
内部脚本：适用于中小型页面，逻辑相对简单的情况
外部脚本：是最佳实践，适用于大多数项目，特别是需要代码复用和维护的场景
在实际开发中，应尽量采用外部脚本的方式，保持 HTML 和 JavaScript 代码的分离，提高代码的可维护性和复用性。
