Labels

JavaScript Various Output (Displaying Data)

In JavaScript, you can display data to the users using various "output" method provided according to your needs i.e. in a browser dialog box, in the HTML page etc.
Below are some of the commonly used ways in which data can be displayed to the user:

  • innerHTML : used to write in an HTML Element.
  • document.write() : used to write in the HTML webpage at the place, where it is used. i.e. if it is used in the <head> tag, then it will write the HTML code in the <head> tag.
  • window.alert() : used to display browser dialog box, with prespecified text in the alert('your text to show') method.
  • console.log() : used to write in the browser console.
    Press "ctrl+shift+i" to open developer view and then click console in chrome browser, to view browser console.

Using innerHTML

The innerHTML is a commonly used property of JavaScript that changes or add the HTML Content to any HTML Element.

We used document.getElementById('id') method of JavaScript to find the element in the HTML document with the defined "id". The id is unique along the whole web page. There are also several other methods for getting reference to any HTML element. We will know about it later.

Below is the example code given which shows how to use innerHTML property of JavaScript.

<!DOCTYPE html>
<html>
<body>

<h1>My First Web Page</h1>
<p>My First Paragraph</p>

<!-- Adding HTML Content -->
<p id="demo"></p>

<!-- Changing HTML Content -->
<p id="demo1">World</p>
<script>
document.getElementById("demo").innerHTML = 5 + 6;
document.getElementById("demo1").innerHTML = "love"; // Changing HTML Content
</script>

</body>
</html>

using document.write()

The document.write() method of JavaScript adds the HTML content at the place, where it is used i.e. If it is used in <head> element, then the HTML Content gets added to <head>.

This is generally used for testing purposes.

*Using it after the page load completes will replace all the existing HTML Content.

Below is the example, which shows the use of document.write() for testing purposes.

<!DOCTYPE html>
<html>
<body>

<h1>My First Web Page</h1>
<p>My first paragraph.</p>

<script>
document.write(5 + 6);
</script>

</body>
</html>

Below is the example, which shows the use of document.write() after the page finished loading.

<!DOCTYPE html>
<html>
<body>

<h1>My First Web Page</h1>
<p>My first paragraph.</p>

<button type="button" onclick="document.write(5 + 6)">Try it</button>

</body>
</html>

using window.alert()

The window.alert("text") method of JavaScript displays the browser's dialog box with "text" in the alert() method.

This method can skip the window keyword i.e. we can directly use method as alert("text").

The window object is the global scope object, and all the variables, properties, methods are by default referenced to it. This means, we can skip this keyword.

Below is the example which shows the use of window.alert("text") method.

<!DOCTYPE html>
<html>
<body>

<h1>My First Web Page</h1>
<p>My first paragraph.</p>

<script>
window.alert(5 + 6);
</script>

</body>
</html>

Below is the example which shows the use of alert("text") method (without using the window keyword).

<!DOCTYPE html>
<html>
<body>

<h1>My First Web Page</h1>
<p>My first paragraph.</p>

<script>
alert(5 + 6);
</script>

</body>
</html>

using console.log()

The console.log() method of JavaScript is used for debugging purposes i.e. checking the proper functioning of the JavaScript code.

It displays the message to the browser console.
The browser console can be accessed with "ctrl+shift+i" and then click console in the chrome browser.

Below is the example for using console.log() method of JavaScript.

<!DOCTYPE html>
<html>
<body>

<script>
console.log(5 + 6);
</script>

</body>
</html>

using window.print()

The window.print() method of JavaScript is an exception and is used to print the current page in the browser.

JavaScript does not have any print methods or print object. We cannot access output devices from JavaScript.

Below is the example for using window.print().

<!DOCTYPE html>
<html>
<body>

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

</body>
</html>

Tags

Comments

Post a Comment

Most Reads