f3bdaa4e88
- Introduced a new script to check TypeScript lesson files for errors. - Created a main TypeScript file to render lessons and their details. - Added lesson definitions with starter and answer codes. - Implemented a user interface for navigating and running lessons. - Styled the application with CSS for a better user experience. - Updated README to reflect the new TypeScript section and usage instructions.
177 lines
5.4 KiB
Markdown
177 lines
5.4 KiB
Markdown
# DOM + 事件 + 异步
|
||
|
||
这部分只解决一个问题：你能不能让页面里的元素被 JavaScript 真正控制起来，并对用户操作和异步结果做出响应。
|
||
|
||
## 学完后你应该掌握
|
||
|
||
- 如何获取页面元素
|
||
- 如何修改文本、样式和类名
|
||
- 如何创建、插入和删除节点
|
||
- 如何监听点击、输入、提交等事件
|
||
- `preventDefault()` 和 `stopPropagation()` 的常见场景
|
||
- 事件委托的基本写法
|
||
- `prepend()`、`classList.remove()` 的基础使用
|
||
- `setTimeout` 的异步顺序
|
||
- Promise 的基础用法
|
||
- `async` / `await` 的基础写法
|
||
- 如何把 DOM、事件、异步组合成一个小页面
|
||
|
||
## 这一章在解决什么
|
||
|
||
前面三章分别解决了：
|
||
|
||
- 页面有什么结构
|
||
- 页面长什么样
|
||
- 代码逻辑怎么写
|
||
|
||
这一章开始，JavaScript 不再只是打印到控制台，而是要真正操作页面。
|
||
|
||
它回答的是：
|
||
|
||
- 我怎么拿到某个按钮或输入框
|
||
- 用户点击后页面怎么变
|
||
- 表单提交后怎么处理
|
||
- 数据晚一点回来时页面怎么更新
|
||
|
||
## 必须建立的 5 个核心意识
|
||
|
||
### 1. 先选中元素，再操作元素
|
||
|
||
DOM 操作第一步不是“改”，而是“找到”。
|
||
|
||
常见方式：
|
||
|
||
- `getElementById`
|
||
- `querySelector`
|
||
- `querySelectorAll`
|
||
|
||
### 2. 事件是页面和用户的连接点
|
||
|
||
页面本身不会“自动响应”。
|
||
|
||
是你通过事件监听告诉浏览器：
|
||
|
||
- 点了按钮要做什么
|
||
- 输入框变化后要做什么
|
||
- 提交表单要做什么
|
||
|
||
### 3. 改页面就是改 DOM
|
||
|
||
常见 DOM 改动包括：
|
||
|
||
- 改文字：`textContent`
|
||
- 改类名：`classList`
|
||
- 改样式：`style`
|
||
- 增删节点：`appendChild`、`remove`
|
||
|
||
### 4. 异步不是“慢一点执行”，而是“先不阻塞主流程”
|
||
|
||
比如：
|
||
|
||
- `setTimeout`
|
||
- Promise
|
||
- `async` / `await`
|
||
|
||
这些都意味着：当前代码先继续往下走，结果稍后回来再处理。
|
||
|
||
### 5. 一个完整交互通常是“事件 + DOM + 状态 + 异步”
|
||
|
||
例如点击“加载数据”按钮时：
|
||
|
||
1. 监听点击事件
|
||
2. 更新 loading 状态
|
||
3. 等待异步结果
|
||
4. 把结果渲染到页面
|
||
|
||
## 高频 API 速记
|
||
|
||
### 获取元素
|
||
|
||
- `document.getElementById()`
|
||
- `document.querySelector()`
|
||
- `document.querySelectorAll()`
|
||
|
||
### 修改元素
|
||
|
||
- `textContent`
|
||
- `innerHTML`
|
||
- `style`
|
||
- `classList.add()`
|
||
- `classList.remove()`
|
||
- `classList.toggle()`
|
||
|
||
### 节点操作
|
||
|
||
- `document.createElement()`
|
||
- `appendChild()`
|
||
- `prepend()`
|
||
- `remove()`
|
||
|
||
### 事件
|
||
|
||
- `addEventListener()`
|
||
- `event.target`
|
||
- `preventDefault()`
|
||
- `stopPropagation()`
|
||
|
||
### 异步
|
||
|
||
- `setTimeout()`
|
||
- `Promise`
|
||
- `.then()`
|
||
- `async`
|
||
- `await`
|
||
|
||
## 学习顺序
|
||
|
||
1. 获取元素
|
||
2. 修改文本、类名、样式
|
||
3. 创建和删除节点
|
||
4. 点击事件
|
||
5. 表单提交和 `preventDefault`
|
||
6. 冒泡、委托和 `stopPropagation`
|
||
7. `setTimeout` 和异步顺序
|
||
8. Promise 渲染
|
||
9. `async` / `await`
|
||
10. 综合小页面
|
||
11. `input` / `change` 事件
|
||
12. `prepend`、`classList.remove` 和链接默认行为
|
||
|
||
## 练习目录
|
||
|
||
- [01-query-selectors/README.md](/Users/lijiaqing/home/wwwroot/front-end-example/04-dom-events-async/01-query-selectors/README.md)
|
||
- [02-text-class-style/README.md](/Users/lijiaqing/home/wwwroot/front-end-example/04-dom-events-async/02-text-class-style/README.md)
|
||
- [03-create-and-remove/README.md](/Users/lijiaqing/home/wwwroot/front-end-example/04-dom-events-async/03-create-and-remove/README.md)
|
||
- [04-click-counter/README.md](/Users/lijiaqing/home/wwwroot/front-end-example/04-dom-events-async/04-click-counter/README.md)
|
||
- [05-form-submit-and-prevent-default/README.md](/Users/lijiaqing/home/wwwroot/front-end-example/04-dom-events-async/05-form-submit-and-prevent-default/README.md)
|
||
- [06-bubbling-and-delegation/README.md](/Users/lijiaqing/home/wwwroot/front-end-example/04-dom-events-async/06-bubbling-and-delegation/README.md)
|
||
- [07-timers-and-async-order/README.md](/Users/lijiaqing/home/wwwroot/front-end-example/04-dom-events-async/07-timers-and-async-order/README.md)
|
||
- [08-promise-and-render/README.md](/Users/lijiaqing/home/wwwroot/front-end-example/04-dom-events-async/08-promise-and-render/README.md)
|
||
- [09-async-await-panel/README.md](/Users/lijiaqing/home/wwwroot/front-end-example/04-dom-events-async/09-async-await-panel/README.md)
|
||
- [10-final-dashboard/README.md](/Users/lijiaqing/home/wwwroot/front-end-example/04-dom-events-async/10-final-dashboard/README.md)
|
||
- [11-input-live-preview/README.md](/Users/lijiaqing/home/wwwroot/front-end-example/04-dom-events-async/11-input-live-preview/README.md)
|
||
- [12-prepend-remove-and-link-default/README.md](/Users/lijiaqing/home/wwwroot/front-end-example/04-dom-events-async/12-prepend-remove-and-link-default/README.md)
|
||
|
||
## 过关标准
|
||
|
||
如果你能独立做到下面这些，就说明这一章已经基本过关：
|
||
|
||
- 能正确选中页面里的元素
|
||
- 能改文字、类名和内联样式
|
||
- 能动态创建和删除列表项
|
||
- 能给按钮、表单绑定事件
|
||
- 能理解事件冒泡和事件委托
|
||
- 能在需要时使用 `preventDefault()` 和 `stopPropagation()`
|
||
- 能处理 `input` / `change` 这类常见表单事件
|
||
- 能使用 `prepend()`、`classList.remove()` 完成简单 DOM 调整
|
||
- 能理解 `setTimeout` 的异步顺序
|
||
- 能用 Promise 和 `async` / `await` 处理一个简单异步流程
|
||
- 能做出一个有真实交互的小页面
|
||
|
||
## 学习建议
|
||
|
||
- 每个练习都用浏览器打开 `starter.html`
|
||
- 打开开发者工具，边看页面边看控制台
|
||
- 一个交互没反应时，先确认元素有没有选中
|
||
- 一个异步结果不对时，先打印中间状态
|