~~SLIDESHOW~~

JavaScript Libraries

Contact Hour 14: To be discussed on Wednesday 29^th February, 2012.

Slides: By John Resig of Mozilla (ejohn.org)

Lecturer: Dr Chris P. Jobling.

A presentation of the state-of-the-art in libraries from one of the primary developers, followed by examples in JQuery.

JavaScript Libraries

In this lecture I shall present a slidehow that John Resig (Firefox JavaScript developer, author of Pro JavaScript Techniques and developer of the jQuery library) made publicly available on slideshare.net.
I will follow this up with a live example of the use of jQuery and conclude by demonstrating some of the new jQuery UI components.
In addition, there are some on-line videos to watch.
See further reading for more information.

Contents of this Lecture

JavaScript Library Overview
A jQuery Example (live demo)
DOM manipulations in jQuery (on-line demo)
Accordian Menu (video)
jQuery UI widgets (on-line demo)

Learning Outcomes

At the end of this lecture you should be able to answer these questions:

What are the three ways to use JavaScript in web applications?
- What are the advantages and disadvantages of using widgets?
- What are the advantages and disadvantages of using a JavaScript library?
- What are the advantages and disadvantages of using raw JavaScript?
Name the four most popular JavaScript libraries?

Learning Outcomes (continued)

At the end of this lecture you should be able to answer these questions:

What features should a useful JavaScript library have?
Give examples of each.
What other features should one look for when evaluating a JavaScript library?
Explain the selection feature that is core to jQuery

JavaScript Library Overview

John Resig is a Mozilla developer, JavaScript evangelist, author and the lead developer of jQuery, one of the 4 most popular open-source JavaScript libraries.
The following presentation is extracted from a JavaScript Library tutorial that John presented at the October 2007 Ajax Experience conference.
The slides have been made publicly available at slideshare.net
if you are interested, you can watch a video recording (made at Google.com) of John talking about the lessons learned in the development of the jQuery library.

JavaScript Library Overview – The Slides

<html> <div style=“width:425px;text-align:left” id=“__ss_143885”><object style=“margin:0px” width=“425” height=“355”><param name=“movie” value=“http://s3.amazonaws.com/slideshare/ssplayer2.swf?doc=javascript-library-overview-1193202840830224-1”/><param name=“allowFullScreen” value=“true”/><param name=“allowScriptAccess” value=“always”/><embed src=“http://s3.amazonaws.com/slideshare/ssplayer2.swf?doc=javascript-library-overview-1193202840830224-1” type=“application/x-shockwave-flash” allowscriptaccess=“always” allowfullscreen=“true” width=“425” height=“355”></embed></object><div style=“font-size:11px;font-family:tahoma,arial;height:26px;padding-top:2px;”><a href=“http://www.slideshare.net/?src=embed”><img src=“http://s3.amazonaws.com/slideshare/logo_embd.png” style=“border:0px none;margin-bottom:-5px” alt=“SlideShare”/></a> | <a href=“http://www.slideshare.net/jeresig/javascript-library-overview” title=“View 'JavaScript Library Overview' on SlideShare”>View</a> | <a href=“http://www.slideshare.net/upload”>Upload your own</a></div></div> </html>

Learn jQuery with FireBug, jQuerify and SelectorGadget

A YouTube video by Polymorphicpodcast.

Learn how Dave Ward (@encosia) uses FireBug, jQuerify and SelectorGadget to learn jQuery and any other client-side technology. Hosted by Craig Shoemaker (@craigshoemaker) for the Polymorphic Podcast http://polymorphicpodcast.com/.

A jQuery Example

A basic introduction to jQuery and the concepts that you need to know to use it.
Original: http://docs.jquery.com/Tutorials:How_jQuery_Works
Author: John Resig.

Test File

<html>
  <head>
    <script type="text/javascript" src="path/to/jquery.js"></script>
    <script type="text/javascript">
      // Your code goes here
    </script>
  </head>
  <body>
    <a href="http://jquery.com/">jQuery</a>
  </body>
</html>

Edit the src attribute in the script tag to point to your copy of jquery.js. For example, if jquery.js is in the same directory as your HTML file, you can use:

 <script type="text/javascript" src="jquery.js"></script>

You can download your own copy of jQuery from the Downloading jQuery page.

Launching Code on Document Ready

