jQuery - write less, do more javascript toolkit

Introduction to jQuery Write less, do more! Girish Venkatachalam Chennai girish1729@gmail.com December 8, 2007

Basic web interface architecture Figure: basic building blocks HTML provides content Girish Venkatachalam (entrepreneur) Introduction to jQuery December 8, 2007 2 / 22

Basic web interface architecture Figure: basic building blocks HTML provides content CSS provides appearance, placement and layout Girish Venkatachalam (entrepreneur) Introduction to jQuery December 8, 2007 2 / 22

Basic web interface architecture Figure: basic building blocks HTML provides content CSS provides appearance, placement and layout Javascript provides dynamism and deﬁnes behavior Girish Venkatachalam (entrepreneur) Introduction to jQuery December 8, 2007 2 / 22

html tree structure Every html node forms part of a tree with html as root node Girish Venkatachalam (entrepreneur) Introduction to jQuery December 8, 2007 3 / 22

html tree structure Every html node forms part of a tree with html as root node You can traverse the tree easily since it has a ﬁxed structure Girish Venkatachalam (entrepreneur) Introduction to jQuery December 8, 2007 3 / 22

html tree structure Every html node forms part of a tree with html as root node You can traverse the tree easily since it has a ﬁxed structure Every node has attributes and optionally child nodes Girish Venkatachalam (entrepreneur) Introduction to jQuery December 8, 2007 3 / 22

A simple html example <html> <head> <title> A simple example </title> </head> <body> <h1 align=quot;centerquot;> Hello world html </h1> <p> How are you? </p> </body> </html> Fundamental building block of all web apps Girish Venkatachalam (entrepreneur) Introduction to jQuery December 8, 2007 5 / 22

A simple html example <html> <head> <title> A simple example </title> </head> <body> <h1 align=quot;centerquot;> Hello world html </h1> <p> How are you? </p> </body> </html> Fundamental building block of all web apps Javascript to manipulate DOM elements Girish Venkatachalam (entrepreneur) Introduction to jQuery December 8, 2007 5 / 22

A simple html example <html> <head> <title> A simple example </title> </head> <body> <h1 align=quot;centerquot;> Hello world html </h1> <p> How are you? </p> </body> </html> Fundamental building block of all web apps Javascript to manipulate DOM elements Cascading style sheets (CSS) for appearance Girish Venkatachalam (entrepreneur) Introduction to jQuery December 8, 2007 5 / 22

A simple html example <html> <head> <title> A simple example </title> </head> <body> <h1 align=quot;centerquot;> Hello world html </h1> <p> How are you? </p> </body> </html> Fundamental building block of all web apps Javascript to manipulate DOM elements Cascading style sheets (CSS) for appearance Learning html is a must before we do web programming! Girish Venkatachalam (entrepreneur) Introduction to jQuery December 8, 2007 5 / 22

What is CSS? html supplies the content Girish Venkatachalam (entrepreneur) Introduction to jQuery December 8, 2007 6 / 22

What is CSS? CSS determines the beauty html supplies the content Girish Venkatachalam (entrepreneur) Introduction to jQuery December 8, 2007 6 / 22

What is CSS? CSS determines the beauty html supplies the content What remains? Girish Venkatachalam (entrepreneur) Introduction to jQuery December 8, 2007 6 / 22

Intro to javascript What about the behavior? Girish Venkatachalam (entrepreneur) Introduction to jQuery December 8, 2007 7 / 22

Intro to javascript What about the behavior? That is where a programming language like javascript comes in. Girish Venkatachalam (entrepreneur) Introduction to jQuery December 8, 2007 7 / 22

Document Object Model What is the role of DOM in web programming? Animations Girish Venkatachalam (entrepreneur) Introduction to jQuery December 8, 2007 8 / 22

Document Object Model What is the role of DOM in web programming? Animations jQuery does a marvelous job of DOM manipulations Girish Venkatachalam (entrepreneur) Introduction to jQuery December 8, 2007 8 / 22

