Opening Windows and Frames

Opening a new window is easy. Use the open() method. However, this isn't the same open() method we used for streams. This open method takes two or three variables. The syntax is:

[window_var=] [window].open("URL","window_name", ["window_features"])

The items in brackets are optional.

This first variable is the URL. Just give it a URL string. Pretty easy. Next comes the name of the window. This is a unique identifier of the name of the window. If you specify the name of a window that does not exist, one will be created. If you specify one that does exist, then the URL is sent to that window.

The last part is optional. Here you can specify some special attributes for the window. If you don't specify any attributes, then the window looks like a normal web browser. However, you can set several features of it explicitly. You can change such things as the size, whether or not there is a menubar, etc.

Example:

  <SCRIPT LANGUAGE="JavaScript">
    my_new_window=window.open("","","menubar=no");
    my_new_window.document.write("This is a new window.");
    my_new_window.document.close();
  </SCRIPT>

This will pop up a new web browser without a menubar and print some text to it.

The window_features command can take several options.

toolbar[=yes|no][=1|0]
location[=yes|no][=1|0]
directories[=yes|no][=1|0]
status[=yes|no][=1|0]
menubar[=yes|no][=1|0]
scrollbars[=yes|no][=1|0]
resizable[=yes|no][=1|0]
width=pixels
height=pixels

To specify multiple options, seperate them by commas. The boolean value on the right side can be specified in several ways. The following examples have the exact same effect:

toolbar=yes
toolbar=1
toolbar

As you can see, giving no boolean value is the same as yes.

If you wish to close a window, use the close() method. In our previous example, we opened a window called my_new_window. If we wish to close it, use:

  my_new_window.close();

Pretty simple, eh? If you wish to close the current window, you can use either:

  window.close();

  self.close();

Frames

To create some frames, you need to first create a window. Once you have done that, you need to send the appropriate HTML to that window to create the frames. It'll look a little like this:

  some_new_window=open("","");
  some_new_window.document.write("<html><frameset cols=\"*,*\">>\n",
                                             "<frame src=\"frame1.html\" name=\"frame1\">\n",
                                             "<frame src=\"frame2.html\" name=\"frame2\">\n",
                                             "</frameset></html>");
  some_new_window.document.close();

Now, if you wish to send data to the appropriate frame, you can do:

  some_new_window.frame1.document.open();
  some_new_window.frame1.document.write("I am now writing in frame1.");
  some_new_window.frame1.document.close();

If you wish to close the two frames you just created, you can just write to the parent document. When you call the open() method, this will clear the parent window and remove the <frameset> tags. The result is that your frames will be clobbered. Example:

  some_new_window.document.open();
  some_new_window.document.write("This is a new document without frames");
  some_new_window.document.close();

The above code just cleared the window (when we called open()) and wrote some text to it, thus removing the frames.

Dialog and Alert Boxes

Dialog and alert boxes are usefull for a variety of purposes. You can use them to get input from the user. You can also use it for debuging purposes.

First, the alert box. The alert box pops up in the middle of the screen with some text. It gives the user an OK box. Example:

alert("That is an invalid value.");

That's it.

The next item is the confirm dialog box. The confirm dialog box is the same as the alert except that it gives an OK and Cancel buttons. Then, it returns true or false corresponding to OK or Cancel respectively. Example:

if(confirm("Would you like to try again?")) {
  document.location="index.html";
}
else {
  quit();
}

The final type of dialog box is the prompt dialog box. The prompt dialog box is the same as the confirm dialog box, but the user can input some data. The prompt() command then returns the value that the user entered. You can optionally specify the default value. The format is:

  prompt(message [, default_value] )

Example:

  username=prompt("Please enter your name.","");

Another example:

  the_value=prompt("Please enter the amount you wish to bet.",0);

It is always recommended that you give it a default value. If you do not specify a default value, then the string "undefined" is placed in the input box which looks really bad.

Return to the Front Page.
Go to the next lesson: Event Handling.