判斷控制&迴圈應用

2015/02/19 謝碧景(c)編製更新 


 學習目標 MIT App Inventor 2繁體中文: Create apps! 

  • 學會判斷控制指令的設計與應用。
  • 學會迴圈指令的設計與應用。
  • 學會Math數學指令區及變數之設計與應用
  • 學會User Interface(使用者介面)類別Notifier(對話框)元件之設計與應用

一、判斷控制指令

在程式設計Blocks頁面左側之方塊面板【Built-in內件方塊→Contrl流程控制】接著在【Viewer工作面板】中即有判斷流程控制之指令,如下:

(一)單向判斷式 if~then

 if~then



 
 →流程圖:
*註:點選藍色的『擴充項目』圖示,即可再增加條件等項目。

 範例:會員密碼輸入判斷,密碼為"12345678",若輸入的密碼正確,則顯示"歡迎!\n進入會員專區。"。(if_1.aia)

1.畫面編排(Designer)頁面:即版面配置頁面。

註:『\』跳脫符號是讓後面接著的字元跳脫原本的意義,來控制輸出的樣貌,例:\n 為游標移到下一列

2.程式設計(Blocks)頁面:
    • 語系→English:
  • 語系→繁體中文:

3.測試程式:以模擬器(emulator)測試執行,如下圖,執行後畫面。

 密碼正確畫面。
 密碼錯誤畫面。


(二)雙向判斷式 if~then~else

 if~then~else

  →流程圖:


 範例:成績判斷,成績若在60~100分,則顯示“及格",否則顯示“不及格"。(if_2.aia)

1.畫面編排(Designer)頁面:即版面配置頁面。


2.程式設計(Blocks)頁面:
  • 語系→English:
  • 語系→繁體中文:


註:『與(且)』及『或』方塊預設為『內嵌輸入項排列』,如下圖,在邏輯方塊上按滑鼠左鍵,再於快顯功能表中選取『External Inputs』即『外接輸入項』,可讓程式碼在螢幕畫面上更容易且明確的呈現。


 內嵌輸入項 轉 外接輸入項:
 外接輸入項 轉 內嵌輸入項:

(三)多向判斷式 if~then~elseif~else

  if~then~elseif~else
 →流程圖:

 範例:承上,成績及格判斷,成績若在100分以上,應顯示“成績錯誤,非0~100)(if_3.aia)

1.畫面編排(Designer)頁面:同上範例。

2.程式設計(Blocks)頁面:
  • 語系→English:

  • 語系→繁體中文:


3.測試程式:以模擬器(emulator)測試執行,如下圖,執行後畫面。


homework 練習6BMI身體質量指數之判斷:輸入身高及體重,求個人BMI值?並判斷身體質量指數標準與否?BMI=體重/(身高^2),身高以公尺(M)為單位,體重以公斤(KG)為單位。【重點:學會判斷控制&迴圈指令的設計與應用(專案名稱: BMI.aia)

 判斷標準如下:
  BMI<18.5,請輸出“體重過輕”。
   18.5≦BMI<24,請輸出“標準體重”。
   24≦BMI<27,請輸出“過重”。 
     BMI≧27,請輸出“肥胖家族”。
 Emulator 測試結果:

(一) 畫面編排(Designer)頁面:即版面配置頁面。

設定元件的屬性值:
 畫面編排:

(二) 程式設計(Blocks)頁面:



二、Math數學指令區應用

數學Math指令區中random integer 會回傳一個介於指定數字之間的隨機整數,包含上限(to)與下限(from)。參數由小到大或由大到小不會影響計算結果。【重點:學會判斷控制&迴圈指令,及數學Math指令區中random integer的設計與應用。】參閱random integer《摘自: AppInventor中文學習網

 範例:擲骰子,產生1~6 點。(random_integer.aia)


1.畫面編排(Designer)頁面:即版面配置頁面。
 Emulator 測試結果:



2.程式設計(Blocks)頁面:
  • 語系→English:
 

  • 語系→繁體中文:

三、迴圈

迴圈可處理程式中重複的工作,又分為固定執行次數迴圈即【循序取(數字)】,及不固定執行次數迴圈即滿足條件迴圈】,分述如下:

(一) 循序取(數字) for each(數字)

  • for each 循序取(數字)迴圈是固定執行次數的迴圈,其方塊於【內件方塊→流程控制】指令:
 for each


 

 →流程圖:


 範例:擲骰子,產生1~6 點,一次產生8個骰子點數(for_each_1.aia)

1.畫面編排(Designer)頁面:即版面配置頁面。

 Emulator 測試結果:


2.程式設計(Blocks)頁面:
  • 語系→English:
  • 語系→繁體中文:


(二)滿足條件迴圈 while test

  • 滿足條件(while test)迴圈是不固定執行次數的迴圈,其方塊於【內件方塊→流程控制】指令:
 while test


 
 →流程圖:


 範例:承上,擲骰子,產生1~6 點,輸入骰子之次數後按下按鈕產生點數(while_test_1.aia)

1.畫面編排(Designer)頁面:即版面配置頁面。

 Emulator 測試結果:


2.程式設計(Blocks)頁面:
  • 語系→English:
  • 語系→繁體中文:

*註:滿足條件迴圈每次計算之前global N 需重新設定初始值為1,否則第二次執行值會錯誤。

四、對話框元件 Notifier

  • Notifier(對話框)】元件:屬於使用者介面(User Interface)元件類別中,為非視覺化元件,即不可見元件,在執行時不會在螢幕中顯示,需要時以對話方塊呈現。
 對話框(Notifier)元件無任何屬性,常用的事件及方法如下:
  事件或方法  說明
 選擇完成 事件  使用者按對話方塊中的按鈕後觸發本事件。
 輸入完成 事件  使用者在對話方塊中輸入文字,再按OK鈕後觸發本事件。
 顯示警告訊息 方法
 顯示訊息,該訊息隨後會自動消失。
 顯示選擇對話框 方法  對話方塊中有兩個自訂名稱按鈕及一個Cancel鈕,使用者按下按鈕後對話方塊即消失。
 顯示消息對話框 方法  顯示訊息對話方塊,按OK鈕後對話方塊即消失。
 顯示文字對話框 方法   顯示可輸入文字對話方塊,按OK鈕後對話方塊即消失。
*參閱:
 
Notifier元件 指令中文化

homework 練習7:猜數字遊戲:由亂數產生1~100間的一個數字,請猜猜此數,並以訊息提醒太小,及顯示所猜的次數。若猜中則隱藏【猜一猜】鈕,顯示【重新開始】鈕。【重點:學會判斷控制&迴圈指令,數學Math指令區中random integer,及Notifier對話框的設計與應用】(檔名:Guess.aia)。

(一) 畫面編排(Designer)頁面:即版面配置頁面。


(二) 程式設計(Blocks)頁面

  • 語系→English:
  • 語系→繁體中文:



(三) 測試程式:以模擬器(emulator)測試執行,如下圖,執行前後畫面。

 Emulator 測試結果:


 顯示【重新開始】鈕: