Your SlideShare is downloading. ×
0
Prototype                  jQuery
   To and from JavaScript libraries.

    Remy Sharp (remysharp.com)
Why Prototype?


• Extends the DOM and core JavaScript
  objects
• An arsenal of utility functions

                      ...
Why jQuery

• Centred around chaining and binding
  methods to objects and elements
• Totally encapsulated
• Aims to be ex...
Differences in Native Support

• Prototype has: • jQuery has:
  • Class creation  • No Conflict ($)
  • Try.these       • E...
Syntax Comparison
Dollar Variable

 • Prototype uses $ for id based selection
 • jQuery $ = CSS based selector (= $$ in
     Prototype)


No...
$ Example
Prototype
$('speech1').show();


jQuery
$('#speech1').show();
CSS Based Selectors
• Prototype - $$
  To narrow down it's context use
  Element.getElementsBySelector(selector)
  (or Ele...
Selector Examples
Prototype
$$('.dialog').invoke(‘show’);

$('final-speech').getElementsBySelector ↩
('DIV.final-dialog')....
Selector Examples
jQuery
$('.dialog').show();

$('#final-speech DIV.final-dialog') ↩
  .hide();
DOM Ready Event

 • Prototype - uses Event object
 • jQuery - uses two types of syntax, both
     meaning the same thing

...
Ready Example
Prototype
Event.observe(window,'load',function(){});
Prototype 1.6
document.observe('contentloaded',
  funct...
Iteration
 • Prototype - current active element, and
     position is passed in to callback function.
[el1, el2].each(fn(e...
DOM Walking


• Prototype - up, down, next & previous
• jQuery - parent/s, children, next, prev (&
  nextAll, prevAll)
DOM Manipulation

• Prototype - Insertion class: After, Before,
  Bottom, Top, update (1.6 will add:
  Element.insert)
• j...
Element Classes

• Prototype - addClassName,
  removeClassName, toggleClassName,
  hasClassName
• jQuery - addClass, remov...
Events

• Prototype - Event class: observe,
  stopObserving
  Prototype 1.6 will support Element.observe
• jQuery - bind, ...
Bubbling

• Prototype - Event.stop()
• jQuery - return false or
  event.stopPropagation() (event is passed in
  to the cal...
Ajax
Prototype
new Ajax.Request(url[, options])


jQuery

$.ajax(options) // url included in options
Ajax - Method Comparison

    Prototype     jQuery

    onCreate     beforeSend

    onSuccess     success

   onException...
Ajax Examples
Prototype
new Ajax.Request(‘/profile’, {
 method: ‘post’,
 parameters:$H({‘action’:‘check_username’,
   ‘use...
Ajax Examples
jQuery
$.ajax({ url: '/profile',
 data: {'action':'check_username',
   'username': $('#username').val()},
 t...
Plugins / Extensions
Prototype
Element.addMethods({myPlugin : function ↩
(element, args) { return element; }});

jQuery
jQ...
Browser Detection


• Prototype - Prototype.Browser.IE, .Webkit,
  etc.
• jQuery - jQuery.browser.msie, .safari, etc.
Resources
               Prototype                 jQuery

  API      prototypejs.org/api    docs.jquery.com/Core

Tutoria...
Upcoming SlideShare
Loading in...5
×

Prototype & jQuery

264,359

Published on

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

Published in: Technology
8 Comments
117 Likes
Statistics
Notes
No Downloads
Views
Total Views
264,359
On Slideshare
0
From Embeds
0
Number of Embeds
39
Actions
Shares
0
Downloads
2,428
Comments
8
Likes
117
Embeds 0
No embeds

No notes for slide

Transcript of "Prototype & jQuery"

  1. 1. Prototype jQuery To and from JavaScript libraries. Remy Sharp (remysharp.com)
  2. 2. Why Prototype? • Extends the DOM and core JavaScript objects • An arsenal of utility functions Based on Prototype 1.5.1 & 1.6
  3. 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. 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. 5. Syntax Comparison
  6. 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. 7. $ Example Prototype $('speech1').show(); jQuery $('#speech1').show();
  8. 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. 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. 10. Selector Examples jQuery $('.dialog').show(); $('#final-speech DIV.final-dialog') ↩ .hide();
  11. 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. 12. Ready Example Prototype Event.observe(window,'load',function(){}); Prototype 1.6 document.observe('contentloaded', function{}); jQuery $(document).ready(function(){}); // or $(function(){});
  13. 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. 14. DOM Walking • Prototype - up, down, next & previous • jQuery - parent/s, children, next, prev (& nextAll, prevAll)
  15. 15. DOM Manipulation • Prototype - Insertion class: After, Before, Bottom, Top, update (1.6 will add: Element.insert) • jQuery - after, before, append, prepend & html
  16. 16. Element Classes • Prototype - addClassName, removeClassName, toggleClassName, hasClassName • jQuery - addClass, removeClass, toggleClass, is (for class matching)
  17. 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. 18. Bubbling • Prototype - Event.stop() • jQuery - return false or event.stopPropagation() (event is passed in to the callback)
  19. 19. Ajax Prototype new Ajax.Request(url[, options]) jQuery $.ajax(options) // url included in options
  20. 20. Ajax - Method Comparison Prototype jQuery onCreate beforeSend onSuccess success onException error onComplete complete
  21. 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. 22. Ajax Examples jQuery $.ajax({ url: '/profile', data: {'action':'check_username', 'username': $('#username').val()}, type: 'post', success: function (json) { // do stuff with response } });
  23. 23. Plugins / Extensions Prototype Element.addMethods({myPlugin : function ↩ (element, args) { return element; }}); jQuery jQuery.fn.myPlugin = function (args) ↩ { return this; };
  24. 24. Browser Detection • Prototype - Prototype.Browser.IE, .Webkit, etc. • jQuery - jQuery.browser.msie, .safari, etc.
  25. 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
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×