HTML5 API

2. 15 HTML5 API • 15-1 偵測瀏覽器的HTML5支援 • 15-2 HTML5的音效與視訊 • 15-3 HTML5的繪圖 • 15-4 HTML5的客戶端儲存體 • 15-5 HTML5的定位服務 • 15-6 HTML5的離線應用程式

3. 15-1 偵測瀏覽器的HTML5支援 • 15-1-1 使用JavaScript程式碼偵測HTML5的支援 • 15-1-2 使用JavaScript函數庫偵測HTML5的支援

4. 15-1-1 使用JavaScript程式碼偵測HTML5的支援-說明 • 在客戶端可以使用JavaScript程式碼偵測HTML5的支援，即檢查指定物件是否存在、HTML5標籤是否允許建立、是否可以執行特定方法和指定特定屬性。

5. 15-1-1 使用JavaScript程式碼偵測HTML5的支援-判斷是否支援特定的HTML5 API • 對於HTML5 API來說，我們可以使用if/else條件加上存取HTML5 API物件的程式碼來判斷是否支援特定功能，例如：定位服務的geolocation物件，如下所示： if (navigator.geolocation) g.innerHTML = "支援"; else g.innerHTML = "不支援"; • if條件如果傳回存在，即true，表示支援此功能。

6. 15-1-1 使用JavaScript程式碼偵測HTML5的支援-判斷是否支援HTML5新增的標籤 • 對於HTML5新增的標籤，我們可以使用createElement()方法來建立標籤物件後，呼叫其支援的方法，如果成功，就表示支援此標籤，如下所示： if ( document.createElement('canvas'). getContext('2d') ) c.innerHTML = "支援"; else c.innerHTML = "不支援";

7. 15-1-1 使用JavaScript程式碼偵測HTML5的支援-判斷是否支援HTML5新增的屬性 • 如果是HTML5新增的屬性，例如：<input>標籤的type屬性，如下所示： var i = document.createElement("input"); i.setAttribute("type", "email"); if (i.type !== "text") $('#type').html("支援"); else $('#type').html("不支援");

8. 15-1-2 使用JavaScript函數庫偵測HTML5的支援-說明 • 除了使用JavaScript程式碼偵測HTML5的支援外，我們也可以使用一些網路上免費的JavaScript函數庫，最著名的是Modernizr，其官方網址為：http://www.modernizr.com。 • 我們只需從官方網站下載JavaScript函數庫的程式碼檔案，以本書為例的檔名是modernizr.custom.94825.js（也可以使用NuGet組件安裝），然後使用<script>標籤含括此JavaScript函數庫，如下所示： <script src="modernizr.custom.94825.js"></script>

9. 15-1-2 使用JavaScript函數庫偵測HTML5的支援-使用 • 使用Modernizr物件屬性判斷HTML5的支援，如下所示： if (Modernizr.geolocation) $('#geo').html("支援"); else $('#geo').html("不支援"); • if/else條件判斷是否支援HTML5的定位服務。判斷<input>標籤是否支援type屬性值email，如下所示： if (Modernizr.inputtypes.email) $('#type').html("支援"); else $('#type').html("不支援");

10. 15-2 HTML5的音效與視訊 • 15-2-1 <audio>與<video>標籤 • 15-2-2 控制音效的播放 • 15-2-3 控制視訊的播放

11. 15-2-1 <audio>與<video>標籤-<audio>標籤 • 在HTML5之前播放音效或視訊檔案並沒有標準，一般來說，瀏覽器需要安裝外掛程式才能播放音效或視訊檔案，而且，不同瀏覽器需要自行安裝不同的外掛程式，才能在網頁上播放音效或視訊檔案。 • HTML5的<audio>標籤可以讓瀏覽器原生播放音效檔案，支援3種音效格式：MP3、Wav和Ogg，如下所示： <audio src="Kalimba.mp3" controls></audio> • 標籤有controls屬性，可以顯示控制面板來播放src屬性值的音效檔案。

12. 15-2-1 <audio>與<video>標籤-<audio>標籤屬性

13. 15-2-1 <audio>與<video>標籤-<source>標籤 • 因為瀏覽器支援的音效格式不同，為了跨瀏覽器相容，我們可以使用<source>標籤提供<audio>和之後的<video>標籤有多種檔案格式來選擇，每一個<source>標籤指定一個檔案，可以讓瀏覽器依支援的格式選擇播放的檔案，如下所示： <audio controls="controls"> <source src=" Kalimba.ogg" type="audio/ogg" /> <source src=" Kalimba.mp3" type="audio/mpeg" /> <p>你的瀏覽器不支援HTML5的Audio元素</p>. </audio> • <audio>標籤擁有2個<source>子標籤，分別提供ogg和mp3格式的音效檔案，<p>標籤是當瀏覽器不支援時，顯示的訊息文字。

