Thursday, July 09, 2009

FFC 2009: Javascript 101 (Nap Lara)

Form, Function & Class: 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

• 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
• 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

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

• 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

1 comment:

Anonymous said...

I think this is one of the most vital information
for me. And i am glad reading your article. But should
remark on some general things, The web site style is wonderful, the articles
is really excellent : D. Good job, cheers

Also visit my weblog: Rent Bungalow


Blog Archive

The Learner

My Photo

a crafty cat who loves food, linux, anime and crafting.

business analyst by day, blogger by night. also a frustrated artist.