Welcome to the Javascript Output Homepage, Guest!


Javascript | Displayable Outputs




Javascript can render data, code, or information in many different ways;

  • innerHTML can be used when writing into an HTML element

  • document.write() can be used when writing into an HTML elements output

  • window.alert() is used for writing information inside an alert box

  • console.log() for when you need to write to the browser's console


To access most HTML elements, Javascript will use the document.getElementById(id) method. This will allow the programmer to give an element a specific id, and change the values stored inside of that element at will. The id attribute will define the HTML element, but the innerHTML attribute will define the HTML content. The following code will add text to an element that holds no data, but does have an id set to tutorial. Changing the innerHTML value is one common way to display data inside HTML. You can create an empty element with a specific id assigned to it, and when needed javascript can trigger the element to be populated. You could render the elemener invisible, and cast it as visible using javascript when needed as well.

<!DOCTYPE html>
<html>
     <body>

          <h1>This is a Large Heading; h1</h1>
          <p>This is a normal paragraph</p>

          <p id="tutorial"></p>

          <script>
               document.getElementById("tutorial").innerHTML = James Patterson;
         
</script>

</body>
</html>

The h1 heading will be rendered first, then the p element with text, and finally a null p element will be rendered. Once the code reaches the javascript script tags, the null element will display James Patterson. You could place any kind of information to be stored this way. You can do calculations dynamically using javascript.




document.write() for inserting data or information into a certain part of the HTML document without the need to insert a null element. The script tags act as a variable, holding the information, and giving the programmer the ability to place the block of variable wherever is convenient at the time. The code below will insert the line , 11 concatened with a string variable, right after the paragraph element with text my first paragraph associated with it.

<!DOCTYPE html>
<html>
     <body>

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

          <script>
              document.write(5 + 6 + " concatened with a string variable");
          </script>


</body>
</html>

Although, document.write() should not be used after the HTML document has been fully loaded. Let us say, we create a button that will document.write(5 + 6) which will result in 11. The button will effectively delete all existing HTML elements on the HTML document, and the document will be replaced with only the number 11. The following code will illustrate this fact:

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

It is said that document.write() should only be used during testing or for testing purposes.




window.alert() can be used when you want to use an alert box to display all sorts of data.

<!DOCTYPE html>
<html>
  <body>

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

    <script>
    window.alert(5 + 6 + ": It is annoying to just have a window pop up");
    </script>

  </body>
</html>

The window.alert() can be used with buttons, but displaying a window alert automatically is annoying and should not be done. I repeat, avoid using the window.alert() without the use of a button assigned to it. Your users will be annoyed, and frequent your web application a lot less if you apply automatic window alerts.




console.log() is for debugging purposes only, and the console.log() method will display data via the web browser's console.

<!DOCTYPE html>
<html>
  <body>

    <h2>Activate debugging with F12</h2>

    <p>Select "Console" in the debugger menu.</p>

    <script>
      console.log("James is a genius! Nah, not really");
    </script>

  </body>
</html>



Next, we will take a look at

Just follow the buttons to continue the tutorial, Guest