The whip and rope are necessary,
Else he might stray off down some dusty road.
Being well trained, he becomes naturally gentle.
Then, unfettered, he obeys his master.
What is the sound of one hand clapping?
Several decades ago, I was reading about Zen and pondering this koan. My then three year old daughter was on the other side of the room on the floor playing with blocks. Suddenly, she burst into laughter, brimming with delight at the structure she’d created - unaware that I was even in the room.
I heard that sound again the first time my little JavaScript created a new window out of my formerly vanilla web page. Remember, JavaScript is an Object Oriented language, and its Object is nothing short of the Browser itself. With JavaScript, you can 'pop-up' just about any kind of window you can conceive. These windows will be the principle focus of this tutorial [you're looking at one right now]. Like our oxherder's bull, JavaScript is already on a tether - near the point where it becomes gentler and more obedient.

Creating Windows in JavaScript:
This page you're viewing was created by a JavaScript function on the main page that looks like this:

/* Load a page into a sized Browser window */
function loadSession(page){
    var winSize;
    if (navigator.appName.toLowerCase() == 'netscape'){
          winSize = "scrollbars=yes,";
          winSize+= "status=yes,width=600,height=400"}
    else {winSize = "menubar=yes,scrollbars=yes,";
          winSize+= "status=yes,width=600,height=400"}
    msg = open(page,"Session",winSize)}
which uses the Window Object's method - open().

Syntax: windowName = open(URL,windowTargetName,windowOptions) where:
windowName is the variable that refers to the window
windowURL is the address of the page to open in the window e.g. "zen_05.html"
[to open a new empty page, use ""]
windowTargetName is the name used in the html tags to refer to this window
windowOptions is a string that defines the window's features [see loadSession()].
  • menubar
  • toolbar
    • Windows, Windows, Windows:
    We're about to start throwing windows all over the screen. Be sure to close the ones from each example before going to the next. Otherwise, it's going to get beyond messy. The key icon on this page will let you see the functions that create the windows.
  • directories
  • location
  • scrollbars
  • status
  • resizable
  • width
  • height

Pop-up Window Examples
This is the simplest of windows containing a page from this computer.
This is a 'full service' browser connected to Yahoo!
This is a window whose contents were created in a JavaScript function.
Type some text into the text box below prior to activating the window.

The four windows illustrate the amount of control JavaScript gives you over browser windows. Windows 1 and 2 are self explanatory. Window 3 is something different. The browser window contains a page written completely by a JavaScript function. Consider the code on the right. It completely defines an html page. Now look at the function windowThree(). You can quickly see that the illustrated web page is embedded in the JavaScript. Window 4 is also a JavaScript written page, but adds the ability to communicate from 'parent' window to 'child' window and vice versa.

document is a 'property' of the Windows Object. It's also an object itself - it's the part of the window you 'write on'. In Windows 3 and 4, we use several methods of the Document Object.

windowName.document.write(windowString)
says "Write the string windowString to the document in windowName".
windowName.document.close()
says "Close the document in windowName". If you leave this off, the page may display incompletely.
The trick is to remember to use a different set of quotation marks inside the written string [see windowFour() - the 'onLoad' line].

Communication among Windows:

  1. Parent to Child: If you look at the function windowFour(), the opening textarea tag is followed by the line:
    win4.document.write(document.winExample.winText.value);
    which takes the text in the textarea of the parent window and writes it to the child window document inside the child's textarea tags. This is a general strategy for going from parent to child.

  2. Child to Parent: This is a bit more mystical. Look at the line in the function windowFour() that says:
    if (win4.opener == null) { win4.opener = self; }
    Notice that it comes right after the win4 window is created. It says, "Add a 'property' named opener to the new window [win4] unless it already exists. Set it equal to 'self' [a reference to the window that created win4]". Modern browsers set .opener automatically. 1
    Now look at the line that writes the button Update tag. It says, "When you click the Update button, pass the text in the textarea of the child to the textarea of the parent ['opener' references the parent window]". Complicated? yes! Masterable? With meditation.

There is great power here. We'll not elaborate on the details. You can easily create communicating dialogs, all sorts of web browsing utilities, text and graphics displays, etc. We'll show some in the next tutorial.