Cara menampilkan nilai html dengan javascript
Article duniailkom
Dalam artikel tanya-jawab pemrograman duniailkom kali ini, saya akan membahas salah satu pertanyaan dari rekan kita: ALE-ALE.
Berikut adalah pertanyaannya:
Saya sedang mengerjakan project delphi menggunakan javascript .. dimana di situ juga saya membuat browser
sederhana dengan implementasi javascript di dalamnya. Yang mau saya tanyakan: bagaimana caranya mengambil nilai yg ada di HTML / halaman browser sehingga dgn menggunakan javascript tersebut akan saya tampilkan di GUI program? Contoh nya misal di halaman web terdapat kata nilai anda adalah = 80, bagaimana mengambil string 80 tersebut dengan javascript ? makasih sebelumnya
Karena saya sudah lama tidak membuat program dengan delphi, kali ini saya hanya fokus kepada cara mengambil dan menampilkan nilai yang ada di HTML dengan menggunakan JavaScript.
Berikut adalah tampilan akhir kode program yang akan kita bahas::
Dan berikut adalah kode HTML+JavaScript yang saya gunakan untuk menampilkan hasil diatas:
<html>
<head>
<meta charset="UTF-8">
<title>Tutorial Belajar JavaScript</title>
</head>
<body>
<h3>Contoh 1: Mengambil nilai tag span</h3>
<p>Nama: Andika Siswoyo, Nilai: <span id="nilai_andika">80</span>
<br />Nama: Joko Susilo, Nilai: <span id="nilai_joko">92</span></p>
<button id="tombol_p">Tampilkan Nilai</button> <br/>
<br/> <h3>Contoh 2: Mengambil nilai tag input</h3>
<form onsubmit="return false">
<label>Rika Pratiwi: </label>
<input type="text" id="input_form" value="90"/>
<button id="tombol_form">Tampilkan Nilai</button>
</form> <br/>
<br/> <h2>Hasil: <span id="hasil"></span></h2>
</body>
<script>
document.getElementById("tombol_p").
addEventListener("click", tampilkan_nilai_p);
document.getElementById("tombol_form").
addEventListener("click", tampilkan_nilai_form);
function tampilkan_nilai_p() {
var nilai_andika=document.getElementById("nilai_ andika").innerHTML;
var nilai_joko=document.getElementById("nilai_ joko").innerHTML;
document.getElementById("hasil").innerHTML= nilai_andika+" dan "+nilai_joko;
}
function tampilkan_nilai_form(){
var nilai_form=document.getElementById("input_
form").value;
document.getElementById("hasil").innerHTML=nilai_
form; }
</script>
</html>
Anda bisa mencobanya dari tampilan CODEPEN dibawah ini:
Contoh 1: Mengambil nilai tag span
Nama: Andika Siswoyo, Nilai: 80
Nama: Joko Susilo, Nilai: 92
Contoh 2: Mengambil nilai tag input
Hasil:
Mari kita bahas kode HTML dan JavaScript diatas dengan lebih detail.
Kode HTML
Dari contoh diatas, saya menggunakan kode HTML sebagai berikut:
<body>
<h3>Contoh 1: Mengambil nilai tag span</h3>
<p>Nama: Andika Siswoyo, Nilai: <span id="nilai_
andika">80</span>
<br />Nama: Joko Susilo, Nilai: <span id="nilai_
joko">92</span></p>
<button id="tombol_p">Tampilkan Nilai</button> <br/>
<br/> <h3>Contoh 2: Mengambil nilai tag input</h3>
<form onsubmit="return false">
<label>Rika Pratiwi: </label>
<input type="text" id="input_form" value="90"/>
<button id="tombol_form">Tampilkan Nilai</button>
</form> <br/>
<br/> <h2>Hasil: <span id="hasil"></span></h2>
</body>
Dalam kode HTML diatas, saya membuat 2 buah contoh.
Yang pertama adalah sebuah paragraf yang berisi nama dan nilai dari 2 orang siswa: Andika Siswoyo dan Joko Susilo (bukan nama sebenarnya :) ),
Yang kedua nama ini berada di dalam tag paragraf.
Namun yang paling penting, nilai dari masing-masing siswa berada di dalam tag <span> dengan atribut id=nilai_andika dan id=nilai_joko. Atribut id inilah yang akan kita gunakan untuk mengambilnya dengan JavaScript.
Di bawah nilai siswa ini saya menambahkan sebuah tombol dengan tag <button id="tombol_p">. Tombol ini akan digunakan sebagai 'trigger' untuk pengambilan nilai.
Untuk contoh kedua, saya membuat sebuah form yang berisi tag <input type="text">. Inputan ini bisa diganti-ganti nilainya pada saat halaman HTML telah tampil, dan kita akan mencoba mengambil nilai dari tag input ini.
Sama seperti contoh diatasnya, saya menggunakan tombol <button id="tombol_form"> sebagai 'trigger' JavaScript, yakni ketika tombol ini di-klik, ambil nilai form dengan JavaScript.
Jika anda perhatikan, tag <form> memiliki atribut onsubmit="return false". Atribut ini adalah kode JavaScript yang berfungsi untuk menghentikan fitur standar form yang ketika tombol submit ditekan, form akan pindah ke halaman tertentu untuk di proses (biasanya diproses menggunakan PHP).
Dengan kata lain, menambahkan atribut onsubmit="return false" pada tag form, akan mematikan fungsi submit. Hal ini saya lakukan karena kita akan menampilkan hasil form dengan JavaScript, bukan dengan PHP seperti biasanya, sehingga saya tidak butuh fungsi bawaan tersebut.
Dibagian akhir kode HTML, saya menambahkan sebuah tag span: <span id="hasil">, disinilah nantinya nilai akhir akan ditampilkan.
Kode JavaScript
Untuk kode JavaScript, saya menempatkannya di bawah tag <body>, bukan di bagian <head>:
<script>
document.getElementById("tombol_p").
addEventListener("click", tampilkan_nilai_p);
document.getElementById("tombol_form").
addEventListener("click", tampilkan_nilai_form);
function tampilkan_nilai_p() {
var nilai_andika=document.getElementById("nilai_
andika").innerHTML;
var nilai_joko=document.getElementById("nilai_
joko").innerHTML;
document.getElementById("hasil").innerHTML= nilai_andika+" dan "+nilai_joko; }
function tampilkan_nilai_form(){
var nilai_form=document.getElementById("input_
form").value;
document.getElementById("hasil").innerHTML=nilai_
form;
}
</script>
Kenapa harus meletakkannya kode diatas setelah tag
<body>, dan bukan di <head>? Hal ini saya lakukan karena kita akan menggunakan method khusus di dalam javascript, yakni addEventListener.
addEventListener adalah method (penyebutan untuk function di dalam pemrograman objek) yang digunakan untuk 'menempelkan' event kepada tag HTML.
Jika biasanya kita menggunakan event JavaScript: onClick langsung pada HTML, seperti: <button onclick="tampilkan()">, maka kita bisa menggantinya dengan addEventListener ("click", tampilkan). Dengan menggunakan addEventListener, kode HTML bisa bebas dari JavaScript.
Akan tetapi mentod addEventListener harus ditulis setelah kode HTML selesai dikirim ke web browser. Oleh karena itu, kita harus menempatkannya setelah kode HTML.
Dalam kode Javascript diatas, saya menggunakan 2 buah method addEventListener, untuk masing- masing tombol. Untuk mencari tombol ini di HTML, saya menggunakan method JavaScript getElementById(). Dengan demikian, kode adalah sebagai berikut:
document.getElementById("tombol_p").
addEventListener("click", tampilkan_nilai_p);
Berarti: cari sebuah tag HTML yang ber-id="tombol_ p", lalu apabila di klik, jalankan fungsi tampilkan_ nilai_p.
Selanjutnya, saya membuat fungsi tampilkan_nilai_ p dibawahnya.
Pada dasarnya, fungsi tampilkan_nilai_p berguna untuk mengambil nilai dari tag <span> dengan id="nilai_andika" dan id="nilai_joko", kemudian menggabungkan keduanya, dan tampilkan hasilnya ke tag <span id="hasil">.
Kode program JavaScript:
var nilai_andika=document.getElementById("nilai_
andika").innerHTML;
Berarti: Ambil isi tag HTML dengan id="nilai_andika", kemudian simpan kedalam variabel nilai_andika. innerHTML adalah property objek JavaScript yang menampung 'isi' HTML. Karena di kode HTML saya membuat <span id="nilai_andika">80</ span>,maka document.getElementById("nilai_ andika").innerHTML akan menghasilkan nilai: 80.
Selanjutnya saya juga melakukan hal yang sama dengan nilai_joko, dan hasilnya ditampilkan kedalam tag<span id="hasil"></span> dengan kode program:
document.getElementById("hasil").innerHTML=nilai_
andika+" dan "+nilai_joko;
Untuk contoh kedua yang menggunakan form, saya juga menggunakan cara yang hampir sama, tetapi karena nilai dari tag <input> disimpan di dalam property value, maka cara mengaksesnya adalah dengan kode berikut:
var nilai_form=document.getElementById("input_
form").value;
Kemudian hasilnya saya tampilkan di dalam tag <span id="hasil"></span>
* 22 February 2015: Update untuk pertanyaan dari rekan kingzen, yakni bagaimana jika hasil form ditampilkan dalam halaman lain?
Menggunakan form dengan JavaScript membuka ide untuk hal-hal yang tidak bisa dilakukan dengan HTML saja, salah satunya saya akan mencoba menampilkan hasil form dalam halaman lain.
Salah satu keterbatasan untuk hal ini adalah kita tidak
bisa 'mengutak-atik' isi dari halaman lain dengan JavaScript. Sebagai contoh, saya menjalankan web browser dan membuka 2 tab. Pada tab pertama saya membuka situs duniailkom, sedangkan pada tag kedua saya membuka situs facebook. Dalam kasus ini, kode Javascript pada situs duniailkom tidak bisa 'menyentuh' isi situs facebook. Ini adalah salah satu fitur keamanan di dalam JavaScript yang dikenal dengan Same-origin policy.
Agar JavaScript bisa memanipulasi halaman lain, maka halaman tersebut harus berada dalam satu domain, atau dibuka dari halaman saat ini dengan menggunakan Window object. Pembahasan mengenai Window object javascript akan membutuhkan tutorial tersendiri, karena objek ini memiliki banyak method dan property yang bisa digunakan.
Dalam contoh kali ini saya hanya menggunakan method window.open untuk membuka halaman baru. Langsung saja masuk kedalam contoh program, berikut adalah kode yang digunakan:
<html>
<head>
<meta charset="UTF-8">
<title>Tutorial Belajar JavaScript</title>
</head>
<h3>Contoh 3: Mengambil nilai tag input,
tampilkan nilai pada jendela baru</h3>
<button id="tombol_jendela">Buat Jendela Baru</
button>
<br/>
<br/> <form onsubmit="return false">
<label>Rika Pratiwi: </label>
<input type="text" id="input_form" value="90"/>
<button id="tombol_form">
Tampilkan Nilai pada jendela baru
</button>
</form>
<script>
document.getElementById("tombol_jendela").
addEventListener("click", jendela_baru);
document.getElementById("tombol_form").
addEventListener("click", tampilkan_nilai_form);
function tampilkan_nilai_form(){
var nilai_form=document.getElementById("input_
form").value;
newWindow.document.getElementById("hasil")
.innerHTML=nilai_form;
}
function jendela_baru()
{newWindow = window.open("", "Jendela Baru",
"width=400, height=200");
newWindow.document.write("<h2>Hasil: <span
id='hasil'></span></h2>");
// newWindow akan menjadi global variabel,
// sehingga bisa diakses dari fungsi tampilkan_nilai_
form
}
</script>
</body>
</html>
Hasilnya:
Dalam kode diatas, tombol 'Buat Jendela Baru' digunakan untuk membuat jendela baru dengan method window.open(). Pada jendela baru tersebut saya juga menyisipkan sebuah tag <span> dengan id='hasil'. Referensi ke jendela baru ini disimpan ke dalam variabel newWindow. Variabel inilah yang menjadi 'jembatan' antara halaman lama dengan halaman baru.
Ketika tombol 'Tampilkan Nilai pada jendela baru' ditekan, maka kita bisa mengakses tag <span> ini dan menulis hasilnya menggunakan perintah:
newWindow.document.getElementById("hasil")
.innerHTML=nilai_form;
Berikut contoh kode jika anda ingin mencoba script diatas:
<html>
<head>
<meta charset="UTF-8">
<title>Tutorial Belajar JavaScript</title>
</head>
<h3>Contoh 3: Mengambil nilai tag input,
tampilkan nilai pada jendela baru</h3>
<button id="tombol_jendela">Buat Jendela Baru</
button> <br/>
<br/> <form onsubmit="return false">
<label>Rika Pratiwi: </label>
<input type="text" id="input_form" value="90"/>
<button id="tombol_form">
Tampilkan Nilai pada jendela baru
</button>
</form>
<script>
document.getElementById("tombol_jendela").
addEventListener("click", jendela_baru);
document.getElementById("tombol_form").
addEventListener("click", tampilkan_nilai_form);
function tampilkan_nilai_form(){
var nilai_form=document.getElementById("input_
form").value;
newWindow.document.getElementById("hasil")
.innerHTML=nilai_form;
}
function jendela_baru()
{ newWindow = window.open("", "Jendela Baru",
"width=400, height=200");
newWindow.document.write("<h2>Hasil: <span
id='hasil'></span></h2>");
// newWindow akan menjadi global variabel,
// sehingga bisa diakses dari fungsi tampilkan_nilai_
form
}
</script>
</body>
</html>
Author: Andre Duniailkom
Thanks for reading and see you..
Thanks to:
duniailkom
Good job min,keren artikelnya, ditunggu artikel berikutnya perkenalkan saya Dela periska kunjungi website kampus kami https://www.atmaluhur.ac.id/
ReplyDeleteGood job min makasi ertikelnya ditunggu artikel lainnya perkenalkan nama saya delapl periska kunjungi website kmpus kami https://www.atmaluhur.ac.id/
ReplyDeleteGood job min makasi ertikelnya ditunggu artikel lainnya perkenalkan nama saya delapl periska kunjungi website kmpus kami https://www.atmaluhur.ac.id/
ReplyDelete