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>
Pada 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.
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>
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>
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.
<!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).
gan. misalnya kita tuh klik button pada sebuah form yang nantinya akan menghasilkan informasi sesuai pilihan yang di pilih pada form 1. tampilnya itu di bawah form itu gan.
(form id=tampil)
select
–option=jakarta
–option=bandung
input type=button onclick=klik()
misal:dipilihnya bandung
dibawah form tersebut ada info seputar bandung gan.
saya coba pake document.write tapi css nya gak jalan. saya pakai juga getElementById tetep belum jalan.
mohon pencerahannya.
Terima kasih
Langsung saja saya jawab dengan artikel y gan :), disini: Cara Menampilkan Hasil Form HTML dengan JavaScript
Mudah2an bisa membantu menjawab pertanyaannya.
Dear, Admin;
Saya sedang mengikuti pelajaran pemrograman ini, Trims , ya banyak ilmu yang bisa saya peroleh, sukses selalu.
belajar di mana pak ?
saia mau ikut kalo deket mah
Gan, mau tanya. Gimana caranya buat tag input di html, trus kita proses hasil inputannya ke javascript.
Contoh kita mau menjumlahkan, tapi data penjumlahannya kita input dulu dari halaman html. Mohon pencerahanya gan, thx.
min saya masih bingung nih penggunaan document.getElementById(“tempat_hasil”) dengan #(“tempat_hasil”) apa bedanya ya???
maksud saya dengan ini min $(‘#tempat_hasil’)
Yang pertama: document.getElementById(“tempat_hasil”) adalah cara mengakses sebuah element HTML menggunakan kode JavaScript “murni”, sedangkan yang kedua: $(‘#tempat_hasil’) adalah cara mengakses element HTML menggunakan library JavaScript jQuery.
Jadi agar bisa menggunakan $(‘#tempat_hasil’), harus menambahkan kode untuk men-load jQuery terlebih dahulu.
Semoga bisa membantu :)
gan, klw ga pake var tpi langsung hasil…..ga pengaruh apa2 kan ya?????
hasil=1+9+8;
alert(hasil);
Belajar Java
Untuk program sederhana seperti diatas tidak akan berpengaruh gan, tapi keyword ‘var‘ akan berefek ketika kita membuat kode JavaScript yang melibatkan function.
Sebuah variabel yang dibuat tanpa keyword ‘var’ akan menjadi global variabel, sehingga bisa diakses dan diubah secara bebas dari function. Istilahnya, keyword ‘var’ berpengaruh kepada ‘variable scope’. :)
gan mau tanya kalo function nya banyak tapi pgn di panggil pake button onclick gmn cranya ? sedangkan ane taunya onclick cuma bisa manggil 1 function . . contoh //onclick="hitung()"> // sedangkan ane punya function lebih dari 1 biar ke proses semua gmn ya ? mohon pencerahannya..
Tinggal disatukan saja fungsi-fungsi itu ke fungsi hitung() gan. Atau bisa juga nanti di dalam fungsi hitung(), kita panggil lagi fungsi2 lain. Jadi fungsi di dalam fungsi :)
kya gmn gan bsa contohon? gw mw buat alert hasil dari penjumlahan, kali bagi kurang sekaligus..
Dear, Admin;
Saya sedang mengikuti pelajaran pemrograman ini, Trims , ya banyak ilmu yang bisa saya peroleh, sukses selalu.
:) :) :)
Sip, sama2 mas.. semoga tutorial yang ada di duniailkom ini bisa bermanfaat :)
Admin : Cakep dah tutornya ;) semoga lancar dan konsisten untuk perbuatan baiknya ;)
btw untuk JavaScript-nya bisa gak ya dicampur aduk sama jQuery Validasi :v ??
saya tunggu di malimmustakim@gmail.com jawaban-nya ^_^
Tentu bisa mas, karena jQuery tidak lain JavaScript juga :)
mas Andre nanti adain tutorial Ajax juga ya, syukran
suwun mas sangat bermanfaat
sehat &sukses selalu
Amiin… terimakasih untuk doanya..
gan, mau nanya. saya mau bikin button login kemudian form loginnya itu ada di bawah button itu (halaman yg sama). itu bagaimana ya caranya? data2nya ada di database. mohon pencerahannya. terima kasih
Kalau sampai ke database, mau g mau mesti pelajari semua materi dasar web programming, karena saling berhubungan: HTML, CSS, PHP, MySQL, dan JavaScript. Penjelasanya bisa satu buku nih, hehe…
mas, klo mau nampilkan data dari database berupa kalimat biar tulisannya itu ga memanjang ke kanan gimana ya mas? terima kasih
Kalau soal tampilan web, sudah bagiannya CSS. Hasil dari database bisa di tempatkan ke dalam "container" seperti tag <div>, nah tag div inilah yang nantinya di style dengan CSS, misalnya dengan property width:300px (lebar kotak div dibatasi sampai 300 pixel).
ka gimana caranya kalo saya mau satu fungsi perhitungan itu bisa dipanggil berkali kali, nah saya makai rumus perhitungan nya itu satu dari ketentuan js nya satu nya itu dari data yang diinput kan? gimana ka?
Saya agak bingung membaca pertanyaannya… tapi yang jelas kalau pengen buat perhitungan yang bisa dipanggil berkali2, silahkan rancang sebuah function sendiri. Jika pengen function tersebut jalan ketika sebuah tombol di-klik, mesti menggunakan event JavaScript.
kalau penggabungan antara getelementbyid dan button tanpa embel2 on click jika diclick bagaimana gan?
Bisa menggunakan method addEventListener(). Tapi untuk saat ini materinya baru tersedia di eBook JavaScript Uncover…
mas kalo misal hasil javascript nya itu di tampilkan di halaman baru kira" bisa ga ya?
Bisa saja. Di JavaScript nanti ada namanya "Window Object". Dengan object ini kita bisa mengirim data ke halaman lain, menampilkan jendela pop up hingga mengubah isi konten dari jendela lain.
Karena penjelasannya cukup panjang, saat ini baru saya bahas di buku JavaScript Uncover Duniailkom.
Wah…senang belajar di Duniailkom. Bahasanya mudah dimengerti…trims gan
function myFunction() {
var m=document.getElementById("Bilangan1").value;
var n=document.getElementById("Bilangan2").value;
var p = parseInt(m)+ parseInt(n);
var k = parseInt(m)* parseInt(n);
var b = parseInt(m)/ parseInt(n);
var ku= parseInt(m)- parseInt(n);
alert(m + "+"+ n+ "=" +p); <!–nah ini gan mksud gw, biar dia bsa tampil smua sekaligus gmn?–>
}
</script>
Sebelum di alert, ditampung dulu ke variabel agar lebih mudah, kodenya seperti ini:
var m="3";
var n="4";
var p = parseInt(m)+ parseInt(n);
var k = parseInt(m)* parseInt(n);
var b = parseInt(m)/ parseInt(n);
var ku= parseInt(m)- parseInt(n);
var hasil = m + "+" + n + "=" + p + "\n";
hasil += m + "*" + n + "=" + k + "\n";
hasil += m + "/" + n + "=" + b + "\n";
hasil += m + "-" + n + "=" + ku + "\n";
alert(hasil);