---
tags: 投稿文章
---


# JavaScript 的 function 功能 (函式介紹)

## ★首先這篇文章適合以下背景的人閱讀

1. 熟悉 HTML、CSS
2. 正要開始一腳踏進 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 吧](https://codepen.io/AlecWang/pen/WNNJRMK)。

這個是 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功能，謝謝大家~