---
# System prepended metadata

title: 函式(Function)
tags: [NKFW 網頁設計入門]

---

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

## 介紹

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

```javascript!
alert("Hello");
alert("Hello");
alert("Hello");
```

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

```javascript!
function hello() {
    alert("Hello");
}

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

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

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

![](https://hackmd.io/_uploads/Byp8aaerh.png)

## 優點

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

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

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

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

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

```javascript!
函式名稱();
```

## 參數(Parameter)

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

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

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

```htmlembedded
hello("John");
hello("Mark");
```

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

![](https://i.imgur.com/pSdrmdx.png)
![](https://i.imgur.com/Va6gmHa.png)



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

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

hello2("John", "Mark");
```

可得下圖結果：

![](https://i.imgur.com/tBuZTa8.png)

## Project1：單位轉換

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

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

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

:::spoiler 參考答案
```htmlembedded!
function centiToMeter(centimeter) {
    alert("長度為" + centimeter/100 + "m");
}

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

## 回傳(Return)

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

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

```htmlembedded!
function centiToMeter(centimeter) {
    return centimeter/100;
}

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

## Project2：圓形面積

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

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

:::spoiler 參考答案
```htmlembedded!
function circleArea(radius) {
    PI = 3.14;
    return PI * radius**2;
}
```
:::

## Project3：計算BMI

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

:::spoiler an5w3r
:::spoiler 參考答案
```javascript!
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個數字。

範例如下：

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

![](https://i.imgur.com/bkArGmD.png)

此程式執行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函式
### 基本語法:
```javascript=
setInterval(function,delay);
```
* function:要重複執行的功能
* delay:每次執行的間隔時間

```javascript=
clearInterval(Interval variable)
```
* 停止迴圈

### 範例說明:
```htmlembedded!
<body>
    <p id="text">過五秒跳轉</p>
    <script>
        
        setInterval(redirect,1000*5)
        
        function redirect(){
            location.href='https://www.youtube.com/'
        }
 
    </script>
</body>

```
