Learn JavaScript Output





Part 1

There are several ways Javascript display data

  • innerHTML
  • document.write( )
  • console.log( )
  • window.alert( )






Part 2

Learn using innerHTML




Javascript use the method document.getElementById(id) for reaching an HTML element

innerHTML property defines the HTML content

(id) attribute defines the HTML element


Code Example:

                
                
                
<html>
<body>

<h1>Heading</h1>
<p>Paragraph</p>

<p id="test"></p>

<script>
document.getElementById("test").innerHTML = 2 + 2;
</script>

</body>
</html>
                
                
              
                
            
Try yourself >>







Part 3

Learn Using console.log()




display data using the console.log( ) method for debugging tasks.


Code Example:

                
                
                
<html>
<body>

<script>
console.log(2 + 2);
</script>

</body>
</html>
                
                
              
                
            
Try yourself >>





Part 4

Learn using document.write()




it is best practice to use the document.write( ) for testing tasks.


Code Example:

      
      
      
      <html>
<body>

<p>testing task</p>

<script>
document.write(2 + 2);
</script>

</body>
</html>
      
      
    
      
  
Try yourself >>


tip: Don't use document.write( ) after document has finished loading, it will DELETE the data



Code Example:

      
      
      
      <html>
<body>

<p>example of data lose by using document.write( ) after document has finished loading </p>

<button type="button" onclick="document.write(2 + 2)">Try</button>

</body>
</html>
      
      
    
      
  
Try yourself >>



use the document.write( ) for testing tasks only.




Part 5

Learn using window.alert()




display data using alert box.


Code Example:

      
      
      
      <html>
<body>

<p>alert box</p>

<script>
window.alert(2 + 2);
</script>

</body>
</html>
      
      
    
      
  
Try yourself >>











with us you can learn to code easily and free, our main goal is to allow students to learn Web Development and other online programming courses in one place, learn from your home.

Navigation