The first thing that most Javascript programmers end up doing is adding some code to their program, similar to this:

 window.onload = function(){ ... }

In jQuery the equivalent uses a ready event:

 $(document).ready(function(){
   // Your code here
 });

Inside of the onload function is the code that you want to run right when the page is loaded. Problematically, however, the Javascript code isn't run until all images are finished downloading. The reason for using window.onload in the first place is due to the fact that the HTML 'document' isn't finished loading yet, when you first try to run your code.

The jQuery ready event code checks the document and waits until it's ready to be manipulated – which is just what we want. So take the above snippet and stick it into the script area on your test page. The remaining jQuery examples will need to be placed inside this callback function, so they are executed when the document is ready to be worked on.

Making Something Happen on Click

Try to make something happen whenever a link is clicked. In the ready function, add the following:

 $("a").click(function(){
   alert("Thanks for visiting!");
 });

Save your HTML file and reload the test page in your browser. Clicking the link on the page should make a browser's alert pop-up, before leaving to go to the main jQuery page.

For click and most other events, you can prevent the default behaviour – here, following the link to jquery.com – by returning false from the event handler:

 $("a").click(function(){
   alert("Thanks for visiting!");
   return false;
 });

Adding a Class

Another thing that is a common task is the addition (or removal) of classes from elements, for example:

 $("a").addClass("test");

If you were to add some style information into the header of your script, like this:

 a.test { font-weight: bold; text-decoration: none; }

All your A elements would now be bold without underlines.
To remove the class, you'd use removeClass

Special Effects

In jQuery, a couple of handy effects are provided, to really make your web site stand out.
To put this to the test, change the click that you added earlier to this:

 $("a").click(function(){
   $(this).hide("slow");
   return false;
 });

Now, if you click any link, it should make itself slowly disappear.

Chainability (The Magic of jQuery)

jQuery uses an interesting concept to make its code short and simple.
For those familiar with object-oriented programming, this concept should be rather straight-forward.
In a nutshell: Every method within jQuery returns the query object itself, allowing you to 'chain' upon it, for example:

 $("a").addClass("test").show().html("foo");

Each of those individual methods (addClass, show, and html) return the jQuery object, allowing you to continue applying methods to the current set of elements.

You can take this even further, by adding or removing elements from the selection, modifying those elements and then reverting to the old selection, for example:

 $("a")
   .filter(".clickme")
     .click(function(){
       alert("You are now leaving the site.");
     })
   .end()
   .filter(".hideme")
     .click(function(){
       $(this).hide();
       return false;
     })
   .end();

Which would work against the following HTML:

 <a href="http://google.com/" class="clickme">I give a message when you leave</a>
 <a href="http://yahoo.com/" class="hideme">Click me to hide!</a>
 <a href="http://microsoft.com/">I'm a normal link</a>

Methods that modify the jQuery selection, and that can be undone with end(), are the following:

add(), 
children(), 
eq(), 
filter(), 
find(), 
gt(), 
lt(), 
next(), 
not(), 
parent(), 
parents() and 
siblings().

Please check the Traversing API documentation for details of these methods.

Callbacks, Functions, and 'this'

A callback is a function that is passed as an argument to another function and is executed after its parent function has completed.
The special thing about a callback is that functions that appear after the “parent” can execute before the callback executes.
Another important thing to know is how to properly pass the callback.

Callback without arguments

For a callback with no arguments you pass it like this:

 $.get('myhtmlpage.html', myCallBack);

Functions in Javascript are 'First class citizens' and so can be passed around like variable references and executed at a later time.

<note>The second parameter here is simply the function name (but not as a string and without parentheses).</note>

Callback with arguments

What do you do if you have arguments that you want to pass?

Wrong

The Wrong Way (will not work!)

 $.get('myhtmlpage.html', myCallBack(param1, param2));

This will not work because it calls myCallBack(param1, param2) then passes the return value as the second parameter to $.get().

Right

The Right Way

 $.get('myhtmlpage.html', function(){
   myCallBack(param1, param2);
 });

