1. Tech

Your suggestion is on its way!

An email with a link to:

http://javascript.about.com/library/bltut02.htm

was emailed to:

Thanks for sharing About.com with others!

Learn Javascript

Defining Variables

Join the Discussion

Questions? Comments?

Related Terms

Variable Object Instance

Introduction

In this tutorial we will build on what we learned with our first script by creating a variable and displaying the value of that on our web page instead of displaying static text.

I'll start by explaining what a variable is. A variable is a named location in memory that is used to hold a value that can be modified by the program. If that doesn't make sense yet then it should by the end of this tutorial.

The Script

In our first example we coded the text that we wanted to display on the page directly into the write statement. Instead of coding the text directly into the document.write statement we will now create a variable containing that text instead.

<script type="text/javascript">
var hello = 'Hello World';
document.write(hello);
</script>

With this version of the script we no longer have the text to be displayed contained within the document.write statement. Instead we first define a variable called hello which we assign the value "Hello World" to and then we write out the content of the variable instead of static text.

This doesn't produce any different result on the page but the differences in the code introduce you to a number of new features of Javascript. This will also allow us to insert further statements into this Javascript code at a later date that will change the value of the variable before it is displayed on the page.

The first line in this script creates our first variable. To create a variable you specify var (for variable) followed by the name that we want to use for the variable. If we want to give the variable a value straight away then we follow the name with equals (=) and then the value that we want to use. We call this initializing the variable.

It is possible to define a new variable without preceding the variable name with var. Specifying a new variable name without the var in front will still result in a variable with the specified name being created (if one doesn't already exist). I recommend however that you always use var when you intend to define a new variable. In a later tutorial I will show you how you can create two variables with the same name but different scope (this means that only one is accessible at a time and where you are in the code determines which one you are referencing). If you leave off var when defining new variables you run the risk of using an existing variable instead of defining a new one. Always specifying var when defining new variables will also reduce the possibility that the variables you use in multiple scripts on the same page will interfere with one another.

Types of Variables

Javascript supports three types of simple variables. These are text, numbers, and boolean (true or false). In this case this variable is a text variable because the value we have initialized it with is text (because it is enclosed within apostrophes). Had we wanted to define the variable as a number then we would have given it a numeric value (not enclosed in apostrophes) like this:

var mynum = 5;

We could also have defined the variable as boolean by assigning it an initial value of true or false. For example:

var smokes = false;

If you don't assign a value to the variable straight away then the type of variable that it is will be undefined until you give it a value.

You can leave a variable undefined when you don't want to assign it an initial value but a better alternative where you don't want to give the variable a value straight away is to specify that the variable doesn't have a value at all. We do this by initializing the variable with null like this:

var riches = null;

Javascript also allows you to define and use more complex data types that are defined using classes. We'll go into more detail about classes in a later tutorial but here's an example of a variable defined from a class so that you know what they look like:

var today = new Date;

Naming Variables

So what should you call your variables? The best option (at least to start with) is to use meaningful names for all of your variables. If you call your variable openingPrice then you are far more likely to remember what the field is used for when you need to modify the script at a later date than if you call it op. The only restriction on what names you can use for your variables is that you can't use reserved words and all of the characters you use in the variable names must be alphanumeric. Reserved words are words that currently (or are expected in the future) to have a special meaning in the Javascript programming language. Examples of reserved words that you have already met include "var", "true", "false", "new", and "null". You'll find a complete list of reserved words elsewhere on this site.

Note that variable names cannot contain spaces. This means that when you use multiple words in a variable name that you must either separate the words with an underscore character (the only non alphabetic and non number character that nevertheless is considered to be alphanumeric) - for example: opening_balance - or you can do as I did in the previous paragraph and capitalize the first letter of the second and subsequent words. It doesn't matter which of these two options you choose but I suggest that you use that one consistently for your variable names rather than switching between them.

Using What You Know

Suppose that you have some web page content that appears in multiple places on the page. If you will need to update that repeating content then you will need to make sure that you make the changes at each spot in the page where the content appears. If you miss one when updating it then the content will no longer repeat correctly.

If we use a Javascript variable to store the content that is to be repeated then we can write that out to the several places on the page where the content is needed. If the content needs to be changed then you change it once in the declaration of the variable and all of the repetitions will reflect that change.

Suppose that the code to be repeated reads as follows:

<p>If you have any questions about this
please <a href="mailto:me@myaddress.com">email me</a>.</p>

This code might appear under each of say five separate sections of text on your page. If your email address were to change then you would need to update each spot on the page to the new email address. If you miss one then emails sent from that link will go to the wrong address.

So let's include that text into a Javascript variable instead. We will replace the first occurrence of the code with the following Javascript:

<script type="text/javascript">
var questions = '<p>If you have any questions about this
continued from previous line please <a href="mailto:me@myaddress.com">email me</a>.</p>';
document.write(questions);
</script>

Note: The line commencing with continued from previous line is a continuation of the previous line and I have split it into two lines to make it easier to read in browsers using lower screen resolutions. When you copy the script you should place the code on this line onto the end of the preceding line.

The other copies of the same code can be replaced with the following Javascript which will use the variable value previously assigned:

<script type="text/javascript">
document.write(questions);
</script>

©2014 About.com. All rights reserved.