JavaScript APIs
HTML5
Remy Sharp @rem [Link]
JavaScript APIs
HTML5 & friends!
Remy Sharp @rem [Link]
HTML5: 2022?
Bollocks.
APIs
Canvas Drag & Drop History Inline Editing Messaging Offline Apps Video & Audio Geolocation Local Storage Selectors Server Events Web Sockets Workers
APIs
Canvas Drag & Drop History Inline Editing Messaging Offline Apps Video & Audio Geolocation Local Storage Selectors Server Events Web Sockets Workers
APIs
Canvas Drag & Drop History Inline Editing Messaging Offline Apps Video & Audio Geolocation Local Storage Selectors Server Events Web Sockets Workers
APIs
Canvas Drag & Drop History Inline Editing Messaging Offline Apps Video & Audio Geolocation Local Storage Selectors Server Events Web Sockets Workers
APIs
Canvas Drag & Drop? History Inline Editing Messaging Offline Apps Video & Audio Geolocation Local Storage Selectors Server Events Web Sockets Workers
Documentation
[Link]/html5/ [Link]/html5/ irc://[Link]/#whatwg
Canvas
Canvas
[Link]('canvas').getContext("2d")
[Link]
[Link]('canvas').getContext("2d")
[Link]
Drag'n Drop
Drag'n Drop
Drag & Drop
draggable="true" events: dragstart, drop, etc [Link]
<div draggable="true">drag me</div> <script> [Link]('div').addEventListener( "dragstart", function (e) { [Link]("arbitrary","data"); return true; }, true); </script>
<div draggable="true">drag me</div> <script> [Link]('div').addEventListener( "dragstart", function (e) {
???
[Link]("arbitrary","data"); return true; }, true); </script>
[Link]('dragover', function (e) { [Link](); }, true);
[Link]('drop', function (e) { [Link](); alert([Link]('arbitrary')); }, true);
[Link]('dragover', function (e) { [Link](); }, true);
[Link]('drop', function (e) { [Link](); alert([Link]('arbitrary')); }, true);
[Link]('dragover', function (e) { [Link](); }, true);
[Link]('drop', function (e) { [Link](); alert([Link]('arbitrary')); }, true);
[Link]
[Link]
Of fline Applications
Of fline Applications
Of fline Apps
Application cache Events: offline, online [Link] property
Enable
<html manifest="[Link]" >
[Link]
CACHE MANIFEST images/[Link] images/[Link]
Cache
First line: CACHE MANIFEST Requires text/cache-manifest Recommend using versioning [Link]
Cache
On load will hit [Link]
Cache
On load will hit [Link] Change manifest: trigger reload
Cache
On load will hit [Link] Change manifest: trigger reload [Link]() force
Cache
On load will hit [Link] Change manifest: trigger reload [Link]() force Cache events
Firefox
[Link]( 'offline', // online too online, // function true );
function online() { if ([Link] == false) { // gone offline } else { // else we're online } }
[Link]
[Link]
[Link]
Geolocation
Geolocation
Not always accurate!
navigator .geolocation .getCurrentPosition( success, err );
Messaging
Messaging
Messaging
Communicate across domains Across window object With Workers String transfer only
.postMessage(str) .onMessage(event)
[Link] == str
Cross Domain
document .getElementById("iframe") .contentWindow .postMessage("my message");
The Catcher
[Link]( "message", function(e){ if ([Link] !== "[Link] { return; } alert([Link] + " said: " + [Link]); }, false );
Web Workers
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
[Link]
Storage
Storage
1. sessionStorage
1. sessionStorage 2. localStorage
1. sessionStorage 2. localStorage 3. database storage
Storage
[Link](key, value)
[Link](key)
Storage
[Link](key, value)
[Link](key)
And more!
Remy Sharp
@rem remy@[Link] [Link] [Link] [Link]