JavaScript, continued

Conditionals

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

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);

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);

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”); }

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

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

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

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

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

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

Creating HTML

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”>’;

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]+’”>’;

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];

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

Testing Multiple Conditions

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)

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

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