超級初心者適用的 JavaScript 觀念 (暫停更新)
最近除了跳級研究 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)
就可以避免這種狀況,以下是另一種範例參考://or you can change userName as null, undefined var userName = ''; if (typeof(userName) !== 'undefined') { // if(userName){ alert("OK"); } }
- 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 循環的無窮小數)
var oneToSix = Math.floor(Math.random() * 6) + 1;