Talk Less Do More..: MAKALAH JQUERY

MAKALAH

PENGGUNAAN JQUERY

Makalah ini disusun untuk memenuhi tugas individu mata kuliah

Teknologi Informasi dan Komunikasi

Oleh :

RISA ANDRIYANI (1102412011)

ROMBEL 02

KURIKULUM DAN TEKNOLOGI PENDIDIKAN

FAKULTAS ILMU PENDIDIKAN

UNIVERSITAS NEGERI SEMARANG

2013

KATA PENGANTAR

Puji syukur saya panjatkan ke hadirat Alah SWT, yang telah memberikan rahmat dan karunianya kepada kita semua. Tentunya saya sebagai penyusun telah menyelesaikan tugas ini dengan baik.

Rupanya saya menyadari bahwa Makalah ini memang belum mencapai kesempurnaan, masih banyak kekurangan-kekurangan yang harus diperbaiki. Maka untuk itu, saya sebagai penyusun mengharapkan kritik dan saran yang membangun dari para pembaca agar dapat memperbaiki dalam penulisan Makalah yang saya buat selanjutnya.

Akhirnya saya sebagai penyusun berharap, semoga Makalah yang saya buat dapat menambah wawasan kepada saya pada khususnya dan kepada para pembaca pada umumnya.

Semarang, November 2013

Penyusun

BAB I

PENDAHULUAN

1.1 Latar Belakang

Dalam dasawarsa ini perkembangan ilmu komunikasi dan teknologi informasi sangat pesat, hal ini ditandai dengan berkembangnya teknologi internet yang memudahkan maunisa dalam meringankan pekerjaan dan mempermudah dalam berkomunikasii dan saling tukar menukar informasi.

Internet telah menyediakan berbagai faslitas seperti, e-mail, www (world wide web), dan blog. Perkembangan blog pun semakin cepat terbukti dengan semakin banyaknya orang yang menggunakan blog sebagai media informasi dunia maya. Sekarang telah terdapat jutaan blog dengan pertumbuhan yang sangat signifikan.

Jika dahulu web hanya bisa diakses dengan baik melalui sebuah komputer, saat inibagaimanapun caranya, sebuah web juga harus bisa menyesuaikan berbagai ukuran perangkat portabel, seperti high-end handheld, smartphone, juga tablet. Kali ini saya akan melakukan review tentang jQuery Mobile Framework, dimana framework ini adalah salah satu yang terbaik dibidangnya.

1.2 Rumusan Masalah

Berdasarkan latar belakang di atas, Ada beberapa rumusan masalah yang saya jadikan pokok bahasan dalam makalah ini, yaitu :

1. Apa pengertian JQuery?

2. Bagaimana sejarah perkembangan JQuery?

3. Apa kelebihan dan kekurangan JQuery?

4. Apa saja fungsi JQuery?

5. Apa fitur-fitur yang ada dalam JQuery?

6. Apa manfaat JQuery bagi seorang Web Designer?

7. Mengapa menggunakan JQuery?

8. Apa kemampuan yang dimiliki JQuery?

9. Apa kemudahan yang ada pada JQuery?

10. Apa saja sintak dalam JQuery?

11. Bagaimana cara mengimplementasikan JQuery?

12. Apa sajakah contoh dari JQuery?

13. Bagaimana cara kerja JQuery?

14. Beberapa Fakta lain JQuery

15. Mengapa JQuery menjadi library Javascript yang terbaik yang ada?

16. Hal-hal apa saja yang dapat dilakukan JQuery?

1.3 Tujuan Penulisan

1. Untuk memenuhi salah satu tugas dari dosen mata kuliah “Teknologi Informasi dan Komunikasi”

2 Untuk menambah wawasan dan ilmu pengetahuan khususnya dalam bidang teknologi informasi dan komunikasi.

3 Melatih mahasiswa menyusun makalah dalam upaya lebih meningkatkan pengetahuan dan kreatifitas mahasiswa.

4 Agar mahasiswa lebih memahami dan mendalami pokok bahasan khususnya tentang JQuery.

1.4 Manfaat Penulisan

Dalam penulisan makalah ini, memiliki manfaat bagi beberapa pihak, yaitu;

