Module 6: Using Client- Side Scripts

Contents
Overview 1
Client-Side vs. Server-Side Scripting 2
Client-Side and Server-Side Objects 3
Introducing Client-Side Scripting 5
Using Dynamic HTML 7
Using Event Procedures 17
Lab 6.1: Adding a Rollover Effect 25
Using the Document Object Model (DOM) 28
Validating Form Inputs 38
Lab 6.2: Validating Form Inputs 43
Review 48

Module 6: Using Client-
Side Scripts

Information in this document is subject to change without notice. The names of companies,
products, people, characters, and/or data mentioned herein are fictitious and are in no way intended
to represent any real individual, company, product, or event, unless otherwise noted. Complying
with all applicable copyright laws is the responsibility of the user. No part of this document may
be reproduced or transmitted in any form or by any means, electronic or mechanical, for any
purpose, without the express written permission of Microsoft Corporation. If, however, your only
means of access is electronic, permission to print one copy is hereby granted.

Microsoft may have patents, patent applications, trademarks, copyrights, or other intellectual

property rights covering subject matter in this document. Except as expressly provided in any
written license agreement from Microsoft, the furnishing of this document does not give you any
license to these patents, trademarks, copyrights, or other intellectual property.

 2000 Microsoft Corporation. All rights reserved.

Microsoft, ActiveX, BackOffice, FrontPage 2000, MS-DOS, Notepad, Visual Basic, Windows,
and Windows 2000 are either registered trademarks or trademarks of Microsoft Corporation in the
U.S.A. and/or other countries.

The names of companies, products, people, characters, and/or data mentioned herein are fictitious
and are in no way intended to represent any real individual, company, product, or event, unless
otherwise noted.

Other product and company names mentioned herein may be the trademarks of their respective
owners.

Program Manager: Steve Merrill
Development Lead: Basabjit Chakrabarty (NIIT)
Instructional Designers: Sangeeta Nair, Vijayalakshmi Narayanaswamy (NIIT); Veena Nambier,
Yatinder Walia (NIIT)
Technical Contributors: Scott Swigart (3 Leaf Solutions); Gary Gumbiner (Great Barrier
Technologies, Inc.)
Graphic Artist: Scott Serna (Creative Assets)
Editing Manager: Jennifer Linn
Editor: Reid Bannecker
Production Manager: Miracle Davis
Production Coordinator: Linda Lu Cannon (The Write Stuff)
Build Coordinator: Eric Wagoner
Testing Lead: Eric Meyers

Testing: Bryan Urakawa, Chris and Edward
Lead Product Manager, Internet Services: Hilary Vandal
Manufacturing Manager: Rick Terek
Operations Coordinator: John Williams
Manufacturing Support: Laura King; Kathy Hershey
Lead Product Manager, Release Management: Bo Galford
Group Manager, Courseware Infrastructure: David Bramble
General Manager: Robert Stewart

Module 6: Using Client-Side Scripts iii


Instructor Notes
This module introduces students to client-side scripting. Students will learn
about Visual Basic Scripting Edition (VBScript), a scripting language, and its
applications as a client-side script. Also, this module introduces students to
dynamic HTML. Finally, students will learn how to validate form inputs using
VBScript.
After completing this module, students will be able to:
!
Write a client-side script using VBScript.
!
Use dynamic HTML to add effects to a Web page.
!
Use Microsoft Script Editor.
!
Change the style of an element dynamically using Microsoft Script Editor.
!
Use the Document Object Model (DOM).
!

Validate form inputs using VBScript.

Materials and Preparation
This section provides you with the required materials and preparation tasks that
are needed to teach this module.
Required Materials
To teach this module, you need the following materials:
!
Microsoft PowerPoint file 1912A_06.ppt
!
Module 6, “Using Client-Side Scripts”
!
Lab 6.1, “Adding a Rollover Effect”
!
Lab 6.2, “Validating Form Inputs”

Preparation Tasks
To prepare for this module, you should:
!
Read all of the materials for this module.
!
Complete all the labs.

