Luminescence behaviour

Chapter 4: . Hydro‐sedimentological processes, light bleaching and luminescence

4.5. Rambla de la Viuda

4.5.3. Luminescence behaviour

In late 1998, the World Wide Web Consortium (http://www.w3c.org) gave its thumbs-up to a new version of HTML, HTML 4.0. With the new version came new HTML flags, and with the new HTML flags came new JavaScript event handlers. As of the writing of this second edition, June 2001, a few of the new event handlers could be run using Internet Explorer 4.0, but Netscape Navigator couldn’t run any of them. But time marches on, and soon these new event handlers will be in widespread use.

This lesson’s example script shows three of those new event handlers in action. You’ll also be introduced to a new HTML 4.0 delivery device flag, .

The Flag

First, let’s look at the template for the sample script. It looks like this:

Text on HTML Page

If you haven’t seen the HTML flag before, be prepared to become very familiar with it. As HTML 4.0 comes more and more into the mainstream, this flag will become the dar-ling of Web artists everywhere.

“What does it do,” you ask? Nothing. Not a darn thing. The flag has no properties at all to affect or manipulate text or images in any way. In fact, if you take a piece of text and surround it with the andflags, you won’t alter the text at all. The view-er wouldn’t know it is thview-ere unless he looked at the source code.

But there has to be a reason this book is devoting page space to the flag. There is and with good reason.

is a delivery device. The flag itself has no effect. But that’s the point. ’s whole purpose is to act as a platform to carry other HTML attributes and JavaScript commands to text, images, tables, or whatever else you can think of to surround with and

.

Look at the format again:

Text on HTML Page

The text that is surrounded by the flags can include any event handler you’ve seen to this point. Once inside the flag, the event handler is enacted when the user inter-acts with the text in some way.

Here’s an example before we get into the specifics of this lesson’s script. Let’s say you want to create a piece of text that acts as a hypertext link but doesn’t carry the blue coloring or the underline. You want it to look like any other text. Believe it or not, this is actually a fairly popular request. HTML Goodies receives a fair amount of mail asking how it’s done.

Think it out. The link will occur when the text is clicked. That would suggest you use the onClickevent handler. Then you must set it so that when the user clicks, the page changes.

You already know location.hrefas the code that creates a link. So let’s build it.

The format would look like this:

Click to Go

Now you have text that retains its color but carries with it the properties of a link, thanks to JavaScript. You can try the previous link by clicking Lesson Eight Script’s Effect Two in your download packet, or see it online at http://www.htmlgoodies.com/JSBook/

lesson8effect2.html. Remember that this works only in Internet Explorer 4.0 or better.

JavaScript Goodies

46 The Sample Script

Now, let’s look at this lesson’s sample script:

<SPAN onMouseDown=”window.status=’Mouse Is Down’”;

onMouseUp=”window.status=’Mouse Is Up’”;

➥onDblClick=”location.href=’thanksalot.html’”;>

Click on this text

The script’s effect is shown in Figure 2.8. See the effect on your computer by clicking Lesson Eight’s Script Effect in your download packet, or see it online at http://www.htmlgoodies.

com/JSBook/lesson8effect.html.

Figure 2.8

Multiple event handlers are applied to this window.

Make a point of looking at the example in an Internet Explorer browser, version 4.0 or higher. Those browsers support the HTML flags and JavaScript commands. By the time you’re reading this, other browsers might support the code, too, but at the time of writing, Internet Explorer 4.0 (and above) was the only available browser to display this script properly.

Deconstructing the Script

The script starts with the flag. Three new JavaScript event handlers are inside the flag.

The first event handler, onMouseDown, is enacted when the user has her pointer on the text and clicks down. Notice the event handler is set up to place text in the status bar.

Although the semicolon is not necessary, I still use it to help me quickly see where each piece of code ends. It’s my preference—you don’t have to have it in your code.

The second event handler, onMouseUp, posts text to the status bar when the user lets the mouse click back up.

The third event handler, onDblClick, is put into use when the user double-clicks the link.

In this script, the double-click sends the user to a new page named thanksalot.html. The text that will appear on the HTML document page is then written after the flag.

Finally, the flag ends the entire format.

The New Event Handlers

You’ve seen three of them in this lesson’s script, onMouseDown,onMouseUp, and onDblClick. Note the capitalization pattern of each.

Now that I’ve whet your appetite, here are a few other new event handlers and what they do:

onKeyDown—Reacts when the user presses a key onKeyUp—Reacts when the user lets the key back up

onKeyPress—Reacts when the user clicks a key up and down onMouseMove—Reacts when the user moves the mouse

Just remember that the event handlers in this lesson are not supported across the board yet, so use them sparingly, if at all. If you do use them, test them in a few different browsers on your own computer before posting the pages to the Web. If you can’t run the command, your users probably can’t either.

Your Assignment

Use the flag and a couple of event handlers on the text Green to Redso that when the mouse passes over it, the background turns green and when the mouse leaves the text, the background turns red. You’ll get bonus points if you can get the page to change to pur-ple when the user double-clicks.

HINT: Use Internet Explorer 4.0 or better to view your work.

You can see a possible answer by clicking Lesson Eight Assignment in your download packet, or see it online at http://www.htmlgoodies.com/JSBook/assignment8.html.