Merge branch 'main' of https://gitea.lililibra.cn/rou/front-end-example

03-javascript-core/01-variables-and-console/README.md

@@ -0,0 +1,27 @@
+# 练习 1：变量和控制台输出
+
+## 目标
+
+学会声明变量、修改变量，并把结果打印出来。
+
+## 你要练什么
+
+- `const`
+- `let`
+- 字符串拼接
+- `console.log()`
+
+## 任务
+
+请完成一个“学习档案”输出脚本，要求：
+
+- 声明用户名
+- 声明当前学习阶段
+- 声明已完成练习数
+- 修改一次学习阶段或练习数
+- 最后输出 3 行清晰的结果
+
+## 文件
+
+- [starter.js](/Users/lijiaqing/home/wwwroot/front-end-example/03-javascript-core/01-variables-and-console/starter.js)
+- [answer.js](/Users/lijiaqing/home/wwwroot/front-end-example/03-javascript-core/01-variables-and-console/answer.js)

03-javascript-core/01-variables-and-console/answer.js

@@ -0,0 +1,9 @@
+const userName = "小周";
+let currentStage = "JavaScript 入门";
+let completedExercises = 2;
+
+completedExercises = completedExercises + 1;
+
+console.log("学习者：" + userName);
+console.log("当前阶段：" + currentStage);
+console.log("已完成练习数：" + completedExercises);

03-javascript-core/01-variables-and-console/starter.js

@@ -0,0 +1,9 @@
+const userName = "";
+let currentStage = "";
+let completedExercises = 0;
+
+// 任务：
+// 1. 给上面的变量赋一个合理值
+// 2. 修改一次 currentStage 或 completedExercises
+// 3. 输出 3 行学习信息
+// 例如：学习者：小周

03-javascript-core/02-data-types-and-conversion/README.md

@@ -0,0 +1,29 @@
+# 练习 2：数据类型和类型转换
+
+## 目标
+
+认识常见数据类型，并学会把字符串数字转成真正的数字。
+
+## 你要练什么
+
+- `string`
+- `number`
+- `boolean`
+- `typeof`
+- `Number()`
+- 模板字符串
+
+## 任务
+
+请完成一个“课程报名信息”脚本，要求：
+
+- 声明姓名、年龄、是否已付费
+- 年龄先用字符串保存
+- 再把年龄转换为数字
+- 输出每个变量的值和类型
+- 最后输出一句完整报名信息
+
+## 文件
+
+- [starter.js](/Users/lijiaqing/home/wwwroot/front-end-example/03-javascript-core/02-data-types-and-conversion/starter.js)
+- [answer.js](/Users/lijiaqing/home/wwwroot/front-end-example/03-javascript-core/02-data-types-and-conversion/answer.js)

03-javascript-core/02-data-types-and-conversion/answer.js

@@ -0,0 +1,12 @@
+const studentName = "林晨";
+const ageText = "21";
+const hasPaid = true;
+
+const ageNumber = Number(ageText);
+
+console.log(studentName, typeof studentName);
+console.log(ageText, typeof ageText);
+console.log(ageNumber, typeof ageNumber);
+console.log(hasPaid, typeof hasPaid);
+
+console.log(`${studentName} 今年 ${ageNumber} 岁，付费状态：${hasPaid}`);

03-javascript-core/02-data-types-and-conversion/starter.js

@@ -0,0 +1,8 @@
+const studentName = "林晨";
+const ageText = "21";
+const hasPaid = true;
+
+// 任务：
+// 1. 把 ageText 转成数字，保存到 ageNumber
+// 2. 分别输出 studentName、ageText、ageNumber、hasPaid 的类型
+// 3. 用模板字符串输出一句报名信息

03-javascript-core/03-operators-and-conditions/README.md

@@ -0,0 +1,28 @@
+# 练习 3：运算符和条件判断
+
+## 目标
+
+学会比较数据，并根据不同条件输出不同结果。
+
+## 你要练什么
+
+- 算术运算符
+- 比较运算符
+- 逻辑运算符
+- `if...else if...else`
+
+## 任务
+
+请完成一个“成绩评级”脚本，要求：
+
+- 根据分数计算是否及格
+- 根据分数输出等级
+- 90 分及以上为 A
+- 80 到 89 为 B
+- 60 到 79 为 C
+- 60 以下为 D
+
+## 文件
+
+- [starter.js](/Users/lijiaqing/home/wwwroot/front-end-example/03-javascript-core/03-operators-and-conditions/starter.js)
+- [answer.js](/Users/lijiaqing/home/wwwroot/front-end-example/03-javascript-core/03-operators-and-conditions/answer.js)

03-javascript-core/03-operators-and-conditions/answer.js

@@ -0,0 +1,18 @@
+const score = 86;
+
+let passed = score >= 60;
+let grade = "";
+
+if (score >= 90) {
+  grade = "A";
+} else if (score >= 80) {
+  grade = "B";
+} else if (score >= 60) {
+  grade = "C";
+} else {
+  grade = "D";
+}
+
+console.log("分数：", score);
+console.log("是否及格：", passed);
+console.log("等级：", grade);

03-javascript-core/03-operators-and-conditions/starter.js

@@ -0,0 +1,9 @@
+const score = 86;
+
+// 任务：
+// 1. 用布尔值保存是否及格
+// 2. 用 if...else if...else 判断等级
+// 3. 输出分数、是否及格、等级
+
+let passed = false;
+let grade = "";

03-javascript-core/04-loops/README.md

@@ -0,0 +1,26 @@
+# 练习 4：循环
+
+## 目标
+
+学会用循环处理重复任务，而不是手写很多遍。
+
+## 你要练什么
+
+- `for`
+- `while`
+- 累加
+- 条件跳过
+
+## 任务
+
+请完成一个“学习打卡统计”脚本，要求：
+
+- 用 `for` 输出第 1 天到第 7 天的打卡信息
+- 跳过第 4 天
+- 再用 `while` 计算 1 到 5 的总和
+- 输出最终总和
+
+## 文件
+
+- [starter.js](/Users/lijiaqing/home/wwwroot/front-end-example/03-javascript-core/04-loops/starter.js)
+- [answer.js](/Users/lijiaqing/home/wwwroot/front-end-example/03-javascript-core/04-loops/answer.js)

03-javascript-core/04-loops/answer.js

@@ -0,0 +1,17 @@
+for (let day = 1; day <= 7; day += 1) {
+  if (day === 4) {
+    continue;
+  }
+
+  console.log(`第 ${day} 天：完成学习打卡`);
+}
+
+let current = 1;
+let sum = 0;
+
+while (current <= 5) {
+  sum += current;
+  current += 1;
+}
+
+console.log("1 到 5 的总和：", sum);

03-javascript-core/04-loops/starter.js

@@ -0,0 +1,7 @@
+// 任务：
+// 1. 用 for 输出第 1 天到第 7 天
+// 2. 第 4 天跳过，不输出
+// 3. 用 while 计算 1 到 5 的总和
+// 4. 输出 sum
+
+let sum = 0;

03-javascript-core/05-functions/README.md

@@ -0,0 +1,27 @@
+# 练习 5：函数
+
+## 目标
+
+学会把一段逻辑封装成函数，并通过参数和返回值复用它。
+
+## 你要练什么
+
+- 函数声明
+- 参数
+- `return`
+- 函数调用
+
+## 任务
+
+请完成一个“学习成绩处理器”，要求：
+
+- 写一个 `getAverage` 函数
+- 接收 3 个分数参数
+- 返回平均分
+- 再写一个 `getLevel` 函数
+- 根据平均分返回“优秀”“良好”“继续努力”
+
+## 文件
+
+- [starter.js](/Users/lijiaqing/home/wwwroot/front-end-example/03-javascript-core/05-functions/starter.js)
+- [answer.js](/Users/lijiaqing/home/wwwroot/front-end-example/03-javascript-core/05-functions/answer.js)

03-javascript-core/05-functions/answer.js

