diff --git "a/\345\220\225\347\245\245\345\213\207/20251110.md" "b/\345\220\225\347\245\245\345\213\207/20251110.md" new file mode 100644 index 0000000000000000000000000000000000000000..b518f955ccd47ac53143bc2273213aada935a093 --- /dev/null +++ "b/\345\220\225\347\245\245\345\213\207/20251110.md" @@ -0,0 +1,32 @@ +一.JavaScript在HTML中的应用 +```html + 1.直接嵌入标签元素中使用 + + 2.内部引用式(嵌入式) + + 3.外部引用式 + +``` + + +练习一 +```html + +``` +![alt text](Snipaste_2025-11-10_17-05-27.png) + +练习二 +```html +
+ +
+ +``` +![alt text](Snipaste_2025-11-10_17-02-03.png) \ No newline at end of file diff --git "a/\345\220\225\347\245\245\345\213\207/20251112.md" "b/\345\220\225\347\245\245\345\213\207/20251112.md" new file mode 100644 index 0000000000000000000000000000000000000000..a5983b522f810334b1eb85cf4d9885f869ac7c78 --- /dev/null +++ "b/\345\220\225\347\245\245\345\213\207/20251112.md" @@ -0,0 +1,72 @@ +训练一 +```html + +``` + +训练二 +```html + +``` + +训练三 +```html + +``` + +训练四 +```html + +``` +![alt text](Snipaste_2025-11-12_16-47-49.png) + + + +综合训练一 +```html + +``` +![alt text](Snipaste_2025-11-12_11-02-28.png) +综合训练二 +```html + +``` +![alt text](Snipaste_2025-11-12_11-16-31.png) + +综合训练三 +```html + + +``` +![alt text](Snipaste_2025-11-12_16-19-46.png) +\ No newline at end of file \ No newline at end of file diff --git "a/\345\220\225\347\245\245\345\213\207/20251113.md" "b/\345\220\225\347\245\245\345\213\207/20251113.md" new file mode 100644 index 0000000000000000000000000000000000000000..8dc9c09668fa9c8b74ed40739f291d946f03e9fe --- /dev/null +++ "b/\345\220\225\347\245\245\345\213\207/20251113.md" @@ -0,0 +1,54 @@ +一.逻辑运算符 +```bash + 运算符 描 述 示 例 + && 逻辑与 a&&b 当a和b都为真时,结果为真,否则为假 + || 逻辑或 a||b 当a为真或者b为真时,结果为真,否则为假 + ! 逻辑非 !a 当a为假时,结果为真,否则为假 +``` + +二.typeof运算符 +```bash + 数据类型 返回值 + 数值 number + 字符串 string + 布尔值 bollean + undefined undefined + null object + 对象 object + 函数 function +``` + +训练五 +```html + +``` + +训练六 +```html + +``` + +训练七 +```html + +``` +\ No newline at end of file \ No newline at end of file diff --git "a/\345\220\225\347\245\245\345\213\207/20251114.md" "b/\345\220\225\347\245\245\345\213\207/20251114.md" new file mode 100644 index 0000000000000000000000000000000000000000..eb89c39ba5f60c1cdda1e0e7151546d3500a1e9d --- /dev/null +++ "b/\345\220\225\347\245\245\345\213\207/20251114.md" @@ -0,0 +1,210 @@ +训练1 +```html + +``` + +训练2 +```html + +``` + +训练3 +```html + +``` + +训练4 +```html + +``` + +训练5 +```html + +``` + +训练6 +```html + +``` + +训练7 +```html + +``` + +综合练习1 +```html + +``` + +综合练习2 +```html + + 请选择您的出生年月： + + + + +``` + +综合练习3 +```html + + + +``` \ No newline at end of file diff --git "a/\345\220\225\347\245\245\345\213\207/20251117.md" "b/\345\220\225\347\245\245\345\213\207/20251117.md" new file mode 100644 index 0000000000000000000000000000000000000000..0a4afad0c5a191c48187559cfe023dc1f5a23056 --- /dev/null +++ "b/\345\220\225\347\245\245\345\213\207/20251117.md" @@ -0,0 +1,84 @@ +## JavaScript笔记 + +### 流程控制语句 + +1.条件控制语句 + +- if语句 + +- if...else语句 + +- if...else if语句 + +- switch语句 + +2.循环控制语句 + +- while循环语句 + +- do-while循环语句 + +- for循环语句 + +3.跳转语句 + +- continue语句 + +- break语句 + +### 函数 + +1.函数的定义与调用 + +- 定义可指定形参 + +- 调用的时候可任意制定实参，也可不指定 + +```js +//第一种定义方式：传统、原始方式 +function getNameByid(){ + //arguments关键字用于捕获调用函数时传入的参数（实际参数） + console.log(arguments); + } + +//匿名函数 +let getNameByid = function (name,age){ + +} + +//箭头函数 +let getNameByid = (name,age) => { + console.log(name); + console.log(age); +} +``` +2.返回值 +- 有return，则有返回值，而且通常不为undefined。 +- 无return，总是私下返回一个undefined。 + +## 练习 +训练1.获取完整的收货地址 在电子商城网站收货人信息的收货地址栏中，地址由省、市、区和详细地址组成，试着定义一个address（）函数，该函数包含省、市、区和详细地址4个参数，在调用函数时，传递的参数可以拼接成一个完整的收货地址。 +```html + +``` +训练2.获取数字的绝对值 定义一个获取数字绝对值的函数，将数字作为参数进行传递，输出-30的绝对值。 +```html + +``` +\ No newline at end of file \ No newline at end of file diff --git "a/\345\220\225\347\245\245\345\213\207/20251119.md" "b/\345\220\225\347\245\245\345\213\207/20251119.md" new file mode 100644 index 0000000000000000000000000000000000000000..cf9ed19e70887c26fcfda1c6607fdd42794cd3e6 --- /dev/null +++ "b/\345\220\225\347\245\245\345\213\207/20251119.md" @@ -0,0 +1,201 @@ +### 一、什么是 JS 函数？ +#### 函数是可重复使用的代码块，用来完成特定功能（比如计算、处理数据、触发事件），本质是 “包装好的工具”，调用时才执行。 +### 二、函数的基本写法（3 种常用） +#### 1. 声明式函数（最常用） +#### // 语法：function 函数名(参数1, 参数2) { 函数体 } +#### function add(a, b) { + #### return a + b; // return 返回结果（没有则返回undefined） +#### } +#### // 调用：函数名(实参) +#### let result = add(2, 3); // 结果：5 + +#### 2. 表达式函数（匿名 / 命名） +#### // 匿名表达式 +#### let multiply = function(a, b) { +#### return a * b; +#### }; +#### // 调用 +#### let res = multiply(4, 5); // 20 + +#### // 命名表达式（方便调试） +#### let divide = function div(a, b) { + #### return a / b; +#### }; + +#### 3. 箭头函数（ES6+，简洁） +#### // 语法：(参数) => { 函数体 } （单个参数可省略括号，单句返回可省略大括号和return） +#### let subtract = (a, b) => a - b; // 等价于 function(a,b){return a-b} +#### let res2 = subtract(10, 3); // 7 + +### 三、核心概念（简单记） +#### 参数：函数的 “输入”，声明时写的是 “形参”，调用时传的是 “实参”（实参可少传 / 多传，多余的忽略）。 +#### 返回值：函数的 “输出”，用return带出，执行到return后函数立即结束。 +#### 作用域：函数内部声明的变量，外部不能直接访问（局部变量）；外部变量内部可访问（全局变量）。 +## 作业 +```html + +``` + +```html + +``` + ```html + + ``` + ```html + + ``` + + ```html + + +``` +```html + + ``` + ```html + + ``` + ```html + +``` +\ No newline at end of file \ No newline at end of file diff --git "a/\345\220\225\347\245\245\345\213\207/20251120.md" "b/\345\220\225\347\245\245\345\213\207/20251120.md" new file mode 100644 index 0000000000000000000000000000000000000000..5b03eb3720c100f32451f4d24235c68515e819ad --- /dev/null +++ "b/\345\220\225\347\245\245\345\213\207/20251120.md" @@ -0,0 +1,156 @@ +### 一、什么是 JS 对象？ +- 对象是存储数据和功能的集合，本质是 “键值对的容器”（键 = 属性名，值 = 属性值，值可以是变量、函数等），用来描述一个具体的事物（比如人、商品）。 +### 二、对象的创建方式（3 种常用） +- 1. 字面量方式（最常用） +- // 语法：let 对象名 = { 键1: 值1, 键2: 值2, ... } +- 2. 构造函数方式（创建多个同类对象） +- // 用Object构造函数 +```html + let car = new Object(); + car.brand = "特斯拉"; + car.price = 300000; + car.run = () => console.log("汽车在行驶"); +``` +- 3. 简化写法（ES6+，属性 / 方法简写） +- let name = "小红"; +- let eat = () => console.log("吃饭啦"); + +- // 属性名和变量名一致时，可简写 +```html +let person2 = { + name, // 等价于 name: name + eat // 等价于 eat: eat +}; +``` +### 三、对象的核心操作（增删改查） +- 1. 查（访问属性 / 方法） +```html +let person = { name: "小明", age: 20, sayHi: () => console.log("你好") }; +``` +- // 方式1：点语法（推荐，简洁） +```html +console.log(person.name); // 输出：小明 +person.sayHi(); // 输出：你好 +``` +```html +// 方式2：方括号语法（适合属性名带特殊字符/变量） +console.log(person["age"]); // 输出：20 +let key = "name"; +console.log(person[key]); // 输出：小明 +``` +- 2. 增（添加新属性 / 方法） +```html +let person = { name: "小明" }; +person.gender = "男"; // 添加属性 +person.study = () => console.log("学习中"); // 添加方法 +``` + +- 3. 改（修改已有属性 / 方法） +```html +let person = { name: "小明", age: 20 }; +person.age = 21; // 修改属性 +person.sayHi = () => console.log("Hi~"); // 修改方法 +``` + +- 4. 删（删除属性） +```html +let person = { name: "小明", age: 20 }; +delete person.age; // 删除age属性 +console.log(person.age); // 输出：undefined +``` + +### 四、核心概念（简单记） +- 属性：对象的 “特征”（比如 name、age）。 +- 方法：对象的 “功能”（函数类型的属性，比如 sayHi、run）。 +- 键名：属性名，默认是字符串（可省略引号，特殊字符需加引号，比如 "user-name"）。 +- this：对象内部的方法中，this指向当前对象（箭头函数无 this，指向外部环境）。 +```html +let person = { + name: "小明", + sayName: function() { + console.log(this.name); // this指向person，输出：小明 + } +}; +``` +```html + + + + 点击页面任意位置，检测鼠标按键 + +

