html5 的新玩意兒
現代化行動網頁設計基礎入門班 DAY 4
講師:張凱迪(KD.Chang)
Copyright © 2013 All rights reserved
提醒您鍵盤左右鍵可以移動投影片
Sorry, PPT is not suitable for Hackers : (
HTML5主要目標
減少瀏覽器對於需要外掛程式,
使網路標準達到符合
當代的網路應用需求
http://www.atizo.com/docs/
廣義來說Html5包含CSS3 + js
http://www.virtualsciences.nl/
cookies
Cookies是在HTML5之前最重要的本地端儲存機制,目前幾乎所有瀏覽器都支援Cookies,所以跨瀏覽器問題不大。平常我們在電子商務網站上購物時,購物車的資料儲存很多都是使用Cookies來實作
簡單來說,Cookies是一組資料值,格式為『name / value』
COOKIES
新增Cookie值
var cook = 'home=Taiwan';
document.cookie = cook;
存取Cookie值
當儲存組數大於一組時用分號加上空白作為分隔符號,可以使用JS 中split()方法分隔成陣列,再透過迴圈逐一存取
COOKIES
一般預設寫入的Cookie只能存活在目前的Session中,一旦關閉瀏覽器,Session結束,則儲存的資料即消失
如果想要延長Cookie存活時間,可以設定max-age值(以秒為單位)
var cook = 'home=Taiwan; max-age=100';
判斷瀏覽器是否支援Cookie功能
navigator.cookieEnabled //回傳true or false
web storage
事實上Cookie在實務上有很多的缺點,如存取不易
在HTML5後,我們可以使用Web Storage的方式進行實作,運用Window物件中的localStorage和sessionStorage可以更方便的在本地端儲存資料
WEB STORAGE
localStorage
係表示一個儲存在用戶端的永久資訊區塊,除非安全性因素或使用者的刪除、更新,不然資料將不會改變
sessionStorage
為一個暫時性儲存區域,其中資料以session為基礎,每一個session有其專屬的儲存區域,除了使用者的更動外,生命週期於seesion存在期間,亦即關掉瀏覽器後即消失
* 以上兩者除了生命週期的不同外,使用方法和觀念類似
存取 WEB STORAGE
Web Storage資料中以key/velue為資料格式儲存於Storage物件之中 ,以下的storage僅為代號,可以替代為localStorage或是sessionStorage
儲存資料方法 setItem()
storage.setItem(key, value);
取得資料方法 getItem()
var item = storage.getItem(key);
刪除資料 clear()
存取 WEB STORAGE
透過索引值存取資料 key()
var key = storage.key(index);
var value = storage.getItem(key);
透過名稱存取
localStorage[key] = 'value';
var values = localStorage[key];
file api
由於安全性問題,原本JS是不能讀寫檔案,但透過HTML5 的File API可以職員檔案的存取操作。然而由於安全性問題,檔案系統本身是封閉的,存取僅限於瀏覽器範圍,無法與瀏覽器範圍以外的環境進行溝通
亦可以搭配使用<input type="file">標籤和相關API讀取外部檔案內容,為回傳的File物件為一個陣列
FILE API
常用存取檔案特性
屬性:
name 檔案名稱
lastModifiedDate 最後修改日期
size 檔案大小
type 檔案型態
方法:
slice() 切割檔案區塊
按這看結果
appcache
HTML5 提供離線儲存的機制,可以減輕伺服器端負擔
CACHE: 區段定義要本機儲存的資源
FALLBACK: 區段定義其他資源不可用時要使用的資源NETWORK: 區段指定網路連線時存取的資源
練習一(SAMPLE 4-1)
利用HTML5元素拖曳的特性和本地端儲存的功能,製作一重新整理後仍可以保留資料的便條紙
Hint : localStorage、draggable="true"(
參考範例)
canvas
canvas標籤支援繪圖功能
beginPath() 開始圖形線條描繪
closePath() 結束圖形線條描繪,並將其封閉
moveTo() 移至指定座標
lineTo() 從目前座標到指定座標畫一直線
rect() 畫一個矩形
stroke() 描繪圖形
fill() 描繪圖形,並用顏色填滿封閉區域
練習二(SAMPLE 4-2)
運用HTML5 Canvas製作一黃色小鴨
參考範例audio
使用瀏覽器內建的音效播放器,不用使用外掛
<audio controls>
<source src="music.mp3">
<source src="music.ogg">
</audio>
VIDEO
使用瀏覽器內建的影音播放器,不用使用外掛
<video id="movie" preload controls loop poster="js.png" width="640" height="360">
<source src="js.mp4" type="video/mp4" />
<source src="js.ogv" type="video/ogg" />
<source src="js.webm" type="video/web" />
您的瀏覽器不支援HTML5影片播放標籤<video>格式喔!
</video>
練習三(SAMPLE 4-3)
請試著使用HTML5 audio和video標籤在網頁中添加影音效果
地理位置定位 (Geolocation)
Web Apps 若需要使用者的位置,可透過 Geolocation API 取得相關資訊。而基於隱私權的考量,這些 Web Apps 均必須取得使用者的許可之後,才能發佈位置資訊
navigator.geolocation.getCurrentPosition(success, error);
//取出經緯度
position.coords.latitude, position.coords.longitude
按這看結果
modernizr
http://modernizr.com/
can i use
http://caniuse.com/