Variables and Functions

Lesson-6 (Variables and Functions)

Now it's time to get into some really fun stuff. Yes, variables and functions. Don't worry, it's not as bad as it sounds.....let's start with declaring variables. You'll want to keep all of your variables in the HEAD section for now. Place the declarations between the SCRIPT tags inside the head section of your document.

To declare a variable in JavaScript, you will write something like this:

Here is what these commands mean:

1. var
This indicates you are about to declare a variable.

2. name
This is the name you give the variable. Give it any name you like (other than a JavaScript reserved word such as "function" or "onMouseover".).

3. value
This is the initial value you want the variable to have. It can be a number, words, true, false, or null.

Using Numbers

You can assign a number value to a variable by placing the desired number after the = sign:

var cars=3;

You can also use a number with a decimal. JavaScript isn't too picky about whether the value is an integer or decimal. Just type it in.

var cost=9.95;

Using Strings

A string is just a group of characters, such as a sentence or a word. To define a string, you will need to place single or double quote marks around the value, like this:

var movie="The Lost World";

Also, if you place numbers inside the quotes, they are treated as a string rather than a numerical value.

Boolean Values

This one is nice. Assign the variable a value of true or false. No quotes needed. Here's an example:

var story=true;

The null Value

If you declare something as null, it means nothing. Not even zero, just plain nothing. Here's the format:

var mymoney=null;

Well, nothingness isn't so great in this case, but it can be useful when you use prompts to get information from viewers, and they type in......nothing!

Case Sensitivity

Unlike alot of things in HTML, JavaScripts are case sensitive. So a variable named "john" is not the same as "John" or "JOHN". The same goes for commands and functions and so on. Just remember your case when you use JavaScripts, or you may get error city instead of nifty effects....

Semicolons

Don't forget those semicolons! They are used to separate JavaScript commands and declarations, and can also cause error city if they are left off. I did this a few times, and it makes for some pretty wild stuff when you try to load the page!

Functions!

Well, functions are used to make things more organized and readable. A function is a set of JavaScript statements put together for a single purpose. You will want to keep your functions inside the SCRIPT tags inside the HEAD section. Here is the format for a function declaration:

1. function
Indicates that you are going to create a function.

2. name
This is the name you give the function. As before, name it whatever you like.

3. (parameter1, parameter2)
The parameters are variables that are sent to the function when it is called. You can have none, one parameter, two parameters, three parameters, and so on.

4. {
This symbol lets you begin adding JavaScript statements and declarations.

5. }
This indicates the end of the statements, and the end of the function.

To make use of the function, you will make a call to the function when you want to use it. You call a function by using the name, any parameters you want to send, and a semicolon, like this:

function dosomething (mymoney, cost);

So, how does one use this stuff? Well, I'll show you another way to write the "text in the status bar" script using variables and functions. Here's the trusty old link again. Move your mouse over it, and you'll see text in the status bar. Move the mouse away, and the status bar clears.

Now, here's the code that generated the link. See if you can work your way through it. I'll explain it at the end of the script.

<HEAD>
<SCRIPT language="JavaScript">

</SCRIPT>
</HEAD>

<BODY>

<A HREF="jvar.htm" onMouseover="overlink('Functions Rule!');return true"
onMouseout="offlink(' ');return true"> Place your mouse here!</A>

</BODY>

What the...? Yes, in this case the script is much longer and takes some time to work through. Here's what the script is doing:

In the HEAD Section

1. var text=" ";
This declares a variable named text, and gives it a string value of empty space.

2. function overlink(text) This declares a function named overlink. The function requires the variable text to be sent to it in order to work properly.

3. {
Begins the JavaScript Statements for the function overlink.

4. window.status=text;
This places the value of the variable text in the status bar. The value of text was sent to the function when it was called inside the link tag, which is the string "Functions Rule!". See the explaination of the link tag for more.

5. }
Ends the statements in the function overlink.

6. function offlink (text)
This declares a function named offlink. The function requires the variable text to be sent to it in order to work properly.

7. window.status=text;
This places the value of the variable text in the status bar. The value of text was sent to the function when it was called inside the link tag, which is the string " ". See the explaination of the link tag for more.

In the BODY Section

<A HREF="jvar.htm" onMouseover="overlink('Functions Rule!');return true"
onMouseout="offlink(' ');return true"> Place your mouse here!</A>

This tag calls both of the functions and passes on a string which is assigned to the variable named text. The first function, overlink, is called inside the onMouseover command. This means that when the user places their mouse over the link, the statements inside the function overlink will be executed. As you can see, overlink is called with a string variable inside the ( ) symbols. Notice we use single quotes to define this string, since double quotes are used in the onMouseover command. The string value we place here is what is sent to the function overlink, and thus is what ends up in the status bar. So, "Functions Rule!" is what shows up in the status bar when the mouse moves over the link. The onMouseout command calls the function named offlink when the mouse moves away from the link. This time, we assigned the variable text a value of blank space. The blank space is sent to the function, and is written to the status bar, erasing the "Functions Rule!" string before it. The return true phrases are there to make sure the script works by returning true.

Well, if you made it through all of that, you are ready to move on. If you still don't quite have a handle on it yet, try writing out the script on your computer, or even by hand. Sometimes it helps you work your way through the messy stuff.