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 

... 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