JavaScript

How to Create Dialog Box using JavaScript, Dialog Box different types

Dialog Box:

Dialog Box – In JavaScript, you can also create dialog box. The Dialog Boxes are the most important user interface components. They are used to display information or to input information to the computer program.

The dialog box that can be created in JavaScript are as follows:

  • The alert dialog box.
  • The confirm dialog box.
  • The prompt dialog box.


Amazon Purchase Links:

Top Gaming Computers

Best Laptops

Best Graphic Cards

Portable Hard Drives

Best Keyboards

Best High Quality PC Mic

Computer Accessories

*Please Note: These are affiliate links. I may make a commission if you buy the components through these links. I would appreciate your support in this way!

The alert Dialog Box:

The alert dialog box is used to display the output of script, it is usually used to display critical information to user. This dialog box contains a message that you specify and the OK button. The user must have to click the OK button to close dialog box.

Dialog Box

The general syntax to create the alert dialog box is:

Alert(“Message”);

Where

alert:

it is the name of method that is used to create alert dialog box. It must be in lowercase letters.

Message:

It represents the string that is specified as message for the dialog box.

Dialog Box

For example, to create an alert dialog box for displaying message “Error in data”, the alert method is written as;

alert(“Error in data”);

the Confirm Dialog Box:

the confirm dialog box is similar to alert dialog box, except it has two buttons Ok and cancel. It is also used to display the output of script. Usually this dialog box is used to display  a message to user and to confirm the action of the user.

Dialog Box

The general syntax t create the confirm dialog box is:

Variable = confirm(“Message”);

Where

Confirm:

It specifies the name of the method that is used to create the confirm dialog box. It must be in lowercase letters.

Message:

It represent the string that is specified as message for dialog box.

Variable:

It is used to store the output of the dialog box i.e. response of the user. If the user click the “OK” button of dialog box, the true value is returned. If user clicks the “cancel” button, then false value is returned.



The prompt Dialog Box:

The prompt dialog box is used to get input from the user. The information entered by the user is stored in a variable for further processing.

The prompt dialog box contains the following elements:

  • A message to the user, which helps the user for entering correct values.
  • A text box where the user enters the value.
  • Two buttons “OK” and “Cancel”.

The general syntax to create the prompt dialog box is;

Variable = prompt(“Message”[,”default value]);

Where

Prompt:

It specifies the name of the method that is used to create the prompt dialog box. It must be in lowercase letters.

Message:

It represents the string that is specifies as message for the dialog box.

Default value:

It specifies the default value for input field.

The following code displays the prompt dialog box to get the name of city:

<script type="text/javascript">
st=prompt("Enter Name of City:", "New York");
a=confirm("You have Entered city name: " + st);
</script>

Dialog Box

Dialog Box

If you enter the name f city in the text box and click the Ok button this entered value will be store in the variable ‘st’. if you click the ‘cancel’ button then prompt method will return the null value.

Please note that by specifying the default value “New York”, it is automatically entered in the text box. It is usually given if the same value is repeated many times for input.


document.write For Displaying Output:

the document.write is a standard JavaScript command for writing output of the script. The output is displayed in the browser’s window(not in a seprate dialog box).

The general syntax to display the output using document.write command is as follows:

document.write(string/var);

where

write:

it is a method of document object which is used to display the output.

String/var:

Represent the data to be displayed. In case of string constant, it is given in double quotes.

For example, JavaScript statement is written below to display as message “I love Programming Digest”.

document.write(“I Love Programming Digest”);

note that document.write command is written between the <script> and </script> tags. If document.write command is not written between <script> and </script> tags then browser will consider this command as a normal text of the page.

<Script > Tag:

The <script> tag is used to insert a script (set of statement) into an html page. The script is placed between the <script> and </script> tags. You should place the actual script code within the html comment tags (<!– and –>), so that browser that does not support the <script> tag can ignore it.

Attributes:

The most important and commonly used attributes of <script> tag are as follows:

Language:

It is used to specify the scripting language used for writing the script. The possible value for this attribute for writing JavaScript code is JavaScript e.g.

<Script language = “javascript”>

Type:

It is used as alternative to the language attributes for declaring the type of scripting e.g.

<script type= “text/javascript”>


SRC:

It is used to specify the external file containing the source code of script. It may be URL with a complete path of the external file which may store at another website.

Adding JavaScript to Your Document:

You can add JavaScript to your Html page in three ways.

  1. Embedding JavaScript in body section
  2. Placing JavaScript in head section
  3. Linking the JavaScript stored in another file.

Embedding JavaScript in Body Section:

JavaScript statement (script) can be included in the body to html document. For this purpose <script> tag is used. The browser reads html document and interprets html tags. In the html document, browser is also informed (through instruction) that html code contains scripts (JavaScript or VBScript). The browser uses built-in JavaScript engine to interpret the script.

The general syntax to write script in the <body> section is:

<body>
<script type =”text/javascript”>
Javascript statements;
</script>
</body>

Example write JavaScript code to display message using place JavaScript in body:

<html>
<head>


</head>

<body>
<script type="text/javascript">
document.write("JavaScript is case-sensitive language"+ "<br>");
document.write("It is popular Web Programming lanuage"+ "<br>");
</script>


</body>
</html>

Dialog Box

In the above code, <br> tag is used as part of parameter of document.write. it is used to insert a line break after printing the string.

Placing JavaScript in Head Section:

When a script is written in the body of html document, script is executed when page loads. Sometime you want to execute a script when a page loads, other time when a script is called for execution (or a specific event occurs).

The script written in <head> section will be executed when called for execution. Usually, the definitions of the functions are placed in <head> section. The functions are called for execution in the body of the document.

The general syntax t write script in the <head> section is as follows:

<html>
<head>
<script type=”text/javascript”>
Javascript statements;
</script>
</head>
</html>


Example: Define two functions in<head> section. Call these functions in body of the document:

<html>
<head>
<script type="text/javascript">
function sum()
{
document.write("sum function" + "<br>");
}
function compare()
{
document.write("compare function" +"<br>");
}
</script>

</head>

<body>

<script type="text/javascript">
sum();
compare();
</script>

</body>
</html>

Dialog Box

Linking the JavaScript Store in another file:

Sometime you may want to use the same scripts on several pages, without inserting the same script on every page. To simplify this, you can write script (or function) and store them into another file. The extension of the file must be “js” (for javascript). Please note that the script stored in external file cannot contain the <script> tag.

Suppose two functions are defined as follows:

Function sum ()
{
Document.write(“sum function” + “<br>”);
}
Function compare()
{
Document.write(“compare function” + “<br>”);
}

In the above code, two functions are defined. Each function displays a message about the function. Store the above code in an external file such as “script.js”.


The general syntax to use the external file is as follows:

<head>
<script src=”filename.js”></script>
</head>
Example write JavaScript code in which external script js file is used:

 script.js file code

function sum ()
{
document.write("sum function" + "<br>");
}
function compare()
{
document.write("compare function" + "<br>");
}
Demo.html file code
<html>
<head>
<script src="script.js"></script>
</head>

<body>

<script type="text/javascript">
sum();
compare();
document.write("External Js file");
</script>

</body>
</html>

Dialog Box

Engr Fahad

My name is Shahzada Fahad and I am an Electrical Engineer. I have been doing Job in UAE as a site engineer in an Electrical Construction Company. Currently, I am running my own YouTube channel "Electronic Clinic", and managing this Website. My Hobbies are * Watching Movies * Music * Martial Arts * Photography * Travelling * Make Sketches and so on...

Leave a Reply

Your email address will not be published. Required fields are marked *

Back to top button