HTML5 JavaScript Interfaces

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

JavaScript
Interfaces
in HTML5

Aaron Gustafson
Easy Designs, LLC
slideshare.net/AaronGustafson

JavaScript Interfaces

Working with media

JavaScript Interfaces

Working with media
<audio controls="controls" autobuffer="autobuffer"
preload="auto">
<...

JavaScript Interfaces

Roll your own player
$('audio').each(function(){
var audio = this,
$button = $('<button>Pl...

JavaScript Interfaces

Roll your own
currentSrc
Returns the address of the current media resource (or empty).
networkSt...

JavaScript Interfaces

Roll your own
readyState
A numeric value (0-4) representing the current state of the element:
...

JavaScript Interfaces

Roll your own
played
Returns a TimeRange object that tells how much of the media resource has be...

JavaScript Interfaces

Test for native support
var
audio = document.createElement('audio'),
test = { mp3: 'aud...

JavaScript Interfaces

Something for later…

JavaScript Interfaces

Something for later…
if ( window.localStorage )
{
// Sweet!
}

JavaScript Interfaces

Something for later…
if ( window.localStorage )
{
var cache = window.localStorage;
cache.s...

JavaScript Interfaces

Something for later…

JavaScript Interfaces

Something for later…
if ( window.localStorage )
{
var cache = window.localStorage;
console...

JavaScript Interfaces

Something for later…
if ( window.localStorage )
{
var cache = window.localStorage;
console...

JavaScript Interfaces

Something for later…
length
The number of items stored.
key( n )
Returns the name of the nth key...

JavaScript Interfaces

Local Storage…
…is restricted by domain
…persists until deleted
(programmatically or by the use...

JavaScript Interfaces

Session storage
…is like local storage
…disappears when the browser is closed

JavaScript Interfaces

Cue the sad trombone
if ( window.localStorage )
{
var
cache = window.localStorage,
obj ...

JavaScript Interfaces

Huzzah!
if ( window.localStorage )
{
var
cache = window.localStorage,
obj = {
one: ...

JavaScript Interfaces

Local Storage…
…is restricted by domain
…persists until deleted
(programmatically or by the use...

JavaScript Interfaces

Whoops!
window.localStorage.setItem( ‘important’, ‘My locker combo is…’ );
...

JavaScript Interfaces

Play nicely in the sandbox
// create a Squirrel instance with your unique key
var $S = new Squir...

JavaScript Interfaces

Play nicely in the sandbox
// removing a single property from the sub-cache
$S.remove( 'song', '...

JavaScript Interfaces

Play nicely in the sandbox
// add some more content to the sub-cache
$S.write( 'song', 'doe', 'a...

JavaScript Interfaces

Play nicely in the sandbox
// remove a property form the main cache
$S.remove( 'doe' );
// check...

JavaScript Interfaces

When you need a “bigger boat”

JavaScript Interfaces

Example: wikiHow Survival Kit

http://apps.wikihow.com/survivalkit/

JavaScript Interfaces

How it works
Page Loads

Database is created

SQL is executed...

JavaScript Interfaces

Inspecting the DB

JavaScript Interfaces

Competing ideas

+

Indexed DB

JavaScript Interfaces

Unification (eventually)

Indexed DB

JavaScript Interfaces

Consider

Kids Candy

Candy Sales

JavaScript Interfaces

Comparison: initialize
var db = window.openDatabase( var request = window.indexe...

JavaScript Interfaces

Comparison: initialize Web Database

i...

JavaScript Interfaces

Comparison: initialize indexedDB

...

JavaScript Interfaces

Comparison: initialize indexedDB

function objectS...

JavaScript Interfaces

Comparison: create The Data...

JavaScript Interfaces

Comparison: simple read
db.readTransaction( function(tx) { request.onsuccess = functi...

JavaScript Interfaces

Comparison: joined read Web Database

db.re...

JavaScript Interfaces

Comparison: joined read indexedDB

var ca...

JavaScript Interfaces

Comparison: joined read indexedDB

...

JavaScript Interfaces

In the wikiHow app…
Categories

A NY
HA
...

JavaScript Interfaces

Where am I?

JavaScript Interfaces

Geolocation API
if ( navigator.geolocation )
{
navigator.geolocation.getCurrentPosition(
f...

JavaScript Interfaces

What’s in a name?
function getPlaceFromFlickr( lat, lon, callback )
{
// the YQL statement
v...

JavaScript Interfaces

What’s in a name?
// callback in case there is a place found
function output(o){
if ( typeof(o...

JavaScript Interfaces

What’s in a name?
if ( navigator.geolocation )
{
navigator.geolocation.getCurrentPosition(
...

JavaScript Interfaces

Bonus: Offline Cache
CACHE MANIFEST
# Cache manifest version 1.0
# Change the version number to ...

JavaScript Interfaces

Slides available at
http://slideshare.net/AaronGustafson

This presentation ...

Share Slideshare

LinkedIn
Facebook
Twitter

Embed

Size (px)

Show related Slideshows at end

WordPress Shortcode

Link

Share
Email

2024 Trend Updates: What Really Wor... by Search Engine Jou... 1066413 views
Storytelling For The Web: Integrate... by Chiara Aliotta 986196 views
Artificial Intelligence, Data and C... by OECD Directorate ... 930965 views
How to Leverage AI to Boost Employe... by SocialHRCamp 396116 views
2024 State of Marketing Report – by... by Marius Sescu 223818 views
Everything You Need To Know About C... by Expeed Software 238978 views

View on Slideshare

1 of 49 Ad

View on Slideshare

1 of 49 Ad