深入淺出.jpg

第一章-JavaScript快速導覽

1. JavaScript可用於為網頁加上行為

2. 瀏覽器引擎執行JavaScript的速度比起幾年前快多了

3. 瀏覽器只要遇到頁面中的JavaScript程式碼,就會著手執行該程式碼

4. 要把JavaScript加入你的頁面,可以使用<script>元素

5. 你可以把JavaScript內嵌在網頁裡,或是從你的HTML連結到包含JavaScript的獨立檔案

6. 使用<script>標記的src屬性可以連結到一個獨立的JavaScript檔案

7. HTML用於宣告你的頁面的結構和內容;而JavaScript用於求值以及將行為加入你的頁面

8. JavaScript程式組成自一連串的述句

9. 變數宣告是最常用到的JavaScript述句之一;也就是,使用var關鍵字宣告一個新變數,並使用賦值運算符 = 將一個值指定給它

10. JavaScript變數的命名規則並不多,請務必遵守

11. 命名變數的時候,記得避免使用JavaScript關鍵字

12. JavaScript運算式用於求值

13. 運算式的三種常見類型:數值、字串、布林

14. If/else述句讓你得以在程式碼中做判斷

15. While/for述句讓你得以經由迴圈執行程式碼許多次

16. 要將訊息顯示在控制台上,請使用console.log而不要使用alert

17. 控制台訊息應該僅用於除錯,因為使用者多半不會去檢視控制台訊息

18. JavaScript最常見的用法就是為網頁加上行為,但是它也被用於撰寫Adobe Photoshop、Open office和Google APPs之類的應用程式,甚至做為伺服器端的程式語言

 

第二章-撰寫真正的程式碼

1. 你可以使用流程圖來描述JavaScript程式的邏輯,顯示判斷點和行動。

2. 著手撰寫程式之前,最好先使用虛擬碼勾勒出程式需要做的事情。

3. 虛擬碼(Pseudocode)的內容逼近真正的程式碼應該做的事情。

4. 布林運算符有兩種:比較運算符以及邏輯運算符。使用在運算式中時,布林運算符的求值結果不是true就是false。

5. 比較(comparison)運算符用於比較兩個值,其求值結果不是true就是false。例如,我們可以像這樣來使用比較運算符<(小於) 3<6 此運算式的求值結果為true。

6. 邏輯(logical)運算符用於結合兩個布林值。例如true‖false的求值結果為true;true&&false的求值結果為false。

7. 使用Math.random函式可以產生範圍0到1(包含0,不含1)的隨機數字。

8. Math.floor可以把一個小數下調為最接近的整數。

9. 當你使用Math.random和Math.floor的時候,注意Math的第一字母是大寫的M。

10. JavaScript函式prompt會顯示一個帶有訊息的對話框以及讓使用者輸入一個值的空間。

11. 這一章,我們使用prompt來取得使用者的輸入,並且使用alert在瀏覽器中顯示戰艦遊戲的結果。

 

第三章-介紹函式

1. 一個函式的宣告使用的是function關鍵字以及函式的名字

2. 一個函式所具有的任何參數會被一對圓括號圍著。如果沒有參數,使用一對空的圓括號就行了

3. 函式的主體會被一對大括號({})圍著

4. 當你叫用一個函式,該函式之主體中的述句(statement)會被執行

5. 叫用一個函式與調用一個函式指的是同一件事

6. 我們會使用函式的名字來叫用一個函式,以及將引數傳入函式的參數

7. 一個函式可以選擇性的使用return述句來傳回一個值

8. 一個函式會為參數以及函式所使用的任何區域變數,建立一個區域性的作用域

9. 變數若不是位於全域性的作用域(在程式中任何地方都可以看到它們),就是位於區域性的作用域(只有在宣告它們的函式中才看的到它們)

10. 將區域變數宣告在你的函式之主體中的頂部

11. 宣告一個區域變數的時候,如果你忘了使用var,那麼他將會成為全域變數,在你的程式中,這將會導致意想不到的結果

12. 要組織你的程式碼以及建立可重用的程式碼團塊,函式不失為一個好方法

13. 你可以透過將引數傳入參數(以及使用不同的引數來獲得不同結果)的方式來客製化一個函式中的程式碼

14. 要減少或消除重複的程式碼,函式也是一個好方法

