Makalah ini membahas tentang pengantar bahasa pemrograman Jquery untuk membantu memahami bagaimana menggunakan Jquery dalam membangun blog atau website agar menjadi lebih menarik dan dinamis. Jquery adalah library JavaScript yang memudahkan manipulasi HTML, menangani event, dan menambahkan efek seperti animasi. Makalah ini juga menjelaskan sejarah, kegunaan, sintaks dasar, selector, event, dan berbagai efek visual yang ditawark

1. Nama : Ristianawati
NIM : 2114R0800

2. A. Latar Belakang
Saat ini perkembangan ilmu komunikasi dan teknologi informasi sangatlah
cepat diikuti dengan berkembangnya teknologi internet yang memudahkan
manusia dalam meringankan pekerjaan dan mempermudah dalam
berkomunikasi dan saling tukar menukar informasi.
Internet telah menyediakan berbagai fasilitas seperti, e-mail, www(world wide
web) dan blog. Perkembangan blog pun semakin cepat terbukti dengan
semakin bayaknya orang yang menggunakan blog sebagai media informasi
dunia maya. Sekarang telah terdapat jutaan blog dengan pertumbuhan yang
sangat signifikan.
Dalam pembuatan web atau blog, agaknya para pecinta-pecinta blog ini
memerlukan pengetahuan yang cukup dan mendalam tentang bahasa
pemograman khususnya Jquery. Oleh sebab itu besar harapan penulis agar
makalah ini dapat digunakan para pemula dalam membangun sebuah web
yang menarik.
B. Rumusan Masalah
1. Bagaimana sejarah perkembangan berdirinya Jquery?

3. 2. Apa kegunaan Jquery?
3. Apa saja sintaks Jquery?
4. Apa itu Jquery Selectors?
5. Apa itu Jquery Events?
6. Apa saja efek-efek yang disuguhkan Jquery?
7. Bagaimana kinerja Jquery dalam memanipulasi HTML?
8. Bagaimana implementasi Jquery?
9. Apa saja kelebihan dan kekurangan Jquery?
10. Beberapa gambar Jquery Plugin Slider.
C. Tujuan
Tujuan pembuatan makalah ini yaitu untuk membantu memperkenalkan bahasa
pemograman Jquery bagi para pembuat blog atau website agar lebih paham
bagaimana tata cara menggunakan Jquery sebagai bahan pembuatan blog atau
website sehingga blog yang dibuat menjadi lebih menarik dan dinamis.
D. Manfaat
Penulis berharap makalah ini dapat bermanfaat bagi para pemula-pemula
developer blog/website, yang tadinya kurang begitu paham mengenai Jquery
menjadi lebih memahami bahasa pemograman Jquery, sehingga blog/website
yang sedang dikembangkan menjadi lebih menarik dan dinamis berkat bantuan
Jquery.

4. A. Sejarah
Jquery adalah sebuah program JavaScript kecil bersumber terbuka yang menekankan
pada interaksi antara JavaScript dan HTML. Pustaka ini diliris pada januari 2006 di
BarCamp NYC oleh John Resig dan berlisensi ganda dibawah lisensi MIT dan GPL.
Microsoft dan Nokia telah mengumumkan akan mengemas Jquery di plaform mereka.
Microsoft awalnya mengadopsinya dalam Visual Studio untuk digunakan dalam
ASP.NET AJAX dan ASP.NETMVC Framework.
Sedangkan Nokia akan mengintegrasikannya dalam kerangka Web Run-Time. Jquery
dikembangkan pertama kali oleh John Resig pada tahun 2005 yang terinspirasi dari
kode Behavior. Saat itu, John merasa hasil dari kode Behavior tidak elegan, bahkan
jelek. Maka dikembangkan Jquery, dimana penulisan kode jadi lebih simple dengan
hasil yang menyenangkan. Jquery sendiri pertama kali diliris tanggal 14 Januari 2006.
Jquery adalah library JavaScript yang gratis dan open scure. Oleh karenanya Jquery
dapat digunakan dengan bebas untuk keperluan pengembangan website. Tanpa library
seperti Jquery, menerapkan JavaScript mungkin akan lebih sulit terutama untuk
pemula yang baru belajar JavaScript. Plugin tambahan seperti Jquery UI(user interface)
semakin memudahkan pengguna untuk mengembangkan website yang cantik dan
interaktif. Selain itu tersedia plugin-plugin lain yang makin memperkaya kemampuan
Jquery.