Note the use of function(){ preceding myCallBack(). This method works because it passes the anonymous function as the second parameter to $.get() without executing it first.

DOM manipulations in jQuery

An interactive demonstration of the use of jQuery for the manipulation of the DOM.
Original: http://codylindley.com/Javascript/241/jquery-to-the-rescue (no longer available)
Author: Cody Lindley
Open in new window.

Accordian Menu

A screencast video by John Resig.

<html> <object type=“application/x-shockwave-flash” width=“400” height=“300” data=“http://vimeo.com/moogaloop.swf?clip_id=116991&server=vimeo.com&fullscreen=1&show_title=1&show_byline=1&show_portrait=0&color=01AAEA”> <param name=“quality” value=“best” /> <param name=“allowfullscreen” value=“true” /> <param name=“scale” value=“showAll” /> <param name=“movie” value=“http://vimeo.com/moogaloop.swf?clip_id=116991&server=vimeo.com&fullscreen=1&show_title=1&show_byline=1&show_portrait=0&color=01AAEA” /></object><br /><a href=“http://vimeo.com/116991/l:embed_116991”>jQuery Demo - Expandable Sidebar Menu</a> from <a href=“http://vimeo.com/phytar/l:embed_116991”>John Resig</a> on <a href=“http://vimeo.com/l:embed_116991”>Vimeo</a>. </html>

jQuery UI widgets

The jQuery library provides the basic building blocks that can simplify the manipulation of the DOM and Ajax.
A JavaScript library also needs to provide a set of widgets that can enable the user to create rich internet applications (RIA).
Some libraries, such as the Dojo, YUI and script.aculo.us have a rich set of widgets
jQuery has a small but useful jQuery UI widget set.
These can be examined on-line.

Learning Outcomes

At the end of this lecture you should be able to answer these questions:

What are the three ways to use JavaScript in web applications?
- What are the advantages and disadvantages of using widgets?
- What are the advantages and disadvantages of using a JavaScript library?
- What are the advantages and disadvantages of using raw JavaScript?
Name the four most popular JavaScript libraries?

Learning Outcomes (continued)

At the end of this lecture you should be able to answer these questions:

What features should a useful JavaScript library have?
Give examples of each.
What other features should one look for when evaluating a JavaScript library?
Explain the selection feature that is core to jQuery

Summary of this Lecture

JavaScript Library Overview
A jQuery Example (live demo)
DOM manipulations in jQuery (on-line demo)
Accordian Menu (video)
jQuery UI widgets (on-line demo)

JavaScript Libraries Mentioned in this Lecture

The jQuery Library and the jQuery User Interface widgets.
Prototype and script.aculo.us
The Dojo Toolkit
The Yahoo! User Interface Library (YUI)

Learning Outcomes

At the end of this lecture you should be able to answer these questions:

What are the three ways to use JavaScript in web applications?
- What are the advantages and disadvantages of using widgets?
- What are the advantages and disadvantages of using a JavaScript library?
- What are the advantages and disadvantages of using raw JavaScript?
Name the four most popular JavaScript libraries?

Learning Outcomes (continued)

At the end of this lecture you should be able to answer these questions:

What features should a useful JavaScript library have?
Give examples of each.
What other features should one look for when evaluating a JavaScript library?
Explain the selection feature that is core to jQuery

Homework Exercises

Work through the jQuery example
Watch and make notes on the Ajax and Accordian Menu videos.
Watch and make notes on the video of John Resig's presentation on the design of the jQuery library.
Explore the jQuery web site and the other JavaScript libraries mentioned in this lecture.

What's Next?

HTML Forms – the Next Generation

Web-based replacements for spreadsheets and simple forms

W3C's plans for HTML
HTML4 Forms
XForms
Web Forms 2.0
XForms Transitional
Next Steps

Previous Lecture | home | Next Lecture

ICCT Wiki

Table of Contents

JavaScript Libraries

JavaScript Libraries

Contents of this Lecture

Learning Outcomes

Learning Outcomes (continued)

JavaScript Library Overview

JavaScript Library Overview – The Slides

Learn jQuery with FireBug, jQuerify and SelectorGadget

A jQuery Example

Test File

Launching Code on Document Ready

Making Something Happen on Click

Adding a Class

Special Effects

Chainability (The Magic of jQuery)

Callbacks, Functions, and 'this'

Callback without arguments

Callback with arguments

Wrong

Right

DOM manipulations in jQuery

Accordian Menu

jQuery UI widgets

Learning Outcomes

Learning Outcomes (continued)

Summary of this Lecture

Further Reading

JavaScript Libraries Mentioned in this Lecture

Learning Outcomes

Learning Outcomes (continued)

Homework Exercises

What's Next?