JavaScript Output Statements
document.write()
In JavaScript, the document.write() method can be used to write a string or a variable's value to an HTML document. The text or variable value will be inserted into the HTML at the point where the document.write() statement is called.
Syntax:
document.write("string/text");
Example:
<!DOCTYPE html>
<html>
<head>
<title>JavaScript</title>
</head>
<body>
</body>
<script>
document.write("Welcome to JavaScript<br>");
let a=15;
document.write(a);
</script>
</html>
Output:
Welcome to JavaScript
15
alert()
The alert () function is used to display an alert box with a specified message and an OK button. It is often used to display a warning or to ask the user to confirm an action.Syntax:
alert(message);
Example 1:
alert("Hello, world!");
Example 2:
<html>
<head>
<title>javascript alert</title>
<script>
alert("welcome to JavaScript");
alert(5+2);
</script>
<body>
</body>
</html
Output:
prompt()
The prompt() function is used to display a dialog box that prompts the user for input. It has two optional arguments: a message to display, and the default value for the input field. It returns the user's input as a string, or null if the user cancels the dialog.Syntax:
prompt(message[, default]);
Example: 1
let name = prompt("What is your name?", "Ram Sharma");
Example 2:
<html>
<head>
<title>javascript prompt</title>
<script>
prompt("Enter your name:");
</script>
<body>
</body>
</html>
Output:
In the above example, the program is going to prompt you. Whatever message you enter does not display on page. For that we have to store the message in the specific variable.
Example 3:
<html>
<head>
<title>javascript</title>
<script>
let a=prompt("Enter your name:");
document.write(a);
</script>
<body>
</body>
</html>
Output:
In the above example now message of prompt box is going to store in the variable 'a' and it will display on the page.
confirm()
The confirm() function is used to display a dialog box with a specified message and two buttons: OK and Cancel. It returns a Boolean value indicating whether the user clicked OK or Cancel.Syntax:
confirm(message);
Example;
let result = confirm("Are you sure you want to delete this item?");
<!DOCTYPE html>
<html>
<head>
<title>javascript confirm</title>
<script>
confirm("Do you like JavaScript");
</script>
<body>
</body>
</html
Output:
In the above example conformation message can be seen on the page. You will get two buttons Ok and Cancel. If you press any button, you didn’t get any result. If you want to get result you have to stored conformation message Boolean value in a variable.
Example:
<!DOCTYPE html>
<html>
<head>
<title>javascript confirm</title>
<script>
var a = confirm("Do you like javascript");
document.write(a);
</script>
<body>
</body>
</html
Output:
In above example now, if you press in Ok button the output will be shown true and if your press Cancel the output will show false.
console.log()
This method writes a message to the JavaScript console. It is commonly used for debugging purposes and the output can be viewed in the browser's developer console.Syntax:
console.log("messege/variable");
Example 1 :
console.log("Hello, World!");
or
An example of using console.log() to print the value of a variable:
let x = 5;
console.log(x); // prints "5"
Example 2:
<html>
<head>
<title>javascript</title>
<script>
console.log("Welcome to JavaScript!");
let x = 5;
let a="javascript";
console.log(x); // prints "5"
console.log(a);
</script>
<body>
</body>
</html>
Note: This can be helpful for debugging, or for displaying information to the user, but it will not display the information on the page.
To get console dialog box click on right mouse button of your page and select Inspect.
Or
Press: CTRL + SHIFT + I
Now you will get following console dialog box through which can debug your code or you can see the output of the code.
Output:
innerHTML
This property can be used to change the contents of an HTML element, but it cannot be used to directly display output to the user. However, it can be used in conjunction with other methods to display output to the user.
For example, you can use the innerHTML property to change the contents of a <div> or <p> element, and then use the document.getElementById() method to select the element and make it visible on the web page.
Example:
<!DOCTYPE html>
<html>
<body>
<title>Javascript</title>
<p id="demo"></p>
<p id="demo1"></p>
<script>
document.getElementById("demo").innerHTML = 9 + 6;
document.getElementById("demo1").innerHTML="Welcome to JavScript";
</script>
</body>
</html>
Output:
No comments:
Post a Comment