Introduction to Jquery

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

Introduction to Jquery

by Amzad Hossain

Accessibility

Upload Details

Usage Rights

1 Embed 3

Statistics

Introduction to Jquery Presentation Transcript