Presentation:
105 Minutes

Labs:
60 Minutes
iv Module 6: Using Client-Side Scripts

Module Strategy
Use the following strategy to present this module:
!
Introducing Client-Side Scripting
First, demonstrate an example that uses client-side scripting. Then,
introduce VBScript as a client-side scripting language. Explain the
<SCRIPT> tag using the example specified on the slide.
!
Using Dynamic HTML
This section provides an overview of common element properties. Introduce
event procedures. Then, demonstrate and explain the common element
attributes, such as the ID attribute, and the common element properties,
such as innerText and innerHTML, in dynamic HTML, to manipulate
HTML elements, with the help of the sample code given for each of the
properties. Finally, ask students to do a practice on using event procedures.
!
Using Event Procedures
From this point, all pages will be created using Microsoft Script Editor.
First, demonstrate the steps to write a script using Microsoft Script Editor.
Then, explain the rollover feature with the help of a sample code. In
addition, explain how to change the style of an element dynamically.
Finally, let students add a rollover feature to a Web page as a practice.
!
Using the Document Object Model (DOM)
This topic provides an overview of DOM. First, explain the Window object
with the help of the given example. Then explain the Document object and
its elements with the help of the examples. Finally, students will do a
practice on using the onload event of the window object to display the date
and time a page was last modified.

!
Validating Form Inputs
This topic explains how to validate forms by using VBScript. First, explain
the len function with the help of the sample code. Finally, explain the
isNumeric function with the help of the sample code.


Module 6: Using Client-Side Scripts 1


#
##
#

Overview
!
Client-Side vs. Server-Side Scripting
!
Client-Side and Server-Side Objects
!
Introducing Client-Side Scripting
!
Using Dynamic HTML
!
Using Event Procedures
!
Lab 6.1: Adding a Rollover Effect
!
Using the Document Object Model (DOM)
!

Validating Form Inputs
!
Lab 6.2: Validating Form Inputs
!
Review
(View examples.htm from Sampapps)


Client-side scripts are programs attached to HTML documents, which run on
browsers that support scripts. These scripts typically get executed in response to
a user action. You can write client-side scripts using scripting languages for the
Web, such as Microsoft
®
Visual Basic
®
Scripting Edition (VBScript), which is
supported by Internet Explorer. Client-side scripts can be used to add
interesting and useful effects to Web pages. Client side scripts can also be used
to create features such as rollover images and popup menus.
Web pages created with HTML alone are static in nature. However, you can
make your Web pages interactive by using scripting languages, such as
VBScript. You can use scripting languages in your Web pages to process form
information and respond to queries. Also, you can add dynamic effects to pages
by using dynamic HTML (DHTML).
DHTML equips you with the power to create visually outstanding Web pages.
These pages dynamically change their content and interact with the user,
without relying on server-side programs or complicated sets of HTML pages to
achieve special effects.
After completing this module, you will be able to:
!

Write a client-side script using VBScript.
!
Use DHTML to add effects to a Web page.
!
Use Microsoft Script Editor.
!
Change the style of an element dynamically using Microsoft Script Editor.
!
Use the Document Object Model (DOM).
!
Validate form inputs using VBScript.

Slide Objective
To provide an overview of
the module topics and
objectives.
Lead-in
In this module, you will learn
about client-side scripts.
Delivery Tip
Begin the module with an
example. From Internet
Explorer, open the file
examples.htm in the
\Inetpub\wwwroot\1912\Sam
papps\Ch06 folder. Show
students the power of client-
side scripts. Click each style
in the page and show
students the effect of it. Tell

students that such effects
are achieved by coding for
specific client-side objects.
In addition, tell students that
at the end of the module,
they can create similar
effects by using client-side
scripts, such as VBScript.
2 Module 6: Using Client-Side Scripts


Client-Side vs. Server-Side Scripting
!
Server-side scripting
!
Client-side scripting
The time at the Web server is:
<%= Time() %>
The date at the Web server is:
<%= Date() %>
The time at the Web server is:
<%= Time() %>
The date at the Web server is:
<%= Date() %>
The time at the Web browser is:
<SCRIPT LANGUAGE=VBScript>
Document.Write time()
</SCRIPT><BR>
The date at the Web browser is:
<SCRIPT LANGUAGE=VBScript>