生成 1-6 组成的随机数

+ + +
+ + +``` \ No newline at end of file diff --git "a/\345\220\225\347\245\245\345\213\207/20251121.md" "b/\345\220\225\347\245\245\345\213\207/20251121.md" new file mode 100644 index 0000000000000000000000000000000000000000..52b101b5764f1ffe777a6fb9676d8148bc0b2f37 --- /dev/null +++ "b/\345\220\225\347\245\245\345\213\207/20251121.md" @@ -0,0 +1,62 @@ +#### 一、什么是 JS 数组？ +- 数组是有序的集合，专门用来存储多个数据（可以是不同类型：数字、字符串、对象等），本质是 “带索- 引的容器”，索引从 0 开始（第 1 个元素索引为 0，第 2 个为 1，以此类推）。 +#### 二、数组的创建方式（2 种常用） +- 1. 字面量方式（最常用） +- // 语法：let 数组名 = [元素1, 元素2, ...] +- 2. 构造函数方式 +- let numbers = new Array(1, 2, 3, 4); // 结果：[1,2,3,4] + +#### 三、数组的核心操作（增删改查） +- 1. 查（访问元素 / 长度） +```html +let fruits = ["苹果", "香蕉", "橙子"]; + +// 访问元素：数组名[索引] +console.log(fruits[0]); // 输出：苹果（第1个元素） +console.log(fruits[2]); // 输出：橙子（第3个元素） + +// 访问长度：数组名.length +console.log(fruits.length); // 输出：3（数组有3个元素） +``` +- 2. 改（修改元素） +```html +let fruits = ["苹果", "香蕉", "橙子"]; +fruits[1] = "葡萄"; // 把索引1的元素改成“葡萄” +console.log(fruits); // 结果：["苹果", "葡萄", "橙子"] +``` +- 3. 增（添加元素） +```html +let fruits = ["苹果", "香蕉"]; +``` +- // 1. 末尾添加（push，常用） +```html +fruits.push("橙子", "梨"); // 可添加多个元素 +console.log(fruits); // 结果：["苹果", "香蕉", "橙子", "梨"] +``` +- // 2. 开头添加（unshift） +```html +fruits.unshift("草莓"); +console.log(fruits); // 结果：["草莓", "苹果", "香蕉", "橙子", "梨"] +``` +- 4. 删（删除元素） +- let fruits = ["草莓", "苹果", "香蕉", "橙子"]; + +-// 1. 末尾删除（pop，常用） +```html +fruits.pop(); // 无参数，删除最后1个元素 +console.log(fruits); // 结果：["草莓", "苹果", "香蕉"] +``` +- // 2. 开头删除（shift） +```html +fruits.shift(); // 无参数，删除第1个元素 +console.log(fruits); // 结果：["苹果", "香蕉"] +``` + +#### 五、核心概念（简单记） +- 索引：元素的位置编号，从 0 开始，最大索引 = 数组长度 - 1。 +- 长度：length属性，不仅能获取长度，还能修改（比如arr.length = 0可清空数组）。 +- 动态性：JS 数组长度不固定，添加 / 删除元素会自动调整长度，无需提前声明。 +#### 六、简单注意点 +- 数组索引不能越界，访问不存在的索引（比如arr[10]，数组只有 3 个元素）会返回undefined。 +- 数组可以存储任意类型数据，但建议尽量存储同类型（方便遍历和处理）。 +- 常用方法中，push/pop（操作末尾）比unshift/shift（操作开头）效率更高。 \ No newline at end of file diff --git "a/\345\220\225\347\245\245\345\213\207/20251124.md" "b/\345\220\225\347\245\245\345\213\207/20251124.md" new file mode 100644 index 0000000000000000000000000000000000000000..fbcecc947c62322b9cfd61618b25a3f533a83653 --- /dev/null +++ "b/\345\220\225\347\245\245\345\213\207/20251124.md" @@ -0,0 +1,75 @@ +## 学习内容 + - Ts是js的一个超集（在大型，长期维护的项目起大作用【可以减少许多基础错误】） + - map,set集合的特性在一些高级场景很实用，除此之外，Map的key可以是非string，set用于形成唯一值集合。 +## String对象 +用let str ='';代替new来创建。 +方法:charAt，indexof，substring,格式化字符串 +可当成数组遍历。 +## 练习题 +![](图片imgs/20251124-练习1.png) +```html + +``` \ No newline at end of file diff --git "a/\345\220\225\347\245\245\345\213\207/20251126.md" "b/\345\220\225\347\245\245\345\213\207/20251126.md" new file mode 100644 index 0000000000000000000000000000000000000000..e3725ff60cb46014ca0707b4850250b04f4d0a58 --- /dev/null +++ "b/\345\220\225\347\245\245\345\213\207/20251126.md" @@ -0,0 +1,152 @@ +## + - ![](图片imgs/20251126-练习1.png) + + - 字符串.match（正则）返回匹配到的字符串 + - 字符串.replace（正则，要替换的字符串'）返回替换后的完整字符串 + - 正则.exec（字符串）返回匹配到的字符串、所在的位置，完整字符串 + - 正则.test（字符串）返回匹配字符串的结果：true false + +![](图片imgs/20251126-练习2.png) + + +```html + +``` \ No newline at end of file diff --git "a/\345\220\225\347\245\245\345\213\207/20251127.md" "b/\345\220\225\347\245\245\345\213\207/20251127.md" new file mode 100644 index 0000000000000000000000000000000000000000..50568d397daf9f6c074682945c693cedfea23c8f --- /dev/null +++ "b/\345\220\225\347\245\245\345\213\207/20251127.md" @@ -0,0 +1,135 @@ + + + ## 学习内容 + - 控制台中可找问题，而不希望结果显示在控制台，用try catche + - js(Node.js等)通常不写复杂业务 + - 关注鼠标，键盘，表单常用事件 + - 对事件冒泡的阻止：event.stopPropagation(); + - 取消浏览器的”默认动作”(点击会跳转、提交按钮会刷新页面等)：preventDefault(); + - onload:是在页面基础元素加载后才执行 + +## 练习题 + +![](图片imgs/20251127-练习.gif) +```html + +
+ + + + +
+ + +``` + +```html + +

