Kali ini kita akan membuat sebuah HTML yang berisi JQuery. Pengertian JQuery adalah sebuah framework berbasiskan Javascript. JQuery sama dengan Javascript
Library yaitu kumpulan kode atau fungsi Javascript siap pakai,
sehingga mempermudah dan mempercepat kita dalam membuat kode Javascript.Hal
yang menarik dari JQuery adalah penekanan interaksi antara Javascript dan
HTML. JQuery pertama kali dirilis pada tahun 2006 oleh John Resig. JQuery memiliki slogan “Write
less, do more” yang artinya kesederhanaan dalam penulisan code, tapi dengan
hasil yang lebih banyak.
Logika dari program di atas adalah
kita masuk ke dalah html. Kita menggunakan jquery yang embeded artinya adalah
tertempel pada html tersebut. Tags <html> dan <head> seperti
penjelasan sebelumnya. Lalu, kita masuk ke dalam script javascript nya. Dengan codingan
<script
type="text/javascript"
src="jquery.js"></script>.
Di dalam tags script adalah untuk membuat animasi untuk bias menghilang
setengah menghilang dan ada.
Lalu, kita masuk ke script $("document").ready(function().
Tand $ adalah sebagai tanda kita akan memasuki script dari JQuery. Ini berarti
kita akan membuat sebuah function untuk document dan ditulis dalam bahasa
jQuery.
$(".fadeout").click(function(){
$("#kotak").fadeOut("slow") Kita masuk le dalam function
fadeout. Yang artinya jika kita klik fadeout maka kotak akan muncul dengan
lambat.
});$(".fadein").click(function(){
$("#kotak").fadeIn("slow") Lalu, jika kita klik fadein maka
kotak akan menghilang.});$(".fadeto3").click(function(){
$("#kotak").fadeTo("slow",0.3);
Dan terakhir jika kita klik fadeto3 maka kotak akan tampil setengah atau
seperti berbayang.
Setelah itu, kita keluar dari scrip
jQuery, dan selanjutnya kita masuk kedalam script css
<style
type="text/css">
#kotak{
width:250px;
height:180px;
background:yellow;
border:2px solid black;}
</style>
Perintah di atas adalah perintah
untuk membuat function kotak yang akan dipanggil dalam file html ataupun jQuery
dengan #kotak. Dengan lebar 250 px dan panjang 180 px dan kotak berwarna kuning
serta garis tepi berwarna hitam solid.
Dan yang terakhir adalah untuk file
html nya yaitu program utama dari web ini. Perintah yang kita masukkan adalah
sebagai berikut
<title>Efek
Fade In, Fade Out, dan Fade To</title>
</head>
<body>
<div
id="kotak"></div><br>
<button class="fadeout">Fade
Out</button>
<button class="fadein">Fade
In</button>
<button class="fadeto3">Fade
To 0.3</button>
</body>
</html>
Judul yang kita berikan adalah Efek
Fade In, Fade Out, dan Fade To. Lalu, pada body kita akan membuat div kotak
yang akan di panggil di file css dan jQuery nya. Disini, kita akan membuat 3
button yaitu Fade Out yang jika di klick maka akan memanggil fungsi fadeout
pada script jQuery di atas. Jika kita klik button Fade In, maka akan memanggil
fungsi fadein di jQuery begitupun untuk fade To 0.3 akan memanggil fungsi
fadeto3 dengan aksi di dalamnya.
Tidak ada komentar:
Posting Komentar