Document.Write date()
</SCRIPT><HR>
The time at the Web browser is:
<SCRIPT LANGUAGE=VBScript>
Document.Write time()
</SCRIPT><BR>
The date at the Web browser is:
<SCRIPT LANGUAGE=VBScript>
Document.Write date()
</SCRIPT><HR>


Server-side and client-side scripts look similar because they use the same
language. The main difference is in how script blocks are specified, as shown in
the following table.
Server-side script Client-side script

The time at the
Web server is:
<%= Time() %>
<BR>


The date at the
Web server is:
<%= Date() %>
<HR>

The time at the
Web browser is:

<SCRIPT LANGUAGE=VBScript>
Document.Write time()
</SCRIPT><BR>

The date at the
Web browser is:
<SCRIPT LANGUAGE=VBScript>
Document.Write date()
</SCRIPT><HR>

The code in the left column of the table shows how to use the server-side script
to obtain the date and time at the server. The code in the right column shows
how to use the client-side script to obtain the date and time at the user’s own
computer.
Typically, the server-side script is used for connecting to server resources such
as a database, and the client-side script is used for validating user data.
Slide Objective
To differentiate between
server-side and client-side
scripting.
Lead-in
So far, you learned about
server-side scripting.
Before, you learn about
client-side scripting, let’s
look at the difference
between server-side and
client-side scripting.
Module 6: Using Client-Side Scripts 3

Client-Side and Server-Side Objects
!
Client-side objects
$
Window (represents the properties, methods, and events of the
Internet Explorer window)
$
Document (represents the HTML document displayed by the
browser)
!
Server-side objects
$
Response (generates the response that is sent back to the
browser)
$
Request (contains information sent by the browser to the Web
server)
$
Session (contains user specific information)
$
Application (contains global information for Web applications)
$
Server (provides common functionalities and access to COM
objects)


In the previous module, you looked at writing scripts that run on the Web
server. These scripts are called server-side scripts. However, you can also write
scripts that run on the Web browser. These scripts are called client-side scripts.

You may not want to handle all the processing at the server, as this affects the
performance of a site. For example, if you want to validate that the user has
entered only digits in a Social Security Number field on a form, client-side
script is appropriate. The code runs in the browser and submits only valid data
to the server. Server-side script is appropriate when you want to process that
data that is performed by a form and also for accessing and writing to a
database.
Client-side objects
!
Window
The Window object represents the properties, methods, and events of the
Internet Explorer window.
!
Document
The Document object represents the HTML document displayed by the
browser.

Server-side objects
!
Response
The Response object generates the response that is sent back to the browser.
!
Request
The Request object contains the information sent by the browser to the Web
server.
!
Session
The Session object contains user specific information.
!
Application

Slide Objective
To provide an overview of
when to use client-side
scripts and server-side
scripts and discuss the
client-side and server-side
objects.
Lead-in
Client-side scripts execute
on the browser, whereas
server-side scripts execute
on the server.
4 Module 6: Using Client-Side Scripts


The Application object contains global information for Web applications.
!
Server
The Server object provides common functionalities and access to COM
objects.
Module 6: Using Client-Side Scripts 5


Introducing Client-Side Scripting
!
Client-side scripts are programs attached to HTML
documents, which run on Web browsers
!
VBScript - a scripting language for writing client-side
scripts

!
<SCRIPT> tag
(View button.htm from Sampapps)
<SCRIPT LANGUAGE="VBScript">
<!--
VBScript code is placed here
-->
</SCRIPT>
<SCRIPT LANGUAGE="VBScript">
<!--
VBScript code is placed here
-->
</SCRIPT>


