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

Web-based Application Development

Lecture 18March 21, 2006

Anita Raja

Agenda

Schedule Exam PTW Chapter 13

Exam Review List some ways to improve a site’s performance for

users who have low bandwidth connections. Reduce # of images Compress images(thumbnails) Use text for navigation

Why do sound and video files need to be compressed for use on a Web page? Takes too long to download

List at least three ways to define the audience for a Web site. Age, gender, geography,income, education, race,

interest, web history

Exam Review What elements of a site should be tested during technical testing?

Browser, platform compatibility, bandwidth limitations How is text displayed, do images align with each other, are

tables and frames arranged properly, Are sound, video anim, handled properly

What are the five navigation questions that each page must answer for users?

Whose site, where am I within the site, what else is avialable from this site, where should I go next, how do I get there, how do I find whatever I’m looking for

Explain why scrolling is an important consideration in Web design. Capture all related info in one page Inefficient process (too many steps), web pages like TV not

newspaper.

Frameset document<html><head> <title> Linking between frames </title></head><frameset rows=”25%, 75%”><frame src= “TableOfContents.htm” id= “topframe” name=“topframe”></frame><frameset columns=”50%, 50%><frame src= “Intro.htm” id= “bottomleftframe” name=“bottomleftframe”></frame><frame src= “PicsList.htm” id= “bottomrightfframe”

name=“bottomrightframe”></frame></frameset></frameset></html>

TableOfContents.htm document<html><head></head><body><p> Table of Contents: </p><p> <a href= “Doc1.htm” target= “bottomrightframe”> Click here to view document 1 in

the bottom right frame </a></p><p> <a href= “Doc2.htm” target= “bottomleftframe”> Click here to view document 2 in

the bottom left frame </a></p></body></html>

<html><head><title> Parameter Example </title><script type = “text/javascript”> function displayMessages(msg1,msg2,msg3){ alert(msg3); alert(“The first message is :” + msg1) alert(“The second message is” + msg2) }</script></head><body>This is a sample page that uses Javascript, parameters and forms. <br /><script type= “text/javascript”> displayMessages(“Ready?”, “Let’s go”, “Not yet”)</script><form id=“number1”> <input type=“button” value= “Click here to see some more messages” onclick= “displayMessages(‘Here we go again’, ‘What did you say?’, ‘Time to go’)”

/></form></body></html>

Pop-Up Menus Quick links menus can be created

using: The value attribute to hold URLs for

each option The 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

Programming the Web using XHTML and JavaScript

Chapter 13Loops and Arrays

Repetitive Code

Problem: the same code is repeated over and over but with minor changes

How can this be implemented? A series of conditional statements …

Consider a number of questions Meyers-Briggs personality test

Each of which has three possible responses

Repetitive Code

var scoreA=0, scoreB=0, scoreC=0if (document.question1.choiceRB[0].checked) { scoreA=scoreA+1 }else if (document.question1.choiceRB[1].checked) { scoreB=scoreB+1 }else if (document.question1.choiceRB[2].checked) { scoreC=scoreC+1 }

Repetitive Code Conditional statements

Take up a lot of room Offer multiple opportunities for typos Are hard to change later

Is there a better alternative? Yes, loops

A programming construct that controls the repetition of code

Three Types of Loops for loop Repeats a set of instructions for a

number of times Basic syntax (pseudocode)

for (some number of times) { execute this set of instructions}

Three Types of Loops

“Some number of times” is the hard part

JavaScript syntax:var ctrfor (ctr=1; ctr<=5; ctr=ctr+1) { …}

Starting value

Counter

Continuing condition

Incrementing instruction

Three Types of Loops Sequence of events:

1. Set ctr to 12. Is ctr<=5?3. If so, execute statements then continue at step 4.

If not, exit loop and execute statement at step 7.4. Increment ctr by adding the increment value5. Is ctr<=5?6. If so, execute statements then continue at step 4.

If not, exit loop and execute statement at step 7.7. Next statement following for block

var ctrfor (ctr=1; ctr<=5; ctr=ctr+1) { [statements to be executed]}


Ch14-Ex-01.html


Don’t have to start at one, any value will do:var ctrfor (ctr=-27; ctr<=5; ctr=ctr+1) { …}


Can decrement also:var ctrfor (ctr=5; ctr>1; ctr=ctr-1) { …}


Can increment or decrement by values other than onevar ctrfor (ctr=1; ctr<=100; ctr=ctr+5)

{ …}

