← FC Coder · HomePhase 00 · Lesson 05 · 60 min
Lesson05
Phase Zero · DevTools Explore · Matchday 05 · Final

抓出评分
最高的球员

Today's 3 Jobs · 今天这三件事
  1. 01
    撕下一张卡上的「评分」—— 不要颜色,只要数
    .textContent + Number() · 字变数
  2. 02
    对每一张做一次 · 得到一串纯数字
    相框没了 · 只剩纸上的数
  3. 03
    一行代码找到冠军 · 反查回屏幕,画金边
    Math.max(...ratings) → cards[i]

上节课你做到「一行管一片」—— 改样子。今天你做侦探 —— **把数据从界面里撕出来**,让浏览器替你找出当前页**评分最高的那一个**,再把他从人堆里拎出来。这是 Phase 0 最后一节。

Half 1 · 在脑子里

三层回忆 · 大脑往最深走一步

骨头、皮肤、大脑 —— 前四节课的路径。今天大脑学会:把数据从界面里撕出来。

  1. 01

    骨头

    HTML

    第 1 课 · 是什么

  2. 02

    皮肤

    CSS

    第 2 课 · 长什么样

  3. 03

    大脑

    JavaScript

    第 3-5 课 · 会做什么 · 今天大脑学会**只要数据**

    今天只看这个
Essence · 本质点

数据 vs 界面 · 它们是两件事

你看到一张卡 = 相框 + 纸上的字。今天第一次:只要纸,不要相框。

Chalk Board · 卡 = 相框 + 纸
<div class="player-card">
↳ 相框 · 样子(你第 2 / 4 课改过)
↳ <span class="rating">93</span> · 纸(今天要撕)
相框 · 样子
颜色 / 边框 / 图片
纸 · 数据
93 / "哈兰德" / ST
今天要做
把纸抽出来 · 不要相框

球员换球衣名牌不变;受伤剃胡子名牌不变。相框会变 · 纸上的字不变。一会儿你让浏览器只看纸。

Essence · 今天的咒语

撕 → 翻 → 找最大 → 反查

第 4 课的「找一串 → 对每一个 → 改样子」今天变形了 —— 改样子 → 撕数字。

Chalk Board · 四步
cards.forEach(c => ratings.push(
Number(c.querySelector('.rating').textContent)
))

Math.max(...ratings)
1. 撕
.textContent
2. 翻
Number("93")
3. 找最大
Math.max(...ratings)
4. 反查
cards[i]

读出来:"对每一张卡,撕下评分的字,翻成数,攒成一串;找最大的;再用序号指回那张卡。"
Phase 0 的压轴形状。

Roster · 三件新工具

不用背 · 上手时会回来

第一个 ripper · 第二个 translator · 第三个 judge。

  1. 01
    .textContent
    撕下来的纸条 —— 把卡上**肉眼看到的字**抓出来,不要颜色、不要图片。
    从 DOM 撕出来的**一定是字**(带引号)。要做数学,下一步。
  2. 02
    Number("93")
    换钱窗口 —— 进去一张写着 93 的纸条(字),出来一枚真的 93(数)。
    "93" + 6 = "936"(拼字);Number("93") + 6 = 99(真加法)。
  3. 03
    Math.max(...ratings)
    裁判挑最高分 —— 给它一串数字,它告诉你最大的。
    三个点 ...= "把一串打散"。 今天抄着用,Phase 1 正式讲。
Warm-up · 赛前热身

在这里先撕一次 · 看数据离开界面

9 张曼城卡。按顺序点咒语 —— Console 会一行一行累加,跟真的一样。

Console · 咒语累加
// 按顺序点下面的咒语 · 1 → 2 → 3 → ... · 看数据和相框怎么分家
93
ST
FC · CODER
🐺
哈兰德
84
LW
FC · CODER
⚡
多库
88
CAM
FC · CODER
🦊
福登
91
CDM
FC · CODER
🛡️
罗德里
87
CM
FC · CODER
🎯
B 席
80
RW
FC · CODER
🌪️
赛门约
84
CB
FC · CODER
🧱
鲁本
84
CB
FC · CODER
🪨
斯通斯
88
GK
FC · CODER
🧤
埃德森
每张卡的 .rating 就是那个大数字 · 一会儿我们**只要它**
Spells · 按顺序念 · 每念一条 · 看 Console 多一块
Half 2 · 在屏幕上

现在去真球场 · 在 ea.com 上抓冠军

