Jquery ppt

21
PENGERTIAN JQUERY Disusun Oleh : Nama : Siti Rusmiatun NIM : 2114R0811 Jurusan : Teknik Informatika

Transcript of Jquery ppt

Page 1: Jquery ppt

PENGERTIAN JQUERY

Disusun Oleh :

Nama : Siti RusmiatunNIM : 2114R0811Jurusan : Teknik Informatika

Page 2: Jquery ppt

JQuery merupakan suatu framework (library) Javascript yang menekankan bagaimana interaksi antara Javascript dan HTML. JQuery pertama kali dirilis pada tahun 2006 oleh John Resig. Pada perkembangannya JQuery tidak sekedar sebagai framework Javascript, namun memiliki kehandalan dan kelebihan yang cukup banyak. Hal tersebut menyebabkan banyak developer web menggunakannya. JQuery memiliki slogan “Write less, do more” yang kurang lebih maksudnya adalah kesederhanaan dalam penulisan code, tapi dengan hasil yang lebih banyak.

JQuery merupakan library open source dengan lisensi GNU General Public License dan MIT License. Dari sisi ukurannya, framework JQuery sungguh ramping, hanya sekitar 20 KB dan hanya terdiri dari satu file. Namun demikian, bagi yang menginginkan fungsi lebih, JQuery memungkinkan penambahan fungsionalitas dalam bentuk plugin. Saat ini tersedia ribuan plugin yang dapat diperoleh secara gratis di internet.

Apa itu JQuery ?

Page 3: Jquery ppt

Petama kali dibuat oleh John Resig pada tahun 2005, JQuery sendiri pertama kali dirilis tanggal 14 Januari 2006. Dan versi terbaru dari JQuery udah sampe versi 1.3.2. Dia terinspirasi dari Behavior code. Saat itu, Dia ngerasa hasil dari Behavior Code tidak elegan dan masih jelek, maka dikembangkannya JQuery. Dimana dengan penulisan code JQuery jadi lebih simple, gampang dan tentunya dengan hasil yang memuaskan. jQuery adalah library JavaScript OpenSource yang menekankan pada interaksi antara JavaScript dan HTML.

Apa bedanya dengan situs-situs yang tidak menggunakan JQuery? banyak bedanya, misalnya browser seakan tidak merefresh sebuah page ketika kita men-submit sebuah data kedalam server mereka. Dan lebih hebatnya lagi JQuery mempunyai animasi tanpa menggunakan flash(.swf), jadi lebih cepeat diload didalam browser dan tanpa harus install plugins.

Sejarah JQuery

Page 4: Jquery ppt

Mempunyai daya akses yang sangat cepat Karena hanya terdiri dari satu file saja dan ukurannya pun sangat kecil berkisar 20Kb

Bersifat kompatibel/ cocok dengan banyak browser popular di dunia

Mempunyai banyak komunitas yang besar dan selalu aktif serta dokumentasi yang lengkap

Banyaknya plugin yang disediakan secara cuma-Cuma (gratis ). Plugin adalah kemampuan tambahan yang bisa disertakan pada Jquery

Terdapat Jquery yang berlisensi GNU atau yang dikenal dengan free. Maka kita menggunakannya dengan tanpa dikenakan biaya apapun

Terdapat API( Application Programming Interface) di dalamnya

Mendukung Ajax ( Asynchronous Javasctip and XML) Telah banyak digunakan oleh website-website dunia sebut

saja Google, twitter, facebook dan lain-lain. Bersifat kompatibel dengan semua versi CSS dari yang

versi 1 sampai versi 3

Kelebihan JQuery

Page 5: Jquery ppt

Mempunyai tutorial, dokumentasi dan contoh-contoh yang lengkap yang bisa kita ketahui dengan membuka halaman website nya jquery.

Lebih banyak digunakan oleh para developer web dibandingkan dengan Javascript lainnya

