Your SlideShare is downloading. ×
Javascript And J Query
Javascript And J Query
Javascript And J Query
Javascript And J Query
Javascript And J Query
Javascript And J Query
Javascript And J Query
Javascript And J Query
Javascript And J Query
Javascript And J Query
Javascript And J Query
Javascript And J Query
Javascript And J Query
Javascript And J Query
Javascript And J Query
Javascript And J Query
Javascript And J Query
Javascript And J Query
Javascript And J Query
Javascript And J Query
Javascript And J Query
Javascript And J Query
Javascript And J Query
Javascript And J Query
Javascript And J Query
Javascript And J Query
Javascript And J Query
Javascript And J Query
Javascript And J Query
Javascript And J Query
Javascript And J Query
Javascript And J Query
Javascript And J Query
Javascript And J Query
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Javascript And J Query

501

Published on

Some advanced Javascript with a survey of interesting jQuery features

Some advanced Javascript with a survey of interesting jQuery features

1 Comment
1 Like
Statistics
Notes
  • hey, please make this downloadable :) I want to read it offline.
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
No Downloads
Views
Total Views
501
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
0
Comments
1
Likes
1
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. Presented by Arsalan Ahmed
    jQuery Goodness – part 1
  • 2. Different species than POCOs
    Properties added dynamically upon first use
    A typo creates a new property – yikes!
    Properties accessed via:
    Dot notation (Object.Property)
    Subscript notation (Object[‘Property’])
    Literal syntax:
    varsomeObj = { someProp: ‘some value’, otherProp: 2 };
    Variables are properties. Equivalent statements in the global scope:
    var prop = ‘x’; window.prop = ‘x’; prop = x;
    Objects in Javascript
  • 3. Functions are also objects
    Functions can
    contain other functions!
    have properties!
    be assigned to a property
    be passed to a method and also returned from it
    Smoke and mirrors. Equivalent statements:
    function someFunc(someParam) { return ‘wow!’ }
    someFunc = function(someParam) { return ‘wow!’ }
    window. someFunc = function(someParam) { return ‘wow!’ }
    So what’s the deal with these functions?
  • 4. Local variables stick around
    Great way to avoid using global variables
    Avoids potential naming conflicts
    Example:
    var f = function() {
    varartifactID = 5553333;
    return function() {
    processArtifact(artifactID++);
    }
    }
    And then we found closure…
  • 5. Structure and behavior separated
    Behavior can change independent of structure
    Avoids spaghetti code
    Event handling not performed inline
    Unobtrusive Javascript
  • 6. Start
    Assume javascript not available
    Implement acceptable functionality
    End
    Layer javascript goodness on top
    Implement javascript-enhanced functionality
    Degrade gracefully when javascript cannot be used
    Progressive Enhancement
  • 7. jQuery uses CSS-style selectors
    Creates wrapped sets when passed to jQuery
    jQuery(‘tr:nth-child(2)’)
    Alias: $(‘tr:nth-child(2)’)
    Class selectors slower than ID selectors
    What’s with these selectors?
  • 8. p > a [all anchor tags, direct children of p tags]
    div.items a [all anchor tags, descendents of div tags with class of items]
    div.items:has(a) [all div tags with a class of items that contain anchor tags]
    a[href^=‘http://’] [all anchor tags, href attribute starts with http://]
    div#coolness.gunit [all div tags with the id of coolness and class of gunit]
    Selectors: Child, Container, Attribute
  • 9. table#itemListtr:even[all even rows in the table with an ID of itemList]
    :checkbox:checked:enabled[all enabled and checked checkboxes]
    :enabled:visible[all enabled and visible elements]
    Selectors: Filters
  • 10. Function Context: a friendly chameleon
    • The magical ‘this’
    • 11. In wrapper methods, set to the current element
    • 12. Within functions, ‘this’ => function context of the invocation
    x.desc = ‘x’; y.desc = ‘y’;
    x.show = function() { alert(this.desc);
    }
    x.show(); [outputs ‘x’]
    x.show.call(y); [outputs ‘y’]
  • 13. var counter = 1;
    $(window).bind('click contextmenu', function() {
    $('#demo').css('font-size', '40')
    .append('<div>Timestamp: ' + new Date() + ', counter = ' + counter + '</div>');
    counter++;
    });
    Selectors and Closures Demo
  • 14. Methods on wrapped sets
    size() => # of elements contained within
    first(), last() => first or last element within
    toArray() => array of DOM elements
    not(exp), filter(exp) => copy of original minus exp
    exp = selector, function, element, or array
    slice(begin, end) => subset within the indices
    each(iterator) => invokes iterator for every element
    end() => back up to previous wrapped set
    andSelf() => merges two previous wrapped sets to another
    Manipulating wrapped sets
  • 15. Browsers implement events differently
    Event object creation differs
    Event propagation differs
    Event handler location differs
    In other words, it’s great fun!
    Browser Event Models
  • 16. Handlers defined inline
    Limit: One handler per event
    elem.onclick = function(event) { … }
    Event bubbles up through the DOM
    Return false to cancel event propagation
    <form onsubmit=“return false;” …
    Basic Event Model
  • 17. DOM Level 2 Event Model
    Allows multiple event handlers per event
    addEventListener('click', function(event) { ... }, useCapture)
    useCapture = true => handle capture phase (top to target) event
    useCapture = false => handle bubble phase (target to top) event
    Not supported by IE!
    IE event model uses legacy event names (onclick vs. click)
    In IE event model, event instance not passed to handler (use window.event)
    Newer, Fancier Event Model
  • 18. Works on all browsers
    Allows multiple event handlers per event
    Uses standard event names
    Event instance passed as parameter to handler
    Like Level 2 model but no capture phase
    Lots of ways to attach handlers to events
    jQuery Event Model
  • 19. Multiple Event Handlers Demo
  • 20. Event Bubbling Demo
  • 21. Fun With Event Handlers
  • 22. Hijacking form posts
    Use Ajax POST requests
    Used in ASP.NET Update Panel
    jQuery makes it super simple
    Encourages progressive enhancement
    The wonderful world of Hijaxing
  • 23. $('form').submit(function(event) {
    event.preventDefault();
    $.ajaxSetup({
    type: 'POST',
    timeout: 10000,
    dataType: 'html'
    });
    $.ajax({
    url: 'http://localhost/Demo/Information.asmx/GetInfo',

    success: function(response) { $('#info').html(response) }
    });
    });
    Hijaxing: Code Sample
  • 24. jQuery.event.special.eventName
    Special Events have these optional methods:
    setup
    Executes when first event handler is bound to element
    teardown
    Executes when last event handler is bound to element
    add
    Executes when each event handler is added to element
    remove
    Executes when each event handler is removed from element
    _default (not that interesting)
    Executes after event has bubbled to “document”
    Executes for custom events fired by “trigger” method
    The Wonders Of Special Events
  • 25. Setup event handlers
    Calculate width and height
    Element position
    Ancestry
    Progeny
    Containment
    Filter and Each
    Merge and Extend
    Quick Rundown of jQueryConfusicons
  • 26. bind() attaches handler to all elements in wrapped set
    bind() allows binding multiple events with a handler
    live() attaches handler to current and FUTURE elements via DOM Scripting
    live() binds only one event
    live() can only be invoked on the ORIGINAL wrapped set
    $('#item', 'tr').closest('table').live('click', function() { ... });
    delegate() attaches handlers for current and FUTURE elements
    delegate() allows filtering to bind to a subset of wrapped set
    $('#item').delegate('a', 'click', function() { ... });
    Binding Event Handlers
  • 27. css('width') and css('height') return strings
    e.g. '200px‘
    width() and height() return integers
    width() and height() can return dimensions of window and document
    css('width') and css('height') throw errors for above
    css('width') and css('height') not always reliable
    IE returns ‘auto’ for computed dimensions
    Width And Height
  • 28. position() calculates the offset from nearest ancestor with relative positioning
    If none found, defaults to document
    offset() ALWAYS calculates the offset from document
    Element Position
  • 29. parent(selector) returns the immediate parent if it matches the selector
    parents(selector) returns all ancestors that match the selector
    closest(selector) returns the closest ancestor that matches the selector
    Ancestry
  • 30. children(selector) returns immediate children that match the selector
    find(selector) returns all descendants that match the selector
    Progeny
  • 31. not(selector) returns filtered elements that do not match the selector
    is(selector) returns true if any element in the wrapped set matches the selector
    $('p:not(.info)') SAME AS $('p').not(‘.info’)
    $(‘table:has(tr)’) returns all tables with at least one row
    Containment
  • 32. filter(selector) returns wrapped set of elements that match the selector
    filter(function) returns wrapped set of all elements for which the function returns true
    each(function) executes the function over all elements in the wrapped set
    $.each(function) runs on any array like object
    function context set to the current element being processed
    Filter and Each
  • 33. $.merge() combines 2 arrays and saves result to first array
    $.extend() combines 2+ objects and saves result to first object
    jQuery.extend([recursive?], target, object1, ... )
    Common idiom to use $.extend() to provide default values
    function(options) {
    var settings = $.extend({
    prop1: 200,
    prop2: null,
    },
    options || {} );
    }
    Merge And Extend
  • 34. Simply assign a function to a property on jQuery ($)
    Good Idea: Namespacing
    $.kCura = {};
    $.kCura.somethingWonderful = function(awesomeness) {

    };
    Bad Idea: Assume $ has not been appropriated
    (function($) {
    // awesome code goes here
    }) (jQuery);
    Extending jQuery: Utility Functions
  • 35. Create a property on the fn object of jQuery
    Function context within main body refers to wrapped set
    Use each() to work on elements individually
    If iterating via functions, above iteration automatic
    $.fn.kCurafy = function() {
    this.each(function() {
    makeAwesome($(this).data(‘identifier’));
    }
    function makeAwesome(id) { … }
    };
    Usage Example:
    $(‘img’).kCurafy();
    Extending jQuery: Wrapper Functions
  • 36. Questions?

×