vue2

Merge branch 'main' of https://gitea.lililibra.cn/rou/front-end-example
l
2026-03-26 21:45:32 +08:00 · 2026-03-25 18:13:41 +08:00 · 2026-03-25 18:13:35 +08:00 · 2026-03-24 23:02:59 +08:00 · 2026-03-24 23:02:58 +08:00 · 2026-03-23 16:33:09 +08:00
285 changed files with 12016 additions and 21 deletions
--- a/.gitignore
+++ b/.gitignore
@@ -0,0 +1 @@
 node_modules
--- a/02-css-layout/10-fixed-and-sticky/answer.css
+++ b/02-css-layout/10-fixed-and-sticky/answer.css
@@ -27,6 +27,7 @@ body {
  background: #ffffff;
  border-bottom: 1px solid #cbd5e1;
  font-weight: 700;
  width: 100%;
 }
 .content {
--- a/02-css-layout/10-fixed-and-sticky/starter.html
+++ b/02-css-layout/10-fixed-and-sticky/starter.html
@@ -7,8 +7,10 @@
    <style>
      body{
        background-color: rgb(248, 252, 255);
        margin: 0px;
        display: flex;
        justify-content: center;
        align-items: center;
      }
      a{
@@ -24,7 +26,23 @@
      }
      .page{
-        wi
+        width: min(700px,calc(100% - 40px));
        margin: 0 auto;
      }
      .topbar{
        padding: 15px;
        background-color: white;
        position: fixed;
        top: 0px;
        font-weight: 700;
        font-size: 17px;
        width: min(700px,calc(100% - 40px));
      }
      .content{
          height: 1100px;
          margin-top: 60px;
      }
    </style>
  </head>
--- a/02-css-layout/11-centering-lab/starter.html
+++ b/02-css-layout/11-centering-lab/starter.html
@@ -1,14 +1,56 @@
 <!DOCTYPE html>
 <html lang="zh-CN">
 <head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>居中专题</title>
-    <link rel="stylesheet" href="./starter.css" />
+  <style>
    html {
      width: 100%;
      height: 100%;
      margin: 0;
      padding: 0;
    }
    body {
      background-color: rgb(255, 248, 238);
      margin: 0;
      padding: 0;
      width: 100%;
      height: 100%;
      position: fixed;
    }
    .stage {
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
      background-color: white;
      border: 1px solid rgba(255, 156, 7, 0.25);
      border-radius: 20px;
      padding: 15px 20px;
      box-shadow: 0 0 10px rgb(243, 218, 172);
      width: 150px;
      height: 70px;
      display: flex;
      justify-content: center;
      align-items: center;
    }
    .box {
      text-align: center;
      margin: auto;
    }
  </style>
 </head>
 <body>
  <div class="stage">
-      <div class="box">把我放到中间</div>
+    <div class="box">把我放到中间 transform: translate(-50%, -50%); </div>
  </div>
 </body>
 </html>
--- a/03-javascript-core/01-variables-and-console/README.md
+++ b/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)
--- a/03-javascript-core/01-variables-and-console/answer.js
+++ b/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);
--- a/03-javascript-core/01-variables-and-console/starter.js
+++ b/03-javascript-core/01-variables-and-console/starter.js
@@ -0,0 +1,17 @@
 const userName = "小明";
 let currentStage = "学习中";
 let completedExercises = 0;
 completedExercises = 2;
 console.log('学习者：' + userName);
 console.log('学习阶段：' + currentStage);
 console.log('学习次数：' + completedExercises);
 // 任务：
 // 1. 给上面的变量赋一个合理值
 // 2. 修改一次 currentStage 或 completedExercises
 // 3. 输出 3 行学习信息
 // 例如：学习者：小周
--- a/03-javascript-core/02-data-types-and-conversion/README.md
+++ b/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)
--- a/03-javascript-core/02-data-types-and-conversion/answer.js
+++ b/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}`);
--- a/03-javascript-core/02-data-types-and-conversion/starter.js
+++ b/03-javascript-core/02-data-types-and-conversion/starter.js
@@ -0,0 +1,16 @@
 const studentName = "林晨";
 const ageText = "21";
 const hasPaid = true;
 // 任务：
 // 1. 把 ageText 转成数字，保存到 ageNumber
 // 2. 分别输出 studentName、ageText、ageNumber、hasPaid 的类型
 // 3. 用模板字符串输出一句报名信息
 const ageNumber = Number(ageText);
 console.log(typeof studentName);
 console.log(typeof ageText);
 console.log(typeof ageNumber);
 console.log(typeof hasPaid);
 alert('姓名：${studentName},年龄：{ageNumber},报名状态：{hasPaid}')
--- a/03-javascript-core/03-operators-and-conditions/README.md
+++ b/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)
--- a/03-javascript-core/03-operators-and-conditions/answer.js
+++ b/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);
--- a/03-javascript-core/03-operators-and-conditions/starter.js
+++ b/03-javascript-core/03-operators-and-conditions/starter.js
@@ -0,0 +1,34 @@
 const score = 86;
 // 任务：
 // 1. 用布尔值保存是否及格
 // 2. 用 if...else if...else 判断等级
 // 3. 输出分数、是否及格、等级
 /*- 根据分数计算是否及格
 - 根据分数输出等级
 - 90 分及以上为 A
 - 80 到 89 为 B
 - 60 到 79 为 C
 - 60 以下为 D*/
 let passed = false;
 let grade = "";
 let point = 70;
 if (point >= 90) {
  grade = 'A'
 } else if (point >= 80 && point <= 89) {
  grade = 'B'
 } else if (point >= 60 && point <= 79) {
  grade = 'C'
 } else if (point <= 60) {
  grade = 'D'
 }
 if (grade != 'D') {
  passed = true
 }
 console.log('分数：${point}');
 console.log('是否及格：${passed}');
 console.log('等级：${grade}');
--- a/03-javascript-core/04-loops/README.md
+++ b/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)
--- a/03-javascript-core/04-loops/answer.js
+++ b/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);
--- a/03-javascript-core/04-loops/starter.js
+++ b/03-javascript-core/04-loops/starter.js
@@ -0,0 +1,21 @@
 // 任务：
 // 1. 用 for 输出第 1 天到第 7 天
 // 2. 第 4 天跳过，不输出
 // 3. 用 while 计算 1 到 5 的总和
 // 4. 输出 sum
 let sum = 0;
 for (let i = 1; i <= 7; i++) {
  console.log(i);
  if (i == 4) {
    continue
  }
 }
 let j = 1
 while (j <= 5) {
  sum = sum + j
  j++
 }
 console.log(sum);
--- a/03-javascript-core/05-functions/README.md
+++ b/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)
--- a/03-javascript-core/05-functions/answer.js
+++ b/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);
--- a/03-javascript-core/05-functions/starter.js
+++ b/03-javascript-core/05-functions/starter.js
@@ -0,0 +1,30 @@
 function getAverage(score1, score2, score3) {
  return (score1 + score2 + score3) / 3
  // 返回平均分
 }
 function getLevel(average) {
  if (average >= 90) {
    return '优秀'
  } else if (average >= 60 && average < 90) {
    return '良好'
  } else {
    return '继续努力'
  }
  // 根据平均分返回等级描述
 }
 const average = getAverage(75, 89, 100)
 const level = getLevel(average)
 console.log(average);
 console.log(level);
 // 任务：
 // 1. 调用上面两个函数
 // 2. 输出平均分和等级
 /*- 写一个 `getAverage` 函数
 - 接收 3 个分数参数
 - 返回平均分
 - 再写一个 `getLevel` 函数
 - 根据平均分返回“优秀”“良好”“继续努力”*/
--- a/03-javascript-core/06-arrays/README.md
+++ b/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)
--- a/03-javascript-core/06-arrays/answer.js
+++ b/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]}`);
 }
--- a/03-javascript-core/06-arrays/starter.js
+++ b/03-javascript-core/06-arrays/starter.js
@@ -0,0 +1,16 @@
 const topics = ["HTML", "CSS", "JavaScript"];
 // 任务：
 // 1. 往 topics 里新增一个主题
 // 2. 输出 topics 的长度
 // 3. 用循环输出每一项
 /*- 创建一个包含 3 个学习主题的数组
 - 新增 1 个学习主题
 - 输出数组长度
 - 依次输出每个学习主题*/
 topics.push('Vue')
 console.log(topics.length);
 for (let i = 0; i < topics.length; i++) {
  console.log(topics[i]);
 }
--- a/03-javascript-core/07-objects/README.md
+++ b/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)
--- a/03-javascript-core/07-objects/answer.js
+++ b/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);
--- a/03-javascript-core/07-objects/starter.js
+++ b/03-javascript-core/07-objects/starter.js
@@ -0,0 +1,23 @@
 const course = {
  title: "JavaScript 核心",
  lessons: 12,
  finished: false,
 };
 // 任务：
 // 1. 修改 finished
 // 2. 新增 teacher 属性
 // 3. 输出完整对象
 // 4. 输出 title 和 teacher
 /*- 创建一个课程对象
 - 至少包含名称、课时、是否完结
 - 修改其中一个属性
 - 新增一个老师属性
 - 输出完整对象和其中两个单独属性*/
 course.finished = true
 course.teacher = '李老师'
 console.log(course);
 console.log(course.title);
 console.log(course.lessons);
