javascript apis · apis •canvas •drag & drop •history •inline editing •messaging...

76
JavaScript APIs HTML5 Remy Sharp @rem standards.next

Upload: others

Post on 28-Jul-2020

6 views

Category:

Documents


0 download

TRANSCRIPT

Page 1: JavaScript APIs · APIs •Canvas •Drag & Drop •History •Inline Editing •Messaging •Of!ine Apps •Video & Audio •Geolocation •Local Storage •Selectors •Server Events

JavaScript APIsHTML5

Remy Sharp@rem

standards.next

Page 2: JavaScript APIs · APIs •Canvas •Drag & Drop •History •Inline Editing •Messaging •Of!ine Apps •Video & Audio •Geolocation •Local Storage •Selectors •Server Events

JavaScript APIsHTML5

Remy Sharp@rem

standards.next

& friends!

Page 3: JavaScript APIs · APIs •Canvas •Drag & Drop •History •Inline Editing •Messaging •Of!ine Apps •Video & Audio •Geolocation •Local Storage •Selectors •Server Events

HTML5: 2022?

Page 4: JavaScript APIs · APIs •Canvas •Drag & Drop •History •Inline Editing •Messaging •Of!ine Apps •Video & Audio •Geolocation •Local Storage •Selectors •Server Events

Bollocks.

Page 5: JavaScript APIs · APIs •Canvas •Drag & Drop •History •Inline Editing •Messaging •Of!ine Apps •Video & Audio •Geolocation •Local Storage •Selectors •Server Events

APIs

•Canvas

•Drag & Drop

•History

•Inline Editing

•Messaging

•Of!ine Apps

•Video & Audio

•Geolocation

•Local Storage

•Selectors

•Server Events

•Web Sockets

•Workers

Page 6: JavaScript APIs · APIs •Canvas •Drag & Drop •History •Inline Editing •Messaging •Of!ine Apps •Video & Audio •Geolocation •Local Storage •Selectors •Server Events

APIs

•Canvas

•Drag & Drop

•History

•Inline Editing

•Messaging

•Of!ine Apps

•Video & Audio

•Geolocation

•Local Storage

•Selectors

•Server Events

•Web Sockets

•Workers

Page 7: JavaScript APIs · APIs •Canvas •Drag & Drop •History •Inline Editing •Messaging •Of!ine Apps •Video & Audio •Geolocation •Local Storage •Selectors •Server Events

APIs

•Canvas

•Drag & Drop

•History

•Inline Editing

•Messaging

•Of!ine Apps

•Video & Audio

•Geolocation

•Local Storage

•Selectors

•Server Events

•Web Sockets

•Workers

Page 8: JavaScript APIs · APIs •Canvas •Drag & Drop •History •Inline Editing •Messaging •Of!ine Apps •Video & Audio •Geolocation •Local Storage •Selectors •Server Events

APIs

•Canvas

•Drag & Drop

•History

•Inline Editing

•Messaging

•Of!ine Apps

•Video & Audio

•Geolocation

•Local Storage

•Selectors

•Server Events

•Web Sockets

•Workers

Page 9: JavaScript APIs · APIs •Canvas •Drag & Drop •History •Inline Editing •Messaging •Of!ine Apps •Video & Audio •Geolocation •Local Storage •Selectors •Server Events

APIs

•Canvas

•Drag & Drop

•History

•Inline Editing

•Messaging

•Of!ine Apps

•Video & Audio

•Geolocation

•Local Storage

•Selectors

•Server Events

•Web Sockets

•Workers

?

Page 10: JavaScript APIs · APIs •Canvas •Drag & Drop •History •Inline Editing •Messaging •Of!ine Apps •Video & Audio •Geolocation •Local Storage •Selectors •Server Events

Documentation

Page 11: JavaScript APIs · APIs •Canvas •Drag & Drop •History •Inline Editing •Messaging •Of!ine Apps •Video & Audio •Geolocation •Local Storage •Selectors •Server Events

www.whatwg.org/html5/

dev.w3.org/html5/

irc://irc.freenode.net/#whatwg

