標籤: HTML5 API 頁1

教學

使用 Indexed Database API 存取資料

使用 Indexed Database API 開發的步驟為:1. 建立資料庫 2.建立 object store 3. 在 transaction 中處理資料。

教學

PWA 與 Service Worker

Service Worker 是一種 JS 的 Web Worker ,他是一隻獨立運行於瀏覽器頁面執行緒之外的一隻 JS 檔案,可以攔截網路請求,存取快取資源,並且能傳送訊息。也因為 Service Worker 可以攔截網路請求並改變 reponse,所以只能在 localhost 或是 https 上使用。

教學

HTML5 的 Geolocation(地理位置) API

Geolocation 的定位是透過電腦的IP、WIFI定位法、手機三角定位及GPS來取得經緯度,所以大部分的情況用手機的定位會比較精準一些,但也可能因為環境的關係會飄到奇怪的地方,要使用的話要注意誤差的問題。

教學

IndexedDB基礎概念

IndexedDB 讓我們透過資料鍵 (key) 儲存、取回物件。所有對資料庫的變更都發生在交易操作;如同大部分網頁儲存方案,IndexedDB 遵守同源政策,也就是說我們只能存取同網域下的資料。

教學

HTML5 的 Web Storage- local storage 與 session storage

以往我們要在使用者端存取資料會使用 cookie,但 cookie 可以存的資料非常有限,所以後來 HTML5 發展出了 Web Storage,而 Web Storage 又分成了 local storage 和 session storage。

教學

HTML5 的 Video and Audio APIs(音樂與影片控制)

我們可以透過 HTML5 的 Video and Audio APIs 來實現自製播放器的功能。

教學

HTML5 新的 input 屬性

HTML5 新的 input 的類型,包含color、range、number、email、url、tel、search、date、time、datetime-local、week、month...等

教學

Notification- 瀏覽器的推播通知

Web Notifications API 可將通知傳送至頁面以外的系統層級並顯示通知,但要使用的話需要使用者授權才有辦法接收通知。

教學

Shared workers- 跨越不同 window、iframe 或 worker處理 script

要在兩個頁籤(視窗)共用一個 script,我們可以使用 Shared workers 來執行。

教學

讓網頁在背景執行緒 (Thread) 中執行程式- Web Workers

Web Workers 提供簡單的方法讓網頁在背景執行緒 (Thread) 中執行程式,而不干擾使用者介面運行,而且兩線可以透過 postMessage 發送訊息、onmessage 接收訊息來溝通。

教學

HTML5 Drag and Drop(拖曳效果)

使用 HTML5 的 Drag and Drop 來實現物件在區塊內拖曳的效果。

教學

HTML5 的 File API

透過 File API ,我們可以讓瀏覽器顯示預備要上傳的檔案的資料,接著利用 readAsText 抓取文字內容或利用 readAsDataURL 抓取圖片內容。

教學

修改頁面內容- HTML5 中的 execCommand 指令

HTML5 中的 execCommand 是用來讓網頁選取位置產生變化,如: 文字處理(複製、貼上、剪下)、排版(對齊、編號、上下標)、變更字型與大小等等...

教學

HTML5 Canvas 基礎(七) 生成圖片- toDataURL

要把 canvas 的內容轉成圖片,只要透過 toDataURL 就可以了,toDataURL可以再設定圖片的格式和品質。

教學

HTML5 Canvas 基礎(一) 矩形

canvas 是 HTML5 新增的一種標籤,可以把它簡單想像成畫布,我們可以在畫布建立之後透過 javascript 在上面繪製我們想要的圖形出來。

教學

HTML5 Canvas 基礎(六) 繪製文字

使用 canvas 繪製文字時是利用 .fillText(textDraw, x, y) ,其中 textDraw 為文字的內容,x,y 則為座標位置,繪製前可以做一些文字的設定。

教學

HTML5 Canvas 基礎(五) drawImage()- 繪製圖片

利用 drawImage() 的方式把圖片繪製到 canvas 上,完整參數為 drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight)。

教學

HTML5 Canvas 基礎(四) 畫直線與弧線

透過 lineTo 和 arc 在 canvas 繪製直線與弧線。