The Basics

Values, Variables and Functions

Values are things like literal values. In the Hello World example, the "Hello World" string was an example of a value. The number '2' is another example of a value. Really, by Value, all we mean is Data.

Variables are things that store or hold data. We can say in javascript something like:

var foo = "bar";

So later on, you could say something like this:

alert(foo);

and the program would display "bar" in a text box.

Functions exist to allow you to abstract out parts of a program. They have 'parameters', which are variables that you can assign when you call the function, and often they have a return value which gives you some information about what the function did.

For instance, lets say we made this function:

 function getWebAddress(directory, filename) {
return "http://www.example.net/" + directory + "/" + filename ;
}

which returns a string value whenever we call it with a directory and filename like so:

var directory = "pictures";
var filename ="catPicture1.jpg";
var otherFileName = "otherCatPicture1.jpg";
var webAddress = getWebAddress(directory, filename);
var otherWebAddress = getWebAddress(directory, otherFileName);

And then the values at webAddress would be "http://www.example.net/pictures/catPicture1.jpg".

Functions are really useful in simplifying your code. If you can abstract some functionality out, then you can put it all in one spot, so when you find bugs or add features it all happens in one spot.

Flow Control

It is not enough to be able to call functions and store the results in variables. Sometimes we need to do different things for different values. Other times, we might want to do something multiple times.

For the first thing, we have the if statement. So we can say something like

var javascriptIsCool = true;
if(javascriptIsCool){
alert("Cool!");
} else {
alert("Lame!");
}

And the page will show "Cool!". If you change the '= true;' to '= false;', then it will show lame.

So if the part inside of the if statement evaluates to true (which 'javascriptIsCool' does, since we defined it as true), then it executes the first block (a block of code is generally considered to be the code between the brackets). If that statement isn't true, then it will execute the second block. Play around with that part of the code in firefox to get some familiarity with if statements, they are extremely useful.

Now on to loops. Let's start with the while loop.

The while loop looks and acts alot like the if statement, except, the block of code in the while loop will repeat while the statement in the while loop evaluates to true. So this code:

var number = 0;
while(number < 5){
number = number + 1; document.write(number + "...");
}

Will display a '0...1...2...3...4...' on a webpage. (We won't go into the document object model -- the 'document.write' part -- in detail now, but it is important later. Suffice to say that when you 'document.write("Example text.")', it will write that example text to the html page.)

A for loop does the exact same thing, but it is more concise when you are counting to a certain number like the last example. Here is code that does the same thing:

for(var number = 0;number < 5;number = number + 1){
document.write(number + "...");
}

Next time we will look at some real code, that interactively displays three images.