jQuery fundament Tiniest js/AJAX toolkit around Girish Venkatachalam (entrepreneur) Introduction to jQuery December 8, 2007 9 / 22

jQuery fundament Tiniest js/AJAX toolkit around Very very very powerful Girish Venkatachalam (entrepreneur) Introduction to jQuery December 8, 2007 9 / 22

jQuery fundament Tiniest js/AJAX toolkit around Very very very powerful Extremely well maintained with 100s of plugins Girish Venkatachalam (entrepreneur) Introduction to jQuery December 8, 2007 9 / 22

jQuery fundament Tiniest js/AJAX toolkit around Very very very powerful Extremely well maintained with 100s of plugins Abstracts out portability issues and javascript gunk Girish Venkatachalam (entrepreneur) Introduction to jQuery December 8, 2007 9 / 22

A jQuery code sample $(document).ready(function() { $(’a’).hover(function() { $(this).hide(’slow’); }); }); Neat eh? Girish Venkatachalam (entrepreneur) Introduction to jQuery December 8, 2007 11 / 22

A jQuery code sample $(document).ready(function() { $(’a’).hover(function() { $(this).hide(’slow’); }); }); Neat eh? This is all it takes for an animation using jQuery Girish Venkatachalam (entrepreneur) Introduction to jQuery December 8, 2007 11 / 22

A jQuery code sample $(document).ready(function() { $(’a’).hover(function() { $(this).hide(’slow’); }); }); Neat eh? This is all it takes for an animation using jQuery You have to add it between the ’script’ tag you always use for javascript Girish Venkatachalam (entrepreneur) Introduction to jQuery December 8, 2007 11 / 22

A jQuery code sample $(document).ready(function() { $(’a’).hover(function() { $(this).hide(’slow’); }); }); Neat eh? This is all it takes for an animation using jQuery You have to add it between the ’script’ tag you always use for javascript After all jQuery is also javascript Girish Venkatachalam (entrepreneur) Introduction to jQuery December 8, 2007 11 / 22

A jQuery code sample $(document).ready(function() { $(’a’).hover(function() { $(this).hide(’slow’); }); }); Neat eh? This is all it takes for an animation using jQuery You have to add it between the ’script’ tag you always use for javascript After all jQuery is also javascript Without its disadvantages and ugliness. . . Girish Venkatachalam (entrepreneur) Introduction to jQuery December 8, 2007 11 / 22

Another jQuery sample $(document).ready(function (){ $(’a’).hover(function (){ $(this).hide(’slow’); },function(){ $(this).show(’fast’); }); }); This sample builds on the previous example Girish Venkatachalam (entrepreneur) Introduction to jQuery December 8, 2007 13 / 22

Another jQuery sample $(document).ready(function (){ $(’a’).hover(function (){ $(this).hide(’slow’); },function(){ $(this).show(’fast’); }); }); This sample builds on the previous example This is all it takes for an animation using jQuery (once again) Girish Venkatachalam (entrepreneur) Introduction to jQuery December 8, 2007 13 / 22

Another jQuery sample $(document).ready(function (){ $(’a’).hover(function (){ $(this).hide(’slow’); },function(){ $(this).show(’fast’); }); }); This sample builds on the previous example This is all it takes for an animation using jQuery (once again) But it is not just animations. . . Girish Venkatachalam (entrepreneur) Introduction to jQuery December 8, 2007 13 / 22

Exploring jQuery jQuery’s power comes from its powerful selectors, easy DOM and CSS manipulations, mouse and keyboard event handling and excellent support for AJAX programming. Girish Venkatachalam (entrepreneur) Introduction to jQuery December 8, 2007 14 / 22

Exploring jQuery jQuery’s power comes from its powerful selectors, easy DOM and CSS manipulations, mouse and keyboard event handling and excellent support for AJAX programming. John Resig achieved something revolutionary by leaving out the inessentials and keeping things small Girish Venkatachalam (entrepreneur) Introduction to jQuery December 8, 2007 14 / 22

