The JavaScript Diaries: Part 5

This week, as we continue our quest to learn the JavaScript language, we'll look at conditional statements and loops. These can help us to add more depth and complexity to our scripts.

Conditional Statements

A conditional statement is used to execute a portion of code, based on the outcome of whether a condition is met. We perform these types of operations all the time in our everyday lives. Here's an example: "If Bob wins the lottery, he will retire; otherwise he will continue working at his current job."

This conditional statement is actually pretty simple. The outcome of the problem depends upon one condition: whether Bob wins the lottery. The results are based on a true/false (Boolean) statement: if Bob wins the lottery (which we would consider "true"), then he will retire; if Bob doesn't win the lottery (which we would consider "false"), his current situation will not change so no action will be taken.

In JavaScript, conditional statements can be an effective aid in developing more complex scripts. These type of statements make use of the comparison operators we learned about in section 3. The result, as I said, is a Boolean value. We are testing to see if a value is true or false, not looking at the actual value of it, as such. There are several different types of conditional statements.

The `if` Statement

This conditional statement is written as:

  if (condition) {
    action to be taken
  }

This statement says that if the condition stated in the parentheses is true then execute the code given within the curly brackets. If the condition is false, the code within the curly brackets will be ignored and the script will continue executing the code located after the closing curly bracket. Let's take another look at our conditional statement above about Bob and the lottery. Here's what it would look like if we used a conditional statement:

  var winsLottery=true
  if (winsLottery) {
    retire to life of luxury;
  }
  else {
    keep job;
  }

Using JavaScript, let's look at an example of a working script:

  var userName=prompt("Enter your name","");
  if (userName=="Lee") {
    alert("Hey, nice name!");
  }

When this script is executed, if the name entered in the prompt box is "Lee," it will display an alert box that says: "Hey, nice name!"; otherwise, if any other action is taken (e.g., another name is entered; the name is entered in a different case; the box is left empty; or the "Cancel" button is pressed), the script will just end. Basically, the script says that if the variable userName is not true (not equal to "Lee") then don't do anything.

The Statement Block

The area within the curly brackets is called a "statement block." The curly brackets can be formatted in whatever format you wish. If you are only executing one statement, the curly brackets are not required, but it's good to use them even for one statement, in case you happen to add others later. The two most popular formats are:

  if (condition) {
    action to be taken
  }
  else {
    action to be taken
  }

and

  if (condition)
  {
    action to be taken
  }
  else
  {
    action to be taken
  }

We'll be using the first one.

[next]

Created: June 10, 2005

URL:

The JavaScript Diaries: Part 5