VBScript Tutorial

These are a few lessons serving as fundamentals to
scripting and computer language programming. These

lessons can serve as a prerequisite to Windows Script
Hosting, ASP, ASP.NET, Visual Basic, or other scripting
languages.
Lessons
Introduction to VBScript
Scripts Fundamentals
Forms and Web Controls
VBScript Variables
VBScript operations
Procedures and Functions
Built-In Functions
Conditional Statements
Counting and Looping
Content Downloaded From www.functionx.com
Created by www.ebooktutorials.blogspot.in

Introduction to VBScript

The VBScript Computer Language

Introduction
The Internet has changed and improved in the past few years. From the simple static pages
that webmasters used to create with the only goal of making some documents available to
potential visitors of their sites, to the full blown and unique platform that the web has become.
The tags of the HTML language, however diversified, were not enough to display sophisticated
types of documents. Based on this, new languages were developed to respond to new needs.
For its part, Microsoft decided to transform one of its existing languages for use on the
Internet. The original language was Basic, which derived in Visual Basic. Microsoft therefore
created a scripting language adapted for the web but which has its roots in Visual Basic. The
language was named Visual Basic Scripting Edition, or VBScript. That's the language we are
going to learn on this site.
VBScript is very popular in the world of Microsoft platforms because it appears easy to those
who have programmed in Microsoft Visual Basic.

VBScript Requirements and Lessons Prerequisites
VBScript is embedded in the Microsoft Internet Explorer browser. Therefore, to use this tutorial
(to learn from the lessons on this site), you will need:
A computer that runs a Microsoft Windows operating system. I should mention that you will
need Internet Explorer but since Windows 95, I have never seen a version of Microsoft
Windows that doesn't ship with Internet Explorer. This means that, at the time of this
writing, it is included in Microsoft Windows 95, 98, Me, NT, 2000, XP, Windows Server
2003. For this site, I will be using Internet Explorer 6. If you have an older version of
Internet Explorer, you can freely download an updated version from the Microsoft web site.
Therefore, I assume that, as long as you are using a Microsoft Windows operating system,
you already have the browser you need.
A text editor. Notepad is a wonderful text editor and it ships with every version of Microsoft
Windows operating system. For this tutorial, I will exclusively use Notepad and all my
instructions will be for Notepad. If you have another text editor or if you developed your
own, feel free to use it.
This tutorial assumes that you already know HTML, which you can also learn here.
If you are learning VBScript with the goal of creating Active Server Pages (ASP), you can use
any of the major browsers. This means that you can create files that have VBScript scripts with
a file extension of .asp. You can view such files in Netscape or Opera.
Learning VBScript

Introduction
This site assumes that you know the basics of creating folders or directories, creating and
saving a file to the appropriate folder or directory. You should also know all the basic
operations of opening, using and closing an application. Sometimes in the tutorials, you will be
asked to perform some of these actions.
There are various ways you can create a folder in Microsoft Windows using My Computer,
Windows Explorer, or an application such as Notepad. In the My Computer or Windows
Explorer, you can first select the drive or an existing folder in which you want to create a new
folder or file. Then, on the right side (My Computer) or in the right frame (Windows Explorer),
right-click and position your mouse on New:
To create a folder, click Folder, type a name for the folder, and press Enter.
To create a file, click the type of file from the list, type a name an press Enter.
For the following exercise, we will create a file and a folder using Notepad.

Practical Learning: Using Folders and Files
1. To start Notepad, from the task bar, click Start -> (All) Programs -> Accessories ->
Notepad.
2. In the empty file of Notepad, type VBScript Lessons
3. To create a folder, on the main menu, click File -> Save.
4. In the Save As dialog box, click the arrow of the Save In combo box and select the C:
drive
5. Click the Create New Folder button
6. Type VBScript Lessons and press Enter
7. In the list of folders, make sure you can see vbslessons

8. Click Cancel
9. To save the file, on the main menu of Notepad, click File -> Save
10. In the Save As dialog box, click the arrow of the Save In combo box and select the C:
drive.
11. Find and double-click VBScript Lessons to display it in the Save In combo box.
12. Click the arrow of the Save As Type combo box and select All Files
13. Click the File Name box and type exercise1.htm

14. Click Save

Previewing a File
To preview one of the files on this tutorial, you will need a browser such as Netscape, Internet
Explorer, or Mozilla Firefox. To preview an HTML file, you can display its folder in the Home
Directory, My Computer, or Windows Explorer. After displaying the folder, you can double-click
the file. If the browser is already opened, on the main menu, you can click File -> Open.
Locate the folder or directory where the file was saved and select the HTML file you want to
preview.
Practical Learning: Previewing an HTML file
1. Open Windows Explorer
2. Locate the JavaScript Lessons folder where you saved the exercise1.htm file to display it
3. Double-click the file

4. A browser should open with the file. After viewing the file, close the browser.

Copyright 2004-2010 FunctionX, Inc. Next

Scripts Fundamentals

The Script and the Document

The SCRIPT Tag
One of the most usual ways you will use VBScript is to display text, as if you were using HTML.
Indeed, added just a few instructions, you can use any of the HTML tags and make them part of
your script. Therefore, everything you have learned in HTML is valid here.
To set the instructions of a script from the HTML tags, the section that has the script must start
with the <SCRIPT> tag and end with the </SCRIPT> tag, as follows:
<SCRI PT>

</ SCRI PT>
You can write the tag in all uppercase, all lowercase, or a mix
Because a script is written in a particular language that is not HTML, and because there are
various scripting languages in the industry, to use a script, you should let the browser know
what (particular) scripting language you are using. To let the browser know, inside of the
<SCRIPT> tag, type the word Language, followed by the = sign, followed by the name of the
script language included in double-quotes. For example, to use a VBScript in a page, start the
section with <Script language="VBScript"> and end it with the closing tag. Therefore the
scripting section can be delimited with:
<Scr i pt Language=" VBScr i pt >

</ Scr i pt >
Like HTML, VBScript is not case sensitive. This means that script, SCRIPT, script, and Script
are the same. Therefore, you can also include a script in the following:
<SCRI PT LANGUAGE=" VBScr i pt " >

</ SCRI PT>
The section between the opening <Script> tag and the closing </Script> tag is called the
body of the script. Everything that is part of the body of a script belongs to the script.

The Document Object
VBScript uses an object called Document. This object manages many of the instructions that
VBScript can handle for HTML. One of the functions of that object is to display a string on the
screen. A string is text that the browser is asked to use "as is". The function used is called
Write. The syntax of the Write function of the Document object is:
Document . Wr i t e( String)
The String to display can be provided in double-quotes or as a variable as we will learn soon.
Here is an example of displaying somebody's name using the Document.Write() function:
Document . Wr i t e( " J acques Fame Ndongo" )
</ SCRI PT>
To display various lines of text, you can use as many Document.Write() lines as you need.
A file can have many different script sections and you can include as many lines of code as
necessary in a file. To have different script sections, start each with the <SCRIPT> tag and
close it with the closing tag. Here is an example:
Document . Wr i t e( " Book Ti t l e: " )
Document . Wr i t e( " VBScr i pt Pr ogr ammi ng" )
</ SCRI PT>
Document . Wr i t e( " Aut hor : Mar t i n Russel Bi t ha" )
Document . Wr i t e( " Publ i sher : Les moul es Pr ess" )
Document . Wr i t e( " Year Publ i shed: 1998" )
</ SCRI PT>

Practical Learning: Introduction to VBScript
1. Start your text editor such as Notepad
2. In the empty file, type the following:

<Scr i pt Language=" VBScr i pt " >
Document . Wr i t e( " Leavi ng Sydney" )
Document . Wr i t e( " When we deci ded t o l eave, we knew we wer e " )
Document . Wr i t e( " maki ng a har d deci si on. We had spent so much " )
Document . Wr i t e( " t i me t hi s had become our new home. A f ew weeks " )
Document . Wr i t e( " or mont hs bef or e, we want ed t o make Sydney " )
Document . Wr i t e( " our newl y f ound set t l ement , a per manent pl ace " )
Document . Wr i t e( " we coul d pr oudl y cal l our s. I t appear ed t hat , " )
Document . Wr i t e( " unpr edi ct abl y, f at e had deci ded ot her wi se. " )
</ Scr i pt >
3. Save the file as sydney.htm in your VBScript Lessons folder
4. Preview the web page:

5. Notice that the whole text displays as one paragraph.
After previewing the page, return to Notepad.

VBScript and HTML Tags
Everything you learned in HTML is readily available in VBScript. VBScript allows you to mix its
own syntax with HTML tags. In order to use this more efficiently, you should understand the
mechanics of VBScript.
When you include a string in your VBScript and send it to Internet Explorer, everything that is
part of the string is sent to the browser "as is". Once the browser receives your string from
the Document.Write() function, it gets rid of the Document.Write words, the parentheses
and double-quotes. Then it treats the rest, the part of the string, as HTML code. If the string
that was sent is just a group of characters, the browser would display its text. If you send any
special character, the browser would analyze it to find out if the character is a special HTML
symbol. If it is, it would be treated appropriately. For this reason, a script can result in
complex code or difficult to interpret errors.
Based on this, you can include any HTML tag as part of the string. Here is an example:
Document . Wr i t e( " Book Ti t l e: VBScr i pt Pr ogr ammi ng<br >" )
</ Scr i pt >
When the browser receives this script, it gets rid of everything that is not part of the string.
After this operation, the remaining text becomes:
Book Ti t l e: VBScr i pt Pr ogr ammi ng<br >
This is what the browser would try to display. As it happens, there is an HTML tag in the code,
namely the break tag <br>; therefore, the break tag would be applied.
You can include any HTML tag as part of your script. Make sure you use the HTML tags
appropriately; VBScript will not correct or interpret your tags, it would send them to the
browser as they are written.
Practical Learning: Including HTML Tags in a Script
1. Change the file as follows:

Document . Wr i t e( " Leavi ng Sydney<br>" )
Document . Wr i t e( " When we deci ded t o l eave, we knew we wer e " )
Document . Wr i t e( " or mont hs bef or e, we want ed t o make Sydney " )
Document . Wr i t e( " unpr edi ct abl y, f at e had deci ded ot her wi se. " )
</ Scr i pt >
2. Save the file and preview the page in your browser
3. After previewing the page, return to Notepad
4. To make the page more attractive, change it as follows:

Document . Wr i t e( " <h1><font face=Verdana color=red>Leavi ng Sydney</font></h1>" )
Document . Wr i t e( " <p>When we deci ded t o l eave, we knew we wer e " )
Document . Wr i t e( " or mont hs bef or e, we want ed t o make <b>Sydney</b> " )
Document . Wr i t e( " <i>unpr edi ct abl y</i>, f at e had deci ded ot her wi se. </p>" )
</ Scr i pt >
5. Save the file. Return to browser and refresh it
6. To use more tags, for example to create a table in your script, change the file as follows:

