JavaScript

JavaScript：document.getElementById()，document.getElementByTagName()，一切数据皆为对象，而对象又是由函数产生，而函数是JS的一等公民，《Programming Language Pragmatics》书中这样定义等等

JavaScript

• DOM
  • DOM位置
    • offsetTop
    • offectLeft
  • DOM大小
    • clientHeight
    • clientWidth
    • scrollHeight
    • scrollWidth
  • 获取DOM
    • document.getElementById()
    • document.getElementByTagName()
    • document.getElementByClassName()
    • document.getElementByName
    • document.querySelector
    • document.querySelectorAll
• 数据类型
  • 一切数据皆为对象，而对象又是由函数产生，而函数是JS的一等公民
  • 什么是一等公民
    • 《Programming Language Pragmatics》书中这样定义:
      • In general, a value in a programming language is said to have first-class status if it can be passed as a parameter, returned from a subroutine, or assigned into a variable.
      • 在编程语言中，如果一个值可以作为参数传递、从子例程返回或赋值给一个变量，则该值具有一级状态。
    • 1. 将函数作为参数：
      • setTimeout(function(){ alert('hello')},1000);
    • 2.将函数作为返回：
      • function(){return function(){ alert('hello')}};
    • 3.将函数赋值给变量：
      • var add = function(a,b){ return a+ b;};
  • 基本数据类型
    • number
    • string
    • boolean
    • undefined
    • null
    • symbol
  • 引用数据类型
    • array
    • object
    • function
      • 一等公民
    • date
    • regex
  • 判断类型的方式
    • typeof Objct
    • Object.toString.call()
    • Object.constructor
    • Array特有：Array.isArray(Object)
  • 声明变量的方式
    • 1.直接使用变量名：
      • a=1; 等于 window.a = 1;
      • 不建议使用
    • 2. 全局变量：var
      • var b = 2;
      • 依然可以使用window.b访问到
    • 3. 区域变量：let
      • let c = 3;
      • 仅能在声明变量的作用域内使用，且不能重复声明
    • 4. 只读常量：const
      • const d = 4;
      • 定义常量，仅能在对应作用域内使用，且不能修改变量的值
    • 5.函数声明：function
      • function e = () => alert('hello');
      • 作用域因浏览器环境不同而异
    • 6.类声明： class
      • class f {constructor(name){ this.name = name}};
    • 7. 导入声明：import
      • import { g } from "h"
  • 变量提升
  • 内置对象
    • window
    • global
• 事件
  • 事件绑定
    • HTML事件绑定
      • Button
    • JS为HTML添加事件绑定
      • var button = document.getElementById('id');
        • button.onclick = () => { alert('hello') };
    • 为DOM添加事件监听
      • var button = document.getElementById('id');
        • button.addEventListener('click', () => { alert('hello') });
      • 解除事件监听绑定
        • button.removeEventListener('click', () => {});
    • ...
  • 事件类型
    • 焦点
      • focus
      • blur
    • 鼠标
      • click
      • mouseover
      • mouseout
      • mousedown
      • mouseup
      • mousemove
    • 键盘
      • keydown
      • keyup
      • keypress
    • 表单
      • submit
      • reset
      • change
    • UI
      • load
      • unload
      • beforeunload
      • select
      • resize
      • scroll
      • ...
  • 事件流和事件传播
    • 冒泡
    • 捕获
  • 默认事件
    • 部分DOM标签的事件具有默认事件，在相应事件后执行特定的操作，但往往我们不希望执行此默认事件，所以需要手动禁止默认事件的相应。
    • 方法一：return false
    • 方法二：e.preventDefault()
• 延时器
  • 定时器
    • setTimeout
    • clearTimeout
  • 循环计时器
    • setInterval()
    • clearInterval()
  • 同步事件执行完毕立即执行
    • setImmediate
  • 根据浏览器帧率调节执行频率
    • requestAnimationFrame
    • cancelAnimationFrame
• 原型和原型链
  • 原型对象
    • prototype
    • 每一个函数都有一个原型
  • 隐式原型
    • proto
    • 每个对象都有一个隐式原型
    • 关系
      • 每一个对象的隐式原型都等于创建这个对象的构造器函数的原型对象
      • 即：var obj = new Object();
        • obj.
        • proto === Object.prototype;
  • 应用
    • 当访问一个对象中的属性时，会根据该对象的原型链进行查找,直至找不到返回undefined
    • 即，obj.p -> obj.
      • proto .p -> obj. proto proto .p ->...
    • var arr = [1,2,3];
      • arr.forEach( item => {console.log(e)}); 其中，forEach方法就是在arr的构造函数Array的方法
• 作业
  • 实现一个ToDoList
  • 要求
    • 1. 可以添加ToDoItem
    • 2.可以将ToDoItem设置为已完成
    • 3.可以删除ToDoItem
    • 4.ToDoList内容可以在窗口关闭后再次打开时可以恢复上次的记录
  • 加分项
    • 1. 可以为每个ToDoItem设置定时
    • 2. 为ToDoItem的新增、完成、删除添加动画效果
• 高阶
  • 浏览器事件环
    • 同步与异步事件
    • 宏任务和微任务
  • 难点
    • this
      • 箭头函数
      • call
      • apply
      • bind
    • 闭包
      • 作用
      • 示例
        • 防抖
        • 节流
    • copy
      • 浅拷贝
      • 深拷贝