[TOC]

JavaScript高級(jí)程序設(shè)計(jì)

第一章 JavaScript簡(jiǎn)介

第二章 在HTML中使用JavaScript

2.1 script元素

2.2 嵌入代碼與外部文件

第三章 基本概念

3.4 數(shù)據(jù)類(lèi)型 Undefined Null Boolean Number String Object

3.5 操作符

3.7 函數(shù)

第四章 變量、作用域和內(nèi)存問(wèn)題

4.1 基本類(lèi)型和引用類(lèi)型的值

4.2 垃圾回收

第五章 引用類(lèi)型

5.2 Array類(lèi)型

5.3 Date類(lèi)型

5.4 RegExp類(lèi)型 支持正則表達(dá)式

5.5 Function類(lèi)型

5.6 基本包裝類(lèi)型 (Boolean Number String)

5.7 單體內(nèi)置對(duì)象 （開(kāi)發(fā)人員不必顯式地實(shí)例化內(nèi)置對(duì)象诡延，因?yàn)橐呀?jīng)實(shí)例化了）

第六章 面向?qū)ο蟮某绦蛟O(shè)計(jì)

6.1 理解對(duì)象

6.2 創(chuàng)建對(duì)象

6.3 繼承 【只支持實(shí)現(xiàn)繼承镀脂，不支持接口繼承】

第七章 函數(shù)表達(dá)式

7.1 遞歸

7.2 閉包 【有權(quán)訪問(wèn)另一個(gè)函數(shù)作用域中的變量的函數(shù)】

7.3 模仿塊級(jí)作用域

7.4 私有變量

第八章 BOM

8.1 window對(duì)象

8.2 location對(duì)象

8.3 Navigator對(duì)象

8.4 screen對(duì)象

8.5 history對(duì)象

第九章 客戶(hù)端檢測(cè)

9.1 能力檢測(cè)

9.2 怪癖檢測(cè)

9.3 用戶(hù)代理檢測(cè)

第十章 DOM

10.1 節(jié)點(diǎn)層次

10.2 DOM操作技術(shù)

第十一章 DOM擴(kuò)展

11.1 選擇符API

1. querySelector()
    參數(shù)：CSS選擇符   返回：匹配的第一個(gè)元素献联，或者null
    var myDiv = document.querySelector("#myDiv");
2. querySelectorAll()
    參數(shù)：CSS選擇符   返回：匹配的所有元素莽龟，NodeList實(shí)例
3.matchesSelector()
    參數(shù)：CSS選擇器   返回：若調(diào)用元素與選擇器匹配則為true，否則false

11.2 元素遍歷

 防止選擇到空白文本節(jié)點(diǎn)
childElementCount   子元素個(gè)數(shù)(不包含文本節(jié)點(diǎn)和注釋)
firstElementChild   第一個(gè)子元素
lastElementChild    最后一個(gè)子元素
previousElementSibling  前一個(gè)同輩元素
nextElementSibling      后一個(gè)同輩元素

11.3 HTML5

1. 類(lèi)相關(guān)擴(kuò)展
    getElementByClassName()
        document對(duì)象上調(diào)用悴能，返回與類(lèi)名匹配的所有元素
        元素上調(diào)用携悯，返回后代元素中匹配的元素
        返回對(duì)象為NodeList對(duì)象
    classList
        對(duì)元素的類(lèi)進(jìn)行操作
        add(value)      給定字符串添加到列表中
        contains(value) 確認(rèn)列表中是否有給定的值 
        remove(value)   刪除給定的字符串
        toggle(value)   若已存在，則刪除竿秆，若沒(méi)有启摄，則添加
2. 焦點(diǎn)管理
    document.activeElement  引用DOM當(dāng)前獲得焦點(diǎn)的元素
    document.hasFocus()     確定文檔是否獲得焦點(diǎn)
3. HTMLDocument的變化 [HTML5擴(kuò)展新功能]
    1. readyState屬性： 
        loading[正在加載文檔]、complete[已經(jīng)完成加載文檔]
    2. 兼容模式 compatMode屬性: 
        "CSS1Compat"[標(biāo)準(zhǔn)模式]幽钢、"BackCompat"[混合模式]渲染頁(yè)面模式
    3. head屬性
    4. 字符集屬性 
        charset屬性 表示文檔中實(shí)際使用的字符集歉备，默認(rèn)為"UTF-16"
        可使用<meta>元素、響應(yīng)頭部或直接設(shè)置charset屬性進(jìn)行修改         
        defaultCharset  表示默認(rèn)瀏覽器及操作系統(tǒng)的設(shè)置
    5. 自定義數(shù)據(jù)屬性
        給元素添加非標(biāo)準(zhǔn)屬性匪燕，要添加前綴"data-",與渲染無(wú)關(guān)蕾羊，提供語(yǔ)義信息
        dataset屬性訪問(wèn)自定義屬性的值: div.dataset.data-myname
    6. 插入標(biāo)記
        innerHTML屬性
            讀模式：返回與調(diào)用元素的所有子節(jié)點(diǎn)對(duì)應(yīng)的HTML標(biāo)記
            寫(xiě)模式：解析為響應(yīng)的DOM樹(shù)，然后用DOM樹(shù)完全替換調(diào)用元素原先的所有子節(jié)點(diǎn)
        outerHTML屬性
            讀模式：返回與調(diào)用元素及所有子節(jié)點(diǎn)對(duì)應(yīng)的HTML標(biāo)簽
            寫(xiě)模式：解析為響應(yīng)的DOM樹(shù)帽驯，然后用DOM樹(shù)完全替換調(diào)用元素
        insertAdjacentHTML()方法
            第一個(gè)參數(shù)龟再，插入位置：beforebegin[在當(dāng)前元素前插入對(duì)應(yīng)同輩元素]/afterbegin/beforeend/afterend
            第二個(gè)參數(shù)：要插入的HTML文本
        內(nèi)存與性能：
            若插入大量的HTML標(biāo)記，則使用innerHTML比多次DOM操作效率更高
            因?yàn)閕nnerHTML和outHTML會(huì)創(chuàng)建一個(gè)HTML解析器尼变，因此要避免頻繁使用innerHTML
    7. scrollIntoView()方法
        可在所有HTML元素上調(diào)用利凑，通過(guò)滾動(dòng)瀏覽器窗口或某個(gè)容器元素，調(diào)用元素出現(xiàn)在視口中
        若傳入true嫌术，或不傳哀澈，則調(diào)用元素頂部與視口齊平
        若傳入false，底部齊平

