In fact, you can declare a variable in a script in the head of a page and another variable in a script in the body of the page. If both are global variables, you can refer to both variables anywhere in your scripts, like this:
<HTML>
<HEAD>
<SCRIPT>
var date = 31;
</SCRIPT>
</HEAD>
<BODY>
var year = 1998;
date = 1; //date is global.
</BODY>
</HTML>
However, if you declare variables in a code block (that is, within curly braces), then that variable is local to that code block, which means you can refer to it only in that code block or in code blocks that the present code block encloses. Keeping variables local is very useful for restricting what goes in the global variable spaceif you have dozens of global variables, you might unintentionally end up with two that have the same name, and theyll conflict with one another. If you restrict your variables to local scope, you wont have to worry about them getting set inadvertently in other parts of the program.
When you use a variable without first declaring it, JavaScript makes that variable a global variable, which might not be what you intended. For that reason, its usually best to make it your practice to declare variables before using themthat way, if you want to make a
variable local, you wont end up with a global variable by mistake.
Variable Types
JavaScript is call a loosely typed language, which means you can use the var keyword to declare variables of all kinds of data types. For example, you can declare a variable like this in a script:
<SCRIPT>
var date = 31;
</SCRIPT>
Now the date variable holds the value 31. However, you can switch the type of data in that variable in the program, if you like. Here, we place a text stringToday is the 31stinto the date variable:
<SCRIPT>
var date = 31;
date = "Today is the 31st";
</SCRIPT>
You cant do this in a strongly typed language like Java. There, you have to declare variables types (such as integer or floating point) when you declare the variable. In JavaScript, we can simply use var to declare all our variables, no matter what were going to place in those variables.
The types of data you can place in a variable in JavaScript 1.2 are number, Boolean, string, function, and object. A number is just as weve seenvalues like 31 or 3.14159. Boolean variables take values of true or false and are usually flags to keep track of conditions, such as the variable dataIsReady. Strings are enclosed in quotation marks in JavaScript, such as Here is the text. Well cover functions and objects in the next chapter.
JScript recognizes six types of data: numbers, strings, objects, Booleans, null, and undefined. The null data type simply holds a value of 0, and the undefined data type is a special one that indicates a variable has not yet been set to any particular value.
Variable Naming Conventions
JavaScript programmers usually follow the Java naming convention for variables. If you have a variable name that is one word, like date, the convention is to make it all lowercase letters. If you have a variable made of two or more words, like TheData, the convention is to capitalize only the initial letter of the second and subsequent words, like this: theData, theOtherData, and theDataThatGoesHere. Now that weve gotten a look at variables in theory, lets put what weve seen to work. Well do that in an example named var.htm next.
The var Example
Our first variable example is a very simple onewell just declare a variable, place a number in it, and display the number in a Web page after reading it back from the variable. This process will make what weve been talking about more concrete and show how we can display numeric values.
Well display a header in our Web page to show what this example is all about:
Well also declare a variable named number, place a value of 4 in it, and then display that value this way:
Lets create this Web page, var.htm, now. We start the usual way, with the <HTML> tag, a title in the head section, and a header showing what the page is all about:
<HTML>
<HEAD>
<TITLE>
A var Statement Example
</TITLE>
<HEAD>
<BODY>
<CENTER>
<H1>
A var Statement Example.
</H1>
</CENTER>
</BODY>
</HTML>
Next, we add the <SCRIPT> section, declare our number variable, and place a value of 4 in that variable:
<HTML>
<HEAD>
<TITLE> A var Statement Example
</TITLE>
<SCRIPT LANGUAGE = JavaScript>
var number = 4
.
.
.
</SCRIPT>
<HEAD>
<BODY>
<CENTER>
<H1>
A var Statement Example.
</H1>
</CENTER>
</BODY>
</HTML>
Now were ready to display the value in the variable in our Web page, but how do we do that?
Displaying the Value in a Variable
So far, weve used document.writeln() to display text in JavaScript, but the value in our variable is a number. How do we display that?
It turns out that we can display the value in a variable with document.writeln() simply by referring to it by namein code, that looks like this:
<HTML>
<HEAD>
<TITLE>
A var Statement Example
</TITLE>
<SCRIPT LANGUAGE = JavaScript>
var number = 4
document.writeln("The number is " + number + ".")
</SCRIPT>
<HEAD>
<BODY>
<CENTER>
<H1>
A var Statement Example.
</H1>
</CENTER>
</BODY>
</HTML>
TIP: Note that strings, like other JavaScript data types, can use the + operator. For example, you can create
the text Happy New Year! this way: var HNY = Happy + New + Year! ;.
Open the var.htm example now, as shown in Figure 1-5. As you can see, weve placed data into a variable and read that data again,
displaying it in our Web page. Now were using variables in JavaScript.
Our var example is fine as far as it goes, but its not very useful. Its important to be able to not only store and display data in a program, but also work with that data, so well start working with our data next.
The var example uses variables.
<HTML>
<HEAD>
<TITLE>
A var Statement Example
</TITLE>
<SCRIPT LANGUAGE = JavaScript>
var number = 4
document.writeln("The number is " + number + ".")
</SCRIPT>
<HEAD>
<BODY>
<CENTER>
<H1>
A var Statement Example.
</H1>
</CENTER>
</BODY>
</HTML>