To use client-side scripts, embed the source code into an HTML page. When
the HTML page is downloaded from the Web server, the source code can be
viewed by anyone.
VBScript is interpreted at runtime. It allows you to work with properties of
objects, such as Microsoft ActiveX
®
controls. It also enables you to validate
data directly on the user machine without sending the data to the Web server.
The <SCRIPT> tag
VBScript is contained within the HTML <SCRIPT> tags. If the browser does
not interpret VBScript, the code within the <SCRIPT> tags is ignored. The
<SCRIPT> tag includes the LANGUAGE attribute. The LANGUAGE
attribute indicates the scripting language. If you are using VBScript, then set the
LANGUAGE attribute to VBScript. You need to specify the language because
some browsers, such as Internet Explorer, support more than one scripting

language.
Slide Objective
To provide an overview of
client-side scripting and
explain the <SCRIPT> tag.
Lead-in
Client-side scripts are
programs attached to HTML
documents, which run on
Web browsers.
Delivery Tip
Present the concept of
client-side script by first
showing an example of a
Web page that uses client-
side script. From Internet
Explorer, open the file
button.htm in the
\Inetpub\wwwroot\1912\Sam
papps\Ch06 folder. Tell the
students that this example
page uses VBScript.
6 Module 6: Using Client-Side Scripts


The following example code demonstrates the use of the <SCRIPT> tag:
<HTML>
<HEAD>
<SCRIPT LANGUAGE="VBScript">
<!—

VBScript code is placed here
-->
</SCRIPT>
</HEAD>
<BODY>
This section contains HTML tags
</BODY>
</HTML>


If you do not set the LANGUAGE attribute, Internet Explorer assumes
that you are running JavaScript, which is another scripting language. If your
code is in VBScript, you will receive syntax errors.

Place the entire code within the same <SCRIPT> tag. You can have more than
one procedure in the same <SCRIPT> tag. You cannot split the code for one
procedure between two <SCRIPT> tags.
Browsers that do not support the <SCRIPT> tag display the code within the
<SCRIPT> tags as regular text. Placing script code between comment tags
prevents this from happening.
Delivery Tip
Explain the <SCRIPT> tag
to the students.
Note
Module 6: Using Client-Side Scripts 7


#
##
#

Using Dynamic HTML
!
Introducing Event Procedures
!
The ID Attribute
!
The innerText Property
!
The innerHTML Property
!
Practice: Using Event Procedures


You can use dynamic HTML (DHTML) in client-side scripts to
programmatically manipulate the content of a Web page.
DHTML properties are either not explicitly defined on a Web page, or defined
at run time. Certain element properties, such as innerText and innerHTML,
allow you to change the textual or HTML content of a Web page.
In this section, you will look at how to use the following common element
properties of DHTML to programmatically manipulate the content of a Web
page:
!
ID attribute
!
innerText property
!
innerHTML property

Slide Objective

To provide an overview of
the common element
properties.
Lead-in
You can use dynamic HTML
in client-side scripts to
programmatically
manipulate the content of a
Web page.
8 Module 6: Using Client-Side Scripts


Introducing Event Procedures
!
An event can be any action including a click, movement
of the mouse, or loading of a document.
!
Common mouse events: onclick, onmouseover, and
onmouseout.
<SCRIPT language="VBScript">
<!--
Sub changecolor_onmouseover()
changecolor.style.color=”red”
End Sub
Sub changecolor _onmouseout()
changecolor.style.color=”green”
End Sub
-->
</SCRIPT>
<SCRIPT language="VBScript">

<!--
Sub changecolor_onmouseover()
changecolor.style.color=”red”
End Sub
Sub changecolor _onmouseout()
changecolor.style.color=”green”
End Sub
-->
</SCRIPT>


All dynamic content in a document runs as a result of an event. An event can be
a mouse-click or the movement of the mouse. It could also be the loading of a
document into the browser. Here are a few common mouse events to start a
script.
Mouse events
Mouse events occur when the user moves or clicks the mouse. The following
table describes the various mouse events.
Mouse event User action that fires the event