11.4 專(zhuān)有擴(kuò)展

1. 文檔模式
    IE5 混雜模式渲染頁(yè)面
    IE7 IE7標(biāo)準(zhǔn)模式渲染頁(yè)面
    IE8 IE8標(biāo)準(zhǔn)模式渲染頁(yè)面 可使用選擇符API度气、HTML5功能割按、CSS2 CSS3等
    IE9 IE9標(biāo)準(zhǔn)模式渲染頁(yè)面 可使用完整的CSS3 HTML5 和ECMAScript5
2. children屬性
    element.children.length
    element.children[0]
3. contains()方法
    某節(jié)點(diǎn)是否為另一個(gè)節(jié)點(diǎn)的后代，返回true為后代
    compareDocumentPosition() 返回表示關(guān)系的掩碼磷籍，若為16 則是被包含的關(guān)系【給定的節(jié)點(diǎn)是參考節(jié)點(diǎn)的后代】
4. 插入文本
    innerText
        讀取值：由淺入深的順序适荣，將子文檔樹(shù)種的所有文本拼接起來(lái)
        寫(xiě)入值：刪除元素的所有子節(jié)點(diǎn)现柠，插入包含響應(yīng)文本值的文本節(jié)點(diǎn)
        textContent 會(huì)返回其他文本一樣返回行內(nèi)的樣式和腳本代碼
    outerText
        范圍擴(kuò)大到包含調(diào)用它的節(jié)點(diǎn)
5. 滾動(dòng)
    scrollIntoView()
    scrollIntoViewIfNeeded(alignCenter) 當(dāng)元素不在視口內(nèi)，滾動(dòng)到可見(jiàn)
        作用對(duì)象是元素的容器
    scrollByLines(lineCount)
    scrollByPages(pageCount)
        作用對(duì)象是元素自身

第十二章 DOM2和DOM3

12.1 DOM變化

1. 針對(duì)XML命名空間的變化
2. 其他方面的變化
    1. DocumentType類(lèi)型的變化
        新增了三個(gè)屬性：publicId弛矛、systemId够吩、internalSubset
    2. Document類(lèi)型的變化
        importNode()從文檔中去的一個(gè)節(jié)點(diǎn)，導(dǎo)入到另一個(gè)文檔 HTML中不常用
        document.implementation對(duì)象規(guī)定了兩個(gè)方法：
            createDocumentType() 創(chuàng)建一個(gè)新的DocumentType
            createDocument()     創(chuàng)建新文檔
        createHTML-Document() 創(chuàng)建一個(gè)完整的HTML文檔
    3. Node類(lèi)型的變化
        isSupported() 確定當(dāng)前節(jié)點(diǎn)具有什么能力
        isSameNode()  -|
        isEqualNode() -| 節(jié)點(diǎn)是相同的類(lèi)型汪诉、屬性及attributes和childNodes
        setUserData() 將數(shù)據(jù)指定給節(jié)點(diǎn)
    4. 框架的變化
        HTMLFrameElement和HTMLIFrameElement
        ...

12.2 樣式

給HTML添加指定樣式有三種方式：<link>外部樣式 <style>嵌入式 及 style特性?xún)?nèi)聯(lián)樣式
1. 訪問(wèn)元素的樣式
    float是JavaScript保留子废恋，為style.cssFloat或style.styleFloat
    在給style.width添加值時(shí)，不要忘了添加單位
    1. DOM樣式屬性和方法
        cssText     可訪問(wèn)style特性中的CSS代碼
        length      CSS屬性的數(shù)量
        parentRule      CSS信息的CSSRule對(duì)象
        getPropertyCSSValue(propertyName)   包含給定屬性值的CSSValue對(duì)象
        ...
    2. 計(jì)算的樣式
        document.defaultView.getComputedStyle(要取得計(jì)算樣式的元素,偽元素字符串)
        只讀
2. 操作樣式表
    CSSStyleSheet
    sheet.insertRule() 向樣式表中添加新規(guī)則
    sheet.deleteRule(0) 刪除規(guī)則
3. 元素大小
    偏移量 
        元素內(nèi)容+內(nèi)邊距+邊框 大小
        offsetHeight    offsetWidth
        offsetLeft      offsetTop
    客戶(hù)區(qū)大小
        元素內(nèi)容+內(nèi)邊距 大小
        clientWidth     clientHeight  內(nèi)容寬高扒寄，不包含邊框
    滾動(dòng)大小
        scrollHeight    scrollWidth 在沒(méi)有滾動(dòng)條的情況下鱼鼓，元素的高寬
        scrollLeft      scrollTop   被隱藏在內(nèi)容區(qū)域左或上方像素?cái)?shù)
    確定元素大小
        getBoundingClientRect() 返回矩形對(duì)象，包含left top right bottom屬性

12.3 遍歷

1. NodeIterator
    document.createNodeIterator() 創(chuàng)建新實(shí)例
    四個(gè)參數(shù)：root whatToShow filter entityReferenceExpansion
2. TreeWalker
    nextNode()
    previousNode()
    document.createTreeWalker() 
    四個(gè)參數(shù)與前面的相同

12.4 范圍

選擇文檔中的一個(gè)區(qū)域该编，而不考慮節(jié)點(diǎn)的界限
createRange()
setStart()
setEnd()

