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