CSD 340 (Blum) 1

Ifs

CSD 340 (Blum) 2

Page that asks user for background color and changes fore color from black if user selects black as background color.

CSD 340 (Blum) 3

CSD 340 (Blum) 4

First part of code

CSD 340 (Blum) 5

Second part of code

CSD 340 (Blum) 6

The if structure

//change fore color if user has selected black backgroundif(back == "black") {

fore="yellow";}• After the keyword “if” comes a condition (a.k.a. a

proposition) – something that is either true or false, followed by a statement or possibly a block of statements that are to be executed should the condition be true and not executed otherwise.

• (Page 66 Beginning JavaScript, Paul Wilton)

CSD 340 (Blum) 7

Are you asking me or are you telling me?• The code

back = “black”

is an assignment – it tells the variable back to take on the value “black”

• The codeback == “black”

is a Boolean expression – it asks whether the variable back is equal to “black” which may be true or false.

CSD 340 (Blum) 8

Accidentally (on purpose) replacing == with =

What happens if we have an assignment where we want a condition?

CSD 340 (Blum) 9

The variable back is assigned the value “black.” Then the expression evaluates as true meaning the it’s true that the variable back was successfully assigned the value “black.” So then the statements inside the if block are executed, and the fore color is changed to yellow. This is how we ended up with a black back color and yellow fore color even though the user seems to have requested an orange back color.

CSD 340 (Blum) 10

A problem:

Since “Black” is not equal to “black” the fore color is not changed. Hence the back color and fore color end up to be the same and the message cannot be read.

CSD 340 (Blum) 11

Modified code produces same result

whether user enters “black” or “Black”

CSD 340 (Blum) 12

CSD 340 (Blum) 13

The Boolean Operator OR

if(back == "black" || back=="Black")

{

fore="yellow";

}

• The two vertical lines (above the backslash on the keyboard) denote the Boolean OR operator. The if block is executed if either back equals “black” is true or if back equals “Black”

• (Page 74 Beginning JavaScript, Paul Wilton)

CSD 340 (Blum) 14

The Boolean OR Truth Table

A B A OR B

False False False

False True True

True False True

True True True

CSD 340 (Blum) 15

CSD 340 (Blum) 16

A better way to handle this particular problem: the toUpperCase function

CSD 340 (Blum) 17

CSD 340 (Blum) 18

A capital idea

if(back.toUpperCase() == "BLACK")

{

fore="yellow";

}

• The pre-defined method toUpperCase() belongs to the String class and returns a string with any lowercase letters turned into the corresponding uppercase letters. – Note that it does not change to variable back to all capitals

letters but makes a temporary copy with all capital letters in this case which we use for purposes of comparison.

• (Page 122 Beginning JavaScript, Paul Wilton)

CSD 340 (Blum) 19

Allowing user to respond in another format

CSD 340 (Blum) 20

Return to OR

if(back.toUpperCase() == "BLACK" || back == "#000000") {

fore="yellow";}

• Using the OR (||) operator again allows the user to enter the color in the hexadecimal format or in name format.

• Note that on each side of the OR is a complete condition and not a set of possible values. Do not use the following if(back.toUpperCase() == "BLACK" || "#000000") //WRONG!!!!

CSD 340 (Blum) 21

Incorrect ORing (the condition is always true)

CSD 340 (Blum) 22

References

• Beginning JavaScript, Paul Wilton