Contents
- 1 new selector
- 2 web storage
- 3 web sql database
- 4 application cache
- 5 Web Workers
- 6 Web Sockets
- 7 Notifications
- 8 Drag and drop
- 9 Geolocation
1 new selector #
- Finding elements by class (DOM API)
document.getElementsByClassName(CLASS_NAME);
- Finding elements by CSS syntax (Selectors API)
document.querySelectorAll(CSS_SYNTAX);
2 web storage #
window.localStorage['KEY'] = VAL;
VAL = = window.localStorage['KEY'];
3 web sql database #
var db = window.openDatabase(DB_NAME, DB_VERSION);
db.transaction(function(tx) {
tx.executeSql("select * from tbl", [], successCallback, errorCallback);
});
4 application cache #
<html manifest="cache.manifest">
window.applicationCache.addEventListener('checking', updateCacheStatus, false);
CACHE MANIFEST
# version 1
CACHE:
/html5_exam/test.html
/html5_exam/test.png
/html5_exam/test.js
/html5_exam/test.css
5 Web Workers #
var worker = new Worker(‘work.js');
worker.onmessage = function (event) { alert(event.data); };
LONG_TERM_WORK...
postMessage(RESULT_DATA);
6 Web Sockets #
var socket = new WebSocket(URL);
socket.onopen = function(event) {
socket.postMessage(MESSAGE);
}
socket.onmessage = function(event) {
alert(event.data);
}
socket.onclose = function(event) {
alert("finished");
}
7 Notifications #
if (window.webkitNotifications.checkPermission() == 0) {
window.webkitNotifications.createNotification("http://gimslab.com/html5.png", "Title", "Body").show();
} else {
window.webkitNotifications.requestPermission();
}
8 Drag and drop #
document.addEventListener('dragstart', function(event) {
event.dataTransfer.setData('text', 'Customized text');
event.dataTransfer.effectAllowed = 'copy';
}, false);
9 Geolocation #
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(function(position) {
var lat = position.coords.latitude;
var lng = position.coords.longitude;
map.setCenter(new GLatLng(lat, lng), 13);
map.addOverlay(new GMarker(new GLatLng(lat, lng)));
});
}