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ù)炼绘，不傳默認為 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 標簽隘竭，然后通過 JS 獲取 video 標簽的 DOM 對象塘秦，再調(diào)用 DOM 對象的 canPlayType 方法檢測。
HTML 屬性
audio 標簽和 video 標簽除了在頁面上顯示的有所差異动看，大部分屬性尊剔、方法相同。
src：音頻文件的 URL菱皆，必須有的屬性
controls：是否向用戶顯示控件须误，默認值為 false
autoplay：音頻是否在就緒后馬上播放，默認值為 false
preload：音頻在頁面加載時是否進行加載并預(yù)備播放仇轻，如果使用“autoplay”京痢，則忽略該屬性∨竦辏可取值為“none”祭椰，“metadata”,“auto”，分別表示不進行預(yù)加載疲陕，僅預(yù)加載元信息方淤，預(yù)加載資源，默認值為“none”
loop：音頻結(jié)束時是否重新開始播放蹄殃，默認值為 false
控制多媒體播放
load() 加載媒體內(nèi)容携茂；play() ?開始播放；pause() ?暫停
palybackRate ?播放速度（非負數(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 指定寬高览绿，默認 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 判斷當前設(shè)置運行在什么瀏覽器上，一般來說只需判斷內(nèi)核秧荆。
2.location 瀏覽器定位和導(dǎo)航
可通過 location 屬性操縱 URL 各個部分
href 屬性倔毙，代表瀏覽器當前訪問的資源的完整路徑，可通過修改 href 進行跳轉(zhuǎn)辰如。
toString() 方法：如果直接修改 location 屬性普监，讓它賦值為一個字符串，會默認去調(diào)用 toString() 方法琉兜，返回 href 屬性凯正，可以通過直接修改 location 屬性達到 href 屬性的效果。
assign(url)：載入新的 URL豌蟋，記錄瀏覽歷史
replace(url)：載入新的 URL廊散，不記錄瀏覽歷史（替換瀏覽記錄）
reload()：重載當前頁
3.history 窗口瀏覽器歷史
length 屬性代表瀏覽器歷史長度為 2?
back(),forward()：傳入的都是整數(shù)，表示要前進或后退的步長梧疲。
go()：傳入整數(shù)允睹，正數(shù)前進，負數(shù)后退
4.screen 屏幕信息
avail- 作為前綴的為可用屬性幌氮，沒有 avail- 前綴為顯示器屬性
BOM——方法
alert(),confirm(),prompt() 三種對話框
setTimeout() setInterval() 計時器
open(),close() 開新窗口缭受，關(guān)閉窗口
1.三種對話框：阻塞瀏覽器當前線程
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：離開當前文檔時觸發(fā)（刷新幔嗦，關(guān)閉窗口觸發(fā)）
beforeunload：和 unload 類似，但它提供詢問用戶是否確定離開的機會沥潭，返回 true 離開邀泉，false 不離開
resize：拖動改變?yōu)g覽器窗口大小時觸發(fā)
scroll：拖動滾動瀏覽器時觸發(fā)
