JavaScript讀書筆記

1             JavaScript基本語法

1)        讀未聲明的變量會產(chǎn)生錯誤。寫未聲明的變量會是JavaScript環(huán)境自動產(chǎn)生一個全局變量。

2)        對于完全等同“===”，兩個null或者兩個undefined是等同的；但null與undefined是不等同的。

3)        對于相等“==”， null與undefined是相等的。若值與對象比較，核心語言內(nèi)部類會嘗試用valueof()轉換，再嘗試用toString()轉換。就是說valueof()會比toString()有更高的優(yōu)先級。但規(guī)則不絕對，例如Date類，它會首先嘗試用toString()轉換。當類的這兩個方法實現(xiàn)不一致時，在要進行類型轉換時指定具體的實現(xiàn)方法比較安全。

4)        在比較運算中，若一個對象或值被轉換成NaN（Not a Number），則永遠返回false。

5)        in可以檢查指定字符串是否是一個對象的基本屬性或方法名稱；instanceof運算符返回左邊的對象是否右邊類的一個實例；delete可以刪除一個屬性，它不會影響到屬性關聯(lián)的對象的生存，若該屬性不存在會返回true；[]可以以字符串的方式存取對象的屬性。

6)        typeof函數(shù)的返回值：數(shù)字——number，字符串——string，布爾值——Boolean，對象、數(shù)組、null——object，函數(shù)名——function或undefined（未定義時）。主要用來區(qū)別區(qū)別對象和原始類型。要區(qū)分對象的具體類型，用instanceof運算符。

7)        在函數(shù)體內(nèi)有隱含的arguments對象，可取得所有傳入的參數(shù)，可用類似數(shù)組的方式讀/寫各參數(shù)，length屬性表示參數(shù)的個數(shù)。但函數(shù)的只讀屬性length表示函數(shù)實際定義的參數(shù)個數(shù)。一個名為callee的屬性代表函數(shù)本身。

8)        構造函數(shù)也是函數(shù)，但它通過new調(diào)用，無返回值。函數(shù)體內(nèi)通過this來取得將要初始化的對象。

9)        對象的方法可用this對對象自身進行操作，其它方面與普通的函數(shù)沒有任何區(qū)別。

10)     每個類都有一個原型（prototype）對象，它具有一套屬性和方法，用來共享一個類的方法和常量，還有一個constructor的屬性引用構造函數(shù)。

11)     JavaScript中面向對象的特性：

a)         實例屬性：在構造函數(shù)創(chuàng)建或初始化的屬性。

b)        實例方法：在構造函數(shù)中把原型對象中的一個屬性設為函數(shù)來實現(xiàn)。

c)        類屬性：構造函數(shù)本身的屬性。

d)        類方法：用合適的函數(shù)作為構造函數(shù)本身的一個屬性。

e)         子類：把原型對象賦值為父類的一個實例，默認父類為Object的實例。同時還要將prototype.constructor賦值為子類的構造函數(shù)自己。

f)         繼承：只是在查詢一個屬性時自動發(fā)生，而不會在寫屬性時發(fā)生，就是說單寫一個父類的屬性時，JavaScript環(huán)境會為對象本身創(chuàng)建一個同名的屬性，從此該屬性就覆蓋了父類中的屬性。

12)     創(chuàng)建一個數(shù)組可用 new Array() 。可以在構造函數(shù)參數(shù)中指定數(shù)組的前n個元素的值。數(shù)組的元素可以具有任意類型，甚至是另外一個數(shù)組。同一數(shù)組中可以存在不同類型的元素。數(shù)組的length是可讀寫的。這也是縮短一個數(shù)組的唯一方法。

2             客戶端JavaScript

2.1           Window類

1)        Window類的實例是全局對象，用它的window或者self屬性可引用它自己。

2)        一個應用程序出現(xiàn)的每個窗口或框架都對應一個Window對象，而且都為客戶端JavaScript代碼定義了一個唯一的執(zhí)行環(huán)境。

3)        腳本執(zhí)行過程是Web瀏覽器的HTML解析過程的一部分。腳本按照它們的出現(xiàn)順序執(zhí)行。

4)        簡單的對話框可用：alert()、 confirm()、 prompt()之一。

