Recommended
Recommended
More Related Content
What's hot
What's hot (20)
Viewers also liked
Viewers also liked (15)
Similar to The Mysteries Of JavaScript-Fu (@media Europe Edition)
Similar to The Mysteries Of JavaScript-Fu (@media Europe Edition) (20)
More from danwrong
Recently uploaded
Recently uploaded (20)
The Mysteries Of JavaScript-Fu (@media Europe Edition)
- 1. THE MYSTERIES OF JAVASCRIPT-FU Dan Webb (dan@danwebb.net)
- 3. Web 2.0 has forced ‘real’ programmers to master it
- 4. JavaScript-Fu is not easy to master
- 5. The web is awash with bad examples and worse resources
- 6. Developers forced into refuge behind libraries and frameworks
- 8. THE ANCIENT MANUALS OF JAVASCRIPT-FU The Tao Of The Event Handler! ❖ 5 Methods Of DOM Fist! ❖ Lightning Script Style! ❖ The 36 Chambers Of Shaolin! ❖
- 9. TRANSLATED... Working with events ❖ Working with DOM elements ❖ Optimisation ❖ Testing and debugging ❖
- 10. THE TAO OF THE EVENT HANDLER
- 11. The essence of browser scripting is defining behaviour
- 12. Big differences in both browser implementation and opinion
- 13. The main battle has always been in one area...
- 16. INLINE EVENT HANDLERS Applied as soon as the browser loads the HTML
- 17. INLINE EVENT HANDLERS But what happens when there is more than one....
- 20. SCRIPT-BASED EVENT HANDLERS
- 21. Attached after element has loaded
- 23. Very DRY
- 25. Separate JavaScript out in a similar way to CSS
- 26. Large numbers of event handlers choke browsers
- 27. WHICH WAY? Use script-based event handling by ❖ default If the page is large and this method ❖ results in unresponsiveness try event delegation If all else fails go for inline event ❖ handling
- 28. EVENT BUBBLING <body> handler <div> <p> <a> click
- 29. EVENT DELEGATION
- 32. 5 METHODS OF DOM FIST
- 33. There are 5 methods for updating HTML
- 34. 3 official methods (W3C)
- 38. 1 non-standard method (you guessed it, from IE)
- 41. DOM VS innerHTML
- 42. DOM METHODS
- 43. Insert elements with precision
- 44. But you need to create the nodes first...
- 46. ARGH!
- 48. INNERHTML
- 49. Can shift large amount of HTML quickly...
- 50. ...but you don't get much control
- 51. Incredibly simple to use with Ajax
- 52. WHICH WAY? No clear winner ❖ DOM is good for more surgical ❖ manipulation innerHTML is good for replacing large ❖ amounts of content or simple jobs
- 53. and the final method...
- 54. THE BASTARD SON
- 57. ~134KB
- 58. 5 HTTP requests
- 59. Takes time to download and evaluate script
- 60. The less JavaScript the better
- 61. Browsers normally only try to load 2 resources concurrently
- 63. Use GZIP compression over JS based minification
- 64. Make sure everything is cachable
- 65. FASTER LOOPS
- 66. FASTER LOOPS
- 67. BE CAREFUL WITH SELECTORS
- 68. Use a just-in-time approach
- 71. THE 36 CHAMBERS OF SHAOLIN
- 73. You're going to need a few tools...
- 74. Buy a Mac
- 75. Parallels Workstation PARALLELS WORKSTATION
- 76. Get Firebug
- 78. What about the other browsers?
- 80. And then there's testing...
- 81. SELENIUM Written by ThoughtWorks ❖ Implemented in HTML/CSS ❖ Test cases define a series of user ❖ actions (using HTML) Assertions check the correct results ❖
- 84. LEARNING MORE
- 85. LEARNING MORE Dan Webb: http://www.danwebb.net ❖ Low Pro: http://www.danwebb.net/lowpro ❖ Parallels: http://parallels.com ❖ Firebug: http://getfirebug.com ❖ Selenium: http://www.openqa.org/ ❖ selenium/
- 86. QUESTIONS?