12.1 Understanding Behaviors
Dreamweaver Behaviors are prepackaged JavaScript programs that let you add interactivity
to your Web pages with ease, even if you don't know the first thing about
JavaScript. By adding behaviors, you can make your Web pages do things like:
Make layers appear and disappear. Require visitors to fill out certain fields in a form (Chapter 11)梬hen, for example,
you want to make sure that an email address or name is entered before the form
is submitted. Open a new browser window to a specified size, with or without scroll bars, status
bar, location bar, and other Web browser "chrome." Let your visitors navigate a Web site using a pop-up menu. Give feedback to the visitor in a dialog box or in the browser's status bar.
12.1.1 Behavior Elements
To use a behavior, you bring together three elements: an action, an event, and an
HTML tag:
The action is whatever the behavior is supposed to do梠pen a new browser window
or display a message in the browser's status bar, for instance. The event is the trigger that causes the action to happen. It's usually something
your visitor does, like clicking a Submit button on a form. Finally, you apply the event and the action to an HTML tag to bring interactivity
to your Web page.
Let's say you want to let visitors access different Web pages on your site by using a
pop-up menu (also known, ironically, as a drop-down menu)梐 common forms element.
This menu lists the different pages of your site?span class="docEmphasis">About This Company, Contact
Us, See Our Products, and so on.
When someone selects one of the options from the menu, his browser opens the Web
page for that section of the site. In this case, the HTML tag is the pop-up menu itself梐
<select> tag; the action is opening another Web page in the site; and the event brings the two together so that when your visitor makes a selection from the pop-up menu,
his browser goes to the selected Web page. Voila梚nteractivity!
I hear the JavaScript that Dreamweaver produces adds
excessive lines of code, unnecessarily adding to a page's
file size. Is this a reason not to use Behaviors?
In some cases, it's true that a JavaScript programmer could
write a program that does what a Dreamweaver behavior
does using less code.
However, Dreamweaver Behaviors were created to work
in as many browsers as possible without producing errors
in older browsers. The hitch is that JavaScript doesn't work
the same in all browsers or even in all versions of browsers. Indeed, many browsers have until recently understood JavaScript so differently that programmers have resorted
to elaborate workarounds, requiring a lot of experience,
practice, and patience.
Accordingly, the engineers at Macromedia use their vast
understanding of JavaScript, HTML, and Web browsers,
to ensure that Dreamweaver Behaviors work in as many
browsers as possible. At times, this compatibility may lead
to larger files with more lines of code, but it also gives you
the assurance that your Web pages will work for the broadest
audience possible
|
12.1.2 More About Events
When people visit a Web page, they do more than just read it梩hey interact with it.
You already know that when someone clicks a link, the browser reacts by loading a
new Web page or jumping to a named anchor (Section 4.4).
But visitors can also interact with a Web page in a variety of other ways. They may
resize the browser window, move the mouse around the screen, make a selection from
a pop-up menu, click an image, type inside a form field, or click a form's Reset button.
Web browsers "listen to" and react to these triggering events with actions.
In JavaScript and Dreamweaver, the names of events always begin with the word "on,"
which essentially means "when." For example, the onLoad event refers to the moment
when an object fully loads into the browser條ike when a Web page, its images, and
other linked files have downloaded. Events also include the various ways someone
can interact with a particular HTML tag (element). For instance, when someone
moves the mouse over a link or clicks a link, the corresponding events are called
onMouseOver and onClick.
As you start to use Behaviors, you'll quickly notice that there
are an awful lot of useful events associated with links. Links
can respond to many user interactions, such as moving
the mouse over the link, moving it away from the link, or
clicking the link.
Clicking a link usually opens a different Web page. But there
are times when you may want to use the onClick event to
trigger an action without leaving the current Web page.
For instance, you might have a Web page with lots of
unusual or technical words. It would be great to program
the page so that when someone clicks an unfamiliar word,
a dialog box displaying its definition pops up on the screen
(using the Popup Message action, described in Section 12.4.3).
Unfortunately, a Web browser doesn't know when you click
on a word, since there's no event associated with regular
text. However, browsers do know when you click a link and
can respond to this action accordingly.
But in this case, you don't want to use a real link; that
would force a new page to load. You just want to use a link's onClick event.
The secret is, instead of using a real URL or path for the link,
you use a "dummy" link梐 link that goes nowhere. This
way, you can still take advantage of all of the great events
links have to offer without adding links that take you away
from the page.
There are two types of "dummy" (also called "null") links.
The first uses the pound symbol (#). Select the text or
graphic to which you want to add the behavior, and then,
in the Property inspector, instead of adding a URL in the
Link field, type in #. (You can also create a dummy link by
typing javascript:; into the link field. Be sure to include both
the colon and semicolon.) This dummy link doesn't load a
new Web page, but provides a link to which you can apply
behaviors.
The advantage of the second method is that some browsers
scroll to the top of the page when a visitor clicks a link that
uses the # symbol, which could be disconcerting if you attached
a behavior that appears far down a page.
|
NOTE
Traditionally, JavaScript programmers have capitalized the second word in a JavaScript event?span class="docEmphasis">on-
Mouseover, for instance. Trouble is, XHTML doesn't allow uppercase letters for tags or their properties. So if
you're creating XHTML pages, events should always be lowercased, like this: onmouseover. (Dreamweaver
converts such things to lowercase automatically as you create XHTML pages.)
|