Moving Along with JavaScript!

Advanced Webpage Design

JavaScript: Lesson 2

JavaScript: Lesson 2

Hopefully by now you're familiar with " JavaScript is Easy!." It was designed to introduce you to JavaScript. This lesson will go a little further. If you haven't read the first lesson, I recommend going back and taking a look at it now. It's best to fully understand the basics before moving on to something more advanced. In this lesson I may not cover everything I did in the first. Let's begin by looking at two similar, but different scripts. I'll call them "example 1" and "example 2." The links below will let you see how the scripts work, and will also give you the opportunity to see the actual scripts themselves by following the links to the code. I have also included the images I used so that you can also use them while writing your own script as you follow along. Make sure you save all the files in the same folder together.

Click here to see example 1

Click here to see example 2

Click here for the example 1 code

Click here for the example 2 code

Click here for a picture of the example 1 code

Click here for a picture of the example 2 code

These are the images I used
[ pic1.gif ] [ pic2.gif ] [ pic3.gif ] [ pic4.gif ]

Now let's see what's going on in each example. We'll start with example 1. Study the picture below for a second then let me explain what's happening. You may want to keep a picture of the code open so you can follow along as we go through the lesson.

Example 1a

On the first line in the picture above, I declared a variable that I called "thePic1." On the same line, with the equals sign, I initialized this variable to be a 50 by 50 image. (50 is the measurement in pixels). At this point there is no image associated with the variable. All the variable knows is what size the image will be. The next line is where I will assign the source of the image that I want to store in this variable. The source will be the gif file named "pic1.gif" In the script I declared 3 other variables the same way to handle 3 more images. All of the images are 50 by 50 gif files. The only difference is their source.

Example 1b

I need four functions to handle four different mouse events that I want to use. I'll call each of these functions from the html source code in my webpage with "onMouse" events. I have to give the image locations in the html a name so that the JavaScript will know which one I'm wanting to change. I'll do this inside the "img" tag in the html code with the "name" attribute. < img name="picName1" > ( This is shown in the picture below. It's in the very last line inside the "img" tag. ) Also look at the "src" attribute in the picture below inside the "img" tag. < img src="pic1.gif" > This attribute is used when changing the "source" of each image. When the page first loads, a default image "pic1.gif" is used. The JavaScript replaces this default image with the one referred to inside the functions when they are called.

Take another look at the function above. On the first line I declare a function and decide to call it "picMain1." I could have named the function something else, but I chose "picMain1." On the next line I placed the opening brace of the function. "{" On the third line you see "document.picName1.src = thePic2.src;" We have to point to the exact image we want to change. In order to do so, we must first select the "document," which is the actual html page itself. Within this document we need to select the image that we want to change, which is "picName1" since we gave it that name. Next we select which attribute of this image that we want to change, which in this case is its source. The period or "dot operator" allows us to do just that. "document.picName1.src" To assign a different source to this image we will need to use the equals sign or "assignment operator." Here we assign the source of the image stored in the variable "thePic1" to be the new source for our document's image also. In other words, we replaced the image on our webpage with another one stored in a variable in our script. The next line simply exits the function, returning to where we first called it.

Example 1c

Note: The above lines were actually all on the same line.
I put them on three different lines to get them in the picture

In the picture above, keep in mind that everything was actually all on one line in my original html code. I broke it into three lines so that it would fit into the picture. We've already discussed what's in the "img" tag on the last line. Remember that img name="picName1" and src="pic1.gif" were needed so that the JavaScript knew which object and attribute to refer to and change. The main things we want to look at here are the "onMouse" function calls in the first two lines of the "a" or anchor tag. You may have noticed the "nohref" I used inside the anchor tag. I used it because this anchor tag isn't a link, it's just an example to show us some of the things we can do with JavaScript.

Take a close look at the first line. See the onMouseOver="picOver1()" function call? Can you guess what this does? It's pretty simple really. What happens here is that when you move your mouse "over" this link a function from our JavaScript is called. That function is picOver1() It's the same function we discussed earlier. Right after this, on the first line also, you'll also see onMouseOut="picMain1()" Want to take a guess what this does? When the mouse moves "out" from over the link, a different function is called. In this case it's picMain1() On the second line you'll see onMouseDown="picOver2()" which calls the picOver2() function when you press the mouse button down. Following that is onMouseUp="picMain2()" which will call the picMain2() function when you let the button up.