Page 12: JavaScript APIs · APIs •Canvas •Drag & Drop •History •Inline Editing •Messaging •Of!ine Apps •Video & Audio •Geolocation •Local Storage •Selectors •Server Events
Page 13: JavaScript APIs · APIs •Canvas •Drag & Drop •History •Inline Editing •Messaging •Of!ine Apps •Video & Audio •Geolocation •Local Storage •Selectors •Server Events
Page 14: JavaScript APIs · APIs •Canvas •Drag & Drop •History •Inline Editing •Messaging •Of!ine Apps •Video & Audio •Geolocation •Local Storage •Selectors •Server Events
Page 15: JavaScript APIs · APIs •Canvas •Drag & Drop •History •Inline Editing •Messaging •Of!ine Apps •Video & Audio •Geolocation •Local Storage •Selectors •Server Events

Canvas

Page 16: JavaScript APIs · APIs •Canvas •Drag & Drop •History •Inline Editing •Messaging •Of!ine Apps •Video & Audio •Geolocation •Local Storage •Selectors •Server Events

Canvas

Page 17: JavaScript APIs · APIs •Canvas •Drag & Drop •History •Inline Editing •Messaging •Of!ine Apps •Video & Audio •Geolocation •Local Storage •Selectors •Server Events

document.querySelector('canvas').getContext("2d")

http://tr.im/pRkz

Page 18: JavaScript APIs · APIs •Canvas •Drag & Drop •History •Inline Editing •Messaging •Of!ine Apps •Video & Audio •Geolocation •Local Storage •Selectors •Server Events

document.querySelector('canvas').getContext("2d")

http://tr.im/pRkz

Page 19: JavaScript APIs · APIs •Canvas •Drag & Drop •History •Inline Editing •Messaging •Of!ine Apps •Video & Audio •Geolocation •Local Storage •Selectors •Server Events

Drag'n Drop

Page 20: JavaScript APIs · APIs •Canvas •Drag & Drop •History •Inline Editing •Messaging •Of!ine Apps •Video & Audio •Geolocation •Local Storage •Selectors •Server Events

Drag'n Drop

Page 21: JavaScript APIs · APIs •Canvas •Drag & Drop •History •Inline Editing •Messaging •Of!ine Apps •Video & Audio •Geolocation •Local Storage •Selectors •Server Events

Drag & Drop

•draggable="true"

•events: dragstart, drop, etc

•event.transferData

Page 22: JavaScript APIs · APIs •Canvas •Drag & Drop •History •Inline Editing •Messaging •Of!ine Apps •Video & Audio •Geolocation •Local Storage •Selectors •Server Events

<div draggable="true">drag me</div>

<script>

document.querySelector('div').addEventListener(

"dragstart",

function (e) {

e.dataTransfer.setData("arbitrary","data");

return true;

},

true);

</script>

Page 23: JavaScript APIs · APIs •Canvas •Drag & Drop •History •Inline Editing •Messaging •Of!ine Apps •Video & Audio •Geolocation •Local Storage •Selectors •Server Events

<div draggable="true">drag me</div>

<script>

document.querySelector('div').addEventListener(

"dragstart",

function (e) {

e.dataTransfer.setData("arbitrary","data");

return true;

},

true);

</script>

???

Page 24: JavaScript APIs · APIs •Canvas •Drag & Drop •History •Inline Editing •Messaging •Of!ine Apps •Video & Audio •Geolocation •Local Storage •Selectors •Server Events

el.addEventListener('dragover', function (e) {

e.preventDefault();

}, true);

el.addEventListener('drop', function (e) {

e.stopPropagation();

alert(e.dataTransfer.getData('arbitrary'));

}, true);

Page 25: JavaScript APIs · APIs •Canvas •Drag & Drop •History •Inline Editing •Messaging •Of!ine Apps •Video & Audio •Geolocation •Local Storage •Selectors •Server Events

el.addEventListener('dragover', function (e) {

e.preventDefault();

}, true);

el.addEventListener('drop', function (e) {

e.stopPropagation();

alert(e.dataTransfer.getData('arbitrary'));

}, true);

Page 26: JavaScript APIs · APIs •Canvas •Drag & Drop •History •Inline Editing •Messaging •Of!ine Apps •Video & Audio •Geolocation •Local Storage •Selectors •Server Events