1. Bagi penulis adalah untuk mengetahui hal-hal yang berhubungan dengan JQuery.

2. Bagi pembaca adalah pembaca bisa mengetahui mengenai hal-hal yang berhubungan dengan JQuery setelah membaca makalah ini.

3. Bagi masyarakat, masyarakat mampu mengetahui dengan lebih tentang JQuery dan bisa menjadi acuan atau refrensi yang berkenaan dengan JQuery.

BAB II

PEMBAHASAN

1. Pengertian JQuery

JQuery adalah library JavaScript yang memungkinkan kita untuk membuat program web pada suatu halaman web, tanpa harus secara eksplisit kita menambahkan event atau pun properti pada halaman web tersebut. 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.

Dalam perkembangannya jQuery terus memunculkan versi-versi terbarunya yang dapat diunduh secara gratis dalam situs resmi jQuery. Tidak hanya itu jQuery juga menyediakan tambahan-tambahan plugin untuk menambah beberapa fungsionalitas. Jquery juga menyediakan layanan atau support para developers untuk membuat plug-ins di dalam bahasa Javascript tentunya. Sehingga lebih memungkinkan para developer website membuat website lebih interaktif dengan animasi, efek – efek, tema dan widget. Dengan menggunakan Jquery dapat pula dijadikan sebagai media untuk meluapkan kreatifitas untuk membuat website dinamis dan lebih menarik tentunya.

2. Sejarah Perkembangan JQuery

John Resig pada tahun 2005 merupakan pembuat JQuery pada kali pertama, yng diumumkan di NYC BarCamp pada tanggal 14 Januari 2006. Di situs webnya dia mencatat, ia menciptakan JQuery karena ia tidak puas dengan library yang saat itu tersedia dan merasa bahwa seharusnya framwork-framwork tersebut bisa jauh lebih baik dengan mengurangi “syntactic fluff” dan menambahkan kontrol khusus untuk tindakan-tindakan yang bersifat umum.

Para pengembang datang untuk membantu menyempurnakan library 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 tersedia dari komunitas pengembang. Sebuah plug-in adalah ekstensi dari JQuery yang bukan bagian dari librari inti.

Semenjak dirilis pertama kali pada tahun 2006 oleh john Resig, jQuery telah mencuri perhatian para developer web. Buktinya, pada tahun-tahun 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. Bahkan website lokalpun tidak mau ketinggalan, Lihat saja Detik, Studio 21 (21cineplex.com). Indosiar, Vivanews, Kompas, termasuk Ilmu Grafis tentunya dan lain-lain.

3. Kelebihan dan Kekurangan JQuery

Kelebihan JQuery :

· Menyederhanakan penggunaan javascipt, 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 didokumentasian dengan baik beserta contoh penggunaanya, hal ini mempermudah dalam pembelajaran JQuery.

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

· Website yang dibangun dengan jquery akan lebih interaktif dan menarik.

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

4. fungsi JQuery

Beberapa fungsi yang ada pada jQuery, diantaranya sebagai berikut :

1. .add()

fungsi add() digunakan untuk menambahklan elmen berupa text, tag html ke dalam sebuah content (tag html = input, textarea, div dll).

2. .append()

fungsi .append() digunakan untuk menambahkan suatu elment berupa text, html dll hampir sama dengan fungsi .add().

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

4. .addClass()

fungsi .addClass() digunakan untuk menambahkan nilai class pada attribut html.

5. .find()

fungsi .find() digunakan untuk mencari suatu attribut dalam html seperti elmen html (div, form, input dll), attribut html (title, class, id dll)

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

5. Fitur-fitur yang terdapat pada JQuery

Seperti yang kita ketahui bahwa JQuery adalah sebuah framework/library JavaScript yang dapat membantu kita mempermudah dan mempercepat pengolahan DOM pada halaman web.

Dengan jQuery kita dapat membuat web lebih menarik dan interaktif dengan mudah. jQuery sudah mengautomasi pekerjaan-pekerjaan yang umum dan mempersimple code yang kompleks. Library ini sangat kecil dan mempunyai banyak pluggin yang dapat mempermudah kita.

Adapun fitur-fitur yang ditawarkan oleh jQuery antara lain :

