Web-based Application Development Lecture 18 March 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 Linking between frames TableOfContents.htm document Table of Contents: Click here to view document 1 in the bottom right frame Click here to view document 2 in the bottom left frame

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

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 the form to 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 13 Loops 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=0 if (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 ctr for (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 1 2. Is ctr<=5? 3. If so, execute statements then continue at step 4. If not, exit loop and execute statement at step Increment ctr by adding the increment value 5. Is ctr<=5? 6. If so, execute statements then continue at step 4. If not, exit loop and execute statement at step Next statement following for block var ctr for (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 ctr for (ctr=-27; ctr<=5; ctr=ctr+1) { … }

Three Types of Loops Can decrement also: var ctr for (ctr=5; ctr>1; ctr=ctr-1) { … }

Three Types of Loops Can increment or decrement by values other than one var ctr for (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=0 while (ctr<=3) { ctr=ctr+1 alert(“The counter is “+ctr) }

Three Types of Loops Sequence of events: 1. Set ctr to 0 2. 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 Next statement following while block Ch14-Ex-03.html var ctr=0 while (ctr<=3) { ctr=ctr+1 alert(“The counter is “+ctr) }

Three Types of Loops Infinite loops – repeat forever var ctr = 0 while ( ctr<2 ) { … ctr = ctr - 2 }

Three Types of Loops Another infinite loop var ctr = 0 while ( ctr<2 ) { … } ctr = ctr + 1

Three Types of Loops Another infinite loop var ctr for ( 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 “Hi” 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] = … sampleArray[5] = -54.9

Arrays There is no implied order in assignment statements The element number is sufficient sampleArray[0] = “Hi” sampleArray[1] = is equivalent to sampleArray[1] = sampleArray[0] = “Hi”

Arrays The array size can be increased even after the array was constructed sampleArray[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) or var sampleArray = [“Hi”, 39.72, 25, true, ]

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: Creates a form like this:

Arrays document.namesForm.n1Box.value document.namesForm.n2Box.value document.namesForm.n3Box.value document.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].value document.namesForm. elements[1].value document.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