Jquery


MENGENAL JQUERY

PENDAHULUAN


A. Latar Belakang
Seiring dengan perkembangan jaman, teknologi juga semakin berkembang.Dengan hadirnya teknologi pun membawa dampak negatif dan positif. Tinggal bagaimana kita bias memanfaatkannya dengan baik. Bukan kita yang dimanfaatkan oleh teknologi sekarang.


Dampak negatif yang dapat ditimbulkan seperti dengan begitu bisa menimbulkan rasa malas dan akan lupa dengan cara manual yang biasa dilakukan saat belum menggunakan teknologi. Sama artinya dengan makalah yang satu ini mengenai pengenalan leih lanjut tentang JQuery, JQuery pun memiliki kelebihan dan kekurangan dalam pengoperasiannya dan JQuery juga andil dalam mempermudah manusia dalam melakukan kegiatan sehari-hari khusus nya dalam bidan lingkup JQuery tersebut.


Ada banyak kerangka kerja JavaScript lain di luar sana, tapi jQuery tampaknya menjadi yang paling populer, dan juga yang paling diperpanjang.
Banyak perusahaan terbesar di jQuery penggunaan Web, seperti:
• Google
• Microsoft
• IBM
• Netfli

BAB II
PEMBAHASAN


A. Pengertian Jquery
jQuery adalah 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.


JQuery adalah library Javascript yang dibuat untuk memudahkan pembuatan website dengan HTML yang berjalan di sisi Client. Script JQuery  dibuat untuk memudahkan pengaturan document seperti menyeleksi object dengan element DOM dan membuat aplikasi dengan AJAX.  Jquery juga menyediakan layanan atau support  para developers untuk membuat plug-ins di dalam bahasa Javascript tentunya. Sehingga  memungkinkan para developer website membuat website lebih interaktif dengan animasi, efek – efek, tema dan widget. Dengan menggunakan JQuery kita bisa meluapkan kreatifitas untuk membuat website dinamis atau website aplikasi menjadi Powerfull.


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.


Nah, disinilah peran JQuery sebagai Javascript Library, dimana kita bisa langsung memanggil fungsi yang terdapat di dalam library tersebut.


B. Sejarah Jquery
Jquery Pertama kali dikembangkan oleh Jhon Resig pertama kali pada tahun 2005, saat itu dia terinspirasi dari kode Behavior, ketika itu Jhon merasa kode kode behavior tidak elegan dan bahkan sangat jelek. maka dia mulai memikirkan cara membuat library yang handal dan ringan untuk javascript , maka lahirlah JQUERY pada 14 januari 2006, direlease lah versi pertama dari Jquery dan sampai sekarang masih terus dikembangkan dan disempurnakan.


Semenjak dirilis pertama kali 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 Pincuran.com tentunya dan lain-lain.


Sekarang JQuery dikembangkan oleh team developer yang dipimpin oleh Dave Metvin.Dipakai oleh lebih dari 55% dari 10.000 website yang paling sering dikunjungi.JQuery menjadi Library Javascript yang paling popular Sekarang.


Script JQuery  dibuat untuk memudahkan pengaturan document seperti menyeleksi object dengan element DOM dan membuat aplikasi dengan AJAX. Jquery juga menyediakan layanan atau support  para developers untuk membuat plug-ins di dalam bahasa Javascript tentunya. Sehingga memungkinkan para developer website membuat website lebih interaktif dengan animasi, efek – efek, tema dan widget. Dengan menggunakan JQuery kita bisa meluapkan kreatifitas untuk membuat website dinamis atau website aplikasi menjadi keren.


Microsoft dan Nokia telah mengumumkan akan mengemas JQuery di platform mereka. Microsoft awalnya mengadopsinya dalam Visual Studio  untuk digunakan dalam ASP.NET AJAX dan ASP.NET MVC Framework, sedangkan Nokia akan mengintegrasikannya dalam kerangka Web Run-Time mereka.


