DAFTAR ISI
Definisi JQuery
Query adalah sebuah library JavaScript. Dalam dunia pemrograman, library adalah kumpulan dari berbagai fungsi 'siap pakai' untuk memudahkan pembuatan sebuah aplikasi.
Dengan demikian, jQuery adalah kumpulan fungsi-fungsi JavaScript yang memudahkan penulisan kode JavaScript. Query dikembangkan pertama kali oleh John Resig di tahun 2006.
Sejak saat itu, jQuery berkembang menjadi proyek opensource dan menjadi libary JavaScript paling populer di dunia. Situs resmi jQuery beralamat di jquery.com.
Fitur lain dari jQuery (dan mungkin menjadi alasan paling penting), jQuery menyediakan berbagai efek animasi menarik. Beberapa diantaranya sangat mudah digunakan dan hanya membutuhkan 1 atau 2 baris kode program.
Khusus untuk membuat efek animasi ini, jQuery juga memiliki jQuery UI yang fokus ke animasi dan interaksi user. jQuery juga memiliki berbagai plugin atau kode tambahan untuk fungsi-fungsi lanjutan, seperti membuat efek slideshow, image carousel, hingga jQuery mobile. Efek-efek seperti ini dibuat berdasarkan kode dasar jQuery.
Menghubungkan File JQuery dengan HTML
Pada dasarnya, jQuery hanyalah sebuah file javascript external. Agar bisa menggunakan jQuery, kita harus download file jQuery, kemudian menghubungkannya menggunakan tag <script>.
Terdapat 2 cara menginput file jQuery: mendownload dan mengakses jQuery secara lokal, atau menggunakan CDN (Content Delivery Network). Untuk menghubungkan file jQuery dengan HTML, kita cukup menambahkan tag <script> dengan alamat file jquery-2.1.4.js, seperti berikut ini:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Be1ajar jQuery Duniailkom</title> <script> src="jquery-2.1.4.js"</script> </head> <body> </body> </html>
Kode HTML diatas harus ditempatkan di dalam 1 folder dengan file jquery2.1.4.js. Apabila anda sudah mempelajari HTML dan CSS, tentu tidak asing dengan maksud penempatan file ini.
Cara menginput File JQuery menggunakan CDN
Cara lain untuk bisa menggunakan jQuery adalah mengakses file jQuery yang ditempatkan di CDN (Content Delivery Network). Secara sederhana, CDN adalah sejenis harddisk global yang bisa diakses oleh siapa saja. Terdapat banyak pilihan CDN, kali ini saya akan menggunakan Google CDN, dengan demikian kode HTMLnya menjadi seperti berikut:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Be1ajar jQuery Duniailkom</title> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script> </head> <body> </body> </html>
Dengan menggunakan CDN, kita tidak perlu repot-repot mendownload file jQuery. Tapi agar bisa berjalan, harus selalu online (terhubung ke internet).
Menjalankan kode JQuery (event ready)
Seperti yang sudah kita bahas, jQuery sebenarnya adalah JavaScript. Dengan demikian, kode yang ditulis pun adalah kode JavaScript. jQuery hanya 'memudahkan' penulisan JavaScript dengan berbagai fungsi-fungsi bawaan.
Untuk menginput kode JavaScript dengan 'rasa' jQuery, cara paling umum adalah menempatkannya setelah tag <script> yang digunakan untuk memanggil file jQuery, seperti contoh berikut:
<!DOCTYPE html> <html> <head> <title>Belajar jQueri Duniailkom</title> <script src="query-2.1.4.js"></script> <script> $(document).ready(function() { $("#tombol").click (function(){ $(this).after ( '<p>Sedang Belajar jQuery di Dunialkom</p>'); }); }); </script> </head> <body> <h1>BeIajar jQuery di Duniailkom</h1> <button id="tombol">Click Me !</button> </body> </html>
Agar bisa berjalan, simpanlah kode program diatas di folder yang sama dengan filejquery-2.l.4.js. Sebagai contoh, saya akan menyimpannya ke dalam file semangat.html di folder belajar_jquery, seperti berikut ini:
Aturan Dasar Penulisan Kode Jquery
a. JQuery Object ($)
Sepanjang penggunaan jQuery, hampir selalu didahului tanda $. Tanda dollar '$' (dollar sign) adalah sebuah shortcut untuk mengakses jQuery Object. Di dalamjQuery Object inilah seluruh fungsi-fungsi jQuery berada. Sebagai contoh, untuk mencari element HTML yang memiliki atribut id="tombol", kita bisa menulis:
$("#tombol")
Jika karena sesuatu hal kita tidak bisa menggunakan tanda $ (biasanya karena bentrok dengan library lain), bisa menggunakan jQuery(), seperti berikut:
jQuery("#tombol")
b. JQuery Action / JQuery Event
Untuk bisa melakukan 'sesuatu' terhadap element HTML, kita tinggal menyambung penulisan jQuery Object dengan jQuery Action, atau dikenal juga dengan jQuery Event. Format dasarnya adalah sebagai berikut:
$(selector).action()
Selector digunakan untuk mencari element mana dari HTML yang akan dimanipulasi. Bisa berupa sebuah paragraf <p>, sebuah gambar <img>, atau sesuatu yang lebih kompleks, seperti element <tr> pertama dari tabel kedua.
Kita akan membahas jenis-jenis selector jQuery dalam tutorial selanjutnya. Action adalah sesuatu yang bisa kita lakukan dengan element HTML tersebut, apakah menyembunyikannya, menampilkannya, mengubah warna, menambahkan element baru, dll.
Action mirip seperti Event dalam JavaScript, tetapi dengan penambahan berbagai fitur lain. Di dalam jQuery, sebuah action bisa disambung dengan action lain, atau dikenal dengan isitilah chaining.
Berikut contoh penulisan jQuery Object, selector dan action:
<!DOCTYPE html> <html> <head> <title>Belajar jQueri Duniailkom</title> <script src="jquery-2.1.4.js"></script> <script> $(document).ready (function() { $("#tombol_hide").click (function(){ $("h1").hide(); }); $("#tombol_show").click (function(){ $("h1").show(); }); $("#tombol_small").click (function(){ $("h1").css("font-size","20px"); }); $("#tombol_red").click (function(){ $("h1").css("color","red"); }); }); </script> </head> <body> <h1>BeIajar jQuery di Duniailkom</h1> <button id="tombol_hide">Sembunyikan</button> <button id="tombol_show">Tampilkan</button> <button id="tombol_small">Perkecil</button> <button id="tombol_hide">Merahkan</button> </body> </html>
Disini saya hanya memperlihatkan bagaimana sebuah kode jQuery ditulis, terutama bagian seperti $("h1").hide(), atau $("h1").css("fontsize","20px"). Ini semua adalah cara penulisan gabungan dari jQuery Object, jQuery Selector, dan jQuery Action.
Pengertian JQuery Selector
jQuery memudahkan proses pencarian element HTML dengan menyediakanjQuery Selector. jQuery Selector adalah sebuah cara yang disediakan jQuery untuk mencari element HTML. Tidak hanya dengan atribut id saja, kita juga bisa menggunakan class, atribut lain, dan kombinasi diantaranya.
Dengan jQuery, untuk mencari sebuah element HTML yang memiliki id="tombol", penulisannya jauh lebih singkat:
var x = $("#tombol");
Karena sama seperti selector CSS, jQuery selector mendukung hampir semua penulisan selector dari CSS, berikut contohnya:
- Mencari seluruh element dengan tag tertentu. Misalkan kita ingin mencari seluruh tag <p>, penulisan jQuery Selectornya adalah: $("p").
- Mencan element dengan id tertentu. Misalkan ingin mencari sebuah tag HTML yang memiliki id="belajar", maka kita bisa menulis: $("# belajar").
- Mencari element dengan class tertentu. Misalkan kita ingin mencari seluruh tag HTML yang menggunakan atribut class="warna", maka bisa ditulis dengan: $(".warna");
<!DOCTYPE html> <html> <head> <title>Belajar jQueri Duniailkom</title> <script src="jquery-2.1.4.js"></script> <script> $(document).ready(function() { $("#tombol").click (function() { $("p").css( "color", "red" ); $("#belajar").css( "color" , "green" ); $(".warna").css( "color", "blue" ); $("#test.saja").css( "color", "yellow" ); $("div p.warna").css( "color", "pink" ); }); }); </script> </head> <body> <p> Sebuah paragraf tanpa atribut apapun </p> <p id="belajar"> Sebuah paragraf dengan id = "belajar" </p> <p class="warna"> Sebuah paragraf dengan class = "warna" </p> <p id="test" class="warna"> Sebuah paragraf dengan id="test" class="saja" </p> <div> <p class="warna"> Sebuah paragraf tanpa atribut apapun </p> </div> <button id="tombol">Action</button> </body> </html>
Pada contoh kode program diatas, terdapat 6 penulisan jQuery Selector. Dapatkah anda menemukannya? Ke enam selector tersebut adalah:
- $( "#tombol" )
- $("#belajar")
- $(".warna")
- $("#test.saja")
- $("div p.warna")
Selector pertama, $("#tombol") saya gunakan untuk membuat event click. Maksudnya, ketika sebuah tag HTML yang memiliki id="tombol" di klik, jalankan perintah yang dibuat. Di dalam kode diatas, tag HTML tersebut adalah sebuah tag <button id="tombol">, Setelah tag <button id="tombol"> di-klik, saya membuat 5 baris perintah yang masing-masingnya digunakan untuk mengubah warna paragraf:
$("p").css( "color", "red" ); $("#belajar").css ( "color" , "green" ); $(".warna").css ( "color", "blue" ); $("#test.saja").css ( "color" , "yellow" ); $("div p.warna").css ( "color" , "pink" );
Sebagai contoh, kode $("#belajar").css( "color", "green" ) artinya: temukan sebuah tag HTML dengan id="belajar", kemudian ubah warnanya (color) menjadi hijau (green). Sekali lagi, disini kita hanya fokus ke cara penulisan selector. Event css() akan kita pelajari dalam tutorial terpisah.
Penggunaan JQuery Event
Di dalam JavaScript, Event adalah suatu hal yang bisa dilakukan user ke sebuah element HTML, misalnya di click, double click, mouseover (cursor mouse berada diatas element), mouseout(cursor mouse sudah keluar dari atas element), dll. Sebagai alternatif, jQuery menyediakan jQuery Event dengan penulisan yang lebih praktis, berikut contohnya:
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>Tutoria1 Belajar JavaScript</title> </head> <body> <h3>Contoh 1: Mengambil nilai tag span</h3> <p> Nama : Andika Siswoyo, Nilai: <span id "nilai_andika">80</span><br> Nama : Joko Susilo, Nilai: <span id "nilai joko">92</span></p> <button id="tombol_p">Tampilkan Nilai</button> <br> <br> <h3>Contoh 2: Mengambil nilai tag input</h3> <form onsubmit="return false"> <label>Rika Pratiwi: </label> <input type="text" id="input_form" value="90" /> <button id="tombol_form">TampiIkan Nilai</button> </form> <br> <br> <h2>HasiI: <span id="hasil"></span></h2> </body> <script> document.getElementById("tombol_p").addEventListener("click",tampilkan_nilai_p); document.getElementById("tombol_form").addEventListener("click",tampilkan_nilai_form); function tampilkan_nilai_p(){ var nilai_andika=document.getElementById("nilai_andika").innerHTML; var nilai_joko=document.getElementById("nilai_joko").innerHTML; document.getElementById("hasil").innerHTML=nilai_andika+ " dan " + nilai_joko; } function tampilkan_nilai_form() { var nilai_form=document.getElementById("input_form").value; document.getElementById("hasil").innerHTML=nilai_form; } </script> </body> </html> <!DOCTYPE html> <html> <head> <title>Belajar jQueri Duniailkom</title> <script src="jquery-2.1.4.js"></script> <style> #paragraf{ width: 600px; height: 80px; background-color: pink; line-height: 80px; text-align : center; font-size: 30px; } </style> <script> $( document ).ready (function() { $( "#paragraf" ).click (function() { $( "#paragraf" ).css ( "color" , "green "); }); $( "#paragraf" ).mouseover(function() { $( "#paragraf" ).css ( "background-color","silver" ); }); $( "#paragraf" ).mouseout (function() { $ ( "#paragraf" ).css ( "background-color" ,"pink" ); }); $( "#paragraf" ).dblclick (function() { $( "#paragraf" ).css ( "border", "solid 2px black" ); }); }); </script> </head> <body> </p id="paragraf"> Belajar jQuery Event Duniailkom </p> </body> </html>
Dalam contoh diatas, saya membuat 4 jQuery event, yakni click, dblclick, mouseover, dan mouseleave. Pada setiap event ini saya mengubah property CSS dari paragraf.
Latihan
1. Mengambil nilai HTML dengan Method text() JQuery
Metode pertama untuk mengambil nilai sebuah elemen HTML dengan jQuery adalah menggunakan method text(). Caranya cukup menambahkan method/fungsi text() ke jQuery Selector.
<!DOCTYPE html> <html> <head> <title>Belajar jQueri Duniailkom</title> <script src="jquery-2.1.4.js"></script> <script> $(document).ready (function () { $("#tombol").click (function() { var nilai = $("#paragraf").text(); alert (nilai); }) }); </script> </head> <body> <p id="paragraf"> Sedang belajar <em>jQuery</em> di <b>Duniailkom...</b> </p> <button id="tombol">Ambil Nilai</button> </body> </html>
Untuk mengambil nilai teks yang ada didalam tag <p id="paragraf'>, bisa menggunakan perintah $("#paragraf").text(). Selanjutnya nilai ini disimpan ke dalam variabel nilai, lalu ditampilkan dengan fungsi alert(nilai).
2. Mengambil nilai HTML dengan method html() JQuery
Cara berikutnya untuk mengamnil nilai HTML dengan jQuery adalah menggunakan method html(). Penggunaannya sama persis dengan method text(). Bedanya, hasil dari method html()akan tetap mempertahankan tag HTML yang ada di dalam element HTML tersebut.
<!DOCTYPE html> <html> <head> <title>Belajar jQueri Duniailkom</title> <script src="jquery-2.1.4.js"></script> <script> $(document).ready (function () { $("#tombol").click (function() { var nilai = $("#paragraf").html(); alert (nilai); }) }); </script> </head> <body> <p id="paragraf"> Sedang belajar <em>jQuery</em> di <b>Duniailkom...</b> </p> <button id="tombol">Ambil Nilai</button> </body> </html>
3. Mengambil nilai form HTML dengan method val() JQuery
Baik method text() maupun html() sudah mencukupi untuk mengambil nilai yang ada disetiap element HTML. Tapi khusus untuk form, jQuery menyediakan method val(). Langsung saja kita lihat contoh penggunaannya:
<!DOCTYPE html> <html> <head> <title>Belajar jQueri Duniailkom</title> <script src="jquery-2.1.4.js"></script> <script> $(document).ready (function () { $("#tombol").click (function() { var nilai = $("#nama").val(); alert (nilai); }) }); </script> </head> <body> Nama: <input type="text" id="nama" value="Hallow web..."></input> <button id="tombol">Ambil Nilai</button> </body> </html>
4. Mengambil nilai form komponen select
<!DOCTYPE html> <html> <head> <title>Belajar jQueri Duniailkom</title> <script src="jquery-2.1.4.js"></script> <script> $(document).ready (function () { $("#tombol").click (function() { var nilai = $("#nama").val(); alert (nilai); }) }); </script> </head> <body> Pilih kota: <select id="kota" name="kota"> <option value="jakarta">Jakarta</option> <option value="bandung">Bandung</option> <option value="bogor">Bogor</option> </select> <button id="tombol">Ambil Nilai</button> </body> </html>
5. Mengambil nilai form dengan komponen checkbox
Untuk checkbox perlu penyeleksian lebih lanjut, karena jika menggunakan method val() secara langsung, nilai form akan dikembalikan apapun kondisi checkbox (baik sudah dipilih maupun belum). Untuk mengatasi hal ini, kita bisa menggunakan selector khusus jQuery, yakni :checked.
<!DOCTYPE html> <html> <head> <title>Belajar jQueri Duniailkom</title> <script src="jquery-2.1.4.js"></script> <script> $(document).ready (function () { $("#tombol").click (function() { var nilai1 = $("#keren:checked").val(); var nilai2 = $("#ganteng:checked").val(); var nilai3 = $("#coo1:checked").val(); alert (nilai1+''+nilai2+''+nilai3);n ; }) }); </script> </head> <body> Saya itu: <input type="checkbox" id="keren" value="Saya Keren"> Keren <input type="checkbox" id="ganteng" value="Saya Ganteng"> Ganteng <input type="checkbox" id="cool" value="Saya Cool"> Cool <br><br> <button id="tombol">Ambil Nilai</button> </body> </html>
variabel nilail, nilai2 dan nilai3 akan berisi value dari checkbox hanya ketika kondisi checkbox tersebut dalam keadaan ter-checklist (perhatikan cara penulisan jQuery selector, #keren:checked).
Tugas
- Buatlah kalkulator sederhana di halaman web dengan menggunakan JQuery