Learn Advanced JavaScript Programming

Table of Contents

<FRAMESET
 ROWS="50, *"
 BORDER="0"
 FRAMEBORDER="no"
 FRAMESPACING="0"
 BORDERCOLOR="#ffffff">
 <FRAME
  NAME="control"
  SRC="ex26-3a.htm"
  NORESIZE
  SCROLLING="no">
 <FRAMESET
  COLS="80, *"
  BORDER="0"
  FRAMEBORDER="no"
  FRAMESPACING="0"
  BORDERCOLOR="#ffffff">
  <FRAME
   NAME="swatches"
   SRC="ex26-3b.htm"
   NORESIZE
   SCROLLING="no">
  <FRAME
   NAME="main"
   SRC="ex26-3c.htm"
   NORESIZE>
 </FRAMESET>
</FRAMESET>
<NOFRAMES>Please download a frames-capable browser!</NOFRAMES>

As you can see, all frames are defined in one frame-setting document. The upper frame is named “control,” the bottom left frame is named “swatches,” and the bottom right frame is named “main.” Their URLs are ex26-3a.htm, ex26-3b.htm, and ex26-3c.htm, respectively. Notice the configurations used to create “borderless” frames.

The “control” Frame

Example 26-2a shows that the upper frame consists of very little JavaScript. The only JavaScript in this document is used to interact with the JavaScript objects in the frame-setting window (self.top or self.parent).

<HTML>
<HEAD>
<TITLE>Control Panel</TITLE>
<SCRIPT LANGUAGE="JavaScript">
<!--

function display() {
 top[top.curAttribute()].display()
}

// -->
</SCRIPT>
</HEAD>
<BODY BGCOLOR="#ffffff" onLoad="self.display()">
<FORM>
<FONT SIZE=2>
<FONT COLOR="#ff0000">R</FONT>:
<INPUT TYPE="text" SIZE=3 VALUE="" NAME="red" onFocus="this.blur()">
<FONT COLOR="#00ff00">G</FONT>:
<INPUT TYPE="text" SIZE=3 VALUE="" NAME="green" onFocus="this.blur()">
<FONT COLOR="#0000ff">B</FONT>:
<INPUT TYPE="text" SIZE=3 VALUE="" NAME="blue" onFocus="this.blur()">
Attribute:
<SELECT NAME="attribute" onChange="self.display()">
<OPTION VALUE="bgcolor">Background
<OPTION VALUE="text">Text
<OPTION VALUE="link">Link
<OPTION VALUE="alink">Active link
<OPTION VALUE="vlink">Visited link
</SELECT>
Save settings:
<INPUT TYPE="button" VALUE="save" onClick="top.save()">
Load settings:<INPUT TYPE="button" VALUE="load" onClick="top.load()">
</FONT>
</FORM>
</BODY>
</HTML>

Example 26-2a (ex26-2a.htm). The “control” frame consists of mostly plain HTML.

display()

function display() {
 top[top.curAttribute()].display()
}

The script in the “control” frame’s document consists of just one function, display(). There is a function named display() in the frame-setting document as well, but due to JavaScript’s object hierarchy, each function is actually a method of a different object. The display() function in the “control” frame document invokes the display() function of the frame-setting document as a method of the selected attribute’s instance. For example, if the selected attribute is “Background color,” the function’s statement is equivalent to:

top.bgcolor.display()

Event Handlers

The “control” frame’s document features an onLoad event handler that invokes the local display() function. This is why the text fields in the upper frame are not empty when you first load the Color Center application. When the user selects a new option, the onChange event handler, associated with the select object, invokes the local display() function.

Notice that the text fields in this frame are read-only, thanks to the onFocus event handler which, whenever the user attempts to gain focus, immediately issues the blur() method to remove focus from the field. This “trick” does not work under IE 3.0x.

Both the Save and the Load buttons feature onClick event handlers which invoke the corresponding functions in the frame-setting document.

Table of Contents