In This Exercise We Will Create a Page That Performs a Simple Calculation Involving Sub-Totals

Exercise 2: Working with VBScript

In this exercise we will create a page that performs a simple calculation involving sub-totals, sales tax and final totals. Follow the step-by-step instructions that will introduce you to using variables with VBScript. In this exercise you will create an HTML document which contains a script that will retrieve data from a web page, perform calculations and output a result.

Creating the HTML Document

Open up a text editor and insert the following HTML code:

<HTML>
<HEAD>
<TITLE>Working With VBScript: Exercise 2</TITLE>
</HEAD>
<BODY>
<H1>Your Second VBScript Exercise</H1>
<P> Variables can be used to store and manipulate values. To
see a demonstration of this enter a quantity and unit price
in the fields below and click the "Calculate Cost" button.</P>
<FORM NAME="frmExercise2">
<TABLE>
<TR>
<TD<B>Quantity:</B</TD>
<TD<INPUT TYPE="Text" NAME="txtQuantity" SIZE=5</TD>
</TR>
<TR>
<TD<B>Unit price:</B</TD>
<TD<INPUT TYPE="Text" NAME="txtUnitPrice" SIZE=5</TD>
</TR>
</TABLE>
<BR>
<INPUT TYPE="Button" NAME="cmdCalculate" VALUE="Calculate Cost">
</FORM>
</BODY>
</HTML>

Adding VBScript

In this part we will be adding a script to provide functionality for when the Calculate Cost command button is clicked. Note that the apostrophes " are there to comment out code - there is more on this on the next page - and the _at the end of the line Subtotal = document.frmExercise2.txtQuantity.value_ is a coding convention which is telling you to type the following line on the same line as this one and to discard the _..

<HTML>
<HEAD>
<TITLE>Working With VBScript: Exercise 2</TITLE>
<SCRIPT LANGUAGE="VBScript">

</SCRIPT>
</HEAD>
<BODY>

How It Works

What should be obvious right from the start is that this script is far more involved than the one used with Exercise 1. Don't be intimidated by its size. As with the previous lesson, we will work through this script line-by-line.

After the starting <SCRIPT> tag and HTML comment we find:

Option Explicit

Do you remember what this statement does? It forces you to declare all of your variables.

Next we create a sub procedure for the click event of the cmdCalculate button.

Sub cmdCalculate_OnClick

Following that we declare seven variables, three of which we are going to use as constants. They can be identified by the fact that they are all in uppercase. In VBScript, case doesn't matter (though it does in JavaScript). We are using it to make the script easier to read. Are the variables procedure-level or script-level variables? They are procedure-level since they are declared within a procedure.

In VBScript, anything after an apostrophe is a comment. As such, they are ignored when the script is processed. Comments can appear on a line by themselves or at the end of a line of script. Comments at the end of a line are referred to as inline comments.

' Define our constant values.

The constants are assigned values in the following lines. Chr() is a VBScript function that returns the character associated with a specified ASCII code. ASCII codes 13, 10 and 9 are carriage return, line feed and tab, respectively.

CRLF = Chr(13) & Chr(10)

TABSPACE = Chr(9)

The next line demonstrates how values are taken from a form on a web page, and used within a script. The two fields on our form were named txtQuantity and txtUnitPrice in their HTML <INPUT> tags. The form was named frmExercise2. Here we are referencing our web document, then the form, then the input field and finally the value of that field. The value associated with each field contains what the user entered into that field on the web page. The * says to multiply the value of the first field, txtQuantity, by the second field, txtUnitPrice.

Note

The commonly used VBScript operands are + for addition, - for subtraction, * for multiplication and / for division.

The result of this calculation is then stored in the variable Subtotal. Next we perform some additional calculations. Finally, we display the result of our calculations using the MsgBox function. The ampersand character, &, is used to concatenate two strings.

As with the previous lesson, don't get too worried about understanding all of the details of this example right now. As you continue to work with VBScript you will begin to "pickup" the language.