JavaScript编程入门：环境搭建与运行第一个脚本

编写与执行 JavaScript 并不需要经历繁琐的依赖编译配置。作为解释型脚本语言，现代计算机只要安装了主流网络浏览器，就已经内置了能够执行 JavaScript 代码的引擎；而如果希望脱离浏览器、在操作系统的终端命令行中直接运行脚本，只需要配置 Node.js 运行时即可。本文将按实际操作路径，完整讲解运行环境的选择、工具准备，以及分别在浏览器与本地终端中运行第一个脚本的完整过程与排查要点。

一、理解 JavaScript 的两种常见运行载体

在开始敲下第一行代码前，有必要厘清 JavaScript 代码在何处运行。早期的 JavaScript 专用于网页交互，由浏览器内置引擎负责解析执行；后来 Node.js 将这一引擎剥离并扩展到底层操作系统，形成了浏览器与独立运行时两套互为补充的执行场景。

从图中可以看出，无论是哪种环境，语言的基础语法（如变量声明、逻辑循环、函数运算）完全统一；区别仅在于宿主赋予的特定 API。初学入门通常从浏览器控制台与静态 HTML 页面切入，随后进入本地终端环境。

二、零配置起步：使用浏览器控制台执行代码

如果你手头暂时没有安装任何专门的编程软件，甚至不需要新建任何文件，直接打开你正在使用的浏览器（推荐 Chrome、Edge 或 Firefox），就可以直接获得一个即开即用的交互式环境。

1. 打开开发者工具

在任意网页页面中，按下键盘上的 F12 键；或者使用快捷键（Windows/Linux 下为 Ctrl + Shift + I，macOS 下为 Command + Option + I）。如果快捷键无反应，也可以在页面空白处单击鼠标右键，在弹出菜单中点击“检查”（Inspect）。

2. 切换至 Console（控制台）面板

在弹出的开发者工具窗口顶部，点击切换到 Console 标签页。这里是浏览器的 REPL（读取-求值-打印-循环）交互界面，光标所在处可以直接接收 JavaScript 语句。

3. 执行第一行代码

在控制台输入以下代码，然后按下回车（Enter）键：

console.log("你好，JavaScript！这是我的第一个控制台脚本。");

控制台输出了双引号内的中文文本，下一行跟随显示的 undefined 是该语句执行后的返回值（console.log 方法本身不返回特定值，因此返回值为 undefined，这属于正常现象）。

三、标准网页脚本：HTML 引入外部 JavaScript

实际网页项目中，脚本通常以独立的 .js 文件形式存在，并通过 HTML 标签加载。接下来我们在本地搭建基础工程目录。

1. 编辑器与工作目录准备

推荐下载并安装 Visual Studio Code（简称 VS Code），或者使用系统自带的纯文本编辑器。在电脑硬盘上（例如桌面）新建一个名为 js-demo 的文件夹，并在该文件夹下新建两个文件：

• index.html：网页主结构文件；
• app.js：存放 JavaScript 逻辑的脚本文件。

2. 编写 index.html 内容

打开 index.html，写入如下标准的 HTML5 模板代码：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>JavaScript 第一个网页脚本</title>
</head>
<body>
  <h1 id="title">等待脚本加载...</h1>
  <p>这是一个包含 JavaScript 脚本的基础网页。</p>

  <!-- 关键点：在 body 闭合标签前引入外部脚本文件 -->
  <script src="app.js"></script>
</body>
</html>

3. 编写 app.js 内容

打开同级目录下的 app.js，写入以下脚本代码：

// 1. 控制台输出调试信息
console.log("app.js 脚本文件已成功加载！");

// 2. 声明基础变量并计算
let courseName = "JavaScript 入门教程";
let currentYear = 2026;
console.log("当前学习项目：" + courseName + "，发布年份：" + currentYear);

// 3. 操作网页 DOM 节点，更新页面标题
let titleElement = document.getElementById("title");
if (titleElement) {
  titleElement.textContent = "恭喜！外部 JavaScript 脚本运行成功！";
  titleElement.style.color = "#52677D";
}

