Logo
☆☆☆☆☆
0.0
Intermediate
10h

中级JavaScript:构建前端组件

学习如何将你对HTML、CSS和JavaScript的基础知识应用于构建美观且实用的前端组件。本课程中,你将逐步实现多个复杂组件,包括: - eBay的下拉菜单 - Gmail的自动校验表单 - Google的主搜索自动补全功能 - Twitter的无限滚动列表 - Medium的提示工具(tooltips) 你将学会如何应对常见的前端开发挑战,知道该问自己哪些问题,如何在构思出解决方案后进行设计,如何调试并处理错误,以及其他实用技巧。 最终目标是让你看到任何网页上的元素时,都能自信地说:“我能做出这个!”

7 Lessons
Included in Subscription Plan
Personalized Learning
Powered by AI
中级JavaScript:构建前端组件
学习如何将你对HTML、CSS和JavaScript的基础知识应用于构建美观且实用的前端组件。本课程中,你将逐步实现多个复杂组件,包括: - eBay的下拉菜单 - Gmail的自动校验表单 - Google的主搜索自动补全功能 - Twitter的无限滚动列表 - Medium的...

WHAT YOU'LL LEARN

从静态到动态构建下拉菜单,掌握交互状态与基础组件封装

Content

7 Lessons • 0 Quizzes • 0 Challenges

欢迎
  1. 1

    入门

构建下拉菜单
  1. 1

    菜单的重要特性

  2. 2

    基本 HTML 代码

  3. 3

    样式约定

  4. 4

    子菜单

  5. 5

    美化你的子菜单

  6. 6

    从服务器获取数据

  7. 7

    实现下拉菜单的行为

  8. 8

    从服务器获取多样化响应

  9. 9

    扩展子菜单功能

构建自动补全搜索
  1. 1

    理解自动补全搜索功能

  2. 2

    分析谷歌的自动补全功能

  3. 3

    构建谷歌自动补全功能的框架

  4. 4

    构建用于自动补全的服务器端点

  5. 5

    显示自动补全建议

  6. 6

    格式化自动补全建议

  7. 7

    为启用自动补全功能的引擎添加样式

  8. 8

    进一步美化启用自动补全功能的引擎

  9. 9

    为启用自动补全功能的引擎添加最后的样式修饰

创建工具提示
  1. 1

    什么是提示工具(Tooltip)?

  2. 2

    检查重要特性

  3. 3

    如何确定所选文本的中间位置?

  4. 4

    寻找中间节点的另一种方法

  5. 5

    让我们开始构建提示工具

  6. 6

    掌握位置

  7. 7

    错误 1:可选择的提示框

  8. 8

    错误 2:工具提示在点击时显示

  9. 9

    错误 3:多行高亮

  10. 10

    添加样式

  11. 11

    添加动画

构建一个自动验证表单
  1. 1

    什么是自动验证表单?

  2. 2

    用户输入分类规则

  3. 3

    构建表单

  4. 4

    验证失败时显示错误

  5. 5

    测试驱动开发

  6. 6

    单元测试

  7. 7

    集成测试

  8. 8

    验收测试

  9. 9

    每个字段的唯一错误

  10. 10

    正则表达式入门

  11. 11

    使用正则表达式验证用户输入

  12. 12

    显示实际错误

  13. 13

    表单样式设置

  14. 14

    密码规则实施指南

  15. 15

    限制条件与月份选择器

  16. 16

    总结

构建一个无限列表
  1. 1

    什么是无限列表?

  2. 2

    为无限列表构建 HTML 模板

  3. 3

    列表项的样式设置

  4. 4

    服务器与客户端通信

  5. 5

    从服务器生成推文

  6. 6

    客户端水合

  7. 7

    添加一个“加载”元素

  8. 8

    自动填充

从玩具组件到生产
  1. 1

    上线吧!

  2. 2

    资源调配

  3. 3

    框架和库

  4. 4

    项目结构

Certificate of Completion

Showcase your accomplishment by sharing your certificate of completion.

Course Author:Anonymous User

Reviews

Read reviews from students who have taken this course and share your own experience.

Reviews & Comments (0)