JavaScript Output

❮ Previous Next ❯

JavaScript Display Possibilities

JavaScript can show 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 get an HTML part, JavaScript can use the document.getElementById(id) method.

The id attribute tells you which part of a webpage something is. The innerHTML property tells you what's inside that part.

Modifying what's inside an HTML element is a usual method to show information on a webpage.

Using document.write()

For testing, it's convenient to use document.write().

If you use document.write() after a web page has already loaded, it will erase all the content that was already there.

You should only use the document.write() method for testing purposes.

Using window.alert()

You can use an alert box to show information.

You have the option to leave out the window keyword.

In JavaScript, the window object is like the big boss. It's where things like variables, properties, and methods live by default. So, when you work with JavaScript, you don't always have to say window explicitly.

Using console.log()

To find and fix problems in your code, you can use the console.log() method in your web browser. This method helps you show information on your browser's console.

In an upcoming section, we will delve deeper into the topic of debugging.

JavaScript Print

In JavaScript, there are no specific objects or methods designed solely for printing.

In JavaScript, you're unable to interact with output devices.

The only special case is when you want to use the window.print() command in a web browser to print what's currently on the screen.

<!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>

<!DOCTYPE html>
<html>
  <body>
    <h2>My First Web Page</h2>
    <p>My first paragraph.</p>
    <p>Don't use document.write after the document is done loading. It will replace everything in the document.</p>
    <script>
      document.write(5 + 6);
    </script>
  </body>
</html>

<!DOCTYPE html>
<html>
  <body>
    <h2>My First Web Page</h2>
    <p>My first paragraph.</p>
    <button type="button" onclick="document.write(5 + 6)">Try it</button>
  </body>
</html>

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

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

<!DOCTYPE html>
<html>
  <body>
    <h2>Activate Debugging</h2>
    <p>Pressing F12 on your keyboard will start debugging. After that, choose "Console" from the debugging menu.</p>
    <script>
      console.log(5 + 6);
    </script>
  </body>
</html>

<!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>

❮ Previous Next ❯

JavaScript Tutorial

JS Math

JS Versions

JS Objects

JS Functions

JS Classes

JS Async

JS HTML DOM

JS Browser BOM

JS Web APIs

JS AJAX

JS JSON

JS vs jQuery

JS Graphics