Suche senden
Hochladen
HTML5 Basic
•
5 gefällt mir
•
4,587 views
Ryan Chung
Folgen
Technologie
Design
Melden
Teilen
Melden
Teilen
1 von 67
Empfohlen
TicTacToe by HTML5 Canvas
TicTacToe by HTML5 Canvas
Ryan Chung
HTML5 Samples
HTML5 Samples
Ryan Chung
CSS3 Basic
CSS3 Basic
Ryan Chung
Modern Web with CSS and CSS Grid (image with links inside)
Modern Web with CSS and CSS Grid (image with links inside)
百範 陳
浅析浏览器解析和渲染
浅析浏览器解析和渲染
Ailsa126
[2008]网站重构 -who am i
[2008]网站重构 -who am i
Twinsen Liang
Html5培训内容
Html5培训内容
Jun Yu
Html&css培训 舒克
Html&css培训 舒克
jay li
Empfohlen
TicTacToe by HTML5 Canvas
TicTacToe by HTML5 Canvas
Ryan Chung
HTML5 Samples
HTML5 Samples
Ryan Chung
CSS3 Basic
CSS3 Basic
Ryan Chung
Modern Web with CSS and CSS Grid (image with links inside)
Modern Web with CSS and CSS Grid (image with links inside)
百範 陳
浅析浏览器解析和渲染
浅析浏览器解析和渲染
Ailsa126
[2008]网站重构 -who am i
[2008]网站重构 -who am i
Twinsen Liang
Html5培训内容
Html5培训内容
Jun Yu
Html&css培训 舒克
Html&css培训 舒克
jay li
Exam 98-375 HTML5 Application Development Fundamentals
Exam 98-375 HTML5 Application Development Fundamentals
Chieh Lin
Bootstrap 4 超詳盡解析
Bootstrap 4 超詳盡解析
Chih-cheng Wang
前端性能测试
前端性能测试
tbmallf2e
淘宝前端技术巡礼
淘宝前端技术巡礼
jay li
让我们的页面跑得更快
让我们的页面跑得更快
li qiang
Sencha SDK Tools简介:IE6上也可以用CSS3?
Sencha SDK Tools简介:IE6上也可以用CSS3?
Frank Cheung
Html5
Html5
cazhfe
Html5移动网站开发实践
Html5移动网站开发实践
Web Zhao
HTML5 - Just the basics
HTML5 - Just the basics
James VanDyke
Html5 Basics
Html5 Basics
Pankaj Bajaj
Grandes mentes piensan parecido. Mentes creativas piensan juntas.
Grandes mentes piensan parecido. Mentes creativas piensan juntas.
E E S N° 17
Business promotional plan
Business promotional plan
Sudhir Chaurasiya
Evaluacion poi 2016 al i semestre a3
Evaluacion poi 2016 al i semestre a3
Lucia Edith Espino Arevalo
Health Sciences Program Marketing Plan for Notre Dame of Maryland University
Health Sciences Program Marketing Plan for Notre Dame of Maryland University
Mary Ann Davis
SOLOMOTO_Продвижение через соцсети Facebook и Instagram
SOLOMOTO_Продвижение через соцсети Facebook и Instagram
SOLOMOTO_RU
presentatie eindproject final
presentatie eindproject final
Lisa Van Roy
Html5 - Novas Tags na Prática!
Html5 - Novas Tags na Prática!
Rômulo Reis de Oliveira
The purpose of the operations function
The purpose of the operations function
Valiya Firoz Khan
Basics of Html
Basics of Html
Arslan Butt
Basics of html5, data_storage, css3
Basics of html5, data_storage, css3
Sreejith Nair
Preparing images for the Web
Preparing images for the Web
sdireland
Jdbc
Jdbc
Nitesh Kumar Pandey
Weitere ähnliche Inhalte
Was ist angesagt?
Exam 98-375 HTML5 Application Development Fundamentals
Exam 98-375 HTML5 Application Development Fundamentals
Chieh Lin
Bootstrap 4 超詳盡解析
Bootstrap 4 超詳盡解析
Chih-cheng Wang
前端性能测试
前端性能测试
tbmallf2e
淘宝前端技术巡礼
淘宝前端技术巡礼
jay li
让我们的页面跑得更快
让我们的页面跑得更快
li qiang
Sencha SDK Tools简介:IE6上也可以用CSS3?
Sencha SDK Tools简介:IE6上也可以用CSS3?
Frank Cheung
Html5
Html5
cazhfe
Html5移动网站开发实践
Html5移动网站开发实践
Web Zhao
Was ist angesagt?
(8)
Exam 98-375 HTML5 Application Development Fundamentals
Exam 98-375 HTML5 Application Development Fundamentals
Bootstrap 4 超詳盡解析
Bootstrap 4 超詳盡解析
前端性能测试
前端性能测试
淘宝前端技术巡礼
淘宝前端技术巡礼
让我们的页面跑得更快
让我们的页面跑得更快
Sencha SDK Tools简介:IE6上也可以用CSS3?
Sencha SDK Tools简介:IE6上也可以用CSS3?
Html5
Html5
Html5移动网站开发实践
Html5移动网站开发实践
Andere mochten auch
HTML5 - Just the basics
HTML5 - Just the basics
James VanDyke
Html5 Basics
Html5 Basics
Pankaj Bajaj
Grandes mentes piensan parecido. Mentes creativas piensan juntas.
Grandes mentes piensan parecido. Mentes creativas piensan juntas.
E E S N° 17
Business promotional plan
Business promotional plan
Sudhir Chaurasiya
Evaluacion poi 2016 al i semestre a3
Evaluacion poi 2016 al i semestre a3
Lucia Edith Espino Arevalo
Health Sciences Program Marketing Plan for Notre Dame of Maryland University
Health Sciences Program Marketing Plan for Notre Dame of Maryland University
Mary Ann Davis
SOLOMOTO_Продвижение через соцсети Facebook и Instagram
SOLOMOTO_Продвижение через соцсети Facebook и Instagram
SOLOMOTO_RU
presentatie eindproject final
presentatie eindproject final
Lisa Van Roy
Html5 - Novas Tags na Prática!
Html5 - Novas Tags na Prática!
Rômulo Reis de Oliveira
The purpose of the operations function
The purpose of the operations function
Valiya Firoz Khan
Basics of Html
Basics of Html
Arslan Butt
Basics of html5, data_storage, css3
Basics of html5, data_storage, css3
Sreejith Nair
Preparing images for the Web
Preparing images for the Web
sdireland
Jdbc
Jdbc
Nitesh Kumar Pandey
Watson on bluemix
Watson on bluemix
Animesh Singh
Bluemix Technical Overview
Bluemix Technical Overview
rogerp67
IBM Bluemix Overview
IBM Bluemix Overview
Ian Lynch ☁️
Rodney+McPhearson1
Rodney+McPhearson1
Rodney McPhearson
Portfolio2
Portfolio2
Ben Booysen
Pico Safari SDH-SEMI 2011
Pico Safari SDH-SEMI 2011
Peter Organisciak
Andere mochten auch
(20)
HTML5 - Just the basics
HTML5 - Just the basics
Html5 Basics
Html5 Basics
Grandes mentes piensan parecido. Mentes creativas piensan juntas.
Grandes mentes piensan parecido. Mentes creativas piensan juntas.
Business promotional plan
Business promotional plan
Evaluacion poi 2016 al i semestre a3
Evaluacion poi 2016 al i semestre a3
Health Sciences Program Marketing Plan for Notre Dame of Maryland University
Health Sciences Program Marketing Plan for Notre Dame of Maryland University
SOLOMOTO_Продвижение через соцсети Facebook и Instagram
SOLOMOTO_Продвижение через соцсети Facebook и Instagram
presentatie eindproject final
presentatie eindproject final
Html5 - Novas Tags na Prática!
Html5 - Novas Tags na Prática!
The purpose of the operations function
The purpose of the operations function
Basics of Html
Basics of Html
Basics of html5, data_storage, css3
Basics of html5, data_storage, css3
Preparing images for the Web
Preparing images for the Web
Jdbc
Jdbc
Watson on bluemix
Watson on bluemix
Bluemix Technical Overview
Bluemix Technical Overview
IBM Bluemix Overview
IBM Bluemix Overview
Rodney+McPhearson1
Rodney+McPhearson1
Portfolio2
Portfolio2
Pico Safari SDH-SEMI 2011
Pico Safari SDH-SEMI 2011
Ähnlich wie HTML5 Basic
利用Signalr打造即時通訊@Tech day geek
利用Signalr打造即時通訊@Tech day geek
Johnson Gau
Responsive Web UI Design
Responsive Web UI Design
jay li
HTML5概览
HTML5概览
Adam Lu
Android 4-app
Android 4-app
lydiafly
HTML5 历史、现状及未来
HTML5 历史、现状及未来
Yongbin Tian
WAP2.0
WAP2.0
Frank Cai
twMVC#04 | ASP.NET MVC 4 新功能介紹(快速上手)
twMVC#04 | ASP.NET MVC 4 新功能介紹(快速上手)
twMVC
ASP.NET MVC 4 新功能介紹(快速上手) -twMVC#4
ASP.NET MVC 4 新功能介紹(快速上手) -twMVC#4
twMVC
JdonFramework中文
JdonFramework中文
banq jdon
Qq.com前端架构实践与思考
Qq.com前端架构实践与思考
greengnn
Wap2.0
Wap2.0
style80
Wap2.0
Wap2.0
guest902b532
twMVC#01 | ASP.NET MVC 的第一次親密接觸
twMVC#01 | ASP.NET MVC 的第一次親密接觸
twMVC
Bootstrap個人網站 20141027
Bootstrap個人網站 20141027
均民 戴
猫粮快报
猫粮快报
tbmallf2e
Html5和css3入门
Html5和css3入门
Xiujun Ma
Ria lqj
Ria lqj
huzilqj
Web 01
Web 01
Samantha Lin
Node Web开发实战
Node Web开发实战
fengmk2
Mobile UI design and Developer
Mobile UI design and Developer
jay li
Ähnlich wie HTML5 Basic
(20)
利用Signalr打造即時通訊@Tech day geek
利用Signalr打造即時通訊@Tech day geek
Responsive Web UI Design
Responsive Web UI Design
HTML5概览
HTML5概览
Android 4-app
Android 4-app
HTML5 历史、现状及未来
HTML5 历史、现状及未来
WAP2.0
WAP2.0
twMVC#04 | ASP.NET MVC 4 新功能介紹(快速上手)
twMVC#04 | ASP.NET MVC 4 新功能介紹(快速上手)
ASP.NET MVC 4 新功能介紹(快速上手) -twMVC#4
ASP.NET MVC 4 新功能介紹(快速上手) -twMVC#4
JdonFramework中文
JdonFramework中文
Qq.com前端架构实践与思考
Qq.com前端架构实践与思考
Wap2.0
Wap2.0
Wap2.0
Wap2.0
twMVC#01 | ASP.NET MVC 的第一次親密接觸
twMVC#01 | ASP.NET MVC 的第一次親密接觸
Bootstrap個人網站 20141027
Bootstrap個人網站 20141027
猫粮快报
猫粮快报
Html5和css3入门
Html5和css3入门
Ria lqj
Ria lqj
Web 01
Web 01
Node Web开发实战
Node Web开发实战
Mobile UI design and Developer
Mobile UI design and Developer
Mehr von Ryan Chung
Voice-First Games for Alexa
Voice-First Games for Alexa
Ryan Chung
AI Service Integration - Education
AI Service Integration - Education
Ryan Chung
AI Service Integration
AI Service Integration
Ryan Chung
AI Adoption in the Enterprise
AI Adoption in the Enterprise
Ryan Chung
Intro to Dialogflow Chatbot Development
Intro to Dialogflow Chatbot Development
Ryan Chung
AI in Classroom
AI in Classroom
Ryan Chung
AWS re:Invent 2018 Recap
AWS re:Invent 2018 Recap
Ryan Chung
MovieBot
MovieBot
Ryan Chung
Service Integration Workshop
Service Integration Workshop
Ryan Chung
MPP AI
MPP AI
Ryan Chung
Smart Home Intro Lab
Smart Home Intro Lab
Ryan Chung
Introduction to DialogFlow
Introduction to DialogFlow
Ryan Chung
Conversational AI Orientation
Conversational AI Orientation
Ryan Chung
Udacity Meet Up - 0413
Udacity Meet Up - 0413
Ryan Chung
Amazon Alexa Development Part II
Amazon Alexa Development Part II
Ryan Chung
Amazon Alexa Development
Amazon Alexa Development
Ryan Chung
Microsoft Professional Program - AI
Microsoft Professional Program - AI
Ryan Chung
AI Service Integration
AI Service Integration
Ryan Chung
Intro to AI
Intro to AI
Ryan Chung
Hour of Code - Amazon Alexa
Hour of Code - Amazon Alexa
Ryan Chung
Mehr von Ryan Chung
(20)
Voice-First Games for Alexa
Voice-First Games for Alexa
AI Service Integration - Education
AI Service Integration - Education
AI Service Integration
AI Service Integration
AI Adoption in the Enterprise
AI Adoption in the Enterprise
Intro to Dialogflow Chatbot Development
Intro to Dialogflow Chatbot Development
AI in Classroom
AI in Classroom
AWS re:Invent 2018 Recap
AWS re:Invent 2018 Recap
MovieBot
MovieBot
Service Integration Workshop
Service Integration Workshop
MPP AI
MPP AI
Smart Home Intro Lab
Smart Home Intro Lab
Introduction to DialogFlow
Introduction to DialogFlow
Conversational AI Orientation
Conversational AI Orientation
Udacity Meet Up - 0413
Udacity Meet Up - 0413
Amazon Alexa Development Part II
Amazon Alexa Development Part II
Amazon Alexa Development
Amazon Alexa Development
Microsoft Professional Program - AI
Microsoft Professional Program - AI
AI Service Integration
AI Service Integration
Intro to AI
Intro to AI
Hour of Code - Amazon Alexa
Hour of Code - Amazon Alexa
HTML5 Basic
1.
HTML5 Basic http://MobileDev.TW HTML5 Basic Ryan@MobileDev.TW 1
2.
HTML5 Basic http://MobileDev.TW 大綱 1.
簡介 2. 原則 3. 測試環境 4. 支援現況 5. 影音播放 6. 繪圖 7. 表單相關 8. Geolocation 9. DragDrop 10. 離線網頁 11. Web Workers 2
3.
HTML5 Basic http://MobileDev.TW 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
4.
HTML5 Basic http://MobileDev.TW4
5.
HTML5 Basic http://MobileDev.TW 2.原則 1.
新的特色仍應以HTML,CSS,DOM,JavaScript為基礎 2. 減少外掛元件的需求(如Flash) 3. 增強錯誤處理能力 4. 透過標記語言來取代更多的Script 5. 語言與設備不相依 6. 公開制定進度 5
6.
HTML5 Basic http://MobileDev.TW 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
7.
HTML5 Basic http://MobileDev.TW 4.支援現況 部分支援: ü Safari ü Chrome ü Firefox ü IE9 ü Opera
http://caniuse.com/ http://en.wikipedia.org/wiki/Comparison_of_layout_engines_(HTML5) 7
8.
HTML5 Basic http://MobileDev.TW 5.影音播放 8
9.
HTML5 Basic http://MobileDev.TW 5-1.影片播放Video
Element 9 除了Opera Mini、IE8之外,通通都支援了!
10.
HTML5 Basic http://MobileDev.TW 5-1.影片格式支援-MP4/H.264 10 IE8、Opera/Opera
Mini不行用
11.
HTML5 Basic http://MobileDev.TW 5-1.影片格式支援-WebM/VP8 11 Firefox、Chrome、Opera、Android
OK
12.
HTML5 Basic http://MobileDev.TW 5-1.影片格式支援-Ogg/Theora 12 Firefox、Chrome、Opera
OK
13.
HTML5 Basic http://MobileDev.TW 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
14.
HTML5 Basic http://MobileDev.TW 5-1.影片播放 video可以用的屬性: •
autoplay:自動撥放 autoplay=autoplay • controls:顯示控制項 controls=controls • height, width:撥放器的寬高 • loop:影片要不要循環撥放 • preload:影片是否要在頁面載入時就下載,還是要 等按下Play再load • src:影片來源 14
15.
HTML5 Basic http://MobileDev.TW 5-1.Lab播放影片 15
16.
HTML5 Basic http://MobileDev.TW 5-2.音樂播放Audio
Element 16 除了IE8、Opera Mini,其他都OK!
17.
HTML5 Basic http://MobileDev.TW 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
18.
HTML5 Basic http://MobileDev.TW 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
19.
HTML5 Basic http://MobileDev.TW 5-2.音樂播放 audio可以用的屬性: •
autoplay:自動撥放 autoplay=autoplay • controls:顯示控制項 controls=controls • loop:音樂要不要循環撥放 • preload:音樂是否要在頁面載入時就下載,還是要等按 下Play再load • src:音樂來源 19
20.
HTML5 Basic http://MobileDev.TW 5-2.Lab
播放音樂 20
21.
HTML5 Basic http://MobileDev.TW 5-3.用Javascript客製化控制項 21
22.
HTML5 Basic http://MobileDev.TW 5-3.用Javascript客製化控制項 •
拿掉HTML tag中的controls屬性 • 用id取得元件後,可用src屬性取得檔案路徑與名稱 • 在HTML中加入一顆按鈕,預設值為播放 • 按下播放按鈕時,判斷目前是否為暫停,是的話就呼叫 播放方法,並更新按鈕文字為暫停 • 用video.paused是否為真來判斷 • 播放方法:video.play() • 若不是暫停狀態,就呼叫暫停方法,並更新按鈕文字為 播放 • 暫停方法:video.pause() 22
23.
HTML5 Basic http://MobileDev.TW 5-4.加上播放進度與音量控制項 23
24.
HTML5 Basic http://MobileDev.TW 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
25.
HTML5 Basic http://MobileDev.TW 6.CANVAS 25
26.
HTML5 Basic http://MobileDev.TW 6.繪圖 Canvas 使用JavaScript在網頁上畫圖 定義出一個矩形,然後控制裡面的每一個pixel 首先要先建立一個Canvas元件 canvas
id=myCanvas width=200 height=100/canvas Canvas本身並沒有辦法畫圖,要透過JavaScript 26
27.
HTML5 Basic http://MobileDev.TW 6-1.繪圖-矩形 27
28.
HTML5 Basic http://MobileDev.TW 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
29.
HTML5 Basic http://MobileDev.TW 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”;
30.
HTML5 Basic http://MobileDev.TW 6-2.線與圓 6-2-1-1.Lab: 請畫出以下圖形 30
31.
HTML5 Basic http://MobileDev.TW 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
32.
HTML5 Basic http://MobileDev.TW 6-2.線與圓 6-2-2-1.Lab: 請畫出四分之一圓 32
33.
HTML5 Basic http://MobileDev.TW 6-2.線與圓 6-2-2-2.Lab: 請畫出奧運圖形(藍、黑、紅、黃、綠) 33
34.
HTML5 Basic http://MobileDev.TW 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
35.
HTML5 Basic http://MobileDev.TW 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
36.
HTML5 Basic http://MobileDev.TW 6-4.放圖片 36 6-4-1Lab: 取出女生的頭
37.
HTML5 Basic http://MobileDev.TW 6-4.放圖片 37 6-4-2Lab:馬力歐向前衝 任務一: 按按鈕會前進 任務二: 用鍵盤控制
38.
HTML5 Basic http://MobileDev.TW 7.表單相關 38
39.
HTML5 Basic http://MobileDev.TW 1.email •
將input type設定為email • 送出表單前會先檢查是否為email格式 • iPhone上鍵盤會出現@ Firefox跳出警告 Chrome跳出警告 Opera跳出警告 39
40.
HTML5 Basic http://MobileDev.TW 2.url •
將input type設定為url • 送出表單前會先檢查是否為網址格式 • iPhone上鍵盤會出現.com Firefox跳出警告 Chrome跳出警告 Opera跳出警告 40
41.
HTML5 Basic http://MobileDev.TW 3.number •
將input type設定為number • 可限定最小值min, 最大值max, 每次增加step Chrome 旁邊出現小小的上下按鈕 Opera 旁邊出現小小的上下按鈕 但數字的大小沒顯示好 41
42.
HTML5 Basic http://MobileDev.TW 4.range •
將input type設定為range • 可限定最小值min, 最大值max, 每次增加step Chrome 42 • Lab • 顯示range的值在range元件旁邊,會自動更新數值
43.
HTML5 Basic http://MobileDev.TW 5.date
picker • 將input type設定為date 43 Chrome • Lab • 取得使用者所選擇的日期
44.
HTML5 Basic http://MobileDev.TW 6.color •
將input type設定為color 44 • Lab • 取得使用者所選擇的顏色 • 並設定為網頁背景顏色
45.
HTML5 Basic http://MobileDev.TW 7.Progress
Bar progress id=bar value=10 max=100 • 可設定最大值max, 目前值value Chrome 45
46.
HTML5 Basic http://MobileDev.TW 7.Progress
Bar 46 Lab 工作清單結合進度狀態顯示 提示 透過CheckBox的 checked屬性,判斷 是否為true,即可得 知該選項是否被勾選 了
47.
HTML5 Basic http://MobileDev.TW 8.meter meter
id=myMeter max=1500 min=0 value=500 low=150 high=1350/meter • 可設定最大值max, 最小值,目前值value • 過大的警戒臨界值high,過小的警戒臨界值low Chrome 47
48.
HTML5 Basic http://MobileDev.TW 9.placeholder •
將input 增加placeholder屬性 48
49.
HTML5 Basic http://MobileDev.TW 8.GEOLOCATION 49
50.
HTML5 Basic http://MobileDev.TW 1.取得地理位置 1.
建立一顆按鈕,按下去之後開始動作 2. 確認是否有支援地理位置抓取 3. 呼叫取得地理位置的方法 • 設定成功取得位置後要做的事情 • 設定取得位置失敗要做的事情 navigator.geolocation.getCurrentPosition (successCallback, errorCallback); 50
51.
HTML5 Basic http://MobileDev.TW 2.運用Google
Map • 取得經度與緯度的值 • 組合出google map的連結 • https://maps.google.com.tw/ • ?q=latValue+,+lonValue 51
52.
HTML5 Basic http://MobileDev.TW 2.運用Google
Map 9-2-1.Lab 直接去Google Map 提示:改變目前視窗的網址 52
53.
HTML5 Basic http://MobileDev.TW 3.不斷更新現在位置 •
改用navigator.geolocation.watchPosition • 可持續取得位置 • 不用時呼叫clearWatch • window.navigator.geolocation.clearWatch( watc hPositionObject ) 53
54.
HTML5 Basic http://MobileDev.TW 9.DRAGDROP 54
55.
HTML5 Basic http://MobileDev.TW 拖拉翻譯器 1. Ryan 2. David 3. John 1. 萊恩 2. 大衛 3. 約翰 55
56.
HTML5 Basic http://MobileDev.TW 拖拉翻譯器 •
準備一個純文字檔 • 在網頁中規劃一個div與一個textarea • 拖放的4個事件 • dragenter:拖進該區域 • dragleave:拖離該區域 • dragover:停留在該區域 • drop:放下 56
57.
HTML5 Basic http://MobileDev.TW 拖拉翻譯器 1.
頁面載入時,即觀察這4個事件 2. 拖進該區域時,區域變成紅色,並顯示Drop it! 3. 拖離該區域時,恢復為藍色,文字為Come here. 4. 拖放於該區域時,取得該檔案,進行轉換 5. 確認該檔案為文字檔 6. 讀出內容,進行翻譯 7. 翻譯完後,顯示於textarea 57
58.
HTML5 Basic http://MobileDev.TW Lab.餵食笑臉 58 蘋果 毒蘋果
59.
HTML5 Basic http://MobileDev.TW 10.離線網頁 59
60.
HTML5 Basic http://MobileDev.TW Web
App最害怕…..Offline 可連線時,將網 頁儲存一份於快 取中,離線時, 就讀取這一份快 取的檔案 60
61.
HTML5 Basic http://MobileDev.TW Web
Server 設定步驟 • 在Web Server上設置.htaccess,加上這一行: • AddType text/cache-manifest .manifest • 將Apache上的httpd.conf,修改: Directory / Options FollowSymLinks AllowOverride All /Directory 61
62.
HTML5 Basic http://MobileDev.TW 網頁設定步驟 •
建立一個 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
63.
HTML5 Basic http://MobileDev.TW 如何更新快取 •
直接更新manifest檔案 • 用JavaScript applicationCache.update() • 可監聽以下事件瞭解現況 • checking:正在檢查更新或準備第一次下載manifest • noupdate:manifest沒有變動時 • downloading:正在下載manifest列出的檔案時 • progress:相關檔案都下載好時 • updateready:更新快取完畢,準備替換成最新的快取之前 63
64.
HTML5 Basic http://MobileDev.TW 11.WEB
WORKERS 64
65.
HTML5 Basic http://MobileDev.TW Web
Worker • 多執行緒進行運算 • 無法共享主執行緒變數 • 無法直接變更window • 無法直接變更document • 傳送訊息回主執行緒 Main Thread New Thread make new thread passing messagespassing messages 65
66.
HTML5 Basic http://MobileDev.TW Web
Worker • 避免瀏覽器當掉,停住於某一個龐雜的計算script • 使用Web Worker來計算2~1000000是否為質數 • 建立一個新的Web Worker來跑一隻JavaScript • 該檔案計算2~1000000是否為質數 • 過程中需將進度回傳給主執行緒 • 最後將結果也送回主執行緒 66
67.
HTML5 Basic http://MobileDev.TW Web
Worker • 建立新執行緒 • 從新執行緒傳遞資料給主執行緒 • 主執行緒接收新執行緒的訊息 67