--- a/03-javascript-core/08-built-in-methods/README.md
+++ b/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)
--- a/03-javascript-core/08-built-in-methods/answer.js
+++ b/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);
--- a/03-javascript-core/08-built-in-methods/starter.js
+++ b/03-javascript-core/08-built-in-methods/starter.js
@@ -0,0 +1,16 @@
 const rawTitle = "  js 核心练习  ";
 const tags = ["变量", "条件", "函数"];
 // 任务：
 // 1. 去掉 rawTitle 两端空格
 // 2. 转成大写
 // 3. 判断是否包含 JS
 // 4. 把 tags 用顿号连接成一句话
 /*- 把一段带空格的文本去掉首尾空格
 - 把结果转成大写
 - 判断里面是否包含 `JS`
 - 把一个标签数组拼成一个字符串输出*/
 const rawTrim = rawTitle.trim()
 const rawTo = rawTitle.toUpperCase()
 const result = rawTitle.includes("JS")
 const tagsJoin = rawTitle.join(",")
--- a/03-javascript-core/09-scope-and-closure/README.md
+++ b/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)
--- a/03-javascript-core/09-scope-and-closure/answer.js
+++ b/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 都会创建一个新的闭包环境。");
--- a/03-javascript-core/09-scope-and-closure/starter.js
+++ b/03-javascript-core/09-scope-and-closure/starter.js
@@ -0,0 +1,28 @@
 function createCounter() {
  let count = 0;
  // 返回一个函数
  function a() {
    count++
    return count
  }
 }
 const counterA = createCounter()
 const counterB = createCounter()
 console.log(counterA());
 console.log(counterA());
 console.log(counterB());
 // 任务：
 // 1. 创建 counterA 和 counterB
 // 2. 连续调用 counterA 两次
 // 3. 再调用 counterB 一次
 // 4. 观察为什么两个计数器互不影响
 /*写一个 `createCounter` 函数
 - 在函数内部定义 `count`
 - 返回一个内部函数
 - 每次调用内部函数时，`count` 都加 1
 - 创建两个不同的计数器
 - 观察为什么它们各自记住了自己的 `count`*/
--- a/03-javascript-core/10-final-mini-app/README.md
+++ b/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)
--- a/03-javascript-core/10-final-mini-app/answer.js
+++ b/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("可以进入下一阶段");
 }
--- a/03-javascript-core/10-final-mini-app/starter.js
+++ b/03-javascript-core/10-final-mini-app/starter.js
@@ -0,0 +1,41 @@
 const student = {
  name: "林晨",
  stage: "JavaScript 核心",
 };
 const scores = [78, 85, 92];
 function getAverageScore(list) {
  // 计算平均分
  let sum = 0
  for (let i = 0; i < list.length; i++) {
    sum = sum + list[i]
  }
  return sum / list.length
 }
 function getLevel(average) {
  // 返回等级
  if (average >= 80) {
    return "可以进入下一阶段"
  } else {
    return "保持当前等级"
  }
 }
 const average = getAverageScore(scores)
 const level = getLevel(average)
 console.log("姓名：" + student.name + "阶段：" + student.stage + "平均分：" + "average" + "等级：" + level);
 // 任务：
 // 1. 计算平均分
 // 2. 计算等级
 // 3. 输出姓名、阶段、平均分、等级
 // 4. 如果平均分 >= 80，输出“可以进入下一阶段”
 /*一个 `student` 对象
 - 一个 `scores` 数组
 - 一个计算平均分的函数
 - 一个判断等级的函数
 - 输出姓名、平均分、等级
 - 如果平均分大于等于 80，再输出“可以进入下一阶段”*/
--- a/03-javascript-core/11-var-and-scope/README.md
+++ b/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)
--- a/03-javascript-core/11-var-and-scope/answer.js
+++ b/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 不能被重新赋值，否则会报错。
--- a/03-javascript-core/11-var-and-scope/starter.js
+++ b/03-javascript-core/11-var-and-scope/starter.js
@@ -0,0 +1,36 @@
 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);
  }
  var lessonName = "变量";
  let chapterName = "作用域";
  const stage = "进阶";
  console.log("块内：", lessonName);
  // 任务：
  // 1. 输出 lessonName
  // 2. 不要直接在这里输出 chapterName，否则会报错
  // 3. 用一句注释说明为什么
 }
 compareScope();
 // 任务：
 // 4. 试着重新给 const 声明的值赋值
 // 5. 观察会发生什么
 /*观察 `var` 声明前为什么能访问到 `undefined`
 - 用 `var` 声明一个函数内部变量
 - 用 `let` 声明一个代码块内部变量
 - 在可访问的位置输出它们
 - 观察为什么 `var` 在块外还能访问，而 `let` 不行
 - 再写一段代码证明 `const` 不能被重新赋值*/
--- a/03-javascript-core/12-this-keyword/README.md
+++ b/03-javascript-core/12-this-keyword/README.md
@@ -0,0 +1,35 @@
 # 练习 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)
 function a() {
 }
 const b = () => {
 }
--- a/03-javascript-core/12-this-keyword/answer.js
+++ b/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。");
--- a/03-javascript-core/12-this-keyword/starter.js
+++ b/03-javascript-core/12-this-keyword/starter.js
@@ -0,0 +1,28 @@
 const student = {
  name: "林晨",
  stage: "JavaScript 核心",
  sayHello() {
    // 任务：
    // 1. 用 this.name 输出问候语
    console.log(this.name + "你好！");
  },
  createArrowReporter() {
    // 任务：
    // 2. 返回一个箭头函数
    // 3. 在箭头函数里输出 this.name
    return () => {
      console.log(this.name);
    }
  },
 };
 // 任务：
 // 4. 调用 student.sayHello()
 student.sayHello()
 // 5. 把 student.sayHello 赋值给 detachedHello 再调用
 const detachedHello = student.sayHello
 detachedHello()
 // 6. 调用 createArrowReporter 返回的新函数
 student.createArrowReporter()()
--- a/03-javascript-core/13-array-high-order-methods/README.md
+++ b/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)
--- a/03-javascript-core/13-array-high-order-methods/answer.js
+++ b/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);
--- a/03-javascript-core/13-array-high-order-methods/starter.js
+++ b/03-javascript-core/13-array-high-order-methods/starter.js
@@ -0,0 +1,34 @@
 const scores = [58, 76, 91, 84];
 const students = [
  { name: "小周", finished: true },
  { name: "小林", finished: true },
  { name: "小陈", finished: false },
 ];
 const scores1 = scores.map(item => item = item + '分')
 const scores2 = scores.filter(item => item > 60)
 const scores3 = scores.reduce((acc, item) => { return item + acc }, 0)
 const scores4 = scores.find(item => item >= 90)
 const scores5 = scores.some(item => item >= 90)
 const scores6 = students.every(item => item.finished === true)
 console.log("分数：" + scores1);
 console.log("及格分：" + scores2);
 console.log("总分：" + scores3);
 console.log("第一个 >= 90 的分数：" + scores4);
 console.log("是否存在不及格：" + scores5);
 console.log("是否都及格：" + scores6);
 // 任务：
 // 1. 用 map 生成 ["58分", ...]
 // 2. 用 filter 筛出及格分
 // 3. 用 reduce 计算总分
 // 4. 用 find 找到第一个 >= 90 的分数
 // 5. 用 some 判断是否存在不及格
 // 6. 用 every 判断 students 是否都 finished 为 true
 /* 用 `map` 生成带单位的新数组
 - 用 `filter` 找出及格成绩
 - 用 `reduce` 计算总分
 - 用 `find` 找出第一条大于等于 90 的成绩
 - 用 `some` 判断是否有人不及格
 - 用 `every` 判断是否全部完成考试*/
--- a/03-javascript-core/14-memory-and-execution/README.md
+++ b/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)
--- a/03-javascript-core/14-memory-and-execution/answer.js
+++ b/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);
--- a/03-javascript-core/14-memory-and-execution/starter.js
+++ b/03-javascript-core/14-memory-and-execution/starter.js
@@ -0,0 +1,37 @@
 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
  user.city = '北京'
 }
 scoreB = 90
 console.log('scoreA' + scoreA + ',scoreB' + scoreB);
 userB.city = '秦皇岛'
 console.log(userA.city, userB.city);
 printStepOne()
 printStepTwo()
 updateUser(userA)
 console.log(userA);
 // 任务：
 // 2. 修改 scoreB，观察 scoreA 是否变化
 // 3. 修改 userB.city，观察 userA.city 是否变化
 // 4. 按顺序调用 printStepOne 和 printStepTwo
 // 5. 调用 updateUser(userA)
