Recommended
Recommended
More Related Content
What's hot
What's hot (20)
Viewers also liked
Viewers also liked (16)
Similar to HTML5 JS APIs
Similar to HTML5 JS APIs (20)
More from Remy Sharp
More from Remy Sharp (20)
Recently uploaded
Recently uploaded (20)
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