🎯 学习目标

学完本章，你将能够：

• 能够解释什么是编程，以及程序的基本组成（输入、处理、输出、控制流）
• 能够说明 JavaScript 的特点（解释型、动态类型、跨平台）和应用场景
• 能够搭建开发环境（安装 Node.js、配置 VS Code），并使用 REPL 和浏览器控制台执行 JS 代码
• 能够编写并运行一个完整的 Hello World 程序，通过 script 标签或 Node.js 执行
• 能够使用 console.log、prompt、alert 实现基本的输入输出交互

你有没有想过

网页上的按钮为什么能"记住"你的点击？手机 App 怎么知道你在哪座城市？

这些看似神奇的事情，背后都是同一样东西在驱动：程序。

程序就是一组指令，告诉计算机该做什么。写程序的人叫程序员，写程序的过程就叫编程。

接下来几章，你将从零开始学会用 JavaScript 这门语言来编程——它既能在浏览器里运行，也能在服务器上运行，是今天最流行的编程语言之一。

什么是编程

用语言和计算机对话，让它帮你干活

编程（Programming）是指用一种特定的语言向计算机发出指令，让计算机按预定逻辑执行任务的过程。

说白了，编程就是给计算机写一份精确到每一步的菜谱。你写的每一行代码，就是菜谱中的一个步骤。

这个比喻只是为了帮你建立直观感受。在计算机内部，代码实际上是被翻译成 CPU 能理解的二进制指令来执行的，并不存在什么"菜谱"。

不管什么程序，核心都离不开这四件事：

什么是 JavaScript

一门既能写网页动画，又能写服务器接口的语言

JavaScript（简称 JS）是一种高级、解释型、动态类型的编程语言，1995 年由 Brendan Eich 在 Netscape 公司仅用 10 天设计出初版。如今它已是世界上最流行的编程语言之一。

用人话说：JavaScript 是一门不需要编译、写完就能直接运行的语言。你写一段 JS 代码，浏览器或 Node.js 马上就能执行它，给你结果。

它的核心特点：

• 解释型：不需要预先编译，由 JS 引擎直接解释执行
• 动态类型：变量不需要声明类型，运行时自动确定
• 多范式：支持面向对象、函数式和事件驱动等多种风格
• 跨平台：浏览器、服务器、手机、桌面、物联网都能跑

JS 能做什么

不只是一个"网页脚本语言"

从网页到服务器，从手机到桌面，JavaScript 几乎无处不在。这也是我们选择它作为全栈开发主力语言的原因。

JS 引擎全景

同一种语言，不同的运行环境

JavaScript 代码不是直接在操作系统上运行的。它需要一个JS 引擎来解析和执行，再由运行时环境提供额外的能力。

引擎负责把你的代码翻译成机器能执行的指令。运行时则决定了你能用哪些功能——浏览器里你能操作网页，Node.js 里你能读写文件。

JS 简史与 ES 版本

从 10 天造出来的语言，到全球第一

JavaScript 的标准叫 ECMAScript（简称 ES），由 ECMA 国际组织的 TC39 委员会维护。JS 是 ES 标准的一种实现。

从 ES2015 开始，每年发一个新版本。人们常说的"ES6+"泛指 ES2015 及之后的所有新特性。

Part 1: 开发环境搭建

在写代码之前，先把工具准备好

木匠开工之前要先备好锯子和锤子，写代码也一样。你需要三样东西：一个编辑器、一个运行环境、一个浏览器。接下来带你从零安装 VS Code 和 Node.js，再学会在浏览器控制台里直接运行代码。工具到手，后面写代码才能畅通无阻。

VS Code 编辑器

微软出品的免费开源编辑器，前端开发的事实标准

从 code.visualstudio.com 下载安装即可。推荐安装以下扩展：

• ESLint — 代码质量检查
• Prettier — 自动格式化
• Live Server — 本地开发服务器，保存即刷新

