2.Objects and VBScript

Objects, both in the form of Java applets and ActiveX controls, enhance the functionality that is provided with HTML. By using VBScript you can extend the capabilities of these controls, integrating and manipulating them from within your scripts. In this lesson we will look at how you can utilize the power of objects with VBScript.

Scripting with objects involves two steps:

• Adding the object to your web page using HTML
• Writing script procedures to respond to events that the object provides

Adding Objects to Your Web Pages

Since this is a VBScript tutorial, rather than an HTML tutorial, we will offer only a limited discussion of how to add an object to a web page. Objects, whether they're Java applets or ActiveX controls are added to a page with the <OBJECT> tag. The properties, or characteristics, of the object are configured using the <PARAM> tag. Typically you will see an object implemented using a single <OBJECT> tag along with several <PARAM> tags. The following HTML code demonstrates how an ActiveX control might appear when added to a page:

<OBJECT ID="lblTotalPay" WIDTH=45 HEIGHT=24 
CLASSID="CLSID:978C9E23-D4B0-11CE-BF2D-00AA003F40D0">
<PARAM NAME="ForeColor" VALUE="0">
<PARAM NAME="BackColor" VALUE="16777215">
<PARAM NAME="Caption" VALUE="">
<PARAM NAME="Size" VALUE="1582;635">
<PARAM NAME="SpecialEffect" VALUE="2">
<PARAM NAME="FontHeight" VALUE="200">
<PARAM NAME="FontCharSet" VALUE="0">
<PARAM NAME="FontPitchAndFamily" VALUE="2">
<PARAM NAME="FontWeight" VALUE="0">

<SCRIPT LANGUAGE="VBScript">
Sub cmdCalculatePay_onClick
  Dim HoursWorked
  Dim PayRate
  Dim TotalPay
  HoursWorked = InputBox("Enter hours worked: ")
  PayRate = InputBox("Enter pay rate: ")
  TotalPay = HoursWorked * PayRate
  lblTotalPay.caption = TotalPay
End Sub
</SCRIPT>

3

VBScript allows you to control how your scripts process data through the use of conditional and looping statements. By using conditional statements you can develop scripts that evaluate data and use criteria to determine what tasks to perform. Looping statements allow you to repetitively execute lines of a script. Each offers benefits to the script developer in the process of creating more complex and functional web pages.

Conditional Statements

VBScript provides two forms of conditional statements:

conditional and looping statements

VBScript allows you to control how your scripts process data through the use of e="CH21_20_3"/>

If..Then..Else

The If..Then..Else statement is used, first to evaluate a condition to see if it is true or false and second, depending upon the condition, to execute a statement or set of statements. Rather than discussing an If statement in theory, we will examine some examples to see how they work.

The simplest version of an If statement is one that contains only a condition and a single statement:

If AmountPurchased > 10000 Then 

    DiscountAmount = AmountPurchased * .10
In this example statement the condition is:
If AmountPurchased > 10000

which simply checks to see if the contents of the variable AmountPurchased is greater than ten thousand. If it is, the condition is true. In this simple version of the If statement when the condition is true the following statement is executed:

DiscountAmount = AmountPurchased * .10

Next we will look at a more complicated version of the If statement. In this version we will perform a series of statements when the condition is true:

If AmountPurchased > 10000 Then 
  DiscountAmount = AmountPurchased * .10
  Subtotal = AmountPurchased - DiscountAmount
End If

In this form of the If statement, one or more statements can be executed when the condition is true, by placing them between the If statement on top and the End If statement on the bottom.

The next form of the If statement uses the If..Then..Else format. This version of the If statement differs from the two previous versions in that it will perform one set of statements if the condition is true and another set when the condition is false:

If AmountPurchased > 10000 Then 
  DiscountAmount = AmountPurchased * .10
  Subtotal = AmountPurchased - DiscountAmount
Else
  HandlingFee = AmountPurchased *.03
  Subtotal = AmountPurchased + HandlingFee
