JavaScript 引入方式

将 JavaScript 代码加入网页有三种方式，每种各有适用场景。

方式一：内联事件属性（不推荐）

直接在 HTML 标签的 onclick 等属性里写代码：

html 
<button onclick="alert('你好！')">点我</button>

这种方式最简单，但将逻辑和结构混在一起，代码多时混乱不堪。仅适合极简的一次性测试，正式项目中不要使用。

方式二：<script> 元素

在 HTML 文件内使用 <script> 标签包裹代码：

html 
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="utf-8">
  <title>我的页面</title>
</head>
<body>
  <h1>你好，世界</h1>

  <script>
    console.log('JavaScript 已加载');
  </script>
</body>
</html>

<script> 放在 </body> 之前（即所有 HTML 内容之后），确保代码执行时页面元素已经存在。

方式三：外部 .js 文件（推荐）

将 JavaScript 写在独立 .js 文件中，在 HTML 里通过 <script src="..."> 引用：

html 
<script src="app.js"></script>
javascript 
// app.js
const heading = document.querySelector('h1');
heading.style.color = '#2563eb';
console.log('外部脚本已执行');
html 
<h1>你好，世界</h1>

这是推荐方式——结构（HTML）、样式（CSS）、逻辑（JS）彻底分离。多个页面可以共享同一个 .js 文件，浏览器也会缓存它，加速后续页面的加载。

defer 和 async

浏览器解析 HTML 时遇到 <script> 会暂停解析去下载和执行脚本，可能阻塞页面渲染。defer 和 async 改变了这个行为：

html 
<!-- 默认：阻塞解析，下载 + 执行 -->
<script src="app.js"></script>

<!-- defer：异步下载，等 HTML 解析完毕后再执行 -->
<script src="app.js" defer></script>

<!-- async：异步下载，下载完成即执行（不保证顺序） -->
<script src="analytics.js" async></script>
属性下载执行时机执行顺序
无阻塞解析下载后立即按出现顺序
defer异步HTML 解析完毕按出现顺序
async异步下载完成即执行不保证顺序
html 
<!-- 实践建议：外部 .js 都用 defer -->
<script src="app.js" defer></script>

defer 是最常用的选择——它保证脚本按顺序执行，且 DOM 已就绪。async 适合与页面无关的独立脚本（如统计、广告），执行顺序不重要。

<noscript> — 禁用脚本时的回退

当用户浏览器禁用了 JavaScript 时，<noscript> 中的内容会显示：

html 
<noscript>
  <p>您的浏览器未启用 JavaScript，部分功能可能不可用。</p>
</noscript>

尝试你的第一段代码

打开任意网页的浏览器开发者工具（按 F12），切换到 Console 标签，输入：

javascript 
console.log('Hello, JavaScript!');

按回车——你会看到输出的文字。Console 是学习和调试 JavaScript 最直接的环境，后面的教程中所有小段示例都可以在这里直接测试。