15. 你可以使用JavaScript所提供的許多內建函式,像是alert、prompt和Math.random,來進行程式中的工作

16. 使用內建函式,意味著使用既有的程式碼,不必自己撰寫程式

17. 建議組織你的程式碼,使得你的JavaScript檔案之頂部可以看到聚集在一起的函式,以及聚集在一起的全域變數

 

第四章-為你的資料加上一些順序

1. 陣列是一個供有序資料使用的資料結構

2. 陣列中保存了一組資料項,每筆資料具有自己的索引(index)

3. 陣列使用的是從零開始的索引,第一筆資料項位於索引0

4. 所有的陣列都會具有一個length屬性,該屬性存放了陣列中所包含的資料項數目

5. 你可以使用陣列的索引來存取任何的資料項。例如,你可以使用maArray[1]來存取索引1的資料項(陣列的第二筆資料)

6. 如果資料項不存在,試圖存取他將會導致值未定義的結果

7. 將一個新值[賦值](assign)給一個既有的資料項,將會改變它的值

8. 將一個值[賦值]給陣列中一個不存在的資料項,將會在陣列中建立一個新的資料項

9. 你可以使用任何型別的值,來作為一個陣列的資料項

10. 一個陣列中,並不需要所有的值是相同的型別

11. 你可以使用陣列字面表示法(array literal notation)來建立一個新的陣列

12. 欲建立一個空陣列可以這麼做 var myArray=[];

13. For迴圈常用於迭代陣列

14. For迴圈可將變數的初始化、條件的測試、變數的遞增,打包成一道述句

15. 當你不知道需要循環幾次時,通常會使用while迴圈,while迴圈會循環到條件不相符為止。當你知道迴圈需要執行幾次時,通常會使用for迴圈

16. 當一個陣列的中間包含了未定義的資料項,稱為稀疏陣列

17. 你可以使用事後遞增運算符++來將一個變數的值加1

18. 你可以使用事後遞減運算符--來將一個變數的值減1

19. 你可以使用push來將一個新值加入一個陣列

 

第五章-認識物件

1. 物件是屬性所構成的一個集合

2. 可以使用點號來存取屬性:變數名稱之中依序包含了物件、一個點號以及屬性的名稱

3. 隨時可以為一個物件新增屬性、為新的屬性名稱賦值

4. 可以使用delete運算符,從物件中刪除屬性

5. 變數可以保存字串、數字和布林值之類的基本值,但它無法保存物件。然而,它可以保存物件的址參器(reference)。所以我們會把物件稱為「址參器變數」

6. 當你傳遞物件給一個函式,函式所取得的是該物件之址參器的一個副本,而不是物件本身的一個副本。所以如果你改變了物件中某個屬性的值,它會實際改變原始物件中相對應的值。

7. 物件的屬性可以包含函式。若函式位於物件中,我們會把它稱為方法(methods)

8. 你可以使用點號來叫用一個方法:物件名稱、一個點號以及方法的屬性名稱,後面跟著一對圓括號

9. 方法就像是一個函式,只不過它位於物件之中

10. 你可以傳遞引數給方法,就像一般的函式那樣

11. 當你叫用了一個物件的方法,this關鍵字會被指向被你叫用了該方法的物件

12. 要在一個物件的方法中存取物件的屬性,你必須使用點號,以及把物件的名稱代換成this

13. 在物件導向程式設計中,我們所思考的是物件,而不是程序

14. 物件包含了狀態(state)與行為(behavior)。狀態會影響行為,而行為也會影響狀態

15. 物件將狀態或行為的複雜性封裝或隱藏在物件裡

16. 一個設計良好之物件所供之方法,可以把物件完成工作的細節抽象化,所以你不必擔心細節問題

17. 除了自行建立的物件,你還可以使用JavaScript所提供的許多內建物件。

 

第六章-認識DOM

1. Document Object Model(文件物件模型)或簡稱DOM,是你的網頁在瀏覽器中的內部表示法

2. 當你的瀏覽器載入並解析HTML後,便會替你的頁面建立DOM

3. 你可以使用document物件所提供的屬性和方法來存取和修改DOM

4. Document.getElementById方法會傳回一個元素物件,用於代表你的頁面中的一個元素

