Javascript Conditionals

The if Statement Concept: The if statement is used to create a decision structure, It allows a program to have more than one path of execution. The if statement causes one or more statements to execute only when a Boolean expression is true.

Decision structure Decision (selection) structure: Diamond symbol represents a true/false condition Single alternative decision structure provides only one alternative path of execution.

Decision structure Decision (selection) structure: if (condition) { statement etc. } Example: if (age == 15) document.write(“ you are a fifteen”);

Boolean Expressions and Relational Operators A relational operator (aka comparison operator) determines whether a specific relationship exists between two values. Table 4-1 Relational operators

Boolean Expressions and Relational Operators Examples: if (age > 90)… if (size < 10)… if (sum <= 50)… if (theNumber == 100)… if (x != 100)…

The if Statement - Blocks Examples: if (age > 90) { document.write (“you are a bit old”); } if (size< 10) document.write (“you are just the right size”); if (total >= 0) total += 50; if (name == “jasmine”) document.write (“nice name!”);

Try this! Write an if statement that assigns 0 to variable x if variable y is equal to 20 Write an if statement that assigns 0.2 to variable commission if variable sales is greater than or equal to 1000 Write an if statement that assigns “no match” to variable answer if variable name is not equal to “mary”

The if-else Statement Concept: An if-else statement will execute one block of statements if its condition is true, or another block if its condition is false.

dual alternative decision structure A dual alternative decision structure provides two possible paths of execution – one path is taken if a condition is true, the other path is taken if the condition is false.

The if-else Statement if (condition) { statement etc. } else

The if-else Statement if (age >= 20) { document.write(“you are an adult”); } else document.write(“you are NOT an adult”); if (salary <= 10) document.write(“you need a raise”); document.write(“you make a fine salary”);

Comparing Strings Concept: You can compare strings. This allows you to create decision structures that test the value of a string. If (password == “blahblah”) { document.write(“that is the correct password”); } else

Try This Purpose: Get a number from the user which is greater than 100 Prompt the user to enter a number that is greater than 100 If the number entered is greater than 100 – tell user it is a valid number If it less than 100 tell user it is invalid

Comparing Strings Other String Comparisons Figure 4-10 Character codes for the strings 'Mary' and 'Mark' Figure 4-11 Comparing each character in a string

Nested Decision Structures Concept: To test more than one condition, a decision structure can be nested inside another decision structure.

Nested Decision Structures

Nested Decision Structures if (condition_1) { statement etc. } else if (condition_2){ else{ The if-else if - else Statement

Nested Decision Structures if (score < 60) { document.write(‘Your grade is F.’); } else if (score < 70) { document.write( ‘Your grade is D.’); else if score < 80: document.write( ‘Your grade is C.’); else if score < 90 document.write( ‘Your grade is B.’); else { document.write( ‘Your grade is A.’);

Built in numeric functions isNaN( ) – determines whether a number is legal Returns True (if not a number) or False (if it is a number) NaN is an abbreviation for: Not a Number Examples of nonNumbers: A string A number divided by 0 alert(isNaN(4)) will return false alert(isNaN(“four”)) will return true

Try This Purpose: Get a number from the user which is numeric and greater than 100 Prompt the user to enter a number that is greater than 100 Check to see if the data entered is a number – if not tell the user that data is not a number If the number entered was a number then check If the number entered is greater than 100 – tell user it is a valid number If it less than 100 tell user it is not a valid number Hint: use if, else if

Logical Operators Logical operators are used to determine the logic between variables or values. Given that x=6 and y=3, the table below explains the logical operators: Operator Description Example && and (x < 10 && y > 1) is true || or (x==5 || y==5) is false ! not !(x==y) is true

Compound Conditions Many times you will need to check multiple conditions within the same statement Logical Operators allow you to check multiple conditions: Examples: if ((x > 100) && (x < 1000)) … if (age < 13) || (age > 65) …

Try This Purpose: Get a number from the user which is numeric and greater than 100 and less than 500 Prompt the user to enter a number that is greater than 100 Check to see if the data entered is a number – if not tell the user that data is not a number If the number entered was a number then check If the number entered is greater than 100 and less than 500 – tell user it is a valid number If it less than 100 or greater than 500, tell user it is not in range Hint: use if, else if

HTML DOM innerHTML Property The innerHTML property sets or returns the inner HTML of an element. We will use it to set error messages on fields Example: Styling error message #Nerror {color:red;} The input field with place for error message <label><input type="text" id=“num1"><span id=“Nerror"></span> Setting the innerHTML of the span element to conatin error message document.getElementById(" Nerror ").innerHTML = "Must be numeric";