Recommended
Recommended
More Related Content
What's hot
What's hot (20)
Viewers also liked
Similar to Re-Learning JavaScript
Similar to Re-Learning JavaScript (20)
Recently uploaded
Recently uploaded (20)
Re-Learning JavaScript
- 1. © 2005-2011 iMetaTechnologies Limited Re-Learning JavaScript Michael Godfrey DD: Mobile: Email: mgodfrey@imeta.co.uk
- 2. Re-Learning JavaScript old school JavaScript == browser scripting == painful © 2005-2011 iMeta Technologies Limited
- 3. Re-Learning JavaScript example – assigning event handlers, e.g. for menu rollovers: element.on<eventname> element.attachEvent element.addEventListener © 2005-2011 iMeta Technologies Limited
- 4. Re-Learning JavaScript jQuery “is a fast and concise JavaScript Library that simplifies HTML document traversing, event handling, animating, and Ajax interactions for rapid web development.” MooTools “allows you to write powerful, flexible, and cross-browser code with its elegant, well documented, and coherent API.” © 2005-2011 iMeta Technologies Limited
- 5. Re-Learning JavaScript jQuery.bind() “Attach a handler to an event for the elements.” © 2005-2011 iMeta Technologies Limited
- 6. Re-Learning JavaScript jQuery is just JavaScript! Important to understand underlying language and implementation environment in detail. © 2005-2011 iMeta Technologies Limited
- 7. Re-Learning JavaScript © 2005-2011 iMeta Technologies Limited OO and functional-based JavaScript Looks a bit like LINQ, but how does it work?
- 8. Re-Learning JavaScript { Objects } Literal notation, name value pairs, quick! Not based on a class blueprint. Inherits from Object.prototype, accessed via ugly __proto__ property. © 2005-2011 iMeta Technologies Limited
- 9. Re-Learning JavaScript Functions() Invokable objects, hence properties allowed. Inherits from Function.prototype, accessed via ugly __proto__ property Created with a prototype property, a new object inheriting from Object.prototype. © 2005-2011 iMeta Technologies Limited
- 10. Re-Learning JavaScript Constructor Functions() Invoked with new keyword. Creates an empty object referenced by this keyword. this inherits the prototype of the constructor function. this is returned. © 2005-2011 iMeta Technologies Limited
- 11. Re-Learning JavaScript Callbacks Functions as parameters to other functions. Very useful for asynchronous programming. © 2005-2011 iMeta Technologies Limited
- 12. Re-Learning JavaScript © 2005-2011 iMeta Technologies Limited OO and functional-based JavaScript Now let’s look at the source
- 13. Re-Learning JavaScript CoffeeScript “is a little language that compiles into JavaScript. Underneath all of those embarrassing braces and semicolons, JavaScript has always had a gorgeous object model at its heart. CoffeeScript is an attempt to expose the good parts of JavaScript in a simple way.” It also makes our example look even more like LINQ! © 2005-2007 imeta Technologies Limited
Editor's Notes
- element.on<eventname>, e.g. element.onmouseove = function(e){};Netscape’s traditional event registration model, universally supported (i.e. cross-browser compatible), big drawback = only one event handler can be registered. Therefore when multiple handlers are required a wrapping function must be created.element.attachEvent, Microsoft’s solution to the big drawback of Netscape’s traditional model.element.addEventListener, W3C’s solution and therefore the standard.http://www.quirksmode.org/js/events_tradmod.htmlhttp://www.quirksmode.org/js/events_advanced.html
- Line 2361 – jQuery.each(["bind", "one"], function( i, name ) { ...jQuery.fn[ name ] = function( type, data, fn ) { ... jQuery.event.add( this[i], type, handler, data ); ... }; ...});Line 1555 –jQuery.event = { // Bind an event to an element add: function( elem, types, handler, data ) { ... // Bind the global event handler to the elementif ( elem.addEventListener ) {elem.addEventListener( type, eventHandle, false );} else if ( elem.attachEvent ) {elem.attachEvent( "on" + type, eventHandle );} ... }; ...};
- AjQuery object is commonly made using a CSS selector, e.g. $(“#menu > li”) equates to “select all <li>’s that are a direct child of the element with id ‘menu’”, http://www.w3.org/TR/CSS2/selector.html.In which direction would a browser read a CSS selector such as “#menu > li”?Rightmost first! Therefore “#menu > li” will actually find every li element on the page and then check to see if it is a direct descendant of the element with id ‘menu’.css.selectors.htm will match 6 li elements before using the child rule to limit the result set down to 3 li elements.http://www.stevesouders.com/blog/2009/06/18/simplifying-css-selectors/https://developer.mozilla.org/en/Writing_Efficient_CSS
- http://netindonesia.net/blogs/jimmy/archive/2007/07/16/Javascript-LINQ_3F003F003F00_.aspx
- http://netindonesia.net/blogs/jimmy/archive/2007/07/16/Javascript-LINQ_3F003F003F00_.aspx