| 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) ”when, 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. | | Try it yourself. See examples of all of Dreamweaver's Behaviors on the companion Web site for this book: www.sawmac.com/dwmx2004/behaviors/ | | 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 ”open 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) ”a common forms element. This menu lists the different pages of your site ” 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 ”a <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 ”interactivity! FREQUENTLY ASKED QUESTION Behaviors and Added Code 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 ”they 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 ”like 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. GEM IN THE ROUGH Link Events Without Loading a New Web Page 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 ”a 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 ” 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.) |