超級初心者適用的 JavaScript 觀念 (暫停更新)

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

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

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

閱讀進度 CH1 ~ 2

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

  1. alert()也是函數的一種，他是 JavaScript 的內置函數。每個 JavaScript 函數都會用()包住要傳給函數的訊息。
  2. 事件 = 告訴 JavaScript 當使用者在網頁上「做了某件事情」，才會觸發裡面的程式碼。例如onclick(點擊了某個按鈕)就是一種事件。
  3. 函數 = 可以重複執行的程式碼。
  4. 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)就可以避免這種狀況，以下是另一種範例參考： //or you can change userName as null, undefined var userName = ''; if (typeof(userName) !== 'undefined') { // if(userName){ alert("OK"); } }
  5. JavaScript 的數據類型有變數(variable)以及常數(constant)兩種。變數呼叫方式 var test，常數呼叫方式 const test。常數的值一旦被定義了，就永遠無法被改變。
  6. 變數、常數的標示符 (identifier) 命名須注意事項：
    • 不能重複，是唯一性。
    • 開頭只能用英文字母、下底線_以及錢號$。
    • 第二個字母之後可用數字、下底線_以及錢號$
    • 不能使用空格以及其他特殊符號
  7. 變數、常數的標示符 (identifier) 可用「小寫駝峰」作為命名規則：
    – 當有兩個以上的字母組合為標示符時，為了方便識別，可以用大小寫作為區分。例如用flyNumberDate取代fly_number_date
  8. NaN = Not a Number，所以如果為 true，表示他不是數字；為 false，表示是數字。因為一開始就是否定狀態，所以請用負負得正的觀念。
  9. 另外一種用NaN來檢索值是否為數字的寫法： if (isNaN(document.getElementById("xxxxxid").value)) alert("this is not a number");
  10. alert()函數只能儲存string，不能儲存number型態的數字，所以我們會先將數字轉成string再儲存之。
  11. 常數的宣告範例： //常數名稱為全部大寫，以跟變數區分 const TAX = 9;
  12. toFixed(X)用來四捨五入到小數點後 X 位
  13. getElementById是方法，並非函數。
  14. parseFloat()和parseInt()都可以幫忙將字串轉成數字

閱讀進度 CH3 ~ 5

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

  1. setTimeout()是單次計時器，setInterval()是會一直重複的間歇計時器。
  2. 使用clearInterval()清除重複計時器，使用方法為clearInterval(timerID)
  3. 可以利用document.body.clentHeight取得用戶端視窗的高度。
  4. cookie 會存在同個地方，並用「;」分隔。
    • readCookie()：讀取 Cookie
    • writeCookie()：寫入 Cookie
    • eraseCookie()：清除 cookie
  5. 如須嚴謹判斷瀏覽器是否支援 cookie，可使用navigator.cookieEnabled
  6. 大括號不需分號結尾，分號只用在單一敘述的結尾
  7. for 迴圈適合計數的任務，像是倒數至零，或是倒數至某個數
  8. 如果不知道計數幾次，可改用 while 迴圈。
  9. 如果要在 for 迴圈設定不同的變數，可以使用陣列 array[i]
  10. 一旦 for 迴圈的條件句為false時，迴圈會立刻跳出結束，不會執行裡面的程式碼。
  11. confirm()函式讓使用者回答是或否，並回傳 true / false 值。
  12. break;是跳出整個迴圈；continue;是跳出當前迴圈，並直接進行下一輪迴圈。
  13. 巢狀的 if 判斷可以用 boolean 運算子合併：if(seats[i] && seats[i + 1] && seats[i + 2])
  14. 可以使用巢狀迴圈處理二維陣列的資料: for (var i = 0; i < seats.length; i++) { for (var j = 0; j < seats[i].length; j++) { //something } }

閱讀進度 CH6 ~ 7

CH6：函式
CH7：表單與驗證

  1. 可以傳入任何資料至function(參數)，例如常數(Math, PI)，變數(temp)，或實數(72)。
  2. 函式遇到return;後將立即結束，因此return可用來結束該函式。
  3. 使用某物!=null來判斷某物是否存在
  4. onblur適合作為觸發資料驗證，onchange相較之下，因為如果欄位沒填資料就不會觸發，所以比較不適合。
  5. 要取得表單資料，除了可以使用getElementById()之外，也能使用 form 的物件，例如：
  6. 正規運算式用於比對文字樣式
  7. 正規式用斜線開始和結束，例：/\d/
  8. 同上，正規式是個有點複雜的東西，如果你也有購買此書，正規式的重點從 P.320 開始
  9. 可以用test()方法檢查字串是否符合正規式，以下是一個簡單的郵遞區號(五碼)檢測： var regex = /^\d{5}$/; if(!regex.test(inputField.value)) //郵遞區號格式不正確

閱讀進度 CH8 ~ 9

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

  1. 改變節點文字的三步驟：
    1. removeChild(): 移除所有子節點
    2. createTextNode(): 根據新內容，建立新的文字節點
    3. appendChild(): 把新建立的文字子節點，附加在節點下
  2. 承上，寫成 Javascript 為： var node = document.getElementById("story"); while (node.firstChild) node.removeChild(node.firstChild); node.appendChild(document.createTextNode("Some text..."));
  3. CSS class 和 JS class 是兩個完全不同的東西，前者是樣式，後者則是建立 JS 物件的樣板。
  4. 物件中的特性與方法，等於物件外的變數與函式
  5. // 物件名稱.方法名稱(); invitation.deliver();
  6. 建立物件必須要用建構式new，例如： var invitation = new Invitation( "Somebody", "Something" );
  7. Date物件也要用new運算子建立：new Date("06/16/2016")
  8. array.sort()可以做陣列的排序
  9. 要在陣列中做字串比對，可用indexOf()，會回傳比對到的索引值，再利用array[i].body顯示該字串內容。
  10. 使用Math()物件產生亂數，常見的幾個方法如下：
    • round(): 把浮點數四捨五入為整數
    • floor(): 把浮點數無條件捨去為整數
    • ceil(): 把浮點數無條件進位為整數
    • random(): 產生介於 0 ~ 1 之間的亂數，但不包含 1 (可看作 0 ~ 0.9*N 循環的無窮小數)
    做一個亂數擲骰的程式： var oneToSix = Math.floor(Math.random() * 6) + 1;