HTML5 Basic

HTML5 Basic http://MobileDev.TW
HTML5
Basic
Ryan@MobileDev.TW
1

大綱
1.  簡介
2.  原則
3.  測試環境
4.  支援現況
5.  影音播放
6.  繪圖
7.  表單相關
8.  Geolocation
9.  DragDrop
10. 離線網頁
11. Web Workers
2

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

HTML5 Basic http://MobileDev.TW4

2.原則
1.  新的特色仍應以HTML,CSS,DOM,JavaScript為基礎
2.  減少外掛元件的需求(如Flash)
3.  增強錯誤處理能力
4.  透過標記語言來取代更多的Script
5.  語言與設備不相依
6.  公開制定進度
5

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
•  Aptana
•  Sublime Text
6

4.支援現況
部分支援：
ü Safari
ü Chrome
ü Firefox
ü IE9
ü Opera
http://caniuse.com/
http://en.wikipedia.org/wiki/Comparison_of_layout_engines_(HTML5)
7

5.影音播放
8

5-1.影片播放Video Element
9
除了Opera Mini、IE8之外，通通都支援了！

5-1.影片格式支援-MP4/H.264
10
IE8、Opera/Opera Mini不行用

5-1.影片格式支援-WebM/VP8
11
Firefox、Chrome、Opera、Android OK

5-1.影片格式支援-Ogg/Theora
12
Firefox、Chrome、Opera OK

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

5-1.影片播放
video可以用的屬性：
•  autoplay：自動撥放 autoplay=autoplay
•  controls：顯示控制項 controls=controls
•  height, width：撥放器的寬高
•  loop：影片要不要循環撥放
•  preload：影片是否要在頁面載入時就下載，還是要
等按下Play再load
•  src：影片來源
14

5-1.Lab播放影片
15

5-2.音樂播放Audio Element
16
除了IE8、Opera Mini，其他都ＯＫ！

5-2.音樂播放支援格式
支援格式：

格式
IE9
Firefox3.6+
Opera10.5+
Chrome3.0+
Safari3.0
Ogg

Vorbis
X
O
O
O
X
MP3
O
X
X
O
O
Wav
X
O
O
O
O
17

5-2.音樂播放
語法：
audio src=song.ogg controls=controls/audio
Source也可以獨立多寫幾個,萬一User的Browser讀不出來，
可以Load另外一個
audio controls=controls
source src=song.ogg type=audio/ogg
source src=song.mp3 type=audio/mpeg
/audio

18

5-2.音樂播放
audio可以用的屬性：
•  autoplay：自動撥放 autoplay=autoplay
•  controls：顯示控制項 controls=controls
•  loop：音樂要不要循環撥放
•  preload：音樂是否要在頁面載入時就下載，還是要等按
下Play再load
•  src：音樂來源
19

5-2.Lab 播放音樂
20

5-3.用Javascript客製化控制項
21

5-3.用Javascript客製化控制項
•  拿掉HTML tag中的controls屬性
•  用id取得元件後，可用src屬性取得檔案路徑與名稱
•  在HTML中加入一顆按鈕，預設值為播放
•  按下播放按鈕時，判斷目前是否為暫停，是的話就呼叫
播放方法，並更新按鈕文字為暫停
•  用video.paused是否為真來判斷
•  播放方法：video.play()
•  若不是暫停狀態，就呼叫暫停方法，並更新按鈕文字為
播放
•  暫停方法：video.pause()
22

5-4.加上播放進度與音量控制項
23

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

6.CANVAS
25

6.繪圖
Canvas
使用JavaScript在網頁上畫圖
定義出一個矩形，然後控制裡面的每一個pixel
首先要先建立一個Canvas元件
canvas id=myCanvas width=200
height=100/canvas
Canvas本身並沒有辦法畫圖，要透過JavaScript

26

6-1.繪圖-矩形
27

6-1.繪圖-矩形
!DOCTYPE HTML
html
head/head
body
canvas id=myCanvas width=200 height=100
style=border:1px solid #c3c3c3;/canvas
script
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

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”;

6-2.線與圓
6-2-1-1.Lab：
請畫出以下圖形

30

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

6-2.線與圓
6-2-2-1.Lab：
請畫出四分之一圓

32

6-2.線與圓
6-2-2-2.Lab：
請畫出奧運圖形(藍、黑、紅、黃、綠)

33

