Factors related to Toxoplasma gondii infection

The scripts and commands in this chapter are real crowd pleasers, so this should be a pret-ty good end-of-chapter wrap-up.

The following lists the commands you’ve learned so far. Read them over and start thinking about how you could use them to create something new and functional to use on your pages.

Table 4.1 contains the object-related JavaScript commands we’ve discussed. In addition, you’ve been introduced to these other JavaScript concepts:

Thealert(),confirm(), and prompt()methods Theif/elseconditional statement

These event handlers: onBlur,onChange,onClick,onDblClick,onFocus,onKeyDown, onKeyPress,onKeyUp,onLoad,onMouseDown,onMouseMove,onMouseOut,onMouseOver, onMouseUp, and onSubmit

The HTML 4.0 flag <SPAN>

Creating variable names Creating a function

Table 4.1 Object-Related JavaScript Commands Demonstrated in

document write() alinkColor,bgColor,fgColor, linkColor,lastModified,location, referrer,title,vlinkColor

history go() length

location host,hostname,href

navigator appCodeName,appName,appVersion,

userAgent

window close() defaultstatus,directories,location, menubar,resizable,self,scrollbars, status,toolbar

Here’s a script that puts some of the JavaScript commands to work:

<FORM>

<INPUT TYPE=”button” VALUE=”Jump!”

onClick=”document.jj.src=’up.gif’, window.status=’Put me down!’; return true”>

<INPUT TYPE=”button” VALUE=”Stop”

➥ onClick=”document.jj.src=’down.gif’, window.status=’Thank you!’”>?

</FORM>

<IMG SRC=”up.gif” NAME=”jj”>

We’re using Andree’s wonderful artwork again for this one. You already know how to make the jumping jack images work as an image flip. This script enables your user to decide when the person jumps by clicking form buttons, as you can see in Figure 4.9. Better yet, the little image yells at the person clicking the buttons in the status bar.

You can try the manual jumping jacks yourself by clicking Lesson Twenty-Two Script’s Effect One in your download packet, or see it online at http://www.htmlgoodies.com/JSBook/

lesson22effect.html.

JavaScript Goodies

112

Deconstructing the Script

What you’ve got here is basically something that’s fun. Stop and think about the uses of changing an image when a click occurs. You could make one of the images a solid color—

for example, the same color as the background so that when the user clicks, it appears as if the image comes up out of nowhere.

You could use one of the buttons as a link and have the image change when the user clicks. It would be great for clicks where the user stays at the same page. A link to a file to be downloaded is a good example.

The concept I want to get across here is that images and the items that control them do not have to be in the same HTML flag like the image flips.

As long as you keep the names equal in the hierarchy statements, you can separate the but-tons and the images completely, as has been done here.

Let’s break it down.

The Form Buttons

The code for the form buttons looks like this:

<FORM>

<INPUT TYPE=”button” VALUE=”Jump!”

onClick=”document.jj.src=’up.gif’, window.status=’Put me down!’; return true”>

Figure 4.9

Manual jumping jacks.

<INPUT TYPE=”button” VALUE=”Stop”

➥onClick=”document.jj.src=’down.gif’; window.status=’Thank you!’”>?

</FORM>

The only reason one <FORM>and one </FORM>flag are used to make the two buttons is because that allows the buttons to sit on the same line. If separate <FORM>and</FORM>flags were used for each button, they would have stacked on top of each other.

Changing the Image

Here’s the code that creates the image flip:

onClick=”document.jj.src=’up.gif’

You should recognize the onClickevent handler by now, but the hierarchy statement might still be a little new. Let’s take it piece by piece, biggest to smallest, left to right:

documentis the HTML document the buttons and images sit on.

jjis the name you have assigned to the image command.

srcstands for the source of the image.

After an equal sign, the image name—or URL if necessary—is written in.

The Text in the Status Bar

The text in the status bar is produced at the same time as the click, so you get that window.statuscommand right next to the onClickevent handler, separated by a comma.

It looks like this:

, window.status=’Put me down!’; return true”

Thereturn truestatement ensures the text will act only when the click occurs.

The second button is put together the same way, but is calling for the original image. Thus, it appears you are putting the jumping jacks man down.

The Image

The image code should look pretty familiar:

<IMG SRC=”up.gif” NAME=”jj”>

TheNAMEattribute is used to connect this image with the buttons that sit just above it. In the hierarchy statement in the buttons, the name jjwas used. Here you can see how jj was connected to the image.

JavaScript Goodies

114

Now, see whether you can think of a few more interesting ways to use the button to image link. There have to be a hundred good things that can come out of my giggling at the little stick figure screaming for me to stop.

Your Assignment

As always, your assignment is to look over the commands you’ve learned and create some-thing new, interesting, and functional to put on your Web page. But as always, I make a suggestion.

Can you alter the confirm()script in Lesson 21 so that when the user clicks Cancel, he is taken back one page?

That way, the user would go back to where he came from, rather than to the page that con-tains the script loading. Try it.

To see a possible answer on your own computer, click Lesson Twenty-Two Assignment in your download packet, or see it online at http://www.htmlgoodies.com/JSBook/

assignment22.html.

Forms: A Great Way to Interact with Your Users

Chapter 5

This chapter contains the following lessons and scripts:

Lesson 23: What Is Written in the Text Box?

Lesson 24: Passing Information to the Function