@@ -0,0 +1,21 @@
+function getAverage(score1, score2, score3) {
+  return (score1 + score2 + score3) / 3;
+}
+
+function getLevel(average) {
+  if (average >= 85) {
+    return "优秀";
+  }
+
+  if (average >= 70) {
+    return "良好";
+  }
+
+  return "继续努力";
+}
+
+const average = getAverage(88, 92, 79);
+const level = getLevel(average);
+
+console.log("平均分：", average);
+console.log("等级：", level);

03-javascript-core/05-functions/starter.js

@@ -0,0 +1,11 @@
+function getAverage(score1, score2, score3) {
+  // 返回平均分
+}
+
+function getLevel(average) {
+  // 根据平均分返回等级描述
+}
+
+// 任务：
+// 1. 调用上面两个函数
+// 2. 输出平均分和等级

03-javascript-core/06-arrays/README.md

@@ -0,0 +1,27 @@
+# 练习 6：数组
+
+## 目标
+
+学会保存一组同类数据，并对数组做基础读写。
+
+## 你要练什么
+
+- 数组声明
+- 下标访问
+- `length`
+- `push()`
+- 遍历数组
+
+## 任务
+
+请完成一个“学习清单”脚本，要求：
+
+- 创建一个包含 3 个学习主题的数组
+- 新增 1 个学习主题
+- 输出数组长度
+- 依次输出每个学习主题
+
+## 文件
+
+- [starter.js](/Users/lijiaqing/home/wwwroot/front-end-example/03-javascript-core/06-arrays/starter.js)
+- [answer.js](/Users/lijiaqing/home/wwwroot/front-end-example/03-javascript-core/06-arrays/answer.js)

03-javascript-core/06-arrays/answer.js

@@ -0,0 +1,9 @@
+const topics = ["HTML", "CSS", "JavaScript"];
+
+topics.push("DOM");
+
+console.log("学习主题数量：", topics.length);
+
+for (let index = 0; index < topics.length; index += 1) {
+  console.log(`第 ${index + 1} 项：${topics[index]}`);
+}

03-javascript-core/06-arrays/starter.js

@@ -0,0 +1,6 @@
+const topics = ["HTML", "CSS", "JavaScript"];
+
+// 任务：
+// 1. 往 topics 里新增一个主题
+// 2. 输出 topics 的长度
+// 3. 用循环输出每一项

03-javascript-core/07-objects/README.md

@@ -0,0 +1,27 @@
+# 练习 7：对象
+
+## 目标
+
+学会用对象描述一个事物的多个属性。
+
+## 你要练什么
+
+- 对象字面量
+- 属性读取
+- 属性修改
+- 新增属性
+
+## 任务
+
+请完成一个“课程对象”脚本，要求：
+
+- 创建一个课程对象
+- 至少包含名称、课时、是否完结
+- 修改其中一个属性
+- 新增一个老师属性
+- 输出完整对象和其中两个单独属性
+
+## 文件
+
+- [starter.js](/Users/lijiaqing/home/wwwroot/front-end-example/03-javascript-core/07-objects/starter.js)
+- [answer.js](/Users/lijiaqing/home/wwwroot/front-end-example/03-javascript-core/07-objects/answer.js)

03-javascript-core/07-objects/answer.js

@@ -0,0 +1,12 @@
+const course = {
+  title: "JavaScript 核心",
+  lessons: 12,
+  finished: false,
+};
+
+course.finished = true;
+course.teacher = "周老师";
+
+console.log(course);
+console.log("课程名称：", course.title);
+console.log("授课老师：", course.teacher);

03-javascript-core/07-objects/starter.js

@@ -0,0 +1,11 @@
+const course = {
+  title: "JavaScript 核心",
+  lessons: 12,
+  finished: false,
+};
+
+// 任务：
+// 1. 修改 finished
+// 2. 新增 teacher 属性
+// 3. 输出完整对象
+// 4. 输出 title 和 teacher

03-javascript-core/08-built-in-methods/README.md

@@ -0,0 +1,26 @@
+# 练习 8：常见内置方法
+
+## 目标
+
+学会使用几个常见的字符串和数组方法，减少重复代码。
+
+## 你要练什么
+
+- `trim()`
+- `toUpperCase()`
+- `includes()`
+- `join()`
+
+## 任务
+
+请完成一个“标签清洗器”脚本，要求：
+
+- 把一段带空格的文本去掉首尾空格
+- 把结果转成大写
+- 判断里面是否包含 `JS`
+- 把一个标签数组拼成一个字符串输出
+
+## 文件
+
+- [starter.js](/Users/lijiaqing/home/wwwroot/front-end-example/03-javascript-core/08-built-in-methods/starter.js)
+- [answer.js](/Users/lijiaqing/home/wwwroot/front-end-example/03-javascript-core/08-built-in-methods/answer.js)

03-javascript-core/08-built-in-methods/answer.js

@@ -0,0 +1,12 @@
+const rawTitle = "  js 核心练习  ";
+const tags = ["变量", "条件", "函数"];
+
+const cleanTitle = rawTitle.trim();
+const upperTitle = cleanTitle.toUpperCase();
+const hasJS = upperTitle.includes("JS");
+const tagLine = tags.join("、");
+
+console.log("清洗后标题：", cleanTitle);
+console.log("大写标题：", upperTitle);
+console.log("是否包含 JS：", hasJS);
+console.log("标签列表：", tagLine);

03-javascript-core/08-built-in-methods/starter.js

@@ -0,0 +1,8 @@
+const rawTitle = "  js 核心练习  ";
+const tags = ["变量", "条件", "函数"];
+
+// 任务：
+// 1. 去掉 rawTitle 两端空格
+// 2. 转成大写
+// 3. 判断是否包含 JS
+// 4. 把 tags 用顿号连接成一句话

03-javascript-core/09-scope-and-closure/README.md

@@ -0,0 +1,28 @@
+# 练习 9：闭包入门
+
+## 目标
+
+初步理解闭包为什么能把外层变量“记住”。
+
+## 你要练什么
+
+- 外层变量
+- 内层函数
+- 闭包的基本效果
+- 多个闭包实例互不影响
+
+## 任务
+
+请完成一个“计数器工厂”脚本，要求：
+
+- 写一个 `createCounter` 函数
+- 在函数内部定义 `count`
+- 返回一个内部函数
+- 每次调用内部函数时，`count` 都加 1
+- 创建两个不同的计数器
+- 观察为什么它们各自记住了自己的 `count`
+
+## 文件
+
+- [starter.js](/Users/lijiaqing/home/wwwroot/front-end-example/03-javascript-core/09-scope-and-closure/starter.js)
+- [answer.js](/Users/lijiaqing/home/wwwroot/front-end-example/03-javascript-core/09-scope-and-closure/answer.js)

03-javascript-core/09-scope-and-closure/answer.js

@@ -0,0 +1,16 @@
+function createCounter() {
+  let count = 0;
+
+  return function () {
+    count += 1;
+    return count;
+  };
+}
+
+const counterA = createCounter();
+const counterB = createCounter();
+
+console.log("counterA 第一次：", counterA());
+console.log("counterA 第二次：", counterA());
+console.log("counterB 第一次：", counterB());
+console.log("每次调用 createCounter 都会创建一个新的闭包环境。");

03-javascript-core/09-scope-and-closure/starter.js

@@ -0,0 +1,11 @@
+function createCounter() {
+  let count = 0;
+
+  // 返回一个函数
+}
+
+// 任务：
+// 1. 创建 counterA 和 counterB
+// 2. 连续调用 counterA 两次
+// 3. 再调用 counterB 一次
+// 4. 观察为什么两个计数器互不影响

03-javascript-core/10-final-mini-app/README.md

