Web Page Programming: ActiveX and VBScript

Visual Basic for Applications Unleashed

Chapter 21—Web Page Programming: ActiveX and VBScript

Attaching Scripts to a Page

Before you can add VBScript functionality to a Web page, you have to write the script and then insert the code directly into the page. Note that scripts aren't like, say, images, where you use a tag to point to an external file. No, with VBScript your statements are entered directly into the page and are completely visible to anyone who cares to look at the page's source code. (In other words, if you have an algorithm you want to patent, don't use it in a script!)

As you'll soon see, a script is just a chunk of text, so the tool you use to create your scripts is a matter of preference. Unfortunately, there is no VBScript equivalent of the Visual Basic Editor. The closest we have is the ActiveX Control Pad. As you saw earlier, this utility is handy for inserting ActiveX controls. Other than that, though, it's just a simple text editor.

An alternative would be to fire up an Office application and then switch to the Visual Basic Editor. You could start a new module and use it to write your script, which at least gives you the not-insignificant advantage of VBA's on-the-fly syntax checking and IntelliSense features. When your script is ready, you can copy it from the module and paste it into your page. For the latter, VBScript gives you two methods for inserting a script:

The <SCRIPT> tag
Adding the LANGUAGE attribute to a control

NOTE: THE SCRIPT DEBUGGER UTILITY
As this book was going to press, Microsoft released a new utility called Script Debugger for Internet Explorer. As its name implies, this utility enables you to debug VBScript (or JavaScript) programs. You'll find this handy utility on Microsoft's Web site:
http://www.microsoft.com/workshop/prog/scriptie/
The Script Debugger operates much like the debugging environment that's available with the Visual Basic Editor. See Chapter 24, "Debugging VBA Programs," to learn some basic debugging techniques.

The <SCRIPT> Tag

In Appendix D, I introduce you to various HTML tags. One of the things you'll learn is that many tags are containers. In other words, they require both a start and an end tag, like this:

<TITLE>My Home Sweet Home Page</TITLE>

Here, the <TITLE> tag tells the browser that the text that follows is the page title (to be displayed in the browser title bar), and the </TITLE> tag tells the browser that it has reached the end of the title text.

One way to incorporate VBScript into your pages is to use the <SCRIPT>/</SCRIPT> container, like so:

<SCRIPT LANGUAGE="language">
    Procedures go here

</SCRIPT>

The LANGUAGE attribute specifies the scripting language you're using. For VBScript, you use <SCRIPT LANGUAGE="VBScript">. (At the time this book was written, the only other scripting language supported was JavaScript, which uses the tag <SCRIPT LANGUAGE="JScript">.)

You enter your Sub and Function procedures between the <SCRIPT> and </SCRIPT> tags. When a VBScript-aware browser (such as Internet Explorer) encounters these tags, it begins processing (or interpreting) the script's commands immediately. Note that you can put the <SCRIPT> container inside the document's header or body.

Listing 21.1 shows a simple HTML file that includes the <SCRIPT> container (see WELCOME.HTM on the CD).

Listing 21.1. An HTML file with a <SCRIPT> tag.

<HTML>
<HEAD>
<TITLE>Our First Look at a VBScript Page</TITLE>
</HEAD>
<BODY>
<H3>Listing 21.1. An HTML file with a <SCRIPT> tag.</H3>

<SCRIPT LANGUAGE="VBScript">
Sub WelcomeMat
   MsgBox "Welcome to VBScript!"
End Sub

Call WelcomeMat
</SCRIPT>

</BODY>
</HTML>

As you can see, the <SCRIPT> container includes a Sub procedure named WelcomeMat. This simple procedure just invokes MsgBox to display a message. Since the Call WelcomeMat statement is outside of any procedure, it gets executed by the browser immediately. (These statements act as sort of "OnLoad" event procedures.) Therefore, the message is displayed as soon as you open this page, as shown in Figure 21.15.

Screen shot of Internet Explorer
Figure 21.15.
The Web page that appears when you load the HTML file in Listing 21.1.

A Note About VBScript Event Procedures

Although it's perfectly acceptable to have regular Sub and Function procedures within the <SCRIPT> container, most of your pages will use event procedures instead. In other words, you'll include code to handle particular events, such as entering text in a form or clicking a button.

As in VBA, event procedures use special names to differentiate, say, a "click" event from a "keypress" event. For example, suppose your page includes an ActiveX command button with the name cmdOK. Listing 21.2 shows an example of a procedure that runs when the user clicks the button (see OK.HTM on the CD).

Listing 21.2. An example of an event procedure.

<HTML>
<HEAD>
<TITLE>An Event Procedure Example</TITLE>
</HEAD>
<BODY>

<SCRIPT LANGUAGE="VBScript">
Sub cmdOK_Click
    msgbox "Yup, you clicked OK!"
End Sub
</SCRIPT>

Click here:
<OBJECT ID="cmdOK" WIDTH=75 HEIGHT=25
 CLASSID="CLSID:D7053240-CE69-11CD-A777-00DD01143C57">
    <PARAM NAME="Caption" VALUE="OK">
    <PARAM NAME="Size" VALUE="1953;846">
    <PARAM NAME="FontCharSet" VALUE="0">
    <PARAM NAME="FontPitchAndFamily" VALUE="2">
    <PARAM NAME="ParagraphAlign" VALUE="3">
    <PARAM NAME="FontWeight" VALUE="0">
</OBJECT>

</BODY>
</HTML>

When you attach an underscore (_) and the type of event to the button's name, VBScript knows that you want to run this procedure each time the event occurs. This method doesn't work with regular HTML controls, however. For that, you need to specify the procedure to run when you define the control. I show you how to do this in the next section.

Using the LANGUAGE Attribute with a Control

Instead of defaulting to the standard procedure names for your event handlers, you can specify a procedure to run when you define the object. Doing so gives you the following advantages:

You can set up event handlers for regular HTML form controls.
You can specify the same procedure to be the event handler for multiple controls.
You can use different scripting languages within the same page. For example, you could set up an event procedure in VBScript for one control and another event procedure in JavaScript for a different control.

The downside of this method is that it can't be used with objects inserted using the <OBJECT> tag.

To specify a procedure, you add both the LANGUAGE attribute and the appropriate event procedure attribute to the tag that defines the control. For example, consider the following <INPUT> tag for a command button:

<INPUT
    TYPE=BUTTON
    VALUE="Cancel"
    LANGUAGE="VBScript"
    ONCLICK="ProcessClick()">

The ONCLICK attribute specifies the procedure to run when the button is clicked, and the LANGUAGE attribute tells the browser which scripting language to expect.