---
tags: JS 直播班 - 2023 秋季班
---
# 四則運算
>若有任何疑問請至 Discord「作業討論」頻道討論
## 本章節要學什麼？
學習練習使用基礎的四則運算來熟悉加減乘除與重構簡單的計算元件。
## 題目1：相加產生器 (+)
``` =JavaScript
// input 輸入
add(1,1);
add(2,2);
add(3,3);
// output 輸出
2
4
6
```
## 題目2：相減產生器 (-)
``` =JavaScript
// input 輸入
subtract(1,1);
subtract(2,3);
subtract(8,3);
// output 輸出
0
-1
5
```
## 題目3：相乘三次 (*)
* 輸入一個數字後，該參數會相乘 3 次，例如輸入 `2`，輸出為 `2*2*2=8`
``` =JavaScript
// input 輸入
multiply3Times(3);
multiply3Times(0);
multiply3Times(9);
// output 輸出
27
0
729
```
## 題目4：取 2 的餘數（%）
``` =JavaScript
// input 輸入
remainder(3);
remainder(2);
remainder(8);
// output 輸出
1
0
0
```
## 題目5：取 2 的餘數 + 判斷是否可整除 (% + 結果判斷)
``` =JavaScript
// input 輸入
isDivisible(3);
isDivisible(2);
isDivisible(8);
// output 輸出
未整除
已整除
已整除
```
## 題目6：我要存錢(區域變數、全域變數)
請透過 `addBankMoney` 函式，來累加 `bankMoney` 變數
```=JavaScript
let bankMoney = 0;
<!-- 作答開始 -->
function addBankMoney(num){
}
<!-- 作答結束 -->
// input 輸入
addBankMoney(1);
addBankMoney(50);
addBankMoney(10);
// output 輸出
bankMoney 值為 1
bankMoney 值為 51
bankMoney 值為 61
```
## 題目7：簡單計算機
```=javascript
// input 輸入
calculate(3,5,'+');
calculate(4,2,'-');
calculate(7,9,'*');
calculate(5,5,'/');
// output 輸出
8
2
63
1
```
## 題目8：簡單計算機 + 顯示算式過程
```=javascript
// input 輸入
calculateProcess(3,5,'+');
calculateProcess(4,2,'-');
calculateProcess(7,9,'*');
calculateProcess(5,5,'/');
// output 輸出
"3+5=8"
"4-2=2"
"7*9=63"
"5/5=1"
```
## 題目9：商業邏輯題：增加服務費
六角冰果店即將開張，但發現收銀機漏寫服務費邏輯，還請協助撰寫：
* 一個 `serviceCharge`函式，來計算 5% 服務費並回傳總計費用為多少。
情境：小華吃了一碗冰，小計 100 元，加上服務費為 105 元。
```=javascript
<!-- 作答開始 -->
function serviceCharge(num){
}
<!-- 作答結束 -->
const total = serviceCharge(100);
console.log(`您總計費用為 ${total}`)
```
## 題目10：重構題：消除重複，抽離變因
六角冰店超賺，於是開了二店為八角冰店，收銀機商業邏輯調整為：
1. 兩家店同時聘請專業執事與女僕，增加服務費為 10%
2. 六角冰店一碗冰 100 元，八角冰店一碗冰 800 元
`sixAngleCalculate`、`eightAngleCalculate` 丟入 `num` 冰碗數量，就可獲得總費用
### 重構思路
1. 兩個函式裡面的服務費都是一樣的，可以嘗試抽出來成一個新函式 `serviceCharge`，專門來計算兩間店的服務費
```=javascript
// 第一個參數為冰的數量
function sixAngleCalculate(num){
const subTotal = num * 100;
const serviceCharge = subTotal * 0.1;
const total = subTotal + serviceCharge;
return total;
}
//
function eightAngleCalculate(num){
const subTotal = num * 800;
const serviceCharge = subTotal * 0.1;
const total = subTotal + serviceCharge;
return total;
}
```
## 作業提交等級
* LV1：解出 10 題，並提交 Codepen
* LV2：設計一個 hackmd，嘗試自己設計 10 題
* LV3：嘗試去做其他學生寫的題目，並 tag 學員回報給他，感謝他的命題，讓自己觀念更好
<!-- 參考解答：
https://codepen.io/jmimiding4104/pen/QWzaWPM
這邊解答可能不都是最佳的解法，
適合初學者或者該題突然卡住者，
內容程式碼有針對內容進一步註解可供參考。
-->
## 回報區
| Discord | LV1 答案 | LV2 自行設計題目 | LV3 做其他學員設計的題目 |
|:----------------:|:----------------------------------------------------------------------------:|:-------------------------------------------------------:|:----------------------------------------------------------------------------:|
| ShangChu | [Codepen](https://codepen.io/shangchu0412/pen/mdaaQLN) | | |
| Moreene | [CodePen](https://codepen.io/Moreene/pen/rNoooxZ) | | |
| Chia Pin | [CodePen](https://codepen.io/joker-cat/pen/PoXXXKW) | | |
| 精靈 | [Codepen](https://codepen.io/vesbexih-the-bashful/pen/MWZZZQP?editors=0012) | | |
| 詹姆士 | [CodePen](https://codepen.io/z111048/pen/bGOOzdj) | | |
| LinaChen | [CodePen](https://codepen.io/LinaChen/pen/eYbbbYr) | | |
| Zhu.lin | [CodePen](https://codepen.io/codepenplayer/pen/rNooPoL) | | |
| ming0712 | [CodePen](https://codepen.io/StevenHuang/pen/rNooPqL) | | |
| pinyi_9 | [CodePen](https://codepen.io/Wpypy/pen/gOZZqMv?editors=1112) | | |
| Ataraxia | [CodePen](https://codepen.io/ataraxia8888/pen/RwEEdpv) | | [謝謝 TTedd, Rxzan, MDFK 同學出題 🙏](https://codepen.io/ataraxia8888/pen/RwEEdpv) |
| shiro | [CodePen](https://codepen.io/chenghsienwang/pen/GRPPLrq) | | |
| MY | [CodePen](https://codepen.io/ahmomoz/pen/ExGGMoQ?editors=0110) | | |
| tanuki5863 | [CodePen](https://codepen.io/tanuki320/pen/WNLLPKB?editors=1011) | | |
| jiayu | [CodePen](https://codepen.io/fjqxaznl-the-reactor/pen/GRPPLzm?editors=0011) | | |
| Celine 510 | [CodePen](https://codepen.io/Celine-510/pen/dywwEMN) | | |
| ann6212 | [CodePen](https://codepen.io/yqmegupa-the-styleful/pen/mdaaQvd?editors=1012) | | |
| Tina02 | [CodePen](https://codepen.io/chjitlox-the-bashful/pen/VwqqOdr) | | |
| Suzi | [CodePen](https://codepen.io/midomommy/pen/rNoogdx?editors=0010) | | |
| shuuu | [CodePen](https://codepen.io/afjrvjzl-the-bashful/pen/VwqqOVQ?editors=0111) | | |
| celinelinnn | [CodePen](https://codepen.io/celinephoebe/pen/qBLLGaa) | | |
| Zem | [CodePen](https://codepen.io/Potoro/pen/ExGraEJ) | | |
| SHUO | [Codepen](https://codepen.io/xrzarxkl-the-reactor/pen/abPXzxo?editors=1011) | | |
| santu0868 | [Codepen](https://codepen.io/HatsumiSan/pen/VwqgvrV) | | |
| TTedd | [Codepen](https://codepen.io/TTedd/pen/PoXXgNz?editors=0112) | [HackMD](https://hackmd.io/aLiLKyi7R16bao_gdUGlmQ?view) | [感謝 Rxzan 大大出題！](https://codepen.io/TTedd/pen/zYybwOb) |
| yin | [Codepen](https://codepen.io/andy888jam/pen/zYyerXV) | | |
| Winnie | [Codepen](https://codepen.io/codepen-io-winnie/pen/XWoOXPG?editors=0012) | | |
| Mattie | [CodePen](https://codepen.io/mattielin/pen/zYyeYVa?editors=0010) | | |
| 浪裡小白龍#6860 | [CodePen](https://codepen.io/Emillo/pen/JjwxGaP?editors=0011) | | |
| kuanju27 | [CodePen](https://codepen.io/Eero-Chiao/pen/ZEVVmxJ) | | |
| 保羅 | [CodePen](https://codepen.io/paul-1997/pen/OJrdmRQ?editors=1011) | | |
| hsu0921 | [CodePen](https://codepen.io/HSUANIN0327/pen/QWzYvGJ) | | [CodePen](https://codepen.io/HSUANIN0327/pen/RwEvVdy) |
| Peng | [CodePen](https://codepen.io/H-Peng/pen/QWzYvKZ) | | |
| Oria | [CodePen](https://codepen.io/kajing/pen/poqGwpE?editors=1111) | | |
| Morning | [CodePen](https://codepen.io/sxzjnkxs-the-styleful/pen/Jjwweam?editors=0112) | | [Codepen](https://codepen.io/sxzjnkxs-the-styleful/pen/OJrdgZL?editors=0011) |
| 阿榮 | [Codepen](https://codepen.io/codeitaday/pen/abPXwNy?editors=0011) | | [Codepen](https://codepen.io/codeitaday/pen/abPXwYq?editors=0011) |
| 奔跑吧(GTR150) | [Codepen](https://codepen.io/Wer-Qwe/pen/qBLgjEP?editors=1111) | | |
| Dora | [Codepen](https://codepen.io/dorayu/pen/dywaYbm?editors=1011) | | |
| xiaokui_71292 | [Codepen](https://codepen.io/pen?template=eYbxeMR) | | |
| smalljie | [Codepen](https://codepen.io/smalljie/pen/MWZLrWE) | | |
| 一畫 | [Codepen](https://codepen.io/YH-K-the-selector/pen/dywadKR?editors=0012) | | |
| fionachiang_2023 | [Codepen](https://codepen.io/fionachiang/pen/bGOzKXZ) | | |
| yijing0502 | [Codepen](https://codepen.io/Yi-Jing-71080635/pen/VwqgXPd) | | |
| Rxzan | [Codepen](https://codepen.io/Tzuru-Chen/pen/ZEVwOKL?editors=1011) | [HackMD](https://hackmd.io/@Tcadmin/HylMdlQZ6) | [感謝 TTedd 大大用心出題！🙏](https://codepen.io/Tzuru-Chen/pen/yLGZGBX) |
| neo_1104 | [Codepen](https://codepen.io/eipakoeq-the-animator/pen/ZEVPzad) | | |
| Ching | [Codepen](https://codepen.io/tzuchingg/pen/vYvPBod?editors=0012) | | |
| ss585801 | [Codepen](https://codepen.io/ss585801/pen/oNJmaMW) | | |
| RX00#5351 | [Codepen](https://codepen.io/llqzknqv-the-styleful/pen/PoXLoOg?editors=0010) | | |
| 蛋塔 | [Codepen](https://codepen.io/Hong-Game1/pen/qBLvdZd?editors=1111) | | |
| Joy_chiang | [Codepen](https://codepen.io/fwysphbw-the-vuer/pen/yLGwyyX?editors=0012) | | |
| ChrisSQR | [Codepen](https://codepen.io/ChrisSQR/pen/PoXLwEz) | | |
| 小廷 | [Codepen](https://codepen.io/uyxkiake-the-selector/pen/qBLgLxG) | | |
| runweiting | [Codepen](https://codepen.io/weiting14/pen/RwEdwVY) | | |
| markchen_ | [Codepen](https://codepen.io/Mark-JJchen/pen/JjwzEXN?editors=0011) | | |
| Jun_ | [Codepen](https://codepen.io/Jun-L/pen/QWzYVjp) | | |
| skypassion5000 | [Codepen](https://codepen.io/skypassion5000/pen/MWZxmOx?editors=0011) | | |
| Allen | [Codepen](https://codepen.io/hlctw/pen/MWZLPod) | | |
| skylaaaa | [Codepen](https://codepen.io/chihyu2790/pen/poqYwGE) | | |
| Ivy | [Codepen](https://codepen.io/Irene-Ke/pen/PoXLKvW?editors=0010) | | |
| minnielin | [Codepen](https://codepen.io/ShengXin-Lin/pen/KKbEarz?editors=1111) | |
| 阿維#2569 | [Codepen](https://codepen.io/iijojpli-the-looper/pen/YzdgPWo?editors=0111) | |
|白夜|[Codepen](https://codepen.io/Wei903/pen/dywrWXG?editors=1112)|
| yuan! | [CodePen](https://codepen.io/townyuan/pen/VwqRgba) | | [感謝TTedd出題](https://codepen.io/townyuan/pen/eYboREp), [感謝Rxzan出題](https://codepen.io/townyuan/pen/zYyXzXw) |
| patrickpie | [CodePen](https://codepen.io/patrickpie/pen/jOXJJLN?editors=0010) | | |
| ⭐️小正 | [CodePen](https://codepen.io/colorgolden/pen/dywrpay) |
| Fabio20 | [CodePen](https://codepen.io/fabio7621/pen/yLGwORd?editors=1111) |
| phyllis_0802 | [CodePen](https://codepen.io/Phyllis-Cheng/pen/ZEVPJar) | | |
| MDFK |[Codepen](https://codepen.io/maywang/pen/Bavbvaa?editors=0012)| [HackMD](https://hackmd.io/@gpwzoBhzQVK9uS394vzV_Q/HJroCJDZ6) | [感謝TTedd出題](https://codepen.io/maywang/pen/YzdMZLb), [自己出題](https://codepen.io/maywang/pen/XWoQyqK?editors=1112),[感謝Rxzan出題](https://codepen.io/maywang/pen/ZEwEvOV?editors=0012)| |
| Befun | [CodePen](https://codepen.io/richard260572/pen/MWZxNMG?editors=1111) | | |
| Ivan | [CodePen](https://codepen.io/swalok/pen/RwEOPvg?editors=0012) | | |
| MKLee | [CodePen](https://codepen.io/Code-My/pen/YzdMyGE) | | |
| xuan | [CodePen](https://codepen.io/xuan0915/pen/XWoQREw?editors=0012)| | |
| Peggy | [CodePen](https://codepen.io/peggylai/pen/gOZyxEa?editors=0010) | | |
| lemonmolly | [CodePen](https://codepen.io/lemonmolly/pen/jOXRvrW?editors=1112) | | |
| shcopy | [CodePen](https://codepen.io/shcopy/pen/oNJOOoa) | | |
| Iris | [CodePen](https://codepen.io/iris831206/pen/vYvMMRM?editors=1112) | | |
| nini1202desu | [CodePen](https://codepen.io/tvxq5206/pen/abPxoEo?editors=0011) | | |
| Uli | [CodePen](https://codepen.io/uli1313/pen/zYyXgYw?editors=0012) | | |
| JUNEW | [CodePen](https://codepen.io/June-W/pen/GRPapXG) | | |
| 小夏 | [CodePen](https://codepen.io/michaelhsia/pen/YzddBVr) | | |
| JasonFu | [CodePen](https://codepen.io/jie-Fu/pen/poqGrXx) | | |
| 楓仔 | [CodePen](https://codepen.io/maplestartend/pen/PoXvByB?editors=0012) | | |
| Alyce | [CodePen](https://codepen.io/alycehwy/pen/WNLBKVB?editors=0010) | | |
| xin | [CodePen](https://codepen.io/Estherrrrrr999/pen/QWzRbqa) | | |
| Aritan | [CodePen](https://codepen.io/Aritan/pen/NWeVOGb?editors=0011) | | |
| 維哲 | [CodePen](https://codepen.io/kwz1202/pen/NWeZXgZ) | | |
| 地球儀 | [CodePen](https://codepen.io/dayday1222/pen/jOXjKVy?editors=0012) | | |
| yu.t_liu | [CodePen](https://codepen.io/YuT200053/pen/ZEVdYje?editors=1111) | | |
| Lainie1931 | [CodePen](https://codepen.io/Lainie88/pen/PoXLdPY?editors=1012) | | |
| Leo | [CodePen](https://codepen.io/Aruminiya/pen/VwqoaVo) | | |
| zona | [CodePen](https://codepen.io/w242920/pen/OJrKNML?editors=1111) | | |
| lockon | [CodePen](https://codepen.io/Lockon-Stratos/pen/KKbOOQj) | | |
| yuan2781 | [CodePen](https://codepen.io/ismebir/pen/RwvbZoZ) | | |
| 辣椒 | [Codepen](https://codepen.io/chilichen118/pen/VwgZMex) ||
| rickTsaiii | [Codepen](https://codepen.io/ricktsaiii/pen/XWooQMy) ||
| 郭芙蘭#6374 | [Codepen](https://codepen.io/flora_Kuo/pen/yLZLBaY?editors=1011) |
| 風羽 | [CodePen](https://codepen.io/Joy-Huang/pen/PoXrqxb?editors=1012) | | |
| Kouta | [CodePen](https://codepen.io/kouta-f2e/pen/ExraoVr) | | |
| damon0323 | [CodePen](https://codepen.io/swk9eny2/pen/WNPbzPp) | | |
| Andy | [CodePen](https://codepen.io/andy31342/pen/yLZYLEa?editors=0110) | | |
| samgu666 | [CodePen](https://codepen.io/orz311013/pen/jOdbOJM) | | |
| cest_jessie | [CodePen](https://codepen.io/itsjessiechen/pen/gOqroWy) | | |
| kawa | [CodePen](https://codepen.io/z83xji6/pen/eYxpOqp) |
| gebyman | [CodePen](https://codepen.io/gebyman/pen/JjwVoKZ?editors=0011) |
| lychee_kk | [CodePen](https://codepen.io/kakakala/pen/bGzwKMp?editors=1010) | | |
|yaoling.liang|[CodePen](https://codepen.io/Yao-Ling-L-/pen/rNoXVWY?editors=0012)|||
| yuling | [CodePen](https://codepen.io/igzdflpu/pen/gOqWbNG?editors=0011) | | |
| sponge | [CodePen](https://codepen.io/biunpujm-the-flexboxer/pen/vYbmRaP?editors=1112) | | |
| .ztion | [CodePen](https://codepen.io/ztion/pen/RwvJLyQ?editors=1011) | | |
| bf_tsai | [CodePen](https://codepen.io/BF-Tsai/pen/VwgGmYY?editors=0011) | | |
| hoyiiiii | [CodePen](https://codepen.io/hoyii/pen/raBeEBa?editors=0012) | | |
<!-- 快速複製
| 名稱 | [CodePen]() | | |
-->
Sign in with Wallet
Connect another wallet