1. Web-based Application Development Lecture 17 March 16, 2006 Anita Raja

2. Programming the Web using XHTML and JavaScript Chapter 12 Increasing the Interactivity

3. ITIS 2300 8/24/2003 7:57 PMCopyright © 2003 by N.B. Long3 Conditional Statements So far…  Input some data  Output some data  Used variables to store information  Modified information & page characteristics Basically straight line processing Now, respond to user’s input and make choices

4. ITIS 2300 8/24/2003 7:57 PMCopyright © 2003 by N.B. Long4 Conditional Statements Conditional statement  Poses a question that is  Unambiguously true or false then  Executes one set of statements if true and  Optionally executes a different set if false

5. ITIS 2300 8/24/2003 7:57 PMCopyright © 2003 by N.B. Long5 Conditional Statements Basic syntax (pseudocode): if some condition is true execute these statements otherwise execute these statements Optional

6. ITIS 2300 8/24/2003 7:57 PMCopyright © 2003 by N.B. Long6 Conditional Statements JavaScript syntax: if (…) { … } Keyword Conditional statement Statement(s) to be executed if condition is true Defines block Defines conditional statement

7. ITIS 2300 8/24/2003 7:57 PMCopyright © 2003 by N.B. Long7 Conditional Statements The question involves a comparison defined by a relational operator var result = 12 … if ( result == 12 ) { … } Equality operator – a test Assignment operator – an action

8. ITIS 2300 8/24/2003 7:57 PMCopyright © 2003 by N.B. Long8 Conditional Statements Ch12-Ex-01

9. ITIS 2300 8/24/2003 7:57 PMCopyright © 2003 by N.B. Long9 Conditional Statements Relational Operators SymbolMeaning <Less than >Greater than <=Less than or equal to >=Greater than or equal to !=Not equal to ==Equal to

10. ITIS 2300 8/24/2003 7:57 PMCopyright © 2003 by N.B. Long10 Conditional Statements Condition syntax: operand operator operand variable operator variable result1 <= result2 variable operator constant result1 != 12

11. ITIS 2300 8/24/2003 7:57 PMCopyright © 2003 by N.B. Long11 Conditional Statements Program flow statement x statement y if (condition is true) statement a statement z

12. ITIS 2300 8/24/2003 7:57 PMCopyright © 2003 by N.B. Long12 Conditional Statements Program flow statement x statement y if (condition is false) statement a statement z

13. ITIS 2300 8/24/2003 7:57 PMCopyright © 2003 by N.B. Long13 Conditional Statements One way or another, statement z is being executed statement x statement y if (condition is false) statement a statement z if statement

14. ITIS 2300 8/24/2003 7:57 PMCopyright © 2003 by N.B. Long14 Conditional Statements Ch12-Ex-02

15. ITIS 2300 8/24/2003 7:57 PMCopyright © 2003 by N.B. Long15 Conditional Statements JavaScript syntax (optional): if (…) statement or if (…) { statement(s) } or if (…) { statement(s) }

16. ITIS 2300 8/24/2003 7:57 PMCopyright © 2003 by N.B. Long16 Conditional Statements JavaScript syntax (optional): if (…) { … } else { … } if clause else clause

17. ITIS 2300 8/24/2003 7:57 PMCopyright © 2003 by N.B. Long17 Conditional Statements Ch12-Ex-03

18. ITIS 2300 8/24/2003 7:57 PMCopyright © 2003 by N.B. Long18 Conditional Statements Compound conditionals if (…) { … } else if (…) { … }

19. ITIS 2300 8/24/2003 7:57 PMCopyright © 2003 by N.B. Long19 Conditional Statements Ch12-Ex-04

