Table of Contents

~~SLIDESHOW~~

JavaScript Libraries

Contact Hour 14: To be discussed on Wednesday 29th 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

Contents of this Lecture

Learning Outcomes

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

Learning Outcomes (continued)

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

JavaScript Library Overview

John Resig

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

<html> <object width=“425” height=“344”><param name=“movie” value=“http://www.youtube.com/v/JB6MIV_lHI0&hl=en&fs=1&”></param><param name=“allowFullScreen” value=“true”></param><param name=“allowscriptaccess” value=“always”></param><embed src=“http://www.youtube.com/v/JB6MIV_lHI0&hl=en&fs=1&” type=“application/x-shockwave-flash” allowscriptaccess=“always” allowfullscreen=“true” width=“425” height=“344”></embed></object> </html>

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

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

 window.onload = function(){ ... }
 $(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

 $("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

 $("a").addClass("test");
 a.test { font-weight: bold; text-decoration: none; }

Special Effects

 $("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)

 $("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'

Callback without arguments

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

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

Callback with arguments

Wrong

 $.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(). 

 $.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

Accordian Menu

<html> <object type=“application/x-shockwave-flash” width=“400” height=“300” data=“http://vimeo.com/moogaloop.swf?clip_id=116991&amp;server=vimeo.com&amp;fullscreen=1&amp;show_title=1&amp;show_byline=1&amp;show_portrait=0&amp;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&amp;server=vimeo.com&amp;fullscreen=1&amp;show_title=1&amp;show_byline=1&amp;show_portrait=0&amp;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

Learning Outcomes

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

Learning Outcomes (continued)

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

Summary of this Lecture

Further Reading

John Resig, Pro JavaScript Techniques

Learning jQuery

JavaScript Libraries Mentioned in this Lecture

Learning Outcomes

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

Learning Outcomes (continued)

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

Homework Exercises

What's Next?

HTML Forms – the Next Generation

Web-based replacements for spreadsheets and simple forms

Previous Lecture | home | Next Lecture