cloud-hosting-terbaik-indonesia

Tutorial Belajar JavaScript Part 7: Cara Menampilkan Hasil Program JavaScript

Posted on

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


Cara Menampilkan Hasil Program JavaScript

Tak seperti bahasa pemograman PHP yang mempunyai petunjuk echo atau print bagi menampilkan hasil program ke pada web browser, JavaScript tak menyediakan petunjuk sederhana bagi menampilkan hasil program ke pada web browser. Pada JavaScript, kita membutuhkan beberapa langkah yang agak panjang seandainya ingin menampilkan hasil ke pada web browser.

Pertama-tama, kita mesti membangun sebuah tag ‘container, atau tag penampung bagi hasil program JavaScript. Tag container ini dapat berupa tag HTML apapun, seperti tag paragraf <p> atau tag <div>.

Kedua, kita mesti mencari faktor ‘container’ ini dari JavaScript. JavaScript menyediakan beberapa cara bagi mengakses faktor pada HTML. Diantara caranya yaitu dengan menggunakan guna (atau lebih tepatnya: method): document.getElementById(“id_continer”). Manfaat getElementById akan mencari faktor HTML yang mempunyai atribut id yang diinputkan di pada tanda kurung.

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

Bagi mempermudah pemahaman cara menampilkan hasil program JavaScript ke pada web browser, berikut yaitu contoh program bagi menampilkan hasil penjumlahan:

 Di baris ke-7, saya masuk kedalam JavaScript menggunakan tag <script>. Di baris pertama-tama, saya menggunakan metoda event onload bagi memastikan bahwa kode JavaScript dijalankan setelah seluruh HTML telah selesai di proses (seperti yang telah kita pelajari di panduan Posisi Terbaik Meletakkan kode JavaScipt di dalam HTML)

Di baris berikutnya, saya membangun variabel hasil yang akan menampung hasil penjumlahan. Di baris ke-9 saya mengerjakan beberapa penjumlahan sederhana, dan menyimpannya ke pada variabel hasil. Di baris ke-10 inilah saya menampilkan nilai ahir penjumlahan ke pada tag HTML yang mempunyai id tempat_hasil.

Penjelasan mengenai guna document.getElementById akan kita bahas di panduan khusus mengenai DOM JavaScript.

Proses bagi menampilkan hasil program yang agak panjang ini akan kurang mudah pada perancangan program JavaScript dimana kita akan sering bagi menguji hasil program sebelum masuk ke bagian program berikutnya.

Bagi kebutuhan ini, kita akan melihat alternatif cara bagi menampilkan hasil program dari JavaScript, yakni dengan guna alert dan guna console.log.


Manfaat Alert bagi Menampilkan Hasil Program JavaScript

Manfaat alert yang telah beberapa kali saya gunakan pada beberapa panduan sebelum ini, dan adalah sebuah cara sangat sederhana bagi menampilkan hasil program JavaScript.

Manfaat alert akan menampilkan ‘apapun’ yang diberikan selaku argumen ke pada guna ini. Setiap output yang ditampilkan akan dikonversi menjadi wujud text (tipe data String). Manfaat alert akan menampilkan hasil JavaScript dengan cepat.

Berikut yaitu contoh kode JavaScript sebelumnya seandainya menggunakan guna alert:

 Alternatif apakah menggunakan guna alert dan guna console.log tergantung kepada kenyamanan kita selaku programmer. Pada panduan JavaScript di dunia ilkom ini, saya akan lebih banyak menggunakan guna console.log, karena diperbandingkan guna alert, guna console.log dapat digunakan bagi menampilkan banyak hasil program sekaligus dan tampilan hasil program akan lebih rapi.

Kedua guna ini digunakan hanya pada proses perancangan program, atau proses pencarian kesalahan (debugging). Akan benar-benar jarang kita menggunakan guna ini pada situs live. Bagi menampilkan output kepada user di pada halaman HTML, biasanya menggunakan guna lain seperti document.getElementById dan InnerHTML seperti cara pertama-tama di awal artikel ini

Cara lain bagi menampilkan hasil dari JavaScript yaitu menggunakan guna document.write(). Berikut yaitu cara penggunaannya:

Manfaat document.write akan menampilkan hasil JavaScript ke pada web browser, tetapi dengan satu ketentuan: guna ini akan menghapus seluruh tag HTML yang telah ditulis, dan menggantinya dengan isi dari guna ini. Manfaat document.write hanya akan bermanfaat seandainya sahabat ingin menuliskan seluruh kode HTML hanya via JavaScript, termasuk tag pembuka HTML seperti document.write(“<!DOCTYPE html>”), dan seterusnya.

Pada Panduan Belajar JavaScript berikutnya, kita akan membahas mengenai inti dari JavaScript, yakni: Pengertian Core JavaScript dan DOM (Document Object Model).


eBook JavaScript Uncover Duniailkom

JavaScript telah menjadi fitur wajib di setiap blog modern. Duniailkom telah menyusun eBook JavaScript Uncover yang membahas JavaScript dengan lebih detail dan lebih komplit, mulai dari basic hingga konsep DOM, Event dan AJAX. Penjelasan lebih lanjut dapat ke eBook JavaScript Uncover Duniailkom.


Sumber https://www.duniailkom.com/