第十三章 事件

13.1 事件流

1. 事件冒泡
    事件由最開(kāi)始的具體元素接收迄本，然后逐級(jí)向上傳播到較為不具體的節(jié)點(diǎn)
    <div>--<body>--<html>--document
2. 事件捕獲
    在事件到達(dá)預(yù)定目標(biāo)前捕獲
    document--<html>--<body>--<div>
3. DOM事件流
    事件捕獲階段
    處于目標(biāo)階段
    事件冒泡階段

13.2 事件處理程序

1. HTML事件處理程序
    onclick = "showMessage()"
    function showMessage() {
        event 變量 直接訪問(wèn)事件對(duì)象
        this 等于 事件的目標(biāo)元素
    }
    缺點(diǎn)：
        2. 作用域在不同瀏覽器中導(dǎo)致不同結(jié)果
        3. 緊密耦合，若更改课竣，則需要將HTML和JavaScript代碼都進(jìn)行更改
    在處于目標(biāo)階段
2. DOM0級(jí)事件處理程序
    將函數(shù)賦值給一個(gè)事件處理程序?qū)傩?    var btn = document.getElementById("myBtn")
    btn.onclick = function() {
        this.id
    }
    刪除事件處理程序 btn.onclick = null
3. DOM2級(jí)事件處理程序
    addEventLinstener(要處理事件名嘉赎，作為事件處理程序的函數(shù)，布爾值)
        布爾值為true時(shí)于樟，在捕獲階段調(diào)用事件處理程序公条，false在冒泡階段調(diào)用事件處理程序
    removeEventListener(與add相同，三個(gè)參數(shù))
    btn.addEventListener("click",function() {...},false);
    移除該事件處理程序只能使用remove...迂曲，因此無(wú)法移除匿名函數(shù)
    一般添加到冒泡階段靶橱，不要在事件到達(dá)目標(biāo)之前截取事件處理程序
4. IE事件處理程序
    添加到冒泡階段
    attachEvent(事件處理程序名稱(chēng),事件處理程序函數(shù))   
    detachEvent()
    btn.attachEvent("onclick",function() {})
    作用域?yàn)槿?this === window
    調(diào)用多次傳遞不同的時(shí)間處理程序，但執(zhí)行順序是相反的
5. 跨瀏覽器的時(shí)間處理程序

13.3 事件對(duì)象

觸發(fā)DOM事件時(shí)路捧，會(huì)產(chǎn)生一個(gè)事件對(duì)象event
1. DOM中的事件對(duì)象
    event.currentTarget
    event.target
    event.cancelable    是否可取消時(shí)間的默認(rèn)行為
    target和currentTarget有時(shí)候不一定一樣关霸，比如當(dāng)綁定的到body時(shí)，target是button元素杰扫，因?yàn)樗莄lick時(shí)間真正的目標(biāo)队寇，但是按鈕上并沒(méi)有注冊(cè)時(shí)間處理程序，通過(guò)冒泡到body上才進(jìn)行處理的章姓。
    阻止默認(rèn)行為：preventDefault()方法佳遣，必須cancelable屬性為true時(shí)
    stopPropagation() 停止時(shí)間在DOM層次中的傳播，取消進(jìn)一步的事件捕獲或冒泡
    event.eventPhase    確定事件當(dāng)前正位于事件流的哪個(gè)階段
        1：捕獲階段   2：處于目標(biāo)階段    3：冒泡階段
    event對(duì)象只有在時(shí)間處理程序執(zhí)行期間存在凡伊，執(zhí)行完成零渐，event對(duì)象銷(xiāo)毀
2. IE中的事件對(duì)象
3. 跨瀏覽器的事件對(duì)象

13.4 事件類(lèi)型

1. UI事件
    1. load 
        頁(yè)面完全加載后(包括所有圖像、JavaScript文件窗声、CSS文件等外部文件)相恃，在window上觸發(fā)
        在任意一元素上添加onload特性:<body onload="alert('Loaded!')"></body>
    2. unload  
        頁(yè)面完全卸載后辜纲，在window上觸發(fā),如頁(yè)面切換笨觅。
        多用在清楚引用拦耐，以避免內(nèi)存泄露
        用法類(lèi)似于load
    3. resize
        當(dāng)瀏覽器窗口唄調(diào)整到一個(gè)新的高度或?qū)挾葧r(shí)，在window上觸發(fā)
    4. scroll
        頁(yè)面滾動(dòng)時(shí)觸發(fā)见剩，在滾動(dòng)期間會(huì)重復(fù)觸發(fā)杀糯。在window上觸發(fā)
2. 焦點(diǎn)事件
    blur        focus(不冒泡)
    focusin     focusout(冒泡)  失去焦點(diǎn)和獲得焦點(diǎn)
3. 鼠標(biāo)與滾輪事件
    click(單擊鼠標(biāo)左鍵，或按enter)   dblclick(雙擊)
    mousedown(按下任意鼠標(biāo)按鈕)     mouseup(釋放鼠標(biāo))
    mouseenter(光標(biāo)從元素外首次移到元素內(nèi)苍苞，不冒泡)   
    mouseleave(光標(biāo)從元素上移動(dòng)到元素外固翰，不冒泡)    
    mousemove(鼠標(biāo)在元素內(nèi)移動(dòng))
    mouseout(鼠標(biāo)位于一個(gè)元素上方，移入另一個(gè)元素)
    mouseover(鼠標(biāo)位于一元素外部羹呵，首次移入另一個(gè)元素邊界)
    mousewheel 鼠標(biāo)滾輪事件

    在iOS和Android設(shè)備中：
        1. 不支持dblclick事件
        2. 輕擊可單擊元素會(huì)觸發(fā)mousemove事件
        3. mousemove事件也會(huì)觸發(fā)mouseover和mouseout事件
        4. 兩個(gè)手指放屏幕上且頁(yè)面滾動(dòng)時(shí)會(huì)觸發(fā) mousewheel和scroll事件
