web-based application development lecture 17 march 16, 2006 anita raja
Post on 20-Dec-2015
212 views
TRANSCRIPT
![Page 1: Web-based Application Development Lecture 17 March 16, 2006 Anita Raja](https://reader030.vdocument.in/reader030/viewer/2022032800/56649d435503460f94a1fea9/html5/thumbnails/1.jpg)
Web-based Application Development
Lecture 17
March 16, 2006
Anita Raja
![Page 2: Web-based Application Development Lecture 17 March 16, 2006 Anita Raja](https://reader030.vdocument.in/reader030/viewer/2022032800/56649d435503460f94a1fea9/html5/thumbnails/2.jpg)
Programming the Web using XHTML and JavaScript
Chapter 12
Increasing the Interactivity
![Page 3: Web-based Application Development Lecture 17 March 16, 2006 Anita Raja](https://reader030.vdocument.in/reader030/viewer/2022032800/56649d435503460f94a1fea9/html5/thumbnails/3.jpg)
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
![Page 4: Web-based Application Development Lecture 17 March 16, 2006 Anita Raja](https://reader030.vdocument.in/reader030/viewer/2022032800/56649d435503460f94a1fea9/html5/thumbnails/4.jpg)
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
![Page 5: Web-based Application Development Lecture 17 March 16, 2006 Anita Raja](https://reader030.vdocument.in/reader030/viewer/2022032800/56649d435503460f94a1fea9/html5/thumbnails/5.jpg)
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
![Page 6: Web-based Application Development Lecture 17 March 16, 2006 Anita Raja](https://reader030.vdocument.in/reader030/viewer/2022032800/56649d435503460f94a1fea9/html5/thumbnails/6.jpg)
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
![Page 7: Web-based Application Development Lecture 17 March 16, 2006 Anita Raja](https://reader030.vdocument.in/reader030/viewer/2022032800/56649d435503460f94a1fea9/html5/thumbnails/7.jpg)
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
![Page 8: Web-based Application Development Lecture 17 March 16, 2006 Anita Raja](https://reader030.vdocument.in/reader030/viewer/2022032800/56649d435503460f94a1fea9/html5/thumbnails/8.jpg)
ITIS 2300 8/24/2003 7:57 PM Copyright © 2003 by N.B. Long8
Conditional Statements
Ch12-Ex-01
![Page 9: Web-based Application Development Lecture 17 March 16, 2006 Anita Raja](https://reader030.vdocument.in/reader030/viewer/2022032800/56649d435503460f94a1fea9/html5/thumbnails/9.jpg)
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
![Page 10: Web-based Application Development Lecture 17 March 16, 2006 Anita Raja](https://reader030.vdocument.in/reader030/viewer/2022032800/56649d435503460f94a1fea9/html5/thumbnails/10.jpg)
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
![Page 11: Web-based Application Development Lecture 17 March 16, 2006 Anita Raja](https://reader030.vdocument.in/reader030/viewer/2022032800/56649d435503460f94a1fea9/html5/thumbnails/11.jpg)
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
![Page 12: Web-based Application Development Lecture 17 March 16, 2006 Anita Raja](https://reader030.vdocument.in/reader030/viewer/2022032800/56649d435503460f94a1fea9/html5/thumbnails/12.jpg)
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
![Page 13: Web-based Application Development Lecture 17 March 16, 2006 Anita Raja](https://reader030.vdocument.in/reader030/viewer/2022032800/56649d435503460f94a1fea9/html5/thumbnails/13.jpg)
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
![Page 14: Web-based Application Development Lecture 17 March 16, 2006 Anita Raja](https://reader030.vdocument.in/reader030/viewer/2022032800/56649d435503460f94a1fea9/html5/thumbnails/14.jpg)
ITIS 2300 8/24/2003 7:57 PM Copyright © 2003 by N.B. Long14
Conditional Statements
Ch12-Ex-02
![Page 15: Web-based Application Development Lecture 17 March 16, 2006 Anita Raja](https://reader030.vdocument.in/reader030/viewer/2022032800/56649d435503460f94a1fea9/html5/thumbnails/15.jpg)
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)
}
![Page 16: Web-based Application Development Lecture 17 March 16, 2006 Anita Raja](https://reader030.vdocument.in/reader030/viewer/2022032800/56649d435503460f94a1fea9/html5/thumbnails/16.jpg)
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
![Page 17: Web-based Application Development Lecture 17 March 16, 2006 Anita Raja](https://reader030.vdocument.in/reader030/viewer/2022032800/56649d435503460f94a1fea9/html5/thumbnails/17.jpg)
ITIS 2300 8/24/2003 7:57 PM Copyright © 2003 by N.B. Long17
Conditional Statements
Ch12-Ex-03
![Page 18: Web-based Application Development Lecture 17 March 16, 2006 Anita Raja](https://reader030.vdocument.in/reader030/viewer/2022032800/56649d435503460f94a1fea9/html5/thumbnails/18.jpg)
ITIS 2300 8/24/2003 7:57 PM Copyright © 2003 by N.B. Long18
Conditional Statements
Compound conditionalsif (…) {…}else if (…) {…}
![Page 19: Web-based Application Development Lecture 17 March 16, 2006 Anita Raja](https://reader030.vdocument.in/reader030/viewer/2022032800/56649d435503460f94a1fea9/html5/thumbnails/19.jpg)
ITIS 2300 8/24/2003 7:57 PM Copyright © 2003 by N.B. Long19
Conditional Statements
Ch12-Ex-04
![Page 20: Web-based Application Development Lecture 17 March 16, 2006 Anita Raja](https://reader030.vdocument.in/reader030/viewer/2022032800/56649d435503460f94a1fea9/html5/thumbnails/20.jpg)
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
![Page 21: Web-based Application Development Lecture 17 March 16, 2006 Anita Raja](https://reader030.vdocument.in/reader030/viewer/2022032800/56649d435503460f94a1fea9/html5/thumbnails/21.jpg)
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
![Page 22: Web-based Application Development Lecture 17 March 16, 2006 Anita Raja](https://reader030.vdocument.in/reader030/viewer/2022032800/56649d435503460f94a1fea9/html5/thumbnails/22.jpg)
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
![Page 23: Web-based Application Development Lecture 17 March 16, 2006 Anita Raja](https://reader030.vdocument.in/reader030/viewer/2022032800/56649d435503460f94a1fea9/html5/thumbnails/23.jpg)
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
![Page 24: Web-based Application Development Lecture 17 March 16, 2006 Anita Raja](https://reader030.vdocument.in/reader030/viewer/2022032800/56649d435503460f94a1fea9/html5/thumbnails/24.jpg)
ITIS 2300 8/24/2003 7:57 PM Copyright © 2003 by N.B. Long24
Conditional Statements
Logical operators“and” - &&“or” - ||“not” - !
![Page 25: Web-based Application Development Lecture 17 March 16, 2006 Anita Raja](https://reader030.vdocument.in/reader030/viewer/2022032800/56649d435503460f94a1fea9/html5/thumbnails/25.jpg)
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
![Page 26: Web-based Application Development Lecture 17 March 16, 2006 Anita Raja](https://reader030.vdocument.in/reader030/viewer/2022032800/56649d435503460f94a1fea9/html5/thumbnails/26.jpg)
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
![Page 27: Web-based Application Development Lecture 17 March 16, 2006 Anita Raja](https://reader030.vdocument.in/reader030/viewer/2022032800/56649d435503460f94a1fea9/html5/thumbnails/27.jpg)
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
![Page 28: Web-based Application Development Lecture 17 March 16, 2006 Anita Raja](https://reader030.vdocument.in/reader030/viewer/2022032800/56649d435503460f94a1fea9/html5/thumbnails/28.jpg)
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
![Page 29: Web-based Application Development Lecture 17 March 16, 2006 Anita Raja](https://reader030.vdocument.in/reader030/viewer/2022032800/56649d435503460f94a1fea9/html5/thumbnails/29.jpg)
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
![Page 30: Web-based Application Development Lecture 17 March 16, 2006 Anita Raja](https://reader030.vdocument.in/reader030/viewer/2022032800/56649d435503460f94a1fea9/html5/thumbnails/30.jpg)
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”)
![Page 31: Web-based Application Development Lecture 17 March 16, 2006 Anita Raja](https://reader030.vdocument.in/reader030/viewer/2022032800/56649d435503460f94a1fea9/html5/thumbnails/31.jpg)
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”)
![Page 32: Web-based Application Development Lecture 17 March 16, 2006 Anita Raja](https://reader030.vdocument.in/reader030/viewer/2022032800/56649d435503460f94a1fea9/html5/thumbnails/32.jpg)
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”)
![Page 33: Web-based Application Development Lecture 17 March 16, 2006 Anita Raja](https://reader030.vdocument.in/reader030/viewer/2022032800/56649d435503460f94a1fea9/html5/thumbnails/33.jpg)
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”)
![Page 34: Web-based Application Development Lecture 17 March 16, 2006 Anita Raja](https://reader030.vdocument.in/reader030/viewer/2022032800/56649d435503460f94a1fea9/html5/thumbnails/34.jpg)
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”)
![Page 35: Web-based Application Development Lecture 17 March 16, 2006 Anita Raja](https://reader030.vdocument.in/reader030/viewer/2022032800/56649d435503460f94a1fea9/html5/thumbnails/35.jpg)
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
![Page 36: Web-based Application Development Lecture 17 March 16, 2006 Anita Raja](https://reader030.vdocument.in/reader030/viewer/2022032800/56649d435503460f94a1fea9/html5/thumbnails/36.jpg)
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
![Page 37: Web-based Application Development Lecture 17 March 16, 2006 Anita Raja](https://reader030.vdocument.in/reader030/viewer/2022032800/56649d435503460f94a1fea9/html5/thumbnails/37.jpg)
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
![Page 38: Web-based Application Development Lecture 17 March 16, 2006 Anita Raja](https://reader030.vdocument.in/reader030/viewer/2022032800/56649d435503460f94a1fea9/html5/thumbnails/38.jpg)
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
![Page 39: Web-based Application Development Lecture 17 March 16, 2006 Anita Raja](https://reader030.vdocument.in/reader030/viewer/2022032800/56649d435503460f94a1fea9/html5/thumbnails/39.jpg)
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>
![Page 40: Web-based Application Development Lecture 17 March 16, 2006 Anita Raja](https://reader030.vdocument.in/reader030/viewer/2022032800/56649d435503460f94a1fea9/html5/thumbnails/40.jpg)
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
![Page 41: Web-based Application Development Lecture 17 March 16, 2006 Anita Raja](https://reader030.vdocument.in/reader030/viewer/2022032800/56649d435503460f94a1fea9/html5/thumbnails/41.jpg)
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
![Page 42: Web-based Application Development Lecture 17 March 16, 2006 Anita Raja](https://reader030.vdocument.in/reader030/viewer/2022032800/56649d435503460f94a1fea9/html5/thumbnails/42.jpg)
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
![Page 43: Web-based Application Development Lecture 17 March 16, 2006 Anita Raja](https://reader030.vdocument.in/reader030/viewer/2022032800/56649d435503460f94a1fea9/html5/thumbnails/43.jpg)
ITIS 2300 8/24/2003 7:57 PM Copyright © 2003 by N.B. Long43
Pop-Up Menus
Ch12-Ex-08
![Page 44: Web-based Application Development Lecture 17 March 16, 2006 Anita Raja](https://reader030.vdocument.in/reader030/viewer/2022032800/56649d435503460f94a1fea9/html5/thumbnails/44.jpg)
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
![Page 45: Web-based Application Development Lecture 17 March 16, 2006 Anita Raja](https://reader030.vdocument.in/reader030/viewer/2022032800/56649d435503460f94a1fea9/html5/thumbnails/45.jpg)
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
![Page 46: Web-based Application Development Lecture 17 March 16, 2006 Anita Raja](https://reader030.vdocument.in/reader030/viewer/2022032800/56649d435503460f94a1fea9/html5/thumbnails/46.jpg)
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
![Page 47: Web-based Application Development Lecture 17 March 16, 2006 Anita Raja](https://reader030.vdocument.in/reader030/viewer/2022032800/56649d435503460f94a1fea9/html5/thumbnails/47.jpg)
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
![Page 48: Web-based Application Development Lecture 17 March 16, 2006 Anita Raja](https://reader030.vdocument.in/reader030/viewer/2022032800/56649d435503460f94a1fea9/html5/thumbnails/48.jpg)
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
![Page 49: Web-based Application Development Lecture 17 March 16, 2006 Anita Raja](https://reader030.vdocument.in/reader030/viewer/2022032800/56649d435503460f94a1fea9/html5/thumbnails/49.jpg)
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
![Page 50: Web-based Application Development Lecture 17 March 16, 2006 Anita Raja](https://reader030.vdocument.in/reader030/viewer/2022032800/56649d435503460f94a1fea9/html5/thumbnails/50.jpg)
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
![Page 51: Web-based Application Development Lecture 17 March 16, 2006 Anita Raja](https://reader030.vdocument.in/reader030/viewer/2022032800/56649d435503460f94a1fea9/html5/thumbnails/51.jpg)
ITIS 2300 8/24/2003 7:57 PM Copyright © 2003 by N.B. Long51
More on forms …
![Page 52: Web-based Application Development Lecture 17 March 16, 2006 Anita Raja](https://reader030.vdocument.in/reader030/viewer/2022032800/56649d435503460f94a1fea9/html5/thumbnails/52.jpg)
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