Basic jquery Menyentuh jquery sekarang juga

Transkripsi

1 Basic jquery Menyentuh jquery sekarang juga JQuery merupakan suatu framework (library) Javascript yang menekankan bagaimana interaksi antara Javascript dan HTML yanwar 11/8/2013

2 Apa sih jquery? 2 Kenapa harus memilih jquery? 2 Apakah jquery akan bekerja di semua browser? 2 Install jquery 3 menambahkan jquery untuk halaman web anda 3 Mengunduh jquery 3 Alternative lain selain mengunduh library jquey 4 Syntax jquery 6 jquery Selectors 8 Selektor element 8 Selector #id 9 Selector.class 10 Contoh penggunaan selector lain dalam jquery 12 Event jquery 14 Syntax jquery untuk method event 14 metode umum yang digunakan dalam event di jquery 14 click () 14 dblclick() 16 mouseenter() 17 mouseleave() 17 mousedown() 18 mouseup() 19 hover() 19 focus() 20 blur() 21 1

3 Apa sih jquery? jquery merupakan aplikasi ringan, "menulis sedikit, berbuat lebih banyak", ini adalah kumpulan library dari javascript. Tujuan dari jquery adalah untuk membuatnya lebih mudah dari penulisan JavaScript pada website Anda. jquery seperti halnya statement lain, jquery membutuhkan banyak baris kode JavaScript untuk membungkus mereka menjadi metode yang dapat Anda panggil dengan satu baris kode. jquery juga menyederhanakan banyak hal-hal rumit dari JavaScript, seperti panggilan AJAX dan manipulasi DOM. library jquery berisi beberapa fitur berikut: HTML / manipulasi DOM manipulasi CSS Metode event untuk HTML Efek dan animasi AJAX Utility Kenapa harus memilih jquery? Ada banyak kerangka JavaScript lain di luar sana, tapi jquery tampaknya menjadi yang paling populer, dan juga yang paling diperpanjang. Banyak perusahaan terbesar menggunakan jquery, seperti: Google Microsoft IBM Netflix Apakah jquery akan bekerja di semua browser? Tim jquery tahu semua tentang isu-isu lintas-browser, dan mereka telah menulis pengetahuan ini ke perpustakaan jquery. jquery akan berjalan persis sama di semua browser utama, termasuk Internet Explorer 6! 2

4 Install jquery menambahkan jquery untuk halaman web anda ada beberapa cara untuk menggunakan jquery si situs web anda. Anda dapat : Menngunduh library jquery dari situs resminya (jquery.com). Menyertakan jquery dari CDN, sepert google. Mengunduh jquery tersedia Salinan library file yang terkompresi dan tidak terkompresi. File tidak dikompresi paling baik digunakan selama pengembangan atau debugging, file terkompresi menghemat bandwidth dan meningkatkan kinerja produksi. Dimulai dari jquery 1.9, pihak developer juga membuat file sourcemap yang dapat digunakan untuk debuging file yang dikompresi dalam browser sourcemap-aware seperti Google Chrome. File map tidak diperlukan bagi pengguna untuk menjalankan jquery, itu hanya meningkatkan pengalaman debugger pengembang. 1. Versi produksi - untuk website Anda karena telah dimodifikasi dan dikompresi 2. Versi pengembangan - untuk pengujian dan pengembangan (kode yang dapat dibaca, file tidak terkompresi). Kedua versi yang disebutkan di atas dapat didownload dari jquery.com. sebagai catatan Apakah Anda bertanya-tanya mengapa kita tidak menambahkan atribut type = "text/javascript" ke dalam tag <script>? Hal ini tidak diperlukan di HTML5. JavaScript adalah bahasa scripting default HTML5 dan di semua browser modern! library JQuery adalah sebuah file JavaScript tunggal, dan Anda perlu memanggil library tersebut dengan ke dalam file HTML anda dengan menggunakan tag <script>. Contoh terlihat di figure 1. Figure 1 Unduh file library jquery di situs ini : anda dapat mengunduh file library yang telah disediakan pengembang dalam berbagai versi. Tetapi saya menggunakan library jquery versi dari CDN google. Lihat figure 2. Figure 2 Tips : Tempatkan file download di direktori yang sama seperti halaman di mana Anda ingin menggunakannya. 3

