JavaScript零基础入门：环境搭建与运行第一个程序

学习 JavaScript 的最快路径并非死记语法规则，而是亲自把代码运行起来并看到即时反馈。本文将直接带你完成两件事：搞清 JavaScript 可以在哪些地方运行并完成必要的基础软件配置，随后通过三种不同场景运行首个“Hello World”程序，帮助零基础学习者建立清晰的编程操作认知。

一、认识 JavaScript 的运行宿主：浏览器与本地环境

在编写代码之前，需要明确一个基础概念：代码本身只是一串保存在文本文件里的字符，必须依赖专门的“解释执行引擎”才能转化为计算机指令。目前执行 JavaScript 主要有两种标准宿主：

• 浏览器环境：任何现代浏览器（如 Google Chrome、Microsoft Edge、Safari 等）内部都内置了 JavaScript 引擎（例如 Chrome 的 V8 引擎）。在该环境下，JavaScript 除了运行核心语法，还能直接调用浏览器专属的 Web API 来修改网页内容（DOM）或监听鼠标点击。
• 独立运行环境（Node.js）：工程师把 Chrome 内部的 V8 引擎抽离出来，配合底层操作系统调用封装成了 Node.js。它让 JavaScript 脱离网页，能够像 Python、Java 一样直接在本地操作系统中运行，胜任文件读写、网络服务搭建与自动化脚本任务。

二、搭建本地开发环境：VS Code 与 Node.js

对于初学者而言，工欲善其事必先利其器。虽然记事本也能写代码，但专业的代码编辑器可以提供关键字高亮、语法错误红线提示与自动缩进。搭建一个标准的现代 JavaScript 开发环境仅需完成以下四个步骤：

1. 下载并安装 VS Code

打开官方网站 code.visualstudio.com，根据操作系统（Windows、macOS 或 Linux）下载对应安装程序。安装过程中建议勾选“添加到 PATH”以及“将‘通过 Code 打开’操作添加到 Windows 资源管理器上下文菜单”，方便日后在任意文件夹快速启动。

2. 安装 Node.js 运行时

访问 Node.js 官方网站 nodejs.org。页面通常会展示两个下载按钮：LTS（Long Term Support，长期支持稳定版）与 Current（尝鲜当前版）。初学者务必选择 LTS 版本，它更加稳定、第三方兼容性最好。下载完成后保持默认配置一直点击“下一步”安装即可，安装程序会自动配置系统的环境变量。

3. 验证环境是否安装成功

安装完成后，需要验证计算机是否能识别 node 命令。打开系统终端（Windows 用户按 Win+R 输入 cmd 回车；macOS 用户按 Command+空格 输入 Terminal 打开终端），输入以下命令：

node -v
npm -v

若屏幕输出类似 v20.x.x 和 10.x.x 的版本号信息，说明 Node.js 及配套的包管理器 npm 已成功装入系统。

三、运行第一个 JavaScript 程序的三种方式

掌握了环境之后，即可动手运行代码。学习 JavaScript 最便捷的一点在于不需要复杂的编译过程。下面通过三种由简入繁的场景分别运行第一行程序：

方式一：在浏览器控制台直接执行（即时调试）

如果手头没有安装任何额外软件，只需打开手头的浏览器：

1. 打开任意网页（或空白标签页），在键盘上按下快捷键 F12（Mac 电脑按 Command + Option + I）调出“开发者工具”（DevTools）。
2. 在顶部选项卡中切换到 Console（控制台）。
3. 在提示符 > 后面输入以下代码并按下回车键（Enter）：

console.log("Hello, World! 这是我在控制台运行的第一行 JavaScript！");

预期效果：控制台下方会立刻输出一串白色或黑色的文字：Hello, World! 这是我在控制台运行的第一行 JavaScript！，紧跟着可能还会显示一行浅灰色的 undefined（这是该表达式的返回值，完全正常）。

方式二：在 HTML 网页中嵌入运行（网页交互）

当编写网页程序时，通常将 JavaScript 放在 HTML 文件里。按照以下步骤操作：

