Format Dinamis Halaman Web

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.

Properti	Penjelasan
color	Menentukan warna dari elemen. Alternatif nilainya: a.    format hexa (#XXXXXX), contoh: “#121212” b.    nama warna, contoh: “blue” c.    format desimal (rgb(r, g, b)), contoh: “rgb(100, 20, 200)”
backgroundColor	Menentukan warna latar belakang dari elemen. Alternatif nilainya sama seperti color diatas.
visibility	Menentukan status visual dari suatu elemen. Nilainya: “visible” / “hidden”
width	Menentukan lebar dari suatu elemen. Alternatif nilainya: d.    auto e.    inherit f.     persentase, contoh: “56%” g.    pixel, contoh: “100px”
height	Menentukan tinggi dari suatu elemen. Pemberian nilainya sama seperti properti width.

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

<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>

Gambar 1. 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.

Gambar 2. 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>

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.