Learn how to work with VBScript

HTML is the language, which is primarily used to design WebPages. We can be able to do formatting and design forms with the help of HTML. But nothing beyond like (user actions, validations etc) are not possible with HTML.

In short, HTML is a purely static web language. It cannot change dynamically. As time went by developers required new techniques to build user friendly WebPages. Hence the need for scripting languages increased. At present there are two important scripting languages. They are JavaScript and VBScript.

About VBScript

VBScript is derived from Microsoft Visual Basic (A Visual Studio family product). In fact all the properties of Visual Basic are available in VBScript. It is easy to program in VBScript if you already know little bit about Visual Basic. But VBScript has very limited capabilities as compared to VB. Currently, only Internet Explorer Supports VBScript. Netscape still not supports it. But both browsers supports Server Side Scripts (ASP) written using VBScript. Let us learn about client side scripting by using VBScript.

What you need to code VBScript

Notepad, Browser (Internet Explorer 5 or above), Microsoft Visual Interdev 6.0 (recommended)

In every script code which you write, it’s necessary to use the <script> tag which indicates the name of the language you are using. In VBScript we can write like as shown below:

<pre style="background-color: #ffffff; margin: 0em; width: 100%; font-family: consolas,'Courier New',courier,monospace; font-size: 12px"><span style="color: #0000ff">&lt;</span><span style="color: #800000">script</span> <span style="color: #ff0000">language</span> = <span style="color: #0000ff">"VBScript"</span><span style="color: #0000ff">&gt;</span>

It’s better to code scripts in the header of the page. Firstly, we will see how to print “Welcome to VBScript”. We are writing to document. Hence the document is treated as an object. (We will learn about objects later)

write is one of the method in the document Object. Whatever you need to print, pass it on to the write method as the String. Our code looks like this

<pre style="background-color: #ffffff; margin: 0em; width: 100%; font-family: consolas,'Courier New',courier,monospace; font-size: 12px">document.write("Welcome to VBScript") 

Listing shown below gives the complete listing for this code:

