- 使用JavaScript控制行为
- JavaScript基本语法
- 面向对象
- BOM
- DOM
- JavaScript API
使用JavaScript控制行为
JavaScript基本语法
- 语句和注释
- 变量和数据类型
- 声明和赋值
- 简单数据类型和复杂数据类型
- 变量的命名规则
- 表达式和运算符
- 赋值运算符
- 算术运算符
- 比较运算符
- 逻辑运算符
- 分支结构
if...else...
switch...cas...default...
- 循环结构
for
循环while
循环do...while
循环
- 数组
- 创建数组
- 操作数组中的元素
- 函数
- 声明函数
- 调用函数
- 参数和返回值
- 匿名函数
- 立即调用函数
面向对象
- 对象的概念
- 创建对象的字面量语法
- 访问成员运算符
- 创建对象的构造函数语法
this
关键字
- 添加和删除属性
delete
关键字
- 标准对象
Number
/String
/Boolean
/Symbol
/Array
/Function
Date
/Error
/Math
/RegEx
/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
localStorage.colorSetting = '#a4509b';
localStorage['colorSetting'] = '#a4509b';
localStorage.setItem('colorSetting', '#a4509b');
获取位置信息 -
geolocation
navigator.geolocation.getCurrentPosition(function(pos) {
console.log(pos.coords.latitude)
console.log(pos.coords.longitude)
})
从服务器获取数据 - Fetch API
- 绘制图形 -
<canvas>
的API - 音视频 -
<audio>
和<video>
的API