Belajar Javascript #3: 5 Cara Menampilkan Output di JS
Cara menampilkan output di javascript, sangat penting untuk kita ketahui sebagai seorang programmer.
Mengapa?
Karena saat kita bekerja atau menggunakan bahasa pemrograman javascript, sudah pasti kita akan sering melakukan yang namanya proses pemeriksaan hasil output yang dihasilkan oleh kode javascript.
Oleh karena itu di JavaScript, ada 5 cara yang dapat digunakan untuk menampilkan output/data:
1. Menggunakan Function console.log()
console.log()
adalah salah satu cara paling umum untuk menampilkan output atau pesan dalam bahasa pemrograman JavaScript.
Ini merupakan salah satu fitur dari JS yang sangat berguna untuk memeriksa hasil dari pernyataan atau nilai variabel saat mengembangkan tiap-tiap baris kode.
Berikut beberapa contoh cara menggunakan console.log()
untuk menampilkan output di javascript:
Menampilkan Pesan Sederhana
Kita dapat menggunakan
console.log()
untuk menampilkan pesan sederhana di konsol. Ini adalah cara yang baik untuk mengecek apakah suatu bagian dari kode dijalankan dengan benar.console.log("Halo, ini adalah pesan sederhana.");
Ketika menjalankan kode di atas, pesan “Halo, ini adalah pesan sederhana.” akan ditampilkan di konsol browser.
Menampilkan Nilai Variabel
Kita juga dapat menggunakan
console.log()
untuk menampilkan nilai variabel. Ini nantinya akan membantu untuk memeriksa nilai variabel dan melacak perubahan selama eksekusi program yang terjadi.var x = 10; console.log("Nilai x adalah: " + x);
Hasilnya akan menampilkan “Nilai x adalah: 10” di konsol.
Menampilkan Hasil Operasi
console.log()
juga berguna untuk mengecek hasil operasi matematika atau perhitungan lainnya.var a = 5; var b = 3; var hasil = a * b; console.log("Hasil perkalian a dan b adalah: " + hasil);
Hasilnya akan menampilkan “Hasil perkalian a dan b adalah: 15” di konsol.
Menggunakan Variabel String
Selain itu dapat juga menggabungkan variabel dengan teks ketika menggunakan
console.log()
untuk membuat pesan yang lebih dinamis.var nama = "John"; console.log("Halo, " + nama + "!");
Hasilnya akan menampilkan “Halo, John!” di konsol.
Dengan console.log()
, maka kita dapat memahami sebenarnya apa yang terjadi dalam kode JavaScript.
Mengapa?
Karena ini sangat berguna untuk tujuan debugging dan pemahaman kode.
Dengan kata lain dapat mempermudah seorang programmer untuk melakukan pemeriksaan dari hasil keluaran atau output daripada kode javascript.
Hal paling penting ialah Semakin kita menggunakannya, maka akan semakin terbiasa dengan cara menggunakan kode console.log()
ini untuk tujuan memeriksa hasil dari kode kita nantinya.
2. Menggunakan Function alert()
alert()
adalah metode lain yang dapat digunakan untuk menampilkan output atau pesan dalam bahasa pemrograman JavaScript.
Namun, berbeda dengan console.log()
, alert()
akan menampilkan pesan dalam kotak dialog browser yang memerlukan interaksi pengguna untuk menutupnya.
Berikut adalah 3 contoh apa saja yang dapat kita lakukan saat menggunakan alert()
:
Menampilkan Pesan dalam Kotak Dialog
Menggunakan
alert()
untuk menampilkan pesan dalam kotak dialog browser.alert("Halo, ini adalah pesan dalam kotak dialog.");
Ketika kita menjalankan kode di atas, sebuah kotak dialog akan muncul di browser dengan pesan “Halo, ini adalah pesan dalam kotak dialog.”
Menampilkan Nilai Variabel dalam Kotak Dialog
Selain itu kita juga dapat menggunakan
alert()
untuk menampilkan nilai variabel dalam kotak dialog.var x = 10; alert("Nilai x adalah: " + x);
Hasilnya akan menampilkan kotak dialog dengan pesan “Nilai x adalah: 10.”
Menampilkan Hasil Operasi dalam Kotak Dialog
Kemudian
alert()
juga dapat digunakan untuk menampilkan hasil operasi matematika atau perhitungan lainnya dalam kotak dialog.var a = 5; var b = 3; var hasil = a * b; alert("Hasil perkalian a dan b adalah: " + hasil);
Hasilnya akan menampilkan pesan “Hasil perkalian a dan b adalah: 15” dalam kotak dialog browser.
alert()
digunakan ketika kita ingin memberikan pemberitahuan atau informasi penting kepada pengguna dan meminta interaksi dari mereka.
Perlu diingat bahwa kotak dialog alert()
akan muncul di atas halaman web dan akan memblokir eksekusi kode hingga pengguna menutupnya.
Oleh karena itu, sebaiknya digunakan dengan bijak agar tidak mengganggu pengalaman pengguna (User Experience).
3. Menggunakan Properti .innerHTML
Properti innerHTML
juga dapat digunakan untuk menampilkan output atau mengubah konten elemen HTML didalam sebuah halaman web.
Dimana hal ini merupakan cara yang sangat berguna untuk memperbarui tampilan halaman secara dinamis.
Berikut adalah cara menggunakan innerHTML
bersama dengan contoh kode yang cocok untuk pemula:
Menampilkan Pesan dalam Elemen HTML
Kita dapat menggunakan
innerHTML
untuk menambahkan pesan atau teks ke dalam elemen HTML yang telah ditentukan dalam halaman web.Sebagai contoh:
<p id="output"></p> <script> document.getElementById("output").innerHTML = "Halo, ini adalah pesan dalam elemen HTML."; </script>
Hasilnya akan mengganti teks dalam elemen
<p>
dengan pesan “Halo, ini adalah pesan dalam elemen HTML.”.Menampilkan Nilai Variabel dalam Elemen HTML
Lalu kita juga dapat menggunakan
innerHTML
untuk menampilkan nilai variabel dalam elemen HTML.Berikut contoh kodenya:
<p id="output"></p> <script> var x = 10; document.getElementById("output").innerHTML = "Nilai x adalah: " + x; </script>
Hasilnya akan menampilkan “Nilai x adalah: 10” di dalam elemen dengan id “output.”.
Menampilkan Hasil Operasi dalam Elemen HTML
Selain itu
innerHTML
juga sangat berguna untuk menampilkan hasil perhitungan atau operasi dalam elemen HTML.Lihat pada contoh kode berikut:
<p id="output"></p> <script> var a = 5; var b = 3; var hasil = a * b; document.getElementById("output").innerHTML = "Hasil perkalian a dan b adalah: " + hasil; </script>
Hasilnya akan menampilkan “Hasil perkalian a dan b adalah: 15” dalam elemen dengan id “output.”.
Dari penjelasan dan beberapa contoh kode diatas, dapat diambil kesimpulan bahwa:
Properti innerHTML
memungkinkan kita untuk mengubah konten elemen HTML secara dinamis. Dimana Ini sangat berguna untuk memperbarui tampilan halaman web berdasarkan data atau perhitungan yang terjadi dalam kode JavaScript.
4. Menggunakan Properti .innerText
Selain innerHTML
, kita juga dapat menggunakan properti innerText
untuk menampilkan output atau mengubah teks dalam elemen HTML pada halaman web.
Perbedaannya adalah innerText
hanya memanipulasi teks dalam elemen tanpa menginterpretasikan elemen HTML.
Berikut adalah cara menggunakan innerText
bersama dengan contoh kode yang cocok untuk pemula:
Menampilkan Pesan dalam Elemen HTML
Kita dapat menggunakan
innerText
untuk menambahkan pesan atau teks ke dalam elemen HTML yang telah ditentukan dalam halaman web.Seperti contoh kode berikut:
<p id="output"></p> <script> document.getElementById("output").innerText = "Halo, ini adalah pesan dalam elemen HTML."; </script>
Hasilnya akan mengganti teks dalam elemen
<p>
dengan pesan “Halo, ini adalah pesan dalam elemen HTML.”.Menampilkan Nilai Variabel dalam Elemen HTML
Lalu dapat juga menggunakan
innerText
untuk menampilkan nilai variabel dalam elemen HTML.Berikut contoh kodenya:
<p id="output"></p> <script> var x = 10; document.getElementById("output").innerText = "Nilai x adalah: " + x; </script>
Hasilnya akan menampilkan “Nilai x adalah: 10” di dalam elemen dengan id “output.”.
Menampilkan Hasil Operasi dalam Elemen HTML
Selanjutnya
innerText
juga sangat berguna untuk menampilkan hasil perhitungan atau operasi dalam elemen HTML.Lihat di contoh kode berikut:
<p id="output"></p> <script> var a = 5; var b = 3; var hasil = a * b; document.getElementById("output").innerText = "Hasil perkalian a dan b adalah: " + hasil; </script>
Hasilnya akan menampilkan “Hasil perkalian a dan b adalah: 15” dalam elemen dengan id “output.”.
Jika kita mengambil kesimpulan dimana penggunaan innerText
dengan innerHTML
sedikitnya memiliki kesamaan yaitu sama-sama dapat digunakan untuk mengubah dan memanipulsi hasil dari elemen html.
Hanya saja innerHTML
dapat memanipulasi tag sekaligus konten didalamnya, sementara innerText
digunakan ketika ingin memanipulasi teks dalam elemen tanpa menganggap elemen tersebut sebagai elemen HTML.
Hal Ini tentunya sangat berguna jika kita ingin memastikan bahwa teks tidak diinterpretasikan sebagai elemen HTML, yang dapat terjadi saat kita menggunakan innerHTML
.
5. Menggunakan document.write()
Terakhir kita dapat menggunakan document.write()
untuk menambahkan teks atau kode HTML langsung ke halaman web kita.
Namun, perlu diperhatikan bahwa document.write()
sebaiknya digunakan dengan hati-hati, karena ia akan menggantikan seluruh isi halaman.
Berikut adalah cara menggunakan document.write()
bersama dengan contoh kode yang dapat kita pelajari sebagai pemula:
Menambahkan Teks ke Halaman Web
Menggunakan
document.write()
untuk menambahkan teks ke halaman web.Namun, kita harus memanggil
document.write()
saat halaman masih dalam proses pemuatan, sebelum dokumen HTML ditutup.Coba lihat di contoh kode berikut:
<!DOCTYPE html> <html> <head> <title>Contoh Document Write</title> </head> <body> <script> document.write("Halo, ini adalah teks yang ditambahkan ke halaman."); </script> </body> </html>
Hasilnya akan menampilkan “Halo, ini adalah teks yang ditambahkan ke halaman.” di halaman web kita.
Menampilkan Hasil Operasi
document.write()
juga dapat digunakan untuk menampilkan hasil perhitungan atau operasi pada halaman web.Contohnya lihat di kode berikut:
<!DOCTYPE html> <html> <head> <title>Contoh Document Write</title> </head> <body> <script> var a = 5; var b = 3; var hasil = a * b; document.write("Hasil perkalian a dan b adalah: " + hasil); </script> </body> </html>
Hasilnya akan menampilkan “Hasil perkalian a dan b adalah: 15” di halaman web.
Hal penting untuk kita ketahui ialah:
document.write()
digunakan saat kita ingin menambahkan teks atau kode langsung ke halaman web, tetapi harus digunakan dengan bijak karena ia akan menggantikan seluruh isi halaman.
Sarannya adalah:
Sebaiknya panggil document.write()
saat halaman masih dalam proses pemuatan untuk menghindari masalah dengan dokumen yang sudah dimuat sebelumnya.
Kesimpulan
Dengan mempelajari ke 5 cara menampilkan output di javascript, kita akan mengetahui bagaimana untuk melihat hasil dan cara kerja dari kode js tersebut, diantaranya:
console.log()
digunakan untuk menampilkan teks ke console JavaScript di browser, alert()
digunakan untuk menampilkan jendela dialog pada web, .innerHTML
dan .innerText
digunakan untuk menampilkan output ke dalam elemen HTML yang lebih spesifik, dan document.write()
digunakan untuk menulis output ke dokumen HTML. Namun, penggunaan fungsi document.write()
tidak disarankan karena dapat memengaruhi struktur dokumen HTML dan menyebabkan masalah pada tampilan halaman web.
Perlu diketahui 5 cara diatas merupakan beberapa cara yang dapat kita lakukan ketika ingini mengecek suatu data yang ingin kita tampilkan pada bahasa pemrograman javascript.
Baiklah sekian pembahasan saya kali ini semoga bermanfaat.
Selanjutnya Belajar Apa?
Kita akan mempelajari “Variabel” dalam pemrograman javascript, dimana dengan memahami tentang variabel, kita akan mengetahui bagaimana variabel dapat menyimpan sebuah nilai di javascript.
Selain itu kita juga akan mempelajari bagaimana mendeklarasikan variabel dalam bahasa program javascript.
- Sejarah Javascript dan Perkembangan Javascript
- Belajar javascript #1: apa itu javascript dan fungsinya
- Belajar javascript #2: Cara menulis kode Javascript
- Belajar Javascript #3: 5 Cara Menampilkan Output di JS
- Belajar Javascript #4: Variabel di Javascript
- Belajar Javascript #5: Tipe Data di Javascript
- Belajar Javascript #6: Memahami Statement di Javascript