Review

In the last lesson, you learned about where JavaScript goes and how it looks. Now it’s time to start learning the language. In this lesson, you’ll learn how JavaScript stores information, how it makes decisions based on that information, and how to change images based on user interaction.

Ready? It’s time to learn the fundamentals of computer programming. First stop, variables.

Variables

If you’ve taken algebra, you’ve seen variables. If you haven’t taken algebra, don’t worry about it. Variables are simply the way JavaScript stores information. For example, if you write “x=2,” “x” is a variable that holds the value “2.” If you then say “y=x+3,” “y” will hold the value “5.”

Here’s an example of JavaScript that uses variables.

View source on the example, and we’ll go through it step by step. Here’s what you see:

 <script language="JavaScript">

 <!-- hide me

These first two lines you’ve seen before. They’re the typical preamble to any JavaScript program.

 // load up some variables



var secs_per_min = 60;

var mins_per_hour = 60;

var hours_per_day = 24;

var days_per_year = 365;

The first line here is a comment. This comment states the obvious, but it’s nice to block off chunks of variable declarations.

The next bunch of lines are variable declarations. There are a few things to notice about these lines:

The first time you use a variable, you should declare it with the word “var.” Although declaring variables with var is not strictly necessary, it’s usually a good idea. When we talk about functions two lessons from now, you’ll see why. Variables must start with either a letter or the underscore character. After the first character, variables can have numbers. So monkey_23 is a fine variable name. Variable names are case-sensitive. This means that JavaScript will treat Loop and loop as two different variables. Generally, it’s a good idea to pick a naming convention and stick to it. I like having all my variables lowercase, with underscores separating words, like secs_per_min in the example above. Other people prefer using internal capitalization, like secsPerMin. Variables should describe what they are. Variables such as x, y, or hack_hack_hack aren’t very useful to a person who’s trying to figure out your script. Don’t make your variables so long that they take forever to type, but make them long enough to be descriptive. You can give a variable a value when you declare it, or you can wait until later. In the example, each variable was given a value the first time it was used. You don’t have to do this, and we’ll see examples later on where it’s nice to declare a variable even though we don’t know the value right away. Statements end with a semicolon. Statements are the sentences of JavaScript and semicolons are the end punctuation marks. Spaces and line breaks are ignored by the JavaScript interpreter, so the layout of the script serves only to make it more legible for people. This entire example could have been written in one really long line if you take out the comments. But that would be impossible to read.To be complete, I should mention that in some cases a semicolon isn’t necessary and you might see some scripts in which people leave them out. However, it’s always a good idea to put the semicolon in there. Not only does it make your program more legible, but it also makes it less likely that adding a line later will mess up your program. Always stick a semicolon at the end of a statement — it is the Webmonkey way.

// do some calculations

var secs_per_day = secs_per_min * mins_per_hour * hours_per_day;

var secs_per_year = secs_per_day * days_per_year;

Here we see some basic math. After JavaScript executes these statements, the variable secs_per_year will contain whatever you get when you multiply 60, 60, 24, and 365. From this point on, whenever JavaScript sees the variable secs_per_year, it will substitute in that huge number.

 // end hiding -->

 </script>

Nothing new here, just the normal way to end a piece of JavaScript.

That’s all the JavaScript that’s in the header of this example. After JavaScript has executed all this code, the above variables will be declared and given values. That’s very nice, but we haven’t really done anything with the variables yet. That’s what happens in the body of the example.

The Body of the First Variable Example

Now that we’ve defined the variables, let’s do something with them. We start JavaScript in the body of a page just like we do in the head:

 <script language="JavaScript">

 <!-- hide me

And here’s how we can use JavaScript to write variables and HTML to a web page:

// here's how to use JavaScript to write out HTML

document.writeln("<b>The monkey dances ");

document.writeln(secs_per_year);

document.writeln(" seconds per year.</b><p>");

Here are the interesting points about these three lines:

document.writeln() (as in “write line”) writes whatever’s between the parentheses to a web page. There’s a surprising amount of detail involved in what document.writeln() really means. For now, just remember that when you’re between <script> and </script> tags, you need to use document.writeln("blah!") to write HTML to your web page. Characters inside quotes are printed; characters not inside quotes are considered variables. Notice that in the first and third lines, quotes surround the thing we want printed, while there are no quotes around secs_per_year. Because there are no quotes around secs_per_year, JavaScript thinks it’s a variable and swaps in the value of the variable. Luckily, back in the header we defined secs_per_year to be some huge number, so that’s what gets printed. If we hadn’t defined secs_per_year, JavaScript would probably report an error. Anything between quotes is called a string and won’t get interpreted by JavaScript. This example uses double quotes (“), but it could also use single quotes (‘). The two are interchangeable. If the second line were document.writeln("secs_per_year"), the JavaScript would write secs_per_year to the page, instead of 31,536,000. This distinction between variables and strings is very important, so make sure you understand what I’m saying before you go on. You can write HTML with the document.writeln() command. Note the <b> and </b> tags in the first and third lines.

That’s the rundown on this example. One question that often comes up is, “What JavaScript goes in the head of a page and what goes in the body?”

Usually it doesn’t matter, but it’s a good idea to put most of your JavaScript in the head of a page. This is because the head gets read before the body, so any variables that appear in the body (like secs_per_min) will already have been declared in the head by the time they’re needed. If for some reason secs_per_min were defined after JavaScript tried to do the document.writeln(secs_per_min) command, you’d get a JavaScript error.

OK, we’re almost ready to do an exercise using variables, but first, a short note about strings.

The Magic of Strings

As mentioned on the previous page, any group of characters between quotes is called a string. Either single or double quotes will do. Just as variables can hold numbers, variables can hold strings. So it’s legal to say:

var nice_monkey = "The monkey smiles at you and recites Shakespeare.";

var bad_monkey = "The monkey scowls at you and burps.";

Sticking these statements into a JavaScript declares the variables nice_monkey and bad_monkey and makes them equivalent to these strings. Once you’ve done this, you can write …

document.writeln(nice_monkey);

… whenever you want JavaScript to write out the long message about what nice monkeys do. Here’s an example of what you can do with strings. View source and we’ll go through the new and interesting parts of this script.

The script starts with something new:

var monkey = prompt("What's the monkey's name?", "The monkey");

Here we’re calling the prompt method to get input from a user. When the prompt method is called, it brings up a dialog box that asks for a user’s input. When the user hits OK, the prompt returns whatever is in the input box. In the above line, this returned value gets put into the monkey variable.

Notice that the prompt method takes two parameters, both of which are strings. The first parameter is what gets printed above the input field in the dialog box. In this case it’s, “What’s the monkey’s name?” The second parameter, “The monkey” in this example, is set as the default value of the input box. If you don’t want a default value, just put two quote marks as the second parameter. Like this:

 var monkey = prompt("What's the monkey's name?", "");

The next lines are a few straightforward variable assignments, like we’ve seen before. After these lines we see:

var techy_monkey = monkey + demanding + tech;

This line introduces a string operator:the plus sign. When the plus sign appears between two strings, or two variables that contain strings as above, it means “concatenate.” So the above line creates a new variable called techy_monkey that contains a string made of whatever the three variables contain. In this case, it’s “The monkey” + “demands, no, insists upon receiving” + “a computer that won't crash, and a homemade browser!” In other words …

var techy_monkey = monkey + demanding + tech;

… is the same as saying …

var techy_monkey = "The monkey demands, no, insists upon receiving a computer that won't crash, and a homemade browser!";

The next bunch of lines show some more tricks you can do with strings. All the tricks work in similar ways, so we’ll just look at three of them:

var italic_hippy = hippy_monkey.italics();</code>

var shouting_hippy= hippy_monkey.toUpperCase();

var red_bold_tech = bold_tech.fontcolor('red');

The first of these lines says, “Take the string that’s contained in the variable hippy_monkey and put it in italics tags.” It’s actually the same thing as saying var italic_hippy = "" + hippy_monkey + ""; But it looks much nicer. In either case, when you later write document.writeln(italic_hippy) in your JavaScript, you get the string in hippy_monkey printed in italics.

The next line, which declares shouting_hippy, shows a string trick that you can’t do with HTML. It takes whatever’s in hippy_monkey and makes all the letters uppercase.

The third line shows an example of changing a property of a string. All strings have color, and you can change the color of a string using the string.fontcolor('new color'); command. You could also do this:

var red_bold_tech = "<font color='red'>" + bold_tech + "</code>";

But that’s not as easy to read as this:

var red_bold_tech = bold_tech.fontcolor('red');

You’ve seen everything else in this example except this line:

document.writeln(bold_tech + "<br>");

This is just a normal document.writeln(), except instead of just printing a string, we’re concatenating two strings and then printing the result. This could have been done in two lines, like this:

var broken_bold = bold_tech + "<br>";

document.writeln(broken_bold);

But that would involve creating another variable, and writing another line, when it’s really unnecessary.

Now that you’ve learned all about variables and strings, it’s time to try an exercise.

Variable Exercise

Try writing out this mad-lib without using any HTML between the <body> and </body> tags.

Once you’ve gotten this to work, it’s time to learn about if-then clauses.

if-then Branching

What “if-then” statements do is allow your program to behave very differently depending on what a user inputs. For example, you could write a script that would act one way toward you and a different way toward everyone else. Here’s the basic form of an if-then statement:

if (some condition is true)

 {

     do something;

     do something;

     do something;

 }

The important parts of this structure are:

• It starts with the word “if” (if must be lowercase).
• There is a condition in parentheses that is either true or false.
• There is a set of statements that should be executed if the condition is true. These statements go between curly brackets.

Remember, spacing is only there to make the script more legible. You can put the entire if-then statement on one line if you want, but that would be hard to read.

Here’s an example of an if-then statement in action.

Example of a Simple if-then Statement

If you typed yes in the prompt box, you should have received a warm greeting before seeing the rest of the page. If you typed something else, you shouldn’t have received any greeting at all.

Here’s the the heart of the script:

var monkey_love = prompt("Do you love the monkey?","Type yes or no");

if (monkey_love == "yes")

{

  alert("Welcome! I'm so glad you came! Please, read on!");

}

You’ve seen the first line before. It just brings up a prompt box and loads the user’s response into the variable monkey_love. The second line, however, has something new in it:a condition. This condition says that if the variable monkey_love equals the value “yes,” the script should run the statement between the curly brackets. If monkey_love equals something else, the statement will not be run.

Note that the condition is two equal signs. This is one of those things that everyone messes up initially. If you put one equal sign instead of two, you’re telling JavaScript that monkey_love should equal “yes” instead of testing whether or not it actually does equal “yes.” Luckily, most browsers look for this sort of mistake and will warn you about it when you try to run your script. However, it’s best not to make the mistake in the first place.

Other typical conditions are:

 (variable_1 > variable_2)  is true if variable_1 is greater than variable_2

 (variable_1 < variable_2)  is true if variable_1 is less than variable_2

 (variable_2 <= variable_2)  is true if variable_1 is less than or equal to variable_2

 (variable_1 != variable_2)  is true if variable_1 does '''not''' equal variable_2

Two ways to make your conditions fancier:

If you want two things to be true before running the statements in the curly brackets, you can do this:

 if ((age < 21) && (drinking_alcohol == "yes"))

 {

   document.writeln("Hey! You're too young to drink here!");

 }

Notice the two ampersands. That’s how you say “and” in JavaScript. Notice also that the whole clause, including the two sub-parts and the ampersands must be enclosed in parentheses.

If you want either one of two things to be true before running the statements in the curly brackets, do this:

 if ((variable_1 == "bananas") || (variable_1 == "JavaScript"))

 {

   document.writeln("The monkey is happy because it has " +  variable_1);

 }

On to the if-then exercise! Click here.

Once you’ve gotten this to work, it’s time to learn about link events.

Link Events

Whenever a user clicks on a link, or moves her cursor over one, JavaScript is sent a link event. One link event is called onClick, and it gets sent whenever someone clicks on a link. Another link event is called onMouseOver. This one gets sent when someone moves the cursor over the link.

You can use these events to affect what the user sees on a page. Here’s an example of how to use link events. Try it out, view source, and we’ll go over it line by line.

The first interesting thing is that there are no <script> tags. That’s because anything that appears in the quotes of an onClick or an onMouseOver is automatically interpreted as JavaScript. In fact, because semicolons mark the end of statements allowing you to write entire JavaScripts in one line, you can fit an entire JavaScript program between the quotes of an onClick. It’d be ugly, but you could do it.

Here’s the first line of interest:

<a href="#" onClick="alert('Ooo, do it again!');">Click on me!</a>

This is just like a normal anchor tag, but it has the magic onClick="" element, which says, “When someone clicks on this link, run the little bit of JavaScript between my quotes.” Notice, there’s even a terminating semicolon at the end of the alert.

Also note that there’s a # sign between the quotes in the href="#". This makes it so the browser doesn’t try to load another web page when you click on the link. If you put http://www.webmonkey.com/ in the href instead of the #, the browser would run the JavaScript in the onClick and the load up this here Webmonkey site.

Unfortunately, sometimes using the # sign causes the browser to jump to the top of the page when the link is clicked. To stop that from happening, change the link to this:

<a href="#"onClick="alert('Ooo, do it again!');return false;">Click on me!</a>

Notice the return false; following the alert inside the onClick. This tells JavaScript to stop the browser from even looking at what’s in the href. Because some very old browsers don’t understand the return false, people usually do both things:Put the # inside the href and put return false inside the onClick. That makes sure all browsers do the right thing.

Here’s the next line:

<a href="#" onMouseOver="alert('Hee hee!');">Mouse over me!</a>

This is just like the first line, but it uses an onMouseOver instead of an onClick.

Now that we’ve learned about link events, we can go into the wonderful land of image swaps.

Image Swapping

One of the most commonly used features of JavaScript is the ability to change images on a mouseover.