onclick Pressing and releasing the left mouse button, or pressing keys, such
as
ENTER
and
ESC
, on a form.
ondblclick Double-clicking an object.
ondragstart Starting to drag a selection or a selected element.
onmousedown Pressing a button on a pointer device, such as the mouse.
onmousemove Moving the mouse.

onmouseout Moving the mouse pointer out of an element.
onmouseover Moving the mouse pointer into an element. The event occurs when
the pointer first enters the element, and does not repeat unless the
user moves the pointer out of the element and then back into it.
onmouseup Releasing a mouse button.

Slide Objective
To provide an overview of
event procedures.
Lead-in
An event is an action
performed, which can be a
mouse click or a key press.
Module 6: Using Client-Side Scripts 9


When a mouse event occurs, the properties of the event define the event as
follows:
!
The Button property identifies the mouse button that is pressed.
!
The x and y properties specify the location of the mouse in the browser
window at the time of the event.
!
For the onmouseover and onmouseout events, the toElement and
fromElement properties specify the position the mouse is moving to and
from.

Microsoft Script Editor
Microsoft Script Editor allows you to view and edit HTML documents. You

can also add script, such as VBScript, to files and debug the script.
10 Module 6: Using Client-Side Scripts


The ID Attribute
!
Uniquely identifies an object
!
Use the ID property of HTML elements in the client-side
script to manipulate elements
<body>
<p id="myParagraph">dynamic HTML!</p>
</body>
<body>
<p id="myParagraph">dynamic HTML!</p>
</body>
<SCRIPT language="VBScript">
<!--
Sub myParagraph_onmouseover()
'Execute some code.
End Sub
-->
</SCRIPT>
<SCRIPT language="VBScript">
<!--
Sub myParagraph_onmouseover()
'Execute some code.
End Sub
-->
</SCRIPT>

There are many ways to manipulate elements in an HTML document. You can
select certain headings, paragraphs, and other document elements to control.
The easiest way to control elements in your document is to assign the element
an ID. You can then refer to this element by using the ID that you assigned to
the text in the tag.
Once you assign an ID to an element, you can then declare an event-handler
function in VBScript to manipulate that element through its ID.
The following example declares a VBScript function named
myParagraph_onmouseover and binds the function to an element named
myParagraph. When a user moves the mouse over the paragraph named
myParagraph, the procedure myParagraph_onmouseover is executed.
<HTML>
<HEAD>
<SCRIPT language="VBScript">
<!--
Sub myParagraph_onmouseover()
'Execute some code.
End Sub
-->
</SCRIPT>
</HEAD>
<BODY>
<P id="myParagraph">dynamic HTML!</P>
</BODY>
</html>

Slide Objective
To explain how to use the ID

property of elements in
client-side scripts.
Lead-in
You can programmatically
manipulate any HTML
element using its ID
property.
Delivery Tip
Explain the code to the
students.
Module 6: Using Client-Side Scripts 11


The innerText Property
!
Use the innerText property of an element to replace all
the text in that element
(View innertext.htm from Sampapps)
<SCRIPT LANGUAGE=vbscript>
<!--
Sub MyParagraph_onclick
MyParagraph.innerText = "See, I told you!"
End Sub
-->
</SCRIPT>
<BODY>
<P ID=MyParagraph>This text will change when you
click on it</P>
</BODY>
<SCRIPT LANGUAGE=vbscript>

<!--
Sub MyParagraph_onclick
MyParagraph.innerText = "See, I told you!"
End Sub
-->
</SCRIPT>
<BODY>
<P ID=MyParagraph>This text will change when you
click on it</P>
</BODY>


Another commonly used element property is the innnerText property. The
innerText property of an element contains a string that replaces all the text in
the element.
Assigning a new string to this property replaces the previous content. For
example, you can delete everything in an element by assigning an empty string
to the property.
The following example uses the innerText property to replace the text in a
document:
<HTML>
<HEAD>
<TITLE>Replacing Text and HTML</TITLE>
<SCRIPT language="VBScript">
<!--
Sub item1_onclick()
Item1.innerText = "The text is replaced by the innerText
property"
End Sub
-->

