10. A thought problem.
• JavaScript is entirely object oriented -
almost to the extend of Ruby!
• Unless most others, we don‘t hate JavaScript. Why
simulate another language?
12. The jQuery way
• Grab something and do something with it
• Human readable syntax
• Cross-browser normalization
• Chaining:
$(quot;<div/>quot;)
.html(quot;yay!quot;)
.appendTo(quot;bodyquot;)
13. Feature sets
Selections
DOM Traversing
DOM Manipulations
Attributes & CSS
Events
Animation
Ajax
25. • firstCondition() && secondCondition()
• var one = 1, two = 2, three = 3;
• condition ? foo() : bar()
• var available = foo || bar
• (new Date()).getTime()
• !!()
31. Event-driven code
• •
Ericsson uses Erlang to Any JS-Object can be a
control their container
telecommunication
• Each module needs to
infrastructure
know very little - it
• In Erlang, modules talk to doesn‘t care how to get
other modules through information
event-passing
• Any number of modules
• Most common modules: can be waiting to receive
DOM elements information back at the
same time without
hanging the browser
32. Event namespacing
$(quot;divquot;)
.bind(quot;clickquot;, function() {
alert(quot;fooquot;);
})
.$(quot;divquot;).bind(quot;click.barquot;, function() {
alert(quot;barquot;);
});
$(quot;divquot;).trigger(quot;clickquot;); //Alerts foo and bar
$(quot;divquot;).trigger(quot;click.barquot;); //Alerts only bar
$(quot;divquot;).unbind(quot;.barquot;) //Unbinds all .bar events
33. Custom events
• Events don‘t have to be browser events -
invent your own!
• Events can be bound to anything - even
generic Javascript objects
• Use the data API to pass along data with
DOM elements without causing memory
leaks
35. • Scales to any number of elements
• No need to rebind / unbind on DOM
changes
• 1. Binds events to a root node instead of
the actual context node
• 2. Checks for actual context during the
trigger
39. What can be extended?
Functions Selectors Animations
• most jQuery plugins • $(‘ div:pseudo‘) • $(..).animate({ property: 100 })
• $(..).doSomething()
40. Functions
• jQuery.fn is the plugin namespace
• jQuery.fn.myFunction = fn results in $
(..).myFunction()
• In your function, this points to the current
selection, and all arguments are passed
along
41. Selectors
• The selector can be extended with custom
pseudo selectors
• Simply extend jQuery.expr[quot;:quot;]
• key is your pseudo selector
• value is a function that receives the
element as first arg and needs to return a
boolean
42. Animations
• Add your own properties to animate
(i.e. ,corner‘)
• Extend jQuery.fx.step:
• key is the property name
• value is a function that receives an fx
object