Recommended
More Related Content
What's hot
What's hot (19)
Similar to The Mysteries Of JavaScript-Fu (@media SF Edition)
Similar to The Mysteries Of JavaScript-Fu (@media SF Edition) (20)
More from danwrong
Recently uploaded
Recently uploaded (20)
The Mysteries Of JavaScript-Fu (@media SF Edition)
- 1. THE MYSTERIES OF JAVASCRIPT-FU Dan Webb (dan@danwebb.net)
- 2. About Me JavaScript hacker for ❖ 6 years Ruby/Rails for 2 years ❖ Author of Low Pro, ❖ DOM Builder, Sumo and other stuff Prototype Core Team ❖ http://danwebb.net ❖
- 4. Web 2.0 has forced ‘real’ programmers to master it
- 5. JavaScript-Fu is not easy to master
- 6. The web is awash with bad examples and worse resources
- 7. Developers forced into refuge behind libraries and frameworks
- 9. 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! ❖
- 10. TRANSLATED... Working with events ❖ Working with DOM elements ❖ Optimisation ❖ Testing and debugging ❖
- 11. THE TAO OF THE EVENT HANDLER
- 12. The essence of browser scripting is defining behaviour
- 13. Big differences in both browser implementation and opinion
- 14. The main battle has always been in one area...
- 17. INLINE EVENT HANDLERS Applied as soon as the browser loads the HTML
- 18. INLINE EVENT HANDLERS But what happens when there is more than one....
- 21. SCRIPT-BASED EVENT HANDLERS
- 22. Attached after element has loaded
- 24. Very DRY
- 26. Separate JavaScript out in a similar way to CSS
- 27. Large numbers of event handlers choke browsers
- 28. 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
- 29. EVENT BUBBLING <body> handler <div> <p> <a> click
- 30. EVENT DELEGATION
- 33. 5 METHODS OF DOM FIST
- 34. There are 5 methods for updating HTML
- 35. 3 official methods (W3C)
- 39. 1 non-standard method (you guessed it, from IE)
- 42. DOM VS innerHTML
- 43. DOM METHODS
- 44. Insert elements with precision
- 45. But you need to create the nodes first...
- 47. ARGH!
- 49. INNERHTML
- 50. Can shift large amount of HTML quickly...
- 51. ...but you don't get much control
- 52. Incredibly simple to use with Ajax
- 53. WHICH WAY? No clear winner ❖ DOM is good for more surgical ❖ manipulation innerHTML is good for replacing large ❖ amounts of content or simple jobs
- 54. and the final method...
- 55. THE BASTARD SON
- 58. ~134KB
- 59. 5 HTTP requests
- 60. Takes time to download and evaluate script
- 61. The less JavaScript the better
- 62. Browsers normally only try to load 2 resources concurrently
- 64. Use GZIP compression not JS based minification
- 65. Make sure everything is cachable
- 66. FASTER LOOPS
- 67. FASTER LOOPS
- 68. BE CAREFUL WITH SELECTORS
- 69. THE 36 CHAMBERS OF SHAOLIN
- 71. You're going to need a few tools...
- 72. Buy a Mac
- 73. Parallels Workstation PARALLELS WORKSTATION
- 74. Get Firebug
- 76. What about the other browsers?
- 78. And then there's testing...
- 79. SELENIUM Written by ThoughtWorks ❖ Implemented in HTML/CSS ❖ Test cases define a series of user ❖ actions (using HTML) Assertions check the correct results ❖
- 80. LEARNING MORE
- 81. 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/
- 82. QUESTIONS?