End If

If AmountPurchased > 10000 Then 
  DiscountAmount = AmountPurchased * .10
  Subtotal = AmountPurchased - DiscountAmount
Else If AmountPurchased > 5000 Then
  DiscountAmount = AmountPurchased * .05
  Subtotal = AmountPurchased - DiscountAmount
Else
  HandlingFee = AmountPurchased *.03
  Subtotal = AmountPurchased + HandlingFee
End If

Select Case condition
  Case value
  Case value
  ...
  Case Else
End Select

Select Case Document.frmOrder.txtState.Value
  Case "California"
    ShippingFee= .04
  Case "Florida"
    ShippingFee = .03
  Case Else
    ShippingFee = .02
End Select

Sub ChkFirstWhile()
     Dim counter, myNum
     counter = 0
     myNum = 20
     Do While myNum > 10
         myNum = myNum - 1
         counter = counter + 1
     Loop
     MsgBox "The loop made " & counter & " repetitions."
 End Sub

 Sub ChkLastWhile()
     Dim counter, myNum
     counter = 0
     myNum = 9
     Do
         myNum = myNum - 1
         counter = counter + 1
     Loop While myNum > 10
     MsgBox "The loop made " & counter & " repetitions."
 End Sub

Sub ChkFirstUntil()
     Dim counter, myNum
     counter = 0
     myNum = 20
     Do Until myNum = 10
         myNum = myNum - 1
         counter = counter + 1
     Loop
     MsgBox "The loop made " & counter & " repetitions."
 End Sub

 Sub ChkLastUntil()
     Dim counter, myNum
     counter = 0
     myNum = 1
     Do
         myNum = myNum + 1
         counter = counter + 1
     Loop Until myNum = 10
     MsgBox "The loop made " & counter & " repetitions."
 End Sub

Sub ExitExample()
     Dim counter, myNum
     counter = 0
     myNum = 9
     Do Until myNum = 10
         myNum = myNum - 1
         counter = counter + 1
         If myNum < 10 Then Exit Do
     Loop
     MsgBox "The loop made " & counter & " repetitions."
 End Sub

Sub DoMyProc50Times()
     Dim x
     For x = 1 To 50
         MyProc
     Next
 End Sub

Sub TwosTotal()
     Dim j, total
     For j = 2 To 10 Step 2
         total = total + j
     Next
     MsgBox "The total is " & total
 End Sub

Sub NewTotal()
     Dim myNum, total
     For myNum = 16 To 2 Step -2
         total = total + myNum
     Next
     MsgBox "The total is " & total
 End Sub

4.Procedures

Kinds of Procedures

In VBScript there are two kinds of procedures; the Sub procedure and the Function procedure.

Sub Procedures

A Sub procedure is a series of VBScript statements, enclosed by Sub and End Sub statements, that perform actions but don't return a value. A Sub procedure can take arguments (constants, variables, or expressions that are passed by a calling procedure). If a Sub procedure has no arguments, its Sub statement must include an empty set of parentheses ().

The following Sub procedure uses two intrinsic, or built-in, VBScript functions, MsgBox and InputBox, to prompt a user for some information. It then displays the results of a calculation based on that information. The calculation is performed in a Function procedure created using VBScript. The Function procedure is shown after the following discussion.

 Sub ConvertTemp()
    temp = InputBox("Please enter the temperature in degrees F.", 1)
    MsgBox "The temperature is " & Celsius(temp) & " degrees C."
 End Sub

Function Procedures

A Function procedure is a series of VBScript statements enclosed by the Function and End Function statements. A Function procedure is similar to a Sub procedure, but can also return a value. A Function procedure can take arguments (constants, variables, or expressions that are passed to it by a calling procedure). If a Function procedure has no arguments, its Function statement must include an empty set of parentheses. A Function returns a value by assigning a value to its name in one or more statements of the procedure. The return type of a Function is always a Variant.