That's it for example 1. Take a moment to look back over everything. When you're ready to move on, we'll talk about example 2 below. It's very similar to example 1, but here we're going to do things just a little differently.

Example 2a

Check out the picture above. So far, everything's just like we did before. The only difference is that this time I named my variable "myPic1" instead of "thePic1." I could have named it almost anything as long as it didn't start with a number or contain any illegal characters like "*" or "&." Legal characters for JavaScript, ( and most other languages as well ), are letters, the underscore or "_", and numbers. The thing to remember about numbers is that the name of a variable cannot begin with a number. Let's take a look at the function below.

Example 2b

What's the "myVar" doing inside the parenthesis and the brackets? DON'T PANIC! It's not that big of a deal really. This is called a "parameter" of a function. What I'm going to do this time is to pass some information to the function. This "parameter" is actually just a variable that stores information that gets passed to the function from a call in the code. Take a look at the picture below. You'll see that inside the "onMouse" function calls there's something in those parenthesis as well. Those are called "arguments." Arguments are what is passed to the function where they become parameters when the function receives them. The name "argument" and "parameter" may seem a little confusing, but it's nothing more than the terms used to identify them. Why couldn't they just call them both "parameters" and be done with it? :-) Look back at the picture above. Let's see what's actually happening here.

Much of this function is the same as the one before. The images in my html code are named "pic_a" and "pic_b" this time. < img name="pic_a" > When the onMouse events make a call to the JavaScript from the html, (see the first two lines in picture below), they pass the name of the image too. The function, which I chose to call "pic1function," receives the name passed and stores it in the variable I called "myVar" (shown in picture above).

Inside of this function, within the brackets, the first statement is: "document.images[myVar].src = myPic1.src;" This is almost the same as before, but other than the different variable names I used, the ONLY other difference is "images[myVar]" located between "document" and "src." This is a different "method" of referring to an image object. The word "images" in "images[myVar]" is NOT a word I "chose" to use this time. I HAD to use "images" because it's a special "keyword" recognized by JavaScript to refer to an "image array."

An array is like a chain of connected items. images[0] would refer to the first image found in an html page. images[1] would refer to the second, images[2] to the third, and so on. Arrays always begin counting at 0 unless you adjust them to do otherwise. What's stored in "myVar" is NOT a number though! In this case, "myVar" is actually storing the word (or character string), "pic_a." Remember, that's what we passed and stored there NOT a number. With JavaScript you can find something in an array either by "number," (0,1,2,3), or by name. I could have just as easily passed "0" to "myVar" and used "images[0]" to find the image. Instead I found it with "images["pic_a"]." Remember "pic_a" is what's stored in "myVar" so "images[myVar]" is the same as "images["pic_a"]" BOTH will work and BOTH correctly identify the image within the array. Try changing the arguments to 0 and 1 if you don't believe me.

It's kind of like if you're standing in line at lunch and the teacher says, "Will the third person in line come here." She could also say, "Will Sally come here." BOTH will work, and BOTH will refer to who she's talking about. (If Sally's actually the third person and the teacher can count correctly that is.) ;-) Think this over and then look again at the html part below, noticing how we passed the names to the functions.

Example 2c

Note: The above lines were actually all on the same line.
I put them on three different lines to get them in the picture

This is the end of another lesson in JavaScript. By now you're probably starting to realize that it's not so hard after all. Review everything we talked about today and make yourself comfortable with it. Copy the code of these scripts and try changing things around. Especially try changing the arguments in the html part of the code from "pic_a" and "pic_b" to "0" and "1". If something doesn't work, see if you can find out why. Maybe you mistyped or misspelled something. Try adding some images of your own and writing some new functions. The more you mess around with it, the more you're going to learn. As always, if you have any questions about any of this, please let me know. Thanks for hanging in there and learning some more about JavaScript! You're well on your way to becoming a GREAT JavaScript coder! :-)

~ JavaScript Links ~

Lisa Explains It - Javascript

Netscape JavaScript 1.1 Guide

HTML Goodies Javascript Primers

Webteacher JavaScript Tutorial

JavaScript Kit Reference

W3Schools Tutorials

The JavaScript Source

Back to Learn