Pada kesempatan kali ini saya akan menjelaskan cara mencetak output javascript. Mungkin sebelumnya teman-teman sudah paham cara untuk mencetak output jika di php, hanya dengan menggunakan echo, print_r() dan var_dump(), teman-teman sudah bisa mencetak output tersebut di php. Lantas bagaimana jika teman-teman ingin mencetak output tersebut di JavaScript ?

Untuk mencetak output di JavaScript terdapat beberapa metode, teman-teman dapat menampilkan data dengan berbagai cara seperti di bawah ini, berikut di antaranya :

  • Menulis ke elemen HTML, menggunakan innerHTML.
  • Menulis ke dalam output HTML menggunakan document.write ().
  • Menulis ke kotak peringatan, menggunakan window.alert ().
  • Menulis ke konsol browser, menggunakan console.log ().

Berikut contoh dari masing-masing metode tersebut :

Menulis ke elemen HTML, menggunakan innerHTML.

Jika teman-teman ingin mengakses elemen HTML, JavaScript teman-teman dapat menggunakan metode document.getElementById (id). Atribut id tersebut dapat mendefinisikan elemen HTML. Properti innerHTML mendefinisikan konten HTML, seperti di bawah ini :

 <!DOCTYPE html>
<html>
<body>

<h1>Menulis ke elemen HTML, menggunakan innerHTML</h1>
<p>My First Paragraph</p>

<p id="demo"></p>

<script>
document.getElementById("demo").innerHTML = 5 + 6;
</script>

</body>
</html>

Menulis ke dalam output HTML menggunakan document.write ()

Jika teman-teman bertujuan hanya untuk pengujian, lebih mudah jika teman-teman menggunakan document.write (), seperti contoh di bawah ini :

 <!DOCTYPE html>
<html>
<body>

<h1>Menulis ke dalam output HTML menggunakan document.write ()</h1>
<p>My first paragraph.</p>

<script>
document.write(5 + 6);
</script>

</body>
</html>

Menulis ke kotak peringatan, menggunakan window.alert ().

Jika teman-teman menggunakan document.write () setelah dokumen HTML terisi penuh, akan menghapus semua HTML yang ada, seperti contoh di bawah ini :

 <!DOCTYPE html>
<html>
<body>

<h1>Menulis ke kotak peringatan, menggunakan window.alert ()</h1>
<p>My first paragraph.</p>

<button onclick="document.write(5 + 6)">Try it</button>

</body>
</html>

Menulis ke konsol browser, menggunakan console.log ()

Jika teman-teman hanya untuk bertujuan debugging, teman-teman bisa menggunakan metode console.log () untuk menampilkan data tersebut, seperti contoh di bawah ini :

 <!DOCTYPE html>
<html>
<body>
<h1>Menulis ke konsol browser, menggunakan console.log ()</h1>
<script>
console.log(5 + 6);
</script>

</body>
</html>

Sampai di sini penjelasan saya mengenai cara mencetak output javascript, semoga bermanfaat.