Prototype & jQuery

Loading...

Flash Player 9 (or above) is needed to view presentations.
We have detected that you do not have it on your computer. To install it, go here.

6 comments

Comments 1 - 6 of 6 previous next Post a comment

Post a comment
Embed Video
Edit your comment Cancel

79 Favorites & 2 Groups

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

+ Remy SharpRemy Sharp, 3 years ago

custom

84041 views, 79 favs, 294 embeds more stats

A walk through process comparison between Prototype more

More info about this document

© All Rights Reserved

Go to text version

  • Total Views 84041
    • 39343 on SlideShare
    • 44698 from embeds
  • Comments 6
  • Favorites 79
  • Downloads 1396
Most viewed embeds
  • 25995 views on http://ajaxian.com
  • 4210 views on http://jimneath.org
  • 1613 views on http://phpspot.org
  • 1022 views on http://www.chazzuka.com
  • 1004 views on http://www.pinceladasdaweb.com.br

more

All embeds
  • 25995 views on http://ajaxian.com
  • 4210 views on http://jimneath.org
  • 1613 views on http://phpspot.org
  • 1022 views on http://www.chazzuka.com
  • 1004 views on http://www.pinceladasdaweb.com.br
  • 853 views on http://blog.ericsk.org
  • 832 views on http://www.ajaxian.com
  • 819 views on http://remysharp.com
  • 756 views on http://grochtdreis.de
  • 609 views on http://www.webadictos.com.mx
  • 529 views on http://icyleaf.com
  • 459 views on http://firejune.com
  • 435 views on http://www.frogx3.com
  • 424 views on http://coliss.com
  • 378 views on http://www.icyleaf.cn
  • 287 views on http://www.markdbd.com
  • 281 views on http://blog.guoshuang.com
  • 236 views on http://www.ajaxman.net
  • 215 views on http://ajaxed.ru
  • 184 views on http://charlie-blog.com
  • 167 views on http://ajaxus.net
  • 166 views on http://rhio.tistory.com
  • 162 views on http://blog.btmup.com
  • 162 views on http://despuesdegoogle.com
  • 159 views on http://www.netvibes.com
  • 142 views on http://ji80903.tistory.com
  • 135 views on http://tutsvalley.com
  • 127 views on http://otherwi.se
  • 121 views on http://blog.lamtruonghuy.info
  • 120 views on http://www.gfxdizayn.com
  • 97 views on http://www.blogandia.com
  • 97 views on http://www.tatuin.biz
  • 96 views on http://railser.cn
  • 94 views on http://blog.ecmas4.com
  • 82 views on http://www.asiermarques.com
  • 75 views on http://yuppframework.blogspot.com
  • 73 views on http://webdev.blogli.co.il
  • 69 views on http://www.mimul.com
  • 69 views on http://calos-tw.blogspot.com
  • 59 views on http://navinyim.blogspot.com
  • 57 views on http://www.btmup.com
  • 54 views on http://kevin.wocal.cn
  • 49 views on http://www.ditii.com
  • 47 views on http://www.cyberfanatix.com
  • 44 views on http://www.hanrss.com
  • 39 views on http://jsgt.org
  • 36 views on http://www.sinzy.net
  • 36 views on http://blog.dever.ro
  • 28 views on http://www.acalbuquerque.blog.br
  • 27 views on http://static.slideshare.net
  • 27 views on file://
  • 26 views on http://feeds.feedburner.com
  • 24 views on http://cache.baidu.com
  • 24 views on http://webstandard.kulando.de
  • 23 views on http://www.laweba.net
  • 22 views on http://jscode.ipbfree.com
  • 22 views on http://s3.amazonaws.com
  • 21 views on http://www.firejune.com
  • 21 views on http://swik.net
  • 19 views on http://langs.heroku.com
  • 17 views on http://lj-toys.com
  • 16 views on http://asiermarques.com
  • 16 views on http://extjs.com
  • 15 views on http://ecruu.tistory.com
  • 15 views on http://www.simon20.com
  • 15 views on http://redblue.pe.kr
  • 15 views on http://mohamedaminechatti.blogspot.com
  • 14 views on http://deuxksy.tistory.com
  • 14 views on http://weberscripts.wordpress.com
  • 13 views on http://coolouis.pixnet.net
  • 13 views on http://cachina.wordpress.com
  • 11 views on http://64.233.183.104
  • 10 views on http://marcusw.wordpress.com
  • 9 views on http://mimul.com
  • 9 views on http://209.85.129.132
  • 8 views on http://www.juanantonio.info
  • 8 views on http://209.85.175.104
  • 8 views on http://74.125.77.132
  • 8 views on http://navinyim.multiply.com
  • 8 views on http://72.14.235.104
  • 8 views on http://www.ajax-blog.com
  • 8 views on http://www.agatezone.cn
  • 8 views on http://74.125.95.132
  • 7 views on http://nblog.namo.co.kr
  • 7 views on http://weber.eti.br
  • 7 views on http://weberscripts.blogspot.com
  • 7 views on http://localhost
  • 6 views on http://74.125.153.132
  • 6 views on http://64.233.169.104
  • 6 views on http://www.zhuaxia.com
  • 6 views on http://209.85.173.104
  • 6 views on http://webdesign.guoshuang.com
  • 6 views on http://209.85.229.132
  • 6 views on http://www.webgox.com
  • 5 views on http://www.thinkingphp.org
  • 5 views on http://www.techiegyan.com
  • 5 views on http://74.125.93.132
  • 4 views on http://192.168.10.63
  • 4 views on http://209.85.135.104
  • 4 views on http://ilumin.exteen.com
  • 4 views on http://inside.bluekiwi-software.com
  • 4 views on http://64.233.167.104
  • 4 views on http://72.14.235.132
  • 4 views on http://www.maxvillegas.com
  • 4 views on http://74.125.47.132
  • 4 views on http://72.14.253.104
  • 4 views on http://216.239.59.104
  • 4 views on http://translate.googleusercontent.com
  • 3 views on http://w-download.blogspot.com
  • 3 views on http://newshutch.com
  • 3 views on http://www.adamestrada.com
  • 3 views on http://74.125.39.104
  • 3 views on http://www.yuiworld.kr
  • 3 views on http://www.freakzion.com
  • 3 views on http://tntrealestates.com
  • 3 views on http://209.85.141.104
  • 3 views on http://www.cars-and-motorcycles-and-trucks.com
  • 3 views on http://209.85.129.104
  • 2 views on http://74.125.93.104
  • 2 views on http://www.beauty-fashion-jewelry.com
  • 2 views on http://209.85.135.132
  • 2 views on http://www.e-bowl.co.uk
  • 2 views on http://www.health-commun.com
  • 2 views on http://www.freeroulette.me.uk
  • 2 views on http://web-and-host.com
  • 2 views on http://www.ebarcade.com
  • 2 views on http://www.sport-icx.com
  • 2 views on http://www.gambling-casino-blog.com
  • 2 views on http://slimseductiondiet.com
  • 2 views on http://murilobr.blogspot.com
  • 2 views on http://www.realnobile.com
  • 2 views on http://www.onlinebingosociety.com
  • 2 views on http://209.85.175.132
  • 2 views on http://www.sport-xblog.com
  • 2 views on http://www.wincasinoslots.com
  • 2 views on http://209.85.173.132
  • 2 views on http://www.filescon.com
  • 2 views on http://beta.sinzy.net
  • 2 views on http://74.125.19.132
  • 2 views on http://74.125.155.132
  • 2 views on http://www.business1-finance1.com
  • 2 views on https://sdlcordlweb02:444
  • 2 views on http://argus.tistory.com
  • 2 views on http://209.85.215.104
  • 2 views on http://demo.qooxdoo.org
  • 2 views on http://www.pageflakes.com
  • 2 views on http://groups.diigo.com
  • 2 views on http://webmail.inova.net
  • 2 views on https://www.sinzy.net
  • 2 views on http://www.qa.ajaxian.com
  • 2 views on http://smashingcoding.com
  • 2 views on http://www.xianguo.com
  • 2 views on http://www.despuesdegoogle.com
  • 2 views on https://pim.bluemaex.de
  • 2 views on http://127.0.0.1:8795
  • 2 views on http://66.102.9.104
  • 2 views on http://www.protopage.com
  • 2 views on http://www.newshutch.com
  • 1 views on http://www.iscmn.com
  • 1 views on http://thurayadeveloper.com
  • 1 views on http://www.freewebcounter.net
  • 1 views on http://tatuin.biz
  • 1 views on http://pianostorehelper.com
  • 1 views on http://regenbiotest.com
  • 1 views on http://wildfire.gigya.com
  • 1 views on http://www.manidoo.com.trunk
  • 1 views on http://www.rayasoftware.com
  • 1 views on http://www.csixtyconcepts.com
  • 1 views on http://www.onlinebingogames.me.uk
  • 1 views on http://dayeyedreams.com
  • 1 views on http://www.follow-focus.com
  • 1 views on http://anonymouse.org
  • 1 views on http://coronin.us
  • 1 views on http://72.14.205.104
  • 1 views on http://ref.g2soft.net
  • 1 views on http://64.233.179.104
  • 1 views on http://www.horseracingfixtures.info
  • 1 views on http://www.dcomments.com
  • 1 views on http://www.moviecern.com
  • 1 views on http://www.traveltravellers.com
  • 1 views on http://74.125.47.100
  • 1 views on http://www.marketing-xblog.com
  • 1 views on applewebdata://E7FDC5BF-9C93-4766-A474-15E984D5A84B
  • 1 views on http://www.jsgt.org
  • 1 views on http://ajaxian.com.
  • 1 views on http://www.slideshow.com
  • 1 views on http://gary.bloxio.us
  • 1 views on http://www.nacionweb.com
  • 1 views on http://www.ezdatingtips.com
  • 1 views on http://64.233.163.132
  • 1 views on http://www.yourigin.com:8080
  • 1 views on http://intranet.tuxit.com.au
  • 1 views on http://74.125.115.132
  • 1 views on http://hghltd.yandex.net
  • 1 views on http://74.125.45.132
  • 1 views on http://teamdivinity.com
  • 1 views on http://www.three-rings.com
  • 1 views on http://www.w-download.blogspot.com
  • 1 views on http://cozykz.blogspot.com
  • 1 views on http://newsalloy.com
  • 1 views on http://www.plugmasters.com.br
  • 1 views on http://203.208.39.132
  • 1 views on http://zhuaxia.com
  • 1 views on http://t.l15n.com
  • 1 views on http://italksex.com
  • 1 views on http://faccinchiropractic.com
  • 1 views on http://webprog.yozmn.com
  • 1 views on http://www.cimples.com
  • 1 views on http://isulnara.com
  • 1 views on http://ajax.asp.web.id
  • 1 views on http://www.yomomedia.com
  • 1 views on http://203.208.37.132
  • 1 views on http://www.phpspot.org
  • 1 views on http://metalooks.wowdns.com
  • 1 views on http://reader.livedoor.com
  • 1 views on http://my.aol.com
  • 1 views on http://72.14.203.132
  • 1 views on http://www.wiki.firejune.com
  • 1 views on http://www.mysrc.de
  • 1 views on http://www.luckyatbingo.com
  • 1 views on http://www.sourfizz.com
  • 1 views on http://educational-kid-toys.com
  • 1 views on http://www.ukfruitmachines.info
  • 1 views on http://www.bidderdirectory.com
  • 1 views on http://www.diet-and-resources.com
  • 1 views on http://www.bestslotmachines.me.uk
  • 1 views on http://www.bestfruitmachines.me.uk
  • 1 views on http://www.freepokersites.me.uk
  • 1 views on http://72.14.253.160
  • 1 views on http://www.dig168.com
  • 1 views on http://www.bebobingo.com
  • 1 views on http://www.freefruitmachines.info
  • 1 views on http://www.ukhorseracingbets.info
  • 1 views on http://www.aaaflashgames.com
  • 1 views on http://www.ukhorseracingbetting.info
  • 1 views on http://www.ukhorseracingodds.info
  • 1 views on http://dragonsms.de
  • 1 views on http://www.ukfruitmachine.info
  • 1 views on http://www.playfruitmachines.info
  • 1 views on http://www.articlealley.net
  • 1 views on http://sourfizz.com
  • 1 views on http://www.wpconfig.com
  • 1 views on http://gadgetheat.com
  • 1 views on http://18series.com
  • 1 views on http://www.vistaveleta.com
  • 1 views on http://skateass.com
  • 1 views on http://monstercelebrity.com
  • 1 views on http://www.canicleanit.com
  • 1 views on http://www.k4k.co.uk
  • 1 views on http://www.voisd.com
  • 1 views on http://www.babyclothesonline.us
  • 1 views on http://www.ebookcritique.com
  • 1 views on http://european-breakdown-recovery.com
  • 1 views on http://www.rapidshare-ebooks.net
  • 1 views on http://www.ertx.com
  • 1 views on http://learnitalianfree.tumblr.com
  • 1 views on http://www.fabulinks.net
  • 1 views on http://www.q-bite.com
  • 1 views on http://203.208.39.99
  • 1 views on http://xrayzul.com
  • 1 views on http://www.horseracingfixtures.me.uk
  • 1 views on http://www.topicbeauty.com
  • 1 views on http://www.geekomatik.com
  • 1 views on http://acaiberryoffers.com
  • 1 views on http://www.acaiberryoffers.com
  • 1 views on http://kurapov.name
  • 1 views on http://www.bingoquestions.com
  • 1 views on http://tnblog.namo.co.kr
  • 1 views on http://www.ajaxus.net
  • 1 views on http://blogandia.com
  • 1 views on http://gonzalolopez.net
  • 1 views on http://www.hillary44.com
  • 1 views on http://www.seoshort.com
  • 1 views on http://localhost:8082
  • 1 views on http://www.gardeningfortoday.com
  • 1 views on http://degreeselector.com
  • 1 views on http://www.tutorials4html.com
  • 1 views on http://www.eczema-answers.info
  • 1 views on http://www.scratchcardsonline.me.uk
  • 1 views on http://www.apemyp.com
  • 1 views on http://www.fritztv.com
  • 1 views on http://www.fruitventure.com
  • 1 views on http://www.fliagain.com
  • 1 views on http://wikres.labs
  • 1 views on http://forum.sparemeyourplatitudes.com:3000
  • 1 views on http://www.paperblog.fr
  • 1 views on http://203.208.37.104
  • 1 views on http://healthyweightsite.info
  • 1 views on http://www.namakkal.co.uk
  • 1 views on http://en.dogeno.us
  • 1 views on http://www.elanso.com
  • 1 views on http://www.fruit-machine-cheats.net
  • 1 views on http://www.grandnational-tips.co.uk
  • 1 views on http://www.oplahol.com

less

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate. If needed, use the feedback form to let us know more details.

Cancel
File a copyright complaint
Having problems? Go to our helpdesk?

Categories