Upgrade to Pro — share decks privately, control downloads, hide ads and more …

HTML5 Basic

HTML5 Basic

Ryan Chung

May 02, 2014
Tweet

More Decks by Ryan Chung

Other Decks in Technology

Transcript

  1. HTML5 Basic http://MobileDev.TW 大綱 1. 簡介 2. 原則 3. 測試環境 4. 支援現況 5. 影音播放 6. 繪圖

    7. 離線儲存 8. 表單相關 9. Geolocation 10. Drag&Drop 11. 離線網頁 12. Web Workers 2
  2. 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
  3. 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 •  NotePad++ •  TextWrangler •  Aptana 6
  4. 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
  5. 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
  6. HTML5 Basic http://MobileDev.TW 5-1.影片播放 video可以用的屬性: •  autoplay:自動撥放 autoplay="autoplay" •  controls:顯示控制項

    controls="controls" •  height, width:撥放器的寬高 •  loop:影片要不要循環撥放 •  preload:影片是否要在頁面載入時就下載,還是要 等按下Play再load •  src:影片來源 14
  7. HTML5 Basic http://MobileDev.TW 5-2.音樂播放 audio可以用的屬性: •  autoplay:自動撥放 autoplay="autoplay" •  controls:顯示控制項

    controls="controls" •  loop:音樂要不要循環撥放 •  preload:音樂是否要在頁面載入時就下載,還是要等按 下Play再load •  src:音樂來源 19
  8. HTML5 Basic http://MobileDev.TW 5-3.用Javascript客製化控制項 •  拿掉HTML tag中的controls屬性 •  用id取得元件後,可用src屬性取得檔案路徑與名稱 • 

    在HTML中加入一顆按鈕,預設值為播放 •  按下播放按鈕時,判斷目前是否為暫停,是的話就呼叫 播放方法,並更新按鈕文字為暫停 •  用video.paused是否為真來判斷 •  播放方法:video.play() •  若不是暫停狀態,就呼叫暫停方法,並更新按鈕文字為 播放 •  暫停方法:video.pause() 22
  9. 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
  10. HTML5 Basic http://MobileDev.TW 6-1.繪圖-矩形 <!DOCTYPE HTML> <html><body> <canvas id="myCanvas" width="200"

    height="100" style="border:1px solid #c3c3c3;"></canvas> <script type="text/javascript"> 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
  11. 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”;
  12. 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
  13. 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
  14. HTML5 Basic http://MobileDev.TW 7-1.localStorage HTML5提供兩種方式進行離線儲存: localStorage : 資料存放無時間限制 7-1A:存放資料 <script

    type="text/javascript"> localStorage.lastname="Smith"; document.write("Last name: " + localStorage.lastname); </script> 7-1B:記錄到訪次數 <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> 39
  15. HTML5 Basic http://MobileDev.TW 7-2.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> 40
  16. HTML5 Basic http://MobileDev.TW 8-2.url •  將input type設定為url •  送出表單前會先檢查是否為網址格式 • 

    iPhone上鍵盤會出現.com Firefox跳出警告 Chrome跳出警告 Opera不會跳出 警告,但會幫 你加上http:// 43
  17. HTML5 Basic http://MobileDev.TW 8-3.number •  將input type設定為number •  可限定最小值min, 最大值max,

    每次增加step Chrome 旁邊出現小小的上下按鈕 Opera 旁邊出現小小的上下按鈕 但數字的大小沒顯示好 44
  18. HTML5 Basic http://MobileDev.TW 8-4.range •  將input type設定為range •  可限定最小值min, 最大值max,

    每次增加step Chrome 出現可愛的tuner (但是沒顯示數字!?) Opera也一樣 45
  19. HTML5 Basic http://MobileDev.TW 8-5.date picker •  將input type設定為date Safari 可按上下改變日期

    (要按到甚麼時候…) Opera 跳出日曆! 還可以選今天! 46
  20. HTML5 Basic http://MobileDev.TW 8-7.Progress Bar 49 8-7-1.Lab 工作清單結合進度狀態顯示 提示 透過CheckBox的

    checked屬性,判斷 是否為true,即可得 知該選項是否被勾選 了
  21. HTML5 Basic http://MobileDev.TW 8-8.meter <meter id="myMeter" max="1500" min="0" value="500" low="150"

    high="1350"></meter> •  可設定最大值max, 最小值,目前值value •  過大的警戒臨界值high,過小的警戒臨界值low Chrome Opera 50
  22. HTML5 Basic http://MobileDev.TW 9-1.取得地理位置 •  建立一顆按鈕,按下去之後開始動作 •  確認是否有支援地理位置抓取 •  呼叫取得地理位置的方法

    •  設定成功取得位置後要做的事情 •  設定取得位置失敗要做的事情 navigator.geolocation.getCurrentPosition(succes sCallback, errorCallback); 53
  23. HTML5 Basic http://MobileDev.TW 拖拉翻譯器 •  準備一個純文字檔 •  在網頁中規劃一個div與一個textarea •  拖放的4個事件

    •  dragenter:拖進該區域 •  dragleave:拖離該區域 •  dragover:停留在該區域 •  drop:放下 59
  24. HTML5 Basic http://MobileDev.TW 拖拉翻譯器 •  頁面載入時,即觀察這4個事件 •  拖進該區域時,區域變成紅色,並顯示Drop it! • 

    拖離該區域時,恢復為藍色,文字為Come here. •  拖放於該區域時,取得該檔案,進行轉換 •  確認該檔案為文字檔 •  讀出內容,進行翻譯 •  翻譯完後,顯示於textarea 60
  25. HTML5 Basic http://MobileDev.TW Web Server 設定步驟 •  在Web Server上設置.htaccess,加上這一行: • 

    AddType text/cache-manifest .manifest •  將Apache上的httpd.conf,修改: <Directory /> Options FollowSymLinks AllowOverride All </Directory> 64
  26. 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"> 65
  27. HTML5 Basic http://MobileDev.TW 如何更新快取 •  直接更新manifest檔案 •  用JavaScript applicationCache.update() • 

    可監聽以下事件瞭解現況 •  checking:正在檢查更新或準備第一次下載manifest •  noupdate:manifest沒有變動時 •  downloading:正在下載manifest列出的檔案時 •  progress:相關檔案都下載好時 •  updateready:更新快取完畢,準備替換成最新的快取之前 66
  28. HTML5 Basic http://MobileDev.TW Web Workers •  多執行緒進行運算 •  無法共享主執行緒變數 • 

    無法直接變更window •  無法直接變更document •  傳送訊息回主執行緒 Main Thread New Thread make new thread passing messages passing messages 68
  29. HTML5 Basic http://MobileDev.TW Web Workers •  避免瀏覽器當掉,停住於某一個龐雜的計算script •  使用Web Worker來計算2~1000000是否為質數

    •  建立一個新的Web Worker來跑一隻JavaScript •  該檔案計算2~1000000是否為質數 •  過程中需將進度回傳給主執行緒 •  最後將結果也送回主執行緒 69