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

2. Conditionals!

3. 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

4. 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

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

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

7. 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

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

9. 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

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

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

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

13. 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. Conditional Statements
Ch12-Ex-02

15. 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!

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

17. 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)

18. 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

19. 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”)

20. 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”)

21. 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

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

23. 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

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

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

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

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

28. 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?

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

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

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

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

33. Back to Forms!

34. Check boxes

35. 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

36. 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!

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

38. Radio Buttons

39. 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

40. 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>

41. 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

42. AKA drop downs
Pop ups

43. 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

44. 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

45. 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

46. 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

47. 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

48. 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

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

50. 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?

51. 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
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

52. More on Forms …

53. Assignment
See Assignments Web Page