Show tasks

JavaScript 编程语言

• 简介
  • JavaScript 简介
  • 手册与规范
  • 代码编辑器
  • 开发者控制台
• JavaScript 基础知识
  • Hello, world!
    • 显示一个提示语
    • 使用外部的脚本显示一个提示语
  • 代码结构
  • 现代模式，"use strict"
  • 变量
    • 使用变量
    • 给出正确的名字
    • 大写的常量？
  • 数据类型
    • 字符串的反引号
  • 交互：alert、prompt 和 confirm
    • 创建一个简单的页面
  • 类型转换
  • 基础运算符，数学运算
    • 后置运算符和前置运算符
    • 赋值结果
    • 类型转换
    • 修正加法
  • 值的比较
    • 值的比较
  • 条件分支：if 和 '?'
    • if（值为 0 的字符串）
    • JavaScript 的名字
    • 显示符号
    • 使用 '?' 重写 'if' 语句
    • 使用 '?' 重写 'if..else' 语句
  • 逻辑运算符
    • 或运算的结果是什么？
    • 或运算和 alert 的结果是什么？
    • 与操作的结果是什么？
    • 与运算连接的 alert 的结果是什么？
    • 或运算、与运算、或运算串联的结果
    • 检查值是否位于范围区间内
    • 检查值是否位于范围之外
    • 一个关于 "if" 的问题
    • 登录校验
  • 空值合并运算符 '??'
  • 循环：while 和 for
    • 最后一次循环的值
    • while 循环显示哪些值？
    • "for" 循环显示哪些值？
    • 使用 for 循环输出偶数
    • 用 "while" 替换 "for"
    • 重复输入，直到正确为止
    • 输出素数（prime）
  • "switch" 语句
    • 将 "switch" 结构重写为 "if" 结构
    • 将 "if" 结构重写为 "switch" 结构
  • 函数
    • 是否需要 “else”？
    • 使用 '?' 或者 '||' 重写函数
    • 函数 min(a, b)
    • 函数 pow(x,n)
  • 函数表达式
  • 箭头函数，基础知识
    • 用箭头函数重写
  • JavaScript 特性
• 代码质量
  • 在浏览器中调试
  • 代码风格
    • 不好的风格
  • 注释
  • 忍者代码
  • 使用 Mocha 进行自动化测试
    • 测试代码中有什么错误？
  • Polyfill 和转译器
• Object（对象）：基础知识
  • 对象
    • 你好，对象
    • 检查空对象
    • 对象属性求和
    • 将数值属性值都乘以 2
  • 对象引用和复制
  • 垃圾回收
  • 对象方法，"this"
    • 在对象字面量中使用 "this"
    • 创建一个计算器
    • 链式（调用）
  • 构造器和操作符 "new"
    • 两个函数 —— 一个对象
    • 创建 new Calculator
    • 创建 new Accumulator
  • 可选链 "?."
  • symbol 类型
  • 对象 —— 原始值转换
• 数据类型
  • 原始类型的方法
    • 我能为字符串添加一个属性吗？
  • 数字类型
    • 来自访问者的数字的总和
    • 为什么 6.35.toFixed(1) == 6.3？
    • 重复，直到输入的是一个数字
    • 一个偶发的无限循环
    • 从 min 到 max 的随机数
    • 从 min 到 max 的随机整数
  • 字符串
    • 首字母大写
    • 检查 spam
    • 截断文本
    • 提取货币
  • 数组
    • 数组被拷贝了吗?
    • 数组操作。
    • 在数组上下文调用
    • 输入数字求和
    • 最大子数组
  • 数组方法
    • 将 border-left-width 转换成 borderLeftWidth
    • 过滤范围
    • 原位（in place）过滤范围
    • 降序排列
    • 复制和排序数组
    • 创建一个可扩展的 calculator
    • 映射到 names
    • 映射到对象
    • 按年龄对用户排序
    • 随机排列数组
    • 获取平均年龄
    • 数组去重
    • 从数组创建键（值）对象
  • Iterable object（可迭代对象）
  • Map and Set（映射和集合）
    • 过滤数组中的唯一元素
    • 过滤字谜（anagrams）
    • 迭代键
  • WeakMap and WeakSet（弱映射和弱集合）
    • 存储 "unread" 标识
    • 保存阅读日期
  • Object.keys，values，entries
    • 属性求和
    • 计算属性数量
  • 解构赋值
    • 解构赋值
    • 最高薪资
  • 日期和时间
    • 创建日期
    • 显示星期数
    • 欧洲的星期表示方法
    • 许多天之前是哪个月几号？
    • 某月的最后一天？
    • 今天过去了多少秒？
    • 距离明天还有多少秒？
    • 格式化相对日期
  • JSON 方法，toJSON
    • 将对象转换为 JSON，然后再转换回来
    • 排除反向引用
