ExpertRating - Online Certification and Employment Testing ExpertRating - Online Certification and Employment Testing ExpertRating - Online Certification and Employment Testing

ExpertRating Home
ExpertRating Benefits
Recommend ExpertRating
Suggest More Tests
Privacy Policy
FAQ
Login
 
JavaScript Tutorial - Index
JavaScript Tutorial - Introduction to JavaScript
JavaScript Tutorial - Basic JavaScript Concepts
JavaScript Tutorial - Working with Operators and Variables
JavaScript Tutorial - How to work with Loops and Functions?
JavaScript Tutorial - How to work with Forms and Events?
JavaScript Tutorial - How to work with Objects?
JavaScript Tutorial - How to work with Browsers and Cookies?
JavaScript Tutorial - More about Objects
JavaScript Tutorial - How to validate Forms with JavaScript?
JavaScript Tutorial - Advanced Techniques in JavaScript
     

 
Online Personal Trainer Certification
Personal Trainer Certification (Spanish)
Six Sigma Certification
Find a Personal Trainer
Project Management Certification
Six Sigma Certification
Six Sigma Black Belt Certification
Master Black Belt Certification
Six Sigma Green Belt Certification
Life Coach Certification
Lean Management Certification
Lean Six Sigma Certification
First Aid Certification
CPR Certification
Yoga Certification
Aerobics Certification
Pilates Certification
Business Analyst Certification
SEO Certification
Online Business Writing Course & Certification
Makeup Artist Certification
Baby Sitting Course & Certification
Time Management Certification
Health Club Management Certification
Medical Coding Certification
Medical Billing Certification
Business Analysis Course
Master Trainer Certification
Total Quality Management Certification
Kaizen Certification
Creative Writing Certification
Event Management Certification
Test Search by Job Title
Administrative Assistant Certification
Virtual Assistant Certification
  All Online Courses
   

   
   
   
   
   
   

   
  Home > Courses, Tutorials & eBooks > JavaScript Tutorial > How to work with Forms and Events?
 

JavaScript Tutorial - How to work with Forms and Events

 
Page 1 of 2
 
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.

 

       

 

 

 
     
Home  |  About Us  |  Privacy Policy  |  Site Map  |  FAQs  |  Contact Us
 
© ExpertRating 2015. All Rights Reserved.