Decision Making



Event handlers provide a very basic means for controlling the execution of JavaScript statements. However, they have their limitations. What if you want to execute a statement or a set of statements only when a user has hit your web page with the Netscape browser? Or, if a user has forgotten to fill in a text field in your form? Or, when any sort of specific condition or criteria is met? Fortunately, JavaScript provides more robust ways to choose when and where to execute commands. This ability to respond to specific conditions is known as decision making.

Conditional Statements

    Decisions in JavaScript (and in most other programming languages) involve the use of conditional statements. There are three types of conditional statements. They are as follows:

    if conditional statement:

      if (some condition that evaluates to true) {
        then execute this statement
        and any other statements on additional lines
      }

    The "if" conditional statement is used when, you want a set of statements to execute if and only if a condition is met. If the condition is not met, then the statements are ignored. Think of the "if" conditional statement as a way of providing an alternative option in your code that may execute for some users.

    else conditional statement:

      if (some condition that evaluates to true) {
        then execute this statement
        and any other statements on additional lines
      }
      else {
        then execute this statement
        and any other statements on additional lines
      }

    The "else" conditional statement is always used in collaboration with the "if" conditional statement. Think of using if and else when you want a set of statements to execute when a condition is met and another set of statements to execute if that condition is not met. Notice that the "else" conditional statement does not use a condition, these statements will execute only when the condition supplied to "of" is false. Using the "else" conditional statement does not present an alternative path in your code. Instead, it presents a gateway through which all users must pass. One or the other set of statements will execute.

    else if conditional statement:

      if (some condition that evaluates to true) {
        then execute this statement
        and any other statements on additional lines
      }
      else if (some other condition that evaluates to true) {
        then execute this statement
        and any other statements on additional lines
      }
      else if (some other condition that evaluates to true) {
        then execute this statement
        and any other statements on additional lines
      }
      else {
        then execute this statement
        and any other statements on additional lines
      }

    The "else if" conditional statement is always used in collaboration with the "if" and "else" conditional statements. As a matter of fact, it must be placed between these statements. Think of using else if when you want to extend the number of possible outcomes in a decision making structure, i.e. 3 or more paths. Again, only one of these sets will execute. If none of the conditions are met, then the statements in the else condition are executed. Some important things to note about this type of conditional statement:

    • Conditions are checked in the order that they are used in the "if, else if, else" conditional statement. So, if two or more conditions are actually true, only the first condition that is encountered will execute.

    • You are not limited to three paths. You can have as many as you want, just add an additional "else if" statement for each additional path.

Conditions

The power of conditional statements lies in the condition. A condition is basically an expression that evaluates to either true or false. It is generally a simple logical or mathematical comparison similar to the kind that you work with in basic arithmetic. It usually consists of two values or smaller expressions separated by a comparison sign such as an equals, greater than, or less than sign, etc.. Smaller expressions are first evaluated on either side of the comparison sign, and then the two distinct values are compared. When compared, the entire expression will turn out to be either true or false. For example:

in numerical comparisons:

    if (userSalary > 30000) {
      alert("You are treating us to dinner!")
    }

in textual comparisons:

    if (userName == "Han Solo") {
      alert("Where's Chewbacca?")
    }

Comparison Operators

Conditions in JavaScript use the following symbols for comparing values.

    ==     equal to
    !=     not equal to
    >      greater than
    <      less than
    >=     greater than or equal to
    <=     less than or equal to

Logical Operators

Logical operators are used to expand the number of conditions that can be used to evaluate an expression.

  • || allows you to stipulate that any one of a set of expressions can evaluate to true in order for the condition to be correct. This is also known as logical OR. (The symbol used for this operator is the "pipe" symbol and is usually located above the carriage return key on your keyboard.) For example:

      if (userName == "Scooby" || userName == "Shaggy") {
        alert(userName + "! There is a Scooby snack waiting for you somewhere in this website!")
      }

  • && allows you to stipulate that two or more expressions must all evaluate to true in order for the condition to be correct. This is also known as logical AND. For example:

      if (navigator.appName == "Netscape" && parseInt(navigator.appVersion) == 4) {
        window.moveTo(200,100)
      }