# 函式(Function)
###### tags: `NKFW 網頁設計入門`

---

## 介紹

假設我們需要寫一段程式碼輸出三次"Hello"，按照前面學過的內容，應該會寫出類似底下的程式：

alert("Hello");
alert("Hello");
alert("Hello");

---

但在借助函式的幫助下，我們可以將其改為底下的這個程式：

function hello() {
    alert("Hello");
}

hello();
hello();
hello();

上方的程式可以達到同樣的目標。

---

* alert()其實就是一個Javascript內建的函式！


---

## 優點

* 減少寫作功能相同或相似的程式。
* 增加主要程式的易讀性。
* 易於除錯及修改程式。

---

## 定義(Define)及呼叫(Call)

使用一個函式前必須先將其定義，定義函式的基本語法如下：

function 函式名稱() {
    //執行動作/程式
}

在程式中輸入"函式名稱();"即可呼叫函式，並執行函式中所撰寫的程式。

函式名稱();

---

## 參數(Parameter)

* 呼叫函式時，同時提供資料給函式以執行所需功能。

function hello(name) {
    alert("Hello, " + name + ".");
}

在撰寫上方函式後，即可透過給予函式資料來達到想要的效果，例如：

hello("John");
hello("Mark");

---

執行程式後得到底下兩張圖的結果：


---

函式的參數可超過一個，例如下方程式：

function hello2(name1, name2) {
    alert("Hello, " + name1 + " and " + name2 + ".");
}

hello2("John", "Mark");

可得下圖結果：


---

## Project1：單位轉換

:::info
單位轉換在物理計算中相當重要，透過適當的單位轉換才能夠符合公式的單位要求。

請設計一個函式centiToMeter，可以接收1個數字，其單位視為公分，在將單位轉為公尺後輸出其數字部分。

主要程式的部分則是以跳出視窗(prompt)讓使用者輸入數字，並將數字遞給函式輸出結果。
:::

---

:::spoiler 參考答案

function centiToMeter(centimeter) {
    alert("長度為" + centimeter/100 + "m");
}

length = prompt("請輸入長度(cm):")
centiToMeter(length);

:::

---

## 回傳(Return)

函式的功能並不只有執行動作(如alert)，我們也可以透過將函式的運算結果回傳主要程式並儲存下來，更方便的做單次或多次的運用。

例如，我們可以將Project1的程式重寫為底下的形式，並保留原本執行效果：

function centiToMeter(centimeter) {
    return centimeter/100;
}

meter = centiToMeter(150);
alert(meter);

---

## Project2：圓形面積

:::info
一般在計算圓形面積時，我們需要用到pi值及圓的半徑，並可透過「PI * 半徑^2」的公式計算。

請用函式的寫法設計一段程式，可透過給予函式圓形半徑，計算出圓形面積並回傳結果至主程式。
(PI使用3.14替代即可)
:::

---

:::spoiler 參考答案

function circleArea(radius) {
    PI = 3.14;
    return PI * radius**2;
}

:::

---

## Project3：計算BMI

:::info
透過prompt()讓使用者輸入兩個數字，分別是身高和體重，並將他們傳入函式中，並在計算後回傳相應的BMI值，輸出給使用者觀看。
:::

---

:::spoiler 參考答案

function calculateBMI (h, w) {
    return w / (h / 100) ** 2;
}

let height = prompt("Please enter your height(cm): ");
let weight = prompt("Please enter your weight(kg): ");

alert(calculateBMI(height, weight));

:::

---

## setTimeOut函式

* setTimeOut是一個Javascript內建的function，可以使程式在等待特定毫秒數後，執行指令。

* setTimeOut一共接受兩個輸入，依次分別是1個函式及1個數字。

範例如下：

setTimeout(function() {
    alert("hello");
},3000);

---


此程式執行3秒後才會得到圖中結果。

---

* 範例中「function() {......}」的使用法稱為anonymous function(匿名函式)，通常用於只執行一次的function，因此不必給予函式名稱。

<!-- * 範例中，我們透過使用setTimeOut()來呼叫輸入的function()，這種透過函式呼叫函式的方式在Javascipt中稱作callback function。 -->

* 範例中，我們將匿名函式做為setTimeOut()函式的輸入，此時我們將此匿名函式稱作callback function。
> [[參考說明](https://www.w3schools.com/js/js_callback.asp)]

---

:::info
進階寫法：
運用Arrow function(箭頭函式)的方式撰寫輸入setTimeOut()的函式(Arrow function也屬於anonymous function)。

setTimeout(
    () => {alert(10)}, 3000
);

:::

---

# setInterval,clearInterval函式
### 基本語法:

setInterval(function,delay);

* function:要重複執行的功能
* delay:每次執行的間隔時間

clearInterval(Interval variable)

* 停止迴圈

---

### 範例說明:

let repeat = setInterval(function(){
alert("hello");
},2000);

setTimeout(() => {
alert("stop");
clearInterval(repeat);
}, 6000);