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 [...]... will change when you mouse over on it Module 6: Using Client -Side Scripts # Using Event Procedures Slide Objective To introduce the topics in this section ! Demonstration: Using the Microsoft Script Editor ! Changing the Style of an Element Dynamically ! Practice: Adding a Rollover Effect 17 18 Module 6: Using Client -Side Scripts Demonstration: Using the Microsoft Script Editor Slide Objective... VBScript, to files and debug the script 9 10 Module 6: Using Client -Side Scripts The ID Attribute 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 ! Uniquely identifies an object ! Use the ID property of HTML elements in the client -side script to manipulate elements .. .Module 6: Using Client -Side Scripts # Using Dynamic HTML Slide Objective To provide an overview of the common element properties ! ! The innerText Property ! The innerHTML Property ! You can use dynamic HTML in client -side scripts to programmatically manipulate the content of a Web page The ID Attribute ! Lead-in Introducing Event Procedures Practice: Using Event Procedures You... Click here to see the result 12 Module 6: Using Client -Side Scripts The innerHTML Property 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 ! Use the innerHTML property to replace elements with text... myParagraph_onmouseover() 'Execute some code End Sub > dynamic HTML! Module 6: Using Client -Side Scripts 11 The innerText Property 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 ! Use the innerText property of an element to... Practice: Using the DOM The Document Object Model (DOM) is a platform and language-neutral interface that will allow programs and scripts to dynamically access and update the content, structure and style of documents DOM is a hierarchical naming system that makes all of the objects in the page, such as images and forms, accessible to scripting languages like VBScript Module 6: Using Client -Side Scripts. .. in a Web page 20 Module 6: Using Client -Side Scripts Changing the Style of an Element Dynamically Slide Objective ! To list the properties of the style object Lead-in Use the style object properties to change the style of an element: ! Example: $ visibility $ color $ fontfamily $ fontsize $ fontweight $ backgroundcolor $ Position $ You can change the style of an element dynamically using the Style object... code should resemble the following Hi! There! 23 24 Module 6: Using Client -Side Scripts 4 Write the code for the onmouseover event of the paragraph a Double-click mypara in the Script Outline window and then doubleclick onmouseover b Set the fontsize property of the style object of the paragraph to 20 pt using the paragraph ID This means that when you mouse over the paragraph,... id=YahooLink href="http://www.yahoo.com">Yahoo CNN   28 Module 6: Using Client -Side Scripts # Using the Document Object Model (DOM) Slide Objective To provide an overview of the Document Object Model (DOM) Lead-in DOM is a hierarchical structure that makes all the objects in... style="background-color:beige;color:brown;font:14pt arial"> Click on the question to find the answer What are we learning? Module 6: Using Client -Side Scripts 13 Practice: Using Event Procedures Slide Objective To introduce the practice Lead-in In this practice, you will write code for the onclick, onmouseover, and onmouseout events Delivery Tip . 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. code. Module 6: Using Client -Side Scripts 1 # ## # Overview ! Client -Side vs. Server -Side Scripting ! Client -Side and Server -Side Objects ! Introducing Client-Side