1. Project 6: Working with If Statements Essentials for Design JavaScript Level One Michael Brooks

2. Copyright (c) 2004 Prentice-Hall. All rights reserved. 2 Objectives Add Boolean values Use if statements Compare mathematical values Contrast string values

3. Copyright (c) 2004 Prentice-Hall. All rights reserved. 3 Objectives (continued) React to user choices Work with logical operators Create complex decision statements

4. Copyright (c) 2004 Prentice-Hall. All rights reserved. 4 Why Would I Do This? In computer languages, specific characters or phrases (called comparison operators) make comparisons among/between values A decision statement evaluates a condition:  one set of actions occurs if the statement is true  a different set of actions occurs if the statement is false Decision statements are also known as flow-of-control statements

5. Copyright (c) 2004 Prentice-Hall. All rights reserved. 5 Why Would I Do This? (continued) Using pseudo-code, you could describe a decision statement in the following manner: Comparison operators and decision statements are useful whenever you need to make decisions based on changing information if (a condition is true) then perform a set of actions, else (if the condition is false) do nothing

6. Copyright (c) 2004 Prentice-Hall. All rights reserved. 6 Visual Summary Decision statements allow JavaScript code to branch off in a number of directions, depending on the variables in the script A flowchart is simply a diagram that shows how a script progresses during execution  After the flowchart is complete, it is usually an easy task to convert the script to actual code  Example of designing a script for an online test, using a flowchart Example of designing a script for an online test, using a flowchart

7. Copyright (c) 2004 Prentice-Hall. All rights reserved. 7 Visual Summary (continued) This flowchart uses:  An oval to show the beginning of the program  Rectangles to show the processing steps  Diamonds to show decision (if) statements

8. Copyright (c) 2004 Prentice-Hall. All rights reserved. 8 Visual Summary (continued) Comparison Operators  Are characters or phrases that allow you to compare two values, and then receive a true or false answer  You can use the comparison operators shown in the table linked below to compare the values JavaScript comparison operators

9. Copyright (c) 2004 Prentice-Hall. All rights reserved. 9 Visual Summary (continued) JavaScript comparison operators

10. Copyright (c) 2004 Prentice-Hall. All rights reserved. 10 Visual Summary (continued) The == operator is known as the equality operator, since it means “the values are equal” The != operator is known as the inequality operator, since it means “the values are not equal”

11. Copyright (c) 2004 Prentice-Hall. All rights reserved. 11 Visual Summary (continued) Logical Operators  In complex comparisons, it is often necessary to evaluate more than one Boolean value to make a decision  Logical operators are designed to compare two true or false values  Example of using a logical operator Example of using a logical operator

12. Copyright (c) 2004 Prentice-Hall. All rights reserved. 12 Visual Summary (continued) Logical AND (&&) operator Boolean variables permission=preReqs&&goodStanding;

13. Copyright (c) 2004 Prentice-Hall. All rights reserved. 13 Visual Summary (continued) The “&&” is called a logical AND operator, which evaluates whether both variables are set to true  The logical AND operator returns true if (and only if) both variables are set to true

14. Copyright (c) 2004 Prentice-Hall. All rights reserved. 14 Visual Summary (continued) The logical OR operator returns a value of true if any of the variables compared is equal to true  It only returns a value of false if all of the variables being compared are equal to false

15. Copyright (c) 2004 Prentice-Hall. All rights reserved. 15 Visual Summary (continued) The exclusive OR operator (^) returns a value of true if, and only if, one of the values is true  If both values are false, the exclusive OR statement returns a value of false  If both values are true, the exclusive OR statement is also false  Assuming both variables are set to true, the following statement would return a value of false: permission=preReqs^goodStanding;

16. Copyright (c) 2004 Prentice-Hall. All rights reserved. 16 Understanding Boolean Values and Expressions The term Boolean describes a variable that has one of two possible values (true or false), which are often represented as yes or no, on or off, or 0 or 1 To assign a Boolean value in JavaScript, you can write statements such as: var testComplete=false; var waiverSigned=true;

