Introduction to Jquery
Upcoming SlideShare
Loading in...5
×
 

Introduction to Jquery

on

  • 1,777 views

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

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

Statistics

Views

Total Views
1,777
Views on SlideShare
1,770
Embed Views
7

Actions

Likes
1
Downloads
24
Comments
0

4 Embeds 7

http://www.slideshare.net 3
http://localhost 2
http://www.linkedin.com 1
https://www.linkedin.com 1

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

CC Attribution-NonCommercial LicenseCC Attribution-NonCommercial License

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

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

    Introduction to Jquery Introduction to Jquery Presentation Transcript

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