el.addEventListener('dragover', function (e) {

e.preventDefault();

}, true);

el.addEventListener('drop', function (e) {

e.stopPropagation();

alert(e.dataTransfer.getData('arbitrary'));

}, true);

Page 27: JavaScript APIs · APIs •Canvas •Drag & Drop •History •Inline Editing •Messaging •Of!ine Apps •Video & Audio •Geolocation •Local Storage •Selectors •Server Events

http://html5demos.com/drag

Page 28: JavaScript APIs · APIs •Canvas •Drag & Drop •History •Inline Editing •Messaging •Of!ine Apps •Video & Audio •Geolocation •Local Storage •Selectors •Server Events

http://html5demos.com/drag

Page 29: JavaScript APIs · APIs •Canvas •Drag & Drop •History •Inline Editing •Messaging •Of!ine Apps •Video & Audio •Geolocation •Local Storage •Selectors •Server Events

Of!ine Applications

Page 30: JavaScript APIs · APIs •Canvas •Drag & Drop •History •Inline Editing •Messaging •Of!ine Apps •Video & Audio •Geolocation •Local Storage •Selectors •Server Events

Of!ine Applications

Page 31: JavaScript APIs · APIs •Canvas •Drag & Drop •History •Inline Editing •Messaging •Of!ine Apps •Video & Audio •Geolocation •Local Storage •Selectors •Server Events

Of!ine Apps

•Application cache

•Events: of!ine, online

•navigator.onLine property

Page 32: JavaScript APIs · APIs •Canvas •Drag & Drop •History •Inline Editing •Messaging •Of!ine Apps •Video & Audio •Geolocation •Local Storage •Selectors •Server Events

Enable

<html manifest="my.manifest">

Page 33: JavaScript APIs · APIs •Canvas •Drag & Drop •History •Inline Editing •Messaging •Of!ine Apps •Video & Audio •Geolocation •Local Storage •Selectors •Server Events

CACHE MANIFEST

images/shade.jpg

images/bin.jpg

my.manifest

Page 34: JavaScript APIs · APIs •Canvas •Drag & Drop •History •Inline Editing •Messaging •Of!ine Apps •Video & Audio •Geolocation •Local Storage •Selectors •Server Events

Cache

•First line: CACHE MANIFEST

•Requires text/cache-manifest

•Recommend using versioning

•window.applicationCache

Page 35: JavaScript APIs · APIs •Canvas •Drag & Drop •History •Inline Editing •Messaging •Of!ine Apps •Video & Audio •Geolocation •Local Storage •Selectors •Server Events

Cache

•On load will hit my.manifest

Page 36: JavaScript APIs · APIs •Canvas •Drag & Drop •History •Inline Editing •Messaging •Of!ine Apps •Video & Audio •Geolocation •Local Storage •Selectors •Server Events

Cache

•On load will hit my.manifest

•Change manifest: trigger reload

Page 37: JavaScript APIs · APIs •Canvas •Drag & Drop •History •Inline Editing •Messaging •Of!ine Apps •Video & Audio •Geolocation •Local Storage •Selectors •Server Events

Cache

•On load will hit my.manifest

•Change manifest: trigger reload

•applicationCache.update() force

Page 38: JavaScript APIs · APIs •Canvas •Drag & Drop •History •Inline Editing •Messaging •Of!ine Apps •Video & Audio •Geolocation •Local Storage •Selectors •Server Events

Cache

•On load will hit my.manifest

•Change manifest: trigger reload

•applicationCache.update() force

•Cache events

Page 39: JavaScript APIs · APIs •Canvas •Drag & Drop •History •Inline Editing •Messaging •Of!ine Apps •Video & Audio •Geolocation •Local Storage •Selectors •Server Events
Page 40: JavaScript APIs · APIs •Canvas •Drag & Drop •History •Inline Editing •Messaging •Of!ine Apps •Video & Audio •Geolocation •Local Storage •Selectors •Server Events
Page 41: JavaScript APIs · APIs •Canvas •Drag & Drop •History •Inline Editing •Messaging •Of!ine Apps •Video & Audio •Geolocation •Local Storage •Selectors •Server Events

Firefox

