運算思維入門
第四課：清單(List)
範例3: 智慧型穿搭
選購畫面。按左右箭頭，可分別選擇上衣、褲子；點擊「購物車」，切換至確認畫面
確認畫面。確認購買後，前往結帳畫面；取消回選購畫面
結帳畫面。可繼續購買 或 結束程式。
新建專案，設定專案名稱, 如SmartOutfitter
SmartOutfitter
從「使用者介面」、「介面配置」拖曳組建，如圖(1/3)
螢幕Screen1: 選購畫面
從「使用者介面」、「介面配置」拖曳組建，如圖(2/3)
螢幕Order: 確認購買畫面
改名
從「使用者介面」、「介面配置」拖曳組建，如圖(3/3)
NextStep: 確認購買畫面
改名
為組件改名，如圖右，組件名稱將用於程式設計(1/3)
注意「畫面」與「組件列表」各組件的對應關係是否正確
為組件改名，如圖右，組件名稱將用於程式設計(2/3)
為組件改名，如圖右，組件名稱將用於程式設計(3/3)
Screen1 各組件的屬性設定如下(1/3)
Screen1 各組件的屬性設定如下(2/3)
上衣_向右按鈕
right.png
褲子_向左按鈕
褲子_向右按鈕
right.png
Screen1 各組件的屬性設定如下(3/3)
Order畫面 各組件的屬性設定如下(1/3)
Order畫面 各組件的屬性設定如下(2/3)
Order畫面 各組件的屬性設定如下(3/3)
填滿...
填滿...
NextStep畫面 各組件的屬性設定如下(1/3)
NextStep畫面 各組件的屬性設定如下(2/3)
20比例
20比例...
NextStep畫面 各組件的屬性設定如下(3/3)
程式設計階段
「變數」用於記憶，以便後續計算與使用。此處，需要多少變數？(1/4)
1. 必須記憶
選取的上衣(編號)
選取的褲子(編號)
2. Optional
上衣清單
褲子清單
3. 畫面之間溝通用！
上衣、褲子選取編號(傳送)
選取編號(接收)
傳送編號
接收編號
(上衣3,褲子2) ➔ (上衣3,褲子2)
(3, 2) ➔ (3, 2)
「變數」用於記憶，以便後續計算與使用。此處，需要多少變數？(2/4)
1. 必須記憶
選取的上衣(編號)
選取的褲子(編號)
2. Optional
上衣清單
褲子清單
先建立空清單，再以程式載入所有清單項目
什麼是清單(List)
歡迎詞
年齡
變數用來儲存「字串」、「數字」資料；每個變數都有自己的名字。
萬一，要儲存資料很多，怎麼辦？
圖片來源: code.org
清單是一般變數的「變形」
年齡
圖片來源: code.org
當需要儲存「一個」年齡數值時，使用一般變數
清單是一般變數的「變形」
年齡
圖片來源: code.org
當需要儲存「很多」年齡數值時，改用「清單」
還是只有一個名稱
但是多了很多附屬的「元素」
每個「元素」有不一樣的編號
每個清單元素都有不同的「索引值」
年齡
圖片來源: code.org
同樣的清單名稱+不同索引值 ➔ 不同變數
還是只有一個名稱
元素
索引值
索引值
索引值
元素
元素
索引值是往上遞增的數字，從1開始算起！
目前清單長度=3
可繼續增加
1
2
3
清單的使用方式: 首先必須建立清單
建立時，內容可有可無，後續可增加
清單的使用方式: 增加清單項目
圖片來源: code.org
上衣清單
1
2
3
"shirt01.png"
"shirt02.png"
"shirt03.png"
指定清單名稱
設定項目內容
清單的使用方式: 取得某個項目
圖片來源: code.org
上衣清單
1
2
3
"shirt01.png"
"shirt02.png"
"shirt03.png"
指定清單名稱
設定項目內容
若「上衣索引值」是2，則複製出...
"shirt02.png"
清單的使用方式總結
圖片來源: code.org
取得項目內容
圖片來源: code.org
年齡
清單長度=2
1
2
3
增加項目
建立
改變項目內容
刪除項目
20
30
「變數」用於記憶，以便後續計算與使用。此處，需要多少變數？(3/4)
在初始化時建立清單內容
「變數」用於記憶，以便後續計算與使用。此處，需要多少變數？(4/4)
3. 畫面之間溝通用！
上衣、褲子選取編號(傳送) 選取編號(接收)
傳送編號
Screen 1
Order
接收編號
程式運作邏輯
按左右箭頭，可分別選擇上衣、褲子
最先開始的事件：Screen 1 初始化(1/4)
全域變數
上衣清單
褲子清單
設定圖像
Screen1畫面
Screen 1 上衣向左、向右按鈕(2/4)
Screen1畫面
索引值>1 嗎？
是
索引值=5
否
是
索引值-1
索引值<5 嗎？
是
索引值=1
否
是
索引值+1
Screen 1 褲子向左、向右按鈕(3/4)
Screen1畫面
索引值>1 嗎？
是
索引值=5
否
是
索引值-1
索引值<5 嗎？
是
索引值=1
否
是
索引值+1
Screen 1 褲子向左、向右按鈕(4/4)
Screen1畫面
傳送編號
建立清單內容
Order畫面 全部程式碼
Order畫面
接收參數
根據參數設定圖片
取消：回前畫面
確認：下一畫面
NextStep畫面 全部程式碼
NextStep畫面
繼續購買：回Screen1
結束程式
第四課：清單
By Leuo-Hong Wang
