JS Output

JS Tutorial

JS Version

JS Objects

JS Function

JS Classes

JS Async

JS HTML DOM

JS Browser BOM

JS Web API

JS AJAX

JS JSON

JS vs JQUERY

JS Graphics

JavaScript Output

JavaScript Display Possibilities

JavaScript can “display” data in various ways:

  • Writing into an HTML element, using innerHTML.
  • Writing into the HTML output using document.write().
  • Writing into an alert box, using window.alert().
  • Writing into the browser console, using console.log().

Using innerHTML

To use an HTML element, JavaScript can apply the document.getElementById(id) method.

The id attribute specifies the HTML element. The innerHTML property specifies the HTML content:

Example

<!DOCTYPE html>
<html>
<body>
<h2>My First Web Page</h2>
<p>My First Paragraph.</p>
<p id=”demo”></p>
<script>
document.getElementById(“demo”).innerHTML = 5 + 6;
</script>
</body>
</html>

Output

My First Web Page

My First Paragraph.

Using document.write()

For testing purposes, it is best to apply the document.write():

Example

<!DOCTYPE html>
<html>
<body>
<h2>My First Web Page</h2>
<p>My first paragraph.</p>
<p>Never call document.write after the document has finished loading.
It will overwrite the whole document.</p>
<script>
document.write(5 + 6);
</script>
</body>
</html>

Output

My First Web Page

My first paragraph.

Never call document.write after the document has finished loading. It will overwrite the whole document.

Using window.alert()

An alert box  can be used to display data:

Example

<!DOCTYPE html>
<html>
<body>

<h2>My First Web Page</h2>
<p>My first paragraph.</p>
<script>
window.alert(5 + 6);
</script>
</body>
</html>

Output

window alert

Using console.log()

For debugging purposes, the console.log() method is called in the browser to display data.

Example

<!DOCTYPE html>
<html>
<body>
<h2>Activate Debugging</h2>
<p>F12 on your keyboard will activate debugging.</p>
<p>Then select “Console” in the debugger menu.</p>
<script>
console.log(5 + 6);
</script>
</body>
</html>

Output

Activate Debugging

F12 on your keyboard will activate debugging.

Then select "Console" in the debugger menu.

JavaScript Print

JavaScript does not consist of print objects or print methods.

You can access the output devices from JavaScript.

The only exception is that the window.print() can be called a method in the browser to print the content of the current window.

Example

<!DOCTYPE html>
<html>
<body>
<h2>The window.print() Method</h2>
<p>Click the button to print the current page.</p>
<button onclick=”window.print()”>Print this page</button>
</body>
</html>

Output

The window.print() Method

Click the button to print the current page.