HTML5 JS APIs

50 %
50 %
Information about HTML5 JS APIs
Technology

Published on June 29, 2009

Author: remy.sharp

Source: slideshare.net

Description

Standards.next for HTML5 JavaScript 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

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

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

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 ine Applications

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/offline

http://html5demos.com/offline

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

Add a comment

Related presentations

Presentación que realice en el Evento Nacional de Gobierno Abierto, realizado los ...

In this presentation we will describe our experience developing with a highly dyna...

Presentation to the LITA Forum 7th November 2014 Albuquerque, NM

Un recorrido por los cambios que nos generará el wearabletech en el futuro

Um paralelo entre as novidades & mercado em Wearable Computing e Tecnologias Assis...

Microsoft finally joins the smartwatch and fitness tracker game by introducing the...

Related pages

HTML 5 JavaScript API Index

This HTML 5 JavaScript API index is automatically generated from the HTML 5 ... but if you are interested in using this data for a JS editor ...
Read more

Beautiful HTML5 JavaScript Charts | CanvasJS

HTML5 JavaScript Charts that are built on top of HTML5 Canvas Element. ... CanvasJS Charts have a simple API and can render across devices including ...
Read more

The developer’s guide to the HTML5 APIs | HTML5 ...

Rich Clark, one of the HTML5 Doctors, gets under the hood of the APIs that form the bulk of the HTML5 spec and tells us about their purpose and progress.
Read more

Lesen lokaler Dateien in JavaScript - HTML5 Rocks

Einführung. HTML5 bietet über die File API-Spezifikation endlich eine Standardmethode für die Interaktion mit lokalen Dateien. Mit dem File API können ...
Read more

Javascript APIs Current Status - W3C - World Wide Web ...

List the status of current APIs, including completed work, drafts, group notes and obsolete specifications.
Read more

FileSystem APIs kennenlernen - HTML5 Rocks

Kennenlernen der FileSystem APIs HTML5 Rocks. Inhaltsverzeichnis. Einführung; Dateisystem abfragen; Mit Dateien arbeiten; Mit Verzeichnissen arbeiten;
Read more

HTML5 APIs You Didn't Know Existed - David Walsh Blog ...

Despite many HTML5 features being implemented in modern browsers, many developers are unaware of some of the smaller, useful APIs available to us.
Read more

HTML5 Demos and Examples

HTML 5 Demos and Examples. ... SASS, require.js and more. One day of tutorials run by 3 different teachers. ... file-api: Drag files directly ...
Read more

Popcorn.js | The HTML5 Media Framework

Popcorn.js is an HTML5 media framework written in JavaScript for filmmakers, ... This website was designed by bocoup and members of the popcorn.js community.
Read more