JavaScript 变量与数据类型
✏️ 可编辑
加载编辑器...
实时预览
⌘+Enter 运行⌘+R 重置
关于此练习
如果你是第一次写 JavaScript，这一关就是“起点课”。
变量可以理解成“贴了名字的盒子”，你把数据放进去，后面就能反复使用。
本关只做三件事：声明变量、给变量赋值、把变量打印出来。
你将学到：
let和const的基本用法- 字符串（text）、数字（number）、布尔值（true/false）
- 用
console.log()检查你写的代码是否正确 - 为什么初学阶段要先把“变量”练熟
入门⏱ 15-20 min
学习目标
- 理解变量的概念和用途
- 掌握 let 和 const 的区别
- 认识 JavaScript 的基本数据类型
- 学会使用 console.log 调试
场景说明
你正在写人生第一段 JavaScript。
目标不是“炫技”，而是能稳定完成：定义变量 -> 赋值 -> 打印结果。
只要把这条链路跑通，后面的函数、条件、循环都会更容易懂。
为什么这么做
- 前端 JS 不是“会写语法”就够，重点是能稳定地改 DOM 和处理交互状态。
- 先拆事件流（触发 -> 处理 -> 更新 UI），再写代码，错误率会明显下降。
- 通过规则验证能帮助你建立“可测试”的前端思维。
动手练习
- 先用注释写出事件流，再实现函数。
- 补一个“异常输入”或“空数据”分支。
- 解释每条验证规则为什么需要。
常见误区
- 只关注功能跑通，不验证边界输入和重复点击场景。
- 事件绑定和状态更新写在一起，后续难维护。
- console 看起来对，但 UI 没有真实更新。
本节交付物
一份可复用的交互组件脚手架（事件流说明 + 关键函数 + 边界处理）。
我的进度
完成步骤0 / 3
总尝试次数0
最佳分数0%
达标标准（可勾选）
完成当前 Lab 前建议确认
反思题（建议完成）
请用 2-3 句话说明本 Lab 的事件流（触发 -> 处理 -> 更新）。
你补了哪个边界场景？为什么这个场景容易漏？
你现在对这个交互模式的掌握程度？
标签
JavaScriptVariablesData TypesBasics