December, 2012 | Catatan buruh IT

Bagaimanakan cara membuat script seperti itu dengan javascript?

Membuat sebuah DIV yang akan siap termanipulasi.
Menangkap DIV sebagai DOM dengan getElementById
Melakukan pengubahan value dengan innerHTML
Membuat fungsi untuk dua kondisi. Diatas digunakan kondisi UBAH dan BALIK
Membuat ELEMEN yang onclick adalah memanggil fungsi tadi

<div id="coba">Ini adalah div coba</div>
<script>
function ubah(){
x=document.getElementById('coba');
x.innerHTML='Sekarang telah berubah';
}
function balik(){
x=document.getElementById('coba');
x.innerHTML='Ini adalah div coba';
}

</script>

<input type="submit" name="a" value="Ubah" onclick="ubah()"><input type="submit" name="b" value="Kembalikan" onclick="balik()">

<div id="coba">Ini adalah div coba</div>

function ubah(){

x=document.getElementById('coba');

x.innerHTML='Sekarang telah berubah';

}

function balik(){

x=document.getElementById('coba');

x.innerHTML='Ini adalah div coba';

}

</script>

Untuk memanipulasi browser dalam menampilkan data, tentu sangat lebih baik digunakan bahasa CLIENT SIDE, yang datanya telah didapat dari server side (database, bahasa pemrograman server dll). Dengan bahasa Client Side, akan sangat membantu kinerja server, dan selanjutnya melimpahkan beberapa beban ke client. Disamping itu proses animasi yang jalan di tingkat client akan sangat maksimal.

Seperti kita ketahui , sebuah halaman HTML akan terdiri dari banyak elemen, seperti div, img, span, p, h dan lain sebagainya. Elemen tersebut bisa juga memiliki atribut berupa style, id, class, name dan lain sebagainya. Untuk keperluan pengubahan-pengubahan elemen di HTML di tingkat client, dapat digunakan manipulasi dengan DOM. Document Object Model. Apa itu? Yaitu cara javascript mengambil value element sebagai model, yang akan diberi tindakan selanjutnya.
DOM itu ternyata mudah, hanya perlu mengenal kata : getElementById().

misal akan kita buat variabel x adalah berisi obyek model dari div “coba”. Maka kode HTML akan menjadi seperti berikut

<div id="coba">Ini adalah div coba</div>
<script>
x=document.getElementById('coba');
</script>

<div id="coba">Ini adalah div coba</div>

x=document.getElementById('coba');

</script>

Misal akan kita lakukan pengubahan isi div coba, maka akan seperti berikut:

<div id="coba" onclick="ubah()">Ini adalah div coba</div>
<script>
function ubah(){
x=document.getElementById('coba');
x.innerHTML='Sekarang telah berubah';
}
</script>

<div id="coba" onclick="ubah()">Ini adalah div coba</div>

function ubah(){

x=document.getElementById('coba');

x.innerHTML='Sekarang telah berubah';

}

</script>

Selamat mencoba . Silakan CLICK

Catatan buruh IT

Month: December 2012

[Contoh]Berkreasi Sederhana dengan DOM dan Button

Javascript DOM dalam HTML

Artikel terkait

Artikel terkait