做完一步就点 ✓。关掉浏览器也不丢。

Away Fixture · 客场
打开 ea.com/ratings →新窗口打开 · 回来打勾 · class 名不对就换 img 备选
01钻进一张卡 · 撕一个数
01Min

召唤 DevTools · 切到 Console

打开 ea.com/games/ea-sports-fc/ratings。Mac ⌘ + ⌥ + I · Windows F12 · 切到 Console。老动作。
02Min

抓第一张卡 · 看一眼相框

打:const firstCard = document.querySelector('.player-card') · Enter · 再打:firstCard · 看一坨 HTML。回 null 就去 Styles 面板偷 class 名,或切到 img 备选路线(课文 Step 2 说明)。
03Min

钻进卡 · 撕评分的「字」

打:firstCard.querySelector('.rating').textContent · 回 "93"(带引号的字)。再打:firstCard.querySelector('.rating').textContent + 6 · 回 "936" —— 😅 拼字了,不是加 6。
04Min

过翻译机 · 字变数

打:Number(firstCard.querySelector('.rating').textContent) · 回 93(没引号了)。再加 6 · 回 99 · ✅ 真加法。
02对每一张 · 攒一串数字
05Min

抓所有卡 + 攒一串纯数字

打:const cards = document.querySelectorAll('.player-card') · 再打:const ratings = [] · 再打:cards.forEach(c => ratings.push(Number(c.querySelector('.rating').textContent))) · 最后打 ratings → [93, 88, 91, ...] 一串纯数字。相框没了。
06Min

对一下 · 两串一样长吗

打 ratings.length · 再打 cards.length · 两个数字应该一样。不一样 = 有卡没撕到评分(空数据/class 名对不上),回上一步检查。
03🏆 找冠军 · 反查 · 画金边
07Min

🏆 找冠军 · 一行

打:Math.max(...ratings) · 蹦出最高分(比如 93)。别漏那三个点 —— 没点会变 NaN(Math.max 看到一串懵了)。
08Min

同家族 · 找最低

打:Math.min(...ratings) · 蹦出最低分。形状没变 · 换个词换用途 —— 这也是「模式」(第 4 课学过那个词)。
09Min

反查 · 给冠军画金边

眼睛扫 ratings · 最高分在第几个?假设序号是 0,打:cards[0].style.border = '6px solid gold' · 看向网页 —— 那张卡被金边圈出来。不是 0 就改成你数到的那个数字。
04收官 · 刷新 · 毕业照
10Min

刷新 · 一切归零

⌘ + R / F5。金边没了、cards / ratings 全部 is not defined。这是 Phase 0 最后一次「消失」—— 下节课 Cursor 进场,改了就留下。
11Min

📸 Phase 0 毕业照

截一张 Math.max 结果 + 金边冠军卡并排的。存:2026-XX-XX-我抓到了冠军.png。把 5 张战利品放一起 —— Demo Day 1 给家人讲。
Half Time · 中场 · Demo Day 彩排

讲给爸爸听 · 也是给家人讲的 4 题

答对 3 个 · Demo Day 1 今晚就能上场。用自己的话。

01一张卡上,「好看」的部分和「数据」的部分是什么?各举一个例子?Hint ↓

相框 vs 纸上的字 —— 金色描边 / 头像 = 好看;93 / 哈兰德 / ST = 数据。Data vs UI 分离本质点。

02.textContent 撕下来的是「字」还是「数」?为什么还要过翻译机?Hint ↓

从 HTML 里撕出来一定是字。要做数学 / 找最大,必须 Number() 变成数。

03今天问「评分最高」用 Math.max。要问「速度最快」代码怎么改?Hint ↓

只改选择器 .rating → .pace,咒语形状不变。抓到「模式」的本质。

04Phase 0 五节课 · 骨头 / 皮肤 / 大脑 分别是什么?今天这课属于哪一层?Hint ↓

HTML = 是什么 · CSS = 长什么样 · JS = 会做什么。今天是大脑的最后一节 —— Phase 0 毕业。

Player Rating · 本课温度计

给 Phase 0 最后一节打个分

没对错。说真话。爸爸会看到。

今天难度Difficulty
0
今天开心Fun
0
Final Whistle · 终场哨

Phase 0 毕业 —— 你攒齐了骨头、皮肤、大脑。

还有 11 步没打勾。Step 7 的 Math.max 那一下蹦出数字就算毕业了 —— 其他慢慢补。

Next · Lesson 06 · Cursor 首启 · 自己造页面