一个按钮，讲清程序怎样“活”起来

作者：浩哥AI实验室

很多编程入门课会从变量、函数和语法规则开始。

我这次换了一个问题：

为什么网页上的按钮按下去以后，会知道自己该做什么？

这个问题看起来很小，但它背后藏着几乎所有软件和游戏都会用到的三个概念：事件、状态、反馈。

于是，WHSK 103 第二课只做一件事：给上一课的按钮装上“大脑”。

课程地址：给按钮装上“大脑”

一个按钮，为什么原来没有用？

第一课里的按钮已经有了样子。

它可以被按下，也会产生按压效果，但无论按多少次，页面都不会发生真正变化。

原因很简单：我们还没有告诉它规则。

第二课加入了几行 JavaScript。每按一次，分数增加，页面显示新的数字，同时给玩家一句反馈。

孩子可以先直接点击，看到分数从 0 变成 1、2、3，再把代码里的：

score += 1;

改成：

score += 2;

重新运行以后，每次点击就会增加两分。

软件“活起来”，通常经过三站

我把这段过程拆成了三个孩子能理解的问题。

第一，发生了什么？

玩家点击了按钮。这叫事件。

第二，程序现在记住了什么？

分数从 0 变成 1。这叫状态。

第三，玩家怎样知道变化发生了？

页面显示新的分数和提示。这叫反馈。

连起来就是：

发生点击 → 分数改变 → 页面回应。

这不是某一个小游戏的特殊知识。

购物车数量变化、视频暂停播放、角色受伤、倒计时归零、消息显示已读，背后都有类似结构。

孩子一旦看懂这条链，以后再看到更复杂的软件，也会开始问：这里监听了什么事件？改变了什么状态？用户从哪里看到反馈？

这就是我希望课程留下的“可迁移理解”。

如果你也关心怎样让孩子在 AI 时代保留动手和判断能力，可以关注“浩哥AI实验室”。我会持续把课程页面、实验方法和设计思考公开出来。

调试也可以从三个问题开始

程序没有反应时，初学者最常见的做法是盯着整页代码发愁。

其实可以沿着刚才的链条逐站检查：

事件真的发生了吗？

按钮找对了吗？点击监听加上了吗？

状态真的改变了吗？

分数变量有没有增加？条件有没有进入？

界面真的显示新状态了吗？

状态已经变了，但页面文字是不是忘了更新？

这种调试方式很朴素，却比“让 AI 把整段代码重写一遍”更有价值。

AI 可以帮忙解释错误、定位可能的位置，甚至直接给出修复。但孩子仍然应该知道自己在检查哪一站，以及用什么现象证明它已经修好。

写代码的成就感，来自因果关系

孩子不一定需要从空白页面敲出全部代码。

但他值得体验一次：我只改了一个数字，游戏规则真的变了。

这种成就感不是“我复制成功了”，而是“我理解了变化从哪里来”。

AI 时代仍然值得亲手写代码，原因也正在这里。

代码不是背诵比赛，而是一种精确表达规则、观察因果关系、把想法做成东西的方法。

第二课可以直接在线修改和运行：https://howie.wang/WHSK/103/02/

公众号和视频号“浩哥AI实验室”继续分享 AI 的真实用法；家庭教育与孩子成长方向也会同步更新到视频号“浩哥AI实验室·成长研究”。公众号微信号：de8ug-vip。