Your SlideShare is downloading. ×

HTML5 JS APIs

95,820

Published on

Standards.next for HTML5 JavaScript APIs

Standards.next for HTML5 JavaScript APIs

Published in: Technology
12 Comments
92 Likes
Statistics
Notes
No Downloads
Views
Total Views
95,820
On Slideshare
0
From Embeds
0
Number of Embeds
11
Actions
Shares
0
Downloads
1,799
Comments
12
Likes
92
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 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

×