mirror of
https://gitee.com/many2many/java-web.git
synced 2025-01-11 14:40:55 +08:00
add something
This commit is contained in:
parent
42caebe53a
commit
ed6d72e413
@ -185,7 +185,7 @@ HTML 元素(标签):
|
|||||||
![](./resources/imgs/html-rendering.svg)
|
![](./resources/imgs/html-rendering.svg)
|
||||||
|
|
||||||
|
|
||||||
CSS 语法:
|
**CSS 语法:**
|
||||||
|
|
||||||
```
|
```
|
||||||
选择器 {
|
选择器 {
|
||||||
@ -194,7 +194,7 @@ CSS 语法:
|
|||||||
...
|
...
|
||||||
}
|
}
|
||||||
```
|
```
|
||||||
示例:
|
> 示例:
|
||||||
```css
|
```css
|
||||||
body {
|
body {
|
||||||
background-color: #f0f0f0;
|
background-color: #f0f0f0;
|
||||||
@ -280,6 +280,8 @@ CSS选择器用以筛选出要添加样式的元素。
|
|||||||
|
|
||||||
[现代 JavaScript 教程](https://zh.javascript.info/)
|
[现代 JavaScript 教程](https://zh.javascript.info/)
|
||||||
|
|
||||||
|
[Github: 30-Days-Of-JavaScript](https://github.com/Asabeneh/30-Days-Of-JavaScript)
|
||||||
|
|
||||||
##### 2.2.3.1 基础语法
|
##### 2.2.3.1 基础语法
|
||||||
- **变量声明**:理解`let`, `const`, `var`的区别与使用场景。
|
- **变量声明**:理解`let`, `const`, `var`的区别与使用场景。
|
||||||
- **数据类型**:掌握字符串、数字、布尔值、数组、对象等基本数据类型。
|
- **数据类型**:掌握字符串、数字、布尔值、数组、对象等基本数据类型。
|
||||||
@ -288,9 +290,21 @@ CSS选择器用以筛选出要添加样式的元素。
|
|||||||
- **循环结构**:for, while, do...while循环的应用。
|
- **循环结构**:for, while, do...while循环的应用。
|
||||||
- **函数定义与调用**:了解如何定义及调用函数,参数传递方式。
|
- **函数定义与调用**:了解如何定义及调用函数,参数传递方式。
|
||||||
- **数组操作**:数组的创建、遍历方法(如map(), filter(), reduce())。
|
- **数组操作**:数组的创建、遍历方法(如map(), filter(), reduce())。
|
||||||
- **对象操作**:创建对象字面量、属性访问、构造函数与原型链。
|
- **对象操作**:创建对象字面量、属性访问、构造函数。
|
||||||
- **错误处理**:try...catch...finally语句。
|
- **错误处理**:try...catch...finally语句。
|
||||||
|
```javascript
|
||||||
|
try {
|
||||||
|
// 可能引发异常的代码
|
||||||
|
console.log('try块中的代码');
|
||||||
|
} catch (error) {
|
||||||
|
// 异常处理代码
|
||||||
|
console.log('发生了一个错误:', error.message);
|
||||||
|
} finally {
|
||||||
|
// 无论是否发生异常,这里的代码都会被执行
|
||||||
|
console.log('finally子句中的代码');
|
||||||
|
}
|
||||||
|
|
||||||
|
```
|
||||||
##### 2.2.3.2 面向对象编程
|
##### 2.2.3.2 面向对象编程
|
||||||
- **类与对象**:理解类的声明、实例化和继承。
|
- **类与对象**:理解类的声明、实例化和继承。
|
||||||
- **继承机制**:理解原型继承和类继承的区别。
|
- **继承机制**:理解原型继承和类继承的区别。
|
||||||
@ -312,10 +326,8 @@ CSS选择器用以筛选出要添加样式的元素。
|
|||||||
#### 2.2.3.5 ES6+特性
|
#### 2.2.3.5 ES6+特性
|
||||||
- **箭头函数**:简化函数定义。
|
- **箭头函数**:简化函数定义。
|
||||||
|
|
||||||
ES6允许使用 “箭头”( => )定义函数。
|
> ES6允许使用 “箭头”( => )定义函数。
|
||||||
|
|
||||||
|
|
||||||
示例:
|
|
||||||
```javascript
|
```javascript
|
||||||
let v = v => v;
|
let v = v => v;
|
||||||
|
|
||||||
@ -326,7 +338,7 @@ ES6允许使用 “箭头”( => )定义函数。
|
|||||||
|
|
||||||
```
|
```
|
||||||
|
|
||||||
如果箭头函数 不需要参数 或 需要多个参数 ,就在剪头前使用()括起来参数部分。
|
> 如果箭头函数 不需要参数 或 需要多个参数 ,就在剪头前使用()括起来参数部分。
|
||||||
```javascript
|
```javascript
|
||||||
let f = () => 5;
|
let f = () => 5;
|
||||||
// 等同于
|
// 等同于
|
||||||
@ -339,7 +351,7 @@ let sum = function(num1, num2){
|
|||||||
};
|
};
|
||||||
|
|
||||||
```
|
```
|
||||||
箭头函数的一个用处是简化回调函数。
|
> 箭头函数的一个用处是简化回调函数。
|
||||||
```javascript
|
```javascript
|
||||||
// 普通函数写法
|
// 普通函数写法
|
||||||
let values = [2,5,8,6]
|
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字符编码和字符集(了解)
|
#### 2.2.4字符编码和字符集(了解)
|
||||||
|
|
||||||
[字符编码和字符集PPT](./resources/javaweb-week-02-chartset.pptx)
|
[字符编码和字符集PPT](./resources/javaweb-week-02-chartset.pptx)
|
||||||
|
@ -38,6 +38,11 @@
|
|||||||
|
|
||||||
## 第二部分:HTML/CSS/JavaScript基础实践(4小时)
|
## 第二部分: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标签使用**
|
1. **HTML5标签使用**
|
||||||
- 使用HTML5的新标签(如`<header>`、`<nav>`、`<section>`、`<article>`等)构建页面结构。
|
- 使用HTML5的新标签(如`<header>`、`<nav>`、`<section>`、`<article>`等)构建页面结构。
|
||||||
- 练习使用HTML5的表单控件,如日期选择器、电子邮件验证等。
|
- 练习使用HTML5的表单控件,如日期选择器、电子邮件验证等。
|
||||||
|
Loading…
Reference in New Issue
Block a user