记住这几个快捷键，后面会反复用到：

国产选择：让 AI 帮你写代码

如果想要内置 AI、访问更顺畅，下面几款都值得一试

它们要么是独立编辑器，要么是装在 VS Code 里的 AI 插件，都能在你写代码时自动补全、解释报错、生成函数。

• Trae CN — 字节跳动出品，基于 VS Code 的国内版 AI 编辑器，界面和 VS Code 几乎一样，开箱即用，无需翻墙。
• Qoder CN Desktop — 阿里云出品的 AI 编程助手（原“通义灵码”，2026 年 5 月更名），提供独立 IDE 和 VS Code 插件两种形态，支持代码补全、智能问答、编程智能体。
• 华为云码道 CodeArts — 华为云出品的智能编码产品，融合盘古研发大模型，支持项目级代码生成、研发知识问答、单元测试生成，访问 codearts.huaweicloud.com 了解详情。

给新手的小建议：先用 VS Code + Live Server 跑通基础流程，熟练之后再叠加 AI 助手，避免一上来就过度依赖自动生成。

安装 Node.js

让 JavaScript 脱离浏览器，在你的电脑上直接运行

Node.js 是基于 Chrome V8 引擎的 JavaScript 运行时。有了它，你可以在终端里直接运行 JS 代码，不用打开浏览器。

安装方式（选一种即可）：

• 官方安装包：从 nodejs.org 下载 LTS 版本
• nvm：Node Version Manager，可管理多个版本
• fnm：Rust 编写的快速版本管理器

安装完成后，打开终端验证：

$ node --version
v20.11.0

$ npm --version
10.2.4

如果看到版本号，说明安装成功。

Node.js REPL

一个即写即运行的小 playground

在终端输入 node 回车，就进入了 Node.js 的交互式环境（REPL）。你可以直接输入 JS 代码，按回车立刻看到结果。

$ node
> 2 + 3
5
> "Hello, " + "World"
'Hello, World'
> .exit

浏览器开发者工具

按 F12 打开，Console 面板是你的另一个 playground

所有现代浏览器都内置了开发者工具（DevTools），按 F12 或 Ctrl+Shift+I 打开。

打开后切换到 Console 标签，你可以直接输入 JS 代码并运行：

console.log("Hello from browser!");
document.title;  // 显示当前页面的标题

DevTools 的几个核心面板：

Part 2: 第一个程序

环境准备好了，现在来写你的第一段 JavaScript 代码

工具装好了，怎么确认它能用？最快的办法就是写一个程序，让计算机说句"你好"。

你会在三种环境里分别跑通同一个程序，搞懂代码放在哪里、怎么运行。

写完之后，你还会学会用注释给代码加"便签"——方便一周后回来看还能看懂。

Hello World

用三种方式让计算机说"你好"

同一段 console.log("Hello, World!")，在浏览器控制台、HTML 文件、Node.js 终端里都能跑通。原因是 JavaScript 有自己的运行时引擎——浏览器里是 V8（Chrome）或 SpiderMonkey（Firefox），Node.js 也用 V8。只要引擎在，它就能读懂并执行 JS 代码。console.log() 是所有 JS 环境都内置的基础功能，所以同一句代码在哪里都能用。

方式一：浏览器控制台 — 打开 DevTools Console，直接输入：

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

方式二：HTML 文件 — 创建 hello.html，用 <script> 标签把 JS 嵌入网页：

<!DOCTYPE html>
<html lang="zh-CN">
<body>
    <h1>我的第一个 JS 程序</h1>
    <script>
        console.log("Hello, World!");
    </script>
</body>
</html>

方式三：Node.js — 创建 hello.js，终端执行 node hello.js：

// hello.js
console.log("Hello, World!");

$ node hello.js
Hello, World!

代码注释

给未来的自己留一张便条

你写了一段代码，今天完全清楚每一行在干什么。但一周后再打开，可能就不记得了。注释就是写给人类读者的说明文字，计算机执行时会完全忽略它们。