20. ITIS 2300 8/24/2003 7:57 PMCopyright © 2003 by N.B. Long20 Conditional Statements Nested conditionals if (firstNum > 12) { if (secondNum < 25) { alert(“Number is between 12 and 25”) } statement x Nested conditionals if (firstNum > 12) { if (secondNum < 25) { alert(“Number is between 12 and 25”) } } statement x

21. ITIS 2300 8/24/2003 7:57 PMCopyright © 2003 by N.B. Long21 Conditional Statements Nested conditionals if (firstNum > 12) { if (secondNum < 25) { alert(“Number is between 12 and 25”) } else { alert(“The number is out of bounds”) } statement x

22. ITIS 2300 8/24/2003 7:57 PMCopyright © 2003 by N.B. Long22 Conditional Statements Nested conditionals if (firstNum > 12) { if (secondNum < 25) { alert(“Number is between 12 and 25”) } else { alert(“The number is out of bounds”) } statement x

23. ITIS 2300 8/24/2003 7:57 PMCopyright © 2003 by N.B. Long23 Conditional Statements Nested conditionals if (firstNum > 12) { if (secondNum < 25) { alert(“Number is between 12 and 25”) } else { alert(“The number is out of bounds”) } else { alert(“The number is out of bounds”) } statement x

24. ITIS 2300 8/24/2003 7:57 PMCopyright © 2003 by N.B. Long24 Conditional Statements Logical operators  “and” - &&  “or” - ||  “not” - !

25. ITIS 2300 8/24/2003 7:57 PMCopyright © 2003 by N.B. Long25 Conditional Statements Logical operators if ( (firstNum > 12) && (secondNum < 25) ) { alert(“Number is between 12 and 25”) } else { alert(“The number is out of bounds”) } statement x

26. ITIS 2300 8/24/2003 7:57 PMCopyright © 2003 by N.B. Long26 Conditional Statements Truth tables Prop. 1 (type)TF Prop. 2 T F

27. ITIS 2300 8/24/2003 7:57 PMCopyright © 2003 by N.B. Long27 Conditional Statements “Today is Friday and we’re in class” Today is Friday ANDTF We’re in class T F TF FF

28. ITIS 2300 8/24/2003 7:57 PMCopyright © 2003 by N.B. Long28 Conditional Statements “Today is Friday or we’re in class” Today is Friday ORTF We’re in class T F TT TF

29. ITIS 2300 8/24/2003 7:57 PMCopyright © 2003 by N.B. Long29 Conditional Statements “Today is Friday” Today is Friday TF NOT TF

30. ITIS 2300 8/24/2003 7:57 PMCopyright © 2003 by N.B. Long30 Conditional Statements Using “not” var found searchDatabase(found) if (found) alert(“Found it”) else alert(“Item not found”)

31. ITIS 2300 8/24/2003 7:57 PMCopyright © 2003 by N.B. Long31 Conditional Statements Using “not” var found searchDatabase(found) if (found==true) alert(“Found it”) else alert(“Item not found”)

32. ITIS 2300 8/24/2003 7:57 PMCopyright © 2003 by N.B. Long32 Conditional Statements Using “not” var found searchDatabase(found) if (! found) alert(“Item not found”) else alert(“Found it”)

33. ITIS 2300 8/24/2003 7:57 PMCopyright © 2003 by N.B. Long33 Conditional Statements Using “not” var found searchDatabase(found) if (found == false) alert(“Item not found”) else alert(“Found it”)

34. ITIS 2300 8/24/2003 7:57 PMCopyright © 2003 by N.B. Long34 Conditional Statements Using “not” var found searchDatabase(found) if (found != true) alert(“Item not found”) else alert(“Found it”)

35. ITIS 2300 8/24/2003 7:57 PMCopyright © 2003 by N.B. Long35 Check Boxes Captures user responses  To multiple Yes/No, True/False situations  Basic syntax: <input type = “checkbox” name = “perlCB” checked = “checked” />  Can check as many as you like

36. ITIS 2300 8/24/2003 7:57 PMCopyright © 2003 by N.B. Long36 Check Boxes Each check box is an object Each has a checked property  Value can be true or false document.formName.checkboxName.checked Ch12-Ex-05

37. ITIS 2300 8/24/2003 7:57 PMCopyright © 2003 by N.B. Long37 Check Boxes Check boxes include an onclick event Ch12-Ex-06

38. ITIS 2300 8/24/2003 7:57 PMCopyright © 2003 by N.B. Long38 Radio Buttons Captures user response  To a multiple choice, mutually exclusive situation  Basic syntax: <input type = “radio” name = “sodaRB” />  Can check one and only one within the group having the same name

39. ITIS 2300 8/24/2003 7:57 PMCopyright © 2003 by N.B. Long39 Radio Buttons Example: Coke Pepsi Sprite Beer

40. ITIS 2300 8/24/2003 7:57 PMCopyright © 2003 by N.B. Long40 Radio Buttons How to test which was selected? Use array element notation: document.formName.sodaRB[0] document.formName.sodaRB[1] … document.formName.sodaRB[n] Ch12-Ex-07

41. ITIS 2300 8/24/2003 7:57 PMCopyright © 2003 by N.B. Long41 Pop-Up Menus Only appears when the user selects the menu  So it doesn’t take up space unless needed  Makes them somewhat better than radio buttons when used for a similar purpose

42. ITIS 2300 8/24/2003 7:57 PMCopyright © 2003 by N.B. Long42 Pop-Up Menus Created with a form Uses select and option elements: … Creates the menu Defines the individual menu choices

43. ITIS 2300 8/24/2003 7:57 PMCopyright © 2003 by N.B. Long43 Pop-Up Menus Ch12-Ex-08

44. ITIS 2300 8/24/2003 7:57 PMCopyright © 2003 by N.B. Long44 Pop-Up Menus Menu objects have a selectedIndex property  The first menu item’s index is zero  The second menu item’s index is one, etc. The full name of the property is document.formName.selectName.selectedIndex Use an if statement to find out which menu item was selected

45. ITIS 2300 8/24/2003 7:57 PMCopyright © 2003 by N.B. Long45 Pop-Up Menus To make the menu work we’ll add:  Some explanatory text  A button to invoke a function  A function to do something when you select a menu item Ch12-Ex-09

46. ITIS 2300 8/24/2003 7:57 PMCopyright © 2003 by N.B. Long46 Pop-Up Menus The element includes a value attribute: Coke Referred to by: document.formName.selectName.options[n].value Ch12-Ex-10

47. ITIS 2300 8/24/2003 7:57 PMCopyright © 2003 by N.B. Long47 Pop-Up Menus Sometimes you might not want to give one item preference So include a dummy item to start Ch12-Ex-11

48. ITIS 2300 8/24/2003 7:57 PMCopyright © 2003 by N.B. Long48 Pop-Up Menus On the other hand perhaps you’d like a default choice Add selected=“selected” to option Ch12-Ex-12

49. ITIS 2300 8/24/2003 7:57 PMCopyright © 2003 by N.B. Long49 Pop-Up Menus Quick links menus can be created using:  The value attribute to hold URLs for each option  The onchange event handler for the select element Ch12-Ex-13

50. ITIS 2300 8/24/2003 7:57 PMCopyright © 2003 by N.B. Long50 More on forms … Include name attributes because The general form for information submitted via a form is: Name_Of_Form_Element = Value_Of_Information_Entered Ch12-Ex-14

51. ITIS 2300 8/24/2003 7:57 PMCopyright © 2003 by N.B. Long51 More on forms …

52. ITIS 2300 8/24/2003 7:57 PMCopyright © 2003 by N.B. Long52 Assignment Debugging Exercise, p. 364 Correct errors Add features to e-mail the form to lliu10@uncc.edu@uncc.edu Post corrected document to your Web space as “Lagerstrom-Ch-12.html” Grade based on:  Appearance  Technical correctness of code  Proper results