SlideShare a Scribd company logo
APIs
HTML5
HTML5 JavaScript APIs
jsconf.eu 2009
2022
2022 =
two completely
interoperable
implementations
CSS 2.1
HTML5
Web Forms
Audio/Video
Canvas
Offline
Drag & Drop
Editable
History API
Undo
X-Domain
Messaging
HTML5
“HTML5”
“HTML5”
•Web Forms 2.0
•Audio & Video
•Canvas
•Offline
•Storage
•Geolocation
•Workers
“HTML5”
•Web Forms 2.0
•Audio & Video
•Canvas
•Offline
•Storage
•Geolocation
•Workers
“HTML5”
•Web Forms 2.0
•Audio & Video
•Canvas
•Offline
•Storage
•Geolocation
•Workers
Web Forms 2.0
Actual search for "web forms", wtf? http://tr.im/webforms_pic ➙
"JavaScript is only good
for image roll overs &
form validation"
"JavaScript is only good
for image roll overs &
form validation"
:hover
"JavaScript is only good
for image roll overs &
form validation"
.hasFeature('WebForms', '2.0')
"JavaScript is only good
for image roll overs &
form validation"
awesome shit"
.hasFeature('WebForms', '2.0')
HTML5 JavaScript APIs
var f = document.querySelector('form');
f.onsubmit = function () {
if ( this.checkValidity() ) {
alert("It's all okay");
} else {
alert("Something's gone wrong...");
return false;
}
};
Less JavaScript
on donkey work
==
more JavaScript
on awesome work.
HTML5 JavaScript APIs
HTML5 JavaScript APIs
Native Media
Elements
<object classid="clsid:d27cdb6e-a
height="344" codebase="http://dow
flash/swflash.cab#version=6,0,40,
<param name="allowFullScreen" val
<param name="allowscriptaccess" v
<param name="src" value="http://w
<param name="allowfullscreen" val
<embed type="application/x-shockw
src="http://www.youtube.com/v/oHg
allowscriptaccess="always" allowf
</embed>
</object>
<video src="dizzy.ogv" />
HTML5 JavaScript APIs
<video>
<source src="dizzy.ogv" />
<source src="dizzy.mp4" />
</video>
?
<video>
<source src="dizzy.ogv" />
<source src="dizzy.mp4" />
</video>
<video>
<source src="dizzy.ogv" />
<source src="dizzy.mp4" />
<!-- QuickTime support -->
<object><param></object>
</video>
<video>
<source src="dizzy.ogv" />
<source src="dizzy.mp4" />
<!-- QuickTime support -->
<object><param></object>
<!-- down to flash -->
<object><param></object>
</video>
<video>
<source src="dizzy.ogv" />
<source src="dizzy.mp4" />
</video>
HTML5 JavaScript APIs
if (video.paused) {
if (video.ended) {
video.currentTime = 0;
}
video.play();
} else {
video.pause();
}
if (video.paused) {
if (video.ended) {
video.currentTime = 0;
}
video.play();
} else {
video.pause();
}
if (video.paused) {
if (video.ended) {
video.currentTime = 0;
}
video.play();
} else {
video.pause();
}
if (video.paused) {
if (video.ended) {
video.currentTime = 0;
}
video.play();
} else {
video.pause();
}
addEvent(
video,
'timeupdate',
function () {
positon.innerHTML =
➥ asTime(this.currentTime);
}
);
addEvent(
video,
'timeupdate',
function () {
positon.innerHTML =
➥ asTime(this.currentTime);
}
);
addEvent(
video,
'timeupdate',
function () {
positon.innerHTML =
➥ asTime(this.currentTime);
}
);
•play(), pause()
•paused, ended, currentTime
•canplay, timeupdate, ended
•and a bunch more.
•Bugs tend to be rather
quiet...shhh...
•Firefox needs the right
content-type
•Safari will plough ahead
Accessibility?
http://open.bbc.co.uk/rad/demos/html5/rdtv/episode2/
Canvas
(+ excanvas.js)
HTML5 JavaScript APIs
HTML5 JavaScript APIs
<!DOCTYPE html>
<html>
<head>
<title>Canvas</title>
</head>
<body>
<canvas></canvas>
</body>
</html>
var ctx = canvas.getContext('2d');
var ctx = canvas.getContext('2d');
// Create radial gradient
var grad = ctx.createRadialGradient(0,0,0,0,0,600);
var ctx = canvas.getContext('2d');
// Create radial gradient
var grad = ctx.createRadialGradient(0,0,0,0,0,600);
grad.addColorStop(0, '#E4E4E4');
grad.addColorStop(1, '#000');
var ctx = canvas.getContext('2d');
// Create radial gradient
var grad = ctx.createRadialGradient(0,0,0,0,0,600);
grad.addColorStop(0, '#E4E4E4');
grad.addColorStop(1, '#000');
// assign gradients to fill
ctx.fillStyle = grad;
var ctx = canvas.getContext('2d');
// Create radial gradient
var grad = ctx.createRadialGradient(0,0,0,0,0,600);
grad.addColorStop(0, '#E4E4E4');
grad.addColorStop(1, '#000');
// assign gradients to fill
ctx.fillStyle = grad;
// draw 600x600 fill
ctx.fillRect(0,0,600,600);
HTML5 JavaScript APIs
ctx.toDataURL("image/png");
ctx.toDataURL("image/png");
data:image/
png;base64,iVBORw0KGgoAAAANSUhEUgAAAMgAAADICAYAAACtWK6eAAAFxUlEQVR4Ae3dQW5jORAEUXvQ97+yez
CzNQpNyPwdIp+XJkVlRTKgheGvz69/fz78IIDAtwT+
+fa3fokAAv8RIIiLgMBAgCADHEsIEMQdQGAgQJABjiUECOIOIDAQIMgAxxICBHEHEBgIEGSAYwkBgrgDCAwECDLAs
YQAQdwBBAYCBBngWEKAIO4AAgMBggxwLCFAEHcAgYEAQQY4lhAgiDuAwECAIAMcSwj8+nEEn58/
fuQfHehf6/8Ik01rBHyCrPGy+zICBLmscOOuESDIGi+7LyNAkMsKN
+4aAYKs8bL7MgIEuaxw464RIMgaL7svI0CQywo37hoBgqzxsvsyAgS5rHDjrhEgyBovuy8jQJDLCjfuGgGCrPGy
+zICBLmscOOuESDIGi+7LyNAkMsKN
+4aAYKs8bL7MgIEuaxw464RIMgaL7svI0CQywo37hoBgqzxsvsyAgS5rHDjrhEgyBovuy8jQJDLCjfuGgGCrPGy
+zICBLmscOOuESDIGi+7LyNAkMsKN+4aAYKs8bL7MgI//3R3T1m/
7AqdPa5PkLP7Nd2LBAjyIkAvP5sAQc7u13QvEiDIiwC9/
GwCBDm7X9O9SIAgLwL08rMJEOTsfk33IgGCvAjQy88mQJCz+zXdiwR+/i/pLwba/fLPj7/zPe5fH1+7R3P+BgI
+QTZAdeQ5BAhyTpcm2UCAIBugOvIcAgQ5p0uTbCBAkA1QHXkOAYKc06VJNhAgyAaojjyHAEHO6dIkGwgQZANUR55D
gCDndGmSDQQIsgGqI88hQJBzujTJBgIE2QDVkecQIMg5XZpkAwGCbIDqyHMIEOScLk2ygQBBNkB15DkECHJOlybZQ
IAgG6A68hwCBDmnS5NsIECQDVAdeQ4BgpzTpUk2ECDIBqiOPIcAQc7p0iQbCBBkA1RHnkOAIOd0aZINBAiyAaojzy
FAkHO6NMkGAgTZANWR5xC47ununrJ+zuV9YhKfIE9Q9h5vS4Agb1ud4E8QIMgTlL3H2xIgyNtWJ/
gTBAjyBGXv8bYECPK21Qn+BAGCPEHZe7wtAYK8bXWCP0GAIE9Q9h5vS+C6v6TXm/r8O1/j/vHla9y/vRo
+Qb7F4pcI/E
+AIG4CAgMBggxwLCFAEHcAgYEAQQY4lhAgiDuAwECAIAMcSwgQxB1AYCBAkAGOJQQI4g4gMBAgyADHEgIEcQcQGAg
QZIBjCQGCuAMIDAQIMsCxhABB3AEEBgIEGeBYQoAg7gACAwGCDHAsIUAQdwCBgQBBBjiWECCIO4DAQIAgAxxLCBDE
HUBgIECQAY4lBAjiDiAwECDIAMcSAgRxBxAYCBBkgGMJAU93j90BT1lvFeITpNWHNDECBIkVIk6LAEFafUgTI0CQW
CHitAgQpNWHNDECBIkVIk6LAEFafUgTI0CQWCHitAgQpNWHNDECBIkVIk6LAEFafUgTI0CQWCHitAgQpNWHNDECBI
kVIk6LAEFafUgTI0CQWCHitAgQpNWHNDECBIkVIk6LAEFafUgTI0CQWCHitAgQpNWHNDECBIkVIk6LAEFafUgTI0C
QWCHitAgQpNWHNDECBIkVIk6LAEFafUgTI0CQWCHitAgQpNWHNDECBIkVIk6LAEFafUgTI0CQWCHitAgQpNWHNDEC
BIkVIk6LAEFafUgTI0CQWCHitAgQpNWHNDECBIkVIk6LAEFafUgTI0CQWCHitAgQpNWHNDECBIkVIk6LAEFafUgTI
0CQWCHitAgQpNWHNDECBIkVIk6LAEFafUgTI0CQWCHitAgQpNWHNDECBIkVIk6LAEFafUgTI0CQWCHitAgQpNWHND
ECBIkVIk6LAEFafUgTI0CQWCHitAgQpNWHNDECBIkVIk6LAEFafUgTI0CQWCHitAgQpNWHNDECBIkVIk6LAEFafUg
TI0CQWCHitAgQpNWHNDECBIkVIk6LAEFafUgTI0CQWCHitAgQpNWHNDECvwHnaxGSkEUPVAAAAABJRU5ErkJggg==
data:image/png;base64,...
Canvas
+
drawImage
+
Video
=
HTML5 JavaScript APIs
HTML5 JavaScript APIs
HTML5 JavaScript APIs
ctx.getImageData()
http://blog.mozbox.org/post/2009/04/12/Firefox-35%3A-a-new-experiment-with-Canvas-Video
frame = ctx.getImageData(0, 0, w, h);
i = 0; // or via loop
r = frame.data[i + 0];
g = frame.data[i + 1];
b = frame.data[i + 2];
ctx.translate(canvas.width/2, canvas.height/2);
ctx.scale(-1, 1);
ctx.translate(-canvas.width/2, -canvas.height/2);
ctx.drawImage(
video, 0, 0,
video.width,
video.height,
0, 0,
canvas.width,
canvas.height);
Don't use for evil
Offline Applications
Offline Applications
Offline Apps
•Application cache
•Events: offline, online
•navigator.onLine property
http://icanhaz.com/rubiks
Enable
<!DOCTYPE html>
<html manifest="my.manifest">
<body>
<!-- my page -->
</body>
</html>
CACHE MANIFEST
images/shade.jpg
images/bin.jpg
#version 13
my.manifest
Cache
•First line: CACHE MANIFEST
•Requires text/cache-manifest
•Recommend using versioning
•window.applicationCache
•Add it last!
The process
Browser: request Server: serve all
Browser: I have a
manifest, cache
assets
Server: serve
manifest assets
Browser:
applicationCache
updated
Browser: reload
Browser: only
request manifest
file
Server: 304 Not
Modified
Browser: serve
locally
Storage
(giant cookies)
SQLite
key/val
key/value
sessionStorage
localStorage
.setItem(key, value);
.getItem(key);
window based
key/value
sessionStorage
localStorage
.setItem(key, value);
.getItem(key);
window based
domain based
HTML5 JavaScript APIs
SQLite
"User agents must
implement the SQL dialect
supported by Sqlite 3.6.19"
Another one that fails
super silently :(
db = openDatabase("demo", "1.0",
"sample", 200000);
db.transaction(function (tx) {
tx.executeSql('SELECT * FROM tweets
WHERE mention = ?', [mention], function
(tx, results) {
// do something with results
});
});
db = openDatabase("demo", "1.0",
"sample", 200000);
db.transaction(function (tx) {
tx.executeSql('SELECT * FROM tweets
WHERE mention = ?', [mention], function
(tx, results) {
// do something with results
});
});
db = openDatabase("demo", "1.0",
"sample", 200000);
db.transaction(function (tx) {
tx.executeSql('SELECT * FROM tweets
WHERE mention = ?', [mention], function
(tx, results) {
// do something with results
});
});
db = openDatabase("demo", "1.0",
"sample", 200000);
db.transaction(function (tx) {
tx.executeSql('SELECT * FROM tweets
WHERE mention = ?', [mention], function
(tx, results) {
// do something with results
});
});
HTML5 JavaScript APIs
Geolocation
Geolocation
HTML5 JavaScript APIs
Not always accurate!
navigator
.geolocation
.getCurrentPosition(
success,
err
);
HTML5 JavaScript APIs
Web Workers
•"Threads"
•Native or via Gears (or
setTimeout hack?)
•Sandboxed
•Debugging?
HTML5 JavaScript APIs
http://html5demos.com/worker
•importScripts
•postMessage
•onmessage
•onconnect
var w = new Worker('worker.js');
w.onmessage = function (event) {
alert("msg: " + event.data);
};
w.postMessage('run');
app.html
importScripts('xhr.js', 'db.js');
onmessage = function (event) {
if (event.data == 'run') {
run();
}
};
function run() {
var data = doCrazyNumberCrunch();
postMessage(data);
}
worker.js
importScripts('xhr.js', 'db.js');
onmessage = function (event) {
if (event.data == 'run') {
run();
}
};
function run() {
var data = doCrazyNumberCrunch();
postMessage(data);
}
worker.js
importScripts('xhr.js', 'db.js');
onmessage = function (event) {
if (event.data == 'run') {
run();
}
};
function run() {
var data = doCrazyNumberCrunch();
postMessage(data);
}
worker.js
And a
lot
more...
Attributes: data-*, itemProp,
sandbox (on iframes)
Microdata API,
datagrid, XHR2 &
upload progress
Drag & Drop,
History manager ARIA overlap
querySelector
<progress>
<meter>
<datalist>
<ruby>
http://www.whatwg.org/html5/
http://tr.im/whatwg_complete
irc://irc.freenode.net/#whatwg
Remy
Sharp
@rem
JavaScript Conference:
full-frontal.org
http://html5demos.com
Links: http://tr.im/rs_jsconfeu
(another)
Pro tip: cats can't
code for crap

More Related Content

PDF
Hospital Management System (2nd Task)
DOCX
Alumni information database abstract
PPTX
Comparing 30 MongoDB operations with Oracle SQL statements
PPTX
Electricity online billl payment final
PDF
online job protel (1).pptx.pdf
PDF
Bike sharing android application
PPTX
Intro to dbms
PDF
Harsh Mathur Final Year Project Report on Restaurant Billing System
Hospital Management System (2nd Task)
Alumni information database abstract
Comparing 30 MongoDB operations with Oracle SQL statements
Electricity online billl payment final
online job protel (1).pptx.pdf
Bike sharing android application
Intro to dbms
Harsh Mathur Final Year Project Report on Restaurant Billing System

What's hot (20)

PDF
Artificial Intelligence 2020
PPTX
Developing with the Modern App Stack: MEAN and MERN (with Angular2 and ReactJS)
PPTX
Online job portal
PPTX
Database, 3 Distribution Design
PPT
Modul 4 1 data link layer
DOCX
Hostpital management system(srs)
DOCX
Hospital Management system Database design
PPT
Project presentation
DOCX
Library management system se project
PPTX
Job portal Application
PDF
Library management project
PPTX
Job Portal
 
DOCX
Home delivery restaurants
DOC
Sequnce diagram for ONLINE EXAMINATION SYSTEM
PPTX
Hospital Management System
PDF
lake city institute of technology
PPT
Virtual Job Portal System
PPTX
School Management System
PPT
Library and member management system (lamms) by vikas sharma
PDF
DBMS 3 | ER Diagram to Relational Schema
Artificial Intelligence 2020
Developing with the Modern App Stack: MEAN and MERN (with Angular2 and ReactJS)
Online job portal
Database, 3 Distribution Design
Modul 4 1 data link layer
Hostpital management system(srs)
Hospital Management system Database design
Project presentation
Library management system se project
Job portal Application
Library management project
Job Portal
 
Home delivery restaurants
Sequnce diagram for ONLINE EXAMINATION SYSTEM
Hospital Management System
lake city institute of technology
Virtual Job Portal System
School Management System
Library and member management system (lamms) by vikas sharma
DBMS 3 | ER Diagram to Relational Schema
Ad

Viewers also liked (20)

PDF
Javascript Best Practices
PDF
Echo HTML5
PDF
HTML5--The 30,000' View (A fast-paced overview of HTML5)
PPTX
Getting Started with HTML5 in Tech Com (STC 2012)
PPT
JavaScript - An Introduction
PDF
Scalable JavaScript Application Architecture
PDF
JavaScript Programming
PDF
Writing Efficient JavaScript
PDF
Developing architects by design
PDF
TEDx Manchester: AI & The Future of Work
PDF
JavaScript & HTML5 - Brave New World
PDF
FrenchKit: End to End Application Development with Swift
PDF
課程名稱:八屏一雲時代來臨 教你HTML5六小時打通(1)
PDF
JavaScript
PPT
Flex security
PPT
PDF
Business Interfaces using Virtual Objects, Visual-Force Forms and JavaScript
PPTX
Verteilte versionsverwaltung mit Team Foundation Server 2012
PDF
Universal JS Web Applications with React - Luciano Mammino - Codemotion Rome ...
PDF
Angular (v2 and up) - Morning to understand - Linagora
Javascript Best Practices
Echo HTML5
HTML5--The 30,000' View (A fast-paced overview of HTML5)
Getting Started with HTML5 in Tech Com (STC 2012)
JavaScript - An Introduction
Scalable JavaScript Application Architecture
JavaScript Programming
Writing Efficient JavaScript
Developing architects by design
TEDx Manchester: AI & The Future of Work
JavaScript & HTML5 - Brave New World
FrenchKit: End to End Application Development with Swift
課程名稱:八屏一雲時代來臨 教你HTML5六小時打通(1)
JavaScript
Flex security
Business Interfaces using Virtual Objects, Visual-Force Forms and JavaScript
Verteilte versionsverwaltung mit Team Foundation Server 2012
Universal JS Web Applications with React - Luciano Mammino - Codemotion Rome ...
Angular (v2 and up) - Morning to understand - Linagora
Ad

More from Remy Sharp (20)

PDF
HTML5: where flash isn't needed anymore
PDF
Yearning jQuery
PDF
Is HTML5 Ready? (workshop)
PDF
Forget the Web
PDF
Interaction Implementation
PDF
jQuery: out with the old, in with the new
PDF
HTML5: huh, what is it good for?
PDF
HTML5 tutorial: canvas, offfline & sockets
PDF
Developing for Mobile
PDF
Browsers with Wings
PDF
Webapps without the web
PDF
TwitterLib.js
PDF
HTML5: friend or foe (to Flash)?
PDF
codebits 2009 HTML5 JS APIs
PDF
iPhone Appleless Apps
PDF
jQuery Loves Developers - Oredev 2009
PDF
Write Less Do More
PDF
HTML5 & Friends
PDF
HTML5 JS APIs
PDF
jQuery Loves Developers - SWDC2009
HTML5: where flash isn't needed anymore
Yearning jQuery
Is HTML5 Ready? (workshop)
Forget the Web
Interaction Implementation
jQuery: out with the old, in with the new
HTML5: huh, what is it good for?
HTML5 tutorial: canvas, offfline & sockets
Developing for Mobile
Browsers with Wings
Webapps without the web
TwitterLib.js
HTML5: friend or foe (to Flash)?
codebits 2009 HTML5 JS APIs
iPhone Appleless Apps
jQuery Loves Developers - Oredev 2009
Write Less Do More
HTML5 & Friends
HTML5 JS APIs
jQuery Loves Developers - SWDC2009

HTML5 JavaScript APIs