a. Create a new directory for this lab. I'd suggest
You'll find it easier to put it below your
directory, but yo uneed not do so.
c. Open a Web browser so that you can explore the pages. Load
lab.html in the text editor of your choice.
Scan the code to understand the structure of the page.
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.
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.
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
b. What do you expect to happen if we have multiple paragraphs with
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.
Script the Show Poem and Hide Poem buttons.
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
b. Script the Miscellaneous button so that it highlights all of the
days in the calendar with class
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.
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.
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.
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
Sunday, 28 November 2010 [Samuel A. Rebelsky]
Monday, 29 November 2010 [Samuel A. Rebelsky]
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
A PDF version of this document may be found at
You may wish to validate this document's HTML ; ;Samuel A. Rebelsky, email@example.com