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:

1. 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.

2. 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.

3. 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.

4. 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() :

1. 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.”

2. 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.”

3. 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:

1. 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.”.

2. 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.”.

3. 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:

1. 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.”.

2. 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.”.

3. 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:

1. 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.

2. 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.

Pelajari : 📖 Belajar Javascript #4: Variabel di Javascript