数字转字母查询

+ + + + +

+ + + + + + +``` + +```html + +

用户注册验证

+ +
+ + +

+ + + +

+ + +
+ + + +``` \ No newline at end of file diff --git "a/\345\220\225\347\245\245\345\213\207/20251128.md" "b/\345\220\225\347\245\245\345\213\207/20251128.md" new file mode 100644 index 0000000000000000000000000000000000000000..396a80357c4dc81a3bc4f9041a0357c56b827df6 --- /dev/null +++ "b/\345\220\225\347\245\245\345\213\207/20251128.md" @@ -0,0 +1,71 @@ + +## 学习内容 + - 40%-60%：开发所有功能只占20%；剩下用于完善处理可能的需求/麻烦。 + - 剩下的是一些会议（设计（扯皮），研讨，培训 + +## 练习题 +![](图片imgs/20251128-练习1.gif) +```html + + + +
中国的国球是？
+
+ +
+ + +
+ + +
+ + +
+
+
+
+ + + + +``` + +![](图片imgs/20251011-练习.png) +```html + +``` \ No newline at end of file diff --git "a/\345\220\225\347\245\245\345\213\207/20251201.md" "b/\345\220\225\347\245\245\345\213\207/20251201.md" new file mode 100644 index 0000000000000000000000000000000000000000..d25029b4db6622ae6208d61be6c0c3258d24683e --- /dev/null +++ "b/\345\220\225\347\245\245\345\213\207/20251201.md" @@ -0,0 +1,63 @@ +## 笔记 + +拖放图片： +![alt text](image.png) +![alt text](image-1.png) + +练习1： +```html +
+

欢迎购买明日科技图书