--- a/03-javascript-core/15-switch-break-and-empty-values/README.md
+++ b/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)
--- a/03-javascript-core/15-switch-break-and-empty-values/answer.js
+++ b/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);
--- a/03-javascript-core/15-switch-break-and-empty-values/starter.js
+++ b/03-javascript-core/15-switch-break-and-empty-values/starter.js
@@ -0,0 +1,48 @@
 const learningStatus = "review";
 const records = ["变量", "条件", "函数", null, "对象"];
 let optionalNote;
 const finalComment = null;
 let statusText = "";
 const finishedRecords = [];
 switch (learningStatus) {
  case 'review':
    console.log('已学习')
    break
  case 'ing':
    console.log('学习中');
    break
  case 'prepare':
    console.log('未学习');
    break
  default:
    console.log('状态未知');
    break
 }
 console.log(optionalNote, finalComment);
 for (let i = 0; i < records.length; i++) {
  if (records[i] === null || records[i] === undefined) {
    console.log(`第${i + 1}项为空值，停止读取`)
    break
  } else {
    finishedRecords.push(records[i])
  }
 }
 console.log(finishedRecords)
 // 任务：
 // 1. 用 switch 给 learningStatus 生成说明文字
 // 2. 输出 optionalNote 和 finalComment 分别是什么
 // 3. 用 for 循环读取 records
 // 4. 如果遇到 undefined 或 null，就 break
 // 5. 输出 finishedRecords
 /*用 `switch` 根据学习状态输出不同说明
 - 观察 `undefined` 和 `null` 的区别
 - 用循环读取学习记录
 - 如果读到 `undefined` 或 `null`，立即用 `break` 停止循环
 - 输出停止前已经读取到的内容*/
--- a/03-javascript-core/16-final-review/README.md
+++ b/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)
--- a/03-javascript-core/16-final-review/answer.js
+++ b/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);
--- a/03-javascript-core/16-final-review/starter.js
+++ b/03-javascript-core/16-final-review/starter.js
@@ -0,0 +1,74 @@
 const reviewer = {
  name: "林晨",
  stage: "final-review",
  showTitle() {
    console.log(`学习营总复盘器`);
    // 输出总复盘标题
  },
 };
 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;//undefined
 const reviewComment = null;//null
 function getStageText(stage) {
  // 用 switch 返回阶段说明
  switch (stage) {
    case 'final-review':
      console.log('已学习');
      break
    case 'ing-review':
      console.log('学习中');
      break
    case 'start-review':
      console.log('未学习');
      break
    default:
      console.log('状态未知');
      break
  }
 }
 reviewer.showTitle()
 console.log(mentorNote, reviewComment);
 const lessons1 = []
 for (let i = 0; i < lessons.length; i++) {
  if (lessons[i].score != null) {
    lessons1.push(lessons[i])
  }
 }
 const sum = lessons.reduce((acc, item) => {
  return acc + item.score
 }, 0)
 console.log("总分：" + sum);
 console.log(`平均分：${sum / lessons.length}`);
 const reviewerAlias = reviewer
 reviewerAlias.stage = 'ing-review'
 console.log(reviewer.stage, reviewerAlias.stage);
 // 任务：
 // 1. 调用 reviewer.showTitle()
 // 2. 输出 mentorNote 和 reviewComment 的区别
 // 3. 用 for + break 提取 lessons 中 score 有效的项目
 // 4. 用高阶函数统计课程标题、完成状态和平均分
 // 5. 创建 reviewerAlias 指向 reviewer，修改 stage，观察原对象是否变化
 // 6. 输出最终结果
 /* 一个带方法的 `reviewer` 对象
 - 一个 `lessons` 数组
 - 一个用 `switch` 输出阶段说明的函数
 - 一个用 `for + break` 清洗有效数据的过程
 - 至少两个数组高阶函数
 - 对 `undefined` 和 `null` 的判断
 - 一段对象引用变化的观察代码
 - 最终输出标题、有效课程、平均分、完成状态*/
