Module 6: Using Client- Side Scripts - Pdf 71

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

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

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

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>

<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

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

!
<SCRIPT> tag
(View button.htm from Sampapps)
<SCRIPT LANGUAGE="VBScript">

</SCRIPT>
<SCRIPT LANGUAGE="VBScript">

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

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

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

</SCRIPT>
<SCRIPT language="VBScript">

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

</SCRIPT>
</HEAD>
<BODY>
<P id="myParagraph">dynamic HTML!</P>
</BODY>
</html>

Slide Objective
To explain how to use the ID


</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">


Use the innerHTML property to replace elements with
text and HTML tags
(View innerhtml.htm from Sampapps)
<SCRIPT language="VBScript">

</SCRIPT>
<BODY>
<P ID = Position> “You want to learn?” </P>
</BODY>
<SCRIPT language="VBScript">

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

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.

</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">

</SCRIPT>
<BODY>
<P id=MyParagraph>This text will change when you
click on it</p>
</BODY>

!
Write code for the onmouseover and onmouseout events

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>

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

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

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>

Nhờ tải bản gốc

Tài liệu, ebook tham khảo khác

Module 6: Using Client- Side Scripts - Pdf 71

Tài liệu, ebook tham khảo khác

Học thêm