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
parent 69a4ae3178
commit f3bdaa4e88
146 changed files with 5951 additions and 9 deletions
--- a/05-es6-plus/08-fetch-and-json/README.md
+++ b/05-es6-plus/08-fetch-and-json/README.md
@@ -0,0 +1,26 @@
+# 练习 8：fetch 和 JSON
+
+## 目标
+
+补齐 `fetch()` 和 `res.json()` 这一层最常见的现代异步写法。
+
+## 你要练什么
+
+- `fetch()`
+- `await`
+- `res.json()`
+- 接口数据渲染
+
+## 任务
+
+- 点击按钮后发起一次 `fetch`
+- 等待返回的响应对象
+- 调用 `res.json()` 解析 JSON
+- 把课程标题和内容渲染到页面
+
+## 文件
+
+- [starter.html](/Users/lijiaqing/home/wwwroot/front-end-example/05-es6-plus/08-fetch-and-json/starter.html)
+- [starter.js](/Users/lijiaqing/home/wwwroot/front-end-example/05-es6-plus/08-fetch-and-json/starter.js)
+- [answer.html](/Users/lijiaqing/home/wwwroot/front-end-example/05-es6-plus/08-fetch-and-json/answer.html)
+- [answer.js](/Users/lijiaqing/home/wwwroot/front-end-example/05-es6-plus/08-fetch-and-json/answer.js)
--- a/05-es6-plus/08-fetch-and-json/answer.html
+++ b/05-es6-plus/08-fetch-and-json/answer.html
@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>fetch 和 JSON</title>
+  </head>
+  <body>
+    <h1>fetch 和 JSON</h1>
+    <button id="load-btn" type="button">加载文章</button>
+    <p id="status">等待加载</p>
+    <pre id="output"></pre>
+
+    <script src="./answer.js"></script>
+  </body>
+</html>
--- a/05-es6-plus/08-fetch-and-json/answer.js
+++ b/05-es6-plus/08-fetch-and-json/answer.js
@@ -0,0 +1,19 @@
+const loadButton = document.getElementById("load-btn");
+const status = document.getElementById("status");
+const output = document.getElementById("output");
+
+async function loadPost() {
+  status.textContent = "加载中...";
+
+  try {
+    const res = await fetch("https://jsonplaceholder.typicode.com/posts/1");
+    const data = await res.json();
+
+    status.textContent = "加载完成";
+    output.textContent = `标题：${data.title}\n\n内容：${data.body}`;
+  } catch (error) {
+    status.textContent = "加载失败";
+  }
+}
+
+loadButton.addEventListener("click", loadPost);
--- a/05-es6-plus/08-fetch-and-json/starter.html
+++ b/05-es6-plus/08-fetch-and-json/starter.html
@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>fetch 和 JSON</title>
+  </head>
+  <body>
+    <h1>fetch 和 JSON</h1>
+    <button id="load-btn" type="button">加载文章</button>
+    <p id="status">等待加载</p>
+    <pre id="output"></pre>
+
+    <script src="./starter.js"></script>
+  </body>
+</html>
--- a/05-es6-plus/08-fetch-and-json/starter.js
+++ b/05-es6-plus/08-fetch-and-json/starter.js
@@ -0,0 +1,11 @@
+const loadButton = document.getElementById("load-btn");
+const status = document.getElementById("status");
+const output = document.getElementById("output");
+
+// 任务：
+// 1. 点击按钮后把状态改成“加载中...”
+// 2. 用 fetch 请求 https://jsonplaceholder.typicode.com/posts/1
+// 3. 用 await 等待响应对象
+// 4. 调用 res.json() 解析数据
+// 5. 把 title 和 body 渲染到页面
+// 6. 失败时显示“加载失败”