JavaScript零基础入门：环境搭建与第一个Hello World

作者：后端茶话

时间：2026-11-02

面向零基础学习者的JavaScript实战入门指南，详细讲解浏览器开发者工具、VS Code代码编辑器与Node.js的安装配置流程，并通过控制台、网页与终端三种途径完成第一个Hello World程序。

文章目录

JavaScript 是当今互联网应用最广泛的编程语言之一。与 C++、Java 等需要预先配置复杂编译器与构建路径的语言不同，JavaScript 具备极低的入门门槛：任意一台安装了现代浏览器的电脑，天然就拥有完整的代码解析与执行环境。对于零基础学习者而言，建立清晰的代码运行概念、配置称手的开发编辑器并成功跑通第一个程序，是迈向编程大门最关键的第一步。本文将系统梳理 JavaScript 的运行载体，演示标准开发工具的配置流程，并带你通过浏览器控制台、HTML 网页嵌入以及本地 Node.js 终端三种不同方式亲手输出 “Hello, World!”。

JavaScript零基础入门：环境搭建与第一个Hello World — JavaScript 零基础开发环境与 Hello World 运行生态概览

一、JavaScript 可以在哪里运行？

在正式动笔写代码前，需要弄清楚 JavaScript 代码是由谁来解析和执行的。很多初学者容易将 JavaScript 与网页界面划等号，实际上，JavaScript 是一门通用的脚本语言，其核心规范称为 ECMAScript。它依靠专门的“JavaScript 引擎”来解释执行指令。目前，JavaScript 最主要的两个运行宿主环境是浏览器与 Node.js 运行时：

浏览器环境（Web 前端）：现代浏览器（如 Google Chrome、Microsoft Edge、Mozilla Firefox、Apple Safari）都内置了高性能 JS 引擎（例如 Chrome 使用的 V8 引擎）。浏览器环境除了提供核心语法计算外，还提供了专门用于操控网页结构、样式与网络通信的 Web API（如 document 页面对象、alert 弹窗、fetch 网络请求等）。
Node.js 运行时（本地与后端）：Node.js 是基于 Chrome V8 引擎封装的独立运行环境，它将 JavaScript 抽离出了浏览器，使其可以直接在操作系统层面执行。在 Node.js 中，没有网页 DOM 概念，但拥有读写本地磁盘文件（fs 模块）、处理网络套接字（http 模块）以及管理系统进程的能力。

对于初学者来说，优先掌握浏览器端运行方式可以获得直观的视觉反馈；而了解 Node.js 的执行机制，则能为日后的工程化工具链与后端开发奠定坚实基础。

二、开发环境安装与配置步骤

编写 JavaScript 代码不需要花哨的收费软件，免费且轻量的官方工具组合足以支撑从入门到专业阶段的全部开发需求。标准的入门开发环境由两部分组成：用于观察效果的现代浏览器，以及用于高效编写代码的代码编辑器。如果需要运行本地命令行脚本，还可以加装 Node.js。

步骤 1：准备现代浏览器与开发者工具

确保你的电脑上安装了最新版本的 Google Chrome、Microsoft Edge 或 Firefox（系统自带的 Edge 或 Safari 均可直接使用）。浏览器自带的“开发者工具”（DevTools）是每个前端开发者必备的神器，无需任何安装即可直接使用。你可以通过在浏览器窗口中按下快捷键 F12（在 macOS 上按下 Command + Option + I），并在弹出面板中点击 Console（控制台）标签页，即可确认环境就绪。

步骤 2：安装代码编辑器 Visual Studio Code

虽然 Windows 的记事本或 Mac 的文本编辑也能保存文本，但它们缺乏语法高亮、括号匹配、自动补全以及行号提示，极易诱发低级拼写错误。目前业界最主流的代码编辑器是微软推出的 Visual Studio Code（简称 VS Code）：