• 函数进阶内容
  • 递归和堆栈
    • 对数字求和到给定值
    • 计算阶乘
    • 斐波那契数
    • 输出一个单链表
    • 反向输出单链表
  • Rest 参数与 Spread 语法
  • 变量作用域，闭包
    • 函数会选择最新的内容吗？
    • 哪些变量可用呢？
    • Counter 是独立的吗？
    • Counter 对象
    • if 内的函数
    • 闭包 sum
    • 变量可见吗？
    • 通过函数筛选
    • 按字段排序
    • 函数大军
  • 老旧的 "var"
  • 全局对象
  • 函数对象，NFE
    • 为 counter 添加 set 和 decrease 方法
    • 任意数量的括号求和
  • "new Function" 语法
  • 调度：setTimeout 和 setInterval
    • 每秒输出一次
    • setTimeout 会显示什么？
  • 装饰器模式和转发，call/apply
    • 间谍装饰器
    • 延时装饰器
    • 防抖装饰器
    • 节流装饰器
  • 函数绑定
    • 作为方法的绑定函数
    • 二次 bind
    • bind 后的函数属性
    • 修复丢失了 "this" 的函数
    • 偏函数在登录中的应用
  • 深入理解箭头函数
• 对象属性配置
  • 属性标志和属性描述符
  • 属性的 getter 和 setter
• 原型，继承
  • 原型继承
    • 使用原型
    • 搜索算法
    • 写在哪里？
    • 为什么两只仓鼠都饱了？
  • F.prototype
    • 修改 "prototype"
    • 使用相同的构造函数创建一个对象
  • 原生的原型
    • 给函数添加一个 "f.defer(ms)" 方法
    • 将装饰器 "defer()" 添加到函数
  • 原型方法，没有 __proto__ 的对象
    • 为 dictionary 添加 toString 方法
    • 调用方式的差异
• 类
  • Class 基本语法
    • 重写为 class
  • 类继承
    • 创建实例时出错
    • 扩展 clock
  • 静态属性和静态方法
    • 类扩展自对象？
  • 私有的和受保护的属性和方法
  • 扩展内建类
  • 类检查："instanceof"
    • 不按套路出牌的 instanceof
  • Mixin 模式
• 错误处理
  • 错误处理，"try...catch"
    • 使用 finally 还是直接放在代码后面？
  • 自定义 Error，扩展 Error
    • 继承 SyntaxError
• Promise，async/await
  • 简介：回调
  • Promise
    • 用 promise 重新解决？
    • 基于 promise 的延时
    • 带有 promise 的圆形动画
  • Promise 链
    • Promise：then 对比 catch
  • 使用 promise 进行错误处理
    • setTimeout 中的错误
  • Promise API
  • Promisification
  • 微任务（Microtask）
  • async/await
    • 用 async/await 来重写
    • 使用 async/await 重写 "rethrow"
    • 在非 async 函数中调用 async 函数
• Generator，高级 iteration
  • generator
    • 伪随机 generator
  • 异步迭代和 generator
• 模块
  • 模块 (Module) 简介
  • 导出和导入
  • 动态导入
• 杂项
  • Proxy 和 Reflect
    • 读取不存在的属性时出错
    • 访问 array[-1]
    • 可观察的（Observable）
  • Eval：执行代码字符串
    • Eval-计算器
  • 柯里化（Currying）
  • Reference Type
    • 检查语法
    • 解释 "this" 的值
  • BigInt
  • Unicode —— 字符串内幕

浏览器：文档，事件，接口

• Document
  • 浏览器环境，规格
  • DOM 树
  • 遍历 DOM
    • DOM 子节点
    • 兄弟节点问题
    • 选择所有对角单元格
  • 搜索：getElement*，querySelector*
    • 搜索元素
  • 节点属性：type，tag 和 content
    • 计数后代
    • nodeType 中是什么？
    • 注释中的标签
    • 层次结构中的 "document" 在哪里？
  • 特性和属性（Attributes and properties）
    • 获取特性
    • 将外部链接设为橙色
  • 修改文档（document）
    • createTextNode vs innerHTML vs textContent
    • 清除元素
    • 为什么留下 "aaa"？
    • 创建一个列表
    • 从对象创建树
    • 在树中显示后代
    • 创建一个日历
    • 使用 setInterval 的彩色时钟
    • 将 HTML 插入到列表中
    • 对表格进行排序
  • 样式和类
    • 创建一个通知
  • 元素大小和滚动
    • 相对于底部滚动了多少？
    • 滚动条的宽度是多少？
    • 将小球置于区域（field）中心
    • CSS width 与 clientWidth 的不同点
  • Window 大小和滚动
  • 坐标
    • 查找区域的窗口坐标
    • 在元素旁显示一个 note
    • 在元素旁（absolute）显示一个 note
    • 把 note 放在元素内部（absolute）
