~~SLIDESHOW~~ ====== JavaScript Libraries ====== **Contact Hour 14**: To be discussed on Wednesday 29th 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 =====
jQuery
----
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:
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:
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 [[http://jquery.com|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:
I give a message when you leave
Click me to hide!
I'm a normal link
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:
$.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.
----
$.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 [[http://docs.jquery.com/Tutorials:Live_Examples_of_jQuery|new window]].
===== Accordian Menu =====
* A [[http://www.vimeo.com/116991|screencast video]] by John Resig.