如何在网页中引入JavaScript?

更新时间

在网页中引入JavaScript主要有三种方式：内联脚本、内部脚本和外部脚本。

  1. 内联脚本（Inline Script）
    直接写在HTML标签的事件属性中，例如<button onclick="alert('你好')">点击</button>。这种方式适合极简单的交互，但代码混杂在HTML里，难以维护，不推荐在正式项目中使用。

  2. 内部脚本（Internal Script）
    将JavaScript代码放在<script>标签内，并置于HTML文档的<head>或<body>中。例如：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>示例</title>
    <script>
        function greet() {
            alert('页面加载完成');
        }
    </script>
</head>
<body>
    ...
</body>
</html>

内部脚本适合单个页面使用、代码量不大的场景。需要注意：如果脚本放在<head>中且需要操作页面元素，应使用window.onload或DOMContentLoaded事件，确保元素已加载完成，否则可能找不到元素。

  1. 外部脚本（External Script）
    将JavaScript代码保存为独立的.js文件，再通过<script src="文件路径"></script>引入。这是最推荐的方式，因为它将结构（HTML）、样式（CSS）和行为（JS）分离，便于复用和缓存。例如：
<script src="js/main.js"></script>

外部脚本的src属性可以使用相对路径（如./js/main.js）、绝对路径或完整的URL（如CDN链接）。浏览器会按顺序加载多个外部脚本，默认情况下是同步阻塞的——即遇到<script>标签时，页面会暂停渲染，先下载并执行脚本，再继续解析后续HTML。

放置位置的建议
传统上，脚本放在<head>中会导致页面白屏时间变长，因为脚本下载和执行会阻塞渲染。因此，对于不需要在页面解析前执行的脚本，通常放在<body>标签的末尾（</body>之前）。这样页面内容先显示，脚本最后加载，用户体验更好。

现代增强属性
如果外部脚本不需要等待DOM解析，可以在<script>标签上使用defer或async属性：

  • defer：脚本会延迟到文档解析完成后再执行，多个defer脚本按出现顺序执行。
  • async：脚本下载与HTML解析并行进行，下载完成后立即执行，不保证多个async脚本的执行顺序。

常见错误提醒

  • 忘记写</script>结束标签会导致脚本解析错误。
  • 外部脚本文件路径写错（如大小写、目录层级）时，浏览器控制台会报404错误，页面功能失效。
  • 在<head>中直接操作<body>里的元素会得到null，因为元素尚未解析。

如何确认引入成功
打开浏览器开发者工具（F12），切换到“控制台”（Console）面板。如果脚本中有console.log输出，能看到对应信息；若脚本语法错误，控制台会显示红色报错及行号。也可以直接在控制台输入脚本中定义的函数名，若能调用则说明脚本已正确加载。