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

atau tag

.

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:

 

Belajar JavaScript
 Saya sedang belajar JavaScript di duniailkom.com 

Pada baris ke-7, saya masuk kedalam JavaScript menggunakan tag

Belajar JavaScript

Saya sedang belajar JavaScript di duniailkom.com

---

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:

Belajar JavaScript
 Saya sedang belajar JavaScript di duniailkom.com 

Pilihan 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:

Belajar JavaScript
 Saya sedang belajar JavaScript di duniailkom.com 

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(“”), 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.

Sumber wk.com