JavaScript Dialog Box and Types of Adding JavaScript to Your Document

Dialog Box:

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

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

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

The alert Dialog Box:

The JavaScript alert dialog box is used to display the output of the script, it is usually used to display critical information to the 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 the dialog box.

The general syntax to create the alert dialog box is:

Alert(“Message”);

Where

alert:

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

Message:

It represents the string that is specified as a message for the 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 JavaScript dialog box is similar to the alert dialog box, except it has two buttons Ok and cancels. It is also used to display the output of the script. Usually, this dialog box is used to display a message to the user and to confirm the action of the user.

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 represents the string that is specified as a message for the dialog box.

Variable:

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

The prompt Dialog Box:

The prompt JavaScript 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 JavaScript dialog box to get the name of the city:

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 the 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 the case of a string constant, it is given in double-quotes.

For example, the JavaScript statement is written below to display the 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 the 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 statements) 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 an 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 the script. It may be URL with a complete path of the external file which may store on another website.

Adding JavaScript to Your Document:

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

1. Embedding JavaScript in the body section
2. Placing JavaScript in the 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 documents and interprets HTML tags. In the HTML document, the browser is also informed (through instruction) that HTML code contains scripts (JavaScript or VBScript). The browser uses a 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:

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:

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 a 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 the 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

Demo.html file code

Related Article:

https://programmingdigest.com/javascript-variables-and-data-types-number-string-boolean-null/