wiki.gimslab.com: Html5 Js Api

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 #

main.js

var worker = new Worker(‘work.js');
worker.onmessage = function (event) { alert(event.data); };

work.js

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

last modified 2010-06-10 10:04:34
Processing time 0.0095 sec