HTML5 JavaScript Interfaces

JavaScript
Interfaces
in HTML5

Aaron Gustafson
Easy Designs, LLC
slideshare.net/AaronGustafson

JavaScript Interfaces

Working with media


Working with media
<audio controls="controls" autobuffer="autobuffer"
preload="auto">
<source src="my.mp3"/>
<source src="my.oga"/>
<ul>
<li><a href="my.mp3">Download as audio/mp3</a></li>
<li><a href="my.oga">Download as audio/ogg</a></li>
</ul>
</audio>


Roll your own player
$('audio').each(function(){
var audio = this,
$button = $('<button>Play</button>')
.click(function(){
audio.play();
});
$(this)
.removeAttr('controls')
.after($button);
});
Using jQuery


Roll your own
currentSrc
Returns the address of the current media resource (or empty).
networkState
Returns a number (0-3) to indicate the network activity of the element:
0 = not initialized
1 = initialized, but idle
2 = actively downloading
3 = no resource
buffered
Returns a TimeRange for what’s been buffered by the browser.
duration
Returns the length (in seconds) of the media object, NaN when resource isn’t found.
currentTime
Current playback position (in seconds). Can be set to seek a time.
initialTime
Returns the initial (possibly sought) playback position when the resource was loaded.


Roll your own
readyState
A numeric value (0-4) representing the current state of the element:
0 = no information available
1 = metadata received
2 = have current data, but not enough to do anything yet
3 = have a little future data, but not a lot
4 = have enough data to advance without risking a stop (at the default playback rate).
paused
Returns true or false based on the state of the media.
ended
Returns true if playback has reached the end of the media resource.
playbackRate
Returns the current playback rate (usually 1.0), but is also settable.
defaultPlaybackRate
Returns the default playback rate (usually 1.0), but is also settable.


Roll your own
played
Returns a TimeRange object that tells how much of the media resource has been played.
load()
Triggers the reset and restart of a media resource.
play()
Plays the audio.
pause()
Pauses the audio.
canPlayType( type )
Returns “probably,” “maybe” or empty (for no) based on how confident the browser is.
seeking
Returns true if the user agent is currently seeking.
seekable
Returns a TimeRange object that represents the “seekable” area of the media resource.


Test for native support
var
audio = document.createElement('audio'),
test = { mp3: 'audio/mpeg',
oga: 'audio/ogg; codecs="vorbis"' },
supported = [];

if ( audio.canPlayType &&
typeof audio.canPlayType == 'function' )
{
for ( format in test )
{
if ( "" != audio.canPlayType( test[format] ) )
{
supported.push(format);
}
}
}


Something for later…


if ( window.localStorage )
{
// Sweet!
}


{
var cache = window.localStorage;
cache.setItem( 'test', 'I am storing nuts for the winter.' );
}


{
console.log( cache.getItem('test') );
}


{
cache.clear();
}


length
The number of items stored.
key( n )
Returns the name of the nth key (or null).
getItem( key )
Returns the value for the given key (or null).
setItem( key, value )
Stores a value for a given key.


Local Storage…
…is restricted by domain
…persists until deleted
(programmatically or by the user)

…is limited in size (usually 5MB)
…is (currently) limited to strings


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


Cue the sad trombone
{
var
cache = window.localStorage,
obj = {
one: 1,
two: 2
};
cache.setItem( 'nums', obj );
console.log( cache.getItem( 'nums' ) );
}


Huzzah!
{
var
cache = window.localStorage,
obj = {
one: 1,
two: 2
};
cache.setItem( 'nums', JSON.stringify( obj ) );
console.log( JSON.parse( cache.getItem( 'nums' ) ) );
}


Local Storage…
…is restricted by domain
…persists until deleted
(programmatically or by the user)

…is limited in size (usually 5MB)
…is (currently) limited to strings
…mutable


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

window.localStorage.setItem( ‘test’, ‘Just playing around’ );
// …
window.localStorage.clear();
Script B


Play nicely in the sandbox
// create a Squirrel instance with your unique key
var $S = new Squirrel( 'scale-song' );

// write a value to the cache
$S.write( 'doe', 'ray' );
// read it back
$S.read( 'doe' ); // 'ray'

