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