Belajar Javascript : Cara Menampilkan Output di Browser

Dalam tutorial ini Anda akan belajar cara menghasilkan output dalam JavaScript. Ada sebuah situasi tertentu di mana Anda mungkin perlu menghasilkan output dari kode JavaScript Anda. Misalnya, Anda mungkin ingin melihat nilai variabel, atau menulis pesan ke konsol peramban (browser console) untuk membantu Anda men-debug masalah dalam kode JavaScript yang Anda jalankan, dan sebagainya.

Dalam JavaScript ada beberapa cara berbeda untuk menghasilkan output termasuk menulis output ke jendela browser atau konsol browser, menampilkan output dalam kotak dialog, menulis output ke dalam elemen HTML, dll. Kita akan melihat lebih dekat masing-masing di berikut ini bagian.

Menulis Output ke Browser Console

Anda dapat dengan mudah menampilkan pesan atau menulis data ke konsol browser dengan menggunakan metode console.log(). Ini adalah metode yang sederhana, tetapi sangat baik untuk menghasilkan output terperinci. Berikut ini contoh yang dapat Anda coba :

Tip: Untuk mengakses konsol browser web Anda, pertama tekan tombol  F12 pada keyboard untuk membuka alat pengembang kemudian klik pada tab console.

Menampilkan Output di Kotak Dialog Peringatan (Alert)

Anda juga dapat menggunakan kotak dialog peringatan untuk menampilkan pesan atau menampilkan data kepada pengguna. Kotak dialog peringatan dibuat menggunakan alert(). Berikut ini sebuah contoh:

Menulis Output ke Jendela Browser

Anda dapat menggunakan document.write()metode ini untuk menulis konten ke dokumen saat ini hanya saat dokumen tersebut sedang diuraikan. Contoh:

Jika Anda menggunakan document.write() , setelah halaman dimuat maka akan menimpa semua konten yang ada dalam dokumen itu. Lihat contoh berikut:

Memasukkan Output ke dalam Elemen HTML

Anda juga dapat menulis atau menyisipkan output di dalam elemen HTML menggunakan innerHTMLproperti elemen . Namun, sebelum menulis output terlebih dahulu kita perlu memilih elemen menggunakan metode seperti getElementById(), seperti yang ditunjukkan pada contoh berikut:

Anda akan belajar tentang memanipulasi elemen HTML secara terperinci di bab manipulasi JavaScript DOM.