JavaScript Output

JavaScript Output

Subscribe to my newsletter and never miss my upcoming articles

Listen to this article


JavaScript can display data in different ways using:

  • console.log() Object
  • alert() Object
  • document.write() Object
  • elem.innerHTML Property - elem is an arbitrary name.

console.log()

As shown in the previous article, you can debug unexpected results from the browser in the console.

index.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Using log Object</title>
</head>

<body>

    <script>
        console.log('Hello World!')
    </script>
</body>

</html>

Edit on Stackblitz


alert method

The alert is a method on the browser window object - window.alert(...). It is used to display data on the browser or screen (window). It displays the result in a modal dialog box.

index.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=, initial-scale=1.0">
    <title>Using alert object</title>
</head>

<body>

    <script>
        alert('Hello World!')
    </script>
</body>

</html>

Edit on Stackblitz


image.png


write method

To test for unexpected results directly in the browser window, the command document.write() is used. It allows HTML elements within the method. For example document.write("<h1>Hello World</h1>").

index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=, initial-scale=1.0" />
    <title>Using write object</title>
  </head>

  <body>
    <script>
      document.write("<h2>Hello World!</h2>");
    </script>
  </body>
</html>

Edit on Stackblitz


innerHTML property

The innerHTML property is used on selected elements to target specific elements based on their selector to allow HTML content within the element.

index.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=, initial-scale=1.0" />
    <title>Using innerHTML</title>
</head>

<body>
   <h2 id="demo"></h2>
    <script>
       let elem = document.querySelector("#demo");
           elem.innerHTML = "Hello World!";
    </script>
</body>

</html>

Edit on Stackblitz

Outside of the console, but in the window browser, you use the alert method on the window object or document property — window.alert('...'), window.document.write('...'), window.document.querySelector('#demo') = "...".


Buy me a Coffee


TechStack | Bluehost

  • Get a website with a free domain name for 1st year and a free SSL certificate.
  • 1-click WordPress install and 24/7 support.
  • Starting at $3.95/month.
  • 30-Day Money-Back Guarantee.

 
Share this

Impressum

TechStack Media was launched in the year 2020 to make the learning of web technologies easier and more fun.

My name is Bello Osagie, I am the founder of TechStack, and my focus is to give in-depth, senior-level knowledge of the course through a step-by-step approach. You will learn HTML, CSS, JavaScript etc.

You can find my posts on Dev.to, Medium, Hashnode, Hackernoon, and Blogspot

The approach is to first start with the basics, then advance to more topics. Lots of practical examples are added to make learning more easier. TechStack Media also includes videos apart from content writing to make sure you understand all the concepts in a particular topic or course. Contents are frequently updated, so you do not miss out on the latest technology.

If you need a contact me on any of my social media or email:

For exclusive web technology tutorials, join my patron page.

Proudly part of