---
# System prepended metadata

title: 第四堂：函式設計之術
tags: [2021直播班任務]

---

###### tags: `2021直播班任務`

# 第四堂：函式設計之術


* [BMI Kata 武道大會](https://forms.gle/Bij2WQZWTnDnW8TB6)

## function 寫法教學 - 設定指令

- 以一天會做的行為當作例子
- 參數寫法介紹
    - 加法器
- return 寫法介紹
    - let 宣告
    - return 多個範例

## if 與 function 的差別
- 直接寫 if 的話，.js 裡只會執行一次
- 寫 function 的話，可以依照自己需求，執行多次執行指令

## input output 練習
* [示意流程圖](https://whimsical.com/RTJhrsaGwpZ8NbXvQjutB7)

### 題目列表
**字串相加**
``` javascript
//input
talk("早上好");
talk("晚上好");

// output
console.log("hi，早上好");
console.log("hi，晚上好");
```
**數字處理**
``` javascript
let data = 0;
//input
count(2);
count(3);
count(5);

// output
console.log(2);
console.log(5);
console.log(10);
```

**數字 return**


``` javascript
//input
let a = count(2); // 4
let b = count(3); // 9
let c = count(5); //25
```

**兩位數四舍五入**
``` javascript
let a = twoFixed(1.8888) // 1.89
let b = twoFixed(3.1234) // 3.13
```

**BMI** 

``` javascript
let bmi = calcBmi(178,69) // output:21.78
```

**檢查是否需要帶雨具+if**

``` JavaScript
let a = checkWeater("雨天"); // 要帶雨具
let b = checkWeater("晴天"); //不用帶雨具
```

**增加陣列資料**

``` JavaScript
let data = [];
add("hello"); 
add("你好嗎？"); 

// data output ["hello","你好嗎？"]

```

**增加陣列物件資料**

``` JavaScript
let data = [];
add("洧杰","男生"); 
add("葉子","女生"); 

// data output [{name:"洧杰",sex:"男生"},{name:"葉子",sex:"女生"}]

```
**取物件資料** 
``` JavaScript
const bmiStatesData = {
  "overThin": {
    "state": "過輕",
    "color": "藍色"
  },
  "normal": {
    "state": "正常",
    "color": "紅色"
  }
}
checkBmiStates("overThin"); //你的體重過輕，指數為藍色
checkBmiStates("normal"); //你的體重正常，指數為紅色
```

## 抽獎

``` JavaScript
function getRandom(x){
    return Math.floor(Math.random()*x);
};
//https://ithelp.ithome.com.tw/articles/10197904
```





## 第四關主線任務 BMI Kata

* <a href="https://rpg.hexschool.com/training/17/task?type=detail&id=171" target="_top">第四關主線任務</a>

達求職門檻工程師水準等級為 10 分鐘，每日練一遍當起手式，3/8 開始到 3/19 每天早上 9:05 發 Slack 訊息，張貼自己的練功情況

 150 點積分
作業資源：
👉 此任務僅授權提供『JS直播春季班』學員 👈

繳交內容需含以下三點
請依照以下練功題目練十遍，填寫此 Google 表單
您的 Slack 暱稱
作業網址：請依照透過 Codepen 或 GitHub Pages 提交作業，以方便助教與講師檢視


練功題目：BMI Kata
請依照影片內容與 excel BMI 規則、流程圖，依照以下三階段來練習此題目。



第一階段：請寫 printBmi 函式，並印出對應狀態
printBmi(178, 20) >> 印出 console.log 文字為「您的體重過輕」
printBmi(178, 70) >> 印出 console.log 文字為「您的體重正常」
printBmi(178, 85)>> 印出 console.log 文字為「您的體重過重」
printBmi(178, 90)>> 印出 console.log 文字為「您的體重輕度肥胖」
printBmi(178, 110)>> 印出 console.log 文字為「您的體重中度肥胖」
printBmi(178, 130)>> 印出 console.log 文字為「您的體重重度肥胖」
printBmi("身高","體重")>> 印出 console.log 文字為「您的數值輸入錯誤，請重新輸入」


第二階段：請程式碼裡加入此變數，並嘗試運用此變數裡的資訊。
printBmi(178, 20) >> 印出 console.log 文字為「您的體重過輕，健康指數為藍色」
printBmi(178, 70) >> 印出 console.log 文字為「您的體重正常，健康指數為紅色」
printBmi(178, 85)>> 印出 console.log 文字為「您的體重過重，健康指數為澄色」
printBmi(178, 90)>> 印出 console.log 文字為「您的體重輕度肥胖，健康指數為黃色」
printBmi(178, 110)>> 印出 console.log 文字為「您的體重中度肥胖，健康指數為黑色」
printBmi(178, 130)>> 印出 console.log 文字為「您的體重重度肥胖，健康指數為綠色」
printBmi("身高","體重")>> 印出 console.log 文字為「您的數值輸入錯誤，請重新輸入」
第三階段：儲存每筆計算資料，多一個變數為 bmiHistoryData，並賦予空陣列來儲存計算物件資料，若數值輸入錯誤，則不儲存。
printBmi(178, 20) >> 印出 console.log 文字為「您的體重過輕，健康指數為藍色」
printBmi(178, 70) >> 印出 console.log 文字為「您的體重正常，健康指數為紅色」
printBmi(178, 85)>> 印出 console.log 文字為「您的體重過重，健康指數為澄色」
showHistoryData() >> 印出 console.log 文字為「您總共計算 3 次 BMI 紀錄，最後一次 BMI 指數為 26.83，體重過重！健康指數為澄色！」


常見QA


Q：一定要做到第三階段，才能提交作業嗎？

A：對的



Q：我對題目不太懂，有解答嗎？

A：有的，請依照此影片的三階段影片，跟著做十遍



Q：我可以優化程式碼嗎？

A：可以，但各階段的指示要做到，例如

第一階段要寫 printBMI 函式
第二階段要運用到該bmiStatesData 變數
第三階段要新增 bmiHistoryData 變數儲存計算資訊


Q：要多快才有達工程師門檻？

A：洧杰：「覺得要壓在 10min 內」