Output in JavaScript
When you are working with a programming language, you want to execute some logic and then see the output, or display the final output. Right?
In JavaScript, to display output, there are 4 simple and different ways and these are given below. We can use them according to the application requirements. In this tutorial, we will be learning the following four different ways of getting output from JavaScript code, just like we use printf() in C language, cout in C++, etc.
-
Using an Alert Box
-
By logging on to the Console
-
Using innerHTML property (or the textContent property)
-
Using document.write() method
We will cover all these with the help of examples. Also, don't worry if you don't understand the syntax for these, we will be covering these in detail in upcoming tutorials.
1. Using Alert Box
You will find many websites where messages are displayed in alert boxes. The message can be some welcome message, or some alert message if you are trying to submit some incorrect value in any form, etc. Using the alert() method, it's very easy to create an alert popup on a webpage and display any message in it.
Let's see an example, where we will create an alert box to show a message to the user.
The alert() method is defined in the window object which is a global object in JavaScript. So you can use window.alert() or just alert() to create an alert box.
2. JavaScript Console Logging
-
JavaScript also lets you create console logs which can be seen in the browser's developers' tools(Console) for debugging purposes.
-
If you have NodeJS installed and you are running your JavaScript code using the node command, then you will see the output of the console logging on the terminal.
-
The text inside the console log method will not be displayed in the browser instead it will be displayed in the console of the browser.
-
The function used for console logging is console.log(SOME-EXPRESSION-OR-STRING) which can be used to log anything in the browser's console.
To open the developer's tools in the Chrome browser, press F12 in Windows and Command + Option + I in MacOS. The picture below shows how it looks:
Once the Developer tool is open, click on the Console tab to see the console.
Let's take an example to see the JavaScript code to print logs in the console:
<html>
<head>
<title>JavaScript console example</title>
<script>
console.log(2+3);
</script>
</head>
<body>
<!-- HTML body -->
</body>
</html>
5
You can use the console.log() method directly in the JavaScript code.
3. Using innerHTML Property (or textContent property)
JavaScript lets you add content to any HTML element by using the innerHTML property or the textContent property. You can add anything you want, it can be a text message, some HTML code, or anything else.
To do that first you need to provide a specific ID to the HTML element that you want to access by the JavaScript code.
To access an HTML element JavaScript uses document.getElementById(id) method, where id is the value of the id attribute of the HTML tag.
Let's take an example, in this example, id attribute is used to identify the HTML element and innerHTML property is used to set content to it.
Using the innerHTML property you can add text content or HTML code in the HTML webpage, whereas using the textContent property you can only add text content.
4. Using document.write()
JavaScript lets you write anything on the HTML webpage using the document.write() method. By using this method you can directly write anything to the HTML page.
In JavaScript the document object refers to the HTML webpage, so the document.write() method is used to write anything on the HTML webpage.
Let's take an example, in this example, we are using document.write() method which is used to write to the webpage directly.
Conclusion
In this tutorial, we learned how to show output to the user using JavaScript in various ways. There are many other ways in which you can modify HTML elements, add or remove content in HTML elements, etc. but these 4 ways are the most used.