5. 你可以使用元素物件所提供的屬性和方法,來讀取一個元素的內容以及改變元素的內容

6. innerHTML屬性中保存了一個元素的文字內容,以及所有被嵌套的HTML內容

7. 你可以透過改變一個元素的innerHTML屬性,來改變它的內容

8. 如果你透過改變一個元素的innerHTML屬性來改變一個元素,你會立即在網頁中看到相對應的變化

9. 你可以使用getAttribute方法來取得一個元素之屬性的值

10. 你可以使用setAttribute方法來設定一個元素之屬性的值

11. 如果你把程式碼放到你的頁面之<head>中的一個<script>元素裡,在頁面完全載入之前,切勿試圖修改DOM

12. 你可以使用window物件的onload屬性來為載入事件(load event)設定一個事件處理程序(event handler)或回呼函式

13. 一但頁面被完全載入,window物件之onload屬性的事件處理程序將會被叫用

 

第七章-資料型別、等於、型別轉換以及其他類似的東西

1. JavaScript中,資料型別可以分成兩類:基本資料型別(primitive type)以及物件(object)。任何值不是屬於基本資料型別,就是屬於物件

2. 基本資料型別包括:數字、字串、布林值、null以及undefined。其他的都是物件

3. undefined意味著一個變數尚未被初始化為一個值

4. null意味著no object

5. “NaN”代表”Not a Number”,但比較好的做法是把NaN想成是一個在JavaScript中無法表示的數字。NaN的資料型別是數字

6. NaN不等於其他值,包括自己。所以使用isNaN函式來測試NaN

7. 若兩個運算元具有不同的資料型別,則等於運算符(==)在進行等於測試之前,將會試著把其中一個運算元轉換成另一個運算元的資料型別。

8. 若你不想讓型別轉換發生,可以使用===,然而有時==的型別轉換卻很有用

9. 型別轉換也會發生在其他運算,像是算術運算以及字串連接

10. JavaScript中有五個falsey值:undefined、null、0、””(空字串)以及false。其餘的則為truthy值

11. 有時字串的行為如同物件。若你對「基本資料型別字串」(primitive string)使用屬性或方法,JavaScript將會暫時把字串轉換成物件,並使用其屬性或方法,然後把它轉換回基本資料型別字串。這種情況發生在幕後,所以你不必擔心。

12. 兩個物件只有在變數包含了指向相同物件的「物件址參器」(object reference)才會相等

常用方法屬性

length屬性:提取字串中的字符數

charAt(i)方法:提取相對位置i上的單一字符

indexOf(a,b) 方法:提取字串裡a第一次出現的索引。可指定從第b號索引開始找。

substring(a,b)方法:提取位置a~b上的字符(不含b)(如果沒有b,就會把a之後的字符全部提取)

split(a)方法:字串中有a的地方就分割,變成陣列中不同的字串

toLowerCase/toUpperCase:轉成小/大寫回傳

replace取代 concat串連 match尋找相同字串 slice移除 trim移除前後空白

 

第八章-全部放在一起

1. 我們以HTML來建立Battleship遊戲的頁面結構、以CSS來提供遊戲的視覺樣式、以JavaScript程式來安排遊戲的行為

2. 表格中每個<td>元素的id被用於更新元素中的圖像,以便指示命中或失誤的結果

3. 表單使用了一個型態為”button”的輸入元素。我們將一個事件處理程序(event handler)附接到該按鈕,這樣我們在程式中就可以知道玩家在何時進行了猜測

4. 為了從表單中型態為text的輸入元素取得一個值,我們會使用該元素的value屬性

5. CSS的定位功能可用於在網頁中精確定位元素

6. 我們的程式碼構成自三個物件:模型(model)、視圖(view)以及控制器(controller)

7. 遊戲中每個物件各司其職

8. 模型物件負責保存遊戲的狀態,以及實現修改狀態的邏輯

9. 視圖物件負責「在模型物件中之狀態改變的時候」更新顯示結果

10. 控制器物件負責把遊戲整合在一起,確保玩家所做的猜測有被送往模型物件,以便更新狀態,以及檢測遊戲是否已經結束

11. 以各司其職的物件來設計遊戲,我們可以獨立建構和測試遊戲的每個部分

