User-Interactive Page Code for Background and Text Color Selection

1. Ifs

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

4. First part of code

5. Second part of code

6. The if structure //change fore color if user has selected black background if(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)

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 code back == “black” is a Boolean expression – it asks whether the variable back is equal to “black” which may be true or false.

8. Accidentally (on purpose) replacing == with = What happens if we have an assignment where we want a condition?

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.

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.

11. Modified code produces same result whether user enters “black” or “Black”

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)

14. The Boolean OR Truth Table

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

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)

19. Allowing user to respond in another format

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!!!!

21. Incorrect ORing (the condition is always true)

22. References • Beginning JavaScript, Paul Wilton