4. 运行与验证

保存上述两个文件。在文件管理器中找到 index.html，直接双击使用默认浏览器打开；或者在浏览器中按 Ctrl + O 选中并打开该文件。

四、命令行与后端运行：安装 Node.js 运行独立脚本

如果你编写的脚本用于处理数据、文件批处理或搭建后台 API 服务，则无需借助网页。通过在系统中配置 Node.js 运行时，可在操作系统终端中直接输入命令执行脚本。

1. 下载并安装 Node.js

前往 Node.js 官方网站（https://nodejs.org），下载适合当前操作系统的长期支持版（LTS 版本）。下载完成后运行安装程序，保持默认选项完成安装即可。

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

打开系统自带的终端工具（Windows 用户打开“PowerShell”或“命令提示符”，macOS/Linux 用户打开“Terminal”），输入以下检查命令：

node -v
npm -v

如果命令行成功打印出类似上述的版本号（数字可能随具体安装版本而异），说明 Node.js 和其包管理器 npm 已经正确配置在系统环境变量中。

3. 创建并编写独立脚本

在你的工作目录中新建一个名为 main.js 的文件，写入以下内容：

// main.js - 独立终端脚本示例
console.log("[Node.js 执行成功] 欢迎进入独立脚本环境！");

// 进行一段数学累加计算
let sum = 0;
for (let i = 1; i <= 100; i++) {
  sum += i;
}

console.log("计算结果：1 + 2 + ... + 100 = " + sum);

// 读取当前运行环境信息
console.log("当前 Node.js 版本：" + process.version);
console.log("当前操作系统平台：" + process.platform);

4. 执行脚本并查看输出

打开终端，使用 cd 命令进入存放 main.js 的文件夹目录（例如 cd ~/Desktop/js-demo），然后输入命令：

node main.js

脚本从上至下执行，并在终端输出了计算结果与系统信息，无需启动任何浏览器。

五、初学者常见问题排查与排错路径

在首次编写与运行 JavaScript 脚本时，极易遇到无法正常输出结果或报错的情况。下表列出四种最典型的问题表现与解决办法：

• 问题一：浏览器控制台报 404 Not Found 错误
  原因说明：HTML 中的 <script src="app.js"> 文件名与实际磁盘文件名不一致（例如大小写不匹配或后缀写错成 .html.js）。
  解决方法：检查 index.html 和 app.js 是否在同一文件夹下，并严格核对文件名拼写。
• 问题二：报错 Cannot set properties of null
  原因说明：在 HTML 元素尚未渲染前就调用了 document.getElementById()。
  解决方法：将 <script> 标签移至 </body> 之前，或者在 script 标签中添加 defer 属性。
• 问题三：终端提示 node: command not found
  原因说明：Node.js 安装完成后尚未将可执行路径写入系统环境变量，或终端窗口未重启。
  解决方法：完全关闭并重新打开终端工具；如仍未识别，请重新运行 Node.js 安装包并勾选“Add to PATH”选项。
• 问题四：修改了 .js 文件，刷新浏览器后页面没有变化
  原因说明：浏览器对静态脚本文件存在本地缓存策略，直接按 F5 刷新可能依然加载旧版本。
  解决方法：使用强制刷新快捷键（Windows 下为 Ctrl + F5，macOS 下为 Command + Shift + R）。

六、总结与下一步探索

搭建 JavaScript 运行环境的核心在于理解“宿主环境”：

• 如果你的目标是打造生动的网页交互、响应点击事件或渲染数据界面，浏览器 + HTML 组合是最直观的切入点；
• 如果你的目标是开发接口服务、处理本地数据文件或编写通用工程脚本，Node.js 运行时则是现代全栈开发的标配底座。

完成本文中的控制台测试、网页脚本加载以及终端 node 运行三步后，你的开发环境已完全就绪。接下来即可进一步深入变量定义（let、const）、控制流程、函数声明以及异步编程等核心语法学习。