+
+ + +``` +练习2： +```html + + +``` + +练习3： +```html + + +``` \ No newline at end of file diff --git "a/\345\220\225\347\245\245\345\213\207/20251203.md" "b/\345\220\225\347\245\245\345\213\207/20251203.md" new file mode 100644 index 0000000000000000000000000000000000000000..106e686bfb5d3ad2422ecf4ddad5633486f271bb --- /dev/null +++ "b/\345\220\225\347\245\245\345\213\207/20251203.md" @@ -0,0 +1,148 @@ +## 笔记 + +1. P194练习2： + - ![alt text](image.png) + - ![alt text](image-1.png) + +2. Document对像： + - 常用方法： + - `getElementById()`：返回指定ID的对象 + - `querySelector()`： 它返回文档中与指定的 CSS 选择器匹配的第一个元素。如果没有找到匹配项，则返回 null + - `createEiement()`：根据指定名称创建元素 + - `appendChild()`：将一个节点（元素）作为最后一个子元素添加到另一个元素中 + +3. 获取单选按钮的值： + - ![alt text](image-2.png) + +训练1： +```html +
+ +
+ +``` + +训练2： +```html + +``` +训练3： +```html + +
+
+ +``` + +综合1 +```html + +
+

李白 《行路难·其一》

+ + 金樽清酒斗十千，玉盘珍羞直万钱。
+ 停杯投箸不能食，拔剑四顾心茫然。
+ 欲渡黄河冰塞川，将登太行雪满山。
+ 闲来垂钓碧溪上，忽复乘舟梦日边。
+ 行路难，行路难，多歧路，今安在？
+ 长风破浪会有时，直挂云帆济沧海。
+ +
+ +``` + +综合2： +```html + + + 打开图片对话框 +
+ 删除 +
+ +``` + +综合3 +```html + + +
+
+ +``` \ No newline at end of file diff --git "a/\345\220\225\347\245\245\345\213\207/20251204.md" "b/\345\220\225\347\245\245\345\213\207/20251204.md" new file mode 100644 index 0000000000000000000000000000000000000000..2840d142d27645d55eb4e1f60407b6791ccb8dc0 --- /dev/null +++ "b/\345\220\225\347\245\245\345\213\207/20251204.md" @@ -0,0 +1,380 @@ +## 笔记 + +p203训练3： +![alt text](image.png) + +1. DOM概述： + - 根节点 + - 父节点 + - 子节点 + - 兄弟节点 + - 叶节点 + - 元素节点 + - 文本节点 + - 元素节点 + +2. 节点属性 + - nodeName：节点名称 + - nodetype：节点类型 + - paerntNode：返回当前节点的父节点 + - firstChild：返回当前节点的第一子节点 + - lastChild：放回当前节点的最后子节点 + +3. 节点 + - 创建节点：`appendChide()` + - 插入节点：`insertBefore()` + - 删除与替换：`removeChild()`,`replaceChild()` + +4. 获取元素 +![alt text](image-1.png) + +训练1 +```html + + +
+
+ +``` +训练2： +```html + + +

aaaaaaaaaaaa

+ +``` + +训练3： +```html +

最新电影资讯

+
+

1.《金蝉脱壳》

+

2.《阿甘正传》

+

3.《爱乐之城》

+

4.《头号玩家》

+

5.《疯狂动物城》

+
+ 输入影片资讯编号： + + + +``` + +训练4： +```html + +
+ + +
+ + +``` + +训练5 +```html +

在《倚天屠龙记》中，张三丰是_____派的掌门？

+ A.少林 + B.武当 + C.峨眉 + D.昆仑 + + +``` + +训练6 +```html + + + + 原超链接文本 + + + +``` + +训练7 +```html + + + +

动态添加图片与修改超链接

+ + + 原超链接文本 +
+ + +``` + +练习1 +```html +

+ 一生只爱一个人 + 将粗体改为斜体 +

