2.2 代码运行方式：浏览器内嵌、外部脚本、控制台调试、Node 运行

JavaScript 代码从编写到执行有四种最常用的方式。不同的方式适用于不同的场景：开发测试、生产部署、快速验证，各有侧重。你只需要掌握以下四种，就能覆盖几乎所有日常操作。

2.2.1 浏览器内嵌脚本

最简单的运行方式：直接在 HTML 文件中使用 <script> 标签嵌入 JavaScript 代码。浏览器解析 HTML 时，遇到 <script> 标签会立即执行其中的代码。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>内嵌脚本示例</title>
</head>
<body>
  <h1>你好，JavaScript</h1>
  <script>
    // 页面加载后弹出欢迎信息
    alert('这是浏览器内嵌脚本的执行结果');
    console.log('已经在控制台输出');
  </script>
</body>
</html>

实际操作
用任意文本编辑器（如 VS Code、记事本）新建一个文件，粘贴以上内容，保存为 demo.html，双击用浏览器打开即可看到效果。

特点与注意事项

适合演示、小型练习或少量代码直接作用于页面。
<script> 放置的位置会影响执行时机：放在 <body> 底部能确保 DOM 元素已加载，避免操作到尚未出现的节点。现代开发中，还可以通过 defer 或 async 属性控制脚本加载与执行顺序（详见第 25 章）。
内嵌脚本难以复用，项目稍大时应使用外部脚本。

2.2.2 外部脚本文件

将 JavaScript 代码单独保存为 .js 文件，再通过 <script> 标签的 src 属性引入。这是生产环境的标准做法，实现了结构与行为的分离。

创建文件 app.js：

// app.js
document.addEventListener('DOMContentLoaded', function() {
  const heading = document.querySelector('h1');
  heading.style.color = 'blue';
  console.log('外部脚本已执行，标题颜色变为蓝色');
});

在 HTML 中引入：

<script src="app.js"></script>

实际操作
将上述两段代码分别保存为 index.html 和 app.js（放在同一目录），用浏览器打开 HTML 文件即可。

特点与注意事项

代码复用性高：同一个 .js 文件可以被多个页面引用。
浏览器可以缓存外部脚本，加快二次访问速度。
可以放在 <head> 中添加 defer 属性，或直接放在 </body> 前，确保 DOM 加载完毕再执行。
开发中通常使用模块化（ES Modules），引入多个模块时需要使用 type="module"，具体将在第 19 章详细讲解。

2.2.3 浏览器控制台调试

控制台是浏览器内置的 JavaScript 即时执行环境，适合快速测试代码片段、调试变量、检查 DOM 状态。无需创建任何文件，打开一个网页就能直接输入代码。

打开方式

在任意网页上按 F12 或 Ctrl + Shift + I（Windows）/ Cmd + Option + I（Mac），切换到 Console（控制台） 标签页。
在输入框中输入 JavaScript 代码，按回车立即执行。

典型用法

// 数学计算
2 + 3   // 5

// 操作当前页面 DOM
document.title = '新的标题';

// 定义一个函数并调用
function greet(name) {
  return `你好，${name}`;
}
greet('小明');  // '你好，小明'

// 查看元素
const btn = document.querySelector('button');
console.log(btn);

特点与注意事项

执行上下文是当前页面的全局作用域，可以访问和修改页面上的所有变量和 DOM。
结果实时反馈，非常适合学习语法、调试错误、快速验证想法。
代码不会被保存，刷新页面后定义的所有变量和函数都会消失。
多行代码可以使用 Shift + Enter 换行后再执行。

2.2.4 Node.js 环境运行

Node.js 让 JavaScript 脱离了浏览器，可以直接在命令行中运行。这意味着你可以用 JavaScript 操作文件系统、启动 HTTP 服务器、编写自动化脚本等。

安装 Node.js
前往 nodejs.org 下载 LTS 版本（长期支持版），按提示安装即可。安装完成后，打开终端（命令提示符）验证：

node -v
# 应输出类似 v20.10.0 的版本号

运行一个简单的脚本
创建 hello.js 文件：

// hello.js
const name = 'Node.js';
console.log(`你好，${name}！`);
console.log('当前时间：', new Date().toLocaleString());

在终端中执行：

node hello.js

运行结果

你好，Node.js！
当前时间：2025/3/15 14:30:22

特点与注意事项

Node.js 中没有浏览器独有的 DOM 和 BOM（如 window、document），但提供了 fs（文件系统）、http（网络）等模块。
代码在服务器端运行，可以监听网络端口、处理数据库查询、读写本地文件。
结合 npm，可以管理庞大的第三方包，快速搭建项目。
也可以直接在终端输入 node 进入 REPL 交互环境，逐行输入执行，类似浏览器控制台，但执行环境是 Node.js。

2.2.5 总结：如何选择

| 方式 | 最佳场景 | 局限 |
|------|---------|------|
| 浏览器内嵌 | 快速演示、简单示例 | 无法跨页面复用 |
| 外部脚本 | 实际项目开发、生产环境 | 需要 HTTP 服务或直接打开本地文件 |
| 控制台调试 | 实时调试、快速实验 | 代码不持久，页面刷新丢失 |
| Node 运行 | 服务端开发、脚本自动化 | 不能直接操作浏览器 DOM |

掌握了这四种方式，你就拥有了在不同场景下让 JavaScript“跑起来”的能力。在接下来的章节中，我们将从“Hello World”开始，逐步深入这门语言的每一个关键部分。