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

Compare commits

base: rou:7be97e7ea75f8b2819114b1be4703afe8f03c8e7
Branches Tags
rou:main
...
compare: rou:00d3c9e4c6f7e9bb1eef2a0783baed9159230cbf
Branches Tags
rou:main

2 Commits
7be97e7ea7 ... 00d3c9e4c6

Author SHA1 Message Date
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
14 changed files with 190 additions and 6 deletions
Expand all files Collapse all files

17
02-css-layout/11-centering-lab/starter.html
View File

@@ -6,12 +6,27 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>居中专题</title> <title>居中专题</title>
<style> <style>
html {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
body { body {
background-color: rgb(255, 248, 238); background-color: rgb(255, 248, 238);
margin: 0; margin: 0;
padding: 0;
width: 100%;
height: 100%;
position: fixed;
} }
.stage { .stage {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
background-color: white; background-color: white;
border: 1px solid rgba(255, 156, 7, 0.25); border: 1px solid rgba(255, 156, 7, 0.25);
border-radius: 20px; border-radius: 20px;
@@ -34,7 +49,7 @@
<body> <body>
<div class="stage"> <div class="stage">
<div class="box">把我放到中间</div> <div class="box">把我放到中间 transform: translate(-50%, -50%); </div>
</div> </div>
</body> </body>

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

@@ -1,6 +1,14 @@
const userName = ""; const userName = "小明";
let currentStage = ""; let currentStage = "学习中";
let completedExercises = 0; let completedExercises = 0;
completedExercises = 2;
console.log('学习者：' + userName);
console.log('学习阶段：' + currentStage);
console.log('学习次数：' + completedExercises);
// 任务： // 任务：
// 1. 给上面的变量赋一个合理值 // 1. 给上面的变量赋一个合理值

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

@@ -6,3 +6,11 @@ const hasPaid = true;
// 1. 把 ageText 转成数字，保存到 ageNumber // 1. 把 ageText 转成数字，保存到 ageNumber
// 2. 分别输出 studentName、ageText、ageNumber、hasPaid 的类型 // 2. 分别输出 studentName、ageText、ageNumber、hasPaid 的类型
// 3. 用模板字符串输出一句报名信息 // 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}')

27
03-javascript-core/03-operators-and-conditions/starter.js
View File

@@ -4,6 +4,31 @@ const score = 86;
// 1. 用布尔值保存是否及格 // 1. 用布尔值保存是否及格
// 2. 用 if...else if...else 判断等级 // 2. 用 if...else if...else 判断等级
// 3. 输出分数、是否及格、等级 // 3. 输出分数、是否及格、等级
/*- 根据分数计算是否及格
- 根据分数输出等级
- 90 分及以上为 A
- 80 到 89 为 B
- 60 到 79 为 C
- 60 以下为 D*/
let passed = false; let passed = false;
let grade = ""; 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}');

14
03-javascript-core/04-loops/starter.js
View File

@@ -5,3 +5,17 @@
// 4. 输出 sum // 4. 输出 sum
let sum = 0; 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);

19
03-javascript-core/05-functions/starter.js
View File

@@ -1,11 +1,30 @@
function getAverage(score1, score2, score3) { function getAverage(score1, score2, score3) {
return (score1 + score2 + score3) / 3
// 返回平均分 // 返回平均分
} }
function getLevel(average) { 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. 调用上面两个函数 // 1. 调用上面两个函数
// 2. 输出平均分和等级 // 2. 输出平均分和等级
/*- 写一个 `getAverage` 函数
- 接收 3 个分数参数
- 返回平均分
- 再写一个 `getLevel` 函数
- 根据平均分返回“优秀”“良好”“继续努力”*/

10
03-javascript-core/06-arrays/starter.js
View File

@@ -4,3 +4,13 @@ const topics = ["HTML", "CSS", "JavaScript"];
// 1. 往 topics 里新增一个主题 // 1. 往 topics 里新增一个主题
// 2. 输出 topics 的长度 // 2. 输出 topics 的长度
// 3. 用循环输出每一项 // 3. 用循环输出每一项
/*- 创建一个包含 3 个学习主题的数组
- 新增 1 个学习主题
- 输出数组长度
- 依次输出每个学习主题*/
topics.push('Vue')
console.log(topics.length);
for (let i = 0; i < topics.length; i++) {
console.log(topics[i]);
}

12
03-javascript-core/07-objects/starter.js
View File

@@ -9,3 +9,15 @@ const course = {
// 2. 新增 teacher 属性 // 2. 新增 teacher 属性
// 3. 输出完整对象 // 3. 输出完整对象
// 4. 输出 title 和 teacher // 4. 输出 title 和 teacher
/*- 创建一个课程对象
- 至少包含名称、课时、是否完结
- 修改其中一个属性
- 新增一个老师属性
- 输出完整对象和其中两个单独属性*/
course.finished = true
course.teacher = '李老师'
console.log(course);
console.log(course.title);
console.log(course.lessons);

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

@@ -6,3 +6,11 @@ const tags = ["变量", "条件", "函数"];
// 2. 转成大写 // 2. 转成大写
// 3. 判断是否包含 JS // 3. 判断是否包含 JS
// 4. 把 tags 用顿号连接成一句话 // 4. 把 tags 用顿号连接成一句话
/*- 把一段带空格的文本去掉首尾空格
- 把结果转成大写
- 判断里面是否包含 `JS`
- 把一个标签数组拼成一个字符串输出*/
const rawTrim = rawTitle.trim()
const rawTo = rawTitle.toUpperCase()
const result = rawTitle.includes("JS")
const tagsJoin = rawTitle.join(",")

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

@@ -2,10 +2,27 @@ function createCounter() {
let count = 0; 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 // 1. 创建 counterA 和 counterB
// 2. 连续调用 counterA 两次 // 2. 连续调用 counterA 两次
// 3. 再调用 counterB 一次 // 3. 再调用 counterB 一次
// 4. 观察为什么两个计数器互不影响 // 4. 观察为什么两个计数器互不影响
/*写一个 `createCounter` 函数
- 在函数内部定义 `count`
- 返回一个内部函数
- 每次调用内部函数时，`count` 都加 1
- 创建两个不同的计数器
- 观察为什么它们各自记住了自己的 `count`*/

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

@@ -7,14 +7,35 @@ const scores = [78, 85, 92];
function getAverageScore(list) { 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) { 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. 计算平均分 // 1. 计算平均分
// 2. 计算等级 // 2. 计算等级
// 3. 输出姓名、阶段、平均分、等级 // 3. 输出姓名、阶段、平均分、等级
// 4. 如果平均分 >= 80，输出“可以进入下一阶段” // 4. 如果平均分 >= 80，输出“可以进入下一阶段”
/*一个 `student` 对象
- 一个 `scores` 数组
- 一个计算平均分的函数
- 一个判断等级的函数
- 输出姓名、平均分、等级
- 如果平均分大于等于 80，再输出“可以进入下一阶段”*/

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

@@ -13,15 +13,24 @@ function compareScope() {
console.log("块内：", lessonName, chapterName, stage); console.log("块内：", lessonName, chapterName, stage);
} }
var lessonName = "变量";
let chapterName = "作用域";
const stage = "进阶";
console.log("块内：", lessonName);
// 任务： // 任务：
// 1. 输出 lessonName // 1. 输出 lessonName
// 2. 不要直接在这里输出 chapterName，否则会报错 // 2. 不要直接在这里输出 chapterName，否则会报错
// 3. 用一句注释说明为什么 // 3. 用一句注释说明为什么
} }
compareScope(); compareScope();
// 任务： // 任务：
// 4. 试着重新给 const 声明的值赋值 // 4. 试着重新给 const 声明的值赋值
// 5. 观察会发生什么 // 5. 观察会发生什么
/*观察 `var` 声明前为什么能访问到 `undefined`
- 用 `var` 声明一个函数内部变量
- 用 `let` 声明一个代码块内部变量
- 在可访问的位置输出它们
- 观察为什么 `var` 在块外还能访问，而 `let` 不行
- 再写一段代码证明 `const` 不能被重新赋值*/

8
03-javascript-core/12-this-keyword/README.md
View File

@@ -25,3 +25,11 @@
- [starter.js](/Users/lijiaqing/home/wwwroot/front-end-example/03-javascript-core/12-this-keyword/starter.js) - [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) - [answer.js](/Users/lijiaqing/home/wwwroot/front-end-example/03-javascript-core/12-this-keyword/answer.js)
function a() {
}
const b = () => {
}

10
03-javascript-core/12-this-keyword/starter.js
View File

@@ -4,15 +4,25 @@ const student = {
sayHello() { sayHello() {
// 任务： // 任务：
// 1. 用 this.name 输出问候语 // 1. 用 this.name 输出问候语
console.log(this.name + "你好！");
}, },
createArrowReporter() { createArrowReporter() {
// 任务： // 任务：
// 2. 返回一个箭头函数 // 2. 返回一个箭头函数
// 3. 在箭头函数里输出 this.name // 3. 在箭头函数里输出 this.name
return () => {
console.log(this.name);
}
}, },
}; };
// 任务： // 任务：
// 4. 调用 student.sayHello() // 4. 调用 student.sayHello()
student.sayHello()
// 5. 把 student.sayHello 赋值给 detachedHello 再调用 // 5. 把 student.sayHello 赋值给 detachedHello 再调用
const detachedHello = student.sayHello
detachedHello()
// 6. 调用 createArrowReporter 返回的新函数 // 6. 调用 createArrowReporter 返回的新函数
student.createArrowReporter()()