Here’s a quick and dirty example of a [# basic image swap].

Let’s go through the example step by step. The first line of interest is:

<img src="http://www.wired.com/images/archiveutton_r.gif" name="the_image">

This is just like a standard <img src= > tag except this one has been given a name:the_image. This name could be anything:my_image, a_box, whatever – but it can’t have any spaces in it.

The next line of interest is:

 <a href="#" onMouseOver="document.the_image.src='button_d.gif';">change</a>

This is where the image swap happens. It’s just like the onMouseOver

you saw before. The active piece of JavaScript, which appears in the quotes of the onMouseOver is this:

document.the_image.src='button_d.gif';

This statement says, “find the image called ‘the_image‘ and change its src to button_d.gif.” Note that there are double quotes around the whole statement, and ‘button_d.gif’ takes single quotes. Although quotes are interchangable, if you have one set of quotes inside another set of quotes, the sets have to be of different kinds. So you could either do ” ‘something’ ” or ‘ “something” ‘ but not ” ‘something” ‘ or ” “something” “. Got it?

Just as there was a lot of detail in what makes document.writeln() work, I’m not telling you exactly how this image swap is working. You’ll learn the details of both when we look at object-oriented programming and the Document Object Model in the next lesson.

An important caveat about image swapping is that the image you’re switching to should be the same size as the original. If it’s not, it’ll get smashed or stretched to fit the original’s size.

For now, you’re ready for today’s homework. Click here.

Lesson 2 Review

To review, here are the things we covered today. If you feel like you didn’t learn one of these things, go back and hunt for it.

Variables

Variables can hold numbers and strings. There are a few restrictions and rules of thumb to keep in mind when naming variables.

Statements

Statments end in a semicolon.

Strings

Strings are sequences of characters in quotation marks. You can use either type of quote, single or double. There are lots of neat things you can do to manipulate the way a string will print out. And you can use + to concatenate two strings.

document.writeln()

Use document.writeln() to write text and HTML to a web page.

prompt

You can use prompt to get input from users.

if-then-else

You use if-then-else clauses to make your JavaScript behave differently depending on user actions.

Link events

onClick and onMouseOver inside an href can be used to run bits of JavaScript that react to user actions.

image swaps

By naming images, we can use JavaScript to change what image is displayed.

If you made it through all that stuff, Congratulations! It was a lot to learn. In Lesson 3 we’ll be burrowing into the heart of JavaScript:the Document Object Model. We’ll also learn about how to open and manipulate windows and frames, and we’ll begin building our new browser.

In earlier lessons, you’ve learned:

• How to add JavaScript to your HTML pages
• How to use dialog boxes and variables to store and utilize user input
• How to write HTML to a Web page using JavaScript
• How to let JavaScript make decisions using if-then statements
• How to make your Web pages react to users’ actions using link events
• How to do a basic image swap

So far I’ve explained how to do many things, but I haven’t described why they work. In the last lesson, for instance, I showed you that window.document.monkey_image.src = "happy_monkey.gif" will swap happy_monkey.gif into an image named monkey_image . But what is that window.document stuff? And where does the .src come from? Similarly, you’ve seen document.writeln("monkey") . But why is it document.writeln and not just writeln ?

The answer to the above questions can be found in the JavaScript Document Object Model. The DOM is the way JavaScript describes Web pages, and it lies at the heart of all JavaScript programming. This lesson will teach you about the DOM, and the next lesson will teach you the rest of the basics of computer programming. By the end of the next two lessons, you will know all of the major ideas and syntax of JavaScript. All that will be left to learn are details, tricks, and how to avoid snafus.

To start us off along the road to the DOM, let’s learn about how to use JavaScript to open and manipulate new browser windows.

Contents Introduction to Window Manipulation Window Manipulation in JavaScript Examples of Opening Windows with JavaScript Windows Features The JavaScript Document Object Model Communicating between Windows More about the JavaScript Document Object Model Getting Framed

Introduction to Window Manipulation

Before learning how to open a window in JavaScript, you should know how to open one using HTML. In most recent browsers, you can open a new window using an href statement. Example:

The HTML used to do this is:

clicking <a href="yer_new_window.html" target="yer_new_window">here</a> will

open another window.

The important thing to know about windows opened by targeted links is that the window above now has the name “yer_new_window” associated with it. If you have another href that uses “yer_new_window” as the target, and you haven’t closed the window yet, whatever URL you put in that link will open in the original window.

For the purposes of this lesson, I’m going to call the target name, in this case yer_new_window , the name of the window.

Now that we’ve had this brief refresher on href targets, it’s time to learn about opening windows in JavaScript.

Window Manipulation in JavaScript

While opening windows in HTML is very handy, it’s also limiting; the browser controls how the window looks. You have no control over the size of the window or what the window looks like. Happily, JavaScript gives you this control.

Here’s how:

window.open("URL","name","features");

This statement opens a window with the URL that you list as the first parameter in the method call. Above it’s called ” URL,” but in an actual call you’d write ” http://www.mysite.com/webmonkey/” or something similar.

The second parameter of the method call is the window’s name. This is just like the name we saw in the last page. If you open a window and there’s already a window open with the same name, the URL in your open statement will be sent to that open window.

The third parameter, features, is a list of the different components a window can have. It’s an optional parameter, so let’s do some examples with the first two parameters before checking out features.

Here are some examples of using JavaScript to open windows.

Examples of Opening Windows with JavaScript

Try clicking on these three links and see what happens. Don’t close any of the windows until you’ve clicked on all three links.

Let’s take a look at how this is done. Here’s the first line:

<a href="#" onClick="window.open('javascript_window_1.html','javascript_1');

return false;">Here's a window named javascript_1</a>.

When you click on this link, a new window called javascript_1 gets opened and the HTML page javascript_window_1.html gets put into the window. Because the features parameter is optional, you can just leave it out. This will give you the default window you would have gotten if you’d used a targeted href , as in the previous page.

Notice that I put the call to open the window in an onClick. You don’t have to put window.open() calls inside an onClick, it was just convenient to do so in this example. You’ll see examples of window.open() inside <script> tags soon.

The second link is almost exactly like the first link. It just opens a window with a different name and loads in a different HTML page:

<a href="#" onClick="window.open('javascript_window_2.html','javascript_2');

return false;">Here's a window named javascript_2</a>.

The third link sticks a new HTML page into the first window. This works because the third link opens a window with the same name as the first window:javascript_1.

<a href="#" onClick="window.open('javascript_window_3.html','javascript_1');

return false;">Here's another HTML page going into javascript_1</a>.

Now the fun begins. We can play with the features parameter to make our windows look very different.

OK already, let’s play with windows features!

Windows Features

The third parameter of the window.open() method is a list of features that you’d like your window to have. As you’ve seen, if you don’t include this parameter at all, the window will contain all the features of a default browser window.

However, if you specify any features in the third parameter, just those features will appear. The way to specify that you’d like your window to have certain features is to list them as a comma-separated list.

For example, if you write …

window.open ("some_url","window_name","location,menubar");

… you’ll get a window with just the location box (the place in your browser where you type in a URL) and a menu bar (File, Edit, etc.). Note: that these code samples may wrap to fit here in your browser, but they should be all on one line, no spaces, when you actually use them.

Here’s another example:

 window.open("some_url","window_name", "location,height=100,width=100");

This will open a window that is 100 pixels high and 100 pixels wide and has no features other than a location field. Notice again that there are no spaces in the string.

If you’d like to open a window that has almost all the features, you can specify which features you don’t want by setting those features equal to no. For example:

window.open("some_url","window_name", "location=no,status=no");

This will open a window that has all the features except the location field and the status bar. Here’s a list of the features that you can include in the feature string:

menubar

This is the row of functions that appears on most software applications. Normally it includes File, Edit, and a few other items.

status

This is the message bar at the bottom of your window. When you move your mouse over an HTML link, the URL appears in the status bar. You may have seen pages that use JavaScript to turn this status bar into a scrolling marquee. I’m not going to show you how to do this. If you want to know, you have to figure it out yourself. “Down with marquees,” the monkey cried!

scrollbars

This allows scrollbars to appear when necessary.

resizable

If resizable is listed, the window can be resized. Be careful of the spelling. I always get it wrong.

width

The width of the window in pixels.

height

The height of the window in pixels.

toolbar

The browser toolbar, which contains the Back and Forward buttons, the Stop button, and the Home button, among others.

location

The text area of a browser into which you can type URLs.

directories

The directories that Netscape browsers have called “What’s new,” “What’s cool,” and so on.

Here are some examples of different types of windows.

Once you’ve checked out the examples, and maybe tried bringing up some windows of your own, it’s time to learn how to mess with the contents of the windows.

Be aware, however, that some browsers (like IE 7), have to be configured to allow Javascript to open new windows without the location, status, etc. So unless the visitors to your pages have customized their security settings to allow this kind of manipulation, IE 7 will continue to show the location, status and menu bars by default, no matter how much you try. I guess the good ol’ boys at Microsoft think it’s a security risk for us to not be able to see these… Booo! Anyway, on with the leccion.

The JavaScript Document Object Model

Now that you know how to open the window of your choice, it’s time to learn how to manipulate things inside that window. To really get control over the things that appear in a window, you have to learn about the JavaScript Document Object Model (DOM). And before you learn about the DOM, it helps to learn a little bit about object-oriented programming.

A Brief Overview

Object-oriented programming, especially the JavaScript version of it, isn’t so hard to understand. The main idea is that information is organized in terms of objects. JavaScript is wonderful because it comes with a built-in library of objects. For example, a window is an object. Whenever I refer to one of the default JavaScript library objects, I will capitalize it (Window). Specific instances (a particular window) will be lowercase.

Object Properties

Objects have properties that describe them. Some of the properties of a Window object are its name, the words in its status bar, the URL of the document inside the window, and the window’s document itself, which includes the words, images, and hyperlinks inside the window.

In JavaScript, you are given a default Window object called, of all things, window. One of the properties of a window is the words in its status bar. Here’s how you can find out what’s in the status bar of the default Window:

var the_status = window.status;

This says:”Find the status property of the Window object called window , and load it into the variable the_status .” In addition to reading what those words are, you can also change them. The way to set an object’s property is this:

window.status = "I'm monkeying around!";

Communicating between Windows

Although it doesn’t make sense to blur or focus the window you’re on, you might well want to move another window to the fore. In order to communicate with a window using JavaScript, you need a reference to that window. Look at this example and then come back here for an explanation.

This example may be too wonky with today’s tabbed browsers

There are a few key lines in this JavaScript. First, we open a new window and get a reference to it:

var new_window = window.open("hello.html","html_name","width=200,height=200");

This opens a little window and assigns the variable <code>new_window</code> to refer to it. Just as variables can contain numbers and strings, variables can also contain references to objects – in this example, a Window object. Now the variable <code>new_window</code> will behave just like the default Window object. You can call methods on <code>new_window</code> just like you could on <code>window</code> .

The next line shows you an example of calling a method on new_window:

new_window.blur();

Not too tricky, it’s just like window.blur() from the last page. These two lines appear in the head of the HTML page. View Source on the page if you want to see the whole thing. As I’ve mentioned, I tend to put my JavaScript code in the head of HTML pages. That way I can find it when I’m looking for it. These lines of JavaScript could just as easily have gone in the body.

Now, moving to the body we see two links that will move the new window forward or backward:

<a href="#" onMouseOver="new_window.focus();">Bring it forward</a>

<a href="#" onMouseOver="new_window.blur();">Put it backward</a>

Get it? Let’s see … it’s time for an exercise. Try writing this extension (see above note) to the previous window-reference example. This exercise is pretty tricky; to get it working, you’ll have to figure some things out. But give it a try before you View Source to check the answer.

After you’re done, come back here and we’ll go on to discuss more about the JavaScript Object Model.

More about the JavaScript Document Object Model

So far we’ve learned that JavaScript includes default objects, like Windows. We’ve learned that objects have properties that describe them, and methods that describe what the objects know how to do. Now it’s time to delve a little deeper.

One neat thing about objects is that the properties of an object can be objects too. For example, windows have a property called document that refers to the actual HTML document in the window. This document property is itself an object that has properties and methods of its own. We saw an example of this when we talked about image swapping. Harkening back to the last lesson, we learned that you can do an image swap like this:

<a href="#" onMouseOver="window.document.the_image.src='button_d.gif';">change</a>

That long string, window.document.the_image.src='button_d.gif', translates into:”Find the document property of the window, find the_image property of the document, find the src property of the_image, and set it to button_d.gif.” Quite a mouthful, eh? It all works because windows are objects, documents inside windows are objects, and images inside the documents are objects too.

It may seem like a lot of detail to keep track of, but actually it’s not too bad. The JavaScript Document Object Model describes a small hierarchy of objects. Here it is:

The top box of the diagram represents your browser window. Following the line from that box down, you’ll see it connects to seven more boxes. These are the properties of the browser window. The sixth box there, “document,” represents the contents of your window. If you follow the little line leading out of the document box, you’ll see it connects to six more boxes. These are the properties of the document object. Notice that the fourth box is “images.” This is the list of all the images in your Web page. Because the images are properties of the “document,” which is a property of the “window,” the precise way to describe an image to JavaScript is to tell it to look at the “window,” find the window’s “document,” and in the document, look for the “image.”

We’re going to be visiting the various properties of the document object in lesson 5. However, before you can extract the full potential of that object, you should know how to mess with the DOM in other windows.

As we’ve seen, an image swap can be performed with a line like this:

window.document.the_image.src="button_d.gif";

This works by telling JavaScript to look at a window, find its document, and then find the thing called the_image inside that document. Once JavaScript locates the image, it can change its src to whatever GIF we want.

Sometimes it’s useful to have a link in one window change an image in another window. Imagine a slide show in which one window displays the images and another little window contains thumbnails of each slide show image. Clicking on a thumbnail in the little window changes the image in the big window.

This example may be too wonky with today’s tabbed browsers

To give you an idea of what I’m talking about, here’s an example of a remote slide show control:

There are two windows in this example:the remote control window, and the slide show display window. Clicking on the link above opens the remote control. The remote control then automatically opens the display window by using this line between the <head> tags:

var display_window = <br>window.open("slide_show_main.html","display_window");

This opens a new window and assigns the variable display_window to that window. So now whenever we want to use JavaScript to refer to that window, we use the variable display_window.

When the display window opens, there’s a chance it’ll open right on top of the remote. To ensure that the remote stays visible, we add this line, which executes after the display window opens:

window.focus();

Now that we’ve opened both the display window and the remote, we have to figure out how to make the links in the remote window change the image in the display window. If you view source on the display window, you’ll see that it’s very simple:It contains just one image, which I’ve named

main_image:

<img src="sky.gif" name="main_image" height="400" width="400">

To have a link in the remote window change the image in the display window, we have to tell JavaScript to look at the display window (which we do with the display_window variable we assigned earlier), find its document, and locate the image called main_image inside that document. In JavaScriptese:

display_window.document.main_image

And here’s how you change the src of that image from the remote window:

display_window.document.main_image.src = 'sun.gif';

If you view source on the remote, you’ll see that I’ve stuck the above line into a link, like so:

<a href="#" onClick=<br>

"display_window.document.main_image.src='sky.gif';return false;"><img src="sky.gif"></a>

Now that I’ve given you a taste of what you can do with the properties of the document object, let’s talk about a property of the window object:frames.

Getting Framed

All the remaining properties of windows that we’ll see in this lesson relate to frames and how to use them with JavaScript. If you don’t know how to use frames, check out Jillo’s “Frames Are a Picnic.” Read Jillo’s wisdom, practice building a few framesets, and then come back. After I show you how to play with frames in JavaScript, I’ll give you your homework for the day.

In JavaScript, frames are treated just like windows. Just as you can tweak the contents of one window using JavaScript inside a different window, you can change the contents of one frame using JavaScript in another frame.

Here’s a straightforward example of using frames with JavaScript. I’ll break it down line by line.

The first thing we need to look at is the frameset. Here it is:

    <frameset rows="25%,*">

    <frame src="frames_example_controls.html" name="control_frame">



    <frame src="blank.html" name="target_frame">

    </frameset>

 

This is just like any ordinary frameset. The important thing to note and remember is that the frames in the frameset are named. The first frame, called control_frame, holds the HTML page that contains the JavaScript. The second frame, as you can see from the src=”blank.html”, contains nothing.

The second thing to look at is the contents of the control_frame. To keep things simple, it only has one interesting line:

    <a href="#" onClick="top.target_frame.document.writeln('Monkey do!<br>');">Monkey see</a>

This line tries to write the words “Monkey do!
” into the bottom frame. But before JavaScript can write to the frame, it has to know what frame we’re talking about. The expression top.target_frame, which you’ll see in the onClick, tells JavaScript to look at the top-most window, which is the browser itself, and find the thing called target_frame inside that window. Because we called the bottom frame “target_frame” when defining the frameset, JavaScript will know that target_frame means the bottom frame.

Once we’ve told JavaScript which frame we’re talking about, we can treat the frame just like a window. To write the word “howdy” to a window called greeting_window, we’d do this:

    greeting_window.document.writeln("howdy");

This tells JavaScript to find the window named greeting_window, then find the document of that window, and then write the word “howdy” into that document. Yes, if you haven’t figured it out yet, writeln() is a method of the document object, which is why we’ve had to write document.writeln(‘blah blah) instead of just writeln(‘blah blah’).

Because frames are treated just like windows, we can do a similar thing:

    top.target_frame.document.writeln("Monkey do!");

Now, let’s learn more about windows and frames.

We’ve seen a couple of instances of built-in variables being used in the last few examples. One of the built-in variables is window. The window variable refers to whatever window the JavaScript is executing in. If you have some JavaScript in a frame and you write window.document.writeln(), the writeln will happen in that frame. People sometimes use the built-in variable called self instead of window. The two (window and self) are interchangable.

In the last example, you were introduced to the built-in variable called top. This will always refer to the top-most browser window. If you want to start at the top of the window hierarchy, use top.

Another built-in variable is parent, which refers to the window containing the frame you’re currently in. If you have a frameset in a window, and one frame contains another frameset, the second frameset can refer to the enclosing frame using the parent variable. This gets a little tricky so I’m not going to go into it, but here’s an example of using JavaScript with frames inside frames for you to look over. Check it out or just go on to your homework for Lesson 3.

After you’re done with the assignment, be sure to review what we’ve covered this lesson.

We covered four main topics today:windows, frames, the Document Object Model, and Object-Oriented programming. By now you should know about

Opening windows

How to open windows and make them look the way you want

Communication between windows

How to get JavaScript in one window to affect another window

Communication between frames

How to get JavaScript in one frame to affect other frames

Objects

Objects have properties and methods

The Document Object Model

A browser window is an object that comprises other objects. If you know the hierarchy of the objects in the DOM you know how to affect different aspects of your HTML page.

Although we didn’t go into all the details of all the objects in the DOM, we did get an idea of how it works. In the Lesson 4, we’ll cover a few aspects of computer programming that haven’t been touched on yet. And in Lesson 5, we’ll study the DOM further and go into how most of the objects in an HTML document can be accessed and changed.

Welcome to Lesson 4! There are two main parts to JavaScript: the syntax of the language and its library of objects. In Lesson 2, which was an introduction to the syntax, we looked into variables, statements, and if-then clauses, which are parts of all programming languages. Now it’s time to learn the rest of the JavaScript syntax.

There are only three major aspects of JavaScript syntax that we have yet to cover: loops, arrays, and functions.

Let’s start with loops.

Introduction to Loops

Sometimes you want to do the same thing more than once. Let’s say, for example, that you wanted to get a password from somebody and you wanted to keep asking until they gave you the right password. If you just wanted to give them two tries, you could do something like this:

 var the_password = "pass the wrench";

 var answer = prompt("What's the woyd?","");

 if (answer != the_password) {

 	answer = prompt("What's the woyd?","");

 	if (answer != the_password) {

 		document.write("You lose!<p>");

 	} else {

 		document.write("That's right!<p>");

 	}

 } else {

 	document.write("That's right!<p>");

 }

Unfortunately, this sort of thing won’t work if you just want to keep asking until they get it right. And it’s pretty ugly already – imagine if you wanted to ask four times instead of just two. You’d have four levels of if-then clauses, which is never a good thing.

The best way to do similar things more than once is to use a loop. In this case, you can use a loop to keep asking for passwords until the person gives up. Here’s an example of a while loop in action. The password is: pass the wrench.

Looping Password

That’s the woyd!

Let’s go through this example line by line. View Source if you want to see the whole script.

After the typical JavaScript preamble, we start with a couple of variable declarations:

var password="pass the wrench";

 var answer;

Here we define the password as a string, and we declare a variable called answer. You’ll see why we had to declare answer in a second. The next few lines are the important ones:

while (answer != password)

 {

 	answer = prompt("What's the woyd?","");

 }

This is a while loop. while loops come in this general form:

while (some test is true)

 {

 	do the stuff inside the curly braces

 }

So the above lines say, “While the answer isn’t equal to the password, execute the prompt command.” The loop will keep executing the statements inside the curly brackets until the test is false. In this case, the test will only be false when the words the user enters are the same as the password (that is, “pass the wrench”).

We had to declare answer because performing a test like (answer != password) on an undeclared variable will give an error in some browsers. Because answer is given a value by the prompt method inside the while loop, it will have no value the first time we hit the loop. Defining it early gives it an initial value of "".

Although looping indefinitely is often useful, loops are more commonly used to execute a set of statements a specific number of times. Here’s another example of a while loop that shows how to do this.

More about While Loops

You should have seen as many x’s as you asked for. Let’s go over this:

First, we ask for the number of x’s:

 var width = prompt("How many x's would you like?

 (1-10 is good)","5");

Next, we declare a few variables:

 var a_line="";

 var loop = 0;

And now for the important part:

 while (loop < width)

 {

   a_line = a_line + "x";

   loop=loop+1;

 }

This says, “while the variable loop is less than the requested width of the row of x’s, add another x to the line and then add one to the value of loop.” This loop will keep adding an x to the line and adding one to the value of loop until loop is no longer less than the requested width. Here’s a timeline of what happens when a person chooses two x’s at the prompt:

Time 1

• a_line = “” (because we initialized it to be “”)
• loop=0 (because we initialized it to be 0)
• width=2 (because that’s what the user asked for)
• 0 is less than 2 so
• a_line = a_line + “x”, so now a_line = “x”
• loop=loop+1, so now loop = 1

Back into the loop: Time 2

• loop=1
• width=2
• a_line = “x”
• 1 is less than 2 so
• a_line = a_line + “x”, so now a_line = “xx”
• loop=loop+1, so now loop = 2

Back into the loop: Time 3

• loop=2
• width=2
• a_line = “xx”
• 2 is NOT less than 2 so
• fall out of the loop and do what follows

And what follows is:

 alert(a_line);

Throw up an alert box announcing a_line.

This sort of loop is so common that programmers have developed a few shortcuts. Using the shortcuts, the while loop could have been written like this:

 while (loop < width)

 {

   a_line += "x"; //this was a_line = a_line + "x";

   loop++;        //this was loop=loop+1;

 }

The first line, a_line += "x" , says “add x to myself.” This shortcut works with numbers, too. If you have a_number = 5 , and you write, a_number+=3 , it’s just like writing a_number=a_number+3. Programmers are lazy; they’re always coming up with shortcuts like this.

The next line, loop++ , means “add one to myself.” So, loop++ is the same as loop=loop+1 , which could also be written loop+=1. Each of these is equally good. Which one you use depends on how lazy you are.

Just like there’s more than one way to add 1 to a number, there’s more than one way to write a loop. while loops aren’t the only kind of loops out there. Another popular one is the for loop.

For Loops

The while loop from the last example, which was written like this …

var a_line="";

 var loop = 0;

 while (loop < width)

 {

 	a_line = a_line + "x";

 	loop=loop+1;

 }

… could have been written using a for loop, like this:

var a_line="";

 for (var loop=0; loop < width; loop++)

 {

 	a_line = a_line + "x";

 }

for loops come in this form:

for (initial value; test; increment)

 {

 	do this stuff;

 }

So, the above for loop sets loop = 0 and says that you should keep adding 1 to loop as long as loop < width. It’s just like the previous while loop with a few less lines. Both say “add an x to a_line</font> <code>width times.”

One more thing about loops before we do an exercise using them: Loops can be nested. Here’s an example of nested loops. Turn off your pop-up blocker to see this example in action.

Nested Loops

Here’s the script:

 var height = prompt("How high do you want the grid?

 (1-10 is good)","10");



 var width= prompt("How wide do you want the grid?

 (1-10 is good)","10");



 var a_line;



 var new_window =

 window.open("/webmonkey/98/04/files1a/grid.html","looper",

 "width=400,height=400");

 new_window.document.writeln("<h1>A Grid</h1>");

 for (var height_loop = 0; height_loop < height; height_loop++)

 {

 	a_line = "";

 	for (var width_loop = 0; width_loop < width; width_loop++)

 	{

 		a_line+="x";

 	}

 	new_window.document.writeln(a_line + "<br>");

 }

 

After asking for height and width, opening a new window, and writing a header to it, we go into a for loop. The first for loop sets a_line = "". Try doing the example without this line and see what happens. After initializing a_line , the script goes into another for loop to build a line of x’s as wide as required and prints it out to the new window. This happens height times.

OK, here’s your assignment: Take a look at this loop exercise and try doing it on your own before viewing source to see how it works. Turn off your pop-up blocker to see this example in action.

Loop Exercise

This script asks for a few words and then prints them out in reverse order. Try writing the script yourself. When you’re done, View Source on this to see how I did it. After you’ve figured it all out, it’s time to learn about.

Arrays

We’ve seen that variables can hold numbers, strings, and references to objects. There’s one more kind of information that JavaScript understands:arrays.

Arrays are lists. You might have a list of URLs that you want to visit, a list of names that you want to remember, or a list of colors in which you’d like text displayed. All these lists can be stored in arrays.

Here’s how to create an array of colors:

 var colors = new Array("red","blue","green");

Now that you have an array, what can you do with it? The good thing about arrays is that elements of an array can be accessed by number. The first element is number 0 and can be accessed like this:

 var the_element = colors[0];

After you execute this line of JavaScript, the variable the_element will hold the string “red.” As you can see, you access the first element of an array by writing the name of the array and putting the element’s number in square brackets. The second element of an array is number 1.

Once you’ve created an array, you can add to and change its values. If you decided to change the first element of the colors array to purple instead of red, you could write this:

 colors[0] = "purple";

Arrays are often used in tandem with loops.

Arrays and Loops

Arrays are great, because you can loop through each element of the array and do something with it. Here’s an example of arrays and loops that presents a URL slide show. Take a look at the slide show and then come back here. Turn off your pop-up blocker to see this example in action.

This example may need to be updated.

The first thing we do to make the slide show work is declare some variables:

 var url_names = new Array("hits.org","awaken.org","bianca.com");

 var a_url;

Next, we loop through the array, opening each URL and waiting for the user to click on the alert OK button:

for (var loop = 0; loop <url_names.length; loop++)

 {



   // make the name of a url, for example http://www.hits.org/

   a_url = "http://www." + url_names[loop] + "/";



   // open a window

   var new_window=open(a_url,"new_window","width=300,height=300");



   // wait for the click

   alert("hit ok for the next site");



 }

 

There are a few interesting things in this loop. First, note that the loop goes from 0 to something called url_names.length. Putting .length after the name of an array tells you how many elements are in the array. Remember, however, that this number is not the same as the index number of the last element in an array. If an array has three elements, its length is 3 but its last element is array[2]. This is because the first element of an array is array[0]. If you’re getting errors like “object not found” and there’s an array in your code, you may well have mixed up the index number of the array element with the overall number of elements in the array.

You might have noticed that putting a .length at the end of an array looks a lot like finding a property of an object. Well, that’s because arrays actually are objects and length is one of the array’s properties.

The other sign that arrays are objects is that you create a new array using the new command. In the above example, url_names = new Array("blah","blah"...) actually says, “make a new array and make url_names a reference to it.” In general, that’s how you create a new instance of an object. We won’t be going much deeper into objects for this set of lessons, so, for now, just keep in mind that if you see the word “new” being used in this way, you’re looking at an object being created.

The first line in the loop just creates a variable that holds a string.

 a_url = "http://www." + url_names[loop] + "/";

The first time into the loop, the value of the variable loop is 0. The first element in the url_names array is the string "hits.org". So, during the first time in the loop, the variable a_url will equal the string "http://www.hits.org/".

The next line of the loop opens a window with that URL.

 var new_window=open(a_url,"new_window","width=300,height=300");

Because each time we open the window we give it the same name, we won’t get multiple windows. If we had left out the name "new_window" we would have opened a different window each time we went through the loop.

The third line of the loop simply throws up an alert box and waits for the user to hit the OK button.

There are more uses for arrays than just holding strings. In fact, it turns out that arrays run throughout the JavaScript Document Object Model.

Arrays in the Document Object Model

This example is going to use image swapping to show how arrays are woven into the DOM. Try the example, view source, and read on.

Here’s the JavaScript that’s in the onClick="" in the link:

 var change=prompt('Change which image (0 or 1)?',''); window.document.images[change].src='three.jpg';

The first line gets a number and the second line does the change. In the past, we changed images using something like this:

 document.image_name.src = 'some_image.gif';

In order to do this, each image has to be named. If you don’t know the name of an image that you want to swap, but you know its order on the HTML page, you can refer to the image by its DOM number. The first image in an HTML document is document.images[0], the second is document.images[1], and so on. If you want to know how many images are in a document, you can find out by checking the length of the images array:document.images.length. For instance, if you wanted to change all the images on your page to a spacer GIF, you could do this:

 for (var loop = 0; loop <

 document.images.length; loop++)

 {

 	document.images[loop].src = 'spacer.gif';

 }

Spiffy, huh?

OK, there’s one more part of JavaScript syntax you need to know before you can consider yourself a full-fledged programmer: functions. Once we cover functions, we’ll do a few exercises, and then I’ll give you your homework for this lesson.

On to functions.

Functions

Functions are the last bit of basic programming you need to know before you can understand and perform your own serious JavaScripting. All programming languages have functions. Functions, or subroutines, as they’re sometimes called, are bits of JavaScript that you can call over and over without having to rewrite them every time.

Let’s say you were trying to teach yourself to speed read and you wanted to sprinkle a long text with links which, when hit, would tell you the current time.

Click here for an example.

Here’s the JavaScript that does this:

 <a href="#" onClick="

   var the_date = new Date();

   var the_hour = the_date.getHours();

   var the_minute = the_date.getMinutes();

   var the_second = the_date.getSeconds();

   var the_time = the_hour + ':' + the_minute + ':' + the_second;

   alert('The time is now:' + the_time);">time!</a>

 

The details of how this little JavaScript works aren’t really important right now; I’ll go over them soon. The important thing to notice is that it’s fairly long. If you wanted to have 10 of these time links, you’d have to cut and paste this script each time, making your HTML pretty long and ugly. In addition, if you wanted to change the script, you’d have to change it in 10 different places.

Instead of having 10 copies of it on your page, you could write a function to execute the JavaScript. That way you’d have the function in one place, making it easier to edit and easier to read.

Here’s how you’d write a timer function.

Functions with No Parameters

This HTML page contains a function called announceTime(). To call announceTime from a link you’d do this:

 <a href="#" onClick="announceTime(); return false;"> time!</a>

Like so … Click here!

You saw something like this in the second lesson:

 <a href="#" onClick="alert('Hello!'); return false;"> Hello!</a>

This was calling the alert method from a link. A function is just like a method, the only difference being that a method is attached to an object. In the case of alert, the object is a Window object.

Let’s go on to the function itself. If you View Source, you’ll see the function sitting in the head of the HTML document. Here it is:

 <html>

 <head>

 <title>Function with No Parameters</title>

 <script langauge="JavaScript">



 <!-- hide me



 function announceTime()

 {

   //get the date, the hour, minutes, and seconds

   var the_date = new Date();

   var the_hour = the_date.getHours();

   var the_minute = the_date.getMinutes();

   var the_second = the_date.getSeconds();



   //put together the string and alert with it

   var the_time = the_hour + ":" + the_minute + ":" + the_second;

   alert("The time is now:" + the_time);

 }



 // show me -->



 </script>



 </head>

 <body>



 ...



 </body>



 </html>

OK, let’s go over this function line by line. First, all functions come in this format:

 function functionName(parameter list)

 {

 	statements ...

 }

Functions’ naming rules are the same as those for variables. The first character has to be a letter or an underscore. The rest of the characters can be numbers or dashes. Also, you must make sure you don’t name a function the same as a variable. If you do, you’ll get really strange, hard to debug, results. I use internal capitalization for my function names to make sure I don’t accidentally name a function and a variable the same thing.

After the function name comes a list of parameters. This function has no parameters, so I’ll hold off describing parameters until the next example.

After the parameters comes the body of the function. This is the set of statements you want to run when the function is called. I’m going to use this timer for the next few examples, so let me describe how it works.

The first line …

 var the_date = new Date();

… gets a new date object. Just like you have to get a new array object before you can do anything with it, you need to get a new date object before you can find out what time it is. When you get a new date object, it is automatically preset to the current date and time. In order to get the information out of the object, you have to use the object’s methods:

 var the_hour = the_date.getHours(); var the_minute = the_date.getMinutes(); var the_second = the_date.getSeconds();

You might be asking yourself, how am I supposed to know what methods a date object knows? How do I even know there’s such a thing as a date object? Well, these are reasons you need to have access to a JavaScript library. I’ll do my best to explain as many of the built-in JavaScript objects as I can, but there’s no way I can go through all of them.

The rest of the function is pretty clear. It takes the numbers returned by the method calls, turns them into a string, and calls the alert method to put up a dialog box with the string. Note that you can call methods and functions from within functions. We’ll see a lot more of this.

Now, if you’ve played with the time link enough, you might have noticed something isn’t quite right. Every once in a while you get something like this:"The time is now:12:14:4". What’s the deal here?

Well, it turns out that the getSeconds() method returns a number. If it’s 12:14:04, getSeconds() will return the value 4. Then when we do the string concatenation, the_minute + ":" + the_second, we get 14:4 instead of what we want. There’s an easy way out of this, and that’s to make a new function that fixes the minutes and seconds if they need fixing. This new function will demonstrate parameters and return values, two crucial parts of functions, so it deserves a page of its own.

On to parameters and return values.

Parameters and Return Values

Although functions with no parameters are pretty handy for cutting down on the amount of typing you have to do and help make your HTML look better, functions that take parameters are far more useful.

In the last example, we had a problem when the getMinutes and getSeconds methods of the Date object returned numbers less than 10. We wanted them to come out as 04 instead of just 4.

We could have done something like this:

 var the_minute = the_date.getMinutes();

 if (the_minute < 10)

 {

 	the_minute = "0" + the_minute;

 }



 var the_second = the_date.getSeconds();

 if (the_second < 10)

 {

 	the_second = "0" + the_second;

 }

 

This would work fine. Notice, however, that we’re basically writing the same code twice:If something is less than 10, stick a “0″ in front of it. When you start to notice that you’re writing almost the same exact code a bunch of times in your JavaScript, you should start thinking about writing a function to do it. In this case, I wrote a function called fixNumber:

function fixNumber(the_number)

{

	if (the_number < 10)

	{

		the_number = "0" + the_number;

	}

	return the_number;

}

fixNumber takes one parameter, called the_number. A parameter is just a variable that gets set when the function is called. In this case, if we call the function like this:

 var fixed_variable = fixNumber(4);

The parameter the_number gets set to 4 in the function. The body of fixNumber should make sense to you by now. It says, “if the variable the_number is less than 10, add a to the front of it.” The only new thing is the return command:return the_number. The return command is used when you say something like this:

 var some_variable = someFunction();

The variable some_variable gets set to the value returned by the someFunction() function. In fixNumber, I wrote:return the_number. This exits the function and returns the value of the_number to whatever variable is waiting to be set. So, if I write …

 var fixed_variable = fixNumber(4);

… the_number will be initially set to 4 by the function call. Then, because 4 is less than 10, the_number will be changed to “04“. Then the_number is returned, and the variable fixed_variable will be set to “04.”

To include fixNumber in original function, announceTime(), I’ve made the following additions:

 function announceTime()

 {

   //get the date, the hour, minutes, and seconds

   var the_date = new Date();



   var the_hour = the_date.getHours();

   var the_minute = the_date.getMinutes();

   var fixed_minute = fixNumber(the_minute);

   var the_second = the_date.getSeconds();

   var fixed_second = fixNumber(the_second);



   //put together the string and alert with it

   var the_time = the_hour + ":" + fixed_minute + ":" + fixed_second;

   alert("The time is now:" +the_time);

 }



 

Let’s say it’s 12:04:05 when the time link is clicked on. We get the date using new Date(), get the hour using getHours(), which doesn’t need fixing, get the minute as we did before, which in this case will be the number 4, and then call fixNumber on the_minute:

 var fixed_minute = fixNumber(the_minute);

When fixNumber() is called, the parameter the_number gets set to the value of the_minute. In this example, since the_minute is 4, the_number will be set to 4. Once the parameter is set, we go into the body of the function. Since 4 is less than 10, the_number is changed to be “04“. Then the_number is returned, using the return command. Once “04″ is returned by fixNumber, the variable fixed_minute will equal “04″.

Once you get this working, it should look like this!

Let’s go through this step by step and then do an exercise. Assume the time is 12:04:05.

We start in function announceTime()

1. the_minute = the_date.getMinutes(); Now the_minute = 4
2. fixed_minute = fixNumber(the_minute); Call the fixNumber() function and return its value to fixed_minute===Now we’re in function fixNumber()===
3. function fixNumber(the_number)fixNumber() is called with the value of the_minute, which is 4, now the_number = 4
4. if (the_number < 10) {the_number = "0" + the_number;} Since 4 is less than 10, the_number now equals “04″
5. return the_numberThe function exits and returns “04″ ===Function fixTime() has exited, so we’re back in announceTime()===
6. The function returns with “04″ So fixed_minute now equals “04″

This example used a function which only had one parameter. You can actually have as many parameters as you’d like. For example, here’s a function in the Functions with More Than 1 Parameter section that takes two arrays and returns a list of elements that the arrays have in common.

Functions with More Than 1 Parameter

Here are the arrays I’ve defined:

var monkeys = new Array("mattmarg","wendy","kristin","tim","aaron", "luke"); var kittyphile = new Array("wendy", "ruby", "roscoe", "tim"); var discophile = new Array("mattmarg", "john travolta", "wendy"); var happy = new Array("tim", "wendy", "stimpy", "aaron"); var cranky = new Array("ren", "mattmarg","luke"); With these arrays defined, and the arrayIntersect function written, it’s very easy to figure out which Webmonkeys love disco: dancing monkeys.

Note that even though John Travolta loves disco, he’s not on the monkeys list, so he’s not a dancing monkey. To call this function, I wrote this:

 <a href="#" onClick="arrayIntersect('dancing monkeys',monkeys,discophile); return false;">Click to see which monkeys love disco</a>

This is a function with three parameters:a string representing the name of the intersection, the first array, and the second array. It’s similarly easy to find the names of Webmonkeys who like cats:cat-loving monkeys.

Like so:

 <a href="#" onClick="arrayIntersect('monkeys who love cats',monkeys,kittyphile); return false;">Click to see the cat-loving monkeys</a>

Let’s look at the arrayIntersect function itself:

 function arrayIntersect(intersect_name, array_1, array_2)

 {

   var the_list = "";

   for (var loop_1 = 0; loop_1 < array_1.length; loop_1++)

   {

     for (var loop_2 = 0; loop_2 < array_2.length; loop_2++)

     {

       if (array_1[loop_1] == array_2[loop_2])

       {

         the_list = the_list + array_1[loop_1] + " ";

       }

     }

   }

   alert("the " + intersect_name + " are:"+ the_list);

 }

See if you can figure out for yourself what the for loops are doing in this example. The important thing to note here is the first line of the function:

 function arrayIntersect(intersect_name, array_1, array_2)

This defines a function called arrayIntersect with three parameters. Just like in the earlier example, each parameter is like a variable that gets set when the function is called. So, when this function is called like this:

 arrayIntersect('dancing monkeys',monkeys,discophile);

The following assignments are made:

• intersect_name = ‘dancing monkeys’
• array_1 = monkeys
• array_2 = discophile

The only thing you have to be careful of is that you call your functions with the right number of parameters. If we had accidentally called arrayIntersect like this:

 arrayIntersect(monkeys,discophile);

We would have gotten all kinds of errors. Try it and see what happens.

Functions are the basic building blocks of any decent JavaScript, so it’s very important that you understand how they work. Here’s an exercise to test your knowledge of functions. After you’ve done the exercise, we’ll do one more exercise that combines everything we’ve learned in this lesson, and then go on to do some more work on our personal browsers. Here’s a snazzy way to give people a chance to go to another URL without having to drag their mouses all the way to the Location window:Where are you heading?

The neat thing about this script is that people can type either http://some.address.com or just some.address.com. If they do the latter, JavaScript will figure it out and append http:// to the front of what they type. Give it a try. Type www.hits.org and you’ll see that the script appends the http:// on the front.

Your assignment, of course, is to do this. You’ll need one tip though. To check the first few letters of the typed URL, you need to do this:

 var the_first_seven = the_url_they_typed.substring(0,7);

After you do this, the_first_seven will hold the first seven characters of the string typed into the prompt.

Try doing this exercise. If you give up, View Source for the solution. Try it first, though! Then go on to the final exercise for this lesson.

Lesson 4 Review

Today we finished with the syntax of JavaScript. We’ve covered, in broad strokes, most of what is covered in an introductory computer science course. If you understood it all, you should go grab a celebratory banana. Here’s what you should know by now:

while loops

How to make a while loop loop both indefinitely and a specific number of times

for loops

How for loops work

Arrays

What arrays are and how to initialize and set them

Arrays and loops

How to use loops to go through arrays (using the array.length property)

Arrays in the DOM

How to use arrays to affect images on your pages (the DOM is packed with arrays)

Functions

You should know what a function is and how to write and call one

Parameters and return values

Functions get interesting when you can change their behavior based on parameters and use their results in other parts of your JavaScript

You can now call yourself a junior computer programmer. In Lesson 5, we’re going to leave the dry-ish world of JavaScript syntax and return to the JavaScript Document Object Model. Here we will learn about how you can use forms to interact with users in powerful and interesting ways.

See you then!

Now that you’ve mastered the basics of computer programming, it’s time to refocus on the Document Object Model (DOM). We’ve already seen that the DOM hierarchy starts with a Window object. Inside each Window object is a Document object. We’ll be spending this lesson going through the Document object and seeing how it can be used to get all kinds of information from your users and to dynamically present new information.

We’ve already had a good look at one of the properties of the Document object, the Images array. If you remember back to Lesson 4, the first image in a document can be modified by changing its src property. For example,

 window.document.images[0].src='some_new_picture.gif';

will change the first image in a document to the GIF called some_new_picture.gif. As you might have guessed, each Image in the Image array is itself an object in the DOM. That’s why images[0].src works. It’s saying, get the Image object image[0] from the Images array and set its src property. The whole statement above reads in English, “get the document property of this window, get the first image from the document’s image array, and change its source property to some_new_picture.gif.”

The Image object has lots of other interesting properties. For example, you can have your JavaScript check to see if an image has been completely loaded before doing anything. However, these interesting properties will have to wait for later lessons. Gotta keep you coming back somehow, right? Today, we’ll be focusing entirely on forms and how to use them in JavaScript.

Introduction to Forms

Forms are part of the HTML 1.0 specification. Many people don’t know about them, however, because there’s a misconception that they’re only useful if you (or someone you know) can do server-side CGI programming. As June points out in her forms tutorial, forms can be fun even if you aren’t a CGI programmer. More important for this tutorial, JavaScript can be used to add all sorts of functionality to forms without the help of server-side CGI.

If you don’t know how forms work, check out Jay’s tutorial and try writing some forms yourself. I’m going to assume that you know the basics.

The first thing you need to know about forms and JavaScript is that forms, like images, are stored in an array of objects. Just like you can refer to the first image on a page by calling it window.document.images[0], you can refer to the first form on a page using window.document.forms[0]. Similarly, just like you can name images, you can name forms. For an example if this form is written like this,

 <form name="first_form">

 <input type="text" name="first_text" size="40"

 value="Power to the primates!">

 </form>

You can refer to the form in either of these two ways:

 var the_form = window.document.forms[0];

 var the_same_form = window.document.first_form;

Although being able to refer to forms is sometimes useful, more often you want to refer to elements inside of forms, such as the text field in the last example. Here’s an example of manipulating the value of a text field.

Manipulating the Value of a Text Field

Click here and mouse over the links below the text field and see what happens.

This magic is performed by changing the value of the text field. The form looks like the one in the last example:

 <form name="first_form">

 <input type="text" name="first_text" value="Are you happy?">

 </form>

The links that change the text field are:

 <a href="#" onMouseOver="window.document.first_form.first_text.value=

 'Clap clap!';">Yes, and I know it.</a>

 <a href="#" onMouseOver="window.document.first_form.first_text.value=

 'Sour puss!';">No!</a>

These are normal mouseovers; the important part is:window.document.first_form.first_text.value='Clap clap!'. This says, “find the form called first_form in the document, find the form element called first_text, and set its value to ‘Clap clap!’.” The second line works similarly. This is very much like changing the src of an image. Instead of having a src, text fields have values.

Other types of form elements can be affected by messing with their values – for example, textareas:

Click here.

The forms and links here are very similar to those above. The form is:

<form name="form_two">

 <textarea name="the_textarea" rows=10 cols=60>

 Mouse over below to see the first verse of

 The Webmonkey song, adapted from

 "I Wanna Be Like You" (The Monkey Song)

 from Walt Disney's <cite>The Jungle Book</cite>

 written by Richard M. Sherman and Robert B. Sherman

 </textarea>

 </form>

Notice that the form has a name, form_two, and the textarea has a name as well, the_textarea.

The links are basically the same as what you saw in the text field example:

<a href="#" onMouseOver="window.document.form_two.the_textarea.value=

first_part;">Part 1</a>

<a href="#" onMouseOver="window.document.form_two.the_textarea.value=

second_part;">Part 2</a>

The only difference is that instead of assigning a string to the value of the textareas, I assigned variables that I defined in the header. View Source to see that they’re there. I only did this for the sake of neatness, to get those long strings out of the HTML. A well-groomed monkey is a happy monkey. Here’s one of the strings:

 var first_part = "Now I'm the king of the swingersnOh, the jungle VIPnI've reached the top and had to stopnAnd that's what botherin' me";

Notice the "n". This is standard computerese for new lines. In general, because you’re working with HTML, the new line isn’t important. But if you’re writing something in a <pre> tag, or you’re writing into a textarea, the "n" comes in handy.

In addition to changing the values of form elements, JavaScript allows you to detect events that go on inside of them. Here’s an example of detecting events inside a text field.

Text Field Events

Text fields understand onBlur, onFocus, and onChange. The onFocus event occurs when someone clicks inside a text field. onBlur happens when somebody moves out of a text field by clicking outside of it, or hitting “tab.” onChange happens when somebody changes what’s in the text field and then moves outside the text field.

Try doing these things in the text field and see what happens in the textarea below it.

Click here.

Here’s how this works. The text field looks like this:

<input type="text" name="first_text"

   onFocus="writeIt('focus');"

   onBlur="writeIt('blur');"

   onChange="writeIt('change');">

Each of the event handlers calls the function writeIt(), which I’ve defined in the header. The header looks like this:

<head>

 <title>Text Field Events</title>

 <script language="JavaScript">

 <!-- hide me

 function writeIt(the_word)

 {

   var word_with_return = the_word + "n";

   window.document.first_form.the_textarea.value +=

     word_with_return;

 }

 // show me -->

 </script>

 </head>

This should all look pretty familiar to you. The first few lines are the typical JavaScript preamble and the function definition. The first line in the body of the function …

 var word_with_return = the_word + "n";

…. initializes a new variable, word_with_return, and sets it equal to the string that was passed into the function concatenated with a "n". (Remember, the "n" is standard computerese for “new line.”)

The next line …

 window.document.first_form.the_textarea.value += word_with_return;

…. says, “set the value of the textarea to its current value plus the new variable.” This shortcut was covered when we learned about loops. It’s the same as saying:window.document.first_form.the_textarea.value =

  window.document.first_form.the_textarea.value + word_with_return;

 It just takes less time. So far, we've seen a property of text fields and textareas (the value) and some events that they can handle. The remaining thing to know about these elements is the methods that they can handle:blur(), focus(), and select().

Here are some links to show you how focus() and select() work. Beware that they sometimes stop working after the first time:

Click here.

Here are the form and the two links:

 <form name="method_form">

 <input type="text" name="method_text" size=40 value="Hey, hey, we're the monkeys">

 </form>  <a href="#" onMouseOver="window.document.method_form.method_text.focus();">Mouseover to focus</a>

 <a href="#" onMouseOver="window.document.method_form.method_text.select();">Mouseover to select</a>

Accessing the methods of a text field is just like accessing the methods of any object:object_name.method(). The name of a text field is window.document.form_name.text_field_name. So, to call the focus() method on the text field above, we call:

 window.document.method_form.method_text.focus();

That’s pretty much all there is to know about text fields and textareas. We’re about ready to try the first exercise for this lesson. First, however, there’s one more thing you need to know about form handlers before you can do the exercise.

Form Handlers

Forms are objects; they have their own methods, properties, and event handlers. One event handler that you should know about is onSubmit. onSubmit gets called in two situations:if a user clicks on a Submit button, or if a user hits Return in a text field. If these actions are not handled in some way, your JavaScript may behave differently than expected. Try clicking on

Submit and see what happens.

In Netscape, clicking on an unhandled Submit button generally leads to reloading the page. In general, you won’t want this. In order to block this behavior, you need to do this:

<form onSubmit="return false;">

 <input type="submit" value="Submit">

 </form>

Try it

Generally, return false is a way that JavaScript stops your browser from doing what it would otherwise do. Another example of this is stopping an href from going to the URL assigned to it. For example, the link …

 <a href="http://www.webmonkey.com/" onClick="return false;">mattmarg!</a>

…. won’t go anywhere because you’ve returned false on the onClick. Click on this dead link, if you don’t believe me.

This may seem like a weird thing to do, but actually it’s quite common, especially in the case of forms. Here’s an example of using a form to get input from a user. Type something into this text field and hit Return.

Here’s the form:

 <form name="text_entry_form" onSubmit="monkeyLove(); return false;">

 <b>Who does the monkey love:</b>

 <input type="text" name="monkey_love" size="30">

 </form>

When you hit Return in the text field, the onSubmit handler gets called. It executes the function monkeyLove(), which changes the value in the text field.

If the return false wasn’t in the onSubmit handler, the function monkeyLove() would execute, changing the text field, but then the page would reload, changing the text field back to what it was. To stop this from happening, you need to have that return false in the onSubmit.

Here’s the monkeyLove() function for your perusal:

function monkeyLove()

 {

   var who_it_is = window.document.text_entry_form.monkey_love.value;

   who_it_is = 'The monkey loves ' + who_it_is;

   window.document.text_entry_form.monkey_love.value = who_it_is;

 }

And here’s an example of the same form without the return false, just so you can see what happens.

Once you’ve convinced yourself of the merits of return false, it’s time to try a text-field exercise.

Text Field Exercise

This exercise is an extension of one we did in Lesson 4. The exercise is to get this textarea to behave like a browser’s Location box. If you type in http://www.webmonkey.com/ or just www.webmonkey.com, it’ll spawn a window that displays the Mattmarg.com Web site.

Click here.

Try getting this to work before viewing source to see a solution. When you’re done, it’s time to move on to checkboxes and radio buttons.

Checkboxes

Text fields and textareas are just two types of form elements. Others that we’ll look at in this lesson are checkboxes, radio buttons, and selects. Let’s discuss checkboxes first.

Checkboxes have one main property of interest: checked.

If you have a form named the_form and a checkbox named the_checkbox you can see if the checkbox has been checked like this:

var is_checked = window.document.the_form.the_checkbox.checked;

 if (is_checked == true)

 {

   alert("Yup, it's checked!");

 } else {

   alert("Nope, it's not checked.");

 }

As you can see, if a checkbox is checked, the checked property will be true. true is a built-in JavaScript datatype, so you don’t have to put it in quotes when checking it. If the checkbox is not checked, the checked property will be false (also a built-in datatype).

Just like you can read the checked property, you can set the checked property. Here’s an example of checking and setting the checked property of a checkbox.

Here’s the code for the above:

<form name="form_1">

 <input type="checkbox" name="check_1">Checkbox 1

 </form>

 <a href="#" onClick="window.document.form_1.check_1.checked=true;

 return false;">Click to check Checkbox 1</a>

 <a href="#" onClick="window.document.form_1.check_1.checked=false;

 return false;">Click to uncheck Checkbox 1</a>

 <a href="#" onClick="alert(window.document.form_1.check_1.checked);

 return false;">Click to see the value of Checkbox 1</a>

Notice that I’m sticking the return false in the href. It stops the page from bouncing around when you click on a link.

Checkboxes have one interesting event handler:onClick. When someone clicks on a checkbox, the onClick event handler goes into action. Here’s an example of it in use.

Click here to check out the Light Switch

This example introduces a few new things. First, there’s form that introduces the onClick checkbox handler:

<form name="form_2">

 <input type="checkbox" name ="check_1"

 onClick="switchLight();">The Light Switch

 </form>

When someone clicks on the checkbox, the onClick handler gets triggered and executes the switchLight() function. Here’s the switchLight() function (it’s in the header of this page):

function switchLight()

 {

   var the_box = window.document.form_2.check_1;

   var the_switch = "";

   if (the_box.checked == false) {

     alert("Hey! Turn that back on!");

     document.bgColor='black';

   } else {

     alert("Thanks!");

     document.bgColor='white';

   }

 }

The interesting thing here is the first line:

 var the_box = window.document.form_2.check_1;

This line assigns the checkbox object to a variable. This a handy way to cut down on your typing. It’s also a good way to pass objects as parameters to functions. We’ll see a lot more of that in later lessons.

That’s most of what you have to know about checkboxes. Now let’s learn about radio buttons.

Radio Buttons

Happily, radio buttons are almost exactly like checkboxes with respect to JavaScript. The only real difference is in the HTML. Checkboxes are on/off devices. If a checkbox is checked, you can uncheck it. If it’s unchecked, you can check it. Radio buttons are different. Once a radio button is on, it stays on until another one is selected. Then the first one goes off. Here’s a typical radio button set:

Click here.

As you can see, you can’t simply unselect a radio button, you have to choose a new one. With that in mind we can re-do the light switch example with two radio buttons instead of one checkbox:

Click here.

This example looks very much like the checkbox example. The form is:

 <form name="form_1">

 <input type="radio" name ="radio_1" onClick="offButton();">Light off

 <input type="radio" name ="radio_2" onClick="onButton();" checked>Light on

 </form>

When the first radio button is clicked, the offButton() function is called. That function is:

function offButton()

 {

   var the_box = window.document.form_1.radio_1;

   if (the_box.checked == true)

   {

     window.document.form_1.radio_2.checked = false;

     document.bgColor='black';

     alert("Hey! Turn that back on!");

   }

 }

This is pretty much just like the checkbox example earlier. The main difference is this line:

 window.document.form_1.radio_2.checked = false;

This tells JavaScript to turn off the other button when this button has been clicked. The function that is run when the other button is clicked is similar to this one:

 function onButton()

 {

   var the_box = window.document.form_1.radio_2;

   if (the_box.checked == true) {

     window.document.form_1.radio_1.checked = false;

     document.bgColor='white';

     alert("Thanks!");

   }

 }

There are a few more details about checkboxes and radio buttons, but those can wait until the next set of tutorials. Right now, let’s look at the last type of form element, selects.

Selects

Selects are the strangest of the form elements we’ll cover in this lesson. There are two primary kinds, pulldown selects and list selects. Here are examples of each:

Click here.

The thing that makes select objects strange is that the whole select is named, but none of the select’s options is. For example, the HTML for the first select looks like this:

 <select name="pulldown_1" size=1>

 <option>probiscus

 <option>spider

 <option>lemur

 <option>chimp

 <option>gorilla

 <option>orangutan

 </select>

Notice that the whole select is named pulldown_1, but the individual options aren’t named. This makes it difficult to access individual options.

Luckily, through the magic of arrays and objects, there’s a way to access and change the options of a select. If you wanted to change the second option of the pulldown menu, you’d type:

 window.document.form_1.pulldown_1.options[1].text = 'new_text';

This works because the select element has an options property that is an array of all the select’s options. You can grab one of the options in the array and change its text property. Try it – change the select and then scroll up to see that the pulldown menu actually changed. The second option in the pulldown select should now be *thau*.

In addition to the options property, selects have a property called selectedIndex. When one option in a select has been chosen, the selectedIndex property of the select will be the array number of the selected option. To test this, select one of the options in the list select (the second one) and then check the index. Remember that the first option in the array is option 0. The line I used to check this was:

 <a href="#" onClick="alert('index is:' + window.document.form_1.list_1.selectedIndex); return false;">check the index.</a>

The form is named form_1, the list select is named list_1. To get the selectedIndex, I looked at window.document.form_1.list_1.selectedIndex. If you want, you can set the selectedIndex like this …

 window.document.form_1.list_1.selectedIndex = 1;

…. and highlight the second option in the list_1 select.

Once you know the index number of the selected option, you can find out what it is:

 var the_select = window.document.form_1.list_1;

 var the_index = the_select.selectedIndex;

 var the_selected = the_select.options[the_index].text;

The selectedIndex property is great when you only have one option selected. What happens when you have more than one option selected? Well, that gets slightly stranger. If you want to know, here’s some information about multiple selects.

Just like the other form elements, the select element has a handler:onChange(). This handler gets called whenever there’s a change to the select. Here’s the example from Lesson 1 to show you how onChange works with a select.

onChange in Select Form Elements

Play with this example and then read the blow-by-blow description.

This is a fairly complicated JavaScript, so let’s go through it slowly. First, let’s look at the form itself (note that your browser might wrap that onChange line, but it should be on one line, no spaces, inyour code):

 <form name="the_form">

 <select name="choose_category"

   onChange="swapOptions

   (window.document.the_form.choose_category.

   options[selectedIndex].text);">

 <option selected>Dogs

 <option>Fish

 <option>Birds

 </select>

 <select name="the_examples" multiple>

 <option>poodle

 <option>puli

 <option>greyhound      .

 </select>

 </form>

This form has two elements, a pulldown select and a list select. The pulldown select has an onChange handler that calls a function called swapOptions(). swapOptions(), which is defined in the header, has one parameter – the selected animal type.

Now let’s check out the header. The first thing that happens is I define a few arrays:

 var dogs = new Array("poodle","puli","greyhound");

 var fish = new Array("trout", "mackerel", "bass");

 var birds = new Array("robin", "hummingbird", "crow");

Notice that the arrays are named the same thing as the animals in the pulldown select. You’ll see why soon. Now let’s look at the function that gets called when the pulldown select is changed:

 function swapOptions(the_array_name)

 {

   var numbers_select = window.document.the_form.the_examples;

   var the_array = eval(the_array_name);

   setOptionText(window.document.the_form.the_examples, the_array);

 }

The function definition includes one parameter:the_array_name. If you pulled the pulldown select to “Fish,” the_array_name will equal the string “Fish.”

The first line in the body of the function sets a variable to refer to the second form element, the list select.

The second line introduces something new:eval(). eval() is a little weird and better left for later lessons. The end result of the second line is that the variable the_array will equal one of the arrays defined earlier. If the_array_name is “Fish,” the_array will equal the Fish array. If you want a description of how this happens, study up on eval.

The third line of the function calls another function called setOptionText(). setOptionText() does the work of setting the values of the list select to the contents of the_array. Here it is:

 function setOptionText(the_select, the_array)

 {

   for (loop=0; loop < the_select.options.length; loop++)

   {

     the_select.options[loop].text = the_array[loop];

   }

 }

This function takes two parameters, a reference to a select element and an array. The first line of the function sets up a for loop, which loops through all the options in the select element. Remember that the options property of a select element is an array of all that select’s options. Because it’s an array, you can find out how many options are in a select using the length property of arrays. That’s how the loop works.

The first time you hit the loop, the loop variable equals 0. The body of the loop then reads:

 the_select.options[0].text = the_array[0];

If you chose “Fish” in the pulldown, the_array[0] will be “trout,” so this line will change the first option in the list select to “trout.” The next time through the loop, loop will equal 1, and the second option in the list select will equal “mackerel.”

There’s one caveat to all this. When you change the text of an option, the size of the select won’t change. So if you change an option’s text to something really long, it’ll probably get cut off.

One way to get around this is to stretch out the select when you first go to it. For example, I did this:

 <option>greyhound      .

Note the period I used to stretch out my select box. It’s sort of cheesy, but it works.

OK, that was a mouthful. If you understand how this example works, you understand a lot of JavaScript, and you’ll have no problem doing your homework assignment for this lesson. Once you’ve done the example and viewed source to see how I did it, go on to this lesson’s review.

Review of Lesson 5

Today we focused on forms and what you can do with them. We learned:

Forms and their elements can be named

You can refer to a form element like this:window.document.form_name.element_name

Text field and textarea form elements have value properties

Refer to the value property like this:window.document.form_name.element_name.value; you can set the value by equating it to something, or get the value

Text field and textarea elements understand focus(), blur(), and change() event handlers

When you click on a text field or textarea, the focus event handler triggers; clicking out of one of these elements triggers the blur event handler; if you hit Tab or Return after changing an element, onChange() gets triggered

Forms have an onSubmit() event handler

To stop a form from reloading the page when you click on a Submit button, put onSubmit="return false;" in the <form> tag

Checkboxes and radio buttons have a checked property

You can check and uncheck checkboxes and radio buttons by changing their checked property

Checkboxes and radio buttons have an onClick event handler

Just like links, you can trigger functions when a user clicks on a checkbox or radio button

Selects have an options property that is an array of that select’s options

Just like any array, you can find the length of the options array by typing window.document.form_name.select_name.options.length

You can change the text of an option by messing with its text property

To change the text of the first element of a select you’d type window.document.form_name.select_name.options[0].text='new text';

You can find out which option was selected using the selectedIndex property of the select element

window.document.form_name.select_name.selectedIndex returns the array number, you can then type window.document.form_name.select_name.options[that_number].text to find out what was actually selected

Selects have onChange event handlers

If someone changes the thing highlighted in a select, the onChange handler gets triggered

You can change the URL of a window using window.location.replace('new url');

This was in the homework

You can create a new option for a select element using new Option

Since each option in the options array of a select is an object, you can use new to create a new Option; then you can stick this option into the options array

Today was packed, and it concludes this set of five lessons. We covered a lot of territory, from the basics of computer programming to a major portion of the JavaScript DOM. Not surprising, there’s still much more to learn. We only covered part of the DOM, and there are more than a few interesting JavaScript objects to study. We also didn’t talk too much about making our own objects, nor did we cover all the interesting properties of the Windows object.

Obviously this is a plug for the next set of lessons. So after you give yourself a minute to catch your breath, dive right into my Advanced JavaScript Tutorial.

If you’ve gone through Thau’s basic JavaScript tutorial (or you already know a bunch about the subject), Thau’s advanced JavaScript course is just for you. In the previous tutorial, Thau taught the basics. He picks up here where he left off, starting with the meaning of var and if-then-else statements.

He moves along to show you how to make cookies (Mmmmm), and you’ll learn fancy string handling and associative arrays along the way. Give your JavaScript a sense of history and time (by setting timelines on your pages so that different events occur at different times), and then learn how to sense which browser your visitors are using.

Next, his Thauness gives lessons on image mapping and preloading images, with practical applications such as setting up an employee database and creating a virtual pet!

By the end of the five lessons, Thau puts the finishing touches on your JavaScript mastery, covering JavaScripting tools, debugging techniques, and ways to make your code sprint like the wind.

Get started: Lesson 1

Hello, and welcome to the Advanced JavaScript Tutorial, where I finish off what I started in the basic JavaScript Tutorial. In the second installment – This Time We Mean It – I’ll be covering the finer points of JavaScript that I passed over back in Part I. I’ll also introduce you to some of the fancier aspects of JavaScript and the tips and lowdown that will allow you to build real multimedia applications.

As we head into the JavaScript nitty-gritty, I’m going to assume that you’ve covered the following:

• Assigning values to variables
• If-then statements
• For and while loops
• Writing your own functions
• Opening and manipulating windows
• Reading and writing to HTML forms
• Using arrays
• Conducting image swaps

Any of these sound unfamiliar? You may want to take a peek at the first five JavaScript lessons before you get into Part II.

The Five-Day Lesson Plan

Back in Part I, we covered the heart of JavaScript:most of the important syntax and many of the most commonly used objects. It is now time to refine your JavaScript knowledge and become a true JavaScript master. And here’s what you’ll find along the path to enlightenment.

Day 1

Introductions and the tying up of a few loose ends. A pretty light start, with just a few tips and teasers to get you into the mood. Highlights include a new kind of if-then-else statement and the true meaning of var.

Day 2

Fancy string handling, saving information about your visitors after they’ve left your site, and a new type of array.

Day 3

Setting timelines on your pages so that different events occur at different times. Bonus:making your JavaScript work on as many browsers as possible.

Day 4

Preloading images, image maps and JavaScript. Creating your own objects and using loops to easily get at hard-to-find objects.

Day 5

Tools for developing and testing JavaScript, debugging techniques, and tips for making your JavaScript code run quickly.

By the end of these five lessons, you should have a grip on the full range of JavaScript possibilities. With this knowledge firmly in your grasp, a vast array of Internet applications will be yours for the writing.

Let’s get started with a lovely if-then-else shortcut.

An If-Then-Else Shortcut

One of the most commonly used statements in JavaScript is the good old if-then-else. Take the Webmonkey reward schedule for instance:

 if (monkey_behavior == "good")

 {

 	var toy = "videogames";

 } else {

 	var toy = "rocks";



 }

In plain English, this means, “If the monkey’s been good, he gets to play videogames. If not, he gets only rocks.” For reasons of legibility, it is a perfectly good way to do this. For those who don’t like to squander keystrokes, however, there is a shortcut (albeit, a less legible one). It’s called the “conditional operator,” and it goes a little something like this:

 var toy = (monkey_behavior=="good") ? "videogames" :"rocks";

This expression does the same thing as the if-then-else statement above it. See what I mean about legibility? The conditional operator has three parts:a conditional test, a value to return if that test is true, and a value to return if that test is false. So, in the above example, the conditional test is (monkey_behavior=="good"). If that test is true, it returns the value after the question mark. In this case, it’s the string videogames. If the conditional test is false, the value after the colon is returned; in this case, it’s rocks.

This sort of shortcut is most useful inside function calls. For example, you can use it to do something like this:

 var password = "open sesame";

 var answer = prompt("what's the password? ","");

 alert((answer == password) ? "welcome!" :"buzz off");

Click here to see this in action. What you’re seeing is the conditional operator doing its job and returning either welcome or buzz off, depending on the answer you give at the prompt. The value returned by the conditional gets sent to alert, which throws up an alert box with that value.

Without the conditional operator, the code would look like this:

 var password = "open sesame";

 var answer = prompt("what's the password? ","");

 if (answer == password)

 {

 	alert("welcome");

 } else {

 	alert("buzz off");

 }

It’s definitely longer, but some people find it more readable, and understandable, to actually write out the if-then-else statement. The method you choose is simply a matter of personal preference.

OK, last stop on today’s tour of loose ends: the mysterious var.

What Is This Thing Called Var?

Way back in Part I, Day 2, I said that the first time you use a variable, you should declare it with the word “var.” I promised that I’d explain why when I talked about functions. Well, I forgot! So, now is the time.

Just to jiggle your memory, here’s an example of var in use:

 var happiness = "a banana split";

 alert("The monkeys think happiness is " + happiness);

This little blurb declares a variable called happiness, then throws up an alert box that uses that variable.

If you’ve been looking at other people’s JavaScript, you might have noticed that not everyone declares their variables with var, which can cause problems. First, some versions of MSIE will bomb, or at least act strangely, if a variable isn’t declared with var. This is especially true for MSIE on Macs. Second, if you want to write JavaScripts of any significant size, you’re going to have to write your own functions. And once you start writing your own functions, you really need to understand what var is all about.

As described in Part I, Day 4, a function is a block of JavaScript that can be called when necessary. The best functions are self-contained. You know what goes into the function and what comes out of it, and, once you’ve written the function, you don’t have to worry about how it works.

As long as all your functions are self-contained, you never have to worry that writing a new function will accidentally screw up a function you’ve already written. The key to writing self-contained functions is to make sure that your function doesn’t alter variables that aren’t passed directly into them as parameters.

Here’s an example of what can happen if you’re not careful. Let’s say you want to write a program that converts Fahrenheit temperatures into Celsius. Click the Fahrenheit/Celsius converter to see what I mean. If you convert 50 degrees Fahrenheit, you get a message saying, “50 degrees Fahrenheit is 10 degrees Celsius.” You could write a script without vars that would look something like this:

 function fahrenToCelsius(faren)

 {

     temp = (faren - 32) * 5/9;

     return temp;

 }

 function convertTemp()

 {

     temp = prompt("what temperature fahrenheit? ","50");

     celsius = fahrenToCelsius(temp);

     alert(temp + " degrees Fahrenheit is " +

     celsius + " degrees Celsius.");

 }

The workings of these functions should be pretty clear to you. One function named convertTemp() calls another function named fahrenToCelsius() and returns the results. Take a moment to make sure you understand what’s going on. Breathe. Breathe. If it’s just not coming to you, revisit Day 4, which covers functions at great length.

OK, ready?

The confusing thing about this example is that the variable called temp is used in both functions. In the convertTemp() function, it’s used to store the temperature in Fahrenheit (which is supplied by the user). In the fahrenToCelsius() function, it’s used to calculate temperature in Celsius. Not only does this confuse us, it also confuses JavaScript. Here’s what happens when you try running the code without vars.

Notice that if you try to convert 50 degrees Fahrenheit, you get a message that says, “10 degrees Fahrenheit is 10 degrees Celsius.” Why does the program suddenly think you entered 10 degrees instead of 50? Let’s trace the functions to see what happened.

When we call convertTemp() and type “50″ into the prompt, we get

 temp = 50;

In the next step, “temp” is passed to the function called farenToCelsius(). Inside farenToCelsius(), the parameter called faren is then set to 50 and “temp” gets set to (50 – 32) * 5/9, which is 10. Before returning the value, you have:

 faren = 50

 temp = 10

Now farenToCelsius() returns 10 to the variable celsius:

 temp = 10

 celsius = 10

And we’re left with the false statement, “10 degrees Fahrenheit is 10 degrees Celsius.”

It’s possible to solve this issue if you carefully avoid naming your variables the same thing. If you didn’t have a variable called temp in both functions, you wouldn’t have a problem.

Unfortunately, this isn’t the best solution. As you start adding more and more functions to your script, it becomes harder to ensure that you’re not re-using variable names. Also, you will repeatedly use lots of variable names, like loop, index, count, and the_name. Coming up with different versions of these commonly used variable names would be a real pain.

A better solution is to tell JavaScript that the variable called temp inside the fahrenToCelsius() function is different from the temp variable in the convertTemp() function. If every function has its own special temp variable, then you don’t have to worry about certain functions messing with the variables of other functions.

If you haven’t guessed yet, this is exactly what var does. Let’s take a look.

The Way of Var

To keep JavaScript from mixing up same-name variables, put var in front of your variables as you declare them. A variable inside a function that’s declared with var is called a local variable, and it only exists inside that function. In general, you want your variables to be local whenever possible.

Here is the JavaScript with the correct vars in it:

 function fahrenToCelsius(faren)

 {

 	var temp = (faren - 32) * 5 / 9;

 	return temp;

 }



 function convertTemp()

 {

 	var temp = prompt("what temperature Fahrenheit? ","50");

 	var celsius = badFahrenToCelsius(temp);

 	alert(temp + " degrees Fahrenheit is " +

 	celsius + " degrees Celsius.");

 }

And here’s how it works. Let’s say we call convertTemp() and type 50 into the prompt. Because we used var before the prompt, this temp is localized to the convertTemp() function. So …

 (inside convertTemp) temp = 50

As before, we pass temp to the function called fahrenToCelsius(). Inside fahrenToCelsius(), the parameter called faren gets set to 50. Then temp is set with the line:

 var temp = (faren - 32) * 5 / 9;

As before, putting that var in front of temp tells JavaScript, “This variable called temp is different than any other variable called temp. This one exists only inside the fahrenToCelsius function.” Once JavaScript finishes with fahrenToCelsius(), the special temp variable vanishes. So, just before fahrenToCelsius() returns,

 faren = 50

 (inside fahrenToCelsius) temp = 10

 (inside convertTemp) temp = 50

fahrenToCelsius() then returns its version of the temp variable, which is 10. Once we leave fahrenToCelsius(), its version of the temp variable vanishes.

When fahrenToCelsius() returns, it sets the variable called celsius to 10:

 (inside convertTemp) temp = 50



 (inside convertTemp) celsius = 10

And thus the alert message says, “50 degrees Fahrenheit is 10 degrees Celsius.” Which is exactly what we want.

To review, by using var before a variable, you localize that variable to the one function that houses it. And once that function ends, the variable ceases to exist.

And that’s the (loose) end of today’s lesson. Now all that’s left is your homework assignment.

Conclusion

I didn’t want to give you anything too heavy on the very first day. Mostly I just wanted to make sure you understood all the elements covered in Part I. After today, we’ll be diving in pretty deep, and, if you don’t have a firm grasp of the basics, you might slide into an abyss of confusion. Or – even worse – stop reading. So, make double-sure you understood:

• why var is a good thing;
• how to use the if-then-else shorthand operator.

Before we get down and dirty tomorrow, put your knowledge to the test with a little exercise I whipped up.

Now, on to the next Lesson

Welcome back. Now that your brain has re-acclimated to the semicolons and curly braces of the JavaScript world, it’s time to learn something useful and exciting.

We’ll spend this lesson sampling those tasty treats known as cookies – the little bits of information you can leave on the computers of people who visit your site. Cookies allow you to give your pages a personal touch. For instance, with a cookie you can “remember” people’s names and serve up a warm greeting every time they re-visit. You can also remember user preferences – if a visitor generally comes in on a slow connection, a cookie lets you know to automatically serve them minimal graphics.

Cookies can be very useful — and sometimes scary:When I buy airplane tickets online, the service I use remembers not only my name, but also where I live and my seating preferences. It even knows who I traveled with last and asks if that person will be joining me on my next flight. There’s a fine line between useful and invasive.

As long as you use them responsibly and effectively (and don’t freak anyone out with Big Brother knowledge), cookies can be extremely handy for all sorts of reasons. So I’m going to show you how they work. But before we get our hands all doughy, we should cover two JavaScript topics:fancy string handling and associative arrays.

Fancy String Handling

Why do you have to learn about fancy string handling before getting into the joyous world of cookies? Well, it turns out that cookies are strings. To store visitor information, you have to first build a special cookie string. And then to read the information when the visitor returns, you have to decode the cookie string. To create and interpret these strings, you have to know your way around JavaScript’s string library.

You should be pretty familiar with strings, since we’ve been working with them all along, but for a refresher, take a look at Part I, Day 2 to see how to make an ordinary string bold:

 var normal_monkey = "I am a monkey!<br>";

 document.writeln("Normal monkey " + normal_monkey);

 var bold_monkey = normal_monkey.bold();

 document.writeln("Bold monkey " + bold_monkey);

The statement:

 var bold_monkey = normal_monkey.bold();

Is the same as the statement:

 var bold_monkey = "<b>" + normal_monkey + "</b>";

The first version just looks neater. One of the many methods of the string object is bold, and it’s sort of silly. Less silly are the methods indexOf, charAt, substring, and split, which actually get inside strings and see what they’re made of. Let’s look at indexOf first.

indexOf

The indexOf finds the location of a set of characters inside a string and tells you where the substring starts. If the string doesn’t contain the substring, indexOf returns “-1.” Here are some examples:

var the_word = "monkey";

Let’s start with the word “monkey.”

var location_of_m = the_word.indexOf("m");

The location_of_m will be “0,” because that’s the starting position of a string.

var location_of_o = the_word.indexOf("o");

The location_of_o will be “1.”

var location_of_key = the_word.indexOf("key");

location_of_key is “3″ because the substring “key” starts with “k,” which is position three in the word “monkey.”

var location_of_y = the_word.indexOf("y");

The location_of_y is “5.”

var cheeky = the_word.indexOf("q");

The cheeky is “-1″ because there’s no letter “q” in the word “monkey.”

A more realistic use of indexOf is:

 var the_email = prompt("What's your email address?", "");

 var the_at_is_at = the_email.indexOf("@");

 if (the_at_is_at == -1)

 {

 	alert("You loser, email addresses must

 	have @ signs in them.");

 }

This little scrap of code asks users for their email address, and then checks to see if it’s a valid address. If the address doesn’t contain an @ sign, it can’t be valid. Enter indexOf, which checks for “@” in the string.

charAt

The charAt finds out what letter is at a certain position inside a string. Here it is in action:

 var the_word = "monkey";

 var the_first_letter = the_word.charAt(0);

 var the_second_letter = the_word.charAt(1);

 var the_last_letter = the_word.charAt(the_word.length-1);

After this, the_first_letter is “m,” the_second_letter is “o,” and the_last_letter is “y.” Note that you can find out how many letters are in a word using the length property of the string. In this case, the_word is “monkey,” so the_word.length is “6.” Don’t forget that the first character of a string is at position “0″ (as in charAt(0)), so the last letter will be in position length-1, which is why the last line features the_word.length-1.

Before going over substring and split, let’s do an exercise with charAt and indexOf.

String Exercise 1

Your task is to write a script that will determine whether the last letter of a word is a vowel or a consonant. You can do it in a clever way, using both indexOf and charAt. Of course you could do it in a much less clever way without indexOf, but remember:the clever monkey gets the golden banana.

Here’s an example of it working. When you’ve finished the exercise, or nearly died trying, learn how it’s done or double-check your work against my solution. Or, if you’re so pleased with your solution that you don’t want to sully your mind with mine, feel free to carry on with the string-a-thon.

Substring

The substring is just like charAt except it can grab entire substrings from a word, not just letters. Here’s the format:

 var the_substring = the_string.substring(from, to);

“From” refers to the position of the first character of the substring, and “to” is, strangely enough, one greater than the last position of the substring. Using this weird method to mark the beginning and end of the substring makes it so that “to” minus “from” gives you the length of the substring:

 var the_string = "monkey";

 var clergy = the_string.substring(0,4);

 var tool = the_string.substring(3,6);

After this batch of code runs, “clergy” will equal “monk”; “tool” will equal “key.”

The substring is often used with indexOf to break apart strings. For example, you could pull out the domain name of a given URL:

 var the_url = prompt("What's the URL?","");

 var lead_slashes = the_url.indexOf("//");

 var domain_start = lead_slashes + 2;

 var without_resource = the_url.substring(domain_start, the_url.length);

 var next_slash = without_resource.indexOf("/");

 var domain = without_resource.substring(0, next_slash);

Which means if you enter “http://www.webmonkey.com/javascript/index.html,” the domain will equal “www.webmonkey.com.” Try the domain grabber to see it work. If this code seems like kind of a drag to you, don’t worry. After I break it down line by line, I’ll show you how to make things much simpler using the split method. First, however, the analysis.

The basic tactic we’re using here is to isolate everything between the first double slash and the next slash. Here’s how we do it:

var the_url = prompt("What's the URL?","");

This just asks the user for a URL. Let’s say they enter “http://www.webmonkey.com/javascript/index.html.”

var lead_slashes = the_url.indexOf("//");

This locates the first two slashes. In the case of our example URL, lead_slashes equals “5″ because the two slashes start at position five. What’s that? You wonder, “if the string is a URL, it always starts with http://, so why don’t we just assume, oh so cleverly, that the two slashes start at position five instead of messing around with indexOf?” The thing is, you never know what people will do at the prompt. They might enter “the URL I want is http://www.blah.com/.” Or they might accidentally put a space before the URL. Or maybe they enter a URL that’s on a secure server, making it something like “https://www.whatever.com/.”One of the hardest things about programming is anticipating all possible cases and then coming up with a way to handle them. Ask people to drop information into an open text field, and you never quite know what you’ll get. So we can’t just assume that the two slashes are at positions five and six. Instead, we need to use the indexOf method to determine exactly where the two slashes start.

var domain_start = lead_slashes + 2;

This calculates the location of the first letter of the domain. Because there are two slashes, the first letter of the domain will be two positions over from the slashes.

var without_resource = the_url.substring(domain_start, the_string.length);

This grabs everything from the beginning of the domain name (which we determined in the previous line of code) and the end of the string. So, using the current example, without_resource is “www.webmonkey.com/javascript/index.html.”

var next_slash = without_resource.indexOf("/");

This figures out the position of the next slash in the string. Everything between the beginning of the string and this slash is domain name. In this case, the next slash is in position seventeen.

var domain = without_resource.substring(0, next_slash);

This final step grabs everything from the beginning of the string to the position of the next slash. In the current case, that makes domain equal to “www.webmonkey.com.”

And there you have it. Yes, it’s a pain. If it makes you feel any better, string handling is a pain in almost all languages. JavaScript 1.2, which was introduced with Netscape 4.0, takes some strides toward making string handling easier. But it’s still a pain.

The whole process can be handled quite a bit more easily with the split method.

The Split Method

When you have a list of things separated by a delimiter, you generally use split. Say you have a list of names separated by commas – split takes that list and puts each of the names into an array. For example:

 var my_friends = "trixie,moxie,sven,guido,hermes";

 var friend_array = my_friends.split(",");

 for (var loop=0; loop < friend_array.length; loop++)

 {

     document.writeln(friend_array[loop] + " is my friend.<br>");

 }

This breaks the string my_friends into an array of five elements. (Happily, JavaScript creates the array for you automatically, so you don’t have to use new Array() to create it yourself).

After breaking the string into an array, we loop through it, writing out each friend’s name. If arrays or loops are unfamiliar to you, check out Part I, Day 4 for an explanation.

We can use split to make the earlier domain grabber easier to code:

 var the_url = prompt("What's the URL?","");

 var first_split = the_url.split("//");

 var without_resource = first_split[1];

 var second_split = without_resource.split("/");

 var domain = second_split[0];

This is much more attractive, and easier to understand, right? Here’s the breakdown:

var the_url = prompt("What's the URL?","");

As before, this requests a URL (let’s go with “http://www.webmonkey.com/javascript/index.html” again).

var first_split = the_url.split("//");

This splits the string into two pieces:first_split[0] is “http:” and first_split[1] is “www.webmonkey.com/javascript/index.html.”

var without_resource = first_split[1];

This just grabs the second element in the array, so now without_resource is “www.webmonkey.com/javascript/index.html.”

var second_split = without_resource.split("/");

This breaks without_resource into three pieces:www.webmonkey.com, javascript, and index.html. See how useful split is?

var domain = second_split[0];

Now all we have to do is grab the first element of the second_split array. And voila! We’re done.

That might seem to be a lot of work at first, but you’ll get used to it pretty fast. I personally love split – it’s a special coding treat.

Now that you’ve learned all the fancy string handling routines for cookies, take a breather – you’ve just digested quite a mouthful of information. Go for a little stroll. Have a snack. OK? Then it’s time to learn one last thing before sallying forth into cookie country:associative arrays.

Associative Arrays

If you’ve done any JavaScript programming, you’re probably familiar with arrays, which let you store lists of items and also give you access to the images, forms, and form elements of your HTML pages. In Part I, Day 4, I showed you how to create and manipulate arrays that are indexed by number. For example:

 var an_array = new Array("hickory","dickory");

 var element_one = an_array[0];

 var element_two = an_array[1];

 an_array[2] = "doc";

This creates a new array and initializes it with two strings. The first element of the array is accessed using its index number, “0.” The second element, element 1 of the array, is accessible with an_array[1]. You can add to an array by assigning something to a specific index of the array:in the example above, I made the third element of the array equal to “doc.” Now the array contains “hickory, dickory, doc.”

Associative arrays are just like the array above, except rather than using numbers to index elements in the array, you use words.

 var phone_book = new Array();

 phone_book["sleepy"] = "(203) 555-1234";

 phone_book["happy"] = "(203) 555-2345";

This creates sort of a phone book. Access the phone number for “happy” by writing:

 var happy_number = phone_book["happy"];

Try out the working phone book example on the next page to see how an associative array might work (and get a major refresher on the use of JavaScript with forms at the same time).

Example of an Associative Array

Click here.

This example is a bit involved, so let’s go through it slowly. First let’s look at the phone book itself. The phone book, which is defined in the header ( phone_book) and has seven entries, looks like this:

 var phone_book = new Array();

 phone_book["happy"] = "(203) 555-1234";

 phone_book["sleepy"] = "(203) 555-2345";

 phone_book["sneezy"] = "(203) 555-4321";

 phone_book["sleazy"] = "(203) 555-3245";

 phone_book["sneery"] = "(203) 555-3213";

 phone_book["bleary"] = "(203) 555-2365";

 phone_book["tweaked"] = "(203) 555-1664";

The key to each entry is the name of the dwarf, and the value of each entry is that dwarfs’s phone number. When we want to get a phone number for our favorite dwarf, say “Sneezy,” we write this:

 var the_number = phone_book["sneezy"];

Now let’s look at the form:

 <form name="the_form">



 <b>Name:</b>

 <select onChange =

 "displayNumber(phone_book,this.options[selectedIndex].value);">

 <option value="happy">Happy

 <option value="sleepy">Sleepy

 <option value="sneezy">Sneezy

 <option value="sleazy">Sleazy

 <option value="sneary">Sneery

 <option value="bleary">Bleary

 <option value="tweaked">Tweaked

 </select>



 <p>

 <b>Number</b>

 <input type="text" name="number_box" value="">

 </form>

Note that the form and the elements inside the form have names. This allows us to read and write to the form elements. Also, take a look at the onChange handler in the select tag. This says that when the select is changed, it calls the function displayNumber, which is defined up in the header. If I use the pulldown to select “sneezy,” the expression this.options[selectedIndex].value returns “sneezy.” If you need a refresher on this kind of form madness, check out Part I, Day 5. Once we’ve figured out what the user has selected, we jump to the displayNumber function, which looks like this:

 function displayNumber(phone_book, entry)

 {

     var the_number = phone_book[entry];

     window.document.the_form.number_box.value = the_number;

 }

It takes two parameters – a phone book and a name – to make this function work. The first line of the function,

 var the_number = phone_book[entry];

looks the name up in the phone book, and the next line,

 window.document.the_form.number_box.value = the_number;

puts that number into the form element called number_box.

And there you have it. As you can see, associative arrays are a good way to link one string to another. They’re useful for linking names to phone numbers, to passwords, to birthdays, and all kinds of things. A few lessons from now, I’ll introduce another useful trick you can do with associative arrays, so don’t cast them into the facts-best-forgotten pit quite yet.

And now, if you’re ready for it, let’s sink our teeth into cookies!

Cookie Introduction

Now that you’ve mastered advanced string handling and associative arrays, it’s time to open up the cookie jar. As I mentioned earlier, cookies are little bits of information that you can leave on a user’s hard drive, where they stay even after the user leaves your site or turns off the computer, which is extremely useful when you want to remember information about repeat visitors.

Let’s look at a basic example of a working cookie. In this example, we set a cookie on one page and then read it from another page. As you play around with the example, try to think about how you would do this without cookies. Here’s the very basic example of a working cookie.

Had your fill of cookie dough tasting? Let’s move on to the next step of the recipe.

More About Cookies

Because cookies involve writing to, and reading from, users’ hard drives, security issues arise that the people who wrote Netscape, MSIE, and the other cookie-friendly browsers had to confront. The most important limitations for this tutorial are:

1. Not everyone has a cookie-friendly browser (but most do).
2. Not everyone who has a cookie-friendly browser will accept your cookies (but most will).
3. Each domain is allotted only 20 cookies, so use them sparingly.
4. Cookies must be no larger than 4 KB. That’s just over 4,000 characters, which is plenty.

With those limitations in mind, let’s learn about setting cookies.

Setting Cookies

Setting a basic cookie is very easy. All you have to do is create a string in the form of cookie_name=value and then set the document.cookie property to that. The only trick:cookie values must never have spaces, commas, or semicolons. Happily, you don’t really have to worry about this because a pair of functions will code and decode your properties:they are escape() and unescape().

Our simple example, which stored your name as a cookie, looks like this:

function setCookie()

{

    var the_name = prompt("What's your name?","");



    var the_cookie = "wm_javascript=" + escape("username:" + the_name);



    document.cookie = the_cookie;



    alert("Thanks, now go to the next page.");



}

The middle two lines of this function are the critical ones:

var the_cookie = "wm_javascript=" + escape("username:" + the_name);

If I entered “dave thau” at the prompt, this line would create a string that looks like wm_javascript=username%3Adave%20thau. This means that I’m going to save a cookie named wm_javascript to the hard drive. That cookie is going to have the value username%3Adave%20thau – the escape() function replaced the colon after username with %3A and the space between “dave” and “thau” with a %20.When we read the cookie, we’re going to look for the cookie named wm_javascript, then grab the username%3Adave%20thau, unescape() it, which changes the %3A back to a colon and the %20 back into a space, and then chop off the username:.

document.cookie = the_cookie;

And this sets the cookie. Easy, huh?

Now let’s learn how to read cookies.

Reading Cookies

Once you save a cookie to someone’s hard disk, it’s easy to read. Here’s the code that reads the example cookie:

function readCookie()

{

    var the_cookie = document.cookie;

    var the_cookie = unescape(the_cookie);

    var broken_cookie = the_cookie.split(":");

    var the_name = broken_cookie[1];

    alert("Your name is:" + the_name);

}

The first line is the important one. Whenever your browser opens a Web page, it calls in whatever cookies it can, then loads them into the document.cookie property.

The tricky part about reading cookies is getting the information you want out of them. Remember, the cookie we set looks like this:wm_javascript=username%3Adave%20thau. Everything after the first line of the function is devoted to pulling the username out of the cookie. Here’s a breakdown of that process:

var the_cookie = unescape(the_cookie);

Undo the stuff that the escape() function created. In this case, unescape() swaps the %3A with a colon, and the %20 with a space.

var broken_cookie = the_cookie.split(":");

Split the cookie into two parts at the colon.

var the_name = broken_cookie[1];

Grab the part after the colon, which is dave thau.

alert("Your name is:" + the_name);

Yee-haw!

This example used a cookie that only stored one bit of information:the username. As I said before, cookies can store up to 4 KB, which leaves plenty of room for quite a bit more information.

Complicated Cookie Reading

If you want your cookie to contain more than just one piece of information, you can make the value of the cookie as long as you want (up to the 4000 character limit). Say you’re looking to store a person’s name, age, and phone number. You do something like this:

var the_cookie = "username:thau/age:older than the hills/phone:411";

document.cookie="my_happy_cookie=" + escape(the_cookie);

I use a slash to separate property names and a colon to distinguish the property name from the property value. The slash and colon are arbitrary choices – they could be anything, like say, this:

var the_cookie = "username=thau&age=older than the hills&phone=411";

document.cookie="my_happy_cookie=" + escape(the_cookie);

The delimiters you choose are up to you. Just remember what you used so you can decode the cookie later.

As with our simple example, the easy part is setting the cookie. Things get a little sticky, however, when it comes to pulling the information out of the cookie when you need it. I suggest using associative arrays to store all the information. For example, let’s say you saved this to someone’s hard drive:

my_happy_cookie=username:thau/age:older than the hills/phone:411

You could put the information into a handy associative array like this:

function readTheCookie(the_info)

{

// load the cookie into a variable and unescape it



var the_cookie = document.cookie;

var the_cookie = unescape(the_cookie);



// separate the values from the cookie name



var broken_cookie = the_cookie.split("=");

var the_values = broken_cookie[1];



// break each name:value pair into an array



var separated_values = the_values.split("/");



// loop through the list of name:values and load

// up the associate array



var property_value = "";



for (var loop = 0; loop < separated_values.length; loop++)



{

property_value = separated_values[loop];

var broken_info = property_value.split(":");

var the_property = broken_info[0];

var the_value = broken_info[1];

the_info[the_property] = the_value;

}



}

If you had this function in your JavaScript, you could call it like this:

var cookie_information = new Array();

readTheCookie(cookie_information);

And then you’d have cookie_information["username"], cookie_information["age"], and cookie_information["phone"] set correctly.

This may look a little funky, but actually it’s not that hard. Here’s a step-by-step analysis of what’s going on:

var the_cookie = document.cookie;

This is the easy part. It puts the cookie into a variable.

var the_cookie = unescape(the_cookie);

Undo the work of escape().

var broken_cookie = the_cookie.split("=");
var the_values = broken_cookie[1];

These lines make the_values equal to username:thau/age:older than the hills/phone:411.

var separated_values = the_values.split("/");

This makes an array called separated_values that contains three elements:separated_values[0] = "username:thau"
separated_values[1] = "age:older than the hills"
separated_values[2] = "phone:411"


for (loop = 0; loop < separated_values.length; loop++)

This loops through the three elements of separated_values.

property_value = separated_values[loop];

This grabs the current name:value pair, the first one being username:thau.

var broken_info = property_value.split(":");

This breaks the pair into two elements into an array called broken_info where broken_info[0] = "username"
broken_info[1] = "thau"


var the_property = broken_info[0];

The first time through the loop, the_property will be “username”

var the_value = broken_info[1];

the_value will be “thau.”

the_info[the_property] = the_value;

Here’s where associative arrays come in handy. This makes the_info["username"] = "thau". So now, when you want the username from the cookie, you can just say something like var the_name = the_info["username"];.

And so on

Each time through the loop, a new element gets added to the_info. At the end of the loop is the_info["username"] = "thau", the_info["age"] = "old as the hills" and the_info["phone"] = 411.

It is a bit cumbersome, but it’s the way I prefer to get large quantities of information in and out of cookies. There are lots of ways to do it, and if you find another way that you like, all the power to you.

Okay, the last thing you need to know is what to do when you’re dishing out multiple cookies.

Reading and Writing Multiple Cookies

On the last page, we learned how to cram lots of information into one cookie. Another way to do this is with multiple cookies.

Saving multiple cookies is very straightforward. We’ve learned that every cookie has a name. In the last example, we named the cookie my_happy_cookie, and did something like this:

var the_cookie = "my_happy_cookie=happiness_and_joy";

document.cookie = the_cookie;

To save multiple cookies, just give each cookie a different name. If you’re adding a new cookie, setting document.cookie doesn’t delete cookies that are already there. So if we do this:

var the_cookie = "my_happy_cookie=happiness_and_joy";

document.cookie = the_cookie;

var another_cookie= "my_other_cookie=more_joy_more_happiness";

document.cookie = another_cookie;

You’ll now have access to both cookies. It’s sort of weird, so make sure you understand what’s going on.

Let’s assume you executed the last block of code and you want to access my_happy_cookie. If you look at document.cookie, you’ll see this:

my_happy_cookie=happiness_and_joy;

my_other_cookie=more_joy_more_happiness;

If you don’t believe me, just look at your cookie.

This is very nice, but it makes reading a specific cookie a bit more difficult. Here’s some (slightly simplified) code that allows you to isolate a specific cookie:

function WM_readCookie(name) {

if (document.cookie == '') {



// there's no cookie, so go no further



return false;

} else {



// there is a cookie



var firstChar, lastChar;

var theBigCookie = document.cookie;

firstChar = theBigCookie.indexOf(name);



// find the start of 'name'



if(firstChar != -1) {



// if you found the cookie



firstChar += name.length + 1;



// skip 'name' and '='



lastChar = theBigCookie.indexOf(';', firstChar);



// Find the end of the value string (i.e. the next ';').



if(lastChar == -1) lastChar = theBigCookie.length;



return unescape(theBigCookie.substring(firstChar, lastChar));



} else {



// If there was no cookie of that name, return false.



return false;

}



}



}



// WM_readCookie

Since this is very well commented, I’ll just let you take a look at it and figure out what’s happening on your own (c’mon, you know everything you need to know to make sense of this).

Once you’ve parsed that information, let’s leave our “setting and reading basic cookies” discussion and look at some of the cooler things you can do with cookies.

More About Cookies

So far, you’ve learned how to set and read a basic cookie. Unfortunately, your basic cookie will get deleted automatically when a user quits out of the browser. Sometimes this is for the best. Since each domain, such as webmonkey.com, is allowed only 20 cookies on any user’s machine, you don’t want to waste space with cookies that aren’t saved between browser sessions.

However, if you do want to save cookies on users’ hard drives, you have to set an expiration date, which has to be in a special format called GMT. For example:

Mon, 27-Apr-1998 00:00:00 GMT

(This is the date on which Koko the gorilla had her AOL chat session.)

Getting the GMT right can be sort of a pain, especially when it comes to figuring out the day of the date. Is it a Monday? A Friday? To make things easier on you, JavaScript has a date method called toGMTString. Here’s an easy way to set an expiration date to some distant time in the future:

var the_date = new Date("December 31, 2023");

var the_cookie_date = the_date.toGMTString();

Once you establish an expiration date for your cookie, you have to add this information before you set the cookie. Therefore, your cookie should look like this:

cookie_name=blah_blah;expires=date

Basically, you’re just adding expires=date to the cookie string and separating the different cookie components with a semicolon.

Here’s how to build a cookie that will last until the end of the Mayan calendar:

function setCookie()

{



// get the information



//



var the_name = prompt("What's your name?","");

var the_date = new Date("December 31, 2023");

var the_cookie_date = the_date.toGMTString();





// build and save the cookie



//



var the_cookie = "my_cookie=" + escape(the_name);

the_cookie = the_cookie + ";expires=" + the_cookie_date;

document.cookie = the_cookie;



}

At the end of all this, the_cookie will look something like this:

my_cookie=thau;expires=Fri, 31-Dec-2023 00:00:00 GMT

When this cookie is set, it will live on the user’s hard drive until the expiration date.

The expiration date also allows you to delete cookies you don’t want users to have any more. If you set the expiration date of a cookie to a time that’s already passed, the cookie will be deleted from the cookie file.

In addition to name and expires, there are two other important cookies components that you’ll need to know about: path and domain.

Cookie Path and Domain

This is the last tricky cookies hurdle: By default, a cookie can be read only by HTML pages that sit on the same web server and in the same directory as the page that set the cookie.

For example, if you have a JavaScript on “http://chimp.webmonkey.com/food/bananas/banana_puree.htm” that asks people for their names, you might want to access a given name on another one of your Web pages, such as the homepage (http://chimp.webmonkey.com/.) To allow this, you have to set the “path” of the cookie. The “path” sets the top level directory from which a cookie can be read. Set the path of a cookie to the top-level directory of your Web pages, and the cookie is readable by all your Web pages.

Do this by adding path=/; to your cookie. If you just wanted the cookie readable solely in the “food” directory, you’d add path=/food; to your cookie.

A second hitch is that some Web sites have lots of little domains. For example, Webmonkey might have pages at “chimp.webmonkey.com,” “gorilla.webmonkey.com,” and “ape.webmonkey.com.” By default, if a Web page on “chimp.webmonkey.com” sets a cookie, only pages on “chimp.webmonkey.com” can read it. If we wanted all the machines in the “webmonkey.com” domain to read the cookie, we’d have to add “domain=webmonkey.com” to the cookie. Don’t get clever though. Pages at “republicans.com” can’t set or read cookies from “democrats.com.”

To put all the above together – set a cookie on the Web page “http://chimp.webmonkey.com/food/bananas/banana_puree.htm” that we want to be readable by all Webmonkey pages – we’d have to do this:

function setCookie()

{

var the_name = prompt("What's your name?","");

var the_cookie = "cookie_puss=" + escape(the_name) + ";" ;

var the_cookie = the_cookie + "path=/;";

var the_cookie = the_cookie + "domain=webmonkey.com;";

document.cookie = the_cookie;

}

And so ends the cookies lesson. Let’s review what we’ve learned so far and then go onto a final exercise.

Lesson 2 Review

Today was a big day, probably the biggest in this set of lessons. However, the things you learned today take you a significant step closer to the ability to create JavaScripts that are more than just cute. For example, today’s homework assignment is to add a “bookmarks” feature to your do-it-yourself Web browser.

Here are the main topics we covered today:

Advanced String Handling

Including

• charAt – getting a character at a certain position
• indexOf – getting the position of a character
• substring – getting a piece of a string
• split – splitting a string up into an array

Associative Arrays

Another JavaScript datatype useful for storing things like phone books, password lists, birthdays, and cookie information

Cookies

How to set them, read them, and make them permanent

Tomorrow we’ll cover:

• Preloading images to speed up image swaps
• Creating your own objects and a do-it-yourself virtual pet
• Getting to hard-to-find objects

Before closing the JavaScript book entirely for the day, you can hone your knowledge by trying this homework assignment.

OK, ready? Next!

As we learn more and more JavaScript, we can build increasingly complex applications. In the previous lesson, we added long-term memory to our JavaScripts using cookies. Now we’ll add a sense of time to our growing stock of JavaScript knowledge.

Timing Events and Browser Differentiation

In JavaScript, the process of moving something around the screen usually involves a loop, where the element is moved little by little over time. The question is, how do you tell JavaScript to “move that piece over a little bit every 10th of a second or so”?

Unfortunately, this business of moving elements around is where the assortment of browsers differs the most. Almost everything I’ve covered up until now (except image swaps) works in basically all JavaScript-ready browsers. With dynamic HTML, however, you have to take special measures to make your scripts work across all the different browsers. So after I cover timing events, I’ll talk about ways to detect the type of browser a visitor is using (allowing you to serve them appropriate content). Luckily these two skills – timing events and detecting browser type – will also be useful when it comes to other neat-o features of the newer browsers.

Let’s start with timing events on your pages.

How to Time Events

It’s easy to time events in JavaScript. The key commands are the setTimeout() and clearTimeout() methods. With setTimeout(), JavaScript executes a certain command some time in the future. And if you change your mind, clearTimeout() cancels setTimeout.What follows is the basic format of a setTimeout.

 var the_timeout = setTimeout("some javascript statement",

                   some_number_of_milliseconds);

Here’s an example:

 var the_timeout = setTimeout("alertAndRedirect();",3000);

There are three important things to notice about this statement:

setTimeout returns a value.

In this statement, the_timeout is a variable that keeps track of this specific setTimeout. If you ever want to cancel this specific setTimeout, you can refer to it using the variable. We’ll see an example of this later. And, of course, as is true for all variables, it doesn’t have to be called the_timeout. It can be called “Frankenstein” for all JavaScript cares.

The first parameter to setTimeout is a string that contains a JavaScript statement.

In this example, the first parameter is the string:"alertAndRedirect();"alertAndRedirect is just a function I wrote that launches an alert box and redirects to this page when the user clicks “OK.” Note that the stuff in quotes is a complete JavaScript statement, with a semicolon and everything. If you executed only this statement, it would call the alertAndRedirect function. The setTimeout merely schedules that statement to occur at a specific time.If you want to see how it works, here’s the alertAndRedirect() function:

 function alertAndRedirect()

 {

 	alert('ok!  exhale!');

 	window.location.replace("timing.htm");

 }

The second parameter of setTimeout indicates how many milliseconds from now you want to execute the first parameter.

There are 1,000 milliseconds in a second. So, to have something happen three seconds from now, the second parameter has to be 3,000 milliseconds. JavaScript is told by setTimeout to “call this statement x many milliseconds from now.” Remember that, and you’ll be fine. To make sure you know what’s going on, here’s a little exercise: Make a button that tells you when three seconds, six seconds, and nine seconds have passed. Like this one:When you’ve figured it out, or gotten sick of trying, take a look at my solution to the timer exercise:

Click here.

Timing Loops – What They Are

If you’re like me, this exercise threw you at first (and if it came naturally, feel free to pat yourself on the back – you deserve it). Here’s the right way to do it:have the button’s onClick call the following function:

 function ringBell()

 {

    var timer1 = setTimeout("window.document.the_form.the_text.value='3 seconds!';",3000);

    var timer2 = setTimeout("window.document.the_form.the_text.value='6 seconds!';",6000);

    var timer3 = setTimeout("window.document.the_form.the_text.value='9 seconds!';",9000);

 }

It says, “write ’3 seconds’ three seconds from now, ’6 seconds’ six seconds from now, and ’9 seconds’ nine seconds from now.” Makes sense, right? However, the following doesn’t work:

 function doDumbTimer()

 {

    var timer1 = setTimeout("window.document.the_form.the_text.value='3 seconds!';",3000);

    var timer2 = setTimeout("window.document.the_form.the_text.value='6 seconds!';",3000);

    var timer3 = setTimeout("window.document.the_form.the_text.value='9 seconds!';",3000);

 }

 

See what happens when you try this faulty timer code? Notice that if you wait three seconds, one of the three timing messages mysteriously appears in the text box and then just stays there. In the bad code above, each of the setTimeouts get executed consecutively, (i.e., it’s saying, “write ’3 seconds’ three seconds from now, ’6 seconds’ three seconds from now, and ’9 seconds’ three seconds from now”). So after three seconds pass, all three things happen, and you end up with whichever one happens to fire last – definitely not what you want.Once you understand it, setTimeout() is quite easy to use. However, one thorny question does arise:How can you make a timer that does something every two seconds, from now until forever? For example:

Click here.

Don’t worry about the stop timer button for now, I’ll cover clearTimeouts in a bit. Just think about how you would get this timer to loop indefinitely. It’s actually a very important question, and not just a silly exercise. As I mentioned earlier, when you want to make stuff move slowly across the screen using dynamic HTML, execute a small timed loop: “Move it over a little, wait, move it more, wait … and so on.” Are you thinking about it? Well, the answer’s not an easy one. You can’t just have a function, like the one above, that changes the text box every two seconds, like so:

 function theTimer()

 {

    var timer1 = setTimeout("changeTextBoxTo(2);",2000);

    var timer2 = setTimeout("changeTextBoxTo(4);",4000);

    var timer3 = setTimeout("changeTextBoxTo(6);",6000);

    var timer4 = setTimeout("changeTextBoxTo(8);",8000);

    var timer5 = setTimeout("changeTextBoxTo(10);",10000);

    .

    .

    .



 }

 

Because, well, you can see why not: If you want something to loop infinitely, and you used this method, you’d have to have infinite lines of code. Among other problems, like serious carpal tunnel syndrome, it would take a really long time to download a page with an never-ending number of JavaScript lines, so that’s not really an option. This doesn’t work either, even though it looks sort of cool:

 function theTimer()

 {

 	the_time = 0;

 	hellIsHot = true;



 	while (hellIsHot == true)

 	{

 	  the_time += 2;

 	  var timer = setTimeout("changeTextBoxTo(the_time);", the_time*1000);

 	}



 }

 

Study this thing for a while to see what I’m getting at. But don’t try running it. The results will make you very unhappy. Let’s do a few iterations of the “while” loop:

Iteration 1

• while (hellIsHot == true) :Yup, hell sure is hot.
• the_time += 2 :so now the_time = 2
• var time = setTimeout(“changeTextBoxTo(2);”, 2000) :so, two seconds from now, the textbox will change to “2.” That’s what we want.

Iteration 2

• while (hellIsHot == true) :Verily, hell is still hot.
• the_time += 2 :so now the_time = 4
• var time = setTimeout(“changeTextBoxTo(4);”, 4000) :so, four seconds from now, the textbox will change to “4.” OK, that’s good.

Iteration 3

• while (hellIsHot == true) :Nope, hell isn’t getting any colder.
• the_time += 2 :so now the_time = 6
• var time = setTimeout(“changeTextBoxTo(6);”, 6000) :so, six seconds from now, the textbox will change to “6.” Fine.

Iteration 4

• while (hellIsHot == true) :OK already! It’s hot!
• yadda
• yadda yadda

You get the picture. It looks like this code should do the right thing. Unfortunately, it doesn’t. Instead it creates this unending loop, scheduling setTimeouts until hell freezes over. There are two problems here. First, while it’s in the loop, your browser can’t do anything else. It’ll basically freeze, spinning its wheels, scheduling setTimeouts forever. Second, every time a setTimeout is scheduled, the browser has to remember what you’re scheduling and when you want it to run. Eventually your browser will run out of memory. When this happens, your browser will crash, or your computer will crash, or you’ll get mad and never write another line of JavaScript again. Not good at all. Fortunately, there is a way to write a successful looping timer.

Timing Loops – How to Do Them

To get a timer working in a loop, you have to write a function that calls itself. Happily, this is possible in JavaScript. Here’s an example:

 var the_count = 0;

 var the_timeout;

 function doTimer()

 {

 	window.document.timer_form.the_text.value = the_count;

 	the_count += 2;

 	the_timeout = setTimeout("doTimer();", 2000);

 }

This is the timer that was used on the previous page. When a user clicks on the button, it calls this function, which in turn writes the current value of the_count to the textbox. It then increments the_count by two, and then calls itself in a setTimeout. In two seconds, the setTimeout is executed, cleared, and the function runs again. It changes the value in the textbox, increments the_count, and again uses setTimeout to call itself in two seconds. During those two seconds, the browser just sits around, doing the things that browsers do. When two seconds pass, the function runs again. And another setTimeout() is set once the_count is incremented by two. You don’t run out of memory because there’s only one setTimeout() running at any given time.

This works, whereas the infinite hell-freezing-over loop on the last page didn’t, because infinite “while” loops lock the browser up and prevent anything from happening during the execution of the loop. This setTimeout trick makes sort of a slow loop. In the above example, the browser has two seconds to do things between each iteration.

How to Cancel a setTimeout

Now that you know how to make a timer loop run infinitely, you’ll probably want to know how to stop it. This is the magic of clearTimeout. If you look at the HTML of the timer on the previous page, you’ll see the following form element:

 <input type="button" value="stop timer"

  onClick="clearTimeout(the_timeout);">

This is the button you hit to stop the timer. The command to stop a setTimeout is clearTimeout(), which is actually quite simple. When you set a setTimeout like this,

 the_timeout = setTimeout("some javascript",3000);

you can cancel it like this:

 clearTimeout(the_timeout);

Simple, no? Now let’s take a look at a slightly more complicated looping timer:one that actually tells time!

A JavaScript Clock

Click here

This clock reads the time off your computer and then updates the textbox every half second. I’m showing you this for two reasons. First, it’s another example of making a timer by having a function call itself. Second, it shows you a little more about the Date object, which I mentioned back when we covered cookies.

Here’s the code:

 function writeTime() {



   // get a date object

   var today = new Date();



   // ask the object for some information

   var hours = today.getHours();

   var minutes = today.getMinutes();

   var seconds = today.getSeconds();



   // fixTime makes the minutes and seconds look right

   // it just sticks a zero in front of numbers less than 10

   minutes = fixTime(minutes);

   seconds = fixTime(seconds);



   // put together the time string and write it out

   var the_time = hours + ":" + minutes + ":" + seconds;

   window.document.the_form.the_text.value = the_time;



   // run this function again in half a second

   the_timeout= setTimeout('writeTime();',500);



 }



 function fixTime(the_time) {



 	if (the_time <10)

 	{

 		the_time = "0" + the_time;

 	}

 	return the_time;

 }

It might look a little long, but that’s just because it’s well commented. Let’s go through the code line by line.

var today = new Date();

Just as new Array() creates a new Array object for you to fill, new Date() creates a new Date object. Once you have the object, you can ask it questions about itself. When you create a Date object with nothing between the parentheses, as we’ve done, JavaScript looks at the computer’s clock and uses it to create a new Date object. Now that we have a Date object, called “today,” we can get information from it.

var hours = today.getHours();

This is how to get the current hour. It’s military time, so if it’s 2 p.m. when you get the new Date(), getHours() will return “14.” Understand that getHours() is a built-in method call of the JavaScript Date object. As is the case with most JavaScript objects, the way to know when you should use getHours is by checking with a good JavaScript reference book.

var minutes = today.getMinutes(); var seconds = today.getSeconds();

These lines are just like getHours();.

minutes = fixTime(minutes);

One problem with getMinutes is that if it’s 11:01, getMinutes will return a “1.” This is fine unless you want to make a clock like we do, in which case, we want the “1″ to be written as “01.” That’s what the fixTime function that I wrote does. It’s a pretty straightforward function, so I’m not going to describe it. Just take a quick look at it to see what it’s doing.

The next two lines put the string together and write it to the form element.

We’ve seen this sort of nonsense a million times.

the_timeout = setTimeout('writeTime();', 500);

This is the line that makes the loop. It says “in half a second, call the function again.” When the function gets called again, it does another today = new Date(), which sends it to the computer’s clock again. The interval could have been every second, but doing it every half second helps keep the time more accurate.

OK, enough of the looping timer trick. There’s one more thing you should know about timers:how to use them with variables.

Using Timers with Variables

Like I mentioned earlier, setting a setTimeout is like marking a time in the future for JavaScript to execute a statement. This is fine and dandy when your setTimeout is something like this:

 var the_timeout = setTimeout("alert('Hello!');", 60000);

Here you’re telling JavaScript to wait one minute and then throw up a “Hello!” alert box. But what if you want to do something like this:

 var the_string = "hello";

 var the_timeout = setTimeout("alert(the_string);", 60000);

This tells JavaScript to wait one minute and throw up an alert box that contains whatever variable provided by the_string. So after a minute, JavaScript looks for a variable called the_string and calls alert() with that variable. The problem? In a minute’s time, the_string might contain something totally different from “Hello!” In fact, if you had the above two lines of JavaScript inside a function, the setTimeout would probably give you an error. For instance, if you had a function like this:

 function alertInAMinute()

 {

     var the_string = "hello";

     var the_timeout = setTimeout("alert(the_string);", 60000);

 }

And then you called the function inside a link like so:

 <a href="#" onClick="alertInAMinute(); return false;">blah!</a>

This would probably produce an error because you defined the variable called the_string inside the function using var. Remember:When you use var inside a function, as far as JavaScript is concerned, it exists only inside that function. This function creates a variable called the_string, sets the setTimeout, then exits. Because you used var, the variable called the_string is erased from JavaScript’s memory. And then, when JavaScript looks for the_string in its memory a moment later, it’s nowhere to be found, and you are dished up an error.

This problem occurs because you’re passing a variable to setTimeout. Eliminate the problem by passing it the value of the variable instead of the variable itself. Here’s how:

 function alertInAMinute()

 {

     var the_string = "hello";

     var the_timeout = setTimeout("alert(" + the_string + ");",60000);

 }

This code pulls the the_string variable out from inside the quotes of setTimeout. And because the variable isn’t in quotes, JavaScript puts in the value of the variable.

You may be asking why I bothered with a variable in the first place. Well, I’m simplifying things to make a point. When you tackle today’s homework, you’ll see where this really makes a difference.

OK, enough of timers. As I said earlier, timers are used all over the place in dynamic HTML, so they’re worth learning. But don’t get too swept up in multimedia merriment – to make all this safe for the teeming millions who can’t see dynamic HTML, you need to know how to detect what browsers your visitors are using.

Browser Detection

This section (obviously) needs to be updated.

Almost everything I’ve covered so far works on all JavaScript-enabled browsers. However, there are some things that just don’t fly on certain browsers. MSIE 3.0, for one, doesn’t support image swapping. So if you have a page that depends on image swapping to function correctly, either you nix the image swapping altogether, or you furnish MSIE 3.0 visitors with information tailor-made for their browser.

There are a few approaches to dealing with browsers with different capabilities. The most straightforward method is to determine what browser someone is using and then serve up the appropriate browser-specific information.

There are several ways to do this. Some sites ask you to choose which browser you’re using right up front; e.g., “Click here if you’re using Netscape.” But this isn’t an ideal solution for a number of reasons. For one thing, it’s a hassle for the user (and, with impatient users, that extra click may mean the difference between staying or backing out). It also means that you have to maintain duplicate (or maybe even more) versions of the same pages.

An alternative is to use JavaScript to figure out what browser someone is using, and automatically route the visitor to a set of pages that works for that browser. Unfortunately, this still forces you to maintain two or more versions of each page, which is really a drag.

A much better solution is to make your pages smart enough to look one way to some browsers and another way to other browsers (which is what we’ll concentrate on for the rest of today’s lesson).

How to Detect Browsers

This section (obviously) needs to be updated.

Along with the Document object, each browser window has a Navigator object, which has two properties containing all the information about the sort of browser you’re using. These are appName and appVersion.

The application name is appName. If you’re using a version of Netscape, and you have this line in your JavaScript:

 var the_browser_name = navigator.appName;

Then the_browser_name will be “Netscape.” For MSIE, the_browser_name would be “Microsoft Internet Explorer” (each browser company comes up with its own name). So, if you just want to know whether someone’s using Netscape or MSIE, use appName.

More information is stored in the appVersion. A sample appVersion is “4.03 [en] (Win95; I),” which is the browser I’m using as I type this very tutorial. It’s Netscape version 4.03, English International, for Win95/NT. Whatever. Beyond the version number, you probably won’t need all that information. Happily, getting the version number out of this monster string is quite easy:You just grab the first number. The quickest way to do this is with a function called parseFloat(), which pulls the first thing that looks like a decimal number out of the string and returns it:

 var the_browser_version = navigator.appVersion;

 var the_version_number = parseFloat(the_browser_version);

Unfortunately, this little trick won’t work for Internet Explorer 5.0 or later because Microsoft decided to start their appVersion string with the numbers 4.0. Why did they do this? To irk us all! Luckily, except for some crazy IE5 specific stuff, JavaScript is the same in IE5 and IE4, so in general it’s ok for your scripts to be a bit misinformed. If you REALLY want to be sure you know what browser someone is using, refer to Dr. Richard Blaylock’s browser detector library.

OK, let’s do something useful with this information. Click the button below to see an incredibly straightforward use of the Navigator object.

Here are the two relevant functions. Clicking on the button calls browserSizeUp():

 function browserSizeUp()



 {

    var browser = navigator.appName;

    var version = versionNumber();



    if ((browser == "Netscape" ||

         browser == "Microsoft Internet Explorer") && (version >= 4))



    {

    alert("The browser doctor says:Now that's a pretty fancy browser

           you got there!");



    } else {



    alert("The browser doctor says:Hmm. Maybe it's time to upgrade.");



    }



 }



 function versionNumber() {



   // return version number (e.g., 4.03)



   return parseFloat(navigator.appVersion)

 }

What’s happening? If we like the user’s browser, we give one alert. We dish up a different alert if we think he or she needs to get modern. In a real-life application, you’d use document.writeln() to generate HTML that’s suitable for different browsers.

What users see depends on which browser their using. Unfortunately, with all the different browsers, browser versions, and platforms out there, it’s nearly impossible to keep track of which browsers support what features. And it’s only going to get worse as the number of browsers grows and the number of features you have to keep track of continues to increase.

Luckily, there’s a way to preserve your sanity. Read on and learn about object and method detection.

Object and Method Detection

Ultimately, your best approach is to determine what feature you need for any given bit of JavaScript code, and then make sure that the browser has that feature.

For example, we know that some browsers can do image swaps and others can’t. Good thing this ability is easy to detect:just make sure that the browser has the document.images object:

 if (document.images)

 {

 	do lots of image swap stuff

 }

This makes sure that your image-swap code will be run only by browsers that support image swaps. If the document.images object doesn’t exist, the if test fails and the code doesn’t run.

This sort of trick works for methods and functions, too. Not all browsers have every method. For example, in Netscape 4 you can actually move windows around the screen using the window.moveTo() method. If you want to check to see if that method exists before you invoke it, do this:

 if (window.moveTo)

 {

 	make that window fly

 }

By making sure the browser supports the feature you want to use before you invoke it, you ensure that your script will work without any obnoxious script errors. By employing a feature-checking strategy, rather than a browser-checking one, you don’t have to keep track of the capabilities of every browser in every version on every platform.

OK, that’s all about browser detection. But while we’re on the topic of browsers, let’s take a look at another browser-centered object: the History object.

If you look at the JavaScript Object Hierarchy, you’ll see we’ve touched on all but two of the top-level objects: Packages and History. Packages will have to wait for a Java tutorial, but History is JavaScript specific and very useful.

History contains the list of URLs that your browser has visited. Every browser has a way to call up a list of the pages you’ve visited recently. Clicking and holding down on your browsers back button generally does the trick. The History object lets you jump backward and forward in this list using the window.history.back() and window.history.forward() methods. The back link should act just like the back button on your browser.

These two methods are most useful inside frames, where the browser’s back button tends to take you to unexpected pages. It also makes a good addition to our ever-growing Webmonkey browser, which (surprise, surprise) is part of today’s homework. But first, let’s review. Today we covered two things that will help you move from old-tyme static HTML to the newfangled world of dynamic HTML: timing events and methods of dealing with browser incompatibilities. With the JavaScript you know now, learning dynamic HTML will be a snap.

Tomorrow, we’ll end our coverage of JavaScript objects and syntax. But don’t be too sad — this isn’t the end but the beginning. True JavaScript knowledge comes only from extensive practice and hacking. By the end of tomorrow, you’ll be ready to confidently head out into the wild world of JavaScript to hone your skills with endless coding.

We’ll also cover the finer points of the use of JavaScript with images, including JavaScript in client-side image maps and preloading images to make your image swaps work quickly (or just work). After that, we’ll take a long excursion into the world of object-oriented programming. You know about Date objects and Window objects already. Tomorrow we’ll learn how to create our own objects and how to access and control them in several different ways.

Before going onto the Next, you might want to try this homework assignment to solidify your understanding of the JavaScript objects we already know.

In the previous lesson, we looked at the many different things you can do with text and strings. Today we’ll focus on two different types of data:images and objects. By the end of this lesson, you’ll know how to:

• Use image maps with JavaScript
• Preload images to speed up your image swaps
• Create your own objects to make big scripts comprehensible
• Use associative arrays to rapidly access all the objects in your scripts

We’ll get the ball rolling with image maps.

Image Maps and JavaScript

An image map is made up of regions, and each region has an associated hyperlink. Clicking on one area takes you to the associated link. Here’s a basic example, swiped (and slightly modified) from Patrick Corcoran’s image-map tutorial.

Click here.

Though this is one single image, Patrick has designated areas of the image to link to different HREFs. You see image maps like this all over the place, most frequently as a navigational element. As a quick review, here’s the HTML for the image map above. (I should note that the image tag in this example is broken up into multiple lines so that it displays correctly on this page. The real link is one big line. OK? OK.)

 <img src="http://www.wired.com/wired/webmonkey/stuff/my_image_image_maps.gif" border=0

 WIDTH=160 HEIGHT=140 ismap usemap="#foo">



 <map name="foo">

 <area name="yellow" href="http://www.webmonkey.com/" coords="20,20,70,60">

 <area name="red" href="http://www.hits.org/" coords="90,20,140,60">



 <area name="blue" href="http://www.hotwired.com/surf/central/" coords="20,80,70,120">

 <area name="green" href="http://www.animationexpress.com" coords="90,80,140,120">

 </map>

Notice that the <img src> tag has an element that says usemap="#foo". This tells the image to look for a map tag named “foo” and apply that map to the image. The map can go anywhere on the page, but it’s generally a good idea to put the map near the image, just like you see here, so that it is easy for you to find and edit. The map has a “begin” and “end” tag, with a bunch of area tags in between. Each area tag defines a region using the coords element and assigns that region an HREF. The coords element is a string of numbers, each representing a pixel in the image. When defining a square, the pixels should be listed in this order:top left, top right, bottom left, bottom right. Adding JavaScript to these image maps is as easy as adding it to an HREF. In fact, JavaScript treats area tags almost exactly like it does HREFs. You can stick onClicks, onMouseOvers, and onMouseOuts in the area tag, and they will do what you expect.

Here’s the above example, with a little JavaScript added:

Click here.

The new JavaScript-enhanced map looks like this:

 <map name="javascript_foo">

 <area name="yellow" href="http://www.webmonkey.com/"

    onMouseOver="writeInForm('All Hail Webmonkey!');" coords="20,20,70,60">



 <area name="red" href="http://www.hits.org/"

    onMouseOver="writeInForm('Humboldt Institute of Technological Studies');" coords="90,20,140,60">



 <area name="blue" href="http://www.hotwired.com/surf/central/"

    onMouseOver="writeInForm('The good, the bad, and the utterly useless');" coords="20,80,70,120">



 <area name="green" href="http://www.animationexpress.com"

    onMouseOver="writeInForm('The real animaniacs');" coords="90,80,140,120">



 </map>

It’s pretty much the same as the original; the only difference is that inside each <area> tag there’s an onMouseOver that calls a function that I wrote, called writeInForm(), which looks like this:

 <script language="JavaScript">

 <!-- hide me



 function writeInForm(text_to_write)

 {

     window.document.the_form.the_text.value= text_to_write;

 }



 // show me -->

 </script>

Simple, eh? For something a little more complicated, let’s learn how to preload images using JavaScript.

Preloading Images – What’s It All About?

One of the main problems with image swaps is that JavaScript will only tell the browser to download an image when it needs it for a swap. If you have a big image, and you swap in another on a mouseover, the browser has to download the new image. That can take awhile and ruin the fluid rollover effect you’re shooting for. To see what I’m talking about, click here.

If you have a slow connection, you will have to wait for a fairly large image to load after you do the mouseover. Since some browsers won’t swap in an image if it’s not stored in the cache, you may not see any image swapping at all. In order to avoid these nasty problems, preload the images when the page first loads.

Preloading Images – How’s It Done?

It’s not terribly hard to preload your images. All you have to do is create a new Image object, then assign the image to preload to the src of that image Just like so:

 var an_image = new Image();

 an_image.src = "my_nice_image.gif";

Setting the .src of the new image automatically downloads the image to the user’s hard drive, assuming, of course, the cache is turned on. The image is read off the hard drive, instead of downloaded. Try mousing over the links below. The image swap should happen pretty quickly.

Click here.

The only thing left is to learn how to make the preload happen when the page first loads in the browser, before any rollover action. Happily, this is pretty straightforward. The body tag has an event handler called onLoad, which is called once a page finishes loading. If you have a body tag that looks like this:

 <body onLoad="doPreload();">

The doPreload() function will be called when the page is done loading. The code for the functions that do the loading looks like this:

 function doPreload()

 {



    var the_images = new Array('stuff3a/kwmatt.jpg','stuff3a/matbon.jpg',

    'stuff3a/lunchMat.jpg');

    preloadImages(the_images);

 }



 function preloadImages(the_images_array) {



    for(var loop = 0; loop < the_images_array.length; loop++)



    {

  	var an_image = new Image();

 	an_image.src = the_images_array[loop];

    }

 }

Because I put that onLoad event handler in the body tag, the function doPreload() gets called when the page finishes loading. doPreload() creates an array of the names of images to preload and passes that array to preloadImages(), which loops through the array. With each pass through the loop, it creates a new Image object and assigns an image to the src of that image object. Not too hard, hmm? That Image object is pretty useful, right? I’m glad you think so, because now it’s time to move on to some mind-blowing – and trickier – things. Take a break now, because on the next page we’re going to enter the wide world of object creation.

Object Advantage

We’ve seen plenty of examples of JavaScript’s built-in objects and how they’re used:Window, Image, Document, Form, and a bevy of other objects. Remember:An object is just a special kind of data, made up of properties and methods. Properties are the things that an object knows about itself, while methods are the things that the object knows how to do.

For example, the Window object in JavaScript has properties, like window.status, which can be read and set. By setting the status property of the Window object to a string, it makes that string appear in the window’s status bar. Window also has methods, like window.focus(), which brings a window forward. If this stuff is unfamiliar to you, you should probably read Part I, Day 5 for more details.

Objects provide a great way to organize information. First, we deal with real-life objects all the time. A monkey, for example, is an object. Its properties include height, weight, furriness, and sassiness. All monkeys have the same set of properties. It’s the values of those properties that makes one monkey different from another. Monkeys also have methods, or things they do, like play(), eat(), sleep().

Objects are also handy because they allow you to preserve the “sense” of words. Take the notion of focus() in JavaScript, for example. Focus(), appropriately enough, brings things into focus. When focus() is applied to a window, it brings the window forward. Blur does the reverse – try it.

Click here.

However, when you apply focus() to a text box, it puts a typing cursor inside the box.

Click here.

Spooky, huh? JavaScript knows that focus does one thing for a window and something else for a textbox. The idea of focus is the same in both cases, so it makes sense to call it the same thing. But it also makes sense that focus() does slightly different things for two different objects. This notion of having one method name do different things for different objects is called “polymorphism,” and it’s fundamental to object-oriented programming.

Just as you can have the same method do different things for different objects, you can also have the same property mean different things in different objects. The length property, for example, works for both strings and arrays. The string.length returns the length of a string, while array.length returns the number of things in the array. Both properties are called length, but they mean slightly different things in the context of different objects.

Objects also make it easy to cut and paste code together. If you have a good library of objects, you can just copy an entire object and plunk it into whatever script you need. This is a lot harder when you don’t have your code organized into clear objects.

Since objects are so handy, JavaScript gives you the ability to create your own.

Creating Your Own Objects

Objects help you organize information in an easily understandable way. Let’s start with the frivolous example of constructing an employee database, then use the lessons we learn to tackle something far more complex and relevant to our lives: writing a JavaScript virtual pet.

For the purposes of this exercise, let’s put aside all those issues concerning the objectification of the worker in modern capitalist society, and consider each employee as an object with a certain set of properties and methods. Each employee has a name, title, salary, birthday, address, and so on. Employees can be promoted, go on vacation, transferred, or put on kitchen duty. An object represents all of this information, and the employee object is like a template. Each employee has the same types of properties – an age, name, title – but the values of the properties differ from employee to employee. Joe is an employee with one age and title, Jane is an employee with another age and title. Both are employees, hence they have the same properties. It’s the values of those properties that differ between employees.

To write your own object, you need to start with the template. In object-oriented programming, the template is called the object’s constructor. Once you have the template, you can create new instances of the object, like this:

 var fred = new Employee("Fred Flintstone", 33, "Surface Miner", 20000);

 var barney = new Employee("Barney Rubble", 33, "Slacker", 40000);

 var boss = new Employee("Mr. Slate",50, "CEO", 1000000);

After you’ve created these instances of the Employee object, you can do stuff like this:

 barney.promotion("Chief Slacker","10");

 fred.fired();

 boss.vacation(365);

If you want to promote Barney to Chief Slacker and give him a 10 percent raise, fire Fred, and note that the CEO is taking the year off.

Of course you have to write the constructor and the method calls yourself. Start with just the properties. Here is the Employee constructor:

 function Employee(name, age, title, salary)

 {

 	this.name = name;

 	this.age = age;

 	this.title = title;

 	this.salary = salary;

 }

Notice that a constructor is just a function. Inside the function you need to assign things to this.property_name. We’re not just setting the age to 0, we’re setting this.age to 0. The same is true for this.name, this.title, etc.

You can pass parameters into constructors. When we call the Employee constructor …

 var barney = new Employee("Barney Rubble", 33, "Slacker", 40000);

… and then in the Employee function …

 this.name = name;

… we’re setting the name of this employee to whatever we passed into the Employee constructor function.

The reason for all the “this” stuff in the constructor is that you’re going to have more than one employee at a time. In order for your methods and constructor to work, which employee you’re dealing with must be clear. That’s what “this” is:the instance of the object at hand. Showing you methods might help make things more clear.

Methods are just functions attached to objects. First, define the function, then assign the function to the object (inside the object’s constructor function). Take the promotion() method as an example:

 function promotion(new_title,percent_raise)

 {

 	var salary_increase = this.salary * percent_raise;

 	this.salary = this.salary + salary_increase;

 	this.title = new_title;

 }

This function calculates what the employee’s new salary should be and assigns that, along with the new title, to the employee. JavaScript knows which employee you’re talking about by using “this.” So if you write:

 barney.promotion("Chief Slacker",10);

Then “this” is Barney. It’s definitely a little weird and takes some time to get used to it. But once you start thinking in terms of objects, it soon becomes habit.

The last step to building the object is to tie the method to the object. As I mentioned earlier, you do this inside the constructor. To tie the promotion method to the Employee object, you’d write the promotion() function, then add this to the constructor:

 this.promotion = promotion;

Here’s the Employee constructor with the promotion method added:

 function Employee(name, age, title, salary)

 {

 	this.name = name;

 	this.age = age;

 	this.title = title;

 	this.salary = salary;



 	this.promotion = promotion;

 }



 function promotion(new_title,percent_raise)

 {

 	var salary_increase = this.salary * percent_raise;

 	this.salary = this.salary + salary_increase;

 	this.title = new_title;

 }

To add other information, say, the office in which an employee works, make a property named “office.” And then if you wanted to record a change in the employee’s venue, you’d create a method named transfer().

Got that? Now on to more complicated and important object-oriented JavaScript, like creating the virtual pet.

Your Object-Oriented Virtual Pet

You are now the proud owner of not one, but two virtual pets. It’s your responsibility to keep them healthy. If their health drops below zero, they die. Let there be life by clicking here.

As you’ve probably guessed, I’m a tad bitter about my inadequacies as a virtual pet owner. My poor pets die young every time. Anyway, this entire thing was programmed using objects. Each pet is an instantiation of a Pet object. Each pet has these properties:

• health
• happiness
• hunger
• age
• pet_name
• form_number – the HTML form the pet lives in These properties are affected by the following methods:
• play() – increases happiness
• feed() – decreases hunger
• medicate() – increases health a little bit
• makeOlder() – makes the pet older
• display() – displays information about the pet in the status box So, with this in mind, let’s create a Pet object. The first thing we have to do is make a constructor. Here is the basic constructor (which we’ll create without the method calls for now):

 function Pet(pet_name, form_number)

{

	this.pet_name = pet_name;

	this.form_number = form_number;

	this.happiness = Math.random() * 5; //random number between 0 and 4.99.

	this.health = Math.random() * 5 + 2; // random number between 2 and 6.99

	this.display = display;

	this.age = 0;

	this.hunger = Math.random() * 5;

}

This constructor takes two parameters:the name of the pet and the position of the form in which that pet should be displayed. To create two pets, we do this:

 pet1 = new Pet(window.document.form_1.name_textfield.value, 0);

 pet2 = new Pet(window.document.form_2.name_textfield.value, 1);

The constructor is written to make each virtual pet different. It uses the Math.random() method to generate random numbers between zero and one. The Math.random() method isn’t perfectly random, but for our purposes it’s good enough, since it does allow us to give each pet a different initial hunger, health, and happiness. The name of the pet is set to whatever name gets passed to the constructor, and the pet’s age starts at zero. The last two lines set the number of the pet’s form and puts the name of the new pet into the appropriate textbox. Remember that the first form on a page can be referred to as window.document.forms[0], the second form on a page is window.document.forms[1], and so on. We have the properties; let’s work on the methods. Rather than outline each method, I’ll just show you a few of them to get you started:

 function feed()

{

	var meal_quality = Math.random() * 2;

	this.hunger = this.hunger - meal_quality;

	if(this.hunger < 0)

	{

		this.hunger = 0;

	}

	this.display();

}

This is the method used to feed the pet. If you execute the comment pet1.feed(), this method gets called. First, it generates a random number between zero and two. Then it subtracts this number from the hunger of the appropriate pet. We make sure that the hunger isn’t less than zero, and then we call the display method. The display method looks like this:

 function display()

{

	var the_string = "";

	if(this.health == min_health)

	{

		the_string = this.pet_name + " is dead!";

	} else {

		the_string += "Health: " + parseInt(this.health);

		the_string += ", Age: " + this.age;

		the_string += ", Happiness: " + parseInt(this.happiness);

		the_string += ", Hunger: " + parseInt(this.hunger);

		the_string += ".";

	}

	window.document.forms[this.form_number].status_textfield.value = the_string;

}

This method constructs a string and displays it in the correct textbox. The form_number property drops the status information into the proper textbox. When we created each pet, we gave it a form_number – pet1 got the form number 0, and pet2 got the form number 1. Using this form_number, we know that the status of pet1 should go into window.document.forms[0].status_textfield.value and the status of pet2 should go into window.document.forms[1].status_textfield.value. The last line of this method determines which form to drop the status using this.form_number. The other interesting thing in this method is the parseInt function. Thanks to the way we generated the random numbers, the values for things like health and happiness look something like this:2.738993720. They’re real numbers, but they can get pretty long. So parseInt chops off everything after the decimal point; e.g., parseInt(2.738) ends up as simply 2.The third interesting method is makeOlder(). It ages the pet and makes it a little more hungry and a little less happy. This method gets called every second using a setTimeout, which I’ll show you next. I won’t go through the whole makeOlder() method, just enough to give you an idea about what it’s doing.

 function makeOlder()

{

	var good_happiness = 5;

	var max_hunger = 5;

	this.age += 1

	var happiness_change = Math.random() * 2;

	this.happiness = this.happiness - happiness_change;

	var hunger_change = Math.random() * 2;

	this.hunger += hunger_change;

	if(this.hunger > max_hunger)

	{

		this.happiness = this.happiness - Math.random() * 2;

		this.health = this.health - Math.random() * 2;

	}

}

As you can see, the method adds one to the age of the pet, decreases its happiness, and increases its hunger by some random amount. Then a set of rules, only one of which is shown here, says, “If the pet is really hungry, make it more unhappy and less healthy.” Now that we have these methods, we will add them to the constructor to make a complete virtual pet object:

function Pet(pet_name, form_number)

{

	this.pet_name = pet_name;

	this.form_number = form_number;

	this.happiness = Math.random() * 5; //random number between 0 and 4.99.

	this.health = Math.random() * 5 + 2; // random number between 2 and 6.99

	this.display = display;

	this.age = 0;

	this.hunger = Math.random() * 5;



	this.play = play;

	this.feed = feed;

	this.medicate = medicate;

	this.makeOlder = makeOlder;

}

The last piece of the picture is the code that sics the makeOlder() method on each pet every three seconds. This function is called when you hit the start button.

 function progress_time()

{

	pet1.makeOlder();

	pet2.makeOlder();

	timeout = setTimeout("progress_time();", 3000);

	pet1.display();

	pet2.display();

}

As you see, it calls makeOlder() on each pet and calls itself again one second later. After a second passes, the function gets called yet again. The pets age and the setTimeout is called. This continues until an overworked user calls clearTimeout(the_time_out). This example utilizes almost everything we’ve learned to date. If you understood what’s going on, you know a big heap of JavaScript. Take another break before you go on to today’s last topic:using JavaScript shortcuts to get at hard-to-reach objects.

Evaluating Strings

JavaScript has a bunch of built-in tricks to make coding easier. One of these tricks is the eval() function, which takes a string and executes it as if it were a JavaScript expression. I actually talked about eval a little bit in Part I, Day 5, but here’s a little example for you to review:

 var the_unevaled_answer = "2 + 3";

 var the_evaled_answer = eval("2 + 3");

 alert("the un-evaled answer is " + the_unevaled_answer + " and the evaled answer is " + the_evaled_answer);

If you run this silly eval code, you’ll see that it actually executes the string “2 + 3″ in JavaScript. So, when you set the_evaled_answer equal to eval("2 + 3"), JavaScript figures out and then returns the sum of two and three. This may seem like a silly thing to do, but it can get way more interesting. For example, you can use eval to create functions entirely on the fly, based on user input. This could be used to make programs that actually alter themselves over time. They could evolve, mutate, become sentient, maybe even take over the world. In practice, eval is rarely used, but you might see people using it to access hard-to-reach objects.

Getting at Hard-to-Reach Objects

One of the problems with the Document Object Model Hierarchy is that it’s sometimes a pain to get to the object of your desire. For example, here is the function to ask the user for an image to swap:

Click here.

You could use this function:

 function swapOne()

 {

 	var the_image = prompt("change parrot or cheese","");

 	var the_image_object;



 	if (the_image == "parrot")

 	{

 		the_image_object = window.document.parrot;

 	} else {

 		the_image_object = window.document.cheese;

 	}



 	the_image_object.src = "ant.gif";

 }

With these image tags:

 <img src="http://www.wired.com/images/archivetuff3a/parrot.gif" name="parrot">

 <img src="http://www.wired.com/images/archivetuff3a/cheese.gif" name="cheese">

Note the lines that look like this:

 the_image_object = window.document.parrot;

This assigns the image object parrot to a variable. Although it might look strange, it’s perfectly legal. But what happens if you have 100 images instead of just two? You’d have to have a huge if-then-else statement. It would be nice if you could just do this:

 function swapTwo()

 {

 	var the_image = prompt("change parrot or cheese","");

 	window.document.the_image.src = "ant.gif";

 }

Unfortunately, JavaScript will look for an image named the_image rather than simply know you want the_image to be “cheese,” if the user typed “cheese” into the prompt box, or “parrot,” if he or she typed “parrot.” And thus you get an error saying something like, “Never heard of the object called the_image.”

Luckily, eval can help you get at the image object you want.

 function simpleSwap()

 {

 	var the_image = prompt("change parrot or cheese","");

 	var the_image_name = "window.document." + the_image;

 	var the_image_object = eval(the_image_name);

 	the_image_object.src = "ant.gif";

 }

If the user types “parrot” into the prompt box, the second line creates a string that looks like window.document.parrot. Then the eval on the third line says, “Give me the object window.document.parrot” – which is the image object you want. And once you have that image object, you can change its source to ant.gif. Funky, no? It’s actually pretty useful, and people do it a lot.

If you don’t like eval(), there is another way to access hard-to-reach objects.

If you don’t like eval(), there is another way to access hard-to-reach objects.

Another Way to Get at Hard-to-Reach Objects

Here’s what we’ve learned so far about getting at an image object:

function simpleSwap()

{

var the_image = prompt("change parrot or cheese","");

var the_image_name = "window.document." + the_image;

var the_image_object = eval(the_image_name);

the_image_object.src = "ant.gif";

}

As it turns out, you can refer to images by their name in the images-associative array, like this window.document.images["parrot"].src. This is just like referring to images by their index number in the forms array, as in window.document.images[0].src. Therefore, the above code can be rewritten as

function simpleSwap()

{

var the_image = prompt("change parrot or cheese","");

window.document.images[the_image].src = "ant.gif";

}

You can use this trick to locate all sorts of objects. If you have a textbox in a form, like this:

<form name="the_form">

<input type="text" name="the_text_box">

</form>

You could change the text in the textbox like this:

window.document.forms["the_form"].elements["the_text_box"].value = "hello!";

Now you know several ways to access and change information in objects. Using the form example above, we can access the textbox in four different ways:

var the_form_name = “the_form”; var the_element_name = “the_text_box”;

1. window.document.forms[0].elements[0].value = “hello!”;

2. window.document.forms[the_form_name].elements[the_element_name].value = “hello!”;

3. window.document.the_form.the_text_box.value = “hello!”;

4. var the_element_string = “window.document.” + the_form_name + “.” + the_element_name;

var the_element = eval(the_element_string);

the_element_string.value = “hello!”;

Whichever method you use depends on your mood, your comfort level, and what information you have available to you at the time. And that’s it for today’s lesson. Let us review.

Lesson 4 Review

Today we covered many topics, vast and deep. We started with a brief discussion of client-side image maps, and we learned how to add JavaScript just like you to links. After that we learned how to preload images through a clever use of the Image object. Creating a new Image object and assigning an image to that object’s src automatically loads the image into cache. Because Image and other objects are so great, we took a long sally into the world of objects and object-oriented programming. This journey ended in the creation of a virtual pet, complete with its own properties and methods. Finally, we learned how to use eval() and associative arrays to manipulate objects that might otherwise be hard to access. Object-oriented programming is a relatively new and funky idea. By understanding how it works, we take a huge step toward becoming a programmer for the next millennium. And as we come to the end of today’s lesson, we are also done with JavaScript. We’ve covered the length and breadth of the language. Sure, a few scattered things remain — some basic debugging and optimization techniques, for instance, which will be very useful now that you’re able to write big, complex programs. But, essentially speaking, you are now a JavaScript Master! Before you tackle the final Lesson, go ahead and test your mastery on today’s homework assignment.

Wow – you made it to the last and final lesson! Stunning. As a reward for all your hard work, I’ve made this lesson extremely relaxing – no nitty-gritty code to wrap your mind around and no hairy homework, just coding theory and pointers to resources.

The topics for the day are:

• Tools to help you write JavaScript
• Debugging techniques
• Tips for making your JavaScript code run quickly

Tools of the Trade

To tell the truth, I don’t use anything other than a word processor to write JavaScript. Call me old-school – crusty even. Though plenty of tools out there write JavaScript for you, the code they generate is pretty obtuse and difficult to change. If you really want to use a tool to create JavaScript, I suggest Dreamweaver, which pumps out some amazing JavaScripts in very little time. However, if you ever want to tweak the scripts later, be prepared to look at some awfully ungainly code.

You can also find tools that help you debug JavaScript. I don’t use these either. Netscape has one, and so does Microsoft, but I’ve never met anyone who’s successfully used these debuggers. Go ahead, prove me wrong. But until someone convinces me that a product is worth buying (hint, hint, hint – send me that free software), I prefer to debug the old-fashioned way.

Debugging Techniques

As you program JavaScript more and more, you’ll begin to understand those opaque error messages JavaScript gives you. And once you understand the common errors of your ways, you’ll soon know what pitfalls to avoid, and the raw code you generate will be less and less error-prone. Programming is definitely a skill that improves dramatically over time. But no matter how skilled you become, you’re still going to spend some time debugging.

If you’ve been doing your homework, or have ever tried writing JavaScripts of your own, you know that a considerable hunk of your scripting time is spent debugging. This is normal – it’s just one of those things programmers have to do. In fact, according to numerous studies, 50 percent of the average programmer’s time is spent figuring out what’s wrong with code.

The key is to learn how to debug your programs efficiently. I have several tips to help you figure out why your program isn’t doing what it should, or to avoid writing buggy code in the first place:

• Print out variables in various ways
• Watch for common mistakes
• Think before coding

Let’s start with printing those variables.

Printing Variables

Once you find a bug, you can get rid of it. Unfortunately, finding the suckers isn’t always easy – most of your debugging time is spent just figuring out the location of the error.

One of the most tried-and-true debugging methods is to put simple statements in your code that print out what’s going on. Let’s say you’re having a problem with these two functions:

 function getName()

 {

    var first_name = prompt("what's your first name?","");

    var last_name = prompt("what's your last name?","");

    var the_name = first_name + " " + last_name;

 }



 function theGreeting()

 {

    var the_name = "";

    the_name = getName();



    if (the_name == "Dave Thau")

    {

 	alert("Hello, oh greatest one!");

    } else {

 	alert("Ahoy palloi!");

    }

 }

Give this example a try and see if you can figure out what’s wrong (Netscape 3.x users may experience some error check problems due to the nature of this, and the following Javascript examples). If you enter random names into the alert boxes, you get the greeting “Ahoy palloi!” However, if you enter “Dave” in the first prompt box and “Thau” in the second, you’re supposed to get the message “Hello, oh greatest one!” Instead, you still get the “Ahoy palloi!” message. Obviously, something’s wrong with the functions. In this simple example, you could probably find the errors just by looking at the JavaScript. However, as your scripts get more and more complicated, finding your errors just by eyeballing them grows increasingly difficult.

If JavaScript doesn’t catch your error, and you can’t figure it out just by looking at your script, it sometimes helps to print out variables. The easiest way to do this is with an alert(), like this:

 // theGreeting gets a name using getName, then presents one or two

 // alert boxes depending on what the name is

 //



 function getName()

 {

    var first_name = prompt("what's your first name?","");

    var last_name = prompt("what's your last name?","");

    var the_name = first_name + " " + last_name;

    alert("in getName, the_name is: " + the_name);

 }



 // theGreeting gets a name using getName, then presents

 // one of two alert boxes depending on what the name is

 //



 function theGreeting()

 {

    var the_name = "";

    the_name = getName();



    alert("after getName, the_name = " + the_name);



    if (the_name == "Dave Thau")

    {

 	alert("hello, oh greatest one!");

    } else {

 	alert("ahoy palloi!");

    }

 }

Notice we’ve placed alerts at all the important points. Now try the version with lots of alert boxes. If you enter the names “Dave” and “Thau,” you’ll notice that the first alert says “in getName, the_name is: Dave Thau,” but the second alert says “after getName, the_name = undefined,” which tells you things got messed up right after the last line of getName(). Somehow, the_name is OK just before the function exits, but theGreeting doesn’t correctly set the variable the_name. When you’ve written a function that does the right thing, but has problems returning a value, the first thing you should check is whether you’re actually returning the value. And sure enough, that’s the problem here. The getName() function figures out the name, but never returns it. So we need to add return the_name; at the end of the function.

Putting a bunch of alert boxes in your code is very helpful. Unfortunately, hitting “OK” every other line is also sort of a pain.

You can do a few things to debug your code without the hassle of the alert box. One option is to write your debugging messages to a text area inside a form. Another possibility is to write the debugging messages to another window. Here’s an example of debugging code that writes debugging messages.

A third trick that can make your debugging experience more pleasant involves creating different debugging levels and then setting a “debug” variable. Here’s the JavaScript that actually runs on this page:

 // debug can be either none, alert, or textarea depending

 // on the kind of debugging I want to do

 //

 var debug = "none";



 // function getName gets a first and last name, concatenates

 // them with a space in between, and returns the name

 //

 function getName()

 {

    var first_name = prompt("what's your first name?","");

    var last_name = prompt("what's your last name?","");

    var the_name = first_name + " " + last_name;



    var error_message = "in getName, the_name is: " + the_name;

    doError("in getName, the_name is: " + the_name);

 }



 // theGreeting gets a name using getName, then presents

 // one of two alert boxes depending on what the name is

 //

 function theGreeting()

 {

    var the_name = "";

    the_name = getName();



    doError("after getName, the_name = " + the_name);



    if (the_name == "Dave Thau")

    {

 	alert("hello, oh greatest one!");

    } else {

 	alert("ahoy palloi!");

    }

 }





 // doError is the error handling routine

 // depending on the type of debug message

 // it presents either no debug message, an alert

 // or puts the message in a textarea

 //

 function doError(the_message)

 {

    if (debug == "alert")

    {

 	alert(the_message);

    } else if (debug == "textarea") {

 	window.document.the_form.the_text.value += the_message + "<br>n";

    }

 }

 

Notice that I’ve defined a variable called “debug” that can be either “none,” “alert,” or “textarea.” Then when I want to generate an error message, I send it to the function doError(), which either does nothing, presents an alert box with the message, or sticks the message in a text area, depending on how I set the debug variable. You can set the debug variable to “textarea,” when you have lots of errors that you want to look at simultaneously. Then, when you’re ready to show your code to the world, you can just set debug to “none,” and the error message will no longer show up, which saves you the hassle of having to find and remove all your debug statements.

Often, programmers create different debug levels, such as “none,” “brief,” and “extreme.” “Brief” will print a few debug messages along the way, “extreme” will print a lot of debugging messages, and “none” will of course print no messages.

If you build your debugging system like this, you can set the debug level to “brief” while you’re coding, and “none” when you’re ready to make your JavaScript public. Then, if something totally weird starts happening, and you don’t know where to look for the problem, you can set the debug level to “extreme” and wade through all the debug messages until you find something suspicious.

OK, enough about debugging systems. Let’s turn now to common mistakes made by JavaScript coders.

Common Programming Mistakes

Most mistakes are just silly syntactic ones. It takes a long time to remember to close all those quotes, curly braces, and parentheses, but luckily the automatic JavaScript bug detector catches most of those errors for you. Though JavaScript bug detectors keep improving as browsers get more sophisticated, a few bugs still slip through the cracks. Here are a few common ones to look out for:

Messing up variable or function names.

Mistakes with capitalization and pluralization of variable and function names are annoyingly typical and sometimes the JavaScript bug detector fails to catch them. By creating and adhering to a naming convention for your variables and functions, you can greatly reduce the number of these mixups. For instance, I name my variables in all lower case and with underscores in the place of spaces ( my_variable, the_date, an_example_variable), and I use in-fix notation for my functions ( addThreeNumbers(), writeError(), etc.). I avoid pluralizing anything because I always forget which variables are plural and which variables aren’t.

Accidentally using reserved words.

Some words can’t be used as variables because they’re already in use by JavaScript. For example, you can’t have a variable named “if” because it’s actually a part of JavaScript – if you use “if,” you’ll wreak all kinds of havoc. While you’d have to be pretty deranged to name a variable “if,” a variable called “document” may be more tempting. Unfortunately, “document” is a JavaScript object. Another often used, but generally problematic thing to call a variable is “name” (form elements have “names”). Naming a variable “name” doesn’t always cause problems, only sometimes, which can be even more confusing – all the more reason to avoid calling a variable “name.” Unfortunately, different browsers have different reserved words, so there’s no way to know exactly which words to eschew. The safest course of action is to avoid words that are part of JavaScript as well as those found in HTML. If you’re having problems with a variable and you can’t figure out what’s wrong, try renaming the variable. If that works, then you’ve probably stumbled across a reserved word.

Remembering that you need two equals signs in logical tests.

Some browsers catch this error, and some don’t. This is a very common mistake and extremely difficult to catch if the browser doesn’t point it out for you. Here’s an example of the error:

 var the_name = prompt("what's your name?", "");

 if (the_name = "the monkey")

 {

 	alert("hello monkey!");

 } else {

 	alert("hello stranger.");

 }

This code will throw up the “hello monkey!” alert box regardless of what you type into the prompt, which isn’t what we want. That’s because there’s only one equals sign in the if-then statement, which tells JavaScript that you want to set one thing equal to another thing. Let’s say you type “robbie the robot” into the prompt. Initially, the_name will be “robbie the robot.” But then the if statement tells JavaScript that you want to set the_name = “the monkey.” So JavaScript happily follows your command, and sends a “true” message to the if-then statement, and the alert box shows up with the “hello monkey!” message every time. This insidious bug can drive you belfry batty. So concentrate on doubling those equals signs.

Accidentally quoting variables, or forgetting to quote strings.

This one gets me time and time again. The only way JavaScript knows the difference between a variable and a string is that strings have quotes around them and variables don’t. Here’s an obvious error:

 var the_name = 'koko the gorilla';

 alert("the_name is very happy");

This will produce an alert box that says “the_name is very happy,” even though the_name is a variable. This is because once JavaScript sees quotes around something, it stops thinking about it, so by putting the_name in quotes, you stop JavaScript from looking it up in its memory. Here’s a less obvious extension of this bug (which we saw in Day 3):

 function wakeMeIn3()

 {

 	var the_message = "Wake up!  Hey!  Hey!  WAKE UP!!!!";

 	setTimeout("alert(the_message);", 3000);

 }

  

The problem here is that you’re telling JavaScript to execute alert(the_message) in three seconds. Three seconds from now, however, the_message no longer exists because you’ve exited the function. The solution to this problem is this:

 function wakeMeIn3()

 {

 	var the_message = "Wake up!";

 	setTimeout("alert('" + the_message+ "');", 3000);

 }

 

By pulling the_message out of the quotes like this, the command "alert('Wake up!');" is scheduled by the setTimeout, which is what you want.

These are just some of the harder-to-debug errors that might sneak into your code. Once you’ve found your bugs, there are good and bad ways to go about fixing them. Lucky for you, I can give you the benefit of my trials and errors.

Fixing Bugs

Finding a bug, though sometimes difficult, is only the first step. Next you have to get rid of it. Here are a few things you should do as you crush those bugs:

Copy your program first.

Some bugs are really hard to get rid of. In fact, sometimes a little bug can drive you so crazy that, in the process of eradicating it, you destroy your entire program. Saving your program before you start debugging is the best way to ensure that a bug doesn’t get the best of you.

Fix one bug at a time.

If you know about several bugs, fix each one and test your fix before you move on to the next bug. Fixing a lot of bugs all at once without checking your work is just an invitation for even more bugs.

Beware of voodoo coding.

Sometimes you know a bug exists, but you don’t really know why. Lets say you have a variable called “index,” and for some reason “index” is always one less than you think it should be. You can do one of two things: sit there for a while and figure out why it’s coming up short or just shrug, add one to index before using it, and move on. The latter method is called voodoo programming. When you start thinking “What the hell – why is index two instead of three? Well … I’ll just make it work for now and fix it later,” you’re slapping a Band-Aid on a potentially serious wound. Voodoo programming may work in the short term, but you’re looking at long-term doom – if you don’t understand your code enough to really get rid of a bug, that bug will come back to haunt you. It will either return in the form of yet another weird error that you can’t figure out, or it’ll make your code extremely hard to understand for the next poor soul cursed to look at it.

Look for similar bugs.

In some ways, the ability to cut and paste code is the worst thing for programmers. Often, you’ll write some JavaScript in one function and then cut and paste it into another function. And if the first function had a problem, you now have problems in two functions. I’m not saying you shouldn’t cut and paste code. But bugs have a way of multiplying, so if you find one, you should look for others that are similar. (Or just make sure something works before you start creating multiple versions of it.) Misspelled variable names are the kind of thing that crops up several times in one JavaScript – misspell the_name as teh_name in one place, chances are you’ve done it someplace else.

If all else fails …

If you’re sitting there, staring at a bug, and you just can’t figure out what’s going on (or if you can’t even find the bug in the first place, but you know it’s there because your program isn’t working right), the best thing to do is walk away from your computer. Go read a book, take a stroll around the corner, get a tasty beverage – do something, anything, but don’t think about the program or the problem. This technique is called “incubation” in some circles, and it works amazingly well. After you’ve had a little break and relaxed, try finding the bug again. You’ll approach the problem with a refreshed vision that’s often quite illuminating. Incubation works because it breaks you out of a (dare I say it?) dysfunctional mindset. If you follow a wrong path for too long, you sometimes get stuck with no room in which to turn around. The best thing to do when this happens is find a way to start down a new path. I know it’s touchy-feely, but it works. Really!

And if that doesn’t work …

Ask someone for help. Sometimes you wear such a rut in your problem with repetitious thought patterns, only someone with a fresh eye can see the hole in your logic. In structured coding environments, programmers periodically review one another’s code. This is appropriately named “code review,” and it not only helps iron out bugs, it also results in better code. Don’t be afraid to show other people your JavaScripts. It makes you a better JavaScripter.

But the absolute best way to eradicate bugs is …

to create bug-free code from the get-go.

Good Coding Practices

The key to good programming is to write programs for people, not computers. If you keep in mind that someone else will probably read your JavaScript, you’ll write much clearer code. The clearer your code, the less likely you are to make mistakes. Clever coding is cute, but it’s the clever coder that gets the bug. The best rule of thumb is KISS, Keep It Simple, Sweetie.

Another helpful technique is to comment before you start writing any code. This forces you to think about the problem before diving right on into it. Once you’ve written the comments, you can write the code right below each one. Here’s an example of a function written this way.

Step 1: Write the comments

 //function beSassy()

 //  beSassy asks for a user's name, chooses a random

 //  insult and returns an alert box with the user's

 //  name and the insult.

 function beSassy()

 {

 	//  first write a list of insults

 	//



 	//  next get the user's name

 	//



 	//  then choose a random insult

 	//



 	//  finally, return the personalized sass

 	//

 }



'''Step 2: Fill in the code'''





 //function beSassy()

 //  beSassy asks for a user's name, chooses a random

 //  insult and returns an alert box with the user's

 //  name and the insult.

 function beSassy()

 {

 	//  first write a list of insults

 	//

 	var the_insult_list = new Array;

 	the_insult_list[0] = "your shoe lace is untied";

 	the_insult_list[1] = "your mama!";

 	the_insult_list[2] = "it's hard to be insulting";



 	//  next get the user's name

 	//

 	var the_name = prompt("What's your name?", "");



 	//  then choose a random insult

 	//

 	var the_number =  Math.random() * 5;

 	var insult_number = parseInt(the_number);

 	var the_insult = the_insult_list[insult_number];



 	//  finally, return the personalized sass

 	//

 	alert("Hey " + the_name + " " + the_insult);

 }

This comment-first policy not only forces you to think before you code, it also makes the task of coding seem a lot easier – by breaking things down into little, easily coded sections, your problem looks less like Everest and more like a bunch of pleasant rolling hills.

And finally …

Always end your statements with semicolons.

Although it’s not strictly necessary, you should get into the habit of ending all your statements with a semicolon since it clears the way for code to come. Forget that semicolon, and suddenly the next line of perfectly good code generates an error.

Initialize your variables with “var” unless you have a good reason not to.

Localizing all your variables using “var” reduces the chance that one function will mess up the workings of another, unrelated function.

OK, now that you know how to code, let’s learn how to make your JavaScript run quickly.

Optimizing Your JavaScript for Speed

Once you’ve gotten your JavaScript working, you might want to get it working faster. Before I go into the ways to speed up your code, let me bend your ear about something called the 80/20 rule. You get 80 percent of the improvement of optimization with the first 20 percent of the work you do. Eking out that remaining 20 percent of speed is a huge pain, and often results in completely unreadable and difficult-to-manage code. In short, if your JavaScript is running slowly, there are a few very simple things you can do to speed it up, but unless your script is still really slow, I wouldn’t bother optimizing beyond that.

Here are a few easy methods of getting the lead out of your code.

Limit the amount of work you do inside loops.

The most common cause of a really slow program is repeated work inside a loop. If a command only needs to execute once, there’s no reason to put it in a loop. For example:

 var index = 0;

 while (index <10)

 {

    var the_date = new Date();

    var the_day = the_date.getDay();

    var the_name = prompt("what's the kid's name? " ,"");

    alert("On " + the_day + " " + the_name + " is a very special person.");

    index++;

 }

This program loops 10 times. Each time it figures out what day it is, asks for a kid’s name, and then prints out “On Monday, so-and-so is a very special person.”

But the day never changes. It’s always today. So there’s no need to put the first two lines inside the loop. Rather than execute them 10 times, pull them out of the loop and save time by executing them only once:

 var index = 0;

 var the_date = new Date();

 var the_day = the_date.getDay();

 while (index <10)

 {

    var the_name = prompt("what's the kid's name? " ,"");

    alert("On " + the_day + " " + the_name + " is a very special person.");

    index++;

 }

 

Order if-then-else statements from most likely to least likely.

Because if-then-else statements end once they’ve found something true, you can reduce the number of statements that execute by putting the ones most likely to be true first. For example:

 var pet = prompt("what kind of pet do you have?", "");

 if (pet  == "cat")

 {

 	doCatStuff();

 } else if (pet == "dog")

 {

 	doDogStuff();

 } else if (pet == "bird")

 {

 	doBirdStuff();

 } else if (pet == "lizard")

 {

 	doLizardStuff();

 }

 

On average, this list of if clauses will execute fewer logical tests than if it went from lizard to dog.

Minimize repeated expressions.

If you find yourself repeatedly calculating a specific expression, like var pi = 22/7, it’s probably a good idea to just calculate it once and access it as a global variable. For example, instead of this:

 function theArea(radius)

 {

 	var pi = 22/7;

 	var area = pi * radius * radius;

 	return area;

 }



 function theCircumference(radius)

 {

 	var pi = 22/7;

 	var circumference = 2 * pi * radius;

 	return circumference;

 }

 

do this

 var pi = 22/7;

 function theArea(radius)

 {

 	var area = pi * radius * radius;

 	return area;

 }



 function theCircumference(radius)

 {

 	var circumference = 2 * pi * radius;

 	return circumference;

 }

Yeah, I know that I’m using a global variable here, and I said that it was a bad idea. However, numbers like pi, which will never change during your program, are the exception to this rule. By calculating pi only once, you save an extra calculation. A small savings in time, perhaps, but it all adds up. These are just a few things you should look for if your code is too slow. They’re pretty obvious, but you’d be surprised how often you can overlook simple optimizations like these.

And that, my friends, brings us to the end of today’s lesson, which in turn brings the entire Advanced JavaScript tutorial to a close. And if you’ve come this far, and you’ve read even half of the last five lessons, you’ve seen a lot of JavaScript. In fact, if you’ve understood most of what I’ve covered in the 10 lessons that span Parts I and II, you can safely call yourself a JavaScript acolyte. The road to true mastery now lies only with practice.

What’s Next?

Now that you have a working understanding of JavaScript, you can write some pretty serious JavaScripts. It’s time to move on to some of JavaScript’s many applications. Add dynamic HTML to your skill set, and you’ll be ready to achieve your wildest dreams. Well some of them anyway.

But above all, you need to practice, practice, practice. Swipe existing code and mangle it beyond all recognition. Write scripts from the blank page up. Strive to create bug-free code, and become a master at fixing the bugs that slip through anyway. Keep your eyes peeled for interesting and new applications of JavaScript, and figure out how they’re done. It doesn’t even matter if your code works perfectly or not, because it all teaches you something. The more you learn, the better – and faster – your code becomes and the easier it is for you to create it.

Now go forth young JavaScripter, and do me proud!

Thau!