Document . Wr i t e( " <t abl e bor der =0 wi dt h=550>" )
Document . Wr i t e( " <t r >" )
Document . Wr i t e( " <t d wi dt h=100% al i gn=cent er >" )
Document . Wr i t e( " <f ont f ace=&quot ; Gar amond, Ti mes New Roman, Geor gi a&quot ;
si ze=6 col or =&quot ; #FF0000&quot ; >" )
Document . Wr i t e( " <b>Leavi ng Sydney</ b>" )
Document . Wr i t e( " </ f ont >" )
Document . Wr i t e( " </ t d>" )
Document . Wr i t e( " </ t r >" )
Document . Wr i t e( " </ t abl e>" )
Document . Wr i t e( " <t d wi dt h=100%>" )
Document . Wr i t e( " or mont hs bef or e, we want ed t o make <b>Sydney</ b> " )
Document . Wr i t e( " <i >unpr edi ct abl y</ i >, f at e had deci ded ot her wi se. </ p>" )
Document . Wr i t e( " <hr col or =#FF9933>" )
Document . Wr i t e( " <t d wi dt h=100% al i gn=r i ght >" )
Document . Wr i t e( " Aut hor : Ar t hur D. Pal e<br >" )
Document . Wr i t e( " Ti t l e: St or i es Of My Li f e" )
</ Scr i pt >
7. Save the file and check it in the browser

8. After previewing the page, return to Notepad and close it.
Techniques of Managing Code

HTML Comments
In some cases, when an older browser interprets your code, it may not be able to validate it.
To hide your code from an older browser, include it between .
A comment is a line of code that is not examined, read, or interpreted by the browser. This
means that the browser doesn't display anything that is part of a comment. Therefore, a
comment can be written in plain English or the language you are using, with words aligned
however you want them. To add a comment to your HTML code, you can include it between
.

VBScript Comments
There are two ways you can write a line of comment in VBScript. To create a comment, start
the section with the keyword Rem. Everything on the right side of Rem is part of the
comment. Here is an example:

RemThi s l i ne i s i gnor ed. I can wr i t e i t however I want .
Document . Wr i t e( " 2006 FI FA Wor l d Cup" )
</ SCRI PT>
Using the Rem keyword, you can add as many lines of comments as you want. A comment
doesn't have to stand on its own line. It can be part of a line of code as long as it starts with
Rem and the Rem keyword is not part of code. To add a comment to a line that contains
code already, type Rem and include your comment. Once again, anything on the right side of
Rem would be ignored by the browser. Here is an example:
RemThi s l i ne i s i gnor ed. I can wr i t e i t however I want . Document . Wr i t e( " 2002 FI FA Wor l d Cup" ) RemThe
2002 Wor l d Cup was i n Rep Kor ea and J apan
</ SCRI PT>
Besides using the Rem keyword, another technique for commenting is by using the single
quote character. The single quote plays the exact same role as the Rem keyword. Because of
its briefness, the single quote is preferred and is more popular than the Rem keyword.
To create a comment, type the single quote character followed by the desired text of comment.
Here is an example:
' Anyt hi ng on t hi s si de i s par t of a comment
Document . Wr i t e( " They scor ed t wo sof t goal s" )
</ SCRI PT>
You can use the single quote the same way you would use the Rem keyword. To add a
comment on a line that already has code, type ' followed by the desired text. You can also use
a mix of Rem and single quote comments in the same script. Here is an example:
' Movie Quote
Document . Wr i t e( " <p>We went t hr ough a l ot of t r oubl e because of you. <br >" )
Document . Wr i t e( " You owe us. </ p>" ) Rem Max starts having a stroke here
Rem Display the movie title
Document . Wr i t e( " <b>Ti t l e: </ b> Di sor gani zed Cr i me" )
</ SCRI PT>

Practical Learning: Using Comments to VBScript Code
1. To add Rem comments to your code, change the file as follows:

Rem This exercise illustrates the use of HTML tags inserted into
VBScript code
Rem This is how to add a simple table made of one row and one column
Document . Wr i t e( " <f ont f ace=&quot ; Gar amond, Ti mes New Roman,
Geor gi a&quot ; si ze=6 col or =&quot ; #FF0000&quot ; >" )
Rem This is another example of a table
</ Scr i pt >
2. Save the sydney.htm file and preview the web page in your browser
3. Notice that the page still displays the same way.
After previewing the page, return to Notepad
4. To use a mix of Rem and single quote comments, change the file as follows:

RemThi s exer ci se i l l ust r at es t he use of HTML t ags i nser t ed i nt o
VBScr i pt code
RemThi s i s how t o add a si mpl e t abl e made of one r ow and one
col umn
RemThi s i s anot her exampl e of a t abl e
' This time, the table is made of two rows and one column
' This paragraph displays in the top cell
Document . Wr i t e( " <i >unpr edi ct abl y</ i >, f at e had deci ded
ot her wi se. </ p>" )
</ Scr i pt >
5. Save and preview the file, then return to Notepad

Code Indentation
Code confined and heavily written can be hard to read. This will become even more difficult
when we start adding variables, functions, and conditional statements. One remedy to making
the code easier to read is to indent its sections. Although most (commercial) code editors
assist programmers with code indentation, in Notepad, you will indent your code the way you
want.
Indentation is similar to adding empty characters to a line of text by pressing Tab when
starting a line of code. It can also be performed by press the Space bar at the beginning of a
line of code. This leaves an empty space or empty spaces on the left side of the line being
indented. Because indentation is not part of your code, it is a matter of choice and taste. One
of the most common techniques is to indent a section by two or four empty characters from
the previous section. To do this, in Notepad, press the Space bar two or four times and add
your code. Here is an example:
Document . Wr i t e( " <p>We went t hr ough a l ot of t r oubl e because of you. </ p>" )
</ SCRI PT>
As you can see from the previous code, indentation of the Document.Write() calling allows
you to know where the <SCRIPT> tag starts. Therefore, you will be able to know where a
piece of code, such as the <SCRIPT> tag, must be closed.
Since your code will usually be made of different sections, a particular section of code should
have the same level of indentation. Once again, this makes your code easier to read and
navigate:
' Movi e Quot e
Document . Wr i t e( " <p>We went t hr ough a l ot of t r oubl e because of you. <br >" )
Document . Wr i t e( " You owe us. </ p>" ) RemMax st ar t s havi ng a st r oke her e
RemDi spl ay t he movi e t i t l e
Document . Wr i t e( " <b>Ti t l e: </ b> Di sor gani zed Cr i me" )
</ Scr i pt >

Practical Learning: Indenting Code
1. To add indentation to your code, change the file as follows:

RemThi s exer ci se i l l ust r at es t he use of HTML t ags i nser t ed i nt o VBScr i pt
code
RemThi s i s how t o add a si mpl e t abl e made of one r ow and one col umn
RemThi s i s anot her exampl e of a t abl e
' Thi s t i me, t he t abl e i s made of t wo r ows and one col umn
' Thi s par agr aph di spl ays i n t he t op cel l
</ Scr i pt >
2. Save and preview the file, then return to Notepad

Previous Copyright 2004-2010 FunctionX, Inc. Next

The Form and its Web Controls

Overview of Web Forms

Introduction
A form is a section of a web page that contains one or a group of objects that the user interacts
with. These objects are referred to as Windows controls, web controls, or simply controls. When
using a control, the user may enter or select some values and send the result to a specific file
as designed by an application developer. To support this interaction, HTML provides different
text-based and selection controls that can handle various types of scenarios. Besides these,
there are action controls that actually send a signal to a script.
There are various types of controls you can use and different ways of creating them. Still, most
controls are created using a non-closing tag called <input>.
The Attribute of a Control
To create a control, you may start with the <input> tag. Inside of the <input> tag, you
specify the type of control you want. We will review attributes available and what they produce.
The Events of a Control
We mentioned that a user can interact with a web page using the controls on it. To do this, the
user can click a control, type in it, move the caret from it to another control, etc. Everyone of
these actions creates a message that must be sent to a program used by the programmer: the
interpreter. The interpreter then analyzes the message and produces a result. When a message
created by a control is sent, it is also said that an event was fired.
There are various types of events sent by different controls. We will mention each when
necessary.
When you create a web-based application, you decide what controls are necessary for your
application. When you select a control, you must also know what events that control can send.
In most cases, if you don't care about an event, when it occurs, the computer may ignore the
event or produce a default behavior. If you think that a certain event is important for your
application and that you must take action when that event fires, you should write code to react
appropriately.
The Form

Introduction
A form is the central object that manages the other controls. Although the controls can send
their data to a script, a form can be used to collect the values typed or selected on the
controls, gather them as if they constituted one control and make these values available to a
validating file on a server.
Creating a Form
To create a form, you use the <form> tag. Because a form is a collection of controls and their
values, the form must have an end that lets the browser know where the form closes. This is
done with the </form> closing tag as follows:
<FORM>
</ FORM>
Everything between the <FORM> and the </FORM> tags belong to the form and is called
the body of the form. Almost anything can go in the body of the form. You can design it using
any HTML tag and make it as attractive as you wish.
Forms Characteristics
Although the <form> and the </form> tags are enough to create a form, such a form can
hardly communicate with a script. One of the most important characteristics you should set for
a form is its name. The name allows a script to refer to the form and it can be used by files on
the server. To set the name of a form, assign an appropriate string to the Name attribute of
the <form> tag.
To refer to a form in a script, type the document keyword, followed by a period (the period is
an operator), followed by the name of the form. Suppose you create a form called
CreditApplication. If you want to call it from a script, you would use:
document . Cr edi t Appl i cat i on

Practical Learning: Introducing Forms
1. Start your text editor and type the following:

<h2>Empl oyment Appl i cat i on</ h2>
<f or m name=" f r mEmpl oyees" >
<t abl e bor der =" 0" wi dt h=" 288" >
<t r >
<t d wi dt h=" 80" >Fi r st Name: </ t d>
<t d wi dt h=" 194" ></ t d>
</ t r >
<t r >
<t d wi dt h=" 80" >Last Name: </ t d>
<t d wi dt h=" 194" ></ t d>
</ t r >
<t r >
<t d wi dt h=" 80" >Ful l Name: </ t d>
<t d wi dt h=" 194" ></ t d>
</ t r >
</ t abl e>
</ f or m>
2. Save the file as employment.htm in your VBScript Lessons folder
3. Preview it in your browser

4. Return to your text editor
Text Boxes

Introduction
A text box is a rectangular object that receives or displays text. By default, a text box is
intended for the user to type text in response to a request. To create a text box, use the
<input> tag and specify the Type attribute as Text. The minimum syntax for creating a text
box is:
<i nput t ype=t ext >
Because HTML is not case sensitive, you can create the control in all uppercase, all lowercase,
or a mix of both. Therefore, the control can also be created with:
<I nput Type=Text >
or
<I NPUT TYPE=TEXT>

Characteristics of a Text Box
By default, the text box control provides enough space to display a first name, a username, or
a short e-mail address. If it is not enough, you can widen the text box. To increase the width of
a text box, the <input> tag is equipped with an attribute called size. Therefore, to widen a
text control, assign an appropriate numeric value to the size attribute. Like all HTML
attributable tags (such as <body> or <font>), there is no rule on the order of attributes. Here
is an example that creates a text box control:
<i nput t ype=" t ext " si ze=" 40" >
The value that displays in a text box is held by an attribute called value. To display text in the
text box, assign a string to the value attribute. Here is an example:
<i nput t ype=" t ext " val ue=" J ames Fame Ndongo" >
To retrieve the content of a text box, you can use the value attribute. To access it, you can
type the name of the form that contains the text box, followed by a period, followed by the
name of the text box, followed by a period, and followed by value.
If you plan to use a text box in a script or code of any kind, give the control a name. This is
done by assigning a string to the name attribute. Here is an example:
<i nput t ype=" t ext " name=" Fi r st Name" >

Events of a Text Box
To use a text box, the use can click it or continuously press Tab until the caret is positioned in
the text box. When this happens, the text box is said to have focus. When a text box receives
focus, it fires an onFocus event.
In most applications, a text box primarily appears empty to the user who can then enter one or
more characters in it. To enter a character in a text box, the user usually presses a key on the
keyboard. When this happens, the text box fires an onKeyDown event. When the user
releases the key, the control fires an onKeyUp event. In some cases, the user may press a
key and hold it down. This causes the control to fire an onKeyPress event.
When the user types a character in a text box or modifies its content such as putting space
between two characters or deleting a character in it, the control fires an onChange event. This
event indicates that the content of the text box is not the same it was when it first displayed to
the user.
When the user has finished using a control and either presses tab or clicks another control, the
text box fires an onBlur event to indicate that it has lost focus.
Practical Learning: Using Text Boxes
1. To use text boxes, change the file as follows:

<t r >
<t d wi dt h=" 194" ><i nput t ype=" t ext " name=" t xt Fi r st Name" si ze=" 10"
onChange=" f or m. t xt Ful l Name. val ue =
f or m. t xt Fi r st Name. val ue + ' ' +

f or m. t xt Last Name. val ue" ></ t d>
</ t r >
<t r >
<t d wi dt h=" 194" ><i nput t ype=" t ext " name=" t xt Last Name" si ze=" 10"
onChange=" f or m. t xt Ful l Name. val ue =
f or m. t xt Fi r st Name. val ue + ' ' +
f or m. t xt Last Name. val ue" ></ t d>
</ t r >
<t r >
<t d wi dt h=" 194" ><i nput t ype=" t ext " name=" t xt Ful l Name" si ze=" 20" ></ t d>
</ t r >
</ t abl e>
</ f or m>
2. Save the file and preview it in your browser

3. Type a name in the First Name text box, press Tab, type another name in the Last Name
text box
A Button

Creating a Button
A button is a rectangular window that the user clicks, as indicated by an application developer.
What happens when the user clicks it depends.
To create a button, use the <input> tag and specify the type of control by assigning the
button value to the Type attribute. Here is an example:
<i nput t ype=" but t on" >
The most visual properties of a button are its location and the text it displays. There are
various ways you can set the location of a button on the page. Although HTML provides
paragraph tags that can position the button, one of the best options you have is to use a table
when designing your form. This will also be valid for all controls we will learn on this site.
Button Properties
The text that a button displays lets the user know what the button is used for. The text on the
button is sometimes called a caption. In HTML, this caption is the Value attribute of the
<input type="button"> existing tag. To provide the button's caption, set the desired string
to Value. Here is an example:
<i nput t ype=" but t on" val ue=" Send Me
Somewher e" >
To know the caption that a button is displaying, you can access its value attribute.
Another important property of a button is its name. This allows the browser to identify it. The
name is set by assigning an appropriate name to the Name attribute of the <input> tag.

Send Me Somewhere
To access a button on a form, type the name of the form, followed by a period, followed by the
name of the button.
Button Events
The most important and the most used event on a button results on clicking it. When the
button is clicked, it fires an event called onClick. To process a script when the user clicks a
button, you can assign the name of a function, as a string, to the onClick attribute of the
button.

Practical Learning: Using Button
1. To use a button, change the file as follows:

<t r >
<t d><i nput t ype=" t ext " name=" t xt Fi r st Name" si ze=" 10" ></ t d>
</ t r >
<t r >
<t d><i nput t ype=" t ext " name=" t xt Last Name" si ze=" 10" >
<i nput t ype=" but t on" val ue=" Eval uat e" name=" bt nEval uat e"
onCl i ck=" f or m. t xt Ful l Name. val ue = f or m. t xt Last Name. val ue + ' ,
' +
f or m. t xt Fi r st Name. val ue" >
</ t d>
</ t r >
<t r >
<t d><i nput t ype=" t ext " name=" t xt Ful l Name" si ze=" 24" ></ t d>
</ t r >
</ t abl e>
</ f or m>
3. Type a name in the First Name text box. Type another name in the Last Name text box and
click Evaluate. Here is an example:

The Submit Button

Introduction
To send all of the information of a form to a script, HTML provides a special button called
submit. Like the regular button, the submit button is a rectangular object that the user
clicks.
To create a submit button, use the <input> tag but specify the type of control as submit to
the type attribute. Here is an example:
<i nput t ype=" submi t " >
Submit
Unlike the regular button, the submit button has a built-in caption that automatically displays
its role to the user.
Characteristics of the Submit Button
The default caption of the submit button is submit. If this caption doesn't apply to your
scenario, you can change it to a more meaningful caption. To change the submit button's
caption, set the desired string to the Value attribute of the <input type="submit"> existing
tag. Here is an example:
<i nput t ype=" submi t " val ue=" Val i dat e
Appl i cat i on" >
One of the most important properties of a submit button is its name. Even if you are creating
a form for fun, the browser needs to identify the button among other controls. The name is set
by assigning an appropriate name to the Name attribute of the <input> tag.
The Submit button on a form is the main button the user would click the send the form's
collected data to a script or another file. To make this happen, a form is equipped with an
attribute called Action. This attribute is assigned an outside function, script, or server file that
would receive the results of the form and take appropriate actions. To tell the form what to do
when the user clicks the Submit button on a form, assign the desired (or an appropriate)
string to the Action attribute of the <form> tag. In the following example, a form sends its
result to an e-mail address:
<f or m act i on=" mai l t o: cust ser vi ce@f unct i onx. com" >
</ f or m>
HTML allows you to decide how you want the form to send its data away. The most two
popular options you have are Post and Get.
Submit Button Events
The most important and the most used event on a button results on clicking it. When the
button is clicks, it fires the onClick event.

The Reset Button

Introduction
Most of the forms allow the user to fill out text controls and make selections from other
controls. These actions change the values of those controls as set by the application developer.
If in the middle of filling out a form the user decides to start over, HTML provides a special
button that can reset all controls to their default states or values. This is programmatically
done using a special button called Reset.
To create a reset button, use the <input> tag and specify the type of control as Reset to the
Type attribute. Here is an example:
<i nput t ype=" r eset " >
Unlike the regular button, the reset button has a built-in caption that automatically displays its
role to the user.
Characteristics of the Reset Button
The default caption of the reset button is Reset. If this caption is not explicit enough for your
application, you can change it. To change the caption of a reset button, set the desired string
to the Value attribute of the <input type="reset"> existing tag. Here is an example:
<i nput t ype=" r eset " val ue=" St ar t Over " >
The reset button is mainly configured to handle its business on the form and doesn't need to
send any signal such as a result to a script. Therefore, its name is not as important as it is to
other controls. If for some reason you need to refer to the Reset button from a script, then
you can give it a name. The name is given by assigning an appropriate string to the Name
Validate Application
Reset
Start Over
attribute of the <input type="reset"> existing tag.

Practical Learning: Creating a Reset Button
1. To use a reset button, change the file as follows:

<t r >
<t d><i nput t ype=" t ext " name=" t xt Fi r st Name" si ze=" 10" ></ t d>
</ t r >
<t r >
<t d><i nput t ype=" t ext " name=" t xt Last Name" si ze=" 10" >
<i nput t ype=" but t on" val ue=" Eval uat e" name=" bt nEval uat e"
onCl i ck=" f or m. t xt Ful l Name. val ue = f or m. t xt Last Name. val ue + ' ,
' +
f or m. t xt Fi r st Name. val ue" >
</ t d>
</ t r >
<t r >
<t d><i nput t ype=" t ext " name=" t xt Ful l Name" si ze=" 24" ></ t d>
</ t r >
<t r >
<t d wi dt h=" 80" ></ t d>
<t d><i nput t ype=" r eset " val ue=" Cl ear Appl i cat i on"
name=" bt nReset " >
</ t d>
</ t r >
</ t abl e>

</ f or m>
3. Type a name in the First Name text box. Type another name in the Last Name text box and
click Clear Application.

The Text Area

Introduction
A text area is a large control that is a substitute to handle large paragraph where the text box
cannot or should not be used.
To create a text area, use the <TextArea> tag which must also be closed. Here is an
example:

<t ext ar ea></ t ext ar ea>

Characteristics of the Text Area
The dimensions of a text area are the main properties that set it apart from the text box
control. The width of a text area is set using the COLS attribute of the <textarea> tag.
Therefore, to increase the width of the text area, assign the desired numeric value to the
cols attribute. The width is measured by the number of characters that can be displayed on
one line of text. By default, a width of a text area is set to 20 characters. To change this, you
can assign a higher value to the attribute:
<t ext ar ea col s=" 40" ></ t ext ar ea>
The height of a text area is measured by the number of visible lines of text that the text area
can display. By default, the text area is configured to display two lines of text. This property is
controlled by the ROWS attribute. To change or increase this number, assign an appropriate
numeric value to the rows attribute. You can specify either one of the COLS or the ROWS
values. You can also specify both to control the dimensions of the text area. When using both
attributes, there is no order of the attributes. Here is an example:
<t ext ar ea col s=" 40"
r ows=" 10" ></ t ext ar ea>
If you are planning to access the text area from your code, you should give the control a
name.

Password Text Boxes

Creating a Password Text Box
HTML provides a specific text designed for a form's password. This looks like a classic text box
and is created the same. The main difference is that the text that the user types doesn't
display the characters that are being entered. As the user types in the password text box, text
appears as a series of asterisks or periods.

Like the regular text box and many other controls, to create a password text box, use the
<input> tag and specify the control type as password assigned to the type attribute.
Here is an example:
<i nput t ype=" passwor d" >

Characteristics of the Password Text Box
The size of the password text box is controlled by the size attribute of the <input> tag. To
increase the width of the control, assign the desired numeric value to the size attribute. Here
is an example that creates a text box control:
<i nput t ype=" passwor d" si ze=" 25" >
The text that is typed in the password text box is held by the value attribute. You can use this
attribute to find out what password the user typed.
If you plan to retrieve the password value in a script or code of any kind, give the control a
name. This is done by assigning a name string to the name attribute. Here is an example:
<i nput t ype=" passwor d" name=" Guar ded" >

Check Boxes

Creating a Check Box
A check box is a small square box that allows the user to select an item or to deselect it. The
user makes this decision by clicking in the small square box. By default, or depending on how
the control is configured, the square box is white and empty. This indicates that it is false or
off. When the user clicks it, a small check mark appears in the square box, indicating that it is
true or on.
To create a check box, use the <input> tag and specify the control type as checkbox,
CheckBox, or CHECKBOX. Here is an example:
<i nput t ype=" checkbox" >
A check box doesn't display what it is used for. Therefore, you should (always) add a label
close to it to help the user know the role of this control.
If using many check boxes in a group, the user is able to click or select as many different
check boxes that the application designer allowed.
Characteristics of a Check Box
As described already, when the user clicks the check box, its value becomes on or true. You
can programmatically set this state by using the checked attribute of this tag. If you assign it
a true value, the check box becomes checked. Otherwise, it would be unchecked. Here is an
example of using the tag:
<i nput t ype=" checkbox" checked=" t r ue" >
If you plan to use a check box in a script, you should give it a name. This is done by assigning
a string to the Name attribute.
Check Box Events
The most popular and probably the most important event of a check box fires when the user
clicks the check box, selecting or deselecting it. Therefore, you can use the onClick event of
the check box to find out whether the control has been selected or not; if so, you can decide
what to do in response.
Radio Buttons

Introduction
A radio button is a small round and white circle that allows the user to select an item from a
group. This is because a radio button is generally accompanied by others. From a group of
items, represented each by a circle, when the user clicks one of them, none of the others is
selected. To change the selection, the user must click another choice in the group.
To create a radio button, use the <input> tag and specify the type attribute as radio. Here
is an example:
<i nput t ype=" r adi o" >
To make your radio buttons effective, you should always provide at least two radio buttons in a
group.
Characteristics of Radio Buttons
One of the most important attributes to set on the radio button is the name. This attribute
should be used even if you don't plane to use the radio button in a script, since many radio
buttons can use the same name, this name will be helpful in determining what particular
control has been selected. Therefore, the same value (string) for the Name attribute can be
assigned to each radio button of the same group.
The checked attribute, as applied to the check box, can be used in two circumstances, if you
want one of the buttons in the group to be selected by default, assign a true value to its
checked attribute. Here is an example:

Select your T-Shirt size
Small
Medium
Large
X-Large
<t r >
<t d wi dt h=" 168" col span=" 2" >Sel ect your T- Shi r t
si ze</ t d>
</ t r >
<t r >
<t d wi dt h=" 119" >Smal l </ t d>
<t d wi dt h=" 49" ><i nput t ype=" r adi o" ></ t d>
</ t r >
<t r >
<t d wi dt h=" 119" >Medi um</ t d>
<t d wi dt h=" 49" ><i nput t ype=" r adi o"
checked=" t r ue" ></ t d>
</ t r >
<t r >
<t d wi dt h=" 119" >Lar ge</ t d>
</ t r >
<t r >
<t d wi dt h=" 119" >X- Lar ge</ t d>
</ t r >
</ t abl e>
You can also use the checked attribute in your script to find out what radio button was clicked
at one time.
Radio Button Events
Because it is first of all a button, the most fundamental event that a radio button can send to
the browser is called onClick. This event fires when the user clicks or select a particular radio
button. You can therefore use it to take action as a response.

Combo Boxes

Introduction
Like a group of radio buttons, a combo box allows the user to select an item from a group,
namely a list. A combo box has the shape as a text box, except that it is equipped with an
arrow on the right side of the control. This arrow control allows the user to display a list of
items that are hidden by the text side of the combo box. When the list displays, the user select
one item from the list. Once the item has been selected, the list retracts back to its original
text-like size.
To create a combo box, use a tag called select. This tag has to be closed. After typing the
<select> tag, create each item that is part of the control using the <option> tag. Each item
uses its own <option> tag. After listing the items, make sure you close the select tag as
</select>.
Here is an example:
<sel ect >
<opt i on>Smal l
<opt i on>Medi um
<opt i on>Lar ge
<opt i on>X- Lar ge
</ sel ect >
Small

Practical Learning: Introducing Combo Boxes
1. Start a new file in your text editor and type the following:

<h1>Geor get own Cl eani ng Ser vi ces</ h1>
<f or m name=" f r mCl eani ngOr der " >
<t r >
<t d wi dt h=" 446" col span=" 4" >
<h3>Or der I dent i f i cat i on</ h3>
</ t d>
</ t r >
<t r >
<t d wi dt h=" 106" >Cust omer Name: </ t d>
<t d wi dt h=" 150" ><i nput t ype=" t ext " name=" t xt Cust omer Name" si ze=" 20" ></ t d>
<t d wi dt h=" 108" >Cust omer Phone: </ t d>
Small
<t d wi dt h=" 150" ><i nput t ype=" t ext " name=" t xt Cust omer Phone" si ze=" 20" ></ t d>
</ t r >
<t r >
<t d wi dt h=" 106" >Dat e Lef t : </ t d>
<t d wi dt h=" 150" ><i nput t ype=" t ext " name=" t xt Dat eLef t " si ze=" 20" ></ t d>
<t d wi dt h=" 108" >Ti me Lef t : </ t d>
<t d wi dt h=" 150" ><i nput t ype=" t ext " name=" t xt Ti meLef t " si ze=" 20" ></ t d>
</ t r >
<t r >
<t d wi dt h=" 106" >Dat e Expect ed: </ t d>
<t d wi dt h=" 150" ><i nput t ype=" t ext " name=" t xt Dat eExpect ed" si ze=" 20" ></ t d>
<t d wi dt h=" 108" >Ti me Expect ed: </ t d>
<t d wi dt h=" 150" ><i nput t ype=" t ext " name=" t xt Ti meExpect ed" si ze=" 20" ></ t d>
</ t r >
</ t abl e>
<hr >
<t r >
<t d wi dt h=" 381" >
<t r >
<t d wi dt h=" 128" ><b>I t em Type</ b></ t d>
<t d wi dt h=" 71" ><b>Uni t Pr i ce</ b></ t d>
<t d wi dt h=" 38" ><b>Qt y</ b></ t d>
<t d wi dt h=" 46" ></ t d>
<t d wi dt h=" 66" ><b>Sub- Tot al </ b></ t d>
</ t r >
<t r >
<t d wi dt h=" 128" >Shi r t s</ t d>
<t d wi dt h=" 71" ><i nput t ype=" t ext " name=" t xt Shi r t Uni t Pr i ce" si ze=" 7"
val ue=" 0. 95" ></ t d>
<t d wi dt h=" 38" ><i nput t ype=" t ext " name=" t xt Shi r t Quant i t y" si ze=" 4"
val ue=" 0" ></ t d>
<t d wi dt h=" 46" ><i nput t ype=" but t on" val ue=" Cal c" name=" bt nShi r t s" ></ t d>
<t d wi dt h=" 66" ><i nput t ype=" t ext " name=" t xt Shi r t SubTot al " si ze=" 8"
val ue=" 0. 00" ></ t d>
</ t r >
<t r >
<t d wi dt h=" 128" >Pant s</ t d>
<t d wi dt h=" 71" ><i nput t ype=" t ext " name=" t xt Pant sUni t Pr i ce" si ze=" 7"
val ue=" 2. 75" ></ t d>
<t d wi dt h=" 38" ><i nput t ype=" t ext " name=" t xt Pant sQuant i t y" si ze=" 4"
val ue=" 0" ></ t d>
<t d wi dt h=" 46" ><i nput t ype=" but t on" val ue=" Cal c" name=" bt nPant s" ></ t d>
<t d wi dt h=" 66" ><i nput t ype=" t ext " name=" t xt Pant sSubTot al " si ze=" 8"
val ue=" 0. 00" ></ t d>
</ t r >
<t r >
<t d wi dt h=" 128" ><sel ect si ze=" 1" name=" cboI t em1" >
<opt i on sel ect ed>None</ opt i on>
<opt i on>Women Sui t </ opt i on>
<opt i on>Dr ess</ opt i on>
<opt i on>Regul ar Ski r t </ opt i on>
<opt i on>Ski r t Wi t h Hook</ opt i on>
<opt i on>Men' s Sui t 2Pc</ opt i on>
<opt i on>Sweat er s</ opt i on>
<opt i on>Si l k Shi r t </ opt i on>
<opt i on>Ti e</ opt i on>
<opt i on>Coat </ opt i on>
<opt i on>J acket </ opt i on>
<opt i on>Swede</ opt i on>
</ sel ect ></ t d>
<t d wi dt h=" 71" ><i nput t ype=" t ext " name=" t xt I t em1Uni t Pr i ce" si ze=" 7"
val ue=" 0. 00" ></ t d>
<t d wi dt h=" 38" ><i nput t ype=" t ext " name=" t xt I t em1Quant i t y" si ze=" 4"
val ue=" 0" ></ t d>
<t d wi dt h=" 46" ><i nput t ype=" but t on" val ue=" Cal c" name=" bt nI t em1" ></ t d>
<t d wi dt h=" 66" ><i nput t ype=" t ext " name=" t xt I t em1SubTot al " si ze=" 8"
val ue=" 0. 00" ></ t d>
</ t r >
<t r >
</ sel ect ></ t d>
val ue=" 0. 00" ></ t d>
val ue=" 0" ></ t d>
val ue=" 0. 00" ></ t d>
</ t r >
<t r >
</ sel ect ></ t d>
val ue=" 0. 00" ></ t d>
val ue=" 0" ></ t d>
val ue=" 0. 00" ></ t d>
</ t r >
<t r >
</ sel ect ></ t d>
val ue=" 0. 00" ></ t d>
val ue=" 0" ></ t d>
val ue=" 0. 00" ></ t d>
</ t r >
</ t abl e>
</ t d>
<t d wi dt h=" 201" >
<t abl e bor der =" 0" wi dt h=" 100%" >
<t r >
<t d wi dt h=" 100%" al i gn=" cent er " col span=" 2" ><i nput t ype=" but t on"
val ue=" Cal cul at e Or der " name=" bt nCal cul at e" ></ t d>
</ t r >
<t r >
<t d wi dt h=" 50%" >Cl eani ng Tot al : </ t d>
<t d wi dt h=" 50%" ><i nput t ype=" t ext " name=" t xt Cl eani ngTot al " si ze=" 8"
val ue=" 0. 00" ></ t d>
</ t r >
<t r >
<t d wi dt h=" 50%" >Tax Rat e</ t d>
<t d wi dt h=" 50%" ><i nput t ype=" t ext " name=" t xt TaxRat e" si ze=" 6"
val ue=" 5. 75" >%</ t d>
</ t r >
<t r >
<t d wi dt h=" 50%" >Tax Amount : </ t d>
<t d wi dt h=" 50%" ><i nput t ype=" t ext " name=" t xt TaxAmount " si ze=" 8"
val ue=" 0. 00" ></ t d>
</ t r >
<t r >
<t d wi dt h=" 50%" >Or der Tot al : </ t d>
<t d wi dt h=" 50%" ><i nput t ype=" t ext " name=" t xt Or der Tot al " si ze=" 8"
val ue=" 0. 00" ></ t d>
</ t r >
</ t abl e>
</ t d>
</ t r >
</ t abl e>
<hr >
<p><i nput t ype=" r eset " val ue=" St ar t New Cl eani ng Or der " name=" bt nNewOr der " ></ p>
</ f or m>
2. Save the file as cleaningorder.htm in your JavaScript Lessons folder
3. Preview it in your browser

Characteristics of a Combo Box
To select a default item from the combo box, use the selected attribute of the <options>
tag. Here is an example:

<sel ect >
<opt i on>Smal l
<opt i on
sel ect ed=" t r ue" >Medi um
<opt i on>Lar ge
<opt i on>X- Lar ge
</ sel ect >
Medium

Events of a Combo Box
Besides looking at a combo box to see its current value, the most expected action the user can
make on a combo box is to click its arrow and select a new item. There are two main ways to
select a value in a combo box. The user can first press Tab a few times until the combo box
receives focus. An alternative is to click the down pointing arrow. In both cases, when the
combo box receives focus, it fires an onFocus event.
If the user pressed Tab to give focus to the combo box, he or she can press Alt + the down
arrow key to display the list of the control. Remember that the user can also click the arrow
to display the list. To actually select an item from the list, the user can click it. When this is
done, the combo box fires an onChange event to indicate that its value has changed.
After using a combo box, the user can press Tab or click another control. In both cases, the
combo box would fire an onBlur event to indicate that it has lost focus.
Medium
List Boxes

Creating a List Box
Like radio buttons or a combo box, a list box displays a list of items that the user can select
from. Unlike a combo box, a list box displays a taller list and can even display all of its items
all the time.
Like a combo box, a list box is created using the <select> tag. Like the combo box, each
item of a list box is created using the <option> tag. To make the control a list box, the
<select> tag is equipped with an attribute called size. This attribute accomplishes two
purposes: it makes the control become a list box and it sets the vertical size of the list box. In
other words, it decides on the number of items the list box can display at a time.
Here is an example:
<sel ect si ze=" 4" >
<opt i on>Schwar t z
<opt i on>Medou
<opt i on>Lar son
<opt i on>Cr eans
<opt i on>Schul t ze
<opt i on>Gr eenber g
</ sel ect >
Schwartz
Medou
Larson
Creans
Schultze

Characteristics of a List Box
A list box can be configured to allow the user to select one item. To select an item from the
list, set the selected attribute of its <option> tag to true.
Here is an example:
<sel ect si ze=" 4" >
<opt i on selected="true">Medou
<opt i on>Lar son
<opt i on>Cr eans
</ sel ect >
Schwartz
Medou
Larson
Creans
Schultze
Unlike a combo box, a list box can be configured to allow the user to select more than one
item from the list. To allow this, include the multiple attribute in the <select> tag. Here is
an example:

<sel ect si ze=" 4" multiple>
<opt i on>Medou
<opt i on>Lar son
<opt i on>Cr eans
</ sel ect >
Schwartz
Medou
Larson
Creans
Schultze

Just including the multiple attribute in the <select> tag, even
if you omit the size attribute, causes the control to be a list box

List Box Events
The most commonly used and the most important event of a list is called onChange. This
event fires whenever the user makes a selection in the list box. This allows you to take
appropriate actions.

Schwartz
Medou
Larson
Creans
Schwartz
Medou
Larson
Creans
Schwartz
Medou
Larson
Creans

VBScript Variables

VBScript Variables

Introduction
A variable is an amount of memory space reserved to store part of the data used in your code.
To use such a memory space, you must first let the browser know that you would need it. For
the browser to reserve such a memory space for you, and to use it eventually, you must give it
a name. The memory space that is reserved will be used to receive some values from your
application and to make such values available when your code needs them. The contents of this
reserved memory space can change or vary regularly. For example, if you create a web page
that acts as an employment application and include a text box for the first name, the content
of the first name text box will be different depending on each visitor. The memory space that
stores the first name of the visitors will vary from one visitor to another. For this reason, it is
called a variable.
The name of the variable:
must start with a letter or an underscore character
after the first character, can contain letters, digits, and underscores
cannot contain empty space
When naming your variables, you should be a little explicit. A name such as d intended to
designate a date hired is difficult to figure out. On the other hand, if you plan to use a variable
that represents a customers address, you can just call the variable address.
For our lessons, sometimes we will start the names of variables in uppercase. Instead of
address, we may use Address; instead of customers, we may use Customers. If the name is a
combination of words, such as firstname, we may start the first letter of each name in
uppercase. For example, instead of studentname, we may use StudentName; instead of
dateofbirth, we may use DateOfBirth. Various programmers use different naming conventions.
For example, some programmers use the underscore to append two names of a variable. You
are free to adopt which ever convention suits you.
Practical Learning: Introducing Variables
1. Start Notepad or your text editor

<ht ml >
<head>
<t i t l e>VBScr i pt Lessons</ t i t l e>
</ head>
<body>
<h1>Empl oyee Payr ol l </ h1>
<f or m name=" f r mPayr ol l " >
<t r >
<t d wi dt h=" 101" col span=" 2" ><i nput t ype=" t ext " name=" t xt Fi r st Name"
si ze=" 10" ></ t d>
<t d wi dt h=" 239" col span=" 5" ></ t d>
</ t r >
<t r >
<t d wi dt h=" 101" col span=" 2" ><i nput t ype=" t ext " name=" t xt Last Name"
si ze=" 10" ></ t d>
</ t r >
<t r >
<t d wi dt h=" 144" >Days: </ t d>
<t d wi dt h=" 49" >Mon</ t d>
<t d wi dt h=" 46" >Tues</ t d>
<t d wi dt h=" 43" >Web</ t d>
<t d wi dt h=" 43" >Thur s</ t d>
<t d wi dt h=" 43" >Fr i </ t d>
<t d wi dt h=" 43" >Sat </ t d>
<t d wi dt h=" 43" >Sun</ t d>
</ t r >
<t r >
<t d wi dt h=" 144" >Hour s: </ t d>
<t d wi dt h=" 49" ><i nput t ype=" t ext " name=" t xt Monday" si ze=" 5"
val ue=" 0. 00" ></ t d>
<t d wi dt h=" 46" ><i nput t ype=" t ext " name=" t xt Tuesday" si ze=" 5"
val ue=" 0. 00" ></ t d>
<t d wi dt h=" 43" ><i nput t ype=" t ext " name=" t xt Wednesday" si ze=" 5"
val ue=" 0. 00" ></ t d>
<t d wi dt h=" 43" ><i nput t ype=" t ext " name=" t xt Thur sday" si ze=" 5"
val ue=" 0. 00" ></ t d>
<t d wi dt h=" 43" ><i nput t ype=" t ext " name=" t xt Fr i day" si ze=" 5"
val ue=" 0. 00" ></ t d>
<t d wi dt h=" 43" ><i nput t ype=" t ext " name=" t xt Sat ur day" si ze=" 5"
val ue=" 0. 00" ></ t d>
<t d wi dt h=" 43" ><i nput t ype=" t ext " name=" t xt Sunday" si ze=" 5"
val ue=" 0. 00" ></ t d>
</ t r >
<t r >
<t d wi dt h=" 144" >Hour l y Sal ar y: </ t d>
<i nput t ype=" t ext " name=" t xt Hour l ySal ar y" si ze=" 13"
val ue=" 6. 50" ></ t d>
</ t r >
<t r >
<t d wi dt h=" 144" >Weekl y Hour s: </ t d>
<i nput t ype=" t ext " name=" t xt Weekl yHour s" si ze=" 13" val ue=" 0. 00" ></ t d>
<i nput t ype=" r eset " val ue=" Cl ear Al l " name=" bt nCl ear Al l " ></ t d>
</ t r >
<t r >
<t d wi dt h=" 144" >Weekl y Sal ar y: </ t d>
<i nput t ype=" t ext " name=" t xt Weekl ySal ar y" si ze=" 10"
val ue=" 0. 00" ></ t d>
<i nput t ype=" submi t " val ue=" Cal cul at e" name=" bt nCal cul at e" ></ t d>
</ t r >
</ t abl e>
</ f or m>
</ body>
</ ht ml >
3. Save the file as payroll1.htm in your VBScript Lessons folder
4. Preview the file in the browser


Variable Declaration
To use a variable in your script, you can just type it. Here is an example:
NumberOfStudents
</ SCRI PT>
With such a variable, you can perform any of the operations we will learn shortly. Once the
variable has been used somewhere, the browser reserves a space in memory for it. If you use
another or new name for a variable in the same script, if the new variable has a different
name than a former variable, the browser would reserve a new space in memory space for it.
You can continue introducing variables like that as your script needs them.
Be careful not to mistakenly type the name of variable that you want to reuse in your
program. For example, if you have a variable named NumberOfStudents in your script, then
find out that you want to use it in an operation, if you type NbrOfStudents instead of
NumberOfStudents, since both names are different, a new memory space would be reserved
for NbrOfStudents because the browser would consider that NbrOfStudents is a new variable.
Trying to use both variables as one would lead to unpredictable results. To avoid this
confusion, VBScript provides two alternatives. Before using a variable, you can first tell the
browser that you have a variable you want to use. By doing this, the browser would be a
"witness" that a certain variable exists. This is (still) not a bulletproof solution but can help to
improve your code.
Letting the interpreter know about a variable is referred to as declaring the variable. To
declare a variable, use the Dim keyword followed by a name for the variable. Here are
examples of declaring variables:
Dim Fi r st Name
Dim Hi r edDat e
Dim Hour l ySal ar y
</ Scr i pt >
Although the Dim keyword is used to declare a variable, it can be used for any kind of
variable. It can be used to declare a variable that represents a natural number (integer), a
decimal number (floating-point or double-precision number), a Boolean value, or a string.
If you need to use many variables, you can declare more than one on the same line. To do
this, separate them with a comma. Here is an example:
Di mFul l Name, Emai l Addr ess
Di mAddr ess, Ci t y, St at e, ZI PCode
</ Scr i pt >
Using the Dim keyword to declare a variable doesn't completely eliminate name duplication of
variables. A better alternative that VBScript proposes is to impose it upon your code that no
variable should be used if it has not been previously declared. Using this technique, if you
reference a variable without declaring it, the browser would display an error.
To impose the rule that each variable must first be declared before being used, after the
opening script tag, type option explicit as follows:
Opt i on Expl i ci t
' Code goes her e
</ Scr i pt >
If you try using or accessing a variable that was not previously declared, you may receive an
error.
Practical Learning: Declaring Variables
1. Declare a few variables in a script as follows:

<ht ml >
<head>
<Script Language="VBScript">
Dim Mon, Tue, Wed, Thu, Fri, Sat, Sat, Sun
Dim WeeklyHours, HourlySalary, WeeklySalary
</Script>
</ head>
<body>
. . . No Change
</ body>
</ ht ml >
2. Save the file


VBScript Operations

Regular Operators

Introduction
One of the most common assignments you will hand to your scripts consists of performing
operations. VBScript is equipped with various kinds of operators to respond to any type of
operation you need.
Practical Learning: Introducing Variables
1. Start Notepad or your text editor
2. From what we learned in the previous lessons, type the following:

<ht ml >
<head>
Di mMon, Tue, Wed, Thu, Fr i , Sat , Sat , Sun
Di mWeekl yHour s, Hour l ySal ar y, Weekl ySal ar y
</ Scr i pt >
</ head>
<body>
</ body>
</ ht ml >
3. Save the file as payroll2.htm in your VBScript Lessons folder and preview it in your
browser
The Assignment =
We saw that, when declaring a variable, a memory space is reserved for it. Such a space is
empty until you fill it with a value. This is performed with the assignment operation. The
assignment operation gives a value to a variable. It is performed using the = operator. Its
syntax is:
VariableName = Value
The VariableName must be a valid variable name. It cannot be a value such as a numeric value
or a (double-quoted) string. Here is an example that assigns a numeric value to a variable:
Sal ar y = 12. 55
</ Scr i pt >
Once a variable has been declared and assigned a value, you can call the Document.Write()
function to display its value. Since the variable is part of your script and not an HTML tag, it
doesn't need to be included in double-quotes (the proper sentence is that, "it doesn't need to
be passed as a string"; but we have not learned what it means to pass an argument). Here is
an example:
Sal ar y = 12. 55
Document . Wr i t e( Sal ar y) ;
</ Scr i pt >
To improve, safeguard, and make your code more efficient, we have learned that you should
declare a variable before using it. This is done using the Dim keyword. The above script could
be written as follows:
Di mSal ar y
Sal ar y = 12. 55
Document . Wr i t e( Sal ar y) ;
</ Scr i pt >
The above code declares a variable before assigning it a value. You will usually perform this
assignment when you want to change the value held by a variable. The first time the browser
encounters a variable, you can make sure that the variable is holding a value, just as done
above. Providing a starting value to a variable is referred to as initializing the variable.
Practical Learning: Using the Assignment Operator
1. To use the assignment operator, change the file as follows:

<ht ml >
<head>
Di mMon, Tue, Wed, Thu, Fr i , Sat , Sun
Mon = Document . f r mPayr ol l . t xt Monday. Val ue
Tue = Document . f r mPayr ol l . t xt Tuesday. Val ue
Wed = Document . f r mPayr ol l . t xt Wednesday. Val ue
Thu = Document . f r mPayr ol l . t xt Thur sday. Val ue
Fr i = Document . f r mPayr ol l . t xt Fr i day. Val ue
Sat = Document . f r mPayr ol l . t xt Sat ur day. Val ue
Sun = Document . f r mPayr ol l . t xt Sunday. Val ue
Hour l ySal ar y = Document . f r mPayr ol l . t xt Hour l ySal ar y. Val ue
</ Scr i pt >
</ head>
<body>
. . . No Change
2. Save the file but don't preview it

The Addition +
The addition is an operation used to add one value to another. The syntax used it:
Val ue1 + Val ue2
To perform this operation, the interpreter would add the value of Value1 to that of Value2.
You can use such an operation to display the result on an HTML page. Here is an example:
Document . Wr i t e( 125 + 48)
</ SCRI PT>
The addition operation as implemented in VBScript can be applied to natural numbers called
integers and to floating-point numbers called float or double-precision numbers. Here is an
example that illustrates this:
' The addi t i on oper at i on appl i ed
' t o t wo nat ur al number s: i nt eger s
Document . Wr i t e( 125 + 48) ;
Document . Wr i t e( " <br >" )
' t o deci mal number s: f l oat or doubl e
Document . Wr i t e( 2540. 25 + 662. 38)
Document . Wr i t e( " <br >" )
</ SCRI PT>
You can also apply this operation on variables. For example, once a variable holds a value, you
can add another value to it: Salary + 0.55
You can also add the values of two variables using their names: SalaryWeek1 + SalaryWeek2
As done in the above script, you can display the addition using the Document.Write function.
After the addition operation is performed, it produces a resulting value. Sometimes you will not
simply need to display the value on a web page; you may want to use it in another
calculation. Therefore, you can store the result in a another variable, then use the result as
you see fit. The syntax used is:
Result = Value1 + Value2
Practical Learning: Performing Additions
1. To use the addition operator, change the script as follows:

<ht ml >
<head>
Weekl yHour s = Mon + Tue + Wed + Thu + Fr i + Sat + Sun
</ Scr i pt >
</ head>
<body>
. . . No Change
2. Save the file but don't preview it
String Concatenation: &
The Document.Write function we have used so far allows you to display a string on a web
page. So far, we used this function various times to display different strings. VBScript provides
an operator that allows you to add different strings and create a new one. This operation is
performed using the string concatenation operator &.
The syntax of the & operator is:
Val ue1 & Val ue2
This operation is performed on strings and you can use it to display various items using the
Document.Write function. Here is an example:
Di mFi r st Name, Last Name
Fi r st Name = " Roger "
Last Name = " Lemer r e"
document . wr i t e( FirstName & LastName)
</ Scr i pt >
The above script would produce RogerLemerre. An alternative would have been to include
space in one of the strings.
The & operator can also be used like the addition operator as long as you apply it on strings.
An example would be:
Ful l Name = Fi r st Name & Last Name
The & operator can also be applied on more than two operand. This could be used to insert
characters as you see fit. Here is an example:
Document . Wr i t e( " Ful l Name: " )
Document . Wr i t e( FirstName & " " & LastName)
</ Scr i pt >
After the & operation has been performed on two variables, the operation results in a new
string. You can assign this new string to another variable, as in
Resul t = Val ue1 & Val ue2
Here is an example:
Di mFi r st Name, Last Name, Ful l Name
FullName = FirstName & " " & LastName
Document . Wr i t e( " Ful l Name: " & Ful l Name)
</ Scr i pt >

The Subtraction -
The subtraction is an operation used to subtract one value from another. The syntax used it:
Val ue1 - Val ue2
To perform this operation, the interpreter would subtract the value of Value1 from that of
Value2. You can use such an operation to display the result on an HTML page. Here is an
example:
Document . Wr i t e( 208. 55 - 42. 16)
</ SCRI PT>
The subtraction operation as implemented in VBScript can be applied to natural numbers or
decimal numbers.
The subtraction can also be applied on variables and/or their values. After the subtraction
operation is performed, it produces a result that can be used in other expression or assigned to
another variable to store it somewhere. The syntax used would be:
Result = Value1 - Value2
The Multiplication *
The multiplication is used to add a number to itself a certain number of times. This operation is
performed using the * operator. Its syntax is:
Val ue1 * Val ue2
This operation can be performed on numeric values as follows:
Document . Wr i t e( 15. 55 * 240. 25)
</ Scr i pt >
The multiplication operation can be applied to values or variables that hold valid values. After
the operation is performed, it produces a result that can be displayed on a web page or stored
in a variable for later retrieval.
The multiplication operation as performed in values produces a result that can be used in
another expression or stored in memory through a variable. The syntax used would be:
Resul t = Val ue1 * Val ue2
Practical Learning: Using the Multiplication
1. To perform a multiplication, change the script as follows:

<ht ml >
<head>
Weekl yHour s = Mon + Tue + Wed + Thu + Fr i + Sat + Sun
Weekl ySal ar y = Hour l ySal ar y * Weekl yHour s
</ Scr i pt >
</ head>
<body>
. . . No Change
2. Save the file
The Integer Division: \
Dividing an item means cutting it in pieces or fractions of a set value. For example, when you
cut an apple in the middle, you are dividing it in 2 pieces. If you cut each one of the resulting
pieces, you will get 4 pieces or fractions. This is considered that you have divided the apple in
in 4 divisions. Therefore, the division is used to get the fraction of one number in terms of
another.
Microsoft Visual Basic provides two types of results for the division operation. If you want the
result of the operation to be a natural number, called an integer, use the backlash operator "\"
as the divisor. Here is an example:
Val ue1 \ Val ue2
This operation can be performed on two types of valid numbers, with or without decimal parts.
After the operation, the result would be a natural number.
The result of either operation can be assigned to another value. It can also be displayed in a
control using the assignment operator:
Resul t = Val ue1 \ Val ue2

The Division /
The division operation is used to divide a numeric value or the value held by a variable. The
division operation is performed using the forward slash. Its syntax is:
Val ue1 / Val ue2
This operation can be performed on numeric values as follows:
Document . Wr i t e( " Dai l y Ear ni ngs: " )
Document . Wr i t e( 425. 65 / 7)
</ Scr i pt >
The division operation can be applied to values or variables that hold valid values. The division
operation produces a new value through the following syntax:
Result = Value1 / Value2
The Remainder: Mod
The division operation gives a result of a number with or without decimal values, which is fine
in some circumstances. Sometimes you will want to get the value remaining after a division
renders a natural result. Imagine you have 26 kids at a football (soccer) stadium and they are
about to start. You know that you need 11 kids for each team to start. If the game starts with
the right amount of players, how many will seat and wait?
The remainder operation is performed with keyword Mod. Here is an example:
Val ue1 Mod Val ue2
The result of the operation can be used as you see fit or you can display it in a control using
the assignment operator as follows:
= Val ue1 Mod Val ue2

The Negation -
In mathematics, a number written as 10500 or 44.12 is considered a positive number. In the
computer world, we referred to such a number as unsigned (because it doesn't have a sign).
An unsigned number has a value greater than 0. If a number is less than 0, such a number
qualifies as negative. To indicate that a number is negative, you write the - sign on its left. For
example -32 is called a negative number.
A value or a variable is made negative by applying the - operator to its left. Here is an
example:
Di mTemper at ur e
Temper at ur e = - 32
</ Scr i pt >
The negation operator is referred to as a unary operator because it applies to only one value
or variable. As illustrated above, a negative number can be assigned to a variable. A variable
can also be made negative by using this operator.
The Exponentiation: ^
Exponentiation is the ability to raise a number to the power of another number. This operation
is expressed using the ^ operator (Shift + 6). It uses the following mathematical formula:
y
x
In Microsoft Visual Basic (and Microsoft Access), this formula is written as:
y^x
and means the same thing. Either or both y a x can be values or expression, but they must
carry valid values that can be evaluated.
When the operation is performed, the value of y is raised to the power of x. You can display
the result of such an operation in a field using the assignment operator as follows:
=y^x
You can also assign the operation to an expression as follows:
Total = y^x
Line Continuation
Although VBScript reads code as if it were on one line, there is a maximum number of
characters you can display on one line of code. Notepad can hardly display any long or too long
text you have in a procedure. Unless you like scrolling left and write on your screen, you can
divide your code into different lines and still let VBScript consider it a single line.
To cut a line of code and continue on the subsequent line, type an underscore at the end of
the line you want to interrupt. Here are two examples in a sub procedure:
Di mdbl Hour s
Dim dblMonday, dblTuesday, dblWednesday, dblThursday, _
dblFriday, dblSaturday, dblSunday
Di mdbl Sal ar y
Di mdbl Resul t

dblHours = dblMonday + dblTuesday + dblWednesday + dblThursday + _
dblFriday + dblSaturday + dblSunday
dbl Sal ar y = t xt Sal ar y
dbl Resul t = dbl Hour s * dbl Sal ar y

</ Scr i pt >

Procedures and Functions

Procedures Fundamentals

Introduction
A procedure is an assignment you ask VBScript to perform besides, or to complete, the normal
flow of the program. A procedure is created to work in conjunction with the controls events of
a script.
There are two kinds of procedures in VBScript: A sub procedure and a function. The difference
lies on their behaviors but their coding (programming) depends of your goal.
A procedure can be included in the body of an HTML but to separate the script behavior from
the rest of the file, it is usually a good idea to include the procedures in the head section of
the file. So far, we were not using all parts of a regular HTML file because there was no need
for such a structure. From now on, we will respect the normal listing of an HTML file as follows:
<ht ml >
<head>
<t i t l e>VBScr i pt Tut or i al </ t i t l e>
</ head>
<body>
Thi s i s t he body of our HTML f i l e.
</ body>
Everything you know about HTML files, their contents and sections, is completely valid here,
whether you include a script or not. When adding a script, you can use the head section to
"hide" the script (actually, you are not strictly hiding it). As you may know already, there can
be various things (such as the <title> or the <meta> tags) in the head section of the HTML
file. Where do you position the script? It doesn't matter. You can write your script before or
after the <title> tag, before or after the other <meta> tags.
The advantage of including a script in the head section is that it is more likely to be interpreted
before the section it refers to is reached. If you have done any type of programming before,
you may know that interpreters (and compilers) read a program in a top-down approach.
Therefore, if the browser (actually the VBScript interpreter) finds a thing in the body section
but doesn't know what that thing is because it is in the bottom part of the body section, it
may not interpret your script accurately. But if the script is in the head section, the interpreter
will have "seen" it before reaching the body section.
Based on this, from now on, many of our files will look this:
<ht ml >
<head>
<scr i pt l anguage=" VBScr i pt " >
<! - -
Whatever!!!
- - >
</ scr i pt >
<t i t l e>VBScr i pt Tut or i al </ t i t l e>
</ head>
<body>
Thi s i s t he body of our HTML f i l e.
</ body>

Sub Procedures
A sub procedure is a section of code that carries an assignment but doesn't give back a result.
To create a sub procedure, start the section of code with the Sub keyword followed by a name
for the sub procedure. To differentiate the name of the sub procedure with any other regular
name, it must be followed by an opening and closing parentheses. The section of the sub
procedure code closes with End Sub as follows:
Sub ShowMeTheDough( )
End Sub
The name of a sub procedure should follow the same rules we reviewed for the the variables,
omitting the prefix:
If the sub procedure performs an action that can be represented with a verb, you can use
that verb to name it. Here are examples: show, display
To make the name of a sub procedure stand, you should start it in uppercase. Examples
are Show, Play, Dispose, Close
You should use explicit names that identify the purpose of the sub procedure. If a
procedure would be used as a result of another procedure or a control's event, reflect it on
the name of the sub procedure. Examples would be: afterupdate, longbefore.
If the name of a procedure is a combination of words, start each word in uppercase.
Examples are: AfterUpdate, SayItLoud
In the following example, a sub procedure named DisplayFullName is created. It retrieves
fields of two text boxes (first name and last name) on a form and displays a full name as a
result of combining them:
Sub Di spl ayFul l Name( )
Ful l Name = Fi r st Name & " " & Last Name
End Sub
As mentioned already, you can declare variables for use in your program. In the same way,
you can declare variables in the procedure if you need to. These variables are declared and
dealt with in the same way we learned in the regular script sections. Using declared variables,
the above procedure can be written as follows:
Sub Di spl ayFul l Name( )
Di mFul l Name
Ful l Name = Fi r st Name & " " & Last Name
End Sub

Calling a Procedure
After creating a procedure, you can call it from another procedure, function, or control's event
in the body section of an HTML file. To call a simple procedure such as the earlier
DisplayFullName, you can just write the name of the sub procedure.
In the following example, the above DisplayFullName sub procedure is called when the user
clicks the Detail section of the form:
Sub Det ai l er ( )
Di spl ayFul l Name
End Sub
If you want the procedure to be accessed immediately as soon as the page displays, you can
assign its name to the onLoad() event of the body tag.

Arguments

Passing an Argument
To carry an assignment, sometimes a procedure needs one or more values to work on. If a
procedure needs a variable, such a variable is called an argument. Another procedure might
need more that one argument, thus many arguments. The number and types of arguments of
a procedure depends on various factors.
If you are writing your own procedure, then you will decide how many arguments your
procedure would need. You also decide on the type of the argument(s). For a procedure that is
taking one argument, in the parentheses of the procedure, write a name for the argument.
Here is an example:
Sub Cal cul at eAr ea( Radi us)
Di mdbl PI
Di mdbl Ar ea

dbl PI = 3. 14159
dbl Ar ea = Radi us * Radi us * dbl PI
End Sub
A procedure can take more than one argument. If you are creating such a procedure, between
the parentheses of the procedure, write the name of the first argument followed by a comma;
add the second argument and subsequent arguments and close the parentheses. There is no
relationship between the arguments; for example, they can be of the same type:
Sub Cal cul at ePer i met er ( Lengt h, Hei ght )
Di mdbl Per i met er

dbl Per i met er = 2 * ( Lengt h + Hei ght )
End Sub
The arguments of your procedure can also be as varied as you need them to be. Here is an
example:
Sub Di spl ayGr eet i ngs( st r Ful l Name, i nt Age)
Di mSent ence
Sent ence = " Hi , " & st r Ful l Name & " . You ar e " & i nt Age & " year s ol d"
End Sub

Calling an Argumentative Procedure
We saw already how to call a procedure that doesn't take any argument. Actually, there are
various ways you can call a sub procedure. As we saw already, if a sub procedure doesn't take
an argument, to call it, you can just write its name. If a sub procedure is taking an argument,
to call it, type the name of the sub procedure followed by the name of the argument. If the
sub procedure is taking more than one argument, to call it, type the name of the procedure
followed by the name of the argument, in the exact order they are passed to the sub
procedure, separated by a comma. Here is an example:
Sub Resul t ( )
Di mdbl Hour s, dbl Sal ar y

CalcAndShowSalary dblHours, dblSalary
End Sub
Sub Cal cAndShowSal ar y( Hour s, Sal ar y)
Di mdbl Resul t

dbl Resul t = Hour s * Sal ar y
t xt Resul t = dbl Resul t
End Sub
Alternatively, you can use the keyword Call to call a sub procedure. In this case, when calling
a procedure using Call, you must include the argument(s) between the parentheses. using
Call, the above procedure could call the CalcAndShowSalary as follows:
Sub Resul t ( )
Di mdbl Hour s As Doubl e
Di mdbl Sal ar y As Doubl e

dbl Hour s = t xt Hour s
dbl Sal ar y = t xt Sal ar y

Call CalcAndShowSalary(dblHours, dblSalary)
End Sub
Functions

Creating a Function
A function is an assignment that a piece of code can take care for the functionality of a
database. The main difference between a sub procedure and a function procedure is that a
function can return a value.
A function is created like a sub procedure with a few more rules. The creation of function starts
with the Function keyword and closes with End Function. Here is an example:
Funct i on Fi ndFul l Name( )
End Funct i on
The name of the function follows the same rules and suggestions we have reviewed for the sub
procedures.
To implement a function, remember that it is supposed to return a value. In the body of the
function, describe what it is supposed to do. to return the right value, assign the desired value
to the name of the function. Here is an example:
Funct i on Cal cul at eAr ea( Radi us)
Cal cul at eAr ea = Radi us * Radi us * 3. 14159
End Funct i on
A function can also be as complex as performing many and various expressions in order to get
a value that can be assigned to the name of the function.
Calling a Function
To call a function, you have two main alternatives. If you want to use the return value of a
function in an event or another function, assign the name of the function to the appropriate
local variable. Make sure you include the argument(s) of the function between parentheses.

Built-In Functions
Introduction
VBScript ships with many functions that you can use to complete your scripts. These functions
are highly reliable and can tremendously reduce your work. This means that, before creating
your own procedure or function, first make sure it has not been written already because if an
existing function already implements the behavior you want to apply, you should such a
function.
Because VBScript is an interpreted language (and not a compiled language), all of the possible
built-in functions are already known to the browser. Therefore, you don't need to include a file
or library.
The best place to find out what functions already exist is by consulting the MSDN library or
web site for its documentation.
Conversion Functions
We saw already that the users of your web pages will be presented with objects called controls.
These objects allow the user to type values or select something from a list. Anything the user
types in a text-based field is primarily considered as a string. Before performing any type of
operation that involves such a value, you should make sure you can identify what kind of value
it is. For example, you shouldn't try to multiply a string by a date such as FirstName * January
16. Although you will not be able to avoid every single type of problem that could occur in a
page, you can reduce errors by checking the value that a control holds.
The first thing you should do with a value retrieved from a control is to convert it to the
appropriate type. There are various conversion functions adapted to the different possible kinds
of values. The general syntax of the conversion functions is:
ReturnType = Function(Expression)
The expression could be of any kind, depending on how the expression would be supplied. For
example, it could be a string or value the user would have entered in form. It could also be the
result of a calculation performed on another procedure or function. The function would take
such a value, string, or expression and attempt to convert. If the conversion is successful, the
function would return a new value that is of the type specified by the ReturnType in our
syntax.
The conversion functions are as follows:
Function
Name Return Type Description
CBool Boolean
Converts an expression into a
Boolean value
CByte Byte
Converts an expression into Byte
number
CDate Date
Converts and expression into a date
or time value
CDbl Double
flowing-point (decimal) number
CInt Integer
Converts an expression into an
integer (natural) number
CCur Currency
currency (monetary) value
CLng Long
Converts an expression into a long
integer (a large natural) number
CSng Single
flowing-point (decimal) number
CStr String Converts an expression into a string
Practical Learning:
1. Start your text editor.

<html>
<head>

</Script>
<title>Employees Payroll</title>
</head>
<body>
<h1>Oddenton Auto Repair</h1>
<h2>Employees Payroll</h2>
<form name="EmployeesPayroll" method="POST">
<table border="0" width="548">
<tr>
<td width="104">First Name:</td>
<td width="430"><input type="text" name="txtFirstName" size="20"></td>
</tr>
<tr>
<td width="104">LastName:</td>
<td width="430"><input type="text" name="txtLastName" size="20"></td>
</tr>
</table>

<tr>
<td width="104">Hourly Salary</td>
<td width="428"><input type="text" name="txtHourlySalary" size="10"value="0.00"></td>
</tr>
</table>
<tr>
<td width="124">Weekly Hours</td>
<td width="62" align="center">Mon</td>
<td width="62" align="center">Tue</td>
<td width="62" align="center">Wed</td>
<td width="62" align="center">Thu</td>
<td width="62" align="center">Fri</td>
<td width="62" align="center">Sat</td>
<td width="62" align="center">Sun</td>
</tr>
<tr>
<td width="124"></td>
<td width="62" align="center"><input type="text" name="txtMon" size="6"
value="0.00"></td>
<td width="62" align="center"><input type="text" name="txtTue" size="6"
value="0.00"></td>
<td width="62" align="center"><input type="text" name="txtWed" size="6"
value="0.00"></td>
<td width="62" align="center"><input type="text" name="txtThu" size="6"
value="0.00"></td>
<td width="62" align="center"><input type="text" name="txtFri" size="6"
value="0.00"></td>
<td width="62" align="center"><input type="text" name="txtSat" size="6"
value="0.00"></td>
<td width="62" align="center"><input type="text" name="txtSun" size="6"
value="0.00"></td>
</tr>
</table>
<tr>
<td width="440">
<p><input type="button" value="Process" name="btnProcess">

<input type="reset" value="Reset" name="B2">
</p>
</td>
</tr>
</table>
</form>
</body>
</html>
3. Save the file as payroll2.htm in the vbstutorial folder and preview it in the browser:

4. After previewing the page, return to your text editor.
5. To perform calculations that involve values stored in text boxes, change the file as follows:

<html>
<head>

</Script>
<title>Employees Payroll</title>
</head>
<body OnLoad="GiveFocus()">
<h1>Odenton Auto Repair</h1>
<h2>Employees Payroll</h2>
<form name="EmployeesPayroll" method="POST">
<tr>
<td width="104">First Name:</td>
<td width="430"><input type="text" name="txtFirstName" size="20"></td>
</tr>
<tr>
<td width="104">LastName:</td>
<td width="430"><input type="text" name="txtLastName" size="20"></td>
</tr>
</table>

<tr>
<td width="104">Hourly Salary</td>
<td width="428"><input type="text" name="txtHourlySalary" size="10"
value="0.00"></td>
</tr>
</table>
<tr>
<td width="124">Weekly Hours</td>
<td width="62" align="center">Mon</td>
<td width="62" align="center">Tue</td>
<td width="62" align="center">Wed</td>
<td width="62" align="center">Thu</td>
<td width="62" align="center">Fri</td>
<td width="62" align="center">Sat</td>
<td width="62" align="center">Sun</td>
</tr>
<tr>
<td width="62" align="center"><input type="text" name="txtMon" size="6"
value="0.00"></td>
<td width="62" align="center"><input type="text" name="txtTue" size="6"
value="0.00"></td>
<td width="62" align="center"><input type="text" name="txtWed" size="6"
value="0.00"></td>
<td width="62" align="center"><input type="text" name="txtThu" size="6"
value="0.00"></td>
<td width="62" align="center"><input type="text" name="txtFri" size="6"
value="0.00"></td>
<td width="62" align="center"><input type="text" name="txtSat" size="6"
value="0.00"></td>
<td width="62" align="center"><input type="text" name="txtSun" size="6"
value="0.00"></td>
</tr>
</table>
<tr>
<td width="440">
<p><input type="button" value="Process" name="btnProcess"
OnClick="ProcessPayroll()">

<input type="reset" value="Reset" name="B2">
</p>
</td>
</tr>
</table>
</form>
<hr>
<form name="PayrollResults">
<tr>
<td width="113">Full Name:</td>
<td width="419"><input type="text" name="txtFullName" size="20"></td>
</tr>
</table>
<tr>
<td width="112">Weekly Earnings:</td>
<td width="419"><input type="text" name="txtWeeklyEarnings" size="20"
value="$0.00"></td>
</tr>
</table>
</form>
</body>
</html>
6. Save the file and preview it in the browser. Type the first and last names in the corresponding
fields.
Type the employees hours for each day and click the Process button

Besides the conversion functions, VBScript provides many other functions you can use in your
scripts. Some of these functions are:

Language Element Description
Abs Function Returns the absolute value of a number.
Array Function Returns a Variant containing an array.
Asc Function Returns the ANSI character code corresponding to the first letter in a string.
Atn Function Returns the arctangent of a number.
CBool Function Returns an expression that has been converted to a Variant of subtype Boolean.
CByte Function Returns an expression that has been converted to a Variant of subtype Byte.
CCur Function Returns an expression that has been converted to a Variant of subtype Currency.
CDate Function Returns an expression that has been converted to a Variant of subtype Date.
CDbl Function Returns an expression that has been converted to a Variant of subtype Double.
Chr Function Returns the character associated with the specified ANSI character code.
CInt Function Returns an expression that has been converted to a Variant of subtype Integer.
CLng Function Returns an expression that has been converted to a Variant of subtype Long.
Cos Function Returns the cosine of an angle.
CreateObject Function Creates and returns a reference to an Automation object.
CSng Function Returns an expression that has been converted to a Variant of subtype Single.
CStr Function Returns an expression that has been converted to a Variant of subtype String.
Date Function Returns the current system date.
DateAdd Function Returns a date to which a specified time interval has been added.
DateDiff Function Returns the number of intervals between two dates.
DatePart Function Returns the specified part of a given date.
DateSerial Function Returns a Variant of subtype Date for a specified year, month, and day.
DateValue Function Returns a Variant of subtype Date.
Day Function Returns a whole number between 1 and 31, inclusive, representing the day of the month.
Eval Function Evaluates an expression and returns the result.
Exp Function Returns e (the base of natural logarithms) raised to a power.
Filter Function Returns a zero-based array containing subset of a string array based on a specified filter
criteria.
Fix Function Returns the integer portion of a number.
FormatCurrency Function Returns an expression formatted as a currency value using the currency symbol defined in the
system control panel.
FormatDateTime Function Returns an expression formatted as a date or time.
FormatNumber Function Returns an expression formatted as a number.
FormatPercent Function Returns an expression formatted as a percentage (multiplied by 100) with a trailing %
character.
GetLocale Function Returns the current locale ID value.
GetObject Function Returns a reference to an Automation object from a file.
GetRef Function Returns a reference to a procedure that can be bound to an event.
Hex Function Returns a string representing the hexadecimal value of a number.
Hour Function Returns a whole number between 0 and 23, inclusive, representing the hour of the day.
InputBox Function Displays a prompt in a dialog box, waits for the user to input text or click a button, and returns
the contents of the text box.
InStr Function Returns the position of the first occurrence of one string within another.
InStrRev Function Returns the position of an occurrence of one string within another, from the end of string.
Int Function Returns the integer portion of a number.
IsArray Function Returns a Boolean value indicating whether a variable is an array.
IsDate Function Returns a Boolean value indicating whether an expression can be converted to a date.
IsEmpty Function Returns a Boolean value indicating whether a variable has been initialized.
IsNull Function Returns a Boolean value that indicates whether an expression contains no valid data (Null).
IsNumeric Function Returns a Boolean value indicating whether an expression can be evaluated as a number.
IsObject Function Returns a Boolean value indicating whether an expression references a valid Automation object.
Join Function Returns a string created by joining a number of substrings contained in an array.
LBound Function Returns the smallest available subscript for the indicated dimension of an array.
LCase Function Returns a string that has been converted to lowercase.
Left Function Returns a specified number of characters from the left side of a string.
Len Function Returns the number of characters in a string or the number of bytes required to store a
variable.
LoadPicture Function Returns a picture object. Available only on 32-bit platforms.
Log Function Returns the natural logarithm of a number.
LTrim Function Returns a copy of a string without leading spaces.
Mid Function Returns a specified number of characters from a string.
Minute Function Returns a whole number between 0 and 59, inclusive, representing the minute of the hour.
Month Function Returns a whole number between 1 and 12, inclusive, representing the month of the year.
MonthName Function Returns a string indicating the specified month.
MsgBox Function Displays a message in a dialog box, waits for the user to click a button, and returns a value
indicating which button the user clicked.
Now Function Returns the current date and time according to the setting of your computer's system date and
time.
Oct Function Returns a string representing the octal value of a number.
Replace Function Returns a string in which a specified substring has been replaced with another substring a
specified number of times.
RGB Function Returns a whole number representing an RGB color value.
Right Function Returns a specified number of characters from the right side of a string.
Rnd Function Returns a random number.
Round Function Returns a number rounded to a specified number of decimal places.
RTrim Function Returns a copy of a string without trailing spaces.
ScriptEngine Function Returns a string representing the scripting language in use.
ScriptEngineBuildVersion
Function
Returns the build version number of the scripting engine in use.
ScriptEngineMajorVersion
Function
Returns the major version number of the scripting engine in use.
ScriptEngineMinorVersion
Function
Returns the minor version number of the scripting engine in use.
Second Function Returns a whole number between 0 and 59, inclusive, representing the second of the minute.
SetLocale Function Sets the global locale and returns the previous locale.
Sgn Function Returns an integer indicating the sign of a number.
Sin Function Returns the sine of an angle.
Space Function Returns a string consisting of the specified number of spaces.
Split Function Returns a zero-based, one-dimensional array containing a specified number of substrings.
Sqr Function Returns the square root of a number.
StrComp Function Returns a value indicating the result of a string comparison.
String Function Returns a repeating character string of the length specified.
StrReverse Function Returns a string in which the character order of a specified string is reversed.
Tan Function Returns the tangent of an angle.
Time Function Returns a Variant of subtype Date indicating the current system time.
Timer Function Returns the number of seconds that have elapsed since 12:00 AM (midnight).
TimeSerial Function Returns a Variant of subtype Date containing the time for a specific hour, minute, and second.
TimeValue Function Returns a Variant of subtype Date containing the time.
Trim Function Returns a copy of a string without leading or trailing spaces.
TypeName Function Returns a string that provides Variant subtype information about a variable.
UBound Function Returns the largest available subscript for the indicated dimension of an array.
UCase Function Returns a string that has been converted to uppercase.
VarType Function Returns a value indicating the subtype of a variable.
Weekday Function Returns a whole number representing the day of the week.
WeekdayName Function Returns a string indicating the specified day of the week.
Year Function Returns a whole number representing the year.
Conditional Statements
Conditional Operators
Conditional statements allow you to control the flow of execution of a script or one of its
sections. To do this, you use some keywords and associate them with expressions. Depending
on the outcome of the checking process and other comparison operations, you can take
appropriate actions.
Most of the conditional statements perform comparisons and act depending on the outcome of
such comparisons. To assist you in making such comparisons, the VBScript language is
equipped with special operators that can act on natural numbers, decimal numbers, or
strings.
Equality =
We previously used the assignment operator = to give a value to a variable. Although the
assignment operator works on two operands, one on the left and another on the right of the
operator, it doesn't mean that both operands are equal. It is only used to give a new value,
the right value, to the left value. Because of that, the left operand must never be a numeric
value, although both operands can be variables.
If you want to find out whether two variables hold the same value, you should use the equality
operator. This is performed with = and its syntax is:
Variable1 = Variable2
To perform this operation, the browser (actually the interpreter) compares the operands on
both sides of the = operator. If both operands hold the same value, the comparison renders a
value of true. Otherwise, the comparison renders false.
Inequality <>
To compare two variables in order to find out whether they are different, you can use the
inequality operator <> whose syntax is:
Variable1 <> Variable2
When performing this operation, the browser compares the values of Variable1 and Variable2.
If their values are different, which means that they are not equal, the comparison results in a
true value (very important to understand). If they are equal, the result of the comparison is
false (observe the contrast with the equality operator =).
Less Than <
If you want to find out whether one value is less than another, use the "less than" operator <.
Its syntax is:
Variable1 < Variable2
The browser compares the values held by Variable1 and Variable2. If the value held by
Variable1 is less than that of Variable2, the comparison would produce a true value. Otherwise,
the result is rendered false.
Decision Makers: The If...Then Statement
The If...Then statement examines the truthfulness of an expression. Structurally, its formula
is:
If ConditionIsTrue Then Statement
Therefore, the program will examine a Condition. This condition can be a simple expression or a
combination of expressions. If the Condition is true, then the program will execute the
Statement.
There are two ways you can use the If...Then statement. If the conditional formula is short
enough, you can write it on one line, like this:
If Condition Then Statement
If there are many statements to execute as a truthful result of the condition, you should write
the statements on alternate lines. Of course, you can use this technique even if the condition
you are examining is short. In this case, one very important rule to keep is to terminate the
conditional statement with End If. Here is an example:
If Condition Then
Statement
End If
Here is another example:
If Condition Then
Statement1
Statement2
Statementn
End If

Practical Learning: Using the if Condition
1. Start your text editor

<html>
<head>
<title>Slockum Enterprises - User Account</title>
<SCRIPT LANGUAGE="VBScript">

</SCRIPT>
</head>
<body>
<h1>Slockum Enterprises</h1>
<p>In order to access this site, you must be a member. Please create an acount.</p>
<form name="frmRegistration">
<blockquote>
Full Name:<input type="text" name="txtFullName" size="32"><br>
Username: <input type="text" name="txtUsername" size="15"><br>
Password: <input type="password" name="txtPassword" size="15"><br>
Confirm: <input type="password" name="txtConfirmPass" size="15"><br>
Result: <input type="text" name="txtResult" size="40">
<blockquote><blockquote>
<input type="button" value="Send It" onClick="CheckPassword">
</blockquote></blockquote>
</blockquote>
</form>
</body>
</html>
3. Save the file as condition1.htm in the vbstutorial folder.
4. Preview the file in your browser.
6. To improve your form's appearance, change the file as follows:

<html>
<head>
<title>Slockum Enterprises - User Account</title>
<SCRIPT LANGUAGE="VBScript">

</SCRIPT>
</head>
<body>
<h1>Slockum Enterprises</h1>
<p>In order to access this site, you must be a member. Please create an acount.</p>
<form name="frmRegistration">
<table border="0" width="500" cellpadding="0" cellspacing="0">
<tr>
<td width="25%">First Name:</td>
<td width="25%"><input type="text" name="txtFirstName" size = "15"></td>
<td width="25%">Last Name:</td>
<td width="25%"><input type="text" name="txtLastName" size = "15"></td>
</tr>
<tr>
<td width="25%">Username:</td>
<td width="25%"><input type="text" name="txtUsername" size="15"></td>
<td width="25%">E-Mail Address:</td>
<td width="25%"><input type="text" name="txtEMailAddress" size = "15"></td>
</tr>
<tr>
<td width="25%">Password:</td>
<td width="25%"><input type="password" name="txtPassword" size="15"></td>
<td width="25%">Confirm Password:</td>
<td width="25%"><input type="password" name="txtConfirmPass" size="15"></td>
</tr>
<tr>
<td width="25%"> </td>
<td width="75%" colspan="3"><input type="button" value="Send It"
onClick="CheckPassword()"></td>
</tr>
<tr>
<td width="25%">Result:</td>
<td width="75%" colspan="3"><input type="text" name="txtResult"
size="40"></td>
</tr>
</table>
</form>
</body>
</html>
7. Save and preview the file in the browser:

8. After previewing the form, return to your text editor.
Decision Makers: The If...Then...Else Statement
The If...Then statement offers only one alternative: to act if the condition is true. Whenever
you would like to apply an alternate expression in case the condition is false, use the
If...Then...Else statement. The formula of this statement is:
If ConditionIsTrue Then
Expression1
Else
Expression2
End If

Decision Makers: The If...Then...ElseIf Statement
The If...Then...ElseIf statement acts like the If...Then...Else, except that it offers as many
choices as necessary. The formula is:
If Condition1 Then
Statement1
ElseIf Condition2 Then
Statement2
ElseIf Conditionk Then
Statementk
End If
The program will first examine Condition1. If Condition1 is true, the program will execute
Statment1 and stop examining conditions. But if Condition1 is false, the program will examine
Condition2 and act accordingly. Whenever a condition is false, the program will continue
examining the conditions until it finds one. Once a true condition has been found and its
statement executed, the program will terminate the conditional examination at End If.
Decision Makers: The Select Case Statement
If you have a large number of conditions to examine, the If...Then...Else will go through each
one of them, which could take long (although usually transparent to the user). VBScript offers
the alternative of jumping to the statement that applies to the state of the condition.
The formula of the Select Case is:
Select Case Expression
Case Expression1
Statement1
Case Expression2
Statement2
Case Expressionk
Statementk
End Select
The interpreter will examine the Expression and evaluate it once. Then it will compare the
result of this examination with the Expressionn of each case. Once it finds one that matches, it
would execute the corresponding Statement.
If you anticipate that there could be no match between the Expression and one of the
Expressions, you can use a Case Else statement at the end of the list. The statement would
then look like this:
Select Case Expression
Case Expression1
Statement1
Case Expression2
Statement2
Case Expressionk
Statementk
Case Else
Statementk
End Select

Counting and Looping
The Do...Loop Statements

Loops are used to repeat an action. There are various variations of the Do loops.
The formula of the Do While loop is:
Do While Condition
Statement(s)
Loop
This expression will execute the Statement or statements AS LONG AS the Condition is true, as
many times as the Condition will be visited and found true. The program will first test the
Condition. If the Condition is true, the program will execute the Statement or Statements and
go back to the Do While statement and test the condition again. If the Condition is false, the
program will skip the Do While statement and not execute any.
Since the Do While statement tests the Condition first before executing the Statement,
sometimes you will want the program to execute the Statement first, then go back and test the
Condition. VBScript offers a reverse to the formula, which is:
Do
Statement(s)
Loop While Condition
In this case, VBScript will execute the Statement or Statements first, then it will test the
Condition. If the Condition is true, the program will execute the Statement again. The program
will continue this examination-execution as long as the Condition is true. The big difference
here is that even if the Condition is false, the program will have executed the Condition at
least once.
An alternative to the Do While loop is the Do Until loop. Its formula is:
Do Until Condition
Statement(s)
Loop
This loop will first examine the Condition, instead of examining whether the Condition is true, it
will test whether the Condition is false.
The other side of the Do Until loop will execute the Statement first, then it would examine the
Condition. The formula is:
Do
Statement(s)
Loop Until Condition

Decision Makers: The For...Next Statement

If you don't know how many times a statement needs to be executed, you can use one of the
Do loops. But whenever you want to control how many times a statement should be executed,
the For...Next loop offers a better alternative. The formula is:
For Counter = Start To End
Statement(s)
Next
Used for counting, the For loop begins counting at the Start point. Then it examines whether
the current value (after starting to count) is greater than End; if that's the case, the program
exits the loop. It then executes the Statement or Statements. Next, it increments the value of
Counter by 1 and examines the condition again. This process goes on until Counter = End.
The formula above will increment the counting by 1 at the end of each statement. If you want
to control how the incrementing processes, you can set your own, using the Step option. Here is
the formula:
For Counter = Start To End Step Increment
Statement(s)
Next Counter
You can set the incrementing value to your choice. If the value of Increment is positive, the
Counter will be added its value. This means you can give it a negative value, in which case the
Counter will be subtracted the set value.

Decision Makers: The For Each...Next Statement

Since the For Next loop is used to execute a group of statements based on the current result
of the loop counting from Start to End, an alternative is to state various steps in the loop and
execute a group of statements for each one of the elements in the group. This is mostly used
when dealing with a collection of items.
The formula is:
For Each Element In Group
Statement(s)
Next Element
The loop will execute the Statement or Statement(s) for each Element in the Group.

Previous Copyright 2002-2010 FunctionX, Inc.

VBScript Tutorial

Transféré par

Informations du document

Titre original

Copyright

Formats disponibles

Partager ce document

Partager ou intégrer le document

Options de partage

Avez-vous trouvé ce document utile ?

Ce contenu est-il inapproprié ?

Droits d'auteur :

Formats disponibles

VBScript Tutorial

Transféré par

Droits d'auteur :

Formats disponibles

These are a few lessons serving as fundamentals to

scripting and computer language programming. These

Vous aimerez peut-être aussi