第 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 · 动作语言