1. 在电脑任意位置（例如桌面）新建一个纯文本文件，将其重命名为 index.html（注意扩展名必须是 .html 而不是 .txt）。
2. 使用 VS Code 打开该文件，输入以下完整代码并保存（Ctrl + S 或 Command + S）：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>我的第一个 JavaScript 网页</title>
</head>
<body>
  <h1>JavaScript 网页运行示例</h1>
  <p>请观察浏览器弹窗及控制台输出。</p>

  <script>
    // 弹窗提示
    alert("你好，JavaScript！这是弹窗输出。");
    // 向控制台输出信息
    console.log("页面已成功加载并执行 JavaScript 脚本。");
  </script>
</body>
</html>

预期效果：双击这个 index.html 文件，默认浏览器会自动将其打开。页面加载瞬间，屏幕中央会弹出一个原生对话框，显示 你好，JavaScript！这是弹窗输出。。点击“确定”关闭弹窗后，按 F12 打开 Console 控制台，同样可以看到 console.log 打印的文本。

方式三：使用 Node.js 独立运行文件（本地工程化）

在日常开发后端应用、自动化脚本或复杂工程时，最常用的方式是编写独立的 .js 文件并通过 Node.js 运行：

1. 在电脑上新建一个文件夹，命名为 js-study。
2. 在 VS Code 中点击菜单栏 文件 -> 打开文件夹，选中刚刚创建的 js-study 文件夹。
3. 在左侧资源管理器中点击“新建文件”图标，命名为 app.js。
4. 在 app.js 中写入以下代码并保存：

// 定义问候语与当前时间
const greeting = "Hello, World!";
const currentTime = new Date().toLocaleTimeString();

// 输出运行结果到终端
console.log("-----------------------------------------");
console.log(greeting + " 欢迎来到 JavaScript 编程世界！");
console.log("当前程序执行时间为：" + currentTime);
console.log("-----------------------------------------");

5. 在 VS Code 顶部菜单栏点击 终端 -> 新建终端（快捷键 Ctrl + `）。
6. 在下方弹出的终端面板中，键入运行指令并按下回车：

node app.js

示例输出：

-----------------------------------------
Hello, World! 欢迎来到 JavaScript 编程世界！
当前程序执行时间为：14:35:20
-----------------------------------------

看到这几行打印信息，意味着你的电脑已经成功搭建了完备的本地 JavaScript 运行链路，随时可以继续编写更复杂的逻辑。

四、初学者极易踩中的 4 个常见错误与排查方法

初学者在运行第一段代码时遇到报错非常普遍，绝大多数问题都集中在输入习惯与环境路径上：

错误现象	主要诱因	排查与修复方法
Uncaught SyntaxError: Invalid or unexpected token	输入法处于中文全角状态，输入了中文引号 “”、中文分号 ； 或中文括号 （）	代码中的所有符号（括号、引号、分号、点号）必须严格在英文半角状态下输入。
ReferenceError: console is not defined 或 log is not a function	单词大小写拼写错误，例如写成了 Console.log 或 console.Log	JavaScript 对大小写严格敏感。关键字与内置对象方法必须保持标准大小写，如小写的 console.log。
Cannot find module '.../app.js'	终端当前所在的目录路径与实际文件所在位置不一致	检查终端提示符前面的路径。若文件保存在 js-study 文件夹下，必须先在该文件夹目录下执行 node app.js。
打开 HTML 文件后没有任何反应	<script> 标签拼写错误，或者代码中含有阻断性语法错误	按 F12 打开控制台查看是否有红色错误提示（Error），检查标签是否闭合为 </script>。

五、知识梳理与后续学习路径

运行起第一个程序是编程学习中最具仪式感的第一步。回顾本篇的核心流程，你已经完成了开发工具的选型、双宿主环境的搭建，并验证了从即时测试到独立文件运行的全过程。

在此之后，建议按照“变量与基本数据类型” -> “条件分支与循环控制” -> “函数与作用域”的顺序循序渐进。每学到一个新概念，都及时打开编辑器新建一个小脚本亲自运行测试，通过实际输出验证逻辑，从而扎实掌握编程基础。