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.