Web Applications 101 April 9th, 2009
Developing with Javascript
Javascript has become essential to modern web page
development, but … Javascript has become bloated
DOM navigation Browser differences
Writing Javascript code is tedious, time-consuming,
and error-prone
Is your HTML cluttered?
Some Text
jQuery to the rescue
jQuery makes writing Javascript much easier
DOM navigation (css-like syntax) Apply methods to sets of DOM elements Builder model (chain method calls) Extensible and there are tons of libraries Cross-browser support (IE 6.0+, FF 1.5+, Safari 2.0+, Opera 9.0+), handles most browser differences so you don’t have to Lightweight – 14kb (Minified and Gzipped) Easily add advance UI features to a website
Embraces MVC paradigm by further abstracting presentation layer script development from page markup
jQuery helps organize the mess
Some Text $(“#text”).css(„background‟, „#AAA‟); $(“#text”).click(function() {alert(„you clicked me‟);}); $(“#text”).mouseover(function() {$(this).css.(„background‟, „#FFF‟)}); $(“#text”).mouseout(function() {$(this).css.(„background‟, „#AAA‟)});
What is jQuery?
A framework for Client Side JavaScript. Frameworks provide useful alternatives for common
programming tasks, creating functionality which may not be available or cumbersome to use within a language. An open source project, maintained by a group of developers, with a very active support base and thorough, well written documentation.
What is available with jQuery?
Cross browser support and detection AJAX functions CSS functions JavaScript animation Hundreds of plugins for pre-built user interfaces, advanced
animations, form DOM manipulation validation, etc Expandable DOM transversal functionality using Attribute manipulation custom plugins Event detection and Small foot print handling
Basic jQuery
Selecting part of document is fundamental operation A jQuery object is a wrapper for a selected group of
DOM nodes $() function is a factory method that creates jQuery objects $(“div”) is a jQuery object containing all the “div” elements in the document
Basic jQuery
.addClass() method changes the DOM nodes by adding a ‘class’ attribute
The ‘class’ attribute is a special CSS construct that
provides a visual architecture independent of the element structures
$(“div”).addClass(“emphasize”) will change all occurrences of to See also .removeClass()
Basic jQuery
jQuery provides an independent scheduling point after DOM is created and before images are loaded
$(document).ready(doEmph);
Body “onLoad” waits until all images etc are loaded.
Tedious.
No HTML mods for Javascript required. All done
in jQuery.
jQuery Syntax
$.func(…); or
$(selector).func1(…).func2(…).funcN(…);
$ jQuery Object, can be used instead of jQuery
selector Selector syntax, many different selectors allowed func Chainable, most functions return a jQuery object (…) Function parameters
jQuery Selectors
$( html )
Create DOM elements on-the-fly from the provided String of raw HTML. $(‘I’m a paragraph! ’)
$( expression context )
This function accepts a string containing a CSS or basic XPath selector which is then used to match a set of elements. Default context is document. Used most often for DOM transversal. Selectors will return a jQuery object, which can contain one or more elements, or contain no elements at all.
$( elems )
Wrap jQuery functionality around single or multiple DOM Elements. $(document), $(window), or $(this)
$( fn )
A shorthand for $(document).ready(), allowing you to bind a function to be executed when the DOM document has finished loading. $(function() { alert(“Hello, World!”) })
jQuery CSS Selectors
CSS Element - $(“p”), $(“li”), $(“input”), etc Id - $(“#content”) Class - $(“.brandnew”) Element with an Id - $(“p#content”) Any Descendent - $(“ p a”) Direct Child - $(“p > a”)
jQuery XPath Selectors
XPath Paths - /html/body//div Anchor with an href attr - a[@href] Div with an Ol inside - div[ol] Any anchor with a specific value for the ref attribute //a[@ref='nofollow']
jQuery Selector Example
$(“p span”).css({color: "red"});
This is the first sentence of the paragraph. This is the remainder of the paragraph that goes on and on and on.
View Example
jQuery Filters
First paragraph - p:first Last list item - li:last Fourth link - a:nth(3) Fourth div - div:eq(3) Every other paragraph - p:even or p:odd Every link after the 4th or up to the 4th - a:gt(3) or a:lt(4) Links that contain the word click - a:contains(‘click’) All radio inputs within the first form - $("input:radio", document.forms[0])
jQuery Filter Example
$(“li:even”).css({background:“gray”});
First item Second item Third item Fourth item Fifth item
View Example
Remember the first object number is “0, “even” would apply to “First item”, “Third Item”, etc
jQuery Core Functions
Change element attributes – attr(key, value) Append content inside elements - .append( content ) Prepend content inside elements - .prepend( content ) Place content after elements - .after( content ) Place content before elements - .before( content ) Sets the text of an element(s) – text( content ) Set the html contents to the specified value - html (
content ) Get the value of an input field – val()
jQuery Core Example
$("#more").before("Introduction.").after("Conclusion.");
This is the first sentence of the paragraph. This is the remainder of the paragraph that goes on and on and on. Oh wait, here's another span.
View Example
jQuery Events
bind(eventname, function) method ‘click’ ‘change’ ‘resize’ $(“a[@href]”).bind(‘click’,function(){
$(this).addClass(‘red’);}) You can use shortcut methods too …
$(“a”).click(function () { alert(‘hello’);})
jQuery Event Example
$(“span”).mouseover(function(){ $(this).css({background:“red”});});
This is the first sentence of the paragraph. This is the remainder of the paragraph that goes on and on and on. Oh wait, here's another span.
View Example
jQuery Effects
Show the matched element(s) - .show(speed , callback);
Where speed is ‘slow’, ‘normal’ or ‘fast’
Hide the matched element(s) - .hide();
Slide-show the matched element(s) - .slideDown();
Fade in the matched element(s) - .fadeIn(); Any animation , animate( params , speed , easing ,
callback ),
$("p").animate({ opacity: ‘1.0' }, "slow", “linear");
jQuery Effects Example
$("span:nth(1)").fadeIn("slow").css("background","silver");
This is the first sentence of the paragraph. This is the remainder of the paragraph that goes on and on and on. Surprise, here's another span.
View Example
jQuery & AJAX
jQuery has a series of functions which provide a
common interface for AJAX, no matter what browser you are using. Most of the upper level AJAX functions have a common layout:
$.func(url[,params][,callback]), [ ] optional
url: string representing server target params: names and values to send to server callback: function executed on successful communication.
jQuery AJAX Functions
$.func(url[,params][,callback])
$.ajax, $.ajaxSetup
$.get $.getJSON $.getIfModified $.getScript $.post
$(selector), inject HTML
load loadIfModified
$(selector), ajaxSetup alts
ajaxComplete ajaxError ajaxSend ajaxStart ajaxStop ajaxSuccess
async beforeSend complete contentType data dataType error global ifModified processData success timeout type url
Example – Ajax with jQuery
$.get(“ajax.php", {st: "yes", f: $(this).attr("ID")} );
Example – Form Validation
Requires the Validate plug-in … http://dev.jquery.com/view/trunk/plugins/validate/jquery.validate.js
Name Email
View Example
jQuery – UI plug-in
jQuery offers an plug-in extension that adds many other
useful User Interface effects
Interactions Add rich behaviors like drag and drop, resizing, selection and sorting to any element. Draggable , Droppable , Resizable , Selectable , Sortable Widgets Drop full-featured UI controls — each has a range of options and is fully themeable. Accordion , Datepicker , Dialog, Progressbar , Slider , Tabs Effects Create animated transitions and easing with this set of pre-built effects. Effect, Show, Hide, Toggle, Color animation, Add class, Remove class, Toggle class, Switch class
jQuery - Slideshow
View the slide show
jQuery Games?
http://jonraasch.com/blog/jQuery-video-game-
remake-tc-surf-designs
Around 300 lines of code
jQuery Resources
Project website
http://www.jQuery.com
Learning Center
http://docs.jQuery.com/Tutorials
Documentation
http://docs.jQuery.com/Main_Page
jQuery Success Stories
http://docs.jQuery.com/Sites_Using_jQuery
Web Applications 101 links
http://www.meetup.com/Web-Applications-101/ http://pakt.com/webapps101/jquery/intro/