第 4 章 JavaScript：动作语言

三兄弟里，JS 是唯一的"编程语言"——有逻辑、会判断、能记事。先把四块积木认全：

const price = 100;                      // 变量：给一个值起名字
function applyDiscount(p) {             // 函数：打包一段动作，随叫随用
  if (p > 50) {                         // 判断：满足条件才做
    return p * 0.9;
  }
  return p;
}
const items = ["卡片", "凭证"];          // 数组：一列东西
const user = { name: "Roy", age: 47 };  // 对象：一组「名字: 值」

变量用 const（之后不再改）或 let（还会变）声明——AI 几乎总用 const，图的是安全。函数是"输入 → 加工 → return 输出"；它有个现代简写叫箭头函数：const f = (p) => p * 0.9，意思完全一样，只是换了件衣服——你在 AI 写的代码里看到的满屏 =>，都是它。对象与数组你其实见过：它们就是 JSON 的活体（第 6 章会正式认这门亲戚），user.name 读作"user 的 name"。

第四块积木是浏览器 JS 的心跳：事件（Event）——"等到某件事发生，就执行这段代码"。别处不用找例子，我们 docs 原型里的复制按钮就是：

btn.addEventListener('click', () => {
  const code = btn.parentElement.querySelector('code').textContent;
  navigator.clipboard?.writeText(code);
  btn.textContent = '已复制';
  setTimeout(() => btn.textContent = '复制', 1600);
});

逐行读：等这个按钮被点 → 找到它旁边代码块里的文字 → 写进剪贴板（?. 读作"如果它存在的话就"）→ 把按钮文案改成"已复制" → 1.6 秒后改回来。五行，一个完整的小剧情。你上周还只是"用过"这个按钮，现在你读懂了它。

两个补充认知。**其一，同一门语言，两个住处。**浏览器里的 JS 摸得到页面（有 document、有事件）；Node.js 则是装在电脑或服务器上的 JS 运行环境，没有页面，但能读文件、开服务器。第一册讲的前端与后端，在 JS 世界里常常是同一门语言两头跑——这正是 npm 的包前后端通用的原因。**其二，await 认脸即可。**见到 await fetch(...)，读作"去网上取数据，等它回来再继续"。网络请求都要等，await 就是那个"等"字——第一册第 1 章的请求与响应，写进代码里就长这样。

认脸卡

后缀 .js；满眼 const、function、=>、if；行尾常有分号。

关键领悟

读 JS 不要逐字抠语法，先找三样东西——数据在哪（变量）、动作在哪（函数）、什么时候触发（事件或调用）。三样找齐，这个文件的剧情就通了。

试一试

打开 docs 原型底部的 <script> 区，里面一共六小段功能。挑两段，逐行讲给自己听；讲不通的行，原样贴给 AI 问"这行为什么需要存在"。

第 4 章 JavaScript：动作语言 ​

第 4 章 JavaScript：动作语言