1. Fluency with Information Technology INFO100 and CSE100 Katherine Deibel 2012-04-30Katherine Deibel, Fluency in Information Technology1

2.  Plain text instructions for dynamic pages  In tags  Or in a separate file  Variables  Boolean, string, or numeral  Declared with var  Operators  +, -, *, /, %  + concatenates strings 2012-04-30Katherine Deibel, Fluency in Information Technology2

3.  Remember, browsers read HTML, CSS, and JavaScript line-by-line  What if we want the browser to skip a line?  We could put it inside a comment but the browser would just ignore it  What we want is logical branching  Example: If I am out of underwear, do laundry Else put on underwear 2012-04-30Katherine Deibel, Fluency in Information Technology3

4.  Many names: conditionals, branches, tests  Programs are typically step-to-step and sequential  Branches allow programs to follow different paths of execution based on  User feedback  Variable values  Comparisons between values 2012-04-30Katherine Deibel, Fluency in Information Technology4

5.  Boolean: a value that is true or false  Boolean variable: a JS variable that has been set to either true or false  [Boolean] test: a computation that returns a Boolean value 2012-04-30Katherine Deibel, Fluency in Information Technology5

6.  Conditionals test an expression to see ifit is true or false  General Form: if( ) ;  In JavaScript: if(day == "Monday") evening_plan = "Watch HIMYM"; 2012-04-30Katherine Deibel, Fluency in Information Technology6

7.  Do not put a semicolon after an if statement: if(day == "Monday");  BAD!!  View the if statement and its following line as one statement: if(day == "Monday") plan = "HIMYM"; 2012-04-30Katherine Deibel, Fluency in Information Technology7

8.  Only some statements are executed day == "Monday" evening_plan = "Watch HIMYM" " Are they equal?" test Yes No 2012-04-30Katherine Deibel, Fluency in Information Technology8

9.  All conditions result in either true or false  The condition is usually a test  Example: day == "Monday"  Conditions can also be a Boolean value  Suppose leap_year is a Boolean variable: if(leap_year) Feb_days = 29;  Which is equivalent to: if(leap_year == true) Feb_days = 29; 2012-04-30Katherine Deibel, Fluency in Information Technology9

10.  Branch both ways with If-Then-Else: if( ) ; else ;  In JavaScript: if(leapYear) daysInFeb = 29; else daysInFeb = 28; 2012-04-30Katherine Deibel, Fluency in Information Technology10

11. if(leapYear) daysInFeb = 28 TrueFalse daysInFeb = 29 2012-04-30Katherine Deibel, Fluency in Information Technology11

12. if(month == "January") days = 31; else if (month == "February") days = 28; else if (month == "March") days = 31; … else if (month == "December") days = 31; 2012-04-30Katherine Deibel, Fluency in Information Technology12

13. Alert, Confirm, Random 2012-04-30Katherine Deibel, Fluency in Information Technology13

14.  Functions are not like math functions  Functions are subroutines  One or more statements separate from the main program  Functions are called by the main program or other functions  Functions simplify writing code by allowing coders to reuse complex statements without copying/pasting 2012-04-30Katherine Deibel, Fluency in Information Technology14

15.  Returns a random decimal number x from the range 0≤x<1  Usage: var x = Math.random(); 2012-04-30Katherine Deibel, Fluency in Information Technology15

16.  Generates a message box with an OK button  Message box displays the message string that is alert's parameter  Example: alert("Let's show off the alert() function"); 2012-04-30Katherine Deibel, Fluency in Information Technology16

17.  The operation confirm() is like alert() except it has two buttons: Cancel and OK  When the user clicks a button, the system returns to the program the information of which button was clicked:  Cancel  0  OK  1  We can illustrate this behavior 2012-04-30Katherine Deibel, Fluency in Information Technology17

18. 2012-04-30Katherine Deibel, Fluency in Information Technology18 First JavaScript body {background-color: black; color: gold; font-family; corbel;} Showing Simple JS var whatButton; whatButton = confirm("Do you bring your clicker to class every lecture?"); if(whatButton == 1) alert("You clicked OK"); else alert("You clicked Cancel");

19. 2012-04-30Katherine Deibel, Fluency in Information Technology19

20.  With if and if-else statements, only the immediate statement after the if and the else are executed: if(temp < 32) water = "ice"; state = "frozen";  always executed  To do more stuff, we could test again if(temp < 32) water = "ice"; if(temp < 32) state = "frozen"; 2012-04-30Katherine Deibel, Fluency in Information Technology20

21.  A better solution: compound statement  Any number of statements enclosed in curly braces { }, is treated as one statement  Example: if(temp < 32) { water = "ice"; state = "frozen"; } No semicolon after the brace!! 2012-04-30Katherine Deibel, Fluency in Information Technology21

22. if(clean_clothes > 0) if(day=="Saturday") morning_plan = "Sleep In"; else morning_plan = "Do_Laundry"; 2012-04-30Katherine Deibel, Fluency in Information Technology22 If there are no clean clothes …?

23. if(clean_clothes > 0) if(day=="Saturday") morning_plan = "Sleep In"; else morning_plan = "Do_Laundry"; Else always associates with the nearest if. Indentation does not matter! 2012-04-30Katherine Deibel, Fluency in Information Technology23

24. if(clean_clothes > 0) if(day=="Saturday") morning_plan = "Sleep In"; else morning_plan = "Do_Laundry"; Put nested ifs in compound statements 2012-04-30Katherine Deibel, Fluency in Information Technology24

25. if(clean_clothes > 0) { if(day=="Saturday") { morning_plan = "Sleep In"; } else { morning_plan = "Do_Laundry"; } 2012-04-30Katherine Deibel, Fluency in Information Technology25

26.  Always use curly braces with if and if- else statements  Most of the time, you will be doing it anyhow  Easier to add more statements later 2012-04-30Katherine Deibel, Fluency in Information Technology26

27. Paging Dr. Ruth or Dr. Spock… 2012-04-30Katherine Deibel, Fluency in Information Technology27

28.  Make comparisons between numeric values  Used in if statements and for stop tests in loops (later topic)  Outcome is a Boolean value, true or false <less than <=less than or equal to ==equal to !=not equal to >=greater than or equal to >greater than 2012-04-30Katherine Deibel, Fluency in Information Technology28

29.  = is the assignment operator  == is the test for equivalence  Never use = in an if-statement!  It will usually always default to true. 2012-04-30Katherine Deibel, Fluency in Information Technology29

30.  Allow you to combine multiple tests x && yboth x AND y must be true x || yeither x OR y must be true  Good practice to put each test in parentheses  Example: if(leapYear && (month == "February")) days = 29; 2012-04-30Katherine Deibel, Fluency in Information Technology30

31.  You can use relational operators with strings as well  "Alice" < "Bob"  true  "Alice" == "Bob"  false  "Alice" >= "Bob"  false  "Alice" == "Alice"   "Alice" == "alice"   "Alice" >= "Alice"  2012-04-30Katherine Deibel, Fluency in Information Technology31 true false true

32.  Conditional statements allow us to execute some statements and not others  The test is enclosed in parentheses  We always use compound statements to group the operations of conditional statements properly  A compound statement is just a bunch of statements inside of { } … DO NOT follow it with a ; 2012-04-30Katherine Deibel, Fluency in Information Technology32