“write less, do more” sedikit menulis tapi banyak bekerja

Menyederhanakan penggunaan javascript, karena kita cukup menggunakan fungsi dari library javascropt yang ada. Juga mempercepat coding javascript dalam sebuah website. Dibandingkan bila kita harus mulai sebuah script javascript satu per satu dari nol.

Support terhadap CSS1-3 selector, untuk fleksibilitas desain antar muka halaman website dan interaksinya

Halaman website/blog yang dibangun dengan jQuery akan lebih interaktif dan menarik, membuat para pengunjung lebih terkesan.

Page 6: Jquery ppt

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

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

Kekurangan JQuery

Page 7: Jquery ppt

Mengapa memilih JQuery?

Ada beberapa alasan mengapa lebih baik menggunakan jQuery daripada library lainnya, antara lain: 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 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 8: Jquery ppt

Kemampuan yang dimiliki JQuery

Berikut beberapa kemampuan yang dimiliki yang dapat membuat kita berdecak kagum: 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). Mampu merespon interaksi antara user dengan halaman web

dengan lebih cepat. Menyediakan fasilitas untuk membuat animasi sekelas Flash

dengan mudah.

Page 9: Jquery ppt

CARA KERJA JQUERY Cara kerja jQuery dapat dijabarkan sebagai berikut : 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

});

Page 10: Jquery ppt

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") 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: Jquery ppt

// apabila semua elemen sudah ditampilkan semua

)}; 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")

Page 12: Jquery ppt

Ok pertama - tama adalah kita harus mendownload terlebih dahulu jQuery Library (inti dari jQuery). Dimana download jQuery Library? Downloadnya di www.jquery.com , silahkan klik Download jQuery. Saat penulisan tutorial ini library jQuery telah sampai versi 1.9.1 

Pada halaman selanjutnya pilih versi jquery, ada versi Production dan versi Developer. Untuk saat ini pilih versi Production jQuery karena versi Developer ditujukan kepada para master pemrograman dan pengembang jquery.

Cara menggunakan jQuery

Page 13: Jquery ppt

Langkah-langkahnya sebagai berikut : Download terlebih dahulu jquery.js yang ada di http://jquery.com/

 di link inihttp://code.jquery.com/jquery-1.4.2.min.js atau http://code.jquery.com/jquery-1.4.2.js. Perbedaan antara link pertama dan kedua adalah link pertama “yang jquery-1.4.2.min.js” merupakan versi compress dari yang versi development “jquery-1.4.2.js”. Jadi pada dasarnya Anda hanya membutuhkan satu jenis saja untuk digunakan. Saran saya, gunakanlah yang versi development (yang kedua) supaya lebih mudah untuk dibaca Setelah itu persiapkan editor yang sering anda gunakan, seperti notepad, notepad++, scite, netbeans, ataupun eclipse.  Kali ini saya akan menggunakan notepad++ saja.

Buatlah file baru berekstensi .html dan jangan lupa file jquery-1.4.2.js  ada pada kali ini, saya memberi nama filenya jquery-latihan.html. kemudian buka jquery-latihan.html  tersebut dengan editor anda dan buat template code html biasa (tag html, head, body) 

Cara membuat website sederhana dengan jquery

Page 14: Jquery ppt

Selanjutnya kita harus meload javascript yang akan kita gunakan. Dalam hal ini yaitu jquery-1.4.2.js. Tambahkan di dalam tag headnya<head><script type="text/javascript" src="jquery-1.4.2.js"></script></head>Tahap persiapan telah selesai, sekarang saatnya kita masuk tahap main2 dengan jquery. Selanjutnya tambahkan script di bagian head seperti dibawah ini :<head>    <script type="text/javascript" src="jquery-1.4.2.js"></script>    <script>        //code ini akan dieksekusi ketika halaman ini di load pertama kali         $(document).ready(function(){            //kode-kode lainnya        });    </script></head>

