JavaScript 的 function 功能 (函式介紹)
★首先這篇文章適合以下背景的人閱讀
- 熟悉 HTML、CSS
- 正要開始一腳踏進 JavaScript 的初學者
號稱全世界最懶的一群人(軟體工程師)，能坐就不要站，能躺就不要坐，阿不是啦，我是說，不斷重複的事情，軟體工程師我們通常不會想要一直重複做，所以一模一樣的功能，軟體工程師們，寫過一次了，就不會想要在寫一次了，這時候我們就可以用 function 功能了。
function
- 寫法：
function welcome(){
var hello = 'Welcome here, may I help you ?';
console.log(hello);
}
welcome();- 說明：首先先用
function起頭，空格以後接一個命名後加()
，上面的範例就是welcome()，再來接一組{}，{}裡面是要放這個function要執行的程式碼上面這個範例裡，在{}裡面放的就是var hello = 'Welcome here, may I here you ?';以及console.log(hello)這兩行程式碼，以上就是完成了一個function宣告。最後一行還有一個welcome();，才是執行這個welcome()的function的意思。
function 帶參數用法
- 寫法：
function BMI(a,b){
var result = b/((a/100)**2);
console.log(result);
}
BMI(178,70);- 說明：還記得我們宣告了一個
function後接他的命名之後會接一個()，而這個()內是要給我們放參數的，在上面的這個範例就是a與b。這是一個計算BMI值的function，我們用var result = b/((a/100)**2);來代表計算BMI值的公式，後面用一個console.log(result)來把計算的值呈現出來。最後我們用BMI(178,70);來執行這個function，所以大家有猜出來a和b是什麼了嗎？當然就是身高與體重囉。
全域變數與區域變數
全域變數和區域變數要怎麼解釋呢？很簡單，我們用下面的範例就可以解釋清楚囉
- 範例
var total = 100; //全域變數
function count(a,b){
var total = a*10 + b*20; //區域變數
console.log(total);
}
count(10,10);
console.log(total);- 說明：上方的程式碼我們有看到兩個
var = total，可是一個在function外面，一個在function裡面，在外面的就是全域變數，在裡面的就是區域變數，而全域變數是在整份程式碼內都有效，而且會被記憶進電腦的記憶體內佔用空間，但是區域變數不一樣，區域變數只有在function內有用，當執行完以後，變數隨即被清除，記憶體被釋放，不會佔用空間。所以可以說，這兩個var total根本就是不一樣的東西，若是執行count(10,10)這個function和執行console.log(total)就會發現顯示出來的var total的值完全不一樣喔。
Hoisting
Hoisting 的中文叫做提升，真正的 Hoisting，是可以講很長很長篇文章的，但無奈菜鳥我現在知識累積有限，所以這裡僅先針對剛學習到的觀念做初步筆記，未來知識量爆棚時，在專文分享。
程式碼的世界，是有先後順序的，由上往下開始運作，當然我們現在介紹的 JavaScript 也不會例外。
- 範例一：
var number = 500;
console.log(number);說明：
上方的一段短短的程式碼，其實我們可以用膝蓋想就知道，console 一定會顯示 500，因為我們在前方就已經先var了一個變數叫number，而且給他一個值是500，當程式從上方一路執行下來的時候，因為前方電腦已將number變數記錄了起來，所以我們後方叫console.log時，就可以順利的把number給叫出來了。範例二：
console.log(number);
var number = 500;- 說明：
假設今天我們把兩個程式碼的順序對調呢？會發生甚麼事情，console則會顯示 undefined，為什麼不是顯示 500 呢？就是因為順序問題，一開始我們就執行console.log(number)但是在這一個 moment，電腦還不認識變數number，所以他顯示了 undefined，在後面我們才var number = 500;個時候電腦才認識了變數number，但就也僅是認識了，我們後面沒有再執行一個console.log(number)所以也就沒有顯示 500了。
我們把狀況再弄複雜一點吧
若是在 function 的狀態下會怎麼樣呢？
範例三：
console.log(number);
function count(){
var number = 500;
}
count();- 說明：若是按照我們前面的經驗，第一行就先執行了一個
console.log，然後前面什麼都沒有，想必應該也是 undefined 吧，但是，人生最重要的就是這個 but，console 卻顯示了 500 怎麼會這個樣子呢？這是因為只要是 function 載入後會，不管程式碼被寫在什麼地方，它都會被提到最上層然後記憶起來，這是 JavaScript 的特性，所以才會顯示500喔。
搭配 return 的寫法
- 範例一：
function getHamPrice(num){
var hamPrice = 50;
var total = hamPrice * num;
console.log(total);
}
getHamPrice(10);說明：
上方這個範例，我們沒有用上return，通常我們寫一個計算買漢堡價錢的function，我們會這樣寫，這樣寫也沒有不對但那就像是去小吃店吃飯，結帳的時候老闆娘拿出卡西歐計算機，點點點暗暗暗，給我一個總價，然後卡西歐計算機就歸零了，計算機不會知道這是剛剛哪一桌點了什麼東西多少錢，若要讓這件事情優化，我們可以加return，讓我們繼續看下一個範例。範例二：
function getHamPrice(num){
var hamPrice = 50;
var total = hamPrice * num;
return total;
}
var tom = getHamPrice(10);
console.log(tom);說明：
這個範例和上一個很像，但是原本是console.log(total);程式碼位置的地方，被改成了return total;。原本的getHamPrice(10);，在前方被接上了一個var tom =而形成了這一整段的程式碼var tom = getHamPrice(10),我們var了一個變數為tom，然後讓它賦值為getHamPrice(10)這個function的結果，而這個function是帶有參數的，我們給他一個(10)的參數讓他回去運算，最後最後，我們再console.log(tom);來顯示一下tom的值，此時應該會顯示500。這樣子的寫法就好像是卡西歐計算機瞬間升級成了 POS 機系統，我們都可以去var一個變數來讓它等於我們需要的function，這樣就可讓function可用性增加喔。範例三：
function BMI (a,b){
var result = b/((a/100)**2);
return result;
}
var Alec = BMI(178,70);
var Rita = BMI(161,52);
console.log(Alec);
console.log(Rita);- 說明：
還記得我們前面的一個 BMI 值範例嗎？若是改用reture寫法呢？這樣我們就可以分別的var不同的變數，然後都賦值給同一個function，然後讓function帶著不同的參數即可，剩下的就自己研究看看吧。
來把所有的東西都整合在一起吧，簡單的計算機練習
下方是一個簡單的 HTML 網頁，我要讓它執行簡單的計算，當我們輸入相關的數字之後，只要一按計算按鈕，就會跳出正確答案囉，來看一下 codepen 吧。
這個是 HTML 的部分，可以看到我們共有三個 input 欄位，一個是 pizza 的一個 beer 的，要來給我填入數字用的，另一個是按鈕欄位，用來計算用的。
<p>AI 機器人店員：<span id='hello'></span></p>
<p>客人：我需要<input type="text" id="pizzaNum" class="tag">個 Pizza 還有<input type="text" id="beerNum" class="tag">杯啤酒。<input type="button" id="click" value="點餐完成">
</p>
<p>AI 機器人店員：<span id="ok"></span><span id="total"></span></p>再來下方就是 JavaScript 的部分了，其中還沒有提到的是 onclick 以及 parseInt，我們一個一個來說明。
首先，我們先設定了一個 welcome() 的 function，讓我們在 HTML 碼的 id="hello" 可以至換內容，這樣我們 AI 機器人店員就可以隨著行銷活動的不同而置換不同的歡迎詞囉。
再來就是來到了點餐部分了，首先先利用 document.getElementById('click') 指定了這個 id 的標籤，然後後接 .onclick，這個語法的意思就是這個 id 的標籤被 click 了以後要做甚麼事情，後面接了一個 = 然後再接一個命名為 order 的 function，然後 {} 內就是這個 function 要執行的事情了。
一開始先 var 了三個變數，一個值是字串，兩個值是數字，再 var兩個變數，這兩個變數比較特別，它的值是來自於 HTML 內的 input 標籤的 value，所以我們用 document.getElementById('id名') 的方式來指定那一個標籤，但若要取這個標籤的 value 的值的話，就要在後面加上 .value，這樣我們在網頁上 key-in 數字時就可以透過這樣的方式取出它的值來了。
但是取出來的值雖然看起來長得像是一個數字，但是實際上它的型態是一個字串 (String)，而字串無法用運算子(只能用加的)，數字才可以，但是字串的相加是文字的串接，而數字的相加..........就是數字的相加阿！(不然你期望我告訴你什麼不一樣的事情)，而 parseInt 就是可以將字串轉變成數字的語法，所以放在整個 document.getElementById('id名') 前，就可以轉換取出來的值成為數字，來和後面的變數做加減乘除。
最後我們再利用 document.getElementById('id名') 指定對應的 id 的標籤，然後用 .textContent 的方式來將計算出來的值以及想要置換的文字放回 HTML 的標籤內。
//打招呼
function welcome(){
var hello = '歡迎光臨！請問想要點什麼呢？';
document.getElementById('hello').textContent = hello;
}
welcome();
//點餐
document.getElementById('click').onclick = function order(){
var count = '好的！沒有問題，我幫您算一下，這樣總共是';
var pizzaPrice = 300;
var beerPrice = 45;
var pizzaNum = parseInt(document.getElementById('pizzaNum').value);
var beerNum = parseInt(document.getElementById('beerNum').value);
document.getElementById('ok').textContent = count;
document.getElementById('total').textContent = (pizzaPrice * pizzaNum) + (beerPrice * beerNum)+'元'
}- 所以輸入資料前與輸入資料後的畫面長下面這個樣子
以上，就是為大家介紹的 JavaScript Function功能，謝謝大家~
標籤雲
文章列表