Here's an example of JavaScript that uses variables.
View source on the example, and we'll go through it step by step. Here's what you see:
<script language="JavaScript">
<!-- hide me
These first two lines you've seen before. They're the typical preamble to any JavaScript program.
// load up some variables
var secs_per_min = 60;
var mins_per_hour = 60;
var hours_per_day = 24;
var days_per_year = 365;
The first line here is a comment. This comment states the obvious, but it's nice to block off chunks of variable declarations.
The next bunch of lines are variable declarations. There are a few things to notice about these lines:
The first time you use a variable, you should declare it with the word "var."
Although declaring variables with var is not strictly necessary, it's usually a good idea. When we talk about functions two lessons from now, you'll see why.
Variables must start with either a letter or the underscore character.
After the first character, variables can have numbers. So monkey_23 is a fine variable name.
Variable names are case-sensitive.
This means that JavaScript will treat Loop and loop as two different variables. Generally, it's a good idea to pick a naming convention and stick to it. I like having all my variables lowercase, with underscores separating words, like secs_per_min in the example above. Other people prefer using internal capitalization, like secsPerMin.
Variables should describe what they are.
Variables such as x, y, or hack_hack_hack aren't very useful to a person who's trying to figure out your script. Don't make your variables so long that they take forever to type, but make them long enough to be descriptive.
You can give a variable a value when you declare it, or you can wait until later.
In the example, each variable was given a value the first time it was used. You don't have to do this, and we'll see examples later on where it's nice to declare a variable even though we don't know the value right away.
Statements end with a semicolon.
Statements are the sentences of JavaScript and semicolons are the end punctuation marks. Spaces and line breaks are ignored by the JavaScript interpreter, so the layout of the script serves only to make it more legible for people. This entire example could have been written in one really long line if you take out the comments. But that would be impossible to read.
To be complete, I should mention that in some cases a semicolon isn't necessary and you might see some scripts in which people leave them out. However, it's always a good idea to put the semicolon in there. Not only does it make your program more legible, but it also makes it less likely that adding a line later will mess up your program. Always stick a semicolon at the end of a statement — it is the Webmonkey way.
// do some calculations
var secs_per_day = secs_per_min * mins_per_hour * hours_per_day;
var secs_per_year = secs_per_day * days_per_year;
Here we see some basic math. After JavaScript executes these statements, the variable secs_per_year will contain whatever you get when you multiply 60, 60, 24, and 365. From this point on, whenever JavaScript sees the variable secs_per_year, it will substitute in that huge number.
// end hiding -->
</script>
Nothing new here, just the normal way to end a piece of JavaScript.
That's all the JavaScript that's in the header of this example. After JavaScript has executed all this code, the above variables will be declared and given values. That's very nice, but we haven't really done anything with the variables yet. That's what happens in the body of the example.
One question that often comes up is, "What JavaScript goes in the head of a page and what goes in the body?"
Usually it doesn't matter, but it's a good idea to put most of your JavaScript in the head of a page. This is because the head gets read before the body, so any variables that appear in the body (like secs_per_min) will already have been declared in the head by the time they're needed. If for some reason secs_per_min were defined after JavaScript tried to do the document.writeln(secs_per_min) command, you'd get a JavaScript error.
OK, we're almost ready to do an exercise using variables