访问 VS Code 官方网站（https://code.visualstudio.com/），下载对应你操作系统的安装包并完成安装。
启动 VS Code，点击左侧活动栏的积木图标（Extensions 扩展市场，快捷键 Ctrl+Shift+X 或 Cmd+Shift+X）。
在搜索框中输入 Live Server 并点击安装。该插件能为本地 HTML/JS 项目提供一键启动的微型本地 Web 服务器，支持代码保存后浏览器自动刷新重载。
如需中文界面，可在扩展市场搜索 Chinese (Simplified) 安装简体中文语言包，重启编辑器即可生效。

步骤 3：建立学习工作目录

在电脑硬盘非系统盘或用户主目录下新建一个专用于练习的文件夹，例如命名为 javascript-study。在 VS Code 菜单栏选择 文件 -> 打开文件夹，定位并载入该目录。养成将代码存放在固定项目工作区的好习惯，能够避免文件路径混乱或找不到文件的问题。

步骤 4：安装 Node.js LTS 版本（可选但推荐）

如果你希望在命令行终端脱离浏览器直接执行纯 JavaScript 逻辑，可以安装 Node.js：

访问 Node.js 官网（https://nodejs.org/），推荐下载标注为 LTS（长期支持版，Long Term Support） 的安装包。
双击运行安装向导，一路保持默认配置点击“下一步”（Next）直至安装完成。
打开系统的终端工具（Windows 下为 PowerShell 或 CMD，macOS 下为 Terminal），输入以下命令并回车检查是否安装成功：

node -v

如果终端能够正常打印出类似 v20.18.0 的版本号信息，说明 Node.js 环境已成功配置完毕。

三、运行第一个 Hello World 的三种方式

“Hello, World!” 是编程世界约定俗成的启蒙案例。我们将分别使用浏览器控制台即时交互、HTML 网页嵌入关联以及 Node.js 终端执行三种途径来达成这一目标。

方式一：在浏览器控制台直接执行（最快上手）

浏览器控制台（Console）提供了一个即时可用的 REPL（交互式解释器）环境。你输入一行代码，引擎就立即执行并打印结果：

打开 Google Chrome 或任意现代浏览器，新建一个空白标签页。
按下 F12 或 Cmd + Option + I 打开开发者工具，点击进入 Console（控制台）面板。
在最下方的闪烁光标处，输入以下代码并敲击回车键（Enter）：

console.log("Hello, World!");

回车后，你会立即在控制台面板中看到两行输出：

Hello, World!
<- undefined

为什么会出现 undefined？ 第一行 Hello, World! 是 console.log() 打印到输出流中的文本内容；第二行带小箭头的 undefined 是该语句本身的执行返回值。因为 console.log 函数的设计目的只是打印信息而并不返回具体数据，所以它的默认返回值为 undefined，这是完全正常的现象。

方式二：编写 HTML 与 JS 文件并运行（Web 开发标准方式）

在实际项目开发中，代码绝不会写在控制台里，而是保存在纯文本文件中。浏览器通过加载 HTML 文件来引入并运行外部 JavaScript 代码。

在 VS Code 中打开的 javascript-study 目录下，新建两个文件：

index.html：定义网页的基础框架。
main.js：存放具体的 JavaScript 业务逻辑。

在 index.html 中输入以下内容：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>我的第一个 JavaScript 页面</title>
</head>
<body>
  <h1>JavaScript 零基础测试</h1>
  <p>页面加载完成后，将自动触发脚本执行。</p>

  <!-- 引入同级目录下的 main.js 脚本文件 -->
  <script src="main.js"></script>
</body>
</html>

接着，在 main.js 中写入以下代码并按 Ctrl+S（Mac 下 Cmd+S）保存：

// 声明一个用于存储问候文字的常量
const message = "Hello, World from JavaScript!";

// 1. 在控制台静默打印
console.log(message);

// 2. 在浏览器界面弹出提示对话框
alert(message);

运行与验证：

在 VS Code 的左侧文件列表中，右键点击 index.html，在菜单中选择 Open with Live Server。
浏览器将自动打开本地地址（通常形如 http://127.0.0.1:5500/index.html）。
页面加载瞬间，屏幕中央会弹出一个原生对话框，显示 Hello, World from JavaScript!。
点击对话框的“确定”按钮后，按下 F12 展开控制台，可以看到 console.log 同样输出了相同的信息。

