Warning! The Web site for this class is in beta form.
Summary:
Prerequisites: Familiarity with Javascript, DOM, and
the ilk.
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.
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
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.
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 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.
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 selector field.
Explore
Sunday, 28 November 2010 [Samuel A. Rebelsky]
- Designed.
- Crated the Web page and CSS.
Monday, 29 November 2010 [Samuel A. Rebelsky]
;
