Javascript sebagaimana telah dijelaskan digunakan untuk membuat interaksi antara user dan web dengan keunggulan semua proses data dilakukan oleh browser, tidak server hostingan web. Merujuk interaksi tersebut tentu misalkan ada yang akan ditampilkan jika user melakukan aksi seperti hasil dari input data. Sebagai contoh, misalkan sebuah kalkulator yang ditulis dengan javascript. Setelah input nilai mak user akan mengharapkan hasil. Bagaimana cara menampilkan hasil dalam javascript? Itulah yang akan dibahas pada sesi ini.
Untuk menampilkan hasil ada beberapa opsi fungsi yang bisa digunakan. Bisa dengan fungsi getElementById, fungsi alert dan fungsi console.log. Penjelasan masing masing dan tata cara penulisan fungsi tersebut dalam javascript sebagai berikut.
Untuk menampilkan hasil ada beberapa opsi fungsi yang bisa digunakan. Bisa dengan fungsi getElementById, fungsi alert dan fungsi console.log. Penjelasan masing masing dan tata cara penulisan fungsi tersebut dalam javascript sebagai berikut.
Menggunakan Perintah: document.getElementById
Berbeda dengan PHP dengan perintah echo dan print untuk menampilkan program di browser. Pada javascript tak ada perintah sederhana seperti itu. Dalam javascript dibutuhkan beberapa langkah agar hasil program bisa tampil di browser user.- Membuat tag "container". Tag ini digunakan untuk menampung hasil program javascript. Tag ini bisa dalam bentuk bahasa html seperti <p>, <div>.
- Merujuk "contaner" tersebut dari javascript. Ini digunakan untuk akses halaman html. Inilah nantinya akan menggunakan perintah document.getElementById ("idcontainer"). Fungsi ini akan mencari elemen pada html yang mempunyai nama sesuai dengan yang diwarnai biru.
- Memasukkan hasil program dalam tag 'container' dengan menggunakan perintah innerHTML.
Sebagai bahan percobaan ini seperti apa kerjanya. Gunakan contoh berikut ini.
<!DOCTYPE html><html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /><title> Tutorial JavaScript</title><script>window.onload = function(){ var hasiljumlah; hasiljumlah = 2+4+6+8+10; document.getElementById("idnyaitu").innerHTML=hasiljumlah;}</script></head> <body><h1>Cara Menampilkan Hasil JAVASCRIPT di HTML</h1><p> Ini HTML sebagai tambahan aja, setelah tanda titik 2, inner html : </p><div id="idnyaitu"></div></body></html>Bagian hasiljumlah yang ditebalkan menunjukkan perintah fungsi. Abaikan ini sementra. Coba berfokus pada perintah yang bagian berwarna merah. perintah "document.getElementById("idnyaitu").innerHTML=hasiljumlah; " merupakan apa yang ingin ditampilkan. Sementara bagian <div id="idnyaitu"> adalah pemanggilan javascript di dalam html.
Menampilkan Hasil dengan fungsi Alert
Fungsi alert ini adalah tampilnya berupa notifikasi pada halaman. Fungsi ini akan menampilkan semua yang ingin ditampilkan pada pernyataan yang di input. Fungsi ini dikenal lebih cepat dalam menampilkan hasil. Perlu digaris bawahi keluaran yang ditampilkan memiliki tipe data string (text). Contoh dalam penulisan fungsi ini untuk menampilkan hasil Javascript.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title> Tutorial JavaScript</title>
<script>
window.onload = function()
{
var hasil;
jumlahhasil = 2+4+6+8+10;
alert(jumlahhasil);
}
</script>
</head>
<body>
<h1>Cara Menampilkan Hasil JAVASCRIPT di HTML</h1>
<p> Hasil akan langsung tampil sebagai Notifikasi, tak perlu dipanggil dengan html : </p>
</body>
</html>
Dengan cara ini tidak perlu lagi dipanggil dalam html javascriptnya. Karena hasil akan tampil dalam bentuk notifikasi. Jadi bukan di halaman html. Untuk mengkombinasikan ini, misalkan ingin hasil ditampilkan dengan klik, bisa ditambahkan fungsi event load nantinya. Adapun tampilan dari eksekusi kode diatas seperti ini.
Menggunakan perintah document.write()
Cara ini merupakan alternatif untuk menampilkan hasil javascript. Sebagai contoh coba eksekusi kode berikut ini.
<!DOCTYPE html>
<html>
<head>
<title>Tutorial JavaScript</title>
<script>
window.onclick = function()
{
document.write("Halaman Tadi Kehapus-kan, Muncul Halaman Baru");
}
</script>
</head>
<body>
<h1>Ini Contoh Pakai document write</h1>
<p> Tekan mouse kiri anda coba </p>
</div>
</body>
</html>
Penjelasan penggunaan cara ini, javascript akan dijalankan pada halaman baru dengan menghapus halaman sebelumnya. Window.onclick yang ditebalkan di atas, merupakan syarat. Artinya jika pengunjung melakukan klik, maka akan jalan javascriptnya. Setelah klik maka akan muncul halaman dengan isi seperti yang berwarna biru. Bisa membedakan perintah document.GetElementById dan document.write kan?
Share Yuk
Related Posts
Loading...
No comments:
Post a Comment