如何运行 JavaScript：浏览器控制台、Node.js 与 HTML

JavaScript 运行的三个地方

JavaScript 不能自己运行，它需要一个理解这门语言的宿主环境。在 2026 年，你真正会用到的宿主有三种：

• 浏览器。 每个浏览器都内置了 JavaScript 引擎（Chrome 和 Edge 中是 V8，Firefox 中是 SpiderMonkey，Safari 中是 JavaScriptCore）。把代码粘贴到开发者工具里，它就会运行。
• Node.js。 一个独立的运行时，让 JavaScript 可以在浏览器之外运行：在终端中、在服务器上、在构建工具里。
• 在线编辑器和编辑器组件（比如本页上的这些）。它们在底层不过是上面两者之一，外面包了一层网页界面。

语言在哪里都一样。变化的是代码能接触到什么：浏览器提供 document 和 window，Node 提供文件系统和网络。先用对你来说最方便的那个，随时都可以换。

方式 1：浏览器控制台

运行一行 JavaScript 最快的方式是浏览器开发者工具的控制台。打开任意网页，按 F12（Mac 上按 Cmd+Option+I），点击 Console（控制台）标签，然后输入：

console.log("Hello from the console");
2 + 2;

每输入一行就按一次回车。控制台会打印表达式的返回值，以及你传给 console.log 的任何内容。你可以定义变量、调用函数、查看当前页面：document.title 会给出当前标签页的标题。

控制台非常适合：

• 两秒钟测试一个代码片段。
• 研究线上网站的 DOM。
• 调试已经在页面上运行的代码。

关闭标签页后，你在控制台里输入的内容就没了。想保留的代码，就放进文件里。

方式 2：HTML 文件中的 <script> 标签

要让 JavaScript 作为网页的一部分运行，就把它放进 HTML 文件。把下面的内容保存为 index.html，双击在浏览器中打开，或者粘贴到在线 HTML 编辑器中：

<!doctype html>
<html>
  <body>
    <h1 id="title">Loading...</h1>
    <script>
      document.getElementById("title").textContent = "Hello from a script";
      console.log("Script ran");
    </script>
  </body>
</html>

<script> 标签告诉浏览器“把这段当作 JavaScript 运行”。代码可以访问它所在的页面，所以 document.getElementById(...) 能找到它上方的 <h1>。打开开发者工具，就能看到 console.log 的输出。

超过几行的代码，就把它移到单独的文件中，再链接进来：

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

把 <script> 标签放在 <body> 的末尾附近，或者给它加上 defer，让它在页面 HTML 解析完成后再运行。模块脚本和加载顺序会在“模块”一章中详细介绍。

方式 3：在终端中使用 Node.js

当你想在没有浏览器的情况下使用 JavaScript，比如写一个重命名文件的脚本、一个小服务器，或者一次快速的数据处理，就用 Node.js。从 nodejs.org 安装它（选择 LTS 版本），然后检查是否安装成功：

node --version

把文件保存为 script.js：

const name = "Rosa";
const items = [1, 2, 3, 4];
const total = items.reduce((sum, n) => sum + n, 0);

console.log(`Hello, ${name}`);
console.log("Total:", total);

然后在同一个文件夹中运行：

node script.js

输出会直接打印到终端。不需要 HTML，不需要浏览器，也不需要构建步骤。浏览器之外大部分“真正的” JavaScript 开发都是这样进行的，Node 还驱动着围绕浏览器项目的各种工具（打包工具、测试运行器、代码检查工具）。

你也可以完全不用文件来运行 Node。只要输入 node 并按回车，就会进入一个交互式提示符（REPL），每输入一行就运行一行。用来试东西很方便，就像浏览器控制台，只不过在终端里。

方式 4：本页上的编辑器

Coddy 上的每个 editor-javascript 代码块都是一个实时编辑器。修改代码，点击“运行”，查看输出。学习阶段这是最友好的方式：不用安装，不用配置，也不用切换标签页：

const greet = (name) => `Hello, ${name}`;

console.log(greet("world"));
console.log(greet("JavaScript"));

把 "world" 改成你的名字，再运行一次。这就是完整的反馈循环：修改、运行、读输出。本教程的大部分内容都是围绕它设计的。

应该用哪一种？

根据你要做的事来选：

• 试一行代码，或查看一个线上页面：浏览器控制台。
• 做一个带网页的东西：带 <script> 标签的 HTML 文件。
• 写脚本、工具或服务器：在终端中使用 Node.js。
• 跟着本教程学习：就用这里的编辑器代码块。

几个容易让初学者踩坑的地方：

• Node.js 中的代码没有 document 或 window，它们是浏览器里的东西。在 Node 中调用 document.getElementById(...) 会抛出 ReferenceError: document is not defined。
• 浏览器中的代码无法访问你的文件系统。出于安全考虑，浏览器会把页面隔离在沙箱中。如果你想读取本地文件，那就是 Node 的地盘了。
• console.log 在三种环境中都能用。它是 JavaScript 中通用的“打印点东西”的方式。

一个自检脚本

在你选择的环境中运行下面的代码。如果看到三行输出，你就可以进入下一页了：

console.log("1. JavaScript is running");

const year = new Date().getFullYear();
console.log(`2. The year is ${year}`);

const doubled = [1, 2, 3].map((n) => n * 2);
console.log("3. Doubled:", doubled);

一个片段里有三个特性：console.log、内置的 Date 对象，以及配合箭头函数使用的数组方法。在接下来的章节中，你会逐一正式认识它们。

下一篇：语法与分号

既然代码已经能在某个地方运行了，下一个问题就是 JavaScript 的语法长什么样：语句、表达式，以及那个长盛不衰的争论，每行末尾到底要不要加分号。这就是下一篇的内容。