Emergent Web Technologies Spring 2009 Class 3
Introduction
This is another week of JavaScript. This time I'll talk about the DOM and JavaScript libraries. I'm going to focus on jQuery and demonstrate some of the basic things you can do with it. I will also show how you can accomplish some of the same tasks without any JavaScript libraries and you can decide if it's easier to use a library or to write the code by hand.
Code Samples
I'm going to cover the code that I wrote in these examples
- Manipulating the DOM with jQuery
- Manipulating the DOM with plain old JavaScript
- Basic effects with jQuery
Tools You Will Need
- Firefox
- jQuery
- Google JavaScript API
Articles
Assignment 2
Design a location list using XHTML, CSS and JavaScript + jQuery.
Think of 10 locations in Chicago that you'd like to provide some information on. You can design the layout as simple or as complex as you want as long as you follow these requirements:
- There must be a list of all of the locations on the page
- Each list item must contain the name of the location
- There also needs to be a description of each location, but it must be hidden when the page loads
- Give the user a way to hide and show the hidden information for a specific list item
- Hiding and showing the description must be animated in some way (fading, sliding, growing, etc)
- I'd like to see you use behavioral JavaScript, like we used in class, instead of picking individual items by ID
- All JavaScript should be included from a separate file
- Your XHTML must validate as XTHML 1.0 Strict
I recommend an (un)ordered list or a definition list for your locations. Refer to the examples from class for how to organize your JavaScript and how to select elements with jQuery.
Feel free to email me or schedule a time to meet me at my office if you have questions about this assignment.
Assigment Due: 2/20/2009 10PM
