使用JavaScript控制行为

JavaScript基本语法

  • 语句和注释
  • 变量和数据类型

    • 声明和赋值
    • 简单数据类型和复杂数据类型
    • 变量的命名规则
  • 表达式和运算符

    • 赋值运算符
    • 算术运算符
    • 比较运算符
    • 逻辑运算符
  • 分支结构

    • if…else…
    • switch…cas…default…
  • 循环结构

    • for循环
    • while循环
    • do…while循环
  • 数组

    • 创建数组
    • 操作数组中的元素
  • 函数

    • 声明函数
    • 调用函数
    • 参数和返回值
    • 匿名函数
    • 立即调用函数

面向对象

  • 对象的概念
  • 创建对象的字面量语法
  • 访问成员运算符
  • 创建对象的构造函数语法

    • this关键字
  • 添加和删除属性

    • delete关键字
  • 标准对象

    • Number / String / Boolean / Symbol / Array / Function
    • Date / Error / Math / RegExp / Object / Map / Set
    • JSON / Promise / Generator / Reflect / Proxy

BOM

  • window对象的属性和方法
  • history对象

    • forward() / back() / go()
  • location对象
  • navigator对象
  • screen对象

DOM

  • DOM树
  • 访问元素

    • getElementById() / querySelector()
    • getElementsByClassName() / getElementsByTagName() / querySelectorAll()
    • parentNode / previousSibling / nextSibling / children / firstChild / lastChild

      • 操作元素
      • nodeValue
      • innerHTML / textContent / createElement() / createTextNode() / appendChild() / insertBefore() / removeChild()
      • className / id / hasAttribute() / getAttribute() / setAttribute() / removeAttribute()
      • 事件处理
      • 事件类型
    • UI事件：load / unload / error / resize / scroll
    • 键盘事件：keydown / keyup / keypress
    • 鼠标事件：click / dbclick / mousedown / mouseup / mousemove / mouseover / mouseout
    • 焦点事件：focus / blur
    • 表单事件：input / change / submit / reset / cut / copy / paste / select

      • 事件绑定
    • HTML事件处理程序（不推荐使用，因为要做到标签与代码分离）
    • 传统的DOM事件处理程序（只能附加一个回调函数）
    • 事件监听器（旧的浏览器中不被支持）

      • 事件流：事件捕获 / 事件冒泡
      • 事件对象（低版本IE中的window.event）
    • target（有些浏览器使用srcElement）
    • type
    • cancelable
    • preventDefault()
    • stopPropagation()（低版本IE中的cancelBubble）

      • 鼠标事件 - 事件发生的位置
    • 屏幕位置：screenX和screenY
    • 页面位置：pageX和pageY
    • 客户端位置：clientX和clientY

      • 键盘事件 - 哪个键被按下了
    • keyCode属性（有些浏览器使用which）
    • String.fromCharCode(event.keyCode)

      • HTML5事件
    • DOMContentLoaded
    • hashchange
    • beforeunload

JavaScript API

  • 客户端存储 - localStorage和sessionStorage

    1. localStorage.colorSetting = ‘#a4509b’;
    2. localStorage[‘colorSetting’] = ‘#a4509b’;
    3. localStorage.setItem(‘colorSetting’, ‘#a4509b’);

  • 获取位置信息 - geolocation

    1. navigator.geolocation.getCurrentPosition(function(pos) {           
    2.     console.log(pos.coords.latitude)
    3.     console.log(pos.coords.longitude)
    4. })

  • 从服务器获取数据 - Fetch API

  • 绘制图形 - <canvas>的API
  • 音视频 - <audio>和<video>的API