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 An 'interactive' event handler involves user interaction with the web page. 'onError' is a non-interactive event handler. The Alert dialog box has 2 buttons. Solutions True True False Exercise Try to get focus and lose focus from a link. Display an alert box, welcoming a user and then asking the user for his name. Ask a question to the user and confirm him the answer. The user will be given three chances to answer the question. Solutions View Code         View Runtime View Code         View Runtime 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.

ExpertRating JavaScript Certification - Get Certified Now!!