commit a664c18d1b41881df99569b03a921e9a2e2c1f0e Author: Pjc <2121542413@qq.com> Date: Thu Sep 10 22:58:30 2026 +0800 add HTML/CSS/JS daily challenge for web department diff --git a/Day_0/README.md b/Day_0/README.md new file mode 100644 index 0000000..270a211 --- /dev/null +++ b/Day_0/README.md @@ -0,0 +1,41 @@ +# Day_0 · 配置开发环境(VS Code + Node.js + 终端 + 浏览器) + +> 预计耗时:20~30 分钟 +> 前端一切从工具开始。今天装好编辑器 VS Code 和运行环境 Node.js,学会用终端,认识浏览器开发者工具。 + +## 今日知识点 + +- VS Code:写代码的编辑器,装几个常用插件 +- Node.js:让你能在电脑上运行 JavaScript(第二周会用 `node` 命令跑脚本) +- 终端(命令行):执行命令的地方,Windows 上是 PowerShell / CMD +- 浏览器开发者工具:按 F12 打开,前端调试全靠它 + +## 先学(教程) + +- VS Code 官方文档·入门:https://code.visualstudio.com/docs +- MDN·浏览器开发者工具入门:https://developer.mozilla.org/zh-CN/docs/Learn/Common_questions/Tools_and_setup/What_are_browser_developer_tools +- B站视频(黑马程序员,看讲"软件下载、VSCode 使用"的几集,选看):https://www.bilibili.com/video/BV14J4114768/ + +## 任务(后做) + +1. 下载安装 VS Code:https://code.visualstudio.com/ ,一路下一步 +2. 在 VS Code 扩展商店(左侧方块图标)搜索并安装四个插件: + - **Live Server**(预览网页用,安装好之后可以通过在文件页点击鼠标右键选择“open with live server”的方式在浏览器实时观看你所写的静态网页) + - **Chinese (Simplified)**(中文界面,可选) + - **Prettier**(自动格式化代码) + - **HTML CSS Support** +3. 下载安装 Node.js:https://nodejs.org/ (选 **LTS** 版本,一路下一步), + 装好后打开终端运行 `node --version`,能看到版本号即成功 +4. 打开终端(Windows 按 `Win + R` 输入 `cmd` 回车),运行 `ver` 或 `dir`,看看能输出什么 +5. 随便打开一个网页,按 F12,认识"元素"和"控制台"两个面板 + +> 小贴士:终端里输入命令后回车才会执行;VS Code 底部也能打开内置终端。 + +## 完成标准 + +- [ ] VS Code 安装成功,四个插件装好 +- [ ] `node --version` 能输出版本号 +- [ ] 终端能运行命令 +- [ ] 能按 F12 打开开发者工具 + +**提交方式**:把 VS Code 打开(含插件栏)+ 开发者工具的**截图**贴在当日工单评论里。 diff --git a/Day_1/README.md b/Day_1/README.md new file mode 100644 index 0000000..630aed5 --- /dev/null +++ b/Day_1/README.md @@ -0,0 +1,74 @@ +# Day_1 · HTML 文档结构与常用标签 + +> 预计耗时:20~30 分钟 +> HTML 是网页的"骨架"。今天认识一个页面的基本结构,和几个最常用的标签。 + +## 今日知识点 + +- HTML 文档结构:``、``、`
`、`` +- 常用标签:标题 ``、链接 ``、图片 ` ` 段落介绍自己
+3. 一个 `` 链接(用 `target="_blank"`)、一张 ` 我是web部的新成员。 我是web部的新成员,来自青岛,喜欢写代码。 这是我做的第一个网页。`
+- 盒子标签:`
` 主标题、两个 `
` 图片
+4. 用 `
我叫张三
+ 我叫张三
+
+
+
+```
diff --git a/Day_10/README.md b/Day_10/README.md
new file mode 100644
index 0000000..0b4656b
--- /dev/null
+++ b/Day_10/README.md
@@ -0,0 +1,57 @@
+# Day_10 · 循环 for / while
+
+> 预计耗时:20~30 分钟
+> 让程序"会重复":把同一件事做很多遍,不用复制粘贴。
+
+## 今日知识点
+
+- `for (let i = 0; i < 5; i++) { ... }` 重复执行固定次数
+- `while (条件) { ... }` 满足条件就一直执行
+- 循环里用 `i` 计数
+
+## 先学(教程)
+
+- 菜鸟教程 JS(看"JS 循环"):https://www.runoob.com/js/js-loop.html
+- MDN·循环:https://developer.mozilla.org/zh-CN/docs/Learn/JavaScript/Building_blocks/Looping_code
+- B站视频(黑马程序员,看讲"for/while 循环"的几集,选看):https://www.bilibili.com/video/BV1Y84y1L7Nn/
+
+## 任务(后做)
+
+新建 `day10.js`:
+
+1. 用 `for` 打印 1 到 5:
+ ```javascript
+ for (let i = 1; i <= 5; i++) {
+ console.log(i);
+ }
+ ```
+2. 用 `for` 打印 1 到 10 里的**偶数**(提示:`if (i % 2 === 0)`)
+3. 用 `while` 从 10 倒数到 1
+
+## 完成标准
+
+- [ ] for 循环打印 1~5
+- [ ] 能筛出偶数
+- [ ] while 循环能倒数
+
+**提交方式**:把 `day10.js` 代码 + 运行结果截图,贴在当日工单评论里。
+
+## 参考解答(先做再看)
+
+```javascript
+for (let i = 1; i <= 5; i++) {
+ console.log(i);
+}
+
+for (let i = 1; i <= 10; i++) {
+ if (i % 2 === 0) {
+ console.log(i); // 2 4 6 8 10
+ }
+}
+
+let n = 10;
+while (n >= 1) {
+ console.log(n);
+ n--;
+}
+```
diff --git a/Day_11/README.md b/Day_11/README.md
new file mode 100644
index 0000000..85656e8
--- /dev/null
+++ b/Day_11/README.md
@@ -0,0 +1,58 @@
+# Day_11 · 函数:把代码装进"盒子"反复用
+
+> 预计耗时:20~30 分钟
+> 把一段代码打包,起个名字,之后随时调用。函数是写程序的必备技能。
+
+## 今日知识点
+
+- 定义:`function 名字(参数) { ... return 结果; }`
+- 调用:`名字(参数)`
+- `return` 返回结果,没有就返回 `undefined`
+
+## 先学(教程)
+
+- 菜鸟教程 JS(看"JS 函数"):https://www.runoob.com/js/js-functions.html
+- MDN·函数:https://developer.mozilla.org/zh-CN/docs/Learn/JavaScript/Building_blocks/Functions
+- B站视频(黑马程序员,看讲"函数定义、参数、返回值"的几集,选看):https://www.bilibili.com/video/BV1Y84y1L7Nn/
+
+## 任务(后做)
+
+新建 `day11.js`:
+
+1. 加法函数:
+ ```javascript
+ function add(a, b) {
+ return a + b;
+ }
+ console.log(add(3, 5)); // 8
+ ```
+2. 写一个 `isAdult(age)`,年龄 ≥18 返回 `true`,否则 `false`,并调用打印
+3. 写一个 `greet(name)`,返回 `"你好," + name`
+
+## 完成标准
+
+- [ ] 会用参数和 return
+- [ ] 能调用自己写的函数
+- [ ] 能说出 return 和 console.log 的区别
+
+**提交方式**:把 `day11.js` 代码 + 运行结果截图,贴在当日工单评论里。
+
+## 参考解答(先做再看)
+
+```javascript
+function add(a, b) {
+ return a + b;
+}
+console.log(add(3, 5)); // 8
+
+function isAdult(age) {
+ return age >= 18;
+}
+console.log(isAdult(20)); // true
+console.log(isAdult(15)); // false
+
+function greet(name) {
+ return "你好," + name;
+}
+console.log(greet("张三"));
+```
diff --git a/Day_12/README.md b/Day_12/README.md
new file mode 100644
index 0000000..8e77622
--- /dev/null
+++ b/Day_12/README.md
@@ -0,0 +1,59 @@
+# Day_12 · 数组方法 push / filter / map / forEach
+
+> 预计耗时:20~30 分钟
+> 数组是一串数据的列表。今天学 4 个最常用的数组方法,后续做项目全靠它们。
+
+## 今日知识点
+
+- `push(x)`:往数组末尾加一个
+- `forEach(fn)`:遍历每个元素,挨个处理
+- `map(fn)`:把每个元素变一下,得到新数组
+- `filter(fn)`:筛出满足条件的元素
+
+## 先学(教程)
+
+- 菜鸟教程 JS(看"JS 数组"和"JS 数组方法"):https://www.runoob.com/js/js-array-methods.html
+- MDN·数组:https://developer.mozilla.org/zh-CN/docs/Learn/JavaScript/First_steps/Arrays
+- B站视频(黑马程序员,看讲"数组操作、forEach/map"的几集,选看):https://www.bilibili.com/video/BV1Y84y1L7Nn/
+
+## 任务(后做)
+
+新建 `day12.js`:
+
+1. `let nums = [1, 2, 3];` 用 `push(4)` 再打印,看结果
+2. 用 `forEach` 遍历 `[1, 2, 3, 4, 5]`,打印每个元素(写法:`[1,2,3,4,5].forEach(function(n){ console.log(n); })`)
+3. 用 `map` 把 `[1, 2, 3]` 变成 `[2, 4, 6]`(每个乘 2,写法:`[1,2,3].map(function(n){ return n * 2; })`)
+4. 用 `filter` 从 `[1, 2, 3, 4, 5, 6]` 里筛出偶数
+
+## 完成标准
+
+- [ ] 会用 push 加元素
+- [ ] 会用 forEach / map / filter
+- [ ] 能说出 map 和 forEach 的区别(map 返回新数组)
+
+**提交方式**:把 `day12.js` 代码 + 运行结果截图,贴在当日工单评论里。
+
+## 参考解答(先做再看)
+
+```javascript
+let nums = [1, 2, 3];
+nums.push(4);
+console.log(nums); // [1, 2, 3, 4]
+
+[1, 2, 3, 4, 5].forEach(function (n) {
+ console.log(n);
+});
+
+const doubled = [1, 2, 3].map(function (n) {
+ return n * 2;
+});
+console.log(doubled); // [2, 4, 6]
+
+const even = [1, 2, 3, 4, 5, 6].filter(function (n) {
+ return n % 2 === 0;
+});
+console.log(even); // [2, 4, 6]
+```
+
+> 传给 forEach / map / filter 的那个 `function (n) { ... }` 叫"回调函数",
+> 数组会把它套在**每一个元素**上各执行一次。先按这种写法记,后面会学更简短的箭头函数写法。
diff --git a/Day_13/README.md b/Day_13/README.md
new file mode 100644
index 0000000..c5bcdf2
--- /dev/null
+++ b/Day_13/README.md
@@ -0,0 +1,62 @@
+# Day_13 · 对象 Object 与 JSON(第二周小测)
+
+> 预计耗时:20~30 分钟
+> 对象把一组相关的数据打包在一起(比如一个人的姓名、年龄、爱好)。JSON 是前后端传数据的通用格式。今天认识它们。
+
+## 今日知识点
+
+- 对象:`{ 键: 值, 键: 值 }`,用 `对象.键` 取值
+- JSON:本质是"字符串形式的对象",常用于接口传数据
+- `JSON.stringify(对象)` 转字符串;`JSON.parse(字符串)` 转回对象
+
+## 先学(教程)
+
+- 菜鸟教程 JS(看"JS 对象"和"JS JSON"):https://www.runoob.com/js/js-json.html
+- MDN·JSON:https://developer.mozilla.org/zh-CN/docs/Learn/JavaScript/Objects/JSON
+- B站视频(黑马程序员,看讲"对象、JSON"的几集,选看):https://www.bilibili.com/video/BV1Y84y1L7Nn/
+
+## 任务(后做)
+
+新建 `day13.js`:
+
+1. 建一个对象:
+ ```javascript
+ let person = {
+ name: "张三",
+ age: 18,
+ hobbies: ["代码", "篮球"]
+ };
+ console.log(person.name);
+ console.log(person.hobbies[0]);
+ ```
+2. 用 `JSON.stringify(person)` 转成字符串,打印看看长什么样
+3. 用 `JSON.parse` 把这段字符串转回对象,再打印 `.age`
+
+## 完成标准
+
+- [ ] 会用 `对象.键` 取值
+- [ ] 会 JSON 字符串和对象的互相转换
+- [ ] 能说出对象和 JSON 字符串的区别
+
+**提交方式**:把 `day13.js` 代码 + 运行结果截图,贴在当日工单评论里。
+
+## 参考解答(先做再看)
+
+```javascript
+let person = {
+ name: "张三",
+ age: 18,
+ hobbies: ["代码", "篮球"]
+};
+console.log(person.name); // 张三
+console.log(person.hobbies[0]); // 代码
+
+const json = JSON.stringify(person);
+console.log(json);
+// {"name":"张三","age":18,"hobbies":["代码","篮球"]}
+
+const obj = JSON.parse(json);
+console.log(obj.age); // 18
+```
+
+> 恭喜!两周的基础都走完了。下一步进入 DOM 操作、事件、异步和 Vue,请期待后面的课程。
diff --git a/Day_2/README.md b/Day_2/README.md
new file mode 100644
index 0000000..18f2a7e
--- /dev/null
+++ b/Day_2/README.md
@@ -0,0 +1,64 @@
+# Day_2 · HTML 表单与输入控件
+
+> 预计耗时:20~30 分钟
+> 网页要能"填":登录、注册、搜索都靠表单。今天认识最常用的输入控件。
+
+## 今日知识点
+
+- 表单容器 `