How to print in javascript

Print in JavaScript

Generally, when we perform some actions on the website, like clicking a button or providing input to a text area, we get some response in return. Similarly, in programming as well, we want to get some response after running our code.

These responses are known as output. The output may be simple plain text, an image, or an entire document file.

In this article, we will explore all the different ways of printing output in JavaScript.

Different Ways to Print Output

When it comes to JavaScript, there are four different ways with which we can print output to the terminal or console.

console.log()

The console.log() method in JavaScript is used when we want to write a message to the console. Whatever message we want to print to the console, we pass it inside the log() method as an argument.

Let’s create a simple example of the console.log() method.

Consider the index.html code shown below.

 html> html lang="en"> head> meta charset="UTF-8"> meta http-equiv="X-UA-Compatible" content="IE=edge"> meta name="viewport" content="width=device-width, initial-scale=1.0"> title>console.log() - JavaScript Exampletitle> head> body> p> Some text. p> script> console.log("Hello There!"); script> body> html> 
 
Explanation - In the above code, we have a paragraph tag first and a script tag. Inside the script tag, we have used the console.log() method to print "Hello There!".
 
Once we run the code, we will see "Some text." printed on the screen, and when we open the browser's console, we will get Hello There!.
 
 
window.alert()
 
As the name suggests, the windows.alert() method prints the output data as an alert in the browser. Let's see an example.
 
Consider the index.html code shown below.
 
 html> html lang="en"> head> meta charset="UTF-8"> meta http-equiv="X-UA-Compatible" content="IE=edge"> meta name="viewport" content="width=device-width, initial-scale=1.0"> title>window.alert() - JavaScript Exampletitle> head> body> p> Some text. p> script> window.alert("Welcome to Masai JavaScript Tutorial!") script> body> html> 
 
Explanation - In the above code, we are making use of the window.alert() method to print the text "Welcome to Masai JavaScript Tutorials" in the browser window.
 
When we run this code, we will get the following output.
 
 
Here, you can see we get an alert where the message Welcome to Masai JavaScript Tutorial is shown.
 
One important point to note here is that we can even avoid the window keyword. It's because the window is a global object in JavaScript, so it's allowed to access its method and properties directly.
 
Consider the index.html code shown below.
 
 html> html lang="en"> head> meta charset="UTF-8"> meta http-equiv="X-UA-Compatible" content="IE=edge"> meta name="viewport" content="width=device-width, initial-scale=1.0"> title>window.alert() - JavaScript Exampletitle> head> body> p> Some text. p> script> alert("Welcome to Masai JavaScript Tutorial!") script> body> html> 
 
Explanation - As you can see, we have removed the window keyword and when we run this code, we will get the same output as before.
 
When we run this code, we will get the following output.
 
 
innerHTML()
 
innerHTML in JavaScript is used to add required texts to the specific HTML element and print it.
 
Let's say that we have a very simple div, in which we are simply printing a text to the browser screen, and we want to replace the text with the text of our choice. In this case, we can make use of the innerHTML property.
 
Consider the index.html code shown below.
 
 html> html lang="en"> head> meta charset="UTF-8"> meta http-equiv="X-UA-Compatible" content="IE=edge"> meta name="viewport" content="width=device-width, initial-scale=1.0"> title>innerHTML - JavaScript Exampletitle> head> body> div id="simpleDiv"> This is a simple Div. div> script> document.getElementById("simpleDiv").innerHTML = "No, it is more than just a simple div" script> body> html> 
 
Explanation - In the above code, inside the body tag, we have a div with id simpleDiv, which is printing the text "This is a simple Div.".
 
Now, instead of this text, suppose we want to print the text of our own. Then, we can make use of the innerHTML. First, we will call the getElementById() method to select the HTML element where we want to make the changes and then assign a new value to the innerHTML property.
 
 document.getElementByID("simpleDiv").innerHTML = "No, it is more than just a simple div" 
 
Once we run the above code in the browser, we would see the following text printed.
 
 
We can even place a numeric value as well in the innerHTML property.
 
Consider the index.html code shown below.
 
 html> html lang="en"> head> meta charset="UTF-8"> meta http-equiv="X-UA-Compatible" content="IE=edge"> meta name="viewport" content="width=device-width, initial-scale=1.0"> title>innerHTML - JavaScript Exampletitle> head> body> div id="simpleDiv"> This is a simple Div. div> script> document.getElementById("simpleDiv").innerHTML = 13 script> body> html> 
 
Explanation - In the above code, I used a numeric expression to be placed as the value of the innerHTML property.
 
Once we run the above code in the browser, we would see the following text printed.
 
 
document.write()
 
The document.write() method prints the output text on the browser's webpage. Let's see an example.
 
Consider the index.html code shown below.
 
 html> html lang="en"> head> meta charset="UTF-8"> meta http-equiv="X-UA-Compatible" content="IE=edge"> meta name="viewport" content="width=device-width, initial-scale=1.0"> title>document.write() - JavaScript Exampletitle> head> body> script> document.write("Masai School is Awesome."); script> body> html> 
 
