---
# System prepended metadata

title: DAY23 - JavaScript 32. 寫程式碼之前，先學會畫流程圖 - II
tags: ['Re:0 前端工程師之路 - JavaScript - 判斷與流程 篇章']

---

# DAY23 - JavaScript 32. 寫程式碼之前，先學會畫流程圖 - II

### 確認 code 任務內容:
```
// 想查詢自己的錢包有多少錢。

// 小華他想出門，但他不確定自己的錢包有沒有錢 / let wallet;
// 於是，他想打開錢包看看還有多少錢 / wallet += number

// 如果他有 100元以上，他就會去吃 80元的牛肉麵! / true

// 如果沒有100元，就決定不吃牛肉麵，留在家裡 / false

// 最後，小華還想要計算自己剩下多少錢
```

### 這邊，再加入一些其他的判斷結果 / 類似 else

- 透過 **whimsical**，設計 **flow chart**。

1. 先了解需求與目的，並新增一個 title。
![](https://i.imgur.com/OR2WvEM.png)


2. 一開始，一定是計算錢包剩下多少對吧? 
   流程圖，**一定會有開始計算** / 橢圓形，**代表起止符號**
![](https://i.imgur.com/S29tu4s.png)

3. 確認**錢包金額有多少**，這邊用**程式** - 正方形
   填入金額數字吧! 
   **假設有$150**
![](https://i.imgur.com/mqTa9Zy.png)

4. 確認錢包金額之後，了解小華將會執行哪些行為
   這時候，就需要**決策判斷**(菱形)了:
   1. 錢包超過:100元，我們就去吃牛肉麵(-80元)，最後計算金額。
   2. 錢包不足:100元，小華也不出門了，在家裡，金額不變，最後計算金額。

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

5. 最後，確認 if / else 的輸出結果，並且計算錢包
   這邊放下程式碼流程。
   
![](https://i.imgur.com/8yRDlpP.png)


6. 計算結束

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


### code 解析:

```
// 一開始不知道錢包金額是多少:

let wallet = 0;

// 確認錢包金額，有150:

wallet += 99;
console.log(wallet);

// 進入 if 判斷流程:
// if 若金額大於 100 就去吃牛肉麵 -=80;
// else 金額小於 100 什麼也不做

if (wallet >= 100) {
  wallet -= 80;
  console.log(`小華的錢包剩下:${wallet}元!`);
} else {
  // 什麼也沒消費 -=0;
  wallet -= 0;
  console.log("小華沒出門!");
  console.log(`小華的錢包剩下:${wallet}元!`);
}
```

N

###### tags: `Re:0 前端工程師之路 - JavaScript - 判斷與流程 篇章`