Embed Size (px)
DESCRIPTION
介紹Appinventor2 的運算與判斷與相關範例 1.算數、關係運算與數學指令 2.關係、邏輯運算指令
Citation preview
App Inventor 教學講義2
吳為勇
Chapter 2
運算與判斷
任何一種程式語言都有它的特色，但是『變數、常數、數值運算與控制結構』永遠都是入門的第一步。即便是 App Inventor 這種圖形化的介面也不例外。這些設定都是在Ｂ locks 拼塊設計區。
宣告常數與變數
常數在建立時就指定其初始值，此值不能在程式中加以改變，例如『圓周率』。如果要可用在程式中所有的副程式或是事件就要設成全域變數，不然則設定成區域變數即可。此設定為畫面左方 Built in 的 Variables。
圖表 1 變數 Variables 指令區
拼塊說明：
initial global (name) to
本指令是用來宣告一個全域（global）變數，後面的欄位可自由使用各種資料形態。點擊 (name) 就可以更改這個全域變數的名稱。全域變數可用在程式中所有的副程式或是事件，也就是說本指令是獨立的。
您在程式執行時都可以自由修改全域變數值，且在程式的任何地方（包含副程式與事件）都可讀寫它。您可隨時修改本區域變數的值，任何參照到它的指令也會一併更新名稱。get
取得您已經宣告的變數值，請由下拉式選單來選擇您要的變數。set () to
修改您已經宣告的變數值，請由下拉式選單來選擇您要的變數，並在後方欄位填入您所要修改的新值。initialize local (name) to in
(do)
本指令可讓您新增一個只能用在某個
副程式中的變數，也就是區域（local）變數。這樣一來每次該副程式被呼叫時，其中的所有（區域）變數都會以相同的值被初始化（initialize）一次。您可隨時修改本區域變數的值，任何參照到它的指令也會一併更新名稱。initialize local (name) to in
(return)
同上，只是多了回傳值欄位。
範例：
Hello Worlld Part2：
使用元件: Button(按鈕), Label(標籤).
Step1:
開啟一個新的名為 HelloWorld2 之 Project 並仿照 Chapter1 的HelloWorld 範例用設計師設計放入一個 btnClick 與一個 lblHello 兩個元件。存檔後開啟 Blocks(拼塊設計師)。
圖表 2 HelloWorld2 畫面設計
Step2：開啟拼塊編輯器，先點選左側 Built in 裡的 Variable。選擇『initial global
(name) to』來設定一個『show_word』的全域變數。再點選左側 Built in
裡的 Text。設定一個字串為『大家好！』並將此字串與『show_word』的全域變數拼在一起。
Step3：點選左側 Built in 裡的 Screen 下的 btnClick 選擇 when Button1.Click 事件。再點選 Screen 下的 lblHello 選擇 set Label1.Text to 指令, 代表要設定 Label1 的文字。Step4：點選左側 Built in 裡的 Variable。選擇 get 下拉選擇到 global
show_word。並將其拖拉到 lblHello 中的缺口裡。
圖表 3 HelloWorld2 Blocks 設計
Step5：最後可以使用工具列上的 Connect(連結選單上的選項)。選擇
Emulator(模擬器)選項來啟動模擬器。就可以看到執行的結果。
圖表 4 HelloWorld2 執行結果
算數、關係運算與數學指令
舉凡＋－×÷＝≠等等運算指令都是位於 Blocks Editor 內的 Built in 裡的Math 中。
圖表 5 數學 Math 指令區
拼塊說明：
number
指定一個數字常數。以下六個指令位於同一選單中。=、!=、<、<=、>、>=
比較兩個指定數字的等於、不等於、小於、小於等於、大於與大於等於關係。如果滿足回傳 true，否則回傳false。
+
回傳兩個指定數字的和。−
回傳兩個指定數字的差。×
回傳兩個指定數字的積。/
回傳前者除以後者的商。例如，1 除以 3 為 0.3333。^
回傳 a 的 b 次方，例如 2 ^ 3 = 8
random integer
回傳一個介於指定數字之間的隨機整數，包含上限(to)與下限(from)。參
數由小到大或由大到小不會影響計算結果。random fraction
回傳一個介於 0 和 1 之間的隨機小數。
random set seed
產生可重複的隨機數序列。您可設定 seed 來產生相同序列的隨機數。這在測試會用到隨機數的程式中非常好用。
以下兩個指令位於同一選單中。min/max
回傳指定數字中最小/最大者。
sqrt
回傳指定數字的平方根。abs
回傳指定數字的絕對值。- (negate)
回傳指定數字的相反數。log
回傳指定數字的自然對數運算結果。exp
回傳 e (2.71828...)的指定次方運算結果。round
回傳指定數字四捨五入到整數位的運算結果。
ceiling
回傳指定數字無條件進位到整數位的運算結果。floor
回傳指定數字無條件捨去到整數位的運算結果。以下三個指令位於同一選單中。
modulo
當指定數字皆為正數時，Modulo(a,b)計算結果與remainder(a,b) 相同。一般公式如下：對所有 a 與 b而言，(floor(a/b)
× b) + modulo(a,b) = a。例如modulo(11, 5) 為 1；modulo(-11,
5) 為 4；modulo(11, -5) 為-4；modulo(-11, -5) 為-
1。Modulo(a,b) 永遠與 b 同號，但remainder(a,b) 則永遠與 a 同號。remainder
remainder(a, b)指令可回傳第一個數 a 除以第二個數 b 的餘數（remainder）。例如 For
example, remainder(11,5)為 1；remainder(-11, 5) 為-1；remainder(11, -5) 為 1；remainder(-11, -5) 為-1。quotient
quotient(a,b)指令回傳第一個數 a
除以第二個數 b 的商，但只取整數部分，小數點以後忽略不計。
以下六個指令位於同一選單中。sin、cos、tan、asin、acos、atan
回傳指定數字的正弦、餘弦、正切、反正弦、反餘弦與反正切函數值，單位：度。atan2
回傳 y/x 的反正切函數值。
以下兩個指令位於同一選單中。convert radians to degrees
將弧度轉換為角度。
convert degrees to radians
將角度轉換為弧度。format as decimal
將原數字轉換為指定位數之小數。指定小數位數不能為負數。若原小數位數過多則四捨五入，反之則補 0。is a number?
指定物件如果為數字，回傳 true，反之回傳 false。
範例：
求取 BMI 值
身體質量指數（Body Mass Index，縮寫為 BMI）。其計算公式如下：BMI = 體重 (kg) / 身高 (m2)
我們先設計一下畫面大概如下圖：
圖表 6 求取 BMI 畫面示意圖
使用元件: HorizontalArrangement(水平排列)、Label(標籤)、TextBox(文字方塊)、Button(按鈕)。Step1:
先建立一個 bmi-1 新專案。Step2:
開啓Disigner 設計師，依序加入以下元件。1. 選擇畫面左邊 Palette 下的 Layout 裡的
HorizantalArrahgement(水平排列)元件。然後點選畫面中Components 裡的 HorizantalArrahgement1 的設定此元件的Width(寬度)為 Fill_ parent。
2. 選擇畫面左邊的 User Interface(使用者介面)下的 Label，將此元件放到上一步驟設定的 HorizantalArrahgement1 裡去。然後點選畫
面中 Components 裡的 Label1 設定此元件的 Text 為『身高(公分)』。
3. 選擇畫面左邊的 User Interface(使用者介面)下的 TextBox。將此元件放到上一步驟設定的 HorizantalArrahgement1 裡去，然後點選畫面中 Components 裡的 TextBox1 將此元件名稱改為 txtHeight。並修改此元件的 Properties框架裡的 Text屬性為空值。
4. 選擇畫面左邊 Palette 下的 Layout 裡的HorizantalArrahgement(水平排列)元件。然後點選畫面中Components 裡的 HorizantalArrahgement2 的設定此元件的Width(寬度)為 Fill_ parent。
5. 選擇畫面左邊的 User Interface(使用者介面)下的 Label，將此元件放到上一步驟設定的 HorizantalArrahgement2 裡去。然後點選畫面中 Components 裡的 Label2 設定此元件的 Text 為『體重(公分)』。
6. 選擇畫面左邊的 User Interface(使用者介面)下的 TextBox。將此元件放到上一步驟設定的 HorizantalArrahgement2 裡去，然後點選畫面中 Components 裡的 TextBox2 將此元件名稱改為txtWeight。並修改此元件的 Properties框架裡的 Text屬性為空值。
7. 選擇畫面左邊的 User Interface(使用者介面)下的 Button。將此元件放到 txtWeight 的下方，然後點選畫面中 Components 裡的Button1 將此元件名稱改為 btnSend。並修改此元件的 Properties
框架裡的 Text屬性為『”計算 BMI”』。8. 選擇畫面左邊 Palette 下的 Layout 裡的
HorizantalArrahgement(水平排列)元件。然後點選畫面中Components 裡的 HorizantalArrahgement3 並修改此元件的Properties框架裡的 Width(寬度)為 Fill_ parent。
9. 選擇畫面左邊的 User Interface(使用者介面)下的 Label，將此元件放到上一步驟設定的 HorizantalArrahgement3 裡去。然後點選畫面中 Components 裡的 Label3 設定此元件 Properties框架裡的Text 為『指數』。
10. 選擇畫面左邊的 User Interface(使用者介面)下的 TextBox。將此元件放到上一步驟設定的 HorizantalArrahgement3 裡去，然後點選
畫面中 Components 裡的 TextBox3 將此元件名稱改為 txtBMI。並修改此元件的 Properties框架裡的 Text屬性為空值。到此就算完成元件的佈置。結果如下圖：
圖表 7 求取 BMI 元件佈置
Step3:
開啓Blocks Editor(拼塊編輯器)，依下列步驟將拼塊組合起來。1. 從畫面左邊Blocks 中 Screen1 裡的 btnSend。會出現下面的圖案，
選擇 when btnSend.Click 事件。2. 從畫面左邊Blocks 中 Screen1 裡的 txtBMI。選擇 set txtBMI.Text
to 指令, 代表要設定 txtBMI 的文字。然後拖拉到上一步驟所選的when btnSend.Click 事件中。
3. 從畫面左邊Blocks 中 Math 中選擇『/』除法指令放到 set
txtBMI.Text to 指令中，如下圖。
圖表 8 加入除法指令
4. 從畫面左邊Blocks 中 Screen1 裡的 txtWeight。選擇到txtWeight.text。將此拼塊拖拉放到除法指令的左邊欄位。如下圖：
圖表 9 將體重資訊拖拉到除法欄位之左邊欄位
5. 因為我們畫面上身高要求輸入的是公分，而BMI 的公式身高的單位是公尺的平方。我們必須要先將公分轉換成公尺。我們可以從畫面左邊Blocks 中 Math 中選擇『/』除法指令。先拖拉到畫面上。再從Blocks 的 Screen1 中點選『txtHeight』從中挑選到txtHeight.text 一樣將此元件拖拉畫面上。然後再從 Blocks 中Math 中選擇 number(常數設定)，將此 number 設定為 100 並拖拉到畫面上。最後將 txtHeight.text 與 number 拖拉放到除法指令的左右兩邊的欄位裡。如下圖所示：
圖表 10 身高轉換成公尺
6. 從畫面左邊Blocks 中 Math 中選擇『^』n 次方指令，拖拉到畫面上 。再從Math 中選擇選擇 number(常數設定)，將此 number 設定為2。表示為平方。將此 number 拖拉放到 n 次方指令的右邊欄位。將步驟 4 設定好的身高（公尺）拖拉放到 n 次方指令左邊的欄位裡。如下圖：
圖表 11 身高（公尺）的平方
7. 上一步驟設定好的身高資訊拼塊拖拉放到步驟三的除法指令的右邊欄位。這樣就算完成拼塊編輯了。完成圖如下：
圖表 12 BMI Blocks 拼塊編輯
8. 在模擬器上執行的結果：
圖表 13 求取 BMI 執行結果
關係、邏輯運算指令
關係運算就是數學裡的大於小於，是用來確認二個數字之間的關係，結果會產生 true/false 的布林值。邏輯運算通常是用來連結關係運算，就像英文的連接詞 and/or 連接兩個句子一般。它是針對關係運算後產生的布林值進行運算，邏輯運算常用 1 代表 true，0 代表 false。在 App Inventor2 裡與『關係』或是『邏輯』運算是位於 Blocks Editor 內的Built in 裡的 Logic 中。
圖表 14 Logic 指令區
true
布林常數的真（true）。用來設定元件的布林（boolean）屬性值，或用來表示某種狀況是否成立。
false
布林常數的假（false）。用來設定元
件的布林屬性值，或用來表示某種狀況是否不成立。
not
邏輯運算的 not。輸入 true 或條件判斷為 true 則回傳 false，反之回傳 true。
以下兩個指令位於同一選單中。= 與 != (不等於)
綜合性邏輯相等運算符。可判斷數字、字串與清單的相等或不相等。例如：
兩個數字是否相等（例如：1=1.0）。
兩個字串是否相等，包括大小寫。例如 banana 不等於 Banana。
若兩個清單的長度相同且對應元件相等則相等。
以下兩個指令位於同一選單中。and
測試是否所有的敘述皆為真。當您插入第一個 test 項目時會自動跑出第二個插槽。測試順序由上到下，測試過程中若任一條件已知為假則停止測試。若無任何敘述則回傳 true。
or
測試所有敘述中是否至少有一者為真。當您插入第一個 test 項目時會自動跑
出第二個插槽。測試順序由上到下，測試過程中若任一條件已知為真則停止測試。若無任何敘述則回傳 false。
條件選擇(Control 控制指令)
程式中的選擇 (selection) 就是依條件 (condition) 使程式有不同的執行方向，若條件為真，也就是 true ，程式就會跳過 false 的部份執行 true 的部份，反之亦然。這些選擇條件是在 Built In 裡的 Control 控制指令區中。
單向選擇 if (條件式)
{
成立敘述;
…
}
雙向選擇 if (條件式)
{
成立敘述;
}
else
{
不成立敘述;
}
多向選擇 if (條件式１)
{程式區１;}
else if (條件式２)
{程式區２;}
else if (條件式３)
{程式區３;}
else
{程式區 else;}
多向選擇 switch (表示式)
{
case value １:
程式區１;
break;
case value ２:
程式區２;
break;
...........
default:
程式區 default;
break;
}
if then、if 、if/else 與 if / else
if…
(單向,雙向與多向選擇)
測試指定條件 test。若為 true 則執行以下動作，反之則跳過此段。
請不要忽視左上角那個藍色小方塊，神
奇的地方在這裡，它整合了 if/else 與 if
/ else if…等功能。請如下圖操作即可自行製作各種判斷結構。
for each (number)
根據指定範圍之整數個數來決定 do 的執行次數，可自由設定每次累加的數字step。您可使用該變數名稱來取得它的值。for each (item) in list
根據指定清單的元素數目來決定 do 的執行次數。您可使用該變數名稱來取得它的值。while
測試指定敘述。若為 true 則重複執行
以下動作，反之則結束此段。if/else （呼叫型）
直接把 if / else 當作指令來呼叫。若為true 則執行 then 區塊內容，反之則則執行 else 區塊內容。do
您可以將本指令當作 procedures 的代替品，在 do 區塊中放入您所要執行的指令，還可以回傳一個 result。evaluate but ignore
您可以將本指令當作轉接頭來使用。把要執行的指令接在右邊，要呼叫副程式或是 if / else 都可以。您所要的內容都會執行，但回傳值會自動被忽略，這在某些情況下可能正好符合您的需求（有時候不一定允許回傳值）。open another screen
啟動另一個畫面，填入要啟動的畫面名稱即可。open another screen with
start value
啟動另一個畫面，填入要啟動的畫面名稱即可。您可藉由本指令將 A 畫面的某些計算結果傳給B 畫面。get start value
取得當現在畫面啟動時所接收到的value。close screen
關閉現在的畫面。close screen with value
關閉螢幕，並指定回傳結果 result。close application
結束程式。get plain start text
當現在畫面被啟動時，取得呼叫端所傳來的純文字內容。如果沒有值的話，本指令結果為空字串。如果您的 app 有多個畫面，請使用 get start value 指令而非本指令。close screen with plain text
關閉現在的畫面並傳送一個純文字內容給呼叫端。如果您的 app 有多個畫面，請使用 close screen with value
指令而非本指令。
範例
判斷 BMI 值
之前既然可以求出BMI 值，那我們在利用條件選擇的指令來將 BMI 的結果做個分類。分類標準如下：
體重過輕 BMI<18.5
健康體位 18.5<=BMI<24
體重過重 24<=BMI<27
輕度肥胖 27 <= BMI < 30
中度肥胖 30 <= BMI < 35
重度肥胖 BMI >= 35
圖表 15 BMI 分級標準
Step1:
開啟之前 bmi-1專案。將此專案另存成 bmi-2專案。
Step2:
在 Designer 設計師作業需要新增一個 Label 元件。由左側的 Basic 元件區選擇一個標籤 Label, 拖拉到 Viewer（開發設計區）中放到最下方。在Components(應用元件區)中選此 Label,按下下方 Rename 修改此元件名稱為 lblDesc。並在 Properties（元件屬性設定區）設定 TextColor(字體顏色)
為 Blue, 文字設為"" (無內容, 因為要另外指定內容), 寬度設為"Fill Parent".
其餘不變。結果如下圖：
圖表 16 加入分類說明 Label
Step3:
開啟 Blocks 拼塊編輯器。點選左側 Built in 裡的 Variable。選擇『initial global (name) to』來設定一個『bmi』的全域變數。再點選左側Built in 裡的 Math。設定一個 Number 為『0』並將此 Number 與『bmi』的全域變數拼在一起。如下圖：
圖表 17 設定一個全域變數 bmi
Step4:
從畫面左邊Blocks 中 Variables 裡選擇『set to』 指令,下拉設定為global bmi 。再從Blocks 中的 Screen1 點選 txtBMI.Text 並將此設定拖拉至『set global bmi to』右邊的框框內。這代表要將計算出來的 BMI
值設定給全域變數 global bmi。然後拖拉到上一步驟所選的 when
btnSend.Click 事件中。
圖表 18 設定分類說明欄位顯示全域變數 bmi
圖表 19 將分類說明欄位設定拖拉到 when btnSend.Click 事件中。
Step5:
1. 從畫面左邊Blocks 中 Control 點選 if 判斷式將其拖拉到 when
btnSend.Click 事件中。2. 從Blocks 中 Math 點選『<』將其拖拉到 if 指令上方的條件式欄位。3. 從 Blocks 裡的 Variable 點選『get』下拉選擇『global bmi』，將其
拖拉到『<』的左邊框框中。4. 從Blocks 中 Math 點選『Number』，將內容改為 18.5，並拖拉到
『<』的右邊框框內。5. 從 Blocks 裡的 Screen1 點選『set lblDesc.Text to』 拖拉放到 if 指
令中 then右邊的框框去。
6. 從 Blocks 裡的 Text 點選『””』空字串,內容填寫為『體重過輕』。並將此 TEXT 字串，拖拉放到『set lblDesc.Text to』指令右邊的框框裡去。
圖表 20 設定體重過輕條件
7. 再從畫面左邊Blocks 中 Control 點選 if 判斷式將其拖拉到 when
btnSend.Click 事件中。再前一個 if 指令之下。8. BMI分類的第二個條件是『18.5<=BMI<24』。這是兩個條件都要
滿足的意思。所以我們從Blocks 中 Logic 點選『and』條件式。將其拖拉到 if 指令上方的條件式欄位。
9. 『and』左邊的框框我們要放從Math 中點選的『≤』。在『≤』左邊的框框放入從 Blocks 裡的 Variable 點選『get』下拉選擇『global
bmi』的全域變數。『≤』右邊則是要放從Math 中選擇的Number。Number 內容輸入為 18。
10. 『and』右邊則是放從Math 中點選的『<』。在『<』左邊的框框放入從 Blocks 裡的 Variable 點選『get』下拉選擇『global bmi』的全域變數。『<』右邊則是要放從Math 中選擇的 Number。Number
內容輸入為 24。11. 從 Blocks 裡的 Screen1 點選『set lblDesc.Text to』 拖拉放到 if 指
令中 then右邊的框框去。12. 從 Blocks 裡的 Text 點選『””』空字串,內容填寫為『健康寶寶』。
並將此 TEXT 字串，拖拉放到『set lblDesc.Text to』指令右邊的框框裡去。
13. 以此法依序將剩下的分類條件都設定完成。結果如下圖。
圖表 21 以多個 if判斷式來處理不同的ＢＭＩ結果
14. 這樣就完成了這個 BMI_2 的 app 了，我們用模擬器來看一下執行的結果如下圖。
圖表 22 BMI_2 執行結果
參考資料與網址：
以上內容參考以下網站或是書籍內容：
1. Android手機程式超簡單 App Inventor 入門卷 出版社：馥林文化2. Google App Inventor 開發手冊：不會寫程式也能設計你的 APP 出版社：
上奇資訊3. http://appinventor.mit.edu
4. http://www.appinventor.tw/ai2_control
5. http://appmoocs.blogspot.tw
6. http://www.cg.com.tw/AppInventor/AppInventor.asp