14. 15-2-1 <audio>與<video>標籤-<video>標籤 • HTML5的<video>標籤可以使用原生方式，在瀏覽器播放視訊檔案或串流，如下所示： <video controls autoplay poster="sample.jpg" width="320" height="240"> <source src="sample.ogv"/> <source src="sample.mp4"/> <source src="sample.webm"/> <p>很抱歉！您的瀏覽器不支援HTML5 Video.. <a href="sample.mp4">下載MP4視訊檔</a></p> </video> • <video>標籤如同<audio>標籤，可以使用<source>子標籤指定視訊檔案。

15. 15-2-1 <audio>與<video>標籤-<video>標籤屬性 • <audio>標籤支援的三種視訊格式檔案，即.mp4 = H.264 + AAC、.ogg/.ogv = Theora + Vorbis和.webm = VP8 + Vorbis。 • <video>標籤除了支援之前<audio>標籤的屬性外，專屬屬性的說明，如下表所示：

16. 15-2-1 <audio>與<video>標籤-瀏覽器支援的視訊和音效檔案格式

17. 15-2-1 <audio>與<video>標籤-範例 • 在ASP.NET程式使用2個<audio>標籤播放音樂檔案；1個<video>標籤播放視訊檔案，並且使用<source>標籤提供多種格式的媒體檔案，如右圖所示：

18. 15-2-2 控制音效的播放-取得HTMLAudioElement物件 • 在<audio>標籤可以顯示預設控制面板來控制播放，當然，我們也可以自行使用JavaScript的getElementById()方法取得<audio>標籤的HTMLAudioElement物件（這是介面）後，呼叫相關方法來控制音效的播放，如下所示： var myAudio = document.getElementById("myAudio"); • 上述程式碼是JavaScript。jQuery取得HTMLAudioElement物件的程式碼，如下所示： var myAudio = $("#myAudio")[0];

19. 15-2-2 控制音效的播放-相關方法 • 在取得HTMLAudioElement物件後，就可以呼叫相關方法（繼承自HTMLMediaElement物件，這是介面），其說明如下表所示：

20. 15-2-2 控制音效的播放-相關屬性 • HTMLAudioElement物件的相關屬性說明（繼承自HTMLMediaElement物件），如下表所示：

21. 15-2-2 控制音效的播放-調整音量 • 調整音量是註冊change事件來更改volume屬性值，如下所示： $('#volume').bind("change", function () { var myAudio = $("#myAudio")[0]; myAudio.volume = parseFloat(this.value / 10); }); • volume是<input type="range"/>捲動軸欄位，事件處理的匿名函數可以依取得值調整音量。

22. 15-2-2 控制音效的播放-顯示播放時間 • 顯示播放時間是註冊HTMLAudioElement物件的timeupdate事件，如下所示： $('#myAudio').bind("timeupdate", function () { var s1 = parseInt(this.currentTime % 60); var m1 = parseInt((this.currentTime / 60) % 60); var s2 = parseInt(this.duration % 60); var m2 = parseInt((this.duration / 60) % 60); $('#duration').html(m1 + "分:" + s1 + "秒 / " + m2 + "分:" + s2 + "秒"); });

23. 15-2-2 控制音效的播放-範例 • 在ASP.NET程式建立<audio>標籤，但沒有控制面板，然後使用標籤物件的相關方法自行控制音效播放，和顯示相關播放資訊（使用Opera Mobile Emulator），如右圖所示：

24. 15-2-3 控制視訊的播放-取得HTMLVideoElement物件 • HTML5的<video>標籤是在DOM樹建立HTMLVideoElement物件（繼承自HTMLMediaElement物件）的節點，取得此物件的程式碼，如下所示： var myVideo = document.getElementById("myVideo"); var myVideo = $("#myVideo")[0]; • 程式碼分別使用JavaScript和jQuery取得物件，然後就可以呼叫相關方法來播放視訊和暫停視訊的播放，使用屬性取得目前的播放狀態，或使用DOM事件來進一步控制視訊的播放。

25. 15-2-3 控制視訊的播放-相關方法 • 呼叫相關方法來播放視訊和暫停視訊的播放，如下表所示：

26. 15-2-3 控制視訊的播放-相關屬性

27. 15-2-3 控制視訊的播放-常用事件 • HTMLAudioElement和HTMLVideoElement物件都可以註冊HTMLMediaElement的事件，常用事件的說明，如下表所示：