4. 鍵盤(pán)與文本事件
    keydown     按下鍵盤(pán)上任意鍵骂际，若按住不放，會(huì)重復(fù)觸發(fā)
    keypress    按下鍵盤(pán)上字符鍵或ESC觸發(fā)冈欢，按住不放會(huì)重復(fù)觸發(fā)
    keyup       當(dāng)用戶(hù)釋放鍵盤(pán)上的鍵時(shí)觸發(fā)
    keyup keydown  event對(duì)象有keyCode屬性,與鍵盤(pán)上一個(gè)特定鍵對(duì)應(yīng)
    textInput   用戶(hù)在可編輯區(qū)域中輸入字符時(shí)觸發(fā)  
5. 復(fù)合事件
    處理IME的輸入序列 可以讓用戶(hù)輸入在屋里鍵盤(pán)上找不到的字符
    compositionstart    IME文本輸入打開(kāi)時(shí)觸發(fā)
    compositionupdate
    ...
6. 變動(dòng)事件
    在DOM中的某一部分變動(dòng)時(shí)給出提醒
    DOMSubtreeModified  DOM結(jié)構(gòu)中發(fā)生任何變化都給出提示
    ...
7. HTML5事件
    1. contextmenue    
        確定何時(shí)顯示上下文菜單 會(huì)自動(dòng)阻止默認(rèn)菜單的顯示
    2. beforeunload
        在頁(yè)面加載前歉铝，阻止操作 彈出系統(tǒng)顯示框，使用
        event.returnValue = message 凑耻，其中message為顯示字符串
    3. DOMContentLoaded
        在形成完整的DOM樹(shù)之后觸發(fā)太示，不管圖像、JavaScript文件等是否下載完畢
        若不支持該操作香浩，可以使用setTimeout(function(){},0),必須保證為第一個(gè)超時(shí)調(diào)用类缤，也不太能確定是否早于load事件
    4. readystatechange
        提供與文檔或元素的加載狀態(tài)相關(guān)的信息
        支持該事件的對(duì)象都有一個(gè)readyState屬性,可能取值如下：
            uninitialized未初始化、loading正在加載邻吭、loaded加載完畢餐弱、interactive交互、complete完成
        在與load事件一起使用時(shí)镜盯，無(wú)法預(yù)測(cè)兩個(gè)事件觸發(fā)的先后順序
    5. pageshow pagehide
        pageshow 在頁(yè)面顯示時(shí)觸發(fā)岸裙，無(wú)論該頁(yè)面是否來(lái)自bfcatche，在load事件觸發(fā)后觸發(fā),若頁(yè)面來(lái)自bfcatche速缆，則load事件不會(huì)觸發(fā)
        pageshow的event對(duì)象有persisted布爾值屬性降允，若頁(yè)面被保存在bfchache中，則為true艺糜，否則為false
        pagehide 在頁(yè)面卸載時(shí)觸發(fā)剧董，在unload事件前，document上觸發(fā)
    6. hashchange
        URL參數(shù)列表(#號(hào)后面的字符串)發(fā)生變化時(shí)通知開(kāi)發(fā)人員
        event.oldURL 變化前參數(shù)列表
        event.newURL 變化后參數(shù)列表
8. 設(shè)備事件
    1. orientationchange
        確定用戶(hù)合適將設(shè)備有橫向查看模式切換為縱向查看模式
        三個(gè)值：0 90 -10  
        windwo.orientation可訪問(wèn)
    2. MozOrientation
        設(shè)備加速計(jì)檢測(cè)到設(shè)備方向改變時(shí)
    3. deviceorientation
        告訴開(kāi)發(fā)人員設(shè)備在空中朝向哪兒
    4. devicemotion
        是否掉下破停，或者被走著的人手拿著
9. 觸摸與手勢(shì)事件
    1. 觸摸事件
        touchstart  當(dāng)手指觸摸屏幕時(shí)觸發(fā)
        touchmove   當(dāng)手指在屏幕上滑動(dòng)時(shí)連續(xù)的觸發(fā)  調(diào)用preventDefault()可阻止滑動(dòng)
        touched     當(dāng)手指從屏幕上移開(kāi)時(shí)觸發(fā)
        touchcancel 當(dāng)系統(tǒng)停止跟蹤觸摸時(shí)觸發(fā)
            以上都是會(huì)冒泡的翅楼，event屬性：
            bubbles、cancelable真慢、view毅臊、clientX、clientY黑界、screenX ...
        跟蹤觸摸的屬性：
            touches         當(dāng)前跟蹤的觸摸操作的Touch對(duì)象的數(shù)組
            targetTouchs    特定于事件目標(biāo)的Touch對(duì)象的數(shù)組
            changeTouches   自上次觸摸以來(lái)發(fā)生了什么改變的Touch對(duì)象的數(shù)組
        對(duì)每個(gè)Touch對(duì)象管嬉，包含下來(lái)屬性：
        clientX clientY     觸摸目標(biāo)在視口出現(xiàn)的x,y坐標(biāo)
        identifier          標(biāo)識(shí)觸摸的唯一ID
        pageX pageY         觸摸目標(biāo)在頁(yè)面中的x,y坐標(biāo)
        screenX screenY     觸摸目標(biāo)在屏幕中的x,y坐標(biāo)
        target              觸摸的DOM節(jié)點(diǎn)目標(biāo)
        使用：event.touches[0].clientX
    2. 手勢(shì)事件
        gesturestart    當(dāng)一個(gè)手指按住屏幕皂林，另一個(gè)觸摸時(shí)
        gesturechange   觸摸屏任何一個(gè)手指位置變化時(shí)
        gestureend      任何一個(gè)手指從屏幕上移開(kāi)時(shí)

13.5 內(nèi)存和性能

1. 事件委托
    事務(wù)處理程序過(guò)多的解決方案，利用冒泡蚯撩，指定event.id不同的屬性础倍，來(lái)區(qū)別對(duì)待，都綁定到document上
    優(yōu)點(diǎn)：document對(duì)象訪問(wèn)快胎挎，可在頁(yè)面生命周期的任何時(shí)點(diǎn)上添加事務(wù)處理程序
        只添加一個(gè)時(shí)間處理程序沟启，需要的DOM引用更少
        頁(yè)面占內(nèi)存空間更少
2. 移除事件處理程序
    最好先通過(guò)onunload移除所有時(shí)間處理程序

13.6 模擬事件

1. DOM中的事件模擬
    1. 模擬鼠標(biāo)事件
        document.createEvent("MouseEvents") 返回的對(duì)象有一個(gè)名為initMouseEvent()的方法，接收15個(gè)參數(shù)犹菇，最后將對(duì)象傳給dispatchEvent()方法：

var btn = document.getElementById("myBtn");
//創(chuàng)建事件對(duì)象
var event = document.creatEvent("MouseEvents");
//初始化事件對(duì)象
event.initMouseEvent("click",true,true,document.defaultView,...);
//觸發(fā)事件
btn.dispatchEvent(event);

    2. 模擬鍵盤(pán)事件
        "KeyboardEvent"  "KeyEvents"
        initKeyEvent()   initKeyEvent()
    3. 模擬其他事件
        "MutationEvents"  initMutationEvent()
    4. 自定義DOM事件
        "CustomEvent"   initCustomEvent()
2. IE中的事件模擬
    document.crateEventObject()方法創(chuàng)建event對(duì)象
    手動(dòng)添加event對(duì)象信息
    調(diào)用fireEvent("onclick",event)觸發(fā)事件

第十四章 表單腳本

14.1 表單的基礎(chǔ)知識(shí)

<form> HTMLForm-Element類(lèi)型德迹，繼承了HTMLElement
document.getElementById("form1")/document.forms得到所有的表單
屬性和方法：
    acceptCharset   服務(wù)器能夠處理的字符集
    action          接受請(qǐng)求的URL
    elements        表單中所有的空間的集合
    enctype         請(qǐng)求的編碼類(lèi)型    
    length          表單中控件的數(shù)量
    method          要發(fā)送的HTTP請(qǐng)求類(lèi)型 get 或 post
    name            表單名稱(chēng)
    reset()         將所有表單域重置為默認(rèn)值
    submit()        提交表單
    target          用于發(fā)送請(qǐng)求和接收響應(yīng)的窗口名稱(chēng)
1. 提交表單
    <input type = "submit" ...>         提交按鈕
    <button type="submit" ></button>    提交按鈕
    <input type="image">                圖像按鈕
    preventnDefault()       阻止提交表單
    form.submit()  js提交表單
2. 重置表單
    <input type = "reset">
    <button type = "reset"></button>
3. 表單字段
    form.elements["name1"] 可根據(jù)name屬性來(lái)取，若不止一個(gè)揭芍，則返回NodeList
    1. 共有的表單字段屬性
        disable     布爾值浦辨，當(dāng)前字段是否被禁用
        form        指向當(dāng)前字段所屬表單的指針，只讀
        name        當(dāng)前字段的名稱(chēng)
        readOnly    布爾值沼沈，當(dāng)前字段是否只讀
        tabIndex    當(dāng)前字段的切換序號(hào)
        type        當(dāng)前字段的類(lèi)型
        value       當(dāng)前字段將被提交給服務(wù)器的值
    2. 共有的表單字段方法
        focus()
        blur()
    3. 共有的表單字段事件
        blur
        change      失去焦點(diǎn)且value值改變時(shí)觸發(fā)
        focus

14.2 文本框腳本

<input>     單行文本框   size value maxlength type="text"
<textarea>  多行文本框   rows cols
select() 方法流酬，都支持  獲得焦點(diǎn)時(shí)，選擇其所有文本 
    會(huì)觸發(fā)select事件
selectionStart  文本選擇區(qū)開(kāi)頭
selectionEnd    文本選擇區(qū)結(jié)尾的偏移量
setSelectionRange() 
    接收兩個(gè)參數(shù)：要選擇的第一個(gè)字符的索引列另、要選擇的最后一個(gè)字符之后的字符的索引
crateTextRange() 
    創(chuàng)建一個(gè)范圍
moveStart()
moveEnd()
collapse()
SelectText()
    三個(gè)參數(shù)：要操作的文本框芽腾、要選擇文本中第一個(gè)字符的索引、要選擇文本中最后一個(gè)字符之后的索引
6個(gè)剪貼板事件
    1. beforecopy   在發(fā)生復(fù)制操作前觸發(fā)
    2. copy         復(fù)制操作時(shí)觸發(fā)
    3. beforecut    發(fā)生剪切操作前觸發(fā)
    4. cut          剪切操作時(shí)觸發(fā)
    5. beforepaste  發(fā)生粘貼操作前觸發(fā)
    6. paste        粘貼操作時(shí)觸發(fā)
    clipboardData對(duì)象
        window對(duì)象的屬性
        getData()   
        setData()
        clearData()
HTML5約束驗(yàn)證API
1. 必填字段
    required屬性  任何標(biāo)注有required的字段页衙，在提交表單時(shí)都不能空著
2. 其他輸入類(lèi)型
    <input type="email">    要求輸入的文本必須符合電子郵件地址的模式
    <input type="url">      要求輸入的文本必須符合URL的模式
3. 數(shù)值范圍
    type = number/range/datetime/datetime-local/date/month/week/time
    min摊滔、max、step屬性
4. 輸入模式
    pattern屬性   比如只想輸入數(shù)字：pattern="\d+"
5. 檢測(cè)有效性
    checkValidity() 檢測(cè)表單中某個(gè)字段是否有效
    validity屬性的字段 可告訴你為什么字段無(wú)效店乐，其對(duì)象包含一系列屬性：
        cutomError艰躺、patternMismatch、rangeOverflow眨八、rangeUnderflow...
6. 禁用驗(yàn)證
    novaliidate     告訴表單不進(jìn)行驗(yàn)證

14.3 選擇框腳本

<select>腺兴、<option>元素
<select> type selectedIndex ...
    <option value="1">1</option>    index、label廉侧、selected页响、text、value
    <option value="2">2</option>
    <option value="3">3</option>
</select>

14.4 表單序列化

14.5 富文本框編輯

在頁(yè)面中編輯富文本內(nèi)容
在頁(yè)面中嵌入一個(gè)包含空HTML頁(yè)面的iframe段誊，通過(guò)設(shè)置designMode屬性闰蚕，空白HTML頁(yè)面可被編輯
1. contenteditable屬性
    將該屬性給任何元素，用戶(hù)就可以編輯該元素
    三個(gè)值：true(打開(kāi)) false(關(guān)閉) inherit(從父元素繼承)
2. 操作富文本
    document.execCommand()
    三個(gè)參數(shù)：要執(zhí)行命令连舍、表示瀏覽器是否應(yīng)該為當(dāng)前命令提供界面的布爾值没陡、執(zhí)行命令必須的值
3.富文本選區(qū)

第十五章 使用Canvas繪圖

15.1 基本用法

<canvas></canvas> 必須設(shè)置width、height屬性
getContext("2d")    獲取上下文，傳入"2d"即可獲取2D上下文
toDataURL("image/png")     可導(dǎo)出在<canvas>元素上繪制的圖像

15.2D上下文

1. 填充和描邊
    fillStyle = "red"/"#0000ff"/"rgba(0,0,255,0.5)" 
    strokeStyle
2. 繪制矩形
    fillRect()
    strokeRect()
    clearRect()
    四個(gè)參數(shù)：矩陣x坐標(biāo)盼玄，矩陣y坐標(biāo)染簇，矩陣寬度，矩陣高度 單位：像素
    lineWidth屬性控制  描邊線(xiàn)條寬度由
    lineCap 控制      線(xiàn)條模塊形狀(butt平頭/round圓頭/square方頭)
    lineJoin 控制     線(xiàn)條相交方式(round圓交/bevel斜交/miter斜接)
3. 繪制路徑
    beginPath()開(kāi)始繪制路徑
    創(chuàng)建路徑方法：
        arc(x,y,radius,startAngle,endAngle,counterclockwise)
        arcTo(x1,y1,x2,y2,radius)
        bezierCurveTo(c1z,c1y,c2x,c2y,x,y)
        lineTo(x,y)
        moveTo(x,y)
        quadraticCurveTo(cx,xy,x,y)
        rect(x,y,width,height)
    closePath() 繪制一條連接到路徑起點(diǎn)的線(xiàn)條
    fill()方法填充
    stroke()路徑描邊
    clip()路徑上創(chuàng)建一個(gè)剪切區(qū)域
    isPointInPath()  在路徑關(guān)閉之前確定畫(huà)布上某一點(diǎn)是否位于路徑上
4. 繪制文本
    fileText()  
    strokeText()
    四個(gè)參數(shù)：要繪制的文本字符串,x坐標(biāo)强岸，y坐標(biāo)，可選的最大像素寬度
    font    textAlign   textBaseline css有默認(rèn)值
5. 變換
    rotate(angle)           圍繞遠(yuǎn)點(diǎn)旋轉(zhuǎn)angle弧度
    scale(scaleX,scaleY)    縮放x方向以scaleX砾赔，y方向以scaleY
    translate(x,y)          將坐標(biāo)遠(yuǎn)點(diǎn)移動(dòng)到(x,y)
    transform(m1_1,m1_2,m2_1,m2_2,dx,dy)    修改變換矩陣
    setTransform(m1_1,m1_2,m2_1,2_2,dx,dy)  將變換矩陣重置為默認(rèn)狀態(tài)蝌箍，在transform
6. 繪制圖像
    drawImage(image,x,y)
    drawImage(image,x,y,width,height)
    drawImage(image,源圖像x,源圖像y,源圖像width,源圖像height,目標(biāo)圖像x,目標(biāo)圖像y,目標(biāo)圖像width,目標(biāo)圖像height)
7. 陰影
    shadowColor     用css顏色格式表示的引用顏色，默認(rèn)為黑色
    shadowOffsetX   形狀或路徑x軸方向的陰影偏移量暴心，默認(rèn)為0
    shadowOffsetY   形狀或路徑y(tǒng)軸方向的陰影偏移量妓盲，默認(rèn)為0
    shadowBlur      模糊的像素?cái)?shù)，默認(rèn)為0专普，即不模糊
