Overview   In this chapter you will learn : About the role, a form plays on a web page. How to add interactivity on a web page with events JavaScript Dialog boxes. Placing text in a web browser.

A form caters data gathering functionality to a web page. HTML forms provide various GUI controls. Also, HTML forms can automatically submit data collected in its controls to a web server. The data submitted is then processed at the web server by CGI programs, server side JavaScripts, Java Servlets and so on. JavaScript approves the validation of data entered into a form at the client side. JavaScript can be used to confirm that only valid data is returned to a web server for further processing.
               It is necessary to capture user input and process this input, when creating an interactive web site for the Internet. Based on the processing results, appropriate information from a website can be obtained to be viewed. Both the capturing of user input and the furnishing of appropriate web pages takes place in the client side, browser's window.

Events

An event is an action that occurs when a user communicates with a web page. An event could be associated with the action of the mouse cursor on the web page, such as, when a mouse-click on an object in a web page or when a user clicks on a hyperlink or a button, or enters data in a form, an event is generated and the browser takes an appropriate response (action), according to the type of event. But  few events are generated automatically. Events like timeouts generate automatically. The action taken by the browser in acknowledge to an event is known as event handling. The code that performs the actual processing, to provide a response to an event, is called an event handler. JavaScript event handlers can:

• Display dialog boxes (alert, prompt & confirm) when a user moves the mouse over a link, or clicks the link.
  
  
• Validate the data that a user enters in a form.
  
  
• Load and display an animation sequence when a user clicks moves the mouse over a link, or clicks the link.

When working with JavaScript, it is necessary to understand how to use JavaScript 'Event Handlers' correctly. JavaScript, event handlers, can be roughly divided into two types : Interactive and  Non-Interactive.
            An interactive event handler depends on user interaction with a web page. For example, the JavaScript 'onClick' event handler is an interactive event handler. This requires the user to click the button on a web page. On the other hand, a  non-interactive event handler, does not need user interaction to be invoked. For example, the JavaScript 'onLoad' event handler is a non-interactive event handler as it automatically executes whenever a form is loaded into a web page. Various JavaScript event handlers are :

JavaScript Events	JavaScript Event Handler	Description
Abort	onAbort	Image loading is aborted as a result of user action.
Blur	onBlur	A document, window, frame set, form element or drop down selection loses the current input focus.
Change	onChange	A text field, text area or drop down selection is modified and loses the current input focus.
Click	onClick	A link, client-side image map area, document or button is clicked.
DoubleClick	onDblClick	A link, client-side image map area or document or button is double-clicked.
DragDrop	onDragDrop	A dragged object is dropped in a window or frame.
Error	onError	An error occurs while loading an image, window, frame or document.
Focus	onFocus	A document, window, frame set, form element or drop down selection receives the current input focus.
KeyDown	onKeyDown	A key is pressed.
KeyPress	onKeyPress	A key is pressed and released by the user.
KeyUp	onKeyUp	A key is released.
Load	onLoad	An image, document or frame set is loaded and displayed.
MouseDown	onMouseDown	A mouse button is pressed.
MouseMove	onMouseMove	The mouse is moved..
MouseOut	onMouseOut	The mouse is moved out of a link or away from an area of a client - side image map.
MouseOver	onMouseOver	The mouse is moved over a link or an area of a client - side image map.
MouseUp	onMouseUp	The mouse button is released.
Reset	onReset	A form is reset.
Resize	onResize	The user resizes a window or frame.
Select	onSelect	Text is selected within a text field or a text area.
Submit	onSubmit	A form is submitted.
Unload	onUnload	The user exits a document or frame set.

 

ExpertRating JavaScript Certification - Get Certified Now!!