The document discusses several HTML5 APIs including Geolocation, Web Storage, Web SQL, Web Workers, Web Sockets, and Canvas. It provides code examples and explanations for how each API works and can be used, including getting a user's location, storing data locally, running scripts in parallel threads, enabling real-time communications, and drawing graphics. It also mentions some use cases for these technologies like building games, performing intensive calculations, and syntax highlighting.
6. Geolocation API function getGEO() { // First check if your browser supports the geolocation API if (navigator.geolocation) { alert("HTML 5 is getting your location"); // Get the current position navigator.geolocation.getCurrentPosition( function(position) { alert(position.coords.latitude); alert(position.coords.longitude); }); } else { alert("Sorry... your browser does not support the HTML5 GeoLocation API"); } }
9. Error callback arguments interface PositionError { const unsigned short PERMISSION_DENIED = 1; const unsigned short POSITION_UNAVAILABLE = 2; const unsigned short TIMEOUT = 3; readonly attribute unsigned short code ; readonly attribute DOMString message ; };
10. Repeated position updates function scrollMap(position) { // Scrolls the map so that it is centered at (position.coords.latitude,position.coords.longitude). } // Request repeated updates. navigator.geolocation.watchPosition(scrollMap);
11.
12. Storage Interface interface Storage { readonly attribute unsigned long length ; DOMString key(in unsigned long index) ; getter any getItem(in DOMString key) ; setter creator void setItem(in DOMString key, in any value) ; deleter void removeItem(in DOMString key) ; void clear() ; };
13. Web SQL interface WindowDatabase { Database openDatabase(in DOMString name, in DOMString version, in DOMString displayName, in unsigned long estimatedSize, in optional DatabaseCallback creationCallback); }; function prepareDatabase(ready, error) { return openDatabase('documents', '1.0', 'Offline document storage', 5*1024*1024, function (db) { db.changeVersion('', '1.0', function (t) { t.executeSql('CREATE TABLE docids (id, name)'); }, error); }); }
14.
15. var worker = new Worker(“jworker.js”); main.js Manages DOM onMessage Manages DOM, Renders UI jworker.js Main.js jWorker.js postMessage Process task Message WebWorker Object Lifecycle
16. Worker-Syntax <script> var worker = new Worker('worker.js'); worker.postMessage('Hello Guest'); worker.onmessage = function (event) { alert(event.data); }; </script>
27. Canvas element <canvas id="stockGraph" width="150" height="150"> You browser doesn't support canvas. </canvas> var canvas = document.getElementById('tutorial'); if (canvas.getContext){ var ctx = canvas.getContext('2d'); }