HTML5 JS APIs

JavaScript APIs HTML5 Remy Sharp @rem standards.next

JavaScript APIs HTML5 & friends! Remy Sharp @rem standards.next

HTML5: 2022?

Bollocks.

APIs •Canvas •Geolocation •Drag & Drop •Local Storage •History •Selectors •Inline Editing •Server Events •Messaging •Web Sockets •Of ine Apps •Workers •Video & Audio

APIs •Canvas •Geolocation •Drag & Drop? •Local Storage •History •Selectors •Inline Editing •Server Events •Messaging •Web Sockets •Of ine Apps •Workers •Video & Audio

Documentation

www.whatwg.org/html5/ dev.w3.org/html5/ irc://irc.freenode.net/#whatwg

Canvas

document.querySelector('canvas').getContext("2d") http://tr.im/pRkz

Drag'n Drop

Drag & Drop •draggable="true" •events: dragstart, drop, etc •event.transferData

<div draggable="true">drag me</div> <script> document.querySelector('div').addEventListener( "dragstart", function (e) { e.dataTransfer.setData("arbitrary","data"); return true; }, true); </script>

<div draggable="true">drag me</div> <script> document.querySelector('div').addEventListener( "dragstart", function (e) { ??? e.dataTransfer.setData("arbitrary","data"); return true; }, true); </script>

el.addEventListener('dragover', function (e) { e.preventDefault(); }, true); el.addEventListener('drop', function (e) { e.stopPropagation(); alert(e.dataTransfer.getData('arbitrary')); }, true);

http://html5demos.com/drag

Of ine Applications

Of ine Apps •Application cache •Events: of ine, online •navigator.onLine property

Enable <html manifest="my.manifest" >

my.manifest CACHE MANIFEST images/shade.jpg images/bin.jpg

Cache •First line: CACHE MANIFEST •Requires text/cache-manifest •Recommend using versioning •window.applicationCache

Cache •On load will hit my.manifest

Cache •On load will hit my.manifest •Change manifest: trigger reload

Cache •On load will hit my.manifest •Change manifest: trigger reload •applicationCache.update() force

Cache •On load will hit my.manifest •Change manifest: trigger reload •applicationCache.update() force •Cache events

Firefox

window.addEventListener( 'offline', // online too online, // function true );

function online() { if (navigator.onLine == false) { // gone offline } else { // else we're online } }

http://html5demos.com/ofﬂine

navigator.onLine

Geolocation

Not always accurate!

navigator .geolocation .getCurrentPosition( success, err );

Messaging

Messaging •Communicate across domains •Across window object •With Workers •String transfer only

.postMessage(str) .onMessage(event) event.data == str

Cross Domain document .getElementById("iframe") .contentWindow .postMessage("my message");

The Catcher window.addEventListener( "message", function(e){ if (e.origin !== "http://example.com") { return; } alert(e.origin + " said: " + e.data); }, false );

Web Workers

•Threads

•Threads •Native or via Gears

•Threads •Native or via Gears •Sandboxed

•Threads •Native or via Gears •Sandboxed •Debugging?

•importScripts •postMessage •onmessage •onconnect

Without

http://html5demos.com/worker

Storage

1. sessionStorage

1. sessionStorage 2. localStorage

1. sessionStorage 2. localStorage 3. database storage

Storage sessionStorage.setItem(key, value) sessionStorage.getItem(key)

Storage localStorage.setItem(key, value) localStorage.getItem(key)

And more! Remy Sharp @rem remy@leftlogic.com html5demos.com remysharp.com full-frontal.org

http://www.labnol.org	11186
http://www.slideshare.net	1058
http://blog.dreamcss.com	419
http://congdongthongtin.com	315
http://www.askqtp.com	220
http://www.tozoy.com	198
http://nvd-sap.dowdensite.com	151
http://blog.jeanbaptistedumont.com	71
http://www.learnnpublish.com	47
http://translate.googleusercontent.com	26
http://ehealth.kcl.ac.uk	23
http://localhost	13
http://firecracker.ytnobody.net	10
http://tingletech.tumblr.com	8
http://paper.li	7
http://cdn.pearltrees.com	7
http://lanyrd.com	7
http://dumont.typepad.com	6
http://tech-buzz.net	5
http://www.lifeyun.com	5
http://core.traackr.com	4
http://123.preprommtv.appspot.com	4
http://fruendt-online.de	4
http://127.0.0.1	4
http://techberry.blogspot.com	3
http://hi.chibaole.com	3
http://webcache.googleusercontent.com	3
http://www.mashme.tv	2
http://a0.twimg.com	2
http://www.e-presentations.us	2
http://74.6.117.48	1
http://one-more-site.blogspot.com	1
http://74.125.113.132	1
http://feeds.labnol.org	1
http://mysecretwebsite.blogspot.com	1
http://lumiere.ens.fr	1
http://74.125.93.132	1
http://vnwindowsblog.tk	1
http://twittertim.es	1
http://www.ikmarkcremer.nl	1

HTML5 JS APIs

by Remy Sharp

Accessibility

Categories

Upload Details

Usage Rights

40 Embeds 13,823

Statistics

HTML5 JS APIs Presentation Transcript