5)        時間間隔方法為： setInterval()、 cleraInterval() 。

6)        onerror屬性指明錯誤處理的方式。 navigator屬性包含Web瀏覽器總體信息。 screen屬性包含顯示器的信息。

7)        打開窗口用open()方法，返回值是被打開的窗口。調(diào)用應該明確指明是window.open()，以避免和document.open()方法混淆。同時還應該調(diào)用focus()方法使窗口成焦點保證窗口可見。opener屬性是打開自己的那個窗口，若是用戶手動打開，這位null。

8)        關閉窗口用window.close()方法，窗口關閉后，代表它的Window對象可能還生存，可用closed屬性進行判斷它是否已經(jīng)被關閉。

9)        控制窗口幾何大小可用moveTo()、moveBy()、resizeTo()、resizeBy()。滾動可用scrollTo、scrollBy()。

10)     成焦點和失焦點可用 focus()、blur()。

11)     location屬性代表當前顯示文檔的URL。對其賦值使瀏覽器裝載新的URL（用Back按鈕能回退到原頁面）。其實，它是Location類的一個實例，它還有一個reload()方法可以裝載信的URL（用Back按鈕不能回退到原頁面）。

12)     history屬性可看成是代表歷史URL的一個特殊數(shù)組，它的可讀length屬性表明數(shù)組的長度。支持三種方法back()、forword()、go()。

13)     一個窗口中的任何框架都可以使用屬性frames、parent和top引用窗口中的其它框架。

14)     若框架指定了名字，引用就會被存儲到它的父Window對象的一個同名新屬性中。

15)     自定義的函數(shù)和構造函數(shù)只在定義它的窗口中可見。別的窗口要先通過一個屬性來引用。但JavaScript默認的函數(shù)和構造函數(shù)會在每個窗口中擁有獨立副本。

16)     onload()和onunload()事件分別在網(wǎng)頁裝載完成后和卸載前執(zhí)行。

2.2           Document類

1)        Document類的實例（即window.document）有forms[]、images[]、links[]、applets[]幾大數(shù)組。也可以通過與name屬性一樣的Document的屬性直接訪問這些元素，或者通過數(shù)組的命名屬性訪問。如：document.forms.f1 = document.forms.[“f1”]。

2)        links[]代表文檔中的Link對象數(shù)組，由HTML的<a herf …>或者<area>定義，Link對象代表超級鏈接的URL，具有Location類的所以屬性。

3)        anchors[]代表文檔中的Link對象數(shù)組，由HTML的<a>定義。

4)        applets[]代表文檔中的Link對象數(shù)組，由HTML的<applet>或<object>嵌入在文檔中的Applet對象組成。

5)        embeds[]代表文檔中的Link對象數(shù)組，由HTML的<embed>或<object>嵌入在文檔的非Applet對象組成。

6)        Write()方法可以生成網(wǎng)頁內(nèi)容，但只能在文檔被解釋時調(diào)用，即在<script>塊中調(diào)用。創(chuàng)建新文檔的標準格式為：xxx.document.open(); xxx.document.write(“ABC”);  …  xxx.document.close();  其中的open()方法是可選的， JavaScript會隱式打開一個新的文檔。

7)        用Image()構造函數(shù)能產(chǎn)生一個屏外圖像，強迫瀏覽器裝載圖像，其onload事件處理程序能在圖片裝載后馬上執(zhí)行。

2.3           Form類

1)        Form類的實例代表一個HTML表單，通過Document的forms[]數(shù)組可以得到其實例。

2)        elements[]數(shù)組代表表單中所有輸入元素，并可通過type屬性知道每個元素的具體類型。

3)        submit()方法和reset()方法分別用于提交或者重置表單。但與直接點擊按鈕不一樣，兩個方法不會出發(fā)對應的onsubmit和onrest事件。

4)        如果HTML的<Form>定義了name屬性，則Document對象會多存儲一個同名屬性，指向該Form對象。各元素的情況類似，同時如果表單中由多個HTML元素的name屬性相同，這些元素會被存放到一個數(shù)組中，按元素的出現(xiàn)順序排序。

2.4           Cookie類

