JavaScript APIs in the HTML5 Umbrella

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

June 28 - 29, 2013 TICKETS GO ON SALE NEXT
WEEK! Tuesday, March 12, 13

jakefolio http://jakefolio.com [email protected] Jake Smith Tuesday, March 12, 13

Javascript DOM ACCESS Tuesday, March 12, 13

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

var items = document.querySelectorAll('.menu li'); var items = $('.menu li');
var subItems = items[0].querySelectorAll('li'); var subItems = $('.menu li').find('li'); Tuesday, March 12, 13

// 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); } Tuesday, March 12, 13

StaticNodeList vs. LiveNodeList Tuesday, March 12, 13

Javascript Element ClassList Tuesday, March 12, 13

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'); Tuesday, March 12, 13

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 Tuesday, March 12, 13

DOMNodeList !== Array Tuesday, March 12, 13

Javascript STORAGE Tuesday, March 12, 13

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

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!'); } } Tuesday, March 12, 13

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(); Tuesday, March 12, 13

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. Tuesday, March 12, 13

Tuesday, March 12, 13

Javascript APP CACHE Tuesday, March 12, 13

<html manifest="mysite.appcache"> ... </html> mime-type: text/cache-manifest Tuesday, March 12, 13

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 Tuesday, March 12, 13

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(); } Tuesday, March 12, 13

‣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; Tuesday, March 12, 13

Javascript GEOLOCATION Tuesday, March 12, 13

// Check if geolocation is supported if (navigator.geolocation) { //
Geolocation Supported! } else { // Geolocation not supported } Tuesday, March 12, 13

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

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 Tuesday, March 12, 13

Javascript HISTORY Tuesday, March 12, 13

history.go(-1); history.back(); history.forward(); history.length; Tuesday, March 12, 13

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

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

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

Javascript COMMUNICATION Tuesday, March 12, 13

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 Tuesday, March 12, 13

// 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); }; Tuesday, March 12, 13

// Say hello ws.send('Hello World'); // Close the connection ws.close();
Tuesday, March 12, 13

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(); } Tuesday, March 12, 13

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/ Tuesday, March 12, 13

Thanks for Listening! jakefolio http://jakefolio.com [email protected] Tuesday, March 12, 13

JavaScript APIs in the HTML5 Umbrella

JavaScript APIs in the HTML5 Umbrella

More Decks by jakefolio

Other Decks in Programming

Featured

Transcript