New form input types 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

More info and samples on: www.devarchweb.net

New HTML 5 tags

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


HTML 5 also remove some elements like

<frame>
<font>
<center>


More info and samples on: www.devarchweb.net

Create and consume JSON

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


More info and samples on: www.devarchweb.net

Display current geolocation

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


More info and samples on: www.devarchweb.net

Including video Only IE and Safari support MP4 as of 3/2014

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


More info and samples on: www.devarchweb.net

Create canvas and draw a rectangle on it

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



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


More info and samples on: www.devarchweb.net

What are possible canvas transformations

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


More info and samples on: www.devarchweb.net

Clearning canvas

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


More info and samples on: www.devarchweb.net

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://

// 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)

More info and samples on: www.devarchweb.net

Storage events

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


More info and samples on: www.devarchweb.net

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

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


More info and samples on: www.devarchweb.net

Create storage and add index

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


More info and samples on: www.devarchweb.net

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

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
}


More info and samples on: www.devarchweb.net

How to cache pages Create a manifest file my.manifest

CACHE MANIFEST
# comment
myfile.htm


Update html file

<html manifest="my.manifest">



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

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



More info and samples on: www.devarchweb.net