@@ -0,0 +1,33 @@
+# 练习 10：基础阶段综合小程序
+
+## 目标
+
+把前面基础阶段学过的变量、条件、函数、数组、对象组合起来，完成一个完整的小练习。
+
+## 项目名称
+
+基础学习进度统计器
+
+## 任务
+
+请完成一个控制台版学习进度统计器，要求至少包含：
+
+- 一个 `student` 对象
+- 一个 `scores` 数组
+- 一个计算平均分的函数
+- 一个判断等级的函数
+- 输出姓名、平均分、等级
+- 如果平均分大于等于 80，再输出“可以进入下一阶段”
+
+## 自检标准
+
+- 是否把数据和逻辑拆开了
+- 是否写了可复用函数
+- 是否正确读取数组和对象数据
+- 条件分支是否完整
+- 输出结果是否清晰
+
+## 文件
+
+- [starter.js](/Users/lijiaqing/home/wwwroot/front-end-example/03-javascript-core/10-final-mini-app/starter.js)
+- [answer.js](/Users/lijiaqing/home/wwwroot/front-end-example/03-javascript-core/10-final-mini-app/answer.js)

03-javascript-core/10-final-mini-app/answer.js

@@ -0,0 +1,40 @@
+const student = {
+  name: "林晨",
+  stage: "JavaScript 核心",
+};
+
+const scores = [78, 85, 92];
+
+function getAverageScore(list) {
+  let total = 0;
+
+  for (let index = 0; index < list.length; index += 1) {
+    total += list[index];
+  }
+
+  return total / list.length;
+}
+
+function getLevel(average) {
+  if (average >= 85) {
+    return "优秀";
+  }
+
+  if (average >= 70) {
+    return "良好";
+  }
+
+  return "继续努力";
+}
+
+const average = getAverageScore(scores);
+const level = getLevel(average);
+
+console.log("姓名：", student.name);
+console.log("阶段：", student.stage);
+console.log("平均分：", average);
+console.log("等级：", level);
+
+if (average >= 80) {
+  console.log("可以进入下一阶段");
+}

03-javascript-core/10-final-mini-app/starter.js

@@ -0,0 +1,20 @@
+const student = {
+  name: "林晨",
+  stage: "JavaScript 核心",
+};
+
+const scores = [78, 85, 92];
+
+function getAverageScore(list) {
+  // 计算平均分
+}
+
+function getLevel(average) {
+  // 返回等级
+}
+
+// 任务：
+// 1. 计算平均分
+// 2. 计算等级
+// 3. 输出姓名、阶段、平均分、等级
+// 4. 如果平均分 >= 80，输出“可以进入下一阶段”

03-javascript-core/11-var-and-scope/README.md

@@ -0,0 +1,30 @@
+# 练习 11：var、let、const 与提升
+
+## 目标
+
+理解 `var`、`let`、`const` 的基本区别，尤其是作用域和提升差异。
+
+## 你要练什么
+
+- `var`
+- `let`
+- `const`
+- 变量提升
+- 块级作用域
+- 函数作用域
+
+## 任务
+
+请完成一个“作用域观察”脚本，要求：
+
+- 观察 `var` 声明前为什么能访问到 `undefined`
+- 用 `var` 声明一个函数内部变量
+- 用 `let` 声明一个代码块内部变量
+- 在可访问的位置输出它们
+- 观察为什么 `var` 在块外还能访问，而 `let` 不行
+- 再写一段代码证明 `const` 不能被重新赋值
+
+## 文件
+
+- [starter.js](/Users/lijiaqing/home/wwwroot/front-end-example/03-javascript-core/11-var-and-scope/starter.js)
+- [answer.js](/Users/lijiaqing/home/wwwroot/front-end-example/03-javascript-core/11-var-and-scope/answer.js)

03-javascript-core/11-var-and-scope/answer.js

@@ -0,0 +1,28 @@
+console.log("var 声明前：", lessonType);
+var lessonType = "JavaScript";
+
+console.log("var 声明后：", lessonType);
+// console.log("let 声明前：", chapterType);
+// let 在声明前处于暂时性死区，直接访问会报错。
+
+function compareScope() {
+  if (true) {
+    var lessonName = "变量";
+    let chapterName = "作用域";
+    const stage = "进阶";
+
+    console.log("块内：", lessonName, chapterName, stage);
+  }
+
+  console.log("块外仍能访问 var：", lessonName);
+  // console.log(chapterName);
+  // chapterName 是 let 声明的块级作用域变量，离开 if 代码块后就不能访问。
+}
+
+compareScope();
+
+const level = "核心阶段";
+console.log("const 初始值：", level);
+
+// level = "下一阶段";
+// const 不能被重新赋值，否则会报错。

03-javascript-core/11-var-and-scope/starter.js

@@ -0,0 +1,27 @@
+console.log("var 声明前：", lessonType);
+var lessonType = "JavaScript";
+
+// 如果你取消下面两行注释，会报错，因为 let 在声明前不能访问。
+// console.log("let 声明前：", chapterType);
+// let chapterType = "作用域";
+
+function compareScope() {
+  if (true) {
+    var lessonName = "变量";
+    let chapterName = "作用域";
+    const stage = "进阶";
+
+    console.log("块内：", lessonName, chapterName, stage);
+  }
+
+  // 任务：
+  // 1. 输出 lessonName
+  // 2. 不要直接在这里输出 chapterName，否则会报错
+  // 3. 用一句注释说明为什么
+}
+
+compareScope();
+
+// 任务：
+// 4. 试着重新给 const 声明的值赋值
+// 5. 观察会发生什么

03-javascript-core/12-this-keyword/README.md

@@ -0,0 +1,27 @@
+# 练习 12：this
+
+## 目标
+
+理解 `this` 会随着调用方式不同而变化。
+
+## 你要练什么
+
+- 对象方法调用
+- 普通函数调用
+- 箭头函数继承外层 `this`
+- `this` 指向
+
+## 任务
+
+请完成一个“学习者对象”脚本，要求：
+
+- 创建一个带 `name` 和 `stage` 的对象
+- 写一个对象方法，方法内部用 `this.name`
+- 取出这个方法单独调用，观察 `this` 变化
+- 再写一个返回箭头函数的方法，观察箭头函数为什么还能拿到对象的 `this`
+- 输出 3 种调用结果
+
+## 文件
+
+- [starter.js](/Users/lijiaqing/home/wwwroot/front-end-example/03-javascript-core/12-this-keyword/starter.js)
+- [answer.js](/Users/lijiaqing/home/wwwroot/front-end-example/03-javascript-core/12-this-keyword/answer.js)

03-javascript-core/12-this-keyword/answer.js

@@ -0,0 +1,26 @@
+const student = {
+  name: "林晨",
+  stage: "JavaScript 核心",
+  sayHello() {
+    const currentName = this && this.name ? this.name : "未知调用者";
+    const currentStage = this && this.stage ? this.stage : "未知阶段";
+    console.log(`你好，我是 ${currentName}，正在学习 ${currentStage}`);
+  },
+  createArrowReporter() {
+    return () => {
+      console.log(`箭头函数继承到的 this.name：${this.name}`);
+    };
+  },
+};
+
+student.sayHello();
+
+const detachedHello = student.sayHello;
+detachedHello();
+
+const arrowReporter = student.createArrowReporter();
+arrowReporter();
+
+console.log("对象方法里的 this 通常指向调用它的对象。");
+console.log("脱离对象单独调用后，普通函数里的 this 会跟着调用方式变化。");
+console.log("箭头函数没有自己的 this，它会继承创建它时外层的 this。");

03-javascript-core/12-this-keyword/starter.js

@@ -0,0 +1,18 @@
+const student = {
+  name: "林晨",
+  stage: "JavaScript 核心",
+  sayHello() {
+    // 任务：
+    // 1. 用 this.name 输出问候语
+  },
+  createArrowReporter() {
+    // 任务：
+    // 2. 返回一个箭头函数
+    // 3. 在箭头函数里输出 this.name
+  },
+};
+
+// 任务：
+// 4. 调用 student.sayHello()
+// 5. 把 student.sayHello 赋值给 detachedHello 再调用
+// 6. 调用 createArrowReporter 返回的新函数

03-javascript-core/13-array-high-order-methods/README.md

