User Services
Summer 2000
• 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 used to check the contents of a form, before the form is submitted.
Introduction to JavaScript Part II
Introduction
JavaScript provides the capability of interactive, dynamic Web pages and can be integrated right into your HTML. In “Part II”, how to send the output from your form to your email address in a readable format will be shown. This includes the use of a CGI script. Using JavaScript, participants will write scripts to check the contents of a form, create image swapping and use “this” and “new” to create objects and properties.
Need Help?
The Help Desk is a service provided to all students, staff, and faculty at Mississippi State University at no charge. The consultants are here to help you with various computerrelated information or problems. Check the Web site at http://www.its.msstate.edu for handouts and/or resolutions to common computer problems. If you cannot find an answer to your question on the Web or you do not have access to the Internet, please call us at 325-0631(7:00a.m. to 7:00 p.m.Monday through Friday).You can also e-mail us at helpdesk@msstate.edu or come by our office at 46 Magruder Street (the blue house behind Rice Hall) with walk-in hours from 8:00 a.m. to 5:00 p.m. weekdays.
Facilitators
Harriet Foley hvf1@its.msstate.edu Jim Stanmore stanmore@its.msstate.edu
User Services
Index Using a CGI Script with HTML 1. Sending Output From Your Form to Your Email Address in a Readable Format...........3-5 2. Mail-form Script........................................................................................................6-8 Using JavaScript with HTML 3. 4. 5. 6. On-line JavaScript References .....................................................................................8 Using JavaScript to Check Your Form Content............................................................9 Image Swapping.........................................................................................................10 Creationism- Using “this” and “new”...........................................................................11
2
User Services
Example Form on Browser
We will be using this form to demonstrate how to create readable output in your mail reader. When the form is submitted, the output will be sent to your mail reader in a neat column.
On the following page is the HTML for this web page. It includes fields for creating email with readable output which are explained on the page following the output.
3
User Services HTML for previous Web Page
Save this in a file named news.html.
4
User Services Explanation of Hidden Fields
1. 2. 3. 4. 5.
6.
Output if Sent to your Ra address on Pine.
5
User Services
CGI (Common Gateway Interface) Perl Script to process data mail-form.pl
1.
2.
3.
4.
5.
6
User Services
6.
Top of Output
Middle of Output
Bottom of Output
7
User Services
You can see the flow of the above cgi program.
OnLine JavaScript References
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
8
User Services Using JavaScript to Check Your Form Contents
1. 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.
9
User Services Image Swapping
Download the 2 gif files “button1a.gif” and “button1b.gif” from the J drive to your local folder. Type the following program into the same folder in file image.htm. Then test it out in Netscape Navigator.
10
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. And you can add your own methods. Output
11
A publication of User 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.