Session 2 Client-side Javascript and ASP 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 tags, script itself must be contained within tag e.g: Example //code goes here

Programming Environment Also in object tags e.g:

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:

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

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

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 <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 ;

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.

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.

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 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 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 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?

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=" 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.

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

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.

<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: – validation: if -1) { alert("You must enter a proper address"); return (false); }

Validation Exercise Demo Lab exercise

Form processing – ASP

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.

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.

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 ASP objects

Form - Actions & Methods <form action=“asp Program.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 Sends data to the server as a string appended to the URL separated by the ? character. POST 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 Client WEB SERVER Client Form Data Data 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 which is then sent to whatever recipient is specified.

Asp Asp is an active server component for sending e- mail messages using an external SMTP server in an ASP or VB environment. Asp supports multiple recipients, multiple file attachments, HTML format, embedded images and sounds Available on University IIS server

Asp Example txt txtName artForm.html select

Asp 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("txt ") Mail.AddAddress “ your address " Mail.Subject = "ASP Test" Mail.Body = Request(“select") Mail.Send %> Denotes the start of ASP Creates an instance of the ASP mail object Sends the The recipient Denotes the end of ASP Get the contents of both text box txtName and txt The University server

ASP Exercise Demo examples Lab exercise