Summary of HTML5 New Features

Summary of HTML5 New Features
1. New Selector

Using class positioning elements (dom api)
Var el = document. getElementById ('section1 ');
El. focus ();

Var els = document. getElementsByTagName ('div ');
Els [0]. focus ();

Var els = document. getElementsByClassName ('core ');
Els [0]. focus ();
Using a syntax similar to a css selector (Selectors API)
Var els = document. querySelectorAll ("ul li: nth-child (odd )");
Var els = document. querySelectorAll ("table. test> tr> td ");

2. Local Storage-Web Storage

// Use localStorage for persistent storage
// Use sessionStorage for per tab storage
Textarea. addEventListener ('keyup', function (){
Window. localStorage ['value'] = area. value;
Window. localStorage ['timestamp'] = (new Date (). getTime ();
}, False );
Textarea. value = window. localStorage ['value'];

3. Local Database-Web SQL Database

Var db = window. openDatabase ("Database Name", "Database Version ");
Db. transaction (function (tx ){
Tx.exe cuteSql ("SELECT * FROM test", [], successCallback, errorCallback );
});

4. File Cache-Application Cache API

Manifest = "cache-manifest">
Window. applicationCache. addEventListener ('checking', updateCacheStatus, false );
CACHE MANIFEST

5. Run the program in the background-Web Workers

Main. js:
Var worker = new Worker ('extra _ work. js ');
Worker. onmessage = function (event) {alert (event. data );};

Extra_work.js:
// Do some work; when done post message.
PostMessage (some_data );

6. Bidirectional Information Transmission-Web Sockets
Var socket = new WebSocket (location );
Socket. onopen = function (event ){
Socket. postMessage ("Hello, WebSocket ");
}
Socket. onmessage = function (event) {alert (event. data );}
Socket. onclose = function (event) {alert ("closed ");}

 

 

7. Desktop reminders-Notifications
If (window. webkitpolicications. checkPermission () = 0 ){
// You can pass any url as a parameter
Window. webkitNotifications. createNotification (tweet. picture, tweet. title,
Tweet. text). show ();
} Else {
Window. webkitconfigurications. requestPermission ();
}

 

 

8. Drag and drop operation-Drag and drop
Document. addEventListener ('dragstart', function (event ){
Event. dataTransfer. setData ('text', 'mizmized text ');
Event. dataTransfer. effectAllowed = 'copy ';
}, False );
Coming soon: drag files from the desktop to the page.

 

 

9. geographic location-Geolocation
If (navigator. geolocation ){
Navigator. geolocation. getCurrentPosition (function (position ){
Var lat = position. coords. latitude;
Var lng = position. coords. longpolling;
Map. setCenter (new GLatLng (lat, lng), 13 );
Map. addOverlay (new GMarker (new GLatLng (lat, lng )));
});
}