· Mempermudah akses dan manipulasi ke bagian page tertentu. jQuery menawarkan sebuah selector yang robust dan efesien untuk mengambil bagian tertentu pada dokumen yang selanjutnya bisa dimanipulasi.

· Mempermudah perubahan tampilan dokumen. jQuery dapat mengubah tampilan CSS dengan mudah. Sehingga pengguna tanpa susah mengubahnya karena dengan kemudahan tersebut diharapkan pengguna jquery tanpa repot-repot jika menginginkan perubahan karena bisa terlaksana dengan mudah sekali.

· Merespon interaksi user dengan webpage. jQuery mempunyai cara yang sangat-sangat elegan untuk memasukkan sebuah even ke dalam salah satu bagian dari webpage. Sehingga dapat membedakan dari lainnya.

· Menambah animasi. Kita dapat memberi animasi pada webpage kita dengan jQuery, dengan tersebut diharapkan pengguna tidak bosan dengan tampilannya karena bisa dimasukan dengan animasi animasi yang diinginkan pengguna semisal animasi atau tokoh kartun kesayangan sehinga dengan hal tersebut pengguna tidak cepat bosan dalam menggunakan nya.

· Mempermudah AJAX.

6. Manfaat JQuery bagi seorang Web Designer

Berikut beberapa manfaat jQuery bagi seorang Web Designer, diantaranya adalah:

· Membuat penggunaan Javascript lebih sederhana, karena cukup memakai fungsi dari library javascript yang tersedia.

· Meringkas kode javascript dalam membuat sebuah website. Jika dibandingkan apabila harusmemulai sebuah Javascript mulai dari awal.

· Setiap fungsi yang disediakan di dokumentasikan dengan sistematis bersama contoh penggunaanya. Hal ini memudahkan dalam mempelajari jQuery.

· Dapat menambahkan animasi kedalam website.

· Mendukung CSS1-3 selector, yang membuat website lebih fleksibel antar halaman depan website dengan interaksinya.

7. Mengapa menggunakan JQuery?

Ada beberapa keunggulan jQuery dibandingkan Javascript Library pendahulunya seperti Phototype, Mootools , YUI (Yahoo User Interface), dan Dojo? Berikut beberapa alas an yang membuktikan jQuery sangat powerfull dan layak dijadikan pilihan, yaitu:

jQuery telah banyak digunakan oleh website-website terkemuka di dunia.
Kompatibel/cocok dengan semua browser yang popular, seperti Mozila, Internet Explorer, Safari, Chrome, Opera.
Kompatibel dengan semua versi CSS (CSS 1 sampai dengan CSS 3)
Dokumentasi, tutorial dan contoh-contohnya lengkap, silahkan kunjungi website resminya dihttp://jquery/com
Didukung oleh komunitas yang besar dan aktif, seperti forum,milis, blog, social engineering (twitter dan facebook), website, dan tutorial.
Ketersediaan plugin yang sangat banyak jumlahnya. Plugin merupakan kemampuan tambahan yang bisa disertakan pada jQuery.
Filenya hanya satu dan ukurannya pun kecil, hanya sekitar 20 KB, sehingga cepat diakses
Open source/free (gratis) dengan lisensi dari GNU General Public Lisence dan MIT License.
jQuery lebih banyak digunakan oleh para developer web dibandingkan Javascript Libary lainnya

8. Kemampuan yang dimiliki JQuery

Ada beberapa kemampuan yang dimiliki JQuery yaitu :

Mempermudah akses dan manipulasi elemen tertentu pada dokumen.

Biasanya diperlukan baris program yang cukup panjang untuk mengakses suatu elemen dokumen . Namun , jQuery dapat melakukannya hanya dalam beberapa baris program saja. Karena jQuery menpunyai Selector yang sangat efisien untuk mengakses suatu elemen tertentu pada dokumen yang selanjutnya bisa dimanipulasi sesuai dengan keinginan kita.

Mempermudah modifikasi/perubahan tampilan halaman web.

