Andy Gibson
School of Applied Computing
University of Dundee
Email: argibson86@gmail.com
Blog: http://www.andy-gibson.co.uk
Twitter: ARGibson

Final year BSc Applied Computing

 Graduate in June
.NET developer for both web and desktop

ASP.NET MVC

 jQuery
Enjoy playing with new technology


Exhibit A
Name:
John Resig
Employer:
Mozilla Corporation
Role:
JavaScript Evangelist
Creator of:
• jQuery
• Sizzle Selector Engine
• TestSwarm
• The Google Address Translator

What is jQuery?
A JavaScript framework

Lightweight (~19k minified & Gzipped)

Simplifies and encapsulates monotonous JS

Boiler plate code

Uses no browser sniffing under the hood!

 Object detection instead

Out of the Box
Selector Engine (Sizzle)

DOM Manipulation & Traversal

Wrapped Set / Chaining

Event Model

AJAX

Effects & Animations

Extensibility


An Example – Zebra Stripes
Header A Header B Header C Header D
5 A True #000000
10 B False #333333
15 C True #666666
Odd Even
20 D True #999999
25 E False #AAAAAA
30 F False #CCCCCC
35 G False #FFFFFF

The DOM JavaScript Way
function hasClass(obj) {
var result = false;
if (obj.getAttributeNode(\"class\") != null) {
result = obj.getAttributeNode(\"class\").value;
}
return result;
Zebra stripe code from
}
function stripe(id) {
A List Apart
var even = false;
var evenColor = arguments[1] ? arguments[1] : \"#fff\";
var oddColor = arguments[2] ? arguments[2] : \"#eee\";
var table = document.getElementById(id);
if (! table) { return; }
var tbodies = table.getElementsByTagName(\"tbody\");
for (var h = 0; h < tbodies.length; h++) {
var trs = tbodies[h].getElementsByTagName(\"tr\");
for (var i = 0; i < trs.length; i++) {
35 Lines of code!
if (! hasClass(trs[i]) &&
! trs[i].style.backgroundColor) {
var tds = trs[i].getElementsByTagName(\"td\");
for (var j = 0; j < tds.length; j++) {
var mytd = tds[j];
if (! hasClass(mytd) &&
! mytd.style.backgroundColor) {
1.1 kb
mytd.style.backgroundColor =
even ? evenColor : oddColor;
}
}
}
}
}
}
Source: http://www.alistapart.com/articles/zebratables

The jQuery Way
Add a CSS class to all even table rows:
$(“table tr:nth-child(even)”).addClass(“striped”);
Isn’t that a CSS 3 selector?
It sure is!
Or, set the background-color styles:
$(“table tr:nth-child(even)”).css(“background-color”, “#fff”);
$(“table tr:nth-child(odd)”).css(“background-color”, “#eee”);
129bytes
51 bytes
Zebra stripe code in
2 Linesof code!
1 Line of code!
jQuery

Browser Compatibility
It’s not all a walk in the park!

You at the back, yes you, pay attention!

Firefox 1.5+ Internet Explorer 6+ Safari 3+ Opera 9+
(Konquer0r, Chrome, etc.)
jQuery will work on other browsers / versions
BUT there are known issues!
Compatibility testing: http://jquery.com/test/

Syntax
$ as an alias to the jQuery object
Provides

Can avoid conflicts by using $.noConflict()

Most operations return a jQuery object

Operations are applied to the same set of elements

Allows chaining


Available as both a web
site an an Adobe Air
application
http://api.jquery.com

Visual Studio 2008

 Ships with ASP.NET MVC
 InteliSense through an update and -vsdoc.js files*
Eclipse

 Web Platform Tools Support**
NetBeans

 Code completion for JS libraries out of the box
* http://weblogs.asp.net/scottgu/archive/2008/11/21/jquery-intellisense-in-vs-2008.aspx
** http://www.langtags.com/jquerywtp/

jQuery In Action:
Published by Manning
ISBN: 978-1933-988351
Learning jQuery 1.3:
Published by Packt
ISBN: 978-1847-196705

Andy Gibson:
Email:
1.3.2 argibson86@gmail.com
 http://jquery.com
 http://api.jquery.com
Web:
 http://ui.jquery.com
http://www.andy-gibson.co.uk
 http://plugins.jquery.com
Thank you for Twitter:
coming
http://twitter.com/ARGibson
WebDD ‘09: 18th April Microsoft Campus, Reading
DDD Scotland: 2nd May GCU Glasgow
DDD South West: 23rd May Taunton, Somerset