JavaScript 函数
✏️ Editable
Loading...
Live Preview
⌘+Enter Run⌘+R Reset
About This Exercise
函数可以理解成“可反复调用的小工具”。
你给它输入（参数），它给你输出（return）。这是后续所有编程题的基础模式。
你将学到：
- 如何使用
function关键字定义函数 - 如何传递参数和接收返回值
- 箭头函数
=>的简洁语法 - 函数的调用和执行
Beginner⏱ 20-25 min
Learning Objectives
- 理解函数的作用和好处
- 掌握函数声明和调用
- 理解参数和返回值
- 学会使用箭头函数
Scenario
你正在搭一个小工具库：问候函数、加法函数、乘法函数。
目标是学会“定义 -> 调用 -> 验证输出”这条最核心流程。
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
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?
Tags
JavaScriptFunctionsArrow FunctionsBasics