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

作者：岩茶

时间：2026-11-03

面向编程初学者的实用指南：手把手讲解JavaScript运行环境概念、开发工具VS Code配置、浏览器开发者工具使用，以及四种运行第一个Hello World程序的具体实现方法与常见排错注意事项。

文章目录

前端基础环境搭建阅读时长约 8 分钟适用对象：零基础编程初学者

编写并运行 JavaScript 程序并不需要配置复杂的编译构建工具链，现代操作系统中的浏览器已经默认内置了完备的 JavaScript 解释引擎。零基础入门只需准备一款轻量级代码编辑器（如 Visual Studio Code）和电脑现有的现代浏览器即可开工。本文将直接说明 JavaScript 的运行依托机制，梳理具体的工具安装步骤，并通过控制台直投、网页内嵌、外部脚本引用和终端独立执行四种实操方式，带你运行第一个“Hello World”程序并掌握基础排错方法。

JavaScript零基础入门：环境搭建与第一个Hello World — 图 0：JavaScript 零基础从工具准备到代码验证的完整实施路径

一、认识 JavaScript 运行环境：需要准备什么？

很多初学者在接触编程语言时，常常会被 JDK 安装、GCC 编译器配置、环境变量（Path）设置等前置步骤阻碍。而 JavaScript 属于解释型脚本语言，它的执行依赖于宿主环境提供的“JavaScript 引擎”。

日常使用的 Google Chrome、Microsoft Edge、Mozilla Firefox 或 Apple Safari 等浏览器，均自带有顶级性能的 JavaScript 引擎（例如 Chrome 和 Edge 内置的 V8 引擎、Firefox 的 SpiderMonkey 引擎）。这意味着只要电脑中安装了网页浏览器，你就已经拥有了现成的 JavaScript 执行环境。

随着技术的演进，JavaScript 形成了两类主要的执行宿主：

浏览器宿主环境（Web 前端）：代码在浏览器沙箱内运行，除了执行基础语法外，还可以直接调用浏览器提供的专有 API，例如控制网页元素结构的 DOM（文档对象模型）、控制窗口与地址栏的 BOM、发起网络请求的 Fetch API，以及展示页面弹窗或打印日志。这是绝大多数初学者学习 JavaScript 的主要阵地。
Node.js 宿主环境（后端与本地工具）：Node.js 把浏览器的 V8 引擎抽离出来移植到了操作系统层面，增加了操作系统文件读写（fs 模块）、网络端口监听（http 模块）等本地系统权限。它适合用来开发后台接口、自动化脚本或前端打包工具。

因此，对于刚开始接触代码的初学者，最高效、最稳妥的策略是直接使用“代码编辑器 + 现代浏览器”组合，把精力集中在语法逻辑本身，而无需过早在环境依赖上耗费精力。

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

编写高质量代码需要舒适的高亮提示与整洁的文件管理。下面按标准开发流程准备两款核心工具，并补充可选的 Node.js 扩展环境。

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

虽然系统的“记事本”或“文本编辑”也能保存代码文件，但专业代码编辑器提供了语法着色、成对括号匹配、自动换行与代码提示，能大幅减少因敲错字符导致的低级语法报错。

前往微软官方网站（code.visualstudio.com），下载对应当前操作系统（Windows、macOS 或 Linux）的“Stable”（稳定版）安装包。
双击安装包，建议在安装向导中勾选“添加到 PATH”以及“将‘通过 Code 打开’添加到系统上下文菜单”。
在电脑硬盘中新建一个英文命名的纯净文件夹（例如 D:\workspace\js-learn 或 ~/js-learn），打开 VS Code 后点击菜单栏 File > Open Folder（文件 > 打开文件夹），将该文件夹作为后续所有练习的根目录。
推荐插件：点击 VS Code 左侧活动栏的扩展图标（四个小方块），在搜索栏输入 Live Server 并点击 Install。该插件可以在本地启动一个轻量网页服务器，保存代码时浏览器会自动热更新。

步骤 2：熟悉浏览器开发者工具（DevTools）

无论使用 Chrome、Edge 还是 Firefox，都可以直接按下键盘快捷键呼出开发者工具：

Windows / Linux 快捷键：按下键盘顶部的 F12 键，或者按组合键 Ctrl + Shift + I。
macOS 快捷键：按组合键 Cmd + Option + I。

在打开的面板顶部，切换至「控制台」（Console）选项卡。此时你会看到一个带有闪烁光标的命令行输入提示符（通常显示为 >）。这里是浏览器暴露出的即时执行窗口，可以直接输入任意 JavaScript 语句并立即查看运算结果。