6-3.漸層
塗上漸層背景
var grd=cxt.createLinearGradient(0,0,175,50);
//決定從哪一個點到哪一個點進行漸層
grd.addColorStop(0,#FF0000);
grd.addColorStop(1,#0000FF);
//產生由紅轉藍的漸層
cxt.fillStyle=grd;
cxt.fillRect(0,0,175,50);

34

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

6-4.放圖片
36
6-4-1Lab:
取出女生的頭

6-4.放圖片
37
6-4-2Lab：馬力歐向前衝
任務一：
按按鈕會前進
任務二：
用鍵盤控制

7.表單相關
38

1.email
•  將input type設定為email
•  送出表單前會先檢查是否為email格式
•  iPhone上鍵盤會出現@
Firefox跳出警告 Chrome跳出警告
Opera跳出警告
39

2.url
•  將input type設定為url
•  送出表單前會先檢查是否為網址格式
•  iPhone上鍵盤會出現.com
Firefox跳出警告 Chrome跳出警告
Opera跳出警告
40

3.number
•  將input type設定為number
•  可限定最小值min, 最大值max, 每次增加step
Chrome
旁邊出現小小的上下按鈕
Opera
旁邊出現小小的上下按鈕
但數字的大小沒顯示好
41

4.range
•  將input type設定為range
•  可限定最小值min, 最大值max, 每次增加step
Chrome
42
•  Lab
•  顯示range的值在range元件旁邊，會自動更新數值

5.date picker
•  將input type設定為date
43
Chrome
•  Lab
•  取得使用者所選擇的日期

6.color
•  將input type設定為color
44
•  Lab
•  取得使用者所選擇的顏色
•  並設定為網頁背景顏色

7.Progress Bar
progress id=bar value=10 max=100
•  可設定最大值max, 目前值value

Chrome
45

7.Progress Bar
46
Lab
工作清單結合進度狀態顯示

提示
透過CheckBox的
checked屬性，判斷
是否為true，即可得
知該選項是否被勾選
了

8.meter
meter id=myMeter max=1500 min=0 value=500 low=150
high=1350/meter
•  可設定最大值max, 最小值,目前值value
•  過大的警戒臨界值high,過小的警戒臨界值low
Chrome
47

9.placeholder
•  將input 增加placeholder屬性
48

8.GEOLOCATION
49

1.取得地理位置
1.  建立一顆按鈕，按下去之後開始動作
2.  確認是否有支援地理位置抓取
3.  呼叫取得地理位置的方法
•  設定成功取得位置後要做的事情
•  設定取得位置失敗要做的事情
navigator.geolocation.getCurrentPosition
(successCallback, errorCallback);
50

2.運用Google Map
•  取得經度與緯度的值
•  組合出google map的連結
•  https://maps.google.com.tw/
•  ?q=latValue+,+lonValue
51

2.運用Google Map
9-2-1.Lab
直接去Google Map
提示：改變目前視窗的網址

52

3.不斷更新現在位置
•  改用navigator.geolocation.watchPosition
•  可持續取得位置
•  不用時呼叫clearWatch
•  window.navigator.geolocation.clearWatch( watc
hPositionObject )
53

9.DRAGDROP
54

拖拉翻譯器
1. Ryan
2. David
3. John
1. 萊恩
2. 大衛
3. 約翰
55

拖拉翻譯器
•  準備一個純文字檔
•  在網頁中規劃一個div與一個textarea
•  拖放的4個事件
•  dragenter：拖進該區域
•  dragleave：拖離該區域
•  dragover：停留在該區域
•  drop：放下
56

拖拉翻譯器
1.  頁面載入時，即觀察這4個事件
2.  拖進該區域時，區域變成紅色，並顯示Drop it!
3.  拖離該區域時，恢復為藍色，文字為Come here.
4.  拖放於該區域時，取得該檔案，進行轉換
5.  確認該檔案為文字檔
6.  讀出內容，進行翻譯
7.  翻譯完後，顯示於textarea
57

Lab.餵食笑臉
58
蘋果
毒蘋果

10.離線網頁
59

Web App最害怕…..Offline
可連線時，將網
頁儲存一份於快
取中，離線時，
就讀取這一份快
取的檔案
60

Web Server 設定步驟
•  在Web Server上設置.htaccess，加上這一行：
•  AddType text/cache-manifest .manifest
•  將Apache上的httpd.conf，修改：
Directory /
Options FollowSymLinks
AllowOverride All
/Directory

61

網頁設定步驟
•  建立一個 off-line.manifest檔案
CACHE MANIFEST
# Version:1.0
off-linePage.html
off-lineJS.js
•  off-linePage.html
•  修改HTML tag為html manifest=off-line.manifest

62

如何更新快取
•  直接更新manifest檔案
•  用JavaScript
applicationCache.update()
•  可監聽以下事件瞭解現況
•  checking：正在檢查更新或準備第一次下載manifest
•  noupdate：manifest沒有變動時
•  downloading：正在下載manifest列出的檔案時
•  progress：相關檔案都下載好時
•  updateready：更新快取完畢，準備替換成最新的快取之前
63

11.WEB WORKERS
64

Web Worker
•  多執行緒進行運算
•  無法共享主執行緒變數
•  無法直接變更window
•  無法直接變更document
•  傳送訊息回主執行緒
Main Thread
New Thread
make new thread passing messagespassing messages
65

Web Worker
•  避免瀏覽器當掉，停住於某一個龐雜的計算script
•  使用Web Worker來計算2~1000000是否為質數
•  建立一個新的Web Worker來跑一隻JavaScript
•  該檔案計算2~1000000是否為質數
•  過程中需將進度回傳給主執行緒
•  最後將結果也送回主執行緒
66

Web Worker
•  建立新執行緒

•  從新執行緒傳遞資料給主執行緒

•  主執行緒接收新執行緒的訊息

67

HTML5 Basic

More Related Content

What's hot

Viewers also liked

Similar to HTML5 Basic

More from Ryan Chung

HTML5 Basic