@@ -0,0 +1,30 @@
+# 练习 13：数组高阶函数
+
+## 目标
+
+学会使用数组高阶函数处理一组数据。
+
+## 你要练什么
+
+- `map()`
+- `filter()`
+- `reduce()`
+- `find()`
+- `some()`
+- `every()`
+
+## 任务
+
+请完成一个“学习成绩分析”脚本，要求：
+
+- 用 `map` 生成带单位的新数组
+- 用 `filter` 找出及格成绩
+- 用 `reduce` 计算总分
+- 用 `find` 找出第一条大于等于 90 的成绩
+- 用 `some` 判断是否有人不及格
+- 用 `every` 判断是否全部完成考试
+
+## 文件
+
+- [starter.js](/Users/lijiaqing/home/wwwroot/front-end-example/03-javascript-core/13-array-high-order-methods/starter.js)
+- [answer.js](/Users/lijiaqing/home/wwwroot/front-end-example/03-javascript-core/13-array-high-order-methods/answer.js)

03-javascript-core/13-array-high-order-methods/answer.js

@@ -0,0 +1,37 @@
+const scores = [58, 76, 91, 84];
+const students = [
+  { name: "小周", finished: true },
+  { name: "小林", finished: true },
+  { name: "小陈", finished: false },
+];
+
+const scoreLabels = scores.map(function (score) {
+  return `${score}分`;
+});
+
+const passedScores = scores.filter(function (score) {
+  return score >= 60;
+});
+
+const totalScore = scores.reduce(function (total, score) {
+  return total + score;
+}, 0);
+
+const topScore = scores.find(function (score) {
+  return score >= 90;
+});
+
+const hasFailedScore = scores.some(function (score) {
+  return score < 60;
+});
+
+const allFinished = students.every(function (student) {
+  return student.finished === true;
+});
+
+console.log("带单位成绩：", scoreLabels);
+console.log("及格成绩：", passedScores);
+console.log("总分：", totalScore);
+console.log("第一个 90 分以上：", topScore);
+console.log("是否存在不及格：", hasFailedScore);
+console.log("是否全部完成：", allFinished);

03-javascript-core/13-array-high-order-methods/starter.js

@@ -0,0 +1,14 @@
+const scores = [58, 76, 91, 84];
+const students = [
+  { name: "小周", finished: true },
+  { name: "小林", finished: true },
+  { name: "小陈", finished: false },
+];
+
+// 任务：
+// 1. 用 map 生成 ["58分", ...]
+// 2. 用 filter 筛出及格分
+// 3. 用 reduce 计算总分
+// 4. 用 find 找到第一个 >= 90 的分数
+// 5. 用 some 判断是否存在不及格
+// 6. 用 every 判断 students 是否都 finished 为 true

03-javascript-core/14-memory-and-execution/README.md

@@ -0,0 +1,26 @@
+# 练习 14：内存和执行
+
+## 目标
+
+理解“值”和“引用”的区别，以及函数执行时数据为什么会变化。
+
+## 你要练什么
+
+- 基本类型复制
+- 引用类型共享
+- 函数执行顺序
+- 参数传递
+
+## 任务
+
+请完成一个“数据变化观察”脚本，要求：
+
+- 比较基本类型复制后是否互相影响
+- 比较对象复制后是否互相影响
+- 写两个函数观察执行顺序
+- 写一个函数修改传入对象，观察外部对象为什么会变化
+
+## 文件
+
+- [starter.js](/Users/lijiaqing/home/wwwroot/front-end-example/03-javascript-core/14-memory-and-execution/starter.js)
+- [answer.js](/Users/lijiaqing/home/wwwroot/front-end-example/03-javascript-core/14-memory-and-execution/answer.js)

03-javascript-core/14-memory-and-execution/answer.js

@@ -0,0 +1,39 @@
+let scoreA = 80;
+let scoreB = scoreA;
+
+scoreB = 95;
+
+console.log("基本类型 scoreA：", scoreA);
+console.log("基本类型 scoreB：", scoreB);
+console.log("基本类型复制后，两个变量互不影响。");
+
+const userA = {
+  name: "小周",
+  city: "上海",
+};
+
+const userB = userA;
+userB.city = "深圳";
+
+console.log("对象 userA：", userA);
+console.log("对象 userB：", userB);
+console.log("对象变量保存的是引用，所以改 userB 会影响 userA。");
+
+function printStepOne() {
+  console.log("步骤一：先进入第一个函数");
+}
+
+function printStepTwo() {
+  console.log("步骤二：再执行第二个函数");
+}
+
+function updateUser(user) {
+  user.city = "杭州";
+  console.log("函数内部修改后的 user：", user);
+}
+
+printStepOne();
+printStepTwo();
+updateUser(userA);
+
+console.log("函数执行结束后的 userA：", userA);

03-javascript-core/14-memory-and-execution/starter.js

@@ -0,0 +1,28 @@
+let scoreA = 80;
+let scoreB = scoreA;
+
+const userA = {
+  name: "小周",
+  city: "上海",
+};
+
+const userB = userA;
+
+function printStepOne() {
+  console.log("步骤一");
+}
+
+function printStepTwo() {
+  console.log("步骤二");
+}
+
+function updateUser(user) {
+  // 任务：
+  // 1. 修改 user.city
+}
+
+// 任务：
+// 2. 修改 scoreB，观察 scoreA 是否变化
+// 3. 修改 userB.city，观察 userA.city 是否变化
+// 4. 按顺序调用 printStepOne 和 printStepTwo
+// 5. 调用 updateUser(userA)

03-javascript-core/15-switch-break-and-empty-values/README.md

@@ -0,0 +1,28 @@
+# 练习 15：switch、break 和空值判断
+
+## 目标
+
+学会在分支判断里使用 `switch`，并区分 `undefined`、`null` 这两种常见空值。
+
+## 你要练什么
+
+- `switch`
+- `break`
+- `undefined`
+- `null`
+- 空值判断
+
+## 任务
+
+请完成一个“学习记录检查器”脚本，要求：
+
+- 用 `switch` 根据学习状态输出不同说明
+- 观察 `undefined` 和 `null` 的区别
+- 用循环读取学习记录
+- 如果读到 `undefined` 或 `null`，立即用 `break` 停止循环
+- 输出停止前已经读取到的内容
+
+## 文件
+
+- [starter.js](/Users/lijiaqing/home/wwwroot/front-end-example/03-javascript-core/15-switch-break-and-empty-values/starter.js)
+- [answer.js](/Users/lijiaqing/home/wwwroot/front-end-example/03-javascript-core/15-switch-break-and-empty-values/answer.js)

03-javascript-core/15-switch-break-and-empty-values/answer.js

@@ -0,0 +1,41 @@
+const learningStatus = "review";
+const records = ["变量", "条件", "函数", null, "对象"];
+
+let optionalNote;
+const finalComment = null;
+let statusText = "";
+const finishedRecords = [];
+
+switch (learningStatus) {
+  case "basic":
+    statusText = "正在完成基础阶段";
+    break;
+  case "review":
+    statusText = "正在进入总复习";
+    break;
+  case "done":
+    statusText = "当前阶段已经完成";
+    break;
+  default:
+    statusText = "状态未知";
+    break;
+}
+
+console.log("状态说明：", statusText);
+console.log("optionalNote：", optionalNote);
+console.log("optionalNote 是否为 undefined：", optionalNote === undefined);
+console.log("finalComment：", finalComment);
+console.log("finalComment 是否为 null：", finalComment === null);
+
+for (let index = 0; index < records.length; index += 1) {
+  const currentRecord = records[index];
+
+  if (currentRecord === undefined || currentRecord === null) {
+    console.log(`第 ${index + 1} 项为空值，停止读取。`);
+    break;
+  }
+
+  finishedRecords.push(currentRecord);
+}
+
+console.log("停止前已读取内容：", finishedRecords);

03-javascript-core/15-switch-break-and-empty-values/starter.js

