diff --git a/docs/chapter02.md b/docs/chapter02.md index 3458202..3745d21 100644 --- a/docs/chapter02.md +++ b/docs/chapter02.md @@ -185,7 +185,7 @@ HTML 元素（标签）: ![](./resources/imgs/html-rendering.svg) -CSS 语法: +**CSS 语法:** ``` 选择器 { @@ -194,7 +194,7 @@ CSS 语法: ... } ``` -示例： +> 示例： ```css body { background-color: #f0f0f0; @@ -280,6 +280,8 @@ CSS选择器用以筛选出要添加样式的元素。 [现代 JavaScript 教程](https://zh.javascript.info/) +[Github: 30-Days-Of-JavaScript](https://github.com/Asabeneh/30-Days-Of-JavaScript) + ##### 2.2.3.1 基础语法 - **变量声明**：理解`let`, `const`, `var`的区别与使用场景。 - **数据类型**：掌握字符串、数字、布尔值、数组、对象等基本数据类型。 @@ -288,9 +290,21 @@ CSS选择器用以筛选出要添加样式的元素。 - **循环结构**：for, while, do...while循环的应用。 - **函数定义与调用**：了解如何定义及调用函数，参数传递方式。 - **数组操作**：数组的创建、遍历方法（如map(), filter(), reduce()）。 -- **对象操作**：创建对象字面量、属性访问、构造函数与原型链。 +- **对象操作**：创建对象字面量、属性访问、构造函数。 - **错误处理**：try...catch...finally语句。 - + ```javascript + try { + // 可能引发异常的代码 + console.log('try块中的代码'); + } catch (error) { + // 异常处理代码 + console.log('发生了一个错误：', error.message); + } finally { + // 无论是否发生异常，这里的代码都会被执行 + console.log('finally子句中的代码'); + } + + ``` ##### 2.2.3.2 面向对象编程 - **类与对象**：理解类的声明、实例化和继承。 - **继承机制**：理解原型继承和类继承的区别。 @@ -312,10 +326,8 @@ CSS选择器用以筛选出要添加样式的元素。 #### 2.2.3.5 ES6+特性 - **箭头函数**：简化函数定义。 -ES6允许使用 “箭头”（ => ）定义函数。 +> ES6允许使用 “箭头”（ => ）定义函数。 - -示例： ```javascript let v = v => v; @@ -326,7 +338,7 @@ ES6允许使用 “箭头”（ => ）定义函数。 ``` -如果箭头函数 不需要参数 或 需要多个参数 ，就在剪头前使用（）括起来参数部分。 +> 如果箭头函数 不需要参数 或 需要多个参数 ，就在剪头前使用（）括起来参数部分。 ```javascript let f = () => 5; // 等同于 @@ -339,7 +351,7 @@ let sum = function(num1, num2){ }; ``` -箭头函数的一个用处是简化回调函数。 +> 箭头函数的一个用处是简化回调函数。 ```javascript // 普通函数写法 let values = [2,5,8,6] @@ -387,6 +399,35 @@ let sum = function(num1, num2){ - **模板字符串**：使用反引号(``)创建字符串。 + > JavaScript 模板字符串（template string）是一种字符串字面量，使用反引号（`）来标识。它可以包含普通字符以及特殊的占位符。 + + > 模板字符串中可以包含变量，其写法是在变量名前面加上${，后面跟上}。当模板字符串被执行时，这些变量会被相应的值替换。 + ```javascript + const name = 'Alice'; + const age = 25; + const greeting = `Hello, my name is ${name} and I am ${age} years old.`; + + console.log(greeting); // 输出： Hello, my name is Alice and I am 25 years old. + ``` + > 模板字符串还可以内嵌表达式，例如： + + ```javascript + const x = 10; + const y = 20; + const sum = `${x} + ${y} = ${x + y}`; + + console.log(sum); // 输出： 10 + 20 = 30 +``` + + > 模板字符串也可以用于多行字符串，不需要使用字符串连接，例如： + ```javascript + const multiLine = `This is a + multi-line + string.`; + + console.log(multiLine); + ``` + #### 2.2.4字符编码和字符集(了解) [字符编码和字符集PPT](./resources/javaweb-week-02-chartset.pptx) diff --git a/docs/tasks/chapter02-tasks.md b/docs/tasks/chapter02-tasks.md index 81a0291..3a5955c 100644 --- a/docs/tasks/chapter02-tasks.md +++ b/docs/tasks/chapter02-tasks.md @@ -38,6 +38,11 @@ ## 第二部分：HTML/CSS/JavaScript基础实践（4小时） +练习参考： [html-css-javascript-projects](https://github.com/solygambas/html-css-javascript-projects) + +[100-days-of-javascript](https://github.com/AsmrProg-YT/100-days-of-javascript) + + 1. **HTML5标签使用** - 使用HTML5的新标签（如`
`、`