Re-Learning JavaScript
Upcoming SlideShare
Loading in...5
×
 

Like this? Share it with your network

Share

Re-Learning JavaScript

on

  • 1,131 views

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

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

Statistics

Views

Total Views
1,131
Views on SlideShare
1,125
Embed Views
6

Actions

Likes
1
Downloads
3
Comments
0

1 Embed 6

http://www.linkedin.com 6

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment
  • element.on, 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 ’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 Presentation Transcript

  • 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