html-css-js
1. roadmap
2. var、let、const
- 0001. var 关键字和变量
- 1. 📝 概述
- 2. 💡 思维导图
- 3. 📒 理解变量、内存、值
- 4. 💻 demos.11 -
var关键字的作用域特性 - 5. 📒 不再推荐使用
var来声明变量 - 6. 💻 demos.1 - 理解变量和值
- 7. 💻 demos.2 - 区分大小写
- 8. 💻 demos.3 - 变量的声明、赋值
- 9. 💻 demos.4 - 仅声明未赋值为 undefined
- 10. 💻 demos.5 - 全局变量
- 11. 💻 demos.6 - 使用未声明的变量会报错
- 12. 💻 demos.7 - 可一次声明多个变量
- 13. 💻 demos.8 - 理解“动态”类型
- 14. 💻 demos.9 - 变量重复声明无效
- 15. 💻 demos.10 - 变量重复声明并重新赋值
- 0002. 变量声明提升和暂时性死区
- 0003. let 关键字
- 0004. const 关键字
3. 作用域
- 0005. 区块和块级作用域
- 1. 📒 区块和块级作用域
- 2. 💻 demos.1 - 块级作用域
- 3. 💻 demos.2 - if 结构
- 4. 💻 demos.3 - 使用区块来隔离上下文
- 知识点：
- 区块是什么
- 区块的创建
- 区块的作用
- 块级作用域
- 学会使用区块来隔离上下文
- 区块“block”可以简单地理解为一对大括号
{}。var 没有块级作用域，let、const 有块级作用域。
4. js 执行环境
- 0006. 常见的两个 JS 运行环境：浏览器、NodeJS
- 1. 💻 demos.1 - 用浏览器来执行 JS 程序的基本流程
- 知识点：
- 学会使用浏览器环境运行 JS
- 学会使用 NodeJS 环境运行 JS
- 在开始学习 JS 的内容之前，首先需要知道如何运行 JS 代码。这篇笔记介绍如何使用浏览器跑 JS 程序。
- 在 nodejs 的学习笔记中，会介绍如何使用 nodejs 来执行 JS 程序（其实非常简单，安装好 nodejs，然后使用 node 命令 👉
node xxx.js就可以执行xxx.js了。）
5. 语句和表达式
- 0007. 语句和表达式
- 1. 📒 表达式（Expression）和语句（Statement）
- 2. 💻 demos.1 - 理解语句
- 3. 💻 demos.2 - 理解表达式
- 4. ✍️ 练习题
- 5. 🤔 问：写在前面的语句一定先于后面的语句执行吗？
- 6. 🤔 问：如何区分表达式和语句？
- 知识点：
- 语句
- 表达式
- 问：如何区分表达式和语句？
- 这篇笔记介绍了什么是语句，什么是表达式。其实语句和表达式是非常类似的，从概念上不容易区分。并且从定义来看，它们之间的关系还不是互斥的，而是相交的关系。也就是说有以下可能：
xxx是语句，不是表达式xxx是表达式，不是语句xxx可能同时是语句和表达式
- 很多时候我们并没有必要严格区分开我们所写某一代码片段到底是“表达式”还是“语句”，更重要的是能够理解这玩意儿能否“产生”一个值。
6. 符号
- 0078. JS 中的符号
- 0013. 转义符
- 1. 📒 转义符的含义和作用
- 2. 🔗 wiki 对转义符的介绍
- 3. 🤔 问：
escape character是什么意思？ - 4. 💻 练习题.1 - 按照指定格式打印系统时间
- 5. 🤔 问：在 js 的字符串中，\ 反斜杠表示转义，如何不转义，输入反斜杠呢？
- 6. 🤔 问：转义符
\r\n诞生的背景 - 知识点：
- 转义符是什么
- 转义符有什么用
- 当你在程序中需要输出一些特殊字符的时候，能够想要“转义符”这个知识点即可。
- 0014. 标识符
- 1. 📒 标识符
- 2. 💼 面试题.1 - 以下哪些标识符是合法的？
- 知识点：
- 标识符是什么
- 标识符的命名规范
- 标识符其实就是一个名字。程序中需要你指定名字的地方有很多，比如：变量名、函数名、参数名。需要掌握标识符的命名规则，可以拿笔记中的面试题练练手。
7. 流程控制语句
- 0008. 条件语句 - if 结构
- 1. 📒 条件语句 - if 结构
- 2. 💻 demos.1 - if 结构
- 3. 💻 demos.2 - if 加大括号
- 4. 💻 demos.3 - 区分赋值和比较
- 知识点：掌握 if 语句的使用。
- 笔记中除了介绍 if 语句的基本用法之外，还涉及到了一些和布尔运算、类型转换相关的知识点，这些也非常重要，详情会在其他笔记中介绍。
- 0009. 条件语句 - if...else 结构
- 1. 📒 if...else 基本结构
- 2. 💻 demos.2 - 认识基本的 if...else 结构
- 3. 💻 demos.3 - 多个 if...else 的情况
- 4. 💻 demos.1 - else 和最近的 if 配对
- 知识点：
- 掌握 if...else 基本结构
- 直到 if else 的配对规则
- 0010. 条件语句 - switch 结构
- 1. 📒 switch 基本结构
- 2. 💻 demos.1 - switch 中的 break 语句
- 3. 💻 demos.2 - 使用表达式
- 4. 💻 demos.3 - 匹配规则是严格相等
- 知识点：
- switch 结构
- break 语句
- 匹配校验 - 严格相等
===
- JavaScript 提供
if结构和switch结构，完成条件判断，即只有满足预设的条件，才会执行相应的语句。但是，相对于if语句而言，switch语句是很罕见的（甚至有的公司禁止使用，可能是考虑到条件语句咋用if就完全足够了，没必要再来一个switch）。
- 0011. 条件语句 - 三元运算符
- 1. 📒 三元运算符
? :的基本语法 - 2. 💻 demos.1 - 判偶数
- 知识点：
- 掌握三元运算符
?:的基本语法
- 掌握三元运算符
- 1. 📒 三元运算符
- 0012. 条件语句 - 练习
- 0015. 循环语句 - for 循环
- 1. 📒 for 循环
- 2. 💻 demos.1 - for 循环的基本使用
- 3. 💻 demos.2 - 使用 while 循环来替代 for 循环
- 4. 💻 demos.3 - 死循环
- 5. 🤔 问：应该使用
for循环还是while循环？ - 知识点：
- for 循环的基本结构
- 死循环
- 对比 for 循环和 while 循环
- 0016. 循环语句 - while 循环
- 0017. 循环语句 - do...while 循环
- 1. 📒 do...while 循环
- 2. 💻 demos.1 - 理解 do...while 循环的执行流程
- 3. 💻 demos.2 - 对比 do...while 和 while 之间的差异
- 知识点：
- 掌握 do...while 循环的基本语法
- do...while 循环不常用，快速过有个印象即可。
- 0018. 循环语句 - break 语句和 continue 语句
- 0019. 循环语句 - 标签（label）
- 1. 📒 标签
- 2. 💻 demos.1 - break、continue 加标签
- 3. 💻 demos.2 - 跳出区块
- 4. 💻 demos.3 - 不能跨区块跳
- 5. 🤔 问：如何看待“标签”？
- “标签” 在开发时几乎不会用到它，这个知识点不算重要，快速过一遍笔记，简单了解一下它的作用即可。
- 0020. 循环语句 - 练习
- 1. 💻 练习.1 - 在控制台中输出 100 个
* - 2. 💻 练习.2 - 输出 1-100 的所有数字
- 3. 💻 练习.3 - 输出 1-100 的所有奇数
- 4. 💻 练习.4 - 求 1-100 之间所有数字之和
- 5. 💻 练习.5 - 求 1-100 之间所有奇数之和
- 6. 💻 练习.6 - 求 1-10 之间所有数字的积
- 7. 💻 练习.7 - 输出一个 3 行 5 列的
*号矩阵 - 8. 💻 练习.8 - 用
*号输出一个 5 行的直角三角形 - 9. 💻 练习.9 - 用
*号输出一个 5 行的等腰三角形 - 10. 💻 练习.10 - 判断数字 233 是不是素数
- 11. 💻 练习.11 - 判断 1-100 哪些数是素数
- 12. 💻 练习.12 - 求 1-100 之间的所有素数之和
- 13. 💻 练习.13 - 输出 99 乘法表
- 14. 💻 练习.14 - 猜拳游戏
- 完成笔记中记录的相关练习题。
- 1. 💻 练习.1 - 在控制台中输出 100 个
- 0021. 注释
- 0022. 字面量
- 1. 🔗 MDN 对 字面量（Literal）的描述
- 2. 📒 字面量
- 3. 💻 demos.1 - 不同类型的字面量
- 知识点：
- 理解字面量是什么
- 字面量就是直接写在代码中的值。
8. 数据类型
- 0023. boolean 类型
- 0024. 与数值相关的全局方法
- 0025. 数值类型【扩展】
- 0026. 字符串定义
- 0027. 模板字符串
- 0028. 字符串与数组
- 0029. 字符串类型【扩展】
- 0030. null 和 undefined 类型
- 0031. 数组的本质
- 0032. 数组的索引和 length 属性
- 0033. 数组空位
- 0034. 伪数组
- 0035. 使用 in 运算符判断属性是否存在于数组中
- 0036. 使用 for...in 循环遍历数组
- 0037. 防抖、节流
- 1. 🔗 leetcode 相关例题
- 2. 📒 防抖
- 3. 📒 节流
- 4. 📒 防抖 vs. 节流
- 5. 💻 demos.1 - 防抖
- 6. 💻 demos.2 - 节流
- 知识点：
- 理解防抖
- 理解节流
- 完成 leetcode 算法题
- 防抖（debouncing）和节流（throttling）都是用来控制函数调用频率的技术解决方案。
- 0038. 数组类型【扩展】
- 0039. 数组【练习-1】
- 0040. 数组【练习-2】
- 0041. 对象属性读、写、删
- 0042. 对象的字符串键名的多种写法
- 0043. 判断某个属性是否存在于对象中
- 0044. 使用 for...in 循环遍历对象属性
- 0045. 对象的引用
- 0046. 对象类型【练习】
- 0047. 引用类型【面试题】
- 0048. 使用 instanceof 判断值的数据类型
- 0049. 使用 typeof 运算符判断值的数据类型
- 0050. 原型链
- 0051. 加法运算符
- 0052. 对象类型的加法运算【扩展】
- 0053. 作用域【面试题】
- 0054. 使用 customElements 创建一个 myButton 自定义元素
- 0055. 使用 MessageChannel 实现不同模块之间的相互通信
- 0056. 在 Worker 中使用 MessageChannel
- 0057. 使用 MessageChannel 实现父子窗口之间的互相通信
- 0058. new 命令
- 0059. 使用 Object.create() 创建实例对象
- 0060. 构造函数
9. 模块化
0062. ESM 绑定再导出 某个目录下提供一个导出该目录下所有需要导出的文件的入口文件。
demo/utils/index.js用于导入所有demo/utils/*.js模块导出的内容，然后再将这些导入的内容统一导出，外部如果需要使用demo/utils中的模块，只需要导入demo/utils/index.js即可。
10. ⚙️ window 对象
- 0079. window.onbeforeunload
- 1. 🔗 mdn - window.onbeforeunload
- 2. 💻 demos.1 - window.onbeforeunload 基本使用
window.onbeforeunload是一个事件处理器，它用于在窗口、页面或标签即将卸载时触发。- 当用户尝试关闭浏览器窗口、刷新页面、导航到另一个页面或者通过其他方式离开当前页面时，这个事件会被触发。
- 使用
onbeforeunload事件可以显示一个确认对话框给用户，询问他们是否真的要离开页面。 - 这在用户正在编辑表单或其他数据而尚未保存的情况下特别有用，因为它提供了一种防止意外丢失工作的方式。
- 滥用
onbeforeunload可能会导致糟糕的用户体验，应谨慎使用，仅在必要时提醒用户。
- 0080. window.confirm
- 1. 🔗 mdn - window.confirm
- 2. 💻 demos.1 - window.confirm()
- 在 Web 开发中，如果开发者想要在特定条件下触发类似的对话框，可以使用
window.confirm()方法。 - 这个方法会显示一个带有“确定”和“取消”按钮的基本对话框，并返回一个布尔值，表示用户的选择是“确定”（true）还是“取消”（false）。
- 0081. 使用 postMessage 实现跨标签页通信
- 1. 💻 demos.1 - 使用 postMessage 实现跨标签页通信
postMessageAPI 可用于实现不同窗口、标签页或 iframe 之间的安全通信。它允许你向另一个浏览上下文（如新打开的窗口、iframe 等）发送消息，并可以接收来自这些上下文的消息。
- 0108. DOMParser
- 0109. XSLTProcessor
11. css 属性
- 0105. background
- 1. ⏰ background-* 忘记哪个就找些 demo 来看看，并汇总到 demos.* 中。
- 2. 💻 demos.1 - 使用 background-image 设置背景
- MDN background
- https://developer.mozilla.org/zh-CN/docs/Web/CSS/background
- 在侧边目录中查看
background-* - background
- background-attachment
- background-blend-mode
- background-clip
- background-color
- background-image
- background-origin
- background-position
- background-position-x
- background-position-y
- background-repeat
- background-size
- 在侧边目录中查看
- https://developer.mozilla.org/zh-CN/docs/Web/CSS/background
- 0106. clip-path
- 1. 📒 clip-path 概述
- 2. 💻 demos.1 - 圆形裁剪
- 3. 💻 demos.3 - 椭圆形裁剪
- 4. 💻 demos.4 - 矩形裁剪
- 5. 💻 demos.2 - 多边形裁剪
- 6. 💻 demos.5 - 使用 svg 的裁剪路径来裁剪
- 7. 💻 demos.6 - 使用 svg 的裁剪路径来裁剪 - vite、github
- clip-path 的写法非常灵活，笔记中的 demo 仅记录了其中一部分写法，更多写法可以参考 MDN。
- 虽然路径的绘制方式有很多，但其实如果我们掌握好了 svg 的话，使用 svg 来绘制路径，想要啥效果就画啥效果，也就是说啥路径都可以自行指定。
- https://developer.mozilla.org/en-US/docs/Web/CSS/clip-path
- mdn - css clip-path 属性
- https://caniuse.com/?search=clip-path
- can i use clip-path
12. html 元素
13. prettier
14. eslint
- 0116. eslint 是什么？
- 0117. eslint 的配置文件的命名
- 0118. VSCode 中的 eslint 插件
- 0119. 使用 no-unused-vars 配置规则：未使用的变量报错
- 0120. eslint 配置格式
- 0121. 忽略文件 .eslintignore
15. color picker
16. ⏰ html-css
- 0082. img 元素宽度撑满，防止溢出容器
- 0083. 容器高度自适应图片高度
- 0084. 普通元素的参考系是父元素的 content-box
- 0085. absolute 定位元素的参考系是父元素中的定位元素的 padding-box
- 0086. 表单单选框
- 0087. 表单提交、重置按钮
- 0088. 表单元素 select 多选
- 0089. 密码输入框
- 0090. 认识 table 元素结构
- 0091. 定位练习 - 侧边广告
- 0092. 定位练习 - 视口居中
- 0093. 定位练习 - 视频卡片
- 0094. 盒模型 content-box vs. border-box
- 0095. 精灵图
- 0096. 属性值的计算过程
- 0097. 字体图标
- 0098. a 元素的爱恨法则
- 0099. 伪类选择器 first-child、nth-cihld
- 0100. 伪类选择器 nth-cihld
- 0101. 伪类选择器 first-child
- 0102. 伪类选择器 first-of-type
- 0103. 颜色的 alpha 通道
- 0104. 一些常见的通用 css