最近除了跳級研究 jQuery 之外，也從基礎開始認識 JavaScript，不得不說，歐萊禮真是個恐怖且強大的出版社阿(膜拜)，我最近在看歐萊禮出版的「深入淺出 JavaScript」，其實一開始去書店翻找這本書的時候，還對他的排版嗤之以鼻，想說怎麼搞得那麼亂，還用一堆裝可愛的外國人來作對話式教學。

但，事實證明我錯了，利用這種情境 & 對話式的教學，還有摘要的重點，真的是可以讓初學者快速上手啊!!! 所以歐萊禮，請容我深深地跟你道歉，以及至上我最高的敬意 <(_ _)>

那麼以下分享我看了這本書之後導正 & 瞭解的一些觀念，分享給跟我一樣的超級初心者。希望能讓你們在學習 JavaScript 的路上有所幫助!! (高手別來阿 XD )

閱讀進度 CH1 ~ 2

• CH1：互動性網站
• CH2：儲存資料

筆記內容

∎ alert() 也是函數的一種，他是 JavaScript 的內置函數。每個 JavaScript 函數都會用 () 包住要傳給函數的訊息。

∎ 事件 = 告訴 JavaScript 當使用者在網頁上「做了某件事情」，才會觸發裡面的程式碼。例如 onclick (點擊了某個按鈕)就是一種事件。

∎ 函數 = 可以重複執行的程式碼。

∎ if(userName) 表示當 userName 這個變數有值(可以被取得)，就執行以下的動作。

var userName = prompt("What is your name?" , "Enter your name here");
if (typeof(userName) !== 'undefined' ) {
  alert("welcome, " + userName); 
} 

原本在取得變數的部分我是寫 if(userName)，不過這樣寫很容易讓程式無法執行(感謝 Kuro 指正)，如果 userName 是空值，或是未定義...等一些特殊狀態，裡面的 alert()就不會被執行。所以改用 if typeof(userName) 就可以避免這種狀況。

∎ JavaScript 的數據類型有變數 (variable) 以及常數 (constant) 兩種。變數呼叫方式 var test，常數呼叫方式 const test。常數的值一旦被定義了，就永遠無法被改變。

∎ 變數、常數的標示符 (identifier) 命名須注意事項：

• 不能重複，是唯一性。
• 開頭只能用英文字母、下底線 _ 以及錢號 $
• 第二個字母之後可用數字、下底線 _ 以及錢號 $
• 不能使用空格以及其他特殊符號

∎ 變數、常數的標示符 (identifier) 可用「小寫駝峰」作為命名規則：

• 當有兩個以上的字母組合為標示符時，為了方便識別，可以用大小寫作為區分。
  例如用 flyNumberDate 取代 fly_number_date

∎ NaN = Not a Number，所以如果為 true，表示他不是數字；為 false，表示是數字。因為一開始就是否定狀態，所以請用負負得正的觀念。

∎ 另外一種用 NaN 來檢索值是否為數字的寫法：

if (isNaN(document.getElementById("xxxxxid").value)) alert("this is not a number");

∎ alert()函數只能儲存 string，不能儲存 number 型態，所以我們會先將數字轉成 string 再儲存之。

∎ 常數的宣告範例：

//常數名稱為全部大寫，以跟變數區分
const TAX = 9;

∎ toFixed(X) 用來四捨五入到小數點後 X 位

∎ getElementById 是方法，並非函數。

∎ parseFloat() 和 parseInt() 都可以幫忙將字串轉成數字

閱讀進度 CH3 ~ 5

• CH3：探索用戶端
• CH4：決策 (if / else...)
• CH5：迴圈

筆記內容

∎ setTimeout() 是單次計時器，setInterval() 是會一直重複的間歇計時器。

∎ 使用 clearInterval() 清除重複計時器，使用方法為 clearInterval(timerID)

∎ 可以利用 document.body.clentHeight 取得用戶端視窗的高度。

∎ cookie 會存在同個地方，並用「;」分隔。

