Tutorial Belajar JavaScript Part 7: Cara Menampilkan Hasil Program JavaScript

Melanjutkan tutorial JavaScript di Duniailkom, kali ini kita akan pelajari Cara Menampilkan Hasil Program JavaScript. Kita akan bahas tentang perintah document.write(), innerHTML, alert(), console.log().


Menampilkan Hasil JavaScript dengan document.write()

Cara pertama untuk menampilkan hasil kode program JavaScript di web browser adalah dengan perintah document.write(). Berikut contoh penggunaannya:

<!DOCTYPE html>
<html lang="id">
<head>
  <title>Belajar JavaScript di Duniailkom</title> 
</head>
<body>
  <h1>Belajar JavaScript</h1>
  <p> Saya sedang belajar JavaScript di duniailkom </p>
  <script>
    let foo = 1+3+5+7+9;
    document.write(foo);

    document.write("<br>");

    let bar = {a:'16'};
    document.write(bar);
  </script>
</body>
</html>

Cara Menampilkan Hasil Program JavaScript - document.write

Perintah document.write() akan menampilkan teks yang ditulis dalam tanda kurung (sebagai argument).

Di baris 10 saya membuat variabel foo yang akan menampung hasil dari penambahan 1+3+5+7+9. Variabel ini kemudian ditampilkan dengan perintah document.write(foo) di baris 11. Hasilnya, akan tampil angka 25 di web browser.

Penjelasan lebih lanjut mengenai variabel akan kita bahas dalam tutorial terpisah. Fokus tutorial ini sekedar menampilkan hasilnya saya dengan perintah document.write().

Lanjut, di baris 13 terdapat perintah document.write("<br>"). Di HTML, tag <br> dipakai sebagai tanda untuk pindah baris. Ini semata-mata agar tampilan kita lebih rapi saja.

Di baris 15 giliran variabel bar yang saya isi dengan sebuah object {a:'16'}. Kembali, materi tentang object akan dibahas dalam tutorial terpisah. Pada saat ditampilkan, hasilnya adalah [object Object].

Inilah salah satu kelemahan jika ingin menampilkan hasil kode program menggunakan perintah document.write(). Jika datanya cukup kompleks, yang tampil adalah tipe data dari variabel, bukan nilainya.


Menampilkan Hasil JavaScript dengan innerHTML

Cara kedua untuk menampilkan hasil JavaScript adalah dengan mengakses property innerHTML dari sebuah element. Untuk keperluan ini, kita juga harus minta bantuan perintah document.getElementById() untuk mencari dimana hasil ini akan ditampilkan. Berikut contoh kode programnya:

<!DOCTYPE html>
<html lang="id">
<head>
  <title>Belajar JavaScript di Duniailkom</title> 
</head>
<body>
  <h1>Belajar JavaScript</h1>
  <p> Saya sedang belajar JavaScript di duniailkom </p>
  <div id="result1"></div>
  <div id="result2"></div>
  <script>
    let foo = 1+3+5+7+9;
    document.getElementById("result1").innerHTML=foo;

    let bar = {a:'16'};
    document.getElementById("result2").innerHTML=bar;
  </script>
</body>
</html>

Sama seperti contoh di document.write(), saya ingin menampilkan isi dari variabel foo dan bar. Hasil tampilan juga akan sama persis seperti sebelumnya.

Di baris 9-10, terdapat 2 tag <div> dengan atribut id="result1" dan id="result2". Disinilah kita akan meletakkan hasil kode program JavaScript.

Caranya, akses kedua element dengan perintah document.getElementById(), lalu isi property innerHTML dengan variabel foo dan bar seperti di baris 13 dan 16.

Penjelasan lebih lanjut terkait cara kerja perintah document.getElementById() akan kita bahas pada tutorial terpisah. Secara singkat perintah ini dipakai untuk mencari element HTM berdasarkan nilai atribut id.


Menampilkan Hasil JavaScript dengan alert()

Perintah alert() sudah beberapa kali kita gunakan, dan ini adalah cara paling sederhana untuk menampilkan hasil program JavaScript. alert() akan menampilkan apapun yang diinput sebagai argument.

Berikut contoh penggunaannya:

<!DOCTYPE html>
<html lang="id">
<head>
  <title>Belajar JavaScript di Duniailkom</title> 
</head>
<body>
  <h1>Belajar JavaScript</h1>
  <p> Saya sedang belajar JavaScript di duniailkom </p>
  <div id="result1"></div>
  <div id="result2"></div>
  <script>
    let foo = 1+3+5+7+9;
    alert(foo);

    let bar = {a:'16'};
    alert(bar);
  </script>
</body>
</html>

Cara Menampilkan Hasil Program JavaScript - alert
Perintah alert() di akses pada baris 13 dan 16. Pada saat dijalankan, isi variabel foo dan bar akan tampil di jendela alert secara bergantian. Setelah men-klik tombol OK dari hasil alert(foo), barulah tampil hasil alert(bar).

Meskipun sangat praktis, perintah alert() tetap menampilkan isi variabel bar sebagai [object Object].


Menampilkan Hasil JavaScript dengan console.log()

Dari ketiga cara yang sudah kita bahas, terdapat sedikit masalah saat menampilkan variabel bar yang berisi object. Ketiganya kurang informatif untuk data-data kompleks JavaScript. Sebagai solusi, kita bisa mengakses hasil kode JavaScript dengan perintah console.log().

Perintah console.log akan menampilkan hasil program ke dalam tab console pada menu Web Developer. Cara penggunaan fungsi ini sama seperti alert, hanya butuh menginput hasil yang ingin ditampilkan sebagai argument.

Berikut contoh penggunaan perintah console.log() dalam menampilkan hasil program JavaScript:

<!DOCTYPE html>
<html lang="id">
<head>
  <title>Belajar JavaScript di Duniailkom</title> 
</head>
<body>
  <h1>Belajar JavaScript</h1>
  <p> Saya sedang belajar JavaScript di duniailkom </p>
  <div id="result1"></div>
  <div id="result2"></div>
  <script>
    let foo = 1+3+5+7+9;
    console.log(foo);

    let bar = {a:'16'};
    console.log(bar);
  </script>
</body>
</html>

Cara Menampilkan Hasil Program JavaScript - console.log

Hasilnya, isi variabel foo dan bar tampil beserta nilai yang ada.

Pilihan apakah menggunakan perintah alert() dan console.log() tergantung kepada kenyamanan kita sebagai programmer. Dalam tutorial JavaScript di Duniailkom ini saya akan lebih banyak menggunakan console.log() yang lebih informatif dan tampilan hasil program menjadi lebih rapi.

Namun perintah alert() dan console.log() hanya untuk proses development saja. Untuk web asli nanti, lebih cocok memakai perintah document.getElementById() dan innerHTML seperti cara kedua, sebab hasilnya langsung terlihat di web browser.

Dalam tutorial belajar JavaScript berikutnya, kita akan bahas konsep inti JavaScript, yakni: Pengertian EmcaScript dan DOM (Document Object Model).


Saat ini di Duniailkom tersedia eBook / buku JavaScript Uncover. Dengan total lebih dari 650 halaman A4, materi di buku jauh lebih banyak daripada tutorial di web Duniailkom. Penjelasan lebih lanjut bisa ke: JavaScript Uncover – Panduan Belajar JavaScript.

39 Comments

  1. doe
    24 Nov 14
  2. Cici Wirachmat
    20 Jan 15
    • Bayu
      21 May 15
  3. adhitya
    08 Jun 15
  4. Nisa Rahmawati
    09 Jul 15
  5. Nisa Rahmawati
    09 Jul 15
    • Andre
      10 Jul 15
  6. cemong
    16 Jul 15
    • Andre
      16 Jul 15
  7. YUsuf
    20 Dec 15
    • Andre
      20 Dec 15
      • Anonymous
        11 Oct 18
  8. Ahmad Sirojuddin
    20 Apr 16
    • Andre
      20 Apr 16
  9. Enda Tamsing
    28 Apr 16
    • Andre
      30 Apr 16
  10. senrif
    22 Jul 16
  11. dwiki
    29 Nov 16
    • Andre
      01 Dec 16
  12. izal
    25 Jan 17
    • Andre
      26 Jan 17
  13. izal
    03 Feb 17
    • Andre
      04 Feb 17
  14. dinda
    09 Feb 17
    • Andre
      11 Feb 17
  15. Adam
    01 May 17
    • Andre
      02 May 17
  16. Irfan
    23 Jun 17
    • Andre
      28 Jun 17
  17. Donga
    23 Oct 17
  18. Anonymous
    11 Oct 18
    • Andre
      12 Oct 18
  19. Rizliandi M
    28 Jun 19
    • Andre
      28 Jun 19
      • Rizliandi M
        28 Jun 19
  20. Abdullah Mukhlis
    09 Mar 22
  21. aris
    02 Aug 23
    • Andre
      03 Aug 23

Add Comment