Dialog Boxes:

     JavaScript provides the ability to take users input and display some text
by using dialog boxes.
Theses dialog boxes appear  as
separate windows and their content depends on the information provided by the
user.
-JavaScript provide three dialog boxes.
1. Alert Dialog box
2. Prompt Dialog box
3. Confirm Dialog box

1.  Alert Dialog Box:
JavaScript uses alert method that takes a string as an argument and
display an alert dialog box in the browser. The string is displayed along with
an ok button.
Syntax: alert(string);
e.g.
<script>
var
num=
100;
alert(“value is” +num);
document.write(<img src=visit.jpg>);
</script>
    The background processing of
the page is houlted until the alert dialog box has been responded to.
2.  Prompt Dialog Box: Prompt
dialog box displays a message as well as a text box for user-input.
Syntax:
prompt(string.[Default value]);
Here default value is an optional argument.
e.g.
<script>
var
num=prompt(“Enter your name”, “AAAA”);
document.write(nm);
</script>
    On the click of the ok button
typed text is passed to the program whereas clicking on the cancel button
causes num values to be passed to the program.

Q.1 Write a javascript
code which allows user to enter a number using prompt dialog box and display its
square on the webpage.
<html>
<head><script>
var
num=prompt(“Enter a no.”);
document.write(num * num);
</script></head>
<body> </body> </html>

Q.2 Write javascript
code which asks user to enter his name using prompt dialog box and display a
welcome message to the user using alert dialog box.   
<head>
<script>
var
nm=prompt(“Enter your name,”YAAA”);
alert(“Welcome” + nm + “\n How are
you”);
</script>
</head>

3.  Confirm Dialog Box: This dialog box serves as
a technique for confirming user action confirm dialog box displays message
along with ok and cancel buttons.
Syntax: Confirm(string);
e.g.
<script>
var
nm=confirm(“Are u sure, you want to quit??);
document.write(nm);
</script>

Clicking on the OK button causes true value to be passed to the program
whereas clicking on the cancel button causes false value to be passed to the
program.

Conditional Operator (?
:)   
Syntax: (Condition)? expression1:
expression 2.
    The condition expressed returns
a true or a false value. If the value returned is true, then expression1 is
evaluated otherwise expression2 is evaluated.

Q.1 Write Javascript
code to display a prompt dialog box for entering user-name. If the username is
fyit then display a message correct user-name otherwise display a message
incorrect user-name.
<html> <head>
<title>
HTML Program </title>
  <script language=javascript>
    var username=prompt("Enter
User Name"
);
    (username=="FYIT") ? document.write("<font color=blue
SIZE=6><b>Correct Username.</font></b>"
) : document.write("<font color=red
size=6><b>Incorrect Username.</font></b>"
);
  </script>
</head>
<body> </body> </html>

Output:









Q.2 Write JavaScript code to display a prompt dialog box for entering day name if the name entered is Saturday or Sunday then display a message> “It’s a weekend otherwise display a message “It’s a weekday”.
<html> <head> <title>HTML Program</title> </head>
<body>
<font color=blue size=22 face=candara>
  <script >
 var dynm=prompt("Enter day name");
(dynm=="Sunday" || dynm=="Saturday" || dynm=="sunday" || dynm=="saturday" )? document.write("It's a weekend..Enjoy !!! <br><br> <img src=enjoy.jpg width=300 height=300>") :document.write("It's a weekday..Work hard!<br><br> <img src=work.jpg width=300 height=300>");
</script> </font> </body> </html>

Output:
If … else structure:
Syntax:
If (condition)
    Block1
Else
    Block2
    Here, condition is a valid JavaScript expression resulting in a Boolean value true or false. If the condition returns value true, Block1 is executed otherwise Block2 is executed.
Q.1 Write JavaScript Code to display a prompt dialog box for entering an integer if it is greater than to then display its square otherwise display its cube.
<html> <head> <title>HTML Program</title> </head>
<body> <font color=blue size=16 face=candara>
  <script >
 var num=prompt("Enter an integer");
if(num>10)
  { alert("Entered number " + num + "  is greater than 10.");
    document.write("Square of " + num + " is <font color=green>" + (num*num) + "</font>");
  }
else
{  alert("Entered number" + num + " is not greater than 10.");
   document.write("Cube of " + num + " is <font color=green>" + (num*num*num) + "</font>");
}
</script> </font> </body> </html>


 Output:

Post a Comment

0 Comments