“JQUERY”
Pengenalan dan Implementasi JQuery
JURUSAN KURIKULUM DAN TEKNOLOGI PENDIDIKAN FAKULTAS ILMU PENDIDIKAN
UNIVERSITAS NEGERI SEMARANG 2013
Untuk Memenuhi Tugas Mata Kuliah Teknologi Informasi Dan Komunikasi
Dosen Pengampu : Septia Luthfi, S.Kom, M.Kom
Disusun Oleh : Kartin Yuliyanti
1102412091
Rombel : 01
1 Kata Pengantar
Puji syukur kami panjatkan ke hadirat Allah SWT, berkat rahmat dan karunianya kami dapat menyelesaikan makalah mata kuliah Teknologi Informasi dan Komunikasi yang berjudul pemrograman Web Jquery.
Kami sadar, makalah ini tidaklah sempurna dan masih banyak kekurangan- kekurangan, karena Tak Ada Gading Yang Tak Retak. Maka dari itu, kami sebagai penyusun, mengharapakan kritik dan saran yang membangun dari pembaca agar dapat lebih baik dalam makalah selanjutnya.
Semoga makalah ini dapat bermanfaat bagi para pembaca. Terima Kasih.
Semarang, November 2013
Penulis
2 DAFTAR ISI
KATA PENGANTAR ………... 1
DAFTAR ISI ……….... 2
BAB I PENDAHULUAN ………..……. 3
1.1 LATAR BELAKANG ……….…..… 3
1.2 RUMUSAN MASALAH ……….... 3
1.3 TUJUAN ……….... 4
1.4 MANFAAT ……….. ……….…. 4
BAB 11 PEMBAHASAN ………..…. 5
2.1 Sejarah Perkembangan jQuery ………..…. 5
2.2 Pengenalan jQuery ………... 5
2.3 Kelebihan jQuery ………. 7
2.4 Kekurangan jQuery ……….. 7
2.5 Sintaks jQuery ……….. 8
2.6 JQuery Selector ……… 9
2.7 JQuery Atribut Selector ……….. 10
2.8 Efek-Efek JQuery ………... 10
2.9 Implementasi jQuery ……….. 14
2.9.1 Event Method pada jQuery ………. 17
2.9.2 Event-Event Dasar yang sering digunakan pada jQuery …………. 21
2.10 Cara Menggunakan JQuery ……….. 26
BAB III PENUTUP ………..……….. 30
3.1 KESIMPULAN ……….. 30
DAFTAR PUSTAKA ……… 31
3 BAB I
PENDAHULUAN 1.1 LATAR BELAKANG
JQuery adalah sebuah javascript library, jQuery mempunyai semboyan
“write less, do more”. jQuery dirancang untuk memperingkas kode-kode javascript.
JQuery adalah javascript library yang cepat dan ringan untuk menangani dokumen HTML, menangani event, membuat animasi dan interakasi ajax. jQuery dirancang untuk mengubah cara anda menulis javascript. Sebelum anda memulai mempelajari jQuery, anda harus mempunyai pengetahuan dasar mengenai HTML, CSS dan Javascript.
Untuk mengoptimisasi dan meringkas penulisan library JavaScript, jQuery merupakan jawaban yang tepat dalam hal tersebut. jQuery merupakan sebuah framework dan cara baru dalam menuliskan kode JavaScript. Dengan menggunakan jQuery, kita dapat mempercepat perpindahan dokumen HTML, penanganan event(event-handling), dan pembuatan animasi didalam web untuk memperindah website yang kita buat.
Agar pengguna(user) dapat berinteraksi dengan website dan dapat mengatur tampilan pada penggunaan jQuery, diperlukan sebuah penanganan event dengan menambahkan perintah-perintah seperti click() untuk menangani event saat terjadi click, focus(), hover(), mouseout(), mouseleave(), dan lain-lainnya.
1.2 RUMUSAN MASALAH
a. Bagaimana sejarah dan perkembangan jQuery?
b. Apa saja sntaks dalam Jquery?
c. Apa kelebihan yang dimiliki jQuery?
d. Apa kekurangan yang dimiliki jQuery?
e. Bagaimana penggunaan jQuery?
f. Bagaimana implementasi Jquery?
g. Bagaimana cara menggunakan jquery?
4 1.3 TUJUAN
a. Mengetahui sejarah dan perkembangan jQuery b. Mengetahui sintaks yag dimiliki Jquery
c. Mengetahui kelebihan pada jQuery
d. Mengetahui kekurangan yang dimiliki jQuery e. Mengetahui cara penggunaan jQuery
f. Mengetahui implementasi dari Jquery g. Cara menggunakan jquery
1.4 MANFAAT
Penyusunan makalah ini diharapkan dapat bermanfaat bagi siapa saja yang membacanya. Sebagai pengetahuan tentang penggunaan jQuery, dari pengertian, sejarah dan perkembangan, kelebihan, kekurangan dan implementasinya.
5 BAB II
PEMBAHASAN
2.1 Sejarah Perkembangan jQuery
Pengertian JQuery adalah sebuah framework berbasiskan Javascript. JQuery sama dengan Javascript Library yaitu kumpulan kode atau fungsi Javascript siap pakai, sehingga mempermudah dan mempercepat kita dalam membuat kode Javascript.
Hal yang menarik dari JQuery adalah penekanan interaksi antara Javascript dan HTML. JQuery pertama kali dirilis pada tahun 2006 oleh John Resig. JQuery memiliki slogan “Write less, do more” yang artinya kesederhanaan dalam penulisan code, tapi dengan hasil yang lebih banyak. JQuery sendiri berlisensikan GNU General Public License dan MIT License.
John Resig merupakan otak dibalik jQuery, karyanya ini pertama kali diumumkan di NYC BarCamp pada awal tahun 2006. Di situs webnya dia mencatat, ia menciptakan jQuery karena ia tidak puas dengan library yang saat itu tersedia dan merasa bahwa seharusnya framework-framework tersebut bisa jauh lebih baik dengan mengurangi “syntactic fluff” dan menambahkan control khusus untuk tindakan-tindakan yang bersifat umum.
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.
2.2 Pengenalan jQuery
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.
6 JQuery memiliki slogan “Write less, do more” yang kurang lebih maksudnya adalah kesederhanaan dalam penulisan code, tapi dengan hasil yang lebih banyak.
“jQuery is a fast and concise JavaScript Library that simplifies HTML document traversing, event handling, animating, and Ajax interactions for rapid web development. jQuery is designed to change the way that you write JavaScript.”
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.
Dengan JQuery, suatu halaman web yang menjadi aplikasi web, jika dilihat sourcenya, akan terlihat seperti dokumen HTML biasa; tidak ada kode JavaScript yang terlihat langsung. Teknik pemrograman web seperti ini disebut sebagai unobstrusive JavaScript programming. JQuery merupakan salah satu librari yang membuat program web di sisi klien, tidak terlihat sebagai program JavaScript biasa, yang harus secara eksplisit disisipkan pada dokumen web. Pada teknik pemrograman sisi klien dengan menggunakan JavaScript biasa, setiap elemen yang akan memiliki event, akan secara eksplisit terlihat ada event yang dilekatkan pada elemen tersebut.
JQuery dikembangkan pertama kali oleh John Resig, yang dibuat lebih ramping dari librari Prototype yang menjadi inspirasi dari libarari JQuery ini. Secara pemrograman, JQuery memiliki kemiripan seperti Prototype. JQuery, merupakan librari yang sangat ramping, core dari librari ini dalam keadaan terkompres hanya berukuran sekitar 19KB.
Beberapa kemampuan yang dimiliki oleh JQuery sebagai berikut:
1. Kemudahan mengakses elemen-elemen HTML 2. Memanipulasi elemen HTML
7 3. Memanipulasi CSS
4. Penanganan event HTML
5. Efek-efek javascript dan animasi 6. Modifikasi HTML DOM
7. AJAX
8. Menyederhanakan kode javascript lainnya 2.3 Kelebihan jQuery
Library jQuery mempunyai kemampuan :
1. Kemudahan mengakses elemen-elemen HTML 2. Memanipulasi elemen HTML
3. Memanipulasi CSS 4. Penanganan event HTML
5. Efek-efek javascript dan animasi
6. Menyederhanakan penggunaan javascript, karena kita cukup menggunakan fungsi dari library javascript yang telah ada. Termasuk mempercepat coding javascript dalam sebuah website. Dibandingkan kita harus mulai sebuah script javascript dari nol.
7. Fungsi-fungsi yang disediakan didokumentasikan dengan baik beserta contoh penggunaannya, baca di situs http://jquery.com hal ini mempermudah dalam pembelajaran jquery.
8. Support terhadap CSS1-3 selector, untuk fleksibilitas desain antar muka halaman website dan interaksinya.
9. Website yang dibangun dengan jquery akan lebih interaktif dan menarik.
2.4 Kekurangan jQuery
1. 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.
2. Dari sisi server hosting pun, CPU dan RAM harus mengalokasikan resource yang mereka miliki untuk menangani request terhadap jquery. Pada level
8 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.
2.5 Sintaks jQuery
Sintaks jquery biasanya dibuat untuk memilih elemen-elemen HTML dan melakukan aksi terhadap elemen yang dipilih. Berikut adalah sintaks jQuery:
$(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.
Contoh :
$(this).hide()
– menyembunyikan elemen saat ini
$("p").hide()
– menyembunyikan semua paragraf atau konten dari tag <p>
$(".test").hide()
– menyembunyikan elemen yang mempunya class=”test”
$("#test").show()
– menampilkan elemen yang mempunyai id=”test”
9 Karena hampir segala sesuatu yang kita lakukan bila menggunakan jQuery membaca ataumemanipulasi document object model (DOM), kita perlu memastikan bahwa kita mulai menambahkan event segera setelah DOM siap.
Untuk melakukan hal ini, kita menambahkan kode ready event untuk dokumen.
$(document).ready(function(){
//kode anda di sini });
Kode di atas berarti kita ingin kode dijalankan apabila halaman HTML telah di- load semuanya. Atau dengan kode javascript biasanya seperti ini :
window.onload = function(){ //kode anda di sini } Sekarang mari kita lihat pada contoh
$(".tombol1").click(function(){
$("p").hide(1000);});
Kode $(“.tombol1″) adalah jQuery selektor. Di mana kita memilih elemen yang mempunyai class=”tombol1” untuk kita lakukan sesuatu. $ sendiri adalah alias untuk jQuery class. Oleh karena $() untuk membuat objek jQuery. Kemudian kita tambahkan fungsi click(). Ini berguna untuk memberikan event onclick untuk elemen yang kita pilih tadi (dalam hal ini adalah elemen yang mempunya class=’tombol1’). Dan kemudian melaksanakan fungsi yang diberikan apabila event onclick terjadi. Jadi artinya apabila elemen dengan class=”tombol1” diklik maka lakukan fungsi $(“p”).hide(1000);
Fungsi hide() dan show() adalah fungsi built in dari jQuery.
2.6 JQuery Selector
Selector memungkinkan anda untuk memanipulasi elemen HTML sebagai kelompok atau sebagai elemen tunggal. jquery elemen selectors dan attribute
