ES6 Tutorial
Selected Reading
- ES6 - Discussion
- ES6 - Useful Resources
- ES6 - Quick Guide
- ES9 - New Features
- ES8 - New Features
- ES7 - New Features
- ES6 - Browsers
- ES6 - Image Map
- ES6 - Debugging
- ES6 - Multimedia
- ES6 - Animation
- ES6 - Validations
- ES6 - Proxy API
- ES6 - Reflect API
- ES6 - Object Extensions
- ES6 - Error Handling
- ES6 - Modules
- ES6 - Promises
- ES6 - Maps And Sets
- ES6 - Classes
- ES6 - Collections
- ES6 - Iterator
- ES6 - HTML DOM
- ES6 - RegExp
- ES6 - Math
- ES6 - Date
- ES6 - Arrays
- ES6 - New String Methods
- ES6 - Symbol
- ES6 - Strings
- ES6 - Boolean
- ES6 - Number
- ES6 - Objects
- ES6 - Page Printing
- ES6 - Void Keyword
- ES6 - Dialog Boxes
- ES6 - Page Redirect
- ES6 - Cookies
- ES6 - Events
- ES6 - Functions
- ES6 - Loops
- ES6 - Decision Making
- ES6 - Operators
- ES6 - Variables
- ES6 - Syntax
- ES6 - Environment
- ES6 - Overview
- ES6 - Home
Selected Reading
- Who is Who
- Computer Glossary
- HR Interview Questions
- Effective Resume Writing
- Questions and Answers
- UPSC IAS Exams Notes
ES6 - Dialog Boxes
ES6 - Dialog Boxes
JavaScript supports three important types of dialog boxes. These dialog boxes can be used to raise and alert, or to get confirmation on any input or to have a kind of input from the users. Here we will discuss each dialog box one by one.
Alert Dialog Box
An alert dialog box is mostly used to send a warning message to the users. For example, if one input field requires to enter some text but the user does not provide any input, then as a part of vapdation, you can use an alert box to send a warning message.
Nonetheless, an alert box can still be used for friendper messages. Alert box provides only one button "OK" to select and proceed.
Example
<html>
<head>
<script type = "text/javascript">
function Warn() {
alert ("This is a warning message!");
document.write ("This is a warning message!");
}
</script>
</head>
<body>
<p>Cpck the following button to see the result: </p>
<form>
<input type = "button" value = "Cpck Me" oncpck = "Warn();" />
</form>
</body>
</html>
The following output is displayed on successful execution of the above code.
Confirmation Dialog Box
A confirmation dialog box is mostly used to take the user s consent on any option. It displays a dialog box with two buttons: OK and Cancel.
If the user cpcks on the OK button, the window method confirm() will return true. If the user cpcks on the Cancel button, then confirm() returns false. You can use a confirmation dialog box as follows.
Example
<html>
<head>
<script type = "text/javascript">
function getConfirmation(){
var retVal = confirm("Do you want to continue ?");
if( retVal == true ){
document.write ("User wants to continue!");
return true;
} else {
Document.write ("User does not want to continue!");
return false;
}
}
</script>
</head>
<body>
<p>Cpck the following button to see the result: </p>
<form>
<input type = "button" value = "Cpck Me" oncpck = "getConfirmation();" />
</form>
</body>
</html>
The following output is displayed on successful execution of the above code.
Prompt Dialog Box
The prompt dialog box is very useful when you want to pop-up a text box to get a user input. Thus, it enables you to interact with the user. The user needs to fill in the field and then cpck OK.
This dialog box is displayed using a method called prompt() which takes two parameters: (i) a label which you want to display in the text box and (ii) a default string to display in the text box.
This dialog box has two buttons: OK and Cancel. If the user cpcks the OK button, the window method prompt() will return the entered value from the text box. If the user cpcks the Cancel button, the window method prompt() returns null.
Example
<html>
<head>
<script type = "text/javascript">
function getValue(){
var retVal = prompt("Enter your name : ", "your name here");
document.write("You have entered : " + retVal);
}
</script>
</head>
<body>
<p>Cpck the following button to see the result: </p>
<form>
<input type = "button" value = "Cpck Me" oncpck = "getValue();" />
</form>
</body>
</html>
The following output is displayed on successful execution of the above code.
Advertisements