js if

Javascript If Statements


To write more complex programmes in any language, you need something called control flow. This is just controlling the direction of the programme so that it's not so linear. Instead of reading your code line by line, and every single line, you can skip lines of code depending on certain conditions. For example, if you're using an OK and Cancel alert box, and the user clicks OK, you can execute one piece of code. If, however, the user clicks Cancel, you can have a different segment of code executed. This is called Control Flow. Don't worry if none of that makes sense - it will become clearer when you follow the examples. Programming is, after all, about doing, and not yakking.


If Statement

If statements are the backbone of programming. Some people even go so far as to say that in a sense, all programming is a series of If statements. To get you started on just what an If statement is, type this code into the HEAD section of a HTML page, then test it out:

<SCRIPT language = JavaScript>

ConfirmStatus = confirm("Format Your Hard Drive?")

if (ConfirmStatus == true) {

alert("Formatting Hard Drive Now ")

}

</SCRIPT>

The first line of code is what gives you a new type of message box -confirm. It looks like this in Internet Explorer (NOTE: We're not actually going to format anything!)

An OK and Cancel alert box

The programme then waits until you click either the OK button or the Cancel button.

ConfirmStatus = confirm("Format Your Hard Drive?")

Whichever button you click, the answer will be stored in the variable ConfirmStatus. The answer, in this case, is a Boolean value: it's either True or False. If you click OK on a confirm box, the answer will be true; if you click Cancel on a confirm box, the answer will be false.

What you as a programmer have to do next is to check which button the user clicked. Was OK clicked or was Cancel clicked? If the OK button was clicked, you'll want to do one thing; if the Cancel button was clicked, you'll want to do another thing. So you need to test what is inside the variable ConfirmStatus. You do the testing with an if statement. Our if statement was as simple as if statement get. It was this:

if (ConfirmStatus == true) {

alert("Formatting Hard Drive Now ")

}

Note the format for an if statement:

if (condition to test) {

Your statement here

}

    First you type the word if (in lowercase letters)
    Next, type a space, then your condition inside round brackets
    Type another space, then type a left curly bracket {
    On a new line, type your statement (what you want to happen)
    Finish with a right curly bracket }

If you're checking what's inside a variable, JavaScript requires a double equals sign (==). It means "has a value of". In our condition to test, we wanted to check whether the variable ConfirmStatus was true or false. So we did this:

ConfirmStatus == true

We're saying "If ConfirmStatus has a value of true" then execute the next line of code. The next line of code was an alert box:

alert("Formatting Hard Drive Now ")

The main point to bear in mind here is that you would only get the alert message IF you clicked the OK button. Because then the variable ConfirmStatus would be true. But what if the user clicked Cancel? What happens then?

If the Cancel button is clicked, the ConfirmStatus variable will be false. In that case, our alert box statement doesn't get executed - the programme will just ignore that line and move on to the next line of code.

We can, however, add another statement to check for a false condition. Change your code to this:

<SCRIPT language = JavaScript>

ConfirmStatus = confirm("Format Your Hard Drive?")

if (ConfirmStatus == true) {

alert("Formatting Hard Drive Now ")

}

if (ConfirmStatus == false) {

alert("Tough! Formatting Hard Drive anyway")

}

</SCRIPT>

The new code is in bold. All we've done is add a second if statement to check for a false condition. If ConfirmStatus is false (the Cancel button was clicked), then the second alert box is displayed.

All you're saying with if statement is this:

"If it's true, do one thing; if it's false do another thing"

You can add as many if statements as you need, and you can nest one if statement inside another. For example, you could add another confirm box inside the second statement, and nest another if condition. Like this:

if (ConfirmStatus == false) {

nested = confirm("Ah, go on! Let me format your hard drive")

if (nested == true) {

alert("Thanks!")

}
if (nested == false) {

alert("Spoil Sport!")

}

}