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

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

if (…) { statement(s) }

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

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

“Today is Friday and we’re in class”

Today is Friday

AND T F

We’re in

“Today is Friday or we’re in class”

Today is Friday

OR T F

We’re in

“Today is Friday”

Today is Friday

NOT TF

Using “not”

var found

searchDatabase(found)

if (found)

alert(“Found it”)

alert(“Item not found”)

Using “not”

var found

if (found==true)

Using “not”

var found

if (! found)

Using “not”

var found

if (found == false)

Using “not”

var found

if (found != true)

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:

<input type=“radio” name=“sodaRB” />Pepsi<br/>

<input type=“radio” name=“sodaRB” />Sprite<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:

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

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

Documents

ANNUAL LEVAN LECTURE REIMAGINING EQUALITY€¦ · ANITA HILL . Anita Hill is a Professor of Social policy, Law and Women’s studies at Brandeis University and the author of several

The Raja Todar Mal Memorial Plenary Lecture of Historical... · The Raja Todar Mal Memorial Plenary Lecture ... also in Tamilnadu. Figure 1. ... landscapes and settlement systems

healthyhowrah.org · 2021. 1. 7. · name of the block amta-i amta-i anita-i anita-i amta-i anita-i amta.i anita-i amta-i amta-i anita-i anita-i anita-i anita-i amta-i amta.i anita-i

Web-based Application Development Lecture 19 March 23, 2006 Anita Raja

Web-based Application Development Lecture 14 February 23, 2006 Anita Raja

Raja Raja Chola I-PDF

Web-based Application Development Lecture 12 February 16, 2006 Anita Raja

BORNEO MANUSCRIPT STUDIES SCHOLARSHIP Kerja/Kertas Kerja 2019/HARI KEDUA/BORNEO... · Hikayat Raja-Raja Melayu •Jaringan Islam Nusantara dalam Hikayat Raja-Raja Pasai •Borneo

Meta-Level Control in Multi-Agent Systems Anita Raja and Victor Lesser Department of Computer Science University of Massachusetts Amherst, MA 01002

RAJA HARIA, RAJA & RAJA › pdf › Raja-Raja-Waterproofing-P-Ltd.pdf · PUBLISHED FROM BANGALORE RAJA HARIA, CEO IN MY OPINION Ashish R. Puravankara, Managing Director, Puravankara

Kerajaan, Perjanjian- Perjanjian & Kanon Perjanjian Lama...Di dalam dunia kuno, raja-raja hebat seperti Firaun di Mesir, raja-raja Het yang berpengaruh, atau para raja Asyur akan memperluas

Anita Raja, Mohammad Rashedul Hasan, Shalini … of North Carolina at Charlotte ... does not display a currently valid OMB control number. 1. REPORT DATE ... Automation systemAuthors:

SOH, IGNOUignou.ac.in/userfiles/MA ENGLISH SYLLABUS.pdf · SOH, IGNOU Director (SOH) ... Raja Rao: Kanthapura Block IV: Anita Desai: Clear Light of Day ... An Introduction to Australian

Web-based Application Development Lecture 5 January 24, 2006 Anita Raja

CS540 Software Design Lecture 8 1 Lecture 8: Structured Design Anita S. Malik anitamalik@umt.edu.pk Adapted from Schach (2004) Chapter 13 and Appendix

Web-based Application Development Lecture 9 February 7, 2006 Anita Raja

Genetic Algorithms Team Members for Presentation 1.Durga Mahesh Arikatla 2.Rajiv Raja 3.Manikant Pachineelam 4.Kannan Dhanasekaran Professor: Dr. Anita

Web-based Application Development Lecture 18 March 21, 2006 Anita Raja

Lecture 13: Object- Oriented Concepts Anita S. Malik anitamalik@umt.edu.pk Adapted from Schach (2004) Chapter 7

1 LECTURE 5 THE USES OF IMAGES IN MULTIMEDIA Prepared by Cik Nor Anita Fairos bt Ismail