Introduction to Jquery

1,697 views

Published on

Presented @ BRAC University workshop 2009, OSS workshop by GROW @ Southeast University in 24th April 2010

0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,697
On SlideShare
0
From Embeds
0
Number of Embeds
11
Actions
Shares
0
Downloads
27
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Introduction to Jquery

  1. 1. Mohammad AmzadHossain<br />I am a FAN of Naruto<br />Project Manager @ jhoroTEK.com<br />http://tohin.wordpress.com<br />www.twitter.com/neotohin<br />www.slideshare.net/neotohin<br />www.linkedin.com/in/tohin<br />www.jhorotek.com<br />
  2. 2. THIS PAST & PRESENTTHAT <br />
  3. 3. World Total 513.41 million <br />Africa 4.15 million <br />Asia/Pacific 143.99 million <br />Europe 154.63 million <br />Middle East 4.65million <br />Canada & USA 180.68 million <br />Latin America 25.33 million<br />
  4. 4. Total Number of people ONLINE <br /> - By August 2001<br />
  5. 5. More Than 350 Million<br />50% active users <br />35 million ppl updates status each day<br />2.5 Billion photos updated <br />
  6. 6. FACEBOOK(2009)<br />
  7. 7. Usability<br />Shiny<br />FUN<br />
  8. 8. “When I took office, only high energy physicistshad ever heard of what is called the World WideWeb... Now even my cat has it's own page.”<br />- Bill Clinton<br />
  9. 9. What’s Possible?<br />http://eprothomalo.com/<br />
  10. 10. What’s Possible?<br />http://www.krhgallery.com/web/<br />Faux Effect using jQuery<br />
  11. 11. What’s Possible?<br />http://balldroppings.com/js/<br />SEE IT FOR YOURSELF .. YOU WILL LIKE IT  .. Except Internet Explorer <br />
  12. 12. What’s Possible?<br />Facebook [http://www.facebook.com/ ] you know what it’s for ? :D<br />Mafia <br />
  13. 13. What’s Possible?<br />EyeOS [ www.eyeos.com ] is the Open Source Cloud Computing's Web Desktop <br />Qooxdoo[ http://qooxdoo.org/ ] Leveraging object-oriented JavaScript allows developers to build impressive cross-browser applications<br />
  14. 14. What’s Possible?<br />Phpanywhere [http://phpanywhere.net/ ] is an online IDE<br />
  15. 15. Some More<br />http://demo.tutorialzine.com/2009/12/colorful-clock-jquery-css/demo.html<br />http://robot.anthonycalzadilla.com/<br />http://www.digital-web.com/extras/jquery_crash_course/<br />http://www.bennadel.com/resources/demo/jquery_puzzle/<br />
  16. 16. Google <br />http://mail.google.com/mail/<br />http://www.google.com/reader/<br />http://www.google.com/calendar/<br />http://docs.google.com<br />
  17. 17. FUTURE<br />
  18. 18. JavaScript <br />A scripting programming language most commonly used to add interactive features to webpagesen.wiktionary.org/wiki/JavaScript<br />Search Google with: ‘define:JavaScript’<br />
  19. 19. Most Common Use<br />alert(‘You failed to learn BODY CLONE Jutsu!’);<br />confirm(‘Are you sure you want to buy suriken ??’);<br />document.getElementById(‘sword’).innerHTML = ‘OK’;<br />document.getElementById(‘sword’).style.backgroundColor = ‘#cccccc’;<br />
  20. 20. JavaScript<br />Not Just for Basic Calculation<br />Not Just for Alert and Confirm<br />Not Just for Input Validation <br />Not Just for Show and Hide<br />Not Just for GO BACK<br />
  21. 21. DO YOU wANTTO BE A ?JAVASCRIPT NINJA<br />
  22. 22. jQuery?<br />
  23. 23.
  24. 24. JavaScript Library why ?<br />Easier Development<br />Browser Independent<br />AJAX [ Buzz word ] Operation <br /><ul><li>http://en.wikipedia.org/wiki/JavaScript_library
  25. 25. http://en.wikipedia.org/wiki/List_of_JavaScript_libraries</li></li></ul><li>jQuery<br />“The Write Less, Do More , JavaScript Library”<br /><ul><li>jQuery is
  26. 26. Fast and concise JavaScript Library
  27. 27. Simplifies
  28. 28. HTML document traversing
  29. 29. event handling
  30. 30. animating,
  31. 31. Ajax interactions for rapid web development
  32. 32. Current Version: 1.4.2 ( minified 24KB, dev 155KB )</li></li></ul><li>jQuery why ??<br />“I am not saying jQuery is best for you. But could be”<br /><ul><li>Plugins
  33. 33. http://www.slideshare.net/jeresig/javascript-library-overview-presentation
  34. 34. http://stackoverflow.com/questions/798840/what-should-i-choose-jquery-mootools-yui-scriptaculous-or-prototype</li></li></ul><li>How to Embed ?<br />Download Latest Version of jQuery<br />Embed it as like other external JavaScript file<br />That’s it <br /><html><br /><head><br /><scripttype="text/javascript"src='./js/jquery.js'></script><br /><scripttype="text/javascript"><br /> $(function(){<br /> alert('Yeah Jquery Works!');<br /> });<br /></script><br /></head><br /></html><br />
  35. 35. Important Factors<br />Selectors<br />Attributes<br />Traversing<br />Manipulation<br />CSS<br />Events<br />Effects<br />Ajax<br />Utilites<br />http://docs.jquery.com/ [ API Reference Section]<br />
  36. 36. Selectors in jQuery<br />http://docs.jquery.com/Selectors<br />
  37. 37. Example<br />http://visualjquery.com/<br />
  38. 38. jQuery Collection<br />$(‘#some_id’) return jQuery Collection<br />You can treat it like<br />As Array <br />$(‘#some_id’)[0]<br />$(‘#some_id’).length<br />As Method<br />$(‘#some_id’).size() /* matched element count*/<br />$(‘#some_id’).click(function() { alert(‘clicked’); });<br />
  39. 39. Traversing<br />http://docs.jquery.com/Traversing<br />
  40. 40. Handling Events<br />http://docs.jquery.com/Events<br />
  41. 41. Effects<br />http://docs.jquery.com/Effects<br />
  42. 42. AJAX or AJAH using JavaScript<br />if(typeofXMLHttpRequest !== 'undefined') <br />xhr = new XMLHttpRequest(); <br />else { <br />var versions = ["Microsoft.XmlHttp", "MSXML2.XmlHttp", "MSXML2.XmlHttp.3.0", "MSXML2.XmlHttp.4.0", "MSXML2.XmlHttp.5.0"]; <br /> for(vari = 0, len = versions.length; i < len; i++) { <br /> try { <br />xhr = new ActiveXObject(versions[i]); break; <br /> } catch(e){} <br /> } // end for <br />}<br />http://net.tutsplus.com/videos/screencasts/how-to-make-ajax-requests-with-raw-javascript-part-2/<br />
  43. 43. AJAX or AJAHusing JQuery<br /> $.post(<br />'http://localhost/presentation/ajax.html',<br />function(data) {<br />$('#conatiner').html( data );<br />}<br />);<br />
  44. 44. Don’t Forget about Plugins / UI<br />
  45. 45. http://plugins.jquery.com<br />Lightbox<br />Thickbox<br />Ajaxform<br />http://www.phpfour.com/blog/tag/jquery/<br />
  46. 46. http://www.jqueryui.com<br />http://jqueryui.com/themeroller/<br />Accordion<br />Slider<br />Drag & Drop<br />Overlay<br />Calendar<br />Tabs<br />Dialog<br />
  47. 47. Imp. links for jQuery<br />www.jquery.com<br />docs.jquery.com <br />api.jquery.com <br />www.visualjquery.com<br />ui.jquery.com <br />plugins.jquery.com <br />http://ejohn.org/blog/<br />
  48. 48. Acknowledgement<br />http://www.ajaxray.com/blog/2009/05/17/jquery-presentation-at-phpxperts-seminar-09/<br />http://www.slideshare.net/search/slideshow?q=jquery+introduction&submit=post&searchfrom=header<br />http://www.jquery.com<br />http://visualjquery.com/<br />www.google.com<br />
  49. 49. ??? ???<br />
  50. 50. Areekato<br />

×