+ + +``` + +练习2 +```html + + + + + +``` + +练习3 +```html + 选择表情图片 + + + +
+ 请选择表情： + +
+ 调皮表情 + +``` \ No newline at end of file diff --git "a/\345\220\225\347\245\245\345\213\207/20251205.md" "b/\345\220\225\347\245\245\345\213\207/20251205.md" new file mode 100644 index 0000000000000000000000000000000000000000..077670af34bd77abed9490503dd2f098218b2630 --- /dev/null +++ "b/\345\220\225\347\245\245\345\213\207/20251205.md" @@ -0,0 +1,13 @@ +## 笔记 + +`outerHTML` + +### Windowz对象 + +1. 属性 + - frames：对话框中显示的文档 + - location：指定当前文档的URL + +2. 方法 + - alet()：弹出一个警告对话框 + - confirm()：在确认对话框中显示的指定的字符串 \ No newline at end of file diff --git "a/\345\220\225\347\245\245\345\213\207/20251208.md" "b/\345\220\225\347\245\245\345\213\207/20251208.md" new file mode 100644 index 0000000000000000000000000000000000000000..d8eb646c8000f1f7212b9197b04e3ff4ffc7f8d0 --- /dev/null +++ "b/\345\220\225\347\245\245\345\213\207/20251208.md" @@ -0,0 +1,9 @@ +## 笔记 + +location方法： +assign（）：跳转新页面 +reload（）：重新载入当前页面 +history方法： +back（）:退回前一页 +forward（）：重新进入下一页 +go（）：进入指定的网友 \ No newline at end of file diff --git "a/\345\220\225\347\245\245\345\213\207/20251210.md" "b/\345\220\225\347\245\245\345\213\207/20251210.md" new file mode 100644 index 0000000000000000000000000000000000000000..f23311f168911ad1efe09eb268f57fe55e88f671 --- /dev/null +++ "b/\345\220\225\347\245\245\345\213\207/20251210.md" @@ -0,0 +1,230 @@ +## 作业 + +
+

此情可待成追忆

+

只是当时已惘然

+
+ + + + 丁禹兮 + + + + + + + + + + + + + + + + \ No newline at end of file diff --git "a/\345\220\225\347\245\245\345\213\207/20251211.md" "b/\345\220\225\347\245\245\345\213\207/20251211.md" new file mode 100644 index 0000000000000000000000000000000000000000..7042012c6dfe79a4683a20f909715b023b807e0a --- /dev/null +++ "b/\345\220\225\347\245\245\345\213\207/20251211.md" @@ -0,0 +1,172 @@ +## 作业 + + + + + + +
+ 语文 + 数学 + 英语 + 物理 + 化学 + 生物 + 历史 + 地理 + 政治 +
+ + +
+ A. 错误答案
+ B. 正确答案
+ C. 错误答案
+ +
+ +
+ + + +
+ 阅读
+ 运动
+ 听歌
+ 摄影
+ 绘画
+
+
+ + + + \ No newline at end of file diff --git "a/\345\220\225\347\245\245\345\213\207/20251212.md" "b/\345\220\225\347\245\245\345\213\207/20251212.md" new file mode 100644 index 0000000000000000000000000000000000000000..c407c48ef32f01a45f53bc0f9f788bc0d68e1d57 --- /dev/null +++ "b/\345\220\225\347\245\245\345\213\207/20251212.md" @@ -0,0 +1,20 @@ +## 笔记 +一、JSON + +1. 概念 +- JSON（JavaScript Object Notation）是轻量级的数据交换格式，独立于语言，易读易解析。 +2. 核心方法 +- JSON.parse()：将 JSON 字符串转换为 JavaScript 对象 / 数组，用于处理后端返回的 JSON 数据。 +- 例：const obj = JSON.parse('{"name":"张三","age":20}'); +- JSON.stringify()：将 JavaScript 对象 / 数组转换为 JSON 字符串，用于向后端发送数据。 +- 例：const str = JSON.stringify({name:"张三",age:20}); +3. 注意点 +- 键名必须用双引号包裹，不能用单引号或无引号； +- 不能包含函数、undefined 等类型，序列化时会被忽略。 二、Fetch API +4. 概念 +- Fetch API 是现代浏览器提供的异步网络请求接口，替代传统的 XMLHttpRequest，基于 Promise 实现。 +5. 关键要点 +- Fetch 的响应（Response 对象）需要手动解析（json ()/text () 等），这是一个异步操作； +- 只有网络错误或请求无法完成时才会触发 catch，HTTP 错误（如 404、500）不会直接触发，需通过response.ok判断； +- 默认不携带 Cookie，若需要则配置credentials: 'include'； +- 支持 AbortController 中断请求 \ No newline at end of file diff --git "a/\345\220\225\347\245\245\345\213\207/20251215.md" "b/\345\220\225\347\245\245\345\213\207/20251215.md" new file mode 100644 index 0000000000000000000000000000000000000000..e820ea0afea02bfe62213b4f74e606386bfab8fb --- /dev/null +++ "b/\345\220\225\347\245\245\345\213\207/20251215.md" @@ -0,0 +1,75 @@ +## 笔记 + +``` +let arr=[1,3,4,4,3,1,2]; + +**arr.indexof()** +从左到右开始，查找传入的元素是否在数组中，如果找到，则返回第一个找到数组的下标，如果没有则返回-1 + +**arr.lastIndexof()** +从右开始，查找传入的元素是否在数组中，如果找到，则返回第一个找到元素的下标，如果没有则返回-1 +``` +### 省市联动代码 +``` + + + + + + + + Document + + + + + + + + + +``` \ No newline at end of file diff --git "a/\345\220\225\347\245\245\345\213\207/20251217.md" "b/\345\220\225\347\245\245\345\213\207/20251217.md" new file mode 100644 index 0000000000000000000000000000000000000000..2c287d9919487067ad2b63642940136a65805fd1 --- /dev/null +++ "b/\345\220\225\347\245\245\345\213\207/20251217.md" @@ -0,0 +1,48 @@ +## 笔记 +### jQuery基础 +- 和js的引用一样，建议在body结束标签之前引用。 + +- 使用`$`来使用jQuery库的能力，`$`符号实际上是一个方法，当然方法在js中也是一对象，所以其也有一些属性可以使用 + +- jquery可以获得jQuery，和原生js拿到的对象不同，但它们间可以互相转换 + + - let div=$('div')拿到jquery对象 + + - div[0]拿到dom对象 + + - $(div[0]又可以重新转换为jquery对象) + + 原生js拿到的接过，通常是dom对象 + + jquery拿到的结果，通常是jQuery对象 + + - let div=$('div'); + + 将jQuery对象转换成dom对象 + + let domEl = div[0]; + + 将dom对象重新转换为jquery对象 + + let jQueryObj = $(domEl); + ### jQuery选择器与操作 + + - 基础选择器 + - 标签选择器 + - 类名选择器 + - id选择器 + - 关系选择器 + - 子代选择器` ` + - 直接子代选择器`>` + - 兄弟选择器`~` + - 相邻兄弟选择器`+` + - 高级选择器 + - 属性表达器 + - 伪类表达器 + - 伪元素表达器 + + ### jQueryDom操作 + - 新增append给拿到的元素增加一个下级元素 + - 移除remove移除拿到的元素 + - text()拿到文本内容，text('要设置的内容')可以修改纯文本内容 + - html()拿到包含标签的内容，html('要设置的内容')可以修改标签的内容 \ No newline at end of file diff --git "a/\345\220\225\347\245\245\345\213\207/20251218.md" "b/\345\220\225\347\245\245\345\213\207/20251218.md" new file mode 100644 index 0000000000000000000000000000000000000000..cd406a0432e509bef922d26acda0f92f2d35de69 --- /dev/null +++ "b/\345\220\225\347\245\245\345\213\207/20251218.md" @@ -0,0 +1,27 @@ +## 笔记 + +### jQuery事件处理 + +事件绑定函数第二种情形： + +let d4 = document.getElementById('d4'); + +d4.onclick = function(){} + +d4.addEventListener('click',function(){}) + +- jQuery对象.on('click',function(){}) +- jQuery对象.click(function(){}) +- jQuery对象.trigger('click',function(){}) +- $(function(){}) + +**jQuery的初始化数据的搞法** + + $(document).ready(function(){}) + $(document).on('reay',function(){}) + $(function(){ + console.log(1); + }) +### jQuery动画与效果 +- 基础效果：显示、隐藏 show()、hide()、toggle() +- 进阶效果：淡入、淡出 fadeIn()、fadeOut() \ No newline at end of file diff --git "a/\345\220\225\347\245\245\345\213\207/20251219.md" "b/\345\220\225\347\245\245\345\213\207/20251219.md" new file mode 100644 index 0000000000000000000000000000000000000000..776043b1bcb46254e93cc89adb70e7c7b3897870 --- /dev/null +++ "b/\345\220\225\347\245\245\345\213\207/20251219.md" @@ -0,0 +1,73 @@ +# 笔记 + +### 变量、常量和基础数据类型 +- var let定义变量，请忘记var，后续只使用let +- const定义常量，常量名全大写 +- 数据类型 + - 基础数据类型 + - string + - number + - boolean + - underfined + - null + - 复合数据类型 + - 对象 + - 数组 + - 函数 +### 运算符和数据类型转换 +- "+"" "-"" "*"" "/"" "%"" +- 逻辑运算 + - null undefined 0 '' 这些字面量参与逻辑运算时，作为false，其余的值作为true + - 短路运算 true || 表达式 false && 表达式 +- 赋值运算 = += -+ ++ --等 +- parseInt parseFloat 乘1变数字 加空字符串变字符串 +### 流程控制 + +- 判断 + - if + - if ... else + - if ... else if() + - if ... else if()... else + - switch +- 循环 + - for + - while + - do...while +- 三元运算 +## 核心数据结构及用法 + +### 数组 + +- 改变数组本身的方法 + - sort 排序，接受一个比较器 + - push pop 从尾部添加、删除 + - unshift shift 从头部添加、删除 + - splice 万能方法 删除元素、添加元素、修改元素 + - reverse 倒置 + - fill 填充 +- 不改变数组本身的方法 + - concat 拼接数组 + - slice 截取 + - map 将一个函数用在数组的每一个元素上，并将处理后的结果放入新的数组 + - filter 将一个函数用在数组的每个元素上，如果这个元素运算的结果为true，则将元素放入新的数组，反之不放，最终得到新的数组 + - reduce 将一个函数用在数组的前2个元素上，计算后的结果作为同一个函数第一个参数和数组的第三元素作为第二参数进行运算 + - forEach 遍历 + - find 将一个函数作用在数组的每一个元素上，返回true，则返回这个元素，否则最终返回undefined + - findIndex 将一个函数作用在数组的每一个元素上，返回true，则返回这个元素下标，否则最终返回undefined + - every + - some + - includes + - indexOf + - lastIndexOf + - join +- 高阶函数 + - 一个函数f，接受另外一个函数作为其参数，则称函数f为高阶函数 +### 函数 +- 函数定义 三种定义方式 +- 函数参数 可传可不传，不会因为没有参数而报错 +- 函数返回值 如果没有返回值，则默认返回undefined + +### 对象 +- 包含在一对大括号中的内容 +- 键值对，键也就是属性，值也就属性值 +- 也可以使用类似于数组的形式访问某个值，或者为其添加新的属性 \ No newline at end of file diff --git "a/\345\220\225\347\245\245\345\213\207/20251222.md" "b/\345\220\225\347\245\245\345\213\207/20251222.md" new file mode 100644 index 0000000000000000000000000000000000000000..c6528e5fe066bcbf83d1580f68c75b603bce12dc --- /dev/null +++ "b/\345\220\225\347\245\245\345\213\207/20251222.md" @@ -0,0 +1,317 @@ +```html + + + + + + 博客列表 + + + +
+

