The JavaScript Diaries: Part 5 - Page 2

The JavaScript Diaries: Part 5

The `if/else` Statement

Another type of conditional statement is called an if/else statement. It adds another dimension to the if statement. This statement allows for more complex decisions to be made within the script. The format is:

  if (condition) {
    action to be taken if the condition is true
  }
  else {
    action to be taken if the condition is false
  }

The else reserved word allows a determined action to be taken if the first condition is false. In other words, one way or another this portion of the script will be executed. If the condition is true, then the first statement will be executed; if the condition is false, the second statement will execute. Execution will then return to the main portion of the script.

Building upon our previous script, let's change it to an if/else statement.

  var userName = prompt("Please enter your name.", "");
  if ( (userName == "") || (userName == null) ) {
    alert("Don't you even know your own name?");
  }
  else {
    alert("Welcome " + userName + "!");
  }

Ah, now we're starting to do something that makes sense; this is a simple validation routine. (This should look familiar. We used it in our previous section on functions.) Here are the steps involved:

The variable userName is declared and given the results of a prompt window as its value.
A condition statement checks to see if any data is entered. It doesn't matter whether it is a string or a number.
1. Our condition statement says this: if nothing is entered in the prompt window, the condition statement is true and an alert window will display the result: "Don't you even know your own name?"
If the condition statement is false (e.g., data was entered into the prompt window), then an alert window will be displayed with the result: "Welcome [entered data]."

Instead of having the script run each time the page is accessed, it could be put into a function and run from a link:

  function greetVisitor() {
    var myName = prompt("Please enter your name.", "");
    if ( (myName == "") || (myName == null) ) {
      alert("Don't you even know your own name?");
    }
    else {
      alert("Welcome " + myName + "!");
    }
  }

In the body of the document, insert the following code:

<form>
  <input type="button" value="Click for Greeting" onClick="greetVisitor();"
</form>

Is it starting to come together now?

The `else if` Statement

When you need to check multiple conditions, you can use the else if statement. It works like this (adapted with thanks to Andrew and Jonathan Watt):

  var promptVal = prompt("Enter a number:","");
  if (promptVal > 0) {
    alert("The number you entered was positive.");
  }
  else if (promptVal == 0) {
    alert("The number you entered was 0.");
  }
  else {
   alert("The number you entered was negative.");
  }

You can include as many else if statements as needed to obtain the desired results. Let's create a script with a conditional statement from scratch and see how it's done.

[previous] [next]

Created: June 10, 2005

URL:

The JavaScript Diaries: Part 5 - Page 2