Upgrade to Pro — share decks privately, control downloads, hide ads and more …

JavaScript APIs in the HTML5 Umbrella

JavaScript APIs in the HTML5 Umbrella

In the flood of excitement for HTML5 there is an unsung hero, Javascript APIs. The new javascript APIs are driving the new features every developer desires. In this session we will discuss geolocation, app cache, history API and web sockets.

E4df4a30f000a225df7114e4940944e7?s=128

jakefolio

March 13, 2013
Tweet

More Decks by jakefolio

Other Decks in Programming

Transcript

  1. Javascript APIs DallasPHP | JAKE SMITH | March 12, 2013

    IN THE HTML5 UMBRELLA Tuesday, March 12, 13
  2. June 28 - 29, 2013 TICKETS GO ON SALE NEXT

    WEEK! Tuesday, March 12, 13
  3. jakefolio http://jakefolio.com me@jakefolio.com Jake Smith Tuesday, March 12, 13

  4. Javascript DOM ACCESS Tuesday, March 12, 13

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

    jQuery version Tuesday, March 12, 13
  6. 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
  7. // 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
  8. StaticNodeList vs. LiveNodeList Tuesday, March 12, 13

  9. Javascript Element ClassList Tuesday, March 12, 13

  10. 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
  11. 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
  12. DOMNodeList !== Array Tuesday, March 12, 13

  13. Javascript STORAGE Tuesday, March 12, 13

  14. // Check if localStorage is available if (typeof window.localStorage ==

    'object' && window.localStorage != null) { var store = window.localStorage; // localStorage is available! } Tuesday, March 12, 13
  15. 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
  16. 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
  17. 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
  18. Tuesday, March 12, 13

  19. Javascript APP CACHE Tuesday, March 12, 13

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

  21. 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
  22. 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
  23. ‣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
  24. Javascript GEOLOCATION Tuesday, March 12, 13

  25. // Check if geolocation is supported if (navigator.geolocation) { //

    Geolocation Supported! } else { // Geolocation not supported } Tuesday, March 12, 13
  26. geoloc.getCurrentPosition(function(pos) { position = [ pos.coords.latitude, pos.coords.longitude ]; }, errorHandler);

    var position; var geoloc = navigator.geolocation; ASYNC Tuesday, March 12, 13
  27. 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
  28. Javascript HISTORY Tuesday, March 12, 13

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

  30. history.pushState( { id: 1, title: 'Hello World'}, 'Page Title', '/url/goes/here'

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

    ); Replaces current URL in history Tuesday, March 12, 13
  32. History State has changed window.addEventListener('onpopstate', function(e) { console.log(e.data); }); var

    currentPageState = history.state; Tuesday, March 12, 13
  33. Javascript COMMUNICATION Tuesday, March 12, 13

  34. 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
  35. // 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
  36. // Say hello ws.send('Hello World'); // Close the connection ws.close();

    Tuesday, March 12, 13
  37. 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
  38. 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
  39. Thanks for Listening! jakefolio http://jakefolio.com me@jakefolio.com Tuesday, March 12, 13