17. Copyright (c) 2004 Prentice-Hall. All rights reserved. 17 Understanding Boolean Values and Expressions (continued) The terms true and false are keywords in the JavaScript language  They have special meaning to the JavaScript interpreter, which means you cannot use them as variable names Whenever you make a decision, you usually use a Boolean comparison of one sort or another

18. Copyright (c) 2004 Prentice-Hall. All rights reserved. 18 Understanding Boolean Values and Expressions (continued) Assign Boolean Values  You can assign the number 0 (for false) or the number 1 (for true) to variables to represent Boolean values  JavaScript and most computer languages will evaluate these values as if they were true or false Example of assigning Boolean values

19. Copyright (c) 2004 Prentice-Hall. All rights reserved. 19 Understanding Boolean Values and Expressions (continued) boolean.html flag=true; if (flag==true) alert("The variable is true!"); When the flag variable is assigned the “true” Boolean vale, the (flag==true) condition is true and the alert command is triggered

20. Copyright (c) 2004 Prentice-Hall. All rights reserved. 20 If Statements and Mathematical Values The if statement is the simplest flow-of- control statement in JavaScript if (a condition is true) then complete an action; if (tickets>=3) document.write("Your license is suspended!"); The pseudocode and JavaScript corresponding to an IF statement containing mathematical values

21. Copyright (c) 2004 Prentice-Hall. All rights reserved. 21 If Statements and Mathematical Values (continued)  If you want to execute more than one statement if the condition is true, you can use pointy brackets to denote a code block, as illustrated in the following example: if (tickets>=3) { document.write("Your license is suspended!"); document.write("You have to go to driving school!"); }

22. Copyright (c) 2004 Prentice-Hall. All rights reserved. 22 If Statements and Mathematical Values (continued) You can use the keyword else to note an alternative statement or segment of statements to perform if the condition evaluates to false if (tickets>=3) { document.write("Your license is suspended!"); document.write("You have to go to driving school!"); } else { document.write("If you get 3 tickets, your license will be suspended"); }

23. Copyright (c) 2004 Prentice-Hall. All rights reserved. 23 If Statements and Mathematical Values (continued) If Statements and Mathematical Comparisons  If statements that involve mathematical manipulation are probably the easiest decision statements to understand if (answerGiven==correctAnswer) { alert("Your answer is correct!"); } else { alert("Your answer is incorrect!"); score=score-10; }

24. Copyright (c) 2004 Prentice-Hall. All rights reserved. 24 If Statements and Mathematical Values (continued)  If statements that make mathematical comparisons use: comparison operators, including: greater than (>) less than (<) less than or equal to (<=) greater than or equal to (>=)  Comparison operators also consist of : The equality operator (==) The inequality operator (!=)

25. Copyright (c) 2004 Prentice-Hall. All rights reserved. 25 If Statements and Mathematical Values (continued) Use the Equality Operator  You can use the equality operator to make a comparison

26. Copyright (c) 2004 Prentice-Hall. All rights reserved. 26 If Statements and Mathematical Values (continued) equality.html // create two variables number1=3; number2=3; // compare two variables if (number1==number2) { alert("The numbers are equal!"); } When the two variables are equal, the (number1==number2) condition is true and the alert command is triggered

27. Copyright (c) 2004 Prentice-Hall. All rights reserved. 27 If Statements and Mathematical Values (continued) Use Greater Than Comparisons  You can use the greater than operator in a comparison  This comparison is commonly used in programming applications to determine whether a variable has reached a specific limit  You can use the greater than or equal to (>=) comparison operator when you want to know if the value on the left is greater or the same as the value on right