</SCRIPT>
</HEAD>
<BODY>
<H3 id="Item1">Click here to see the result</H3>
</BODY>
</HTML>

Slide Objective
To explain how to use the
innerText property of
elements in client-side
scripts.
Lead-in
Another commonly used
element property is the
innnerText property.
Delivery Tip
From Internet Explorer,
open the file innertext.htm
in the
\Inetpub\wwwroot\1912\Sam
papps\Ch06 folder. Show
the result to the students,
and explain the innerText
property.
12 Module 6: Using Client-Side Scripts


The innerHTML Property
!

Use the innerHTML property to replace elements with
text and HTML tags
(View innerhtml.htm from Sampapps)
<SCRIPT language="VBScript">
<!--
Sub Position_onclick
Position.innerHTML = "<B><I>Dynamic
HTML</I></B>"
End Sub
-->
</SCRIPT>
<BODY>
<P ID = Position> “You want to learn?” </P>
</BODY>
<SCRIPT language="VBScript">
<!--
Sub Position_onclick
Position.innerHTML = "<B><I>Dynamic
HTML</I></B>"
End Sub
-->
</SCRIPT>
<BODY>
<P ID = Position> “You want to learn?” </P>
</BODY>


In addition to replacing text, you can also replace elements in a document using
the innerHTML property.
The following example uses the innerHTML property to replace the existing

text with text along with HTML tags.
<HTML>
<HEAD>
<SCRIPT language="VBScript">
<!--
Sub Position_onclick
Position.innerHTML = "<b><i>Dynamic HTML</i></b>"
End Sub
-->
</SCRIPT>
</HEAD>
<BODY style="background-color:beige;color:brown;font:14pt
arial">
Click on the question to find the answer
<font color="green"><p id=position>What are we
learning?</p></font>
</BODY>
</HTML>

Slide Objective
To explain how to use the
innerHTML property of
elements in client-side
scripts.
Lead-in
Apart from replacing text,
you can also replace
elements in a document
using the innerHTML
property.

Delivery Tip
From Internet Explorer,
open the file innerhtml.htm
in the
\Inetpub\wwwroot\1912\Sam
papps\Ch06 folder. Show
the result to the students.
Explain the innerHTML
property to the students.
Module 6: Using Client-Side Scripts 13


Practice: Using Event Procedures


In this exercise, you will write the code for the onclick, onmouseover, and
onmouseout events. In the first procedure, you will write a paragraph and
associate an ID with it. Then, you will write the code for the onclick event of
the paragraph such that the paragraph content changes when it is clicked. In the
second exercise, you will create a new page and add a paragraph to it. Then,
you will associate an ID with the paragraph. After setting the ID of the
paragraph, you will write the code for the onmouseover and onmouseout
events of the paragraph such that when you mouse over the paragraph, the text
of the paragraph changes, and when you mouse out of the paragraph, the
original text appears.
!
Write code for the onclick event
1. Open Microsoft FrontPage
®
2000.

2. Create a new one-page Web under http://localhost/1912/Practices/Event.
3. Switch to the HTML view of the new page.
4. Write a paragraph within the body of the HTML file and associate an ID to
it.
Your script code should resemble the following:
<P id=MyParagraph>This text will change when you
click on it</p>

Slide Objective
To introduce the practice.
Lead-in
In this practice, you will write
code for the onclick,
onmouseover, and
onmouseout events.
Delivery Tip
Let students create their
own paragraphs. In addition,
let students set the new text
of their own choice.
14 Module 6: Using Client-Side Scripts


5. Write the <SCRIPT> </SCRIPT> structure to specify that the language used
is VBScript just above the body of the HTML file.
Your script code should resemble the following.
<SCRIPT LANGUAGE="vbscript">
<!--

-->

</SCRIPT>

6. Within the <SCRIPT> </SCRIPT> tags, write the code for the onclick event
of the paragraph.
7. Set the innertext property of the paragraph to the new text that you want to
display when the paragraph is clicked.
Your script code should resemble the following.
Sub MyParagraph_onclick
MyParagraph.innerText = "See, I told you!"
End Sub

