JavaScript权威指南笔记（下）- 客户端javascript

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()