Embed Size (px)
Citation preview
Session 2
Client-side Javascript and ASPEmail form processing
Adapted by Sophie Peter from original document by Charlie Foulkes
JavaScript Facts
• A scripting language - not compiled but interpreted line by line at run-time.
• Suitable for Netscape v2 and IE v3 and above• Platform independent.• It is NOT the same as Java.• Object-oriented.• Event-driven.
JavaScript Facts• Secure - cannot read, write, save or erase on
the client’s hard disk.• Can be run “Client-Side” or “Server-Side”.• Beware: implementation varies according to
browser.• Beware: there is more than one version of
JavaScript out there!
Why is JavaScript so cool?
• JavaScript has many uses including:
– Adding interactivity and novelty to pages (games, animations, user preferences)
– Giving the web developer more control over presentation and appearance of pages
– Validating data input through forms– Creating and controlling windows– Interface with databases– Feedback to users (alert) and cookies
Programming Environment
• Written within HTML documents
Programming Environment
• Mainly between <head> tags, script itself must be contained within <script> tag e.g:
<head><title>Example</title><script language=“JavaScript”>//code goes here</script></head>
Programming Environment• Also in object tags e.g:
<form><input type="button" value=”Click Me” onClick=“doIt();”></form>
Programming Environment• JavaScript can also be shared across web
pages by saving the code in a separate file and referring to it as shown. This is very handy for building up libraries of functions:
<head><script src=“myJavaScript.js”></head>
Inputs & Outputs
• Programs are most often required to do two things:– Run through a routine set of operations e.g.
batch processing.– Interact with the user in some way often
outputting a result on screen.• You will be using client-side JavaScript for the
latter.
Inputs & Outputs
• There are several ways that the user can input information and that your program can output it. These can be divided into roughly 3 categories:
Forms
Windows
HTML
Form Inputs• Looked at this last week:
– Text Boxes
– Text Areas
– Button Clicks
– Check Boxes
– Radio Buttons
– Select List
Form Inputs• Normally the purpose of forms is to collect data
which is to be emailed to someone or sent to a database via the submit() function. In order to use the methods of input just discussed it is always necessary to enclose the code in <form> tags even when there is no interaction with the web server (i.e. all the processing is done client-side).
Window Inputs
• window.prompt()displays a text box and a cancel button for gathering input.
• window.confirm()this has 2 buttons - OK or Cancel.
HTML Inputs
• HyperlinksClicking on a hyperlink itself is a method of interacting with a web page and may trigger an event, whether the hyperlink is an image or is
text-based.
Outputs
• Without reloading the page:– window.alert() which displays a message
and has an OK button.
– Text displayed in a text box or text area.– Swapping one image for another.
Outputs
• Which require reloading the page:– document.write()
a function which writes HTML directly into a page on the fly, usually when the document is first loaded. This way you can include dynamic content, such as User name, the time or date etc.
Simple JavaScript Examples<form><input type="button" value="Click here!" onClick="alert('Hello World!');"></form>
Here the alert()function is used inside an event handler - onClick. When the
button is clicked, the piece of code is executed causing the alert box to be
shown. Code using these event handlers must be written inside double quotation
marks.
Here the alert()function is used inside an event handler - onClick. When the
button is clicked, the piece of code is executed causing the alert box to be
shown. Code using these event handlers must be written inside double quotation
marks.
JavaScript statements end with a
semicolon ;
JavaScript statements end with a
semicolon ;
JavaScript Event Handlers
<TAG attributes eventHandler=“JavaScript Code;”>
So far we have seen the onClick event handler in action, providing a response to clicking a button, but there are many others. Handlers are a programmed response to a specific event - such as loading the document, or a user changing the text in a text box.
onLoad and onUnload
• Certain events are associated with certain elements only. For example the onLoad and onUnload event handlers reside in the <body> tag and can also be placed in the <image> tag but cannot but used elsewhere. These event handlers are useful if you want something to happen when a web page is opened or closed.
<body onLoad="alert(‘Greetings!’);">
Event Handlers
• onBlur - When focus is taken away from a form element (e.g. the user clicks elsewhere or presses the tab key). Works with text inputs and select lists.
• onChange - Works when the focus is taken away from a form element and the contents have been changed (e.g. a text box).
• onClick - Responds to the user clicking on a button or a hyperlink.
• onFocus - When focus moves to a form element.
Event Handlers• onLoad, onUnload - As per previous slide.• onMouseover - When the mouse points at a
hyperlink.• onSelect - When the user selects something in a
form element.• onSubmit - Used in the <form> tag and executed
when the form is submitted.• and lots more…
It is possible to use several handlers in one tag and to have more than one event that happens when the event is triggered.
Validation and Error Prevention
Don't allow users to enter inappropriate information into form elements - this prevents errors at the database end.
GIGO – Garbage In Garbage Out
Validation• Validity/Integrity can apply at many levels• (Field, Object, Application, System)
– Existence – can the data be null?– Syntactic – does this look like an email address>– Range – age between 18 and 120– Type – Is it a number or an integer– Domain – special constrained type of type e.g. Mr|
Mrs|Ms or Standard|Emergency– Rule Based – collections of interdependent
business rules• E.g. Valid moves in chess• Or mining for plausibility – e.g. share trades
• Generally, the less error checking done on the server the better. This minimises traffic.
You must use server side checking when you need to interrogate the databasee.g. to check if a record already exists
However, if traffic considerations are not important then do all the error checking at the server.
Client-Side or Server-Side?
Client Side Error Prevention
•Use JavaScript to prevent simple errors e.g. not entering required data or entering wrong type of data in text boxes
•Use list boxes if possible to restrict range of input
•Give examples to the user and clear instructions
Error Prevention
<form method = “POST” onSubmit=“return checkall(this);"
action="http://www.eg.com/eg.asp">
Error checking is best done at client side by calling a function from the form's onSubmit event handler.
What is a Function?
A function is a piece of code which returns a value to the calling program. The program can then act accordingly.
Data can be passed to the function in the form of a parameter or argument.
<head><SCRIPT LANGUAGE = "Javascript">function checkall(theFormName){ if (theFormName.Surname.value == "")
{ alert("You must enter a surname"); return (false);}
}</SCRIPT ></head>
Make sure you use ==
If you write a function in the <HEAD> part of the HTML document which returns true the form will be submitted, if the function returns false, the form will not submit.
This effectively prevents the data being sent to the ASP document in the first place.
<form method = “POST” onsubmit = "return checkall(this);“ action="CustomerUpdate.asp">
<input type="Submit" value="Submit" name=“btnSubmit">
The other bits ….
Note the parameter “this” passes the name of the form to the function
Further validation
• Example of type validation:– To check to see whether it is a number use
isNAN method (is not a number method)
– And to combine different conditions use the OR operator: ||
Further validation
• Example of format validation:
– Email validation:
if (theFormName.email.value.indexOf(‘@’,0)== -1)
{
alert("You must enter a proper email address");
return (false);
}
Validation Exercise
• Demo
• Lab exercise
Form processing – ASPemail
Submit() & Reset() Buttons<input type=“submit” value=“Click here to submit form.” />
Sends the form to the form processing application.
<input type=“reset” value=“Click to clear the form.” />
Clears the form and resets elements to default values.
• The value attribute allows you to specify an alternative to the text - Submit or Reset - that appears on the buttons by default.
Getting at the Data• When the data from each form element is
‘Submitted’ the data is sent as a “name=value” pair (value being whatever the user has entered).
<input type=“text” name=“record” /><input type=“text” name=“artiste” />
If a user enters their favourite record into the text box (e.g. “I Should Coco”) the data output will equal:
record=I+Should+Coco&artiste=Supergrass odd characters, such as new line, are often expressed in peculiar terms, like %20.
Getting at the Data
• Obviously, this is not in a suitable condition for a human being to understand. The information needs processing and presenting in a legible format. This is done by sending the data to an intermediary program, usually residing in the CGI bin (Common Gateway Interface).
• The program could be written in the Perl programming language, C, C++ and many more.
• We are going to use a program written using .asp and ASPemail objects
Form - Actions & Methods<form action=“aspEmailProgram.asp”
method=GET or POST>• action points to the name or web address of
the program used for deciphering the form data, in this case an asp program.
• method specifies the way in which the data is sent to the web server. Most scripts will expect the data to be sent via the POST method, but instructions that come with the script will make it clear.
Form - GET and POST
GET http://search.yahoo.com/bin/search?p=footballSends data to the server as a string appended to the URL separated by the ? character.
POST http://www.blah.com/cgi-bin/formail.pl HTTP 1.0…[headers] record=I+Should+Coco&artiste=Supergrass The web server responds to the POST command by getting ready to receive data, which is transmitted as a separate HTTP message. This method is preferred by the WC3 and is better for sending large amounts of data.
Forms - Data Processing
ClientClient
WEB SERVERWEB SERVER
ClientClient Form DataForm Data Data EmailData EmailCGI Program
The data values from the form elements are sent, via the web server, to the CGI program in a raw state.
The CGI Program processes and formats the
data, outputting it as an email which is then sent to
whatever recipient is specified.
AspEmail
• AspEmail is an active server component for sending e-mail messages using an external SMTP server in an ASP or VB environment.
• AspEmail supports multiple recipients, multiple file attachments, HTML format, embedded images and sounds
• Available on University IIS server
• http://www.aspemail.com/manual.html
AspEmail Example
txtEmail
txtName
artForm.html
select
AspEmail ExampleASP code in the <BODY> of sendDetails.asp
<%
Set Mail = Server.CreateObject("Persits.MailSender")Mail.Host = "smtp.gre.ac.uk"Mail.FromName = request(“txtName”)Mail.From = request("txtEmail")Mail.AddAddress “your email address"Mail.Subject = "ASP Email Test"Mail.Body = Request(“select")Mail.Send
%>
Denotes the start of ASP
Creates an instance of the ASP mail object
Sends the email The email recipient
Denotes the end of ASP
Get the contents of both text box txtName and txtEmail
The University server
ASPEmail Exercise
• Demo examples• Lab exercise
