# DAY22 - JavaScript 31. 寫程式碼之前，先學會畫流程圖 - I

### Flow chart / 用這個來開發流程圖

- 遇到開發需求時，先不要急著寫程式碼，而是先學習怎麼拆解開發流程圖。

- [推薦網站 - whimsical](whimsical.com)

### 流程圖簡介 / 符號

- 以下為常用符號，圖取自維基百科分享


- flow chart 範例:


---

### 初次畫流程圖

- 確認 code 任務內容

小華想查詢自己的錢包，有多少錢?

// 於是他打開錢包，看看自己剩多少錢

// 打開後，發現皮包有: 150元 

- step

1. **add flow chart shape**


2. 像這樣，透過上面的文件來思考，你大概需要畫出怎麼樣的圖出來

3. 著手寫代碼

// 這邊也可以直接取好變數名稱，不賦予值(undefined)也是可以的。
let myWallet = 0;

// 發現皮夾有 150

myWallet += 150;
console.log(`小華錢包裡有${myWallet}元。`);

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