運算思維入門
第三課:條件判斷
範例2: 門票產生器
![](https://s3.amazonaws.com/media-p.slid.es/uploads/402845/images/9560827/pasted-from-clipboard.png)
- 選擇日期、年齡後決定基本票價
- 全票: 100, 半票: 50
- 12歲(含)以下半票
- 如有輸入優惠碼,則視情況打折扣
- 優惠碼: "週年歡慶", 全員半票
經營策略1
範例2: 門票產生器
![](https://s3.amazonaws.com/media-p.slid.es/uploads/402845/images/9560827/pasted-from-clipboard.png)
- 選擇日期、年齡後決定基本票價
- 全票: 100, 半票: 50
- 12歲(含)以下半票
- 週一~週五: 再打9折
- 假日不打折
- 如有輸入優惠碼,則再打折扣
- 優惠碼: "復興有喜", 打8折
經營策略2
![](https://s3.amazonaws.com/media-p.slid.es/uploads/402845/images/9544536/pasted-from-clipboard.png)
新建專案,設定專案名稱, 如TicketGenerator
TicketGenerator
從「使用者介面」、「介面配置」拖曳組建,如圖
![](https://s3.amazonaws.com/media-p.slid.es/uploads/402845/images/9560846/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/402845/images/9560848/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/402845/images/9560849/pasted-from-clipboard.png)
為組件改名,如圖右,組件名稱將用於程式設計
![](https://s3.amazonaws.com/media-p.slid.es/uploads/402845/images/9560858/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/402845/images/9560848/pasted-from-clipboard.png)
❶
最終結果
❷
❸
![](https://s3.amazonaws.com/media-p.slid.es/uploads/402845/images/9560849/pasted-from-clipboard.png)
❹
❺
為組件改名,如圖右,組件名稱將用於程式設計
![](https://s3.amazonaws.com/media-p.slid.es/uploads/402845/images/9560858/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/402845/images/9560827/pasted-from-clipboard.png)
標籤的屬性設定如下(1/2)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/402845/images/9560878/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/402845/images/9560879/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/402845/images/9560881/pasted-from-clipboard.png)
標籤的屬性設定如下(2/2)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/402845/images/9560883/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/402845/images/9560888/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/402845/images/9560890/pasted-from-clipboard.png)
水平配置、垂直配置(1/2)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/402845/images/9560902/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/402845/images/9560827/pasted-from-clipboard.png)
100像素
![](https://s3.amazonaws.com/media-p.slid.es/uploads/402845/images/9560904/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/402845/images/9560910/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/402845/images/9560914/pasted-from-clipboard.png)
水平配置、垂直配置(2/2)
垂直配置2
![](https://s3.amazonaws.com/media-p.slid.es/uploads/402845/images/9560918/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/402845/images/9560827/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/402845/images/9560925/pasted-from-clipboard.png)
60像素
100像素
按鈕、圖片
![](https://s3.amazonaws.com/media-p.slid.es/uploads/402845/images/9560827/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/402845/images/9560930/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/402845/images/9560934/pasted-from-clipboard.png)
60像素
![](https://s3.amazonaws.com/media-p.slid.es/uploads/402845/images/9560936/pasted-from-clipboard.png)
選單、文字輸入盒
![](https://s3.amazonaws.com/media-p.slid.es/uploads/402845/images/9560939/pasted-from-clipboard.png)
下拉選單的選項
![](https://s3.amazonaws.com/media-p.slid.es/uploads/402845/images/9560944/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/402845/images/9560946/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/402845/images/9560948/pasted-from-clipboard.png)
程式設計階段
![](https://s3.amazonaws.com/media-p.slid.es/uploads/402845/images/9560827/pasted-from-clipboard.png)
日期、年齡、優惠碼、票面內容
1. 必須記憶
2. 隱藏版
列印票面內容時的「票價」
下拉選單的內容
![](https://s3.amazonaws.com/media-p.slid.es/uploads/402845/images/9561566/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/402845/images/9561570/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/402845/images/9561571/pasted-from-clipboard.png)
「變數」用於記憶,以便後續計算與使用。此處,需要多少變數?(1/4)
「變數」用於記憶,以便後續計算與使用。此處,需要多少變數?(2/4)
日期、年齡、優惠碼、票面內容
1. 必須記憶
2. 隱藏版
列印票面內容時的「票價」
![](https://s3.amazonaws.com/media-p.slid.es/uploads/402845/images/9561554/pasted-from-clipboard.png)
「變數」用於記憶,以便後續計算與使用。此處,需要多少變數?(3/4)
2. 隱藏版
![](https://s3.amazonaws.com/media-p.slid.es/uploads/402845/images/9561554/pasted-from-clipboard.png)
下拉選單的內容
清單(藍色): 可一次存放許多同樣類型的資料
年齡空清單? 數值太多,改用程式產生
「變數」用於記憶,以便後續計算與使用。此處,需要多少變數?(4/4)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/402845/images/9561554/pasted-from-clipboard.png)
清單(藍色): 可一次存放許多同樣類型的資料
年齡空清單? 數值太多,改用程式產生
迴圈
AI2是「事件驅動」,哪些事件應該處理?(1/3)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/402845/images/9561554/pasted-from-clipboard.png)
Screen1初始化:App啟動之後,最先發生的事件
在這裡把所有準備工作做好
年齡清單
![](https://s3.amazonaws.com/media-p.slid.es/uploads/402845/images/9560827/pasted-from-clipboard.png)
AI2是「事件驅動」,哪些事件應該處理?(2/3)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/402845/images/9561554/pasted-from-clipboard.png)
「選擇完成」事件:下拉選單改變選項時,會產生此事件
![](https://s3.amazonaws.com/media-p.slid.es/uploads/402845/images/9561570/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/402845/images/9561571/pasted-from-clipboard.png)
將所選中的數值,放回「年齡」變數
將所選中的字串,放回「日期」變數
AI2是「事件驅動」,哪些事件應該處理?(3/3)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/402845/images/9561554/pasted-from-clipboard.png)
按鈕「被點選」事件
有優惠碼
沒有優惠碼
小於等於12歲
不是小於等於12歲
印出片面內容
製作內容
'\n': 換行
顯示內容
變數(variables) 用來暫時儲存資料...
目的: 暫存資料,供後續使用
- 想像成「有名字」的夾鏈袋
- 只能放一張寫了字的便條紙(變數值)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/402845/images/9545111/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/402845/images/9545112/pasted-from-clipboard.png)
參考來源: code.org CSP '21-22 Unit 4 - Variables, Conditionals, and Functions
變數名稱
變數值有「資料型別」: 數字、字串(以不同顏色代表)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/402845/images/9582204/pasted-from-clipboard.png)
判斷條件時產生兩個結果: true, false...
如有需要,也可以用變數儲存
- 「布林值」(boolean)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/402845/images/9582224/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/402845/images/9582212/pasted-from-clipboard.png)
goToMovie
條件判斷的流程
參考來源: code.org CSP '21-22 Unit 4 - Variables, Conditionals, and Functions
![](https://s3.amazonaws.com/media-p.slid.es/uploads/402845/images/9582228/pasted-from-clipboard.png)
「布林值」拼圖是在「邏輯」區內
![](https://s3.amazonaws.com/media-p.slid.es/uploads/402845/images/9582212/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/402845/images/9582212/pasted-from-clipboard.png)
布林值
運算用拼圖
![](https://s3.amazonaws.com/media-p.slid.es/uploads/402845/images/9582238/pasted-from-clipboard.png)
數學模塊也有一個布林運算拼圖
參考來源: code.org CSP '21-22 Unit 4 - Variables, Conditionals, and Functions
布林運算經常用於數字比較...
![](https://s3.amazonaws.com/media-p.slid.es/uploads/402845/images/9582233/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/402845/images/9582212/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/402845/images/9582238/pasted-from-clipboard.png)
數字比較要用「數學」模塊的拼圖
參考來源: code.org CSP '21-22 Unit 4 - Variables, Conditionals, and Functions
布林運算經常用於數字比較...
![](https://s3.amazonaws.com/media-p.slid.es/uploads/402845/images/9582241/pasted-from-clipboard.png)
如果有運算式子,要先算出結果
![](https://s3.amazonaws.com/media-p.slid.es/uploads/402845/images/9582212/pasted-from-clipboard.png)
參考來源: code.org CSP '21-22 Unit 4 - Variables, Conditionals, and Functions
小試身手,請算出下列式子的答案
![](https://s3.amazonaws.com/media-p.slid.es/uploads/402845/images/9582246/pasted-from-clipboard.png)
參考來源: code.org CSP '21-22 Unit 4 - Variables, Conditionals, and Functions
小試身手,請算出下列式子的答案
![](https://s3.amazonaws.com/media-p.slid.es/uploads/402845/images/9582247/pasted-from-clipboard.png)
參考來源: code.org CSP '21-22 Unit 4 - Variables, Conditionals, and Functions
比較的過程,經常遇到變數...
![](https://s3.amazonaws.com/media-p.slid.es/uploads/402845/images/9582250/pasted-from-clipboard.png)
參考來源: code.org CSP '21-22 Unit 4 - Variables, Conditionals, and Functions
比較的過程,經常遇到變數...
![](https://s3.amazonaws.com/media-p.slid.es/uploads/402845/images/9582251/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/402845/images/9561554/pasted-from-clipboard.png)
參考來源: code.org CSP '21-22 Unit 4 - Variables, Conditionals, and Functions
比較的過程,經常遇到變數...
![](https://s3.amazonaws.com/media-p.slid.es/uploads/402845/images/9582253/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/402845/images/9582212/pasted-from-clipboard.png)
真正決策的情境,搭配「如果」拼圖...
![](https://s3.amazonaws.com/media-p.slid.es/uploads/402845/images/9582254/pasted-from-clipboard.png)
三種類型的「如果」拼圖
成立的清況
條件判斷拼圖
成立的清況
不成立的清況
條件判斷拼圖
成立的清況
繼續縮小條件判斷
縮小條件成立的清況
縮小條件不成立的清況
一種流程
二種流程
三種以上流程
![](https://s3.amazonaws.com/media-p.slid.es/uploads/402845/images/9561554/pasted-from-clipboard.png)
全部程式碼
第三課:條件判斷
By Leuo-Hong Wang
第三課:條件判斷
- 327