2021年12月11日 星期六

以 fChart 馭 Python：練 fChart 了沒？（1/11）

 以 fChart 馭 Python：

練 fChart 了沒？（1/11）

Line：ted2016.kpvs
Email：Lct4246@gmail.com
FB：http://gg.gg/TedLeeFB/
Blog：http://gg.gg/TedLeeBlog/

Dec. 11, 2021
88x31.png[1]

我們在《從想法到實現：怎麼用程式解決問題？》（https://reurl.cc/ye53dM）這篇文章中已提出：

在整個使用編程來解決問題的思維過程中，如果能把原始問題的解法（solution）以「流程圖」來表達，則最後以程式來實現是指日可待的了──因為：流程圖和程式語法很容易做一一的對應轉換！（圖1）

圖1：用編程解決問題的過程中，將問題的解方表達成中繼的流程圖後可以將之一一對應到各種程式語言。

接下來，我們將使用陳會安老師改編自愛沙尼亞的流程圖轉 Python工具「fChart」（https://reurl.cc/3jrj2V）來展示上述的這個概念。因為筆者認為「以科技英文學程式」是必要的，它可以幫我們開啟一扇連接編程世界的大門。本文特地將陳老師中文化的版本調回英文介面（https://reurl.cc/ZrarRA）。文後的各截圖也都以此為之。

fChart 10大項130例

會安老師精編了如下 10 大項共 130 題 [2]（圖1～圖10，可由 https://reurl.cc/e69gxj 下載）從基礎到資料結構（data structures）與演算法（algorithms）的練習題供初學者一一細細品嚐「流程圖轉譯 Python 程式碼」就是這樣簡單（雖然目前沒有這可以自動化的工具程式存在，也許有一天它被創造出來，那將會有多美好啊！？）
這10大項可分為3大類，項目 1 到 5 為基礎編程入門，項目 6 到 8 為進階主題，項目 9 到 10 為延伸內容。

  1. 變數與輸出輸入
  2. 運算子與運算式
  3. 條件判斷
  4. 迴圈結構
  5. 迴圈和條件
  6. 巢狀迴圈
  7. 函數
  8. 陣列
  9. 演算法
  10. 遞迴函數
圖1：10大項目之1。

圖2：10大項目之2。

圖3：10大項目之3。

圖4：10大項目之4。

圖5：10大項目之5。

圖6：10大項目之6。

圖7：10大項目之7。

圖8：10大項目之8。

圖9：10大項目之9。

圖10：10大項目之10。

fChart 中有兩套工具：流程圖直譯器（ FlowProgramming_Edit.exe）和 Python 版的程式碼編輯器（fChartCodeEditor.exe），分別如圖11 和 圖12 所示。

圖11：流程圖直譯器。

圖12：程式碼編輯器。

流程圖直譯器

我們以流程圖直譯器中的「條件執行（Conditional Execution）」這個範例來展示它可以動態執行的強大視覺效果（圖13 和圖14）。

圖13：流程圖直譯器中的「條件執行」範例。


圖14：「條件執行」範例的流程圖內容。

按下執行（execute） 按鈕，螢幕上會跳出圖等待輸入的黑底白字視窗。當我們依照畫面的提示文字輸入一個數字後，它會再跳出剛輸入的數字是否是 15 的判斷結果（圖 15）。

 
圖15：執行結果。

接著，將上方工具列（toolbar）中的 Delay 滑桿（slider）往右打到底，讓延遲的時間進入單步（single step）執行模式。再按下按鈕，這樣我們就能以按一次執行一塊流程圖上符號的方式來追蹤這個流程圖的執行順序（圖16）。

圖16：單步執行模式。

此外，我們也能從工具列右側的按鈕看到變數在流程圖執行過程中瞬間的變化狀況（圖17）。

圖17：變數監看視窗。


程式碼編輯器

在工具列上右側按下開啟如圖12 的程式編輯器。接著，我們就可以很容易地以「一塊流程圖符號對應轉出一條程式碼」的方式完整的「譯出」所有的程式語法了：

  1.  <---> a = int(input('請輸入數字：'))
  2.  <---> if (a == 15):
  3.  <--->print('是數字 15')
  4.  <---> 

將檔案以「CondictionalExecution.py」存檔，然後按 按鈕執行程式。我們就會看到從流程圖對照轉換為程式碼的執行結果是相同的（圖18）。註：流程圖完全可以人工方式轉換為 Python 程式碼，我們將在隨後的十個篇章中一一展示。至於自動轉換的工具目前仍闕之付如，是否有這樣的演算法存在仍是一個很好的研究議題。

圖18：流程圖轉換為程式碼的執行結果。

還原編程題目

這個程式範例要使用者輸入一個數字（例如：13），然後由電腦判斷它是否是15。我們可以進一步想想要怎樣應用它呢？（提示：猜數比大小的遊戲。）

用 fChart 繪製流程圖

關於如何使用 fChart 來畫流程圖，會安老師早已親自「演藝」了一系列的影片，我們就把它們的九又四分之三月台入口處整理出來給讀者自（己）攻（頂）：
  1. 使用fChart建立流程圖（https://reurl.cc/9OZ7qV）
  2. 01 第1個fChart流程圖（https://reurl.cc/Lp06yK）
  3. 02 fChart變數與運算子循序結構（https://reurl.cc/8Wy0Yg）
  4. 03 fChart是否選選擇結構（https://reurl.cc/ZrQ9Ma）
  5. 04 fChart二選一選擇結構（https://reurl.cc/9OZ7yY）
  6. 05 fChart多選一選擇結構（https://reurl.cc/Y9WVn0）
  7. 06 fChart前測式迴圈重複結構（https://reurl.cc/l90g49）
  8. 07 fChart後測式迴圈重複結構（https://reurl.cc/yQnYGO）
  9. 08 fChart函數模組（https://reurl.cc/9OZ7qV）
  10. 使用fChart解統測與技競問題（https://reurl.cc/nEnrbX）

  1. 六種授權條款。
  2. 我們是啃著程式語言語法書一個字一個字地從鍵盤 key 進電腦裡，然後再和「執行 -> 除錯（debug）」奮戰學來的。當然，我們當年是普弱（pro）的 CSEE（資訊電子電機科系）專業生。
    而現在面對成群的通識生，這樣玩一定一路玩到掛、玩到死…。所以，得以範例式教學（learning by examples）想方設法的營造出那麼一點點有點趣味的學習動機來教學。
張貼者： 於
標籤： ,

沒有留言:

張貼留言

訂閱： 張貼留言 (Atom)