C. Versi Jquery
Beberapa versi dari Jquery antara lain :
1. October 16, 2010 yaitu 1.0a1
2. November 12, 2010 yaitu 1.0a2
3. February 4, 2011 yaitu 1.0a3
4. March 31, 2011 yaitu 1.0a4
5. April 7, 2011 yaitu 1.0a4.1
6. June 20, 2011 yaitu 1.0b1
7. August 3, 2011 yaitu 1.0b2
8. September 29, 2011 yaitu 1.0 RC1
9. October 19, 2011 yaitu 1.0 RC2
10. November 13, 2011 yaitu 1.0 RC3
11. November 16, 2011 yaitu 1.0
12. January 26, 2012 yaitu 1.0.1
13. February 28, 2012 yaitu 1.1.0 RC1
14. April 6, 2012 yaitu 1.1.0 RC2
15. April 13, 2012 yaitu 1.1.0
16. June 28, 2012 yaitu1.1.1 RC1
17. July 12, 2012 yaitu .1.1
18. August 1, 2012 yaitu 1.2 Alpha
19. September 5, 2012 yaitu 1.2 Beta
20. September 14, 2012 yaitu 1.2.0 RC1
21. September 21, 2012 yaitu 1.2.0 RC2
22. October 2, 2012 yaitu 1.2.0 Final
23. February 20, 2013 yaitu 1.3.0 Final


Dari Berbagai macam versi diatas, mulai dari awal kepopuleran jQuery pada tahun 2010, jQuery Melakukan peningkatan performa, serta penambahan variasi dukungan di sisi scripting jQueryMobile semakin dioptimasi sesuai dengan perkembangan masif performa gadget terkini. Selain itu jQuery juga menambahkan berbagai widget yang tidak ada di versi sebelumnya. Jadi tunggu apa lagi? mari mencoba membuat web kalian sendiri dengan jQuery mobile framework.


D. Keunggulan  Jquery
Beberapa keunggulan yang dimiliki oleh Jquery antara lain :
  • JQuery merupakan library JavaScript terhandal saat ini. Faktanya, banyak perusahaan besar tingkat dunia menggunakan jQuery 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.

E. Fitur Jquery
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.

F. Kemampuan Jquery
Beberapa kemampuan yang dimiliki oleh JQuery sebagai berikut:
• Kemudahan mengakses elemen-elemen HTML
• Memanipulasi elemen HTML
• Memanipulasi CSS
• Penanganan event HTML
• Efek-efek javascript dan animasi
• Modifikasi HTML DOM
• AJAX
• Menyederhanakan kode javascript lainnya


Kemudian untuk memulai mempelajari jQuery, anda harus mendownload jquery.js dari situs http://www.jquery.com.Setiap anda menulis kode javascript dengan menggunakan jquery, jangan lupa untuk memasukan file jquery.js kedalam kode javascript anda.
<script type="text/javascript" src="jquery.js"></script>
sekarang mari kita lihat contoh sederhana pemograman dengan menggunakan jquery. Kode 12.hello world jquery
<html><head><script type="text/javascript" src="jquery.js"></script><script type="text/javascript">$(document).ready(function(){$(".tombol1").click(function(){$("p").hide(1000);});$(".tombol2").click(function(){$("p").show(1000);});});</script></head><body><p>Hello World!</p><button class="tombol1">Sembunyikan</button><button class="tombol2">Tampilkan</button></body></html>
G. Kelebihan Dan Kelemahan 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.
  • 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.

H. Event-event dasar dalam Jquery
Syntax dalam JQuery ada bebagai macam dan dibuat untuk menyeleksi elemen - elemen HTML dan menciptakan aksi / event pada satu atau beberapa halaman website agar membuat sebuah tampilan site menjadi interaktif dan dinamis. disini kita akan mempelajari macam - macam dari syantax JQuery.


1. Penulisan Sintaks
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 denganclass=”tombol1” diklik maka lakukan fungsi $(“p”).hide(1000);
function(){$("p").hide(1000);});


2. Event - Event Dasar yang sering digunakan pada JQuery
• click()
Sebuah event atau animasi akan terjadi jika suatu objek yang di pilih atau selec di klik
$('.subjek').click(function() {
     $('#area').fadeOut();
});


• dblclick()
Sebuah event atau animasi akan terjadi jika suatu objek yang di pilih atau selec di klik ganda / klik dua kali.
$('.subjek').dblclick(function() {
     $('#area').fadeOut();
});


