ICCT Wiki

This page is read only. You can view the source, but not change it. Ask your administrator if you think this is wrong.
~~SLIDESHOW~~







====== JavaScript Libraries ======

**Contact Hour 14**: To be discussed on Wednesday 29<sup>th</sup> February, 2012.

**Slides**: By John Resig of Mozilla ([[http://ejohn.org|ejohn.org]])

**Lecturer**: [[C.P.Jobling@Swansea.ac.uk|Dr Chris P. Jobling]].

A presentation of the state-of-the-art in libraries from one of the primary developers, followed by examples in [[http://jquery.com|JQuery]].








===== JavaScript Libraries =====

  * In this lecture I shall present a slidehow that John Resig (Firefox JavaScript developer, author of [[http://jspro.org/|Pro JavaScript Techniques]] and developer of the [[http://jquery.org|jQuery library]]) made publicly available on [[http://www.slideshare.net|slideshare.net]]. 
  * I will follow this up with a [[eg-259:lecture13#a_jquery_example|live example]] of the use of [[http://jquery.org|jQuery]] and conclude by demonstrating some of the new [[http://ui.jquery.com/|jQuery UI]] components.
  * In addition, there are some on-line videos to watch.
  * See [[#further_reading|further reading]] for more information.  
















===== Contents of this Lecture =====

  * [[eg-259:lecture13#javaScript_library_overview|JavaScript Library Overview]]
  * [[eg-259:lecture13#a_jquery_example|A jQuery Example]] (live demo)
  * [[eg-259:lecture13#dom_manipulations_in_jquery|DOM manipulations in jQuery]] (on-line demo)
  * [[eg-259:lecture13#accordian_menu|Accordian Menu]] (video)
  * [[eg-259:lecture13#jquery_ui_widgets|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 =====

{{  eg-259:l3-ejohn.png|John Resig}}
  * 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 [[#javascript_library_overview_the_slides|following presentation]] is extracted from a JavaScript Library tutorial that John presented at the October 2007 //Ajax Experience conference//.
  * The slides have been made [[http://www.slideshare.net/jeresig/javascript-library-overview|publicly available]] at [[http://www.slideshare.net/|slideshare.net]]
  * if you are interested, you can watch a [[http://video.google.co.uk/videoplay?docid=-3408517784167940424|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 [[http://www.youtube.com/watch?v=JB6MIV_lHI0|YouTube video]] by [[http://polymorphicpodcast.com/|Polymorphicpodcast]].
<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 =====

  * 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 =====
 
<code  html>
<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>
</code>

----

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: 

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

You can download your own copy of jQuery from the [[http://docs.jquery.com/Downloading_jQuery|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: 
<code javascript>
 window.onload = function(){ ... }
</code>
  * In jQuery the equivalent uses a //ready event//:
<code javascript>
 $(document).ready(function(){
   // Your code here
 });
</code>

----

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: 
<code javascript>
 $("a").click(function(){
   alert("Thanks for visiting!");
 });
</code>

----

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 [[http://jquery.com|jquery.com]] -- by returning false from the event handler: 
<code javascript>
 $("a").click(function(){
   alert("Thanks for visiting!");
   return false;
 });
</code>



===== Adding a Class =====
 
  * Another thing that is a common task is the addition (or removal) of classes from elements, for example: 
<code javascript>
 $("a").addClass("test");
</code>
  * If you were to add some style information into the header of your script, like this: 
<code css>
 a.test { font-weight: bold; text-decoration: none; }
</code>
  * 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: 
<code javascript>
 $("a").click(function(){
   $(this).hide("slow");
   return false;
 });
</code>

----

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: 
<code javascript>
 $("a").addClass("test").show().html("foo");
</code>

----

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: 
<code javascript>
 $("a")
   .filter(".clickme")
     .click(function(){
       alert("You are now leaving the site.");
     })
   .end()
   .filter(".hideme")
     .click(function(){
       $(this).hide();
       return false;
     })
   .end();
</code>
Which would work against the following HTML: 
<code 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>
</code>

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 [[http://docs.jquery.com/DOM/Traversing|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: 
<code javascript>
 $.get('myhtmlpage.html', myCallBack);
</code>
  * 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!) 
<code javascript>
 $.get('myhtmlpage.html', myCallBack(param1, param2));
</code>

----

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 
<code javascript>
 $.get('myhtmlpage.html', function(){
   myCallBack(param1, param2);
 });
</code>

----


**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 [[http://docs.jquery.com/Tutorials:Live_Examples_of_jQuery|new window]].






===== Accordian Menu =====

  * A [[http://www.vimeo.com/116991|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&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 =====

  * 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 [[wp>Rich_Internet_application|rich internet applications]] (RIA).
  * Some libraries, such as the [[http://dojotoolkit.org|Dojo]], [[http://developer.yahoo.com/yui/|YUI]] and [[http://script.aculo.us|script.aculo.us]] have a rich set of widgets
  * jQuery has a small but useful jQuery UI widget set.
  * These can be [[http://ui.jquery.com/|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 =====


  * [[eg-259:lecture13#javaScript_library_overview|JavaScript Library Overview]]
  * [[eg-259:lecture13#a_jquery_example|A jQuery Example]] (live demo)
  * [[eg-259:lecture13#dom_manipulations_in_jquery|DOM manipulations in jQuery]] (on-line demo)
  * [[eg-259:lecture13#accordian_menu|Accordian Menu]] (video)
  * [[eg-259:lecture13#jquery_ui_widgets|jQuery UI widgets]] (on-line demo)
===== Further Reading =====
[[http://jspro.org/|{{ eg-259:ejohn-side-book.gif|John Resig, Pro JavaScript Techniques}}]]
  * John Resig, //Pro JavaScript Techniques//, Apress, December 2007. URL: http://jspro.org/.
  * jQuery users have developed a number of helpful **[[http://docs.jquery.com/Tutorials|tutorials]]** to help the new jQuery user. 
  * John Born, [[http://15daysofjquery.com/|15 Days of jQuery]], tutorial blog with several useful examples. 
[[http://www.packtpub.com/jQuery/book/mid/100407j4kh3d|{{ eg-259:ljcover.jpg|Learning jQuery}}]]
  * Karl Swedberg and Jonathan Chaffer, //Learning jQuery : Better Interaction Design and Web Development with Simple JavaScript Techniques//, Pakt Publishing, July 2007. Supported by Karl Swedberg's [[http://www.learningjquery.com/|Learning jQuery]] blog. 
  * Bear Bibeault and Yehuda Katz, //jQuery in Action//, Manning, February 2008. [[http://www.manning.com/bibeault/|{{ eg-259:jquery-in-action.jpg|jQuery in Action}}]]


===== JavaScript Libraries Mentioned in this Lecture =====

  * The [[http://jquery.com/|jQuery]] Library and the [[http://ui.jquery.com/|jQuery User Interface]] widgets.
  * [[http://www.prototypejs.org/|Prototype]] and [[http://script.aculo.us/|script.aculo.us]]
  * The [[http://dojotoolkit.org/|Dojo Toolkit]]
  * The [[http://developer.yahoo.com/yui/|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 [[eg-259:lecture13#a_jquery_example|jQuery example]] 
  * Watch and make notes on the [[eg-259:lecture13#ajax_in_jquery|Ajax]] and [[eg-259:lecture13#accordian_menu|Accordian Menu]] videos.
  * Watch and make notes on the video of John Resig's [[http://video.google.co.uk/videoplay?docid=-3408517784167940424|presentation]] on the design of the jQuery library.
  * Explore the jQuery web site and the other JavaScript libraries [[eg-259:lecture13#javascript_libraries_mentioned_in_this_lecture|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


[[eg-259:lecture10|Previous Lecture]] | [[eg-259:home]] | [[eg-259:lecture11|Next Lecture]]