8. 漸變
    1. 創(chuàng)建新的線(xiàn)性漸變
    createLinearGradient(起點(diǎn)x坐標(biāo),起點(diǎn)y坐標(biāo),終點(diǎn)x坐標(biāo),終點(diǎn)y坐標(biāo))
    創(chuàng)建放射漸變：createRadialGradient(x1,y1,r1,x2,y2,r2)
    2. 指定色標(biāo)
    addColorStop(色標(biāo)位置[0~1],CSS顏色)
    3. 設(shè)置fillStyle或strokeStyle為該對(duì)象
9. 模式
    創(chuàng)建一個(gè)新模式
    createPattern(imag/video/canvas,如何重復(fù)圖像的字符串)
        第二個(gè)參數(shù):repeat/repeat-x/repeat-y/no-repeat
10. 使用圖像數(shù)據(jù)
    獲取原始圖像數(shù)據(jù):getImageData(要取得數(shù)據(jù)的化名區(qū)域的x,y,該區(qū)域像素width,height) 
    返回對(duì)象有三個(gè)屬性:width height data
    data[0]紅 [1]綠 [2]藍(lán) [3]透明度
11. 合成
    globalAlpha     透明度0~1（全局）
    globalComposition-Operation   表示后繪制的圖像怎樣與縣繪制的圖形結(jié)合
        取值有：source-over/sourci-in/destination-over/.../copy/xor  