Exploring jQuery jQuery’s power comes from its powerful selectors, easy DOM and CSS manipulations, mouse and keyboard event handling and excellent support for AJAX programming. John Resig achieved something revolutionary by leaving out the inessentials and keeping things small This has led to a subculture of jQuery plugins - extensions are available for nearly every web design task you can think of Girish Venkatachalam (entrepreneur) Introduction to jQuery December 8, 2007 14 / 22

Exploring jQuery jQuery’s power comes from its powerful selectors, easy DOM and CSS manipulations, mouse and keyboard event handling and excellent support for AJAX programming. John Resig achieved something revolutionary by leaving out the inessentials and keeping things small This has led to a subculture of jQuery plugins - extensions are available for nearly every web design task you can think of We shall take a peek at some of the extensions Girish Venkatachalam (entrepreneur) Introduction to jQuery December 8, 2007 14 / 22

jQuery plugins jScrollPane Girish Venkatachalam (entrepreneur) Introduction to jQuery December 8, 2007 15 / 22

jQuery plugins jScrollPane Field plugin Girish Venkatachalam (entrepreneur) Introduction to jQuery December 8, 2007 15 / 22

jQuery plugins jScrollPane Field plugin Extra selectors Girish Venkatachalam (entrepreneur) Introduction to jQuery December 8, 2007 15 / 22

jQuery plugins jScrollPane Field plugin Extra selectors Visual jQuery Girish Venkatachalam (entrepreneur) Introduction to jQuery December 8, 2007 15 / 22

jQuery plugins jScrollPane Field plugin Extra selectors Visual jQuery Cycle plugin Girish Venkatachalam (entrepreneur) Introduction to jQuery December 8, 2007 15 / 22

jQuery plugins jScrollPane Field plugin Extra selectors Visual jQuery Cycle plugin jqPuzzle Girish Venkatachalam (entrepreneur) Introduction to jQuery December 8, 2007 15 / 22

jQuery plugins jScrollPane Field plugin Extra selectors Visual jQuery Cycle plugin jqPuzzle jTip for balloon tips (tooltip) Girish Venkatachalam (entrepreneur) Introduction to jQuery December 8, 2007 15 / 22

jQuery plugins jScrollPane Field plugin Extra selectors Visual jQuery Cycle plugin jqPuzzle jTip for balloon tips (tooltip) Impromptu Girish Venkatachalam (entrepreneur) Introduction to jQuery December 8, 2007 15 / 22

jQuery plugins jScrollPane Embed videos (You can Field plugin watch mpeg videos ) Extra selectors Visual jQuery Cycle plugin jqPuzzle jTip for balloon tips (tooltip) Impromptu Girish Venkatachalam (entrepreneur) Introduction to jQuery December 8, 2007 15 / 22

jQuery plugins jScrollPane Embed videos (You can Field plugin watch mpeg videos ) Extra selectors Datepicker plugin Visual jQuery Cycle plugin jqPuzzle jTip for balloon tips (tooltip) Impromptu Girish Venkatachalam (entrepreneur) Introduction to jQuery December 8, 2007 15 / 22

jQuery plugins jScrollPane Embed videos (You can Field plugin watch mpeg videos ) Extra selectors Datepicker plugin Visual jQuery UI for drag and drop Cycle plugin jqPuzzle jTip for balloon tips (tooltip) Impromptu Girish Venkatachalam (entrepreneur) Introduction to jQuery December 8, 2007 15 / 22

jQuery plugins jScrollPane Embed videos (You can Field plugin watch mpeg videos ) Extra selectors Datepicker plugin Visual jQuery UI for drag and drop Cycle plugin Conﬁrm plugin jqPuzzle jTip for balloon tips (tooltip) Impromptu Girish Venkatachalam (entrepreneur) Introduction to jQuery December 8, 2007 15 / 22

