HMTL 5

1_ New form input types

2_ New HTML 5 tags

HTML
<header>
<footer>
<nav>  // navigation element
<menuitem>
<article>
<section>
<summary>

HTML 5 also remove some elements like

HTML
<frame>
<font>
<center>

6_ Create and consume JSON

HTML
// convert object to JSON
var person = { name: "Zbynek" }
var jsondata = JSON.stringify(person); // "{ \"name\": \"Zbynek\" }"

// create object from JSON
var person1 = JSON.parse(jsondata);
var name = person1.name;

8_ Display current geolocation

HTML
<html>
<head>
    <script type="text/javascript" src="../scripts/jquery-1.6.2.min.js"></script>

    <script type="text/javascript">
        $(function () 
        {
            if (!navigator.geolocation)
                alert("This browser doesn't support geolocation");
            else
                navigator.geolocation.getCurrentPosition(onPositionReady);  // you can add error handling callback as well  
        });

        function onPositionReady(position) 
        {
            document.getElementById("Latitude").innerHTML = position.coords.latitude;
            document.getElementById("Longitude").innerHTML = position.coords.longitude;
            // you can read more position properties
        }
    </script>
</head>
<body>
   <div id="Latitude">Lat</div>
   <div id="Longitude">Long</div>
</body>
</html>

9_ Including video

Only IE and Safari support MP4 as of 3/2014

HTML
<video id="output" controls>
    <source src="myvideo.MP4" type="video/mp4" codecs="avc1.42E01E, mp4a.40.2" />
    HTML5 video is not supported in your browser
</video>

11_ Create canvas and draw a rectangle on it

HTML
<body>
  <canvas id="canvas" width="640" height="480" style="background-color: White; border: 1px dotted black"></canvas>
</body>

JavaScript
var canvas = document.getElementById("canvas");
var dc = canvas.getContext("2d");
dc.strokeRect(50,50,200,200)

17_ What are possible canvas transformations

JavaScript
dc.translate(100,0);  // move x,y
dc.rotate(30 * Math.PI / 180);  
dc.scale(2, 1);  // scale x,y
dc.setTransform(1, 0, 0, 1, 100,100) // x scale, x skew, y, skew, y scale, x translate, y translate

19_ Clearning canvas

JavaScript
// erases content, but keeps properties (transfom)
canvas.clearRect()

// erases content and resets canvas properties. 
// It works accros browsers based on HTML5 specification 
canvas.width = canvas.width;

23_ Write, read, iterate, delete local storage data

Client side Key-value storage
Quota provided by browser varies from 5-10MB
In IE 11 does not work if html file opened from file system, needs to be http://

JavaScript
// write
window.localStorage.my = "abc";
//read
var x = window.localStorage.my;

// read
window.localStorage["my"] = "abc";
//read
var x = window.localStorage["my"];

// array
var point = [1,2];
...
var coords = point.split(",");
var x = parseInt(coords[0]);

// iterate
for (int i=0; i<window.localStorage.length; i++)
{
  var key = window.localStorage.key[i];
  var value = window.localStorage[key];
}

// remove
window.localStorage.removeItem("my");

Webworkers cannot access local storage (window object is not accessible)

24_ Storage events

JavaScript
window.addEventListener("storage", onStorageChanged, false);
...
function onStorageChanged(e) 
{
  // e.key
  // e.oldValue
  // e.newValue
  // e.url
}

25_ How to use Session storage

Persists only during the session time. Should fire an event (according to spec).

JavaScript
window.sesionStorage["my"] = "abc;

26_ Create storage and add index

JavaScript
$(function () {
    var request = window.indexedDB.open("MyDB", 1);  // 1 is version of the DB  

    request.onupgradeneeded = function (e)
    {
        // all schema changes can happen only here
        var db = e.target.result;

        var store = db.createObjectStore("persons", { autoIncrement: true });
        store.createIndex("myindex", "name");    // , { unique : true }
        
        // if autoincrement is not used, a field can be used as unique identifier
        // var store = db.createObjectStore("persons", { keyPath: "uniqueFieldName" });  

        // db.deleteObjectStore("persons");  // delete the store if needed
        }
    }
});

27_ Read, add, delete, and iterate items in indexed DB

JavaScript
var request = window.indexedDB.open("MyDB", 1);

request.onsuccess = function (e) {
  // get store object
  var db = e.target.result;
  var tran = db.transaction(["persons"], "readwrite");  // transaction may include more stores
  var store = tran.objectStore("persons");

  // read object by key
  store.get(2).onsuccess = function (e) {  // 2 is key
    // report success here
  }
  
  // iterate all items
  store.openCursor().onsuccess = function (e) {
    var cursor = e.target.result;
  
    if (cursor) {
        var key = cursor.key;
        var person = cursor.value;
  
        cursor.continue();
    }
  };

  // Update person object
  store.put( { name: "Old person" }, 1 );  // 1 is key

  // Add person object
  store.add( { name: "Next person" } );

  // Delete 
  store.delete(1);  // 1 is key
}

28_ How to cache pages

Create a manifest file my.manifest

CMD
CACHE MANIFEST
# comment
myfile.htm

Update html file

HTML
<html manifest="my.manifest">

Refreshing file by browser requires changing at least one byte in the manifest file

JavaScript
applicationCache.addEventListener("updateready", onUpdateReady, false);

function onUpdateReady(e) {
  applicationCache.swapCache();
  window.location.reload();
}

IIS: map file extension .manifest (can be arbitrary extension) to "text/cache-manifest" in IIS