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.
26 lines
882 B
Markdown
26 lines
882 B
Markdown
# 练习 11：input 实时预览
|
||
|
||
## 目标
|
||
|
||
学会处理输入类事件，让页面随着用户输入实时变化。
|
||
|
||
## 你要练什么
|
||
|
||
- `input` 事件
|
||
- `change` 事件
|
||
- 表单值读取
|
||
- 实时 DOM 更新
|
||
|
||
## 任务
|
||
|
||
- 在输入框输入昵称时，实时更新预览标题
|
||
- 在文本域输入学习目标时，实时更新预览内容
|
||
- 切换学习阶段下拉框时，更新阶段标签
|
||
|
||
## 文件
|
||
|
||
- [starter.html](/Users/lijiaqing/home/wwwroot/front-end-example/04-dom-events-async/11-input-live-preview/starter.html)
|
||
- [starter.js](/Users/lijiaqing/home/wwwroot/front-end-example/04-dom-events-async/11-input-live-preview/starter.js)
|
||
- [answer.html](/Users/lijiaqing/home/wwwroot/front-end-example/04-dom-events-async/11-input-live-preview/answer.html)
|
||
- [answer.js](/Users/lijiaqing/home/wwwroot/front-end-example/04-dom-events-async/11-input-live-preview/answer.js)
|