Your First VBScript Exercise

The easiest way to learn any language is to work with it. So let's get right into exercise 1 and expose you to the process of using VBScript in your web pages. Just follow along with the step-by-step instructions to create your first script-enabled web page.

Exercise 1: Adding VBScript to a Web page

A completed copy of this part of the exercise can be found in the file exer1_v1.html.

In this exercise, you will create an HTML document and add a simple script to respond to a click event generated by a command button. You will need to be familiar with creating and testing an HTML document.

Creating the HTML Document

Open up a text editor application and insert the following HTML code:

<HTML>

<HEAD> 

<TITLE>Working With VBScript: Exercise 1</TITLE> 

</HEAD>

<BODY>

  <H1>Your First VBScript Exercise</H1>

  <P> By utilizing VBScript you can give your web pages actions. 

  Click on the button below to see what we mean. </P>

  <FORM NAME="frmExercise1">

    <INPUT TYPE="Button" NAME="cmdClickMe" VALUE="Click Me">

  </FORM>

</BODY>

</HTML>

Save the file and test it by loading it into Internet Explorer. The resulting page should be similar to the figure below.

Click Me button


Try out the Click Me button. Does anything happen?

In the next part we will add a script to provide functionality for the Click Me command button.

Adding VBScript

A completed copy of this part of the exercise can be found in the file exer1_v2.html.

Re-open the HTML document that you created in part 1, if necessary. Modify the document adding the lines shown with shading below:

<HTML>

<HEAD>

<TITLE>Working With VBScript: Exercise 1</TITLE>

</HEAD>

<BODY>

  <H1>Your First VBScript Exercise</H1>

  <P> By utilizing VBScript you can give your Web pages actions. 

  Click on the button below to see what we mean. </P>

  <FORM NAME="frmExercise1">

    <INPUT TYPE="Button" NAME="cmdClickMe" VALUE="Click Me">

    <SCRIPT FOR="cmdClickMe" EVENT="onClick" LANGUAGE="VBScript">

      MsgBox "A simple example of VBScript in action."

    </SCRIPT>

  </FORM>

</BODY>

</HTML>

Save the file and test it by loading it into Internet Explorer. Try out the Click Me button. The result is shown below:

Your 1st VBScript Exercise

How It Works

Let's take a look at the three lines of code that you added. We want you to have a firm understanding of what the VBScript code is doing and how it is implemented within the HTML document. The first line defines a script. The FOR argument specifies that this script is for the button named cmdClickMe, the name we have given our command button with the HTML <INPUT> tag. The EVENT argument says that this script should be run when the button is clicked. The LANGUAGE argument states that this is a VBScript module.

<SCRIPT FOR="cmdClickMe" EVENT="onClick" LANGUAGE="VBScript">

The second line is the only line of VBScript in this HTML document. The MsgBox function simply displays a message dialog. You will see more of the MsgBox function later in this tutorial. The third line marks the end of our script.

In the previous part, we simply inserted the VBScript module right after the HTML tag that defined the command button. While this method is functional, it is not the preferred approach. HTML by itself can be confusing to read with all of its tags and text. Adding VBScript into the middle all of this just makes it even more complicated. A more organized alternative is to place all of your script together within the HTML document. The following steps introduce you to this approach.

Preferred Method to Include VBScript

A completed copy of this part of the exercise can be found in the file exer1_v3.html.

  • Re-open the HTML document that you created in part 2, if necessary, and remove the lines that you added there:

<SCRIPT FOR="cmdClickMe" EVENT="onClick" LANGUAGE="VBScript">

  MsgBox "A simple example of VBScript in action."

</SCRIPT>

  • Modify the document adding the scripting lines as shown in the light shading below:

<HTML>

<HEAD>

<TITLE>Working With VBScript: Exercise 1</TITLE>

<SCRIPT LANGUAGE="VBScript">

<!-- Instruct non-IE browsers to skip over VBScript modules.

  Sub cmdClickMe_OnClick

    MsgBox "A simple example of VBScript in action."

  End Sub

-->

</SCRIPT>

</HEAD>

<BODY>

  <H1>Your First VBScript Exercise</H1>

  <P> By utilizing VBScript you can give your Web pages actions. 

  Click on the button below to see what we mean. </P>

  <FORM NAME="frmExercise1">

    <INPUT TYPE="Button" NAME="cmdClickMe" VALUE="Click Me">

  </FORM>

</BODY>

</HTML>

Save the file and test the file by loading it into Internet Explorer. When you try out the Click Me button, the result is the same as the previous example.

How It Works

This second method starts with the same <SCRIPT> tag as the previous example. At the center of this script are three lines that provide the functionality for our page. The first line defines a sub-procedure called cmdClickMe_OnClick. This will be executed any time that the control cmdClickMe is clicked. This type of procedure is referred to as an event procedure. The event is the user clicking the button. The procedure that we associate with this event is executed every time the button is clicked.

Sub cmdClickMe_OnClick

On the second line we find the MsgBox function again, while the third line marks an end to our subroutine.

Don't get too hung up on understanding all of the details of this right now, you will see plenty more examples along the way.

Summary

That's it-you just created your first VBScript-enabled web page. Along the way you have learned:

  • How to add VBScript into your web pages

  • Ways to tie HTML and VBScript together to provide functionality to your pages

  • Why you should encase your VBScript modules within HTML comments

Next up we will look at what VBScript has to offer in the way of variables.

Previous   Next
Intranet Journal
VBScript Tutorial
Contents
· What is VBScript?
· How to Use this Tutorial

Lesson 1
· Adding VBScript to Web Pages
· The <SCRIPT> Tag
· Non-Supporting Browsers
· Your 1stirst VBScript Exercise

Lesson 2
· Working with Variables
· Declaring Variables
· Scope of Variables
· Constants
· Arrays
· Your 2nd VBScript Exercise

Lesson 3
· Objects and VBScript
· Adding Objects to Web Pages
· Linking VBScript with Objects
· Your 3rd VBScript Exercise

Lesson 4
· Controlling VBScript Routines
· Conditional Statements
· Looping Statements
· Your 4th VBScript Exercise

Lesson 5
· Using VBScript with Forms
· Validating Your Forms
· Your 5th VBScript Exercise

· Summary

OF INTEREST
· Intranet Journal's JavaScript FAQ
· Basic JavaScript by Example