Summer 2000

Introduction

Facilitators

User Services

Need Help?The Help Desk is a service provided to all students, staff, and faculty at Mississippi StateUniversity at no charge. The consultants are here to help you with various computer-related information or problems. Check the Web site at http://www.its.msstate.edu forhandouts and/or resolutions to common computer problems. If you cannot find an answerto your question on the Web or you do not have access to the Internet, please call us at325-0631(7:00a.m. to 7:00 p.m.Monday through Friday).You can also e-mail us athelpdesk@msstate.edu or come by our office at 46 Magruder Street (the blue house

behind Rice Hall) with walk-in hours from8:00 a.m. to 5:00 p.m. weekdays.

Harriet Foley hvf1@its.msstate.edu

Jim Stanmore stanmore@its.msstate.edu

Introduction to JavaScript Part II

JavaScript provides the capability of interactive, dynamic Web pages andcan be integrated right into your HTML. In “Part II”, how to send theoutput from your form to your email address in a readable format will beshown. This includes the use of a CGI script. Using JavaScript, partici-pants will write scripts to check the contents of a form, create imageswapping and use “this” and “new” to create objects and properties.

• Create readable output from a web form to your mail reader.

• Check your form contents with JavaScript

• Learn image swapping with JavaScript code.

• Create objects, properties and methods in JavaScript.

Tip:JavaScript can be usedto check the contents ofa form, before the formis submitted.

2

User Services

Index

Using a CGI Script with HTML

1. Sending Output From Your Form to Your Email Address in a Readable Format...........3-52. Mail-form Script........................................................................................................6-8

Using JavaScript with HTML

3. On-line JavaScript References .....................................................................................84. Using JavaScript to Check Your Form Content............................................................95. Image Swapping.........................................................................................................106. Creationism- Using “this” and “new”...........................................................................11

3

User Services

Example Form on Browser

On the following page is the HTML for this web page. It includes fields for creatingemail with readable output which are explained on the page following the output.

We will be using this form to demonstrate how to create readable output in your mailreader. When the form is submitted, the output will be sent to your mail reader in aneat column.

4

User Services

HTML for previous Web Page

Save this in a file named news.html.

5

User Services

Explanation of Hidden Fields

Output if Sent to your Ra address on Pine.

1.

2.

3.

4.

5.

6.

6

User Services

CGI (Common Gateway Interface) Perl Script to process data

mail-form.pl

1.

2.

3.

4.

5.

7

User Services

6.

Top ofOutput

Middle ofOutput

Bottom ofOutput

8

User Services

OnLine JavaScript References

You can see the flow of the above cgi program.

1. http://developer.netscape.com/docs/manuals/communicator/jsref/contents.htm

2. http://home.netscape.com/eng/mozilla/3.0/handbook/javascript/

4. http://wdvl.internet.com/Authoring/JavaScript/Tutorial/conclude.html

5. http://www.webmonkey.com

9

User Services

Using JavaScript to Check Your Form Contents1. Add the following event handler and javascript code to the FORM tag in the news.html file, “Subscribe to Department Newsletter”, so that the Form Tag looks like the following.

2. Put the following function between the header tags.

3. Test your form by leaving out name and then submitting it.

10

User Services

Image Swapping

Download the 2 gif files “button1a.gif” and “button1b.gif” from the J drive to yourlocal folder. Type the following program into the same folder in file image.htm.Then test it out in Netscape Navigator.

11

User Services

Creationism. Using “this” and “new”.

Creating your own objects and properties.You can create your own objects, properties and methods. This example is taken from“JavaScript for Dummies”.

By using the new operator with a function you can define a new type of object. Andyou can add your own methods.

Output

A publication ofUser Services, a division of Information Technology Services,

Mississippi State University

Mike Rackley, Head

Mississippi State University does not discriminate on the basis of race, color, religion,national origin, sex, age, disability, or veteran status.