博客列表

+
+ + + +
+
+ + + + + + + + + +
序号标题内容摘要作者发布日期操作
+
+
+ + + + + + + +``` \ No newline at end of file diff --git "a/\345\220\225\347\245\245\345\213\207/20251224.md" "b/\345\220\225\347\245\245\345\213\207/20251224.md" new file mode 100644 index 0000000000000000000000000000000000000000..b1ccc4ae0989a9a1333784083fd74363160fb592 --- /dev/null +++ "b/\345\220\225\347\245\245\345\213\207/20251224.md" @@ -0,0 +1,68 @@ +``` +// JavaScript基础 +// 1. +// let name="lm"; +// let school="闽西职业技术学院"; +// console.log(name,school); + +// 2. + +// 3. +// let age=18; +// age =20; +// console.log(age); + + +// 运算符与类型转换 +// 1. +// function fun(a,b){ +// if(b===0){ +// return { +// 加:a+b, +// 减:a-b, +// 乘:a*b, +// 除:"除数不能为0", +// 余:"除数不能为0" +// }; +// } +// else{ +// return { +// 加:a+b, +// 减:a-b, +// 乘:a*b, +// 除:Number((a/b).toFixed(2)), +// 余:a%b +// }; +// } +// } +// console.log(fun(10,3)); +// console.log(fun(10,0)); + +// 2. +// 字符串转数字 +// const strNum = "123"; +// const convertedNum = Number(strNum); +// const numType = typeof convertedNum; + +// 数字转字符串 +// const num = 456; +// const convertedStr = String(num); +// const strType = typeof convertedStr; + +// 按示例格式输出结果 +// console.log(`转换后的数字: ${convertedNum}, 类型: ${numType}`); +// console.log(`转换后的字符串: "${convertedStr}", 类型: ${strType}`); + +// 3 +// function ab(a, b) { +// const result = { +// 大于: a > b, +// 等于: a === b, +// 不等于: a !== b +// }; +// return result; +// } +// console.log(ab(5,3)); + +// 4. +``` diff --git "a/\345\220\225\347\245\245\345\213\207/20251225.md" "b/\345\220\225\347\245\245\345\213\207/20251225.md" new file mode 100644 index 0000000000000000000000000000000000000000..9591e1124d64def092dfd29f87a942e499a63746 --- /dev/null +++ "b/\345\220\225\347\245\245\345\213\207/20251225.md" @@ -0,0 +1,160 @@ +``` +// 二数组 + // 1. + // arr=[1,2,3,4]; + // sum=0; + // for(i=0;i 1) { + // result.push(Number(num)); + // } + // } + // return result; + // } + + // console.log(add([1, 2, 4, 4, 3, 3, 1, 5, 3])); + + // 5. +// function removeItem(arr, item) { +// let result = []; +// for (let i = 0; i < arr.length; i++) { +// if (arr[i] !== item) { +// result.push(arr[i]); +// } +// } +// return result; +// } + +// 6. +// let students = [ +// { name: "小明", score: 85 }, +// { name: "小红", score: 55 }, +// { name: "小刚", score: 90 } +// ]; +// let passStudents = students +// .filter(student => student.score >= 60) +// .map(student => student.name); +// console.log(passStudents); + +// 7. +// arr=[1,2,3,4,5]; +// let arr1=arr.map(value => value*2); +// console.log(arr1); + +// 8. +// arr=[1,2,3,4,5,6,7,8,9]; +// let arr1=arr.filter(value=>value%2===1); +// console.log(arr1); + +// 9. +// arr=[10, 20, 30, 40, 50]; +// let arr1=arr.reduce(arr=>arr+=arr) +// console.log(arr1); + +// 10. +// let arr= [3, 7, 2, 9, 1, 5]; +// let arr1 = arr.reduce((prev, curr) => { +// return prev > curr ? prev : curr; +// });console.log(arr1); + +// 11. +// arr=[2,5,8,12,15,7] +// let result = arr.find(arr => arr > 10); +// console.log(result) +// 12. + +// let arr=[1, 5, 3, -2, 8, -5]; +// let arr1=arr.findIndex(arr=>arr<0); +// console.log(arr1); + +// 13. +// let arr=[1, 3, 5, 7, 8]; +// let arr1=arr.some(arr=>arr%2===0); +// console.log(arr1); + +// 14. +// arr= [1, 2, 3, 4, 5]; +// let arr1=arr.every(arr=>arr>0); +// console.log(arr1); + +// 15. +// let arr=[40, 100, 1, 5, 25, 10]; +// let arr1=arr.sort((a,b)=>a-b); +// console.log(arr1); + +// 16. +// arr=[{name: "小明", age: 20}, {name: "小红", age: 18}, {name: "小刚", age: 22}]; +// let arr1=arr.sort((a,b)=>a.age-b.age); +// console.log(arr1); + +// 17. +// let arr=['apple', 'banana', 'orange']; +// arr.forEach((a,b)=>{ +// console.log(`索引${b}: ${a}`); +// }) + +// 18 +// let arr =[[1, 2], [3, 4], [5, 6]]; +// arr = arr.reduce((acc, cur) => acc.concat(cur), []); +// console.log(arr); + +// 19 +// let arr= ['apple', 'banana', 'apple', 'orange', 'banana', 'apple']; +// let abb=arr.reduce((acc,cur)=>{ +// acc[cur] = (acc[cur]||0)+1; +// return acc; +// },{}); +// console.log('统计结果：', abb); + +// 20. +// let arr= [ {name: "鼠标", price: 29}, +// {name: "键盘", price: 89}, +// {name: "显示器", price: 899}, +// {name: "耳机", price: 199} ]; +// let abb=arr.filter(item=>item.price>50) +// .sort((a,b)=>a.price-b.price) +// .map(item=> item.name); +// console.log(abb); + +// 函数 +// 5. +// function sumall(...e){ +// let a=0; +// for(let num of e){ +// a+=num; +// } +// return a; +// } +// console.log(sumall(1,2,3,4,5)); +``` \ No newline at end of file diff --git "a/\345\220\225\347\245\245\345\213\207/20251226.md" "b/\345\220\225\347\245\245\345\213\207/20251226.md" new file mode 100644 index 0000000000000000000000000000000000000000..09d0c4908d0d16817805c0bd1e075637bfa33e6c --- /dev/null +++ "b/\345\220\225\347\245\245\345\213\207/20251226.md" @@ -0,0 +1,3 @@ +# 给网站添加https证书 + +老胡仓库教程 \ No newline at end of file diff --git "a/\345\220\225\347\245\245\345\213\207/20251229.md" "b/\345\220\225\347\245\245\345\213\207/20251229.md" new file mode 100644 index 0000000000000000000000000000000000000000..7424182f732831d4cdd5af6ddddb3e52765c9342 --- /dev/null +++ "b/\345\220\225\347\245\245\345\213\207/20251229.md" @@ -0,0 +1,376 @@ +## 练习 + +```js +//练习4 + function findSameNum(objArr){ + let countObj = {}; + let sameNum = []; + + for(let i = 0;i< objArr.length;i++){ + let currentItem = objArr[i]; + console.log(currentItem); + if(countObj[currentItem]){ + countObj[currentItem] = countObj[currentItem] + 1; + }else{ + countObj[currentItem] = 1; + } + } + + let keys = Object.keys(countObj); + for(let j = 0;j1){ + let numKey = Number(key); + if(!sameNum.includes(numKey)){ + sameNum.push(numKey); + } + } + } + return sameNum; + } + + let arr = [1, 2, 4, 4, 3, 3, 1, 5, 3]; + console.log(findSameNum(arr)); + + //练习5 + function removeArr(arr,item){ + let newArr = []; + + for(let i = 0;i item * 2); + console.log(newNum); + + //练习8 + let arr = [1,2,3,4,5,6,7,8,9]; + let newNum = arr.filter(item => item % 2 == 1); + console.log(newNum); + + //练习9 + let arr = [10, 20, 30, 40, 50]; + let newNum = arr.reduce((a, b) => a + b, 0); + console.log(newNum); + + //练习10 + let arr = [3, 7, 2, 9, 1, 5]; + let newNum = arr.reduce((a, b) => a > b ? a : b, -Infinity); + console.log(newNum); + + //练习11 + let arr = [2, 5, 8, 12, 15, 7]; + let newNum = arr.find(item => item > 10); + console.log(newNum); + + //练习12 + let arr = [1,5,3,-2,8,-5]; + let newNum = arr.findIndex(item => item < 0); + console.log(newNum); + + //练习13 + let arr = [1,3,5,7,8]; + let newNum = arr.some(item => item % 2 == 0); + console.log(newNum); + + //练习14 + let arr = [1,2,3,4,5] + let newNum = arr.every(item => item >0); + console.log(newNum); + + + //练习15 + let arr = [40, 100, 1, 5, 25, 10]; + let newNum = arr.sort((a, b) => a - b); + console.log(newNum); + + //练习16 + let arr = [{ name: "小明", age: 20 }, { name: "小红", age: 18 }, { name: "小刚", age: 22 }]; + let newArr = arr.sort((a,b) => a.age-b.age); + console.log(newArr); + + //练习17 + let arr = ['apple','banana','orange']; + arr.forEach((item,index) =>{ + console.log(`索引${index}:${item}`); + }) + + //练习18 + let arr = [[1,2],[3,4],[5,6]]; + let flatArr = arr.reduce((acc,curr) => { + return acc.concat(curr); + },[]); + console.log(flatArr); + + //练习19 + let arr = ['apple', 'banana', 'apple', 'orange', 'banana', 'apple']; + let furit = arr.reduce((acc, curr) => { + if (acc[curr]) { + acc[curr]++; + } else { + acc[curr] = 1; + } + return acc; + }, {}) + console.log(furit); + + // 练习21 + let arr = [2, 5, 8, 3, 9]; + let doubleArr = arr.map(num => num * 2); + let newArr = doubleArr.filter(item => item>10); + console.log(newArr); + + //练习22 + let arr = [1, 2, 2, 3, 4, 4, 5, 1]; + + let newArr = arr.reduce((acc,curr)=>{ + if(!acc.includes(curr)){ + acc.push(curr); + } + return acc; + },[]) + console.log(newArr); + + /* 函数 */ + //练习2 + function max(num1, num2) { + if (num1 < num2) { + num1 = num2; + } + return num1; + } + let num1 = 200; + let num2 = 23; + console.log(max(num1, num2)); + + // 练习4 + let filterEven = arr => arr.filter(num => num%2 == 0); + let arr = [1, 2, 3, 4, 5, 6]; + console.log(filterEven(arr)); + + //练习5 + function sumAll(...number) { + let newNum = number.reduce((acc, curr) => acc + curr, 0); + return newNum; + } + console.log(sumAll(1, 2, 3, 4, 5)); + + //练习7 + function createCount() { + let count = 0; + + return function () { + count++; + return count; + } + } + let counter = createCount(); + + console.log(counter()); + console.log(counter()); + console.log(counter()); + console.log(counter()); + + //练习9 + function processArray(arr, callback) { + let result = []; + for (let i = 0; i < arr.length; i++) { + result.push(callback(arr[i])); + } + return result; + } + + let beforeArr = [1, 2, 3, 4]; + let doubleCallback = (num) => num * 2; + + console.log(processArray(beforeArr, doubleCallback)); + + //练习10 + function factorial(n) { + if (n === 0 || n === 1) { + return 1; + } + return n * factorial(n - 1); + } + console.log(factorial(5)); + + //练习11 + function fibonacci(n) { + if (n === 1) { + return 1; + } + + return (n - 1) + fibonacci(n - 2); + } + console.log(fibonacci(7)); + + /* 对象 */ + //练习1 + const student = { + name : "张三", + age : 20, + major :"软件技术" + }; + console.log(student['name']); + console.log(student.age); + + //练习3 + const product = { + name: '手机', + price: 2999, + count: 50, + getInfo: function () { + return { "商品": this.name, "价格": this.price, "库存": this.count }; + } + }; + + console.log(product.getInfo()); + + //练习4 + const student = [ + { name: "小明", age: 17 }, + { name: "小红", age: 19 }, + { name: "小刚", age: 20 } + ]; + + const adultStudent = student.filter(students => students.age >= 18); + console.log(adultStudent); + + //练习5 + const person = { + name: "王五", + fsdf: 25, + job: "工程师", + city: "上海" + } + const { name, fsdf } = person; + console.log(fsdf); + + //练习6 + const person = { + name: "张三", + age: 20, + city: "北京" + }; + let key = Object.keys(person); + let value = Object.values(person); + let entrie = Object.entries(person); + console.log(key); + console.log(value); + console.log(entrie); + + //练习7 + const personName = {name: "李四"}; + const personAge = {age: 25}; + const personLive = {city: "上海"}; + let assigns = Object.assign(personName,personAge,personLive); + console.log(assigns); + + //练习9 + const person = { + name: "张三", + getName : function(){ + console.log(`你好，我是${this.name}`); + } + } + person.getName(); + + //练习10 + function person(name, age) { + this.name = name; + this.age = age; + } + const p = new person("李四", 25); + console.log(p); + + //练习12 + class student { + constructor(name, grade) { + this.name = name; + this.grade = grade; + } + + personInfo(){ + console.log(`姓名：${this.name},成绩：${this.age}`); + + } + } + student.personInfo(); + + //练习18 + const key = "score"; + const student = { [key]: 85 }; + console.log(student); + + //练习19 + function createUser(name, age) { + return { + name: name, + age: age + }; + } + + const user1 = createUser("张三", 25); + const user2 = createUser("李四", 20); + console.log(user1); + console.log(user2); + + //练习20 + + function groupBy(arr, conduct) { + let newArr = conductArr.reduce((acc, curr) => { + let key = curr[conduct]; + if (!acc[key]) { + acc[key] = []; + } + + acc[key].push(curr); + return acc; + }, {}) + + return newArr; + } + const conductArr = [ + { name: "张三", dept: "技术部" }, + { name: "李四", dept: "销售部" }, + { name: "王五", dept: "技术部" } + ] + let aaa = groupBy(conductArr, 'dept') + console.log(aaa); + + let btn = document.getElementById('btn'); + let agree = document.getElementById('agree'); + btn.disabled = true; + agree.checked = true; + console.log(`btn.disabled = ${btn.disabled} agree.checked = ${agree.checked}`); + + /* 动态创建与修改 */ + //练习1 + function addLi() { + let li = document.createElement('li'); + li.textContent = '新项目'; + let list = document.getElementById('list'); + list.append(li); + } + + //练习2 + function deleteP() { + let container1 = document.getElementById('container'); + let firstP = container1.firstElementChild; + if (firstP) { + firstP.remove(); + } + } +``` \ No newline at end of file diff --git "a/\345\220\225\347\245\245\345\213\207/20251231.md" "b/\345\220\225\347\245\245\345\213\207/20251231.md" new file mode 100644 index 0000000000000000000000000000000000000000..aa7166f3f784c03bf15986e9d588a1b204fe4220 --- /dev/null +++ "b/\345\220\225\347\245\245\345\213\207/20251231.md" @@ -0,0 +1,71 @@ +## 练习 +```js +//练习3 +function createCard() { + let card = document.createElement('div'); + card.className = 'card'; + + let img = document.createElement('img'); + img.src = 'image.jpg'; + img.alt = '图片'; + + let h3 = document.createElement('h3'); + h3.textContent = '卡片标题'; + + let p = document.createElement('p'); + p.textContent = '卡片描述内容'; + + document.body.appendChild(card); + card.appendChild(img); + card.appendChild(h3); + card.appendChild(p); +} + +//练习4 +let template = document.getElementById('template'); +let shallowClone = template.cloneNode(); +let p = document.createElement('p'); +p.textContent = '模版111'; +document.body.appendChild(shallowClone); +shallowClone.appendChild(p); + +//练习5 +function insert(){ + let list = document.getElementById('list'); + let newli = document.createElement('li'); + newli.textContent = '项目1'; + list.insertBefore(newli,list.children[0]); +} + +//练习6 +function replace() { + let list = document.getElementById('list'); + let old = document.getElementById('old'); + let new1 = document.createElement('li'); + new1.textContent = '新项目'; + + list.replaceChild(new1, old); +} + +//练习9 +function shopCard() { + const products = [ + { name: '商品1', price: 99 }, + { name: "商品2", price: 199 } + ] + + let productsHtml = products.map(product => + `

${product.name}

+

${product.price}

` + ) + console.log(productsHtml); + + + let aa = productsHtml.join(''); + + console.log(aa); + + let container = document.getElementById('container'); + container.innerHTML = aa; +} +``` \ No newline at end of file