Biasanya untuk memodifikasi tampilan halaman web digunakan CSS. Permasalahannya, CSS sangat dipengaruhi oleh web browser yang digunakan sehingga Sering terjadi halaman web yang dibuat sudah rapi dan bagus tampilannyadi browser Mozilla, namun ketika ditampilkan di Opera menjadi berantakan. Namun, jQuery dapat menyesuaikan style CSS pada semua browser, sehingga permasalahann tersebut dapat dihindari.

Mempersingkat Ajax (Asynchronous Javascript and XML)

Kemampuan favorit dari Ajex adalah mampu mengambil informasi dari server tanpa melakukan refresh pada halaman web, artinya halaman web terlihat berganti secara otomatis. Apabila kita menuliskan kode Ajax secara manual, biasanya diperlukan baris yang cukup panjang, namun jQuery dapat mempersingkatnya menggunakan Ajax cell, perbandingan 25 baris kode Ajax dapat disingkat menjadi 5 baris kode aja kita menggunakan jQuery.

Memiliki API (Application Programming Interface)

Dengan API, jQuery dapat memanipulasi content pada suatu halaman web, seperti pengubahan teks, manipulasi gambar (resize,rotate,crop), penyusunan daftar (list), pengurutan list, paging, dan lain-lain.

Mampu merespon interaksi antara user dengan halaman web dengan lebih cepat.
Menyediakan fasilitas untuk membuat animasi sekelas Flash dengan mudah.

9. Kemudahan yang ada pada JQuery

Mungkin nama jQuery sudah tidak asing lagi dalam dunia teknologi, namanya yang sering disebut dalam dunia teknologi web, karena hampir semua pengembang web menggunakan JQuery.

Berikut adalah kemudahan-kemudahan yang ditawarkan Jquery bagi para penggunanya:

a. Dapat mengubah tampilan bagian halaman tertentu

CSS (Cascading Style Sheet) menawarkan metode yang cukup handal dalam mengatur dan mempercantik halaman web. Namun CSS masih memilki kelemahan yang cukup mengganggu, dimana beberapa perintah CSS tidak didukung oelh semua browser. Dengan demikian cukup merepotkan jika kita harus mendesign halaman web dengan beberapa CSS sekaligus. Dan kini JQuery menawarkan solusi untuk mengatasi masalah tersebut. Karena dengan JQuery, kesenjangan yang terjadi antara browser dalam urusan CSS akan tertutup dengan baik.

b. Dapat mengakses bagian halaman tertentu dengan mudah

Bayangkan saja tanpa adanya library Javascipt khusus, untuk mengakses suatu bagian tertentu dari halaman saja 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. Dan kali ini Jquery menwarkan cara yang sangat mudah dalam mengakses bagian tertentu dari halaman. Pengaksesan juga tidak terlalu bergantung pada struktur HTML.

c. Dapat mengubah isi halaman

Pada jaman dahulu, jauh sebelum JQuery lahir, mengubah sebagian isi dari halaman metrupakan hal yang cukup sulit. Dalam arti mengubah disini yaitu mengganti teks, menambahkan teks, menambahkan teks atau gambar, dapat mengurutkan suatu daftar (list), menghapus baris tabel dan sebagainya. Dengan JQuery hal tersebut dapat dilakukan hanya dengan beberapa baris perintah.

d. Dapat menambahkan animasi ke halaman

Dalam animasi sering kali disertakan dalam suatu halaman web untuk menambah tampilan yang cantik. Pada saat ini animasi masih sangat digemari oleh para paselancar situs. Animasi dapat dibuat dalam berbagai gaya, ada yang menggunakan flash, gambar bergerak (GIF), video dan sebagainya. Dalam hal tersebut masing-masing tentunya memiliki kelebihan dan kekurangannya. JQuery sendiri menawarkan konsep animasi (walaupun masih sederhana) yang cukup baik dan menarik, namun tetap ramah bandwidth alias ringan. Salah satu animasi yang bisa dibuat dengan JQuery adalah fading jika terdapat suatu bagian dari halaman ditambahkan atau dihilangkan.

e. Dapat merespond 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. Kemudian JQuery melengkapi semuanya dengan tambahan penanganan event-handling yang semakin mudah.

f. Dapat mengambil informasi dari server tanpa melakukan refresh ke seluruh halaman

