← FC Coder · HomePhase 00 · Lesson 03 · 60 min
Lesson03
Phase Zero · DevTools Explore · Matchday 03

让球员
学会算数

Today's 3 Jobs · 今天这三件事
  1. 01
    让浏览器算一道数学题
    哈兰德身价的一半是多少?
  2. 02
    让浏览器拼一句话
    "福登" + " 11 号" = ?
  3. 03
    让浏览器回答一个是 / 否的问题
    哈兰德比罗德里年轻吗?

今天第一次和**大脑**(JavaScript)说话。不写文件、不装任何东西 —— 用浏览器自带的对讲机 Console。

Half 1 · 在脑子里

三层回忆 · 今天开大脑

骨头看过了,皮肤贴过了。今天让浏览器'会算'。

  1. 01

    骨头

    HTML

    决定是什么 —— 第 1 课见过。

  2. 02

    皮肤

    CSS

    决定长什么样 —— 上节课做过。

  3. 03

    大脑

    JavaScript

    决定会做什么 —— 今天第一次打开。

    今天只看这个
Essence · 本质 1/2

Console = 和浏览器的对讲机

一问一答 · 打一行、得一个答案 · 不用写文件。

Chalk Board · 对讲机的样子
> 3 + 4
7
你按一下
3 + 4
浏览器回你
7
速度
立刻

没有犹豫。没有"正在思考"。对讲机不会让你等。

Roster · 大脑认三种东西

数字 · 字 · 是否

浏览器不是什么都算。它只认这三种。

  1. 01
    number · 数字
    球衣号、身价、评分……任何数。
    931.5180
  2. 02
    string · 字
    任何一串字,要用 " " 包住。
    "哈兰德""9 号""Come on City!"
    + 号是会看脸色的裁判:两边都是数字就"加",只要有一边是字就"拼"。"9" + "1" = "91",不是 10。
  3. 03
    boolean · 是否
    只有两种:true(真)或 false(假)。像裁判的哨子。
    truefalse25 < 29
Essence · 本质 2/2

变量 = 有名字的盒子

造一次、用一辈子(或用到刷新)。球衣号码的逻辑。

Chalk Board · 造一个盒子
const haaland = 93
const
名字
haaland
放什么进去
93

读出来:"造一个不变的盒子,叫 haaland,里面放 93。"
之后打 haaland,93 就出来。

Warm-up · 赛前热身

先在这儿试一次

下面这个是你自己的 Console,真的会跑。点上面的菜单按钮就是一句话。等会儿去 ea.com 的 DevTools Console 做的,就是这个。

🧮 算数学
💬 拼字
✅ 问是否
📦 造盒子
Console · 对讲机
|

打一句话,按 Enter。或者点上面一个"菜单按钮"直接跑。

>
Half 2 · 在屏幕上

现在去真的 Console

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

Away Fixture · 客场
打开 ea.com(或任意网站)今天不挑网站 · 打开 DevTools → Console 就够
01进场 · 打开对讲机
01Min

召唤 DevTools · 切到 Console

打开 ea.com 或任意网站。Mac ⌘ + ⌥ + I / Windows F12。DevTools 顶部一排标签里,找 "Console" 点进去。
02三种东西 · 算 · 拼 · 问
02Min

第一句话 · 算一道题

在 > 后面打:93 + 6 · 按 Enter → 99。再玩:180 / 2 / 9 * 9 / 93 - 24。上箭头 ↑ 能呼出上一条修改。
03Min

拼一句话

打:"福登" + " 11号" → "福登 11号"。再玩:"哈兰德" + "!!!" · "9" + "1"(注意是 "91" 不是 10)· "评分:" + 93(字 + 数字 = 拼)。
04Min

问一个是 / 否

打:25 < 29 → true。 93 > 99 → false。是 / 不是,只有两种。
03造盒子 · 用盒子
05Min

造第一个盒子

打:const haaland = 93 · Enter。浏览器回你 undefined —— 不是错!造盒子这个动作没有答案,就像把球放进储物柜。
06Min

用盒子

打 haaland → 93 出来了 🎯。再打 haaland + 6 / haaland / 2 / haaland - 24。盒子可以代替它里面的数字,出现在任何算式里。
07Min

一个字盒子

const name = "哈兰德"。然后 name · "你好," + name · name + " 9 号" —— 装字的盒子,可以被拼。
04收官 · 刷新看盒子消失
08Min

刷新 · 盒子全没了

⌘ + R / F5。再打 haaland —— 报 ReferenceError: haaland is not defined。不是错 —— 浏览器在说"每次都是全新一场"。
09Min

截图留念

截一张你最喜欢的算式 + 答案。存桌面:2026-XX-XX-我教浏览器算的.png。
Half Time · 中场休息

讲给爸爸听

关掉 DevTools。看着爸爸,用自己的话。

01Console 是做什么的?像球场上的什么东西?Hint ↓

对讲机。一问一答,立刻回。不用写文件,不用写整个网页。

02浏览器的大脑认三种东西。分别是什么?能不能各举一个你刚打过的?Hint ↓

数字 / 字 / 是否 —— 93 / "福登" / true。

03`+` 在 `93 + 6` 里是'加',在 `"福登" + "11"` 里是'拼'。一样的符号为什么做不同的事?Hint ↓

两边是什么决定了 + 的意思 —— 数字加、字拼。同一个符号,左右不同就不同意思。

04你为什么给哈兰德造了一个 haaland 盒子?不造直接打 93 不行吗?Hint ↓

盒子让你起个名字,以后用名字就够。100 个球员时,打 93 会搞混,名字不会。

Player Rating · 本课温度计

给今天打个分

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

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

你教会了一个大脑算数。

还有 9 步没打勾。明天继续也行,这不是考试。