TUTORIAL JQUERY Langkah Tepat menjadi Web Designer Handal, menguasai JQuery JavaScript Library, jalan membuat halaman website lebih atraktif

Transkripsi

1 TUTORIAL JQUERY Langkah Tepat menjadi Web Designer Handal, menguasai JQuery JavaScript Library, jalan membuat halaman website lebih atraktif Bagian 5. Menggunakan JQuery Event 1

2 Bagian 5. Menggunakan JQuery Event Apa sih yang di maksud dengan event atau event handling pada jquery? Saya akan berikan penggambaran. Ketika user datang mengunjungi sebuah website, halaman website. Banyak aksi dan interaksi yang dilakukan oleh user tersebut. Dan halaman tersebut memberikan respon terkait aksi yang dilakukan oleh user tersebut. Sebagai contohnya misalkan : 1. Ketika kursor mouse user berpindah dari satu elemen html ke elemen html lain di halaman tersebut 2. Ketika user mengklik radio button pada halaman tersebut 3. Atau ketika user mengklik suatu elemen pada halaman tersebut. Keadaan-keadaan seperti inilah yang di ambil alih oleh Jquery event. Event yang didukung oleh Jquery adalah sebagai berikut. Biasanya dikenal dengan nama DOM (Document Object Model) event. Daftar Event yang didukung oleh JQuery : Event Mouse Event Keyboard Events Form Document Events click keypress submit load dblclick keydown change resize mouseenter keyup focus scroll mouseleave blur unload 2

3 Menggunakan JQuery Click Sebagai contohnya kita persiapkan terlebih dahulu dokumen HTML nya, lengkap dengan penggunaan library javascript dan area jquery yang kosong tinggal digunakan $(function( ){ <h1 id="title-article">latihan JQuery Bagian 5</h1> <em class="author">oleh : Loka Dwiartara</em> <p>saat ini kita akan memulai mempelajari lebih dalam JQuery Library</p> Untuk contoh kali ini misalkan ketika paragraph <p> nya di klik maka dia akan disembunyikan. Koding lengkapnya adalah sebagai berikut : $("p").click(function( ){ $(this).hide( ); 3

4 <h1 id="title-article">latihan JQuery Bagian 5</h1> <em class="author">oleh : Loka Dwiartara</em> <p>saat ini kita akan memulai mempelajari lebih dalam JQuery Library</p> Kode tersebut akan menghasilkan Ketika paragraph berisi Saat ini kita mulai... di klik maka secara otomatis akan menghilang atau di sembunyikan. Bagaimana bisa? Kita lihat barisan kode berikut : $("p").click(function( ){ $(this).hide( ); Ketika tag p di klik maka $(this) itu mengacu kepada dirinya sendiri selama $(this) itu berada di dalam naungan $("p").click(function(){ Menggunakan JQuery DoubleClick Jika sebelumnya kita telah menggunakan JQuery Event yang berjenis Click, kali ini kita akan menggunakan JQuery Double Click yang cara penggunaannya itu sama dengan click, tapi keadaan di browser berbeda. Misalkan jika click terjadi pada p, maka dirinya langsung menghilang. Untuk Double Click jika terjadi double click (klik dua kali) maka si tag p akan menghilang juga. Contoh lengkapnya seperti ini. 4

5 $("p").dblclick(function(){ $(this).hide(); <h1 id="title-article">latihan JQuery Bagian 5</h1> <em class="author">oleh : Loka Dwiartara</em> <p>saat ini kita akan memulai mempelajari lebih dalam JQuery Library</p> Menggunakan JQuery Hover Jika sebelumnya elemen p itu di kenai effect hide (disembunyikan) setelah elemen tersebut di klik maupun double klik, di sini kita akan belajar elemen p (paragraph) itu di hide (disembunyikan) ketika mouse itu bergerak di atas atau menyorot paragraph. Berikut kode lengkapnya : $("p").hover(function(){ $(this).hide(); 5

6 <h1 id="title-article">latihan JQuery Bagian 5</h1> <em class="author">oleh : Loka Dwiartara</em> <p>saat ini kita akan memulai mempelajari lebih dalam JQuery Library</p> Menggunakan JQuery Focus Biasanya jquery focus itu digunakan untuk memberikan event handling kepada form inputan. Misalkan ketika input text di klik maka apa yang akan terjadi. Sebagai contohnya : $("input").focus(function(){ $(this).css("background-color","lightblue"); <h1 id="title-article">form Login</h1> <p>silahkan login disini...</p> <label>username : </label> <input type="text" name="username" /><br /> <label>password : </label> <input type="password" name="password" /><br /><br /> <input type="submit" name="login" value="login!" /> 6

7 Menggunakan JQuery Blur Jika JQuery focus itu terjadi ketika mouse di arahkan dan di klikan ke form inputan, dan menghasilkan status focus. Maka blur itu terjadi jika mouse tidak focus lagi kepada inputan. Melainkan diluar area itu, misalkan mengklik selain dari inputan. Misalkan mengklik heading H1, atau mengklik bagian halaman yang putih kosong. $("input").focus(function(){ $(this).css("background-color","lightblue"); $("input").blur(function(){ $(this).css("background","none"); <h1 id="title-article">form Login</h1> <p>silahkan login disini...</p> <label>username : </label> <input type="text" name="username" /><br /> <label>password : </label> <input type="password" name="password" /><br /><br /> <input type="submit" name="login" value="login!" /> Buka script tersebut, ada di file latihan bagian5. Kemudian klik dibagian inputan text username, langsung berubah warnanya menjadi biru muda. Kemudian klik lagi di bagian kosong dari background halaman, atau klik heading yang ada tulisan Form Login, maka inputan text secara otomatis berubah menjadi putih. Anda bisa bereksplorasi untuk event yang lainnya 7

8 Event Mouse Event Keyboard Events Form Document Events click keypress submit load dblclick keydown change resize mouseenter keyup focus scroll mouseleave blur unload 8