1. Session 2 Client-side Javascript and ASPEmail form processing Adapted by Sophie Peter from original document by Charlie Foulkes

2. 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.

3. 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!

4. 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

5. Programming Environment Written within HTML documents

6. Programming Environment Mainly between tags, script itself must be contained within tag e.g: Example //code goes here

7. Programming Environment Also in object tags e.g:

8. 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:

9. 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.

10. 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

11. Form Inputs Looked at this last week: –Text Boxes –Text Areas –Button Clicks –Check Boxes –Radio Buttons –Select List

12. 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 tags even when there is no interaction with the web server (i.e. all the processing is done client-side).

13. Window Inputs window.prompt() displays a text box and a cancel button for gathering input. window.confirm() this has 2 buttons - OK or Cancel.

14. HTML Inputs Hyperlinks Clicking 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.

15. 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.

16. 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.

17. Simple JavaScript Examples <input type="button" value="Click here!" onClick="alert('Hello World!');"> 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 ;

18. JavaScript Event Handlers 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.

19. onLoad and onUnload Certain events are associated with certain elements only. For example the onLoad and onUnload event handlers reside in the tag and can also be placed in the 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.

20. 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.

21. 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 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.

22. 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

23. 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

24. 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 database e.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?

25. 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

26. 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.

27. 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.

28. function checkall(theFormName) { if (theFormName.Surname.value == "") { alert("You must enter a surname"); return (false); } Make sure you use ==

29. If you write a function in the 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.

30. <input type="Submit" value="Submit" name=“btnSubmit"> The other bits …. Note the parameter “this” passes the name of the form to the function

31. 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: ||

32. 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); }

33. Validation Exercise Demo Lab exercise

34. Form processing – ASPemail

35. Submit() & Reset() Buttons Sends the form to the form processing application. 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.

36. 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). 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.

37. 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

38. 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.

39. Form - GET and POST GET http://search.yahoo.com/bin/search?p=football Sends 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.

40. Forms - Data Processing Client WEB SERVER Client Form Data Data Email CGI 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.

41. 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

42. AspEmail Example txtEmail txtName artForm.html select

43. AspEmail Example ASP code in the 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 emailThe email recipient Denotes the end of ASP Get the contents of both text box txtName and txtEmail The University server

44. ASPEmail Exercise Demo examples Lab exercise