Page 42: JavaScript APIs · APIs •Canvas •Drag & Drop •History •Inline Editing •Messaging •Of!ine Apps •Video & Audio •Geolocation •Local Storage •Selectors •Server Events

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

Page 43: JavaScript APIs · APIs •Canvas •Drag & Drop •History •Inline Editing •Messaging •Of!ine Apps •Video & Audio •Geolocation •Local Storage •Selectors •Server Events

function online() {

if (navigator.onLine == false) {

// gone offline

} else {

// else we're online

}

}

Page 44: JavaScript APIs · APIs •Canvas •Drag & Drop •History •Inline Editing •Messaging •Of!ine Apps •Video & Audio •Geolocation •Local Storage •Selectors •Server Events

http://html5demos.com/offline

Page 45: JavaScript APIs · APIs •Canvas •Drag & Drop •History •Inline Editing •Messaging •Of!ine Apps •Video & Audio •Geolocation •Local Storage •Selectors •Server Events

http://html5demos.com/offline

Page 46: JavaScript APIs · APIs •Canvas •Drag & Drop •History •Inline Editing •Messaging •Of!ine Apps •Video & Audio •Geolocation •Local Storage •Selectors •Server Events

navigator.onLine

Page 47: JavaScript APIs · APIs •Canvas •Drag & Drop •History •Inline Editing •Messaging •Of!ine Apps •Video & Audio •Geolocation •Local Storage •Selectors •Server Events

Geolocation

Page 48: JavaScript APIs · APIs •Canvas •Drag & Drop •History •Inline Editing •Messaging •Of!ine Apps •Video & Audio •Geolocation •Local Storage •Selectors •Server Events

Geolocation

Page 49: JavaScript APIs · APIs •Canvas •Drag & Drop •History •Inline Editing •Messaging •Of!ine Apps •Video & Audio •Geolocation •Local Storage •Selectors •Server Events

Not always accurate!

Page 50: JavaScript APIs · APIs •Canvas •Drag & Drop •History •Inline Editing •Messaging •Of!ine Apps •Video & Audio •Geolocation •Local Storage •Selectors •Server Events
Page 51: JavaScript APIs · APIs •Canvas •Drag & Drop •History •Inline Editing •Messaging •Of!ine Apps •Video & Audio •Geolocation •Local Storage •Selectors •Server Events

navigator .geolocation .getCurrentPosition( success, err );

Page 52: JavaScript APIs · APIs •Canvas •Drag & Drop •History •Inline Editing •Messaging •Of!ine Apps •Video & Audio •Geolocation •Local Storage •Selectors •Server Events
Page 53: JavaScript APIs · APIs •Canvas •Drag & Drop •History •Inline Editing •Messaging •Of!ine Apps •Video & Audio •Geolocation •Local Storage •Selectors •Server Events
Page 54: JavaScript APIs · APIs •Canvas •Drag & Drop •History •Inline Editing •Messaging •Of!ine Apps •Video & Audio •Geolocation •Local Storage •Selectors •Server Events

Messaging

Page 55: JavaScript APIs · APIs •Canvas •Drag & Drop •History •Inline Editing •Messaging •Of!ine Apps •Video & Audio •Geolocation •Local Storage •Selectors •Server Events

Messaging

Page 56: JavaScript APIs · APIs •Canvas •Drag & Drop •History •Inline Editing •Messaging •Of!ine Apps •Video & Audio •Geolocation •Local Storage •Selectors •Server Events

Messaging

•Communicate across domains

•Across window object

•With Workers

•String transfer only

Page 57: JavaScript APIs · APIs •Canvas •Drag & Drop •History •Inline Editing •Messaging •Of!ine Apps •Video & Audio •Geolocation •Local Storage •Selectors •Server Events

.postMessage(str)

.onMessage(event)event.data == str

Page 58: JavaScript APIs · APIs •Canvas •Drag & Drop •History •Inline Editing •Messaging •Of!ine Apps •Video & Audio •Geolocation •Local Storage •Selectors •Server Events

Cross Domain

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

Page 59: JavaScript APIs · APIs •Canvas •Drag & Drop •History •Inline Editing •Messaging •Of!ine Apps •Video & Audio •Geolocation •Local Storage •Selectors •Server Events

