Dasar-dasar jQuery

936 views
871 views

Published on

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
936
On SlideShare
0
From Embeds
0
Number of Embeds
5
Actions
Shares
0
Downloads
45
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Dasar-dasar jQuery

  1. 1. Dasar-dasar jQueryDisampaikan pada Kelas Daring BlankOn, 1 Oktober 2012 Fitra Aditya fitra@di.blankon.in / http://fitraditya.wordpress.com/
  2. 2. Pendahuluan• Sebelum mempelajari jQuery, ada baiknya kita mengetahui sedikit (atau banyak) tentang: • HTML • CSS • JavaScript• Unduh terlebih dahulu jQuery pada tautan berikut: • http://jquery.com/download/• Unduh materi malam ini: • http://fitraditya.co.de/lumbung/kelas_daring_blankon_jquery.zip
  3. 3. Pendahuluan• jQuery: JavaScript framework (kerangka kerja)• Framework: Sekumpulan dari fungsi, pustaka, dan potongan kode siap pakai• Tujuan dari framework: Untuk memudahkan pengguna• Framework lainnya: • YUI • Prototype • MooTools
  4. 4. Mengapa jQuery?• Mudah digunakan• Lebih populer • Google • Microsoft • BlankOn • Slogan jQuery: “Write less, Do more”
  5. 5. Bagaimana jQuery Bekerja?• Secara sederhana, cara kerja jQuery adalah: • Temukan • Kerjakan• $(“selector”).action();
  6. 6. Potongan #1• Inisiasi jQuery <head> <script src="jquery.js"></script> <script> $(document).ready(function(){ ... {kode di sini} ... }); </script> </head>
  7. 7. Potongan #2• Lihat berkas kode_2.html
  8. 8. Selector• Diawali dengan tanda $• Contoh: • $(“p”)• Selector bisa berupa #id, .class, ataupun tag HTML• Contoh: • $(“#idku”) • $(“.classku”) • $(“p”)
  9. 9. Selector• Dapat juga berupa kombinasi antara #id, .class, dan tag• Contoh: • $(“p.classku”) • $(“#idku, .classku”)
  10. 10. Event Function• Fungsi yang akan dikerjakan apabila “sesuatu” sedang atau telah terjadi• Berada di belakang selector• Contoh: • $(“button”).click(function(){ ...fungsi yang akan dikerjakan... });• Bagian di atas merupakan event
  11. 11. Event Function• Contoh: • $(“button”).click(function(){ $(“p”).hide(); });• Penjelasan: • <p> akan dihilangkan apabila <button> diklik
  12. 12. Event Function• Contoh event lainnya: • click(function) • dblclick(function) • focus(function) • Dan lain-lainnya• Selengkapnya bisa dilihat pada tautan berikut: • http://api.jquery.com/category/events/
  13. 13. Effects Function• Hide, Show, Toggle• hide(), show(), toggle()• Contoh: • $(“p”).hide() • $(“p”).show() • $(“p”).toggle()• Untuk effect lainnya, bisa dilihat di tautan berikut: • http://api.jquery.com/category/effects/
  14. 14. Potongan #3• Lihat berkas kode_3.html• Contoh penggunaan fungsi toggle()
  15. 15. Callback Function• Pada dasarnya, setiap fungsi di jQuery dijalankan per baris• Namun permasalahannya, pada effects function sering kali terjadi di mana baris berikutnya dijalankan sebelum baris sebelumnya selesai• Di sinilah callback function digunakan untuk memastikan bahwa setiap baris telah selesai dikerjakan sebelum baris berikutnya dijalankan
  16. 16. Potongan #4• Lihat berkas kode_4.html• Terlihat bahwa dua buah efek (slide dan transition) berjalan secara bersamaan
  17. 17. Potongan #5• Lihat berkas kode_5.html• Terlihat bahwa efek berjalan secara berurutan
  18. 18. HTML Manipulation• Berfungsi untuk memanipulasi elemen HTML• Contoh: • Html(): untuk mengganti • Prepend(): untuk menambah di awal • Append(): untuk menambah di akhir • Before(): untuk menyisipkan elemen di awal • After(): untuk menyisipkan elemen di akhir
  19. 19. Potongan #6 dan #7• Perbedaan antara before() dan prepend()• Sudah jelas bukan?• Before(), menambahkan tag sama seperti sebelumnya• Prepend(), menyisipkan pada tag yang sama
  20. 20. HTML Manipulation• Referensi lebih lanjut: • http://api.jquery.com/category/manipulation/
  21. 21. CSS Manipulation• Berfungsi untuk memanipulasi CSS• css(property, value)• Contoh: • $("p").css("background");• Multiple property: • $("p").css({"background":"yellow","font-size":"200%"});
  22. 22. Potongan #8• Lihat berkas kode_8.html
  23. 23. AJAX• Ajax = Asynchronous JavaScript and XML• Ajax memungkinkan adanya serah terima data dalam jumlah yang kecil antara client dan server secara background• Ini artinya, kita dapat mengubah isi suatu halaman web tanpa perlu proses loading halaman oleh peramban web• Contoh: • load() • ajax()
  24. 24. Potongan #9• Lihat berkas kode_9.html
  25. 25. Potongan #10• Lihat berkas kode_10.html• Penggunaan fungsi ajax() yang cukup kompleks
  26. 26. Contoh Kasus• Form Input Validation• Dynamic Form Element• Dynamic Selection List• Tabbed Page• Page Transition
  27. 27. Referensi• http://api.jquery.com/• http://www.w3schools.com/jquery/
  28. 28. SEKIAN DAN TERIMA KASIH Sampai bertemu di lain kesempatan 

×