Learn Advanced JavaScript Programming

Table of Contents

<HTML>
<HEAD>
<TITLE>Swatches</TITLE>
</HEAD>
<BODY BGCOLOR="#ffffff">
<SCRIPT LANGUAGE="JavaScript">
<!--

// create 6-element array
var hex = new Array(6)

// assign non-dithered descriptors
hex[0] = "FF"
hex[1] = "CC"
hex[2] = "99"
hex[3] = "66"
hex[4] = "33"
hex[5] = "00"

// accept triplet string and display as background color
function display(triplet) {
 // set color as background color
 self.document.bgColor = '#' + triplet
 // display the color hexadecimal triplet
 self.alert('Background color is now ' + triplet)
}

// draw a single table cell based on all descriptors
function drawCell(red, green, blue) {

 // open cell with specified hexadecimal triplet background color
 self.document.write('<TD BGCOLOR="#' + red + green + blue + '">')
 // open a hypertext link with javascript: scheme to call display
function
 self.document.write('<A HREF="javascript:top.select(\'' + (red + '\',
\'' + green + '\', \'' + blue) + '\')">')
 // print transparent image (use any height and width)
 self.document.write('<IMG SRC="place.gif" BORDER=0 HEIGHT=7
WIDTH=7>')
 // close link tag
 self.document.write('</A>')

 // close table cell
 self.document.write('</TD>')
}
// draw table row based on red and blue descriptors
function drawRow(red, blue) {
 // open table row
 self.document.write('<TR>')

 // loop through all non-dithered color descripters as green hex
 for (var i = 0; i < 6; ++i) {
  drawCell(red, hex[i], blue)
 }

 // close current table row
 self.document.write('</TR>')
}

// draw table for one of six color cube panels
function drawTable(blue) {
 // open table (one of six cube panels)
 self.document.write('<TABLE CELLPADDING=0 CELLSPACING=0 BORDER=0>')

 // loop through all non-dithered color descripters as red hex
 for (var i = 0; i < 6; ++i) {
  drawRow(hex[i], blue)

 }
 // close current table
 self.document.write('</TABLE>')
}

// draw all cube panels inside table cells
function drawCube() {
 // open table
 self.document.write('<TABLE CELLPADDING=0 CELLSPACING=5 BORDER=0>')

 // loop through all non-dithered color descripters as blue hex
 for (var i = 0; i < 6; ++i) {
  // open table cell with white background color
  self.document.write('<TR><TD>')

  // call function to create cube panel with hex[i] blue hex
  drawTable(hex[i])

  // close current table cell
  self.document.write('</TD></TR>')
 }
 // close table row and table
 self.document.write('</TABLE>')
}

// call function to begin execution
drawCube()
// -->
</SCRIPT>
</BODY>
</HTML>

Example 26-2b (ex26-2b.htm). The “swatches” frame displays the Color Cube, consisting of all 216 non-dithering colors.

The “swatches” frame’s document is almost identical to Example 21-1 in Chapter 21. The major differences are as follows:

The self reference was added to precede all objects, methods, and properties of the frame window.
Each face of the Color Cube appears on a distinct table row, so the Color Cube is drawn vertically, in order to match the frame’s physical dimensions.
Each color is a link to the frame-setting document’s select() function. Instead of using one string of six characters as the argument, we invoke the function with three strings of two characters each, one for each descriptor (red, green, and blue).

The “main” Frame

Here is the complete source for the main frame:

<HTML>
<HEAD>
<TITLE>Main</TITLE>
</HEAD>
<BODY onLoad="top.update()">
</BODY>
</HTML>

Example 26-2c (ex26-2c.htm). The “main” frame does not require any content because the frame-setting window dynamically generates its HTML content.

Notice the onLoad event handler which invokes the update() function of the frame-setting document’s script.

Table of Contents

The “swatches” Frame

The “main” Frame