• 事件简介
  • 浏览器事件简介
    • 点击隐藏
    • 隐藏自己
    • 哪个处理程序会运行？
    • 让球在球场中移动
    • 创建滑动菜单
    • 添加关闭按钮
    • 轮播图
  • 冒泡和捕获
  • 事件委托
    • 使用委托隐藏消息
    • 树形菜单
    • 可排序的表格
    • 工具提示行为
  • 浏览器默认行为
    • 为什么 "return false" 不起作用？
    • 捕获元素中的链接
    • 图册
  • 创建自定义事件
• UI 事件
  • 鼠标事件
    • 可选列表
  • 移动鼠标：mouseover/out，mouseenter/leave
    • 改进的工具提示行为
    • “智能”工具提示
  • 鼠标拖放事件
    • 滑动条
    • 将超级英雄放置在足球场周围
  • 指针事件
  • 键盘：keydown 和 keyup
    • 扩展热键
  • 滚动
    • 无限的页面
    • Up/down 按钮
    • 加载可视化图像
• 表单，控件
  • 表单属性和方法
    • 在 select 元素中添加一个选项
  • 聚焦：focus/blur
    • 可编辑的 div
    • 点击即可编辑单元格
    • 键盘移动老鼠
  • 事件：change，input，cut，copy，paste
    • 存款计算器
  • 表单：事件和方法提交
    • 模态框表单
• 加载文档和其他资源
  • 页面生命周期：DOMContentLoaded，load，beforeunload，unload
  • 脚本：async，defer
  • 资源加载：onload，onerror
    • 使用回调函数加载图片
• 杂项
  • DOM 变动观察器（Mutation observer）
  • 选择（Selection）和范围（Range）
  • 事件循环：微任务和宏任务
    • 下方这段代码的输出是什么？

其他文章

• Frame 和 window
  • 弹窗和 window 的方法
  • 跨窗口通信
  • 点击劫持攻击
• 二进制数据，文件
  • ArrayBuffer，二进制数组
    • 拼接类型化数组
  • TextDecoder 和 TextEncoder
  • Blob
  • File 和 FileReader
• 网络请求
  • Fetch
    • 从 GitHub fetch 用户信息
  • FormData
  • Fetch：下载进度
  • Fetch：中止（Abort）
  • Fetch：跨源请求
    • 我们为什么需要源（Origin）？
  • Fetch API
  • URL 对象
  • XMLHttpRequest
  • 可恢复的文件上传
  • 长轮询（Long polling）
  • WebSocket
  • Server Sent Events
• 在浏览器中存储数据
  • Cookie，document.cookie
  • LocalStorage，sessionStorage
    • 自动保存表单字段
  • IndexedDB
• 动画
  • 贝塞尔曲线
  • CSS 动画
    • 让飞机动起来（CSS）
    • 为飞机生成动画（CSS）
    • 圆圈动画
    • 带回调的圆圈动画
  • JavaScript 动画
    • 为弹跳的球设置动画
    • 设置动画使球向右移动
• Web components
  • 从星球轨道的高度讲起
  • Custom elements
    • 计时器元素实例
  • 影子 DOM（Shadow DOM）
  • 模板元素
  • Shadow DOM 插槽，组成
  • 给 Shadow DOM 添加样式
  • Shadow DOM 和事件（events）
• 正则表达式
  • 模式（Patterns）和修饰符（flags）
  • 字符类
  • Unicode：修饰符 "u" 和类 \p{...}
  • 锚点：字符串开始 ^ 和末尾 $
    • 正则表达式 ^$
  • 锚点 ^ $ 的多行模式，修饰符 "m"
  • 词边界：\b
    • 查找时间
  • 转义，特殊字符
  • 集合和范围 [...]
    • Java[^script]
    • 找到 hh:mm 或者 hh-mm 格式的时间
  • 量词 +, *, ? 和 {n}
    • 如何找到省略号 "..."？
    • 针对 HTML 颜色的正则表达式
  • 贪婪量词和惰性量词
    • /d+? d+?/ 的匹配项
    • 查找 HTML 注释
    • 寻找 HTML 标签
  • 捕获组
    • 检查 MAC 地址
    • 找出形如 #abc 或 #abcdef 的颜色值
    • 找出所有数字
    • 解析表达式
  • 模式中的反向引用：\N 和 \k<name>
  • 选择 (OR) |
    • 查找编程语言
    • 查找 bbtag 对
    • 查找引用的字符串
    • 查找完整标签
  • 前瞻断言与后瞻断言
    • 找到非负整数
    • 在标签头后插入
  • 灾难性回溯
  • 粘性修饰符 "y"，在位置处搜索
  • 正则表达式和字符串的方法

• © 2007—2025  Ilya Kantor
• 关于本项目
• 联系我们