Javascript Data Output

Windframe ResourcesBlog Contact

Tutorial: Javascript Data Output

By Emmanuel Chinonso

Web Developer

Ways JavaScript output can be displayed

Data can be "displayed" in a variety of ways using

Using innerHTML to write into an HTML element.
Using () to write into the HTML output.
Using window.alert to write into an alert box ().
Using the browser console to write into

Using innerHTML The document.getElementById(id) method in JavaScript can be used to get an HTML element. The HTML element is identified by its id attribute. The HTML content is specified via the innerHTML property:

Code:

<!DOCTYPE html>
<html>
<body>

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

<p id="demo">Happy coding</p>

<script>
document.getElementById("demo").innerHTML = congratulations on your first JavaScript code;
</script>

</body>
</html>

In JavaScript, this is a popular method of displaying data.

Using document.write()

It is more convenient to use document.write() for testing purposes.

Code:

<!DOCTYPE html>
<html>
<body>

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

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

</body>
</html>

Using document.write() after the HTML has been loaded will remove the previous HTML. It should be reserved for testing purposes only.

Using window.alert() : An alert box can be used to present data:

Code:

<!DOCTYPE html>
<html>
<body>

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

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

</body>
</html>

You can omit the window keyword.

The window object is the global scope object in JavaScript, which means that variables, attributes, and methods belong to it by default. This also implies that supplying the window keyword is optional. As a result, you can only use the keyword alert.

Code:

<!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() : To display data for debugging purposes, use the console.log() method in the browser.

Code:

<!DOCTYPE html>
<html>
<body>

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

</body>
</html>

JavaScript Print: There is no print object or print methods in JavaScript. JavaScript does not support access to output devices. The sole exception is that you can call the window. print() method in the browser to print the contents of the current window.

Code:

<!DOCTYPE html>
<html>
<body>

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

</body>
</html>

Build modern projects using Bootstrap 5 and Contrast

Trying to create components and pages for a web app or website from scratch while maintaining a modern User interface can be very tedious. This is why we created Contrast, to help drastically reduce the amount of time we spend doing that. so we can focus on building some other aspects of the project.

Contrast Bootstrap PRO consists of a Premium UI Kit Library featuring over 10000+ component variants. Which even comes bundled together with its own admin template comprising of 5 admin dashboards and 23+ additional admin and multipurpose pages for building almost any type of website or web app.
See a demo and learn more about Contrast Bootstrap Pro by clicking here.

Javascript statement, syntax and comments

Javascript Variables

Comments

...