JS & TS
JS 是让网页动起来的关键，也是一种通用编程语言。这里的”动“不是移动，而是”动态“——不同的情况显示不同的内容。在本节中，我们对之前的页面施加一些魔法，使网页的背景可以随机变化、菜单内容可以展开收缩、表单提交后数据可以保存到文件中以备后用。此外，我们还会介绍 TS——带有类型系统的 JS。
环境配置
- 一个正常运行的浏览器
- 了解
F12开发人员工具的打开方式、元素页面、控制台和网络请求的位置和查看方式
运行方式
双击打开/frontend/public/index.html，或右键使用浏览器打开。
若已提前安装了 NodeJS，可以使用 serve 包启动本地服务器，然后用浏览器访问http://localhost:3000
npm install -g serve
serve ./frontend/public
已实现的功能
| 哈希值前 7 位 | 提交信息 | 对应知识点 | 实现效果 |
|---|---|---|---|
| b7ecf39 | feat(02): basic JS grammar | JS 基本语法（变量、数据类型、函数、逻辑判断）与引入方式 | 控制台问候语及计算三角形面积 |
| de7e4c2 | feat(02): dynamic content | JS 修改元素属性、数组、循环、定时 | 首页随机背景图、显示时间 |
| 5571504 | feat(02): dynamic elements | JS 动态创建删除元素、浏览器存储、事件、常用工具函数、定时、判等 | “关于这个工程”页步骤展开折叠、表单提交后提示 |
| aa8fc05 | feat(02): interact with the internet | 获取网络资源的两种方式、JS 异步函数、错误处理、JSON 对象 | 首页上的每日一句和“关于这个工程”页的樱花效果 |
| a5c14d7 | feat(02): imports & exports | JS 模块化编程、导出和导入的语法 | 无 |
作业
对于第一节中写好的“关于我”页面，添加 JS 代码使其页面内容“动起来”，要求至少有 2 处改动，其中至少 1 处使用了网络资源。
提示：一些可供参考的创意如下——
- 亮色/暗色模式（一个开关+许多改变 CSS 的 JS 代码）
- 中文/英文版（一个开关+许多改变文字的 JS 代码）
- 实时更新自己的 Github 公共仓库/最新操作（
https://api.github.com/users/<user-name>） - 滚动播放网易云音乐热榜歌曲（
https://api.vvhan.com/api/wyMusic/热歌榜?type=json）