jQuery plugins jScrollPane Embed videos (You can Field plugin watch mpeg videos ) Extra selectors Datepicker plugin Visual jQuery UI for drag and drop Cycle plugin Conﬁrm plugin jqPuzzle Form handing jTip for balloon tips (tooltip) Impromptu Girish Venkatachalam (entrepreneur) Introduction to jQuery December 8, 2007 15 / 22

jQuery plugins jScrollPane Embed videos (You can Field plugin watch mpeg videos ) Extra selectors Datepicker plugin Visual jQuery UI for drag and drop Cycle plugin Conﬁrm plugin jqPuzzle Form handing jTip for balloon tips (tooltip) Keyboard shortcut handling Impromptu Girish Venkatachalam (entrepreneur) Introduction to jQuery December 8, 2007 15 / 22

jQuery plugins jScrollPane Embed videos (You can Field plugin watch mpeg videos ) Extra selectors Datepicker plugin Visual jQuery UI for drag and drop Cycle plugin Conﬁrm plugin jqPuzzle Form handing jTip for balloon tips (tooltip) Keyboard shortcut handling Impromptu And much much more... Girish Venkatachalam (entrepreneur) Introduction to jQuery December 8, 2007 15 / 22

Advanced jQuery I Girish Venkatachalam (entrepreneur) Introduction to jQuery December 8, 2007 16 / 22

Advanced jQuery I jQuery can work with AJAX and other javascript libraries seamlessly Girish Venkatachalam (entrepreneur) Introduction to jQuery December 8, 2007 16 / 22

Advanced jQuery I jQuery can work with AJAX and other javascript libraries seamlessly jQuery can obviate the need for using javascript directly for most common web app/UI development needs. Girish Venkatachalam (entrepreneur) Introduction to jQuery December 8, 2007 16 / 22

Advanced jQuery II $(document).ready(function() { $(quot;#ratingquot;).append(quot;Please rate: quot;); for ( var i = 1; i <= 5; i++ ) $(quot;#ratingquot;).append(quot;<a href=’#’>quot; + i + quot;</a> quot;); $(quot;#rating aquot;).click(function(e){ $.post(quot;rate.phpquot;, {rating: $(this).html()}, function(xml) { $(quot;#ratingquot;).html( quot;Thanks for rating, current average: quot; + $(quot;averagequot;, xml).text() + quot;, number of votes: quot; + $(quot;countquot;, xml).text() ); }); return false; }); }); Girish Venkatachalam (entrepreneur) Introduction to jQuery December 8, 2007 18 / 22

Further study More selectors and advanced use is gained by experience $(’#fooid’).onblur(); $(’.fooclass’).onmousever(); $(’div#fooid’).find(); $(’h1’).css(’text-transform’,’underline’); $(’div’).addClass(’colorful’); Girish Venkatachalam (entrepreneur) Introduction to jQuery December 8, 2007 20 / 22

Further study More selectors and advanced use is gained by experience $(’#fooid’).onblur(); $(’.fooclass’).onmousever(); $(’div#fooid’).find(); $(’h1’).css(’text-transform’,’underline’); $(’div’).addClass(’colorful’); Possibilities are endless! Girish Venkatachalam (entrepreneur) Introduction to jQuery December 8, 2007 20 / 22

Questions? Discussion and questions? http://jquery.com 1 http://visualjquery.com 2 http://www.alistapart.com 3 http://www.csszengarden.com 4 Girish Venkatachalam (entrepreneur) Introduction to jQuery December 8, 2007 22 / 22

jQuery - write less, do more javascript toolkit

by girish1729 on Dec 06, 2007

Accessibility

Categories

Upload Details

Usage Rights

3 Embeds 6

Statistics

jQuery - write less, do more javascript toolkit Presentation Transcript

http://www.slideshare.net	4
http://192.168.10.100	1
http://matrix	1