Mengambil informasi dari server tanpa me-refresh halaman merupakan salah satu konsep dasar dari yang namanya AJAX (Asynchronous Javascript and XML). Namun ternyata dilihat pada penerapannya, cukup ribet jika harus membangun website dengan konsep AJAX, dan saat ini banyak library khusus yang berusaha mempermudahnya. JQuery merupakan salah satunya.

g. Dapat menyederhanakan penulisan avascript biasa

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

10. Sintak dalam 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 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(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);

function(){

$("p").hide(1000);

});

11. Cara mengimplementasikan 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:

· 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. Web Sitenya: http://javascript-array.com

· 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. Fasilitas lebih dari bubble ini adalah desainnya yang cantik, seperti fasilitas tombol close, background shadow, dll. Web Sitenya: http://www.mopstudio.jp

· 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. Web Sitenya: http://loopj.com

· 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: http://www.willjessup.com

· 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. Web Sitenya: http://malsup.com

· 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, tetapi dengan plugin ini, teks berjalan lebih lembut dan lebih banyak variasi. Web Sitenya: http://remysharp.com. Dan masih banyak yang lainnya yang bisa dikunjungi di http://www.jqueryplugins.com

12. Contoh dari JQuery

Ini adalah bentuk bagian dari efect dengan jquery dan untuk JS-nya masihsama dengan posting yang sebelumnya dan source codenya sebagai berikut:

<!DOCTYPE html>
<html>
<head>
  <style>div { margin:3px; width:40px; height:40px;
   position:absolute; left:0px; top:30px;
   background:green; display:none; }
  div.newcolor { background:blue; }
  span { color:red; } </style>
  <script src="delJsMick.js"></script>
</head>
<body>
  <button id="show">Show Length of Queue</button>
  <span></span>
  <div></div>
<script>$("#show").click(function () {
   var n = jQuery.queue( $("div")[0], "fx" );
   $("span").text("Queue length is: " + n.length);
   });
   function runIt() {
   $("div").show("slow");
   $("div").animate({left:'+=200'},2000);
   $("div").slideToggle(1000);
   $("div").slideToggle("fast");
   $("div").animate({left:'-=200'},1500);
   $("div").hide("slow");
   $("div").show(1200);
   $("div").slideUp("normal", runIt);
   }
   runIt();</script>
</body>
</html>

dan di tambahakan untuk mengatur kecepatan gerak anda berikut bentuk source codenya :
<!DOCTYPE html>
<html>
<head>
  <style>
  div { margin:3px; width:40px; height:40px;
   position:absolute; left:0px; top:30px;
   background:green; display:none; }
  div.newcolor { background:blue; }
  </style>
  <script src="delJsMick.js"></script>
</head>
<body>
<div></div>
<script>
   $(document.body).click(function () {
   $("div").show("slow");
   $("div").animate({left:'+=200'},2000);
   jQuery.queue( $("div")[0], "fx", function () {
   $(this).addClass("newcolor");
   jQuery.dequeue( this );
   });
   $("div").animate({left:'-=200'},500);
   jQuery.queue( $("div")[0], "fx", function () {
   $(this).removeClass("newcolor");
   jQuery.dequeue( this );
   });
   $("div").slideUp();
   });</script>
</body>
</html>
memberi fungsi kontrol mulai dan berhenti source codenya sebagai berikut
<!DOCTYPE html>
<html>
<head>
  <style>
  div { margin:3px; width:40px; height:40px;
   position:absolute; left:0px; top:30px;
   background:green; display:none; }
  div.newcolor { background:blue; }
  </style>
  <script src="delJsMick.js"></script>
</head>
<body>
  <button id="start">Start</button>
  <button id="stop">Stop</button>
  <div></div>
<script>
   $("#start").click(function () {
   $("div").show("slow");
   $("div").animate({left:'+=200'},5000);
   jQuery.queue( $("div")[0], "fx", function () {
   $(this).addClass("newcolor");
   jQuery.dequeue( this );
   });
   $("div").animate({left:'-=200'},1500);
   jQuery.queue( $("div")[0], "fx", function () {
   $(this).removeClass("newcolor");
   jQuery.dequeue( this );
   });
   $("div").slideUp();
   });
   $("#stop").click(function () {
   jQuery.queue( $("div")[0], "fx", [] );
   $("div").stop();
   });
