1. Operators and Statements Assignment Statements Mathematical Operators Conditional Logic if and switch statements – Ask a question (test a condition) – Do something based on truth Has the kettle boiled? The pour water into cup. Else wait 1

2. Assignment Statements mySalary = 1200.16; mySalary = mySalary + 100; myFName = "Steve"; myLName = "Perry"; myAge = getMyAge("StevePerry"); 2

3. 3 Numerical Calculations Basic mathematical operators – +, -, *, / Example: – Assigning the value of a calculation: –var TotalCostOfShopping; TotalCostOfShopping = 10 + 5 + 5; alert(TotalCostOfShopping); – 10 + 5 + 5 is referred to as an “expression”

4. 4 Exercise 2.1 Write a web page that displays the circumference of circle whose radius is.67 inches. The formula to calculate the circumference of circle is 2PIr, where PI = 3.1459 and r is the radius

5. 5 Increment/Decrement ( Unary Operators ) myVariable = myVariable + 1; myVariable = myVariable - 1; Or use shortcut... myVariable++; myVariable--;

6. 6 Another Shortcut myVar += 6; //add 6 to myVar Same as: myVar = myVar + 6;

7. 7 Operator Precedence USE PARENTHESIS!! – Multiplication and division first – then addition and substraction – left to right

8. Comparison Operators What we use to make comparisons: = =( Different than = ) = !=Not Equals 8

9. Precedence USE PARENTHESES ! = = and != lowest order, =equal precedence Instead of: 3 * 5 > 2 * 5 use: (3 * 5) > (2 * 5) 9

10. The if Statement Makes the decision e.g if (roomTemperature > 80) { roomTemperature = roomTemperature - 10; } No semi-colon! 10

11. Block of Code Code placed between curly braces { } is called a "Block" of code In the last if statement, the entire block of code is executed if the condition evaluates to true (e.g. is the room temperature greater than 80 degrees?) You can leave off { } for a single line, but don't! 11

12. Example if (roomTemperature > 80) { roomTemperature = roomTemperature -10; alert("It's hot in here"); alert("Air conditioner switched on"); } 12

13. Demo - Simple IF Statement 13 Pause this slide and click the link below for a… video demonstration

14. Common Mistake Be careful not to use a single = where you need = = What happens with the following code? – degCent = 77; if (degCent = 100) { document.write("That's boiling"); alert("Centigrade is " + degCent); } alert("Finished"); 14

15. Demo – Common Mistake 15 Pause this slide and click the link below for a… video demonstration

16. Logical Operators How do we ask the question, "Is the temperature greater than 32 and less than 211? Logical Operators: – AND&& – OR| | – NOT! 16

17. AND With AND both sides of the condition must be true for the statement to be true Example: – if (degCent > 0 && degCent < 100) do something... 17

18. OR Only one side of the condition must be true for the the entire statement to be true Example: – if (degCent 100) do something... 18

19. NOT You can check if something is not true Example: – if (!degCent == 0) 19

20. Never Mix NOTs and ORs! if(city != "Boston" OR city != "Denver") do something… What happens here? 20

21. A Tale of Two Cities if(city != "Boston" || city != "Denver") do something… If the city is Denver, it will not be Boston If the city is Boston, it will not be Denver If the city is Los Angeles, it will not be either Boston or Denver! This statement is ALWAYS true 21

22. Nested if Statements You can nest one if statement inside another if (degCent 0) { document.write("degCent is…"); } } 22

23. else and else if When the 'if' expression evaluates to true the code block found directly below the 'if' statement is executed When the expression evaluates to false, then you use the 'else' clause to execute the code block under it 23

24. Examples if (myAge >= 0 && myAge <= 10) { document.write("myAge is between 0 and 10"); } else { document.write("myAge is NOT between 0 and 10"); } 24

25. Exercise 2.2 Use a nested if-statement in the following: – Write a program to prompt a user for their name and eye color – If their name is 'Steve', display "You are the Instructor" Otherwise display "Hi " – If their eye color is blue, display » "Hi, blue eyes" » Otherwise display "You have eyes"; 25

26. else if if (myAge >= 0 && myAge = 30 ) { document.write("myAge is over 30"); } else { document.write("myAge is between 10 and 30"); } 26

27. Comparing Strings var myName = "Paul"; if (myName = = "Paul") { alert("myName is Paul"); } Comparisons ARE case-sensitive lowercase letters are greater than uppercase! use toUpperCase( ) or toLowerCase( ) 27

28. The switch Statement Uses for checking the value of a particular variable for a large number of possible values May be clearer then using “esleif” 28

29. Example switch (myName) { case "Paul": //some code break; case "John": //some code break; default: //some code break; } 29

30. Elements of switch Think of the statement as: "switch to the code where the case matches" Breakdown: – text expression – case statements – break statements – default statements 30

31. Exercise 2.3 Use the switch statement in a program that asks a user to enter a number between 1 and 100 If the number entered is 1, 2, or 3 display "You're too low" If the number entered is 4 display "That's It!" If the number entered is 5 or greater display "You're too high" 31

32. Looping Looping means to repeating blocks of code You continue looping while a condition is true 32

33. The for Loop for (cntr=1; cntr <=3; cntr++) { // execute some code } Initialization, test condition, increment 33

34. How it works Execute initialization Check the test condition – if true, continue, if not exit the statement Execute code in the code block Execute the increment Repeat 2 to 4 until the test condition is false 34

35. Exercise 2.4 Write a program that will display the number of lines a user requests. Display the line in the following format – "this is line number " 35

36. while Loop The 'for' loop executes a certain number of times The 'while' loop executes until a certain condition is met Example: while (degCent != 100) { // some code } 36

37. Example degCent = new Array( ); //New Array degFahren = new Array(34, 123, 212); var loopCounter = 0; while (loopCounter < 3) { degCent[loopCounter] = 5/9 * (degFahren[loopCounter] - 32); loopCounter++; } 37

38. Steve's Super Simple Centigrade-Fahrenheit Conversion Guide CentigradeFahrenheit 030 1050 2070 3090 38

39. Demo – Indenting Code 39 Pause this slide and click the link below for a… video demonstration

40. The Infinite Loop A loop that will never end – CNTL-ALT-DELETE is your friend If a condition is never met, then the loop goes continues indefinitely 40

41. The break and continue Statements break - exits the loop and continues the execution of code after the loop continue - exits the loop and continues the execution of the code at the beginning of the loop (i.e. it performs the next iteration) 41

42. Exercise 2.5 Code a JavaScript program that will continuously prompt a user for items on a shopping list. Immediately after the user makes his or her entry, display the item on the window as a list item. When the user enters "done", then exit the loop and display "End of list" 42

43. Spot the Infinite Loop! var testVariable = 0; while (testVariable <=10) { alert("Test variable is " + testVariable); testVariable++; if (testVariable = 10) { alert("The last loop"); } } 43

44. The do…while Loop Executes code inside the loop and then checks the condition – Insures that the code inside the loop is executed at least once Example var userAge; do { userAge = prompt("Enter your age",""); } while (isNaN(userAge) = = true) 44

45. Exercise 2.6 Write while-loop that prompts the user to enter their age. If their age is over 18, prompt them for their name and display "You may enter the club " on the browser window. If they are under 18, display. You may not enter the club and re-prompt the user for their age. 45

46. End 46