12. 為了減化模型物件的建立和測試,我們最初會把船艦的位置寫死。確定模型物件可以運作後,我們會以程式碼所產生的隨機位置來取代被寫死的位置

13. 我們會使用模型物件中的屬性,像是numShips和shipLength,所以在稍後我們可能想要修改的方法中,我們不必把值寫死

14. 陣列所提供的indexOf方法類似於字串的indexOf方法。陣列的indexOf方法會取得一個值,若該值存在於此陣列中,則會回傳該值的索引,否則會回傳-1

15. 鏈接功能(chaining)讓你得以(使用點號運算符)將物件的址參器串在一起,這樣可以結合述句以及避免臨時變數

16. Do while迴圈類似於while迴圈,只差在前者會先在主體中執行述句,然後再檢查條件

17. 品質保證(QA)是程式碼開發不可或缺的一環。QA不僅要求你測試有效的輸入,還要求你測試無效的輸入

 

第九章:非同步程式設計

1. 被撰寫出來的大多數JavaScript程式碼都會對事件作出反應

2. 對了對事件作出反應,你需要撰寫事件處理程序(event handler)函式,並註冊它。舉例來說,為了向click事件註冊一個處理程序,你需要把處理程序函式賦值給一個元素的onclick屬性

3. 你不需要處理任何特定的事件。你可以選擇處理你感興趣的事件

4. 函式常做為處理程序之用,因為函式允許我們打包程式碼以便稍後(當事件發生時)加以執行

5. 撰寫用於處理事件的程式碼,不同於由上到下執行然後完成工作的程式碼。事件處理程序可以在任何時間以任何順序執行:它們是非同步的(asynchronous)

6. 在DOM中之元素上發生的事件(DOM事件)會導致一個事件物件被傳入事件處理程序

7. 事件物件(event object)中的屬性包含了與事件有關的額外資訊,包括類型(像是click或load)以及目標(事件是在哪個物件上發生的)

8. 版本較舊的IE具有與其它瀏覽器不同的事件模型。

9. 你會遇到許多事件發生時間相當接近的情況。如果所發生的事件太多,導致瀏覽器無法在事件發生之際即時處理,事件會按照發生的先後順序,被存入一個事件佇列(event queue),這樣瀏覽器就可以依序為每個事件執行相對應的事件處理程序

10. 如果一個事件處理程序需要進行複雜的計算,這將會拖慢佇列中事件的處理速度,因為一次只可以執行一個事件處理程序

11. 函式setTimeout和setInterval可用於在特定的時間過後產生基於時間的事件

12. getElementsByTagName函式會回傳NodeList(類似陣列,所以你可以迭代它)中所包含的元素物件,可以是零個、一個或多個

事件:click / load / mousemove / keypress / mouseover / mouseout / resize / play / pause / dragstart / drop / touchstart / touchend

 

第十章:一級函式

1. 定義函式有兩種方式:一是使用函式宣告(function declaration),一是使用函式運算式(function expression)

2. 函式址參器(function reference)是一個指向函式的值

3. 處理過函式宣告後才會執行其餘的程式碼

4. 於其餘程式碼執行期間,才會執行函式運算式(也就是對函式運算式求值)

5. 當瀏覽器在處理一個函式宣告的時候,他會建立一個函式以及一個與函式同名的變數,而且會把函式的址參器存入該變數

6. 當瀏覽器處理函式運算式的時候,它也會建立一個函式,但是由你負責處理函式址參器的問題

7. 一級(first class)值可以賦值給變數(包括資料結構)、傳遞給函式或者從函式回傳

8. 函式址參器就是一級值

9. 陣列的sort方法需要取得一個函式,此函式知道如何比較陣列裡的兩個值

10. 你傳遞給sort方法的函式,應該要回傳以下任一個值:大於0的值、0或小於0的值

 

第十一章:匿名函式、作用域以及閉包

1. 匿名函式(anonymous function)是一個沒有名稱的函式運算式

2. 匿名函式可以讓你的程式碼更簡潔

3. 函式宣告(function declaration)定義之後才會執行程式碼的其餘部分

4. 於程式碼的其餘部份執行期間,函式運算式(function expression) 才會被求值,所以除非它所在之位置被執行(或被求值),否則它不會被定義

5. 你可以傳遞一個函式運算式給另一個函式,或是從一個函式回傳一個函式運算式

