Display JavaScript Output

JavaScript output refers to the results or effects produced when a JavaScript code or script is executed.

This output can be displayed in several ways. It depends on how and where the JavaScript code is run.

Some common forms of JavaScript output are console output, HTML output, alert boxes and writing to the document.

Please don't worry if you do not understand the JavaScript code in the following examples. We will discuss these topics in details in the upcoming tutorials.

Console output is a common way to display JavaScript output for debugging and development purposes. The 'console' object provides various methods to log information, errors, warnings, and other messages to the browser's console.

The most commonly used method is 'console.log()', which is used to log general information. Other methods include 'console.error()' for logging errors, 'console.warn()' for logging warnings, and 'console.table()' for displaying tabular data in a more readable format.

The following example demonstrates how to display JavaScript output in console:

1. Open Browser's Developer Tools
   • Google Chrome: Right-click on the page and select "Inspect" or press F12 or press 'Ctrl + Shift + I' (Windows/Linux) or 'Cmd + Option + I' (Mac).
   • Mozilla Firefox: Right-click on the page and select "Inspect Element" or press F12 or press 'Ctrl + Shift + I' (Windows/Linux) or 'Cmd + Option + I' (Mac).
   • Microsoft Edge: Right-click on the page and select "Inspect" or press F12 or press 'Ctrl + Shift + I' (Windows/Linux) or 'Cmd + Option + I' (Mac).
2. Go to the Console Tab
   • When the Developer Tools are open, click on the "Console" tab. This is where all the 'console.log()', 'console.error()', 'console.warn()', 'console.table()' and other console-related outputs will be displayed.

HTML element can be used to display JavaScript output. The content of HTML elements cab be modified dynamically using JavaScript code.

The following example demonstrates how to display JavaScript output in HTML element:

In JavaScript, alert boxes are built-in methods that allow you to interact with users through simple dialog boxes. There are three main types of alert boxes in JavaScript: 'alert()', 'confirm()' and 'prompt()'.

The 'alert()' method displays a simple message to the user and an "OK" button to close the dialog. The 'confirm()' method displays a message and provides "OK" and "Cancel" buttons, allowing the user to confirm or cancel an action. The 'prompt()' method displays a message and an input field, allowing the user to enter some text before clicking "OK" or "Cancel".

The following example demonstrates how to display JavaScript output in alert boxes:

In JavaScript, 'document.write()' function writes directly to the HTML document. This method is generally discouraged in modern web development because it can overwrite the entire document if used after the document is loaded.

However, it can be useful for simple demonstrations and learning purposes. When 'document.write()' is called, it writes the specified content to the document at the point where the script is executed.

The following example demonstrates how to write JavaScript output in HTML document using 'document.write()' function:

Throughout this tutorial, we will use console.log() method to display the output of JavaScript code. Please click Execute Code button in the live demo section and the output will be displayed in the JavaScript Code Output section.

Click Execute button to try the following JavaScript code. Alert, confirm and prompt dialogs will appear, and finally the output will be displayed in the JavaScript Code Output section.

JavaScript Compiler Execute

console.log("This is a console log message."); alert("This is an alert box!"); let userConfirmed = confirm("Do you want to proceed?"); console.log("You have confirmed: " + userConfirmed); let userInput = prompt("Please enter your name:"); console.log("Your name is " + userInput + ".");

JavaScript Code Output