|CSC 105||Grinnell College||Spring, 2005|
|An Algorithmic and Social Overview of Computer Science|
This lab introduces two additional topics:
Note: For this lab, you should check that your browser is set to allow pop-up windows to be displayed on your machine. If your browser normally blocks pop-up windows, please enable them for the duration of this lab −− you can block them again after the lab is over.
Pop-up windows appear regularly throughout this lab. When pop-up windows appear, do not close them. Rather resize them and arrange them on you screen, so you can see them throughout these exercises.
As with some previous labs, this lab proceeds by considering an extended example.
Load the page sample-form-js-2.html into your browser; this will likely launch a new browser window or two. In what follows, you should check the contents of each window as well as the what appears in sample-form-js-2.html.
Record what happens in each of the following circumstances:
Save sample-form-js-2.html from your browser to your public_html directory and make this file public. Then load this copy of the page into your browser, and load this page into an editor.
View sample-form-js-2.html in your editor, and find the link for the text "view lab instructions through this link". In this framework, the phrase target="_blank" indicates to the browser that the link should be opened in a new window.
Edit this phrase, perhaps omitting the underscore character _. Then reload sample-form-js-2.html and click on the "view lab instructions" link. Describe what happens.
Edit this phrase to with different target names, reload the page, and click on the same link.
What can you hypothesize about the target phrase for a link and the use of _blank?
Look at sample-form-js-2.html in your editor. Within the body of the html page, identify four events that reference openWin. In each instance, indicate what page is referenced, and match which openWin event matches which action(s) that you observed in Step 1 above.
In each event reference to openWin, the window name TaoLab is specified. What happens if the two references with input boxes are changed from TaoLab to Testing? (Edit the file, reload, and experiment with the new page, following the same approach as in step 1. Be sure to record what happens.) Explain your findings.
Edit sample-form-js-2.html, so that moving the mouse into this box opens the page www.jbpub.com (the home page of Jones and Bartlett Publishers) in the Testing window. (You may want to refer to the previous lab to review the event related to moving the mouse into a box (rather than moving out of the box).
Summarize your experiences from this lab regarding pop-up windows. That is, identify various ways that pop-up windows might be generated, when pages may appear in new windows, and when pages may replace material in an existing window.
Next we consider processing of data that may be entered within input boxes. To begin, we review processing from the previous lab.
Consider the input for the box with the caption, "Enter some text here".
Identify what event and handler are specified in connection with this input box.
When dealing with string data, an operation called the toLowerCase() method examines each character. If the character is an upper-case letter, toLowerCase() translates it to the corresponding lower-case letter. Otherwise, the character is not changed. With this background, explain exactly what happens in the line
theField.value = theField.value.toLowerCase();
theField.value.toLowerCase();Describe what happens and why.
theField.value = theField.value.toLowerCase();and explain the purpose of the left hand part: theField.value =.
Next, we consider processing related to submission of this form. You will note that the form tag contains the phrase, onSubmit="return (Verify(this))". As you might expect, this phrase instructs the browser to use the Verify function when you click "Submit Data". If Verify returns true, then your data are transmitted to the page given by the action field. However, if Verify returns false, then processing continues on this page.
Now look at the Verify function. The heart of this function is three if statements. In each case, material from the form is examined. If a specified condition is met, then the function utilizes an alert statement that tells the browser to pop a box up on your screen with a given message.
Edit the text for each error message, so some other text is displayed.
Add another alert line in the case that nothing has been typed in either box. Then describe what happens when you reload your page, erase any text in the "text" or "number" boxes, and click "Submit Data".
Change the line return false; to return true; for one or more of these test cases. Then describe what happens when you reload your page, erase any relevant text in the "text" or "number" boxes, and click "Submit Data". While you still should get the appropriate alert box, describe whether or not processing stays on this page. That is, does "Submit Data" now take you to the new page? Explain why you think this happens.
created 17 January 2005
last revised 10 May 2005