DAY-12
JavaScript - 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 give 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 validation, you can use an alert box to give a warning message.
Nonetheless, an alert box
can still be used for friendlier messages. Alert box gives only one button
"OK" to select and proceed.
Example
<html>
<head>
<scripttype="text/javascript">
<!--
functionWarn(){
alert("This is a warning
message!");
document.write("This is a warning
message!");
}
//-->
</script>
</head>
<body>
<p>Click the following button
to see the result: </p>
<form>
<inputtype="button"value="Click Me"onclick="Warn();"/>
</form>
</body>
</html>
Confirmation Dialog Box
A confirmation dialog box
is mostly used to take user's consent on any option. It displays a dialog box
with two buttons: Cancel.
If the user clicks on the
OK button, the window method confirm() will
return true. If the user clicks on the Cancel button, then confirm() returns false. You can
use a confirmation dialog box as follows.
Example
<html>
<head>
<scripttype="text/javascript">
<!--
functiongetConfirmation(){
varretVal= confirm("Do you want to continue
?");
if(retVal==true){
document.write("User wants to
continue!");
returntrue;
}
else{
document.write("User does not want to
continue!");
returnfalse;
}
}
//-->
</script>
</head>
<body>
<p>Click the following
button to see the result: </p>
<form>
<inputtype="button"value="Click Me"onclick="getConfirmation();"/>
</form>
</body>
</html>
Prompt Dialog Box
The prompt dialog box is
very useful when you want to pop-up a text box to get user input. Thus, it
enables you to interact with the user. The user needs to fill in the field and
then click 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 clicks the OK
button, the window method prompt() will
return the entered value from the text box. If the user clicks the Cancel
button, the window method prompt()returns null.
Example
The following example
shows how to use a prompt dialog box −
<html>
<head>
<scripttype="text/javascript">
<!--
functiongetValue(){
varretVal= prompt("Enter your name : ","your name
here");
document.write("You have entered : "+retVal);
}
//-->
</script>
</head>
<body>
<p>Click the following
button to see the result: </p>
<form>
<inputtype="button"value="Click Me"onclick="getValue();"/>
</form>
</body>
</html>
void is an important keyword in JavaScript which can be used as a
unary operator that appears before its single operand, which may be of any
type. This operator specifies an expression to be evaluated without returning a
value.
Syntax
The syntax of void can be either of the
following two −
<head>
<scripttype="text/javascript">
<!--
voidfunc()
javascript:voidfunc()
or:
void(func())
javascript:void(func())
//-->
</script>
</head>
Example 1
The most common use of
this operator is in a client-side javascript: URL,
where it allows you to evaluate an expression for its side-effects without the
browser displaying the value of the evaluated expression.
Here the expression alert ('Warning!!!') is evaluated
but it is not loaded back into the current document −
<html>
<head>
<scripttype="text/javascript">
<!--
//-->
</script>
</head>
<body>
<p>Click the following,
This won't react at all...</p>
<ahref="javascript:void(alert('Warning!!!'))">Click me!</a>
</body>
</html>
Example 2
Take a look at the
following example. The following link does nothing because the expression
"0" has no effect in JavaScript. Here the expression "0" is
evaluated, but it is not loaded back into the current document.
<html>
<head>
<scripttype="text/javascript">
<!--
//-->
</script>
</head>
<body>
<p>Click the following,
This won't react at all...</p>
<ahref="javascript:void(0)">Click me!</a>
</body>
</html>
Example 3
Another use of void is to purposely generate
the undefined value as
follows.
<html>
<head>
<scripttype="text/javascript">
<!--
functiongetValue(){
vara,b,c;
a =void( b=5, c =7);
document.write('a = '+ a +' b = '+ b +' c = '+ c );
}
//-->
</script>
</head>
<body>
<p>Click the following to
see the result:</p>
<form>
<inputtype="button"value="Click Me"onclick="getValue();"/>
</form>
</body>
</html>
No comments:
Post a Comment
Give your valuable feedback