CSC325 2010F Web and Databases

Warning! The Web site for this class is in beta form.

Laboratory: JQuery

Summary:

Prerequisites: Familiarity with Javascript, DOM, and the ilk.

Preparation

a. Create a new directory for this lab. I'd suggest Labs/JQuery. You'll find it easier to put it below your public_html directory, but yo uneed not do so.

b. Copy lab.html and lab.css into that directroy.

c. Open a Web browser so that you can explore the pages. Load lab.html.

d. Open lab.html in the text editor of your choice. Scan the code to understand the structure of the page.

Exercises

Exercise 1: Simple Buttons

As you've noted, the lab page has one primary script: When the page loads, it attaches a click handler to all the buttons that brings up an alert box.

Rewrite the handler so that the contents of the alert box contain the name of the button, rather than identical text.

Exercise 2: Highlighting

As you no doubt have noted, there are two buttons whose name begins with Highlight. They are intended to highlight particular parts of the document by adding the highlighted class to those parts.

a. Script the Highlight Quotes button to highlight all of the quotes in the document.

b. You may have noted that there are three quotes in the document: Two in Jabberwocky and one elsewhere. Rewrite the script so that it only highlights the quotes within the poem.

c. The highlighting is clearly annoying. Script the Unhighlight button to remove the highlights.

d. Script the Highlight Alternating Lines button to highlight alternating lines in the poem.

Exercise 3: Logging Events

One interesting aspect of JQuery is that we can have multiple event handlers for the same object. You may have noted that the combination of the general script and the specific scripts means that when one clicks a button, they get both an alert and a useful action. The alert is painful. Hence, we may want to find an alternative.

a. Rewrite the general button script so that it appends the name of the button to the log (the paragraph with class log) rather than alerting that name.

b. What do you expect to happen if we have multiple paragraphs with class log?

c. Check your answer experimentally.

d. You are likely to have determined that your script adds to both logs. Modify it to write only to the first log.

Exercise 4: Showing and Hiding

Script the Show Poem and Hide Poem buttons.

Exercise 5: Highlighting Days

One task we may consider in our project is allowing the user to see a quick overview of days that meet a particular criteria. We wll simulate that task by assigning classes to particular days in a table.

a. Script the Education button so that it highlights all of the days in the calendar with class Education.

b. Script the Miscellaneous button so that it highlights all of the days in the calendar with class Miscellaneous.

c. In case you haven't done so already, make sure that both scripts unhighlight days before highlighting them.

d. You should find that the two scripts are essentially identical. Rewrite your code so that you have one handler that you can use for the Education, Miscellaneous, and Party buttons.

Exercise 6: Tagging Days

Now that we can highlight days with particular tags/categories, we should provide a way to tag days. Script the Tag button so that it takes a day from the date field and a category from the category menu and tags the day with the category.

Exercise 7: Reporting Events

Script the cells of the calendar so that when the user hovers over a cell, the cell gets highlighted and the tags for the cell appear.

Exercise 8: General Selection

As you no doubt have noted, finding the right selector is an important part of scripting with JQuery. Let's write a tool that helps us easily verify whether a selector we've chosen selects the appropriate part of the page.

a. Script the Select button. Try it with a variety of selectors.

b. Script the Unselect All button.

c. Script the Hide and Show buttons, which should hide or show the text entered in the selector field.

For Those with Extra Time

Explore

 

History

Sunday, 28 November 2010 [Samuel A. Rebelsky]

  • Designed.
  • Crated the Web page and CSS.

Monday, 29 November 2010 [Samuel A. Rebelsky]

  • Wrote lab.

 

Disclaimer: I usually create these pages on the fly, which means that I rarely proofread them and they may contain bad grammar and incorrect details. It also means that I tend to update them regularly (see the history for more details). Feel free to contact me with any suggestions for changes.

This document was generated by Siteweaver on Mon Nov 29 09:11:52 2010.
The source to the document was last modified on Mon Nov 29 09:11:50 2010.
This document may be found at http://www.cs.grinnell.edu/~rebelsky/Courses/CSC325/2010F/Labs/jquery-lab.html.
A PDF version of this document may be found at http://www.cs.grinnell.edu/~rebelsky/Courses/CSC325/2010F/Labs/jquery-lab.html

You may wish to validate this document's HTML ; Valid CSS! ; Creative Commons License

Samuel A. Rebelsky, rebelsky@grinnell.edu

Copyright © 2010 Samuel A. Rebelsky. This work is licensed under a Creative Commons Attribution-NonCommercial 2.5 License. To view a copy of this license, visit or send a letter to Creative Commons, 543 Howard Street, 5th Floor, San Francisco, California, 94105, USA.