Ppt jquery

447 views

Published on

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
447
On SlideShare
0
From Embeds
0
Number of Embeds
92
Actions
Shares
0
Downloads
17
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Ppt jquery

  1. 1. Page 1
  2. 2. jQuery merupakan sebuah framework dan cara baru dalam menuliskan kode javascript. jQuery mempunyai semboyan “write less, do more”. jQuery dirancang untuk mempercepat dan meringkaskan kode-kode javascript serta kaya akan fitur. Dengan demikian, menggunakan jQuery dapat dengan cepat dan ringan untuk menangani perpindahan dokumen HTML, penanganan event (event handling), pembuatan animasi didalam web. Dengan JQuery, suatu halaman web akan tampak seperti flash, dan juga interaksi AJAX untuk pengembangan web yang modern dan cepat. jQuery mempunyai lisensi dibawah GNU artinya jQuery merupakan aplikasi yang bersifat Open Source dan bebas. Page 2
  3. 3. JQuery diluncurkan pada tanggal 26 Januari 2006 di Barcam NYC oleh John Resig dan berlisensi ganda di bawah MIT dan G PL. JQuery dibuat lebih ramping dari librari Prototype yang menjadi inspirasi dari libarari JQuery ini. Secara pemrograman, JQuery memiliki kemiripan seperti Prototype. Rilis pertama dari jQuery, versi 1.0, pada tanggal 26 Agustus 2006. Sejak itu, jQuery telah berkembang ke versi 1.7.1 dan hingga saat ini versi jQuery 2.0 terbaru sudah resmi di luncurkan tanggal 18 April 2013. Page 3
  4. 4. Fungsi JQuery • Mempermudah akses dan manipulasi elemen tertentu pada dokumen. • Mempermudah modifikasi/perubahan tampilan halaman web. • Mempersingkat Ajax (Asynchronous Javacsript and XML). • Memiliki API (Application Programming Interface). Page 4
  5. 5. • Mampu merespon interaksi antara user dengan halaman web dengan lebih cepat. • Menyediakan fasilitas untuk membuat animasi sekelas Flash dengan mudah. • Menyederhanakan penulisan Javascript biasa. Page 5
  6. 6. Fungsi efek-efek siap pakai yang disediakan oleh jQuery : •jQuery show() : berfungsi untuk menampilkan elemen yang tersembunyi. •jQuery hide() : berfungsi untuk menyembunyikan elemen yang dipilih. •jQuery toggle() : merupakan gabungan dari fungsi hide dan show. •jQuery slideDown() : berfungsi menampilkan elemen yang tersembunyi , secara efek sliding. •jQuery slideUp() : berfungsi menyembunyikan elemen secara efek sliding. Page 6
  7. 7. • jQuery slideToggle() : merupakan gabungan antara slideDown() dan slideUp(). • jQuery fadeIn() : berfungsi menampilkan elemen yang dipilih jika tersembunyi. • jQuery fadeOut() : berfungsi menyembunyikan elemen yang dipilih secara efek memudar. • jQuery fadeTo() : berfungsi mengatur tingkat kepudaran elemen terpilih menuju tingkat opacity yang ditentukan. • jQuery animate() : berfungsi mengubah suatu elemen dari satu keadaan ke keadaan lainnya. Page 7
  8. 8. Fitur-fitur Jquery Beberapa Fitur yang ada di JQuery : 1. dalam penggunaannya menggunakan seleksi element DOM, sehingga website lebih dinamis dan interaktif. 2. JQuery dapat memanipulasi Class pada CSS dan Support CSS 3 3. Event 4. AJAX Page 8
  9. 9. 5. 6. 7. 8. Efek-efek dan animasi Ekstensi dan Plug-ins Kompatibilitas dengan hampir semua Browser modern yang ada saat ini. Keperluan lain seperti : User Agent, Feature detection dan lain sebagainya. Page 9
  10. 10. Cara Kerja dan Penggunaan Jquery 1. jQuery akan memastikan bahwa semua elemen atau elemen yang diinginkan sudah ditampilkan semua pada halaman web, fungsi yang digunakan adalah: $(document).ready(function(){ // baris kode jQuery akan dijalankan // apabila semua elemen sudah ditampilkan semua }); 2. Setelah semua elemen sudah ditampilkan, tahap berikutnya adalah memilih elemen. Berdasarkan class atau id yang telah didefinisikan. Dalam hal ini, jQuery menggunakan fungsi Selector. Page 10
  11. 11. $("#foto") $(".sembunyi") $(".tampil") 3. Setelah elemen dipilih, tahap berikutnya adalah memberikan aksi/operasi terhadap elemen yang sudah dipilih. Misalnya tombol yang akan menyembunyikan dan memunculkan kembali gambar. $(".sembunyi").click(function(){ $("#foto").hide("slow"); )}; Page 11
  12. 12. Implementasi Jquery beberapa plugin jquery yang sering digunakan oleh beberapa web developer dalam membuat atau membangun sebuah website, antara lain : •Drop-Down-Menu •Tool-Tips •Autocomplete-Search •Validasi-Form •jQuery-Cycle-Plugin •Teks-Berjalan Page 12
  13. 13. Manfaat jquery • Kompatibel dengan hampir seluruh browser • jQuery telah digunakan oleh websitewebsite raksasa • Kompatibel dengan seluruh versi CSS (dari CSS 1 sampai CSS 3) Dokumentasi dan tutorialnya lengkap, bisa langsung dilihat di http://jquery.com Page 13
  14. 14. • Didukung oleh banyak komunitas • Disupport oleh plugin yang lengkap • Filenya hanya satu dan ukurannya relatif kecil, sekitar 20kb • Open source atau Free • jQuery lebih diminati oleh para developer web saat ini Page 14
  15. 15. Kelebihan dan kekurangan Jquery Kelebihannya yaitu: •Didukung oleh banyak komunitas •Disupport oleh plugin yang lengkap •Filenya hanya satu dan ukurannya relatif kecil, sekitar 20kb •Open source atau Free •jQuery lebih diminati oleh para developer web saat ini Page 15
  16. 16. Kekurangannya yaitu : •Meskipun diklaim jquery memiliki beban kerja yang ringan (load CPU dan RAM) untuk browser, tetap saja lebih ringan (cepat di-load) website yang tidak menggunakan jquery, alias HTML murni. •Dari sisi server hosting pun, CPU dan RAM harus mengalokasikan resource yang mereka miliki untuk menangani request terhadap jquery. Pada level tertentu request yang sangat banyak (sangatsangat banyak) akan membebani server. Solusi: host jquery pada situs lain, seperti Google yang menyediakan request jquery dari servernya. Page 16
  17. 17. Sintaks Jquery • Biasanya sintaks jQuery dibuat untuk memilih elemen-elemen HTML dan melakukan aksi terhadap elemen yang dipilih. • Sintaks: : $(selector).action() • Tanda dollar, untuk mendefinisikan jQuery. (selector), untuk menunjukkan elemen yang dipilih atau dituju. action(), adalah jQuery action yang akan dilakukan terhadap elemen yang dipilih. Page 17
  18. 18. Thank You Page 18

×