1. Andrew Chalkley UI Developer

2. The Proper Way CSS Ye Olde Way Tables Obtrusive

3. CSS evangelists told us that there should be a separation of layout from markup. JavaScript evangelists tell us today that there should be the separation of behavior from markup.

4. Bad <a href=“javascript:window.open(‘somepage.html’)”>Some Page</a> <a href=“#” onclick=“window.open(‘somepage.html’); return false;”>Some Page</a> Better <a href=“somepage.html” onclick=“window.open(‘somepage.html’); return false;”>...</a> Best <a href=“somepage.html” class=“new_window”>Some Page</a>

5. JavaScript Implementation window.onload = function() { } var anchors = document.getElementsByTagName(‘a’); for (vari = 0, anchor; i < anchors.length; i++) { } if (anchor.className == “new_window”) { anchor.onclick = function() { varhref = this.href; window.open(href); return false; } }

7. it overrides any existing load or click handlers

8. cannot handle class=“new_windowexternal_link”

9. it leaks memory in IE6The Answer…

11. Cross-browser support

12. Compatibility mode (DWR, Prototype, etc)

13. Executes when DOM is ready (before images have loaded)

15. window.onload = function() { } var anchors = document.getElementsByTagName(‘a’); for (vari = 0, anchor; i < anchors.length; i++) { } if (anchor.className == “new_window”) { anchor.onclick = function() { varhref = this.href; window.open(href); return false; } }

16. $(function() { }); $(“a.new_window”).click(function() { }); window.open( $(this).attr(“href”) ); return false;

17. DEMO