HOT TIP!

Internet Explorer is TERRIBLE

Every versions is very different

Most versions don't auto update

http://my-debugbar.com/wiki/IETester/HomePage

Test IE 6, 7, 8, 9, 10

HTML5

j.mp/ntu-html5

Semantic Tags

  • Tags better describe content
    • article
    • aside
    • progress
    • section
    • time
    • ...many more

Storage

localStorage & sessionStorage

  • Stores key value pairs
  • Syncronous API, no callbacks
  • Works very similar regular JS Objects
  • Instead of in Memory, in a file

Storage API

Setting Items


          localStorage.setItem("myKey", "myValue");

          // or 

          localStorage.myKey = "myValue";

Getting Items


          var data = localStorage.getItem("myKey");

          // or 

          var data = localStorage.myKey;

Storage API

Removing Items


          localStorage.removeItem("myKey");

          // or 

          delete localStorage.myKey;

Remove all Items


          localStorage.clear();

How many items?


          var length = localStorage.length;

What's the difference

  • Session Storage survives refresh
  • Great for short lived things
    • Shopping Carts
    • Breadcrumbs, nav history
  • Local Storage survives browser close
    • Game High Score List
  • Warning, user can clear
    • Don't rely on this for important info

WebSQL

  • Traditional Database in browser
  • Exact same API as SQLite
  • Non-Standar
  • Firefox doesn't plan to support

Indexed DB

  • THE FUTURE!
  • Asynchronous API
  • NoSQL
  • Very Fast
  • Used heavily in Firefox OS

Indexed DB

Connecting


          var request = window.indexedDB.open("MyDatabase");

          request.onerror = function(event) {
              console.log("failure");
          };

          request.onsuccess = function(event) {
              console.log("success");
              // now we can access the database
          };

Indexed DB

Retrieving Data


          var transaction = db.transaction(["customers"]);

          var objectStore = transaction.objectStore("customers");

          var request = objectStore.get("444-44-4444");

          request.onerror = function(event) {
            // Handle errors!
          };

          request.onsuccess = function(event) {
            // Do something with the request.result!
            alert("Name for SSN 444-44-4444 is " + request.result.name);
          };

Application Cache

  • Allows applications to run offline
    • Fetches all pages
    • Stores locally
    • Browser no longer needs network
  • For offline, speed and less data use

App Cache, How to Use

Add manifest link to HTML


          <html manifest="example.appcache">
          ...

Add Manifest File


          CACHE MANIFEST
          # v1 - 2011-08-13
          # This is a comment.
          http://www.example.com/index.html
          http://www.example.com/header.png
          http://www.example.com/blah/blah

Online/Offline events

Check if online


          if (navigator.isOnline) {
            // YAAAY, we have network!
          }

Handle Events


          window.addEventListener('online',  updateOnlineStatus);
          window.addEventListener('offline', updateOnlineStatus);

Drag & Drop

  • For on page elements
    • ex. WYSIWYG editing
  • From desktop
    • ex. uploading files
  • Many events, flexible
    • dragstart, dragover, dragleave
      drop, drag, dragend

File System API

  • Virtual FS for websites
  • Non-standard
  • Both Synch or Asynch
  • Not in Firefox

Web Workers

  • Javascript Single-Threaded
  • Offload "work" to another thread
  • No shared memory
    • No access to window
    • Only pass "message"
  • Can perform network requests

Web Worker API


          var myWorker = new Worker("my_task.js");

          myWorker.addEventListener("message", function (oEvent) {
              console.log("Called back by the worker!\n");
          }, false);

          myWorker.postMessage(""); // start the worker.

Device Orientation & Motion

  • Detect rotation and movement
  • Accelerometer access
  • Experimental feature
    • Only in Chrome & Firefox
    • no plans for IE or Safari

Device Orientation Code


          window.addEventListener("deviceorientation", handleOrientation, true);

          function handleOrientation(event) {
            var absolute = event.absolute;
            var alpha    = event.alpha;
            var beta     = event.beta;
            var gamma    = event.gamma;

            // Do stuff with the new orientation data
          }

Geolocation

  • Standardized
  • Use Feature Detection just in case
  • Must ask permission

Geolocation API


          // find user position
          navigator.geolocation.getCurrentPosition(function(position) {
            console.log(position.coords.latitude);
            console.log(position.coords.longitude);
          });

          // watch user position, update as user moves
          var watchID = navigator.geolocation.watchPosition(function(position) {
              do_something(position.coords.latitude, position.coords.longitude);
          });

and many more!

  • Web Sockets
  • WebRTC
  • WebAPI
    • Contacts
    • Telephony
    • Wifi
    • Battery
  • Server Sent Events

Questions?