5. B. Kegunaan JQuery
Banyak sekali hal-hal yang dapat dilakukan oleh JQuery, diantaranya yaitu:
1. Mengubah tampilan bagian halaman tertentu.
CSS (Cascading Style Sheet) menawarkan metode yang cukup handal dalam mengatur
dan mempercantik halaman web. Namun terkadang CSS punya kelemahan yang cukup
mengganggu, yaitu beberapa perintah CSS tidak didukung oleh semua browser. Cukup
merepotkan jika kita harus mendesign halaman web dengan beberapa CSS sekaligus.
Sekali lagi JQuery menawarkan solusi untuk mengatasi hal tersebut. Dengan JQuery,
“kesenjangan” yang terjadi antara browser dalam urusan CSS akan tertutup dengan baik.
2. Mengakses bagian halaman tertentu dengan mudah.
Tanpa adanya library Javascript khusus, untuk mengakses suatu bagian tertentu dari
halaman, harus mengikuti aturan Document Object Model (DOM) dan pengaksesan
harus secara spesifik menyesuaikan dengan struktur HTML. Dengan kata lain,
pengaksesan bagian tertentu dari halaman sangat tergantung pada struktur dari HTML.
JQuery menawarkan cara yang mudah (bahkan sangat mudah) dalam mengakses bagian
tertentu dari halaman. Pengaksesan juga tidak terlalu bergantung pada struktur HTML.
3. Mengubah isi dari halaman.
Jaman dulu cukup sulit jika kita akan mengubah sebagian isi dari halaman. Mengubah
disini dapat berarti mengganti teks, menambahkan teks atau gambar, mengurutkan
suatu daftar (list), menghapus baris tabel dan sebagainya. Dengan JQuery, hal tersebut
dapat dilakukan dengan hanya beberapa baris perintah.

6. 4. Merespon interaksi user dalam halaman
Website yang baik tidak cukup digambarkan dengan user-interface dan tampilan yang
memukau. Namun lebih dari itu, bagaimana pengunjung dapat berinteraksi dengan
website dan dapat mengatur tampilannya sendiri. Interaktivitas sangat bergantung
bagaimana pemrograman yang dipakai dalam menangani event-handling. Javascript
sendiri memiliki beberapa event-handling seperti onclick untuk menangani event saat
terjadi click. Namun demikian, event handling pada Javascript terbatas pada object-
object tertentu, dan jenisnya pun terbatas. JQuery melengkapi semuanya dengan
tambahan penanganan event-handling yang semakin mudah.
5. Menambahkan animasi ke halaman.
Animasi seringkali disertakan dalam suatu halaman web untuk menambah
kecantikannya. Saat ini animasi masih cukup digemari oleh para peselancar situs.
Animasi dapat dibuat dalam berbagai gaya, ada yang menggunakan Flash, gambar
bergerak (GIF), video, dan sebagainya. Masing-masing tentu memiliki kelebihan dan
kekurangan masing-masing. JQuery sendiri menawarkan konsep animasi (walaupun
masih sederhana) yang cukup apik namun ramah bandwidth alias ringan. Salah satu
animasi yang bisa dibuat dengan JQuery adalah fading jika terdapat suatu bagian dari
halaman ditambahkan atau dihilangkan.
6. Mengambil informasi dari server tanpa merefresh seluruh halaman.
Mengambil informasi dari server tanpa refresh halaman merupakan salah satu konsep
dasar dari yang namanya AJAX (Asynchronous Javascript and XML). Pada penerapannya,
cukup ribet jika harus membangun website dengan konsep AJAX, saat ini banyak library
khusus yang berusaha mempermudahnya. JQuery merupakan salah satunya.

7. 7. Menyederhanakan penulisan javascript biasa.
Semboyan JQuery adalah “Write less, do more” atau dengan kata lain kesederhanaan
dalam penulisan code, tetapi menghasilnya tampilan yang lebih. Sebenarnya inilah yang
menjadi daya tarik tersendiri buat para pengembang web untuk menggunakan JQuery.
C. Sintaks JQuery
Sintaks jquery biasanya 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.
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"
Karena hampir segala sesuatu yang kita lakukan bila menggunakan jQuery membaca
atau memanipulasi 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.

