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

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

ITIS /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

ITIS /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

ITIS /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

ITIS /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

ITIS /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

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

ITIS /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

ITIS /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

ITIS /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

ITIS /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

ITIS /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

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

ITIS /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) }

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

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

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

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

ITIS /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

ITIS /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

ITIS /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

ITIS /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

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

ITIS /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

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

ITIS /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

ITIS /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

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

ITIS /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”)

ITIS /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”)

ITIS /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”)

ITIS /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”)

ITIS /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”)

ITIS /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

ITIS /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

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

ITIS /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

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

ITIS /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

ITIS /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

ITIS /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

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

ITIS /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

ITIS /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

ITIS /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

ITIS /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

ITIS /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

ITIS /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

ITIS /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

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

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