How to Install Operating System ??Complete Guide Installing The Operating System

JavaScript Tutorial – 4 Ways to Display Output in JavaScript

In this tutorial, we discuss 4 Ways to Display Output in JavaScript for beginners, The output is a program display that is usually used to show the final result.

The output is usually displayed in text form with the function print().

There are 4 ways to display output in Javascript:

  1. Using the function console.log();
  2. Using the function alert();
  3. Using the function document.write();
  4. Using innerHTML.

What is the difference between the four methods?

Let’s discuss …

1. Using function console.log()

The function console.log() is a function for displaying text into a Javascript console.

Example of use:

console.log ("Hello World!");

The result:

4 Ways to Display Output in Javascript
4 Ways to Display Output in Javascript

The console.log() function is usually used for debugging. Because every error message in Javascript is always displayed in the Console.

Besides console.log(), there are also several functions for debugging such as a console.debug(), console.info(), console.error(), console.dir(), etc.

4 Ways to Display Output in Javascript
4 Ways to Display Output in Javascript

These console functions also apply to the Nodejs console.

4 Ways to Display Output in Javascript
4 Ways to Display Output in Javascript

2. Using the function alert()

The function alert() is a function to display a dialog window. The actual function is in the window object.

It can be written in full like this:

window.alert ("Hello World!");

Alerts() can also be written like this:

alert ("Hello World!");

The function alert() can only be used in the browser. Whereas in Nodejs this function does not exist.

4 Ways to Display Output in Javascript
4 Ways to Display Output in Javascript

Example of using the function alert():

<! DOCTYPE html>
<html lang = "en">
<head>
    <title> Learning Javascript </ title>
    <script>
        alert ("Welcome to the Javascript learning tutorial");
        function sayHello () {
            alert ("Hello!");
        }
    </ script>
</ head>
<body>
    <button onclick = "sayHello ()"> Click Me! </ button>
</ body>
</ html>

The result:

4 Ways to Display Output in Javascript
4 Ways to Display Output in Javascript

3. Using the function document.write()

A document object is an object that represents an HTML document in Javascript.

In a document object, there is a write() function to write something to an HTML document.

Example:

<! DOCTYPE html>
<html lang = "en">
<head>
    <title> Learning Javascript </ title>
    <script>
        document.write ("<h1> Hello World! </ h1>");
        document.write ("<hr>");
        document.write ("<p> I'm learning Javascript </ p>");
        document.write ("at <b> petanikode.com </ b>")
    </ script>
</ head>
<body>
</ body>
</ html>

The result:

4 Ways to Display Output in Javascript
4 Ways to Display Output in Javascript

In addition to the function write(), the document object also provides various functions for manipulating HTML documents.

4. Using innerHTML

innerHTML is an attribute in an HTML object that contains an HTML string.

With innerHTML, we can display output to more specific elements.

Example:

<! DOCTYPE html>
<html lang = "en">
<head>
    <title> Learning Javascript </ title>
</ head>
<body>
    <h1> JavaScript Tutorial for Beginners </ h1>
    <div id = "outputs"> </ div>
    <script>
        // create an element object
        var Hasil = document.getElementById ("output-result");
        // displays output to the result element
        result.innerHTML = "<p> I like Javascript </ p>";
    </ script>
</ body>
</ html>

The result:

4 Ways to Display Output in Javascript
4 Ways to Display Output in Javascript

The final word…

How…?

Already understand the difference between the four functions. If we are concise, it will be like this:

  1. Console.log() function to display output to the Javascript console;
  2. Alert() function to display output to a dialog window;
  3. Document.write() function for writing output to HTML documents;
  4. InnerHTML attribute to display output to more specific HTML elements.

Which function do you use often?

Sending
User Review
0 (0 votes)

Add a Comment

Your email address will not be published. Required fields are marked *