Decision Making

JavaScript topics covered:
  1. Comparison Operators:
    When comparing variables, the return is either true or false.
    Operator		Symbol
    is equal to		==
    is not equal to	!=
    is greater than	>
    is less than		<
    is greater than
      or equal to		>=
    is less than or 
      equal to		<=
    
    
    x = 10;
    y = 15;
    
    Comparison: is x equal to y?  
    x == y  -- > true or false?
    
    Note: ** when comparing two items use a "==" double equal sign. A single equal sign assigns the value. **
  2. if statement:

    When programming there will be times when you want to compare two items and if the outcome is true then execute a set of code. This is where the if statement comes into play. To use the if statement, take what ever you want to compare and put it inside parenthesis. If the comparison evaluates to true then execute the statements between the curly braces. Like so:

    	if(comparison)  // this must evaluate to either true or false
    	{
    			// execute everything between the curly braces
    	}	
    
    
    To demonstrate let's use a night out at the movies.
    
    var movie=8.00,popcorn=5.5,soda=3;
    var money=49.00;
    
    if(money > (movie+popcorn+soda)*2){
    	document.write("I'm taking a date to the movies");
    	document.write("and have " + (money-(movie+popcorn+soda)*2) + " left");
    }
    

    If there is only one statement between the curly braces that needs to be executed, then you do not need the curly braces.

    if(money < (movie+popcorn+soda)*2)
    	document.write("No movie tonight!");
    
    Click here to see the demo
  3. Logical Operators
    Operator		Symbol
    AND 			&&
    OR			||
    NOT			!
    
  4. You can have multiple conditions in an if statement by using logical operators. If you have enough money for a movie and not enough for a movie, popcorn, and soda, then you can only see the movie, no snacks. The new if condition would look like this:
    if(money > (movie*2) && money <  (movie+popcorn+soda)*2)
    	document.write("We can only go to the movie, no snacks.");
    
    Click here to see the demo

  5. else and else if:

    The examples so far have demonstrated how to use the if statement to execute a block of code when the condition is true. The else statement is used to execute a block of code when the condition is false.
    So, let's modify the movie example.

    if(money > (movie+popcorn+soda)*2){
    	document.write("I'm taking a date to the movies ");
    	document.write("and have " + (money-(movie+popcorn+soda)*2) + " left");
    }
    else{
    	if(money > (movie*2)){
    		document.write("We can only go to the movie, no snacks.");
    	}
    	else {
    		document.write("no movie tonight");	
    	}	
    }
    
    
    ** do you really need all the "{}"
    Click here to see the demo

    The code could have also been written with an else if
    if(money > (movie+popcorn+soda)*2){
    	document.write("I'm taking a date to the movies ");
    	document.write("and have " + (money-(movie+popcorn+soda)*2) + " left");
    }
    else if(money > (movie*2)){
    		document.write("We can only go to the movie, no snacks.");
    	}
    else {
    	document.write("no movie tonight");	
    }	
    
    ** do you really need all the "{}"
    Click here to see the demo

  6. Comparison vs Conditional:

    Comparison returns either true or false, conditional on the other hand executes one statment on true or another on false. To demonstrate let's compare two strings.

    var strStuff;
    var strStuff2;
    
    strStuff= "this is a demo";
    strStuff2= "this Is a demo";
    if (strStuff == strStuff2)
    	document.write("the two strings are equal");
    else
    	document.write("the two strings are different");
    

    Since one string has a lowercase 'i' and the other has an uppercase 'I', the two strings are not the same. So comparing the two strings would return false. Since the comparison is false, the else branch "the two strings are different" would be written to the screen. We could also write the same comparison useing conditional statements:

    strStuff == strStuff2? document.write("the two strings are equal"):	document.write("the two strings are different");
    

    comparison?true:false;
    As you see in the above sentence, the comaprision is followed by a question mark. If the out come is true, the statement between the question mark and colon is executed. If the comparison is false the statement after the comparision is executed.

    Click here to see the demo
  7. switch Statement:

    The previous examples have shown how to use the if..else statement to test if a condition is true or false then execute some code, then test another condition. There may be times when you want to evaluate one variable that has multiple possible values. Let's say we have a web site that displays the movies that are playing, and based on the time, we display movies currenlty playing and the rest of the movies for the day.

    Movies & Times
    Down The Drain starring Russ T Pipe 12:30, 16:30
    More Grease starring Pep Peroni  11:30, 15:30, 19:30
    See Right Through Me starring Polly Yurathain 13:00, 17:00
    Soaking in the Beens starring Virginia Hamm 12:30, 16:30, 20:30
    Squiched starring Peas Ina Pod  12:00, 16:00, 20:00
    The Lost Iceburge starring Hedda Lettuce 11:00, 15:00, 19:00
    
    1. get the current hour, for simplicity use military time
    2. test for the hour and display the movie
    3. if it was 11am, the below code would display the movies for 11 and Noon. Once the case is met, the statements within the case are executed. If no break is encountered then the following cases are executed. However the statement after default case will not print. This is because of the break statement. When the break is encountered within the case, the processing stops and the next line of code after the switch statement is executed. In this case the "Thanks for stopping by" would be displayed.
    4. If the case cannot be satisfied, then the default case is executed.
    5. Notice on the demo code that case 14 and 18 are empty, can you guess why? What would happen if the time was 2pm or 6pm and we did not have the case?
    var theDate = new Date();
    var theHour = theDate.getHours();
    
    //put the movies into an array
    var theMovie = new Array();
    theMovie[0] = "Down The Drain starring Russ T Pipe"; //12:30, 16:30
    theMovie[1] = "More Grease starring Pep Peroni";  //11:30, 15:30, 19:30
    theMovie[2] = "See Right Through Me starring Polly Yurathain"; //13:00, 17:00
    theMovie[3] = "Soaking in the Beens starring Virginia Hamm"; //12:30, 16:30, 20:30
    theMovie[4] = "Squiched starring Peas Ina Pod";  //12:00, 16:00, 20:00
    theMovie[5] = "The Lost Iceburge starring Hedda Lettuce"; //11:00, 15:00, 19:00
    
    //test the hour
    switch (theHour){
    case 11:
    	document.writeln("<b>movies playing at 11 am:</b>");
    	document.write("<ul>");
    	document.writeln("<li>" + theMovie[1] + "</li>");
    	document.writeln("<li>" + theMovie[5] + "</li>");
    	document.write("</ul>");
    case 12:
    	document.writeln("<strong>movies playing at Noon:</strong>");
    	document.writeln("<li>" + theMovie[0] + "</li>");
    	document.writeln("<li>" + theMovie[3] + "</li>");
    	document.writeln("<li>" + theMovie[4] + "</li>");
    	break;
    default:
    	document.writeln("We open at 10:30 am and close at 9pm.  Please come back later"); 
    }
    document.writeln("Thanks for stopping by");
    
    
    Click here to see the demo