JavaScript Output

❮ Prev Next ❯

Sometimes it's hard to separate JavaScript from the features of the environment it is used in.

For example, the console.log() line you can find in many code examples is not JavaScript. Instead, it's part of the vast library of APIs provided to us in the browser. In the same way, on the server, it can be sometimes hard to separate the JavaScript language features from the APIs provided by Node.js.

Is a particular feature provided by React or Vue? Or is it "plain JavaScript", or "vanilla JavaScript" as often called?

In this chapter we will talk about how to display an output in JavaScript language, without complicating your learning process with things that are outside of it, and provided by external ecosystems.

We have many ways to display output in javascript, we will explain them now and later on in details.

One of the most important things to do when learning a new language is to master basic input and output which is why Hello World has become almost a cliche in programming textbooks. For Javascript you need four hello worlds because there are three ways to communicate with the user, each increasingly more useful than the last.

Output (console.log)

console.log() is an inbuild javascript function and a way in which you will be able to see the output of your code. But in the browser console, the season why this is not mostly shown for the begginers is because using console in most time could be tedious.

To see how it work you can right click on your browser and select inspect aftre it open then you will see console click on it, then the output will be appear there. 


<html>
  <head>
    <title>Title</title>
  </head>
  <body>
    <script>
    console.log("Hello World");
    </script>
  </body>
</html>

Example 

console.log("Hello World");

Output (writeln)

The second method is to use the document.writeln(string)command. This can be used while the page is being constructed. After the page has finished loading a new document.writeln(string) command will delete the page in most browsers, so use this only while the page is loading. Here's how a simple web-page will look. 


<html>
  <head>
    <title>Title</title>
  </head>
  <body>
    <script>
      document.writeln("Hello World");
    </script>
  </body>
</html>

As the page is loading, Javascript will encounter this script and it will output "Hello World!" vexactly where the script block appears on the page.

Example 

<html>
<head>
  <title>Title</title>
</head>
<body>
  <script>
    document.writeln("Hello World");
  </script>
</body>
</html>

For the most part, document.writelnis useful only when teaching yourself the language. Dynamic content during page load is better served by the server-side scripting languages. That said, document.writelnis very useful in pre-processing forms before they're sent to the server -- you can basically create a new web-page on the fly without the need to contact the server.

Output (alert)

The third method is to use a browser alert box. While these are incredibly useful for debugging (and learning the language), they are a horrible way to communicate with the user. Alert boxes will stop your scripts from running until the user clicks the OK button, and it has all the charm and grace of all those pop-up windows everyone spent so many years trying to get rid of! 


<html>
  <head>
    <title>Title</title>
  </head>
  <body>
    <script>
      alert("Hello World");
    </script>
  </body>
</html>

Example 

<html>
<head>
  <title>Title</title>
</head>
<body>
  <script>
  alert("Hello World");
  </script>
</body>
</html>

Output (getElementById)

The last method is the most powerful and the most complex (but don't worry, it's really easy!).

Everything on a web page resides in a box. A paragraph (<p>) is a box. When you mark something as bold you create a little box around that text that will contain bold text. You can give each and every box in HTML a unique identifier (an ID), and Javascript can find boxes you have labeled and let you manipulate them. Well enough verbiage, check out the code! 


<html>
  <head>
    <title>Title</title>
  </head>
  <body>
    <div id="feedback"></div>
    <script>
      document.getElementById("feedback").innerHTML= "Hello World";
    </script>
  </body>
</html>

The page is a little bigger now but it's a lot more powerful and scalable than the other two. Here we defined a division <div> and named it "feedback". That HTML has a name now, it is unique and that means we can use Javascript to find that block, and modify it. We do exactly this in the script below the division! The left part of the statement says on this web page (document) find a block we've named "feedback" ( getElementById('feedback') ), and change its HTML (innerHTML)to be "Hello World!".

We can change the contents of "feedback" at any time, even after the page has finished loading (which document.writeln can't do), and without annoying the user with a bunch of pop-up alert boxes (which alert can't do!).

Example 

<html>
<head>
  <title>Title</title>
</head>
  <body>
    <div id="feedback"></div>
    <script>
      document.getElementById("feedback").innerHTML= "Hello World";
    </script>
  </body>
</html>

It should be mentioned that innerHTML innerHTMLis not a published standard.

The standards provide ways to do exactly what we did in our example above. That mentioned, innerHTMLis supported by every major Browser and in addition innerHTML works faster, and is easier to use and maintain. It's, therefore, not surprising that the vast majority of web pages use innerHTML over the official standards.

While we used "Hello World"as our first example, its important to note that, with the exception of <script>and <style>, you can use full-blown HTML. Which means instead of just Hello World we could do something like this. 


<html>
  <head>
    <title>Title</title>
  </head>
  <body>
    <div id="feedback"></div>
    <script>
      document.getElementById("feedback").innerHTML= `<p style="color:red;">Hello World!</p>`
    </script>
  </body>
</html>

In this example, innerHTMLwill process your string and basically redraw the web page with the new content. This is a VERY powerful and easy to use concept. It means you can basically take an empty HTML element (which our feedback division is) and suddenly expand it out with as much HTML content as you'd like.

Example 

<html>
<head>
  <title>Title</title>
</head>
<body>
  <div id="feedback"></div>
  <script>
    document.getElementById("feedback").innerHTML= `<p style="color:red">Hello World!</p>`
  </script>
</body>
</html>

In this tutorial we will not stick with only one way of printing result to the user but rather it will be by chance when need to be using the console.log() we will do and vise verser to display output. the main reason is that we want users to see how possible its to interact with the browser. By rendering the dynamic output.

❮ Prev Next ❯