From 3afbee1535a135a1e19684134335a244c620dd83 Mon Sep 17 00:00:00 2001
From: rou <rou@>
Date: Thu, 19 Mar 2026 15:17:29 +0800
Subject: [PATCH] JS1

---
 02-css-layout/11-centering-lab/starter.html   | 17 +++++++++++-
 .../01-variables-and-console/starter.js       | 12 +++++++--
 .../02-data-types-and-conversion/starter.js   |  8 ++++++
 .../03-operators-and-conditions/starter.js    | 27 ++++++++++++++++++-
 03-javascript-core/04-loops/starter.js        | 14 ++++++++++
 03-javascript-core/05-functions/starter.js    | 19 +++++++++++++
 03-javascript-core/06-arrays/starter.js       | 10 +++++++
 03-javascript-core/07-objects/starter.js      | 12 +++++++++
 .../08-built-in-methods/starter.js            |  8 ++++++
 .../09-scope-and-closure/starter.js           | 17 ++++++++++++
 .../10-final-mini-app/starter.js              | 21 +++++++++++++++
 .../11-var-and-scope/starter.js               | 13 +++++++--
 03-javascript-core/12-this-keyword/README.md  |  8 ++++++
 03-javascript-core/12-this-keyword/starter.js | 10 +++++++
 14 files changed, 190 insertions(+), 6 deletions(-)
diff --git a/02-css-layout/11-centering-lab/starter.html b/02-css-layout/11-centering-lab/starter.html
index a1e2806..70daca8 100644
--- a/02-css-layout/11-centering-lab/starter.html
+++ b/02-css-layout/11-centering-lab/starter.html
@@ -6,12 +6,27 @@
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
   <title>居中专题</title>
   <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;
@@ -34,7 +49,7 @@
 
 <body>
   <div class="stage">
-    <div class="box">把我放到中间</div>
+    <div class="box">把我放到中间 transform: translate(-50%, -50%); </div>
   </div>
 </body>
 
diff --git a/03-javascript-core/01-variables-and-console/starter.js b/03-javascript-core/01-variables-and-console/starter.js
index c05ba37..5f48d85 100644
--- a/03-javascript-core/01-variables-and-console/starter.js
+++ b/03-javascript-core/01-variables-and-console/starter.js
@@ -1,6 +1,14 @@
-const userName = "";
-let currentStage = "";
+const userName = "小明";
+let currentStage = "学习中";
 let completedExercises = 0;
+completedExercises = 2;
+console.log('学习者：' + userName);
+console.log('学习阶段：' + currentStage);
+console.log('学习次数：' + completedExercises);
+
+
+
+
 
 // 任务：
 // 1. 给上面的变量赋一个合理值
diff --git a/03-javascript-core/02-data-types-and-conversion/starter.js b/03-javascript-core/02-data-types-and-conversion/starter.js
index d5af69d..012f5b0 100644
--- a/03-javascript-core/02-data-types-and-conversion/starter.js
+++ b/03-javascript-core/02-data-types-and-conversion/starter.js
@@ -6,3 +6,11 @@ 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}')
+
+
diff --git a/03-javascript-core/03-operators-and-conditions/starter.js b/03-javascript-core/03-operators-and-conditions/starter.js
index a4ff06d..0fad2b7 100644
--- a/03-javascript-core/03-operators-and-conditions/starter.js
+++ b/03-javascript-core/03-operators-and-conditions/starter.js
@@ -4,6 +4,31 @@ 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}');
+
diff --git a/03-javascript-core/04-loops/starter.js b/03-javascript-core/04-loops/starter.js
index ed6bf23..e2d63cb 100644
--- a/03-javascript-core/04-loops/starter.js
+++ b/03-javascript-core/04-loops/starter.js
@@ -5,3 +5,17 @@
 // 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);
