ppt jquery

18
Page 1

Upload: dynov-koesoemadiwirya

Post on 07-Jul-2015

323 views

Category:

Documents


16 download

TRANSCRIPT

Page 1: Ppt jquery

Page 1

Page 2: Ppt jquery

Page 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 3: Ppt jquery

Page 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 4: Ppt jquery

Page 4

• 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).

Fungsi JQuery

Page 5: Ppt jquery

Page 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 6: Ppt jquery

Page 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 7: Ppt jquery

Page 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 8: Ppt jquery

Page 8

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

Fitur-fitur Jquery

Page 9: Ppt jquery

Page 9

5. Efek-efek dan animasi

6. Ekstensi dan Plug-ins

7. Kompatibilitas dengan hampir semua Browser modern yang ada saat ini.

8. Keperluan lain seperti : User Agent, Feature detection dan lain sebagainya.

Page 10: Ppt jquery

Page 10

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.

Cara Kerja dan Penggunaan Jquery

Page 11: Ppt jquery

Page 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 12: Ppt jquery

Page 12

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

Implementasi Jquery

Page 13: Ppt jquery

Page 13

• Kompatibel dengan hampir seluruh browser

• jQuery telah digunakan oleh website-website raksasa

• Kompatibel dengan seluruh versi CSS (dari CSS 1 sampai CSS 3)

Dokumentasi dan tutorialnya lengkap, bisa langsung dilihat di http://jquery.com

Manfaat jquery

Page 14: Ppt jquery

Page 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 15: Ppt jquery

Page 15

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

Kelebihan dan kekurangan Jquery

Page 16: Ppt jquery

Page 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 (sangat-sangat banyak) akan membebani server. Solusi: host jquery pada situs lain, seperti Google yang menyediakan request jquery dari servernya.

Page 17: Ppt jquery

Page 17

• 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.

Sintaks Jquery

Page 18: Ppt jquery

Page 18

Thank You