网页与程序协作
JavaScript
让程序处理数据与行为
免费阅读 · 配套小练习 · 更新于
一句话理解
用变量、运算和函数描述程序需要做的事情。
打个比方
一份待办清单除了写着任务，还需要规则：“完成一项，就把数量加一”。JavaScript 可以表达这类规则，并与浏览器提供的能力配合。
JavaScript 是编程语言。变量为数据命名，表达式计算结果，函数把步骤组织成可调用的操作。浏览器可运行 JavaScript 来响应操作；它也能在其他运行环境中使用。改变变量不会自动让网页文字跟着改变，还需要更新界面。
看个例子
<script>
let completed = 2;
completed = completed + 1;
console.log("已完成", completed);
</script>如果 AI 说它实现了“完成数量加一”，你可以查看初始值、加一运算和输出位置。这段代码只会在 Console（控制台）输出“已完成 3”；想把结果显示在页面上，还应让 AI 更新对应元素。
什么时候会遇到
- 让 AI 实现计数、筛选等规则时，提供输入与预期结果。
- 用不同输入检查 AI 生成的计算逻辑是否正确。
常见误解
JavaScript 与 Java 是不同语言。网页引入了脚本，也不代表按钮已经绑定了正确的行为。
Vibe Coding 小练习 · 描述需求 → 看懂改动 → 验证结果
动手练一练：给 AI 一个明确的计算规则
把上方学习数量代码作为材料，先写下自己期望的输入与输出。
试着这样告诉 AI
请把这段代码的初始完成数量改为数字 4，保留加一计算和控制台输出；不要修改页面其他部分。先说明预期结果，再列出实际改动。如果初始值是字符串 "4"，原来的加法表达式会得到什么？请区分这两种数据类型。可以在你使用的 AI 编程工具中完成；也可以先对照本页代码示例，练习理解需求、识别改动和列出检查项。
跟着做
- 把代码和需求交给 AI，先核对它给出的数字输入与预期输出。
- 查看 AI 是否只调整相关逻辑，并找出变量、加一表达式和输出位置。
- 在自己的练习页面运行结果，检查 Console 是否输出 5；再对照字符串例子，判断 AI 的解释是否正确。
你应该看到
数字 4 加一得到 5，并能理解为什么字符串 "4" 的结果不同。
完成检查
- 实际输出与事先写下的预期一致。
- AI 解释了字符串拼接，且没有把控制台输出声称为页面显示。
遇到卡点？看提示
先确定输入类型和预期结果。变量名相似或 AI 语气确定，都不能替代实际运行。
查看参考思路
数字 4 + 1 得到 5，字符串 "4" + 1 得到 "41"。console.log 只输出到控制台；若需求是让用户在网页上看到数量，还应补充页面更新的要求。
想一想
为什么把数字 3 写成 "3"，加 1 的结果会不同？
查看答案
3 是数字，3 + 1 得到 4；"3" 是字符串，"3" + 1 会拼接成 "31"。处理输入时应确认数据类型。