Location via proxy:   [ UP ]  
[Report a bug]   [Manage cookies]                
Scribd
Upload
99 views

JavaScript APIs HTMLs

The document discusses several new JavaScript APIs introduced with HTML5, including Canvas, Drag and Drop, Geolocation, Messaging, Web Workers, and Storage. It provides information on how to use each API, code examples, and links to external documentation resources. Key APIs covered are Canvas, Drag and Drop, Offline Applications, Geolocation, Messaging, and Storage. The document is a guide to these new HTML5 JavaScript APIs.

Uploaded by

Friske Otto
Copyright
© Attribution Non-Commercial (BY-NC)
Available Formats
Download as PDF, TXT or read online on Scribd
99 views

JavaScript APIs HTMLs

The document discusses several new JavaScript APIs introduced with HTML5, including Canvas, Drag and Drop, Geolocation, Messaging, Web Workers, and Storage. It provides information on how to use each API, code examples, and links to external documentation resources. Key APIs covered are Canvas, Drag and Drop, Offline Applications, Geolocation, Messaging, and Storage. The document is a guide to these new HTML5 JavaScript APIs.

Uploaded by

Friske Otto
Copyright
© Attribution Non-Commercial (BY-NC)
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 76

JavaScript APIs

HTML5
Remy Sharp @rem standards.next

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

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

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

Canvas

Canvas

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

http://tr.im/pRkz

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

http://tr.im/pRkz

Drag'n Drop

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);

el.addEventListener('dragover', function (e) { e.preventDefault(); }, true);

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

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

http://html5demos.com/drag

Of fline Applications

Of fline Applications

Of fline Apps
Application cache Events: offline, 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/ofine

http://html5demos.com/ofine

navigator.onLine

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)
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

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

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

You might also like