1)        能用Document的cookie屬性對Web瀏覽器的cookie進行操作，其屬性是一個特殊的字符串屬性。

2)        cookie除了名值對外，還有四個可選屬性：expires——有效期、path——可見路徑、domain——可見域、secure——是否在安全協(xié)議間傳輸。

3)        cookie值不能有分號、逗號或空白符，所以要用escape()方法進行編碼，讀取時用unescape()進行解碼。

4)        cookie的默認屬性通過字符串“;expires=…”的形式附加，其中有效期要用Data.toGMTString()格式化。

5)        要改變一個cookie的值，用同名字和新值再設置cookie一次。要刪除，將同名值、任意值加上一個過去的有效期來設置。

6)        讀取一個cookie時，返回一個字符串，是name=value對的列表，用分號隔開。

2.5           DOM文檔對象模型

1)        可用Document對象的implementation.hasFeature()方法查詢是否支持特定的DOM特性。

2)        Document中有childNodes、firstChild、lastChild、nextSibling、previousSibling來遍歷各個節(jié)點。

3)        Document中的getElementsByTagName()方法返回指定HTML標記類型的數(shù)組。方法的參數(shù)不分大小寫，可用“*”來返回所有元素。

4)        Document中的getElementsById()方法返回指定id的元素。

5)        DocumentFragment是一種特殊類型的節(jié)點，自身不會出現(xiàn)在文檔中，只作為連續(xù)節(jié)點集合的臨時容器，用createDocumentFragment()創(chuàng)建。

2.6           CSS級聯(lián)樣式表

1)        CSS樣式由一個名/值的性質(zhì)對列表指定，性質(zhì)對之間用分號隔開，名稱和值之間用冒號分隔。

2)        樣式性質(zhì)如果有“inherit”的話，說明它應該繼承自己父元素的值。

3)        可用特殊快捷性質(zhì)把常常在一齊使用的樣式性質(zhì)組合在一起。就是“快捷性質(zhì)名：連續(xù)多個值”。如：font：bold italic 24pt Helvetica； 。

4)        CSS的規(guī)則從一個選擇器開頭，指定HTML元素（小寫），用大括號括起屬性和值。用逗號分隔開頭的選擇器名稱表示樣式都適用于它們。若無逗號分隔，表示一個標記嵌套在另一個標記時適用。還可以用“.”號開頭指定HTML元素的類，HTML元素的類由HTML中的class屬性指定，可混用以上的兩種方法。用“#”開頭指定適用于具體id的HTML元素。

5)        樣式表可以放在<head>部分的<style>和</style>標記之間?；蛴?/span><link>引用。可混用以上兩種方法，在<style>標記范圍內(nèi)用@import引用。

6)        用戶樣式覆蓋默認樣式，作者樣式覆蓋用戶樣式，內(nèi)聯(lián)樣式覆蓋所有樣式。一個元素上應用多個樣式，最為詳細規(guī)則定義的樣式將覆蓋不太詳細規(guī)則定義樣式相沖突的部分。

7)        只要position屬性不是被設為static，就可以用left、top、right、bottom這些性質(zhì)的任意組合來定義元素的位置。width、height定義大小，單位可以是：%、px（像素）、in（英寸）、cm（厘米）、pt（點）、em（當前字體行高）。

8)        z-index默認為0，值越小越先被繪制，此規(guī)則只適用于同一容器內(nèi)的子元素。

9)        visibility、display都可以控制可見性，同設為none時，在常規(guī)的流布局中，visibility是分配了空間，display沒有分配空間。

10)     用overflow指定超出元素邊框是的處理。用clip確定顯示元素的哪些部分。用rect指定具體區(qū)域。

11)     在JavaScipt中，獲取了一個HTML元素后，就可以通過元素的style屬性獲取那個元素的CSS2Propertites對象。設置這些屬性與設置HTML元素的style性質(zhì)中的效果一樣。但無法用JavaScript來設定樣式表的信息。同時緊記，在使用CSS2Propertites對象的樣式屬性時，所有值都必須是字符串（要加上引號），有單位的情況也記得加上單位。CSS2Propertites沒有提供查詢CSS級聯(lián)的方法，也沒有提供判斷應用于特定元素的完整樣式集合的方法。