Three Types of Loops Tips for for loops

It’s for not For Separate statements with semicolons:

for (ctr=1; ctr<=5; ctr=ctr+1) { … } ctr is not special, any variable can be used Remember the global/local nature of the

counter The value of the counter when the loop

completes is not necessarily the “stop” value


while loop Continues execution as long as a

condition is true Good for situations where you

don’t know exactly how many times the loop should be executed


Basic syntax (pseudocode)while (some condition is true) { execute these statements}

Read“as long as”


Unlike a for loop, a while loop: Has no starting value Has no increment instruction

The continuing condition is tested at the beginning of the loop

Three Types of Loops Because there is no starting

condition or increment instruction the programmer must supply them:var ctr=0while (ctr<=3) { ctr=ctr+1 alert(“The counter is “+ctr)}

Three Types of Loops Sequence of events:

1. Set ctr to 02. Is ctr<=3?3. If so, increment ctr by one, execute the alert

statement then continue at step 2. If not, exit loop and execute statement at step 4.

4. Next statement following while block

Ch14-Ex-03.html

var ctr=0while (ctr<=3) { ctr=ctr+1 alert(“The counter is “+ctr)}


Infinite loops – repeat forevervar ctr = 0while ( ctr<2 ) { … ctr = ctr - 2}


Another infinite loopvar ctr = 0while ( ctr<2 ) { …}ctr = ctr + 1


Another infinite loopvar ctrfor ( ctr=1; ctr<5; ctr++ ) { … ctr = 3}

Three Types of Loops do-while loop Like while except test is at end

instead of at beginning Basic syntax (pseudocode)

do { these statements} while (some condition is true)


do-while is useful if you always want to execute the loop statements at least once

Arrays Single variables have limited

usefulness Sometimes many of the same

“type” of data need to be stored: Students Scores Questions, etc.

The programming construct suited for this purpose is an array

Arrays

Arrays are compound variables organized as an ordered collection of data

The collection itself has a name The individual data items (“array

elements”) are referred to by an index value

Arrays

Array named sampleArray

Element numbers

43210

“Hi” 39.72 25 true -54.9

sampleArray[0] contains “Hi”

Arrays

Arrays must be created Similar to declaring a variable Syntax (JavaScript):

var sampleArray = new Array(5)

Number of elements in sampleArray

Arrays Array elements are referred to by:

The array name and The element number (or index) enclosed

in square brackets:

sampleArray[0] = “Hi” sampleArray[1] = 39.72 … sampleArray[5] = -54.9

Arrays

There is no implied order in assignment statements

The element number is sufficient

sampleArray[0] = “Hi” sampleArray[1] = 39.72 is equivalent to sampleArray[1] = 39.72 sampleArray[0] = “Hi”

Arrays

The array size can be increased even after the array was constructedsampleArray[6]=false

Arrays

There are two other ways of creating and filling an array

var sampleArray = new Array (“Hi”, 39.72, 25, true, -

54.9)

orvar sampleArray = [“Hi”, 39.72, 25,

true, -54.9]

Arrays

Filling then displaying the contents of an array

Ch14-Ex-05.html

Arrays

An HTML form is like an array There are a certain number of

elements Text boxes Radio buttons Check boxes, etc.

Arrays The following code: <form id=“namesForm” name=“namesForm”> <input type=“text” name=“n1Box” size=“15”> <input type=“text” name=“n2Box” size=“15”> <br/> <input type=“text” name=“n3Box” size=“15”> <input type=“text” name=“n4Box” size=“15”> </form> Creates a form like this:

Arrays

document.namesForm.n1Box.valuedocument.namesForm.n2Box.valuedocument.namesForm.n3Box.valuedocument.namesForm.n4Box.value

Arrays

JavaScript treats a form like an array Each element can be referred to by its

Name or Position in the form

This is the elements array The first element in an array is

element[0], the second is element[1], etc.

Arrays

Ch14-Ex-06.html

Arrays

JavaScript also provides a forms array

Same as an elements array except it numbers the forms in a document

The first form is forms[0], the second form is forms[1], etc.

Ch14-Ex-07.html

Arrays

document.namesForm.elements[0].valuedocument.namesForm. elements[1].valuedocument.namesForm. elements[2].value

document.namesForm. elements[3].value

Assignment Debugging Exercise, p. 421 Correct errors Post corrected document to your Web

space as “Lagerstrom-Ch-14.html” Grade based on:

Appearance Technical correctness of code Proper results

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

Documents