程序＆清單應用
2015/02/19 謝碧景(c)編製更新
學習目標
學會【Procedure程序】的設計與應用。
學會程序中無傳回值程序與有傳回值程序之應用。
學會【List清單】的宣告、循序取(清單項)迴圈之設計與應用，及瞭解【變數】與【清單】的差異性。
學會【ListPicker清單選擇器】元件的設計與應用。
學會【物件清單】之設計與應用。
◆ MIT App Inventor 官方網站 http://appinventor.mit.edu/ → Create apps! (繁體中文)
一、程序 Procedure
通常會將經常重複或具特定功能之程式碼編撰成獨立的小單元，稱為『程序』，當程式需使用時只要呼叫程序名稱即可執行程序內容。程序可分為無傳回值程序(一般程式稱為『副程式』)，及有傳回值的程序(一般程式稱為『函式』)。
(一)無傳回值程序 (副程式)
定義程序：程序於【內建方塊(Built-in)→程序(Procedure)】，一般無含參數，如下圖，若需要點選擴充項目將參數拖曳至輸入項中，即可加入多個參數。
呼叫無傳回值程序：當程序建立完成後，即可透過事件呼叫程序，以執行程序中的程式區塊。若程序中含參數，呼叫時亦可同時傳入參數值。
範例1：輸入正方形邊長，求其面積 (檔名：Procedure_Area_1.aia)。範例1.cpp
1.畫面編排(Designer)頁面：即版面配置。
2.程式設計(Blocks)頁面：
語系→English：
說明：只要將滑鼠移到參數名稱『x』上，會出現【get x】(取x)及【set x to】(設置x為 )方塊，即可拖曳該方塊使用此參數。
語系→繁體中文：
3.測試程式：以模擬器(emulator)測試執行，如右圖。
(二)有傳回值程序 (函式)
定義程序：方式與無傳回值相同，差異於有傳回值程序多一個『回傳』方塊，即程序的傳回值。如下：
呼叫有傳回值程序：方式與無傳回值相同，差異於呼叫有傳回值程序需要一個變數來接收程序的回傳值。
範例2：輸入三角形之底部長及高度長，求其面積，三角形面積=(底x高)/2，(Procedure_Area_2.aia)。範例2.cpp
1.畫面編排(Designer)頁面：即版面配置。
2.程式設計(Blocks)頁面：
語系→English：
語系→繁體中文：
3.測試程式：以模擬器(emulator)測試執行，如右圖。
二、清單List
『清單』就是一般程式語言中的『陣列』，為同類型的資料，清單中每一個資料相當於一個變數稱為『元素』，清單中的元素是依序儲存，若依據元素在清單中的位置編號(index)即可清楚的存取清單內容。一般程式語言中陣列編號從0開始，而『清單』之起始值為1 (如同 Scratch 線上版清單)。使用清單前需先宣告，如下：
(一)宣告建立清單
＊註：點選藍色的『擴充項目』圖示，即可增加清單項目。
或 宣告空清單：
(二)對於任意(清單項目) 迴圈
對於任意(清單項目)即循序取(清單項)迴圈 與 對於任意(數字)迴圈功能類似，對於任意(清單項目)迴圈是專為清單設計的迴圈，執行次數決定於清單內元素的個數，該迴圈會依序對清單中每一個元素執行一次程式區塊內容。
範例3：顯示一周星期中英文對照(List_Week.aia)。
1.畫面編排(Designer)頁面：即版面配置頁面。
Emulator 測試結果：
2.程式設計(Blocks)頁面：
語系→English：
語系→繁體中文：
(三)清單選擇器元件 ListPicker
ListPicker(清單選擇器)元件會以列表形式顯示清單內元素值，亦可讓使用者在列表中點選，元件會傳回使用者選取的元素值。
ListPicker(清單選擇器)元件屬於User Interface(使用者介面)元件類別中，該元件的常用屬性如下：
範例4：以ListPicker(清單選擇器)元件分別顯示一周星期中英文對照，及顯示使用者在列表中選取的元素值。(ListPicker_Week.aia)。
1.畫面編排(Designer)頁面：即版面配置頁面。
2.程式設計(Blocks)頁面：
語系→English：
語系→繁體中文：
3.測試程式：以模擬器(emulator)測試執行，如下圖。
選取： 以清單選擇器顯示
點選其中之元素
選中項之元素會顯示於下方
選取按鈕：打開選框。
顯示清單所有元素。
＊註：比較 Spinner下拉式選單：該元件在使用者介面類別中。
※資料項目間以逗號分隔
→選項清單
點選 下拉式選單 元件的項目後觸發本事件。
(四)物件清單
App Inventor 2 中各種元件即物件，而以物件做為清單元素者，即稱為物件清單。
設定物件清單元件屬性：
App Inventor 2 在程式設計(Blocks)→方塊區中，如下圖，任意元件(Any component)項目中建立了『任意元件種類』，以代表程式中所有指定清單元件。任意元件項目中之項目會顯示該元件所有之方法及屬性。如下：練習8 範例。
App Inventor 2 在程式設計(Blocks)→方塊區中，如下圖，任意元件(Any component)項目中建立了『任意元件種類』，以代表程式中所有指定清單元件。
任意元件項目中之項目會顯示該元件所有之方法及屬性。如下：練習8 範例。
練習8：電腦隨機猜拳→ 剪刀、石頭、布。【重點：學會程序、清單及物件清單的設計與應用】。(檔名：guess_8.aia)
1.畫面編排(Designer)頁面：即版面配置頁面，如下圖。
設定元件屬性：
2.程式設計(Blocks)頁面：
語系→繁體中文：
語系→English：
3.延伸思考
玩家與電腦玩猜拳遊戲。【重點：學會程序、清單、物件清單及判斷控制指令的設計與應用】。(檔名：guess_8_1.aia) 【提示：比較出拳】
