Pop-up Windows and Error Checking with JavaScript

Abstract

The first lab on JavaScript considered three topics related to processing within Web pages:

1. events, user actions that trigger processing within a Web page,
2. JavaScript, a programming language that provides a mechanism to respond to user events, and
3. background colors, colors that provide a general appearance to a page or page segments.

This lab introduces two additional topics:

4. pop-up windows, new windows that present information or other Web pages to the user, and
5. error checking, the use of JavaScript to check input provided by users for mistakes.

Pop-up Windows

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.

1. 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:

   1. When the page loads.
   2. When you click the link "view lab instructions through this link".
   3. When you move the mouse onto the box with the caption "Enter some text here" (be sure to wait a little while to determine if anything happens).
   4. When you move the mouse from the "text here" box to the white space to its right (again wait a little).
   5. When you move the mouse into the box with the caption "Enter a number here".
   6. When you move the mouse from the "number here" box to the white space to its right.
   7. When you move the mouse into the box with the caption "pick a background color here".
   8. When you move the mouse from the "background color" box to the white space to its right.
   9. When you click the button labeled "Submit Data" (before you have typed data into the text and number boxes).
   10. After you fill in text in the first box (but not in the number box), and then click "Submit Data".
   11. After you fill in text in the first box, a number in the second box, and then click "Submit Data".

2. 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.

Pop-up Windows without JavaScript

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.

3. 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?

   Note that the phrase target="_blank" does not use JavaScript in any way.

Pop-up Windows with JavaScript

JavaScript includes a function window.open that opens a new window with a given URL. window.open also gives the window a name. Subsequent references to that name open various URLs in the same window. Within sample-form-js-2.html, the JavaScript function window.open is referenced in an openWin function that is referenced by several events.

4. 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.

5. 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.

6. 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).

7. 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.

8. Suppose an individual wanted to inhibit pop-up windows that show new Web pages. Based upon your experience, to what extent could the individual accomplish this goal by turning off JavaScript within a browser?

Error Checking

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".

9. Identify what event and handler are specified in connection with this input box.

10. 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();
    

    1. What does theField refer to in this context? Explain how you know.
    2. What does theField.value refer to?
    3. Explain what theField.value.toLowerCase() does.
    4. Suppose you simplify the above line by leaving off the left hand part. That is, replace the above line by

       
          theField.value.toLowerCase();
       

       Describe what happens and why.
    5. Restore the full line

       
          theField.value = theField.value.toLowerCase();
       

       and explain the purpose of the left hand part: theField.value =.
    6. Strings in JavaScript have a method toUpperCase(). Use this method instead within adjustText. Does this do what you expect? Explain briefly.

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.

11. Edit the text for each error message, so some other text is displayed.

12. 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".

13. 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.

Work To Be Turned In

• Copies of the file sample-form-js-2.html for steps 6, 11-12.
• Explanations/descriptions for steps 1, 3, 4-5, 7-8, 9-10, 13.

created 17 January 2005 last revised 10 May 2005