Scripting languages, like JavaScript and VBScript, are designed as an extension to HTML. The web browser receives scripts along with the rest of the web document. It is the browser's responsibility to parse and process the scripts. HTML was extended to include a tag that is used to incorporate scripts into HTML-the <SCRIPT> tag.
A completed copy of this part of the exercise can be found in the file exer1_v1.html.
In this exercise, you will create an HTML document and add a simple script to respond to a click event generated by a command button. You will need to be familiar with creating and testing an HTML document.
Open up a text editor application and insert the following HTML code:
Save the file and test it by loading it into Internet Explorer. The resulting page should be similar to the figure below.
Try out the Click Me button. Does anything happen?
In the next part we will add a script to provide functionality for the Click Me command button.
A completed copy of this part of the exercise can be found in the file exer1_v2.html.
Re-open the HTML document that you created in part 1, if necessary. Modify the document adding the lines shown with shading below:
Save the file and test it by loading it into Internet Explorer. Try out the Click Me button. The result is shown below:
Let's take a look at the three lines of code that you added. We want you to have a firm understanding of what the VBScript code is doing and how it is implemented within the HTML document. The first line defines a script. The FOR argument specifies that this script is for the button named cmdClickMe, the name we have given our command button with the HTML <INPUT> tag. The EVENT argument says that this script should be run when the button is clicked. The LANGUAGE argument states that this is a VBScript module.
The second line is the only line of VBScript in this HTML document. The MsgBox function simply displays a message dialog. You will see more of the MsgBox function later in this tutorial. The third line marks the end of our script.
In the previous part, we simply inserted the VBScript module right after the HTML tag that defined the command button. While this method is functional, it is not the preferred approach. HTML by itself can be confusing to read with all of its tags and text. Adding VBScript into the middle all of this just makes it even more complicated. A more organized alternative is to place all of your script together within the HTML document. The following steps introduce you to this approach.
A completed copy of this part of the exercise can be found in the file exer1_v3.html.
Save the file and test the file by loading it into Internet Explorer. When you try out the Click Me button, the result is the same as the previous example.
This second method starts with the same <SCRIPT> tag as the previous example. At the center of this script are three lines that provide the functionality for our page. The first line defines a sub-procedure called cmdClickMe_OnClick. This will be executed any time that the control cmdClickMe is clicked. This type of procedure is referred to as an event procedure. The event is the user clicking the button. The procedure that we associate with this event is executed every time the button is clicked.
On the second line we find the MsgBox function again, while the third line marks an end to our subroutine.
Don't get too hung up on understanding all of the details of this right now, you will see plenty more examples along the way.
That's it-you just created your first VBScript-enabled web page. Along the way you have learned:
You add scripts into your web pages within a pair of <SCRIPT> tags. The <SCRIPT> tag signifies the start of the script section, while </SCRIPT> marks the end. An example of this is shown below:
<HTML><HEAD><TITLE>Working With VBScript</TITLE><SCRIPT LANGUAGE="VBScript"> MsgBox "Welcome to my Web page!"</SCRIPT>The beginning <SCRIPT> tag includes a LANGUAGE argument that indicates the scripting language that will be used. The LANGUAGE argument is required because there is more than one scripting language. Without the LANGUAGE argument, a web browser would not know if the text between the tags was JavaScript, VBScript or another scripting language.
While technically you can place scripts throughout an HTML document using pairs of <SCRIPT> tags, typically scripts are often found at either the top or bottom of a Web document. This provides for easy reference and maintenance.
Not all browsers support scripting languages. Some only support JavaScript. Only Microsoft's Internet Explorer supports VBScript. You might be wondering what happens to your scripts when non-supporting browsers encounter them. Usually browsers will do what they do most frequently with text, they will display your scripts as part of the web page. Obviously, this isn't the result you had hoped for. One simple way to address this problem is to encase your scripts in comment tags (<!-- and -->). Below is our example script as it appears with the addition of the comment tags:
<HTML><HEAD><TITLE>Working With VBScript</TITLE><SCRIPT LANGUAGE="VBScript"><!-- MsgBox "Welcome to my Web page!"--></SCRIPT></HEAD></HTML>Now, when a browser that does not support VBScript processes this page, it will view your script as a comment and simply ignore it.
The <SCRIPT> Tag
Your First VBScript Exercise
The easiest way to learn any language is to work with it. So let's get right into exercise 1 and expose you to the process of using VBScript in your web pages. Just follow along with the step-by-step instructions to create your first script-enabled web page.A completed copy of this part of the exercise can be found in the file exer1_v1.html.
In this exercise, you will create an HTML document and add a simple script to respond to a click event generated by a command button. You will need to be familiar with creating and testing an HTML document.
Open up a text editor application and insert the following HTML code:
<HTML><HEAD> <TITLE>Working With VBScript: Exercise 1</TITLE> </HEAD><BODY> <H1>Your First VBScript Exercise</H1> <P> By utilizing VBScript you can give your web pages actions. Click on the button below to see what we mean. </P> <FORM NAME="frmExercise1"> <INPUT TYPE="Button" NAME="cmdClickMe" VALUE="Click Me"> </FORM></BODY></HTML>Save the file and test it by loading it into Internet Explorer. The resulting page should be similar to the figure below.
In the next part we will add a script to provide functionality for the Click Me command button.
A completed copy of this part of the exercise can be found in the file exer1_v2.html.
Re-open the HTML document that you created in part 1, if necessary. Modify the document adding the lines shown with shading below:
<HTML><HEAD><TITLE>Working With VBScript: Exercise 1</TITLE></HEAD><BODY> <H1>Your First VBScript Exercise</H1> <P> By utilizing VBScript you can give your Web pages actions. Click on the button below to see what we mean. </P> <FORM NAME="frmExercise1"> <INPUT TYPE="Button" NAME="cmdClickMe" VALUE="Click Me"> <SCRIPT FOR="cmdClickMe" EVENT="onClick" LANGUAGE="VBScript"> MsgBox "A simple example of VBScript in action." </SCRIPT> </FORM></BODY></HTML>Save the file and test it by loading it into Internet Explorer. Try out the Click Me button. The result is shown below:
Let's take a look at the three lines of code that you added. We want you to have a firm understanding of what the VBScript code is doing and how it is implemented within the HTML document. The first line defines a script. The FOR argument specifies that this script is for the button named cmdClickMe, the name we have given our command button with the HTML <INPUT> tag. The EVENT argument says that this script should be run when the button is clicked. The LANGUAGE argument states that this is a VBScript module.
<SCRIPT FOR="cmdClickMe" EVENT="onClick" LANGUAGE="VBScript">The second line is the only line of VBScript in this HTML document. The MsgBox function simply displays a message dialog. You will see more of the MsgBox function later in this tutorial. The third line marks the end of our script.
In the previous part, we simply inserted the VBScript module right after the HTML tag that defined the command button. While this method is functional, it is not the preferred approach. HTML by itself can be confusing to read with all of its tags and text. Adding VBScript into the middle all of this just makes it even more complicated. A more organized alternative is to place all of your script together within the HTML document. The following steps introduce you to this approach.
A completed copy of this part of the exercise can be found in the file exer1_v3.html.
- Re-open the HTML document that you created in part 2, if necessary, and remove the lines that you added there:
<SCRIPT FOR="cmdClickMe" EVENT="onClick" LANGUAGE="VBScript"> MsgBox "A simple example of VBScript in action."</SCRIPT>- Modify the document adding the scripting lines as shown in the light shading below:
<HTML><HEAD><TITLE>Working With VBScript: Exercise 1</TITLE><SCRIPT LANGUAGE="VBScript"><!-- Instruct non-IE browsers to skip over VBScript modules. Sub cmdClickMe_OnClick MsgBox "A simple example of VBScript in action." End Sub--></SCRIPT></HEAD><BODY> <H1>Your First VBScript Exercise</H1> <P> By utilizing VBScript you can give your Web pages actions. Click on the button below to see what we mean. </P> <FORM NAME="frmExercise1"> <INPUT TYPE="Button" NAME="cmdClickMe" VALUE="Click Me"> </FORM></BODY></HTML>Save the file and test the file by loading it into Internet Explorer. When you try out the Click Me button, the result is the same as the previous example.
This second method starts with the same <SCRIPT> tag as the previous example. At the center of this script are three lines that provide the functionality for our page. The first line defines a sub-procedure called cmdClickMe_OnClick. This will be executed any time that the control cmdClickMe is clicked. This type of procedure is referred to as an event procedure. The event is the user clicking the button. The procedure that we associate with this event is executed every time the button is clicked.
Sub cmdClickMe_OnClickOn the second line we find the MsgBox function again, while the third line marks an end to our subroutine.
Don't get too hung up on understanding all of the details of this right now, you will see plenty more examples along the way.
That's it-you just created your first VBScript-enabled web page. Along the way you have learned:
- How to add VBScript into your web pages
- Ways to tie HTML and VBScript together to provide functionality to your pages
- Why you should encase your VBScript modules within HTML comments
No comments:
Post a Comment