5 Untuk penjelasan directory saya menyertakan gambar direktori untuk menyimpan library javascript secara terpisah namun masih satu directory dengan folder utamanya, lihat figure 3 ; Figure 3 Pada nantinya saya akan menyimpan file HTML saya di luar dari folder js, saya menyimpan file HTML saya di directory (folder) jqueryku, sehingga pemanggilan library bisa dilakukan dengan mengetikan kode berikut ini, lihat figure 4 : Figure 4 Alternative lain selain mengunduh library jquey Anda bisa menggunakan CDN dari google untuk menambahkan library jquery ke dalam web site anda. Ini bisa dilakukan dengan mengubah source di dalam tag script, lihat figure 5: Figure 5 Alternative lain anda bisa menggunakan CDN dari Microsoft, lihat figure 6 : Figure 6 4

6 BAGAIMANA MENDAPATKAN VERSI TERBARU YANG TERSEDIA DI CDN GOOGLE : lihat kembali di figure 5 - versi jquery ditentukan dalam URL (1.10.2). Jika Anda ingin menggunakan versi terbaru dari jquery, Anda dapat mengubah nomor dari akhir versinya (misalnya 1,10,2 menjadi 1,10,3, tetapi versi selanjutnya belum ada maka saya menggunakan permisalan menjadi ). Jika semua sudah anda lakukan, sekarang waktunya bermain-main dengan framework javascript. jquery akan membuat anda semakin bersemangat dalam mengetik, mengubah dan menemukan cara baru untuk keindahan dan fungsionalitas web site anda. Selamat mencoba. Write less, do more. 5

7 Syntax jquery Dengan jquery Anda memilih target (query) berupa elemen HTML dan melakukan "tindakan/perintah" kepada mereka. sintaks jquery dibuat khusus untuk menargetkan atau memilih elemen dari HTML untuk di berikan instruksi atau beberapa tindakan terhadapnya. Syntax dasar yang perlu anda ketahui : $(selector).action(); Tanda $ merupakan sebuah symbol dimana untuk mendefinisikan kalau kode yang kita gunakan adalah jquery. (Selector) merupakan bagian elemen HTML yang akan di pilih untuk diberikan istruksi perintah atau tindakan. action() merupakan tindakan atau instruksi perintahnya di dalam tanda (). Contoh sederhana : List program $(this).hide() ; $("p").hide(); $(".test").hide(); $("#test").hide(); Kegunaan menyembunyikan elemen saat ini. menyembunyikan semua elemen p. menyembunyikan semua elemen dengan class="test". menyembunyikan semua elemen dengan id="test". Tip : Apakah Anda akrab dengan selector CSS? jquery menggunakan sintaks selector CSS untuk memilih elemen. Anda mungkin telah memperhatikan bahwa semua metode jquery berada di dalam ready event, lihat figure 7 ; Figure 7 Hal ini untuk mencegah kode jquery dari run sebelum dokumen tersebut selesai loading (siap). Ini adalah cara yang baik untuk menunggu dokumen sepenuhnya dimuat sebelum anda bekerja dengannya. Hal ini juga memungkinkan Anda untuk mendapatkan kode JavaScript yang telah Anda muat di bagian <head>. Berikut adalah beberapa contoh tindakan yang dapat menyebabkan gagalnya running jika metode dijalankan sebelum semuanya telah diloaded dan telah siap : 6

8 Mencoba untuk menyembunyikan elemen yang tidak dibuat Mencoba untuk mendapatkan ukuran gambar yang belum dimuat. Tip: Tim jquery juga telah menciptakan metode yang lebih pendek untuk document ready event, lihat figure 8: Figure 8 Gunakan sintaks yang Anda inginkan. saya berfikir bahwa cara di figure 7 lebih mudah untuk dipahami dalam membaca kode-kodenya. 7

