A Visual Basic for Web Work

The newest Visual Basic sibling lets you code smart and interactive Web pages.

Rick Dobson

VBScript, which is the newest kid on the Visual Basic block, is the Web-centric dialect of Microsoft's popular visual-programming platform. It ships with Internet Explorer 3.0 (IE3), Microsoft's Web browser. VBScript can reside on Web pages and interact directly with Hypertext Markup Language (HTML). Its lightweight scripts speed downloads over the wire. By providing programming capabilities on the Web page, VBScript offers a route to smarter, more dynamic, more interactive Web experiences.

Will VBScript become a popular development platform? There are millions of Visual Basic and Visual Basic for Applications developers out there. V BScript could assist them in acquiring Web skills using familiar tools.

VBScript Object Model

VBScript has an object-oriented syntax. You must learn the properties, methods, and events associated with objects to become effective with this kind of platform. The figure "VBScript Object Model" presents an overview of the 11 objects in the IE3 browser. The generic "object" deals with external objects, such as ActiveX controls, Java applets, and ActiveX components. VBScript controls a session by interacting with these objects.

The window object is at the top level. Documents and all other objects in the window's immediate scope, except for frames and scripts, have a one-to-one relationship with the window object. Frames sit in windows but are themselves windows. Any one window can have multiple frames. Your VBScript code sits on a Web page in a script object.

Object events offer hooks that let you invoke scripts. For example, you use the onLoad window even t to perform functions that need to take place when a window opens. The corresponding onUnload event lets you execute cleanup functions before a page exits a browser.

A document object's properties and methods pertain to the current Web page. For example, the bgColor and fgColor properties let you read and change the background and foreground colors of the current page. You must use prefix references for documents (and for all other objects, except windows) in VBScript. Document methods, such as write , must be prefaced with their antecedent (e.g., document.write string writes the contents of string to the screen).

Forms, links, anchors, and general objects that are outside the scope of IE3 reside in documents. Each document can have many of these. Each form, in turn, can have more than one element, such as a button. Scripts reference most of these objects through their name attribute. For instance, Document.NameOK refers to a form that has a name attribute of NameOK. When dealing with ActiveX controls, Java applets, and ActiveX components, you instead use the id attribute to reference these objects.

VBScript Programming Techniques

The "Code Exhibit" section presents a series of four examples that illustrate object-oriented style with VBScript. Visual Basic developers will instantly notice the resemblance between VBScript and their current development environment.

I start with the classic "Hello World." The document's write method normally inserts a string on the page. In this instance, its argument is an expression based on the For loop's index. Each pass through the loop evaluates the expression for a different index that sets the font tag's value. The writeln method on the loop's second line includes the "Hello World" message. This method causes the line to advance after writing to the screen. You must surround your code with the tags <PRE>...</PRE> to have preformatted t ext displayed "as is" for the line-advancement feature to work.

The second example shows how to use buttons to control hyperlinking. Several lines at the bottom of the fragment create the button. The button appears on the screen with the caption "Go to Byte." The button's name attribute is button1 . I use an event procedure to invoke the hyperlink. A two-part name identifies this kind of procedure: objectname_eventname .

When viewers click on the button, they generate the onclick event. This in turn launches the button1_onclick procedure. The location object in this procedure represents the current uniform resource locator (URL). The assignment line reevaluates the href property for the location object so that it launches the jump to the URL (in this case, the BYTE Site). The assignment feature lets you dynamically change hyperlinks in response to user choices.

The third code segment demonstrates how to clean data locally through a client-side script. Thi s can reduce bandwidth use and improve performance. A user enters his or her name in a text box and then clicks on a button to submit the form. In a real application, the form object would have action and method attribute settings that describe its function. The button's type attribute is not submit , but button . If I used a type of submit , the form would go to the server without the opportunity for it to be intercepted with a local procedure. The event procedure cmdSubmit_onclick reminds the user to enter a value into the name field if he or she clicks on the button without entering one. If the data is valid, it passes it on the server with the form's submit method.