</script>
</body>
</html>

13. Cara Kerja JQuery

Cara kerja yang dilakukan Jquery yaitu:

1. 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
});

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

14. Fakta lain JQuery

· JQuery merupakan library JavaScript terhandal saat ini. Faktanya, banyak perusahaan besar tingkat dunia menggunakanjQuery dengan teknologi Website mereka. Bahkan website-website lokal pun tidak mau ketinggalan.

· jQuery berhasil menyederhanakan fungsi-fungsi JavaScript dan Ajax yang rumit, sehingga hanya dengan beberapa baris kode, kita bisa membuat website dengan tingkat

· interaktivitas yang tinggi (responsif), bahkan membuat animasi yang canggih tanpa memerlukan instalisasi plugin flash pada browser.

· Sebenarnya penggunaan jQuery sangatlah mudah, karena tanpa harus dibekali penguasaan pemograman JavaScript sekalipun, karena semuanya sudah dibungkus dalam bentuk library dan plugin, Intinya kita hanya perlu tahu cara menerapkan dalam website kita.

· Kompatibel/cocok dengan semua browser yang populer, seperti Mozzila, Internet Explorer, safari,Chrome, dan Opera.

· Kompetible dengan semua versi CSS (CSS 1 sampai dengan CSS 3).

· Dokumentasi, tutorial dan contoh-contohnya lengkap , silahkan kunjungi website resminya di http://jquery.com/

· Didukung oleh komunitas yang besar dan aktif, seperti forum, milis, Bliog, social engering (twitter dan facebook), website dan tutorial.

· Ketersediaan plugin yang sangat banyak jumlahnya. Plugin merupakan kemampuan tambahan yang bisa disertakan pada jQuery.

· File nya hanya satu dan ukuran nya pun kecil, hanya sekitar 20 KB, sehingga cepat aksesnya.

· Open source/free (gratis) dengan lisensi dari GNU General Public License dan MTT License.

· jQuery lebih banyak di gunakan oleh para developer web dibandingkan Javascript Library Lainnya.

15.. Mengapa JQuery menjadi library Javascript yang terbaik yang ada?

JQuery adalah library JavaScript singkat yang membuat navigasi dokumen HTML, penanganan event, animasi, dan interaksi AJAX untuk proses pengembangan web menjadi lebih cepat dan sederhana. jQuery memungkinkan Anda untuk menyesuaikan Data Object Model (DOM), menambahkan efek dan mengeksekusi permintaan Ajax.

Berikut adalah 8 alasan mengapa jQuery menjadi bagian penting dari pengembangan web.

· Kompatibilitas browser

Kompatibilitas antar browser merupakan masalah utama dalam AJAX atau pemrograman JavaScript . Sebagai contoh, sebuah website dapat bekerja sempurna di Chrome tetapi tidak dapat berjalan di Internet Explorer 7. Anda mungkin telah merancang meja untuk menunjukkan grafik titik dari turnamen sepak bola, dan ketika Anda mencoba untuk melihat di browser Opera, terlihat terbalik!. pengembang jQuery menyadari masalah browser dan mereka tahu persis mengapa hal ini terjadi. Mereka telah mendokumentasikan solusi didalam Library tersebut. jQuery memperbaiki masalah ini untuk memastikan Anda menulis kode apapun, halaman web tampak sama di semua browser.

· Ringan

Untuk menjaga agar Library jQuery tetap ringan, banyak fungsi telah dihilangkan dan beberapa ditransfer ke bagian plugin. Jika Anda ingin ada fitur tertentu pada halaman, Anda dapat menambahkan plugin ini di situs web. Hal ini membuat coding pada tingkat terbatas dan menghemat bandwidth untuk loading lebih cepat. Library inti jQuery hanya sebesar 24 kb. Hal ini dapat memudahkan anda untuk menambahkan dalam aplikasi.

· Mudah Belajar

jQuery sangat kompak dan mudah dimengerti. Faktanya adalah, jika Anda memiliki pengetahuan dasar coding, maka anda dapat mulai menulis kode jQuery hanya dengan melakukan tutorial singkat.

