VBScript Tutorial

Motivation

VBScript is a scripting language or more precisely a "scripting environment", which can enhance HTML Web pages by making them active, as compared to Standard HTML code is static - whatever elements the author incorporated into a page will not change unless the HTML code is changed. VBscript extends standard HTML by adding built-in objects and server-side scripting,and by allowing access to databases and other server-side ActiveX components. All of this means that it is now even easier than ever to make your Web pages as dynamic as you desire.

The audience is assumed to have a basic understanding of the Web and HTML authoring as well as working knowledge of Visual Basic programming.If you want to study these subjects first, go to References in the conclusions section below for tutorials on these topics.

Objectives & Materials Required

This page aims to provide some very basic examples of how to write VBScript, and how to insert these scripts into your HTML documents to make your Web pages more dynamic and interactive. VBScript was first introduced in Microsoft Internet Explorer 3.0 and is automatically installed by Windows 95a or later, Windows NT 4 or later, Internet Explorer 3 or later, Internet Information Server 3 or later, Outlook 98, Visual Studio 98, and Office 2000. To check if it installed on your machine, look for the SCRRUN.DLL file in your system directory (\Windows\System or \WinNT\System32 folder). If needed, the latest version of this file can be downloaded from Microsoft's Web site.

Introduction

What is VBScript?

VBScript is a scripting language developed by Microsoft and supported by Microsft's internet Explorer Web Browser. VBScript is based on the Visual Basic programming language, but is much simpler. In many ways, it is similar to JavaScript. It enables Web authors to include interactive controls, such as buttons and scrollbars, on their Web pages. VBScript is the default language of Active Server Pages (ASP). ASP is an exciting technology from Microsoft that is of significant value to developers to extend the functionality of standard HTML. The technology was developed in response to competing technologies (such as JavaScript) and as a way of expanding the usefulness and functionality of standard HTML.

How does it work?, How is it used ?

When a VBScript is inserted into a HTML document, the Internet browser will read the HTML and interpret the VBScript. The VBScript can be executed immediately, or at a later event.

VBScript is designed as an extension to HTML. The web browser receives scripts along with the rest of the web document. HTML is extended to include a tag that is used to incorporate scripts into HTML. The <SCRIPT Language="VBScript"> tag tells the browser that the page to be displayed contains a script and it is of the type VBScript. Because not all browsers are able to processVBScript, the rest of the code should be enclosed in comment tags <!-- --> so that these browsers will ignore the code and not clutter the page.

Let's start with an easy program and then develop more advanced programs.The examples below show how these codes are used and some of the basic VBScript commands.

Some Examples...

Example 1: Basic Hello World

This sample program demonstrates simple displaying of messages in response to the click of a button.




As you can see, clicking the button produces the message "Hello, world!", with the caption of the message box reading "Muhammed Ucar's VBScript Tutorial". The code used to produce this began with a simple HTML button:

<INPUT TYPE="Button" NAME="cmdHello" VALUE="Click Me!">

A Visual Basic Script subroutine was then implemented in the <SCRIPT> tag of the Web page:

<SCRIPT LANGUAGE="VBScript">
Sub cmdHello_OnClick()
MsgBox "Hello, world!", vbOKOnly, "Ben's VBScript Tutorial"
End Sub
</SCRIPT>

Example 2 shows a more useful example that changes the page's text based on user response.

Example 2: Hello World

Here, the script displays a message box, then writes the user's response to the page.

<HTML>
<HEAD>
<TITLE>Example 1B: Hello World</TITLE>
</HEAD>
 
<BODY>
<SCRIPT Language="VBScript">
<!--
dim myVal, btnPressed
myVal = msgBox ("Hello World!", vbokcancel, "Hello")
select case myVal
case 1 btnPressed="OK"
case 2 btnPressed="Cancel"
case else btnPressed="Error!"
end select
 
document.write ("<h1>You selected the " & btnPressed & " button.</h1>")
-->
</SCRIPT>
 
</BODY>
</HTML>

Click Hello World, Example 2 to see what this code will do.

This version of Hello World demonstrates how VBScript can be used to get some input from the user and then modify the appearance of the displayed HTML code.

Example 3:Getting Simple Input From the User

This program asks for your name and then displays it in a text box. You can have the program say "Hi" to you by clicking the second button.








This example also uses button controls, but adds a text box as well:

<INPUT TYPE="Button" NAME="cmdGetName" VALUE="Click Here To Type In Your Name">
<INPUT TYPE="Button" NAME="cmdShowName" VALUE="Say Hi!">
<INPUT TYPE="Edit" NAME="txtName" VALUE="Ben"&GT;

In addition, the MsgBox statement is used once again to display a message - but this time it's a message that can change with the text box, instead of being set, unchanging information. First, we set the value of the textbox by getting input:

<SCRIPT LANGUAGE="VBScript">
Sub cmdGetName_OnClick()
Dim MyName
MyName = InputBox("Hello! What's your name?","Getting Input")
txtName.Value = MyName
MsgBox "Hi, " & txtName.Value & "! How are you?", vbOKOnly, "Ben's VBScript Tutorial"
End Sub

Sub cmdShowName_OnClick()
MsgBox "Hi, " & txtName.Value & "! How are you?", vbOKOnly, "Ben's VBScript Tutorial"
End Sub
</SCRIPT>

 Dim means we're going to dimension a variable. In VBScript a variable is an object that can hold a value. This can be a string value ("Hello world!") or a numeric value (3454) or other things. In this case we're assigning MyName a string value. The InputBox statement gets input from the user by displaying a window which has a textbox in it. As with MsgBox, you can specify a prompt and a title in the parameters, but a function requires that you put parentheses around its arguments (parameters).
