HTML5 Basic
5 likes4,600 views
本文件介绍了 HTML5 的基础知识，包括其历史、原则、测试环境、支持情况以及多媒体播放、绘图和表单相关功能的实现。文档详细阐述了 HTML5 的重要特性，如视频与音频元素的使用、Canvas 绘图技术以及表单控件的新类型。此外，还提到了地理位置获取的实现和相关错误处理。
HTML5 Basic
- 2. HTML5 Basic http://MobileDev.TW 大綱 1. 簡介 2. 原則 3. 測試環境 4. 支援現況 5. 影音播放 6. 繪圖 7. 表單相關 8. Geolocation 9. DragDrop 10. 離線網頁 11. Web Workers 2
- 3. HTML5 Basic http://MobileDev.TW 1. 簡介 HTML4.01 1999.12.24 XHTML1.0 2002.08.01 XHTML1.1 2008.07.29 XHTML2.0 ? W3C-XHTML2.0 WHATWG-Web Forms Applicaions HTML5 –由W3C與WHATWG共同制定(2006起) 3
- 5. HTML5 Basic http://MobileDev.TW 2.原則 1. 新的特色仍應以HTML,CSS,DOM,JavaScript為基礎 2. 減少外掛元件的需求(如Flash) 3. 增強錯誤處理能力 4. 透過標記語言來取代更多的Script 5. 語言與設備不相依 6. 公開制定進度 5
- 6. HTML5 Basic http://MobileDev.TW 3.測試環境 1. 主機＋虛擬機 • Firefox • Chrome • Opera • Safari • iOS Simulator • MAC + iOS SDK • Android Emulator • Android SDK • /tools/android指令開啓 2. 主機＋實機 • 無線網路 • 主機Web Server • iPhone實機 • iOS Safari • Android實機 • Android Browser 3. Editor • Aptana • Sublime Text 6
- 7. HTML5 Basic http://MobileDev.TW 4.支援現況 部分支援： ü Safari ü Chrome ü Firefox ü IE9 ü Opera http://caniuse.com/ http://en.wikipedia.org/wiki/Comparison_of_layout_engines_(HTML5) 7
- 9. HTML5 Basic http://MobileDev.TW 5-1.影片播放Video Element 9 除了Opera Mini、IE8之外，通通都支援了！
- 10. HTML5 Basic http://MobileDev.TW 5-1.影片格式支援-MP4/H.264 10 IE8、Opera/Opera Mini不行用
- 12. HTML5 Basic http://MobileDev.TW 5-1.影片格式支援-Ogg/Theora 12 Firefox、Chrome、Opera OK
- 13. HTML5 Basic http://MobileDev.TW 5-1.影片播放 語法： video src=movie.mp4 width=320 height=240 controls=controls 萬一不支援想顯示的訊息放這裡 /video Source也可以獨立多寫幾個,萬一User的Browser讀不出來，可以Load另 外一個 video width=320 height=240 controls=controls source src=movie.ogg type=video/ogg source src=movie.mp4 type=video/mp4 /video 13
- 14. HTML5 Basic http://MobileDev.TW 5-1.影片播放 video可以用的屬性： • autoplay：自動撥放 autoplay=autoplay • controls：顯示控制項 controls=controls • height, width：撥放器的寬高 • loop：影片要不要循環撥放 • preload：影片是否要在頁面載入時就下載，還是要 等按下Play再load • src：影片來源 14
- 16. HTML5 Basic http://MobileDev.TW 5-2.音樂播放Audio Element 16 除了IE8、Opera Mini，其他都ＯＫ！
- 17. HTML5 Basic http://MobileDev.TW 5-2.音樂播放支援格式 支援格式： 格式 IE9 Firefox3.6+ Opera10.5+ Chrome3.0+ Safari3.0 Ogg Vorbis X O O O X MP3 O X X O O Wav X O O O O 17
- 18. HTML5 Basic http://MobileDev.TW 5-2.音樂播放 語法： audio src=song.ogg controls=controls/audio Source也可以獨立多寫幾個,萬一User的Browser讀不出來， 可以Load另外一個 audio controls=controls source src=song.ogg type=audio/ogg source src=song.mp3 type=audio/mpeg /audio 18
- 19. HTML5 Basic http://MobileDev.TW 5-2.音樂播放 audio可以用的屬性： • autoplay：自動撥放 autoplay=autoplay • controls：顯示控制項 controls=controls • loop：音樂要不要循環撥放 • preload：音樂是否要在頁面載入時就下載，還是要等按 下Play再load • src：音樂來源 19
- 22. HTML5 Basic http://MobileDev.TW 5-3.用Javascript客製化控制項 • 拿掉HTML tag中的controls屬性 • 用id取得元件後，可用src屬性取得檔案路徑與名稱 • 在HTML中加入一顆按鈕，預設值為播放 • 按下播放按鈕時，判斷目前是否為暫停，是的話就呼叫 播放方法，並更新按鈕文字為暫停 • 用video.paused是否為真來判斷 • 播放方法：video.play() • 若不是暫停狀態，就呼叫暫停方法，並更新按鈕文字為 播放 • 暫停方法：video.pause() 22
- 24. HTML5 Basic http://MobileDev.TW 5-4.加上播放進度與音量控制項 • 在HTML中，增加進度與音量顯示區，以及兩顆按鈕(-/+) • 開始播放後，監聽timeupdate事件 • video.currentTime：目前播放進度 • video.duration：全長 • Math.floor()取向下整數 • 按下+按鈕 • 透過video.volume取得目前音量 (介於0~1) • 若音量已經為1，不動作 • 若音量大於0.9，設定為1 • 其他狀況，音量加0.1 • 按下-按鈕 • 若音量已經為0，不動作 • 若音量小於0.1，設定為0 • 其他狀況，音量減0.1 • 用toFixed(2)將數值輸出為小數點後有2位數 24
- 26. HTML5 Basic http://MobileDev.TW 6.繪圖 Canvas 使用JavaScript在網頁上畫圖 定義出一個矩形，然後控制裡面的每一個pixel 首先要先建立一個Canvas元件 canvas id=myCanvas width=200 height=100/canvas Canvas本身並沒有辦法畫圖，要透過JavaScript 26
- 28. HTML5 Basic http://MobileDev.TW 6-1.繪圖-矩形 !DOCTYPE HTML html head/head body canvas id=myCanvas width=200 height=100 style=border:1px solid #c3c3c3;/canvas script var c=document.getElementById(myCanvas); //使用id來找到Canvas元件 var cxt=c.getContext(2d); //2d是HTML5內建Object,有許多可使用的方法如畫路徑,箱子,圓圈,文字,影像等 cxt.fillStyle=#00FF00; //塗成綠色 cxt.fillRect(0,0,100,50); //在(0,0)~(100,50)畫一個矩形 從(0,0)延伸畫一個寬100高50的矩形 /script /body/html 28
- 29. HTML5 Basic http://MobileDev.TW 6-2.線與圓 6-2-1.畫線： 一樣要取得id並宣告為2d之後： cxt.moveTo(10,10); //先移動到(10,10) cxt.lineTo(150,50); //劃線到(150,50) cxt.lineTo(10,50); //再劃線到(10,50) cxt.stroke();//顯示 29 線的粗細可以用這個屬性來調： cxt.lineWidth=“5”;
- 31. HTML5 Basic http://MobileDev.TW 6-2.線與圓 6-2-2.畫圓圈： 一樣要取得id並宣告為2d之後： cxt.fillStyle=#FF0000; //畫紅色的圓 cxt.beginPath(); cxt.arc(70,18,15,0,Math.PI*2,true); cxt.closePath(); cxt.fill(); 1) 圓心座標X 2) 圓心座標Y 3) 半徑 4) 畫圓的起點 5) 畫圓的終點 6) 是否為逆時鐘方向 4,5：Math.PI/180*度數 31
- 33. HTML5 Basic http://MobileDev.TW 6-2.線與圓 6-2-2-2.Lab： 請畫出奧運圖形(藍、黑、紅、黃、綠) 33
- 34. HTML5 Basic http://MobileDev.TW 6-3.漸層 塗上漸層背景 var grd=cxt.createLinearGradient(0,0,175,50); //決定從哪一個點到哪一個點進行漸層 grd.addColorStop(0,#FF0000); grd.addColorStop(1,#0000FF); //產生由紅轉藍的漸層 cxt.fillStyle=grd; cxt.fillRect(0,0,175,50); 34
- 35. HTML5 Basic http://MobileDev.TW 6-4.放圖片 放圖片進去 var img=new Image(); img.src=picture.png; cxt.drawImage(img,0,0); //決定圖片從哪一個點開始放 cxt.drawImage(img,0,0,80,80); 前兩個參數決定開始放的點，後兩個參數可以縮放圖片大小， 後兩個可省略 cxt.drawImage(img,0,0,170,343,0,0,100,100); 前面四個參數決定要剪下圖片的哪一個部分，接著兩個參數決 定圖片從哪一個點開始放，最後兩個參數決定縮放 35
- 39. HTML5 Basic http://MobileDev.TW 1.email • 將input type設定為email • 送出表單前會先檢查是否為email格式 • iPhone上鍵盤會出現@ Firefox跳出警告 Chrome跳出警告 Opera跳出警告 39
- 40. HTML5 Basic http://MobileDev.TW 2.url • 將input type設定為url • 送出表單前會先檢查是否為網址格式 • iPhone上鍵盤會出現.com Firefox跳出警告 Chrome跳出警告 Opera跳出警告 40
- 41. HTML5 Basic http://MobileDev.TW 3.number • 將input type設定為number • 可限定最小值min, 最大值max, 每次增加step Chrome 旁邊出現小小的上下按鈕 Opera 旁邊出現小小的上下按鈕 但數字的大小沒顯示好 41
- 42. HTML5 Basic http://MobileDev.TW 4.range • 將input type設定為range • 可限定最小值min, 最大值max, 每次增加step Chrome 42 • Lab • 顯示range的值在range元件旁邊，會自動更新數值
- 43. HTML5 Basic http://MobileDev.TW 5.date picker • 將input type設定為date 43 Chrome • Lab • 取得使用者所選擇的日期
- 44. HTML5 Basic http://MobileDev.TW 6.color • 將input type設定為color 44 • Lab • 取得使用者所選擇的顏色 • 並設定為網頁背景顏色
- 45. HTML5 Basic http://MobileDev.TW 7.Progress Bar progress id=bar value=10 max=100 • 可設定最大值max, 目前值value Chrome 45
- 46. HTML5 Basic http://MobileDev.TW 7.Progress Bar 46 Lab 工作清單結合進度狀態顯示 提示 透過CheckBox的 checked屬性，判斷 是否為true，即可得 知該選項是否被勾選 了
- 47. HTML5 Basic http://MobileDev.TW 8.meter meter id=myMeter max=1500 min=0 value=500 low=150 high=1350/meter • 可設定最大值max, 最小值,目前值value • 過大的警戒臨界值high,過小的警戒臨界值low Chrome 47
- 48. HTML5 Basic http://MobileDev.TW 9.placeholder • 將input 增加placeholder屬性 48
- 50. HTML5 Basic http://MobileDev.TW 1.取得地理位置 1. 建立一顆按鈕，按下去之後開始動作 2. 確認是否有支援地理位置抓取 3. 呼叫取得地理位置的方法 • 設定成功取得位置後要做的事情 • 設定取得位置失敗要做的事情 navigator.geolocation.getCurrentPosition (successCallback, errorCallback); 50
- 51. HTML5 Basic http://MobileDev.TW 2.運用Google Map • 取得經度與緯度的值 • 組合出google map的連結 • https://maps.google.com.tw/ • ?q=latValue+,+lonValue 51
- 52. HTML5 Basic http://MobileDev.TW 2.運用Google Map 9-2-1.Lab 直接去Google Map 提示：改變目前視窗的網址 52
- 53. HTML5 Basic http://MobileDev.TW 3.不斷更新現在位置 • 改用navigator.geolocation.watchPosition • 可持續取得位置 • 不用時呼叫clearWatch • window.navigator.geolocation.clearWatch( watc hPositionObject ) 53
- 56. HTML5 Basic http://MobileDev.TW 拖拉翻譯器 • 準備一個純文字檔 • 在網頁中規劃一個div與一個textarea • 拖放的4個事件 • dragenter：拖進該區域 • dragleave：拖離該區域 • dragover：停留在該區域 • drop：放下 56
- 57. HTML5 Basic http://MobileDev.TW 拖拉翻譯器 1. 頁面載入時，即觀察這4個事件 2. 拖進該區域時，區域變成紅色，並顯示Drop it! 3. 拖離該區域時，恢復為藍色，文字為Come here. 4. 拖放於該區域時，取得該檔案，進行轉換 5. 確認該檔案為文字檔 6. 讀出內容，進行翻譯 7. 翻譯完後，顯示於textarea 57
- 60. HTML5 Basic http://MobileDev.TW Web App最害怕…..Offline 可連線時，將網 頁儲存一份於快 取中，離線時， 就讀取這一份快 取的檔案 60
- 61. HTML5 Basic http://MobileDev.TW Web Server 設定步驟 • 在Web Server上設置.htaccess，加上這一行： • AddType text/cache-manifest .manifest • 將Apache上的httpd.conf，修改： Directory / Options FollowSymLinks AllowOverride All /Directory 61
- 62. HTML5 Basic http://MobileDev.TW 網頁設定步驟 • 建立一個 off-line.manifest檔案 CACHE MANIFEST # Version:1.0 off-linePage.html off-lineJS.js • off-linePage.html • 修改HTML tag為html manifest=off-line.manifest 62
- 63. HTML5 Basic http://MobileDev.TW 如何更新快取 • 直接更新manifest檔案 • 用JavaScript applicationCache.update() • 可監聽以下事件瞭解現況 • checking：正在檢查更新或準備第一次下載manifest • noupdate：manifest沒有變動時 • downloading：正在下載manifest列出的檔案時 • progress：相關檔案都下載好時 • updateready：更新快取完畢，準備替換成最新的快取之前 63
- 64. HTML5 Basic http://MobileDev.TW 11.WEB WORKERS 64
- 65. HTML5 Basic http://MobileDev.TW Web Worker • 多執行緒進行運算 • 無法共享主執行緒變數 • 無法直接變更window • 無法直接變更document • 傳送訊息回主執行緒 Main Thread New Thread make new thread passing messagespassing messages 65
- 66. HTML5 Basic http://MobileDev.TW Web Worker • 避免瀏覽器當掉，停住於某一個龐雜的計算script • 使用Web Worker來計算2~1000000是否為質數 • 建立一個新的Web Worker來跑一隻JavaScript • 該檔案計算2~1000000是否為質數 • 過程中需將進度回傳給主執行緒 • 最後將結果也送回主執行緒 66
- 67. HTML5 Basic http://MobileDev.TW Web Worker • 建立新執行緒 • 從新執行緒傳遞資料給主執行緒 • 主執行緒接收新執行緒的訊息 67