15.3 WebGL

Canvas的3D上下文
1. 類(lèi)型化數(shù)組
    ArrayBuffer 為了將來(lái)使用而分配一定數(shù)目的字節(jié) 創(chuàng)建的對(duì)象可通過(guò)byteLength屬性訪問(wèn)其字節(jié)數(shù)
    1. 視圖
        用ArrayBuffer創(chuàng)建數(shù)組緩沖器視圖
    2. 類(lèi)型化視圖
2. WebGL上下文
    1. 常量
    2. 方法命名
    3. 準(zhǔn)備繪圖
    4. 視口與坐標(biāo)
    5. 緩沖區(qū)
    6. 錯(cuò)誤
    7. 著色器
    8. 編寫(xiě)著色器
    9. 編寫(xiě)著色器程序
    10. 為著色器傳入值
    11. 調(diào)試著色器和程序
    12. 繪圖
    13. 紋理
    14. 讀取像素
3. 支持
    不是所有的瀏覽器都支持悯衬，且有些是禁用的
    一些老的機(jī)器驅(qū)動(dòng)不是最新的，默認(rèn)禁用WebGL

第十六章 HTML5腳本編程

第十七章 錯(cuò)誤處理與調(diào)試

第十八章 JavaScript與XML

第二十章 JSON