方式三：通过 Node.js 命令行终端运行（后端与自动化方式）

如果你不需要操作网页界面，仅仅想要执行数学运算、批量数据处理或后端程序，可以直接在终端调用 Node.js：

在 javascript-study 文件夹下新建一个文件，命名为 hello.js。
在文件中写入纯逻辑代码：

// 定义运行环境提示与当前时间
const envInfo = "Node.js 终端运行环境";
const time = new Date().toLocaleTimeString();

console.log("================================");
console.log("Hello, World!");
console.log("当前运行平台: " + envInfo);
console.log("执行时间戳: " + time);
console.log("================================");

在 VS Code 顶部菜单栏点击 终端（Terminal） -> 新建终端（New Terminal），此时底部会调出集成终端。
在终端提示符后输入以下执行命令并回车：

node hello.js

此时终端将直接输出如下内容（时间戳随实际运行时间变化）：

================================
Hello, World!
当前运行平台: Node.js 终端运行环境
执行时间戳: 20:20:00
================================

注意：在 Node.js 环境中不能使用 alert() 或 document.getElementById()，因为 Node.js 不存在浏览器窗口对象，强行调用会报 ReferenceError: alert is not defined 错误。

四、初学者高频踩坑与排错清单

在零基础入门阶段，代码无法正常运行 90% 以上源于看似微小的细节疏漏。掌握以下核心排错基准，能帮你快速定位并解决绝大多数基础异常：

常见问题表现	根本原因	排查与解决方法
文件未被识别 / 图标异常	操作系统隐藏已知文件扩展名，实际文件名为 `index.html.txt` 或 `main.js.txt`。	在 Windows 资源管理器“查看”菜单中勾选“文件扩展名”；在 VS Code 中直接检查文件名后半段是否带有 `.txt`。
Uncaught ReferenceError: Console is not defined	JavaScript 严格区分大小写。将 `console.log` 误写成了 `Console.log` 或 `console.Log`。	核对内置对象与方法名称，全部保持正确的大小写规范。
Uncaught SyntaxError: Invalid or unexpected token	使用了中文全角标点符号（如中文字符的逗号 `，`、括号 `（）`、分号 `；` 或双引号 `“”`）。	切换为英文输入法重新键入半角标点符号。在编辑器中全角符号通常会有明显的宽度差异。
修改 JS 代码后页面无变化	文件未保存，或浏览器缓存了旧版本 JS 文件。	按 `Ctrl+S` 保存所有修改；使用 Live Server 实时预览，或在浏览器中按 `Ctrl+F5`（Mac 按 `Cmd+Shift+R`）强制刷新。
404 Not Found (main.js)	HTML 标签中的 `src` 路径与实际文件存放路径不一致或拼写有误。	若两个文件处于同一文件夹内，确保路径直接书写为 `src="main.js"` 或 `src="./main.js"`，检查拼写。

五、总结与下一步学习进阶路线

到这里，你已经顺利完成了 JavaScript 运行环境的理解与搭建，并验证了从网页交互到本地命令行的三种代码执行全流程。恭喜你迈出了编程学习最坚实的一步！

为了保持学习连贯性，建议你在巩固本次搭建成果后，按照以下递进路径规划后续的学习目标：

变量与基本数据类型：深入理解 let 与 const 的作用域机制，学习数字（Number）、字符串（String）、布尔值（Boolean）、未定义（Undefined）与空值（Null）的用法。
运算与流程控制：掌握四则运算、比较运算符（优先使用全等 ===）、条件分支语句（if...else、switch）以及循环控制（for、while）。
函数与模块化思维：掌握函数定义、参数传递与返回值（return），学会将重复代码提取为独立功能模块。
DOM 操作与事件驱动：在 HTML 页面中通过 document.querySelector() 抓取按钮或文本输入框，监听点击事件（addEventListener），真正做出有交互动效的现代网页。