Platinum Edition Using HTML 4, XML, and Java 1.2:Manipulating Windows and Frames with JavaScript

To access the contents, click the chapter and section titles.

Platinum Edition Using HTML 4, XML, and Java 1.2
(Publisher: Macmillan Computer Publishing)
Author(s): Eric Ladd
ISBN: 078971759x
Publication Date: 11/01/98

Table of Contents

Asking the User for Input with the prompt Method

Listing 20.8 shows the window.prompt() method, which enables you to get a single line of input from your user. You can use this to ask users for their names, email addresses, URLs, or anything else that can be entered in a single line. It is also possible with this method, as shown in Figure 20.8, to include a default answer with the prompt() method.

Listing 20.8 Prompt.htm—The User Can Enter any Single Line of Input in the Prompt

<HTML>
<HEAD>
<TITLE>Prompt.htm</TITLE>
</HEAD>
<BODY BGCOLOR=#FFFFFF>
<CENTER>
<H1>Prompt Method Example</H1>
<HR>
<FORM NAME="MyForm">
Result of <U>prompt</U> method: <INPUT TYPE=TEXT NAME="MyText" SIZE=30>
</FORM>
<HR>
</CENTER>
<ADDRESS>
Jim O’Donnell, <A HREF="mailto:odonnj@rpi.edu">odonnj@rpi.edu</A>
</ADDRESS>
<SCRIPT LANGUAGE="JAVASCRIPT">
<!-- Hide script from incompatible browsers! -->
res = window.prompt("The prompt method of the window " +
   "object enables you to ask the user for input; you can " +
   "also specify a default input, such as URL of my home " +
   "shown below.",<http://www.rpi.edu/~odonnj>")
document.MyForm.MyText.value = res
//   Hide script from incompatible browsers! -->
</SCRIPT>
</BODY>
</HTML>

FIGURE 20.8 Using the window.prompt() method’s simple dialog box makes it easy to get simple input from your user.

Filling Your Windows I: The location Object

Instead of specifying a URL in the window.open() method, you have several other ways to specify the contents of a new window object. The first of these ways is the simplest of the two: by using the new window’s location object. Referring to the first example in this chapter, for instance, instead of specifying Form1.htm as the first argument of the window.open() method, you could do the same thing by using the following after the new window is created:

self.MyWindow.location.href = “Form1.htm”

Filling Your Windows II: The document Object

A second way of specifying content for new windows—or for your original Web browser window, for that matter—is by using methods of the document object. The following document object methods are used to create content within an HTML document:

• document.open()— The open() method is used to open the document for writing. If the method is used within an existing Web page, the content created will replace the current contents.

• document.write() or document.writeln()—Each of these methods is used to write HTML code into the currently opened document. If these statements are encountered while the current document is being loaded—in the following example, the document is already open—the content they generate will be included along with the other contents of the page.
If these methods are used after the current document has been opened, but without a preceding document.open() method, they will generate an error. If the document.open() method is used, all the content generated will replace the current contents.
The only difference between the write() and writeln() method is that the writeln() method includes a new line after the content. This does not affect the HTML generated, but makes it easier to view.

• document.close()— This method closes and causes to be displayed a document opened using the document.open() method.

Listing 20.9 shows WindowJS.htm. This HTML document reproduces the first example shown in this chapter (shown in Listings 20.1 and 20.2) with only one file. Instead of loading a second HTML document into the new window, the document.write() method is used to dynamically generate the HTML to be displayed. The results of this file are identical to that shown in Figure 20.1, except that the title and heading are changed.

Listing 20.9 WindowJS.htm—HTML Documents Can Be Generated On-the-Fly

<HTML>
<HEAD>
<TITLE>WindowJS.htm</TITLE>
</HEAD>
<BODY BGCOLOR=#FFFFFF>
<CENTER>
<H1>Window Example #5</H1>
<HR>
</CENTER>
<ADDRESS>
Jim O’Donnell, <A HREF="mailto:odonnj@rpi.edu">odonnj@rpi.edu</A>
</ADDRESS>
<SCRIPT LANGUAGE="JAVASCRIPT">
<!-- Hide script from incompatible browsers! -->
MyWindow = window.open("","MyWindow",
   "toolbar=no,location=no,directories=no,status=no," +
   "menubar=no,scrollbars=no,resizable=no," +
   "width=475,height=155")
str = "<HTML>" +
      "<HEAD>" +
      "<TITLE>Form1.htm</TITLE>" +
      "</HEAD>" +
      "<BODY BGCOLOR=#FFFFFF>" +
      "<CENTER>" +
      "<TABLE WIDTH=95% BORDER>" +
      "<FORM NAME=’MyForm’>" +
      "<TR><TD><B>Form Element Type</B></TD>" +
      "    <TD><B>Name</B></TD>" +
      "    <TD>&nbsp;</TD></TR>" +
      "<TR><TD><B>TEXT</B> Element</TD>" +
      "    <TD><I>MyText</I></TD>" +
      "    <TD><INPUT TYPE=’TEXT’ NAME=’MyText’></TD></TR>" +
      "<TR><TD><B>CHECKBOX</B> Element</TD>" +
      "    <TD><I>MyCheckBox1</I></TD>" +
      "    <TD><INPUT TYPE=’CHECKBOX’ NAME=’MyCheckBox1'></TD></TR>" +
      "<TR><TD><B>CHECKBOX</B> Element</TD>" +
      "    <TD><I>MyCheckBox2</I></TD>" +
      "    <TD><INPUT TYPE=’CHECKBOX’ NAME=’MyCheckBox2'></TD></TR>" +
      "<TR><TD><B>CHECKBOX</B> Element</TD>" +
      "    <TD><I>MyCheckBox3</I></TD>" +
      "    <TD><INPUT TYPE=’CHECKBOX’ NAME=’MyCheckBox3'></TD></TR>" +
      "</FORM>" +
      "</TABLE>" +
      "</BODY>" +
      "</HTML>"
self.MyWindow.document.open()
self.MyWindow.document.write(str)
self.MyWindow.document.close()
//   Hide script from incompatible browsers! -->
</SCRIPT>
</BODY>
</HTML>

Table of Contents

Products | Contact Us | About Us | Privacy | Ad Info | Home

Use of this site is subject to certain Terms & Conditions, Copyright © 1996-2000 EarthWeb Inc.
All rights reserved. Reproduction whole or in part in any form or medium without express written permission of EarthWeb is prohibited. Read EarthWeb's privacy statement.