In the following example, the Celsius function calculates degrees Celsius from degrees Fahrenheit. When the function is called from the ConvertTemp Sub procedure, a variable containing the argument value is passed to the function. The result of the calculation is returned to the calling procedure and displayed in a message box.

Sub ConvertTemp()
     temp = InputBox("Please enter the temperature in degrees F.", 1)
     MsgBox "The temperature is " & Celsius(temp) & " degrees C."
 End Sub

 Function Celsius(fDegrees)
     Celsius = (fDegrees - 32) * 5 / 9
 End Function

Getting Data into and out of Procedures

Each piece of data is passed into your procedures using an argument. Arguments serve as placeholders for the data you want to pass into your procedure. You can name your arguments anything that is valid as a variable name. When you create a procedure using either the Sub statement or the Function statement, parentheses must be included after the name of the procedure. Any arguments are placed inside these parentheses, separated by commas. For example, in the following example, fDegrees is a placeholder for the value being passed into the Celsius function for conversion:

 Function Celsius(fDegrees)
    Celsius = (fDegrees - 32) * 5 / 9
 End Function

To get data out of a procedure, you must use a Function. Remember, a Function procedure can return a value; a Sub procedure can't.

Using Sub and Function Procedures in Code

A Function in your code must always be used on the right side of a variable assignment or in an expression. For example:

 Temp = Celsius(fDegrees)

 MsgBox "The Celsius temperature is " & Celsius(fDegrees) & " degrees."

To call a Sub procedure from another procedure, you can just type the name of the procedure along with values for any required arguments, each separated by a comma. The Call statement is not required, but if you do use it, you must enclose any arguments in parentheses.

The following example shows two calls to the MyProc procedure. One uses the Call statement in the code; the other doesn't. Both do exactly the same thing.

Call MyProc(firstarg, secondarg)
 MyProc firstarg, secondarg

Notice that the parentheses are omitted in the call when the Call statement isn't used

5 - DOM GrabBag

Using VBScript with Forms

As the popularity of web page forms increase, so does the need to be able to validate data before the client browser submits it to the web server. As a scripting language, VBScript is well suited for this task. Once the form has been validated, the same script can be used to forward the data on to the server. In this lesson we will look at both the process of validating and submitting forms.

Checking Form Input

This example is pretty simple. It has a single field in which the user can enter their age and a single command button that is used to submit their age to the server. A copy of this example can be found in exam_5a.htm.

<HTML>
<HEAD>
<TITLE>Working With VBScript: Example 5a</TITLE>
<SCRIPT LANGUAGE="VBScript">
<!-- Instruct non-IE browsers to skip over VBScript modules.
Option Explicit
Sub cmdSubmit_OnClick
' Check to see if the user entered anything.
  If (Len(document.frmExample5a.txtAge.value) = 0) Then
    MsgBox "You must enter your age before submitting."
    Exit Sub
  End If
' Check to see if the user entered a number.
  If (Not(IsNumeric(document.frmExample5a.txtAge.value))) Then
    MsgBox "You must enter a number for your age."
    Exit Sub
  End If
' Check to see if the age entered is valid.
  If (document.frmExample5a.txtAge.value < 0) Or _
     (document.frmExample5a.txtAge.value > 100) Then
    MsgBox "The age you entered is invalid."
    Exit Sub
  End If
' Data looks okay so submit it.
  MsgBox "Thanks for providing your age."
  document.frmExample5a.submit
End Sub
-->
</SCRIPT>
</HEAD>
<BODY>
<H1>A VBScript Example on Variables</H1>
<P> This example demonstrates validation techniques in VBScript. </P>
<FORM NAME="frmExample5a">
  <TABLE>
    <TR>
      <TD>Enter your age:</TD>
      <TD><INPUT TYPE="Text" NAME="txtAge" SIZE="2">
    <TR>
      <TD><INPUT TYPE="Button" NAME="cmdSubmit" VALUE="Submit"></TD>
      <TD></TD>
    </TR>
  </TABLE>