// 单行注释：用双斜线开头，适合简短说明

/*
 多行注释：用斜线和星号包裹
 适合写较长的说明
 */

// 注释的三个最佳实践：
// 1. 解释"为什么"这样做，而不是"做了什么"
// 2. 标记待办：// TODO: 后续优化这个逻辑
// 3. 临时禁用代码（调试时很有用）

// console.log("这行被注释掉了，不会执行");

script 标签位置

放在哪里，决定了页面加载的体验

浏览器是从上往下逐行读取 HTML 的。如果 <script> 放在页面顶部，浏览器会先停下来加载和执行 JS，用户就会看到一片空白——因为页面还没来得及"画"出来。

Part 3: 输入与输出

程序的核心是"接收数据 → 处理 → 输出结果"

你的程序能说"你好"了，但它还不会听你说话。

一个真正有用的程序，得能接收用户的数据、处理后再输出结果。

你在浏览器里怎么弹窗让用户输入？在 Node.js 里怎么读取命令行参数？

这一节把两个环境的输入输出方式都讲清楚，后面写练习和项目就用得上。

console 输出

最常用的调试工具，没有之一

console.log("普通日志");
console.warn("警告信息");
console.error("错误信息");

// 格式化输出
console.log("姓名: %s, 年龄: %d", "张三", 25);

// 表格输出——非常适合查看数组和对象
console.table([
    { name: "张三", age: 25 },
    { name: "李四", age: 30 }
]);

// 计时——测量代码执行耗时
console.time("耗时");
for (let i = 0; i < 1000000; i++) {}
console.timeEnd("耗时");

浏览器交互

alert、confirm、prompt——简单但实用

// 弹出提示（阻塞式，必须点确定才继续）
alert("这是一条提示信息");

// 确认对话框，返回 true 或 false
let result = confirm("确定要删除吗？");

// 输入对话框，返回用户输入的字符串，取消则返回 null
let name = prompt("请输入你的名字：", "默认值");

Node.js 输入

在终端里把数据传给程序

浏览器有 prompt() 弹窗来获取输入，Node.js 没有界面，所以输入方式不同。最简单的方式是命令行参数——运行程序时直接在后面带上数据：

// greet.js
let name = process.argv[2]; // 取第三个参数
console.log("你好, " + name + "!");

$ node greet.js 张三
你好, 张三!

输入输出对比

一张表看清不同环境下的 I/O 方式

常见环境问题

问题一：node --version 提示"命令未找到"

原因：Node.js 没有安装，或安装后没有加入系统 PATH。

修复：重新从 nodejs.org 下载安装包安装；如果已安装，重启终端再试。

问题二：console.log 没有任何输出

原因：可能是文件名写错了，或者代码写在了注释里。

修复：检查文件名是否正确，确认代码没有被 // 或 /* */ 注释掉。

问题三：HTML 文件中的 JS 不执行

原因：<script> 标签写在 <head> 里，且操作的 DOM 元素还没加载。

修复：把 <script> 移到 </body> 之前，或者给 <script> 加上 defer 属性。

试一试

// 提示：60秒 × 60分 × 24小时 × 365天
// 你的代码：

console.log(60 * 60 * 24);       // 86400 — 一天的秒数
console.log(60 * 60 * 24 * 365); // 31536000 — 一年的秒数

$ node card.js
********************
* 姓名：张三
* 年龄：25
* 技能：JavaScript
********************

// 个人信息卡片
console.log("********************");
console.log("* 姓名：张三");
console.log("* 年龄：25");
console.log("* 技能：JavaScript");
console.log("********************");

$ node greet.js 李雷
你好，李雷！欢迎学习 JavaScript！

// 从命令行参数获取名字
console.log("你好，" + process.argv[2] + "！欢迎学习 JavaScript！");

📝 要点总结

本章核心知识点