4 Cara Menampilkan Data dengan Javascript Native
4 Cara Menampilkan Data dengan Javascript Native

Semua bahasa pemrograman pasti memiliki fungsi untuk menampilkan output. Sama halnya di javascript. Ada 4 cara menampilkan data di javascript native. Baik yang bisa langsung tampil dihalaman website atau tidak tampil dihalaman namun tetap memiliki hasil output. Setiap cara untuk menampilkan data memiliki kegunaan masing masing.

Berikut cara menampilkan data pada javascript.

Menampilkan Data dengan Console Log

Untuk cara ini, hasil output tidak akan tampil dihalaman website. Namun akan tampil dibagian console. Saya biasanya menggunakan console log untuk testing code apakah berjalan atau ada error.

Cara penggunaan nya cukup mudah. Contoh code ada dibawah ini.


<html>
  <head>
    <title>test console log</title>
  </head>
  <body>
    <p>Text yang tampil dihalaman</p>
    <script>
      console.log('Teks yang tidak tampil dihalaman');
    </script>
  </body>
</html>

Keterangan :

  • Untuk fungsi console log, ketikkan code seperti ini. console.log('isi pesan');
  • Ingat jika ingin menampilkan data string yang kita tulis sendiri. Slalu gunakan tanda petik 1 ( ' ) atau petik 2 ( " ). 

Ketika halaman html dimuat, maka yang akan muncul hanya pesan "Text yang tampil dihalaman". Namun text yang console log tidak akan tampil. Cara melihat text console log adalah dengan cara seperti ini.

1. Klik kanan pada halaman website.
2. Pilih inspect atau Ctrl+Shift+I.
3. Maka akan tampil box element html. Pilih console.
4. Sekarang sudah bisa dilihat bahwa pesan javascript menggunakan fungsi console log muncul di box console.

Selain menuliskannya dihalaman html, kita juga bisa menulis code javascript langsung box console.

Menampilkan Data dengan Fungsi Alert

Terkadang saat kita membuka halaman website di google. Kita mendapatkan pesan box yang muncul di atas. Nah itu dimanakan box alert. Cara menggunakannya yaitu dengan memanggil fungsi window.alert(' isi pesan');

Fungsi window alert lebih banyak digunakan untuk membuat pesan peringatan dan menampilkan data pada jendela dialog.

Berikut contoh code penulisan javascript dengan window alert();

<html>
  <head>
    <title>test console log</title>
  </head>
  <body>
    <p>Text yang tampil dihalaman</p>
    <script>
      window.alert('Hallo aku dibox dialog!');
    </script>
  </body>
</html>

Kita juga bisa langsung menulis alert(); tanpa harus menggunakan window. Karena alert ini sudah berada pada objek window.

window.alert('Hallo aku dibox dialog!');

Menampilkan Data dengan Document Write

Untuk menampilkan data kedalam halaman html, kita bisa menggunakan fungsi document.write(). Hasil dari fungsi ini akan tampil dihalaman website. Kata document merupakan wakil dari code halaman html. Sehingga document write lebih mudah diartikan sebagai penulisan dihalaman html.

Berikut contoh code penulisannya.

<html>
  <head>
    <title>test console log</title>
  </head>
  <body>
    <p>Text yang tampil dihalaman</p><br/>
    <script>
      document.write('Hallo aku dibox dialog!');
    </script>
  </body>
</html>

Menampilkan Data dengan Inner Html

Hampir sama dengan document write, namun fungsi yang ke 4 ini bisa menampilkan data dihtml dengan lebih spesifik. Merupakan attribut didalam object html dengan isian String.

Jadi kita dapat memilih letak output nya didalam class atau id apa.

Contohnya seperti dibawah ini.


<html>
  <head>
    <title>test console log</title>
  </head>
  <body>
    <p id="pilihSaya">Saya Sebelum Berubah</p>
    <script>
      document.getElementById("pilihSaya").innerHTML = "Saya Setelah diubah";
    </script>
  </body>
</html>

Penutup

Meskipun terlihat sulit, jika sering dicoba dan dipraktekkan akan lebih mudah dipahami. Jadi langsung saja dipraktek sendiri. Setelah mengetahui cara menampilkan data dengan javascript native, kamu bisa buka daftar materi belajar menggunakan javascript native untuk melihat apa yang selanjutnya dipelajari untuk menguasai javascript native. 

Jangan lupa share jika artikel ini bermanfaat. Siapa tau teman atau orang terdekatmu membutuhkan informasi ini. Trimakasih sudah membaca.