cs491notes

CMPS 335 Advanced Web Publishing JavaScript Programming

Control Structures

The if, if/else, if/else if, and if/else if/else Statements

      if (conditional expression) {
            statement(s);
      }
      else if (conditional expression) {
            statement(s);     
      }
       :
       :       
      else {
             statement(s);
      }

If the conditional expression being evaluated is true, the program flow takes the true path, executing the true block of statements. If the conditional expression is false, the program flow takes the false path, executing the first statement following the true block of statements. The else if and else clauses are optional. The if family statements follow the following zero, one, or many rule:

Only one if keyword is allowed with an if conditional statement.
An if clause may have zero or one else clause.
An if clause may have zero, one, or many else if clauses.
The else block of statements may have zero, one, or many lines of code.

The switch Statement

    switch (expression) {
        case label:       
           statement(s);
           break;

        case label:
           statement(s);
           break;
        :
        :
        default:
           statement(s);
           break;
    }

The switch statement is a multiple selection statement that consists of a series of case labels. The value of the expression is compared with the value in each of the labels starting with the first label. If the value matches a particular label, then the set of statements associated with the label execute. A label can be a string value, a numeric value, or a variable name, followed by a colon. A switch statement ends automatically after the closing brace is encountered or when a break statement is found. The break statement can also be used to exit other program control statements such as the while, do, and for statements.

Examples of case labels:

     case sum:     // variable 
     case "golf":  // string literal
     case 80:      // numeric literal

The while Looping Structure

    
    initialization;
    while (conditional expression) {
       statement(s);
       incrementation;
    }

The for Loop Structure

    for (initialization; condition; increment) {
              statement(s);
    }

Examples:

    <script language=JavaScript>
    var score, value, sum
    
    // The if statement
    score = 75;
    if (score >= 60) {
      document.writeln("<br>" + score + "  Passed");
    }

    // The if/else statement
    score = 54;
    if (score >= 60) {
      document.writeln("<br>" + score + "  Passed");
    }else {
      document.writeln("<br>" + score + "  Failed");
    }

    // The if/else if/else statement 
    score = 75;
    if (score >= 90) {
      document.writeln("<br>" + score + "  A");
    }else if (score >= 80) {
      document.writeln("<br>" + score + "  B");
    }else if (score >= 70) {
      document.writeln("<br>" + score + "  C");
    }else if (score >= 60) {
      document.writeln("<br>" + score + "  D");
    }else {
      document.writeln("<br>" + score + "  F");
    }

    // The switch statement
    var choice, startTag, endTag, listType, validInput;
    choice = window.prompt("Select a list style:\n"
      +"1 (bullet), 2 (numbered), 3 (lettered)", "1");
    validInput = true;
    switch (choice) {
      case "1":
        startTag = "<ul>";
        endTag = "</ul>";
        listType = "<h3>Bullet List</h3>";
        break;
      case "2":
        startTag = "<ol>";
        endTag = "</ol>"; 
        listType = "<h3>Ordered List - Numbered</h3>";
        break;
      case "3":
        startTag = "<ol>";
        endTag = "</ol>";
        listType = "<h3>Ordered List - Lettered</h3>";
        break;
      default:
        validInput = false;
      }
    if (validInput == true) {
      document.writeln(listType + startTag);
      for ( i=1; i<=3; ++i) {
        document.writeln("<li>List item " + i + "</li>");
      }
      document.writeln(endTag);
    } else {
          document.writeln("<br>Invalid choice: " + choice);
      }

    // The while loop 
    sum = 0;
    value = 1;
    while (value < 11) {          // looping 10 times
      sum = sum + value;
      value = value + 1;
    }    
  }
    document.writeln("<br><font size=+1>Using the while loop</font>
      <br>" + "Sum of 1 to 10 is " + sum);     

    // The for loop
    sum = 0;
    for (n=1; n<11; n=n+1) {      // looping 10 times
      sum = sum + n;
    }
    document.writeln("<br><br><font size=+1>Using the for
      loop</font><br>" +
       "Sum of 1 to 10 is " + sum);
    </script> 

    Output from the above examples
    75 Passed 
    54 Failed 
    75 C 
    Invalid choice: null 
    Using the while loop
    Sum of 1 to 10 is 55 
    Using the for loop
    Sum of 1 to 10 is 55

Return to CMPS 491 Home Page
Return to Web Site Home Page