Ppt pengenalan jquery

1,512 views

Published on

0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,512
On SlideShare
0
From Embeds
0
Number of Embeds
36
Actions
Shares
0
Downloads
100
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Ppt pengenalan jquery

  1. 1. PENGENALAN JQUERY Oleh : Mutia Nurotul Bariyah 1102412022
  2. 2. Pengertian JQuery Jquery adalah suatu library (framework) yang berbasiskan Javascript. . Jquery juga sama dengan Javascript Library yaitu kumpulan kode atau fungsi Javascript siap pakai, sehingga dapat mempermudah dan mempercepat dalam pembuatan Javascript atau framework yang mampu menyederhanakan penulisan kode dengan hasil yang lebih baik "Write less, do more" atau sedikit menulis tetapi bisa menghasilkan banyak. Jquery sendiri dirancang untuk meringkas kode-kode javascript.
  3. 3. JQuery merupakan library yang bersifat open source, atau gratis dengan lisensi GNU General Public License dan MT License. Jquery berukuran sangat ringan, yang hanya terdiri dari satu file dan berukuran kurang lebih 20 KB. Sehingga menggunakan jQuery jauh lebih cepat dan mudah daripada menggunakan framework yang lain atau menggunakan Javascript Konvensional.
  4. 4. Sejarah Perkembangan JQuery John Resig pada tahun 2005 merupakan pembuat JQuery pada kali pertamanya, yang diumumkan di NYC BarCamp pada tanggal 14 Januari 2006. Kemudian para pengembang datang untuk membantu menyempurnakan librari ini, dan akhirnya menghasilkan rilis stabil pertama dari jQuery versi 1.0 pada tanggal 2006. Sejak itu, jQuery telah berkembang ke versi 1.7.1 dan telah mempunyai plug-in yang banyak. Sebuah plug-in adalah ekstensi dari jQuery yang bukan bagian dari library inti.
  5. 5. Semenjak kemunculannya jQuery telah mencuri perhatian para developer web. Buktinya, pada tahuntahun berikutnya jQuery telah banyak digunakan oleh website - website terkemuka di dunia seperti Google, Microsoft, intel , Nokia, Oracle , IBM, DELL, BBC, NBC, ESPN, EAPN, EA Sport, Twitter, Facebook, Amazon, Techorati, Youtobe Apple, Wordpress, Mozila, Netflix , Digg, Time, dan masih banyak lagi. Dan sampai saat ini sudah tercatat ada jutaan website yang telah menggunakan jQuery.
  6. 6. FITUR-FITUR YANG ADA DI JQUERY • • • • • • • • Beberapa fitur yang tersedia di Jquery: Dalam Pemakaian menggunakan seleksi element DOM, sehingga website lebih dinamis dan interaktif. JQuery bisa memanipulasi Class pada CSS dan Support CSS 3 Event AJAX Efek-efek dan animasi Ekstensi dan Plug-ins Kompatibilitas dengan hampir semua Browser modern Keperluan lain seperti : User Agent, Feature detection dan lainnya.
  7. 7. CARA KERJA JQUERY Cara kerja yang dilakukan Jquery yaitu:  jQuery akan memastikan bahwa semua elemen atau elemen yang diinginkan sudah ditampilkan semua di halaman web, fungsi yang digunakan adalah: $(document).ready(function(){ // baris kode jQuery akan dijalankan // apabila semua elemen sudah ditampilkan semua });
  8. 8.  Setelah semua elemen ditampilkan, tahap berikutnya adalah memilih elemen berdasarkan class atau id yang telah didefinisikan. Dalam hal ini, jQuery menggunakan fungsi Selector. $("#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"); )};
  9. 9. IMPLEMENTASI JQUERY       Beberapa plugin jquery yang sering digunakan dalam membuat atau membangun sebuah website, diantaranya: Drop-Down-Menu Tool-Tips Autocomplete-Search Validasi-Form jQuery-Cycle-Plugin Teks-Berjalan
  10. 10. FUNGSI JQUERY • • • • Beberapa fungsi yang ada pada jQuery, diantaranya sebagai berikut : .add() fungsi add() digunakan untuk menambahklan elmen berupa text, tag html ke dalam sebuah content (tag html = input, textarea, div dll). .append() fungsi .append() digunakan untuk menambahkan suatu elment berupa text, html dll hampir sama dengan fungsi .add(). .attr() fungsi .attr() digunakan untuk mengubah suatu nilai pada attribut html seperti attribut dalam tag html seperti nilai value, class, id, title ini bisa diubah nilainya mengunakan fungsi ini.
  11. 11. • .addClass() fungsi .addClass() digunakan untuk menambahkan nilai class pada attribut html. • .find() fungsi .find() digunakan untuk mencari suatu attribut dalam html seperti elmen html (div, form, input dll), attribut html (title, class, id dll) • .each() fungsi .each() digunakan untuk mencari / memangil suatu elemen html , attribut html yang sudah di tentukan secara rekursif dalam artian secara mudah, berulang secata terus menerus sampi element tau attribut html di temukan. fungsi ini hampir sama dengan fungsi find(). akan tetapi penempatan pengunaanya berbeda.
  12. 12. MANFAAT JQUERY DALAM PERKEMBANGAN APLIKASI WEBSITE Mengakses bagian halaman website dengan mudah Merespon interaksi user dalam halaman Menambahkan animasi ke halaman Mengubah isi dari halaman Mengambil informasi di server tanpa harus merefresh halaman web Mengubah bagian halaman tertentu Menyederhanakan penulisan Javascript biasa
  13. 13. PERBEDAAN ANTARA JAVASCRIPT DAN JQUERY  Javascript adalah bahasa pemrograman yang dirancang untuk berjalan di lingkungan klien yang dikombinasikan dengan dokumen HTML.  Sedangkan jquery adalah komponen/librari/framework yang dibuat dari javascript dengan tujuan memudahkan seorang programmer dalam menggunakan fungsi-fungsi yang lebih rumit.
  14. 14. penulisan javascript dan JQuery dalam melakukan sebuah manipulasi background dokumen html dapat dilihat sebagai berikut: Javascript: 1. <script language="javascript"> 2. function changeBackground(color) 3. { 4. document.body.style.background = color; 5. } 6. onload="changeBackground('red');“ 7. </script>
  15. 15. JQuery: 1. <script> 2. $('body').css('background', '#ccc'); 3. </script>
  16. 16. KEMAMPUAN YANG DIMILIKI JQUERY • Mempermudah akses dan manipulasi elemen tertentu pada dokumen. • Mempermudah modifikasi/perubahan tampilan halaman web. • Mempersingkat Ajax (Asynchronous Javascript and XML) • Memiliki API (Application Programming Interface) • Mampu merespon interaksi antara user dengan halaman web dengan lebih cepat. • Menyediakan fasilitas untuk membuat animasi sekelas Flash dengan mudah.
  17. 17. KEKURANGAN YANG DIMILIKI JQUERY • 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 (sangat-sangat banyak) akan membebani server. Solusi: host jquery pada situs lain, seperti Google yang menyediakan request jquery dari servernya.
  18. 18. EFEK-EFEK DENGAN JQUERY • • • • • • • • • • jQuery show() : berguna untuk menampilkan elemen yang tersembunyi. jQuery hide() : berguna untuk menyembunyikan elemen yang dipilih. jQuery toggle() : gabungan fungsi hide dan show. jQuery slideDown() : menampilkan elemen yang tersembunyi , secara efek sliding. jQuery slideUp() : menyembunyikan elemen secara efek sliding. jQuery slideToggle() : gabungan antara slideDown() dan slideUp(). jQuery fadeIn() : menampilkan elemen yang dipilih jika tersembunyi. jQuery fadeOut() : menyembunyikan elemen yang dipilih secara efek memudar. jQuery fadeTo() : mengatur tingkat kepudaran elemen terpilih menuju tingkat opacity yang ditentukan. jQuery animate() : mengubah suatu elemen dari satu keadaan ke keadaan lainnya.
  19. 19. KEMUDAHAN YANG DITAWARKAN JQUERY • Dapat mengubah tampilan bagian halaman tertentu • Dapat mengakses bagian halaman tertentu dengan mudah • Dapat mengubah isi halaman • Dapat menambahkan animasi ke halaman • Dapat merespond interaksi user dalam halaman • Dapat mengambil informasi dari server tanpa melakukan refresh ke seluruh halaman • Dapat menyederhanakan penulisan avascript biasa
  20. 20. THANK YOU

×