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().openerwindow.close()窗体之间的关系外部获取iframe内容，iframe.contentWindowiframe内部获取iframe，window.frameElementwindow.frames引用自身包含的窗口或窗体的子窗体脚本化文档选取文档元素getElementByIdgetElementByNamegetElementByTagNamegetElementByClassNamequerySelectorAll 接受css选择器querySelector 返回第一个匹配的元素文档结构和遍历作为节点树的文档parentNodechildNodesfirstChild,lastChildnextSibling，previoursSiblingnodeTypenodeValuenodeName作为元素树的文档firstElementChild，lastElementChildnextElementChild，previoursElementChildchildElementCount获取和设置非标准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.appendChildNode.insertBefore删除和替换节点removeChildreplaceChild文档和元素的几何形状和滚动？？？？？？？？html表单表单和元素的属性typeformnamevalue方法：reset()submit()表单和元素的事件处理程序不会被reset()和submit()触发，仅被按钮触发onsubmitonreset可以通过在事件中返回false来阻止默认事件执行其他文档属性cookiedomainlastModifiedlocationreferrertitleURLdocument.writr()方法查询选取的文本window.getSelection()可编辑内容元素属性contenteditableDocument的designMode属性为on，整个文档可以编辑执行元素编辑命令，execCommand()脚本化CSSCSS概览层叠CSS中的C代表层叠，有低到高顺序为：web浏览器的默认样式文档的样式表每个html元素的style属性事件处理异步事件驱动编程模型18.脚本化HTTPAjax：Asynchronous JavaScript and XML实现Ajax和Comet方式：img标签的srciframe的src（跨域）scritp（即JSONP，不跨域）XMLHttpRequest对象使用XMLHttpRequestvar request= new XMLHttpRequest();http请求组成：http请求方法或动作正在请求的url一个可选的请求头集合一个可选的请求主体服务器返回的http响应组成：一个由数字和文字组成的状态码，标识请求成功或者失败一个响应头集合响应主体指定请求调用open方法第一个参数指定HTTP方法或者动作，第二个参数指定请求的URLvar 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=xxxurl?callback=xxx客户端存储形式：web存储：localStrorage、sessionStroragecookie：针对服务端脚本设计，每一次HTTP请求都会传输到服务端离线Web应用web数据库文件系统APIlocalStrorage和sessionStrorage区别：localStrorage永久性，作用域限定在文档源级别sessionStrorage有效期仅在在本次会话中，作用域限定在文档源级别，且仅限在本标签页设置localStrorage.key=valuelocalStrorage.setItem(key,value)获取localStrorage.keylocalStrorage.getItem(key)删除delete localStrorage.key (IE8不支持)localStrorage.removeItem(key)localStrorage.clear()监听改变使用addEventListener事件对象：key clear()时为nullnewValue removeItem()时为nulloldValue 新增时为nullstorageArea localStorage或sessionStrorage对象url 触发所在文档的urlcookienavigator.cookieEnabled检测cookie是否可用（启用）有效期为本次会话期间，默认有效期为直到浏览器关闭，如果要延长可以设置max-age，单位秒作用域默认对本页面、本页面同目录和子目录可见，不过可以设置其domain和path设置cookiedocument.cookie=“key=encodeURIComponent(value);max-age=seconds"获取cookiedocument.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表示音量，介于01muted静音模式playbackRate：播放速度，默认1.0，负值表示回放controls播放控件loop循环播放preload预加载，none不预加载，metadata预加载元数据，autoautoplay查询媒体状态pausedseeking 进度跳转中ended 播放完，loop为true时永不为trueduration媒体时长，载入前为NANinitialTime开始时间played已播放的时间段buffered已缓冲的时间段seekable需要跳到的时间段readyStatenetworkStateerror媒体相关事件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、fillStyleglobalAlpha利用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个参数，25参数指定源矩形区域，6~9指定目标矩形区域toDataURL()，画布元素自身的方法，提取成一张图片，同源限制第一个参数指定MIME类型，默认png合成像素操作命中检测isPointInPath() 指定点是否在路径上getImageData() 检测指定点是否已绘制HTML5 API地理位置navigator.geolocationnavigator.geolocation.getCurrentPosition() // 获取当前位置，异步navigator.geolocation.wathcPosition() // 获取并监听当前位置，改变触发回调，异步navigator.geolocation.clearWatch() //停止监听 历史记录管理location.hash、hashchangehistory.pushState()、popstate、history.replaceState()跨域消息传递postMessage(data数据,url目标窗口源)，触发目标窗口window.onmessage，事件对象属性：data:内容source：消息来源windoworigin：消息来源urlWeb WorkerWorker对象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() 关闭当前workerimportScript（url1,url2…） 加载库代码 同步self 自身引用计时器相关locationnavigator常用的事件目标方法，addEventLisitener、removeEventListeneronerror类型化数组和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对象文件系统APIlet fs = requestFileSystemSync(PERSISTENT,10241024)requestFileSystemSync(TEMPORARY,// 有效期 5010241024,// 大小:50MB function(fs){//fs为该文件系统对象 },function(err){ })客户端数据库webSQL 弃用indexedDB 对象数据库let indexedDB=window.indexedDBlet 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()