--- a/03-javascript-core/README.md
+++ b/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` 文件后，回到运行器重新点击一次“运行代码”即可
--- a/03-javascript-core/runner.html
+++ b/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>
--- a/04-dom-events-async/01-query-selectors/README.md
+++ b/04-dom-events-async/01-query-selectors/README.md
@@ -0,0 +1,28 @@
 # 练习 1：获取元素
 ## 目标
 学会用几种常见方式拿到页面元素。
 ## 你要练什么
 - `getElementById`
 - `querySelector`
 - `querySelectorAll`
 - 元素文本读取
 ## 任务
 请基于页面结构完成以下操作：
 - 选中主标题
 - 选中“开始学习”按钮
 - 选中全部学习卡片
 - 在控制台输出标题文字、按钮文字和卡片数量
 ## 文件
 - [starter.html](/Users/lijiaqing/home/wwwroot/front-end-example/04-dom-events-async/01-query-selectors/starter.html)
 - [starter.js](/Users/lijiaqing/home/wwwroot/front-end-example/04-dom-events-async/01-query-selectors/starter.js)
 - [answer.html](/Users/lijiaqing/home/wwwroot/front-end-example/04-dom-events-async/01-query-selectors/answer.html)
 - [answer.js](/Users/lijiaqing/home/wwwroot/front-end-example/04-dom-events-async/01-query-selectors/answer.js)
--- a/04-dom-events-async/01-query-selectors/answer.html
+++ b/04-dom-events-async/01-query-selectors/answer.html
@@ -0,0 +1,52 @@
 <!DOCTYPE html>
 <html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>获取元素</title>
    <style>
      body {
        margin: 0;
        padding: 32px;
        font-family: "PingFang SC", "Microsoft YaHei", sans-serif;
        background: #f6f8fb;
      }
      .panel {
        max-width: 760px;
        margin: 0 auto;
        padding: 24px;
        border-radius: 20px;
        background: #ffffff;
        border: 1px solid #dbe3f0;
      }
      .cards {
        display: grid;
        gap: 12px;
        margin-top: 18px;
      }
      .card {
        padding: 16px;
        border-radius: 14px;
        background: #f8fbff;
        border: 1px solid #dce8f8;
      }
    </style>
  </head>
  <body>
    <section class="panel">
      <h1 id="page-title">DOM 获取元素练习</h1>
      <button class="start-btn" type="button">开始学习</button>
      <div class="cards">
        <article class="card">获取标题</article>
        <article class="card">获取按钮</article>
        <article class="card">获取一组卡片</article>
      </div>
    </section>
    <script src="./answer.js"></script>
  </body>
 </html>
--- a/04-dom-events-async/01-query-selectors/answer.js
+++ b/04-dom-events-async/01-query-selectors/answer.js
@@ -0,0 +1,7 @@
 const title = document.getElementById("page-title");
 const button = document.querySelector(".start-btn");
 const cards = document.querySelectorAll(".card");
 console.log("标题：", title.textContent);
 console.log("按钮：", button.textContent);
 console.log("卡片数量：", cards.length);
--- a/04-dom-events-async/01-query-selectors/starter.html
+++ b/04-dom-events-async/01-query-selectors/starter.html
@@ -0,0 +1,59 @@
 <!DOCTYPE html>
 <html lang="zh-CN">
 <head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>获取元素</title>
  <style>
    body {
      margin: 0;
      padding: 32px;
      font-family: "PingFang SC", "Microsoft YaHei", sans-serif;
      background: #f6f8fb;
    }
    .panel {
      max-width: 760px;
      margin: 0 auto;
      padding: 24px;
      border-radius: 20px;
      background: #ffffff;
      border: 1px solid #dbe3f0;
    }
    .cards {
      display: grid;
      gap: 12px;
      margin-top: 18px;
    }
    .card {
      padding: 16px;
      border-radius: 14px;
      background: #f8fbff;
      border: 1px solid #dce8f8;
    }
  </style>
 </head>
 <body>
  <section class="panel">
    <h1 id="page-title">
      <p>111</p> 获取元素练习
    </h1>
    <button class="start-btn" type="button">开始学习</button>
    <div class="cards">
      <article class="card">获取标题</article>
      <article class="card">获取按钮</article>
      <article class="card">获取一组卡片</article>
    </div>
  </section>
  <script src="./starter.js"></script>
 </body>
 </html>
--- a/04-dom-events-async/01-query-selectors/starter.js
+++ b/04-dom-events-async/01-query-selectors/starter.js
@@ -0,0 +1,13 @@
 // 任务：
 // 1. 用 getElementById 获取标题
 // 2. 用 querySelector 获取按钮
 // 3. 用 querySelectorAll 获取全部卡片
 // 4. 在控制台输出标题文字、按钮文字和卡片数量
 const a = document.getElementById("page-title")
 console.log(a.textContent);
 const b = document.querySelector(".start-btn")
 console.log(b.textContent);
 const c = document.querySelectorAll(".card")
 console.log(c.length);
--- a/04-dom-events-async/02-text-class-style/README.md
+++ b/04-dom-events-async/02-text-class-style/README.md
@@ -0,0 +1,25 @@
 # 练习 2：修改文本、类名和样式
 ## 目标
 学会改元素内容、切换类名和设置简单样式。
 ## 你要练什么
 - `textContent`
 - `classList.add`
 - `classList.remove`
 - `style`
 ## 任务
 - 把标题改成“今天已完成 DOM 练习”
 - 给状态标签加上完成样式
 - 修改说明文字颜色
 ## 文件
 - [starter.html](/Users/lijiaqing/home/wwwroot/front-end-example/04-dom-events-async/02-text-class-style/starter.html)
 - [starter.js](/Users/lijiaqing/home/wwwroot/front-end-example/04-dom-events-async/02-text-class-style/starter.js)
 - [answer.html](/Users/lijiaqing/home/wwwroot/front-end-example/04-dom-events-async/02-text-class-style/answer.html)
 - [answer.js](/Users/lijiaqing/home/wwwroot/front-end-example/04-dom-events-async/02-text-class-style/answer.js)
--- a/04-dom-events-async/02-text-class-style/answer.html
+++ b/04-dom-events-async/02-text-class-style/answer.html
@@ -0,0 +1,47 @@
 <!DOCTYPE html>
 <html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>修改文本、类名和样式</title>
    <style>
      body {
        margin: 0;
        padding: 32px;
        font-family: "PingFang SC", "Microsoft YaHei", sans-serif;
        background: #f3f6fb;
      }
      .card {
        max-width: 720px;
        margin: 0 auto;
        padding: 24px;
        border-radius: 18px;
        background: #ffffff;
        border: 1px solid #d9e3f2;
      }
      .badge {
        display: inline-block;
        padding: 6px 12px;
        border-radius: 999px;
        background: #eef2f7;
        color: #4b5563;
      }
      .badge.done {
        background: #dcfce7;
        color: #166534;
      }
    </style>
  </head>
  <body>
    <section class="card">
      <h1 id="title">今天的学习状态</h1>
      <p id="description">当前还没有更新进度。</p>
      <span id="badge" class="badge">进行中</span>
    </section>
    <script src="./answer.js"></script>
  </body>
 </html>
--- a/04-dom-events-async/02-text-class-style/answer.js
+++ b/04-dom-events-async/02-text-class-style/answer.js
@@ -0,0 +1,9 @@
 const title = document.getElementById("title");
 const description = document.getElementById("description");
 const badge = document.getElementById("badge");
 title.textContent = "今天已完成 DOM 练习";
 description.textContent = "已经练习了元素选择、文本修改和样式切换。";
 description.style.color = "#2563eb";
 badge.textContent = "已完成";
 badge.classList.add("done");
--- a/04-dom-events-async/02-text-class-style/starter.html
+++ b/04-dom-events-async/02-text-class-style/starter.html
@@ -0,0 +1,47 @@
 <!DOCTYPE html>
 <html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>修改文本、类名和样式</title>
    <style>
      body {
        margin: 0;
        padding: 32px;
        font-family: "PingFang SC", "Microsoft YaHei", sans-serif;
        background: #f3f6fb;
      }
      .card {
        max-width: 720px;
        margin: 0 auto;
        padding: 24px;
        border-radius: 18px;
        background: #ffffff;
        border: 1px solid #d9e3f2;
      }
      .badge {
        display: inline-block;
        padding: 6px 12px;
        border-radius: 999px;
        background: #eef2f7;
        color: #4b5563;
      }
      .badge.done {
        background: #dcfce7;
        color: #166534;
      }
    </style>
  </head>
  <body>
    <section class="card">
      <h1 id="title">今天的学习状态</h1>
      <p id="description">当前还没有更新进度。</p>
      <span id="badge" class="badge">进行中</span>
    </section>
    <script src="./starter.js"></script>
  </body>
 </html>
--- a/04-dom-events-async/02-text-class-style/starter.js
+++ b/04-dom-events-async/02-text-class-style/starter.js
@@ -0,0 +1,11 @@
 // 任务：
 // 1. 选中标题、描述、状态标签
 // 2. 修改标题文字
 // 3. 给标签加上 done 类名
 // 4. 修改描述文字颜色
 const a = document.getElementById("title")
 const b = document.getElementById("description")
 const c = document.getElementById("badge")
 a.textContent = "学习状态非常好"
 a.classList.add("badge.done")
 b.style.color = "red"
--- a/04-dom-events-async/03-create-and-remove/README.md
+++ b/04-dom-events-async/03-create-and-remove/README.md
@@ -0,0 +1,24 @@
 # 练习 3：创建和删除节点
 ## 目标
 学会动态新增和删除页面节点。
 ## 你要练什么
 - `createElement`
 - `appendChild`
 - `remove`
 - 事件绑定
 ## 任务
 - 点击“新增任务”时往列表里加一个新项
 - 点击“删除最后一项”时删除最后一个列表项
 ## 文件
 - [starter.html](/Users/lijiaqing/home/wwwroot/front-end-example/04-dom-events-async/03-create-and-remove/starter.html)
 - [starter.js](/Users/lijiaqing/home/wwwroot/front-end-example/04-dom-events-async/03-create-and-remove/starter.js)
 - [answer.html](/Users/lijiaqing/home/wwwroot/front-end-example/04-dom-events-async/03-create-and-remove/answer.html)
 - [answer.js](/Users/lijiaqing/home/wwwroot/front-end-example/04-dom-events-async/03-create-and-remove/answer.js)
--- a/04-dom-events-async/03-create-and-remove/answer.html
+++ b/04-dom-events-async/03-create-and-remove/answer.html
@@ -0,0 +1,47 @@
 <!DOCTYPE html>
 <html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>创建和删除节点</title>
    <style>
      body {
        margin: 0;
        padding: 32px;
        font-family: "PingFang SC", "Microsoft YaHei", sans-serif;
        background: #f5f7fb;
      }
      .panel {
        max-width: 720px;
        margin: 0 auto;
        padding: 24px;
        border-radius: 18px;
        background: #ffffff;
        border: 1px solid #dce4ef;
      }
      ul {
        padding-left: 20px;
      }
      button {
        margin-right: 10px;
      }
    </style>
  </head>
  <body>
    <section class="panel">
      <h1>任务列表</h1>
      <button id="add-btn" type="button">新增任务</button>
      <button id="remove-btn" type="button">删除最后一项</button>
      <ul id="task-list">
        <li>学习 querySelector</li>
        <li>学习 classList</li>
      </ul>
    </section>
    <script src="./answer.js"></script>
  </body>
 </html>
--- a/04-dom-events-async/03-create-and-remove/answer.js
+++ b/04-dom-events-async/03-create-and-remove/answer.js
@@ -0,0 +1,20 @@
 const addButton = document.getElementById("add-btn");
 const removeButton = document.getElementById("remove-btn");
 const taskList = document.getElementById("task-list");
 let taskIndex = 3;
 addButton.addEventListener("click", function () {
  const item = document.createElement("li");
  item.textContent = `新任务 ${taskIndex}`;
  taskList.appendChild(item);
  taskIndex += 1;
 });
 removeButton.addEventListener("click", function () {
  const lastItem = taskList.lastElementChild;
  if (lastItem) {
    lastItem.remove();
  }
 });
--- a/04-dom-events-async/03-create-and-remove/starter.html
+++ b/04-dom-events-async/03-create-and-remove/starter.html
@@ -0,0 +1,47 @@
 <!DOCTYPE html>
 <html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>创建和删除节点</title>
    <style>
      body {
        margin: 0;
        padding: 32px;
        font-family: "PingFang SC", "Microsoft YaHei", sans-serif;
        background: #f5f7fb;
      }
      .panel {
        max-width: 720px;
        margin: 0 auto;
        padding: 24px;
        border-radius: 18px;
        background: #ffffff;
        border: 1px solid #dce4ef;
      }
      ul {
        padding-left: 20px;
      }
      button {
        margin-right: 10px;
      }
    </style>
  </head>
  <body>
    <section class="panel">
      <h1>任务列表</h1>
      <button id="add-btn" type="button">新增任务</button>
      <button id="remove-btn" type="button">删除最后一项</button>
      <ul id="task-list">
        <li>学习 querySelector</li>
        <li>学习 classList</li>
      </ul>
    </section>
    <script src="./starter.js"></script>
  </body>
 </html>
--- a/04-dom-events-async/03-create-and-remove/starter.js
+++ b/04-dom-events-async/03-create-and-remove/starter.js
@@ -0,0 +1,22 @@
 // 任务：
 // 1. 获取新增按钮、删除按钮和列表
 // 2. 点击新增按钮时创建一个新的 li 并追加到列表
 // 3. 点击删除按钮时删除最后一个 li
 const add = document.getElementById("add-btn")
 const remove = document.getElementById("remove-btn")
 const list = document.getElementById("task-list")
 add.onclick = function () {
  const a = document.createElement("li")
  a.textContent = "巧克力"
  list.appendChild(a)
 }
 remove.onclick = function () {
  const c = list.lastElementChild
  if (c) {
    c.remove()
  }
 }
--- a/04-dom-events-async/04-click-counter/README.md
+++ b/04-dom-events-async/04-click-counter/README.md
@@ -0,0 +1,25 @@
 # 练习 4：点击计数器
 ## 目标
 学会给按钮绑定点击事件，并更新页面数据。
 ## 你要练什么
 - `addEventListener`
 - 点击事件
 - 数字状态更新
 - DOM 渲染
 ## 任务
 - 点击加一按钮时计数加 1
 - 点击减一按钮时计数减 1
 - 点击重置按钮时恢复为 0
 ## 文件
 - [starter.html](/Users/lijiaqing/home/wwwroot/front-end-example/04-dom-events-async/04-click-counter/starter.html)
 - [starter.js](/Users/lijiaqing/home/wwwroot/front-end-example/04-dom-events-async/04-click-counter/starter.js)
 - [answer.html](/Users/lijiaqing/home/wwwroot/front-end-example/04-dom-events-async/04-click-counter/answer.html)
 - [answer.js](/Users/lijiaqing/home/wwwroot/front-end-example/04-dom-events-async/04-click-counter/answer.js)
--- a/04-dom-events-async/04-click-counter/answer.html
+++ b/04-dom-events-async/04-click-counter/answer.html
@@ -0,0 +1,51 @@
 <!DOCTYPE html>
 <html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>点击计数器</title>
    <style>
      body {
        margin: 0;
        min-height: 100vh;
        display: grid;
        place-items: center;
        font-family: "PingFang SC", "Microsoft YaHei", sans-serif;
        background: #f4f7fb;
      }
      .counter {
        width: 320px;
        padding: 24px;
        text-align: center;
        border-radius: 20px;
        background: #ffffff;
        border: 1px solid #dbe3ef;
      }
      #value {
        font-size: 48px;
        font-weight: 800;
      }
      .actions {
        display: flex;
        justify-content: center;
        gap: 10px;
      }
    </style>
  </head>
  <body>
    <section class="counter">
      <h1>点击计数器</h1>
      <p id="value">0</p>
      <div class="actions">
        <button id="decrease-btn" type="button">-1</button>
        <button id="increase-btn" type="button">+1</button>
        <button id="reset-btn" type="button">重置</button>
      </div>
    </section>
    <script src="./answer.js"></script>
  </body>
 </html>
--- a/04-dom-events-async/04-click-counter/answer.js
+++ b/04-dom-events-async/04-click-counter/answer.js
@@ -0,0 +1,25 @@
 let count = 0;
 const value = document.getElementById("value");
 const decreaseButton = document.getElementById("decrease-btn");
 const increaseButton = document.getElementById("increase-btn");
 const resetButton = document.getElementById("reset-btn");
 function render() {
  value.textContent = count;
 }
 decreaseButton.addEventListener("click", function () {
  count -= 1;
  render();
 });
 increaseButton.addEventListener("click", function () {
  count += 1;
  render();
 });
 resetButton.addEventListener("click", function () {
  count = 0;
  render();
 });
--- a/04-dom-events-async/04-click-counter/starter.html
+++ b/04-dom-events-async/04-click-counter/starter.html
@@ -0,0 +1,51 @@
 <!DOCTYPE html>
 <html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>点击计数器</title>
    <style>
      body {
        margin: 0;
        min-height: 100vh;
        display: grid;
        place-items: center;
        font-family: "PingFang SC", "Microsoft YaHei", sans-serif;
        background: #f4f7fb;
      }
      .counter {
        width: 320px;
        padding: 24px;
        text-align: center;
        border-radius: 20px;
        background: #ffffff;
        border: 1px solid #dbe3ef;
      }
      #value {
        font-size: 48px;
        font-weight: 800;
      }
      .actions {
        display: flex;
        justify-content: center;
        gap: 10px;
      }
    </style>
  </head>
  <body>
    <section class="counter">
      <h1>点击计数器</h1>
      <p id="value">0</p>
      <div class="actions">
        <button id="decrease-btn" type="button">-1</button>
        <button id="increase-btn" type="button">+1</button>
        <button id="reset-btn" type="button">重置</button>
      </div>
    </section>
    <script src="./starter.js"></script>
  </body>
 </html>
--- a/04-dom-events-async/04-click-counter/starter.js
+++ b/04-dom-events-async/04-click-counter/starter.js
@@ -0,0 +1,29 @@
 let count = 0;
 // 任务：
 // 1. 获取数字元素和 3 个按钮
 // 2. 点击按钮时更新 count
 // 3. 每次修改后，把最新 count 渲染到页面
 const num = document.getElementById("value")
 const del = document.getElementById("decrease-btn")
 const add = document.getElementById("increase-btn")
 const reset = document.getElementById("reset-btn")
 function ren() {
  num.textContent = count
 }
 add.addEventListener("click", function () {
  count++
  ren()
 })
 del.addEventListener("click", function () {
  count--
  ren()
 })
 reset.addEventListener("click", function () {
  count = 0
  ren()
 })
--- a/04-dom-events-async/05-form-submit-and-prevent-default/README.md
+++ b/04-dom-events-async/05-form-submit-and-prevent-default/README.md
@@ -0,0 +1,26 @@
 # 练习 5：表单提交和 preventDefault
 ## 目标
 学会拦截表单默认提交，并把输入内容渲染到页面。
 ## 你要练什么
 - `submit` 事件
 - `preventDefault()`
 - 表单值读取
 - 动态追加列表项
 ## 任务
 - 提交表单时阻止页面刷新
 - 读取输入框内容
 - 把内容加入到待办列表
 - 提交后清空输入框
 ## 文件
 - [starter.html](/Users/lijiaqing/home/wwwroot/front-end-example/04-dom-events-async/05-form-submit-and-prevent-default/starter.html)
 - [starter.js](/Users/lijiaqing/home/wwwroot/front-end-example/04-dom-events-async/05-form-submit-and-prevent-default/starter.js)
 - [answer.html](/Users/lijiaqing/home/wwwroot/front-end-example/04-dom-events-async/05-form-submit-and-prevent-default/answer.html)
 - [answer.js](/Users/lijiaqing/home/wwwroot/front-end-example/04-dom-events-async/05-form-submit-and-prevent-default/answer.js)
--- a/04-dom-events-async/05-form-submit-and-prevent-default/answer.html
+++ b/04-dom-events-async/05-form-submit-and-prevent-default/answer.html
@@ -0,0 +1,51 @@
 <!DOCTYPE html>
 <html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>表单提交和 preventDefault</title>
    <style>
      body {
        margin: 0;
        padding: 32px;
        font-family: "PingFang SC", "Microsoft YaHei", sans-serif;
        background: #f5f7fb;
      }
      .panel {
        max-width: 720px;
        margin: 0 auto;
        padding: 24px;
        border-radius: 18px;
        background: #ffffff;
        border: 1px solid #dce4ef;
      }
      form {
        display: flex;
        gap: 10px;
      }
      input {
        flex: 1;
        padding: 10px 12px;
      }
    </style>
  </head>
  <body>
    <section class="panel">
      <h1>学习待办</h1>
      <form id="todo-form">
        <input id="todo-input" type="text" placeholder="输入今天要学的内容" />
        <button type="submit">添加</button>
      </form>
      <ul id="todo-list">
        <li>完成 DOM 选择练习</li>
      </ul>
    </section>
    <script src="./answer.js"></script>
  </body>
 </html>
--- a/04-dom-events-async/05-form-submit-and-prevent-default/answer.js
+++ b/04-dom-events-async/05-form-submit-and-prevent-default/answer.js
@@ -0,0 +1,18 @@
 const form = document.getElementById("todo-form");
 const input = document.getElementById("todo-input");
 const list = document.getElementById("todo-list");
 form.addEventListener("submit", function (event) {
  event.preventDefault();
  const value = input.value.trim();
  if (!value) {
    return;
  }
  const item = document.createElement("li");
  item.textContent = value;
  list.appendChild(item);
  input.value = "";
 });
--- a/04-dom-events-async/05-form-submit-and-prevent-default/starter.html
+++ b/04-dom-events-async/05-form-submit-and-prevent-default/starter.html
@@ -0,0 +1,51 @@
 <!DOCTYPE html>
 <html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>表单提交和 preventDefault</title>
    <style>
      body {
        margin: 0;
        padding: 32px;
        font-family: "PingFang SC", "Microsoft YaHei", sans-serif;
        background: #f5f7fb;
      }
      .panel {
        max-width: 720px;
        margin: 0 auto;
        padding: 24px;
        border-radius: 18px;
        background: #ffffff;
        border: 1px solid #dce4ef;
      }
      form {
        display: flex;
        gap: 10px;
      }
      input {
        flex: 1;
        padding: 10px 12px;
      }
    </style>
  </head>
  <body>
    <section class="panel">
      <h1>学习待办</h1>
      <form id="todo-form">
        <input id="todo-input" type="text" placeholder="输入今天要学的内容" />
        <button type="submit">添加</button>
      </form>
      <ul id="todo-list">
        <li>完成 DOM 选择练习</li>
      </ul>
    </section>
    <script src="./starter.js"></script>
  </body>
 </html>
--- a/04-dom-events-async/05-form-submit-and-prevent-default/starter.js
+++ b/04-dom-events-async/05-form-submit-and-prevent-default/starter.js
@@ -0,0 +1,20 @@
 // 任务：
 // 1. 获取表单、输入框和列表
 // 2. 监听 submit 事件
 // 3. 用 preventDefault() 阻止默认提交
 // 4. 读取输入框内容，创建新 li，追加到列表
 // 5. 清空输入框
 const form = document.getElementById("todo-form")
 const input = document.getElementById("todo-input")
 const list = document.getElementById("todo-list")
 form.addEventListener("submit", function (e) {
  e.preventDefault()
  const text = input.value.trim()
  if (text) {
    const li = document.createElement("li")
    li.textContent = text
    list.appendChild(li)
    input.value = ""
  }
 })
--- a/04-dom-events-async/06-bubbling-and-delegation/README.md
+++ b/04-dom-events-async/06-bubbling-and-delegation/README.md
@@ -0,0 +1,25 @@
 # 练习 6：冒泡、委托和 stopPropagation
 ## 目标
 理解事件会冒泡，并学会在列表里使用事件委托。
 ## 你要练什么
 - 事件冒泡
 - `event.target`
 - 事件委托
 - `stopPropagation()`
 ## 任务
 - 点击外层面板时输出一条日志
 - 点击列表项时，通过事件委托切换激活状态
 - 点击列表项里的删除按钮时，阻止冒泡并删除当前项
 ## 文件
 - [starter.html](/Users/lijiaqing/home/wwwroot/front-end-example/04-dom-events-async/06-bubbling-and-delegation/starter.html)
 - [starter.js](/Users/lijiaqing/home/wwwroot/front-end-example/04-dom-events-async/06-bubbling-and-delegation/starter.js)
 - [answer.html](/Users/lijiaqing/home/wwwroot/front-end-example/04-dom-events-async/06-bubbling-and-delegation/answer.html)
 - [answer.js](/Users/lijiaqing/home/wwwroot/front-end-example/04-dom-events-async/06-bubbling-and-delegation/answer.js)
--- a/04-dom-events-async/06-bubbling-and-delegation/answer.html
+++ b/04-dom-events-async/06-bubbling-and-delegation/answer.html
@@ -0,0 +1,58 @@
 <!DOCTYPE html>
 <html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>冒泡、委托和 stopPropagation</title>
    <style>
      body {
        margin: 0;
        padding: 32px;
        font-family: "PingFang SC", "Microsoft YaHei", sans-serif;
        background: #f5f7fb;
      }
      .panel {
        max-width: 760px;
        margin: 0 auto;
        padding: 24px;
        border-radius: 20px;
        background: #ffffff;
        border: 1px solid #dbe2ee;
      }
      .lesson-item {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 12px 14px;
        border: 1px solid #dbe2ee;
        border-radius: 12px;
        margin-top: 10px;
      }
      .lesson-item.active {
        background: #dbeafe;
      }
    </style>
  </head>
  <body>
    <section id="panel" class="panel">
      <h1>事件委托练习</h1>
      <p>点击列表项可以切换高亮，点击删除按钮可以移除当前项。</p>
      <ul id="lesson-list">
        <li class="lesson-item">
          <span>事件冒泡</span>
          <button class="remove-btn" type="button">删除</button>
        </li>
        <li class="lesson-item">
          <span>事件委托</span>
          <button class="remove-btn" type="button">删除</button>
        </li>
      </ul>
    </section>
    <script src="./answer.js"></script>
  </body>
 </html>
--- a/04-dom-events-async/06-bubbling-and-delegation/answer.js
+++ b/04-dom-events-async/06-bubbling-and-delegation/answer.js
@@ -0,0 +1,27 @@
 const panel = document.getElementById("panel");
 const lessonList = document.getElementById("lesson-list");
 panel.addEventListener("click", function () {
  console.log("点击到了外层面板");
 });
 lessonList.addEventListener("click", function (event) {
  const removeButton = event.target.closest(".remove-btn");
  if (removeButton) {
    event.stopPropagation();
    const currentItem = removeButton.closest(".lesson-item");
    if (currentItem) {
      currentItem.remove();
    }
    return;
  }
  const currentItem = event.target.closest(".lesson-item");
  if (currentItem) {
    currentItem.classList.toggle("active");
  }
 });
--- a/04-dom-events-async/06-bubbling-and-delegation/starter.html
+++ b/04-dom-events-async/06-bubbling-and-delegation/starter.html
@@ -0,0 +1,58 @@
 <!DOCTYPE html>
 <html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>冒泡、委托和 stopPropagation</title>
    <style>
      body {
        margin: 0;
        padding: 32px;
        font-family: "PingFang SC", "Microsoft YaHei", sans-serif;
        background: #f5f7fb;
      }
      .panel {
        max-width: 760px;
        margin: 0 auto;
        padding: 24px;
        border-radius: 20px;
        background: #ffffff;
        border: 1px solid #dbe2ee;
      }
      .lesson-item {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 12px 14px;
        border: 1px solid #dbe2ee;
        border-radius: 12px;
        margin-top: 10px;
      }
      .lesson-item.active {
        background: #dbeafe;
      }
    </style>
  </head>
  <body>
    <section id="panel" class="panel">
      <h1>事件委托练习</h1>
      <p>点击列表项可以切换高亮，点击删除按钮可以移除当前项。</p>
      <ul id="lesson-list">
        <li class="lesson-item">
          <span>事件冒泡</span>
          <button class="remove-btn" type="button">删除</button>
        </li>
        <li class="lesson-item">
          <span>事件委托</span>
          <button class="remove-btn" type="button">删除</button>
        </li>
      </ul>
    </section>
    <script src="./starter.js"></script>
  </body>
 </html>
--- a/04-dom-events-async/06-bubbling-and-delegation/starter.js
+++ b/04-dom-events-async/06-bubbling-and-delegation/starter.js
@@ -0,0 +1,30 @@
 // 任务：
 // 1. 给 panel 绑定点击事件，输出一条日志
 // 2. 给 lesson-list 绑定点击事件，使用事件委托
 // 3. 点击 li 时切换 active 类名
 // 4. 点击删除按钮时，阻止冒泡并删除当前 li
 const panel = document.getElementById("panel")
 panel.addEventListener("click", function () {
  console.log("点击外部")
 })
 const list = document.getElementById("lesson-list")
 list.addEventListener("click", function (event) {
  const remove = event.target.closest(".remove-btn")
  if (remove) {
    const li = remove.closest(".lesson-item")
    if (li) {
      li.remove()
      event.stopPropagation()
    }
    return
  }
  const tog = event.target.closest(".lesson-item")
  if (tog) {
    tog.classList.add("active")
  }
 })
--- a/04-dom-events-async/07-timers-and-async-order/README.md
+++ b/04-dom-events-async/07-timers-and-async-order/README.md
@@ -0,0 +1,25 @@
 # 练习 7：setTimeout 和异步顺序
 ## 目标
 理解同步代码和异步回调的执行先后顺序。
 ## 你要练什么
 - `setTimeout`
 - 同步顺序
 - 异步回调
 - DOM 日志输出
 ## 任务
 - 点击按钮后先输出“开始执行”
 - 再立刻输出“同步代码结束”
 - 然后延迟输出“异步回调完成”
 ## 文件
 - [starter.html](/Users/lijiaqing/home/wwwroot/front-end-example/04-dom-events-async/07-timers-and-async-order/starter.html)
 - [starter.js](/Users/lijiaqing/home/wwwroot/front-end-example/04-dom-events-async/07-timers-and-async-order/starter.js)
 - [answer.html](/Users/lijiaqing/home/wwwroot/front-end-example/04-dom-events-async/07-timers-and-async-order/answer.html)
 - [answer.js](/Users/lijiaqing/home/wwwroot/front-end-example/04-dom-events-async/07-timers-and-async-order/answer.js)
--- a/04-dom-events-async/07-timers-and-async-order/answer.html
+++ b/04-dom-events-async/07-timers-and-async-order/answer.html
@@ -0,0 +1,38 @@
 <!DOCTYPE html>
 <html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>setTimeout 和异步顺序</title>
    <style>
      body {
        margin: 0;
        padding: 32px;
        font-family: "PingFang SC", "Microsoft YaHei", sans-serif;
        background: #f6f8fb;
      }
      .panel {
        max-width: 720px;
        margin: 0 auto;
        padding: 24px;
        border-radius: 18px;
        background: #ffffff;
        border: 1px solid #dce4ef;
      }
      #log-list li {
        margin-top: 8px;
      }
    </style>
  </head>
  <body>
    <section class="panel">
      <h1>异步顺序练习</h1>
      <button id="run-btn" type="button">开始执行</button>
      <ul id="log-list"></ul>
    </section>
    <script src="./answer.js"></script>
  </body>
 </html>
--- a/04-dom-events-async/07-timers-and-async-order/answer.js
+++ b/04-dom-events-async/07-timers-and-async-order/answer.js
@@ -0,0 +1,20 @@
 const runButton = document.getElementById("run-btn");
 const logList = document.getElementById("log-list");
 function appendLog(text) {
  const item = document.createElement("li");
  item.textContent = text;
  logList.appendChild(item);
 }
 runButton.addEventListener("click", function () {
  logList.innerHTML = "";
  appendLog("开始执行");
  setTimeout(function () {
    appendLog("异步回调完成");
  }, 600);
  appendLog("同步代码结束");
 });
--- a/04-dom-events-async/07-timers-and-async-order/starter.html
+++ b/04-dom-events-async/07-timers-and-async-order/starter.html
@@ -0,0 +1,38 @@
 <!DOCTYPE html>
 <html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>setTimeout 和异步顺序</title>
    <style>
      body {
        margin: 0;
        padding: 32px;
        font-family: "PingFang SC", "Microsoft YaHei", sans-serif;
        background: #f6f8fb;
      }
      .panel {
        max-width: 720px;
        margin: 0 auto;
        padding: 24px;
        border-radius: 18px;
        background: #ffffff;
        border: 1px solid #dce4ef;
      }
      #log-list li {
        margin-top: 8px;
      }
    </style>
  </head>
  <body>
    <section class="panel">
      <h1>异步顺序练习</h1>
      <button id="run-btn" type="button">开始执行</button>
      <ul id="log-list"></ul>
    </section>
    <script src="./starter.js"></script>
  </body>
 </html>
--- a/04-dom-events-async/07-timers-and-async-order/starter.js
+++ b/04-dom-events-async/07-timers-and-async-order/starter.js
@@ -0,0 +1,26 @@
 // 任务：
 // 1. 获取按钮和日志列表
 // 2. 点击按钮后清空旧日志
 // 3. 先追加“开始执行”
 // 4. 用 setTimeout 延迟追加“异步回调完成”
 // 5. 再立刻追加“同步代码结束”
 const btn = document.getElementById("run-btn")
 const list = document.getElementById("log-list")
 function add1(message) {
  const li = document.createElement("li")
  li.textContent = message
  list.appendChild(li)
 }
 btn.addEventListener("click", function () {
  list.textContent = ""
  add1("开始执行")
  setTimeout(function () {
    add1("异步回调完成")
  }, 2000)
  add1("同步代码结束")
 })
--- a/04-dom-events-async/08-promise-and-render/README.md
+++ b/04-dom-events-async/08-promise-and-render/README.md
@@ -0,0 +1,26 @@
 # 练习 8：Promise 和渲染
 ## 目标
 学会在 Promise 完成后把结果渲染到页面。
 ## 你要练什么
 - Promise
 - `.then()`
 - `catch()`
 - loading 状态
 ## 任务
 - 点击按钮后显示“加载中”
 - 等待 Promise 返回数据
 - 把课程名称渲染到列表
 - 如果失败，显示错误信息
 ## 文件
 - [starter.html](/Users/lijiaqing/home/wwwroot/front-end-example/04-dom-events-async/08-promise-and-render/starter.html)
 - [starter.js](/Users/lijiaqing/home/wwwroot/front-end-example/04-dom-events-async/08-promise-and-render/starter.js)
 - [answer.html](/Users/lijiaqing/home/wwwroot/front-end-example/04-dom-events-async/08-promise-and-render/answer.html)
 - [answer.js](/Users/lijiaqing/home/wwwroot/front-end-example/04-dom-events-async/08-promise-and-render/answer.js)
--- a/04-dom-events-async/08-promise-and-render/answer.html
+++ b/04-dom-events-async/08-promise-and-render/answer.html
@@ -0,0 +1,35 @@
 <!DOCTYPE html>
 <html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Promise 和渲染</title>
    <style>
      body {
        margin: 0;
        padding: 32px;
        font-family: "PingFang SC", "Microsoft YaHei", sans-serif;
        background: #f4f7fb;
      }
      .panel {
        max-width: 760px;
        margin: 0 auto;
        padding: 24px;
        border-radius: 18px;
        background: #ffffff;
        border: 1px solid #dce3ef;
      }
    </style>
  </head>
  <body>
    <section class="panel">
      <h1>Promise 数据渲染</h1>
      <button id="load-btn" type="button">加载课程</button>
      <p id="status-text">等待加载</p>
      <ul id="course-list"></ul>
    </section>
    <script src="./answer.js"></script>
  </body>
 </html>
--- a/04-dom-events-async/08-promise-and-render/answer.js
+++ b/04-dom-events-async/08-promise-and-render/answer.js
@@ -0,0 +1,30 @@
 function fakeFetchCourses() {
  return new Promise(function (resolve) {
    setTimeout(function () {
      resolve(["DOM 获取元素", "事件监听", "异步基础"]);
    }, 800);
  });
 }
 const loadButton = document.getElementById("load-btn");
 const statusText = document.getElementById("status-text");
 const courseList = document.getElementById("course-list");
 loadButton.addEventListener("click", function () {
  statusText.textContent = "加载中...";
  courseList.innerHTML = "";
  fakeFetchCourses()
    .then(function (courses) {
      courses.forEach(function (course) {
        const item = document.createElement("li");
        item.textContent = course;
        courseList.appendChild(item);
      });
      statusText.textContent = "加载完成";
    })
    .catch(function () {
      statusText.textContent = "加载失败";
    });
 });
--- a/04-dom-events-async/08-promise-and-render/starter.html
+++ b/04-dom-events-async/08-promise-and-render/starter.html
@@ -0,0 +1,35 @@
 <!DOCTYPE html>
 <html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Promise 和渲染</title>
    <style>
      body {
        margin: 0;
        padding: 32px;
        font-family: "PingFang SC", "Microsoft YaHei", sans-serif;
        background: #f4f7fb;
      }
      .panel {
        max-width: 760px;
        margin: 0 auto;
        padding: 24px;
        border-radius: 18px;
        background: #ffffff;
        border: 1px solid #dce3ef;
      }
    </style>
  </head>
  <body>
    <section class="panel">
      <h1>Promise 数据渲染</h1>
      <button id="load-btn" type="button">加载课程</button>
      <p id="status-text">等待加载</p>
      <ul id="course-list"></ul>
    </section>
    <script src="./starter.js"></script>
  </body>
 </html>
--- a/04-dom-events-async/08-promise-and-render/starter.js
+++ b/04-dom-events-async/08-promise-and-render/starter.js
@@ -0,0 +1,34 @@
 function fakeFetchCourses() {
  return new Promise(function (resolve) {
    setTimeout(function () {
      resolve(["DOM 获取元素", "事件监听", "异步基础"]);
    }, 800);
  });
 }
 // 任务：
 // 1. 获取按钮、状态文字、列表
 // 2. 点击按钮后显示“加载中”
 // 3. 调用 fakeFetchCourses()
 // 4. 用 then 渲染课程列表
 // 5. 用 catch 处理错误
 const btn = document.getElementById("load-btn")
 const text = document.getElementById("status-text")
 const list = document.getElementById("course-list")
 btn.addEventListener("click", function () {
  text.textContent = "加载中..."
  fakeFetchCourses()
    .then(function (result) {
      text.textContent = "加载成功"
      const a = result.forEach(item => {
        const li = document.createElement("li")
        li.textContent = item
        list.appendChild(li)
      });
    })
    .catch(function (error) {
      list.textContent = "失败" + error
    })
 })
--- a/04-dom-events-async/09-async-await-panel/README.md
+++ b/04-dom-events-async/09-async-await-panel/README.md
@@ -0,0 +1,26 @@
 # 练习 9：async / await 面板
 ## 目标
 学会用 `async` / `await` 写一个更直观的异步流程。
 ## 你要练什么
 - `async`
 - `await`
 - `try...catch`
 - DOM 更新
 ## 任务
 - 点击按钮后进入加载状态
 - 等待异步函数返回用户信息
 - 把结果渲染到卡片里
 - 如果失败，显示错误信息
 ## 文件
 - [starter.html](/Users/lijiaqing/home/wwwroot/front-end-example/04-dom-events-async/09-async-await-panel/starter.html)
 - [starter.js](/Users/lijiaqing/home/wwwroot/front-end-example/04-dom-events-async/09-async-await-panel/starter.js)
 - [answer.html](/Users/lijiaqing/home/wwwroot/front-end-example/04-dom-events-async/09-async-await-panel/answer.html)
 - [answer.js](/Users/lijiaqing/home/wwwroot/front-end-example/04-dom-events-async/09-async-await-panel/answer.js)
--- a/04-dom-events-async/09-async-await-panel/answer.html
+++ b/04-dom-events-async/09-async-await-panel/answer.html
@@ -0,0 +1,35 @@
 <!DOCTYPE html>
 <html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>async / await 面板</title>
    <style>
      body {
        margin: 0;
        padding: 32px;
        font-family: "PingFang SC", "Microsoft YaHei", sans-serif;
        background: #f6f8fb;
      }
      .panel {
        max-width: 760px;
        margin: 0 auto;
        padding: 24px;
        border-radius: 18px;
        background: #ffffff;
        border: 1px solid #dbe4ef;
      }
    </style>
  </head>
  <body>
    <section class="panel">
      <h1>用户信息面板</h1>
      <button id="load-user-btn" type="button">加载用户信息</button>
      <p id="user-status">等待加载</p>
      <div id="user-card"></div>
    </section>
    <script src="./answer.js"></script>
  </body>
 </html>
--- a/04-dom-events-async/09-async-await-panel/answer.js
+++ b/04-dom-events-async/09-async-await-panel/answer.js
@@ -0,0 +1,35 @@
 function fakeFetchUser() {
  return new Promise(function (resolve) {
    setTimeout(function () {
      resolve({
        name: "林晨",
        role: "前端学习者",
        focus: "DOM + 事件 + 异步",
      });
    }, 900);
  });
 }
 const loadButton = document.getElementById("load-user-btn");
 const statusText = document.getElementById("user-status");
 const userCard = document.getElementById("user-card");
 async function loadUser() {
  statusText.textContent = "加载中...";
  userCard.innerHTML = "";
  try {
    const user = await fakeFetchUser();
    userCard.innerHTML = `
      <p>姓名：${user.name}</p>
      <p>身份：${user.role}</p>
      <p>当前重点：${user.focus}</p>
    `;
    statusText.textContent = "加载完成";
  } catch (error) {
    statusText.textContent = "加载失败";
  }
 }
 loadButton.addEventListener("click", loadUser);
--- a/04-dom-events-async/09-async-await-panel/starter.html
+++ b/04-dom-events-async/09-async-await-panel/starter.html
@@ -0,0 +1,35 @@
 <!DOCTYPE html>
 <html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>async / await 面板</title>
    <style>
      body {
        margin: 0;
        padding: 32px;
        font-family: "PingFang SC", "Microsoft YaHei", sans-serif;
        background: #f6f8fb;
      }
      .panel {
        max-width: 760px;
        margin: 0 auto;
        padding: 24px;
        border-radius: 18px;
        background: #ffffff;
        border: 1px solid #dbe4ef;
      }
    </style>
  </head>
  <body>
    <section class="panel">
      <h1>用户信息面板</h1>
      <button id="load-user-btn" type="button">加载用户信息</button>
      <p id="user-status">等待加载</p>
      <div id="user-card"></div>
    </section>
    <script src="./starter.js"></script>
  </body>
 </html>
--- a/04-dom-events-async/09-async-await-panel/starter.js
+++ b/04-dom-events-async/09-async-await-panel/starter.js
@@ -0,0 +1,39 @@
 function fakeFetchUser() {
  return new Promise(function (resolve) {
    setTimeout(function () {
      resolve({
        name: "林晨",
        role: "前端学习者",
        focus: "DOM + 事件 + 异步",
      });
    }, 900);
  });
 }
 // 任务：
 // 1. 获取按钮、状态文字、信息面板
 // 2. 写一个 async 函数
 // 3. 用 await 等待 fakeFetchUser()
 // 4. 渲染用户信息
 // 5. 用 try...catch 处理异常
 const btn = document.getElementById("load-user-btn")
 const status = document.getElementById("user-status")
 const card = document.getElementById("user-card")
 async function a() {
  status.textContent = "加载中"
  card.innerHTML = ""
  try {
    const a = await fakeFetchUser()
    status.textContent = "加载成功"
    card.innerHTML = `
    <p>姓名：${a.name}</p>
    <p>角色：${a.role}</p>
    <p>任务：${a.focus}</p>
    `
  } catch (error) {
    status.textContent = "加载失败"
  }
 }
 btn.addEventListener("click", a)
--- a/04-dom-events-async/10-final-dashboard/README.md
+++ b/04-dom-events-async/10-final-dashboard/README.md
@@ -0,0 +1,34 @@
 # 练习 10：综合页面
 ## 目标
 把 DOM、事件和异步知识拼起来，做一个可以真实互动的小页面。
 ## 项目名称
 学习面板
 ## 任务
 请完成一个控制台之外可见的页面交互，要求至少包含：
 - 一个课程列表区域
 - 一个表单区域
 - 一个添加课程的交互
 - 一个点击课程切换完成状态的交互
 - 一个异步加载提示或远程数据模拟
 - 清晰的状态文案更新
 ## 建议顺序
 1. 先看 HTML 结构
 2. 先写元素获取和渲染函数
 3. 再写表单提交和点击事件
 4. 最后补异步加载逻辑
 ## 文件
 - [starter.html](/Users/lijiaqing/home/wwwroot/front-end-example/04-dom-events-async/10-final-dashboard/starter.html)
 - [starter.js](/Users/lijiaqing/home/wwwroot/front-end-example/04-dom-events-async/10-final-dashboard/starter.js)
 - [answer.html](/Users/lijiaqing/home/wwwroot/front-end-example/04-dom-events-async/10-final-dashboard/answer.html)
 - [answer.js](/Users/lijiaqing/home/wwwroot/front-end-example/04-dom-events-async/10-final-dashboard/answer.js)
--- a/Show More
+++ b/Show More
Author	SHA1	Message	Date
rou	2a65ba8c6a	vue2	2026-03-26 21:45:32 +08:00
rou	7c0cbe1320	Merge branch 'main' of https://gitea.lililibra.cn/rou/front-end-example	2026-03-25 18:13:41 +08:00
rou	acb1445575	l	2026-03-25 18:13:35 +08:00
charlie	3850ce7399	Merge branch 'main' of https://gitea.lililibra.cn/rou/front-end-example	2026-03-24 23:02:59 +08:00
charlie	d0d8be443b	feat: Add Vue3 exercises and interview plan - Introduced Vue3 exercises covering composable API, reactivity, lifecycle hooks, and built-in components. - Added structured interview plan for frontend candidates focusing on HTML, CSS, JavaScript, TypeScript, and Vue. - Included starter files for each exercise and detailed README documentation for guidance.	2026-03-24 23:02:58 +08:00
rou	d5ff59ac76	update	2026-03-23 16:33:09 +08:00
rou	8b83f63235	Merge branch 'main' of https://gitea.lililibra.cn/rou/front-end-example	2026-03-23 14:56:21 +08:00
rou	1071f4db05	update	2026-03-23 14:56:04 +08:00
charlie	3435848495	feat: add Vue2 exercises for dynamic styles, lifecycle methods, component communication, and course management dashboard - Implement dynamic styles and event handling in Vue2 with a card component. - Create lifecycle methods exercise to simulate async data loading and instance destruction. - Develop a component communication exercise with props, events, and slots. - Build a comprehensive course management dashboard with filtering, statistics, and component interactions.	2026-03-23 10:09:29 +08:00
rou	00d3c9e4c6	Merge branch 'main' of https://gitea.lililibra.cn/rou/front-end-example	2026-03-19 15:19:54 +08:00
rou	3afbee1535	JS1	2026-03-19 15:17:29 +08:00
charlie	7be97e7ea7	Merge branch 'main' of https://gitea.lililibra.cn/rou/front-end-example	2026-03-19 10:06:17 +08:00
charlie	f3bdaa4e88	feat: add TypeScript lessons and learning panel - Introduced a new script to check TypeScript lesson files for errors. - Created a main TypeScript file to render lessons and their details. - Added lesson definitions with starter and answer codes. - Implemented a user interface for navigating and running lessons. - Styled the application with CSS for a better user experience. - Updated README to reflect the new TypeScript section and usage instructions.	2026-03-19 10:06:11 +08:00
rou	81004b437c	Merge branch 'main' of https://gitea.lililibra.cn/rou/front-end-example	2026-03-13 23:56:45 +08:00
rou	295fe875a3	update	2026-03-13 23:55:18 +08:00
charlie	69a4ae3178	Merge branch 'main' of https://gitea.lililibra.cn/rou/front-end-example	2026-03-13 11:09:44 +08:00
charlie	877acb5a8f	feat: Add JavaScript core exercises and solutions - Implemented exercises for array high-order methods, memory and execution, switch statements, and final review. - Added starter and answer files for each exercise to facilitate learning. - Created a runner HTML file to execute JavaScript code and display console outputs. - Updated README files to include exercise objectives, tasks, and usage instructions.	2026-03-13 11:09:19 +08:00