前置知识: HTML5、CSS

JavaScript 是什么：你的第一门编程语言

6 min入门

面向完全零基础读者，讲清 JavaScript 的定位、能做什么、在哪里运行，并写出第一段可执行的代码。

前置知识

  • 会开关浏览器、会打字即可。本篇不需要任何编程经验，所有概念第一次出现时都会解释。

学习目标

  • 用一句话说清 JavaScript（简称 JS）是什么、它和 HTML/CSS 的分工；
  • 知道 JS 能做的四类事情，以及”浏览器”与”Node.js”两个运行环境的关系；
  • 亲手运行第一段代码，学会读第一条报错信息。

网页的三层分工

把网页想象成一个人：HTML 是骨架（结构，决定页面上有什么）、CSS 是皮肤与衣着（外观，决定长什么样）、JavaScript 是肌肉与神经（行为，决定能做什么、如何响应）。

你在网页上见到的所有”动起来”的部分——点击按钮弹出提示、下拉刷新、购物车结算、表单校验、搜索联想——都是 JavaScript 在工作。反过来说，HTML 与 CSS 自己不会”思考”：它们描述静态的结构和样式，一切”根据情况变化”的行为都交给 JS。

类比仅帮助理解：真实的分工边界没有这么绝对（CSS 也有动画等动态能力，JS 也能改结构），但”HTML 管有什么、CSS 管长什么样、JS 管怎么动”这个心智模型足以支撑入门阶段。

JavaScript 能做什么

它的版图远比”网页特效”大：

场景说明典型例子
浏览器交互全部主流网页的界面逻辑，浏览器唯一内置的脚本语言表单校验、弹窗、轮播图
服务端借助 Node.js 运行时，可以写网站后台与接口用 Express/NestJS 写 API（见本仓库 nestjs 模块）
桌面与移动端借助 Electron、React Native 等框架开发跨端应用VS Code 本身就是用 Electron 打包的
工具链前端构建工具（Vite 等）本身也由 JavaScript/TypeScript 编写打包器、代码检查器、脚手架

对零基础学习者，这意味着：学会这一门语言，前端、后端、桌面端三条路都打通了入口——语言是同一门，只是”运行环境”和配套工具不同。

它在哪里运行

只有两个地方需要关心：

  1. 浏览器：你按 F12 打开的控制台（Console 标签）就是一个即写即跑的 JS 运行环境。Chrome、Edge、Firefox、Safari 都内置了 JS 引擎（Chrome 系的引擎叫 V8）；
  2. Node.js：把 V8 引擎从浏览器里”拆出来”装到操作系统上，让 JS 脱离浏览器独立运行——写后端、跑构建工具都靠它（安装见 Node.js 安装配置）。

“运行环境”这个词以后会反复出现：它指的是语言引擎 + 周围提供的能力。浏览器环境额外提供 document（操作页面）、fetch（发网络请求）等浏览器能力；Node.js 环境额外提供读写文件、起服务器等系统能力。语言核心（变量、函数、循环）两边完全一致。

动手环节：第一行代码

不需要安装任何东西。打开浏览器按 F12，切到 Console（控制台）标签，输入以下内容并回车：

console.log('你好，世界');

你会立刻看到输出：你好，世界。console.log 的含义是”把括号里的内容打印到控制台”——它是你未来最主要的调试伙伴。括号里的 '你好，世界' 是一个字符串（一段文字，用引号包起来）。

再来一段带变量与逻辑的：

// 定义一个函数：输入名字，返回问候语
function greet(name) {
  return '你好，' + name + '！欢迎来到编程世界。';
}

console.log(greet('学习者'));   // 输出：你好，学习者！欢迎来到编程世界。

逐行拆解：

  • function greet(name) { ... } 定义了一个名为 greet 的函数——可以反复使用的功能块，name 是它的参数（调用时传入的值）；
  • return 把结果”交还”给调用者；
  • greet('学习者') 是一次调用：把 '学习者' 传进去，拿到返回的字符串；
  • 最后 console.log(...) 把结果打印出来。

再用一个变量和一次条件判断，感受”程序根据数据做决定”：

const hour = 20;                       // const 定义一个不可重新赋值的变量

if (hour < 12) {
  console.log('上午好');
} else {
  console.log('晚上好');               // 当前输出：晚上好（20 不小于 12）
}

编程就是把想法写成这样一段可反复执行的步骤：定义数据（变量）、定义步骤（函数）、根据情况分支（if）、重复执行（循环）。后续篇章会逐一展开这些构件。

报错是正常现象

在控制台输入 console.log(abc) 并回车，你会看到红色报错：

Uncaught ReferenceError: abc is not defined

翻译过来是”abc 这个变量没有定义”。读报错是编程的核心技能，推荐三步读法：

  1. 看类型：ReferenceError 表示引用了不存在的东西（语法错是 SyntaxError、类型用错是 TypeError）；
  2. 看消息：abc is not defined 直接告诉你哪个名字出了问题；
  3. 看位置：完整报错末尾会带文件名与行号，控制台点击可直接跳转。

九成的初学者问题，答案就写在报错信息里。报错不是”程序坏了”的耻辱柱，而是引擎在精确地告诉你哪里需要修。

初学者最容易踩的三个坑

  1. 大小写敏感：console.log 写成 Console.log 会直接报错。userName 和 username 是两个不同的名字；
  2. 中英文标点混用：引号、括号、分号必须是英文半角。中文引号 "..." 会让引擎直接无法解析；
  3. 改了代码没生效：控制台里的代码是临时的，刷新页面就没了；真实项目代码要写进 .js 文件（这一步在下一篇与 Node.js 安装 之后展开）。

下一步

完成上面的动手环节后，进入 JavaScript 概述与运行环境 系统学习语法主线；想理解页面上 HTML 与 CSS 如何配合，先读 网页是什么 与 CSS 是什么。

小结

初学者记住这三点：

  1. JS 是网页的”行为层”：HTML 管结构、CSS 管外观、JS 管一切”动起来”的逻辑；
  2. 浏览器控制台（F12 → Console）就是你的第一个编程环境，console.log 是第一件工具；
  3. 报错是引擎在帮你定位问题：看类型、看消息、看位置。

进阶者还需注意：

  • 语言核心（ECMAScript）与运行环境（浏览器 API / Node API）是两回事，学习时要分清哪些能力属于哪一层；
  • 同一门语言覆盖前端、后端、桌面端的代价是生态庞大——入门期只抓”语言核心 + 浏览器环境”一条线即可；
  • 现代 JS 开发的主力语言其实是 TypeScript（带类型的 JS），但一切建立在把 JS 学扎实的基础上。