JavaScript statements

See section 5H of the book.

This page has been translated into French.

When writing your own scripts it's very useful to know some of the most common JavaScript statements. With if() you can check conditions, while for() allows you to go through a set of data and do the same with each piece of data. Both are very common statements and you should know how they work.

These statements are common to all programming languages, so if you understand them for JavaScript, you understand them for all other languages and never have to learn the concepts again, only the specific syntax of the programming language.

At the moment I explain the following statements:

The if() statement

Code like this:

if (something is the case) {
	more JavaScript commands
}

is used when you want to execute some code only if a specific condition is met.

if ()

For instance, suppose you read out the annual income of a user from a form and put it in the variable income. Now if the income is over $100,000, you want to inform the user of some special benefit for people with large incomes. Then the code becomes:

var income = [read out from form]

if (income > 100000) {
	alert('We can offer you a special benefit.');
	(more code)
}

The code is very simple: you take income and compare it to 100000. If it's larger, so if the condition (income > 100000) is met, the code between the curly brackets {} is executed. If the condition is not met, nothing happens.

See the Boolean logic page for a description of how conditions like this one work.

else if ()

Now suppose you also want to see if the user has a house of his own. If he does but still has an income less than $100,000 you want to inform him of some other interesting possibilities.

If you want to check for ownhouse only if income is not larger than $100,000 you have to use this code:

var income = [read out from form]
var ownhouse = [read out from form, value is 'Yes' or 'No']

if (income > 100000) {
	alert('We can offer you a special benefit.');
	(more code)
}
else if (ownhouse == 'Yes') {
	alert('We still have some offers');
	(more code)
}

With if - else if you can define various conditions that are checked one after another until the script finds a true condition. Then the block below the true condition is executed. After one block is executed the script ignores any subesquent else if's.

In this case the script first checks if income is larger than 100000. If it isn't, it then checks (else if) if the user owns a house.

So in an if-else if construction there are four possibilities:

  1. Only the first condition is met: the first block of code is executed
  2. Only the second condition is met: the second block of code is executed
  3. Both conditions are met: only the first block of code is executed.
  4. Neither condition is met: nothing happens

Of course you can use as many else ifs as necessary.

else

Now suppose that you want to say sorry to those people who have an income less than $100,000 and have no house. You can add the following code below the last else if:

else {
	alert ('sorry');
	(more code)
}

This else means: in all other cases. If none of the above conditions are met, this block of code is executed.

Comparision of values

Usually in an if statement you want to compare two strings or numbers. You do this as follows:

If you want to compare strings, be sure to always write the string between single quotes, like:

if (ownhouse == 'Yes') {
	alert('We still have some offers');
	(more code)
}

If you leave out the quotes, JavaScript thinks that you want to compare the value of the variable ownhouse with the value of the variable Yes.

if (ownhouse == Yes) {
	alert('We still have some offers');
	(more code)
}

If you haven't declared a variable Yes strange errors can creep up.

Seeing if objects exist

You can also see if an object exists:

if (document.images) {
	do something with document.images
}

If the object document.images exists, the condition becomes true and the block of code is executed.

The Object detection page explains why you should do this.

The for () statement

This block of code

for (var i=0;i<5;i++) {
	alert('i = ' + i);
}

is a for loop that gives alerts with the numbers 0,1,2,3 and 4. Try it to see what it does.

As you can see, the alert gives the value of i and this value goes from 0 to 4. This is caused by the for statement:

for (var i=0;i<5;i++)

This means: the variable i starts at 0 (var i=0;), the for loop goes on as long as i is less than 5 (i<5) and i is increased by one each time the loop is done again (i++).

In practice, that means that the code between the curly brackets {} is executed with i=0, then with i=1 etc. until i=4. When it increases i to 5, the code sees that the condition i<5 is no longer met and it stops the loop.

So the for statement is used to execute the same code a couple of times with each time a different value of i. You will use this statement mainly if you want to go through an array and do the same thing with each of the elements.

By saying var i you declare a new, local variable for this for loop only. Sometimes it's very important to declare it as such because the program can get confused if you use the variable i more than once. By explicitly declaring it you confine it to this for loop only, as soon as it's done the variable is removed from the program memory. This avoids all potential confusion.

You can also put an if inside a for, like:

for (var i=0;i<5;i++) {
	if (thearray[i] == 'Yes') {
		(do something)
	}
}

Now the code takes all elements from the array thearray and for each one checks if the value is Yes. If it is, the innermost block of code is executed.

Of course, you can also go from 4 to 0 backwards:

for (var i=4;i>=0;i--)

or from 0 to 10 in steps of 2

for (var i=0;i<11;i+=2)

or anything else that's necessary.

A related statement is for (var i in object). This does the same, except that you go through all the properties of an object. This statement is explained on the associative arrays page.