dasar-dasar jquery - fitraditya.files.wordpress.com filecallback function • pada dasarnya, setiap...
TRANSCRIPT
![Page 1: Dasar-dasar jQuery - fitraditya.files.wordpress.com fileCallback Function • Pada dasarnya, setiap fungsi di jQuery dijalankan per baris • Namun permasalahannya, pada effects function](https://reader034.vdocuments.net/reader034/viewer/2022052123/5cc6228788c99368098c4362/html5/thumbnails/1.jpg)
Dasar-dasar jQueryDisampaikan pada Kelas Daring BlankOn, 1 Oktober 2012
Fitra [email protected] / http://fitraditya.wordpress.com/
![Page 2: Dasar-dasar jQuery - fitraditya.files.wordpress.com fileCallback Function • Pada dasarnya, setiap fungsi di jQuery dijalankan per baris • Namun permasalahannya, pada effects function](https://reader034.vdocuments.net/reader034/viewer/2022052123/5cc6228788c99368098c4362/html5/thumbnails/2.jpg)
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
![Page 3: Dasar-dasar jQuery - fitraditya.files.wordpress.com fileCallback Function • Pada dasarnya, setiap fungsi di jQuery dijalankan per baris • Namun permasalahannya, pada effects function](https://reader034.vdocuments.net/reader034/viewer/2022052123/5cc6228788c99368098c4362/html5/thumbnails/3.jpg)
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
![Page 4: Dasar-dasar jQuery - fitraditya.files.wordpress.com fileCallback Function • Pada dasarnya, setiap fungsi di jQuery dijalankan per baris • Namun permasalahannya, pada effects function](https://reader034.vdocuments.net/reader034/viewer/2022052123/5cc6228788c99368098c4362/html5/thumbnails/4.jpg)
Mengapa jQuery?• Mudah digunakan• Lebih populer
• Google• Microsoft• BlankOn
• Slogan jQuery: “Write less, Do more”
![Page 5: Dasar-dasar jQuery - fitraditya.files.wordpress.com fileCallback Function • Pada dasarnya, setiap fungsi di jQuery dijalankan per baris • Namun permasalahannya, pada effects function](https://reader034.vdocuments.net/reader034/viewer/2022052123/5cc6228788c99368098c4362/html5/thumbnails/5.jpg)
Bagaimana jQuery Bekerja?• Secara sederhana, cara kerja jQuery adalah:
• Temukan• Kerjakan
• $(“selector”).action();
![Page 6: Dasar-dasar jQuery - fitraditya.files.wordpress.com fileCallback Function • Pada dasarnya, setiap fungsi di jQuery dijalankan per baris • Namun permasalahannya, pada effects function](https://reader034.vdocuments.net/reader034/viewer/2022052123/5cc6228788c99368098c4362/html5/thumbnails/6.jpg)
Potongan #1• Inisiasi jQuery
<head><script src="jquery.js"></script><script>
$(document).ready(function(){... {kode di sini} ...
});</script>
</head>
![Page 7: Dasar-dasar jQuery - fitraditya.files.wordpress.com fileCallback Function • Pada dasarnya, setiap fungsi di jQuery dijalankan per baris • Namun permasalahannya, pada effects function](https://reader034.vdocuments.net/reader034/viewer/2022052123/5cc6228788c99368098c4362/html5/thumbnails/7.jpg)
Potongan #2• Lihat berkas kode_2.html
![Page 8: Dasar-dasar jQuery - fitraditya.files.wordpress.com fileCallback Function • Pada dasarnya, setiap fungsi di jQuery dijalankan per baris • Namun permasalahannya, pada effects function](https://reader034.vdocuments.net/reader034/viewer/2022052123/5cc6228788c99368098c4362/html5/thumbnails/8.jpg)
Selector• Diawali dengan tanda $• Contoh:
• $(“p”)
• Selector bisa berupa #id, .class, ataupun tag HTML• Contoh:
• $(“#idku”)• $(“.classku”)• $(“p”)
![Page 9: Dasar-dasar jQuery - fitraditya.files.wordpress.com fileCallback Function • Pada dasarnya, setiap fungsi di jQuery dijalankan per baris • Namun permasalahannya, pada effects function](https://reader034.vdocuments.net/reader034/viewer/2022052123/5cc6228788c99368098c4362/html5/thumbnails/9.jpg)
Selector• Dapat juga berupa kombinasi antara #id, .class, dan tag• Contoh:
• $(“p.classku”)• $(“#idku, .classku”)
![Page 10: Dasar-dasar jQuery - fitraditya.files.wordpress.com fileCallback Function • Pada dasarnya, setiap fungsi di jQuery dijalankan per baris • Namun permasalahannya, pada effects function](https://reader034.vdocuments.net/reader034/viewer/2022052123/5cc6228788c99368098c4362/html5/thumbnails/10.jpg)
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
![Page 11: Dasar-dasar jQuery - fitraditya.files.wordpress.com fileCallback Function • Pada dasarnya, setiap fungsi di jQuery dijalankan per baris • Namun permasalahannya, pada effects function](https://reader034.vdocuments.net/reader034/viewer/2022052123/5cc6228788c99368098c4362/html5/thumbnails/11.jpg)
Event Function• Contoh:
• $(“button”).click(function(){$(“p”).hide();
});
• Penjelasan:• <p> akan dihilangkan apabila <button> diklik
![Page 12: Dasar-dasar jQuery - fitraditya.files.wordpress.com fileCallback Function • Pada dasarnya, setiap fungsi di jQuery dijalankan per baris • Namun permasalahannya, pada effects function](https://reader034.vdocuments.net/reader034/viewer/2022052123/5cc6228788c99368098c4362/html5/thumbnails/12.jpg)
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/
![Page 13: Dasar-dasar jQuery - fitraditya.files.wordpress.com fileCallback Function • Pada dasarnya, setiap fungsi di jQuery dijalankan per baris • Namun permasalahannya, pada effects function](https://reader034.vdocuments.net/reader034/viewer/2022052123/5cc6228788c99368098c4362/html5/thumbnails/13.jpg)
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/
![Page 14: Dasar-dasar jQuery - fitraditya.files.wordpress.com fileCallback Function • Pada dasarnya, setiap fungsi di jQuery dijalankan per baris • Namun permasalahannya, pada effects function](https://reader034.vdocuments.net/reader034/viewer/2022052123/5cc6228788c99368098c4362/html5/thumbnails/14.jpg)
Potongan #3• Lihat berkas kode_3.html• Contoh penggunaan fungsi toggle()
![Page 15: Dasar-dasar jQuery - fitraditya.files.wordpress.com fileCallback Function • Pada dasarnya, setiap fungsi di jQuery dijalankan per baris • Namun permasalahannya, pada effects function](https://reader034.vdocuments.net/reader034/viewer/2022052123/5cc6228788c99368098c4362/html5/thumbnails/15.jpg)
Callback Function• Pada dasarnya, setiap fungsi di jQuery dijalankan per
baris• Namun permasalahannya, pada effects function sering
kali terjadi di mana baris berikutnya dijalankan sebelumbaris sebelumnya selesai
• Di sinilah callback function digunakan untuk memastikanbahwa setiap baris telah selesai dikerjakan sebelum barisberikutnya dijalankan
![Page 16: Dasar-dasar jQuery - fitraditya.files.wordpress.com fileCallback Function • Pada dasarnya, setiap fungsi di jQuery dijalankan per baris • Namun permasalahannya, pada effects function](https://reader034.vdocuments.net/reader034/viewer/2022052123/5cc6228788c99368098c4362/html5/thumbnails/16.jpg)
Potongan #4• Lihat berkas kode_4.html• Terlihat bahwa dua buah efek (slide dan transition)
berjalan secara bersamaan
![Page 17: Dasar-dasar jQuery - fitraditya.files.wordpress.com fileCallback Function • Pada dasarnya, setiap fungsi di jQuery dijalankan per baris • Namun permasalahannya, pada effects function](https://reader034.vdocuments.net/reader034/viewer/2022052123/5cc6228788c99368098c4362/html5/thumbnails/17.jpg)
Potongan #5• Lihat berkas kode_5.html• Terlihat bahwa efek berjalan secara berurutan
![Page 18: Dasar-dasar jQuery - fitraditya.files.wordpress.com fileCallback Function • Pada dasarnya, setiap fungsi di jQuery dijalankan per baris • Namun permasalahannya, pada effects function](https://reader034.vdocuments.net/reader034/viewer/2022052123/5cc6228788c99368098c4362/html5/thumbnails/18.jpg)
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
![Page 19: Dasar-dasar jQuery - fitraditya.files.wordpress.com fileCallback Function • Pada dasarnya, setiap fungsi di jQuery dijalankan per baris • Namun permasalahannya, pada effects function](https://reader034.vdocuments.net/reader034/viewer/2022052123/5cc6228788c99368098c4362/html5/thumbnails/19.jpg)
Potongan #6 dan #7• Perbedaan antara before() dan prepend()• Sudah jelas bukan?• Before(), menambahkan tag sama seperti sebelumnya• Prepend(), menyisipkan pada tag yang sama
![Page 20: Dasar-dasar jQuery - fitraditya.files.wordpress.com fileCallback Function • Pada dasarnya, setiap fungsi di jQuery dijalankan per baris • Namun permasalahannya, pada effects function](https://reader034.vdocuments.net/reader034/viewer/2022052123/5cc6228788c99368098c4362/html5/thumbnails/20.jpg)
HTML Manipulation• Referensi lebih lanjut:
• http://api.jquery.com/category/manipulation/
![Page 21: Dasar-dasar jQuery - fitraditya.files.wordpress.com fileCallback Function • Pada dasarnya, setiap fungsi di jQuery dijalankan per baris • Namun permasalahannya, pada effects function](https://reader034.vdocuments.net/reader034/viewer/2022052123/5cc6228788c99368098c4362/html5/thumbnails/21.jpg)
CSS Manipulation• Berfungsi untuk memanipulasi CSS• css(property, value)• Contoh:
• $("p").css("background");
• Multiple property:• $("p").css({"background":"yellow","font-size":"200%"});
![Page 22: Dasar-dasar jQuery - fitraditya.files.wordpress.com fileCallback Function • Pada dasarnya, setiap fungsi di jQuery dijalankan per baris • Namun permasalahannya, pada effects function](https://reader034.vdocuments.net/reader034/viewer/2022052123/5cc6228788c99368098c4362/html5/thumbnails/22.jpg)
Potongan #8• Lihat berkas kode_8.html
![Page 23: Dasar-dasar jQuery - fitraditya.files.wordpress.com fileCallback Function • Pada dasarnya, setiap fungsi di jQuery dijalankan per baris • Namun permasalahannya, pada effects function](https://reader034.vdocuments.net/reader034/viewer/2022052123/5cc6228788c99368098c4362/html5/thumbnails/23.jpg)
AJAX• Ajax = Asynchronous JavaScript and XML• Ajax memungkinkan adanya serah terima data dalam
jumlah yang kecil antara client dan server secarabackground
• Ini artinya, kita dapat mengubah isi suatu halaman webtanpa perlu proses loading halaman oleh peramban web
• Contoh:• load()• ajax()
![Page 24: Dasar-dasar jQuery - fitraditya.files.wordpress.com fileCallback Function • Pada dasarnya, setiap fungsi di jQuery dijalankan per baris • Namun permasalahannya, pada effects function](https://reader034.vdocuments.net/reader034/viewer/2022052123/5cc6228788c99368098c4362/html5/thumbnails/24.jpg)
Potongan #9• Lihat berkas kode_9.html
![Page 25: Dasar-dasar jQuery - fitraditya.files.wordpress.com fileCallback Function • Pada dasarnya, setiap fungsi di jQuery dijalankan per baris • Namun permasalahannya, pada effects function](https://reader034.vdocuments.net/reader034/viewer/2022052123/5cc6228788c99368098c4362/html5/thumbnails/25.jpg)
Potongan #10• Lihat berkas kode_10.html• Penggunaan fungsi ajax() yang cukup kompleks
![Page 26: Dasar-dasar jQuery - fitraditya.files.wordpress.com fileCallback Function • Pada dasarnya, setiap fungsi di jQuery dijalankan per baris • Namun permasalahannya, pada effects function](https://reader034.vdocuments.net/reader034/viewer/2022052123/5cc6228788c99368098c4362/html5/thumbnails/26.jpg)
Contoh Kasus• Form Input Validation• Dynamic Form Element• Dynamic Selection List• Tabbed Page• Page Transition
![Page 27: Dasar-dasar jQuery - fitraditya.files.wordpress.com fileCallback Function • Pada dasarnya, setiap fungsi di jQuery dijalankan per baris • Namun permasalahannya, pada effects function](https://reader034.vdocuments.net/reader034/viewer/2022052123/5cc6228788c99368098c4362/html5/thumbnails/27.jpg)
Referensi• http://api.jquery.com/• http://www.w3schools.com/jquery/
![Page 28: Dasar-dasar jQuery - fitraditya.files.wordpress.com fileCallback Function • Pada dasarnya, setiap fungsi di jQuery dijalankan per baris • Namun permasalahannya, pada effects function](https://reader034.vdocuments.net/reader034/viewer/2022052123/5cc6228788c99368098c4362/html5/thumbnails/28.jpg)
SEKIAN DAN TERIMA KASIHSampai bertemu di lain kesempatan