28. Copyright (c) 2004 Prentice-Hall. All rights reserved. 28 If Statements and Mathematical Values (continued) greaterthan.html numberOne=5; numberTwo=7; if (numberOne>numberTwo{ alert(numberOne+" is greater than “ +numberTwo); } else { alert(numberOne+" is not greater than “ +numberTwo); } This code compares the two numbers to test whether the first number is greater than the second number

29. Copyright (c) 2004 Prentice-Hall. All rights reserved. 29 If Statements and Mathematical Values (continued) Make Less Than Comparisons greaterthan.html numberOne=5; numberTwo=7; if (numberOne<numberTwo{ alert(numberOne+" is greater than “ +numberTwo); } else { alert(numberOne+" is not greater than “ +numberTwo); } This code compares the two numbers to test whether the first number is less than the second number

30. Copyright (c) 2004 Prentice-Hall. All rights reserved. 30 If Statements and Mathematical Values (continued) Add Not Equal To notequalto.html document.write("The number must not be 5 to be accepted "); numberOne=5; document.write("The number is "+numberOne+" "); // check to see if number is 5 if (numberOne!=5) { document.write("The number is not 5"); } The message in the if statement does not display, since the number is equal to 5

31. Copyright (c) 2004 Prentice-Hall. All rights reserved. 31 Comparing String Values Many decision statements involve the comparison of string values Since JavaScript is case sensitive, it is somewhat difficult to compare strings of differing case Using various text string methods allows you to work around this restriction

32. Copyright (c) 2004 Prentice-Hall. All rights reserved. 32 Comparing String Values (continued) Check for Equality  You can use the equality operator (==) to check if to Strings are equal  You can use double or single quotes to denote text strings, as long as they are used in matching pairs  You can write comparisons as name1=="Sue" or name1='Sue' Example

33. Copyright (c) 2004 Prentice-Hall. All rights reserved. 33 Comparing String Values (continued) stringequality.html nameOne="Joe"; nameTwo="Joe"; if (nameOne==nameTwo) { alert("names are equal"); } This code compares the two strings to test whether they are equal

34. Copyright (c) 2004 Prentice-Hall. All rights reserved. 34 Comparing String Values (continued) Consider Case Sensitivity  You can use the equality operator (==) to check if to Strings are equal  You can use double or single quotes to denote text strings, as long as they are used in matching pairs  You can write comparisons as name1=="Sue" or name1='Sue' Example

35. Copyright (c) 2004 Prentice-Hall. All rights reserved. 35 Comparing String Values (continued) stringequality.html nameOne="Joe"; nameTwo="joe"; if (nameOne==nameTwo) { alert("names are equal"); } else { alert("names are not equal"); } This code compares the two strings to test whether they are equal

36. Copyright (c) 2004 Prentice-Hall. All rights reserved. 36 Comparing String Values (continued) Ignore Case in Comparisons  You can use string methods in a comparison you use these methods to avoid creating case- sensitivity issues  Use toUpperCase() or toLowerCase() to avoid situations where users may inadvertently make case-sensitivity errors Example

37. Copyright (c) 2004 Prentice-Hall. All rights reserved. 37 Comparing String Values (continued) stringequality.html nameOne="Joe"; nameTwo="joe"; if (nameOne.toUpperCase()==nameTwo.toUpperCase()) { alert("names are equal"); } else { alert("names are not equal"); } The values are now both compared in uppercase letters

38. Copyright (c) 2004 Prentice-Hall. All rights reserved. 38 Reacting to User Choices The primary reason to use decision statements is to react to changing conditions as the script is interpreted  This often involves the user’s choices, which guide the decision-making process

39. Copyright (c) 2004 Prentice-Hall. All rights reserved. 39 Reacting to User Choices (continued) A user can make choices in a number of different ways:  A user can click area on an image to make a choice  A user can click radio buttons or check boxes on a form to make one or multiple choices  A user can enter a value into a prompt box/value field

40. Copyright (c) 2004 Prentice-Hall. All rights reserved. 40 Reacting to User Choices (continued) Confirm a User Choice  You can use the confirm() method to allow the user to confirm his choice if the user clicks OK, the confirm() method returns a value of true if the user clicks Cancel, the confirm() method returns a value of false Example

41. Copyright (c) 2004 Prentice-Hall. All rights reserved. 41 Reacting to User Choices (continued) confirm.html ask=confirm("Want to go to another site?"); // check response if (ask==true) { window.location.href="http://www.againsttheclock.com"; } This if statement redirects the user to another Web page if the user clicks OK

42. Copyright (c) 2004 Prentice-Hall. All rights reserved. 42 Reacting to User Choices (continued) Evaluate a Boolean Variable  You can evaluate a variable with Boolean values simply by placing the variable name in the parentheses of the if statement  You can use the confirm() method to gather information from end users  You can use the prompt() method to allow users to enter information when prompted with a question  Example Example

43. Copyright (c) 2004 Prentice-Hall. All rights reserved. 43 Reacting to User Choices (continued) confirm.html ask=confirm("Want to go to another site?"); // check response if (ask){ window.location.href="http://www.againsttheclock.com"; } Since the variable is storing a Boolean value, it is equivalent to asking if the variable is equal to true

44. Copyright (c) 2004 Prentice-Hall. All rights reserved. 44 Working with Logical Operators Logical operators are comparison operators that compare Boolean values Did the customer provide proof of insurance? Did the customer pay for the rental car? if (customer provides insurance AND customer paid) { provide car to customer; } if (insuranceProvided && customerPaid) { provideCar(); }

45. Copyright (c) 2004 Prentice-Hall. All rights reserved. 45 Working with Logical Operators (continued) Use Logical AND (&&)  Example 1 Example 1  Example 2 Example 2

46. Copyright (c) 2004 Prentice-Hall. All rights reserved. 46 Working with Logical Operators (continued) // assign Boolean variables boolOne=true; boolTwo=true; // compare to see if both are true if (boolOne==true && boolTwo==true) { document.write("Both variables are true"); } // end if else { document.write("One or both variables are false"); } // end else Both variables are true, so the condition is true

47. Copyright (c) 2004 Prentice-Hall. All rights reserved. 47 Working with Logical Operators (continued) // assign Boolean variables boolOne=true; boolTwo=false; // compare to see if both are true if (boolOne==true && boolTwo==true) { document.write("Both variables are true"); } // end if else { document.write("One or both variables are false"); } // end else Only one condition is true so the condition is false

48. Copyright (c) 2004 Prentice-Hall. All rights reserved. 48 Working with Logical Operators (continued) Use Logical OR (||)  You can use the logical OR operator to make a comparison  The logical OR operator is useful when you want to know if either condition evaluates to true Example 1 Example 2 Example 3

49. Copyright (c) 2004 Prentice-Hall. All rights reserved. 49 Working with Logical Operators (continued) logicalstart.html boolOne=true; boolTwo=true; // compare to see if either values are true if (boolOne || boolTwo) { document.write("One OR both variables are true"); } // end if else {document.write("Both variables are false"); } // end else document.write("One or both variables are false"); The code block for the if statement executes because both variables are equal to true

50. Copyright (c) 2004 Prentice-Hall. All rights reserved. 50 Working with Logical Operators (continued) logicalstart.html boolOne=true; boolTwo= false ; // compare to see if either values are true if (boolOne || boolTwo) { document.write("One OR both variables are true"); } // end if else {document.write("Both variables are false"); } // end else document.write("One or both variables are false"); The code block for the if statement executes because one of the variables is equal to true

51. Copyright (c) 2004 Prentice-Hall. All rights reserved. 51 Working with Logical Operators (continued) logicalstart.html boolOne=false; boolTwo= false ; // compare to see if either values are true if (boolOne || boolTwo) { document.write("One OR both variables are true"); } // end if else {document.write("Both variables are false"); } // end else document.write("One or both variables are false"); The code block for the if statement does nor execute because both variables are equal to false

52. Copyright (c) 2004 Prentice-Hall. All rights reserved. 52 Working with Logical Operators (continued) Use Exclusive OR (^)  The exclusive OR operator returns a value of true if one and only one of the values is true  Programmers typically refer to this operator as XOR Example 1 Example 2

53. Copyright (c) 2004 Prentice-Hall. All rights reserved. 53 Working with Logical Operators (continued) exclusiveor.html boolOne=true; boolTwo=true; if (boolOne ^ boolTwo) { document.write("One OR the other variable is true"); } // end if else { document.write("Both variables are false or both are true"); } // end else The code block for the if statement does nor execute because both variables are equal to false

54. Copyright (c) 2004 Prentice-Hall. All rights reserved. 54 Working with Logical Operators (continued) exclusiveor.html boolOne=true; boolTwo=false; if (boolOne ^ boolTwo) { document.write("One OR the other variable is true"); } // end if else { document.write("Both variables are false or both are true"); } // end else The code block for the if statement executes because one of the variables is equal to true

55. Copyright (c) 2004 Prentice-Hall. All rights reserved. 55 Working with Logical Operators (continued) Use Logical NOT (!)  The logical NOT operator negates a Boolean value  The logical NOT operator takes the opposite of the value normally returned by the comparison Example 1 Example 2

56. Copyright (c) 2004 Prentice-Hall. All rights reserved. 56 Working with Logical Operators (continued) logicalnot.html boolOne=false; // negate the value in a comparison if (!boolOne) { document.write("The variable is false"); } // end if The code block for the if statement executes because the logical NOT (!) operator is used in the comparison

57. Copyright (c) 2004 Prentice-Hall. All rights reserved. 57 Working with Logical Operators (continued) logicalnot.html boolOne=true; // negate the value in a comparison if (!boolOne) { document.write("The variable is false"); } // end if The code block for the if statement executes because the variables is equal to true and the logical NOT (!) operator is used in the comparison

58. Copyright (c) 2004 Prentice-Hall. All rights reserved. 58 Creating Complex Decision Statements Decision statements often require complex trees of interrelated variables  If one variable is true, you may want to evaluate a second condition, and then perform a specific action if the second condition is also true in this situation, it is useful to nest if statements within other if statements

59. Copyright (c) 2004 Prentice-Hall. All rights reserved. 59 Creating Complex Decision Statements (continue) Use Comments to Enhance Visibility  You can add white space and tab spaces to make complex code easier to read Example 1 Example 2

60. Copyright (c) 2004 Prentice-Hall. All rights reserved. 60 Creating Complex Decision Statements (continued) nested.html // ask the user to confirm question=confirm("Do you want a lollipop?"); // check response if (question) { alert("The user chose OK"); } If the use choose “yes” in the confirm box, an alert box appears

61. Copyright (c) 2004 Prentice-Hall. All rights reserved. 61 Creating Complex Decision Statements (continued) nested.html // ask the user to confirm question=confirm("Do you want a lollipop?"); // check response if (question) {alert("The user chose OK"); } else { alert("You chose no lollipop."); } // end else The interpreter ignores the words after the two forward slashes (//) because they are part of a programmer’s comment

62. Copyright (c) 2004 Prentice-Hall. All rights reserved. 62 Creating Complex Decision Statements (continued) Use Nested If Statements  You can nest an if statement within another if statement  Nested statements are often necessary for complex code solutions Example

63. Copyright (c) 2004 Prentice-Hall. All rights reserved. 63 Creating Complex Decision Statements (continued) This code creates a nested if statement

64. Copyright (c) 2004 Prentice-Hall. All rights reserved. 64 Creating Complex Decision Statements (continued) Add Additional Complexity  You can create a script that leads a user through a complex decision-making process this process allows you to evaluate user decisions and react accordingly Example

65. Copyright (c) 2004 Prentice-Hall. All rights reserved. 65 Creating Complex Decision Statements (continued) This code creates a nested if statement