HTML5 JS APIs

102,653 views
101,645 views

Published on

Standards.next for HTML5 JavaScript APIs

Published in: Technology
12 Comments
94 Likes
Statistics
Notes
No Downloads
Views
Total views
102,653
On SlideShare
0
From Embeds
0
Number of Embeds
11
Actions
Shares
0
Downloads
1,824
Comments
12
Likes
94
Embeds 0
No embeds

No notes for slide

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
  11. www.whatwg.org/html5/ dev.w3.org/html5/ irc://irc.freenode.net/#whatwg
  12. Canvas
  13. Canvas
  14. document.querySelector('canvas').getContext("2d") http://tr.im/pRkz
  15. document.querySelector('canvas').getContext("2d") http://tr.im/pRkz
  16. Drag'n Drop
  17. Drag'n Drop
  18. Drag & Drop •draggable="true" •events: dragstart, drop, etc •event.transferData
  19. <div draggable="true">drag me</div> <script> document.querySelector('div').addEventListener( "dragstart", function (e) { e.dataTransfer.setData("arbitrary","data"); return true; }, true); </script>
  20. <div draggable="true">drag me</div> <script> document.querySelector('div').addEventListener( "dragstart", function (e) { ??? e.dataTransfer.setData("arbitrary","data"); return true; }, true); </script>
  21. el.addEventListener('dragover', function (e) { e.preventDefault(); }, true); el.addEventListener('drop', function (e) { e.stopPropagation(); alert(e.dataTransfer.getData('arbitrary')); }, true);
  22. el.addEventListener('dragover', function (e) { e.preventDefault(); }, true); el.addEventListener('drop', function (e) { e.stopPropagation(); alert(e.dataTransfer.getData('arbitrary')); }, true);
  23. el.addEventListener('dragover', function (e) { e.preventDefault(); }, true); el.addEventListener('drop', function (e) { e.stopPropagation(); alert(e.dataTransfer.getData('arbitrary')); }, true);
  24. http://html5demos.com/drag
  25. http://html5demos.com/drag
  26. Of ine Applications
  27. Of ine Applications
  28. Of ine Apps •Application cache •Events: of ine, online •navigator.onLine property
  29. Enable <html manifest="my.manifest" >
  30. my.manifest CACHE MANIFEST images/shade.jpg images/bin.jpg
  31. Cache •First line: CACHE MANIFEST •Requires text/cache-manifest •Recommend using versioning •window.applicationCache
  32. Cache •On load will hit my.manifest
  33. Cache •On load will hit my.manifest •Change manifest: trigger reload
  34. Cache •On load will hit my.manifest •Change manifest: trigger reload •applicationCache.update() force
  35. Cache •On load will hit my.manifest •Change manifest: trigger reload •applicationCache.update() force •Cache events
  36. Firefox
  37. window.addEventListener( 'offline', // online too online, // function true );
  38. function online() { if (navigator.onLine == false) { // gone offline } else { // else we're online } }
  39. http://html5demos.com/offline
  40. http://html5demos.com/offline
  41. navigator.onLine
  42. Geolocation
  43. Geolocation
  44. Not always accurate!
  45. navigator .geolocation .getCurrentPosition( success, err );
  46. Messaging
  47. Messaging
  48. Messaging •Communicate across domains •Across window object •With Workers •String transfer only
  49. .postMessage(str) .onMessage(event) event.data == str
  50. Cross Domain document .getElementById("iframe") .contentWindow .postMessage("my message");
  51. The Catcher window.addEventListener( "message", function(e){ if (e.origin !== "http://example.com") { return; } alert(e.origin + " said: " + e.data); }, false );
  52. Web Workers
  53. Web Workers
  54. •Threads
  55. •Threads •Native or via Gears
  56. •Threads •Native or via Gears •Sandboxed
  57. •Threads •Native or via Gears •Sandboxed •Debugging?
  58. •importScripts •postMessage •onmessage •onconnect
  59. Without
  60. http://html5demos.com/worker
  61. Storage
  62. Storage
  63. 1. sessionStorage
  64. 1. sessionStorage 2. localStorage
  65. 1. sessionStorage 2. localStorage 3. database storage
  66. Storage sessionStorage.setItem(key, value) sessionStorage.getItem(key)
  67. Storage localStorage.setItem(key, value) localStorage.getItem(key)
  68. And more! Remy Sharp @rem remy@leftlogic.com html5demos.com remysharp.com full-frontal.org

×