What Can You Do with Client-Side Scripting?

The three main things that you can do with client-side scripting are:

• Interact with the client
• Handle events
• Validate data entry

These tasks are accomplished by manipulating the Internet Explorer Document Object Model (DOM). We'll examine each of these uses in turn.

8.2.1 Interacting with the Client

First, let's take a look at a small script that displays a message to the user when the web page loads, as shown in Figure 8-2; its HTML source is shown in Example 8-5. Don't worry about the code now; we'll take a more in-depth look at it later.

Example 8-5. A little VBScript interactivity

Matt's Wonderful World of Web

This simple example will pop up a message box to the client when the page loads in the window. Not too complex, but a nice touch and more importantly, not something you can do without a scripting language. Let's take a little closer look at what is happening here.

Figure 8-2. Web page produced by Example 8-5

First, we declare the subroutine in the

section of the HTML page. This isn't required, but we highly recommend it as good practice. Better to have all of your code in one place so you can find the subroutines faster when you need to make corrections or changes.

The next section is the actual VBScript that has been written for this event:

sub window_onload
 msgbox "Welcome to my Website"
end sub

This should be a common sight for anyone who has written any VB or VBA code. Here we have declared a subroutine that will fire when the page is being loaded. In this case, it will display a simple message box to the user welcoming them to our site.

From this small example, it is easy to see how VBScript allows you to add some flavor and depth to your web pages.

Now that you've seen a small example, let's expand on it and add a little more interactivity. Our HTML source code is shown in Example 8-6.

Example 8-6. A simple interactive web page

Matt's Wonderful World of Web

 

You'll notice that there are now two different subroutines in the

section of the HTML document. In addition to the original one from Example 8-1, there is now a new one that is tied to abutton that we have placed on the page. Again, nothing too complex here, so we will walk through the new code quickly.

You can see that we have added a button to the form with the following line of HTML:

We have named the button cmdMessage, and in the

section of the document, we have created an event handler for this button called cmdMessage_onclick. This event will fire every time this button is clicked. Let's take a look at what the code does:

sub cmdMessage_onclick
 msgbox "Hello " & txtName.value
end sub

This should seem familiar to you by know. We are again calling the MsgBox function, but this time we are appending a variable value to our message. In this code, we are referencing the value of the input box directly, but we could have also used a declared variable as well:

sub cmdMessage_onclick
 dim txtUser
 txtUser = txtName.value
 msgbox "Hello " & txtUser
end sub

There is no real advantage to using a variable in this instance, but most of your code won't be this simple, so it is a good idea to get used to handling user input or other information with variables.

8.2.2 Handling Events

The previous section demonstrated some simple code based on events that can be triggered from within a web page. Before we discuss data validation, we should touch on the idea of event-driven programming and look at how we can use VBScript to handle events that take place on your web pages. Table 8-1 displays some commonHTML intrinsic controls and their associated events.

Table 8-1. HTML intrinsic controls and their events

Control	Event
Button	OnClick
Check Box	OnClick
Image	OnClick
Form	OnReset OnSubmit
Radio	OnClick
Submit	OnClick
Text	OnBlur OnChange OnFocus OnSelect
Textarea	OnBlur OnChange OnFocus OnSelect
Window	OnLoad

This is by no means an exhaustive list, just some of the more common events that are available to you. For a complete list of all of the HTML controls and their corresponding events, we recommendHTML & XHTML: The Definitive Guide, Fifth Edition, by Chuck Musciano and Bill Kennedy (O'Reilly).

Most of the code that you write will be in response to some sort of action that the user takes. When you write code for a specific event, it is called an event handler. In other words, you have created code that will be executed in response to a specific event. The concept of event-driven programming is what makes VB and VBA so popular. In client-side scripting, you have laid the framework with HTML, and you are using VBScript to respond to the way the user interacts with the web page.

The code in Example 8-6 handles two different events, one when the window is loaded into the browser, and the other when the user clicks on a button. Both of these event handlers use the method of appending the name of the event being handled to the object name; the VBScript parser knows to associate this code with the proper event. In the case of the button, it looked like this:

Sub btnUser_onclick
Msgbox "Display a message"
End Sub

This method is familiar to VB and VBA developers, since it is how event handlers are named within those two environments.

In addition, you can use the

As in most coding, this is really a matter of which style you prefer. Developers who have worked with VB and VBA may prefer the implicit style, while HTML programmers adding VBScript to their toolbox may prefer the explicit method. There is no functional difference between the two, so the choice is yours.

Now that we've had a look at how to write code for the events, let's look at putting that into a little more useful practice. Next we'll take a look at data validation and how we can use VBScript to make sure that the user has entered the correct data before we do anything important with it.

8.2.3 Data Validation

One of the best uses of client-side scripting is to check user input before processing it. Let's build on our earlier example and add a simple routine to check whether data entered by the user meets our requirements. Example 8-7 asks the user to enter a user ID and then checks to make sure that she has entered only numeric data.

Example 8-7. Simple data validation in client-side script

Matt's Wonderful World of Web

 

Enter your ID Number

First, we've added some instructions to our HTML to let the user know that we want him or her to enter a numeric user ID. Second, we have made some changes to the onClick event for the Submit button. Now when the user submits the information, an If statement is executed that checks whether the value the user entered is a number. If it is, the user gets a message telling them that the value is correct; if not, the user is prompted to re-enter a correct value.

This is a good example of doing some basic data checking. Let's expand this and look at validating data that the user has entered into a form. In order to do this, we'll need to expand our HTML a bit and add some new elements. Example 8-8 shows the result.

Example 8-8. Validating form data

Matt's Wonderful World of Web

 

 

 

New User
Previous User
 

Here we have added a form to the HTML document. Inside the form, we have added two radio buttons. We want to make sure that the user has checked one of the buttons before we submit any information. In order for all of the radio buttons to be a group, you have to remember to give them the same name. Grouping the buttons allows us to loop through the collection to make sure that one of them has been selected. We achieve this by creating the radUserChecked function that will return a value to let us know the state of the group.

Next, let's look at how to handle whether data is submitted to the server. Ultimately, this is the reason that you are performing data validation. Let's use the example of a web page that asks the user to submit an email address. First, we will need to determine whether the user has entered anything; second, we will parse the text looking for an @ somewhere in the string. The web page is shown in Example 8-9.

Example 8-9. Cancelling form submission

Please Enter Your Email Address
 

In this example, we prevented the user from posting the form data without entering a valid email address. The event handler for the HTML Form object's OnSubmit event (frmEmail_OnSubmit in our example) is a function, rather than a subroutine, and the function's return value indicates whether the default action of the event in the case of the OnSubmit event, that the form data be submitted to the URL defined by the ACTION attribute should occur. If the function returns True (its default value), the form data is submitted. But if it returns False, the submission is cancelled. In Example 8-9, when we detected that the user had not entered the correct data, we sent back a value of frmEmail_onsubmit = False, which cancels the submit action.

As you can see, you can check and handle most user interaction with VBScript. The previous examples are pretty straightforward, but don't be fooled by them. You can build in incredibly complex client-side scripting as needed. Now let's move on to more interaction with the browser itself by taking a look at the Document Object Model.

8 3 Understanding the IE Object Model