共计 7556 个字符，预计需要花费 19 分钟才能阅读完成。
web 浏览器中的 javascript
在 html 中嵌入 javascript
在 script 标签里面如果有 <、&，会被当成 xml 标记，需要使用如下写法：
<script>
<![CDATA[
// 代码
]]>
</script>
window 对象
浏览器定位与导航
载入新的文档
location.assign()
location.replace()
location.reload() 刷新
浏览历史
history.back()
history.forward()
history.go()
浏览器和屏幕信息
navigator:{
appName:,
appVersion:,
userAgent:,
platform:,
*onLine:,
*geolocation:,
*javaEnabled:,
*cookieEnable:,
}
// 星号为未标准化
错误处理
window.onerror
打开和关闭窗口
window.open()
window.open().opener
window.close()
窗体之间的关系
外部获取 iframe 内容，iframe.contentWindow
iframe 内部获取 iframe，window.frameElement
window.frames 引用自身包含的窗口或窗体的子窗体
脚本化文档
选取文档元素
getElementById
getElementByName
getElementByTagName
getElementByClassName
querySelectorAll 接受 css 选择器
querySelector 返回第一个匹配的元素
文档结构和遍历
作为节点树的文档
parentNode
childNodes
firstChild,lastChild
nextSibling，previoursSibling
nodeType
nodeValue
nodeName
作为元素树的文档
firstElementChild，lastElementChild
nextElementChild，previoursElementChild
childElementCount
获取和设置非标准 HTML 属性
getAttribute()
setAttribute()
hasAttribute()
removeAttribute()
操作来自其他命名空间中属性的 xml 文档，可以使用如下方法，第一参数为标识命名空间的 uri，第二个为属性的本地名字
getAttributeNS()
setAttributeNS()
hasAttributeNS()
removeAttributeNS()
作为 html 的元素内容
insertAdjacentHTML() 在指定元素相邻位置插入标记，第一个参数为位置（beforebegin、afterbegin、beforeend，afterend），第二个参数为插入的标记
作为纯文本的元素内容
node.textContent 读取或者获取文本内容，ie 使用 innerText
创建、插入和删除节点
创建节点
createElement 创建 Element 节点
createTextNode 创建文本节点
cloneNode 复制节点
importNode
插入节点
Node.appendChild
Node.insertBefore
删除和替换节点
removeChild
replaceChild
文档和元素的几何形状和滚动
？？？？？？？？
html 表单
表单和元素的属性
type
form
name
value
方法：
reset()
submit()
表单和元素的事件处理程序
不会被 reset()和 submit()触发，仅被按钮触发
onsubmit
onreset
可以通过在事件中返回 false 来阻止默认事件执行
其他文档属性
cookie
domain
lastModified
location
referrer
title
URL
document.writr()方法
查询选取的文本
window.getSelection()
可编辑内容
元素属性 contenteditable
Document 的 designMode 属性为 on，整个文档可以编辑
执行元素编辑命令，execCommand()
脚本化 CSS
CSS 概览
层叠
CSS 中的 C 代表层叠，有低到高顺序为：
web 浏览器的默认样式
文档的样式表
每个 html 元素的 style 属性
事件处理
异步事件驱动编程模型
18. 脚本化 HTTP
Ajax：Asynchronous JavaScript and XML
实现 Ajax 和 Comet 方式：
img 标签的 src
iframe 的 src（跨域）
scritp（即 JSONP，不跨域）
XMLHttpRequest 对象
使用 XMLHttpRequest
var request= new XMLHttpRequest();
http 请求组成：
http 请求方法或动作
正在请求的 url
一个可选的请求头集合
一个可选的请求主体
服务器返回的 http 响应组成：
一个由数字和文字组成的状态码，标识请求成功或者失败
一个响应头集合
响应主体
指定请求
调用 open 方法
第一个参数指定 HTTP 方法或者动作，第二个参数指定请求的 URL
var request= new XMLHttpRequest();
var request.open(‘GET’,’data.csv’);
添加头部
var request.setRequestHeader(‘Conten-Type’,’text/plain’) // 设置头部
以下头部不能自己设置：
发送请求
request.send(null);
// send 参数为请求主体
取得响应
status 和 statusText 以数字和文本形式返回 HTTP 状态码
getResponseHeader()和 getAllResponseHeaders()查询响应头
responseText 中获取文本形式的响应主体，responseXML 中获取 Document 形式的响应主体
readyState 属性标识响应状态：
readystatechange 绑定事件处理程序，readyState 改变均会触发此事件，也可以使用 addEventListener
同步响应
open 的第三个参数传 false，将使用同步响应，此时不需要事件处理程序
响应编码
request.overrideMimeType(“text/plain;charset=utf-8″)
HTTP 进度事件
调用 send 时触发 loadstart()
加载服务器响应时，触发 progress
超时触发 timeout()
中止触发 abort()
错误触发 error()
progress 常用属性：
loaded：目前传输的字节数
total：整体字节长度
中止请求和超时
abort()
跨域 HTTP 请求
CORS：跨域资源共享
借助 <script> 发送 HTTP 请求：JSONP
// 指定回调函数名称
url?jsonp=xxx
url?callback=xxx
客户端存储
形式：
web 存储：localStrorage、sessionStrorage
cookie：针对服务端脚本设计，每一次 HTTP 请求都会传输到服务端
离线 Web 应用
web 数据库
文件系统 API
localStrorage 和 sessionStrorage
区别：
localStrorage 永久性，作用域限定在文档源级别
sessionStrorage 有效期仅在在本次会话中，作用域限定在文档源级别，且仅限在本标签页
设置
localStrorage.key=value
localStrorage.setItem(key,value)
获取
localStrorage.key
localStrorage.getItem(key)
删除
delete localStrorage.key (IE8 不支持)
localStrorage.removeItem(key)
localStrorage.clear()
监听改变
使用 addEventListener
事件对象：
key clear()时为 null
newValue removeItem()时为 null
oldValue 新增时为 null
storageArea localStorage 或 sessionStrorage 对象
url 触发所在文档的 url
cookie
navigator.cookieEnabled 检测 cookie 是否可用（启用）
有效期为本次会话期间，默认有效期为直到浏览器关闭，如果要延长可以设置 max-age，单位秒
作用域默认对本页面、本页面同目录和子目录可见，不过可以设置其 domain 和 path
设置 cookie
document.cookie=”key=encodeURIComponent(value);max-age=seconds”
获取 cookie
document.cookie，可以使用 decodeURIComponent 解析
限制
浏览器最大 300
每个 web 服务器 20
保存数据最大 4k
应用程序存储和离线 web 应用？？？
21. 多媒体和图形编程
脚本化图片
new Image()
// 可以使用此方式提前强制缓存图片
脚本化音频和视频
new Audio(‘src/demo.wav’) // 音频构造函数，和选取标签得到的对象一样
类型选择和加载
使用 canPlayType(MIME 类型)测试一个媒体元素是否能播放指定类型的媒体文件
let a=new Audio();
a.canPlayType(“audio/wav”)
使用 lode()方法加载 source 标签指定的媒体源
控制媒体播放
play()
pause()
设置 currentTime 定点播放
volumn 表示音量，介于 0~1
muted 静音模式
playbackRate：播放速度，默认 1.0，负值表示回放
controls 播放控件
loop 循环播放
preload 预加载，none 不预加载，metadata 预加载元数据，auto
autoplay
查询媒体状态
paused
seeking 进度跳转中
ended 播放完，loop 为 true 时永不为 true
duration 媒体时长，载入前为 NAN
initialTime 开始时间
played 已播放的时间段
buffered 已缓冲的时间段
seekable 需要跳到的时间段
readyState
networkState
error
媒体相关事件
SVG：可伸缩的矢量图形
canvas 中的图形
大部分的画布绘制 API 都不是在 canvas 元素上定义，而是定义在一个绘制上下文对象上。
getContext() 用来获取上下文对象，传入 ’2d’ 参数会获得 CanvasRenderingContext2D 对象，传入 ’webgl’ 可以获得 3D 图形的上下文。
<canvas id=”demo”></canvas>
<script>
let canvas = document.getElementById(‘demo’);
let context = canvas.getContext(‘2d’)
context.fillStyle=”#0000ff”
context.fillRect(0,0,50,20)
context.fill()
</script>
绘制线段和填充多边形
c.beginPath() // 开始一条新路径
c.moveTo(100,100) // 从 (100,100) 开始定义一条新的子路径
c.lineTo(200,200) // 从 (100,100) 到(200,200)绘制一条线段
c.fill() // 填充区域
c.stroke() // 勾勒线段
c.closePath() // 关闭路径，即将终点和起点连接起来
非零绕数原则
图形属性
save()将当前图形状态压入用于保存状态的栈上
restore() 从栈中弹出并恢复最近一次保存的状态
画布的尺寸和坐标
尺寸：canvas 元素的 width 和 height 属性和画布对象的宽度高度决定画布的尺寸
坐标：画布左上角为原点
坐标系转换
当前变换矩阵：定义画布的当前坐标系
绘制和填充曲线
矩形
fillRect()
stokeRect()
clearRect()
rect()
颜色、透明度、渐变以及图案
strokeStyle、fillStyle
globalAlpha
利用 createPattern()方法填充图案
var image = document.getElementById(‘myimage’)
c.fillStyle=c.createPattern(image,’repeat’)
// 第一个参数指定填充的图案，可以是 img 元素（包括通过 Image 构造函数创建）、canvas 元素、video 元素；第二个参数定义平铺方式
利用 CanvasGradient 对象创建渐变
线段绘制相关的属性
lineWidth：默认为 1，任意正数，小于 1 的小数时绘制半透明
lineCap: 封顶
lineJoin
文本
fillText()/strokeText():
第一个参数为文本内容
第二个和第三个参数分别为绘制 X、Y 坐标
textAlign/textBaseline
第四个参数指定显示宽度，如果文本溢出则会缩放画布或者采用更窄更小的字体
在绘制前可以通过 measureText()度量文本宽度
裁剪
clip()
阴影
shadowColor：颜色
shadowOffsetX、shadowOffsetY 偏移量
shadowBlur 模糊度
图片
drawImage():
第一个参数为图片源，可以是 img 元素（包括通过 Image 构造函数创建）、canvas 元素、video 元素
第二个和第三个参数分别为绘制 X、Y 坐标
如果传递 5 个参数，剩余两个指定宽高
如果传递 9 个参数，2~5 参数指定源矩形区域，6~9 指定目标矩形区域
toDataURL()，画布元素自身的方法，提取成一张图片，同源限制
第一个参数指定 MIME 类型，默认 png
合成
像素操作
命中检测
isPointInPath() 指定点是否在路径上
getImageData() 检测指定点是否已绘制
HTML5 API
地理位置
navigator.geolocation
navigator.geolocation.getCurrentPosition() // 获取当前位置，异步
navigator.geolocation.wathcPosition() // 获取并监听当前位置，改变触发回调，异步
navigator.geolocation.clearWatch() // 停止监听
历史记录管理
location.hash、hashchange
history.pushState()、popstate、history.replaceState()
跨域消息传递
postMessage(data 数据,url 目标窗口源)，触发目标窗口 window.onmessage，事件对象属性：
data: 内容
source：消息来源 window
origin：消息来源 url
Web Worker
Worker 对象
let worke= new Worker(‘./worker.js’) // 创建 worker 实例
// 如果地址是绝对地址，那么受同源策略限制
worke.postMessage(data) // 将数据传递（结构性复制）给 worker
// 在 worker 对象中接受消息
worke.onmessage=function(e){
let data=e.data
}
// 捕捉错误
worke.onerror=function(e){
console.log(e.filename)
console.log(e.lineno)
}
// 也可以使用 addEventListener 和 removeEventListener 代替以上方法
worke.terminate() // 使用完关闭进程
worker 作用域
创建的 worker 在一个全新的运行环境中，即 WorkerGlobalScope 全局对象，该对象有如下属性和方法：
onmessage=fn(e) 接受外部传来的数据
postMessage(data) 发送消息出去
close() 关闭当前 worker
importScript（url1,url2…）加载库代码 同步
self 自身引用
计时器相关
location
navigator
常用的事件目标方法，addEventLisitener、removeEventListener
onerror
类型化数组和 ArrayBuffer
类数组对象，和常规数组区别：
类型化数组元素均为数字，在创建时就决定了数组中数字的类型和大小（单位：位）
类型化数组有固定长度
在创建类型化数组时，数组中元素总是默认为 0
一共有 8 种：方法：
set() 将一个常规或者类型化数组复制到另外一个类型化数组中
let bytes=new Uint8Array(1024)
let pattern=new Uint8Array([0,1,2,3])
bytes.set(pattern)
bytes.set(pattern,4) // 4 为偏移量
bytes.set([0,1,2,3],8)
subarray(start,end) 返回部分内容
DataView 定义了 8 个 set 和 get 方法
Blob
是对大数据块的不透明引用或者句柄。表示二进制大对象
let blob= new BlobBuilder()
blob.append(“data”)
blob.size // 字节大小
blob.type // MIME 类型
blob.slice(0,1024,’text/plain’)
读取 blob
利用 FileReader 对象
文件系统 API
let fs = requestFileSystemSync(PERSISTENT,1024*1024)
requestFileSystemSync(TEMPORARY,// 有效期
50*1024*1024,// 大小:50MB
function(fs){//fs 为该文件系统对象
},function(err){
})
客户端数据库
webSQL 弃用
indexedDB 对象数据库
let indexedDB=window.indexedDB
let request=indexedDB.open(‘dbName’)
request.onerror=function(err){}
request.onsuccess=function(){
let db=request.result
}
web 套接字
let socket=new WebSocket(url) // ws:// 或者 wss:// 协议
socket.onopen=function(e){}
socket.onclose=function(e){}
socket.onerror=function(e){}
socket.onmessage=function(e){}
socket.send(‘hello’)
socket.close()