</FORM>
</BODY>
</HTML>

' Check to see if the user entered anything.
  If (Len(document.frmExample5a.txtAge.value) = 0) Then
    MsgBox "You must enter your age before submitting."
    Exit Sub
  End If

' Check to see if the user entered a number.
  If (Not(IsNumeric(document.frmExample5a.txtAge.value))) Then
    MsgBox "You must enter a number for your age."
    Exit Sub
  End If

' Check to see if the age entered is valid.
  If (document.frmExample5a.txtAge.value < 0) Or _
     (document.frmExample5a.txtAge.value > 100) Then
    MsgBox "The age you entered is invalid."
    Exit Sub
  End If

' Data looks okay so submit it.
  MsgBox "Thanks for providing your age."
  document.frmExample5a.submit

<HTML>
<HEAD><TITLE>Simple Validation</TITLE>
<SCRIPT LANGUAGE="VBScript"> 
<!--
Sub Submit_OnClick
  Dim TheForm
  Set TheForm = Document.ValidForm
  If IsNumeric(TheForm.Text1.Value) Then
    If TheForm.Text1.Value < 1 Or TheForm.Text1.Value > 10 Then
      MsgBox "Please enter a number between 1 and 10."
    Else
      MsgBox "Thank you."
    End If
  Else
    MsgBox "Please enter a numeric value."
  End If
End Sub
-->
</SCRIPT>
</HEAD>
<BODY>
<H3>Simple Validation</H3><HR>
<FORM NAME="ValidForm">
Enter a value between 1 and 10: 
<INPUT NAME="Text1" TYPE="TEXT" SIZE="2">
<INPUT NAME="Submit" TYPE="BUTTON" VALUE="Submit">
</FORM>
</BODY>
</HTML>

A = Text1.Value + Text2.Value		' A is "12"
A = CDbl(Text1.Value) + Text2.Value	' A is 3

<SCRIPT LANGUAGE="VBScript"> 
<!--
Sub Submit_OnClick
  Dim TheForm
  Set TheForm = Document.ValidForm
  If IsNumeric(TheForm.Text1.Value) Then
    If TheForm.Text1.Value < 1 Or TheForm.Text1.Value > 10 Then
      MsgBox "Please enter a number between 1 and 10."
    Else
      MsgBox "Thank you."
      TheForm.Submit	' Data correct; send to server.
    End If
  Else
    MsgBox "Please enter a numeric value."
  End If
End Sub
-->
</SCRIPT>

Built-In Functions

VBScript ships with many functions that you can use to complete your scripts. These functions are highly reliable and can tremendously reduce your work. This means that, before creating your own procedure or function, first make sure it has not been written already because if an existing function already implements the behavior you want to apply, you should such a function.

Because VBScript is an interpreted language (and not a compiled language), all of the possible built-in functions are already known to the browser. Therefore, you don't need to include a file or library.

Conversion Functions

We saw already that the users of your web pages will be presented with objects called controls. These objects allow the user to type values or select something from a list. Anything the user types in a text-based field is primarily considered as a string. Before performing any type of operation that involves such a value, you should make sure you can identify what kind of value it is. For example, you shouldn't try to multiply a string by a date such as FirstName * January 16. Although you will not be able to avoid every single type of problem that could occur in a page, you can reduce errors by checking the value that a control holds.

The first thing you should do with a value retrieved from a control is to convert it to the appropriate type. There are various conversion functions adapted to the different possible kinds of values. The general syntax of the conversion functions is:

ReturnType = Function(Expression)

The expression could be of any kind, depending on how the expression would be supplied. For example, it could be a string or value the user would have entered in form. It could also be the result of a calculation performed on another procedure or function. The function would take such a value, string, or expression and attempt to convert. If the conversion is successful, the function would return a new value that is of the type specified by the ReturnType in our syntax.

Practical Learning: 