My final example illustrates the building of animated Web pages with VBScript. The script toggles two images. One image shows "Byte" in white letters on a black background. The other presents "Gotta have it" in black letters on the Web page's background. VBScript accomplishes this feat with the aid of the Microsoft label and timer ActiveX controls. Both controls are available free at the ActiveX Web gallery ( http://www.microsoft.com/activex/gallery/ ).

The snippet shows the code for the timer control. You first bracket all references to ActiveX controls with the <OBJECT>...</OBJECT> tag pair. Use the param tags to make design-time property settings for the object. The label control code has the same structure as that of the timer with its own classid , id , and param settings. The procedure in the example fires when the timer event occurs, once a second. An If...Then...Else statement toggles the attributes. The current value of the label's caption property determines whether the label receives the settings for one image or the other.

Where Do You Go from Here

If you are like me, you will decide that for VBScript, you gotta have it. If you know either Visual Basic or Visual Basic for Applications, and you want to do custom Web applications for folks browsing with IE3, you will almost surely use it. IE3 is available for Windows 95/NT, Mac, and Windows 3.1 computers, and Microsoft has plans to deliver it to Unix. As of this writing, Microsoft has a beta Web server that lets you program ActiveX content with VBScript. All this will widen the opportunities to use your VBScript skills.

---

NOTE: Download a copy of IE3 with VBScript from http://www.microsoft.com/ie/ and visit http://www.microsoft.com/vbscript/ to get the documentation. For a complete list of the IE3 objects, properties, methods, and events, you can go to http://www.microsoft.com/intdev/sdk/ .

---

Code Exhibit

Example 1: Object model writes dynamically


<HTML>
<PRE>
<SCRIPT language="VBScript">
'Progressively larger message
For I = 3 TO 6
  document.write("<FONT SIZE = "&i&">")
  document.writeln("Hello World.")
Next
</SCRIPT>
</PRE>
</HTML>


Example 2: Hyperlinking button


<HEAD>
<SCRIPT LANGUAGE="VBScript">
Sub button1_onclick
  locati
on.href = "
http://www.byte.com/
"
end sub
</SCRIPT>
</HEAD>
<BODY>
<FORM>
<input type="button" value="Go to Byte"
  name="button1"></FORM>
</BODY>


Example 3: Clean data locally


<SCRIPT LANGUAGE="VBScript"> 
Sub cmdSubmit_OnClick
  Dim frmForm
  Set frmForm = Document.NameOK
  If frmForm.txtText1.Value = "" Then
      MsgBox "Type your name first."
  Else
      frmForm.Submit
  End If
End Sub
</SCRIPT></HEAD>
<BODY>
<FORM NAME="NameOK">
Enter your name: 
<INPUT NAME="txtText1" TYPE="TEXT" SIZE="25">
<INPUT NAME="cmdSubmit" TYPE="BUTTON" VALUE="Submit">
</FORM>


Example 4: Animate a page


<OBJECT>
 classid="clsid:59CCB4A0-727D..."
 id=timer1 align=middle>
   <param name="Interval" value="1000">
   <param name="Enabled" value="True">
</OBJECT>
<SCRIPT LANGUAGE=
"VBSCRIPT">
Sub timer1_timer
If Label1.Caption <> "Byte" Then
   Label1.Caption = "Byte"
   Label1.BackStyle = 1
   Label1.ForeColor = 16777215
 Else
   Label1.Caption = "Gotta have it"
   Label1.BackStyle = 0
   Label1.ForeColor = 0
 End If
End Sub
</SCRIPT>

---

VBScript Object Model

illustration_link (11 Kbytes)

VBScript uses these objects to manage and control a Web session.

---

Rick Dobson is president of CAB, Inc., a database and Internet development consultancy. His byline appears in numerous magazines. You can contact him at Rick_Dobson@msn.com .