Then we assign the MyName variable to txtName.Value. First we specify the name of the object to assign it to (txtName), and then we put a period in between that and the property we wish to change, in this case, the Value.
Now we demonstrate that strings can be put together to form a larger string. The first parameter in the MsgBox statement reads "Hi, " & txtName.Value & "! How are you?" The first part of the string is "Hi, ", but then the name that the user typed in is used: & txtName.Value & "! How are you?"
The next Sub (for the cmdShowName button) repeats the last command in the other button.

Example 4:Changing Document Properties

This program demonstrates manipulating the color properties of the document. You can use VBScript to change the background color, the text color, and link color of the Web page.

Note; To return to the default color,just refresh your screen.





The source code for this is not really very difficult, it just shows a few more of the things possible with VBScript.

<INPUT TYPE="Button" NAME="cmdDocWhite" VALUE="Document - White">
<INPUT TYPE="Button" NAME="cmdDocBlack" VALUE="Document - Black"><BR><BR>
<INPUT TYPE="Button" NAME="cmdTBlue" VALUE="Text - Blue">
<INPUT TYPE="Button" NAME="cmdTRed" VALUE="Text - Red">
<INPUT TYPE="Button" NAME="cmdTBlack" VALUE="Text - Black"><BR><BR>

As usual, the buttons are made with standard HTML tags, and the functionality is built into the VBScript block.

<SCRIPT LANGUAGE="VBScript">
Function DRGB(Red, Green, Blue)
  Dim r, g, b
  If Len(Hex(Red)) < 2 Then
    r = "0" & Hex(Red)
  Else
    r = Hex(Red)
  End If
  If Len(Hex(Green)) < 2 Then
    g = "0" & Hex(Green)
  Else
    g = Hex(Green)
  End If
  If Len(Hex(Blue)) < 2 Then
    b = "0" & Hex(Blue)
  Else
    b = Hex(Blue)
  End If
  DRGB = r & g & b
End Function

Sub cmdDocWhite_OnClick()
  Document.BGColor = DRGB(255,255,255)
End Sub

Sub cmdDocBlack_OnClick()
  Document.BGColor = DRGB(0,0,0)
End Sub

Sub cmdTBlue_OnClick()
  Document.FGColor = DRGB(0,0,255)
End Sub

Sub cmdTRed_OnClick()
  Document.FGColor = DRGB(255,0,0)
End Sub

Sub cmdTBlack_OnClick()
  Document.FGColor = DRGB(0,0,0)
End Sub
</SCRIPT>

 VBScript hex values differ from the way Internet Explorer interprets the colors, which is why the DRGB function exists. By using the DRGB function instead of VBScript's RGB, document colors will show up the way you intended them to be.

Example 5: Adding an ActiveX™ control (OCX) to your web page

This example shows how to add an ActiveX™ control (OCX) to your web page. It asks the user to enter number in the textbox and when the user clicks button, the number is shown in LCD display (ActiveX component) which is embedded to the web page.

Here is the screen shot image for the code,

the <OBJECT> tag is used to place ActiveX controls in HTML pages.

The following example illustrates an object tag:

<OBJECT ID="fpBoolean1" CLASSID="CLSID:DD55D143-EBF7-11D0-8810-0000C0E5948C" CODEBASE="http://www.fpoint.com/max/inputpro.cab"> <PARAM NAME="BorderStyle" VALUE="0"> <PARAM NAME="BorderColor" VALUE="-2147483642"> <PARAM NAME="BorderWidth" VALUE="1"> <PARAM NAME="BooleanStyle" VALUE="0"> <PARAM NAME="TextFalse" VALUE="FarPoint Boolean"> </OBJECT>

The tag has the following parameters:

ID= A name for the object. The name should be unique among all other objects on the page.CLASSID=A class ID number. Every ActiveX control has a unique class ID that was encoded into it during development. The browser uses this number to determine which control to load.This number must be exactly correct or the control will not load. Thus, it is preferable to cut and paste these numbers into your object tag or to use a tool such as the ActiveX Control Pad to insert them. For more information, see "Using the ActiveX Control Pad." CODEBASE= URL referring to where the ActiveX control can be acquired. When the page is loaded into the user's system, the browser checks the registry to determine if the system has the ActiveX control referenced by the CLASSID. If it does, then the local copy is used. Otherwise, the browser attempts to download the control from the URL designated by the CODEBASE tag.PARAM NAME="x" VALUE="y" Optional parameters to set properties of the ActiveX control when it is loaded. Each is expressed as a property NAME and a VALUE to set it to. Once the control is loaded, it is given these property settings by the browser. Which settings are supported depends on the ActiveX control.

If the program does not work because of Active X registration problem, here is the registration file for your system RegAX

Click Example 5 to see what this code will do.

Conclusion

From the examples we see that VBScript technology enables Web authors to include interactive controls, such as buttons , textboxes, even Active X on their Web pages. The exciting part of this is VBScript technology could be used to control devices too. As it is shown in Eample 5, ActiveX controls can be embedded on a web page and controlled by VBScript. In previous tutorial Contolling Home Aplliances Over the Internet we created a client/server system that allowed a relay control connected to a server computer using an 8255 PC Interface Card. This system could be extended so that the client would run as a VBScript with an embedded Winsock ActiveX control to communicate to the server over the Internet. This tutorial is intended to give brief information about VBScript technology and potential applications. To explore further, to learn more in depth refer these websites and additional resources.

VBScript

Web Resources

Books & Publications

WWW & HTML

Web Resources

Books & Publications

Return to Home Page