JavaScript Output - How JS Programming Display the Results

1. JavaScript Possible Output Types

This JavaScript tutorial lists all the methods and ways to get the output of the JS code. The JS code is interpreted by the browser in many ways and we can display the output as per our requirements. The List below contains all the properties, methods, and functions of JavaScript to produce the output of JS code.

There are a total of nine (09) ways or methods in JS programming to get the output. Below is an ultimate list of JavaScript output methods.

1. innerHTML Property
2. document.write() Method
3. window.print() Method
4. alert() Function
5. prompt() Function
6. console.log() Function
7. console.table() Function
8. console.error() Function
9. console.warn() Function

2. JavaScript innerHTML Output

The first JS output method in this tutorial is the innerHTML property, which allows to define the HTML content of an element. The following example describes the use of the innerHTML property to display the JS result.

document.getElementById( "demo" ).innerHTML = "Hello JavaScript!";

• The above code example utilizes a JavaScript function getElementById() to select the HTML element with the ID demo.
• After selecting the element, the JS property innerHTML replaces the original content of the element.
• After that, the original content of the HTML element is removed, and the new content is "Hello JavaScript!".

3. JavaScript document.write() Output

In this tutorial, the next JS output type is the document.write() method. It is important to note that this JS method is only used for testing purposes only. The subsequent instance explains the usage of this method clearly.

var week_num = 12;
document.write("Learning JavaScript is an easy task, and one can learn JS in "+ week_num +" weeks.");

• The above JS code example uses a JavaScript method document.write() to write the data on the webpage.
• This method can write strings, variables, or even numbers to the output stream.
• The plus + sign is called JavaScript concatenation, and we will learn more about it later in this tutorial.
• Moreover, using the document.write() method is avoided in normal practice, and it is only used for testing purposes.
• The reason for not using this method in usual practice is that it overwrites the whole document if we use it after the document has finished loading.

4. JavaScript window.print() Output

In order to get the output of the content of the current window as a print, we can utilize the JavaScript window.print() method. This JS method is an exception as normally there are no print methods or objects in JavaScript.

<button onclick="window.print()" class="main-button">Print this page</button>

• The above JS code is useful to print the current window's HTML content.
• It uses the JavaScript window.print() method, which triggers upon the click of a button.
• As soon as the button is clicked, a popup window generates to proceed with printing.
• Importantly, there is no direct method for printing content in JavaScript language.

5. JavaScript alert() Output

The next method in JavaScript language to display the data is the use of the JS window.alert() or simply alert() function. By default, all the properties, methods, and variables belong to the window object due to its global scope, therefore, the use of the window keyword is optional.

function alertWithWindow(){
	window.alert("Weeks Needed to Learn JavaScript Programming : " + 12 )
}
/* Without using the 'window' keyword */
function alertWithoutWindow(){
	alert("Weeks Needed to Learn JavaScript Programming : " + 12 )
}

• This JS example explains the usage of the alert() function.
• We can use the JavaScript alert() function with or without the window keyword
• We can add any data inside the parenthesis to display the JavaScript output inside the alert popup.
• Visit CodeLab to experience both variants of this JS output function.

6. JavaScript prompt() Output

The prompt() function in JavaScript is used to get the input data from the user and then output it as required. So, we can display a popup prompt dialog box, which asks the user to insert the data. The below example explains this function nicely.

function promptFunction() {
	let f_name = prompt("What is your first name?");
	let l_name = prompt("What is your last name?");
	document.getElementById( "fname" ).innerHTML = f_name;
	document.getElementById( "lname" ).innerHTML = l_name;
}

• The above JS example creates a function, which includes the prompt() function.
• Basically, when the JavaScript code runs, a dialog box prompts and asks the user for input.
• Using multiple JS prompt() functions creates multiple prompts one after the other.
• So, this is a nice way to ask the user for input, and then display that data as required.

7. JavaScript console.log() Output

Further in this JS output tutorial, we will learn about the most used JavaScript function console.log(). This function is widely utilized as it helps in debugging the JS code while developing our websites. Consider the following example to understand this function clearly.

let user_age = prompt("Enter Your Age:");
if ( user_age < 15 ) {
	console.log("Your age is : " + user_age );
	console.log("Its too early for you to learn JavaScript Programming.");
}
else if ( user_age > 15 ) {
	console.log("Your age is : " + user_age );
	console.log("Its pretty easy for you to learn JavaScript Programming.");
}
else {
	console.log("Please enter a valid age.");
}

• This JS example takes the age of the user with the prompt() function.
• We mostly use the console.log() function for JS debugging purposes./li>
• It then prints the age to the console.
• It then makes a check based on the user's age.
• Then it prints the message to the console accordingly.
• You can open the console by pressing the F12 button.

8. JavaScript console.table() Output

Further in this JS output tutorial, we will learn about the most used JavaScript function console.log(). This function is widely utilized as it helps in debugging the JS code while developing our websites. Consider the following example to understand this function clearly.

let scientists = [
{
	name: "Albert Einstein", dob: "1879-03-14", country: "Germany", contribution: "Theory of General Relativity"
},
{
	name: "Isaac Newton", dob: "1643-01-04", country: "England", contribution: "Laws of Motion, Universal Gravitation"
},
{
	name: "Galileo Galilei", dob: "1564-02-15", country: "Italy", contribution: "Law of Inertia, Heliocentrism"
}
];
console.table(scientists);

• The above JS example uses the JavaScript console.table() function to print data to the console.
• The above JS code displays information about three scientists in an array of objects
• When we run this code, we will get a table of this information in the console.
• Visit CodeLab to see the results of this example.

9. JavaScript console.error() Output

The console.error() function in JavaScript coding is used for debugging purposes only. Unlike the JS console.log() function, the console.error() prints the data in Red color marking it as a console error.

let user_age = prompt("Enter Your Age:");
if ( user_age < 15 ) {
	console.error("Your age is : " + user_age );
	console.error("Its too early for you to learn JavaScript Programming.");
}
else if ( user_age > 15 ) {
	console.log("Your age is : " + user_age );
	console.log("Its pretty easy for you to learn JavaScript Programming.");
}
else {
	console.error("Please enter a valid age.");
}

• This JS example takes the age of the user with the prompt() function.
• We mostly use console.log() and console.error() functions for debugging purposes only.
• It then prints the age to the console.
• It then makes a check based on the user's age.
• Then it prints the message to the console accordingly.
• If the age is less than 15 or an invalid number is entered, the console will log an error in Red color.
• You can open the console by pressing the F12 button.

10. JavaScript console.warn() Output

Just like the JS console.log() and console.error() functions, we use the JavaScript console.warn() function for debugging the code. The console.warn() prints the data in Yellow color marking it as a console warning.

let user_age = prompt("Enter Your Age:");
if ( user_age < 15 ) {
	console.warn("Your age is : " + user_age );
	console.warn("Its too early for you to learn JavaScript Programming.");
}
else if ( user_age > 15 ) {
	console.log("Your age is : " + user_age );
	console.log("Its pretty easy for you to learn JavaScript Programming.");
}
else {
	console.warn("Please enter a valid age.");
}

• This JS example takes the age of the user with the prompt() function.
• We mostly use the console.warn() for debugging purposes only.
• It then prints the age to the console.
• It then makes a check based on the user's age.
• Then it prints the message to the console accordingly.
• If the age is less than 15 or an invalid number is entered, the console will log a warning in Yellow color.
• You can open the console by pressing the F12 button.