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 [email protected] 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 [email protected]
Jim Stanmore [email protected]
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.