Intranet Journal: JavaScript By Example

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

Page 1 2 3

If you look at the first line of function compute(), you will notice that we assign the flag called a value of true. We need this Boolean variable in case the user presses Print Preview before pressing the button for Update Price. It's good programming practice to anticipate all the possible inputs - especially undesirable ones. If the user presses Print Preview before updating the price, the information of all the choices will not be seen in our print preview window.

Next you will notice an if statement. This is used for the array of choice for the first component. Recall that in JavaScript, the first element of an array is defined as the 0th (not the 1st!) element. So the array for the first selection option looks like this:

Array[0]=Select
Array[1]= 68LOCO45 DD [$540]
Array[2]= 68LCO45 EE   [$340]
Array[3]= 68LCO45 FF    [$680]
Array[4]= 68LCO45 GG   [$421]

Back to our if statement. Notice carefully how we called our first option from processor inside the if statement. Remember that we did not name the form anything in HTML. So all we needed to do is call the array element of the object, its property and we got the object (in our case a form).

In the if statement, if the user chooses the first option from processor, we assign pr_flag=0 and pr_print="None [$0]". The reason we assign pr_flag=0, as in other selection options as well, is because Select has a value of 0. Naturally, if the user presses the button named price before choosing any of the options from any of the selection options, you are bound to get a zero for your price. When that happens, if the user presses the button Print Preview you will see that for all the components there will be None [$0] next to them.

As you can see, we used else if statements in processor to assign the appropriate price for each option to pr_flag ($540, $40, $680 and $421). We also assigned the appropriate component choice for each selection in pr_print for the print preview window.

The next selection option is speed. Like before, we used if and else if statements to find out if the user has selected one the elements of this object.

After we are done with all the selection options we now need to add all flags. For this we use the variable T_Price. This simple addition method is shown below:

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;

Finally we need to display the value of T_Price in our text box. To do that we need to replace the blank property of the text box, value with T_Price. So, we do the following:

 form.T_Price.value="     $ "+ T_Price;

function print():

This function will create a window with the listing of all the choices chosen by the user as well as the computed price. Here is the listing:

Listing 3. Listing for function print()

function print(form){
   if(!called){
      compute(form);
   }

text = ("<HEAD><TITLE>'UniVista On-line Computer Cost
Estimator'</TITLE></HEAD>");
text = (text +"<BODY BGCOLOR =  '#FFFFFF' >
   <CENTER><B><FONT SIZE = 4><FONT COLOR=BLUE>
   UniVista On-line Computer Cost Estimator<BR>
   </FONT></FONT></B></CENTER>");

text=(text+"<hr>");

text=(text+"<TABLE BORDER =0><TR VALIGN=Top>
    <TD VALIGN=Top>");
text=(text+"<B>Processer:<BR>Speed: <BR>Monitor:
    <BR>Hard Drive:<BR>Floppy Drive: <BR>Memory:");
text=(text+" <BR>VRAM: <BR>CD-ROM: <BR>Sound Card:
    <BR>Modem: <BR>KeyBoard: <BR>Mouse: ");
text=(text+"</B></TD><TD>")

text=(text+"<B>"+ pr_print+"<BR>"+sp_print+"<BR>"+
    mn_print+"<BR>"+hdrive_print+"<BR>");
text=(text+ fdrive_print+"<BR>"+ram_print+"<BR>"+
    vram_print+"<BR>"+cd_print+"<BR>");
text=(text+card_print+"<BR>"+ modem_print+"<BR>"+
    kb_print +"<BR>"+mos_print );
text=(text+"<TD></TR></TABLE><hr>");
text=(text+"<B><FONT COLOR=RED>Total Cost:</FONT>"+
    "$"+T_Price);
text=(text+"<BR><BR><BR><BR><BR><FONT  SIZE=-1
    COLOR=GREEN>To print, choose FILE and PRINT.
    </FONT></FONT>");
text=(text+"</body></html>");

msgWindow=window.open("","displayWindow","toolbar=no,
    width=375,height=480,directories=no,status=yes,
    scrollbars=yes,resize=no,menubar=yes");
msgWindow.document.write(text);
}

In this function, first we made sure that the compute() function is called. Next we had a variable text which carried all the information necessary to create a new page. For example, we defined the BGCOLOR of the document, as we would do to make a new HTML page.

After our page is made we used the window object to create a new window. Notice the properties that were used in our new window.

toolbar=no
width=375
height=480
directories=no
status=yes
scrollbars=yes
resize=no
menubar=yes

Finally, we use the document property write to display the text. Voila! The complete JS/Configurator is online for you to experiment with, download and customize for your own pages.

Page 1 2 3

The Author Reaz Hoque (pronounced Re-oz Hawk) is an author, software developer, speaker and web designer. Recently he worked on the development team for one of the world's first on-line commercial applications for General Electric's startup company Public Sourcing Services. In addition to web development, Reaz is accomplished in Pascal, Visual Basic, Assembler, C++, and SQL. His articles are seen regularly on various online and print magazines. Reach Reaz with comments at rhoque@rhoque.com.