HMTL 5

Content:
1. Forms
2. New tags
3. JSON support
4. Geolocation
5. Including video
6. Canvas
   - Transformations
   - Clearing canvas
7. Local storage
   - Local storage events
   - Session storage
8. Indexed DB
   - Creating store (table)
   - Manipulating data
9. Offline apps

Not all features are implemented by all browsers. Differences can be found here

1. Forms

New input types that can be handled by browsers:
email - validates email addresss
color - allows to choose a color
date - validates date and allows to select it
spellcheck - validates text
pattern - allows data validation via regular expressions

2. New tags

HTML 5 introduces new tags that helps better to organize and understand the structure of the document

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

HTML 5 also remove some elements like

HTML
<frame>
<font>
<center>

3. JSON support

JSON is natively supported by browser

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;

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

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

6. Canvas

Canvas allows drawing graphical objects inside of browser content

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)

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

Clearing 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;

7. Local storage

Code example:LocalStorage

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)

Local storage events

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

Session storage

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

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

8. Indexed DB

Indexed DB allows storing and querying client side data. Specification: W3.org

Code example:IndexedDb

Creating store (table)

Delete an object in the DB requires new version of the DB.
All schema changes can be done within onupgradeneeded handler.
No access to IndexedDB from C# when building Windows store apps

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
        }
    }
});

Manipulating data

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
}

You can also create case sensitive Indexes or use transactions

9. Offline apps

With the specification below the browser will download and cache specified files so that they are available when the client does not have internet connection. 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

Home | Knowledge verification | Import for Anki (Save target as ...)