JavaScript

2015.12.01

超級初心者適用的 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) 就可以避免這種狀況。

∎ 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;

歡迎給我點鼓勵,讓我知道你來過 :)

1
guest

8 則留言
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
Jim Yeh
Jim Yeh
6 years ago

妳好 在你的推薦下我也去買了深入淺出JavaScript,但是書裡提供的範例下載網站好像是新版的書籍,請問如何解決呢?

muki
6 years ago
Reply to  Jim Yeh

你好,這個問題可能要問出版社吧。
我是沒有下載他的範例啦,都是直接看書上的 code 就是了 @___@

牟仁杰
牟仁杰
6 years ago

超喜歡深入淺出系列!初心者的福音(還是因為我太笨了…)

muki
6 years ago
Reply to  牟仁杰

我也喜歡,我想一定是我們都太笨了 XDDDDD

吳千卉
吳千卉
6 years ago

Muki 你好,閱讀進度 CH3 ~ 5 發現錯字:「4. cookei 會存在同個地方,並用「;」分隔。」 >>> cookie

muki
6 years ago
Reply to  吳千卉

喔喔,很感謝你,不好意思回覆晚了,已經修正 >_<

Yu jo Chia
Yu jo Chia
5 years ago

Math.random()
值範圍:0 ~ 0.9999999(無窮小數)

不是0~1, 如果有1那隨機產生1~6的那行就不對了

muki
5 years ago
Reply to  Yu jo Chia

感謝!! 這邊應該是筆誤,0~1 之間的 1 是不包含的沒錯,但中文寫得不太好 >__<
我來改一下 ^Q^

Copyright (C) MUKI space* / Reborn Theme All Rights Reserved.