VBScript has been designed to make it easier to develop client-side Web applications that run on the Web browser. A long time ago (which translates to about a year ago when talking about the Internet), people were discovering the virtues of providing dynamic information to users browsing a Web site. CGI applications were typically used to create Web pages that displayed dynamic information. Although this worked well in some cases, it did not work well for some people. The development of a CGI application typically meant learning a programming language such as C or C++, compiling the CGI application, transferring it to the CGI directory of a Web server, and testing the CGI application for bugs. Even the slightest change to the application meant recompiling the entire application and repeating the process of copying the application to a CGI directory and testing the application for bugs. To solve this problem, Web scripting languages such as JavaScript and VBScript were developed to aid in the development of client-side and server-side CGI applications.
Although Web scripting languages are widely used in the development of client-side CGI applications that run on the Web browser, Web scripting languages are also highly suitable for developing sophisticated server-side CGI applications. For example, Microsoft's latest server-side Web application development tool, Microsoft Visual InterDev, uses VBScript to interact with various objects on the Web server. Therefore, skills you learn in this chapter can be used not only to develop interactive client-side Web applications but also to develop server-side Web applications in the form of Active Server Pages. The purpose of this chapter is to introduce you to VBScript and discuss how various capabilities of VBScript can be used to develop interactive Web applications. See Appendixes C, "VBScript Language Reference," and D, "Coding and Naming Conventions for VBScript Developers," for information on VBScript coding conventions.
You do not have to install VBScript per se. The VBScript engine is part of Internet Explorer and is installed on your system when you install Internet Explorer. If Internet Explorer 3.0 or later is not installed on your system, please install it before proceeding any further. Even if you have Internet Explorer 3.0 installed on your system, visit Microsoft's Internet Explorer Web page to find out the availability of a more recent version of Internet Explorer. (Internet Explorer 4.0 or later should be available for download by the time you read this.)
http://www.microsoft.com/ie/default.aspfor the most up-to-date information about Internet Explorer.
There are many benefits to using VBScript. VBScript is a powerful, lightweight, easy-to-use, freely available, cross-platform, cross-language scripting language for the Internet. It is designed to leverage the skills and investments of millions of Visual Basic programmers to the Internet. This is great news for all the millions of Visual Basic programmers who want to leverage their Visual Basic skills to the Internet. If you are familiar with VBA or Visual Basic, you will feel right at home with VBScript. Before proceeding any further, let's quickly examine why VBScript is a powerful, lightweight, easy-to-use, freely available, cross-platform, and cross-language scripting language.
VBScript can be used to leverage the skills of millions of Visual basic programmers to the Internet. VBScript can be used to easily create active and intelligent Web pages. Because VBScript is supported by Microsoft, in the near future, you also will see a great deal of integration among VBScript and Internet Explorer/Active Desktop, Windows NT/95, Microsoft Office, and Microsoft BackOffice.
VBScript is a subset of Microsoft Visual Basic and is upwardly compatible with Visual Basic for Applications (VBA). VBA is shipped with Microsoft Office applications to make it easier for developers to build custom solutions using various components of Microsoft Office. The capability to provide scripting, automation, and customization capabilities for Web browsers and Web servers is a major feature of VBScript. If you are already familiar with Visual Basic, very shortly you will be able to leverage your skills to the Internet using VBScript. Be sure to visit Microsoft's VBScript home page for the most up-to-date information about VBScript. Microsoft's VBScript Web page contains in-depth information on VBScript data types, operators, flow control, event procedures, functions, and procedures. A VBScript language reference and tutorial also can be found at Microsoft's VBScript Website.
http://www.microsoft.com/ie/default.asp
VBScript programs are defined between the two HTML tags <SCRIPT LANGUAGE=VBS> and </SCRIPT>. Browsers that support VBScript read the VBScript application contained between these two HTML tags and execute it after checking the code for any syntax errors. How VBScript works is shown in Figure 12.1.
FIGURE 12.1. How VBScript works.
As you can see in Figure 12.1, a VBScript application is part of a regular HTML
file and is enclosed between the two HTML tags <SCRIPT LANGUAGE=VBS>
and </SCRIPT>. When a Web browser that supports VBScript encounters
the <SCRIPT LANGUAGE=VBS> HTML tag, all text between that tag and
</SCRIPT> is treated as a VBScript application and is checked for
syntax errors. If the application does not contain any syntax errors, it is executed
on the Web browser. If any syntax errors are detected, they are flagged by the VBScript
interpreter, as shown in Figure 12.2.
FIGURE
12.2. Syntax errors in VBScript programs
are flagged by the VBScript interpreter.
The World Wide Web would be a better place for Web application developers if everyone used the same Web browser. Because this is not the case, you need to make sure your VBScript- enhanced Web pages are backwardly compatible with Web browsers that do not support VBScript. This is done by hiding the VBScript code from Web browsers that do not understand how to execute VBScript code. In order to hide VBScript code from "technologically challenged" Web browsers, VBScript code can be enclosed in two HTML comment tags, as shown in Listing 12.1. This prevents Web browsers that do not support VBScript from attempting to display the VBScript application as if it were part of the HTML code of the Web page.
Listing 12.1. Hiding VBScript Code from Web Browsers that Do Not Support VBScript.
<SCRIPT LANGUAGE=VBS>
<!-- To hide VBScript code from technologically challenged
Web browsers
... VBScript code ...
!-->
</SCRIPT>
Writing the classic Hello World! application with VBScript is very easy. For the
purpose of this example, you will be shown how to create a Web page similar to the
one shown in Figure 12.3. This Web page will have three buttons. The first button
displays a message box with a greeting, the second button displays the current time,
and the third button displays the current date. The Hello World! application uses
HTML form controls for data entry. For an in- depth overview of HTML form controls
and how they are used to interact with users, see Chapter 14, "Developing Advanced
Forms for Database Access and Application Interfaces." Chapter 14 also covers
advanced HTML form development with VBScript.
FIGURE
12.3 The VBScript version of the classic
Hello World! application.
The Hello World! dialog box, shown in Figure 12.4, is displayed each time a user clicks the "Please click here for message box" button in Figure 12.3. The Hello Word! application makes use of VBScript events. A VBScript event is generated each time a user interacts with a certain object on the Web browser. VBScript subroutines can "listen" and react to events. For example, when a user clicks a button, a VBScript subroutine can execute a series of VBScript statements. Visit Microsoft's VBScript information Web page (http://www.microsoft.com/VBScript/) for a comprehensive list of Web browser events supported by VBScript. If you look at the HTML page of the VBScript application (see lines 22 and 23 of Listing 12.5), you'll notice that the command button associated with the Hello World! dialog box is named BtnHello. As shown in line 1 of Listing 12.2, the OnClick event of the BtnHello command button is associated with the BtnHello_OnClick subroutine. Each time a user clicks the "Please click here for message box" button, the Web browser invokes the BtnHello_OnClick subroutine and any VBScript code defined in that subroutine is executed.
The BtnHello_OnClick subroutine is a very simple VBScript subroutine. The first three lines of code create strings that are displayed in the dialog box shown in Figure 12.4. Notice how the string concatenation operator (&) is used in line 4 to merge two strings and assign the result to a variable. The result then is displayed in the message box shown in Figure 12.4.
Listing 12.2. The BtnHello_OnClick subroutine
1: Sub BtnHello_OnClick 2: titleString = "World Wide Web Data Base Developer's Guide Using Visual Basic" 3: helloString = "Hello world! Welcome to the fun filled " 4: helloString = helloString & "world of VBScript programming!" 5: MsgBox helloString, 0, titleString 6: End Sub
FIGURE 12.4. The Hello World! dialog box.
The BtnTime_OnClick subroutine is very similar to the BtnHello_OnClick subroutine. The only difference is that rather than concatenating two strings, it concatenates a string with the result of a function. The time function returns the current time. As shown in Figure 12.5, line 3 of Listing 12.3 displays the current time in a dialog box. The BtnTime_OnClick subroutine is associated with the OnClick event of the BtnTime command button.
Listing 12.3. The BtnTime_OnClick Subroutine.
1: Sub BtnTime_OnClick 2: timeString = "The time is " & time 3: MsgBox timeString , 0, "Time Dialog Box" 4: End Sub
FIGURE 12.5. The Time dialog box.
The Date dialog box displays the current date, as shown in Figure 12.6. As you can see in line 2 of Listing 12.4, the result of one function (date) can be used as an argument (input) of another function (DateValue).
Listing 12.4. The BtnDate_OnClick Subroutine.
1: Sub BtnDate_OnClick 2: dateString = "Today's date is " & DateValue(date) 3: MsgBox dateString , 0, "Date Dialog Box" 4: End Sub
FIGURE 12.6. The Date dialog box.
For your reference, the full source code of the Hello World! application is listed in Listing 12.5.
Listing 12.5. The Hello World! Web page.
1: <!-- 2: (c) 1996 Sanjaya Hettihewa 3: http://www.NetInnovation.com/sanjaya 4: !--> 5: 6: <HTML> 7: <HEAD> 8: <TITLE>VBScript Tutorial: Hello World!</TITLE> 9: </HEAD> 10: 11: <BODY BGCOLOR="#FFFFFF" TEXT="#0000FF" 12: LINK="#B864FF" VLINK="#670000" ALINK="#FF0000"> 13: 14: <IMG SRC="vbscript.jpg"><P> 15: 16: <B><FONT FACE="Comic Sans MS" SIZE=6 COLOR=RED> 17: VBScript Tutorial: <FONT></B> 18: <I><FONT FACE="Comic Sans MS" SIZE=5 COLOR=BLUE> 19: "Hello World!" </I><P><FONT> 20: 21: <form> 22: <INPUT TYPE=BUTTON VALUE="Please click here for message box" 23: NAME="BtnHello"> 24: <INPUT TYPE=BUTTON VALUE="Click here for current time" 25: NAME="BtnTime"> 26: <INPUT TYPE=BUTTON VALUE="Click here for current date" 27: NAME="BtnDate"> 28: </form> 29: 30: <SCRIPT LANGUAGE="VBScript"> 31: <!-- To hide VBScript code from technologically challenged browsers 32: 33: Sub BtnHello_OnClick 34: titleString = "World Wide Web Data Base Developer's Guide Using Visual Basic" 35: helloString = "Hello world! Welcome to the fun filled " 36: helloString = helloString & "world of VBScript programming!" 37: MsgBox helloString, 0, titleString 38: End Sub 39: 40: Sub BtnTime_OnClick 41: timeString = "The time is " & time 42: MsgBox timeString , 0, "Time Dialog Box" 43: End Sub 44: 45: Sub BtnDate_OnClick 46: dateString = "Today's date is " & DateValue(date) 47: MsgBox dateString , 0, "Date Dialog Box" 48: End Sub 49: !--> 50: </SCRIPT> 51: 52: </BODY> 53: 54: </HTML>
Before developing VBScript applications, it is important that you understand their structure. A typical VBScript application is composed of the following components:
The HTML code may contain any number of valid HTML statements. Listing 12.6 contains valid HTML statements in every line of code except lines 23-42.
VBScript code delimiters separate VBScript code from the HTML code of a Web page. Lines 23-24 and 41-42 of Listing 12.6 are examples of VBScript code delimiters. Notice how the HTML comment tags <!-- and --> are used to enclose the VBScript source code. These tags prevent VBScript-challenged Web browsers from interpreting the VBScript code as part of the text of the Web page and displaying it on the browser window.
A VBScript application is composed of one or more VBScript subroutines. VBScript subroutines are defined using the following syntax:
Sub <name of subroutine> ...VBScript statements... End Sub
VBScript subroutines are contained between the two HTML tags <SCRIPT LANGUAGE="VBS"> and </SCRIPT>. Certain events associated with various objects of a Web page trigger VBScript subroutines to perform certain tasks. For example, when a user submits a form, before the data is sent to the Web server for processing, a VBScript subroutine can examine and validate the data entered by the user.
See lines 25-30, 32-35, and 37-40 in Listing 12.6 for examples of VBScript subroutines.
Listing 12.6. A Typical VBScript Application.
1: <HTML> 2: <HEAD> 3: <TITLE>VBScript Tutorial: Hello World!</TITLE> 4: </HEAD> 5: 6: <BODY BGCOLOR="#FFFFFF" TEXT="#0000FF" 7: LINK="#B864FF" VLINK="#670000" ALINK="#FF0000"> 8: 9: <B><FONT FACE="Comic Sans MS" SIZE=6 COLOR=RED> 10: VBScript Tutorial: <FONT></B> 11: <I><FONT FACE="Comic Sans MS" SIZE=5 COLOR=BLUE> 12: "Hello World!" </I><P><FONT> 13: 14: <FORM> 15: <INPUT TYPE=BUTTON VALUE="Please click here for message box" 16: NAME="BtnHello"> 17: <INPUT TYPE=BUTTON VALUE="What time is it?" 18: NAME="BtnTime"> 19: <INPUT TYPE=BUTTON VALUE="What date is it?" 20: NAME="BtnDate"> 21: </FORM> 22: 23: <SCRIPT LANGUAGE=VBS> 24: <!-- To hide VBScript code from technologically challenged browsers 25: Sub BtnHello_OnClick 26: titleString = "World Wide Web Data Base Developer's Guide Using Visual Basic" 27: helloString = "Hello world! Welcome to the fun filled " 28: helloString = helloString & "world of VBScript programming!" 29: MsgBox helloString, 0, titleString 30: End Sub 31: 32: Sub BtnTime_OnClick 33: timeString = "The time is " & time 34: MsgBox timeString , 0, "Time Dialog Box" 35: End Sub 36: 37: Sub BtnDate_OnClick 38: dateString = "Today's date is " & DateValue(date) 39: MsgBox dateString , 0, "Date Dialog Box" 40: End Sub 41: --> 42: </SCRIPT> 43: 44: </BODY> 45: </HTML>
Prior to client-side scripting languages such as VBScript, Web pages were mostly static entities. Interactivity in a Web page required the execution of a CGI application on the server and the display of the results of the CGI application on the Web browser. Although this worked well for some applications, it tied up valuable network and system resources. VBScript allows Web page developers to create multimedia-rich, interactive Web pages with great ease while conserving network bandwidth and Web-server system resources. The next sections discuss the role of VBScript in Web page development.
ActiveX controls are powerful components that can be used to build sophisticated Web applications. By themselves, ActiveX controls are capable of performing limited tasks. For example, the Microsoft Forms 2.0 ComboBox ActiveX control is capable of displaying a list of items, and the Microsoft Forms 2.0 Image ActiveX control is capable of displaying a graphical image. Although, by themselves, these two components perform very limited tasks, VBScript can be used to glue together the two ActiveX controls and develop a VBScript application that automates these ActiveX controls. For example, a VBScript subroutine can enable a user to change the image displayed in the Microsoft Forms 2.0 Image ActiveX control when an image is selected using the Microsoft Forms 2.0 ComboBox ActiveX control.
VBScript is ideal for developing dynamic Web applications that immediately respond to user interactions. The Mr. Potato Head application discussed next is an example of a Web application that is better implemented with a client-side scripting language such as VBScript as opposed to a server-side CGI application.
The application shown in Figure 12.7 is the CGI version of Mr. Potato Head. After a user selects various physical attributes of Mr. Potato Head, that information is transmitted to the Web server. A CGI application creates a graphic of Mr. Potato Head according to the physical attributes selected by the user and transmits the image to the Web browser, as shown in Figure 12.8. The CGI implementation of Mr. Potato Head is network intensive because data must be transferred between the Web browser and the Web server each time a user makes a selection. The CGI implementation is also processor intensive for the Web server because it must process a CGI request and create a Mr. Potato Head each time the user changes the appearance of Mr. Potato Head.
FIGURE
12.7.Selecting physical properties of Mr. Potato Head.
FIGURE
12.8. Image of Mr. Potato Head created
by a CGI application.
The ActiveX version of Mr. Potato Head (see Figure 12.9) addresses limitations of the CGI version of Mr. Potato Head. As you can see, the ActiveX version is more interactive and easier to use because it enables the user to change physical attributes of Mr. Potato Head on-the-fly without interacting with the Web server. Users can select physical attributes and drag-and-drop them on Mr. Potato Head. The ActiveX version of Mr. Potato Head is less processor intensive because it does not communicate with the Web server each time the user makes a change; it is less network intensive because all the processing is done locally.
http://www.microsoft.com/ie/most/howto/layout/eggplant/begin.htm
to experiment with the ActiveX version of Mr. Potato Head.
FIGURE 12.9. The ActiveX version of Mr. Potato Head.
Error checking is a very important aspect of Web-application development. Lack of error checking usually results in flaky applications that are frustrating to use. Listed next are examples of how VBScript is used to perform error checking and to validate data entered by users.
VBScript applications can modify Web-browser objects such as the background color of the current Web page. This feature is particularly useful when creating sophisticated Web applications. For example, a VBScript subroutine of a multiframe Web application can change the contents of several frames when a user selects a URL or presses a button.
When developing applications using VBScript (or any other programming language), you should create source code that is easy to maintain and read. Messy source code often leads to buggy applications that are hard to maintain and debug. The following tips will help you develop VBScript applications that are easy to maintain.
While indentation does not affect the way a VBScript application is executed, the lack of indentation can make an application extremely difficult to debug and maintain. You should indent control structures of applications as shown in Listing 12.7--particularly if it is a complex or large VBScript application. Also, do not be afraid to add blank lines between VBScript code segments to enhance readability and clarity.
Listing 12.7. Indentation Makes It Easier to Read VBScript Source Code.
Sub BtnEvaluate_OnClick
IF (OperatorBox.Value = "?") THEN
MsgBoxString = "A valid operator is required to carry out "
MsgBoxString = MsgBoxString & "an evaluation."
MsgBoxString = MsgBoxString & chr(10)
MsgBoxString = MsgBoxString & "Valid operators are: +, -, *"
MsgBox MsgBoxString , 48 , "Invalid operator!"
ELSE
IF (OperatorBox.Value = "+") THEN
answer = CDbl(Operand1Box.Value) + CDbl(Operand2Box.Value)
ELSEIF (OperatorBox.Value = "-") THEN
answer = CDbl(Operand1Box.Value) - CDbl(Operand2Box.Value)
ELSEIF (OperatorBox.Value = "*") THEN
answer = CDbl(Operand1Box.Value) * CDbl(Operand2Box.Value)
End IF
MsgBox answer , 64 , "Results of calculation"
Operand1Box.Value = answer
Operand2Box.Value = 0
END IF
End Sub
Sub AddDigit ( digit )
REM Just in case there are any preceeding zeros or spaces
Operand1Box.Value = CDbl (Operand1Box.Value)
IF ( OperatorBox.Value = "?") THEN
IF ( Len ( Operand1Box.Value ) < 14 ) THEN
Operand1Box.Value = Operand1Box.Value & digit
Operand1Box.Value = CDbl (Operand1Box.Value)
ELSE
TooManyDigits
END IF
ELSE
IF ( Len ( Operand2Box.Value ) < 14 ) THEN
Operand2Box.Value = Operand2Box.Value & digit
Operand2Box.Value = CDbl (Operand2Box.Value)
ELSE
TooManyDigits
END IF
END IF
End Sub
The code continuation character is used to split relatively long VBScript statements. Generally, if a VBScript statement is over 80 characters long, you should use the code continuation character to break the VBScript statement into two or more lines. This makes it easier to indent the VBScript application for easy reading, as shown in Listing 12.8. The code continuation character is an underscore (_) placed at the end of the line to break a longer line, as demonstrated in lines 3-5 of Listing 12.8. Notice how the code continuation character makes the VBScript source code easier to read by preserving the indentation of the VBScript code.
Listing 12.8. VBScript Code With the Code Continuation Character.
1: Sub OperatorBox_OnChange 2 3: IF (NOT((OperatorBox.Value = "+" ) OR _ 4: (OperatorBox.Value = "-" ) OR _ 5: (OperatorBox.Value = "*" ) OR _ 6: (OperatorBox.Value = "?" ))) THEN 7: MsgString = "Do not type invalid characters " 8: MsgString = MsgString & "into the operator text box! " 9: MsgString = MsgString & chr(10) 10: MsgString = MsgString & "The operator text box will now be reset." 11: MsgString = MsgString & chr(10) & chr(10) 12: MsgString = MsgString & "Valid input: +, -, *" 13: MsgBox MsgString , 48 , "Invalid input detected!" 14: OperatorBox.Value = "?" 15: END IF 16: 17: End Sub
Commenting your source code can save hours or even days of application development time. In the software development industry, quite often, more time is spent maintaining existing applications than developing new applications. Commenting your source code makes it easier for you (or someone else) to understand your application and modify it without creating undue side effects. To insert a comment in a VBScript application, precede the comment with an apostrophe (`) or the keyword Rem, like so:
` This is a comment
or
Rem This is a comment
VBScript is a powerful, light-weight scripting language for creating interactive, multimedia-rich, and ActiveX-enhanced Web applications. Before scripting languages such as VBScript, dynamic Web pages were created by server-side CGI applications. In some cases, the execution of server-side CGI applications is unnecessarily resource intensive. VBScript can be used in such cases to create dynamic content without any interaction with the Web server. If you are using Internet Information Server 3.0 or later, VBScript can also be used to develop server-side Web applications in the form of Active Server Web Pages.
