web-based application development lecture 17 march 16, 2006 anita raja
Post on 20-Dec-2015
213 views
TRANSCRIPT
Web-based Application Development
Lecture 17
March 16, 2006
Anita Raja
Programming the Web using XHTML and JavaScript
Chapter 12
Increasing the Interactivity
ITIS 2300 8/24/2003 7:57 PM Copyright © 2003 by N.B. Long3
Conditional Statements
So far… Input some dataOutput some dataUsed variables to store informationModified information & page characteristics
Basically straight line processing Now, respond to user’s input and make
choices
ITIS 2300 8/24/2003 7:57 PM Copyright © 2003 by N.B. Long4
Conditional Statements
Conditional statementPoses a question that isUnambiguously true or false thenExecutes one set of statements if true andOptionally executes a different set if false
ITIS 2300 8/24/2003 7:57 PM Copyright © 2003 by N.B. Long5
Conditional Statements
Basic syntax (pseudocode):
if some condition
is true execute these statements
otherwise
execute these statements
Optional
ITIS 2300 8/24/2003 7:57 PM Copyright © 2003 by N.B. Long6
Conditional Statements
JavaScript syntax:
if (…)
{
…
}
KeywordConditional statementStatement(s) to be executed if condition
is true
Defines block
Defines conditional statement
ITIS 2300 8/24/2003 7:57 PM Copyright © 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 2300 8/24/2003 7:57 PM Copyright © 2003 by N.B. Long8
Conditional Statements
Ch12-Ex-01
ITIS 2300 8/24/2003 7:57 PM Copyright © 2003 by N.B. Long9
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
ITIS 2300 8/24/2003 7:57 PM Copyright © 2003 by N.B. Long10
Conditional Statements
Condition syntax:
operand operator operand
variable operator variable
result1 <= result2
variable operator constant
result1 != 12
ITIS 2300 8/24/2003 7:57 PM Copyright © 2003 by N.B. Long11
Conditional Statements
Program flow
statement x
statement y
if (condition is true)
statement a
statement z
ITIS 2300 8/24/2003 7:57 PM Copyright © 2003 by N.B. Long12
Conditional Statements
Program flow
statement x
statement y
if (condition is false)
statement a
statement z
ITIS 2300 8/24/2003 7:57 PM Copyright © 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 2300 8/24/2003 7:57 PM Copyright © 2003 by N.B. Long14
Conditional Statements
Ch12-Ex-02
ITIS 2300 8/24/2003 7:57 PM Copyright © 2003 by N.B. Long15
Conditional Statements
JavaScript syntax (optional):
if (…) statement
or
if (…) { statement(s) }
or
if (…) {
statement(s)
}
ITIS 2300 8/24/2003 7:57 PM Copyright © 2003 by N.B. Long16
Conditional Statements
JavaScript syntax (optional):
if (…) {…}else {…}
if clause
else clause
ITIS 2300 8/24/2003 7:57 PM Copyright © 2003 by N.B. Long17
Conditional Statements
Ch12-Ex-03
ITIS 2300 8/24/2003 7:57 PM Copyright © 2003 by N.B. Long18
Conditional Statements
Compound conditionalsif (…) {…}else if (…) {…}
ITIS 2300 8/24/2003 7:57 PM Copyright © 2003 by N.B. Long19
Conditional Statements
Ch12-Ex-04
ITIS 2300 8/24/2003 7:57 PM Copyright © 2003 by N.B. Long20
Conditional Statements
Nested conditionalsif (firstNum > 12) { if (secondNum < 25) { alert(“Number is between 12 and 25”) }}statement x
Nested conditionalsif (firstNum > 12) { if (secondNum < 25) { alert(“Number is between 12 and 25”) }}statement x
ITIS 2300 8/24/2003 7:57 PM Copyright © 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 2300 8/24/2003 7:57 PM Copyright © 2003 by N.B. Long22
Conditional Statements
Nested conditionalsif (firstNum > 12) { if (secondNum < 25) { alert(“Number is between 12 and 25”) }}else { alert(“The number is out of bounds”)}statement x
ITIS 2300 8/24/2003 7:57 PM Copyright © 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 2300 8/24/2003 7:57 PM Copyright © 2003 by N.B. Long24
Conditional Statements
Logical operators“and” - &&“or” - ||“not” - !
ITIS 2300 8/24/2003 7:57 PM Copyright © 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 2300 8/24/2003 7:57 PM Copyright © 2003 by N.B. Long26
Conditional Statements
Truth tables
Prop. 1
(type) T F
Prop. 2T
F
ITIS 2300 8/24/2003 7:57 PM Copyright © 2003 by N.B. Long27
Conditional Statements
“Today is Friday and we’re in class”
Today is Friday
AND T F
We’re in
class
T
F
T F
F F
ITIS 2300 8/24/2003 7:57 PM Copyright © 2003 by N.B. Long28
Conditional Statements
“Today is Friday or we’re in class”
Today is Friday
OR T F
We’re in
class
T
F
T T
T F
ITIS 2300 8/24/2003 7:57 PM Copyright © 2003 by N.B. Long29
Conditional Statements
“Today is Friday”
Today is Friday
T F
NOT TF
ITIS 2300 8/24/2003 7:57 PM Copyright © 2003 by N.B. Long30
Conditional Statements
Using “not”
var found
searchDatabase(found)
if (found)
alert(“Found it”)
else
alert(“Item not found”)
ITIS 2300 8/24/2003 7:57 PM Copyright © 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 2300 8/24/2003 7:57 PM Copyright © 2003 by N.B. Long32
Conditional Statements
Using “not”
var found
searchDatabase(found)
if (! found)
alert(“Item not found”)
else
alert(“Found it”)
ITIS 2300 8/24/2003 7:57 PM Copyright © 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 2300 8/24/2003 7:57 PM Copyright © 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 2300 8/24/2003 7:57 PM Copyright © 2003 by N.B. Long35
Check Boxes
Captures user responsesTo multiple Yes/No, True/False situationsBasic syntax:
<input type = “checkbox”
name = “perlCB”
checked = “checked” />Can check as many as you like
ITIS 2300 8/24/2003 7:57 PM Copyright © 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 2300 8/24/2003 7:57 PM Copyright © 2003 by N.B. Long37
Check Boxes
Check boxes include an onclick event Ch12-Ex-06
ITIS 2300 8/24/2003 7:57 PM Copyright © 2003 by N.B. Long38
Radio Buttons
Captures user responseTo a multiple choice, mutually exclusive situationBasic syntax:
<input type = “radio”
name = “sodaRB” />Can check one and only one within the group
having the same name
ITIS 2300 8/24/2003 7:57 PM Copyright © 2003 by N.B. Long39
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>
ITIS 2300 8/24/2003 7:57 PM Copyright © 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 2300 8/24/2003 7:57 PM Copyright © 2003 by N.B. Long41
Pop-Up Menus
Only appears when the user selects the menuSo it doesn’t take up space unless neededMakes them somewhat better than radio
buttons when used for a similar purpose
ITIS 2300 8/24/2003 7:57 PM Copyright © 2003 by N.B. Long42
Pop-Up Menus
Created with a form Uses select and option elements:
<form …> <select name=“…”> <option> … </option> <option> … </option> <option> … </option> </select></form>
Creates the menu
Defines the individual
menu choices
ITIS 2300 8/24/2003 7:57 PM Copyright © 2003 by N.B. Long43
Pop-Up Menus
Ch12-Ex-08
ITIS 2300 8/24/2003 7:57 PM Copyright © 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 2300 8/24/2003 7:57 PM Copyright © 2003 by N.B. Long45
Pop-Up Menus
To make the menu work we’ll add:Some explanatory textA button to invoke a functionA function to do something when you select a
menu item Ch12-Ex-09
ITIS 2300 8/24/2003 7:57 PM Copyright © 2003 by N.B. Long46
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
ITIS 2300 8/24/2003 7:57 PM Copyright © 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 2300 8/24/2003 7:57 PM Copyright © 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 2300 8/24/2003 7:57 PM Copyright © 2003 by N.B. Long49
Pop-Up Menus
Quick links menus can be created using:The value attribute to hold URLs for each
optionThe onchange event handler for the select
element Ch12-Ex-13
ITIS 2300 8/24/2003 7:57 PM Copyright © 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 2300 8/24/2003 7:57 PM Copyright © 2003 by N.B. Long51
More on forms …
ITIS 2300 8/24/2003 7:57 PM Copyright © 2003 by N.B. Long52
Assignment
Debugging Exercise, p. 364 Correct errors Add features to e-mail the form to lliu10
@uncc.edu Post corrected document to your Web space as
“Lagerstrom-Ch-12.html” Grade based on:
Appearance Technical correctness of code Proper results