Intranet Journal

Putting JavaScript to Work
JS/Configurator: A Computer Cost Estimator

Page 1 2 3

Creating the Back-end

Defining Variables:

Let's proceed step-by-step to create the processing logic for the Configurator. Listing 1 defines the application's global variables. Note that these appear outside of any specific function; as a result, they have global scope and are available throughout the web page.

Listing 1. Variables for custom computer estimator scripts

//flag to make sure function compute() is called
var called=false;
//the default for total price is always $0.00 
var T_Price=0;
//flags for keeping track of CPU choice
var pr_flag;
var pr_print="";

var sp_flag;    //flag for Speed
var sp_print;

var ram_flag;   //flag for RAM
var ram_print;

var hdrive_flag;        //flag for Hard Drive
var hdrive_print;

// ... flags for other device options 

As you can see from the comments, most of the variables have been used to keep track of the selection options. The variable T_Price is used to addup the price of all the selected components. The Boolean variable was used to make sure the compute() function is called.

function compute():

This is the most important function in the application. compute() keeps track of all the options chosen by the user and does the final calculation. Listing 2 below shows most of the code for the function (to get the complete code, use View Source on the finished configurator).

Listing 2. Partial Listing for function compute().

function compute(form){
called=true;

//-------Processor----------
if (form.processor[0].selected){
        pr_flag=0;
        pr_print= "None [$0]";
}

else if (form.processor[1].selected){
        pr_flag =540;
        pr_print="68LCO45 DD [$540]";
}

else if (form.processor[2].selected){
        pr_flag =340;
        pr_print="68LCO45 EE [$340]";
}

...

//-------Speed----------
if (form.speed[0].selected){
        sp_flag=0;
        sp_print="None [$0]";
}

else if (form.speed[1].selected){
        sp_flag=110;
        sp_print="60 MHz [$110]";
}

else if (form.speed[2].selected){
        sp_flag=145;
        sp_print="66/33 MHz [$145]";
}

...

//-------RAM-----------
if (form.ram[0].selected){
        ram_flag=0;
        ram_print="None [$0]";
}

else if (form.ram[1].selected){
        ram_flag=75;
        ram_print="4 MB RAM [$75]";
}

else if (form.ram[2].selected){
        ram_flag=120;
        ram_print="8 MB RAM [$120]";
}

...

//-------Hard Drive-------
if (form.hdrive[0].selected){
        hdrive_flag=0;
        hdrive_print="None [$0]";
}

else if (form.hdrive[1].selected){
        hdrive_flag=100;
        hdrive_print="250MB [$100]";
}

else if (form.hdrive[2].selected){
        hdrive_flag=200;
        hdrive_print="500MB [$200]";
}

...

//------- VRAM -------
    // VRAM code goes here
//------- Floppy -------
    // Floppy code goes here
//------- CD ROM -------
    // CD ROM code goes here
//---------- Monitor -----------
    // Monitor code goes here
//... code for other options

//----------calcuation of price
T_Price=pr_flag+sp_flag+ram_flag+hdrive_flag+
   vram_flag+ fdrive_flag+cd_flag+mn_flag+
   mos_flag+kb_flag+modem_flag+card_flag;

//-----display of price------------
form.T_Price.value="     $ "+ T_Price;
}

You might be saying to yourself, "This code is very repetitious!" You're right: we use the same code pattern to handle each of the component selections.

Let's walk through the function to illustrate how business logic can be implemented using JavaScript. 

Page 1 2 3