Empfohlen
Weitere Àhnliche Inhalte
Was ist angesagt?
Was ist angesagt? (19)
Ăhnlich wie The Mysteries Of JavaScript-Fu (@media SF Edition)
Ăhnlich wie The Mysteries Of JavaScript-Fu (@media SF Edition) (20)
Mehr von danwrong
KĂŒrzlich hochgeladen
KĂŒrzlich hochgeladen (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?