• focus()
untuk membuat suatu anmasi atau peristiwa pada subjek/pemicu (digunakan pada elemen-elemen seperti <input> dan <textarea>.
$('.subjek').focus(function() {
     $('#area').fadeOut();
});


• mouseover()
Menimbulkan kejadian atau peristiwa ketika pointer mouse berada di atas suatu subjek yang dituju.
$('.subjek').mouseover(function() {
     $('#area').fadeOut();
});


• mouseout()
Menimbulkan peristiwa jika pointer mouse meninggalkan sebuah sbjek yang di tuju.
$('.subjek').mouseout(function() {
$('#area').fadeOut();
}); 
});


• mouseenter()
Sama dengan MouseOver(), menimbulkan peristiwa apabila pointer mouse berada di atas subjek/pemicu. Namun saat pointer mouse memasuki elemen induk (MouseOver()) dan pointer mendatangi anak-anak elemen di dalamnya, itu tidak masuk hitungan Mouseenter().
$('.subjek').mouseenter(function() {
$('#area').fadeOut();
});


• mouseleave()
Sama seperti Mouseout(),menimbulkan peristiwa apabila pointer mouse pergi dari subjek/pemicu. Namun saat pointer mouse meninggalkan sebuah anak elemen (dan masih dalam elemen induk), itu tidak sudah tidak bisa dei sebut Mouseleaf(), hingga ketika pointer benar-benar telah keluar dari elemen induk baru bisa disebut mouseleve().
$('.subjek').mouseleave(function() {
$('#area').fadeOut();
});


• hover()
adalah gabungan antara Mouseenter dan Mouseleave.


• scroll()
Untuk menimbulkan suatu peristiwa ketika scroll di tarik(ini berlaku untuk semua yang memiliki scroll).
$('.subjek').scroll(function() {
$('#area').fadeOut();
});


• select()
Untuk menimbulkan suatu peritiwa jika ada yang di select / blok biasa di gunakan pada <input> dan <textarea>.
$('.subjek').select(function() {
$('#area').fadeOut();
});


I. Fungsi Jquery
• Mengakses bagian halaman tertentu dengan mudah
• Mengubah tampilan bagian halaman tertentu
• Mengubah isi dari halaman
• Menambah animasi tanpa harus memakai flash yang berat
• Melakukan load data/halaman tanpa merefresh seluruh halaman
• Menyederhanakan/mempersingkat penulis sintaks javascript biasa


J. Cara Menginstal Jquery
Untuk dapat menginstalasi JQuery dapat di ikuti langkah langkah sebagai berikut :
• Pertama-tama download dulu jQuery dari websitenya http://jquery.com/.
Ada dua pilihan download. Production dan development, perbedaannya adalah production digunakan di realsite sedangkan development untuk masa developmen. Versi production sudah di kompresi sehingga kode nya sudah tidak bisa dibaca lagi dan ukurannya jauh lebih kecil. Versi developmen berguna jika kita mau mendebug jQuery.
• Setelah mendownload maka load-lah jquery melalui tag script (perhatikan baris ke-6). sesuaikan attribut srcnya dengan path jquery anda.
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><script type="text/javascript" src="jquery.js"></script>
K. Pengimplementasian Jquery
Implementasi jQuery yaitu :
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.


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


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


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


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


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


L. Contoh Jquery
Ini adalah bentuk bagian dari efect dengan jquery dan untuk JS-nya masih sama 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>  Click here...<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>


catatan untuk jenisya masih sama dengan yang dipostingan sebelumnya dan simpan dengan satu direktory dimana js-nya tersimpan dalam satu folder yang sama.
Contoh sederhana lain :
1. Pertama, kita harus menyertakan (include) file library JQuery.Pastikan letak dari file library sudah benar.
2.  Perintah-perintah JQuery.
Baris 8 merupakan perintah inisialisasi dimana saat halaman (dokumen) siap ditampilkan maka jalankan juga perintah yang ada di dalamnya. Hal ini mirip dengan event onLoad yang biasanya diletakkan di tag <body>.
Baris 9-11 maksudnya adalah mendefinisikan action yang terjadi saat link dengan class=show ( $(‘a.show’) ) diklik (lihat link baris ke-22). Jadi jika link di-klik maka paragraf dengan nama class=jquery ( $(‘p.jquery’) ) akan tampil dengan durasi tampil “slow”. Paragraf yang akan ditampilkan adalah paragraf baris ke-24 sampai 27.
Baris 13-15 sebaliknya, akan menyembunyikan isi dari paragraf yang mengandung nama class=jquery.
3. Isi dari halaman. Perhatikan nama class dari masing-masing object.

