Variables are extremely useful in any programming language. In fact, they are a necessity. So, what is a variable? Well, a variable can be just about anything. Here's an example of how one can be used:

<script language="Javascript">
<!--hide
var myColor="Blue"
document.write("The color is "+myColor)
//-->
</script>

The variable I chose for this script is 'myVar'. You can call your variables any name you want, unless you use a "javascript" keyword. A keyword is any word that is used in a "javascript" term, such as 'document', 'onClick', or 'var' etc. Except for this no-keyword rule, variables let us play pretty free and easy and give us a very cool tool to use. This is what the script puts out:

The term var (you guessed it) stands for 'variable'. 'myColor' is the variable that is being defined as equalling the color Blue. As soon as this definition is read into the browser, Blue and myColor are defined as one and the same. But the neat thing about variables is just what the name implies: they can be changed to other values. Look below.

<script language="Javascript">
<!--hide
var myColor="Blue"
document.write("The color is "+myColor+"<br>");
var myColor="Red"
document.write("The color is "+myColor)
//-->
</script>

Here's the output:

As you can see, the same variable 'myColor' was used to write two different words, 'Blue' and 'Red'. Notice that while the variable used twice is exactly the same one, we had to make a few other changes to the script. First, the <br> tag was used in the first document.write statement. Notice how this tag has quotes around it and is placed in with the other values of the statement. Any other html tags we use like this must be in this format. If you put a break tag any where else, you'll be messing with the correct form of the script itself and you will get an error. An html break tag has to be used because the document.write statement has no line break characteristics and the two sentences would otherwise be printed one after the other on the same line.

Next, note the semicolon immediately after this same document.write statement. We didn't need one in the first example, because we defined only one statement. But when we added a second definition and statement to the script, the semicolon had to be put where it is as an indicator that the first statement is finished, and a second staetment is following. A very small detail but a very important one.

In the second part of the script, we set the variable 'myColor' to equal 'Red' and when the document.write statement used 'myColor' this time, it printed 'Red' to the page. This is just an example to help you to understand how variables work. We could just as easily have the two sentences printed out using only html, but I wanted you to get a basic understanding of variables before we get on to their real usefulness. Ready?

You can use both upper and lower case letters, numbers and the underscore in variable names. The first character in a variable name must be either a letter or the underscore, but not a number, and they are case-sensitive; you can not use myPic and mypic interchangeably- they would be two different variables. You can not use any "javascript" keywords as variable names. Variable names should be as descriptive and non-cryptic as possible.

There are two types of variables: Local and Global. The above examples are global variables, because they were declared (or defined, if you wish) outside of a function. Global variables will apply to any script in the whole document. Global variable can also apply inside functions. Local variables are variables that are declared only inside of a function, and are valid only for use in the function they are created in.

In most instances when using a global variable, the keyword 'var' before the variable name can be omitted. The following examples are both valid:

var apples=12;
apples=12;

Here is an example of global variables:

<script language="Javascript">
<!--hide

var num_1 = 50;
var num_2 = 55;
document.write(num_1 + " is less than " + num_2 + "<BR>");

function demo()
{
var x = 500;
if (x > num_1) document.write("But " + x + " is greater than both " + num_1 + " and " + num_2);
}

demo()

//-->
</script>

And the script's output:

The script is in three parts; the first part declares two global variables, named num_1 and num_2. Notice that these are defined before, and outside of, the function demo(). Next we have the function demo(), and a local variable named x is declared inside this function.

Pay attention to the fact that the global variables are used both inside and outside the function. If we were to write another separate script anywhere in this page, these two global variables could be used, and would still have the same value, unless we changed that value. However, the local variable X is used only inside the function demo(), or is used locally. If we tried to add a document.write() statement using X anywhere outside of the function demo(), we would get an error message and the script would be stopped dead in its tracks.

I mentioned that there are two types of variables, local and global; there is also another distinction to be made, between string and numeric variables. The first two examples on this page dealt with string variables. A string can be thought of as any variable definition with quotes around it. Strings can require not only words and phrases, but numbers as well. However, the numbers used in strings are not assigned a numeric value; in other words "123 Main Street" is a string, but the numbers '123' have no mathematical value, only a descriptive value.

The are times when a value can be taken from a text string, and a numeric value converted into a string; but this will be discussed in the lesson on Math.

Numeric variables, on the other hand, do have a mathmatical value, and are not enlosed in quotes. Nothing makes things clearer than examples, so here are a few.

Did the last valid definition get your attention? The name of a variable should always be as descriptive as possible without being too wordy, but it would work just fine if you wrote-

var  Up = "Down"

I think you should have a basic understanding of what variables are, but we are not through with them yet. There will be more on them in the lessons on Math, Do While loops, Operands, and almost everywhere in this tutorial. Before you finish this little course you will be pretty comfortable with variables. Javascript wouldn't work without them.