HTML5 JS APIs
99 likes47,088 views
The document discusses various JavaScript APIs available in HTML5 for building rich web applications, including Canvas, Drag and Drop, Geolocation, Local Storage, Web Sockers, Offline Applications, and more. It provides code examples and links to documentation resources for each API. The last part encourages exploring demos and contacting the author with any other questions.
HTML5 JS APIs
- 1. JavaScript APIs HTML5 Remy Sharp @rem standards.next
- 2. JavaScript APIs HTML5 & friends! Remy Sharp @rem standards.next
- 3. HTML5: 2022?
- 4. Bollocks.
- 5. APIs •Canvas •Geolocation •Drag & Drop •Local Storage •History •Selectors •Inline Editing •Server Events •Messaging •Web Sockets •Of ine Apps •Workers •Video & Audio
- 6. APIs •Canvas •Geolocation •Drag & Drop •Local Storage •History •Selectors •Inline Editing •Server Events •Messaging •Web Sockets •Of ine Apps •Workers •Video & Audio
- 7. APIs •Canvas •Geolocation •Drag & Drop •Local Storage •History •Selectors •Inline Editing •Server Events •Messaging •Web Sockets •Of ine Apps •Workers •Video & Audio
- 8. APIs •Canvas •Geolocation •Drag & Drop •Local Storage •History •Selectors •Inline Editing •Server Events •Messaging •Web Sockets •Of ine Apps •Workers •Video & Audio
- 9. APIs •Canvas •Geolocation •Drag & Drop? •Local Storage •History •Selectors •Inline Editing •Server Events •Messaging •Web Sockets •Of ine Apps •Workers •Video & Audio
- 10. Documentation
- 15. Canvas
- 16. Canvas
- 17. document.querySelector('canvas').getContext("2d") http://tr.im/pRkz
- 18. document.querySelector('canvas').getContext("2d") http://tr.im/pRkz
- 19. Drag'n Drop
- 20. Drag'n Drop
- 21. Drag & Drop •draggable="true" •events: dragstart, drop, etc •event.transferData
- 22. <div draggable="true">drag me</div> <script> document.querySelector('div').addEventListener( "dragstart", function (e) { e.dataTransfer.setData("arbitrary","data"); return true; }, true); </script>
- 23. <div draggable="true">drag me</div> <script> document.querySelector('div').addEventListener( "dragstart", function (e) { ??? e.dataTransfer.setData("arbitrary","data"); return true; }, true); </script>
- 24. el.addEventListener('dragover', function (e) { e.preventDefault(); }, true); el.addEventListener('drop', function (e) { e.stopPropagation(); alert(e.dataTransfer.getData('arbitrary')); }, true);
- 25. el.addEventListener('dragover', function (e) { e.preventDefault(); }, true); el.addEventListener('drop', function (e) { e.stopPropagation(); alert(e.dataTransfer.getData('arbitrary')); }, true);
- 26. el.addEventListener('dragover', function (e) { e.preventDefault(); }, true); el.addEventListener('drop', function (e) { e.stopPropagation(); alert(e.dataTransfer.getData('arbitrary')); }, true);
- 31. Of ine Apps •Application cache •Events: of ine, online •navigator.onLine property
- 34. Cache •First line: CACHE MANIFEST •Requires text/cache-manifest •Recommend using versioning •window.applicationCache
- 35. Cache •On load will hit my.manifest
- 36. Cache •On load will hit my.manifest •Change manifest: trigger reload
- 37. Cache •On load will hit my.manifest •Change manifest: trigger reload •applicationCache.update() force
- 38. Cache •On load will hit my.manifest •Change manifest: trigger reload •applicationCache.update() force •Cache events
- 41. Firefox
- 42. window.addEventListener( 'offline', // online too online, // function true );
- 43. function online() { if (navigator.onLine == false) { // gone offline } else { // else we're online } }
- 46. navigator.onLine
- 47. Geolocation
- 48. Geolocation
- 51. navigator .geolocation .getCurrentPosition( success, err );
- 54. Messaging
- 55. Messaging
- 56. Messaging •Communicate across domains •Across window object •With Workers •String transfer only
- 58. Cross Domain document .getElementById("iframe") .contentWindow .postMessage("my message");
- 59. The Catcher window.addEventListener( "message", function(e){ if (e.origin !== "http://example.com") { return; } alert(e.origin + " said: " + e.data); }, false );
- 60. Web Workers
- 61. Web Workers
- 62. •Threads
- 63. •Threads •Native or via Gears
- 64. •Threads •Native or via Gears •Sandboxed
- 65. •Threads •Native or via Gears •Sandboxed •Debugging?
- 67. Without
- 69. Storage
- 70. Storage
- 73. 1. sessionStorage 2. localStorage 3. database storage