Click on the names below to display text in "message boxes". View
Source.
Jefferson
Lincoln
Roosevelt
Kennedy
Nixon Reagan
This example uses several JavaScript features:
- an onClick event-handler, which responds to a mouse-click on a
President's name,
- a function-call, which is part of the event-handler, and is the
instruction which activates and supplies information to...
- a function named "MM_popupMsg" (a small set of JavaScript
instructions provided by Macromedia,
Inc., the makers of Dreamweaver),
which in turn calls...
- a built-in JavaScript message function named "alert",
which displays the quotation in a message box. Whew!
Dreamweaver provides for the assignment of behaviors to certain objects
within a Web page. Links and images are the objects to which behaviors are most
often assigned. In Dreamweaver, the behavior assigned to an object is defined
as a combination of an event, to which the Browser will respond (eg.
a mouse click on the object), and the action performed by browser in
response to the occurrence of the event (eg. display a message). When the Web
page author specifies the behavior for an object, Dreamweaver automatically
inserts the necessary JavaScript event-handlers and functions (actions) into
the HTML file.
The JavaScript instructions which comprise the event-handler and action
in this example can be reviewed by clicking on the "View Source" link
above, and are shown in bold face.
- As is the case with example 1, the JavaScript instructions which perform
the actions are most often placed into the <HEAD>...</HEAD> area.
In example 1, the action is a function supplied by Dreamweaver named "MM_popupMsg"
(which, in turn, calls a built-in JavaScript message function named
"alert").
- Event-handlers are placed within the HTML tags with which they are associated.
In example 1, each link shown above has an event-handler associated with it,
and each event-handler has been placed into the respective <A> (anchor)
tag which defines the link. The event-handler identifies which event the browser
will respond to, and the action to be initiated. As is the case with example
1, the action to be initiated is usually a call to a function which
will carry out the intended action. In example 1, the event is the onClick,
and the action to be initiated is the function call "=MM_popupMsg(...)"
containing the appropriate quotation (message) to display.
Download a self-extracting zip-file which
contains the HTML portion of Example 1 with instructions for building this example
with Dreamweaver. The zip-file contains the HTML file (example1b.htm).
- Please read these instructions before clicking on the link above to initiate
the download.
- After you click on the link above, you will be asked to specify a destination
directory into which the self-extracting zip-file will be stored. You can
either type in a directory path or navigate to an existing directory. (You
could even create a new directory into which this file will be stored.)
- After the download finishes, run (execute) the self-extracting zip-file
to unpack and save example1b.htm.
- If you know where the file has been saved, click on Start, then Run.
Either specify the directory path or use "Browse" to navigate
to the file example1.exe, and open it. Click on the OK button to run it.
- If you're not sure where the self-extracting zip-file has been saved,
click on Start, then Find, then Files or Folders,
and specify example1.exe for Named:, and (C:) for
Look in:. After Find displays the found file example1.exe, double-click
on the name "example1.exe" to run it.
- As the zip-file begins to run, it will ask you to specify a destination
directory into which example1b.htm can be saved. As before, you can either
type in a directory path or navigate to an existing directory. (You could
even create a new directory into which this file will be stored.)
- When example1b.htm has been saved, open example1b.htm with Dreamweaver and
have fun making the enhancements.
Return to Having Fun with JavaScript.