28. 15-2-3 控制視訊的播放-範例 • 在ASP.NET程式建立<video>標籤，但沒有控制面板和自動播放後，使用標籤物件的相關方法來自行控制視訊的播放，和顯示播放的相關資訊（使用Opera Mobile Emulator），如右圖所示

29. 15-3 HTML5的繪圖 • 15-3-1 使用JavaScript在Canvas元素繪圖 • 15-3-2 繪出長方形 • 15-3-3 繪出直線與多邊形 • 15-3-4 繪出圓形 • 15-3-5 顯示圖片 • 15-3-6繪出文字內容

30. 15-3-1 使用JavaScript在Canvas元素繪圖-說明 • HTML5 提供繪圖功能，可以讓我們在<canvas>標籤建立的方框中，使用JavaScript程式碼呼叫Canvas API在網頁上繪出2D圖形，即CanvasRenderingContext2D物件。 • 因為HTML5的<canvas>標籤只是定義一個透明的繪圖區域，如同一張指定尺寸的畫布，我們需要使用JavaScript或jQuery程式碼才能在此畫布上繪圖。

31. 15-3-1 使用JavaScript在Canvas元素繪圖-座標系統 • 電腦螢幕的座標系統是使用「像素」（Pixels）為單位，Canvas畫布是一個長方形區域，左上角為原點，其座標是(0, 0)，X軸從左到右，Y軸由上到下，如下圖所示：

32. 15-3-1 使用JavaScript在Canvas元素繪圖-<canvas>標籤 • HTML5提供<canvas>標籤可以建立可繪圖的長方形區域，讓我們使用JavaScript程式碼直接在網頁上繪圖或載入圖片。在<canvas>標籤一定要指定id屬性，以便JavaScript程式碼可以取得DOM物件，如下所示： <canvas id="myCanvas" width="200" height="150"></canvas> • 標籤碼建立id屬性值為myCanvas的HTMLCanvasElement物件。

33. 15-3-1 使用JavaScript在Canvas元素繪圖-建立Canvas畫布 • 在JavaScript程式建立Canvas畫布，在取得id屬性值為myCanvas的HTMLCanvasElement物件後，呼叫getContext()方法取得實際的繪圖物件，如下所示： var myCanvas = document.getElementById("myCanvas"); var myContext = myCanvas.getContext("2d"); • 上述方法參數是"2d"，可以傳回產生的CanvasRenderingContext2D物件，這就是在Canvas畫布上建立的繪圖環境，例如：替畫布填滿背景色彩，如下所示： myContext.fillStyle = "yellow"; myContext.fillRect(0, 0, myCanvas.width, myCanvas.height); • 程式碼的fillStyle屬性可以指定填滿樣式為黃色，然後呼叫fillRect()方法填滿長方形的背景色彩，即黃色的長方形背景。

34. 15-3-1 使用JavaScript在Canvas元素繪圖-範例 • 在ASP.NET程式建立<canvas>標籤，然後使用JavaScript程式碼填滿此繪圖區域，如右圖所示：

35. 15-3-2 繪出長方形-相關方法 • CanvasRenderingContext2D物件可以使用strokeRect()和fillRect() 方法繪出長方形或填滿長方形，相關方法說明如下表所示：

36. 15-3-2 繪出長方形-程式碼 • 在JavaScript程式碼只需指定fillStyle屬性的填滿色彩，就可以使用fillRect()方法繪出長方形，如下所示： myContext.fillStyle = "red"; myContext.fillRect(10, 10, 50, 50); • 程式碼是繪出正方形，因為尺寸的寬和高相同都是50。同理，繪出沒有填滿的長方形是使用strokeStyle屬性和strokeRect()方法，如下所示： myContext.strokeStyle = "blue"; myContext.strokeRect(50, 80, 80, 40);

37. 15-3-2 繪出長方形-範例 • 在ASP.NET程式建立<canvas>標籤後，使用JavaScript程式碼繪出填滿的紅色正方形和一個長方形，如右圖所示：

38. 15-3-3 繪出直線與多邊形-繪出直線 • 在Canvas畫布繪出直線，首先呼叫moveTo()方法移至開始的起點（下筆點），然後從此起點開始，呼叫lineTo()方法繪出至參數座標的直線（繪至目的點），如下所示： myContext.moveTo(0,0); myContext.lineTo(50,50); myContext.lineTo(100,0); myContext.lineTo(150,50); myContext.lineTo(200,0); myContext.stroke(); • 程式碼建立5個端點之間的路徑，最後呼叫stroke()方法以strokeStyle屬性的樣式繪出5個端點之間的4條直線。