// write a value to a sub-cache
$S.write( 'song', 'doe', 'a dear, a female dear' );
// read back the original value
// read back the sub-cached value
$S.read( 'song', 'doe' ); // 'a dear, a female dear'
Using Squirrel.js (http://github.com/easy-designs/Squirrel.js)


// removing a single property from the sub-cache
$S.remove( 'song', 'doe' );
// try to read the sub-cached value
$S.read( 'song', 'doe' ); // null
// read the root value


// add some more content to the sub-cache
$S.write( 'song', 'ray', 'a drop of golden sun' );
// clear the whole sub-cache
$S.clear( 'song' );
// check that it's been cleared
$S.read( 'song', 'ray' ); // null
// check that the root value's still intact


// remove a property form the main cache
$S.remove( 'doe' );
// check it's value
$S.read( 'doe' ); // null

// write a bit more data in the root and in a sub-cache
$S.write( 'doe', 'ray' );
$S.write( 'song', 'ray', 'a drop of golden sun' );

// clear the whole cache
$S.clear();
// check it's all gone
$S.read( 'song', 'ray' ); // null
$S.read( 'doe' ); // null


When you need a “bigger boat”


Example: wikiHow Survival Kit

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


How it works
Page Loads

Database is created

SQL is executed to load data

App is ready to go


Inspecting the DB


Competing ideas

+

Indexed DB


Unification (eventually)

Indexed DB


Consider

Kids Candy

Candy Sales


Comparison: initialize
var db = window.openDatabase( var request = window.indexedDB.open(
"CandyDB", "", "CandyDB", "My candy store database"
"My candy store database", 1024 );
);
indexedDB
Web Database


Comparison: initialize Web Database

if (db.version != "1")
{
db.changeVersion( db.version, "1", function(tx){
// Initialize database
var tables = [
{ name: "kids", columns: ["id INTEGER PRIMARY KEY", "name TEXT"]},
{ name: "candy", columns: ["id INTEGER PRIMARY KEY", "name TEXT"]},
{ name: "candySales", columns: ["kid_id INTEGER", "candy_id INTEGER",
"date TEXT"]} ],
len = tables.length, table;
while ( len-- ) {
table = tables[len];
tx.executeSql(
"CREATE TABLE " + table.name + "(" + table.columns.join(", ") + ");"
);
}
},
null, function(){ loadData(db); } );
}
else {
// User has been here before, no initialization required.
loadData(db);
}


Comparison: initialize indexedDB

request.onsuccess = function(event) {
var db = event.result;
if (db.version != "1") {
// Initialize database
var createdObjectStoreCount = 0,
objectStores = [ { name: "kids", keyPath: "id", autoIncrement: true },
{ name: "candy", keyPath: "id", autoIncrement: true },
{ name: "candySales", keyPath: "", autoIncrement: true } ],
len = objectStores.length, params;

while ( len-- ) {
var params = objectStores[len];
request = db.createObjectStore(
params.name, params.keyPath, params.autoIncrement
);
request.onsuccess = objectStoreCreated;
}
}
else {
// User has been here before, no initialization required.
loadData(db);
}
};


Comparison: initialize indexedDB

function objectStoreCreated(event) {
if ( ++createdObjectStoreCount == objectStores.length )
{
db.setVersion("1").onsuccess = function(event) {
loadData(db);
};
}
}


Comparison: create The Data

var kids = [ { name: "Anna" }, { name: "Betty" }, { name: "Christine" } ];

var db = window.openDatabase( var request = window.indexedDB.open(
"CandyDB", "1", "CandyDB", "My candy store database"
"My candy store database", 1024); );
db.transaction( function(tx){ request.onsuccess = function(e) {
var i=0, len=kids.length; var objectStore = e.result
while ( i < len ) .objectStore("kids"),
{ var i=0, len=kids.length;
var kid = kids[i++]; while ( i < len ) {
tx.executeSql( var kid = kids[i++];
"INSERT INTO kids (name) “ + objectStore.add(kid)
“VALUES (:name);", [kid], .onsuccess = function(e) {
function(tx, results) { console.log(
console.log( "Saved record for " +
"Saved record for " + kid.name + " with id " +
kid.name + " with id " + e.result );
results.insertId ); };
}); }
} };
});
indexedDB
Web Database


