web-based application development lecture 18 march 21, 2006 anita raja
Post on 21-Dec-2015
213 views
TRANSCRIPT
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]}
Three Types of Loops
Ch14-Ex-01.html
Three Types of Loops
Don’t have to start at one, any value will do:var ctrfor (ctr=-27; ctr<=5; ctr=ctr+1) { …}
Three Types of Loops
Can decrement also:var ctrfor (ctr=5; ctr>1; ctr=ctr-1) { …}
Three Types of Loops
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
Three Types of Loops
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
Three Types of Loops
Basic syntax (pseudocode)while (some condition is true) { execute these statements}
Read“as long as”
Three Types of Loops
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)}
Three Types of Loops
Infinite loops – repeat forevervar ctr = 0while ( ctr<2 ) { … ctr = ctr - 2}
Three Types of Loops
Another infinite loopvar ctr = 0while ( ctr<2 ) { …}ctr = ctr + 1
Three Types of Loops
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)
Three Types of Loops
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