JavaScript Variables
This chapter is from the book
This chapter is from the book
This chapter is from the book
Variables
Variables are important, not only in the context of JavaScript, but in all computer programming languages. Without variables very little can happen. With variables, you unleash a tremendous amount of power and the capability to move, change, and work with all kinds of data.
Put in its simplest terms, a variable is a container, to which you assign a name, for a value (which always has a particular type) held in the memory of the computer running the JavaScript. This statement actually might make variables sound more complicated than they really are because in the real world, they are very easy to use.
Creating Variables
Creating variables in JavaScript is easy. To give you a quick and simple introduction to variables, let's return to your standard HTML template:
<html> <head> <title>A Simple Page</title> <script language="JavaScript"> <!--Cloaking device on! //Cloaking device off --> </script> </head> <body> </body> </html>
The first thing to do is create a variable. You can do this two ways: by declaring them and on-the-fly. To start with, let's look at variables that are declared before being used.
To declare (create) a variable, you use the JavaScript statement var (which stands for variable) followed by the name you want to assign the variable. So, the following line of JavaScript creates a variable called msg:
<html> <head> <title>A Simple Page</title> <script language="JavaScript"> <!--Cloaking device on! var msg; //Cloaking device off --> </script> </head> <body> </body> </html>
Here are a few things you need to know about variable names:
Variable names can contain uppercase characters, lowercase characters, or a mixture of both.
Until initialized, the value of a variable is undefined.
The first character cannot be a digit.
Variable names cannot contain spaces; if you want to string together two or more words, you should use the underscore character (_).
You should avoid using the dollar symbol ($) in a variable name because Internet Explorer 3.02 (with JScript 1.0) and Netscape Navigator 2.02 cannot handle it.
You should avoid using variable names that differ only in case (for example, msg and MsG) because JScript 1.0 cannot distinguish between the two.
The following are all valid variable names:
msg
Hello_There
Msg1
Msg_1
The following variable names are all either invalid or best avoided:
1msg Starts with a digit
hello there Contains a space
var A JavaScript reserved word
dollar$ Best avoided because it contains a $
msg and Msg Best to avoid both together because they differ only in case
If you want to assign a value to your newly created variable, you can either do the creating and assigning all in one line:
<html> <head> <title>A Simple Page</title> <script language="JavaScript"> <!--Cloaking device on! var msg ="Welcome to JavaScript variables!"; //Cloaking device off --> </script> </head> <body> </body> </html>
Or, you can do the creating and assigning on separate lines:
<html> <head> <title>A Simple Page</title> <script language="javascript"> <!--Cloaking device on! var msg; msg = "Welcome to JavaScript variables!"; //Cloaking device off --> </script> </head> <body> </body> </html>
If, instead of wanting to assign the variable a string, you wanted to assign it a number, you would do as follows:
<html> <head> <title>A Simple Page</title> <script language="JavaScript"> <!--Cloaking device on! var msg = 22; //Cloaking device off --> </script> </head> <body> </body> </html>
Creating Multiple Variables
You'll probably find yourself needing more than one variable at some point in your JavaScript career (very soon in fact!), so you'll need to be able to create multiple variables.
One way to do this is by creating each on a separate line in the JavaScript:
<html> <head> <title>A Simple Page</title> <script language="JavaScript"> <!--Cloaking device on! var msg1; var msg2; var num1; var num2; //Cloaking device off --> </script> </head> <body> </body> </html>
This works just fine, but it makes the code a little difficult to read. A far better way to do this is by declaring it all on one line, as follows:
<html> <head> <title>A Simple Page</title> <script language="JavaScript"> <!--Cloaking device on! var msg1,msg2,num1,num2; //Cloaking device off --> </script> </head> <body> </body> </html>
The line begins with var, and then the name for each variable you want to create is added after it, with a comma separating each variable name. At the end of the line is the semicolon line terminator.
If you want, you can create the variable and assign the values all in one line:
<html> <head> <title>A Simple Page</title> <script language="JavaScript"> <!--Cloaking device on! var msg1="Hello", msg2="There", num1=6, num2=52; //Cloaking device off --> </script> </head> <body> </body> </html>
Displaying the Contents of a Variable
So, you've created variables and assigned string and numerical values to them. Now, you can make them work for you!
The first thing you can do is prove that all this variable stuff actually works. So, in this short example, you are going to use the alert() method to display the value of variables.
So, again, you can begin this by declaring a couple of variables called msg1 and num1 and assigning values to them, "Hello there "(a string) and 22 (a number):
<html> <head> <title>A Simple Page</title> <script language="JavaScript"> <!--Cloaking device on! var msg1 ="Hello there", num1 =22; //Cloaking device off --> </script> </head> <body> </body> </html>
Next, you add the alert() method to the page—make sure it is below the variables:
<html> <head> <title>A Simple Page</title> <script language="JavaScript"> <!--Cloaking device on! var msg1 ="Hello there", num1 =22; alert(); //Cloaking device off --> </script> </head> <body> </body> </html>
Finally, you must get the alert() method to read the value of the variable. Remember when you generated an alert box with text in it? The text was placed in quotes. This was done to show that it was a string. However, getting the alert box to display the value of a variable is easier. All you need to do is place the variable name inside the parentheses (no quotes, nothing):
<html> <head> <title>A Simple Page</title> <script language="JavaScript"> <!--Cloaking device on! var msg1 ="Hello there", num1 =22; alert(msg1); //Cloaking device off --> </script> </head> <body> </body> </html>
If you want, save this example and load it into the browser to see it in action