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>
<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 transformationsdc.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// 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");
More info and samples on: www.devarchweb.net
Storage eventswindow.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 DBvar 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
<html manifest="my.manifest">
applicationCache.addEventListener("updateready", onUpdateReady, false);
function onUpdateReady(e) {
applicationCache.swapCache();
window.location.reload();
}