JS1
This commit is contained in:
rou
@@ -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>
|
||||
|
||||
|
||||
@@ -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. 给上面的变量赋一个合理值
|
||||
|
||||
@@ -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}')
|
||||
|
||||
|
||||
|
||||
@@ -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}');
|
||||
|
||||
|
||||
@@ -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);
|
||||
|
||||
|
||||
@@ -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` 函数
|
||||
- 根据平均分返回“优秀”“良好”“继续努力”*/
|
||||
|
||||
@@ -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]);
|
||||
|
||||
}
|
||||
|
||||
@@ -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);
|
||||
|
||||
|
||||
|
||||
@@ -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(",")
|
||||
@@ -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`*/
|
||||
|
||||
@@ -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，再输出“可以进入下一阶段”*/
|
||||
@@ -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` 不能被重新赋值*/
|
||||
@@ -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 = () => {
|
||||
|
||||
}
|
||||
@@ -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()()
|
||||
|
||||
Reference in New Issue
Block a user