8. Save the file as onclick.htm.
9. Click the Preview in Browser button on the FrontPage toolbar.
10. Click the paragraph to see that its content changes.

Your complete code should resemble the following:
<SCRIPT LANGUAGE="vbscript">
<!--
Sub MyParagraph_onclick
MyParagraph.innerText = "See, I told you!"
End Sub
-->
</SCRIPT>
<BODY>
<P id=MyParagraph>This text will change when you
click on it</p>
</BODY>

!
Write code for the onmouseover and onmouseout events

1. Open a new page.
2. Go to the HTML view of the new page.
3. Write a paragraph within the body of the HTML file and associate an ID to
it.
Your script code should resemble the following.
<P id=MyParagraph>This text will change when you
mouse over on it</p>

Module 6: Using Client-Side Scripts 15



4. Write the <SCRIPT> </SCRIPT> structure to specify that the language used
is VBScript just above the body of the HTML file.
Your script code should resemble the following:
<SCRIPT LANGUAGE="vbscript">
<!--

-->
</SCRIPT>

5. Within the <SCRIPT> </SCRIPT> tags, write the code for the
onmouseover event of the paragraph.
6. Set the innertext property of the paragraph to the new text that you want to
display when the mouse is moved over the paragraph.
Your script code should resemble the following:
Sub MyParagraph_onmouseover
MyParagraph.innerText = "See, I told you!"
End Sub

7. Within the <SCRIPT> </SCRIPT> tags, write the code for the onmouseout
event of the paragraph.
8. Set the innertext property of the paragraph to the original text.
Your script code should resemble the following:
Sub MyParagraph_onmouseout
MyParagraph.innerText = "This text will change when you
mouse over on it"
End Sub

9. Save the file as onmouse.htm.
10. Click the Preview in Browser button on the FrontPage toolbar.
16 Module 6: Using Client-Side Scripts



11. Place the mouse pointer over the paragraph to see that the text changes and
move the mouse pointer out of the paragraph to see that the text of the
paragraph changes to its original text.

Your complete code should resemble the following:
<SCRIPT ID=clientEventHandlersVBS LANGUAGE=vbscript>
<!--

Sub MyParagraph_onmouseover
MyParagraph.innerText = "See, I told you!"
End Sub

Sub MyParagraph_onmouseout
MyParagraph.innerText = "This text will change when you
mouse over on it"

End Sub

-->
</SCRIPT>
</HEAD>

<BODY>

<P id=MyParagraph>This text will change when you
mouse over on it</P>

</BODY>

Module 6: Using Client-Side Scripts 17


#
##
#

Using Event Procedures
!
Demonstration: Using the Microsoft Script Editor
!
Changing the Style of an Element Dynamically
!
Practice: Adding a Rollover Effect


Slide Objective

To introduce the topics in
this section.
18 Module 6: Using Client-Side Scripts


Demonstration: Using the Microsoft Script Editor


In this demonstration, you will see how to add script to handle mouse events in
a Web page using the Microsoft Script editor.
!
Add script to a Web page using the Microsoft Script editor
1. Open FrontPage 2000.
2. On the Tools menu, point to Macro, and then click Microsoft Script
Editor.
3. The Microsoft Script Editor window appears. Under the <BODY> tag, type
the following code.
<p id="Myid">This is a sample code</p>

4. Myid appears in the Script Outline window.

The Script Outline window does not appear by default. You can
display the Script Outline window by clicking the Script Outline tab at the
bottom of the Toolbox. Or, on the View menu, point to Other Windows,
and then click Script Outline to display the Script Outline window.

5. Double-click Myid to see the events associated with it.
6. Double-click onmouseover.
7. The onmouseover event code appears in the source window.
8. Type the following code under Myid_onmouseover.

Myid.style.fontsize="20pt"

9. Click the Quick View tab to preview the file.
10. Mouse over the text This is a sample code. Notice that the font size
changes to 20pt.