· Banyak Plug-in

Tim jQuery telah menjaga proses pembuatan plugin sederhana. Mereka telah memberikan kerangka untuk memperluas library. Anda dapat mengembangkan plugin sendiri yang disesuaikan, kemudian digunakan dalam proyek jQuery, selain itu anda juga dapat berbagi dengan sesama pengembang. Jika Anda tidak ingin membuat plugin baru anda tidak perlu khawatir, karena ada ratusan plugin berkualitas tinggi yang tersedia untuk di-download.

· CSS3 Selectors Compliant

jQuery sepenuhnya mendukung prasyarat CSS3. Anda dapat belajar dan mulai menggunakan display CSS3 dalam kode Anda segera saat itu juga.

· Utilitas Fitur

jQuery menawarkan fungsi utilitas yang membantu coding yang singkat, iterasi, manipulasi array dan banyak lagi. Fungsi-fungsi ini menawarkan integrasi antara jQuery dan JavaScript. Hal ini membuat proses menulis kode lebih mudah dan tidak repot. Sebuah utilitas besar jQuery adalah “fungsi pendukung”. dengan menggunakan utilitas fitur ini, Anda dapat menguji untuk mengetahui apakah fitur tersebut tersedia untuk pengguna atau tidak. Jika diperlukan, Anda dapat membangun aplikasi yang akan bekerja dengan browser lama juga.

· Antar Muka jQuery

jQuery UI menawarkan accordions, sliders, dialog boxes, date pickers, slider, kotak dialog, dan banyak lagi fitur lainnya. Semuanya siap untuk digunakan. Kontrol antar muka JQuery juga dapat dengan mudah dikonfigurasi sehingga anda tidak perlu menghabiskan waktu ekstra untuk membangun fitur ini.

· Seluruh Dunia telah Merangkul jQuery

Beberapa raksasa web yang telah menerima jQuery antara lain: IBM, Netflix, Google dan Microsoft menggunakan jQuery. bahkan Microsoft telah memasukkan jQuery kedalam kerangka kerja ASP .NET MVC.

16,. Hal-hal apa saja yang dapat dilakukan JQuery

Apa yang dapat dilakukan dengan jQuery?? mungkin anda sudah sering mendengar nama jquery disebut sebut dalam teknologi web sekarang. Begitu tenarnya nama tersebut sehingga hampir semua pengembang web menggunakannya. Berikut ini hal-hal yang dapat dilakukan jquery dan beberapa contoh web dengan jquery.

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

· Mengakses 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.

· Mengubah isi dari halaman

Jaman dulu (baca:sebelum JQuery lahir) 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.

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

· Menambahkan animasi ke dalam 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.

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

· Menyederhanakan penulis java script 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.

BAB III

PENUTUP

III.1 Kesimpulan

III.2 Saran

Dari penulisan makalah ini, saran yang dapat penulis berikan adalah semoga makalah ini dapat bermanfaat bagi kita semua ataupun teman-teman pembaca lainnya untuk dijadikan sebagaian pedoman.

DAFTAR PUSTAKA

http://www.dte.web.id/2011/11/perkenalan-jquery.html

http://aiskahendra.wordpress.com/2011/08/22/mengapa-jquery-menjadi-library-javascript-yang-terbaik-yang-pernah-ada/

http://www.kursusjquery.com/manfaat-jquery-bagi-seorang-web-designer

http://radeninformatika.blogspot.com/2012/12/makalah-web-statis.html

http://blog.creanivate.com/2011/12/mengenal-apa-itu-jquery.html

http://ahmadsoffa.wordpress.com/2012/06/20/jquery-kelebihan-kekurangan-dan-fakta-lainnya/

http://e-tuts.blogspot.com/2012/09/Kelebihan-dan-Kekurangan-Penggunaan-jQuery.html

http://valentinofebrian.blogspot.com/2013/05/pengertian-jquery-dan-cara-kerjanya.html

http://www.alimadura.com/2013/07/pengertian-kelebihan-dan-kekurangan-jquery.html

http://www.ilmugrafis.com/web-jquery.php?page=tentang-fungsi-jquery-dan-sejarahnya