BAB III
PENUTUP




1. Kesimpulan
Jquery mampu merubah interaksi sebuah website menjadi lebih menarik, namun harus di bayar dengan beban load yang lebih lama dibandingkan dengan tidak menggunakan script. (hal ini tidak akan terasa jika anda memiliki komputer yang powerful dan koneksi yang kencang).
Manfaat dari menggunakan Jquery antara lain :
• ini Kompatibel dengan hampir seluruh browser 
•  jQuery telah digunakan oleh website-website raksasa 
•  Kompatibel dengan seluruh versi CSS (dari CSS 1 sampai CSS 3) 
•  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
Jadi jangan sampai website anda indah dengan animasi yang memukau dan juga interaktif, namun fungsi utama/pesan anda tidak tersampaikan kepada pengunjung.


2. Saran
Saran saya mulailah untuk belajar menggunakan Jquery.Walaupun untuk setiap teknologi yang diciptakan pasti memiliki kegunaannya sendiri sendiri, seperti JQuery diciptakan.JQuery pun tak luput dari kekurangan disamping sudah pasti mempunyai kelebihan.


Ada banyak kerangka kerja JavaScript lain di luar sana, tapi jQuery tampaknya menjadi yang paling populer, dan juga yang paling diperpanjang.


Mulai dari awal kepopuleran jQuery pada tahun 2010, jQuery Melakukan peningkatan performa, serta penambahan variasi dukungan di sisi scripting jQueryMobile semakin dioptimasi sesuai dengan perkembangan masif performa gadget terkini.Selain itu jQuery juga menambahkan berbagai widget yang tidak ada di versi sebelumnya. Jadi tunggu apa lagi? mari mencoba membuat web kalian sendiri dengan jQuery mobile framework.mulai dari awal kepopuleran jQuery pada tahun 2010, jQuery Melakukan peningkatan performa, serta penambahan variasi dukungan di sisi scripting jQueryMobile semakin dioptimasi sesuai dengan perkembangan masif performa gadget terkini. Selain itu jQuery juga menambahkan berbagai widget yang tidak ada di versi sebelumnya. Jadi tunggu apa lagi? mari mencoba membuat web kalian sendiri dengan jQuery mobile framework.






DAFTAR PUSTAKA


Anonim.2013. Pengertian Jquery dan Sejarahnya.http://infoter-lengkap.blogspot.com. 16 November 2013
Zakki. 2011. Pengertian Jquery. http://zakki.dosen.narotama.ac.id. 16 November 2013
Harival. 2010. Sejarah Jquery. http://ikutseo.blogspot.com. 16 November 2013
Okta. 2012. Pengertian Jquery. http://oktabriyana.blogspot.com. 16 November 2013
Fafa. 2013. Perkembangan Web, science, jquery mobile. http://fafabilowo.blogspot.com. 16 November 2013
Anonim. 2010. Contoh Penggunaan Jquery. http://www.makkul.com. 16 November 2013
Anonim. 2013. Contoh Penggunaan Jquery. http://cmssaya.wordpress.com. 16 November 2013
Anonim. 2013. Jquery Syntax. http://www.w3schools.com. 16 November 2013
Awal.2013. Contoh Penggunaan Jquery dan Syntax.http://diaryawal.blogspot.com. 16 November2013
Indra. 2012. Event-event Dasar Pada Jquery. http://jintoples.blogspot.com. 16 November 2013
Taufik. 2012. Beberapa Contoh Modifikasi Slideshow Jquery. http://www.dte.web.id. 16 November 2013
Rismayuni. 2013. Contoh Jquery. http://rismayuni.blogspot.com. 16 November 2013
Rosihanari.2013. Cara Validasi Form Dengan Jquery.http://blog.rosihanari.net. 16 November 2013
Galih. 2013. Tutorial Dan Contoh Jquery. http://infoter-lengkap.blogspot.com. 16 November 2013
Ady.2011. Jquery Ajax Dengan Mengakses Database.http://adiyasan.wordpress.com. 16 November 2013
Saifulloh. 2013. Fitur-fitur Jquery. http://upyes.wordpress.com. 16 November 2013
M.Tomi. 2012.Makalah Web Statis.http://radeninformatika.blogspot.com. 16 November 2013

0 komentar:

Posting Komentar