JavaScript零基础入门：环境搭建与Hello World运行指南

初学编程最容易让人退缩的并不是代码逻辑本身，而是在敲下第一行代码前遇到的复杂配置与各种报错。学习 JavaScript 则相对友好：你的电脑中早已具备能够运行它的宿主环境——网页浏览器。本文将带领初学者从零开始，先用最简单、无需安装任何额外软件的方式运行第一行代码，随后逐步配置主流代码编辑器 Visual Studio Code 与本地 Node.js 运行时，掌握在浏览器与命令行两种场景中运行 Hello World 的完整步骤与排错经验。

一、无需安装软件：浏览器控制台即时体验

现代网页浏览器（如 Google Chrome、Microsoft Edge 或 Safari）都内置了高性能的 JavaScript 执行引擎（例如 V8）。这意味着只要手头有浏览器，就可以在几秒钟内完成你的第一次 JavaScript 交互。

假设你正在浏览任意网页，只需按照以下步骤调出开发者工具控制台：

1. 在键盘上按下快捷键 F12（Mac 系统为 Command + Option + I），或者在网页空白处点击鼠标右键并选择“检查（Inspect）”。
2. 在弹出的开发者工具面板顶部，点击切换到 Console（控制台） 标签页。
3. 在控制台底部的输入光标处，输入以下代码并按下回车键（Enter）：

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

按下回车后，控制台会立即在下一行打印出清晰的文本 Hello, World!。其中 console.log() 是 JavaScript 中最基础也是最常用的输出指令，用于把括号中的内容输出到调试窗口中。

二、主流开发环境搭建：VS Code 编辑器准备

虽然控制台非常方便，但只要刷新页面，输入的代码就会消失。正式开发必须将代码保存在文件中。为了高效编写和管理代码，我们需要准备一款专业的代码编辑器。

1. 下载与安装 Visual Studio Code

目前前端与全栈开发中最普及的编辑器是微软开发的免费开源软件 Visual Studio Code（简称 VS Code）。

• 访问官方网站 code.visualstudio.com，根据操作系统（Windows、macOS 或 Linux）下载对应安装包。
• 运行安装程序。Windows 用户建议在“附加任务”步骤中，勾选“将‘通过 Code 打开’添加到 Windows 资源管理器文件上下文菜单”及目录上下文菜单，方便后续右键直接用编辑器打开项目文件夹。
• 初次启动 VS Code，可在左侧侧边栏点击扩展图标（Extensions，快捷键 Ctrl + Shift + X），搜索并安装 Chinese (Simplified) 语言包将界面设为中文。
• 推荐同时搜索并安装 Live Server 插件，该插件可以在本地启动一个热更新的网页服务器，每次保存 HTML/JS 文件时浏览器都会自动刷新展示最新效果。

三、运行方式一：在 HTML 网页中运行 JavaScript

JavaScript 诞生之初的主要目的就是为网页提供交互能力。在 HTML 中运行 JavaScript 是最经典也是前端开发的基础路径。

1. 创建项目文件夹与文件

在电脑任意合适位置（例如桌面或个人工作盘）新建一个空文件夹，命名为 js-learn。打开 VS Code，点击菜单栏“文件” -> “打开文件夹”，选中刚才建立的 js-learn 目录。接着在文件资源管理器区域点击“新建文件”图标，创建一个名为 index.html 的文件。

2. 编写内嵌脚本代码

在 index.html 中输入以下完整代码：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>我的第一个 JavaScript 程序</title>
</head>
<body>
    <h1>JavaScript 入门验证</h1>
    <p>请按 F12 打开浏览器控制台查看输出结果。</p>

    <!-- 通过 script 标签编写 JavaScript 代码 -->
    <script>
        console.log("Hello, World!");
        alert("Hello, World!");
    </script>
</body>
</html>

3. 运行与结果验证

保存文件后，有以下两种方式运行它：

• 直接打开：在电脑文件管理器中找到 index.html，直接双击它，默认浏览器便会将其加载。
• 使用 Live Server（推荐）：在 VS Code 编辑器窗口中对代码任意位置右键，选择“Open with Live Server”。

浏览器打开页面时，会首先弹出一个原生的提示框，上面写着“Hello, World!”，点击“确定”关闭弹窗；随后按下 F12 切换至 Console 控制台，即可看到 console.log 成功打印出的字符信息。

四、运行方式二：使用 Node.js 在本地终端运行

随着技术演进，JavaScript 已不仅限于在浏览器内运行。借助 Node.js 运行时，我们可以像使用 Python 或 C 语言一样，在系统终端直接执行独立的 .js 脚本文件，开发后端 API、自动化脚本或构建工具。

1. 安装 Node.js 本地运行环境

1. 访问官方网站 nodejs.org。
2. 选择下载 LTS（长期支持版，Long Term Support） 安装包，它比 Current（最新尝鲜版）更加稳定可靠。
3. 双击安装包，一路点击“Next”采用默认配置完成安装即可。安装程序会自动将 Node.js 及其包管理器 npm 注册到系统的环境变量 PATH 中。
4. 验证安装：打开系统终端（Windows 可打开 PowerShell 或 CMD，macOS 打开“终端” Terminal），输入以下命令并回车：

node -v

如果终端正确输出了版本号（如 v20.12.0），说明环境安装成功且可用。

2. 创建并运行独立脚本

回到 VS Code 中的 js-learn 项目目录，点击新建文件，命名为 app.js，在其中写入：

// 这是一个独立的 JavaScript 文件
const greeting = "Hello, World from Node.js!";
console.log(greeting);

在 VS Code 顶部菜单栏点击“终端” -> “新建终端”（快捷键 Ctrl + ` ），终端的当前工作路径会自动定位到该项目目录下。在终端中输入执行命令：

node app.js

命令回车后，终端控制台将立即输出：

Hello, World from Node.js!

五、新手初学常见错误与排查清单

在敲下代码到成功看到输出的过程中，初学者经常会因为细节疏忽遭遇报错。遇到问题时，请参照以下要点自查：

1. 严格区分字母大小写： JavaScript 是一门严格区分大小写的语言。写成 Console.log() 或 console.Log() 都会报 TypeError: console.log is not a function 或 ReferenceError: Console is not defined。必须全小写写作 console.log。
2. 中英文标点符号混用： 这是新手最高频的错误。双引号 " "、单引号 ' '、括号 ( )、分号 ; 必须是在英文半角输入法状态下输入的符号。如果不小心输入了中文全角标点，解释器会报 SyntaxError: Invalid or unexpected token（意外标记符号）。
3. 外部脚本路径错误： 若使用 <script src="app.js"></script> 引入外部文件，但 HTML 文件与 JS 文件不在同一目录，或者文件名大小写拼写有误，浏览器控制台会提示 GET http://.../app.js 404 (Not Found)，导致代码完全不执行。
4. 终端命令未找到： 在终端运行 node app.js 时提示 'node' 不是内部或外部命令，通常是因为安装 Node.js 后尚未重启终端，或者安装时没有勾选自动添加至 PATH 环境变量。只需关闭当前终端或重启电脑重试即可。

结语

搭建开发环境并让 Hello World 成功运行，标志着你已经迈过了 JavaScript 学习的第一道门槛。接下来，你可以依托 VS Code 编辑器和已就绪的运行环境，进一步深入学习变量、数据类型、运算符、函数以及控制流等基础语法。在日常练习中，多利用 console.log() 观察程序的运行状态与数据变化，养成随手在控制台调试验证的良好习惯。