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

要开始学习 JavaScript，并不需要购买复杂工具或立即配置繁琐的工程框架。JavaScript 拥有两个最主要的运行场所：一是每个人电脑里都有的网页浏览器，二是可以安装在本地操作系统上的独立运行时 Node.js。本文将带领初学者理清这两类运行环境的区别，一步步完成本地开发工具与运行环境的搭建，并分别在浏览器和本地终端中成功运行输出“Hello, World!”的第一个程序。

一、最快体验：无需安装任何工具的浏览器控制台

如果你手头有一台装有主流网页浏览器（例如 Google Chrome、Microsoft Edge 或 Safari）的电脑，其实你已经拥有了一个现成的 JavaScript 运行环境。浏览器内部包含了专门执行 JavaScript 的解释引擎（如 Chrome 的 V8）。

使用开发者工具中的控制台（Console），可以立刻执行单行或多行代码：

1. 在浏览器中打开任意空白网页或新标签页。
2. 按下快捷键 F12（Windows）或者 Cmd + Option + I（macOS）；也可以在页面空白处单击右键，选择“检查”（Inspect）。
3. 在弹出的开发者工具面板顶部，点击切换到 Console（控制台）标签页。
4. 在控制台底部的提示符处输入以下代码，然后按下回车键（Enter）：

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

此时控制台会立刻打印出一行纯文本 Hello, World!，紧接着下面可能伴随一个浅灰色的 undefined（这是 console.log 函数本身的返回值）。这证明你的计算机已经顺利解析并执行了第一句 JavaScript 代码。

二、搭建专业开发环境：VS Code 与 Node.js

控制台适合随手做小实验，但要系统编写多行代码、管理项目文件，我们需要两款基础软件：编写代码的编辑器 Visual Studio Code，以及在本地运行脚本的 Node.js。

1. 安装 Node.js 运行时

前往 Node.js 官方网站（nodejs.org），页面通常会提供两个版本可供下载：LTS（Long Term Support，长期维护版）和 Current（最新尝鲜版）。对于初学者，务必选择 LTS 版本。LTS 经过充分测试，生态库兼容性最好，稳定性最高。

下载对应操作系统的安装包后双击运行。在安装向导中一路保持默认设置即可（特别注意勾选将 Node 加入系统环境变量 PATH 的选项）。安装完成后，打开系统命令行（Windows 使用 CMD 或 PowerShell，macOS 使用 Terminal），输入以下命令检查是否安装成功：

node -v
npm -v

如果命令行输出了具体的版本号（例如 v20.12.2 与 10.5.0），说明 Node.js 和其附带的包管理器 npm 已经成功就绪。

2. 安装 Visual Studio Code

虽然系统自带的记事本也能写代码，但专业的代码编辑器具备语法高亮、自动补全、括号匹配及内置终端等实用功能。访问 Visual Studio Code 官网下载并完成安装。

安装完成后，建议在左侧“Extensions”（扩展）插件面板中搜索并安装 Chinese (Simplified) 语言包（方便熟悉界面），以及 Live Server（方便在浏览器中热重载预览 HTML 页面）。

三、编写与运行第一个 JavaScript 程序

在现代开发中，运行 JavaScript 脚本通常有两种经典方式：一种是编写一个以 .js 结尾的独立文件，通过 Node.js 直接在命令行运行；另一种是将脚本嵌入到 HTML 网页中，通过浏览器加载执行。

方式一：创建独立 JS 文件并在 Node.js 中执行

1. 在电脑中新建一个空文件夹，例如命名为 js-study。
2. 启动 VS Code，点击菜单栏“文件” -> “打开文件夹”，选择刚才创建的 js-study。
3. 在 VS Code 左侧文件资源管理器中，点击“新建文件”图标，命名为 app.js。
4. 在打开的代码编辑区中输入以下内容并保存（快捷键 Ctrl + S 或 Cmd + S）：

// 这是一个简单的单行注释
const message = "Hello, World! 欢迎开启 JavaScript 学习！";
console.log(message);

在 VS Code 顶部菜单栏点击“终端” -> “新建终端”（或者使用快捷键 Ctrl + ` 打开内置终端），确保当前路径在项目文件夹下，输入以下运行命令：

node app.js

按下回车后，终端中便会立即打印出变量 message 存储的文本内容。此时，你的第一份独立 JavaScript 脚本就完成了本地运行。

方式二：结合 HTML 在浏览器中呈现

在真实网页开发中，JavaScript 常常作为控制页面动态行为的脚本。通过引入 HTML 页面，你可以观察代码如何与网页结构产生联系。

在同级目录下新建一个 index.html 文件，输入以下完整的骨架代码：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>第一个 JS 页面</title>
</head>
<body>
  <h1 id="title">等待 JS 脚本改变这里的文字...</h1>

  <!-- 引入同目录下的 app.js -->
  <script>
    // 获取页面中的 h1 元素，并更新其文本
    const heading = document.getElementById("title");
    heading.textContent = "Hello, World! 文字已被 JavaScript 成功更新！";
    console.log("页面脚本已顺利执行完毕。");
  </script>
</body>
</html>

保存文件后，在文件管理器中双击 index.html，它会自动使用你的默认浏览器打开。你会发现页面上的标题文字已经被脚本替换成了新内容，按 F12 打开控制台，也能看到对应的日志输出。

四、新手常见疑问与排错注意事项

• 避免中文符号错误：编程语言的关键字、括号 ()、花括号 {}、双引号 "" 和分号 ; 都必须是半角英文字符。输入法误切为全角中文时容易产生不可见或隐蔽的语法报错。
• 注意当前工作路径：在终端运行 node app.js 时，终端必须正处于 app.js 所在的文件目录下。如果你在终端看到类似 MODULE_NOT_FOUND 的报错，说明终端无法在该路径找到对应文件。在 VS Code 中通过快捷键 Ctrl + ` 打开的内置终端通常会自动定位到当前项目的根路径，能有效规避这一问题。
• 不要混淆宿主专有对象：在浏览器控制台中可以直接访问 window 和 document，但在 Node.js 环境中执行 console.log(window) 会抛出 ReferenceError: window is not defined。同样，Node.js 提供的本地文件模块 fs 也不能直接在纯浏览器端使用。弄清运行环境所拥有的能力边界，是 JavaScript 学习过程中非常重要的认知基础。

五、后续学习路径建议

在成功搭建环境并运行了第一段代码之后，开发的主干通道已经彻底打通。接下来你可以按部就班地从 JavaScript 基础语法学起：

1. 变量声明与数据类型：掌握 let 与 const 的使用规范，理解字符串（String）、数字（Number）、布尔值（Boolean）、数组（Array）与对象（Object）的基本概念。
2. 流程控制：掌握条件判断 if...else 与循环结构（如 for、while），学会在程序中根据不同情况执行不同分支。
3. 函数与作用域：掌握函数的定义、参数传递与返回值，学会将可复用的逻辑封装为独立模块。
4. DOM 事件与交互：若主攻前端方向，接下来重点练习如何通过 JavaScript 监听用户的鼠标点击、键盘输入，并实时修改 HTML 元素样式与内容。

每次遇到新的知识点，都可以利用本文介绍的两种方式——在 VS Code 中编写小脚本使用 Node.js 运行，或者在浏览器控制台中即时调试验证，从而形成高效的练习习惯。