Slide Objective
To demonstrate adding a
script to a Web page using
the Microsoft Script Editor.
Lead-in
In this demonstration, you
will see how to add script to
handle mouse events in a
Web page using the
Microsoft Script editor.
Note
Module 6: Using Client-Side Scripts 19


Rollover feature
You can use the onmouseover and onmouseout events to animate objects with
script that is bound to these events. Generally, you use the onmouseover event
to change the state of the object, and the onmouseout event to change it back.
The following example uses the onmouseover and onmouseout events to
change the color of a specific text in a document:
<HTML>
<HEAD>
<TITLE>Rollover</TITLE>
<SCRIPT language="VBScript">

<!--
Sub changecolor_onmouseover()
changecolor.style.color=”red”
End Sub
Sub changecolor_onmouseout()
changecolor.style.color=”green”
End Sub
-->
</SCRIPT>
</HEAD>
<BODY>
<H2>Move the mouse over the text below to see the
rollover effect</H2>
<H1><p id=”changecolor”>This is cool!!!</p></h1>
</BODY>
</HTML>

You can use the onmousedown, onmouseup, and onmousemove events to
drag elements in a Web page.
Delivery Tip
From Internet Explorer,
open the file rollover.htm in
the
\Inetpub\wwwroot\1912\Sam
papps\Ch06 folder. Show
the results to the students.
Explain the onmouseover
and onmouseout events to
the students.
20 Module 6: Using Client-Side Scripts

Changing the Style of an Element Dynamically
!
Use the style object
properties to change the
style of an element:
$
color
$
fontsize
$
backgroundcolor
$
cursor
!
Example:
$
visibility
$
fontfamily
$
fontweight
$
Position
Sub paraBackgroundColor_onclick
paraBackgroundColor.style.backgroundColor = "blue"
End Sub
Sub paraBackgroundColor_onclick
paraBackgroundColor.style.backgroundColor = "blue"

End Sub
(View examples.htm from Sampapps)


You can change the style of an element dynamically using the Style object. The
Style object has properties that you can use to change the style of specific text
on a Web page.
The properties of the Style object along with their description are listed in the
following table.
Property Description

color Changes the color of text.
fontsize Changes the size of text.
backgroundcolor Changes the background color of the Web
page.
cursor Changes the shape of the cursor.
visibility Checks whether text should be hidden or
visible.
fontfamily Defines the font type.
fontweight Defines the thickness of font.
position Defines the position of text in a Web
page.

Slide Objective
To list the properties of the
style object.
Lead-in
You can change the style of
an element dynamically
using the Style object

properties.
Delivery Tip
From Internet Explorer,
open the file examples.htm
in the
\Inetpub\wwwroot\1912\Sam
papps\Ch06 folder. Show
the results to the students.
Explain each property with
the help of the code.
Module 6: Using Client-Side Scripts 21


The following example code shows the use of Style object properties to change
the style of text in an HTML document.
<HEAD>
<TITLE>Styles</title>
<SCRIPT LANGUAGE=vbscript>
<!--

Sub paraBackgroundColor_onclick
paraBackgroundColor.style.backgroundColor = "blue"
End Sub

Sub paraColor_onclick
paraColor.style.color = "red"
End Sub

Sub paraCursor_onclick
paraCursor.style.cursor = "hand"

End Sub

Sub paraVisibility_onclick
paraVisibility.style.visibility = "hidden"
End Sub

Sub parafontFamily_onclick
parafontFamily.style.fontFamily = "courier"
End Sub

Sub paraFontSize_onclick
paraFontSize.style.fontSize = "8pt"
End Sub

Sub paraFontStyle_onclick
paraFontStyle.style.fontStyle = "italic"
End Sub

Sub paraFontWeight_onclick
paraFontWeight.style.fontWeight = "Bold"
End Sub

Sub paraPosition_onclick
paraPosition.style.position = "absolute"
paraPosition.style.left = 250
paraPosition.style.top = 300
End Sub

-->
</SCRIPT>

</HEAD>
<BODY style="background-color:beige;color:brown;font:14pt
arial">

(Code continued on following page.)