Newsletter sign-up
View all newsletters

Enterprise Java Newsletter
Stay up to date on the latest tutorials and Java community news posted on JavaWorld

Sponsored Links

Optimize with a SATA RAID Storage Solution
Range of capacities as low as $1250 per TB. Ideal if you currently rely on servers/disks/JBODs

JavaWorld.com > Java Development Tools >

Using JavaScript's built-in objects

How to use JavaScript's built-in objects Date, Math, String, Array, and Object

By Gordon Mccomb, JavaWorld.com, 05/01/96

  • Print
  • Feedback
.

Page 7 of 7

<HTML><HEAD>
<TITLE>Color Database</TITLE>
<SCRIPT LANGUAGE="JavaScript">
Idx = new Object();
Data = new Object();
 
Idx[0]=10
Idx[1]="aliceblue"
Idx[2]="antiquewhite"
Idx[3]="aqua"
Idx[4]="aquamarine"
Idx[5]="azure"
Idx[6]="beige"
Idx[7]="bisque"
Idx[8]="black"
Idx[9]="blanchedalmond"
Idx[10]="blue"
 
Data[1]="f0f8ff"
Data[2]="faebd7"
Data[3]="00ffff"
Data[4]="7fffd4"
Data[5]="f0ffff"
Data[6]="f5f5dc"
Data[7]="ffe4c4"
Data[8]="000000"
Data[9]="ffebcd"
Data[10]="0000ff"
 
function checkDatabase() {
        var Found = false;
        var Item = document.testform.color.value.toLowerCase();
        for (Count = 1; Count <= Idx[0]; Count++) {
                if (Item == Idx[Count]) {
                        Found = true;
                        alert ("The hex triplet for '" + Item + "' is #" +
                                Data[Count]);
                        break;
                }
        }
        if (! Found)
                alert ("Sorry, the color '" + Item +"' is not listed in the database.");
 
}
</SCRIPT>
<FORM NAME="testform" onSubmit="checkDatabase()">
Specify a color name, then click the "Find" button to see its hex triplet: <BR>
<INPUT TYPE="text" NAME="color" Value="" onClick=0> <P>
<INPUT TYPE="button" NAME="button" Value="Find" onClick="checkDatabase()">
</FORM>
</BODY></HTML>

JavaScript's associative arrays can come in handy when creating databases. Associative array names are synonymous with the object's property names. With this feature you can simplify the color database script by defining a single object -- named Idx -- for the colors. Then use the names of the colors as the property names, defined as Idx["colorname"]. Each property is assigned the equivalent hexadecimal color value. For example, the property Idx["aliceblue"] -- which is the functional equivalent to the syntax Idx.aliceblue -- is assigned the hex value f0f8ff.

In the revised color database example, the user types a color name, which doubles as a property name for the Idx object. An if expression determines whether the Idx object contains a property with that name. If the return value is "<undefined>" then no such property exists, and therefore the color is not listed in the database. If the value is something else, it is assumed to be the hex value of the specified color, and that value is displayed in an alert box. 

<HTML>
<HEAD>
<TITLE>Another Color Database</TITLE>
<SCRIPT LANGUAGE="JavaScript">
Idx = new Object();
Idx["aliceblue"] = "f0f8ff"
Idx["antiquewhite"] ="faebd7"
Idx["aqua"] ="00ffff"
Idx["aquamarine"] ="7fffd4"
Idx["azure"] ="f0ffff"
Idx["beige"] ="f5f5dc"
Idx["bisque"] ="ffe4c4"
Idx["black"] ="000000"
Idx["blanchedalmond"] ="ffebcd"
Idx["blue"] ="0000ff"
 
function checkDatabase() {
        var Item = document.testform.color.value.toLowerCase();
        if ("" + Idx[Item] == "<undefined>")
                alert ("Sorry, the color '" + Item +"' is not listed in the database.");
 
        else
                alert (Idx[Item])
}
</SCRIPT>
<FORM NAME="testform" onSubmit="checkDatabase()">
Specify a color name, then click the "Find" button to see its hex triplet: <BR>
<INPUT TYPE="text" NAME="color" Value="" onClick=0> <P>
<INPUT TYPE="button" NAME="button" Value="Find" onClick="checkDatabase()">
</FORM>
</BODY></HTML>

Conclusion

At first blush, JavaScript's army of objects can be dizzying. But many of these objects are highly specialized, and seldom used in a the typical JavaScript application. JavaScript's built-in objects are a different breed. Because they do not depend on the content of any given page, JavaScript's built-in objects -- Date, Math, String, Array, and Object -- tend to be heavily used in most any script. Mastery of these objects goes a long way to writing the coolest JavaScript applications possible.

About the author

Gordon McComb is an author, consultant, and lecturer. He has written 50 books and over a thousand magazine articles during his 20 years as a professional writer. More than a million copies of his books are in print. Gordon also writes a weekly syndicated newspaper column on computers, reaching several million readers worldwide. Gordon's latest book is The JavaScript Sourcebook, forthcoming from Wiley Computer Publishing.

Read more about Tools & Methods in JavaWorld's Tools & Methods section.

  • Print
  • Feedback