Lecture 10   Logic Operators - Class Activities Conditionals

Today

• The activities from last time.
• Boolean Operators
• More activities

Recap Exercise

Write some code to prompt the user for the amount of a restaurant check, compute the tip (20%), and the sum, and alert the resulting two numbers. You can put them on two lines using "\n" in the alert. (The \n is replaced by the ASCII newline character.)

Your solution might look like:

var bill = parseFloat(prompt("what's the bill?"));
var tip = bill * 0.2;
var total = bill + tip;
alert("tip is "+tip+" and \ntotal is "+total);

For extra credit, check that the total is less than $20, because that's all you have in your wallet.

Your solution might look like:

var bill = parseFloat(prompt("what's the bill?"));
var tip = bill * 0.2;
var total = bill + tip;
alert("tip is "+tip+" and \ntotal is "+total);
if( total > 20 ) {
      alert("Oops! that's too much! Have to wash dishes.");
}

Boolean Operators

• If you need the opposite of a boolean, you can use the not operator: !

  if( ! sunny ) { alert("bring an umbrella"); }

• If you need to test that both boolean expressions are true, you can use the and operator: &&

  if( sunny && hot ) { alert("wear a hat"); }

• If you need to test that either (or both) of two boolean expressions is true, you can use the or operator: ||

  if( rainy || snowy ) { alert("wear boots"); }

• The examples above imagined that there were variables that contained boolean values. You can store a boolean in a variable by making a comparison and storing the value;

  var taller = alice_height > bob_height;
  if(taller) { ... }

• Of course, you can also just use the expression directly in the if statement:

  if(alice_height > bob_height) { ... }

Getting Colors

Write some code that we'll use for the rest of this class. There's a connection between this code and the color picker you see at the lower left, except the color picker uses sliders instead of prompt. We'll learn how to do that later in the course.

• The code will prompt for three numbers, which will be the amount of each of the three primary colors: red, green and blue.
• Convert the input to numbers using parseInt.
• Store the values in three variables called red, green and blue
• If that's too easy, use the following code to see what it does:

  var hexstring = "#" + red.toString(16) + green.toString(16) + blue.toString(16);
  document.body.style.backgroundColor = hexstring;
        

• Test this using the JavaScript console. Once it's working, you can copy it to a jsfiddle, if you like.
• If you set the background color, make sure each primary is at least 16 units (otherwise, we get a single-digit hex number).

You should put the code in the body of a function, so that it'll be easy to test. Note that we'll learn about functions a bit later in the course, but for now, just think of it as a wrapper.

function colorChecker() {
// your code here

}

You can test it in the JS console like this:

colorChecker();

You might come up with something like this:

function colorChecker() {
    var red = parseInt(prompt("Enter amount of red"));
    var green = parseInt(prompt("Enter amount of green"));
    var blue = parseInt(prompt("Enter amount of blue"));
    var hexstring = "#" + red.toString(16) + green.toString(16) + blue.toString(16);
    document.body.style.backgroundColor = hexstring;
}

colorChecker();
  

Quiz Question Nr. 1

How could we test that this color is white?

1. if( red = 128 && green = 128 && blue = 128 )
   

2. if( red = 255 && green = 255 && blue = 255 )
   

3. if( red == 128 && green == 128 && blue == 128 )
   

4. if( red == 255 && green == 255 && blue == 255 )
   

Modify your code above to add an alert if the color is white, like:

if( ... ) { alert("color is white."); }

Your code might look like this:

function colorChecker() {
    var red = parseInt(prompt("Enter amount of red"));
    var green = parseInt(prompt("Enter amount of green"));
    var blue = parseInt(prompt("Enter amount of blue"));
    if( red == 255 && green == 255 && blue == 255 ) {
        alert("white");
    }
    var hexstring = "#" + red.toString(16) + green.toString(16) + blue.toString(16);
    document.body.style.backgroundColor = hexstring;
}

colorChecker();
  

256 Shades of Gray

