1. JavaScript, continued

2. Conditionals

3. Principles
Each decision breaks the space in 2 pieces: either the test is true or false: NO PARTIAL CREDIT When you get to the last case, you don’t need a test: EVERYTHING ELSE IS HERE

4. Multiple Choices: 1 choice if
Use when you sometimes take an action. If its not true, you take no action. Example: You need the difference between two numbers, but don’t care which is bigger if (test) {action} function getDiff (val1, val2) { var diff = val1 – val2; if (diff < 0) { diff = -diff; } return(“The difference is “+diff);

5. Multiple Choices: 2 choices if - else
Use when there are exactly 2 options and you are going to take different actions depending on which is true. Example: Whether it is going to rain or snow depends on the temperature. if (test) {true action} else {false action} function weather (temp) { var precip; if (temp < 32) { precip = “snow”; } else { precip = “rain”; } return(“It is going to “+precip);

6. Multiple Choices: 3 choices if – else if - else
Use when there are more than 2 choices and there are different actions in each case.
Example: Determine if it is a win, loss, tie.
if (test1) {test1 true action} else if (test2) {test2 true action} else {test1 and test2 false action}
function gameOutcome (homeScore, visScore) {
var result;
if (homeScore > visScore) {
result = “win”;
} else if (homeScore < visScore) {
result = “loss”;
) else {
result = “tie”; )
return(“It was a “+result+” for the home team”); }

7. Build a decision tree Test in a diamond
Left if it true, right if it is false
If you need to make more decisions, repeat
All cases are at the bottom: these are where the actions go
Diamond = test
Left = “then” clause
Right = else clause.
If it needs another decision: else if
Otherwise: just else

8. Random Selections Identify what your options are
Strawberries, Blueberries, Raspberries
Identify what random values will give you that choice
0-.5: strawberries
blueberries
.75-1 raspberries
These create your decisions and actions
Now build a decision tree

9. Decision Tree (one of several)
grade < 60 F
grade < 70 D
grade < 80 C
grade < 90 B A

10. Order of the Decisions Matter
grade < 60
0-59 F
60-100
grade < 70
60-69 D
70-100
grade < 80
70-79 C
80-100
grade < 90
80-89 B
90-100 A

11. Order of the Decisions Matter
grade < 90
0-89
90-100
grade < 80
NEVER TRUE

12. Fix the fiddle Found under resources
Fix it so that all responses are equally likely

13. Creating HTML

14. What to put in innerHTML?
It MUST be PROPER HTML
If you would have needed quotation marks if you were typing the HTML, you need to create those quotation marks is JavaScript
Example:
I want to produce the HTML tag
<img src=“cow.jpg” alt=“cows in the field”>
To create that string in JavaScript:
var imgTag = ‘<img src=“cow.jpg” alt=“cows in the field”>’;

15. Building the img tag from arrays
<img src=“cow.jpg” alt=“cows in the field”>
Two arrays:
var srcNames = [“cow.jpg”, “pig.jpg”, “dog.jpg”];
var altText = [“cows in the field”, “pig eating”, “dog playing catch”];
Note that the quotation marks here say that these are strings. They are NOT part of the string itself.
To put the img tag together:
var imgTag = ‘<img src=“’+srcNames[0]+’” alt=“’+altText[0]+’”>’;

16. OR, I can create a single array with the entire img tag all built
One array:
var imgTags = [
‘<img src=“cow.jpg” alt=“cows in the field”>’,
‘<img src=“pig.jpg” alt=“pig eatin”>’,
‘<img src=“dog.jpg” alt=“dog playing catch”>’];
var imgTag = imgTags[0];

17. Create a Web Page User types a question and clicks the button
Response is to be in a paragraph
It is to appear as
The magic ball says “response here”
You are to display the quotation marks and the actual response is to be in italics, using the em tag

18. Testing Multiple Conditions

19. Operations on Booleans
AND OR
Are all of them true?
&&
Is it a big dog?
(size==“big” && pet==“dog”)
Number between 5 and 10
(num>=5 && num<=10)
Are any of them true? ||
Is it either blue or black?
(color==“blue” || color==“black”)
Number less than 10 or greater than 20
(num<10 || num>20)

20. Is greater than or equal to
Operators
Conditional
Operator
Meaning
&&
and || or !
not
Operator
Meaning ==
Is equal to !=
Is not equal
>
Is greater than
<
Is less than
>=
Is greater than or equal to
<=
Is less than or equal to
Logical

21. Add a greeting based on the time
Extend the greeting to say one of the following:
8 pm-5 am Good Night (THIS MUST BE A SINGLE TEST)
5 am–noon Good Morning
Noon-5 pm Good Afternoon
5 pm-8 pm Good Evening
This greeting is to precede the earlier message