iT邦幫忙

2022 iThome 鐵人賽

DAY 8
0
自我挑戰組

新手的JavaScript扎根之路系列 第 8

Day08 在寫程式碼之前你需要知道的流程圖!

  • 分享至 

  • xImage
  •  

嗨嗨!我是Winnie溫尼~/images/emoticon/emoticon08.gif

前言

在前面的章節,我們累積了變數宣告、型別判斷、運算子應用的知識點,今天輕鬆一點來學習繪製流程圖(Flowchart),完善的流程圖可以幫助我們在撰寫較為繁雜的流程判斷時思考更為清晰,那麼就一起來認識流程圖吧~!

流程圖Flowchart

又稱「程式方塊圖」是表示演算法、工作流或流程的一種方塊圖表示,它以不同類型的框代表不同種類的步驟,每兩個步驟之間則以箭頭連接。先將獲得的任務拆解、分析,再進到流程設計,幫助我們在撰寫程式上有更完善的邏輯!

常用符號

美國國家標準協會是1960年代就開始制定流程圖及一些標準符號。而在1970年,國際標準化組織採用其方案。現時通用的版本ISO 5807是在1985年修訂。
形狀 | 名稱 | 描述
------------- | -------------
https://upload.wikimedia.org/wikipedia/commons/thumb/6/6c/Flowchart_Line.svg/85px-Flowchart_Line.svg.png | 流程符號 Flowline | 表過程的次序
https://upload.wikimedia.org/wikipedia/commons/thumb/a/ad/Flowchart_Terminal.svg/74px-Flowchart_Terminal.svg.png | 起止符號 Terminal | 表開始、結束,所有的流程最終都要連接到結束
https://upload.wikimedia.org/wikipedia/commons/thumb/7/7e/Flowchart_Process.svg/76px-Flowchart_Process.svg.png| 程式 Process | 表程式去改變數值、形式、數據之處
https://upload.wikimedia.org/wikipedia/commons/thumb/0/0e/Flowchart_Decision.svg/75px-Flowchart_Decision.svg.png | 決策判斷 Decision | 顯示條件進程,按情況決定下一步(if...),通常會連接「是/否」或「真/假」
Flowchart IO.svg | 輸入/輸出 Input/Output | 標示數據輸入或輸出的過程,即填入數據或顯示工作結果的步驟

小試身手

判斷體重是否過重(假設:體重大於80為過重)
流程圖範例
https://ithelp.ithome.com.tw/upload/images/20220922/20151944jdMEJGANUp.png

參考資料

流程圖

新手上路,如文章有錯誤或需修正之處,懇請大家多多指教!
那麼,我們明天見囉~/images/emoticon/emoticon29.gif


上一篇
Day07 運算子大家庭(下)
下一篇
Day09 有趣的流程判斷if 、else、else if
系列文
新手的JavaScript扎根之路30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言