12)     JavaScript中CSS性質(zhì)的命名規(guī)范：去掉CSS性質(zhì)名中包含的所以連字符（減號），且把原來緊接在連字符后的字母改成大寫。若CSS性質(zhì)對應有float屬性，給屬性要加上css前綴，變成cssFloat。

2.7           事件與事件處理

1)        主要的基本事件：onabor、onblur、onchange、onclick、onerror、onfocus、onkeydown、onkeypress、onkeyup、onload、onmousedown、onmouseout、onmouseover、onmouseup、onrest、onresize、onselect、onsubmit、onunload。

2)        事件處理程序被設置為JavaScript代碼串，作為HTML的性質(zhì)值，并在Document對象中有同名的JavaScript屬性映射。當通過JavaScript進行訪問時，事件處理程序的屬性時函數(shù)。要通過JavaScript把一個事件處理程序賦給一個文檔的元素，只要把事件處理程序屬性設置為想用的函數(shù)即可，應該把函數(shù)自身賦予事件處理程序屬性，而不是調(diào)用函數(shù)的結果，所以函數(shù)名稱后無需加括號，或者用匿名函數(shù)。

3)        可以用JavaScript直接調(diào)用事件處理函數(shù)，但這不是模擬事件發(fā)生的真實狀況，只是執(zhí)行定影行為的那個屬性值的函數(shù)。

4)        顯式地調(diào)用事件處理函數(shù)可以通過JavaScript擴展HTML代碼定義地事件處理函數(shù)（AOP？！），如： var oldHandler = b.onclick; function newHandler(){…} b.onclick = function() {oldHandler(); newHandler()} 。

5)        如果瀏覽器執(zhí)行某種默認動作來相應一個事件，那么返回false可以阻止瀏覽器執(zhí)行那個動作。一個例外是鼠標移動到一個超鏈上，要阻止默認動作，onmouseover事件處理程序要返回true。

6)        HTML性質(zhì)的事件處理程序作用域的頭是調(diào)用的對象，下一個是觸發(fā)事件處理程序的事件對象，還會延伸到包容層，最終到達Window對象。同時，作用鏈的精確構成尚未標準化，不同的瀏覽器有不同的實現(xiàn)。理想的方法是讓它們只調(diào)用在別的地方定義的全局函數(shù)。

7)        在IE4~6中，用Event對象提供發(fā)生事件的詳細情況，它是Window對象的一個屬性（全局）。

8)        利用onPropertyChange事件，可捕捉多種情況，例如鍵盤輸入、粘貼等，是捕捉對象內(nèi)容改變的良好方式。

2.8           安全

1)        同源策略：一個腳本只能讀取與它同源的窗口或文檔屬性。如果兩個窗口（或框架）含有的腳本把domain設為相同，他們就自動滿足此策略。

2.9           JavaScript與Java

1)        JavaScript可以訪問Applet的公共字段和方法。

2)        Java與JavaScript的所有交互都能由netscape.javascript.JSObject類的實例來處理。可惜不管是Netscape還是IE都有bug！

3)        Nescape的LiveConnect技術還允許JavaScript程序實例化自己的Java對象并使用他們，但IE不支持！

3             特殊技巧

1)        把合理的字符串轉換成數(shù)字的簡單方法：表示數(shù)字的字符串變量 – 0 。

2)        把數(shù)字轉換成字符串的簡單方法： 數(shù)字（或數(shù)字變量） + “” 。

3)        用String類的localeCompare()方法對中文字排序，能出到按拼音排序的效果。

4)        利用Number類的toFixed()方法，可以格式化小數(shù)位數(shù)。

5)        用Window對象的 showModalDialog()方法可以打開一個模態(tài)窗口，showModelessDialog()可以可以打開一個非模態(tài)的窗口。

4             注意事項

1)        大部分的HTML元素都會以其name屬性在JavaScript環(huán)境中映射為屬性，所以為HTML元素起名字要非常小心，不要覆蓋主要JavaScript的對象名稱或者方法名稱。

2)        不能在JavaScript代碼中出現(xiàn)“</script>”，哪怕是字符串。若要出現(xiàn)該字符串，至少要表示為：”</” + “script>” 的形式。