jQuery Simplify your JavaScript

1
jQuery Simplify your JavaScript

• Matthew Dawes
• Pacific Northwest National Laboratory
• Interlab 2007

2
What is jQuery?

• JavaScript Library
• Functionality
• DOM scripting event handling
• Ajax
• User interface effects
• Form validation

3
Why jQuery?

• Lightweight 14kb (Minified and Gzipped)
• Cross-browser support (IE 6.0, FF 1.5, Safari
  2.0, Opera 9.0)
• CSS-like syntax easy for developers/non-develope
  rs to understand
• Active developer community
• Extensible - plugins

4
Example Show/Hide the old way

• lta href"" onclick"toggle_visibility('foo')"gtCl
  ick here to toggle visibility of foolt/agt
• function toggle_visibility(id)
• var e document.getElementById(id)
• if(e.style.display 'block')
• e.style.display 'none'
• else
• e.style.display 'block'

5
Example Show/Hide with jQuery

• ().ready(function()
• ("a").click(function()
• ("more").toggle("slow")
• return false
• )
• )

6
Example DOM manipulation

• function showOneYr(str)
• ("main div").css("display","none")
• ("main div"str).css("display","block")
• ().ready(function()
• showOneYr(('main div').attr("id"))
• ("main p").after("lth2gtChoose a Yearlt/h2gtltp
  id'yearLinks' class'centered smaller'gt lt/pgt")
  
• ("main h3").each(function()
• yrTxt (this).text()
• ("yearLinks").append('lta href""gt'yrTxt'lt/a
  gt ')
• )
• ("yearLinks a").click(function()
• showOneYr('yr'(this).text())
• return false
• )
• )

7
Example Ajax the old way

• function GetXmlHttpObject(handler)
• var objXmlHttp null //Holds the local
  xmlHTTP object instance
• //Depending on the browser, try to create the
  xmlHttp object
• if (is_ie)
• var strObjName (is_ie5) ? 'Microsoft.XMLHTTP'
  'Msxml2.XMLHTTP'
• try
• objXmlHttp new ActiveXObject(strObjName)
• objXmlHttp.onreadystatechange handler
• catch(e)
• //Object creation errored
• alert('Verify that activescripting and activeX
  controls are enabled')
• return
• else
• // Mozilla Netscape Safari
• objXmlHttp new XMLHttpRequest()

8
Example Ajax with jQuery

• .get("update_actions.aspx", st "yes", f
  (this).attr("ID") )

9
Example Ajax with jQuery

• (document).ready(function()
• ("td gt img").click(function()
• if((this).attr('src')
  "/images/red_x.jpg")
• (this).attr('src',
  "/images/green_tick.jpg").attr('alt', "Green
  Check").attr('title', "Complete")
• .get("update_actions.aspx", st
  "yes", f (this).attr("ID") )
• else
• (this).attr('src',
  "/images/red_x.jpg").attr('alt', "Red
  X").attr('title', "Not Started")
• .get("update_actions.aspx", st
  "no", f (this).attr("ID") )
• )
• )

10
Example Form Validation

• ().ready(function()
• // validate the comment form when it is submitted
• ("commentForm").validate()
• )
• ltinput id"cname" name"name" class"some other
  styles requiredtrue,minLength2" /gt
• ltinput id"cemail" name"email"
  class"requiredtrue,emailtrue" /gt

11
Panel Discussion My Questions

• What JavaScript libraries are you using?
• How are you implementing them? (site by site as
  needed, central repository, etc.)
• How do you manage upgrades?

12
Useful jQuery links

• www.jquery.com jQuery homepage
• www.learningjquery.com jQuery tutorial blog
• www.visualjquery.com jQuery documentation
• http//ui.jquery.com jQuery user interface
• http//bassistance.de/jquery-plugins/ - homepage
  of the author of several useful jQuery plugins.