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

Dialog Boxes

JavaScript provides the ability to allow user input or display some text to the user by using dialog boxes. Pop-up dialog boxes, can add interaction to a web page. These dialog boxes appear as separate windows.  The content in the dialog box, depends on the information provided by the user, and the content is independent of the text on the web page containing the JavaScript and the dialog box information does not affect the content of the page in any way.
There are three in-built pop up dialog boxes available in JavaScript :

The Alert Dialog Box

Alert is the simplest and the most often used of the three available JavaScript pop up dialog boxes. Its the easiest way to display some of textual output to a browser's window. The JavaScript alert( ) method takes datatype string as an argument and displays the string in the alert dialog box in the browser window when invoked by  JavaScript.
                             The alert dialog box displays the string as a message passed to the alert( ) method, as well as an OK button. All other operations are set idle until the user confirms they have read the message by clicking the 'OK' button. It is useful for debugging JavaScript scripts. This script is usually placed in the HEAD section of the document which makes the box appear before the actual page load. You can also put it into a function, then calling it when required.

Syntax
alert ( "message " );

The difference between alert and document.write is that the alert displays the message in a dialog box instead of on the web page.

Example
alert ( " Welcome to the JavaScript document " );
 

The Prompt Dialog Box

Unlike alert dialog box, the prompt dialog box allows user interaction as well as displays customize output of the web page, based on user input. The prompt( ) method allows you to display a specified message along with a textbox, which accepts user text input. The user must click either "OK" or "Cancel" to proceed after entering the text.

Syntax
prompt ( "User's text" , "Default Value" );

User's text is any message you choose. Default value is any value, and its inclusion is optional. The prompt dialog box also causes program execution to halt until user action takes place. The prompt box returns the value of the text in the text field if the OK button is clicked. If the cancel button is clicked then it returns the null value.

Example
prompt ( " Enter your favorite subject " , " JavaScript ");

The Confirm Dialog Box

This dialog box serves as a technique for confirming user action and decide between two choices depending on what the user chooses. The confirm dialog box is similar to an alert function, but the only difference is that it has two buttons to choose from instead of only one. It has both an "OK" button and a "Cancel" button. This allows user to answer yes/no type questions and then run a script according to the user's response.

Syntax
confirm ( "Message" );

The confirm dialog box, causes program execution to terminate and all other operations are suspended until the user reacts to the confirm. Confirm dialog box returns a Boolean 'true', if the user clicks "OK"  and it returns the Boolean 'false' if  the user clicks "Cancel" button.

Example
Confirm ( " Are you sure, you don't want to save changes " );


 
 
Summary

In this chapter you have learnt:

  • Events are the stepping stone for incorporating interactive capabilities into web pages.
  • Events usually occur when user communicates with a web page.
  • Different categories of event handlers.
  • Adding interaction to a web page through Dialog boxes.
  • Displaying messages on a web page using Dialog boxes.

 

 

 
Review Questions
 

True or False

  1. An 'interactive' event handler involves user interaction with the web page.
  2. 'onError' is a non-interactive event handler.
  3. The Alert dialog box has 2 buttons.

Solutions

  1. True
  2. True
  3. False

Exercise
  1. Try to get focus and lose focus from a link.
  2. Display an alert box, welcoming a user and then asking the user for his name.
  3. Ask a question to the user and confirm him the answer. The user will be given three chances to answer the question.
Solutions
  1. View Code         View Runtime
  2. View Code         View Runtime
  3. View Code         View Runtime

 

 
What's Next


The next chapter will acquaint you with the concepts of JavaScript objects. The chapter will further elucidate about Document Object Model and objects belonging to the DOM and the various in-built objects available in JavaScript.

Hop over to the next chapter to get the close-up of JavaScript objects and their corresponding properties, methods and events.

         

 
 
       

 

 

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