JavaScript 变量与数据类型

✏️ Editable

Loading...

Live Preview

⌘+Enter Run⌘+R Reset

Current StepStep 1/3

Unlocked Steps1/3

Next Suggestion

Complete current Step 1 first

1) Current Task & Steps

Current task: Step 1 - 声明第一个变量
使用 let 关键字声明一个名为 message 的变量，并赋值为 "Hello, JavaScript!"

Write your code in `script.js` for the current Step.
Click "Run Validation" to check if rules pass.
Once current Step passes, the next step unlocks automatically.
You need to pass Step 1 first to unlock Step 2.

Step Deliverables (Check these)

Declare variables: message
Console should output: Hello, JavaScript!

2) Beginner Explanation (Current Step)

Step task: 使用 let 关键字声明一个名为 message 的变量，并赋值为 "Hello, JavaScript!"
Declare variable(s): message, then output or use them.
A variable is like giving data a name so you can reuse it later.
`console.log(...)` just prints output so you can check if your code works as expected.

3) Starter Template (Type along)

let message = "your text";
console.log(message);

4) Rule Validation & Hints

📋 当前任务 - Step 1

声明变量 message
输出 Hello, JavaScript!

💡 步骤提示

🔐 学习提示

📖 快速参考

变量名可以包含字母、数字、下划线和 $，但不能以数字开头。推荐使用驼峰命名法，如 myVariable。

About This Exercise

如果你是第一次写 JavaScript，这一关就是“起点课”。

变量可以理解成“贴了名字的盒子”，你把数据放进去，后面就能反复使用。

本关只做三件事：声明变量、给变量赋值、把变量打印出来。

你将学到：

let 和 const 的基本用法
字符串（text）、数字（number）、布尔值（true/false）
用 console.log() 检查你写的代码是否正确
为什么初学阶段要先把“变量”练熟

Beginner⏱ 15-20 min

Learning Objectives

理解变量的概念和用途
掌握 let 和 const 的区别
认识 JavaScript 的基本数据类型
学会使用 console.log 调试

Scenario

你正在写人生第一段 JavaScript。目标不是“炫技”，而是能稳定完成：定义变量 -> 赋值 -> 打印结果。只要把这条链路跑通，后面的函数、条件、循环都会更容易懂。

Why Do This

Frontend JS is not just about knowing the syntax — the key is reliably manipulating the DOM and managing interaction state.
Break down the event flow (trigger -> handle -> update UI) before coding, and you will make significantly fewer errors.
Rule-based validation helps you develop a testable frontend mindset.

Hands-on Practice

Write out the event flow in comments first, then implement the functions.
Add an edge case branch for invalid input or empty data.
Explain why each validation rule is needed.

Common Mistakes

Only testing the happy path without verifying edge inputs or repeated clicks.
Mixing event binding and state updates together, making future maintenance difficult.
Console output looks correct but the UI is not actually updated.

Deliverable

A reusable interaction component scaffold (event flow description + key functions + edge case handling).

My Progress

Completed Steps0 / 3

Total Attempts0

Best Score0%

Completion Criteria (Checkable)

Confirm before completing this Lab

All rules for the current step passCan explain each line of your codeCan name a real-world business scenario for this

Reflection Questions (Recommended)

Describe the event flow of this Lab in 2-3 sentences (trigger -> handle -> update).

What edge case did you add? Why is it easy to miss?

How confident are you with this interaction pattern now?

Not confident yet, need more practiceCan complete similar tasks independentlyCan teach others how to do it