20.1 語(yǔ)法

1. 簡(jiǎn)單值
    字符串必須用雙引號(hào)"" 
2. 對(duì)象
    對(duì)象的屬性名必須加雙引號(hào)""
3. 數(shù)組

20.2 解析與序列化

1. JSON對(duì)象
    stringify()     JavaScript對(duì)象序列化為JSON
    parse()         JSON字符串解析為JavaScript
2. 序列化選項(xiàng)   
JOSN.stringify() 可接收另外兩個(gè)參數(shù)：
    第二個(gè)參數(shù)：
        數(shù)組：只返回該數(shù)組中對(duì)應(yīng)的屬性值
        函數(shù)：函數(shù)參數(shù)為key 和value 過(guò)濾后檀夹，返回原對(duì)象 
    第三個(gè)參數(shù)：
        每個(gè)級(jí)別鎖緊的空格數(shù)
    toJSON()方法 可做過(guò)濾器筋粗，在任意對(duì)象中添加該方法
3. 解析選項(xiàng)
    JOSON.prase() 可接收另一個(gè)參數(shù)（函數(shù)參數(shù)）

第二十一章 Ajax與Comet

21.1 XMLHttpRequest對(duì)象

var xhr = new XMLHttpRequest()
1. XHR的用法
    1. open(發(fā)送請(qǐng)求的類(lèi)型,請(qǐng)求的URL,是否異步發(fā)送請(qǐng)求);
        xhr.open("GET","example.php",false)
    2. send(請(qǐng)求主題發(fā)送的數(shù)據(jù))
    3. 響應(yīng)對(duì)象
        xhr.responseText   作為響應(yīng)主體被返回的文本
        xhr.responseXML    若為"text/xml"或"application/xml"屬性中將保持XMLDOM文檔
        xhr.status  響應(yīng)的HTTP狀態(tài)
        xhr.statusText  HTTP狀態(tài)的說(shuō)明
    4. 異步請(qǐng)求
        檢測(cè)readyState屬性，其取值：
            0(未初始化炸渡，未調(diào)用open方法)
            1(啟動(dòng)娜亿，已調(diào)用open方法，未調(diào)用send方法) 
            2(發(fā)送蚌堵，已調(diào)用send方法买决，未響應(yīng)) 
            3(接收，已接收到部分響應(yīng)數(shù)據(jù)) 
            4(完成吼畏，已經(jīng)收到全部響應(yīng)數(shù)據(jù))
        readyState 值變化督赤，觸發(fā)readystatechange事件，必須在調(diào)用open前指定onreadystatechange事件

        var xhr = new XMLHttpRequest()
        xhr.onreadystatechange = function() {
            if(xhr.readyState == 4) {
                if((xhr.status >= 200 && xhr.sttus<300) || xhr.status == 304) {
                    alert(xhr.responseText);
                }else {
                    console.log("Request was unsuccessful"+ xhr.status);
                }
            }
        };
        xhr.open("get","example.txt",true);
        xhr.send(null);

        可使用xhr.abort() 方法取消異步請(qǐng)求
2. HTTP頭部信息
    請(qǐng)求頭部信息
        Accept: 瀏覽器能夠處理的內(nèi)容類(lèi)型 
        ...
        Cookie: 當(dāng)前頁(yè)面設(shè)置的任何Cookie
        Host: 發(fā)送請(qǐng)求的頁(yè)面所在的域
        Referer: 發(fā)送請(qǐng)求的頁(yè)面的URL
        User-Agent: 瀏覽器的用戶(hù)代理字符串
    setRequestHeader(頭部字段的名稱(chēng),頭部字段的值) 設(shè)置請(qǐng)求頭部信息
    getResponseHeaer("MyHeader");   傳入頭部字段名稱(chēng)
    getAllResponseHeaders();        去的包含所有頭部信息的長(zhǎng)字符串
3. GET請(qǐng)求
    向服務(wù)器查詢(xún)信息泻蚊，將查詢(xún)字符串參數(shù)追加到URL的末尾


4. POST請(qǐng)求
    xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");

21.2 XMLHttpRequest 2級(jí)

21.3 進(jìn)度事件

21.4 跨資源共享

CORS 跨域資源共享 自定義的HTTP頭部讓瀏覽器與服務(wù)器進(jìn)行溝通

21.5 其他跨資源技術(shù)

