← FC Coder · HomePhase 01 · Lesson 09 · 60 min
Lesson09
Phase One · First App · Matchday 09 · First Box
给球队起名字
第一个变量
Today's 3 Jobs · 今天这三件事
- 01写第一个 const team = '曼城'盒子有标签 · 永久存在文件里
- 02用 `${team}` 把盒子塞进 JSX反引号 + 大括号 · 钻回 JS
- 03改 const 看变化 · 一改管一堆变量的真本事
Phase 0 第 3 课你在 Console 里造过 const —— 关 DevTools 就没了。今天你第一次写在文件里 —— 关电脑明天还在。盒子贴标签:变量 = 给东西起名字。改一处管一堆 —— 这是程序员爱写变量的根本理由。
Essence · 本质点
变量 = 给东西起名字
Phase 0 第 3 课的盒子,今天真的落到文件里 —— 永久,改一处管一堆。
const team = '曼城';
从此 team 这个名字 = '曼城' 这个值
从此 team 这个名字 = '曼城' 这个值
关键字
const
盒子名
team
给
=
值
'曼城'
= 不是数学的等号 —— 是「给」(把右边交给左边的盒子)。一个 const 创建一个不变盒子,叫名字就是叫值。
Essence · 模板字符串
反引号 = 会开窗的引号
字里能塞 ${} 让变量探头。Phase 0 用 + 拼字,今天升级。
`我支持 ${team} · 加油!`
一整段写 · 不用 + 拼 · 不容易错
一整段写 · 不用 + 拼 · 不容易错
Phase 0 第 3 课
"我支持 " + team
Phase 1 第 9 课
`我支持 ${team}`
结果
'我支持 曼城'
反引号 ` 在键盘左上角,数字 1 左边。Mac 中文输入法会吞 —— 切英文输入法。或者复制课文里给的反引号。
Roster · 今天 3 个新工具
const 造盒子 · 反引号塞值 · {} 钻回 JS
抄着用,改一改看变化,5 分钟就熟。
- 01const team = '曼城'造一个不变盒子—— 关键字 const · 盒子名 team · = 给 · 值 '曼城'。字用 ' 包住 · 数字不用。' 和 " 都可以,前后配对。
- 02`我支持 ${team}`模板字符串 —— 反引号会开窗的引号 · 字里塞 ${} 让变量探头。比 + 拼接好 —— 整段写不容易错。Phase 0 第 3 课用过 + · 今天升级。
- 03<h1>{name}</h1>JSX 大括号 —— <> 是 HTML 边界 · {} 是 JS 边界。想塞变量进 HTML?{} 里写。想拼字?反引号 + ${}。
Half 2 · 在屏幕上
回 07 课的 sandbox · 把卡上的字变成变量
做完一步就点 ✓。改一个 const,卡像换了一个人。
01造盒子 · 第一个 const
01Min
Cursor + pnpm dev + 打开 sandbox
回到 app/lessons/07-my-first-card/sandbox/page.tsx。浏览器看到上节课的曼城蓝卡。
02Min
在 return 上面写 const team = '曼城';
export default function Sandbox() { 的下一行,return ( 的上一行,加 const team = '曼城';。保存 · 浏览器不变(还没用)。
02用盒子 · 塞进 JSX
03Min
</article> 上面加 <p>{`我支持 ${team}`}</p>
用反引号包 · ${team} 插入。完整:<p className="mt-2">{`我支持 ${team}`}</p>。保存 · 卡上多一行「我支持 曼城」。
03🌟 改一处 · 管一堆
04Min
改 const team = '皇马'; · 看变化
把 '曼城' 改成 '皇马' · 保存 · 卡上变「我支持 皇马」。这就是变量的魔力 —— 改一处管一堆。改回 '曼城' 我们继续。
05Min
再造一个 · const name = '哈兰德';
const team 下面 · 加 const name = '哈兰德';。还没用 · 浏览器不变。
06Min
<h1>哈兰德</h1> → <h1>{name}</h1>
把 <h1 ...>哈兰德</h1> 里面的「哈兰德」换成 {name}。保存 · 标题还是「哈兰德」· 但这次来自变量。
07Min
改 const name = '福登'; · 看标题变
卡的大标题变成「福登」。一个变量管一个位置 —— 多个变量管多个位置。
08Min
第三个 · const rating = 91; (无引号!)
91 是数字 · 不用引号。const rating = 91;。然后 <p>评分:91</p> → <p>评分:{rating}</p>。保存 · 评分变 {rating} 的值。
04玩 · 模板字符串多变量 · 截图
09Min
🌟 三盒子同改 · 整张卡换人
改成 const team = '巴萨'; / const name = '梅西'; / const rating = 93;。保存 · 一张完全不同的卡。3 个 const 改一遍 · 卡像换了一个人。
10Min
模板字符串多变量 · 一句完整的话
在 rating 下面加 const slogan = `${name} 是 ${team} 的 ${rating} 分球员`;。在卡里加 <p>{slogan}</p>。保存 · 卡上出现完整一句话。
11Min
📸 截图战利品
Mac Shift + Cmd + 4 框选你的变量卡。存 2026-XX-XX-我的变量卡.png · Phase 1 第四张战利品。
Half Time · 中场 · 讲给爸爸听
4 题 · 重点:变量 = 给东西起名字
第一题一定要让他讲 —— 用盒子比喻就过。
01什么是变量?用「盒子」的比喻讲一遍。Hint ↓
给东西起名字 —— 盒子贴标签 · 以后叫名字就是叫他。const = 不会变的盒子。
02为什么变量好用?你今天的 team 出现在几个地方?Hint ↓
改一处管一堆。不用变量你要找 3-4 个地方手动改 · 用变量改 const 一行 · 全部跟着变。
03const team = '曼城'; 里 = 是数学的等号吗?Hint ↓
不是。= 在编程里是「给」—— 把右边给到左边的盒子里。比较相等用 == / ===(以后学)。
04JSX 里的 {} 是干什么的?Hint ↓
钻回 JS 世界。<> 是 HTML 边界 · {} 是 JS 边界。要塞变量进 HTML 必须用 {}。
Player Rating · 本课温度计
给「第一次写真正的 JS」打个分
说真话。爸爸会看到。
今天难度Difficulty
0
今天开心Fun
0
Final Whistle · 终场哨
你写了第一个 const · 卡上每个字都可以变。
还有 11 步没打勾。Step 4 改 const team = '皇马' 那一下看到卡变 · 今天本质点已经命中。其他可以下次补。