Home | | Internet & World Wide Web HOW TO PROGRAM | | Internet Programming | | Web Programming | switch Multiple-Selection Statement

Chapter: Internet & World Wide Web HOW TO PROGRAM - The Ajax Client - JavaScript: Control Statements II

Study Material, Lecturing Notes, Assignment, Reference, Wiki description explanation, brief detail

switch Multiple-Selection Statement

Previously, we discussed the if single-selection statement and the if…else double-selection statement.

switch Multiple-Selection Statement


Previously, we discussed the if single-selection statement and the ifelse double-selection statement. Occasionally, an algorithm will contain a series of decisions in which a variable or expression is tested separately for each of the values it may assume, and dif-ferent actions are taken for each value. JavaScript provides the switch multiple-selection statement to handle such decision making. The script in Fig. 8.7 demonstrates three dif-ferent CSS list formats determined by the value the user enters.


Line 12 in the script declares the variable choice. This variable stores the user’s choice, which determines what type of XHTML list to display. Lines 13–14 declare vari-ables startTag and endTag, which will store the XHTML tags that will be used to create the list element. Line 15 declares variable validInput and initializes it to true. The script uses this variable to determine whether the user made a valid choice (indicated by the value of true). If a choice is invalid, the script sets validInput to false. Line 16 declares vari-able listType, which will store an h1 element indicating the list type. This heading appears before the list in the XHTML document.


Lines 18–19 prompt the user to enter a 1 to display a numbered list, a 2 to display a lettered list and a 3 to display a list with roman numerals. Lines 21–40 define a switch statement that assigns to the variables startTag, endTag and listType values based on the value input by the user in the prompt dialog. We create these different lists using the CSS property list-style-type, which allows us to set the numbering system for the list. Possible values include decimal (numbers—the default), lower-roman (lowercase Roman numerals), upper-roman (uppercase Roman numerals), lower-alpha (lowercase letters), upper-alpha (uppercase letters), and several others.


The switch statement consists of a series of case labels and an optional default case. When the flow of control reaches the switch statement, the script evaluates the control-ling expression (choice in this example) in the parentheses following keyword switch. The value of this expression is compared with the value in each of the case labels, starting with the first case label. Assume that the user entered 2. Remember that the value typed


        <?xml version = "1.0" encoding = "utf-8"?>


        <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"




        <!-- Fig. 8.7: SwitchTest.html -->


<!-- Using the switch multiple-selection statement. -->

      <html xmlns = "http://www.w3.org/1999/xhtml">




      <title>Switching between XHTML List Formats</title>


        <script type = "text/javascript">



        var choice; // user’s choice


        var startTag; // starting list item tag


        var endTag; // ending list item tag


        var validInput = true; // indicates if input is valid


var listType; // type of list as a string

choice  = window.prompt( "Select a list style:\n"

"1         (numbered), 2 (lettered), 3 (roman)", "1"

        switch ( choice )


case "1":                     

startTag = "<ol>";

endTag = "</ol>";

listType = "<h1>Numbered List</h1>";


case "2":                     

startTag = "<ol style = \"list-style-type: upper-alpha\">";

endTag = "</ol>";

listType = "<h1>Lettered List</h1>";


case "3":                     

startTag = "<ol style = \"list-style-type: upper-roman\">";

endTag = "</ol>";

listType = "<h1>Roman Numbered List</h1>";



validInput = false;

} //end switch

        if ( validInput == true )


document.writeln( listType +  startTag           );


for ( var i = 1; i <= 3; ++i         )                      

document.writeln( "<li>List    item "  + i + "</li>" );

        document.writeln( endTag );


        } //end if


        document.writeln( "Invalid choice: " + choice );

        // -->








        <p>Click Refresh (or Reload) to run the script again</p>





Fig. 8.7 | Using the switch multiple-selection statement.

by the user in a prompt dialog is returned as a string. So, the string 2 is compared to the string in each case in the switch statement. If a match occurs (case "2":), the statements for that case execute. For the string 2 (lines 29–32), we set startTag to an opening ol tag with the style property list-style-type set to upper-alpha, set endTag to "</ol>" to indicate the end of an ordered list and set listType to "<h1>Lettered List</h1>". If no match occurs between the controlling expression’s value and a case label, the default case executes and sets variable validInput to false.


The break statement in line 32 causes program control to proceed with the first state-ment after the switch statement. The break statement is used because the cases in a switch statement would otherwise run together. If break is not used anywhere in a switch statement, then each time a match occurs in the statement, the statements for all the remaining cases execute.

Next, the flow of control continues with the if statement in line 42, which tests vari-able validInput to determine whether its value is true. If so, lines 44–49 write the list-Type, the startTag, three list items (<li>) and the endTag. Otherwise, the script writes text in the XHTML document indicating that an invalid choice was made (line 52).


Each case can have multiple actions (statements). The switch statement is different from others in that braces are not required around multiple actions in a case of a switch. The general switch statement (i.e., using a break in each case) is flowcharted in Fig. 8.8. [Note: As an exercise, flowchart the general switch statement without break statements.] The flowchart makes it clear that each break statement at the end of a case causes control to exit from the switch statement immediately. The break statement is not required for the last case in the switch statement (or the default case, when it appears last), because program control automatically continues with the next statement after the switch statement.

Note that having several case labels listed together (e.g., case 1: case 2: with no statements between the cases) simply means that the same set of actions is to occur for each case. Again, note that, besides small circles and arrows, the flowchart contains only rect-angle symbols and diamond symbols.

Study Material, Lecturing Notes, Assignment, Reference, Wiki description explanation, brief detail

Copyright © 2018-2020 BrainKart.com; All Rights Reserved. Developed by Therithal info, Chennai.