# 第四堂：函式設計之術
## 開課提醒
1. 錄影
2. 開放去年 5-9 週的直播錄影
3. 下週一提供每日助教~~爆肝~~發問服務！10/30-12/8 每週一到週五
3. 重要時間提醒
10/28（六）：單人專題截止，申請設計服務截止（申請條件為通過里程碑三並付款完成）
12/1（五）：課程結束
12/10（日）：助教批改截止，截止繳交主線任務作業
12/17（日）：專題成果發表會
## 今日上課知識點
1. 函式
2. 邏輯題目練習
---
## 函式 function
- 函式宣告
```javascript
function 函式名稱(){
console.log('執行函式');
}
```
- 函式呼叫
```javascript
函式名稱()
```
- 參數寫法
```javascript
function callNum(num){
console.log(`呼叫${num}號`) // 呼叫5號
}
callNum(5);
```
帶多個參數，參數是有順序的！
```javascript
function addNum(num1, num2){
console.log(num1, num2); // 1, 2
}
addNum(1,2)
```
## function return
```javascript
function addNum(num1, num2){
return num1+num2;
}
const num = addNum(1,2);
console.log(num); // 3
```
return 與 console.log 寫法差異
```javascript
function addNum(num1, num2){
console.log(num1+num2);
}
const num = addNum(1,2);
console.log(num); // undefined
```
> console.log 只是將結果「印」出來，並沒有把結果帶出函式外
console.log 是 debug 時使用，正式專案也不會使用
return 可以中斷函式
## if 與 function
```javascript
function addNum(num1, num2){
if (2>1) {
return num1+num2;
} else {
return 100;
}
}
addNum(1,2); // 3
```
> 直接寫 if 的話，js 裡只會執行一次
寫 function 的話，可以依照自己需求，執行多次執行指令
## 小組抽考一
* [46~50題目](https://chalk-freedom-ec6.notion.site/Part-1-46-50-3b71ce9efb0d4f7c9803961e27a39264)
<!-- 32122 -->
## input output 練習
* [示意流程圖](https://whimsical.com/RTJhrsaGwpZ8NbXvQjutB7)
### 題目列表
**字串相加**
``` javascript
//input
talk("早上好");
talk("晚上好");
// output
// "hi，早上好"
// "hi，晚上好"
```
<!-- 解答：
```javascript
function talk(text){
return `hi，${text}`;
}
``` -->
**數字處理**
``` javascript
let data = 0;
//input
count(2);
count(3);
count(5);
// output
//2
//5
//10
```
<!-- 解答：
```javascript
function count(num) {
return data+=num
}
``` -->
**數字**
``` javascript
//input
count(2);
count(3);
count(5);
// output
// 4
// 9
//25
```
<!-- 解答：
```javascript
function count(num) {
return num*num
}
```
-->
**兩位數四舍五入**
``` javascript
//input
twoFixed(1.8888)
twoFixed(3.1234)
// output
// 1.89
// 3.12
```
<!-- 解答：
``` javascript
function twoFixed(num){
return Number(num.toFixed(2))
}
``` -->
**BMI**
``` javascript
//input
calcBmi(178,69)
//output
//21.78
```
<!-- 解答：
function calcBmi(height, weight){
return Number((weight / (height/100)**2).toFixed(2))
} -->
**檢查是否需要帶雨具+if**
``` javascript
//input
checkWeather("雨天");
checkWeather("晴天");
// output
// 要帶雨具
// 不用帶雨具
```
<!-- 解答：
``` javascript
function checkWeather(status){
if(status === "雨天") {
return '要帶雨具'
} else if(status === "晴天"){
return '不用帶雨具'
}
}
```
-->
**增加陣列資料**
``` javascript
let data = [];
//input
add("hello");
add("你好嗎？");
// output
// ["hello","你好嗎？"]
```
<!-- 解答：
``` javascript
function add(str){
data.push(str)
return data
}
``` -->
**增加陣列物件資料**
``` javascript
let data = [];
//input
add("洧杰","男生");
add("葉子","女生");
// output
//[
// {name:"洧杰",gender:"男生"},
// {name:"葉子",gender:"女生"}
//]
```
<!-- 解答：
``` javascript
function add(name, gender){
const obj = {};
obj.name = name;
obj.gender = gender;
data.push(obj);
return data
}
``` -->
**取物件資料**
``` javascript
const bmiStatesData = {
overThin: {
state: "過輕",
color: "藍色"
},
normal: {
state: "正常",
color: "紅色"
}
}
// input
checkBmiStates("overThin");
checkBmiStates("normal");
// output
// 你的體重過輕，指數為藍色
// 你的體重正常，指數為紅色
```
<!-- 解答：
``` javascript
function checkBmiStates(status){
return `你的體重${bmiStatesData[status].state}，指數為${bmiStatesData[status].color}`
}
``` -->
## 小組抽考二
* [51~55題目](https://www.notion.so/Part-2-51-55-c6e273e42f314308872fc098267cade4)
<!-- 22213 -->
* [56~60題目](https://www.notion.so/Part-3-56-60-5ee63fa6f38140228f91312ff2d8513a)
<!-- 12331 -->
---
## 本週任務
1. 主線任務
達求職門檻工程師水準等級為 10 分鐘，每日練一遍當起手式，10/30(ㄧ) 開始到 11/12(日) 每天早上 9:05 發 discord 訊息，張貼自己的練功情況
```
此為 BMI kata 分享區，請在討論串 上分享：
1.你今天 BMI kata 練習第幾遍？
2.覺得學習過程中，哪些細節可以優化？
3. 下次練習，你想刻意練習哪些內容？
```
> [洧杰練 Vim 範例](https://www.youtube.com/watch?v=eRLAKhi-6HE&list=PL3TsqJC8EmwTSlkFE7Zu-Bt6HqDG1fH_U)
3. 小組任務
4. 週末任務：BMI Kata
1. 張貼 kata YouTube 影片(15min內)，並提供 codepen
2. 出一題 function input、output 題目，tag 上一位學生解題
Sign in with Wallet
Connect another wallet