39. 15-3-3 繪出直線與多邊形-繪出多邊形 • 如果我們建立的路徑最後回到起點，就可以繪出形狀，例如：多邊形，因為是在同一張畫布繪出直線和多個形狀，所以需要使用beginPath()方法表示建立一個新路徑，如下所示： myContext.beginPath(); myContext.moveTo(100, 50); myContext.lineTo(50, 75); myContext.lineTo(100, 100); myContext.lineTo(150, 75); myContext.closePath(); myContext.fill(); • 程式碼建立菱形路徑，closePath()方法可以將最後一個端點連接至起點來圍成形狀，最後呼叫fill()方法填滿形狀。

40. 15-3-3 繪出直線與多邊形-範例 • 在ASP.NET程式建立<canvas>標籤後，使用JavaScript程式碼繪出4條藍色直線、一個紅色菱形和填滿的綠色菱形，如右圖所示：

41. 15-3-4 繪出圓形-相關方法 • 在Canvas畫布繪出圓形或填滿圓形是使用arc()配合stroke()和fill()方法，如下所示： myContext.beginPath(); myContext.arc(100,100,30,0,Math.PI*2,true); myContext.closePath(); myContext.stroke(); • 程式碼使用arc()方法繪出圓形，圓心座標是(100, 100)，半徑30，弧度是0~Math.PI*2即一整圈，所以stroke()方法繪出的弧形是一個圓形，如果使用fill()方法就是填滿圓形。

42. 15-3-4 繪出圓形-範例 • 在ASP.NET程式建立<canvas>標籤後，使用JavaScript程式碼分別繪出重疊的一個圓形和填滿圓形，如右圖所示：

43. 15-3-5 顯示圖片-drawImage()方法 • 在Canvas畫布可以顯示圖片檔案，這是使用Image()建構函數建立Image物件後，呼叫drawImage()方法來顯示圖片，如下所示： var img = new Image(); img.onload = function() { myContext.drawImage(this, 0, 0, 200, 150); } img.src = "Flower.jpg"; • 程式碼建立Image物件img後，註冊onload事件處理函數，當圖片載入後就顯示圖片內容，即呼叫drawImage()方法，最後src屬性值是圖片檔案的URL網址。

44. 15-3-5 顯示圖片-範例 • 在ASP.NET程式建立<canvas>標籤後，使用JavaScript程式碼在畫布顯示Flower.jpg圖片檔案，如右圖所示：

45. 15-3-6繪出文字內容-相關方法 • 在Canvas畫布繪出文字內容是使用fillText()或strokeText()方法，在呼叫之前，我們需要指定文字對齊和字型的相關樣式，如下所示： myContext.font = "italic 20px 細明體"; myContext.textBaseline = "top"; myContext.textAlign = "center"; • 程式碼指定字型尺寸、字體、樣式和對齊方式後，就可以繪出文字內容，如下所示： myContext.fillStyle = "red"; myContext.fillText("ASP.NET程式設計", 100, 10); • 程式碼呼叫fillText()方法，使用fillStyle屬性的樣式，在座標(100, 10)繪出第1個參數的字串內容，同理，strokeText()方法是使用strokeStyle屬性的樣式。

46. 15-3-6繪出文字內容-範例 • 在ASP.NET程式建立<canvas>標籤後，使用JavaScript程式碼在Canvas畫布顯示2行文字內容，如右圖所示：

47. 15-4 HTML5的客戶端儲存體-種類 • HTML5支援客戶端儲存體（Client-side Storage）功能，可以讓我們在客戶端儲存鍵值成對的資料。HTML5版的客戶端儲存體主要分成兩種，其主要差異是資料保存期限的不同，如下所示： • localStorage：localStorage的資料保存期限比較長，原則上它需要等到Javascript程式碼刪除，或使用者自行清空快取才會消失。 • sessionStorage：sessionStorage的資料在關閉瀏覽器視窗或標籤頁就會刪除。

48. 15-4 HTML5的客戶端儲存體-方法 • localStorage和sessionStorage物件使用相同API來新增、取得和刪除儲存的資料，其說明如下表所示：

49. 15-4 HTML5的客戶端儲存體-程式碼 • 使用localStorage儲存訪客的姓名資料，如下所示： localStorage.setItem("name", "陳會安"); • 程式碼建立鍵值為name的資料。取出localStorage物件儲存的資料有兩種方式，如下所示： alert("姓名: " + localStorage.getItem("name")); alert("Hello " + localStorage.name); • 程式碼分別使用getItem()方法和屬性來取出儲存的資料。刪除資料是使用removeItem()方法，如下所示： localStorage.removeItem("name");

50. 15-4 HTML5的客戶端儲存體-範例 • 在ASP.NET程式使用localStorage儲存訪客的姓名資料，如右圖所示：