1. HTML5 Samples http://MobileDev.TW
HTML5Samples
Ryan@MobileDev.TW
1

2. HTML5 Samples http://MobileDev.TW
HTML5 Samples
1. 輕便型位置記錄器
• 使用者端儲存+地理位置偵測+字串切割與合併
2. Canvas小畫家
• Canvas繪圖+觸碰事件
3. 拼圖
• Canvas加入圖片+觸控事件+陣列儲存
2

3. HTML5 Samples http://MobileDev.TW
1.輕便型位置記錄器
• 使用者可以輸入目前位置的名稱，記錄下目前位置
• 將記錄的位置清單列在網頁下方
3

4. HTML5 Samples http://MobileDev.TW
使用者端資料儲存
4

5. HTML5 Samples http://MobileDev.TW
A.localStorage
HTML5提供兩種方式進行離線儲存：
localStorage : 資料存放無時間限制
一、存放資料
script type=text/javascript
localStorage.lastname=Smith;
document.write(Last name: + localStorage.lastname);
/script
二、記錄到訪次數
script type=text/javascript
if (localStorage.pagecount)
{localStorage.pagecount=Number(localStorage.pagecount) +1;}
else
{localStorage.pagecount=1;}
document.write(Visits: + localStorage.pagecount + time(s).);
/script
5

6. HTML5 Samples http://MobileDev.TW
B.sessionStorage
sessionStorage : 將資料存在一個session,當使用者關閉瀏覽器時資料即消失
一、存放資料
script type=text/javascript
sessionStorage.lastname=Smith;
document.write(sessionStorage.lastname);
/script
二、計算訪客次數
script type=text/javascript
if (sessionStorage.pagecount)
{sessionStorage.pagecount=Number(sessionStorage.pagecount) +1;}
else
{sessionStorage.pagecount=1;}
document.write(Visits + sessionStorage.pagecount + time(s) this
session.);
/script
6

7. HTML5 Samples http://MobileDev.TW
1.輕便型位置記錄器
1. 列出使用者曾記錄過的位置
2. 使用者可輸入目前位置名稱
3. 按下送出後，會產生連結至目前地圖位置的超連結
4. 清單也會即時更新，加入最新連結
5. 下次開啓時，這些連結都會出現
7

8. HTML5 Samples http://MobileDev.TW
1.輕便型位置記錄器
1. 網頁載入時
• 取出local storage裡頭的資料
• 將資料依換行符號進行切割，然後放入陣列
• 將陣列中的每一個項目以清單方式顯示於頁面上
2. 使用者輸入完店名並按下送出按鈕時
• 確認使用者是否有輸入店名
• 取得目前的經緯度
• 經緯度連同使用者輸入的店名作成字串
• 將字串放入陣列中
• 將陣列的每個值以換行符號隔開，組合成一個字串
• 將字串存入local storage
• 再次呼叫1.所呼叫的函數
8

9. HTML5 Samples http://MobileDev.TW
1.Lab 喝水記錄器
9

10. HTML5 Samples http://MobileDev.TW
2.Canvas小畫家
• 點選標題可變換顏色
• 按一下畫一點
• 拖曳則畫一條線
• 按下Clear按鈕則清除畫面
10

11. HTML5 Samples http://MobileDev.TW
電腦與手機互動事件的差異
• onmousedown
• 電腦：按下滑鼠左鍵時
• 手機：手指觸碰螢幕時
• onmousemove
• 電腦：移動滑鼠時
• 手機：無
• onmouseup
• 電腦：放開滑鼠左鍵時
• 手機：手指離開螢幕時
11
• 手機專屬互動事件
• ontouchstart
• 手指觸碰螢幕時
• ontouchmove
• 觸碰螢幕並移動時
• ontouchend
• 手指離開螢幕時

12. HTML5 Samples http://MobileDev.TW
滑鼠事件
• 當滑鼠在頁面上
• 移動
• 點擊
• 顯示絕對座標與相對座標
• 顯示元件名稱
12

13. HTML5 Samples http://MobileDev.TW
滑鼠事件
• 撰寫一頁面有h1、textarea
• 頁面載入時，設定以下事件
• onmousedown
• onmousemove
• onmouseup
• 事件觸發函式
• 秀出目前的相對座標與絕對座標
• (event.offsetX, event.offsetY) (event.clientX, event.clientY)
• 秀出目前停留的物件名稱
• event.target.nodeName
13

14. HTML5 Samples http://MobileDev.TW
觸碰事件
• 當手指在頁面上
• 移動
• 點擊
• 顯示座標
• 顯示事件名稱
14

15. HTML5 Samples http://MobileDev.TW
觸碰事件
• 撰寫一頁面有一div
• 頁面載入時，設定以下事件於div上
• ontouchstart
• ontouchmove
• ontouchdown
• 事件觸發函式
• 秀出目前觸發的事件名稱
• event.type
• 秀出目前的座標
• (event.touches[i].pageX, event.touches[i].pageY)
15

16. HTML5 Samples http://MobileDev.TW
2.Canvas小畫家
• 網頁上方一個div作為標題
• 中間一個canvas、下方一個按鈕
• 網頁一載入，設定
• canvas基本屬性、畫筆顏色寬度
• 設定canvas的ontouchstart、ontouchmove
、ontouchend事件觸發的函數
• 設定標題的onclick事件(換畫筆顏色)
• 全域變數oldX,oldY存放前一個位置，將現在位置與
前一個位置連線
16

17. HTML5 Samples http://MobileDev.TW
2.Lab 調整畫筆粗細
• 加入下拉式選單
• 決定選項後直接設定畫筆粗細
17

18. HTML5 Samples http://MobileDev.TW
3.拼圖
• 將一張圖片切割成數塊打亂
• 拿走最後一塊拼圖
• 使用者可移動拼圖組回原貌
18

19. HTML5 Samples http://MobileDev.TW
程式流程
1. 在網頁上顯示原圖片，然後切割打亂
2. 顯示打亂的圖片並且把最後一塊拼圖拿走
3. 當使用者觸控時，判斷上下左右是否為空格
• 若為空格則交換兩張拼圖
19

20. HTML5 Samples http://MobileDev.TW
編號與座標的對應
20
0
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
(0,0) (80,0) (160,0) (240,0)
(0,80)
(0,160)
(0,240)
(80,80)
(80,160)
(80,240)
(160,80)
(160,160)
(160,240)
(240,80)
(240,160)
(240,240)

21. HTML5 Samples http://MobileDev.TW
轉換
• 從編號轉換為座標
• 編號為no
• x=no%4*80
• y=((no/4)的向下整數)*80
• 從座標轉換為編號
• 座標為(x,y)
• no=x/80+y/80*4
21

22. HTML5 Samples http://MobileDev.TW
轉換二
• 將使用者觸控到的位置轉換成第no塊
• 觸控到的位置為(x,y)
• no=((x/80)的向下整數)+(((y-20)/80)的向下整數)*4
• 相鄰方塊的編號
• 上方 no_up= ((x/80)的向下整數)+(((y-20)/80)的向下整數-1)*4
• 下方 no_down=((x/80)的向下整數)+(((y-20)/80)的向下整數+1)*4
• 左方 no_left=((x/80)的向下整數-1)+(((y-20)/80)的向下整數)*4
• 右方 no_right=((x/80)的向下整數+1)+(((y-20)/80)的向下整數)*4
22

23. HTML5 Samples http://MobileDev.TW
5.Lab
• 點到什麼位置
• 點到哪一張牌
• 要做什麼處理？
• 不動
• 移動
• 成功的判斷
23