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

Conditionals!

Conditional Statements So far… Input some data Output some data Used variables to store information Modified information & page characteristics Basically straight line processing Now, address the need to respond to user’s input and make choices

Conditional Statements 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

Conditional Statements Basic syntax (pseudocode): if some condition is true execute these statements otherwise execute these statements Optional

Conditional Statements JavaScript syntax: if (…) { … } Defines conditional statement Keyword Conditional statement Defines block Statement(s) to be executed if condition is true

Conditional Statements The question involves a comparison defined by a relational operator var result = 12 … if ( result == 12 ) { } Assignment operator – an action Equality operator – a test

Conditional Statements As code in the body Ch12-Ex-01 In a function Ch12-Ex-01a

Conditional Statements Relational Operators Symbol Meaning < Less than > Greater than <= Less than or equal to >= Greater than or equal to != Not equal to == Equal to

Conditional Statements Condition syntax: operand operator operand variable operator variable result1 <= result2 variable operator constant result1 != 12

Conditional Statements Program flow statement x statement y if (condition is true) statement a statement z

Conditional Statements Program flow statement x statement y if (condition is false) statement a statement z

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

Conditional Statements Ch12-Ex-02

Conditional Statements JavaScript syntax (optional ways to code): if (…) statement or if (…) { statement(s) } if (…) { statement(s) } Note: this is one single statement Note: these can be one or more statements The curly braces {} are “optional” if you only want to execute one statement for the if, but you must be careful!

Conditional Statements JavaScript syntax (optional else): if (…) { … } else { … } Ch12-Ex-03 if clause else clause

Conditional Statements Compound conditionals if (… ) { … } else if (…){ … } else if (…){ … } else { … } Ch12-Ex-04 Repeat as many times as needed Final else (optional – use if needed)

Conditional Statements Nested conditionals if (firstNum > 12) { if (firstNum < 25) { alert(“Number is between 12 and 25”) } statement x Nested conditionals if (firstNum > 12) { if (firstNum < 25) { alert(“Number is between 12 and 25”) } statement x

Conditional Statements Nested conditionals Error in this code: won’t always alert the right message var Num = GetNum() // confirm if number between 12 to 25 // warn otherwise if (Num > 12) { if (Num < 25) { alert(“Number is between 12 and 25”) } else { alert(“The number is out of bounds”)

Conditional Statements Nested conditionals if (Num > 12) { if (Num < 25) { alert(“Number is between 12 and 25”) } else { alert(“The number is out of bounds”)

Conditional Statements Nested conditionals – fix? if (Num > 12) { if (Num < 25) { alert(“Number is between 12 and 25”) } else { alert(“The number is out of bounds”) statement x

Conditional Statements Logical operators “and” - && “or” - || “not” - !

Conditional Statements Logical operators if ( (Num > 12) && (Num < 25) ) { alert(“Number is between 12 and 25”) } else { alert(“The number is out of bounds”) statement x

Conditional Statements Truth tables Prop. 1 (type) T F Prop. 2

Conditional Statements “Today is Tuesday and we’re in class” Today is Tue. AND T F We’re in class T F F F

Conditional Statements “Today is Friday or we’re in class” Today is Friday OR T F We’re in class T T T F

Conditional Statements “Today is Friday” Today is Friday T F NOT F T

Conditional Statements True cases var found found = searchDatabase(data) if (found) alert(“Found it”) else alert(“Item not found”) What is the bad programming practice above?

Conditional Statements True cases var found found = searchDatabase(data) if (found==true) alert(“Found it”) else alert(“Item not found”)

Conditional Statements False cases using “not” var found found = searchDatabase(data) if (! found) alert(“Item not found”) else alert(“Found it”)

Conditional Statements Using “not” var found found = searchDatabase(data) if (found == false) alert(“Item not found”) else alert(“Found it”)

Conditional Statements Using “not” var found found = searchDatabase(data) if (found != true) alert(“Item not found”) else alert(“Found it”)

Back to Forms!

Check boxes

Check Boxes Captures user responses To multiple Yes/No or True/False situations Basic syntax: <input type = “checkbox” name = “perlCB” checked = “checked” /> Can have as many checkboxes as you need Can check as many as you like Each checkbox has a unique name Note: <input type=‘checkbox’ …> makes a check box and nothing else i.e. no text goes with it You need to supply text or graphics to give the box meaning

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 Enhanced?: Ch12-Ex-05a Note the subtle logic error!

Check Boxes Check boxes include an onclick event Ch12-Ex-06

Radio Buttons

Radio Buttons Captures user response <input type = “radio” Use in multiple choice, mutually exclusive situations For every button within that group or set Basic syntax: <input type = “radio” name = “sodaRB” /> Can have multiple sets of radio buttons Each button in a set must have the same name to be grouped together Can check one and only one within the group having the same name As with the checkbox this makes the radio button only No names, titles, etc. associated with button Must add your own

Radio Buttons Example: <form …> <input type=“radio” name=“sodaRB” />Coke<br/> <input type=“radio” name=“sodaRB” />Pepsi<br/> <input type=“radio” name=“sodaRB” />Sprite<br/> <input type=“radio” name=“sodaRB” />Beer<br/> </form>

Radio Buttons Every one has the same name! Use array element notation: 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

AKA drop downs Pop ups

Pop-Up Menus Selections appear when the user selects the menu Doesn’t take up space until needed Makes them somewhat better than radio buttons when used for a similar purpose Especially for lots of items to be listed

Defines the individual menu choices Pop-Up Menus Created with a form Uses select and option elements: <form …> <select name=“…”> <option> … </option> </select> </form> Ch12-Ex-08 Defines the individual menu choices Creates the menu

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

Pop-Up Menus To make the menu work nicely we’ll add: Ch12-Ex-09 Some explanatory text A button to invoke a function A function to do process the menu when the button is pressed Ch12-Ex-09

Pop-Up Menus The <option> element includes a value attribute: <option value=“I like Coke”>Coke</option> Referred to by: document.formName.selectName.options[n].value Ch12-Ex-10

Pop-Up Menus Sometimes you might not want to give one item preference So include a dummy item to start Ch12-Ex-11 Should the top element be “selectable”? Ch12-Ex-11a

Pop-Up Menus On the other hand perhaps you’d like a default choice Add selected=“selected” to option Ch12-Ex-12

Pop-Up Menus Quick links menus can be created using: Ch12-Ex-13 The value attribute to hold URLs for each option The onchange event handler for the select element Ch12-Ex-13 What is an odd behavior in Ex 13?

More on Forms … Form attributes: Method: tells how to pass form elements on Use method=“post” to hide details Enctype: how to send the message Use enctype=“text/plain” to send the message as unencrypted text Action: what to do when the form is submitted What program is executed when submitted Use mailto to do an email: action=“mailto:userid@uncc.edu” Include name attributes for all form elements The general form for information submitted via a form is: Name_Of_Form_Element = Value_Of_Information_Entered Ch12-Ex-14

More on Forms …

Assignment See Assignments Web Page