Join the Discussion
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.
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.
var hello = 'Hello World';
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.
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
We could also have defined the variable as boolean by assigning it an initial value of true or false. For example:
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:
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.
Suppose that the code to be repeated reads as follows:
please <a href="mailto:email@example.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.
var questions = '<p>If you have any questions about this
please <a href="mailto:firstname.lastname@example.org">email me</a>.</p>';
Note: The line commencing with 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.