FFC 2009: Javascript 101 (Nap Lara)

Form, Function & Class: Javascript 101

Membership webdesigners.com.ph/join
Requirements:
• 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