Prototype & jQuery
Upcoming SlideShare
Loading in...5
×
 

Like this? Share it with your network

Share

Prototype & jQuery

on

  • 233,101 views

A walk through process comparison between Prototype and jQuery to help developers go from one language to another.

A walk through process comparison between Prototype and jQuery to help developers go from one language to another.

Statistics

Views

Total Views
233,101
Views on SlideShare
109,427
Embed Views
123,674

Actions

Likes
116
Downloads
2,412
Comments
8

372 Embeds 123,674

http://ajaxian.com 40866
http://jimneath.org 40331
http://web.enavu.com 18528
http://www.pinceladasdaweb.com.br 2257
http://phpspot.org 1833
http://blog.btmup.com 1542
http://remysharp.com 1298
http://blog.ericsk.org 1166
http://grochtdreis.de 1128
http://www.chazzuka.com 1069
http://www.webadictos.com.mx 874
http://icyleaf.com 840
http://www.ajaxian.com 832
http://tutsvalley.com 791
http://www.frogx3.com 764
http://blog.dreamcss.com 582
http://firejune.com 572
http://www.slideshare.net 503
http://coliss.com 426
http://yuppframework.blogspot.com 423
http://www.icyleaf.cn 378
http://cachina.wordpress.com 312
http://blog.guoshuang.com 298
http://www.markdbd.com 287
http://ji80903.tistory.com 241
http://www.ajaxman.net 236
http://weber.eti.br 224
http://ajaxed.ru 215
http://rhio.tistory.com 206
http://marlo-strouven.blogspot.be 203
http://charlie-blog.com 184
http://ajaxus.net 178
http://despuesdegoogle.com 162
http://www.netvibes.com 159
http://translate.googleusercontent.com 149
http://railser.cn 146
http://www.tatuin.biz 139
http://otherwi.se 127
http://blog.lamtruonghuy.info 124
http://www.gfxdizayn.com 120
http://www.blogandia.com 97
http://blog.ecmas4.com 95
http://navinyim.blogspot.com 87
http://yuppframework.blogspot.com.es 87
http://www.asiermarques.com 82
http://yuppframework.blogspot.mx 79
http://www.mimul.com 75
http://webdev.blogli.co.il 73
http://calos-tw.blogspot.com 72
http://blog.cachina.com.br 60
More...

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

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

15 of 8 Post a comment

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Prototype & jQuery Presentation Transcript

  • 1. Prototype jQuery To and from JavaScript libraries. Remy Sharp (remysharp.com)
  • 2. Why Prototype? • Extends the DOM and core JavaScript objects • An arsenal of utility functions Based on Prototype 1.5.1 & 1.6
  • 3. Why jQuery • Centred around chaining and binding methods to objects and elements • Totally encapsulated • Aims to be exceptionally easy to develop with Based on jQuery 1.2.1
  • 4. Differences in Native Support • Prototype has: • jQuery has: • Class creation • No Conflict ($) • Try.these • Effects • Position, Range Non-exhaustive list, and in most case, the functionality can be implemented with plugins.
  • 5. Syntax Comparison
  • 6. Dollar Variable • Prototype uses $ for id based selection • jQuery $ = CSS based selector (= $$ in Prototype) Note that Prototype will return element objects or arrays of elements for most methods. jQuery will usually return a jQuery object (which looks like an array in Firebug).
  • 7. $ Example Prototype $('speech1').show(); jQuery $('#speech1').show();
  • 8. CSS Based Selectors • Prototype - $$ To narrow down it's context use Element.getElementsBySelector(selector) (or Element.select(selector) in 1.6) • jQuery - $ Virtually all of jQuery's DOM selection is done using CSS 1-3
  • 9. Selector Examples Prototype $$('.dialog').invoke(‘show’); $('final-speech').getElementsBySelector ↩ ('DIV.final-dialog').each(Element.hide); // 1.6 $('final-speech').select('DIV.final- ↩ dialog').invoke('hide');
  • 10. Selector Examples jQuery $('.dialog').show(); $('#final-speech DIV.final-dialog') ↩ .hide();
  • 11. DOM Ready Event • Prototype - uses Event object • jQuery - uses two types of syntax, both meaning the same thing jQuery uses different methods to execute the ready function when the DOM is ready, using specific methods for IE and for Safari (http://tinyurl.com/p9pwe, http://tinyurl.com/2ya35y)
  • 12. Ready Example Prototype Event.observe(window,'load',function(){}); Prototype 1.6 document.observe('contentloaded', function{}); jQuery $(document).ready(function(){}); // or $(function(){});
  • 13. Iteration • Prototype - current active element, and position is passed in to callback function. [el1, el2].each(fn(el, i)) • jQuery - current element position passed in to callback function, and binds the function to current active element (i.e. this is set to the active element). • $([el1, el2]).each(fn(i))
  • 14. DOM Walking • Prototype - up, down, next & previous • jQuery - parent/s, children, next, prev (& nextAll, prevAll)
  • 15. DOM Manipulation • Prototype - Insertion class: After, Before, Bottom, Top, update (1.6 will add: Element.insert) • jQuery - after, before, append, prepend & html
  • 16. Element Classes • Prototype - addClassName, removeClassName, toggleClassName, hasClassName • jQuery - addClass, removeClass, toggleClass, is (for class matching)
  • 17. Events • Prototype - Event class: observe, stopObserving Prototype 1.6 will support Element.observe • jQuery - bind, unbind (also supports shortcuts: .click, .dblclick, .mouse*, .ready., .focus, .blur)
  • 18. Bubbling • Prototype - Event.stop() • jQuery - return false or event.stopPropagation() (event is passed in to the callback)
  • 19. Ajax Prototype new Ajax.Request(url[, options]) jQuery $.ajax(options) // url included in options
  • 20. Ajax - Method Comparison Prototype jQuery onCreate beforeSend onSuccess success onException error onComplete complete
  • 21. Ajax Examples Prototype new Ajax.Request(‘/profile’, { method: ‘post’, parameters:$H({‘action’:‘check_username’, ‘username’:$F(‘username’)}), onSuccess: function (j) { // do stuff with response } });
  • 22. Ajax Examples jQuery $.ajax({ url: '/profile', data: {'action':'check_username', 'username': $('#username').val()}, type: 'post', success: function (json) { // do stuff with response } });
  • 23. Plugins / Extensions Prototype Element.addMethods({myPlugin : function ↩ (element, args) { return element; }}); jQuery jQuery.fn.myPlugin = function (args) ↩ { return this; };
  • 24. Browser Detection • Prototype - Prototype.Browser.IE, .Webkit, etc. • jQuery - jQuery.browser.msie, .safari, etc.
  • 25. Resources Prototype jQuery API prototypejs.org/api docs.jquery.com/Core Tutorials prototypejs.org/learn docs.jquery.com/Tutorials Effects script.aculo.us interface.eyecon.ro