步骤 3：（可选扩展）安装 Node.js 运行时

如果你希望在终端窗口中直接运行纯 JavaScript 脚本，可以补充安装 Node.js：

访问 Node.js 官网（nodejs.org），选择绿色的 LTS（Long Term Support，长期稳定支持版） 下载。
运行安装程序，一路点击 Next 保持默认配置即可。
验证安装：打开系统终端（Windows 上的 CMD 或 PowerShell，macOS 上的 Terminal），输入命令 node -v 并按回车。若返回如 v20.18.0 格式的版本号，即代表环境已安装就绪。

三、编写并运行第一个“Hello World”

计算机科学的传统通常以输出“Hello World”作为确认环境畅通的第一步。在实际应用中，主要有四种不同的编写和执行路径，分别代表了不同的运行场景与工程成熟度。

路径一：浏览器控制台直投（最快即时体验）

这种方法不需要创建任何磁盘文件，最适合临时测试单行代码或算术运算。

随意打开浏览器的一个空白标签页。
按 F12 打开 DevTools 并点击 Console 面板。
在光标处输入以下语句并按下回车（Enter）键：

DevTools Console JavaScript

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

预期效果：控制台下方会立刻打印出一行纯文本信息：Hello, World!，紧接着可能会有一行带有浅灰色箭头的 undefined。这里的 undefined 是该语句执行完成后的返回值，证明 JavaScript 引擎已经成功解析并执行了你的代码。

原理解释：console.log 是什么？

console 是浏览器提供给我们的控制台对象，log 则是该对象上的一个输出方法（函数）。将想要打印的字符串内容用英文双引号包裹作为参数传入，浏览器就会将它呈现在控制台信息流中，它是开发调试中最常使用的排查工具。

路径二：HTML 页面内嵌（单文件入门）

网页的基本骨架由 HTML 构成，我们可以在 HTML 文件内部通过 <script> 标签直接书写 JavaScript 代码。

在 VS Code 中，于刚才打开的 js-learn 目录内新建文件，命名为 index.html。
在文件中输入以下完整 HTML 代码：

index.html HTML

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>我的第一个 JavaScript 页面</title>
</head>
<body>
  <h1>JavaScript 运行演示</h1>
  <p>请按下 F12 打开开发者工具的控制台查看输出。</p>

  <!-- 内嵌 JavaScript 代码 -->
  <script>
    console.log("Hello, World! 来自内嵌脚本");
    // 也可以尝试触发浏览器原生弹窗
    alert("Hello, World!");
  </script>
</body>
</html>

运行方式：

方式 A：在电脑的文件管理器中找到刚刚保存的 index.html，直接双击，系统会默认使用浏览器打开该文件。
方式 B：在 VS Code 代码编辑区右键，点击 Open with Live Server。

预期效果：浏览器窗口首先会弹出一个提示框显示 Hello, World!，点击确认后页面正文呈现标题与段落；按 F12 打开控制台，可以看到控制台中已经输出了 Hello, World! 来自内嵌脚本。

路径三：外部独立 JS 文件引用（工程化规范标准）

在正规开发中，如果把上千行 JavaScript 都塞在 HTML 内部，会导致代码难以阅读和团队协作。标准的工业规范是“关注点分离”：HTML 负责页面结构，CSS 负责样式外观，JavaScript 独立存放于 .js 文件中负责交互逻辑。

工程标准目录结构如下：

项目文件树 Directory Tree

js-learn/
├── index.html       # 页面骨架文件
└── app.js           # 独立的 JavaScript 逻辑脚本

1. 在同一目录下新建名为 app.js 的纯文本文件，写入以下纯 JavaScript 代码：

app.js JavaScript

// 声明一个常量存储欢迎语
const greeting = "Hello, World! 来自外部独立 JS 文件";

// 向控制台打印输出
console.log(greeting);

// 尝试向页面中的元素动态写入文字
window.addEventListener("DOMContentLoaded", () => {
  const displayElement = document.getElementById("output-text");
  if (displayElement) {
    displayElement.textContent = greeting;
  }
});

2. 修改 index.html 文件，通过 <script src="..."></script> 标签将外部文件引入：

index.html HTML

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>外部脚本引入示例</title>
  <!-- 推荐在 head 中使用 defer 属性引入外部脚本，确保 HTML 解析完毕后再执行 -->
  <script src="app.js" defer></script>
</head>
<body>
  <h1>外部引用模式验证</h1>
  <p id="output-text">等待 JavaScript 载入...</p>
</body>
</html>

