Iponk Blog: September 2013

Rabu, 04 September 2013

Tutorial Dasar jQuery Part II (Event-Event Dasar JQuery)

Pada tutorial kali ini kita bahas event event yang ada pada jQuery. Kalo yang belum baca part 1 silahkan dibaca terlebih dahulu disini. Sebenarnya ada banyak banget event dalam JQuery, tapi di tutorial ini hanya ingin memperkenalkan event-event yang paling umum dan paling banyak digunakan untuk memicu efek animasi saja. Sedangkan untuk event-event yang lainnya suatu saat akan kita bahas (kalo tidak lupa hehe) secara terpisah.

Secara umum, penulisan event dalam JQuery dapat dituliskan seperti ini:

$(pemicu).nama_event(function() {
//Peristiwa...
});

Ket:
    Pemicu: adalah elemen yang akan menimbulkan aksi apabila dikenai event
    .nama_event: adalah event (perintah) yang akan diberikan pada elemen pemicu
    Peristiwa: adalah peristiwa yang akan terjadi apabila pemicu telah mendapatkan perintah.

Sebagai contoh, kita buat sebuah skenario: “Ada sebuah tombol yang mengandung atribut berupa class='subjek' dan sebuah area yang mengandung atribut id='area'. Apabila tombol tersebut diklik, maka area akan memudar perlahan kemudian menghilang (fadeOut)”

Baca selengkapnya »

Tutorial Dasar jQuery Part I

Dalam tutoral kali ini kita akan membahas mengenai jQuery. jQuery merupakan framework java script yang terkenal karena memang mudah dalam menggunakannya dan memiliki efek efek yang lengkap.
jQuery biasa digunakan untuk untuk membuat komponen web yang interaktif. jQuery dapat didownload di website resminya http://jquery.com/download/.

download jQuery

Untuk menggunakan jQuery yang pertama kali dilakukan adalah menginisialisasi (hayah ribet banget bahasanya) intinya menyambungkan halaman web kita dengan file jQuery yang sudah didownload tadi, asumsinya ada di dalam satu folder dengan file HTML.
Script ini diletakkan di dalam <head> ya

<script type="text/javascript" src="jquery-1.10.2.min.js"></script>

setelah itu maka jQuery sudah dapat digunakan

<script type="text/javascript">
/*----- ini tempat untuk meletakan script jQuerynya -----*/
</script>

Baca selengkapnya »