Re-Learning JavaScript

1,083 views

Published on

"Lunch for Learning" presentation given to colleagues at iMeta Technologies Ltd.

Published in: Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,083
On SlideShare
0
From Embeds
0
Number of Embeds
9
Actions
Shares
0
Downloads
5
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide
  • 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
  • Re-Learning JavaScript

    1. 1. © 2005-2011 iMetaTechnologies Limited<br />Re-Learning JavaScript<br />Michael Godfrey<br />DD: <br />Mobile: <br />Email: mgodfrey@imeta.co.uk<br />
    2. 2. Re-Learning JavaScript<br />old school JavaScript == browser scripting == painful<br />© 2005-2011 iMeta Technologies Limited<br />
    3. 3. Re-Learning JavaScript<br />example – assigning event handlers, e.g. for menu rollovers:<br />element.on<eventname><br />element.attachEvent<br />element.addEventListener<br />© 2005-2011 iMeta Technologies Limited<br />
    4. 4. Re-Learning JavaScript<br />jQuery<br />“is a fast and concise JavaScript Library that simplifies HTML document traversing, event handling, animating, and Ajax interactions for rapid web development.”<br />MooTools<br />“allows you to write powerful, flexible, and cross-browser code with its elegant, well documented, and coherent API.”<br />© 2005-2011 iMeta Technologies Limited<br />
    5. 5. Re-Learning JavaScript <br />jQuery.bind() <br />“Attach a handler to an event for the elements.”<br />© 2005-2011 iMeta Technologies Limited<br />
    6. 6. Re-Learning JavaScript<br />jQuery is just JavaScript!<br />Important to understand underlying language and implementation environment in detail.<br />© 2005-2011 iMeta Technologies Limited<br />
    7. 7. Re-Learning JavaScript<br />© 2005-2011 iMeta Technologies Limited<br />OO and functional-based JavaScript<br />Looks a bit like LINQ, but how does it work?<br />
    8. 8. Re-Learning JavaScript<br />{ Objects }<br />Literal notation, name value pairs, quick!<br />Not based on a class blueprint.<br />Inherits from Object.prototype, accessed via ugly __proto__ property.<br />© 2005-2011 iMeta Technologies Limited<br />
    9. 9. Re-Learning JavaScript<br />Functions()<br />Invokable objects, hence properties allowed.<br />Inherits from Function.prototype, accessed via ugly __proto__ property<br />Created with a prototype property, a new object inheriting from Object.prototype.<br />© 2005-2011 iMeta Technologies Limited<br />
    10. 10. Re-Learning JavaScript<br />Constructor Functions()<br />Invoked with new keyword.<br />Creates an empty object referenced by this keyword.<br />this inherits the prototype of the constructor function.<br />this is returned.<br />© 2005-2011 iMeta Technologies Limited<br />
    11. 11. Re-Learning JavaScript <br />Callbacks<br />Functions as parameters to other functions.<br />Very useful for asynchronous programming.<br />© 2005-2011 iMeta Technologies Limited<br />
    12. 12. Re-Learning JavaScript<br />© 2005-2011 iMeta Technologies Limited<br />OO and functional-based JavaScript<br />Now let’s look at the source <br />
    13. 13. Re-Learning JavaScript<br />CoffeeScript<br />“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.”<br />It also makes our example look even more like LINQ!<br />© 2005-2007 imeta Technologies Limited<br />

    ×