The Catcher

window.addEventListener( "message", function(e){ if (e.origin !== "http://example.com") { return; }

alert(e.origin + " said: " + e.data); }, false);

Page 60: JavaScript APIs · APIs •Canvas •Drag & Drop •History •Inline Editing •Messaging •Of!ine Apps •Video & Audio •Geolocation •Local Storage •Selectors •Server Events

Web Workers

Page 61: JavaScript APIs · APIs •Canvas •Drag & Drop •History •Inline Editing •Messaging •Of!ine Apps •Video & Audio •Geolocation •Local Storage •Selectors •Server Events

Web Workers

Page 62: JavaScript APIs · APIs •Canvas •Drag & Drop •History •Inline Editing •Messaging •Of!ine Apps •Video & Audio •Geolocation •Local Storage •Selectors •Server Events

•Threads

Page 63: JavaScript APIs · APIs •Canvas •Drag & Drop •History •Inline Editing •Messaging •Of!ine Apps •Video & Audio •Geolocation •Local Storage •Selectors •Server Events

•Threads

•Native or via Gears

Page 64: JavaScript APIs · APIs •Canvas •Drag & Drop •History •Inline Editing •Messaging •Of!ine Apps •Video & Audio •Geolocation •Local Storage •Selectors •Server Events

•Threads

•Native or via Gears

•Sandboxed

Page 65: JavaScript APIs · APIs •Canvas •Drag & Drop •History •Inline Editing •Messaging •Of!ine Apps •Video & Audio •Geolocation •Local Storage •Selectors •Server Events

•Threads

•Native or via Gears

•Sandboxed

•Debugging?

Page 66: JavaScript APIs · APIs •Canvas •Drag & Drop •History •Inline Editing •Messaging •Of!ine Apps •Video & Audio •Geolocation •Local Storage •Selectors •Server Events

•importScripts

•postMessage

•onmessage

•onconnect

Page 67: JavaScript APIs · APIs •Canvas •Drag & Drop •History •Inline Editing •Messaging •Of!ine Apps •Video & Audio •Geolocation •Local Storage •Selectors •Server Events

Without

Page 68: JavaScript APIs · APIs •Canvas •Drag & Drop •History •Inline Editing •Messaging •Of!ine Apps •Video & Audio •Geolocation •Local Storage •Selectors •Server Events

http://html5demos.com/worker

Page 69: JavaScript APIs · APIs •Canvas •Drag & Drop •History •Inline Editing •Messaging •Of!ine Apps •Video & Audio •Geolocation •Local Storage •Selectors •Server Events

Storage

Page 70: JavaScript APIs · APIs •Canvas •Drag & Drop •History •Inline Editing •Messaging •Of!ine Apps •Video & Audio •Geolocation •Local Storage •Selectors •Server Events

Storage

Page 71: JavaScript APIs · APIs •Canvas •Drag & Drop •History •Inline Editing •Messaging •Of!ine Apps •Video & Audio •Geolocation •Local Storage •Selectors •Server Events

1. sessionStorage

Page 72: JavaScript APIs · APIs •Canvas •Drag & Drop •History •Inline Editing •Messaging •Of!ine Apps •Video & Audio •Geolocation •Local Storage •Selectors •Server Events

1. sessionStorage

2. localStorage

Page 73: JavaScript APIs · APIs •Canvas •Drag & Drop •History •Inline Editing •Messaging •Of!ine Apps •Video & Audio •Geolocation •Local Storage •Selectors •Server Events

1. sessionStorage

2. localStorage

3. database storage

Page 74: JavaScript APIs · APIs •Canvas •Drag & Drop •History •Inline Editing •Messaging •Of!ine Apps •Video & Audio •Geolocation •Local Storage •Selectors •Server Events

Storage

sessionStorage.setItem(key, value)

sessionStorage.getItem(key)

Page 75: JavaScript APIs · APIs •Canvas •Drag & Drop •History •Inline Editing •Messaging •Of!ine Apps •Video & Audio •Geolocation •Local Storage •Selectors •Server Events

Storage

localStorage.setItem(key, value)

localStorage.getItem(key)