Learn Advanced JavaScript Programming

Table of Contents

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

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

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

This function is very similar to the drawRow() function. The only difference is that it draws a 6 x 6 table, instead of a 6 x 1 row. It calls the drawRow() function six times, each time with a different red descriptor. All table attributes are set to 0 in order to avoid boundaries between the cells, making the impression of gradually changing colors across the cube.

drawCube()

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

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

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

  // close current table cell
  document.write('</TD>')
 }

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

Unlike all other functions, this one does not accept any arguments. It creates the outline table of a single six-cell row with a white background color. The function calls drawTable() six times, once for each given blue descriptor. Setting the CELLPADDING attribute to a positive number separates the tables between themselves.

Another classic example that takes advantage of the ability to set background colors via JavaScript is a script that creates a fade-in or fade-out effect when the page is loaded or unloaded. Here is the script:

<HTML>
<HEAD>
<TITLE>Fade in and out</TITLE>
<SCRIPT LANGUAGE="JavaScript">
<!--

// convert decimal value (0 - 255) to hexadecimal
// (use .toString(16) method supported by IE)
function toHex(dec) {
 // create list of hex characters
 var hexCharacters = "0123456789ABCDEF"

 // if number is out of range return limit
 if (dec < 0)
  return "00"
 if (dec > 255)
  return "FF"

 // decimal equivalent of first hex character in converted number
 var i = Math.floor(dec / 16)

 // decimal equivalent of second hex character in converted number
 var j = dec % 16

 // return hexadecimal equivalent
 return hexCharacters.charAt(i) + hexCharacters.charAt(j)
}

// set background color to specified descriptors
function setbgColor(red, green, blue) {
  document.bgColor = "#" + toHex(red) + toHex(green) + toHex(blue)
}

// fade from start to end descriptors (increase step to increase
   transition speed)
function fade(sred, sgreen, sblue, ered, egreen, eblue, step) {
 // loop to create fade effect
 for(var i = 0; i <= step; ++i) {
  // set current red descriptor
  var red = Math.floor(sred * ((step – i) / step) + ered *
  (i / step))
  // set current green descriptor
  var green = Math.floor(sgreen * ((step – i) / step) + egreen *
 (i / step))

  // set current green descriptor
  var blue = Math.floor(sblue * ((step – i) / step) + eblue *
 (i / step))

  // set background color according to descriptors
  setbgColor(red, green, blue)
 }
}

// -->
</SCRIPT>
</HEAD>
<BODY onLoad="fade(0, 0, 0, 255, 255, 255, 64)" onUnload="fade(255,
255, 255, 0, 0, 0, 64)">
<H1>Hello net!</H1>
</BODY>
</HTML>

Example 21-2 (ex21-2.htm). A script to create a fade effect.

The script gradually changes the document’s background color from a given color to another specified color. It works with any colors represented in a hexadecimal triplet format. Let’s analyze the script.

toHex(dec)

// convert decimal value (0 - 255) to hexadecimal
// (use .toString(16) method supported by IE)
function toHex(dec) {
 // create list of hex characters
 var hexCharacters = "0123456789ABCDEF"

 // if number is out of range return limit
 if (dec < 0)
  return "00"
 if (dec > 255)
  return "FF"

 // decimal equivalent of first hex character in converted number
 var i = Math.floor(dec / 16)

 // decimal equivalent of second hex character in converted number
 var j = dec % 16

 // return hexadecimal equivalent
 return hexCharacters.charAt(i) + hexCharacters.charAt(j)
}

This function accepts a single argument representing a decimal number, normally between 0 and 255. It converts it to its hexadecimal equivalent. At first, a list of the hexadecimal digits is assigned to the string variable hexCharacters. It returns the minimum 00 string, if the decimal argument is less then 0, and the maximum FF, if the decimal argument is greater than 255, “FF”’s equivalent in hex representation. The value Math.floor(dec / 16) is equal to the decimal representation of the first hexadecimal digit in the converted number. The value Math.floor(dec % 16) is equal to the decimal value of the second hex digit of the converted number. The hexadecimal value of a decimal number between 0 and 15 is that hexCharacter’s character, the index of which is equal to the decimal number.

setbgColor(red, green, blue)

// set background color to specified descriptors
function setbgColor(red, green, blue) {
  document.bgColor = "#" + toHex(red) + toHex(green) + toHex(blue)
}

This function accepts three RGB descriptors and assigns the color combination to the document.bgColor property, setting the document’s background color. The arguments are in decimal notation, so first they are converted to hex numbers.

Table of Contents