@@ -0,0 +1,14 @@
+const learningStatus = "review";
+const records = ["变量", "条件", "函数", null, "对象"];
+
+let optionalNote;
+const finalComment = null;
+let statusText = "";
+const finishedRecords = [];
+
+// 任务：
+// 1. 用 switch 给 learningStatus 生成说明文字
+// 2. 输出 optionalNote 和 finalComment 分别是什么
+// 3. 用 for 循环读取 records
+// 4. 如果遇到 undefined 或 null，就 break
+// 5. 输出 finishedRecords

03-javascript-core/16-final-review/README.md

@@ -0,0 +1,47 @@
+# 练习 16：总复习
+
+## 目标
+
+把基础练习和补充练习里的关键知识点串起来，完成一个真正的总复盘脚本。
+
+## 项目名称
+
+学习营总复盘器
+
+## 你要练什么
+
+- 对象和对象方法
+- `this`
+- 数组高阶函数
+- `switch`
+- `break`
+- `undefined` / `null`
+- 引用类型
+- 函数封装
+
+## 任务
+
+请完成一个控制台版“学习营总复盘器”，要求至少包含：
+
+- 一个带方法的 `reviewer` 对象
+- 一个 `lessons` 数组
+- 一个用 `switch` 输出阶段说明的函数
+- 一个用 `for + break` 清洗有效数据的过程
+- 至少两个数组高阶函数
+- 对 `undefined` 和 `null` 的判断
+- 一段对象引用变化的观察代码
+- 最终输出标题、有效课程、平均分、完成状态
+
+## 自检标准
+
+- 是否把数据、判断、统计拆成了清晰步骤
+- 是否正确使用了 `this`
+- 是否知道什么时候该 `break`
+- 是否能区分 `undefined` 和 `null`
+- 是否能看出对象引用共享带来的变化
+- 输出信息是否完整、可读
+
+## 文件
+
+- [starter.js](/Users/lijiaqing/home/wwwroot/front-end-example/03-javascript-core/16-final-review/starter.js)
+- [answer.js](/Users/lijiaqing/home/wwwroot/front-end-example/03-javascript-core/16-final-review/answer.js)

03-javascript-core/16-final-review/answer.js

@@ -0,0 +1,70 @@
+const reviewer = {
+  name: "林晨",
+  stage: "final-review",
+  showTitle() {
+    console.log(`${this.name} 的学习营总复盘`);
+  },
+};
+
+const lessons = [
+  { title: "变量", score: 80, finished: true },
+  { title: "闭包", score: 92, finished: true },
+  { title: "this", score: 87, finished: true },
+  { title: "补漏练习", score: null, finished: false },
+  { title: "综合回顾", score: 95, finished: true },
+];
+
+let mentorNote;
+const reviewComment = null;
+
+function getStageText(stage) {
+  switch (stage) {
+    case "basic":
+      return "基础阶段";
+    case "advanced":
+      return "补充阶段";
+    case "final-review":
+      return "总复习阶段";
+    default:
+      return "未知阶段";
+  }
+}
+
+reviewer.showTitle();
+console.log("阶段说明：", getStageText(reviewer.stage));
+console.log("mentorNote 是否为 undefined：", mentorNote === undefined);
+console.log("reviewComment 是否为 null：", reviewComment === null);
+
+const validLessons = [];
+
+for (let index = 0; index < lessons.length; index += 1) {
+  const lesson = lessons[index];
+
+  if (lesson.score === undefined || lesson.score === null) {
+    console.log(`在《${lesson.title}》处遇到空成绩，停止读取后续项目。`);
+    break;
+  }
+
+  validLessons.push(lesson);
+}
+
+const lessonTitles = validLessons.map(function (lesson) {
+  return lesson.title;
+});
+
+const averageScore =
+  validLessons.reduce(function (total, lesson) {
+    return total + lesson.score;
+  }, 0) / validLessons.length;
+
+const allFinished = validLessons.every(function (lesson) {
+  return lesson.finished === true;
+});
+
+const reviewerAlias = reviewer;
+reviewerAlias.stage = "advanced";
+
+console.log("引用修改后的 reviewer.stage：", reviewer.stage);
+console.log("有效课程：", lessonTitles.join("、"));
+console.log("平均分：", averageScore);
+console.log("是否全部完成：", allFinished);

03-javascript-core/16-final-review/starter.js

@@ -0,0 +1,30 @@
+const reviewer = {
+  name: "林晨",
+  stage: "final-review",
+  showTitle() {
+    // 输出总复盘标题
+  },
+};
+
+const lessons = [
+  { title: "变量", score: 80, finished: true },
+  { title: "闭包", score: 92, finished: true },
+  { title: "this", score: 87, finished: true },
+  { title: "补漏练习", score: null, finished: false },
+  { title: "综合回顾", score: 95, finished: true },
+];
+
+let mentorNote;
+const reviewComment = null;
+
+function getStageText(stage) {
+  // 用 switch 返回阶段说明
+}
+
+// 任务：
+// 1. 调用 reviewer.showTitle()
+// 2. 输出 mentorNote 和 reviewComment 的区别
+// 3. 用 for + break 提取 lessons 中 score 有效的项目
+// 4. 用高阶函数统计课程标题、完成状态和平均分
+// 5. 创建 reviewerAlias 指向 reviewer，修改 stage，观察原对象是否变化
+// 6. 输出最终结果

03-javascript-core/README.md

