rou/front-end-example
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: add TypeScript lessons and learning panel

Browse Source 
- 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.
This commit is contained in:
charlie
2026-03-19 10:06:11 +08:00
parent 69a4ae3178
commit f3bdaa4e88
146 changed files with 5951 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

24
05-es6-plus/01-template-and-destructuring/README.md Normal file
View File

@@ -0,0 +1,24 @@
# 练习 1：模板字符串和解构
## 目标
学会用模板字符串拼接信息，并用解构快速读取对象和数组数据。
## 你要练什么
- 模板字符串
- 对象解构
- 数组解构
## 任务
- 从 `student` 对象里解构出姓名和阶段
- 从 `scores` 数组里解构出前两个分数
- 用模板字符串把这些信息渲染到页面
## 文件
- [starter.html](/Users/lijiaqing/home/wwwroot/front-end-example/05-es6-plus/01-template-and-destructuring/starter.html)
- [starter.js](/Users/lijiaqing/home/wwwroot/front-end-example/05-es6-plus/01-template-and-destructuring/starter.js)
- [answer.html](/Users/lijiaqing/home/wwwroot/front-end-example/05-es6-plus/01-template-and-destructuring/answer.html)
- [answer.js](/Users/lijiaqing/home/wwwroot/front-end-example/05-es6-plus/01-template-and-destructuring/answer.js)

16
05-es6-plus/01-template-and-destructuring/answer.html Normal file
View File

@@ -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>模板字符串和解构</title>
</head>
<body>
<section>
<h1>ES6+ 练习 1</h1>
<p id="output">等待渲染</p>
</section>
<script src="./answer.js"></script>
</body>
</html>

11
05-es6-plus/01-template-and-destructuring/answer.js Normal file
View File

@@ -0,0 +1,11 @@
const student = {
name: "林晨",
stage: "ES6+",
};
const scores = [88, 92, 95];
const { name, stage } = student;
const [firstScore, secondScore] = scores;
document.getElementById("output").textContent = `${name} 正在学习 ${stage}，前两次练习分数分别是 ${firstScore} 和 ${secondScore}。`;

16
05-es6-plus/01-template-and-destructuring/starter.html Normal file
View File

@@ -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>模板字符串和解构</title>
</head>
<body>
<section>
<h1>ES6+ 练习 1</h1>
<p id="output">等待渲染</p>
</section>
<script src="./starter.js"></script>
</body>
</html>

11
05-es6-plus/01-template-and-destructuring/starter.js Normal file
View File

@@ -0,0 +1,11 @@
const student = {
name: "林晨",
stage: "ES6+",
};
const scores = [88, 92, 95];
// 任务：
// 1. 解构出 name、stage
// 2. 解构出前两个分数
// 3. 用模板字符串把信息写入 #output