9 jquery Selectors Selektor jquery memungkinkan Anda untuk memilih dan memanipulasi elemen HTML (s). selektor jquery digunakan untuk "menemukan" (memilih) elemen HTML berdasarkan nama tag, id, kelas, jenis, nilai atribut dan lain sebagainya. dasarnya sama dengan Selektor yang ada di CSS. disamping itu, anda bisa membuat atau mengcustome selektor sendiri. untuk menyertakan selektor, gunakan tanda $("selektor"). Selektor element selektor di jquery memilih elemen berdasarkan nama elemennya. misalnya Anda dapat memilih semua elemen <p> pada halaman seperti ini jq1.php ; 1. <!DOCTYPE html> 5. <title>selektor jquery</title> 8. $(document).ready(function(){ 9. $("button").click(function(){ 10. $("p").hide("slow"); 12. }); 13. </script> 14. </head> 15. <body> 16. <h2>ini adalah header</h2> 17. <p>ini paragraf pertama</p> 18. <p>ini paragraf kedua</p> 19. <button>klik Saya</button> 20. </body> 21. </html> File di atas, jika tombol di klik maka semua elemen p (paragraph) akan menghilang dengan lambat. Bisa lihat di figure 9 : 8

10 Figure 9 Jika tombol ditekan maka akan terlihat paragraph akan menghilang dengan slow, lihat figure 10. Figure 10 Selector #id selektor jquery bisa menggunakan atribute id pada suatu tag HTML untuk menemukan elemen tertentu. dalam suatu halaman id harus unik. cara yang bisa anda lakukan untuk memilih (menargetkan) elemen menggunakan nama id nya maka anda harus menggunakan tanda hash diikuti nama id pada suatu elemen yang ingin kita pilih. anda bisa mencoba file jq2.php berikut dimana id bisa digunakan untuk selektor di jquery. Untuk mencari elemen berdasarkan id nya, jquery memiliki cara penulisan seperti : $(``#nama_id``) 1. <!DOCTYPE html> 5. <title>selektor jquery</title> 8. $(document).ready(function(){ 9. $("button").click(function(){ 10. $("#tes").hide("slow"); 12. }); 13. </script> 9

11 14. </head> 15. <body> 16. <h2>ini adalah header</h2> 17. <p id="tes">ini paragraf pertama</p> 18. <p>ini paragraf kedua</p> 19. <button>klik Saya</button> 20. </body> 21. </html> Coba anda perhatikan script di atas, selector memilih id tes (dengan tanda #tes) dimana jika tombol di klik maka elemen (dalam hal ini paragraph) akan menghilang dengan lambat (slow), lihat figure 11 dan 12; Figure 11 Figure 12 Selector.class Selector jquery bisa menggunakan nama dari atribut kelas pada suatu elemen. Untuk mencari elemen berdasarkan kelasnya, jquery memiliki cara penulisan seperti : $(``.nama_kelas``) Anda bisa mencobanya dengan membuat file jq3.php, bagaimana jquery bisa menggunakan nama class untuk memberikan isntruksi ke dalam sebuah elemen HTML. 10

12 1. <!DOCTYPE html> 5. <title>selektor jquery</title> 8. $(document).ready(function(){ 9. $("button").click(function(){ 10. $(".tes").hide("slow"); 12. }); 13. </script> 14. </head> 15. <body> 16. <h2>ini adalah header</h2> 17. <p id="tes">ini paragraf pertama</p> 18. <p class="tes">ini paragraf kedua</p> 19. <button>klik Saya</button> 20. </body> 21. </html> Jika anda mengeklik tombol, maka secara otomatis elemen <p> yang memiliki class berisi tes akan menghilang secara perlahan (lambat). Ini dikarenakan jquery telah memilih elemen untuk diperintahkan menghilang berdasarkan selector classnya, perhatikan figure 13 dan 14 : Figure 13 11

13 Figure 14 Contoh penggunaan selector lain dalam jquery Syntax Definisi $( * ) Menyeleksi semua elemen $(this) Menyeleksi elemen sendiri $( p.info ) Menyeleksi semua elemen <p> dengan class= intro $( p:first ) Menyeleksi elemen <p> pertama $( ul li:first ) Menyeleksi elemen <li> pertama dari sebuah elemen <ul> pertama $( ul li:first-child ) Menyeleksi elemen li pertama dari setiap elemen <ul> $( [href] ) Menyeleksi semua elemen dengan atribut href didalamnya. $( a[target= _blank ] ) Menyeleksi semua elemen <a> dengan attribute target yang bernilai _blank $( a[target!= _blank ] ) Menyeleksi semua elemen <a> dengan attribute target yang bukan bernilai _blank $( :button ) Menyeleksi semua elemen <button> dan elemen <input> dengan type= button $( tr:even ) Menyeleksi semua elemen <t r> yang genap $( tr:odd ) Menyeleksi semua elemen <t r> yang ganjil Tips : Jika situs Anda berisi banyak halaman, dan Anda ingin fungsi jquery Anda menjadi mudah untuk digunakan, Anda dapat menempatkan fungsi jquery Anda dalam file js terpisah. bisa saja kita menambahkan fungsi internal yang ditambahkan langsung ke bagian <head>. Namun, lebih baik untuk menempatkan mereka dalam file yang terpisah/ lihat baris kode di bawah ini : 1. <!DOCTYPE html> 5. <title></title> 12

14 13 7. <script src="js/fungsi_terpisah.js"></script> 8. </head> 9. <body> </body> 12. </html>

15 Event jquery jquery dibuat khusus untuk merespon event dalam sebuah halaman HTML. event adalah tindakan pengunjung terhadap halaman web dimana halaman web tersebut merespon balik kepada pengunjung. Seperti contoh : menggerakkan mouse di atas elemen seleksi (memilih) tombol radio Menge-klik pada elemen Berikut ini adalah beberapa event DOM secara umum: Event mouse Event keyboard Event form Event Document/window click keypress submit load dblclick keydown change resize mouseenter keyup focus scroll mouseleave blur unload Syntax jquery untuk method event Dalam jquery, event DOM memiliki metode yang sama dengan jquery. Untuk menetapkan event klik untuk semua paragraf pada halaman, Anda dapat melakukan ini : $("p").click(); Langkah selanjutnya adalah menentukan instruksi apa yang harus terjadi ketika event telah berjalan (dalam hal ini di klik). Anda harus menetapkan instruksi di dalam event tersebut. ini menandakan apa yang terjadi jika event click telah berjalan (dilakukan), seperti : $("p").click(function(){ // action goes here!! }); metode umum yang digunakan dalam event di jquery $ (document). ready () $ (document). ready () adalah sebuah Metode yang memungkinkan kita untuk melaksanakan fungsi ketika dokumen di load penuh. event ini sudah dijelaskan dalam bab sebelumnya. click () adalah sebuah metode yang menempel di sebuah fungsi pengendali event untuk elemen HTML. Fungsi ini berjalan ketika pengguna mengklik pada elemen HTML. Contoh berikut menjelaskan 14

16 kepada anda, ketika event click berjalan (ini berarti si user mengekllik suatu elemen yang ditunjuk oleh selector berupa tag <p>) maka pada elemen <p> akan menyembunyikan dirinya sendiri (this). Buat file contoh dengan nama jq4.php untuk membuktikan event click tersebut. 1. <!DOCTYPE html> 5. <title>selektor jquery</title> 8. $(document).ready(function(){ 9. $("p").click(function(){ 10. $(this).hide("slow"); 12. }); 13. </script> 14. </head> 15. <body> 16. <h2>ini adalah header</h2> 17. <p>ini paragraf pertama</p> 18. <p>ini paragraf kedua</p> 19. </body> 20. </html> Anda bisa melihat, jika paragraph anda klik maka ia akan menghilang. $(this) merujuk pada elemen itu sendiri, lihat figure 14, 15, 16. Figure 15 15

17 Figure 16 Figure 17 dblclick() dblclick () adalah sebuah metode yang menempel pada fungsi pengendali event untuk elemen HTML. Fungsi ini dijalankan ketika pengguna mengeklik dua kali pada elemen HTML yang di tunjuk sebagai selektor, anda bisa mencobanya dengan membuat contoh file di bawah ini, jq5.php : 1. <!DOCTYPE html> 5. <title>selektor jquery</title> 8. $(document).ready(function(){ 9. $("p").dblclick(function(){ 10. var n = $(this).hide("slow"); 12. }); 13. </script> 14. </head> 15. <body> 16. <h2>ini adalah header</h2> 17. <p>ini paragraf pertama</p> 18. <p>ini paragraf kedua</p> 19. </body> 20. </html> 16

18 Untuk figure, bisa melihat figure 15, 16 dan 17. Hanya saja cara atau eventnya berbeda. Jika di di file jq4.php harus menyembunyikan paragraph dengan satu kali klik, maka di file jq5.php harus meng-klik 2 kali (double click). mouseenter() Fungsi ini dijalankan ketika pointer mouse memasuki elemen HTML yang di tunjuk oleh selektor. setelah itu baru akan menjalankan instruksi yang sudah anda berikan di dalamnya, anda bisa mencobanya dengan melihat rujukan file jq6.php : 1. <!DOCTYPE html> 5. <title>selektor jquery</title> 8. $(document).ready(function(){ 9. $("p").mouseenter(function(){ 10. $(this).hide("slow"); 12. }); 13. </script> 14. </head> 15. <body> 16. <h2>ini adalah header</h2> 17. <p>ini paragraf pertama</p> 18. <p>ini paragraf kedua</p> 19. </body> 20. </html> Yang akan di hasilkan adalah ketika anda menempatkan pointer mouse ke salah satu elemen paragraph maka secara otomatis paragraph itu akan menghilang. tanpa harus di klik ataupun double klik. Inilah kegunaan method mouseenter(). mouseleave() Fungsi ini dijalankan ketika pointer mouse meninggalkan elemen HTML, ini kebalikan dari method mouseenter() dimana instruksi akan bekerja (di sini instruksi berupa menghilangkan elemen) ketika mouse di tempatkan di atas elemen yang sudah di tentukan oleh selektor. untuk lebih jelasnya anda bisa mencoba file jq7.php di bawah ini : 1. <!DOCTYPE html> 5. <title>selektor jquery</title> 8. $(document).ready(function(){ 9. $("p").mouseleave(function(){ 17

19 10. $(this).hide("slow"); 12. }); 13. </script> 14. </head> 15. <body> 16. <h2>ini adalah header</h2> 17. <p>ini paragraf pertama</p> 18. <p>ini paragraf kedua</p> 19. </body> 20. </html> Ingat, ini berlaku juga pada method mouseenter, ketika pointer mouse anda berada tidak tepat di isi paragraph bukan berarti elemen paragraph tersebut tidak ada atau panjangnya hanya sebatas panjang rangkaian huruf tersebut. Elemen paragraph memiliki panjang hingga batas kanan browser. Jadi ketika anda menempatkan pointer di atasnya, perintah jquery juga akan tetap berlaku sehingga elemen paragraph akan menghilang. lebih jelasnya lihat figure 18 : Figure 18 mousedown() Fungsi ini baru bisa dijalankan, ketika tombol kiri dan kanan mouse ditekan, sementara mouse di atas elemen HTML yang sudah di seleksi di selektor jquery, untuk lebih memahaminya. Anda bisa mencoba file jq8.php : 1. <!DOCTYPE html> 5. <title>selektor jquery</title> 18

20 8. $(document).ready(function(){ 9. $("p").mousedown(function(){ 10. $(this).hide("slow"); 12. }); 13. </script> 14. </head> 15. <body> 16. <h2>ini adalah header</h2> 17. <p>ini paragraf pertama</p> 18. <p>ini paragraf kedua</p> 19. </body> 20. </html> mouseup() Fungsi ini baru bisa dijalankan, ketika tombol kiri dan kanan mouse dilepaskan (setelah ditekan), sementara pointer mouse tetap berada di atas elemen HTML yang sudah di seleksi di selektor jquery, untuk lebih jelasnya bisa anda coba file jq9.php : 1. <!DOCTYPE html> 5. <title>selektor jquery</title> 8. $(document).ready(function(){ 9. $("p").mouseup(function(){ 10. $(this).hide("slow"); 12. }); 13. </script> 14. </head> 15. <body> 16. <h2>ini adalah header</h2> 17. <p>ini paragraf pertama</p> 18. <p>ini paragraf kedua</p> 19. </body> 20. </html> hover() hover() adalah metode yang diambil dari dua fungsi dan merupakan kombinasi dari metode mouseenter() dan mouseleave(). saya senang menyebutnya satu method dua pekerjaan bisa dilakukan. Fungsi pertama dijalankan ketika mouse memasuki elemen HTML, dan fungsi kedua dijalankan ketika mouse meninggalkan elemen HTML, untuk lebih jelas, anda bisa mencobanya dengan file jq10.php : 19

21 1. <!DOCTYPE html> 5. <title>selektor jquery</title> 8. $(document).ready(function(){ 9. $("p").hover(function(){ 10. $(this).hide("slow"); 12. }); 13. </script> 14. </head> 15. <body> 16. <h2>ini adalah header</h2> 17. <p>ini paragraf pertama</p> 18. <p>ini paragraf kedua</p> 19. </body> 20. </html> focus() Focus() adalah sebuah metode yang menempel di fungsi sebagai pengendali event untuk field (form) inputan di HTML. Fungsi ini dijalankan ketika formulir isian mendapat sorotan, untuk lebih jelasnya silahkan mencoba file jq11.php : 1. <!DOCTYPE html> 5. <title>event jquery</title> 8. $(document).ready(function(){ 9. $("input").focus(function(){ 10. $(this).css("background-color","darkcyan"); 12. }); 13. </script> 14. </head> 15. <body> 16. <h2>ini adalah header</h2> 17. nama : <input type="text" name="field"/> 18. </body> 19. </html> Figure 19 dan 20, merupakan hasil yang menjelaskan kepada anda, ketika mouse anda letakkan di field input, maka warna yang tadinya putih menjadi warna darkcyan. 20

22 Figure 19 Setelah anda sorot untuk menginput maka background di field inputan tersebut akan berubah menjadi warna darkcyan. Figure 20 Namun hal ini masih belum cukup, ketika anda melepaskan focus dari field input tersebut, warna background tidak bisa kembali seperti semula, kita membutuhkan method blur() sebagai pengeset nya. blur() blur () adalah sebuah metode yang menempel disebuah fungsi sebagai pengendali event untuk field inputan di HTML. Fungsi ini dijalankan ketika formulir isian kehilangan focus, anda bisa mencobanya melalui file jq12.php : 1. <!DOCTYPE html> 5. <title>event jquery</title> 8. $(document).ready(function(){ 9. $("input").focus(function(){ 10. $(this).css("background-color","darkcyan"); 12. $("input").blur(function(){ 13. $(this).css("background-color","white"); 14. }); 15. }); 16. </script> 17. </head> 18. <body> 21

23 19. <h2>ini adalah header</h2> 20. nama : <input type="text" name="field"/> 21. </body> 22. </html> Terbukti sudah, ketika mouse meninggalkan focus di input isian tersebut, maka warna background akan kembali menjadi semula (putih). Itu karena bantuan metode blur yang di dalamnya di berikan instruksi css dengan mengubah background-color menjadi warna putih (warna default awal field inputan tersebut) lihat figure 21 & 22. Figure 21 Figure 22 22