<pre style="background-color: #ffffff; margin: 0em; width: 100%; font-family: consolas,'Courier New',courier,monospace; font-size: 12px"><span style="color: #0000ff">&lt;</span><span style="color: #800000">script</span> <span style="color: #ff0000">language</span> = <span style="color: #0000ff">"vbscript"</span><span style="color: #0000ff">&gt;</span>
document.write("Welcome to VBScript"&gt;
<span style="color: #0000ff">&lt;/</span><span style="color: #800000">script</span><span style="color: #0000ff">&gt;</span> 

Accepting user input using Input box() function

You can accept inputs from the user by using Inputbox() function. Here is a script which accepts two numbers and prints its sum on to the screen.

<pre style="background-color: #ffffff; margin: 0em; width: 100%; font-family: consolas,'Courier New',courier,monospace; font-size: 12px"><span style="color: #0000ff">&lt;</span><span style="color: #800000">script</span><span style="color: #0000ff">&gt;</span>
dim x,y,z
x = inputbox("Enter First number")
y = inputbox("Enter Second number")
z = x+ydocument.write("Value is" +z)
<span style="color: #0000ff">&lt;/</span><span style="color: #800000">script</span><span style="color: #0000ff">&gt;</span> 

Using objects in VBScript

In the last session, we have seen a basic introduction about the VBScript. In this session we will examine about Objects. Many kinds of activities like displaying of dialog boxes, changing colors etc can be done on the client side browser. These activities are done with the help of objects . It is vital to learn about these objects if you want to perform effectively. Each of these objects can contain properties, methods and events which we have to use in our scripts. There are seven objects (Window, Frames, Document , Event, History, Navigator and Screen) and one collection. Collections are a group of same item. Let us discuss about various objects in detail.

READ  Basic Steps to Register a Domain Name

Window object

It’s the top level object. It denotes browser window itself. If the document is having frames then each frame is considered as a window object. Methods and properties of this object can be referenced without the name of the object. You can access its properties by using the syntax

<pre style="background-color: #ffffff; margin: 0em; width: 100%; font-family: consolas,'Courier New',courier,monospace; font-size: 12px">window.propertyname 
&nbsp;

Document object

It denotes the page in the current browser window (Currently opened page). The properties and methods of this object are outlined below

<pre style="background-color: #ffffff; margin: 0em; width: 100%; font-family: consolas,'Courier New',courier,monospace; font-size: 12px">BGColor -&gt; Close -&gt; onclick 
FGColor -&gt; Open -&gt; Onkeydown 
Lastmodified -&gt; Write -&gt; onkeypress 
Writeln -&gt; onmouseover 
onmouseout 
onmousemove 
onmousedown 

For example, to change the background color you can code like this

<pre style="background-color: #ffffff; margin: 0em; width: 100%; font-family: consolas,'Courier New',courier,monospace; font-size: 12px">document.body.bgcolor = "red"

Event object

It refers to the events being processed. Its usage is as shown below. The changes will be in effect after the page is loaded.

<pre style="background-color: #ffffff; margin: 0em; width: 100%; font-family: consolas,'Courier New',courier,monospace; font-size: 12px"><span style="color: #0000ff">&lt;</span><span style="color: #800000">script</span> <span style="color: #ff0000">For</span> = <span style="color: #0000ff">"window"</span> <span style="color: #ff0000">Event</span> = <span style="color: #0000ff">"onload"</span> <span style="color: #ff0000">language</span> = <span style="color: #0000ff">" vbs"</span><span style="color: #0000ff">&gt;</span>
document.body.bgcolor = "red"document.body.text = "blue"
<span style="color: #0000ff">&lt;/</span><span style="color: #800000">script</span><span style="color: #0000ff">&gt;</span>

History Object

This Object is used to move forward/backward through the browsers history list.

Location Object

This Object is used to manipulate the URL of the current page. Some of the properties available in this object are Hash , host, hostname, href, pathname, port, protocol etc. For example, if you apply the hostname property, VBScript returns the hostname of the URL supplied.

Navigator Object

This Object provides information about the client browser such as the Appname and Appversion. Its properties are as follows Appcodename, Platform, Systemlanguage, Appname, Appversion, Cpuclass, Useragent etc.If you are having Visual Interdev you can try these properties on your own. This object will also inform us whether your browser is Java enabled or not, Cookie enabled or not.

READ  Basic Steps to deploy a website

Screen Object

It provides information about the clients screen, display features, color depth etc. Some of the properties available are as follows Height, Width, Availheight, Availwidth, Colordepth etc.

With this topic we conclude our discussion on Objects. In the next session, we will examine a real world example of validating HTML forms using this scripting language.

Validating HTML Forms

In this session, we will examine how to validate forms by using VBScript.

Validating means checking the correctness of entries made in forms. For example, if an user submits the form without entering the name, age or any other required information, he/she will be prompted to enter the same. The power behind this is that all the checking’s are done on the client side itself and the browser is not depending upon server. The valuable online hours can be reduced due to this client side validation. Following listing shows how to perform validations using VBScript .

Study the code given below

<pre style="background-color: #ffffff; margin: 0em; width: 100%; font-family: consolas,'Courier New',courier,monospace; font-size: 12px"><span style="color: #0000ff">&lt;</span><span style="color: #800000">html</span><span style="color: #0000ff">&gt;</span>
<span style="color: #0000ff">&lt;</span><span style="color: #800000">head</span><span style="color: #0000ff">&gt;</span>
<span style="color: #0000ff">&lt;</span><span style="color: #800000">title</span><span style="color: #0000ff">&gt;</span>Form Validation using VBScript
<span style="color: #0000ff">&lt;/</span><span style="color: #800000">title</span><span style="color: #0000ff">&gt;</span>
<span style="color: #0000ff">&lt;</span><span style="color: #800000">script</span> <span style="color: #ff0000">language</span> = <span style="color: #0000ff">"vbscript"</span><span style="color: #0000ff">&gt;</span>
sub s1_OnClick()
if form.t1.value="" then
msgbox("Enter your name")
form.t1.focus
elseif len(form.t2.value) <span style="color: #0000ff">&lt;</span><span style="color: #0000ff">&gt;</span>2 then
msgbox("please enter your age")
form.t2.focus 
elseif form.t3.value="" then
msgbox("Enter a valid email")
form.t3.focus 
elseif instr(form.t3.value,"@") = 0 then
msgbox("Your email is in invalid format")
form.t3.focus 
end if
end sub
<span style="color: #0000ff">&lt;/</span><span style="color: #800000">script</span><span style="color: #0000ff">&gt;</span>
<span style="color: #0000ff">&lt;/</span><span style="color: #800000">head</span><span style="color: #0000ff">&gt;</span> 

<span style="color: #0000ff">&lt;</span><span style="color: #800000">BODY</span><span style="color: #0000ff">&gt;</span>
<span style="color: #0000ff">&lt;</span><span style="color: #800000">form</span> <span style="color: #ff0000">name</span> = <span style="color: #0000ff">"form"</span> <span style="color: #ff0000">method</span> = <span style="color: #0000ff">"post"</span><span style="color: #0000ff">&gt;</span>
Enter your name:-<span style="color: #0000ff">&lt;</span><span style="color: #800000">input</span> <span style="color: #ff0000">type</span> = <span style="color: #0000ff">"text"</span> <span style="color: #ff0000">name</span> = <span style="color: #0000ff">"t1"</span><span style="color: #0000ff">&gt;</span><span style="color: #0000ff">&lt;</span><span style="color: #800000">br</span><span style="color: #0000ff">&gt;</span>
Enter your age:-<span style="color: #0000ff">&lt;</span><span style="color: #800000">input</span> <span style="color: #ff0000">type</span> = <span style="color: #0000ff">"text"</span> <span style="color: #ff0000">name</span> = <span style="color: #0000ff">"t2"</span><span style="color: #0000ff">&gt;</span><span style="color: #0000ff">&lt;</span><span style="color: #800000">br</span><span style="color: #0000ff">&gt;</span>
Enter your email:-<span style="color: #0000ff">&lt;</span><span style="color: #800000">input</span> <span style="color: #ff0000">type</span> = <span style="color: #0000ff">"text"</span> <span style="color: #ff0000">name</span> =<span style="color: #0000ff">"t3"</span><span style="color: #0000ff">&gt;</span>
<span style="color: #0000ff">&lt;</span><span style="color: #800000">center</span><span style="color: #0000ff">&gt;</span><span style="color: #0000ff">&lt;</span><span style="color: #800000">input</span> <span style="color: #ff0000">type</span> = <span style="color: #0000ff">"button"</span> <span style="color: #ff0000">name</span> = <span style="color: #0000ff">"s1"</span> <span style="color: #ff0000">value</span> = <span style="color: #0000ff">"Click 
here"</span><span style="color: #0000ff">&gt;</span><span style="color: #0000ff">&lt;/</span><span style="color: #800000">center</span><span style="color: #0000ff">&gt;</span>
<span style="color: #0000ff">&lt;/</span><span style="color: #800000">form</span><span style="color: #0000ff">&gt;</span>
<span style="color: #0000ff">&lt;</span><span style="color: #800000">P</span><span style="color: #0000ff">&gt;</span>&amp;nbsp;<span style="color: #0000ff">&lt;/</span><span style="color: #800000">P</span><span style="color: #0000ff">&gt;</span>
<span style="color: #0000ff">&lt;/</span><span style="color: #800000">BODY</span><span style="color: #0000ff">&gt;</span>

Analysis

A sub procedure has been defined inside the <script > tag. This is the way in which a procedure is defined in VBScript. The procedure has to be finished by using the End Sub keyword. s1 is the name of the button and onClick is the corresponding event handler used. When the button named s1 is clicked, the script triggers and the corresponding messages are shown. If a field is empty, the appropriate error messages will appear.

READ  Learn how to Activate a Popup JavaScript window

Moreover if a user didn’t entered the “@” sign in the email text field, a message “Your email is is invalid format” will be shown . After showing the message boxes, the focus will be on the concerned text fields so that user can straight away type in the required info without moving the mouse . With little effort you can include your own interesting messages.

Functions at a glance

VBScript provides us with a whole lot of functions with which you can manipulate Strings, perform calculations and can display date and time related information on a web page. In this session, we will analyze the important functions.

String Functions

Following table shows some of the String related functions

Asc() -> Returns the ASCII code for the first character.
Chr() -> Returns the character for code given as parameter.
Instr(start,x1,x2,type info) Searches strings.
Lcase() -> Returns the lowercase string.

Ucase() -> Returns the uppercase string.
Left(str text, number pos) -> Returns the specified string from left.

Strcomp() -> Compares two strings.
Val() -> Converts a string to a number.

Math Functions

Following table shows some of the Math related functions

Abs(number) -> Returns absolute value of the argument
Rnd() -> Generates random numbers.
Sqr(number) -> Returns the square root of the argument.

Sin(number) -> Returns sine of an angle.
Tan(number) -> Returns tangent of an angle.
Int(number) -> Returns whole number portion.
Fix(number) -> Returns whole number portion.

Notes

Int() function:
document.write(int(56.66)) returns 56.
document.write(int(-56.66)) returns 57.

Fix() function:
document.write(fix(56.66)) returns 56.
document.write(fix(-56.66)) returns -56.

Date Functions

Following table shows some of the Date related functions
Date() -> Returns the date (System Date).
Day()  -> Returns numeric value of the date (1- 31).

Year() -> Returns the current year.
Weekday() -> Returns the weekday (Mon – Sun).

Time() -> Returns the current time (System Time).

Hour() -> Returns the current hour.
Now() -> Returns both date and time.

One Response to "Learn how to work with VBScript"

  1. Timur I. Alhimenkov   January 27, 2009 at 10:58 pm

    Wow! Thank you very much!
    I always wanted to write in my site something like that. Can I take part of your post to my site?
    Of course, I will add backlink?

    Sincerely, Your Reader

    Reply

Leave a Reply

Your email address will not be published.