• readCookie()：讀取 Cookie
• writeCookie()：寫入 Cookie
• eraseCookie()：清除 cookie

∎ 如須嚴謹判斷瀏覽器是否支援 cookie，可使用 navigator.cookieEnabled

∎ 大括號不需分號結尾，分號只用在單一敘述的結尾

∎ for 迴圈適合計數的任務，像是倒數至零，或是倒數至某個數。如果不知道計數幾次，可改用 while 迴圈。

∎ 如果要在 for 迴圈設定不同的變數，可以使用陣列 array[i]

∎ 一旦 for 迴圈的條件句為 false 時，迴圈會立刻跳出結束，不會執行裡面的程式碼。

∎ confirm() 函式讓使用者回答是或否，並回傳 true / false 值。

∎ break; 是跳出整個迴圈；continue; 是跳出當前迴圈，並直接進行下一輪迴圈。

∎ 巢狀的 if 判斷可以用 boolean 運算子合併

if(seats[i] && seats[i + 1] && seats[i + 2])

∎ 可以使用巢狀迴圈處理二維陣列的資料

for (var i = 0; i < seats.length; i++) { 
  for (var j = 0; j < seats[i].length; j++) { 
    //something 
  }
}

閱讀進度 CH6 ~ 7

• CH6：函式
• CH7：表單與驗證

筆記內容

∎ 可以傳入任何資料至 function(參數)，例如常數(Math, PI)，變數(temp)，或實數(72)。

∎ 函式遇到 return; 後將立即結束，因此 return 可用來結束該函式。

∎ 使用 某物!=null 來判斷某物是否存在

∎ onblur 適合作為觸發資料驗證，相較之下 onchange 不太適合，因為如果欄位沒填資料就不會觸發。

∎ 要取得表單資料，除了可以使用 getElementById() 之外，也能使用 form 的物件

∎ 正規運算式用於比對文字樣式，正規式用斜線開始和結束，例：/\d/

∎ 同上，正規式是個有點複雜的東西，如果你也有購買此書，正規式的重點從 P.320 開始

∎ 可以用 test() 方法檢查字串是否符合正規式，以下是一個簡單的郵遞區號(五碼)檢測

var regex = /^\d{5}$/; 
if(!regex.test(inputField.value)) //郵遞區號格式不正確

閱讀進度 CH8 ~ 9

• CH8：利用 DOM 分割 HTML
• CH9：物件

筆記內容

∎ 改變節點文字的三步驟：

• removeChild(): 移除所有子節點
• createTextNode(): 根據新內容，建立新的文字節點
• appendChild(): 把新建立的文字子節點，附加在節點下

∎ 承上，寫成 Javascript 為

var node = document.getElementById("story");
while (node.firstChild) node.removeChild(node.firstChild);
node.appendChild(document.createTextNode("Some text..."));

∎ CSS class 和 JS class 是兩個完全不同的東西，前者是樣式，後者則是建立 JS 物件的樣板。

∎ 物件中的特性與方法，等於物件外的變數與函式

// 物件名稱.方法名稱(); 
invitation.deliver();

∎ 建立物件實例必須要用建構式 new，例如

var invitation = new Invitation( "Somebody", "Something" );

∎ Date 物件也要用 new 運算子建立：new Date("06/16/2016")

∎ array.sort()可以做陣列的排序

∎ 要在陣列中做字串比對，可用 indexOf()，會回傳比對到的索引值，再利用 array[i].body 顯示該字串內容。

∎ 使用 Math() 物件產生亂數，常見的幾個方法如下：

• round(): 把浮點數四捨五入為整數
• floor(): 把浮點數無條件捨去為整數
• ceil(): 把浮點數無條件進位為整數
• random(): 產生介於 0 ~ 1 之間的亂數，但不包含 1 (可看作 0 ~ 0.9*N 循環的無窮小數)。

∎ 使用 random() 做一個亂數擲骰的程式

var oneToSix = Math.floor(Math.random() * 6) + 1;

2

發生錯誤。