- Introduction
- Introduction to VBScript
- Tools Used with VBScript
- The VBScript Language
- Using VBScript in Internet Explorer
- The Windows Scripting Host
- From Here...
This chapter is from the book
This chapter is from the book
This chapter is from the book
Using VBScript in Internet Explorer
The following sections describe how to use client-side VBScript in your Web pages. VBScript can also be used on the server, as discussed in Chapter 27. Although server-side VBScript can be browser-independent, client-side VBScript requires that the user have Microsoft Internet Explorer. Currently, Netscape users cannot run VBScript code. Remember to keep your audience in mind when using VBScript.
Events and Procedures
In standard Visual Basic, you respond to events by placing code in event procedures. You can also use event procedures in VBScript, although writing them is not as easy because the event procedure declarations are not provided for you.
As an example, consider the following HTML code, which creates two form elements, an input box and a button:
<INPUT Type="text" Name="txtLastName" Value="Smith" Size=20> <INPUT Type="Button" Name="cmdCalculate" Value="Perform Calculation">
Because the preceding two form elements are named, all you have to do to create an event procedure is write a VBScript subroutine with the appropriate name and parameters. For example, by creating a VBScript subroutine called cmdCalculate_OnClick(), you can get IE to execute code in response to the button's Click event. The code in Listing 30.2 uses VBScript events in a simple interest calculator.
Listing 30.2 :Using VBScript to Access Web Page Elements
<HTML>
<HEAD><TITLE>Simple example of VBScript</TITLE></HEAD>
<SCRIPT Language = "VBScript">
<!--
Function CalcInterest(P,R,T)
CalcInterest = P * R * T
End Function
Sub cmdCalculate_OnClick()
Dim lPrincipal
Dim dblRate
Dim nYears
Dim cInterest
lPrincipal = CLng(txtPrincipal.value)
dblRate = CDbl(txtRate.value)
nYears = CInt(txtTime.value)
cInterest = CalcInterest(lPrincipal, dblRate, nYears)
MsgBox "Your Interest is " & FormatCurrency(cInterest)
End Sub
Sub txtRate_OnChange()
If CDbl(txtRate.Value) > 1 Then txtRate.Value = txtRate.Value / 100
End Sub
-->
</SCRIPT>
<BODY>
<BR>
Enter Principal: <INPUT Type="Text" Name="txtPrincipal" Value="100000"><BR>
Enter Int. Rate: <INPUT Type="Text" Name="txtRate" Value="0.08"><BR>
Time in Years: <INPUT Type="text" Name="txtTime" Value="20"><BR>
<INPUT Type="Button" Name="cmdCalculate" Value="Calculate Interest">
</BODY>
</HTML>
NOTE
Listing 30.2 uses HTML form elements, which have a different set of events and properties. Note, for example, the use of the Value property instead of the Text property. However, as you will see in an upcoming example, you can also insert controls onto Web pages, which have a more familiar set of properties and events.
In the sample Web page in Listing 30.2, Internet Explorer knows which event procedure to run because the event procedure is named appropriately. However, you could just as easily specify a different Click event procedure by naming it in the button's HTML:
<INPUT Type="Button" Name="myButton" Value="Calculate" OnClick="MyProcedure">
This syntax is useful with images in Web pages. Consider the standard method of creating an image hyperlink:
<A HREF="http://www.newsite.com/"> <IMG SRC="myimage.gif"></A>
This approach works, but your only option is to jump to a new page. A more versatile method is to specify a Click event in the IMG tag. The Click event procedure could use VBScript code to move to the new site or perform whatever action you wanted:
<SCRIPT Language = "VBScript">
<!--
Sub ImageClicked()
Window.Navigate ("http://www.newsite.com/")
End Sub
-->
</SCRIPT>
<IMG SRC="myimage.gif" OnClick="ImageClicked">
One easy way to find out the available events is to use the Script Wizard in Microsoft FrontPage. Simply insert the element you want in FrontPage and bring up the Script Wizard, which is shown in Figure 30.7.
){kind=link}
The Script Wizard provides a hierarchical view of events.
In the previous example, you examined the Navigate method of Internet Explorer's Window object. This method causes Internet Explorer to open the specified URL. Another useful function is document.write, which writes HTML to the browser window:
<SCRIPT Language = "VBScript"> <!-- document.write "The current date and time is " & Now --> </SCRIPT>
Look on the Microsoft Web site for a complete list of the objects and methods available in Internet Explorer.
Forms
Forms are HTML elements used to send information back to the Web server. The following is an example of an HTML form with two text boxes:
<FORM Action="formproc.asp" METHOD="POST" NAME="frmTest"> Please enter your name and E-Mail address below:<BR> Name: <INPUT Type=Text size=40 name=txtName> <BR> Email: <INPUT Type=Text size=30 name=txtEmail> <BR> <INPUT Type=Submit Name=cmdSend Value="Send Values to Server"> </FORM>
The Submit button tells the browser to send all the <INPUT> fields between the <FORM> tags to the Web server. The Web server (in this case, the Active Server Page formproc.asp) can then access each of these elements and put them in a database. However, before you submit the form to the server, you might want to use VBScript to validate or change the information. Listing 30.3 shows an example of validating form data with VBScript.
Listing 30.3 :Modifying and Submitting a Form with VBScript
<HTML>
<HEAD><TITLE>Simple example of Forms</TITLE></HEAD>
<SCRIPT Language = "VBScript">
<!--
Sub submitform()
Dim nPos
Dim sUserType
Dim f
Set f = Document.frmMain
'Make sure name is not blank
If Trim(f.txtName.Value) = "" Then
Msgbox "Please enter your name and try again!"
Exit Sub
End if
'Validate E-Mail Address Format
nPos = Instr(f.txtEmail.Value,"@")
If nPos = 0 Then
Msgbox "Please use the format user@server.domain"
Exit Sub
End If
'Classify user as business or other
nPos = Instr(LCase(f.txtEmail.Value),".com")
If nPos <> 0 Then '.com = commercial domain
sUserType = "BUSINESS"
Else
sUserType = "OTHER"
End If
'Put user type in hidden form field
f.txtUserType.Value = sUserType
'Submit the form
f.Method = "POST"
f.Action = "formproc.asp"
f.submit
End Sub
-->
</SCRIPT>
<BODY>
Please fill out all fields below:<BR><BR>
<FORM NAME=frmMain>
Name: <INPUT Type=Text maxlength=20 size=20 name=txtName> <BR>
Email: <INPUT Type=Text maxlength=30 size=30 name=txtEmail> <BR>
<INPUT Type=Hidden name=txtUserType>
<INPUT Type=Button OnClick=submitform Value="Continue">
</FORM>
</BODY>
</HTML>
CAUTION
Remember that VBScript does not run in Netscape Navigator, so you may want to perform validation tasks on the server.
In Listing 30.3, many of the form tasks are handled in VBScript instead of HTML. For example, the ACTION and METHOD parameters are left out of the form declaration. No submit button was provided because the form was submitted from VBScript code. Also, notice the hidden form field, which stores a value that the user did not enter. A sample run of the page in Listing 30.3 is shown in Figure 30.8.
){kind=link}
VBScript validates form data before submitting it to the Web server.
Using ActiveX Controls
In addition to creating objects with the CreateObject method, you can embed objects in your Web page by using the <OBJECT> tag. The <OBJECT> tag allows you to place ActiveX controls in a Web page. Your VBScript code can then access these objects, as in the list box example shown here:
<HTML>
<BODY>
<OBJECT id=lstmain classid=clsid:8BD21D20-EC42-11CE-9E0D-00AA006002F3
width=152 height=164>
<PARAM name=ScrollBars value=3>
<PARAM name=DisplayStyle value=2>
</OBJECT>
<SCRIPT Language = "VBScript">
<!--
Dim i
For i = 1 to 10
lstMain.AddItem "Item " & i
Next
Sub lstMain_Click()
Msgbox "You Clicked " & lstMain.List(lstMain.ListIndex)
End Sub
-->
</SCRIPT>
</BODY>
</HTML>
The different parts of the <OBJECT> tag are as follows:
-
ID. Indicates the name VBScript uses to identify the object, such as the Name property in Visual Basic.
-
CLASSID. Acts as a unique identifier from the Windows Registry that identifies the object.
-
CODEBASE. Provides the URL for the OCX or CAB file used to download the object. In the example, the ListBox control is built into Internet Explorer, so the CODEBASE parameter is not needed.
-
height and width. Indicate the size of the object.
-
PARAM tags. Control behavior of an object, such as the Properties window in Visual Basic.
The best way to insert ActiveX controls into a Web page is to do so in FrontPage and then copy the resulting HTML into your Web page. Figure 30.9 shows the list of ActiveX controls in FrontPage.
){kind=link}
Class IDs can be determined by using FrontPage. The controls that begin with "Microsoft Forms" are built in, or intrinsic to, Internet Explorer and do not require downloading.
In Chapter 14, "Creating ActiveX Controls," you learned how to create your own ActiveX controls, which can be placed on a Web page. Using your own controls offers several advantages over plain VBScript and HTML, including the following:
-
Full VB functionality is available.
-
Your code cannot be easily viewed by the user, as with script code.