Webduino 學習手冊網站即將改版,提供您更好的閱讀體驗!

搶先試用

流程

流程,在程式碼裡面就是 function,在寫程式的時候,常常會遇到需要重複執行的程式碼,這些重複的程式碼可能從十幾行道幾百行不等,如果每重複一次都得重寫一次,勢必會造成不小的困擾,所以我們可以設定一個流程,並在這個流程中寫入對應程式碼,如此一來,當我們需要重複用到這些程式碼的時候,只要呼叫這段流程,就可以重複執行對應的程式。

基本操作

打開 Webduino Blockly 編輯器,點選左側選單「流程」的目錄,可以看到對應的三個流程積木,第一個是基本的流程,第二個是會「回傳值」的流程,第三個則是流程內的邏輯判斷。

Webduino Blockly 編輯器:https://blockly.webduino.io

Webduino Blockly 流程積木

先看到第一個基本的流程,把這個流程命名為 a ( 建議命名盡可能都用英文字開頭 ),點選流程上方的藍色小齒輪,可以為這個流程新增「流程內的變數」,預設的變數名稱為 x。

新增流程內的變數

流程內的變數可以放入很多個,但注意每個的名稱都要設定為不同,避免同一個名稱的變數互相取代的狀況發生。

「流程內的變數」和「外面的變數」在定義與用法上略有不同,目前只需要知道可以添加流程內的變數,用法會在後面的篇幅陸續介紹。

新增不同流程內的變數

要使用流程,就是把要執行的事件,放在流程積木裡,舉例來說就是在流程 a 的裡頭,放入「顯示大家好」的積木,不過這裡有個要注意的地方,如果「顯示大家好」的積木放在流程外,執行的時候就會顯示大家好三個字,如果放在流程內,執行的時候將不會有任何反應

顯示的積木要打開網頁互動測試區,下拉選單選擇顯示文字,於左側選單的最下方可以看到,文字的積木在「基本功能 > 文字」的目錄下。

顯示積木放在流程內,執行時不會顯示文字

為什麼不會有任何反應呢?因為我們只是「定義」流程的內容,但還沒有執行流程,當我們設定完流程的內容之後,在流程的積木內,就可以看到「執行」這個流程的積木,將這個積木放到畫面中,執行之後就可以看到出現大家好三個字。

須執行流程積木,才會顯示文字

如果一個程式當中,有很多的片段需要重複執行,我們就可以使用流程將這些片段分門別類,一來方便管理,二來也可以大幅縮減程式碼的大小。

帶有「回傳值」的流程

帶有回傳值的流程比較特別,因為當我們執行這個流程的時候,就等同於帶出這個流程所產生的「值」,舉例來說我們使用一個帶有回傳值的流程,命名為流程 a,在流程 a 裡頭放入一個變數 x,讓變數 x 等於 1 加 2,接著在回傳的空格內,回傳這個變數 x,最後將流程 a 顯示在網頁互動區裡頭,當我們執行這段程式,就可以看到網頁裡出現 3 的結果。

數字和數學式的積木在「基本功能 > 數學式」目錄下。

帶有回傳值的流程積木

如果透過流程的藍色小齒輪,新增流程內的變數,就可以回傳變數互相計算的結果,然而「允許語句」的勾選與否,取決於在流程內是否要進行更複雜的計算而決定。

新增流程內變數

舉例來說,在流程 a 裡頭使用兩個流程內的變數 x 與 y,並設定回傳的結果為 x 加 y,假設我們就在顯示的積木裡設定 x 為 5、y 為 6,執行後就會顯示 11,如此一來當程式越來越複雜,這樣子的寫法彈性就會很大,程式的長相也會更加簡潔。

範例解答:https://goo.gl/MjCc8c,可修改 x 與 y 的數值後再執行看看。

具有彈性變化的流程設定

而第三塊帶有「邏輯判斷」的積木,則是要和「帶有回傳值」的積木搭配使用,以下方的例子來說,我們可以在執行流程的同時,進行邏輯判斷,如果 x 大於 y,就回傳「X 贏啦」的訊息,如果 x 小於 y 就回傳「Y 贏啦」,如果相等就回傳「平手」。

範例解答:https://goo.gl/AtLDMx,更多邏輯的判斷教學,會在後續篇幅介紹。

執行流程並進行邏輯判斷積木

小結

流程是在程式裡常常見到的元素,除非說程試碼非常簡單,不然都會將程式碼分門別類,並用流程區隔,如此一來不論是要重複使用,或是區隔特定的功能,相對來說都會輕鬆許多,如果熟悉了流程的用法,對於往後撰寫複雜或進階的程式,一定會非常有幫助,在後續的教學當中,三不五時也會使用到流程喔!