When a VBScript is inserted into a HTML document, the Internet browser will read the HTML and interpret the VBScript. The VBScript can be executed immediately, or at a later event.
<html> <head> </head> <body> <script type="text/vbscript"> document.write("Hello from VBScript!") </script> </body> </html> |
And it produces this output:
| Hello from VBScript! |
To insert a script in an HTML document, use the <script> tag. Use the type attribute to define the scripting language.
<script type="text/vbscript">
|
Then comes the VBScript: The command for writing some text on a page is document.write:
document.write("Hello from VBScript!")
|
The script ends:
</script>
|
Older browsers that do not support scripts will display the script as page content. To prevent them from doing this, you can use the HTML comment tag:
<script type="text/vbscript"> <!-- some statements --> </script> |
Head section
Scripts can be placed in the head section. Usually we put all the "functions"
in the head section. The reason for this is to be sure that the script is
loaded before the function is called.
Body section
Execute a script that is placed in the body section. Scripts in the body
section are executed when the page is loading.
Scripts in a page will be executed immediately while the page loads into the browser. This is not always what we want. Sometimes we want to execute a script when a page loads, other times when a user triggers an event.
Scripts in the head section: Scripts to be executed when they are called or when an event is triggered go in the head section. When you place a script in the head section you will assure that the script is loaded before anyone uses it:
<html> <head> <script type="text/vbscript"> some statements </script> </head> |
Scripts in the body section: Scripts to be executed when the page loads go in the body section. When you place a script in the body section it generates the content of the page:
<html> <head> </head> <body> <script type="text/vbscript"> some statements </script> </body> |
Scripts in both the body and the head section: You can place an unlimited number of scripts in your document, so you can have scripts in both the body and the head section.
<html> <head> <script type="text/vbscript"> some statements </script> </head> <body> <script type="text/vbscript"> some statements </script> </body> |
Create a variable
Variables are used to store information. This example demonstrates how you can
create a variable, and assign a value to it.
Insert a variable value in a
text
This example demonstrates how you can insert a variable value in a text.
Create an array
Arrays are used to store a series of related data items. This example
demonstrates how you can make an array that stores names. ( We are using a "for
loop" to demonstrate how you write the names. )
A variable is a "container" for information you want to store. A variable's value can change during the script. You can refer to a variable by name to see its value or to change its value. In VBScript, all variables are of type variant, that can store different types of data.
You can declare variables with the Dim, Public or the Private statement. Like this:
dim name name=some value |
Now you have created a variable. The name of the variable is "name".
You can also declare variables by using its name in your script. Like this:
name=some value |
Now you have also created a variable. The name of the variable is "name".
However, the last method is not a good practice, because you can misspell the variable name later in your script, and that can cause strange results when your script is running. This is because when you misspell for example the "name" variable to "nime" the script will automatically create a new variable called "nime". To prevent your script from doing this you can use the Option Explicit statement. When you use this statement you will have to declare all your variables with the dim, public or private statement. Put the Option Explicit statement on the top of your script. Like this:
option explicit dim name name=some value |
You assign a value to a variable like this:
name="Hege" i=200 |
The variable name is on the left side of the expression and the value you want to assign to the variable is on the right. Now the variable "name" has the value "Hege".
How long a variable exists is its lifetime.
When you declare a variable within a procedure, the variable can only be
accessed within that procedure. When the procedure exits, the variable is
destroyed. These variables are called local variables. You can have local
variables with the same name in different procedures, because each is
recognized only by the procedure in which it is declared.
If you declare a variable outside a procedure, all the procedures on your page
can access it. The lifetime of these variables starts when they are declared,
and ends when the page is closed.
Sometimes you want to assign more than one value to a single variable. Then you can create a variable that can contain a series of values. This is called an array variable. The declaration of an array variable uses parentheses ( ) following the variable name. In the following example, an array containing 3 elements is declared:
dim names(2) |
The number shown in the parentheses is 2. We start at zero so this array contains 3 elements. This is a fixed-size array. You assign data to each of the elements of the array like this:
names(0)="Tove" names(1)="Jani" names(2)="Stale" |
Similarly, the data can be retrieved from any element using the index of the particular array element you want. Like this:
mother=names(0) |
You can have up to 60 dimensions in an array. Multiple dimensions are declared by separating the numbers in the parentheses with commas. Here we have a two-dimensional array consisting of 5 rows and 7 columns:
dim table(4, 6) |
Sub procedure
The sub procedure does not return a value.
Function procedure
The function procedure is used if you want to return a value.
We have two kinds of procedures: The Sub procedure and the Function procedure.
A Sub procedure:
Sub mysub() some statements End Sub or Sub mysub(argument1,argument2) some statements End Sub |
A Function procedure:
Function myfunction() some statements myfunction=some value End Function or Function myfunction(argument1,argument2) some statements myfunction=some value End Function |
When you call a Function in your code, you do like this:
name = findname() |
Here you call a Function called "findname", the Function returns a value that will be stored in the variable "name".
Or, you can do like this:
msgbox "Your name is " & findname() |
Here you also call a Function called "findname", the Function returns a value that will be displayed in the message box.
When you call a Sub procedure you can use the Call statement, like this:
Call MyProc(argument) |
Or, you can omit the Call statement, like this:
MyProc argument |
The if...then...else
statement
This example demonstrates how to write the if...then..else statement.
The if...then...elseif...
statement
This example demonstrates how to write the if...then...elseif statement.
The select case
statement
This example demonstrates how to write the select case statement.
Very often when you write code, you want to perform different actions for different decisions. You can use conditional statements in your code to do this.
In VBScript we have three conditional statements:
You should use the If...Then...Else statement if you want to
If you want to execute only one statement when a condition is true, you can write the code on one line:
if i=10 Then msgbox "Hello" |
There is no ..else.. in this syntax. You just tell the code to perform one action if the condition is true (in this case if i=10).
If you want to execute more than one statement when a condition is true, you must put each statement on separate lines and end the statement with the keyword "End If":
if i=10 Then msgbox "Hello" i = i+1 end If |
There is no ..else.. in this syntax either. You just tell the code to perform multiple actions if the condition is true.
If you want to execute a statement if a condition is true and execute another statement if the condition is not true, you must add the "Else" keyword:
if i=10 then msgbox "Hello" else msgbox "Goodbye" end If |
The first block of code will be executed if the condition is true, and the other block will be executed otherwise (if i is not equal to 10).
You can use the if...then...elseif statement if you want to select one of many blocks of code to execute:
if payment="Cash" then msgbox "You are going to pay cash!" elseif payment="Visa" then msgbox "You are going to pay with visa." elseif payment="AmEx" then msgbox "You are going to pay with American Express." else msgbox "Unknown method of payment." end If |
You can also use the SELECT statement if you want to select one of many blocks of code to execute:
select case payment case "Cash" msgbox "You are going to pay cash" case "Visa" msgbox "You are going to pay with visa" case "AmEx" msgbox "You are going to pay with American Express" case Else msgbox "Unknown method of payment" end select |
This is how it works: First we have a single expression (most often a variable), that is evaluated once. The value of the expression is then compared with the values for each Case in the structure. If there is a match, the block of code associated with that Case is executed.
For...next loop
This example demonstrates how to make a simple For....Next
loop.
Looping through headers
This example demonstrates how you can loop through the 6 headers in html.
For...each loop
This example demonstrates how to make a simple For.....Each
loop.
Do...While loop
This example demonstrates how to make a simple Do...While
loop.
Very often when you write code, you want to allow the same block of code to run a number of times. You can use looping statements in your code to do this.
In VBScript we have four looping statements:
You can use a For...Next statement to run a block of code, when you know how many repetitions you want.
You can use a counter variable that increases or decreases with each repetition of the loop, like this:
For i=1 to 10 some code Next |
The For statement specifies the counter variable (i) and its start and end values. The Next statement increases the counter variable (i) by one.
Using the Step keyword, you can increase or decrease the counter variable by the value you specify.
In the example below, the counter variable (i) is increased by two each time the loop repeats.
For i=2 To 10 Step 2 some code Next |
To decrease the counter variable, you must use a negative Step value. You must specify an end value that is less than the start value.
In the example below, the counter variable (i) is decreased by two each time the loop repeats.
For i=10 To 2 Step -2 some code Next |
You can exit a For...Next statement with the Exit For keyword.
A For Each...Next loop repeats a block of code for each item in a collection, or for each element of an array.
dim cars(2) cars(0)="Volvo" cars(1)="Saab" cars(2)="BMW" For Each x in cars document.write(x & "<br />") Next |
You can use Do...Loop statements to run a block of code when you do not know how many repetitions you want. The block of code is repeated while a condition is true or until a condition becomes true.
You use the While keyword to check a condition in a Do...Loop statement.
Do While i>10 some code Loop |
If i equals 9, the code inside the loop above will never be executed.
Do some code Loop While i>10 |
The code inside this loop will be executed at least one time, even if i is less than 10.
You use the Until keyword to check a condition in a Do...Loop statement.
Do Until i=10 some code Loop |
If i equals 10, the code inside the loop will never be executed.
Do some code Loop Until i=10 |
The code inside this loop will be executed at least one time, even if i is equal to 10.
You can exit a Do...Loop statement with the Exit Do keyword.
Do Until i=10 i=i-1 If i<10 Then Exit Do Loop |
The code inside this loop will be executed as long as i is different from 10, and as long as i is greater than 10.
This tutorial has taught you how to add VBScript to your HTML pages, to make your web site more dynamic and interactive.
You have learned how to create variables and functions, and how to make different scripts run in response to different scenarios.
For more information on VBScript, please look at our VBScript examples and our VBScript references.
The next step is to learn ASP.
While scripts in an HTML file are executed on the client (in the browser), scripts in an ASP file are executed on the server.
With ASP you can dynamically edit, change or add any content of a Web page, respond to data submitted from HTML forms, access any data or databases and return the results to a browser, customize a Web page to make it more useful for individual users.
Wed, 20 Aug 2008
2008-05-15
2008-05-07
2008-04-23
2008-04-13
2008-04-06
2008-03-19
2008-02-23