+
diff --git a/03-javascript-core/05-functions/starter.js b/03-javascript-core/05-functions/starter.js
index d4d4448..3058862 100644
--- a/03-javascript-core/05-functions/starter.js
+++ b/03-javascript-core/05-functions/starter.js
@@ -1,11 +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` 函数
+- 根据平均分返回“优秀”“良好”“继续努力”*/
diff --git a/03-javascript-core/06-arrays/starter.js b/03-javascript-core/06-arrays/starter.js
index c068cc3..23201e2 100644
--- a/03-javascript-core/06-arrays/starter.js
+++ b/03-javascript-core/06-arrays/starter.js
@@ -4,3 +4,13 @@ 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]);
+
+}
diff --git a/03-javascript-core/07-objects/starter.js b/03-javascript-core/07-objects/starter.js
index 3a63477..9b2c196 100644
--- a/03-javascript-core/07-objects/starter.js
+++ b/03-javascript-core/07-objects/starter.js
@@ -9,3 +9,15 @@ const course = {
 // 2. 新增 teacher 属性
 // 3. 输出完整对象
 // 4. 输出 title 和 teacher
+/*- 创建一个课程对象
+- 至少包含名称、课时、是否完结
+- 修改其中一个属性
+- 新增一个老师属性
+- 输出完整对象和其中两个单独属性*/
+course.finished = true
+course.teacher = '李老师'
+console.log(course);
+console.log(course.title);
+console.log(course.lessons);
+
+
diff --git a/03-javascript-core/08-built-in-methods/starter.js b/03-javascript-core/08-built-in-methods/starter.js
index 7c63f05..92641b2 100644
--- a/03-javascript-core/08-built-in-methods/starter.js
+++ b/03-javascript-core/08-built-in-methods/starter.js
@@ -6,3 +6,11 @@ const tags = ["变量", "条件", "函数"];
 // 2. 转成大写
 // 3. 判断是否包含 JS
 // 4. 把 tags 用顿号连接成一句话
+/*- 把一段带空格的文本去掉首尾空格
+- 把结果转成大写
+- 判断里面是否包含 `JS`
+- 把一个标签数组拼成一个字符串输出*/
+const rawTrim = rawTitle.trim()
+const rawTo = rawTitle.toUpperCase()
+const result = rawTitle.includes("JS")
+const tagsJoin = rawTitle.join(",")
\ No newline at end of file
diff --git a/03-javascript-core/09-scope-and-closure/starter.js b/03-javascript-core/09-scope-and-closure/starter.js
index 4ff638c..6211833 100644
--- a/03-javascript-core/09-scope-and-closure/starter.js
+++ b/03-javascript-core/09-scope-and-closure/starter.js
@@ -2,10 +2,27 @@ 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`*/
diff --git a/03-javascript-core/10-final-mini-app/starter.js b/03-javascript-core/10-final-mini-app/starter.js
index 2752489..8640c05 100644
--- a/03-javascript-core/10-final-mini-app/starter.js
+++ b/03-javascript-core/10-final-mini-app/starter.js
@@ -7,14 +7,35 @@ 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，再输出“可以进入下一阶段”*/
\ No newline at end of file
diff --git a/03-javascript-core/11-var-and-scope/starter.js b/03-javascript-core/11-var-and-scope/starter.js
index 57332ef..bcfa624 100644
--- a/03-javascript-core/11-var-and-scope/starter.js
+++ b/03-javascript-core/11-var-and-scope/starter.js
@@ -13,15 +13,24 @@ function compareScope() {
 
     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` 不能被重新赋值*/
\ No newline at end of file
diff --git a/03-javascript-core/12-this-keyword/README.md b/03-javascript-core/12-this-keyword/README.md
index 542d6d7..6d20dc1 100644
--- a/03-javascript-core/12-this-keyword/README.md
+++ b/03-javascript-core/12-this-keyword/README.md
@@ -25,3 +25,11 @@
 
 - [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 = () => {
+  
+}
\ No newline at end of file
diff --git a/03-javascript-core/12-this-keyword/starter.js b/03-javascript-core/12-this-keyword/starter.js
index 4faec8d..222943f 100644
--- a/03-javascript-core/12-this-keyword/starter.js
+++ b/03-javascript-core/12-this-keyword/starter.js
@@ -4,15 +4,25 @@ const student = {
   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()()
