8.動畫
幀：動畫里的最小單位，是靜態(tài)的圖像；幀頻：一秒鐘播放的幀的數(shù)量。
一個完整的動畫由很多幀組成，流暢的動畫一秒鐘 30 幀以上。
JS 動畫三要素
對象：我們要操作的 DOM 對象
屬性：DOM 對象的屬性，如 width,height,opacity,Left
定時器：setInterval ? ? ?setTimeout ? ? ?requestAnimationFrame
可以用定時器不斷地改變對象的屬性，構(gòu)成動畫。
setInterval
var intervalID = setInterval(func,delay[,param1,param2,...])
clearInterval(intervalID)
func：執(zhí)行改變屬性的操作的函數(shù)
delay：觸發(fā)定時器的時間間隔，以毫秒為單位的值
param：可選參數(shù)，在執(zhí)行 func 時可作為參數(shù)傳入
在執(zhí)行定時器期間清除定時器可調(diào)用 clearInterval
setTimeout
var timeoutID = setTimeout(func,[delay,param1,param2,...])
clearTimeout(timeoutID)
delay：可選參數(shù)，不傳默認(rèn)為 0，表示定時器立即觸發(fā)。
setTimeout 和 setInterval 主要區(qū)別在于 setTimeout 在指定的觸發(fā)時間之后只執(zhí)行一次，setInterval 每隔指定時間都會執(zhí)行一次。
requestAnimationFrame
var requestID = requestAnimationFrame(func)
cancelAnimationFrame(requestID)
間隔時間不受用戶控制，由顯示器的刷新頻率控制，一秒鐘刷新 60 次，16.67 毫秒刷新一次，每次刷新觸發(fā)定時器，與 setTimeout 相似，觸發(fā)之后執(zhí)行一次。
好處：不用關(guān)心間隔時間，動畫更流暢，瀏覽器控制刷新頻率不會出現(xiàn)掉幀情況。
常見動畫：形變 ?位移 ?旋轉(zhuǎn) ?透明度
動畫函數(shù)
進度條：形變動畫，不斷改變寬度
圖片切換：位移動畫，父容器一直在移動實現(xiàn)切換效果
進度條
9.音頻與視頻
<audio src = "music.mp3"></audio>
<video src = "movie.mp4" width = 240 ?height = 240></video>
視頻播放器頁面上占據(jù)一定的空間，需要指定寬高。
audio 兼容用法
video 兼容用法
多媒體格式兼容性
如何在瀏覽器端檢測某一種音頻（視頻）是否兼容，可用到 canPlayType 方法，將要檢測的媒體類型作為字符串參數(shù)傳入。
var a = new Audio(); ? ?a.canPlayType('audio/nav');
如果瀏覽器支持媒體類型，返回字符串“maybe”或“probably”，不支持返回空字符串。根據(jù)結(jié)果可做進一步操作。
瀏覽器未實現(xiàn) video 構(gòu)造函數(shù)，如果想用 video 的 canPlayType 方法，必須先在頁面插入 video 標(biāo)簽，然后通過 JS 獲取 video 標(biāo)簽的 DOM 對象，再調(diào)用 DOM 對象的 canPlayType 方法檢測。
HTML 屬性
audio 標(biāo)簽和 video 標(biāo)簽除了在頁面上顯示的有所差異，大部分屬性、方法相同。
src：音頻文件的 URL，必須有的屬性
controls：是否向用戶顯示控件，默認(rèn)值為 false
autoplay：音頻是否在就緒后馬上播放，默認(rèn)值為 false
preload：音頻在頁面加載時是否進行加載并預(yù)備播放，如果使用“autoplay”，則忽略該屬性。可取值為“none”，“metadata”,“auto”，分別表示不進行預(yù)加載，僅預(yù)加載元信息，預(yù)加載資源，默認(rèn)值為“none”
loop：音頻結(jié)束時是否重新開始播放，默認(rèn)值為 false
控制多媒體播放
load() 加載媒體內(nèi)容；play() ?開始播放；pause() ?暫停
palybackRate ?播放速度（非負(fù)數(shù)，0-1之間慢速，1以上快速）；
currentTime ?播放進度（秒為單位，修改后直接跳轉(zhuǎn)）；
volume ?音量（0-1之間的浮點數(shù)）； muted ?靜音（true 為靜音）
查詢多媒體狀態(tài)（只讀屬性）
布爾值：pause 暫停；seeking 跳轉(zhuǎn)；ended 播放完成
數(shù)值：duration 媒體時長；initialTime 媒體開始時間
多媒體相關(guān)事件
loadstart：開始請求媒體內(nèi)容
loadmetadata：媒體元數(shù)據(jù)已經(jīng)加載完成
canplay：加載了一些內(nèi)容，可以開始播放
play：調(diào)用了 play() 或設(shè)置了 autoplay
waiting：緩沖數(shù)據(jù)不夠，播放暫停
playing：正在播放
10.canvas
基本用法
<canvas id = "tutorial" width = "300" height = "150"></canvas>
如果不為 canvas 指定寬高，默認(rèn) width 為 300，height 為 150
不建議用 CSS 指定寬高。
渲染上下文
var canvas = document.getElementById('tutorial');
var ctx = canvas.getContext('2d');
ctx 即為渲染上下文對象，canvas 大部分的 API 在這個對象里。
globalCompositeOperation
在畫每一幀圖像之前，需要設(shè)置 globalCompositeOperation 屬性。設(shè)置后畫圖像與之前畫的圖像的關(guān)系。
基本繪畫步驟
清除畫布——繪制圖形——保存渲染上下文狀態(tài)——繪制圖形——恢復(fù)渲染上下文狀態(tài)——繪制圖形——保存渲染上下文狀態(tài)——繪制圖形——恢復(fù)渲染上下文狀態(tài)——繪制圖形……
11. BOM
從廣義上理解，JavaScript 應(yīng)該包含三個部分，首先包含 ECMAScript（JavaScript 的語法部分），DOM（文檔對象模型），還有 BOM
BOM 代表瀏覽器窗口對象的一組 API
BOM——屬性
navigation 瀏覽器信息 ? ? ? location 瀏覽器定位和導(dǎo)航? ??
history 窗口瀏覽器歷史? ? ? screen 屏幕信息
1.navigation 瀏覽器信息
platform 屬性：代表瀏覽器運行在什么平臺
userAgent 屬性：是一系列屬性合成的一個很長的字符串，包含很多信息。有瀏覽器內(nèi)核信息以及瀏覽器版本號信息。在編程時可通過 userAgent 判斷當(dāng)前設(shè)置運行在什么瀏覽器上，一般來說只需判斷內(nèi)核。
2.location 瀏覽器定位和導(dǎo)航
可通過 location 屬性操縱 URL 各個部分
href 屬性，代表瀏覽器當(dāng)前訪問的資源的完整路徑，可通過修改 href 進行跳轉(zhuǎn)。
toString() 方法：如果直接修改 location 屬性，讓它賦值為一個字符串，會默認(rèn)去調(diào)用 toString() 方法，返回 href 屬性，可以通過直接修改 location 屬性達(dá)到 href 屬性的效果。
assign(url)：載入新的 URL，記錄瀏覽歷史
replace(url)：載入新的 URL，不記錄瀏覽歷史（替換瀏覽記錄）
reload()：重載當(dāng)前頁
3.history 窗口瀏覽器歷史
length 屬性代表瀏覽器歷史長度為 2?
back(),forward()：傳入的都是整數(shù)，表示要前進或后退的步長。
go()：傳入整數(shù)，正數(shù)前進，負(fù)數(shù)后退
4.screen 屏幕信息
avail- 作為前綴的為可用屬性，沒有 avail- 前綴為顯示器屬性
BOM——方法
alert(),confirm(),prompt() 三種對話框
setTimeout() setInterval() 計時器
open(),close() 開新窗口，關(guān)閉窗口
1.三種對話框：阻塞瀏覽器當(dāng)前線程
alert()：警告框，提示用戶，只有確定按鈕
confirm()：對話框，有確定和取消按鈕，點擊確定返回 true，取消返回 false
prompt()：對話框，含輸入框與確定取消按鈕，點擊確定返回用戶輸入字符串
2.開關(guān)新窗口
var w =window.open("http://www.163.com","subwindow",
"width=400,height=350,status=yes,resizable=yes")
三個參數(shù)：要打開的新窗口訪問的URL地址，窗口名，新開窗口屬性
在父窗口下關(guān)閉打開的新窗口 w.close()；在子窗口下關(guān)閉 window.close()
BOM——事件
load：文檔和所有圖片加載完畢時觸發(fā)
在寫腳本時可能會操作文檔的節(jié)點或圖片，可通過監(jiān)聽 load 事件，確保文檔和圖片加載完畢。在回調(diào)函數(shù)里操作文檔、節(jié)點和圖片資源的邏輯。
unload：離開當(dāng)前文檔時觸發(fā)（刷新，關(guān)閉窗口觸發(fā)）
beforeunload：和 unload 類似，但它提供詢問用戶是否確定離開的機會，返回 true 離開，false 不離開
resize：拖動改變?yōu)g覽器窗口大小時觸發(fā)
scroll：拖動滾動瀏覽器時觸發(fā)
