background
|
|
Tombstone
Tombstone Tuning
Home of tuning, projects and fast cars and boats.
More icon

RiscOS
Risc OS Info
All you need to know about Risc OS and more.
More icon
|
|
Up Image
Navigation
Search this Site
Enter your search terms

Site Breadcrumb - You are here
|
Thau's JavaScript Tutorial
Lesson 2

by Thau!

Page 1 — Thau's JavaScript Tutorial — Lesson 2

In the last lesson, you learned about where JavaScript goes and how it looks. Now it's time to start learning the language. In this lesson, you'll learn how JavaScript stores information, how it makes decisions based on that information, and how to change images based on user interaction.

Ready? It's time to learn the fundamentals of computer programming. First stop, variables. If you've taken algebra, you've seen variables. If you haven't taken algebra, don't worry about it. Variables are simply the way JavaScript stores information. For example, if you write "x=2," "x" is a variable that holds the value "2." If you then say "y=x+3," "y" will hold the value "5."

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.

On to the body of the example!

next page»