圖像Ping:  使用<img>標(biāo)簽 網(wǎng)頁(yè)可以從任何網(wǎng)頁(yè)中加載圖像躲舌，
    缺點(diǎn)：只能發(fā)送GET請(qǐng)求，
        無(wú)法訪問(wèn)服務(wù)器的響應(yīng)文本  單項(xiàng)通信
JSONP：回調(diào)函數(shù)(響應(yīng)到來(lái)時(shí)應(yīng)該在頁(yè)面中調(diào)用的函數(shù))和數(shù)據(jù)
    動(dòng)態(tài)添加<script>元素script的src指定為url性雄，參數(shù)?callback= handleResponse
    只支持GET請(qǐng)求
    優(yōu)點(diǎn)：能夠直接訪問(wèn)響應(yīng)文本孽糖，并支持服務(wù)器與瀏覽器的雙向通信
    缺點(diǎn)：確定請(qǐng)求不容易 
Comet: 
    長(zhǎng)輪詢(xún)：
        短輪詢(xún)：瀏覽器定時(shí)向服務(wù)器發(fā)送請(qǐng)求，看是否有更新的數(shù)據(jù)
        頁(yè)面發(fā)起請(qǐng)求毅贮，服務(wù)器報(bào)紙連續(xù)打開(kāi)办悟，知道有數(shù)據(jù)可發(fā)送，發(fā)送完數(shù)據(jù)滩褥，瀏覽器關(guān)閉連接
    流：HTTP流...
SSE 服務(wù)器發(fā)送時(shí)間
    建立到服務(wù)器的單項(xiàng)連接 服務(wù)器可以發(fā)送任意數(shù)量的數(shù)據(jù) 響應(yīng)的MIME類(lèi)型必須是text/event-stream
Web Sockets
    HTTP請(qǐng)求發(fā)動(dòng)到瀏覽器以發(fā)起連接
    得到響應(yīng)后病蛉，協(xié)議交換為Web Socket協(xié)議
    wss://
    優(yōu)點(diǎn)：能夠發(fā)送少量的數(shù)據(jù)，而不擔(dān)心HTTP字節(jié)級(jí)的開(kāi)銷(xiāo) 適合移動(dòng)應(yīng)用

21.6 安全

第二十二章 高級(jí)技巧

第二十三章 離線(xiàn)應(yīng)用與客戶(hù)端存儲(chǔ)

23.1 離線(xiàn)檢測(cè)

navigator.onLine 檢測(cè)是否在線(xiàn)
online 、offline 事件

23.2 應(yīng)用緩存

appcache
manifest文件 
applicationCache對(duì)象 一個(gè)status屬性
    0 無(wú)緩存 1 閑置 2 檢查中 3 下載中 4 更新完成
...

23.3 數(shù)據(jù)存儲(chǔ)

1. Cookie
    1. 限制
        cookie在性質(zhì)上是綁定在特定的域名下的
        當(dāng)設(shè)定了一個(gè)cookie后铺然，在給創(chuàng)建它的域名發(fā)送請(qǐng)求時(shí)俗孝，都會(huì)包含這個(gè)cookie
    2. cookie的構(gòu)成
        1. 名稱(chēng)(name)          不區(qū)分大小寫(xiě) 必須經(jīng)過(guò)URL編碼
        2. 值(value)          存儲(chǔ)在cookie中的字符串值，必須URL編碼    
        3. 域(domain)         cookie對(duì)于哪個(gè)域有效魄健，可包含子域
        4. 路徑(path=)         指定域中的那個(gè)路徑赋铝，應(yīng)該向服務(wù)器發(fā)送cookie
        5. 失效時(shí)間(expires)   cookie合適應(yīng)該被刪除的時(shí)間戳 
        6. 安全標(biāo)志(secure)     指定后，cookie只有在使用SSL鏈接的時(shí)候才發(fā)送到服務(wù)器
    3. JavaScript中的cookie
        最好設(shè)置cookie時(shí)使用documentty.cookie = encodeURLComponent("name")+"="+encodeURLComponent("zhangsan");
        使用decodeURLComponent()來(lái)解碼
        name1=value1;name2=value2 domain=.baidu.com; path=/; secure
    4. 子cookie
        為了繞開(kāi)瀏覽器的單域名下的cookie數(shù)限制 subcookie
        存放單個(gè)cookie中的最小段的數(shù)據(jù)
        格式：name=name1=value1&name2=value2&name3=value3
    5. HTTP專(zhuān)有cookie
        只能從服務(wù)器端讀取沽瘦，JavaScript無(wú)法獲取HTTP專(zhuān)有cookie的值
2. IE用戶(hù)數(shù)據(jù)
3. Web存儲(chǔ)機(jī)制
    1. Storage類(lèi)型
        clear()
        getItem(name)
        key(index)
        removeItem()
        setItem(name,value)   
    2. SessionStorage(無(wú))
        瀏覽器關(guān)閉后消失 可以跨越網(wǎng)頁(yè)刷新存在 綁定于某個(gè)服務(wù)器對(duì)話(huà)
        sessionStorage.getItem("name")
        for(key in sessionStorage){}
    3. LocalStorage(5M)    
        要訪問(wèn)同一個(gè)LocalStorage對(duì)象革骨，頁(yè)面必須來(lái)自同一個(gè)域名 使用同一種協(xié)議,在同一個(gè)端口
        數(shù)據(jù)保留到通過(guò)JavaScript刪除或者用戶(hù)清理瀏覽器緩存
        localStorage.setItem("name","Nicholas")
    4. storage事件
        Storage對(duì)象進(jìn)行任何修改，都會(huì)觸發(fā)storage事件 
        該事件的event對(duì)象包含以下屬性
        domain:發(fā)生變化的存儲(chǔ)空間的域名
        key：設(shè)置或者刪除的健名
        newValue：如果是設(shè)置值析恋，則是新值良哲，若刪除則為null
        oldValue：鍵值被修改前的值
4. IndexedDB