App inventor 教學講義 chapter2

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 屬性為空值。

HorizantalArrahgement2 的設定此元件的 Width(寬度)為 Fill_
parent。
Components 裡的 Label2 設定此元件的 Text 為『體重(公分)』。
中 Components 裡的 TextBox2 將此元件名稱改為 txtWeight。並修
改此元件的 Properties 框架裡的 Text 屬性為空值。
7. 選擇畫面左邊的 User Interface(使用者介面)下的 Button。將此元件放
到 txtWeight 的下方，然後點選畫面中 Components 裡的 Button1 將
此元件名稱改為 btnSend。並修改此元件的 Properties 框架裡的 Text
屬性為『”計算 BMI”』。
HorizantalArrahgement3 並修改此元件的 Properties 框架裡的
Width(寬度)為 Fill_ parent。
Components 裡的 Label3 設定此元件 Properties 框架裡的 Text 為『指
數』。
中 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

App inventor 教學講義 chapter2

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Viewers also liked

Viewers also liked (6)

Similar to App inventor 教學講義 chapter2

Similar to App inventor 教學講義 chapter2 (12)

App inventor 教學講義 chapter2