JavaScript APIs in the HTML5 Umbrella

Javascript APIs
DallasPHP | JAKE SMITH | March 12, 2013
IN THE HTML5 UMBRELLA
Tuesday, March 12, 13

View Slide

June 28 - 29, 2013
TICKETS GO ON SALE NEXT WEEK!

View Slide

jakefolio
http://jakefolio.com
[email protected]
Jake Smith

View Slide

Javascript
DOM ACCESS

View Slide

document.querySelectorAll('.menu li');
$('.menu li');
document.querySelectorAll('a[class^=”menu]');
Throws SYNTAX_ERR for invalid
// jQuery version

View Slide

var items = document.querySelectorAll('.menu li');
var items = $('.menu li');
var subItems = items[0].querySelectorAll('li');
var subItems = $('.menu li').find('li');

View Slide

// Find the latest tweet
var latestTweet =
document.querySelector('#latest-tweet');
// jQuery version: $('#latest-tweet').first();
for item in items {
// Log the content of element
console.log(item.innerHTML);
// Output the style object
console.log(item.style);
}

View Slide

StaticNodeList vs.
LiveNodeList

View Slide

Javascript
Element ClassList

View Slide

var widget =
document.getElementById('widget');
// Adds if doesn't exist, remove if
present
widget.classList.toggle('primary');
// Add Class
widget.classList.add('primary');
// Remove Class
widget.classList.remove('primary');

View Slide

var widget =
document.getElementById('widget');
// Check if element has Class
widget.classList.contains('primary');
// Get First Class
widget.classList[0];
widget.classList.item(0);
// Built-in toString method
"Classes " + widget.classList
// => Classes widget primary

View Slide

DOMNodeList !== Array

View Slide

Javascript
STORAGE

View Slide

// Check if localStorage is available
if (typeof window.localStorage == 'object'
&& window.localStorage != null) {
var store = window.localStorage;
// localStorage is available!
}

View Slide

var store = window.localStorage;
try {
store.setItem('cow', 'moo');
} catch(e) {
// Out of storage space?
if (e == QUOTA_EXCEEDED_ERR) {
console.log('ERROR: Out of space!');
}
}

View Slide

var status =
document.getElementById('status');
// Change status text
status.innerText =
store.getItem('cow');
status.innerText = store['cow'];
status.innerText = store.cow;
delete store['cow'];
// Delete all of localstorage
store.clear();

View Slide

LocalStorage Gotchas
- HTTP vs. HTTPS localstorage - store seperately (including
incognito for chrome)
- No default expiration.
- Only support strings as values
- SUPPORT: All modern browsers and IE8+
- POLYFILL: Use lawnchair for storage.

View Slide


View Slide

Javascript
APP CACHE

View Slide

...

mime-type: text/cache-manifest

View Slide

CACHE MANIFEST
# 2010-06-18:v2
CACHE:
/favicon.ico
index.html
stylesheet.css
images/logo.png
scripts/main.js
# Resources that require the user to be online.
NETWORK:
login.php
/myapi
http://api.twitter.com
# static.html will be served if main.py is inaccessible
# offline.jpg will be served in place of all images in images/large/
# offline.html will be served in place of all other .html files
FALLBACK:
/main.py /static.html
images/large/ images/offline.jpg
*.html /offline.html
http://www.html5rocks.com/en/tutorials/appcache/beginner/
Unique Identifier

View Slide

var appCache = window.applicationCache;
// Attempt to update the user's cache.
appCache.update();
if (appCache.status ==
window.applicationCache.UPDATEREADY) {
// The fetch was successful, swap in the new cache.
appCache.swapCache();
}

View Slide

‣cached
‣checking
‣downloading
‣error
‣noupdate
‣obsolete
‣progress
‣updateready
App Cache Events
cache deleted or 404/410
cache downloaded, ready to load
var appCache = window.applicationCache;
appCache.status;

View Slide

Javascript
GEOLOCATION

View Slide

// Check if geolocation is supported
if (navigator.geolocation) {
// Geolocation Supported!
} else {
// Geolocation not supported
}

View Slide

geoloc.getCurrentPosition(function(pos) {
position = [
pos.coords.latitude,
pos.coords.longitude
];
}, errorHandler);
var position;
var geoloc = navigator.geolocation;
ASYNC

View Slide

geoloc.watchPosition(function(pos) {
// Successfully changed position
position = [
pos.coords.latitude,
pos.coords.longitude
];
} errorHandler,
{
enableHighAccuracy: true,
maximumAge: 30000,
timeout: 27000
}
);
var geoloc = navigator.geolocation;
Heavy Battery Usage
Cache Lifetime

View Slide

Javascript
HISTORY

View Slide

history.go(-1);
history.back();
history.forward();
history.length;

View Slide

history.pushState(
{ id: 1, title: 'Hello World'},
'Page Title',
'/url/goes/here'
); Page Title Ignored
Accessed through history.state

View Slide

history.replaceState(
{ id: 1, title: 'Hello World'},
'Page Title',
'/url/goes/here'
);
Replaces current URL in history

View Slide

History State has changed
window.addEventListener('onpopstate',
function(e) {
console.log(e.data);
});
var currentPageState = history.state;

View Slide

Javascript
COMMUNICATION

View Slide

var ws = new WebSocket('ws://html5rocks.websocket.org/echo');
// Show current Ready State
console.log(ws.readyState);
CONSTANTS:
CONNECTING = 0
OPEN = 1
CLOSING = 2
CLOSED = 3

View Slide

// When the connection is open, send data to the server
ws.onopen = function () {
ws.send('Ping'); // Send the message 'Ping' to server
};
// Log errors
ws.onerror = function (error) {
console.log('WebSocket Error ' + error);
};
// Log messages from the server
ws.onmessage = function (e) {
console.log('Server: ' + e.data);
};

View Slide

// Say hello
ws.send('Hello World');
// Close the connection
ws.close();

View Slide

if (window.WebSocket) {
// Supported
var ws = new WebSocket('ws://html5rocks.websocket.org/echo');
// Show current Ready State
console.log(ws.readyState);
// When the connection is open, send some data to the server
ws.onopen = function () {
ws.send('Ping'); // Send the message 'Ping' to the server
};
// Log errors
ws.onerror = function (error) {
console.log('WebSocket Error ' + error);
};
// Log messages from the server
ws.onmessage = function (e) {
console.log('Server: ' + e.data);
};
// Say hello
ws.send('Hello World');
// Close the connection
ws.close();
}

View Slide

Resources
‣ http://dev.opera.com/web
‣ https://developer.mozilla.org/en-US/web
‣ http://caniuse.com/
‣ http://davidwalsh.name
‣ http://www.html5rocks.com/en/tutorials/

View Slide

Thanks for Listening!
jakefolio
http://jakefolio.com
[email protected]

View Slide

JavaScript APIs in the HTML5 Umbrella

JavaScript APIs in the HTML5 Umbrella

jakefolio

More Decks by jakefolio

Other Decks in Programming

Featured

Transcript