预期效果：刷新浏览器页面后，页面中的“等待 JavaScript 载入...”会自动被脚本动态替换为“Hello, World! 来自外部独立 JS 文件”，同时按 F12 可以在控制台看到同样的一行日志。这是前端 Web 开发中最主流、最推荐的工作模式。

路径四：Node.js 终端独立运行（命令行模式）

如果已经按照前文安装了 Node.js，则可以脱离浏览器界面，像执行 Python 或 C++ 一样直接在终端中运行 JavaScript：

在 js-learn 目录下新建文件 server-hello.js。
写入如下代码：

server-hello.js JavaScript

const message = "Hello, World from Node.js CLI!";
console.log(message);
console.log("当前运行平台架构:", process.platform, process.arch);

3. 在 VS Code 顶部菜单点击 Terminal > New Terminal（终端 > 新建终端），在底部弹出的终端窗口中输入命令：

Terminal Shell Command

node server-hello.js

预期效果：终端控制台会直接打印出对应的两行输出结果，无需开启任何浏览器。需要注意的是，在 Node.js 环境下无法使用 document 或 window 等浏览器专属对象，如果强行书写 document.getElementById() 会导致程序抛出 ReferenceError: document is not defined 错误。

四、零基础常见报错排坑指南

初学者在执行第一个 Hello World 时，经常会因为细节疏忽导致脚本没有按预期执行。以下是四个最高频的踩坑点及解决方法：

坑点 1：中英文标点符号混用

这是初学者最容易触发的语法错误。JavaScript 语法严格要求所有圆括号 ()、引号 "" ''、分号 ; 必须在英文半角输入法状态下键入。

如果你不小心输入了中文全角引号或括号，例如：console.log(“Hello”）；，控制台会立即报红报错：Uncaught SyntaxError: Invalid or unexpected token（无法识别的无效字符）。一旦发现该错误，请重点检查报错行两侧的标点符号。

坑点 2：外部脚本引用路径错误（404 Not Found）

使用 <script src="app.js"> 时，如果 HTML 页面控制台输出红色报错：GET file:///.../app.js net::ERR_FILE_NOT_FOUND 或 HTTP 404，说明浏览器无法在对应位置找到该脚本。

解决办法：请核对文件名拼写与大小写（JavaScript 在多数环境下对大小写敏感），并确保 index.html 和 app.js 位于同一个文件夹层级。如果在子目录（如 js/app.js），则引用路径必须写为 <script src="./js/app.js">。

坑点 3：DOM 元素未加载即执行脚本（Null 引用报错）

浏览器加载 HTML 是从上至下按顺序进行的。如果你把普通 <script> 标签写在 <head> 区域，且在脚本内部直接获取 <body> 中的标签节点（例如 document.getElementById("my-id")），此时下方的 HTML 元素尚未被浏览器创建，代码就会拿到 null，紧接着报出：Uncaught TypeError: Cannot set properties of null。

解决办法：现代开发的标准做法是在 <script> 标签中增加 defer 属性，或者将 <script> 标签放置在 </body> 闭合标签的正上方，保证页面文档先解析完毕再执行逻辑。

坑点 4：文件修改后未保存导致刷新无效

在 VS Code 中修改代码后，如果文件选项卡的名字右侧有一个实心白色圆点，表示当前修改尚未保存至磁盘。此时无论在浏览器中如何刷新，读取的依然是旧版文件内容。建议养成随时按 Ctrl + S（macOS: Cmd + S）保存的习惯，或者在 VS Code 菜单开启 File > Auto Save（自动保存）。

五、运行方式选型矩阵与总结

为了帮助你在后续章节的练习中合理选用运行方式，下表归纳了不同运行形态的选型矩阵：

运行方式	代码保存位置	是否依赖 HTML	调试工具	阶段建议
控制台直投	无（内存临时执行）	否	DevTools Console	零基础初次体验、单条语法验证
HTML 内嵌	单文件 `index.html`	是	浏览器 F12	极简概念演示、单页面快速验证
外链独立 JS	`index.html` + 独立 `.js`	是	VS Code + 浏览器断点	核心推荐（Web 前端标准规范）
Node.js 终端	纯独立 `.js` 脚本	否	系统终端输出 / VS Code Debug	算法练习、构建工具与服务端后端

至此，你已经完整走通了 JavaScript 的环境认知、工具安装、四种 Hello World 实现以及常见排错要点。下一步的学习可以自然推进到 JavaScript 的基础语法核心：变量声明（let / const）、基本数据类型（数字、字符串、布尔值）与条件控制语句，逐步解锁网页动态效果的编写能力。