Explanation - In the above code, we are using the document.write() method to print the text "Masai School is Awesome.".
 
Once we run the code in the browser, we will see the following output.
 
 
Note: If we use document.write() after the webpage has finished loading, it will overwrite everything that is on the webpage. Let's see one example.
 
Consider the index.html code shown below.
 
 html> html lang="en"> head> meta charset="UTF-8"> meta http-equiv="X-UA-Compatible" content="IE=edge"> meta name="viewport" content="width=device-width, initial-scale=1.0"> title>document.write() - JavaScript Exampletitle> head> body> p> Some text before the button. p> button onclick="document.write('New text overwrites the existing text');" > Click me! button> body> html> 
 
Explanation - In the above code, there's a p tag and a button tag. Inside the button tag, we have used the onclick method that is calling document.write. Because of this, the document.write() method is only called when we click on the button.
 
Once we run the code, we will see the text inside the paragraph tag and a button.
 
 
Here, this page has finished loading. Now, if we click the button, the document.write() method is called, which will overwrite the existing page content with a new one.
 
 
You can see that only "New text overwrites the existing text" is shown now. Because of this behavior, we should never use document.write() after the page has finished loading.
 
Working of document.write()
 
In the above code, the p tag is printing some text and the button has an onclick event set up. Here, when we click the button, the document.write() method is called.
 
Initially, when we run the code, the web page is completely loaded, which will print the text and show the button. At this point, the onclick event is not triggered. Now, when we click the button, the document.write() method is called, which will overwrite everything on the webpage and print the text inside it.
 
While the above four methods are the ones that are used when we want to print some text or value to the terminal or the console in JavaScript, there's one more method that might give the impression that it is used to print a text to the browser console or your terminal. This method is called the window.print() method.
 
window.print()
 
The window.print() method is different from all the methods that are mentioned above as it is used when we want the browser to print the content that we have on the current browser window.
 
JavaScript ,by default, doesn't have any print method.
 
Consider the index.html code shown below.
 
 html> html lang="en"> head> meta charset="UTF-8"> meta http-equiv="X-UA-Compatible" content="IE=edge"> meta name="viewport" content="width=device-width, initial-scale=1.0"> title>window.print() - JavaScript Exampletitle> head> body> p> Some text. p> button onclick="window.print();"> Click to Print! button> body> html> 
 
Explanation - In the above code, we have a paragraph tag first, and then inside the script tag, we have created a button with an onclick attribute that calls the window.print().
 
Once we run the above code in the browser, we would see the following text printed in the browser's console.
 
 
After clicking on the button, you will be prompted with a printing screen that will ask you whether you want to print the content of the current window or not.
 
Conclusion
 
In this article, we learned about printing output in JavaScript. We also look into various examples of printing output in JavaScript using different approaches.
 
Источник
 
JavaScript Output
 
To access an HTML element, JavaScript can use the document.getElementById(id) method.
 
The id attribute defines the HTML element. The innerHTML property defines the HTML content:
 
Example
 
My First Web Page
 
 
My First Paragraph
 
document.getElementById("demo").innerHTML = 5 + 6; 
 
Changing the innerHTML property of an HTML element is a common way to display data in HTML.
 
Using document.write()
 
For testing purposes, it is convenient to use document.write() :
 
Example
 
My First Web Page
 
 
My first paragraph.
 
Using document.write() after an HTML document is loaded, will delete all existing HTML:
 
Example
 
My First Web Page
 
 
My first paragraph.
 
The document.write() method should only be used for testing.
 
Using window.alert()
 
You can use an alert box to display data:
 
Example
 
My First Web Page
 
 
My first paragraph.
 
You can skip the window keyword.
 
In JavaScript, the window object is the global scope object. This means that variables, properties, and methods by default belong to the window object. This also means that specifying the window keyword is optional:
 
Example
 
My First Web Page
 
 
My first paragraph.
 
Using console.log()
 
For debugging purposes, you can call the console.log() method in the browser to display data.
 
You will learn more about debugging in a later chapter.
 
Example
 
JavaScript Print
 
JavaScript does not have any print object or print methods.
 
You cannot access output devices from JavaScript.
 
The only exception is that you can call the window.print() method in the browser to print the content of the current window.
 
Example
 
 
 
COLOR PICKER
 
 
 
 
Report Error
 
If you want to report an error, or if you want to make a suggestion, do not hesitate to send us an e-mail:
 
Thank You For Helping Us!
 
Your message has been sent to W3Schools.
 
Top Tutorials
 
Top References
 
Top Examples
 
Get Certified
 
W3Schools is optimized for learning and training. Examples might be simplified to improve reading and learning. Tutorials, references, and examples are constantly reviewed to avoid errors, but we cannot warrant full correctness of all content. While using W3Schools, you agree to have read and accepted our terms of use, cookie and privacy policy.
 
Источник
 
Читайте также:  getAppTitle(); ?>