8. 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, nanti akan kita lihat lebih
lanjut fungsi-fungsi built in dari jQuery.
D. JQuery Selectors
Selectors memungkinkan Anda untuk memanipulasi elemen HTML sebagai kelompok
atau sebagai elemen tunggal. Pada penjelasan sebelumnya kita telah melihat contoh cara
memilih elemen HTML menggunakan jQuery.
JQuery element selectors dan attribute selectors memungkinkan Anda untuk memilih
elemen HTML (atau kelompok elemen) dengan nama tag, nama atribut atau konten.
Selectors memungkinkan Anda untuk memanipulasi elemen HTML sebagai kelompok
atau sebagai elemen tunggal.
1. JQuery Element Selectors, jQuery mirip CSS dalam hal memilih elemen HTML.
$("p") memilih semua elemen <p>
$("p.intro") memilih semua elemen <p> yang mempunyai class="intro".
$("p#demo") memilih elemen <p> yang mempunyai id="demo".

9. 2. JQuery Attribute Selectors, JQuery mirip XPath dalam hal memilih elemen
berdasarkan atribut yang ada.
$("[href]") memilih semua elemen dengan atribut href.
$("[href='#']") memilih semua elemen dengan atribut href bernilai="#".
$("[href!='#']") memilih semua elemen dengan atribut href dengan nilai bukan sama
dengan "#".
$("[href$='.jpg']") memilih semua elemen dengan atribut href yang mengandung ".jpg".
E. JQuery Events
Salah satu kemampuan utama jquery adalah menangani
event. Dalam pemograman jquery, biasanya kode-kode pemograman diletakkan di
dalam penanganan event yang terjadi pada suatu atau kelompok elemen yang dipilih.
Hampir-hampir mirip dengan Visual Basic, biasanya suatu kode dijalankan apabila
ada sesuatu yang terjadi
(event) pada suatu elemen. Misalnya, kalau ada tombol di klik, maka action atau
kode apa yang dijalankan, apabila ada combox dipilih, kode apa yang dijalankan,
pada contoh jquery sebelumnya :
$(".tombol1").click(function(){
$("p").hide(1000);
});
Kode di atas berarti apabila terjadi event mengklik elemen yang mempunyai
class=’tombol1’, maka lakukan fungsi hide() terhadap semua element <p>.

