eg-259:lecture13
Differences
This shows you the differences between two versions of the page.
Both sides previous revisionPrevious revisionNext revision | Previous revisionLast revisionBoth sides next revision | ||
eg-259:lecture13 [2008/11/05 16:52] โ eechris | eg-259:lecture13 [2011/03/07 21:10] โ [DOM manipulations in jQuery] eechris | ||
---|---|---|---|
Line 1: | Line 1: | ||
+ | ~~SLIDESHOW~~ | ||
+ | |||
+ | |||
+ | |||
+ | |||
+ | |||
+ | |||
+ | |||
+ | ====== JavaScript Libraries ====== | ||
+ | |||
+ | **Lecture 11**: To be given on Tuesday 8< | ||
+ | |||
+ | **Slides**: By John Resig of Mozilla ([[http:// | ||
+ | |||
+ | **Lecturer**: | ||
+ | |||
+ | A presentation of the state-of-the-art in libraries from one of the primary developers, followed by examples in [[http:// | ||
+ | |||
+ | |||
+ | |||
+ | |||
+ | |||
+ | |||
+ | |||
+ | |||
+ | ===== JavaScript Libraries ===== | ||
+ | |||
+ | * In this lecture I shall present a slidehow that John Resig (Firefox JavaScript developer, author of [[http:// | ||
+ | * I will follow this up with a [[eg-259: | ||
+ | * In addition, there are some on-line videos to watch. | ||
+ | * See [[# | ||
+ | |||
+ | |||
+ | |||
+ | |||
+ | |||
+ | |||
+ | |||
+ | |||
+ | |||
+ | |||
+ | |||
+ | |||
+ | |||
+ | |||
+ | |||
+ | |||
+ | ===== Contents of this Lecture ===== | ||
+ | |||
+ | * [[eg-259: | ||
+ | * [[eg-259: | ||
+ | * [[eg-259: | ||
+ | * [[eg-259: | ||
+ | * [[eg-259: | ||
+ | |||
+ | ===== 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: | ||
+ | * 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 [[# | ||
+ | * The slides have been made [[http:// | ||
+ | * if you are interested, you can watch a [[http:// | ||
+ | |||
+ | ===== JavaScript Library Overview โ The Slides ===== | ||
+ | |||
+ | < | ||
+ | <div style=" | ||
+ | </ | ||
+ | |||
+ | ===== Learn jQuery with FireBug, jQuerify and SelectorGadget ===== | ||
+ | |||
+ | * A [[http:// | ||
+ | < | ||
+ | <object width=" | ||
+ | </ | ||
+ | |||
+ | ---- | ||
+ | |||
+ | 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:// | ||
+ | |||
+ | |||
+ | ===== A jQuery Example ===== | ||
+ | |||
+ | * A basic introduction to jQuery and the concepts that you need to know to use it. | ||
+ | * **Original**: | ||
+ | * **Author**: John Resig. | ||
+ | |||
+ | |||
+ | ===== Test File ===== | ||
+ | |||
+ | < | ||
+ | < | ||
+ | < | ||
+ | <script type=" | ||
+ | <script type=" | ||
+ | // Your code goes here | ||
+ | </ | ||
+ | </ | ||
+ | < | ||
+ | <a href=" | ||
+ | </ | ||
+ | </ | ||
+ | </ | ||
+ | |||
+ | ---- | ||
+ | |||
+ | Edit the '' | ||
+ | |||
+ | <code html> | ||
+ | < | ||
+ | </ | ||
+ | |||
+ | You can download your own copy of jQuery from the [[http:// | ||
+ | |||
+ | ===== 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> | ||
+ | | ||
+ | </ | ||
+ | * In jQuery the equivalent uses a //ready event//: | ||
+ | <code javascript> | ||
+ | | ||
+ | // Your code here | ||
+ | }); | ||
+ | </ | ||
+ | |||
+ | ---- | ||
+ | |||
+ | Inside of the '' | ||
+ | |||
+ | 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 '' | ||
+ | <code javascript> | ||
+ | | ||
+ | | ||
+ | }); | ||
+ | </ | ||
+ | |||
+ | ---- | ||
+ | |||
+ | Save your HTML file and reload the test page in your browser. Clicking the link on the page should make a browser' | ||
+ | |||
+ | For click and most other events, you can prevent the default behaviour -- here, following the link to [[http:// | ||
+ | <code javascript> | ||
+ | | ||
+ | | ||
+ | | ||
+ | }); | ||
+ | </ | ||
+ | |||
+ | |||
+ | |||
+ | ===== Adding a Class ===== | ||
+ | |||
+ | * Another thing that is a common task is the addition (or removal) of classes from elements, for example: | ||
+ | <code javascript> | ||
+ | | ||
+ | </ | ||
+ | * If you were to add some style information into the header of your script, like this: | ||
+ | <code css> | ||
+ | | ||
+ | </ | ||
+ | * All your A elements would now be bold without underlines. | ||
+ | * To remove the class, you'd use '' | ||
+ | |||
+ | |||
+ | ===== 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> | ||
+ | | ||
+ | | ||
+ | | ||
+ | }); | ||
+ | </ | ||
+ | |||
+ | ---- | ||
+ | |||
+ | 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, | ||
+ | * In a nutshell: Every method within jQuery returns the query object itself, allowing you to ' | ||
+ | <code javascript> | ||
+ | | ||
+ | </ | ||
+ | |||
+ | ---- | ||
+ | |||
+ | Each of those individual methods ('' | ||
+ | |||
+ | 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> | ||
+ | | ||
+ | | ||
+ | | ||
+ | | ||
+ | }) | ||
+ | | ||
+ | | ||
+ | | ||
+ | | ||
+ | | ||
+ | }) | ||
+ | | ||
+ | </ | ||
+ | Which would work against the following HTML: | ||
+ | <code html> | ||
+ | <a href=" | ||
+ | <a href=" | ||
+ | <a href=" | ||
+ | </ | ||
+ | |||
+ | Methods that modify the jQuery selection, and that can be undone with '' | ||
+ | |||
+ | add(), | ||
+ | children(), | ||
+ | eq(), | ||
+ | filter(), | ||
+ | find(), | ||
+ | gt(), | ||
+ | lt(), | ||
+ | next(), | ||
+ | not(), | ||
+ | parent(), | ||
+ | parents() and | ||
+ | siblings(). | ||
+ | |||
+ | Please check the [[http:// | ||
+ | |||
+ | |||
+ | ===== Callbacks, Functions, and ' | ||
+ | |||
+ | * 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 " | ||
+ | * 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> | ||
+ | | ||
+ | </ | ||
+ | * Functions in Javascript are 'First class citizens' | ||
+ | |||
+ | ---- | ||
+ | |||
+ | < | ||
+ | |||
+ | |||
+ | |||
+ | ===== 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> | ||
+ | | ||
+ | </ | ||
+ | |||
+ | ---- | ||
+ | |||
+ | This will **not** work because it calls '' | ||
+ | |||
+ | |||
+ | |||
+ | ===== Right ===== | ||
+ | |||
+ | * The Right Way | ||
+ | <code javascript> | ||
+ | | ||
+ | | ||
+ | }); | ||
+ | </ | ||
+ | |||
+ | ---- | ||
+ | |||
+ | |||
+ | **Note** the use of '' | ||
+ | |||
+ | |||
+ | |||
+ | |||
+ | |||
+ | |||
+ | |||
+ | |||
+ | ===== DOM manipulations in jQuery ===== | ||
+ | |||
+ | * An interactive demonstration of the use of jQuery for the manipulation of the DOM. | ||
+ | * **Original**: | ||
+ | * **Author**: Cody Lindley | ||
+ | * Open in [[http:// | ||
+ | |||
+ | |||
+ | |||
+ | |||
+ | |||
+ | |||
+ | ===== Accordian Menu ===== | ||
+ | |||
+ | * A [[http:// | ||
+ | < | ||
+ | <object type=" | ||
+ | </ | ||
+ | |||
+ | |||
+ | |||
+ | ===== 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> | ||
+ | * Some libraries, such as the [[http:// | ||
+ | * jQuery has a small but useful jQuery UI widget set. | ||
+ | * These can be [[http:// | ||
+ | |||
+ | ===== 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: | ||
+ | * [[eg-259: | ||
+ | * [[eg-259: | ||
+ | * [[eg-259: | ||
+ | * [[eg-259: | ||
+ | ===== Further Reading ===== | ||
+ | [[http:// | ||
+ | * John Resig, //Pro JavaScript Techniques//, | ||
+ | * jQuery users have developed a number of helpful **[[http:// | ||
+ | * John Born, [[http:// | ||
+ | [[http:// | ||
+ | * Karl Swedberg and Jonathan Chaffer, //Learning jQuery : Better Interaction Design and Web Development with Simple JavaScript Techniques//, | ||
+ | * Bear Bibeault and Yehuda Katz, //jQuery in Action//, Manning, February 2008. [[http:// | ||
+ | |||
+ | |||
+ | ===== JavaScript Libraries Mentioned in this Lecture ===== | ||
+ | |||
+ | * The [[http:// | ||
+ | * [[http:// | ||
+ | * The [[http:// | ||
+ | * The [[http:// | ||
+ | |||
+ | |||
+ | ===== 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: | ||
+ | * Watch and make notes on the [[eg-259: | ||
+ | * Watch and make notes on the video of John Resig' | ||
+ | * Explore the jQuery web site and the other JavaScript libraries [[eg-259: | ||
+ | |||
+ | |||
+ | ===== 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: | ||
eg-259/lecture13.txt ยท Last modified: 2012/02/17 16:02 by eechris