<html>
<head>
<Script Language="VBScript">
<!--
Sub GiveFocus
  Document.EmployeesPayroll.txtFirstName.Focus()
End Sub
-->
</Script>

<title>Employees Payroll</title>
</head>

<body>

<h1>Oddenton Auto Repair</h1>
<h2>Employees Payroll</h2>
<form name="EmployeesPayroll" method="POST">
  <table border="0" width="548">
    <tr>
      <td width="104">First Name:</td>
      <td width="430"><input type="text" name="txtFirstName" size="20"></td>
    </tr>
    <tr>
      <td width="104">LastName:</td>
      <td width="430"><input type="text" name="txtLastName" size="20"></td>
    </tr>
  </table>
 
  <table border="0" width="548">
    <tr>
      <td width="104">Hourly Salary</td>
      <td width="428"><input type="text" name="txtHourlySalary" size="10"value="0.00"></td>
    </tr>
  </table>
  <table border="0" width="563">
    <tr>
      <td width="124">Weekly Hours</td>
      <td width="62" align="center">Mon</td>
      <td width="62" align="center">Tue</td>
      <td width="62" align="center">Wed</td>
      <td width="62" align="center">Thu</td>
      <td width="62" align="center">Fri</td>
      <td width="62" align="center">Sat</td>
      <td width="62" align="center">Sun</td>
    </tr>
    <tr>
      <td width="124"></td>
      <td width="62" align="center"><input type="text" name="txtMon" size="6" value="0.00"></td>
      <td width="62" align="center"><input type="text" name="txtTue" size="6" value="0.00"></td>
      <td width="62" align="center"><input type="text" name="txtWed" size="6" value="0.00"></td>
      <td width="62" align="center"><input type="text" name="txtThu" size="6" value="0.00"></td>
      <td width="62" align="center"><input type="text" name="txtFri" size="6" value="0.00"></td>
      <td width="62" align="center"><input type="text" name="txtSat" size="6" value="0.00"></td>
      <td width="62" align="center"><input type="text" name="txtSun" size="6" value="0.00"></td>
    </tr>
  </table>
  <table border="0" width="558">
    <tr>
      <td width="104"></td>
      <td width="440">
        <p><input type="button" value="Process" name="btnProcess">
           &nbsp;&nbsp;
   <input type="reset" value="Reset" name="B2">
        </p>
      </td>
    </tr>
  </table>
</form>
</body>

</html>

3.Save the file as payroll2.htm in the vbstutorial folder and preview it in the browser:

