超級初心者適用的 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;