Comparison: simple read
db.readTransaction( function(tx) { request.onsuccess = function(e) {
// Enumerate the entire table. // Enumerate the entire object store.
tx.executeSql( request = e.result
"SELECT * FROM kids", .objectStore("kids")
function( tx, results ) { .openCursor();
var rows = results.rows, request.onsuccess = function(event) {
i=0, len=rows.length, item; var cursor = event.result;
while ( i < len ) { // If cursor is null … done
item = rows.item(i++); if (!cursor) { return; }
console.log( item.name ); console.log( cursor.value.name );
} cursor.continue();
} };
}); };
});
indexedDB
Web Database


Comparison: joined read Web Database

db.readTransaction(function(tx) {
tx.executeSql(
"SELECT name, COUNT(candySales.kidId) " +
"FROM kids " +
"LEFT JOIN candySales ON kids.id = candySales.kidId " +
"GROUP BY kids.id;",
function(tx, results) {
var rows = results.rows, i=0, len=rows.length;
while ( i<len ) {
var item = rows.item(i++);
console.log( item.name + "bought " + item.count + "pieces" );
}
});
});


Comparison: joined read indexedDB

var candyEaters = [];
request.onsuccess = function(event) {
var db = event.result,
transaction = db.transaction(["kids", "candySales"]);
transaction.oncomplete = function(){ console.log(candyEaters); },
kidCursor, saleCursor, salesLoaded=false, count;

var kidsStore = transaction.objectStore("kids");
kidsStore.openCursor().onsuccess = function(event) {
kidCursor = event.result;
count = 0;
attemptWalk();
}

var salesStore = transaction.objectStore("candySales");
var kidIndex = salesStore.index("kidId");
kidIndex.openObjectCursor().onsuccess = function(event) {
saleCursor = event.result;
salesLoaded = true;
attemptWalk();
}

//…


Comparison: joined read indexedDB

// …

function attemptWalk() {
if (!kidCursor || !salesLoaded) return;

if ( saleCursor && kidCursor.value.id == saleCursor.kidId )
{
count++;
saleCursor.continue();
}
else
{
candyEaters.push({ name: kidCursor.value.name, count: count });
kidCursor.continue();
}
}

} // end request.onsuccess


In the wikiHow app…
Categories

A NY
HA
VE
Badges
E M MA
H AV NY

Articles Questions Quiz
Results
Content
Content
Content User Triggered

Preloaded


Where am I?


Geolocation API
if ( navigator.geolocation )
{
navigator.geolocation.getCurrentPosition(
function(position){
console.log( position.coords );
},
function(error){
alert('ouch');
}
);
}


What’s in a name?
function getPlaceFromFlickr( lat, lon, callback )
{
// the YQL statement
var yql = 'select * from flickr.places where lat=' +
lat + ' and lon=' + lon;

// assembling the YQL webservice API
var url = 'http://query.yahooapis.com/v1/public/yql?q=' +
encodeURIComponent(yql) +
'&format=json&diagnostics=false&callback=' + callback;

// create a new script node and add it to the document
var s = document.createElement('script');
s.setAttribute( 'src', url );
document.getElementsByTagName('head')[0].appendChild(s);
};

// …


What’s in a name?
// callback in case there is a place found
function output(o){
if ( typeof(o.query.results.places.place) != 'undefined' )
{
console.log( o.query.results.places.place.name );
}
}


What’s in a name?
if ( navigator.geolocation )
{
navigator.geolocation.getCurrentPosition(
function(position){
getPlaceFromFlickr(
position.coords.latitude,
position.coords.longitude,
'output'
);
},
function(error){
alert('ouch');
}
);
}


Bonus: Offline Cache
CACHE MANIFEST
# Cache manifest version 1.0
# Change the version number to trigger an update
index.php
c/main.css
j/main.js
i/logo.png

NETWORK:
live-feed.php
rss.json
cache.manifest served with MIME of text/cache-manifest

<html manifest="cache.manifest">

navigator.onLine // true or false


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

This presentation is licensed under
Creative Commons
Attribution-Noncommercial-Share Alike 3.0

ﬂickr Photo Credits
“HTML5 logo in Braille” by Ted Drake
“Dual Samsung Monitors” by steve-uk
“Statue of Liberty” by gadl
“Lego” by DavePress
“iFlickr touch screen” by exfordy
“Green Plant” by kevin1024

HTML5 JavaScript Interfaces

More Related Content

What's hot (20)

Similar to HTML5 JavaScript Interfaces (20)

More from Aaron Gustafson (20)

Recently uploaded (20)

HTML5 JavaScript Interfaces