@@ -0,0 +1,197 @@
+# JavaScript Core
+
+这部分只解决一个问题：你能不能用 JavaScript 把数据、条件、循环和函数这些基础逻辑写清楚。
+
+## 学完后你应该掌握
+
+- 变量声明和赋值
+- `var`、`let`、`const` 的区别
+- 常见数据类型
+- 运算符和条件判断
+- `if` / `else` / `switch` 的基本使用
+- `for` / `while` 的循环写法
+- 函数声明、参数和返回值
+- 数组和对象的基础操作
+- `this` 的基础指向
+- 常见内置方法和数组高阶函数
+- `switch`、`break`、`undefined`、`null` 的常见场景
+- 内存、执行顺序和引用关系的初步理解
+- 作用域和闭包的基本概念
+- 如何把几个基础知识点组合成一个小程序
+
+## JavaScript 是什么
+
+JavaScript 负责的是页面和程序里的逻辑。
+
+它回答的是：
+
+- 数据怎么保存
+- 条件怎么判断
+- 重复逻辑怎么执行
+- 功能怎么封装
+- 多个数据怎么组织
+
+如果 HTML 是骨架，CSS 是外观，那么 JavaScript 就是行为和思考过程。
+
+## 必须建立的 5 个核心意识
+
+### 1. 先想输入、过程、输出
+
+写逻辑前先问自己：
+
+- 输入是什么
+- 中间要做什么处理
+- 最后要输出什么结果
+
+### 2. 变量不是“魔法盒子”，而是有意义的命名
+
+```js
+const userName = "小周";
+const completedCount = 5;
+```
+
+变量名应该表达含义，而不是只写 `a`、`b`、`x`。
+
+### 3. 条件和循环是在表达规则
+
+- 条件：满足什么情况就做什么
+- 循环：同一件事要重复做多少次
+
+### 4. 函数是为了复用，不是为了凑语法
+
+当一段逻辑会重复出现，或者本身是一个完整动作时，就应该考虑封装成函数。
+
+### 5. 数据结构决定你怎么写逻辑
+
+- 单个值：用变量
+- 一组同类值：用数组
+- 一个事物的多个属性：用对象
+
+## 高频概念速记
+
+### 变量
+
+- `var`
+- `const`
+- `let`
+
+### 数据类型
+
+- `string`
+- `number`
+- `boolean`
+- `undefined`
+- `null`
+- `object`
+
+### 条件和比较
+
+- `if`
+- `else`
+- `switch`
+- `===`
+- `!==`
+- `>`
+- `<`
+- `&&`
+- `||`
+- `!`
+
+### 循环
+
+- `for`
+- `while`
+- `break`
+- `continue`
+
+### 函数
+
+- `function`
+- `return`
+- 参数
+- 返回值
+- `this`
+
+### 数据结构
+
+- `Array`
+- `Object`
+
+### 常见数组方法
+
+- `map`
+- `filter`
+- `reduce`
+- `find`
+- `some`
+- `every`
+
+## 学习顺序
+
+1. 变量和输出
+2. 数据类型
+3. 运算符和条件
+4. 循环
+5. 函数
+6. 数组
+7. 对象
+8. 常见方法
+9. 作用域和闭包
+10. 基础阶段综合练习
+11. `var` 和作用域差异
+12. `this`
+13. 数组高阶函数
+14. 内存和执行过程
+15. `switch`、`break` 和空值判断
+16. 总复习
+
+## 练习目录
+
+- [01-variables-and-console/README.md](/Users/lijiaqing/home/wwwroot/front-end-example/03-javascript-core/01-variables-and-console/README.md)
+- [02-data-types-and-conversion/README.md](/Users/lijiaqing/home/wwwroot/front-end-example/03-javascript-core/02-data-types-and-conversion/README.md)
+- [03-operators-and-conditions/README.md](/Users/lijiaqing/home/wwwroot/front-end-example/03-javascript-core/03-operators-and-conditions/README.md)
+- [04-loops/README.md](/Users/lijiaqing/home/wwwroot/front-end-example/03-javascript-core/04-loops/README.md)
+- [05-functions/README.md](/Users/lijiaqing/home/wwwroot/front-end-example/03-javascript-core/05-functions/README.md)
+- [06-arrays/README.md](/Users/lijiaqing/home/wwwroot/front-end-example/03-javascript-core/06-arrays/README.md)
+- [07-objects/README.md](/Users/lijiaqing/home/wwwroot/front-end-example/03-javascript-core/07-objects/README.md)
+- [08-built-in-methods/README.md](/Users/lijiaqing/home/wwwroot/front-end-example/03-javascript-core/08-built-in-methods/README.md)
+- [09-scope-and-closure/README.md](/Users/lijiaqing/home/wwwroot/front-end-example/03-javascript-core/09-scope-and-closure/README.md)
+- [10-final-mini-app/README.md](/Users/lijiaqing/home/wwwroot/front-end-example/03-javascript-core/10-final-mini-app/README.md)
+- [11-var-and-scope/README.md](/Users/lijiaqing/home/wwwroot/front-end-example/03-javascript-core/11-var-and-scope/README.md)
+- [12-this-keyword/README.md](/Users/lijiaqing/home/wwwroot/front-end-example/03-javascript-core/12-this-keyword/README.md)
+- [13-array-high-order-methods/README.md](/Users/lijiaqing/home/wwwroot/front-end-example/03-javascript-core/13-array-high-order-methods/README.md)
+- [14-memory-and-execution/README.md](/Users/lijiaqing/home/wwwroot/front-end-example/03-javascript-core/14-memory-and-execution/README.md)
+- [15-switch-break-and-empty-values/README.md](/Users/lijiaqing/home/wwwroot/front-end-example/03-javascript-core/15-switch-break-and-empty-values/README.md)
+- [16-final-review/README.md](/Users/lijiaqing/home/wwwroot/front-end-example/03-javascript-core/16-final-review/README.md)
+
+## 过关标准
+
+如果你能独立做到下面这些，就说明你的 JavaScript 基础已经立住了：
+
+- 能写出清晰的变量声明和赋值
+- 能分清常见数据类型，并知道什么时候需要类型转换
+- 能写条件判断处理不同分支
+- 能用循环处理一组数据
+- 能把逻辑封装成函数并返回结果
+- 能读写数组和对象里的数据
+- 能理解 `var`、`let`、`const` 的常见区别
+- 能判断普通函数、对象方法、箭头函数里的 `this` 常见差异
+- 能使用几个常见字符串、数组方法和高阶函数
+- 能区分 `undefined` 和 `null`，并在合适位置使用 `switch`、`break`
+- 能理解基础的值传递、引用传递和执行顺序
+- 能理解局部作用域和闭包的基本效果
+- 能独立写出一个小型控制台程序
+
+## 学习建议
+
+- 每个练习先自己写，再看答案
+- 先保证逻辑正确，再考虑写得更短
+- 遇到报错先读报错信息，不要急着猜
+- 多用 `console.log()` 观察变量变化
+
+## 运行调试
+
+- 可以直接双击打开 [runner.html](/Users/lijiaqing/home/wwwroot/front-end-example/03-javascript-core/runner.html)
+- 在页面里选择练习目录和 `starter.js` / `answer.js`
+- 点击“运行代码”查看 `console.log()` 输出和报错
+- 改完某个 `.js` 文件后，回到运行器重新点击一次“运行代码”即可

03-javascript-core/runner.html