Page 15: Jquery ppt

Source code “$(document).ready(function(){});” pada jquery sama halnya seperti code window.onload pada javascript biasa. Fungsi ini akan dipanggil ketika halaman html ini di load oleh browser. Nah, nantinya kode-kode jquery kita akan diletakan di dalam situ deh.$(document).ready(function(){ //disini});. “disini” –> tempat dimana anda dapat menambahkan script-script lainnya. Sekarang saya akan coba mengambil text dari body. Sebelumnya, tambahkan di dalam tag <body> sebuah kalimat apa saja. Contoh <body>    Hello World!</body>Kemudian tambahkan di tag scriptnya sehingga menjadi seperti ini :<script type="text/javascript">        //code ini akan dieksekusi ketika halaman ini di load pertama kali         $(document).ready(function(){            //kode-kode lainnya            var text = $("body").text(); //deklarasi dan inisialisasi variable text            alert(text);  //menampilkan windows alert        });    </script>

Page 16: Jquery ppt

Sekarang coba anda save dan jalankan jquery-latihan di browser anda. Ketika di load pertama kali, maka akan muncul windows alert”.Yang menampilkan “Hello World!Perhatikan baris $(“body”).text(), $(“body”) merupakan salah satu contoh “Selector” terhadap suatu tag html (body). Keterangan lebih lengkap mengenai selectors di jquery ada disini : http://docs.jquery.com/Selectors. Kemudian .text() bermakna mengambil semua text dalam suatu “selectors” tertentu, dalam hal ini adalah body. Kemudian hasilnya (bertipe string) disimpan dalam variable bernama text dan ditampilkan kelayar dengan fungsi alert bawaan javascript. “alert” bukan fungsi jquery tapi fungsi “native” javascript. Cobalah anda load halaman html anda, maka akan muncul alert yang isinya text dalam tag body anda. 

Page 17: Jquery ppt

Perbedaan dari definisi javascript dan jqueryJavascript adalah bahasa pemrograman yang dirancang untuk

berjalan di lingkungan klien yang dikombinasikan dengan dokumen HTML. Javascript dijalankan dengan bantuan browser sehingga dapat melakukan interaksi dengan user, melakukan kontrol browser dan memanipulasi dokumen web saat ditampilkan.

Sedangkan jquery adalah komponen/librari/framework yang dibuat dari javascript dengan tujuan memudahkan seorang programmer dalam menggunakan fungsi-fungsi yang lebih rumit. Dengan jquery, seorang programmer bisa lebih leluasa dan mudah melakukan kontrol/manipulasi halaman web. Oleh karena kemudahan tersebut jquery memiliki semboyan "write less, do more" yang bisa kita artikan dengan sedikit menulis kode tapi dapat melakukan banyak hal.

Jquery dibangun dengan berorientasi objek sehingga akan lebih optimal dan memiliki kemampuan yang lebih luas untuk menciptakan serta memanipulasi halaman web yang dikirimkan ke browser pengguna.

PERBEDAAN JQUERY DENGAN JAVASCRIPT

Page 18: Jquery ppt

Mari kita lihat bagaimana penulisan javascript dan javascript untuk melakukan sebuah manipulasi background dokumen html berikut :?1<script language="javascript">2function changeBackground(color)3{4document.body.style.background = color;5}6onload="changeBackground('red');“7</script>?1</script>2$('body').css('background', '#ccc');3</script>

Page 19: Jquery ppt

Dari script diatas bisa anda lihat, bahwa jquery lebih bepusat pada objek sehingga cara melakukan perubahannya akan lebih sederhana.See more at: http://www.zainalhakim.web.id/posting/perbedaan-javascript-dan-jquery.html#sthash.JL5MyJG0.dpuf

Page 20: Jquery ppt

He is my lecturerHis name is Septia lutfi

Page 21: Jquery ppt

It’s me, My name is Siti Rusmiatun