DMS102/CSC170D: Introduction to Web Development
Spring 2013
Assignment 9: Events
For each of the following questions, create a document that
illustrates how your scripts work. It may need elements of a certain
type, or with certain attibutes, etc. You can describe what's
happening in the document itself, which helps the TAs understand your
work.
- [4 pts]
Write a page that provides a way of making the text on the page size bigger,
smaller, or some preset default size. Could be text
(
Bigger
, Default
, Smaller
) or images or even form
controls with the appropriate handlers. Hint: In your event handler,
try setting a text property on an element that includes all the
content on the page.
- [4 pts]
Write a page that uses an image as a button (i.e., an
img
with a click event handler). Have the handler toggle
between two different images to show the button in its on
and off
states.
- [4 pts]
Write a page with a form for entering a user's name and id
number. Use event handlers (probably for
blur
or submit events, or both) to check that the name is not
empty and the id is indeed a number before submitting the form. Put up
an alert dialog if not.
- [4 pts]
Write a page that displays the current time and updates itself every
second.
Things to think about
-
Events are predefined things that can happen when a user is
viewing a page (or when it is loading).
-
Event handlers (a.k.a., listeners) are simply functions that are
attached to a DOM element and
fired
(run, invoked) when a
specific type of event occurs on the element. You don't invoke the
handler functions yourself. The browser does it for you.
-
Typically in an event handler you use DOM properties and methods
to change the document. The browser then renders the changes,
which changes the display.
Last update: Friday, 05-Apr-2013 14:39:05 EDT