HTML5 开发技术於 Windows 8 及IE10 上的应用.pptVIP

HTML5 開發技術於 Windows 8 及 IE10 上的應用 黄保翕 ( Will 保哥 ) 多奇數位創意有限公司 技術總監 大綱 HTML5 與 IE10 的邂逅 支援哪些 HTML5 JavaScript APIs IE10 內建的觸控技術 MS Pointers API Metro IE10 與 Desktop IE10 兩者的差異之處 Metro IE10 的特色 釘選的網站動態磚 (Pinned Site Tile) 連接你的網站與 Windows 8 App 從 IE10 分享連結的開發技巧 備妥你的無外掛(plug-in free)瀏覽體驗 IE10 相容性技術 Compat Inspector 工具 HTML5 與 IE10 的邂逅 支援哪些 HTML5 JavaScript APIs IE10 新增的 HTML5 JS APIs Application Cache API (AppCache) Asynchronous script execution Channel messaging Drag-and-drop APIs File API Forms History Parsing Sandbox Spellcheck Video Web Workers WebSockets IndexedDB 離線應用程式(應用程式快取) 建立離線 Web 應用程式 將指定的 HTML、JS、CSS、圖片儲存在瀏覽器裡，即便網路斷線也能透過 URI 存取。 基本實作步驟： 建立資訊清單檔案 (Cache Manifest) 在網頁 html 加上資訊清單檔案的參考。 非同步指令碼執行 正常載入 (在執行完後才繼續剖析網頁) script src=test.js/script 延遲載入 (在網頁剖析完成後開始執行) script defer src=test.js/script 非同步載入 (下載完成後立即開始執行) script async src=test.js/script 混合使用？ (相容性寫法，優先採用 async 選項) script async defer src=test.js/script 非同步指令碼執行 JavaScript 執行順序圖示 什麼情況下適合使用 async 語法 Google Analytics 取得 GPS 座標資料 示範執行速度：HTML5 非同步指令碼 通道訊息 Web Worker 通道訊息可讓跨瀏覽內容(Browser Context)中的程式碼透過連接埠直接通訊。 postMessag 方法 onmessage 事件 Web Worker 使用 通道訊息 的 API 架構讓資料能在前景執行緒與背景執行緒之間交換訊息。 Web 工作者 (Worker) 用途 讓需要透過前端 JavaScript 長時間執行的程式碼以獨立的執行緒在背景執行，以提升頁面回應速度 實作方法 建立 Worker 物件，並指定要執行的 js 檔 var worker = new Worker(task.js); Page 與 Worker JS 個別新增 message 事件，然後互相傳遞訊息 worker.postMessage(Hello World); worker.addEventListener(message, function(e) {console.log(e.data); }, false); Web 工作者 (Worker) 程式碼架構 示範：使用 Web Workers 查找 Google Maps 地址 拖放 API IE9 與其舊版瀏覽器支援 dataTransfer 物件以及拖曳影像、連結和文字的事件 IE10 新增 draggable 屬性可套用至任意元素 IE10 也在 dataTransfer 物件中新增了 files 屬性，能夠從桌面拖放一或多個檔案到網頁。 示範：HTML5 draggable 屬性 檔案 API 安全的存取用戶端機器上的本機檔案 透過 input type=file … 取得存取權限 可直接讀取檔案內容 純文字、支援多種編碼，也可讀取二進位內容 可透過 BlobBuilder API 修改檔案內容 無法儲存變更於本機檔案，只能上傳到伺服器 檔案上傳欄位新增 上傳多重檔案 檔案類型篩選 示範：檔案上傳欄位 表單 HTML5 表單提供 ( IE10 並沒有完整支援 ) 新的輸入類型 ( new input types ) color, date, datetime, datetime-local, month , time , week, number, tel, range, search, email,