Published on May 26, 2007
A peasant’s language
Web 2.0 has forced ‘real’ programmers to master it
The web is awash with bad examples and worse resources
Developers forced into refuge behind libraries and frameworks
TRANSLATED... Working with events ❖ Working with DOM elements ❖ Optimisation ❖ Testing and debugging ❖
THE TAO OF THE EVENT HANDLER
The essence of browser scripting is defining behaviour
Big differences in both browser implementation and opinion
The main battle has always been in one area...
INLINE VS SCRIPTED
INLINE EVENT HANDLERS
INLINE EVENT HANDLERS Applied as soon as the browser loads the HTML
INLINE EVENT HANDLERS But what happens when there is more than one....
SCRIPT-BASED EVENT HANDLERS
Attached after element has loaded
Large numbers of event handlers choke browsers
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
EVENT BUBBLING <body> handler <div> <p> <a> click
BETTER INLINE HANDLERS
BETTER INLINE HANDLERS
5 METHODS OF DOM FIST
There are 5 methods for updating HTML
3 official methods (W3C)
1 non-standard method (you guessed it, from IE)
DOM VS innerHTML
Insert elements with precision
But you need to create the nodes first...
LOWPRO’S DOM BUILDER
Can shift large amount of HTML quickly...
...but you don't get much control
Incredibly simple to use with Ajax
WHICH WAY? No clear winner ❖ DOM is good for more surgical ❖ manipulation innerHTML is good for replacing large ❖ amounts of content or simple jobs
and the final method...
THE BASTARD SON
LIGHTNING SCRIPT STYLE
5 HTTP requests
Takes time to download and evaluate script
Browsers normally only try to load 2 resources concurrently
Combine .js files
Use GZIP compression not JS based minification
Make sure everything is cachable
BE CAREFUL WITH SELECTORS
THE 36 CHAMBERS OF SHAOLIN
You're going to need a few tools...
Buy a Mac
Parallels Workstation PARALLELS WORKSTATION
What about the other browsers?
And then there's testing...
SELENIUM Written by ThoughtWorks ❖ Implemented in HTML/CSS ❖ Test cases define a series of user ❖ actions (using HTML) Assertions check the correct results ❖
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/
View 29444 Mysteries posts, presentations, experts, and more. Get the professional knowledge you need on LinkedIn. LinkedIn Home ... Media Production. Current
View 20768 Sf posts, presentations, experts, and more. Get the professional knowledge you need on LinkedIn. LinkedIn Home What is LinkedIn? Join Today
@media 2007 to coming with an AJAX library is great… nice article. Werbeagentur at 04.07.07 / 21PM. 0n3klnhzkoav6dd yucxe4myrlhwq 5mrir1ha44.