simonallen 技術部落格

Sign in Subscribe

ithome 鐵人賽：JavaScript 基礎二三事

Day16 函式陳述句與函式表示式

今天來看Function Statement(函式陳述句)與Function Expression(函式表達式、表示式) 等等...Statement與Expression又是什麼東西呢? Statement 程式碼的單位，這段程式碼不會產生一個值 Expression 程式碼的單位，這段程式碼最終會產生(回傳)一個值，而這個值不一定會被開發者賦予變數。看看以下程式碼我們先宣告一個變數a，然後直接在瀏覽器console做後續動作 * 輸入a = 3，瀏覽器console回傳3，這代表這段程式碼是Expression * 輸入10 + 5，瀏覽器console回傳15，它也是Expression * 輸入a === 3，回傳true(成立)，它也是Expression * 若我們直接用物件實體語法創造物件，將物件指向變數a，瀏覽器console也回傳一個物件，它也是一個Expression 接著看看以下程式碼 if(a === 3){ console.log(a); } if()的()，需要布林值true

Day15 函式就是物件

今天來看看函式Functions 在JS這個物件導向語言裡，其函式的特性被稱為一級函式。一級函式First Class Functions 開發者對別的基礎型別做的事，也可以對函式去做，因為函式就是物件，而物件就是名稱/值的組合。開發者可以指派函式給變數，將函式傳入另一個函式，也可以用實體語法建立函數。函式可以有屬性和方法，因為他就是物件，所以它可以連結到物件、屬性、其他函式(Methood) 關於一級函式的介紹，可以參考：維基百科頭等函式 ITome專欄物件導向語言中的一級函式　by林信良而JS的函式還有隱藏的物件屬性，其中最重要的有兩個： NAME 即名子屬性，然而名子不是必須的，函式也可以沒有名子(匿名函式) CODE 即程式屬性code property，這個屬性的內容，就是開發者在編輯器上開發時，寫在函式內的程式碼。我們寫的程式碼會成為這個屬性的值，而CODE屬性的特性是，它的內容是可以呼叫執行的。來看看以下程式碼 function sport(){ console.log('運動'

Day14 JSON 與物件實體

今天來看看JSON 前端工程師在串接資料，常常是接後端發出的JSON檔案(API)，再將其內容渲染到網頁上，那什麼是JSON呢？ JSON，全名JavaScript Object Notation 是受到JavaScript物件實體語法啟發的傳輸格式，比起使用XML傳輸資料，JSON格式在檔案大小上更為輕量，也是現在主流的傳輸格式。一個JavaScript物件可以長這樣 {name: 'Simon',isF2E: true} 而JSON會是這樣 {'name':'Simon','isF2E':'true'} 看起來好像差不多？物件的屬性名name，在JSON中被引號包起來變成'name'，也就是說原本的屬性名到了JSON變成字串，JavaScript利用物件實體語法時，物件屬性名稱也可以是字串(對物件實體語法，屬性的引號'或"可加可不加) var

Day13 物件與物件實體

今天我們來看物件實體語法object literals JS可以透過new Object()來建立物件，但開發時相對少見這種寫法。這是因為JS還有另一種更快建立物件的方法，就是物件實體語法object literals。什麼是物件實體語法呢? 來看看以下程式碼： var Batman = {}; 用一對大括號{}快速建立物件，大家最常用的就是這種寫法(我也是)。這種寫法的好處在於可以同時建立屬性和方法： var Batman = { firstname: 'Bruce', lastname: 'Wayne' }; 使用物件實體語法和這種寫法 var Batman = new Object(); Batman['firstname'] = 'Bruce'; Batman['lastname'] = 'Wayne'; 兩者其實是一樣的物件實體語法的好處在於可以快速、直觀的建立物件、

Day12 物件與點

今天開始進入第四章節，物件與函式的部分囉。第二天的筆記有提到，物件是一群名稱/值的組合例如： { rice: '米飯', soup: '海鮮濃湯' } 而其值可以是另一個名稱/值的組合，也可以是數值、字串、布林、物件、函式....等等。例如： { rice: '米飯', soup: { seafood: '蝦子', hot: true, cook: function(){ console.log('海鮮濃湯'); } } } 關於物件還有幾件事： * 物件可以有個原始的設定，又稱屬性Properties。 * 物件可以連結至另一個物件(物件裡包含著物件)，這個被連結的物件也是屬性。 * 物件裡可以有函式，當函式在物件裡，稱為方法Methods，

Day11 設定函式內的預設值

今天筆記是昨天內容的衍生開發者用JS程式呼叫函式時，傳參數進去處理是很常見的方式，如果呼叫時沒有帶入參數，會發生什麼事呢? 來看看以下程式碼： function greet(name){ console.log('Hello ' + name); } greet() 結果是：發生了什麼事？我們沒有帶值進去，JS在呼叫函式時也沒報錯，因為傳入的值在呼叫階段被設定進記憶體，但我們什麼都沒有傳，所以JS把這個空的東西，在記憶體被設定成undefined並傳入。當undefined與字串相加時被轉型成字串'undefined'，自然印出'Hello undefined'囉！但是這並不符合開發者預期的狀況，有沒有辦法讓我們呼叫函式，在未帶入值的時後，函式內有個預設值存在嗎？這個時候可以使用昨天筆記的方法。 function greet(name){ name = name || '<Your name here>

Day10 存在與布林

今天來看存在existence與布林boolean的關係由於JS常發生型別轉換這件事，開發者可以用Boolean()這個內件函式，來判斷型別轉為boolean的結果。 undefined、null、""這些代表沒有的值，都會被被型轉成false。開發者可以利用此特性，用if()敘述來判斷是否成功取值。例如： var a; if(a){ console.log('這裡有東西'); } 結果什麼也沒發生，也沒有語法錯誤，發生了什麼事？我們都知道宣告變數，變數預設值是undefined。而if()敘述句()內看的是布林值true或false，來決定敘述句{}裏頭的程式碼要不要執行。故a在if()敘述句被型轉為false，所以這個條件判斷內的程式碼不執行。如果是有值的狀況，例如： var a = 'IT鐵人賽'; if(a){ console.log('這裡有東西&