Module 6: Using Client- Side Scripts

Server-Side Scripting 2 Client-Side and Server-Side Objects 3 Lab 6.1: Adding a Rollover Effect 25 Using the Document Object Model DOM 28 Review 48 Module 6: Using Side Scripts... C

Contents

Overview 1

Client-Side vs Server-Side Scripting 2

Client-Side and Server-Side Objects 3

Lab 6.1: Adding a Rollover Effect 25

Using the Document Object Model (DOM) 28

Review 48

Module 6: Using Side Scripts

Client-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

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

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

# 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

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

Client-Side vs Server-Side Scripting

Server-side script Client-side script

The time at the Web server is:

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

Before, you learn about

client-side scripting, let’s

look at the difference

between server-side and

client-side scripting

Client-Side and Server-Side Objects

$ 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

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

The Application object contains global information for Web applications

! Server

The Server object provides common functionalities and access to COM

objects

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

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

The following example code demonstrates the use of the <SCRIPT> tag:

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

# 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:

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.

changecolor.style.color=”green”

End Sub >

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

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

performed, which can be a

mouse click or a key press

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

The ID Attribute

! Uniquely identifies an object

! Use the ID property of HTML elements in the client-side script to manipulate elements

<! 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 >

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_onclickMyParagraph.innerText = "See, I told you!"

<! End Sub >

<! End Sub >

Another commonly used element property is the innnerText property The

innerText property of an element contains a string that replaces all the text in

End Sub >

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

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_onclickPosition.innerHTML = "<B><I>Dynamic HTML</I></B>"

<! End Sub >

<! 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>

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

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

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 >

! 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>

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

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 >

# 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

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

<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

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

Changing the Style of an Element Dynamically

! Use the style object properties to change the style of an element:

End Sub

Sub paraBackgroundColor_onclickparaBackgroundColor.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

backgroundcolor Changes the background color of the Web

page

visibility Checks whether text should be hidden or

visible

fontweight Defines the thickness of font

position Defines the position of text in a Web

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

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.)

(Code continued from previous page.)

<H1 style="font-size:24pt;color:ccccff">Styles</H1>

<P style="margin-left:0.25in;color:ccccff">Click on each style to see it's effect:</P>

Practice: Adding a Rollover Effect

In this exercise, you will add a rollover effect to a paragraph by writing the

code for the onmouseover and onmouseout events First, you will create a

page and then use Microsoft Script Editor to write the code for the

onmouseover and onmouseout events When you mouse over the paragraph,

the font size of the paragraph should change to 20 pt When you mouse out the paragraph, the font size of the paragraph should change to 32 pt

! Add a rollover effect to a Web page

1 Create a new Web under http://localhost/1912/Practices/Rollover

2 Open the Microsoft Script Editor On the Tools menu, point to Macro, and then click Microsoft Script Editor

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

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 = mypara> Hi! There! </P>

Slide Objective

To introduce the practice

Lead-in

In this practice, you will add

the rollover effect to a Web

page

Delivery Tip

Let students create their

own paragraphs In addition,

let students set their own

font sizes for both mouse

over and mouse out

Note