Format dinamis dengan Javascript dan cara penerapan visualisasi interaksinya

Format Dinamis Dengan Javascript
Selain karena adanya interaksi aplikasi web juga dapat lebih menarik apabila dilengkap dengan kemampuan untuk visualisasi setiap interaksi yang terjadi. Penerapan visualisasi interaksi ini dapat dilakukan dengan menggunakan CSS. Selain dapat digunakan untuk memodifikasi elemen HTML, Javascript juga dapat digunakan untuk mengubah style dari suatu elemen HTML. Pengubahan style ini dilakukan dengan menerapkan metode

obyectHTML.style.properti = “style baru”;;

obyekHTML disini merupakan obyek yang dihasilkan dari pemanggilan fungsi getElementById(), getElementsByName() atau getElementsByTagName(). Sedangkan properti disini menunjukkan nama style CSS yang akan dimodifikasi dari obyek tersebut. Berikut ini beberapa daftar properti yang dapat digunakan.
 

Daftar yang lebih lengkap untuk properti style yang dapat dimodifikasi dapat  mengunjungi link berikut http://www.w3schools.com/jsref/dom_obj_style.asp. Contoh programnya diberikan sebagai berikut :

Pengubahan warna

Pengubahan warna
<p style="background-color: orange; color: white">contoh
halaman web yang menampilkan perubahan warna</p>
<script>
var par = document.getElementsByTagName("p")[0];
par.style.backgroundColor = "red";
</script>
 

Perubahan warna latar suatu paragraf melalui Javascript

Pada contoh diatas dapat dilihat bahwa paragraf yang sebelumnya memiliki warna latar oranye diganti menjadi merah melalui skrip javascript

Pengubahan ukuran teks area
<textarea id="info" style="width: 100px; height:
100px;">contoh halaman web yang menampilkan perubahan
ukuran</textarea>
<script>
var info = document.getElementById("info");
info.style.width = "200px";
</script>

Halaman web diatas ini apabila ditampilkan akan mengubah ukuran lebar dari obyek HTML dengan id info menjadi 200px. Perlu diketahui disini bahwa nilai 200px ditambahkan ke properti width dari style obyek info dengan menggunakan tanda kutip. Hasilnya seperti berikut ini
 

Hasil perubahan ukuran lebar dari obyek HTML melalui Javascript

Pengubahan penampakan suatu komponen
<button onclick="tampilkanInfo()">Tampilkan Info</button>
<button onclick="sembunyikanInfo()">Sembunyikan
Info</button>
<p id="info">contoh halaman web yang menampilkan perubahan
penampakan</p>
<script>
function tampilkanInfo(){
var info = document.getElementById("info");
info.style.visibility = "visible";
}
function sembunyikanInfo(){
var info = document.getElementById("info");
info.style.visibility = "hidden";
}
</script>

 

Perubahan penampakan obyek HTML melalui Javascript

Gambar dibawah ini merupakan gambar yang menunjukkan bahwa apabila tombol Sembunyikan Info ditekan akan menyebabkan informasi pada paragraf akan disembunyikan seperti ditunjukan pada gambar bagian kanan, demikian juga sebaliknya apabila tombol Tampilkan Info ditekan.