introduction to jquery
DESCRIPTION
Presented @ BRAC University workshop 2009, OSS workshop by GROW @ Southeast University in 24th April 2010TRANSCRIPT
Mohammad Amzad Hossain 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 & PRESENT
THAT
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://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 ? :DMafia
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_puzzl
e/
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> <script type="text/javascript" src='./js/jquery.js'></script> <script type="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
$(‘div’) All Element with given tag Name
$(‘#some_id’) Single Element with Given ID
$(‘.some_class’) All Element with given class Name
$(‘#some_id .class_name)
___________ THINK _____________
$(‘div:first’) Matches the first div Element
$(‘tr:even’) Matches even elements, zero-indexed
$(‘tr[class=test]’) Does same as $( ‘tr.test’)
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
$(‘#sid’).parent() Direct Parent of element id sid
$(‘#sid’).children() Immediate Children of element id sid
$(‘#sid’).siblings() ______ GUESS ________
$(‘#sid’).prev() Previous Element of element id sid
$(‘#sid’).next() ______ GUESS __________
$(‘#sid’).nextAll()
$(‘#sid’).prevAll()
Handling Events
$(‘#sid’).click(function(){ alert(‘you clicked me !’);});
CLICK
$(‘#sid’).mouseover(function(){ alert(‘you are on top of me !’);});
___________ GUESS __________
$(‘#sid’).live(‘click’, function(){ alert(‘Remember ME’ );})
Just Remember for now .. You will be benefited in Future
http://docs.jquery.com/Events
Effects
$(‘#sid’).hide() Hiding Element id sid
$(‘#sid’).show() ___________ GUESS __________
$(‘#sid_button’).click(function(){ $(‘#sid’).fadeOut(‘slow’);});
$(‘#sid_button’).click(function(){ $(‘#sid’).slideUp(‘slow’);});
$(‘#sid_button’).toggle( function(){ $(‘#sid’).hide(); }, function() { $(‘#sid’).show(); });
Hmmm…
http://docs.jquery.com/Effects
AJAX or AJAH using JavaScriptif(typeof XMLHttpRequest !== 'undefined')
xhr = new XMLHttpRequest();
else {
var versions = ["Microsoft.XmlHttp", "MSXML2.XmlHttp", "MSXML2.XmlHttp.3.0", "MSXML2.XmlHttp.4.0", "MSXML2.XmlHttp.5.0"];
for(var i = 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