6. 函式運算式的求值結果為函式址參器(function reference),所以你可以把函式運算式使用在可以使用函式址參器的任何地方

7. 經嵌套之函式(nested function)是指把函式定義在另一個函式之內

8. 經嵌套之函式具有區域性作用域,如同其它的區域變數

9. 語彙作用域(lexical scope)是指我們只需要透過程式碼的閱讀,就可以判斷變數的作用域

10. 為了繫結經嵌套之函式中一個變數的值,JavaScript會使用最接近之外層函式(closest enclosing function)中所定義的值。如果沒有找到該值,它會在全域性作用域裡尋找。

11. 閉包(closure)就是一個函式以及所參用的操作環境(environment)

12. 壁包會捕捉壁包被建立時,作用域所包含之變數的值

13. 函式主體中的自由變數(free variable)就是在該函式主體內,未被繫結任何值的變數

14. 如果你用於執行函式壁包的語境(context)與用於建立它的語境有所不同,自由變數的值決定自所參用的操作環境

15. 閉包常用於捕捉事件處理程序的狀態

 

第十二章-高階物件結構

1. 如果你需要建立少量的物件,物件字面(object literal)可以運作的相當好

2. 如果你需要建立許多類似的物件,建構程序(constructor)可以運作的相當好

3. 建構程序就是需要與new運算符一起使用的函式。按慣例,建構程序的名稱,首字母為大寫

4. 使用建構程序,我們可以建立具有相同屬性名稱和方法的一致性物件

5. 欲建立物件,需要對所叫用的建構程序函式使用new運算符

6. 如果你對所叫用的建構程序函式使用new運算符,這會建立一個新的空物件,而且在建構程序的主體內,它會被賦值給this

7. 在建構程序函式中使用this可以存取當前正在建立的物件,以及添加屬性到該物件

8. 建構程序函式會自動回傳一個新的物件

9. 如果你忘了對建構程序函式使用new,並沒有物件會被建立。在你的程式碼中,這將會導致難以除錯的錯誤

10. 為了自訂物件,我們會傳遞引數給建構程序,並使用這些值來初始化所建立物件的屬性

11. 如果建構程序具有許多參數,可以考慮將它們合併成一個物件參數

12. 想知道一個物件是否建立自特定的建構程序,可以使用instanceof運算符

13. 你可以修改建立自建構程序的物件,就像你可以修改物件字面那樣

14. JavaScript隨附了一些建構程序,你可以用它們來建立有用的物件,像是date物件、正規運算式以及陣列

 

第十三章-使用原型

1. JavaScript的物件系統使用的是原型繼承(prototypal inheritance)

2. 當你經由建構程序為物件建立了一個實例,該實例將會具有自訂的屬性,以及建構程序中之方法的副本

3. 如果你添加屬性到建構程序的原型,經由該建構程序建立的所有實例將會繼承這些屬性

4. 把屬性放到原型,可以減少物件在執行時期出現重複的程式碼

5. 欲覆寫(override)原型中的屬性,只需要添加屬性到實例即可

6. 建構程序函式具有一個預設的prototype屬性,透過它,你可以存取函式的原型屬性

7. 你可以把自己的物件賦值給建構程序函式的prototype屬性

8. 如果你要使用自己的原型物件,為確保一致性,務必正確設定建構程序函式的constructor屬性

9. 如果你添加屬性到一個原型,但是你之前已建立的實例繼承該原型,那麼這些實例將會立即繼承這些新屬性

10. hasOwnProperty方法可用於判斷一個屬性是否定義於實例中

11. call方法可用於調用一個函式,並可指定一個物件作為該函式之程式碼主體中的this

12. Object是所有原型和實例最終都會繼承的物件

13. Object具有所有物件都會繼承的屬性和方法,像是toString和hasOwnProperty

14. 你可以覆寫或添加屬性到內建物件,像是Object和String,但是這麼做時要小心,因為你的改變將會造成廣泛的影響

15. JavaScript中,幾乎一切皆為物件,包括函式、陣列、許多內建物件,以及你自訂的所有物件

arrow
arrow
    創作者介紹
    創作者 Cloud祥雲 的頭像
    Cloud祥雲

    飛揚

    Cloud祥雲 發表在 痞客邦 留言(0) 人氣()