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

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



Conditional statementPoses a question that isUnambiguously true or false thenExecutes one set of statements if true andOptionally executes a different set if false



Basic syntax (pseudocode):

if some condition

is true execute these statements

otherwise

execute these statements

Optional



JavaScript syntax:

if (…)

{

…

}

KeywordConditional statementStatement(s) to be executed if condition

is true

Defines block

Defines conditional statement



The question involves a comparison defined by a relational operator

var result = 12…if ( result == 12 ) {…}

Equality operator – a test

Assignment operator – an action



Ch12-Ex-01



Relational Operators

Symbol Meaning

< Less than

> Greater than

<= Less than or equal to

>= Greater than or equal to

!= Not equal to

== Equal to



Condition syntax:

operand operator operand

variable operator variable

result1 <= result2

variable operator constant

result1 != 12



Program flow

statement x

statement y

if (condition is true)

statement a

statement z



Program flow

statement x

statement y

if (condition is false)

statement a

statement z



One way or another, statement z is being executed

statement x

statement y

if (condition is false)

statement a

statement z

if statement



Ch12-Ex-02



JavaScript syntax (optional):

if (…) statement

or

if (…) { statement(s) }

or

if (…) {

statement(s)

}



JavaScript syntax (optional):

if (…) {…}else {…}

if clause

else clause



Ch12-Ex-03



Compound conditionalsif (…) {…}else if (…) {…}



Ch12-Ex-04



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


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



Nested conditionalsif (firstNum > 12) { if (secondNum < 25) { alert(“Number is between 12 and 25”) }}else { alert(“The number is out of bounds”)}statement x


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



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



Logical operators

if ( (firstNum > 12) && (secondNum < 25) ) {

alert(“Number is between 12 and 25”)

}

else {

alert(“The number is out of bounds”)

}

statement x



Truth tables

Prop. 1

(type) T F

Prop. 2T

F



“Today is Friday and we’re in class”

Today is Friday

AND T F

We’re in

class

T

F

T F

F F



“Today is Friday or we’re in class”

Today is Friday

OR T F

We’re in

class

T

F

T T

T F



“Today is Friday”

Today is Friday

T F

NOT TF



Using “not”

var found

searchDatabase(found)

if (found)

alert(“Found it”)

else

alert(“Item not found”)



Using “not”

var found


if (found==true)


else




Using “not”

var found


if (! found)


else




Using “not”

var found


if (found == false)


else




Using “not”

var found


if (found != true)


else



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


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


Check Boxes

Check boxes include an onclick event Ch12-Ex-06


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


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

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


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


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


Pop-Up Menus

Ch12-Ex-08


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 we’ll add:Some explanatory textA button to invoke a functionA function to do something when you select a

menu item 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


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:The value attribute to hold URLs for each

optionThe onchange event handler for the select

element Ch12-Ex-13


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


More on forms …


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

Documents

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