10. F. Efek-efek JQuery
Salah satu kemampuan jquery adalah, adanya fungsi-fungsi efek yang siap pakai.
Biasanya untuk membuat efek memudar di javascript, kita harus membuat
kode yang lumayan panjang. Tapi dengan menggunakan jquery cukup menggunakan fungsi
$(selector).
Berikut adalah efek-efek siap pakai yang disediakan oleh jquery.
1. jQuery show Effect
Berguna untuk menampilkan elemen yang tersembunyi. Untuk mengatur elemen
yang tersembunyi melalui CSS adalah display:none (bukan visibility:hidden).
Parameter Deskripsi speed Opsional. Menentukan kecepatan elemen muncul dari hidden ke
visible. Defaultnya adalah 0. Nilainya bisa berupa:
· milliseconds (contoh : 1500)
· "slow"
· "normal"
· "fast"
Contoh :
Kode 13. Contoh show()
<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){

11. 2. jQuery hide Effect
Berfungsi untuk menyembunyikan elemen yang dipilih. Sintaks :
$(selector).hide(speed,callback)
Untuk parameter speed dan callback adalah sama dengan show() effect. Contoh :
$(".tombol1").click(function(){
$("p").hide();});
3. jQuery toggle Effect
Adalah gabungan fungsi hide dan show. Jadi toggle() berfungsi menampilkan
yang tersembunyi, menyembunyikan yang tampak.
Sintaks :
$(selector).toggle(speed,callback,switch)
Parameter Deskripsi speed Opsional. Menentukan kecepatan elemen muncul dari hidden ke
visible. Defaultnya adalah 0. Nilainya bisa berupa:
· milliseconds (contoh : 1500)
· "slow"
· "normal"
· "fast
Callback Opsional. Suatu fungsi yang akan dijalankann apabila efek show selesai dijalankan.
4. jQuery slideDown Effect
Menampilkan elemen yang tersembunyi, secara efek sliding. Sintaks :
$(selector).slideDown(speed,callback)

12. 5. jQuery slideUp Effect
Menyembunyikan elemen secara efek sliding. Sintaks :
$(selector).slideUp(speed,callback)
Untuk parameter speed dan callback adalah sama dengan fungsi show. Contoh:
$(".tombol1").click(function(){
$("p").slideUp();
});
6. jQuery slideToggle Effect
Gabungan antara slideDown() dan slideUp(). Menyembunyikan elemen jika
dalam keadaan visible, menampilkan elemen jika dalam kedaan hidden.
Sintaks :
$(selector).slideToggle(speed,callback)
Untuk parameter speed dan callback adalah sama dengan fungsi show.
7. jQuery fadeIn Effect
Menampilkan elemen yang dipilih jika tersembunyi, secara efek memudar. Sintaks :
$(selector).fadeIn(speed,callback)
8. jQuery fadeOut Effect
Menyembunyikan elemen yang dipilih, secara efek memudar. Sintaks:
$(selector).fadeOut(speed,callback)

13. 9. jQuery fadeTo Effect
Mengatur tingkat kepudaran elemen terpilih menuju tingkat opacity yang ditentukan.
Sintaks:
$(selector).fadeTo(speed,opacity,callback)
Untuk parameter speed dan callback adalah sama dengan fungsi show(). Untuk
parameter opacity bisa bernilai 0 sampai 1.
Mengubah suatu elemen dari satu keadaan ke keadaan
yang lainnya. Keadaan yang diubah ini berdasarkan CSS.
Nilai properti CSS yang berubah secara berangsur-angsur, hal ini untuk menciptakan
efek animasi. Nilai properti CSS yang bisa diubah adalah nilai bertipe
angka, baik satuannya pixel atau persen%. Untuk tipe string tidak bisa dianimasikan.
Sintaks:
$(selector).animate(styles,speed,easing,callback)
Parameter Deskripsi styles Wajib. Menentukan properti CSS dan nilainya yang akan di
animasi.
Properti CSS yang bisa di-animasi :
· backgroundPosition
· borderWidth
· borderBottomWidth
· borderLeftWidth
· borderRightWidth
· border Top width
. border Spacing

14. Speed Opsional. Menentukan kecepatan elemen muncul dari hidden ke visible. Defaultnya
adalah 0. Nilainya bisa berupa:
· milliseconds (contoh : 1500)
· "slow"
· "normal"
· "fast"
Easing Opsional. Menentukan fungsi easing yang diset pada speed animasi. Callback
Opsional. Suatu fungsi yang akan dijalankann apabila efek show selesai dijalankan.
11.jQuery stop Effect
Menghentikan animasi yang sedang berjalan. Sintaks :
$(selector).stop(stopAll,goToEnd)
Parameter Deskripsi:
StopAll Opsional. Bernilai boolean, menentukan apakah menghentikan semua animasi,
termasuk yang ngantri untuk dijalankan pada elemen yang dipilih atau tidak.
Go To End Opsional. Bernilai Boolean, menentukan apakah animasi yang sedang jalan
dikompletkan atau tidak.
Parameter ini hanya bisa digunakan jika parameter stopAll di-set.
G. Manipulasi HTML dengan jQuery
jQuery mempunyai kemampuan yang powerfull dalam hal memanipulasi, mengambil atau
menambah konten, dan sebagainya terhadap HTML.
Untuk me-set konten (biasanya kita sebut innerHTML) dari elemen HTML yang dipilih kita
gunakan.
$(selector).html(content).

15. Apabila parameter content tidak kita tentukan maka fungsi html() berguna untuk
mendapatkan konten dari HTML.
Parameter properties adalah nama properti yang ingin kita ambil atau
set. Contoh properti misalnya : id, class, title, src, href dan sebagainya.
Parameter nilai, apabila kita isi artinya kita me-set nilai properti yang kita tetukan,
apabila kosong artinya kita mengambil nilai properti yang kita tentukan.
H. Implementasi Jquery
Kemudahan atau kenapa orang banyak menggunakan framework javascript ini adalah
karena banyaknya plugin aplikasi yang siap jadi atau siap digunakan. Plugin adalah
semacam fungsi atau fitur tambahan yang digabungkan ke dalam sebuah JQuery
mempercepat atau memudahkan dalam pembangunan sebuah website.
Dibawah ini adalah beberapa plugin jquery yang sering digunakan oleh beberapa web
developer dalam membuat atau membangun sebuah website, diantaranya:
1. Drop-Down-Menu
Jika dalam sebuah website terdiri dari beberapa menu, dan dari menu tersebut ada sub
menu lagi, maka cocok menggunakan drop down menu. Drop down menu ini juga
mendukung multi level menu (menjadi sub-sub menu yang lebih banyak), selain itu
menu dropdown ini juga dilengkapi dengan fasilitas timeout effect. Timeout effect ini
digunakan ketika lama waktu mouse over atau mouse out.
2. Tool-Tips
Tool tips adalah bubble/gelembung atau semacam kotak informasi digunakan untuk
menginformasikan sesuatu ketika mouse didekatkan pada sebuah teks, gambar, tombol
atau elemen lain dalam sebuah web yang muncul diatas elemen tersebut. Biasanya
informasi yang disuguhkan adalah informasi yang pendek. Cara kerjanya adalah ketika
mouse didekatkan, maka akan muncul bubble.

16. Fasilitas lebih dari bubble ini adalah desainnya yang cantik, seperti fasilitas tombol close,
background shadow, dll.
3. Autocomplete-Search
Plugin ini digunakan untuk melakukan pencarian secara real time, dimana ketika kita
memasukan kata atau huruf dalam sebuah teks input dalam sebuha web, secara otomatis hasil
pencarian akan muncul seusai dengan yang kita masukan secara real time. Plugin ini mirip
seperti pencarian pada website facebook, sehingga sangat menarik untuk dicoba.
4. Validasi-Form
Plugin ini digunakan untuk melakukan validasi data dalams sebuah form, seperti pengecekan
e-mail, pengecekan password, username dan input lainnya secara real time (tidak menekan
tombol submit). Jadi ketika user memasukan teks atau huruf, maka plugin ini akan melakukan
validasi terhadap inputan user.
Web Sitenya.
5. jQuery-Cycle-Plugin
Plugin ini digunakan untuk animasi image dalam sebuah website, plugin ini menggantikan
fungsi flash sebagai animasi. Jadi dengan plugin ini, kita bisa menganimasikan image yang ada
menjadi sebuah animasi seperti fade in, fade out, slide show, scroll dan banyak lagi efek yang
lainnya.
6. Teks-Berjalan
Plugin ini digunakan untuk memannipulasi teks, sehingga teks yang kita tampilkan kelihatan
menarik, seperti berjalan dari kiri ke kanan atau sebaliknya atau dari atas ke bawah, mirip
fungsi marquee dalam tag HTML,

17. tetapi dengan plugin ini, teks berjalan lebih lembut dan lebih banyak variasi.
I. Kelebihan dan Kekurangan 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, bisa langsung dilihat di http://jquery.com
· 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
1. KELEBIHAN :
· 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.
· Fungsi-fungsi yang disediakan didokumentasikan dengan baik beserta contoh
penggunaannya, baca di situs http://jquery.com hal ini mempermudah dalam
pembelajaran jquery.

18. Support terhadap CSS1-3 selector, untuk fleksibilitas desain antar muka halaman website dan
interaksinya.
· Website yang dibangun dengan jquery akan lebih interaktif dan menarik.
2. KEKURANGAN :
· 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.
J. Macam Plugin Jquery Slider
1. JCoverflip
JCoverflip telah dikembangkan untuk memungkinkan kecepatan dan meng-customize look
and feel lebih rinci dan set fitur.
2. Coin Slider
Plugins JQuery Image Slider ini menggunakan effect yang sangat unik.
3. loopedSlider
loopedSlider JQuery Plugin
4. Nivo Slider
Nivo Slider adalah salah satu contoh Plugins JQuery yang sangat mengagumkan.

19. 5. Colorful Sliders dengan jQuery & CSS3
Trasformasi fitur baru yang dihadirkan oleh CSS 3 untuk membuat efek slider dinamis
tiga dimensi. Teknik kyang digunakan disini, adalah membuat slider dan CSS bar yang
dinamis, dapat digunakan secara bersama-sama atau sebagian saja.
6. Automatic Image Slider dengan CSS & jQuery
The html based image slider will have its benefits with SEO and will also degrade
gracefully for those without js.
7. The Lof SiderNews Plugin
Berdasarkan JQuery Framework dan Plugin Easing, The JSiderNews Plugin adalah plugin
slideshow yang menampilkan gambar atau jenis konten dan dukungan navigasi favious
ke item berikutnya | sebelumnya.

20. A. Kesimpulan
JQuery merupakan salah satu bahasa pemrograman yang disukai oleh para developer
blog/website. Ini dikarenakan dari semboyan jQuery sendiri yakni “write less do more”
yang artinya menulis sedikit tetapi menghasilkan lebih. Maksudnya, dalam penulisan
jQuery mencoba untuk memberikan kode-kode yang sederhana akan tetapi
menghasilkan tampilan yang lebih. Selain itu jQuery juga mudah dipahami bagi para
pemula, oleh karena itu tidak salah apabila saat ini jQuery menjadi salah satu bahasa
pemrograman yang sangat disukai para developer blog/website.