FFC2009: Javascript 101

• membership fee – annual
• organize a mini web design conference
• submit a portfolio of webdesign work – prove that you made it

Javascript 101: DOM, Events, and Objects
Talk by Nap Lara

DOM

• analogy: family
  • body – father – parent node
  • div – first child – sibling
  • span – sibling
  • p – last child – sibling

How do we access elements in the DOM?

• getElementByID
• getElementsByClassName — YUI
• Selectors — YUI

Which one do you use?
selectors – not the fastest; generally slower
jQuery – with selectors you could say 'every odd row'
by Class Name – collection of elements
by Class ID – specific

Creating DOM Elements

• inner HTML
• DOM
• Fragments

How Events Work

• Event Bubbling (usually in IE)
  • from the bottom up
  • IE supports only Event Bubbling
  • user clicks on <p>
• Adding events
  • inline
  • DOM level 0
    • div.onclick = function
    • this way overrides each other
  • DOM level 2
    • YUI

When to use them

Event delegation

How to Write Objects

• object literal
  • lightest way
  • seen outside, everything could be accessed — disadvantage
• modular pattern
  • you could hide some things
• prototypes

AJAX

• XML
• HTML
• JSON – native javascript; lighter than XML
• Custom Format

Phases when making an AJAX request

• onFailure
• onStart – loader

AJAX tips

• limit your calls
• define timeouts

Best Practices

• Compression
• Obfuscation
• Separate Code from Content
  • reusability
• Multiple Domains

Global Variables and Functions

Repaint and Reflow
- could happen when working with styles