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()
发表回复