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.
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:
<script language = "VBScript">
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 thisdocument.write("Welcome to VBScript")
Listing shown below gives the complete listing for this code:<script language = "vbscript">document.write("Welcome to VBScript"></script>
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.<script>dim x,y,zx = inputbox("Enter First number")y = inputbox("Enter Second number")z = x+ydocument.write("Value is" +z)</script>
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.
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 syntaxwindow.propertyname
It denotes the page in the current browser window (Currently opened page). The properties and methods of this object are outlined belowBGColor -> Close -> onclickFGColor -> Open -> OnkeydownLastmodified -> Write -> onkeypressWriteln -> onmouseoveronmouseoutonmousemoveonmousedown
For example, to change the background color you can code like thisdocument.body.bgcolor = "red"
It refers to the events being processed. Its usage is as shown below. The changes will be in effect after the page is loaded.<script For = "window" Event = "onload" language = " vbs">document.body.bgcolor = "red"document.body.text = "blue"</script>
This Object is used to move forward/backward through the browsers history list.
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.
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.
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<html><head><title>Form Validation using VBScript</title><script language = "vbscript">sub s1_OnClick()if form.t1.value="" thenmsgbox("Enter your name")form.t1.focuselseif len(form.t2.value) <>2 thenmsgbox("please enter your age")form.t2.focuselseif form.t3.value="" thenmsgbox("Enter a valid email")form.t3.focuselseif instr(form.t3.value,"@") = 0 thenmsgbox("Your email is in invalid format")form.t3.focusend ifend sub</script></head><BODY><form name = "form" method = "post">Enter your name:-<input type = "text" name = "t1"><br>Enter your age:-<input type = "text" name = "t2"><br>Enter your email:-<input type = "text" name ="t3"><center><input type = "button" name = "s1" value = "Clickhere"></center></form><P> </P></BODY>
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.
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.
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.
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.
document.write(int(56.66)) returns 56.
document.write(int(-56.66)) returns 57.
document.write(fix(56.66)) returns 56.
document.write(fix(-56.66)) returns -56.
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.