@@ -0,0 +1,635 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>JavaScript Core Runner</title>
+    <style>
+      :root {
+        --bg: #f4efe6;
+        --panel: rgba(255, 252, 246, 0.9);
+        --panel-strong: #fffaf0;
+        --line: rgba(95, 72, 37, 0.18);
+        --text: #2d2417;
+        --muted: #6f624f;
+        --accent: #0e7a6c;
+        --accent-deep: #095d53;
+        --danger: #a6382b;
+        --warning: #a05f12;
+        --shadow: 0 24px 60px rgba(63, 46, 22, 0.12);
+        --code-bg: #1e1b16;
+        --code-text: #f5ecd9;
+      }
+
+      * {
+        box-sizing: border-box;
+      }
+
+      body {
+        margin: 0;
+        min-height: 100vh;
+        font-family: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
+        color: var(--text);
+        background:
+          radial-gradient(circle at top right, rgba(14, 122, 108, 0.16), transparent 26%),
+          radial-gradient(circle at bottom left, rgba(197, 137, 47, 0.12), transparent 30%),
+          linear-gradient(180deg, #f8f3eb 0%, var(--bg) 100%);
+      }
+
+      .shell {
+        width: min(1180px, calc(100% - 32px));
+        margin: 28px auto;
+        padding: 28px;
+        border: 1px solid var(--line);
+        border-radius: 28px;
+        background: var(--panel);
+        box-shadow: var(--shadow);
+        backdrop-filter: blur(10px);
+      }
+
+      .hero {
+        display: grid;
+        gap: 12px;
+        margin-bottom: 24px;
+      }
+
+      .eyebrow {
+        color: var(--accent);
+        font-size: 13px;
+        font-weight: 700;
+        letter-spacing: 0.08em;
+        text-transform: uppercase;
+      }
+
+      h1 {
+        margin: 0;
+        font-size: clamp(28px, 4vw, 44px);
+        line-height: 1.1;
+      }
+
+      .hero p {
+        margin: 0;
+        max-width: 720px;
+        color: var(--muted);
+        line-height: 1.7;
+      }
+
+      .layout {
+        display: grid;
+        grid-template-columns: 360px minmax(0, 1fr);
+        gap: 18px;
+      }
+
+      .card {
+        padding: 18px;
+        border-radius: 22px;
+        border: 1px solid var(--line);
+        background: var(--panel-strong);
+      }
+
+      .card h2 {
+        margin: 0 0 14px;
+        font-size: 18px;
+      }
+
+      .controls {
+        display: grid;
+        gap: 14px;
+      }
+
+      label {
+        display: grid;
+        gap: 8px;
+        font-size: 14px;
+        color: var(--muted);
+      }
+
+      select,
+      button,
+      a.button-link {
+        border-radius: 14px;
+        border: 1px solid var(--line);
+        font: inherit;
+      }
+
+      select {
+        width: 100%;
+        padding: 12px 14px;
+        color: var(--text);
+        background: #fffdf7;
+      }
+
+      .button-row {
+        display: flex;
+        flex-wrap: wrap;
+        gap: 10px;
+      }
+
+      button,
+      a.button-link {
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        min-height: 44px;
+        padding: 0 16px;
+        text-decoration: none;
+        cursor: pointer;
+        transition: transform 120ms ease, background-color 120ms ease, border-color 120ms ease;
+      }
+
+      button:hover,
+      a.button-link:hover {
+        transform: translateY(-1px);
+      }
+
+      .primary {
+        color: #ffffff;
+        border-color: transparent;
+        background: linear-gradient(135deg, var(--accent) 0%, var(--accent-deep) 100%);
+      }
+
+      .secondary {
+        color: var(--text);
+        background: #fffdf7;
+      }
+
+      .meta {
+        display: grid;
+        gap: 10px;
+        margin-top: 16px;
+        padding-top: 16px;
+        border-top: 1px dashed var(--line);
+        font-size: 14px;
+        color: var(--muted);
+      }
+
+      .meta strong {
+        color: var(--text);
+      }
+
+      .workspace {
+        display: grid;
+        gap: 16px;
+      }
+
+      .workspace-header {
+        display: flex;
+        flex-wrap: wrap;
+        align-items: center;
+        justify-content: space-between;
+        gap: 12px;
+      }
+
+      .workspace-header p {
+        margin: 0;
+        color: var(--muted);
+      }
+
+      .status {
+        display: inline-flex;
+        align-items: center;
+        gap: 8px;
+        padding: 8px 12px;
+        border-radius: 999px;
+        background: rgba(14, 122, 108, 0.1);
+        color: var(--accent-deep);
+        font-size: 13px;
+        font-weight: 700;
+      }
+
+      .console {
+        min-height: 420px;
+        padding: 18px;
+        border-radius: 18px;
+        background: var(--code-bg);
+        color: var(--code-text);
+        font: 14px/1.7 "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
+        overflow: auto;
+        white-space: pre-wrap;
+        word-break: break-word;
+      }
+
+      .console-line {
+        margin: 0;
+      }
+
+      .console-line + .console-line {
+        margin-top: 10px;
+      }
+
+      .console-line.error {
+        color: #ffb3a7;
+      }
+
+      .console-line.warn {
+        color: #ffd483;
+      }
+
+      .console-line.info {
+        color: #99f0da;
+      }
+
+      .tips {
+        display: grid;
+        gap: 8px;
+        padding: 16px;
+        border-radius: 18px;
+        background: rgba(14, 122, 108, 0.06);
+        color: var(--muted);
+        font-size: 14px;
+        line-height: 1.7;
+      }
+
+      .tips strong {
+        color: var(--text);
+      }
+
+      iframe {
+        width: 0;
+        height: 0;
+        border: 0;
+        visibility: hidden;
+      }
+
+      @media (max-width: 920px) {
+        .layout {
+          grid-template-columns: 1fr;
+        }
+
+        .shell {
+          width: min(100% - 18px, 100%);
+          margin: 12px auto;
+          padding: 18px;
+          border-radius: 22px;
+        }
+      }
+    </style>
+  </head>
+  <body>
+    <main class="shell">
+      <section class="hero">
+        <div class="eyebrow">03-javascript-core</div>
+        <h1>JavaScript 练习运行器</h1>
+        <p>
+          这个页面可以直接双击打开。选择练习和版本后，点击“运行代码”就会在下方看到
+          <code>console.log()</code> 输出、警告和报错。
+        </p>
+      </section>
+
+      <section class="layout">
+        <aside class="card">
+          <h2>运行设置</h2>
+          <div class="controls">
+            <label>
+              选择练习
+              <select id="exerciseSelect"></select>
+            </label>
+
+            <label>
+              选择版本
+              <select id="variantSelect">
+                <option value="starter">starter.js</option>
+                <option value="answer">answer.js</option>
+              </select>
+            </label>
+
+            <div class="button-row">
+              <button id="runButton" class="primary" type="button">运行代码</button>
+              <button id="clearButton" class="secondary" type="button">清空输出</button>
+            </div>
+
+            <div class="button-row">
+              <a id="openScriptLink" class="button-link secondary" href="./01-variables-and-console/starter.js">打开脚本</a>
+              <a id="openReadmeLink" class="button-link secondary" href="./01-variables-and-console/README.md">打开说明</a>
+            </div>
+          </div>
+
+          <div class="meta">
+            <div><strong>当前文件：</strong><span id="filePathText">./01-variables-and-console/starter.js</span></div>
+            <div><strong>说明文档：</strong><span id="readmePathText">./01-variables-and-console/README.md</span></div>
+            <div><strong>提示：</strong>修改完脚本后，回到这里再次点击“运行代码”即可重新执行。</div>
+          </div>
+        </aside>
+
+        <section class="workspace">
+          <div class="workspace-header">
+            <div>
+              <h2>控制台输出</h2>
+              <p>这里会显示 <code>console.log()</code>、<code>console.warn()</code>、<code>console.error()</code> 和运行时错误。</p>
+            </div>
+            <div class="status" id="statusBadge">等待运行</div>
+          </div>
+
+          <div id="consoleOutput" class="console" aria-live="polite"></div>
+
+          <div class="tips">
+            <div><strong>调试建议：</strong>卡住时多打印变量，先看每一步结果，再改逻辑。</div>
+            <div><strong>断点方式：</strong>你可以在对应的 <code>.js</code> 文件里加上 <code>debugger;</code>，然后重新运行。</div>
+            <div><strong>适用范围：</strong>当前运行器适合这套纯 JavaScript 控制台练习，不依赖 Node。</div>
+          </div>
+        </section>
+      </section>
+    </main>
+
+    <iframe id="runnerFrame" title="JavaScript runner"></iframe>
+
+    <script>
+      const exercises = [
+        { dir: "01-variables-and-console", label: "01 变量和控制台输出" },
+        { dir: "02-data-types-and-conversion", label: "02 数据类型和类型转换" },
+        { dir: "03-operators-and-conditions", label: "03 运算符和条件判断" },
+        { dir: "04-loops", label: "04 循环" },
+        { dir: "05-functions", label: "05 函数" },
+        { dir: "06-arrays", label: "06 数组" },
+        { dir: "07-objects", label: "07 对象" },
+        { dir: "08-built-in-methods", label: "08 常见内置方法" },
+        { dir: "09-scope-and-closure", label: "09 闭包入门" },
+        { dir: "10-final-mini-app", label: "10 基础阶段综合小程序" },
+        { dir: "11-var-and-scope", label: "11 var、let、const 与提升" },
+        { dir: "12-this-keyword", label: "12 this" },
+        { dir: "13-array-high-order-methods", label: "13 数组高阶函数" },
+        { dir: "14-memory-and-execution", label: "14 内存和执行" },
+        { dir: "15-switch-break-and-empty-values", label: "15 switch、break 和空值判断" },
+        { dir: "16-final-review", label: "16 总复习" },
+      ];
+
+      const exerciseSelect = document.getElementById("exerciseSelect");
+      const variantSelect = document.getElementById("variantSelect");
+      const runButton = document.getElementById("runButton");
+      const clearButton = document.getElementById("clearButton");
+      const consoleOutput = document.getElementById("consoleOutput");
+      const statusBadge = document.getElementById("statusBadge");
+      const runnerFrame = document.getElementById("runnerFrame");
+      const filePathText = document.getElementById("filePathText");
+      const readmePathText = document.getElementById("readmePathText");
+      const openScriptLink = document.getElementById("openScriptLink");
+      const openReadmeLink = document.getElementById("openReadmeLink");
+
+      const storageKey = "javascript-core-runner";
+      let activeRunId = 0;
+
+      function createOptions() {
+        exercises.forEach(function (exercise) {
+          const option = document.createElement("option");
+          option.value = exercise.dir;
+          option.textContent = exercise.label;
+          exerciseSelect.appendChild(option);
+        });
+      }
+
+      function getSelection() {
+        return {
+          dir: exerciseSelect.value,
+          variant: variantSelect.value,
+        };
+      }
+
+      function getPaths() {
+        const selection = getSelection();
+        return {
+          scriptPath: `./${selection.dir}/${selection.variant}.js`,
+          readmePath: `./${selection.dir}/README.md`,
+        };
+      }
+
+      function saveSelection() {
+        localStorage.setItem(storageKey, JSON.stringify(getSelection()));
+      }
+
+      function restoreSelection() {
+        const savedValue = localStorage.getItem(storageKey);
+
+        if (!savedValue) {
+          exerciseSelect.value = exercises[0].dir;
+          variantSelect.value = "starter";
+          return;
+        }
+
+        try {
+          const parsed = JSON.parse(savedValue);
+          const exists = exercises.some(function (exercise) {
+            return exercise.dir === parsed.dir;
+          });
+
+          exerciseSelect.value = exists ? parsed.dir : exercises[0].dir;
+          variantSelect.value = parsed.variant === "answer" ? "answer" : "starter";
+        } catch (error) {
+          exerciseSelect.value = exercises[0].dir;
+          variantSelect.value = "starter";
+        }
+      }
+
+      function updateMeta() {
+        const paths = getPaths();
+        filePathText.textContent = paths.scriptPath;
+        readmePathText.textContent = paths.readmePath;
+        openScriptLink.href = paths.scriptPath;
+        openReadmeLink.href = paths.readmePath;
+      }
+
+      function appendLine(kind, message) {
+        const line = document.createElement("div");
+        line.className = `console-line ${kind}`;
+        line.textContent = message;
+        consoleOutput.appendChild(line);
+        consoleOutput.scrollTop = consoleOutput.scrollHeight;
+      }
+
+      function clearConsole() {
+        consoleOutput.textContent = "";
+      }
+
+      function setStatus(text, tone) {
+        statusBadge.textContent = text;
+        if (tone === "error") {
+          statusBadge.style.background = "rgba(166, 56, 43, 0.12)";
+          statusBadge.style.color = "#8c2f25";
+          return;
+        }
+
+        if (tone === "running") {
+          statusBadge.style.background = "rgba(160, 95, 18, 0.12)";
+          statusBadge.style.color = "#8a5110";
+          return;
+        }
+
+        statusBadge.style.background = "rgba(14, 122, 108, 0.1)";
+        statusBadge.style.color = "#095d53";
+      }
+
+      function runScript() {
+        const paths = getPaths();
+        const runId = String(Date.now());
+        activeRunId = runId;
+
+        clearConsole();
+        appendLine("info", `运行文件：${paths.scriptPath}`);
+        setStatus("运行中", "running");
+
+        const srcdoc = `
+<!DOCTYPE html>
+<html lang="zh-CN">
+  <body>
+    <script>
+      (function () {
+        var runId = ${JSON.stringify(runId)};
+
+        function serialize(value, visited) {
+          if (!visited) {
+            visited = new WeakSet();
+          }
+
+          if (value === undefined) {
+            return "undefined";
+          }
+
+          if (value === null) {
+            return "null";
+          }
+
+          if (typeof value === "string") {
+            return value;
+          }
+
+          if (typeof value === "number" || typeof value === "boolean" || typeof value === "bigint") {
+            return String(value);
+          }
+
+          if (typeof value === "function") {
+            return "[Function]";
+          }
+
+          if (typeof value === "object") {
+            if (visited.has(value)) {
+              return "[Circular]";
+            }
+
+            visited.add(value);
+
+            try {
+              return JSON.stringify(value, function (key, currentValue) {
+                if (typeof currentValue === "undefined") {
+                  return "[undefined]";
+                }
+                return currentValue;
+              }, 2);
+            } catch (error) {
+              return Object.prototype.toString.call(value);
+            }
+          }
+
+          return String(value);
+        }
+
+        function send(kind, args) {
+          parent.postMessage(
+            {
+              source: "javascript-core-runner",
+              runId: runId,
+              kind: kind,
+              text: args.map(function (item) {
+                return serialize(item);
+              }).join(" ")
+            },
+            "*"
+          );
+        }
+
+        var originalLog = console.log;
+        var originalWarn = console.warn;
+        var originalError = console.error;
+
+        console.log = function () {
+          send("log", Array.prototype.slice.call(arguments));
+          originalLog.apply(console, arguments);
+        };
+
+        console.warn = function () {
+          send("warn", Array.prototype.slice.call(arguments));
+          originalWarn.apply(console, arguments);
+        };
+
+        console.error = function () {
+          send("error", Array.prototype.slice.call(arguments));
+          originalError.apply(console, arguments);
+        };
+
+        window.onerror = function (message, source, lineno, colno) {
+          send("error", ["运行时错误：", message, "位置：", source + ":" + lineno + ":" + colno]);
+        };
+
+        window.addEventListener("unhandledrejection", function (event) {
+          send("error", ["Promise 未处理异常：", event.reason]);
+        });
+
+        var script = document.createElement("script");
+        script.src = ${JSON.stringify(paths.scriptPath)} + "?t=" + Date.now();
+        script.onload = function () {
+          send("done", ["执行完成"]);
+        };
+        script.onerror = function () {
+          send("error", ["脚本加载失败：", ${JSON.stringify(paths.scriptPath)}]);
+        };
+        document.body.appendChild(script);
+      })();
+    <\/script>
+  </body>
+</html>`;
+
+        runnerFrame.srcdoc = srcdoc;
+      }
+
+      window.addEventListener("message", function (event) {
+        const payload = event.data;
+
+        if (!payload || payload.source !== "javascript-core-runner") {
+          return;
+        }
+
+        if (payload.runId !== activeRunId) {
+          return;
+        }
+
+        if (payload.kind === "error") {
+          appendLine("error", payload.text);
+          setStatus("执行报错", "error");
+          return;
+        }
+
+        if (payload.kind === "warn") {
+          appendLine("warn", payload.text);
+          return;
+        }
+
+        if (payload.kind === "done") {
+          appendLine("info", payload.text);
+          setStatus("执行完成", "done");
+          return;
+        }
+
+        appendLine("log", payload.text);
+      });
+
+      exerciseSelect.addEventListener("change", function () {
+        saveSelection();
+        updateMeta();
+      });
+
+      variantSelect.addEventListener("change", function () {
+        saveSelection();
+        updateMeta();
+      });
+
+      runButton.addEventListener("click", runScript);
+      clearButton.addEventListener("click", function () {
+        clearConsole();
+        setStatus("输出已清空", "done");
+      });
+
+      createOptions();
+      restoreSelection();
+      updateMeta();
+      appendLine("info", "选择练习后点击“运行代码”，这里会显示输出结果。");
+    </script>
+  </body>
+</html>

README.md

@@ -26,14 +26,22 @@
 - `starter.html` / `starter.css` 起始代码
 - `answer.html` / `answer.css` 参考答案
 
-两部分现在都已经补充到“核心主线 + 常见细分知识点”。
+现在也已经整理好 `03-javascript-core`，里面包含：
+
+- JavaScript 核心讲义
+- 分阶段练习
+- `starter.js` 起始代码
+- `answer.js` 参考答案
+
+前三部分现在都已经补充到“核心主线 + 常见细分知识点”。
 
 ## 使用方式
 
 1. 先阅读 [01-html-structure/README.md](/Volumes/Macintosh HD 1/home/front-end-example/01-html-structure/README.md)
 2. 再阅读 [02-css-layout/README.md](/Volumes/Macintosh HD 1/home/front-end-example/02-css-layout/README.md)
-3. 按顺序完成每个练习目录
+3. 再阅读 [03-javascript-core/README.md](/Volumes/Macintosh HD 1/home/front-end-example/03-javascript-core/README.md)
-4. 先写 `starter.html` 或 `starter.css`
+4. 按顺序完成每个练习目录
-5. 写完后再对照答案文件
+5. 先写 `starter.html`、`starter.css` 或 `starter.js`
+6. 写完后再对照答案文件
 
-如果你后面要继续学其他知识点，我可以按同样结构继续给你补 `03-javascript-core`、`04-dom-events-async` 等目录。
+如果你后面要继续学其他知识点，我可以按同样结构继续给你补 `04-dom-events-async`、`05-typescript` 等目录。