From white, (#FFFFFF) to black (#000000) there are 256 shades of gray in the RGB system, including gray itself (#808080) and silver (#C0C0C0).

What characterizes these is that no color primary is more dominant than the others: they are all equal.

Quiz Question Nr. 2

Assuming we have the color primaries stored in three variables, red, green and blue, how could you test for gray?

1. if( red == green == blue ) ...

2. if( red = green && green = blue ) ...

3. if( red == green || green == blue ) ...

4. if( red == green && green == blue ) ...

Modify your code above to add an alert if the color is gray, like:

if( ... ) { alert("color is gray."); }

Your code might look like this:

function colorChecker() {
    var red = parseInt(prompt("Enter amount of red"));
    var green = parseInt(prompt("Enter amount of green"));
    var blue = parseInt(prompt("Enter amount of blue"));
    if( red == 255 && green == 255 && blue == 255 ) {
        alert("white");
    }
    if( red == green && green == blue ) {
        alert("shade of gray");
    }
    var hexstring = "#" + red.toString(16) + green.toString(16) + blue.toString(16);
    document.body.style.backgroundColor = hexstring;
}

colorChecker();
  

Color Categories

You might think that a color will be, for example, reddish if the red primary is bigger than all the others. In fact, the eye can't really pick up subtle differences, so #FFFEFE will look a lot like white.

But, for the sake of argument, let's suppose that a color is reddish if the red primary is high (greater than 128) and the others are low (less than 128).

• What are some colors for which this is a poor definition?
• What is a better definition?

Quiz Question Nr. 3

Which of the following determines a reddish color, given our definition above?

1. if( red > 128 && green < 128 && blue < 128 ) ...
   

2. if( red < 128 && green > 128 && blue > 128 ) ...
   

3. if( red > 128 || green < 128 || blue < 128 ) ...
   

4. if( red < 128 || green > 128 || blue > 128 ) ...
   

Modify your code above to add an alert if the color is white, like:

if( ... ) { alert("color is reddish."); }

Your code might look like this:

function colorChecker() {
    var red = parseInt(prompt("Enter amount of red"));
    var green = parseInt(prompt("Enter amount of green"));
    var blue = parseInt(prompt("Enter amount of blue"));
    if( red == 255 && green == 255 && blue == 255 ) {
        alert("white");
    }
    if( red == green && green == blue ) {
        alert("shade of gray");
    }
    if( red > 128 && green < 128 && blue < 128 ) {
        alert("reddish");                                             
    }
    var hexstring = "#" + red.toString(16) + green.toString(16) + blue.toString(16);
    document.body.style.backgroundColor = hexstring;
}

colorChecker();
  

Primaries

We all know that the primaries are red, green and blue, but now we have reddish, greenish, and bluish. We could define primaryish as one of those.

Write some code to test for primaryish

You might come up with something like this:

function colorChecker() {
    var red = parseInt(prompt("Enter amount of red"));
    var green = parseInt(prompt("Enter amount of green"));
    var blue = parseInt(prompt("Enter amount of blue"));
    if( red == 255 && green == 255 && blue == 255 ) { alert("white"); }
    if( red == green && green == blue ) { alert("gray"); }
    var isReddish  = (red > 128 && green < 128 && blue < 128 );
    var isGreenish = (red < 128 && green > 128 && blue < 128 );
    var isBluish   = (red < 128 && green < 128 && blue > 128 );
    if( isReddish ) { alert("reddish"); }
    if( isReddish || isGreenish || isBluish ) { alert("primaryish"); }
    var hexstring = "#" + red.toString(16) + green.toString(16) + blue.toString(16);
    document.body.style.backgroundColor = hexstring;
}

colorChecker();
  

Time Checking

We all know that "noon" means "12:00," but what does midday mean? Let's suppose that it means between 11am and 2pm (or, better, between 11 and 14). Let's say that's precisely from 11:00 - 13:59.

Let's write some code to ask the user for two numbers, the hour (0-23) and the minute (0-59). You can assume they enter the proper kinds of values.

Then, check whether the time is midday, giving an alert if it is.

You can make a function to test your code:

function timeCheck() {
    // your code here
}

You might come up with something like this:

function timeCheck() {
    var hour = parseInt(prompt("Enter hour (0-23)"));
    var min  = parseInt(prompt("Enter minute (0-59)"));
    if( hour == 11 || hour == 12 || hour == 13 ) { alert("midday!"); }
}

timeCheck();
  

Quiz Question Nr. 4

Which of the following is equivalent to the conditional above?

1. hour > 11 && hour < 13

2. hour >= 11 && hour <= 13

3. hour > 11 && hour <= 13

4. hour >= 11 && hour < 13

Different Midday

Suppose we decide that midday is actually from 11:45 to 13:15. How would you implement that? Careful, this is tricky!

You might come up with something like this:

function timeCheck() {
    var hour = parseInt(prompt("Enter hour (0-23)"));
    var min  = parseInt(prompt("Enter minute (0-59)"));
    var timeA = (hour == 11 && min >= 45);
    var timeB = (hour == 12);
    var timeC = (hour == 13 && min <= 15);
    if( timeA || timeB || timeC ) { alert("midday!"); }
}

timeCheck();
  

Solutions

Will be posted later, visit again after .

        1. D  all primaries equal 255
        2. D  red equals green and green equals blue (or other pairs)
        3. A  red big and others small
        4. B  or hour > 10 && hour < 14, etc.