•  
• After previewing the page, return to your text editor.
• To perform calculations that involve values stored in text boxes, change the file as follows:

      <html>

      <head>

      
      <Script Language="VBScript">

      
      <!--

      ' -- This procedure gives focus to the First Name text box

      
      Sub GiveFocus

  Document.EmployeesPayroll.txtFirstName.Focus()

      End Sub

      

      
      ' This function retrieves the first and last names

      ' It concatenates them and returns a full name

      
      Function GetFullName()

  Dim FirstName, LastName

      

  FirstName = Document.EmployeesPayroll.txtFirstName.Value

  LastName  = Document.EmployeesPayroll.txtLastName.Value

      

  GetFullName = LastName & ", " & FirstName

      End Function

      

      
      ' This function uses an hourly salary and the number of hours in a week

      ' It calculates the total earnings for the week

      
      Function CalculateWeeklySalary(HourlySalary, WeeklyHours)

  CalculateWeeklySalary = HourlySalary * WeeklyHours

      End Function

      

      
      ' This is the central procedure of the script

      ' It processes the form and displays the values in the other form

      
      Sub ProcessPayroll()

  Dim dMon, dTue, dWed, dThu, dFri, dSat, dSun, TotalHours

  Dim HourlySalary, WeeklySalary

  Dim FullName

      

  dMon = CDbl(Document.EmployeesPayroll.txtMon.Value)

  dTue = CDbl(Document.EmployeesPayroll.txtTue.Value)

  dWed = CDbl(Document.EmployeesPayroll.txtWed.Value)

  dThu = CDbl(Document.EmployeesPayroll.txtThu.Value)

  dFri = CDbl(Document.EmployeesPayroll.txtFri.Value)

  dSat = CDbl(Document.EmployeesPayroll.txtSat.Value)

  dSun = CDbl(Document.EmployeesPayroll.txtSun.Value)

      

  HourlySalary = Document.EmployeesPayroll.txtHourlySalary.Value

      

  TotalHours   = dMon + dTue + dWed + dThu + dFri + dSat + dSun

  WeeklySalary = CalculateWeeklySalary(HourlySalary, TotalHours)

  FullName     = GetFullName()

      

      

  PayrollResults.txtFullName.Value       = FullName

  PayrollResults.txtWeeklyEarnings.Value = "$" & WeeklySalary

      End Sub

      -->

      </Script>

      
      
      

      <title>Employees Payroll</title>

      </head>

      

      <body OnLoad="GiveFocus()">

      

      <h1>Odenton Auto Repair</h1>

      <h2>Employees Payroll</h2>

      <form name="EmployeesPayroll" method="POST">

  <table border="0" width="548">

    <tr>

      <td width="104">First Name:</td>

      <td width="430"><input type="text" name="txtFirstName" size="20"></td>

    </tr>

    <tr>

      <td width="104">LastName:</td>

      <td width="430"><input type="text" name="txtLastName" size="20"></td>

    </tr>

  </table>

  

  <table border="0" width="548">

    <tr>

      <td width="104">Hourly Salary</td>

      <td width="428"><input type="text" name="txtHourlySalary" size="10" value="0.00"></td>

    </tr>

  </table>

  <table border="0" width="563">

    <tr>

      <td width="124">Weekly Hours</td>

      <td width="62" align="center">Mon</td>

      <td width="62" align="center">Tue</td>

      <td width="62" align="center">Wed</td>

      <td width="62" align="center">Thu</td>

      <td width="62" align="center">Fri</td>

      <td width="62" align="center">Sat</td>

      <td width="62" align="center">Sun</td>

    </tr>

    <tr>

      <td width="124"></td>

      <td width="62" align="center"><input type="text" name="txtMon" size="6" value="0.00"></td>

      <td width="62" align="center"><input type="text" name="txtTue" size="6" value="0.00"></td>

      <td width="62" align="center"><input type="text" name="txtWed" size="6" value="0.00"></td>

      <td width="62" align="center"><input type="text" name="txtThu" size="6" value="0.00"></td>

      <td width="62" align="center"><input type="text" name="txtFri" size="6" value="0.00"></td>

      <td width="62" align="center"><input type="text" name="txtSat" size="6" value="0.00"></td>

      <td width="62" align="center"><input type="text" name="txtSun" size="6" value="0.00"></td>

    </tr>

  </table>

  <table border="0" width="558">

    <tr>

      <td width="104"></td>

      <td width="440">

        <p><input type="button" value="Process" name="btnProcess" OnClick="ProcessPayroll()">

           &nbsp;&nbsp;

      	   <input type="reset" value="Reset" name="B2">

        </p>

      </td>

    </tr>

  </table>

      </form>

      

      <hr>

      

      <form name="PayrollResults">

      <table border="0" width="546">

  <tr>

    <td width="113">Full Name:</td>

    <td width="419"><input type="text" name="txtFullName" size="20"></td>

  </tr>

      </table>

      <table border="0" width="545">

  <tr>

    <td width="112">Weekly Earnings:</td>

    <td width="419"><input type="text" name="txtWeeklyEarnings" size="20" value="$0.00"></td>

  </tr>

      </table>

      </form>

      

      </body>

      

      </html>

Save the file and preview it in the browser. Type the first and last names in the corresponding fields.
Type the employees hours for each day and click the Process button
 

Besides the conversion functions, VBScript provides many other functions you can use in your scripts. Some of these functions are: