Tutorial Belajar JavaScript Part 7: Cara Menampilkan Hasil Program JavaScript

Dari tutorial sebelumnya, kita telah mempelajari cara memasukkan kode JavaScript kedalam HTML, dan memahami mekanisme web browser dalam mengeksekusi JavaScript. Pada tutorial kali ini saya akan membahas Cara Menampilkan Hasil Program JavaScript menggunakan fungsi getElementById, fungsi alert, dan fungsi console.log.


Cara Menampilkan Hasil Program JavaScript

Tidak seperti bahasa pemograman PHP yang memiliki perintah echo atau print untuk menampilkan hasil program ke dalam web browser, JavaScript tidak menyediakan perintah sederhana untuk menampilkan hasil program ke dalam web browser. Dalam JavaScript, kita membutuhkan beberapa langkah yang agak panjang jika ingin menampilkan hasil ke dalam web browser.

Pertama, kita harus membuat sebuah tag ‘container, atau tag penampung untuk hasil program JavaScript. Tag container ini bisa berupa tag HTML apapun, seperti tag paragraf <p> atau tag <div>.

Kedua, kita harus mencari elemen ‘container’ ini dari JavaScript. JavaScript menyediakan beberapa cara untuk mengakses elemen dalam HTML. Salah satu caranya adalah dengan menggunakan fungsi (atau lebih tepatnya: method): document.getElementById(“id_continer”). Fungsi getElementById akan mencari elemen HTML yang memiliki atribut id yang diinputkan di dalam tanda kurung.

Langkah ketiga, adalah menginputkan hasil program kedalam tag ‘container’ dengan menggunakan properti innerHTML.

Untuk mempermudah pemahaman cara menampilkan hasil program JavaScript ke dalam web browser, berikut adalah contoh program untuk menampilkan hasil penjumlahan:

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Belajar JavaScript</title>

<script>
window.onload = function()
{
   var hasil;
   hasil = 1+3+5+7+9;
   document.getElementById("tempat_hasil").innerHTML=hasil;
}
</script>

</head>
 
<body>
<h1>Belajar JavaScript</h1>
<p> Saya sedang belajar JavaScript di duniailkom.com </p>
<div id="tempat_hasil">
</div>
</body>
</html>

Contoh Cara Menampilkan Hasil JavaScript - fungsi getElementByIdPada baris ke-7, saya masuk kedalam JavaScript menggunakan tag <script>. Pada baris pertama, saya menggunakan metoda event onload untuk memastikan bahwa kode JavaScript dijalankan setelah seluruh HTML telah selesai di proses (seperti yang telah kita pelajari pada tutorial Posisi Terbaik Meletakkan kode JavaScipt di dalam HTML)

Pada baris berikutnya, saya membuat variabel hasil yang akan menampung hasil penjumlahan. Pada baris ke-9 saya melakukan beberapa penjumlahan sederhana, dan menyimpannya ke dalam variabel hasil. Pada baris ke-10 inilah saya menampilkan nilai akhir penjumlahan ke dalam tag HTML yang memiliki id tempat_hasil.

Penjelasan tentang fungsi document.getElementById akan kita bahas pada tutorial khusus tentang DOM JavaScript.

Proses untuk menampilkan hasil program yang agak panjang ini akan kurang praktis dalam pembuatan program JavaScript dimana kita akan sering untuk menguji hasil program sebelum masuk ke bagian program berikutnya.

Untuk keperluan ini, kita akan melihat alternatif cara untuk menampilkan hasil program dari JavaScript, yakni dengan fungsi alert dan fungsi console.log.


Fungsi Alert untuk Menampilkan Hasil Program JavaScript

Fungsi alert yang telah beberapa kali saya gunakan dalam beberapa tutorial sebelum ini, dan merupakan cara paling sederhana untuk menampilkan hasil program JavaScript.

Fungsi alert akan menampilkan ‘apapun’ yang diberikan sebagai argumen ke dalam fungsi ini. Setiap output yang ditampilkan akan dikonversi menjadi bentuk text (tipe data String). Fungsi alert akan menampilkan hasil JavaScript dengan cepat.

Berikut adalah contoh kode JavaScript sebelumnya jika menggunakan fungsi alert:

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Belajar JavaScript</title>

<script>
window.onload = function()
{
   var hasil;
   hasil = 1+3+5+7+9;
   alert(hasil);
}
</script>

</head> 
<body>
<h1>Belajar JavaScript</h1>
<p> Saya sedang belajar JavaScript di duniailkom.com </p>
</div> 
</body> 
</html>

Contoh Cara Menampilkan Hasil JavaScript - fungsi alert


Fungsi Console.Log untuk Menampilkan Hasil Program JavaScript

Web browser saat ini telah menyediakan menu khusus untuk programming web, yakni melalui menu Web Developer (seperti yang di bahas pada Cara Menampilkan Pesan Kesalahan (Error) JavaScript). Menu web developer ini menyediakan cara lain (yang lebih ‘modern‘) untuk menampilkan hasil program JavaScript dibandingkan menggunakan fungsi alert, yakni dengan fungsi console.log.

Fungsi console.log akan menampilkan hasil program ke dalam tab console pada menu Web Developer. Cara penggunaan fungsi ini sama seperti fungsi alert, dimana kita hanya butuh menginput hasil yang ingin ditampilkan kedalam argumen fungsi ini. Jika fungsi itu bukan bertipe String, maka akan dikonversi menjadi String.

Berikut adalah contoh penggunaan fungsi console.log dalam menampilkan hasil program JavaScript:

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Belajar JavaScript</title>

<script>
window.onload = function()
{
   var hasil;
   hasil = 1+3+5+7+9;
   console.log(hasil);
}
</script>

</head>
<body>
<h1>Belajar JavaScript</h1>
<p> Saya sedang belajar JavaScript di duniailkom.com </p>
</div>
</body>
</html>

Contoh Cara Menampilkan Hasil JavaScript - fungsi console.logPilihan apakah menggunakan fungsi alert dan fungsi console.log tergantung kepada kenyamanan kita sebagai programmer. Dalam tutorial JavaScript di dunia ilkom ini, saya akan lebih banyak menggunakan fungsi console.log, karena dibandingkan fungsi alert, fungsi console.log bisa digunakan untuk menampilkan banyak hasil program sekaligus dan tampilan hasil program akan lebih rapi.

Kedua fungsi ini digunakan hanya dalam proses pembuatan program, atau proses pencarian kesalahan (debugging). Akan sangat jarang kita menggunakan fungsi ini dalam situs live. Untuk menampilkan output kepada user di dalam halaman HTML, biasanya menggunakan fungsi lain seperti document.getElementById dan InnerHTML seperti cara pertama pada awal artikel ini
Cara lain untuk menampilkan hasil dari JavaScript adalah menggunakan fungsi document.write(). Berikut adalah cara penggunaannya:

<!DOCTYPE html>
<html>
<head>
<title>Belajar JavaScript</title>

<script>
window.onload = function()
{
   document.write("Hello duniailkom");
}
</script>

</head>
<body>
<h1>Belajar JavaScript</h1>
<p> Saya sedang belajar JavaScript di duniailkom.com </p>
</div>
</body>
</html>

Fungsi document.write akan menampilkan hasil JavaScript ke dalam web browser, tetapi dengan satu ketentuan: fungsi ini akan menghapus seluruh tag HTML yang telah ditulis, dan menggantinya dengan isi dari fungsi ini. Fungsi document.write hanya akan berguna jika anda ingin menuliskan seluruh kode HTML hanya melalui JavaScript, termasuk tag pembuka HTML seperti document.write(“<!DOCTYPE html>”), dan seterusnya.

Dalam Tutorial Belajar JavaScript berikutnya, kita akan membahas tentang inti dari JavaScript, yakni: Pengertian Core JavaScript dan DOM (Document Object Model).


eBook JavaScript Uncover Duniailkom
JavaScript sudah menjadi fitur wajib di setiap website modern. Duniailkom telah menyusun eBook JavaScript Uncover yang membahas JavaScript dengan lebih detail dan lebih lengkap, mulai dari dasar hingga konsep DOM, Event dan AJAX. Penjelasan lebih lanjut bisa ke eBook JavaScript Uncover Duniailkom.

Tutorial Terkait:

30 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
  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

Add Comment