Account Log In - Home/Outlines - Books - Contact Us - Support - Employment -

Select your course... Course Outlines     Advanced Flash     Advanced JavaScript and CSS     CSS     Dreamweaver     Dynamic HTML     Flash     JavaScript     Photoshop     XHTML

Select your theme... Canada-ehHalloween_JheryllChristmas_JheryllPrintBeach_StevePresentationHalloween_KhalWol_Tad

DHTML

JavaScript Programming Fundamentals

Variables

Variables are very important for any kind of programming. Without them, complex scripts would never be possible. When used correctly, they can also save you a lot of typing. The ability to effectively use variables is what separates a good programmer from a sloppy one.

What is a Variable?

The best way to think of a variable is as a container. With a conventional container, you use it to put things in. Variables work in the same way. However, instead of putting things into them, we assign them values. So we could also say that variables contain values.

Defining Variables

When you first tell JavaScript about a variable, it is call declaring it. The best way to declare a variable is to use the word var before it.

A variable can be defined by assigning it a value. For example:

var my_number = 10;

The variable my_number now has the numeric value of 10. Whenever this variable is encountered in the script, it will be dealt with as the number 10.

You can also declare a variable without assigning it a value, like so:

var my_number;

It is usually a good programming practice to declare all of your variables at the beginning of the script. You don't necessarily need to assign any values to them, but this way they have been declared, or initialized. This is kind of like laying out all the tools you might need to work on your car before you start working. This also lets you see at a glance all of the variables you are dealing with in the script.

Variables can also have text values. Here's an example:

var first_name = "betty";

Now the variable first_name has the value of "betty". Whenever you will be re-using any kind of text, especially long bits of text, it can be useful to make it into a variable. For example:

document.write("This is some text that will be written out several times within the page");

Instead of having to do this again and again, you could assign the text (also called a text string) to a variable:

var my_text = "This is some text that will be written out several times within the page";

document.write(my_text);

Now this text string can be written out many times using only the variable my_text. This may seem a little pointless right now, but as you start writing larger and larger scripts, this will be a very good habit.

Let's make a few observations about the above example.

• The text for the variable is enclosed in quotes. For JavaScript to assign text to a variable, it must be enclosed in quotes. These can be either single or double quotes.
• When we refer to the variable my_text inside the write() method, we don't use the quotes. If we were to enclose my_text inside quotes, then the words "my_text" would be written out to the document. When referring to a variable, don't enclose it in quotes.

Besides strings and numbers, variables can also have other kinds of values. One of these is a boolean value. Boolean values are either true or false.

car_fast = true;

Don't use quotes around boolean values, or they will simply become text strings.

One other thing to keep in mind is that once you have assigned a value to a variable, you can change it at any time. For example, if you had the following code:

my_name = "sally";

You could re-assign this variable to another value at any point.

my_name = "bruce";

Naming Variables

Variable names should be descriptive of what they represent. All the variables you have seen so far on this page have good, descriptive names. Besides commenting your code, this is another good way to make sense of old code long after you have forgotten how it works.

t = true, or cdg="sally" are not good variable names, as they are rather cryptic, and can confuse even the script's author.

When naming your variables, there are a few points to remember:

• JavaScript is case sensitive. This means that myvar and myVar are two different variables.
• Your variable names cannot begin with a number, or contain any spaces or punctuation. (The underscore (_) character is OK to use however.)
• Variable names cannot use any of JavaScript's reserved words. These are words that have special meaning to JavaScript. You will find in the link section for this module a page with a list of these words.

It is a good idea to come up with some kind of naming convention that you are comfortable using when naming variables. Many people like to use mixed case when combining words, such as firstName. Others like to use an underscore to separate words, such as first_name. It is up to you to decide which one is best for you, but you should try to be consistent.

Remember the alert box? It is actually useful for much more than just spitting out bits of text. It can also be used to show variables. Try this bit of code.

// Initialize a variable.

var my_name = "mortimer";

//pop up an alert box with the variable.

alert(my_name);

This should give you an alert box that will show the text "mortimer".

You can also use alert boxes to keep track of your variables. Put the following line into the code just after the variable is initialized.

// Initialize a variable.

var my_name = "mortimer";
my_name = 100;

//pop up an alert box with the variable.

alert(my_name);

Now you have changed the value of my_name to a numeric one, and the alert box will reflect this new value. Now let's try it with a boolean value.

// Initialize a variable.

var my_name = "mortimer";
my_name = false;

//pop up an alert box with the variable.

alert(my_name);

Now, notice that the alert box shows us a value of false. You can use the alert box to keep track of variables as they change throughout your script.

To var or not to var

You may remember near the beginning of this lecture when we talked about using the word var to declare a variable. Sometimes it can seem a little confusing as to when you should use var, and when you don't need to. So let's clear this up a bit.

You don't need to use var for the same variable more than once, you only need it when you first declare that variable. For example, let's say you declare a variable without assigning it a value early in your script.

var my_name;

Later on in your script, you may want to assign my_name a value. Since you already declared the variable at the beginning of your script, you don't need to use var again.

my_name = "mortimer";

Note: You may notice when looking at some scripts that people don't always use var when declaring variables. This will probably work much of the time, but to be on the safe side, you should always declare your variables with var.

Variables Summary

• A variable can be thought of as a container that you put things into.
• Variables are assigned values.
• The first time you use a variable in a script, it is called declaring, or initializing it.
• Variables can have text string, numeric, or boolean values.
• Text string values must be enclosed in quotes.
• The value of a variable can be changed at any time in the script.
• It is a good idea to give your variables descriptive names.
• Variable names cannot start with numbers, contain spaces or punctuation. They also cannot use words reserved by JavaScript.
• JavaScript variable names are case sensitive.
• When you first declare a variable, use the word var in front of it.
• var only needs to be used once for a variable.

---

DHTML - TOC - Introduction - Books -
JavaScript Programming Fundamentals - Links - Questions -
1 - 2 - 3 - [ 4 ] - 5 - 6 - 7 - 8 - 9 -

DHTML - TOC - Introduction - Books -
JavaScript Programming Fundamentals - Links - Questions -
1 - 2 - 3 - [ 4 ] - 5 - 6 - 7 - 8 - 9 -