Download to read offline
![$(document).ready(function(){
// memangil semua div yang berisi p lalu ubah bordernya
$("div > p").css("border", "1px solid gray");
});
// ]]></script>
Ini adalah paragraf pertama
Ini adalah paragraf kedua didalam div
Ini adalah paragraf Ketiga
contoh 2. Memasukkan tag html kedalam elemen
<!--
Disini
kita
mengeload
library
Jquery
src="http://code.jquery.com/jquery-1.3.js"></script><script
<
![});
// ]]></script>
Ini adalah paragraf pertama
Ini adalah paragraf kedua didalam div
Ini adalah paragraf Ketiga
Uji Coba
dari contoh diatas. coba kita buka halaman
lalu masukkan tambahkan kode ini satu persatu. lihat effect yang terjadi lalu pelajari fokuslah
pada parameter yang ada pada fungsi $(PARAMETER) bukan fungsi diibelakangnya karena itu
akan di jelaskan setelah ini.
//contoh selector menggunakan nama tag
$("div").css("border","3px solid red");
$("p").css("border","3px solid blue");
//contoh selector menggunakan nama object/element
$("#id_pertama").css("color","red");
//contoh selector menggunakan nama Kelas object
$(".merah").css("color","red");
*untuk dapat melihat perubahan script di coba satu-satu jangan langsung semua
Selanjutnya mengenai JQuery manipulation antara lain langkah langkahnya sebagai berikut :
Jquery Manipulation maksudnya penggunaan jquery untuk memanipulasi struktur dokumen. ada
7 kategori manipulasi yang disupport oleh jquery yaitu :](https://image.slidesharecdn.com/makalahjqry-131218193847-phpapp02/85/Makalah-jqry-12-320.jpg)
![marquee dalam tag HTML, tetapi dengan plugin ini, teks berjalan lebih lembut dan lebih banyak
variasi
K.
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);](https://image.slidesharecdn.com/makalahjqry-131218193847-phpapp02/85/Makalah-jqry-21-320.jpg)
![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>](https://image.slidesharecdn.com/makalahjqry-131218193847-phpapp02/85/Makalah-jqry-23-320.jpg)
![</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");](https://image.slidesharecdn.com/makalahjqry-131218193847-phpapp02/85/Makalah-jqry-24-320.jpg)
![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>](https://image.slidesharecdn.com/makalahjqry-131218193847-phpapp02/85/Makalah-jqry-25-320.jpg)
More Related Content
Makalah jqry
- 1. “ Pengertian JQuerydan Berbagai Kekurangan dan Kelebihanya” Makalah ini disusun untuk memenuhi tugas mata kuliah Teknologi Informasi dan Komunikasi Semester III Oleh : Nama : Wawan suryanto NIM : 1102412101 Prodi : Kurikulum dan Teknlogi Pendidikan Makul : Teknologi Informasi dan Komunikasi Rombel : 01 FAKULTAS ILMU PENDIDIKAN UNIVERSITAS NEGERI SEMARANG 2013
- 2. BAB I PENDAHULUAN A. Latar BelakangMasalah Zaman terus berjalan begitupun mengenai teknologi yang berlakuk saat ini, semua pekerjaan manusia sekarang mulai terbantu berkat teknlogi yang berkembang pada zaman sekarang, teknologi pun tak akan macet ditengah jalan karena teknologi selalu berkembang bahkan percepatannya sangat cepat sekali bisa dibilang cepat seperti angin. Perubahan ini pun akan mempengarui kegiatan manusia kedepan pastinya akan ada dampak positif dan negatif dalam menggunakan sebuah teknologi, salah satu dampak positifnya yaitu dengan teknologi manusia dalam melakukan hal kegiatan sehari hari dapat terbantu misal dengan smartphone nya dalam hal interaksi jarak jauh, sosmed, atau sms dan masih banyak kegunaan lainnya atupun menggunakan tablet dan komputer maupun laptop. Dengan hadirnya teknologi pun membawa dampak negatif pula 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 Kedepannya diharapkan dapat seiring berkembang nya zaman dapat memperbaiki kekurangan yang ada pada saat ini sehingga penggunaannya dipermudah agar manusia menggunakannya tanpa ada repot sedikitpun walaupun untuk saat ini katanya penggunaannya lebih mudah dari yang dulu-dulu.
- 3. B. Rumusan Masalah Rumusan Masalahdalam Makalah ini secara garis besarnya adalah sebagai berikut : Apakah yang dimaksud dengan JQuery (Pengertian), dan apa saja kemampuan yang dimiliki JQuery ini? Bagaimana sejarah JQuery? Apa saja kelebihan dan Kekurangan yang dimiliki oleh Jquery? Apa saja manfaat menggunakan JQuery? Apa Keunggulan menggunakan JQuery? Apa saja fitur yang ditawarkan JQuery? Bagaimana cara instalasi JQuery dan langkah langkah mengenaiJQuery selector, dan Jquery Manipulation? Apa yang dapat dilakukan JQuery? Apa saja syntax dalam JQUERY? Bagaimana cara implementasi JQuery Contoh JQuery? C. Tujuan Pembuatan Makalah Berdasarkan Rumusan masalah diatas, maka pembuatan Makalah ini bertujuan untuk : Mengetahui penjelasan mengenai apa itu JQuery, serta memahami kemampuan yang dimiliki JQuery. Mengerti sejarah awal JQuery sampai sekarang Mengerti apa saja kelebihan serta kekurangan yang dimiliki JQuery Mengetahui apa saja manfaat penggunaan dengan menggunakan JQuery Mengetahui keunggulan menggunakan JQuery Dapat mengerti fitur yang di tawarkan jquery kepada penggunanya. Mengetahui cara instalasi JQuery dan langkah langkah JQuery selector, dan Jquery Manipulation.
- 4. Mengetahui apasaja yang dapat dilakukan JQuery. Mengetahui Apa saja syntax dalam JQUERY? Mengerti cara implementasi JQuer? BAB II PEMBAHASAN A. Pengertian JQuery JQuery pertama dirilis pada tahun 2006 oleh John Resig. Dan kini jQuery telah digunakan oleh beberapa situs yang canggih serta terkenal diantaranya seperti nama besar Google, Facebook, Twitter, Youtube, Nokia dan masih banyak lagi yang menggunakannya. Tidak hanya situs interlokal, melainkan situs lokal pun juga ada yang telah memakai jQuery, contohnya seperti VivaNews, Studio 21, Kompas dan lain-lain. JQuery sendiri adalah Javascript Library atau kumpulan kode/fungsi Javascript siap pakai, sehingga mempermudah kita untuk membuat kode Javascript. Atau dalam kesimpulannya jQuery menyederhanakan kode Javascript. Hal ini sesuai dengan slogannya “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. 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
- 5. MenyederhanakanKode javascriptlainnya B. Sejarah JQuery 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 Pincuran.com tentunya dan lain-lain. 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. C. Kelebihan dan Kekurangan JQuery 1. JQuery memiliki beberapa kelebihan diantaranya adalah : 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.
- 6. Fungsi-fungsi yangdisediakan didokumentasikan dengan baik beserta contoh penggunaannya, 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. Selain mempunyai kelebihan JQuery pun memiliki beberapa kekurangan diantaranya adalah 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. Sehingga dapat disimpulkan 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) D. Manfaat menggunakan JQuery Ada beberapa manfaat yang dapat kita ambil ketika menggunakan jQuery, diantaranya adalah : Kompatibel dengan hampir seluruh browser
- 7. jQuery telahdigunakan oleh website raksasa Kompatibel dengan seluruh versi CSS Didukung oleh banyak komunitas Disuport oleh plugin yang sangat lengkap Filenya hanya satu ukurannya pun relatif keci Open source atau free jQuery lebih diminati oleh para developer web pada saat ini E. Keunggulan menggunakan JQuery Dibandingkan menggunakan lainnya ada beberapa keunggulan penggunaan jquery dari pada lainnya diantaranya: 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.
- 8. Ketersediaan pluginyang 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. F. Fitur yang ditawarkan JQuery terhadap Penggunanya 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.
- 9. Mempermudah perubahantampilan 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. G. Cara Instalasi JQuery, JQuery selector, dan Jquery Manipulation Untuk dapat menginstalasi JQuery dapat di ikuti langkah langkah sebagai berikut : Pertama-tama download dulu jQuery dari websitenyahttp://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.
- 10. Setelah mendownload makaload-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> Untuk JQuery Selector langkah langkahnya sebagai berikut : Selector adalah fungsi utama pada jQuery. semua fungsi lainnya di jQuery dapat diakses melalui selector. Penggunaan paling dasarnya adalah mempassingkan sebuah ekspressi (biasanya ekspressi css) yang kemudian selanjutnya jQuery akan mencari elemen yang cocok. pada intinya ini adalah fungsi untuk memilih elemen-elemen pad halaman web. fungsi selector adalah $(„ekspressi‟). untuk penggunaan $() yang aman sebaiknya dilakukan setelah semua page DOM selesai terbaca semua. jadi webpagenya sudah lengkap baru script di eksekusi. kita dapat melakukannya dengan pada fungsi $(document).ready(). Adapun parameter yang bisa digunakan pada jquery adalah Id element, class element dan element itu sendiri. Selector juga bisa mengenali hirarki sebagai parameter inputnya dan bisa memfilternya langsung dari ekspressi. *CATATAN : demo menggunakan layanan jsbin. anda bisa mengubah script html dan javascriptnya langsung, dengan mendouble click. pilih tab output untuk melihat hasilnya contoh 1. mengubah semua div yang mempunyai p (silakan di utak-atik demonya) <!-- Disini kita mengeload library Jquery src="http://code.jquery.com/jquery-1.3.js"></script><script <![CDATA[ --><script type="text/javascript" type="text/javascript">//
- 11. $(document).ready(function(){ // memangil semuadiv yang berisi p lalu ubah bordernya $("div > p").css("border", "1px solid gray"); }); // ]]></script> Ini adalah paragraf pertama Ini adalah paragraf kedua didalam div Ini adalah paragraf Ketiga contoh 2. Memasukkan tag html kedalam elemen <!-- Disini kita mengeload library Jquery src="http://code.jquery.com/jquery-1.3.js"></script><script <![CDATA[ $(document).ready(function(){ //memasukkan html kedalam elemen $(" <div> Saya adalah Paragraf Tabmahan </div> ").appendTo("body") // memangil semua div yang berisi p lalu ubah bordernya $("div > p").css("border", "1px solid gray"); --><script type="text/javascript" type="text/javascript">//
- 12. }); // ]]></script> Ini adalahparagraf pertama Ini adalah paragraf kedua didalam div Ini adalah paragraf Ketiga Uji Coba dari contoh diatas. coba kita buka halaman lalu masukkan tambahkan kode ini satu persatu. lihat effect yang terjadi lalu pelajari fokuslah pada parameter yang ada pada fungsi $(PARAMETER) bukan fungsi diibelakangnya karena itu akan di jelaskan setelah ini. //contoh selector menggunakan nama tag $("div").css("border","3px solid red"); $("p").css("border","3px solid blue"); //contoh selector menggunakan nama object/element $("#id_pertama").css("color","red"); //contoh selector menggunakan nama Kelas object $(".merah").css("color","red"); *untuk dapat melihat perubahan script di coba satu-satu jangan langsung semua Selanjutnya mengenai JQuery manipulation antara lain langkah langkahnya sebagai berikut : Jquery Manipulation maksudnya penggunaan jquery untuk memanipulasi struktur dokumen. ada 7 kategori manipulasi yang disupport oleh jquery yaitu :
- 13. Perubahan Content.Kita dapat merubah kontent dari sebuah object dengan dua fungsi yaitu html dan text. bedanya jika menggunakan text maka semua tag-tag html akan dituliskan sebagai mana mestinya. $("p").click(function () { var htmlStr = $(this).html(); $(this).text(htmlStr); }); Insert kedalam object. Setelah kita memilih sebuah object, kita dapat memasukkan tab html atau object kedalamnya. ada dua jenis insert yaitu append dan prepend. append menambahkan objek baru setelah value dari object tersebut, sedangkan prepend didepannya. Contoh $("p").append("<strong>Hello</strong>"); $("span").appendTo("#conto"); // Objek dengan ID conto akan dimasukkan kedalam span $("p").prepend("<b>Hello </b>"); $("span").prependTo("#conto"); Insert dikeluar object. Object yang akan ada tambahkan akan ada diluar masing-masing tag yang dipilih. $("p").before("<strong>Hello</strong>"); $("p").after("<strong>Hello</strong>");
- 14. $("span").insertAfter("#conto"); $("span").beforeAfter("#conto"); Insert kesekitarobject Mereplace object. Kita dapat mengganti isi dari object dengan syntax ini $("button").click(function () { $(this).replaceWith(" ” + $(this).text() + “ "); }); Menghapus object. kita dapat menhapus object tertentu. $("button").click(function () { $("p").empty(); }); $("button").click(function () { $("p").remove();
- 15. }); Mengopi object.Mengopi object ke tempat lain $("b").clone().prependTo("p"); H. Hal 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
- 16. Tanpa adanya libraryJavascript 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
- 17. 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. I. Apa saja syntax 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.
- 18. Contoh : $(this).hide() – menyembunyikanelemen 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
- 19. jQuery class. Olehkarena $() 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); }); J. 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: 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
- 20. Tool tips adalahbubble/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 email, 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
- 21. marquee dalam tagHTML, tetapi dengan plugin ini, teks berjalan lebih lembut dan lebih banyak variasi K. 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);
- 22. }); 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; }
- 23. 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>
- 24. </html> memberi fungsi kontrolmulai 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");
- 25. 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>
- 26. BAB III PENUTUP A. Kesimpulan JQuery sendiriadalah Javascript Library atau kumpulan kode/fungsi Javascript siap pakai, sehingga mempermudah kita untuk membuat kode Javascript. Atau dalam kesimpulannya jQuery menyederhanakan kode Javascript. Hal ini sesuai dengan slogannya “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. 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. JQuery memiliki beberapa kelebihan diantaranya o Menyederhanakan penggunaan javascript o Fungsi-fungsi yang disediakan didokumentasikan dengan baik
- 27. o Support terhadapCSS1-3 selector o Website yang dibangun dengan jquery akan lebih interaktif dan menarik. JQuery pun memiliki kekurangan diantaranya : o 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. o 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. Manfaat menggunakan JQuery o Kompatibel dengan hampir seluruh browser o jQuery telah digunakan oleh website-website raksasa o Kompatibel dengan seluruh versi CSS (dari CSS 1 sampai CSS 3) o Didukung oleh banyak komunitas o Disupport oleh plugin yang lengkap o Filenya hanya satu dan ukurannya relatif kecil, sekitar 20kb o Open source atau Free o jQuery lebih diminati oleh para developer web saat ini B. Saran Untuk setiap teknologi yang diciptakan pasti memiliki kegunaannya sendiri sendiri, seperti JQuery diciptakan. JQuery pun tak luput dari kekurangan disamping sudah pasti mempunyai kelebihan. Untuk kedepannya sepertinya JQuery akan menguasai karena fitur yang diberikannya begitu menarik mungkin ini masanya JQuery.
- 28. DAFTAR PUSTAKA http://koder.web.id/belajar-jquery-mudah/ (Diaksespada Sabtu 16november 2013 pukul 10:28 wib) http://radeninformatika.blogspot.com/2012/12/makalah-web-statis.html (Diakses pada Sabtu, 16 november 2013 pukul 11:08 wib), http://ahmadsoffa.wordpress.com/2012/06/20/jquery-kelebihan-kekurangan-dan-fakta-lainnya/ (Diakses pada Selasa 12 november 2013 pukul 20:55 wib) http://dhany86.blogspot.com/2010/07/kelebihan-kelebihan-menggunakan-jquery.html (Diakses pada Selasa, 12 november 2013 pukul 21:06 wib) http://fitriafebrianti.wordpress.com/2013/02/27/manfaat-menggunakan-jquery/(Diakses pada Selasa, 12 november 2013 pukul 20:58 wib) http://valentinofebrian.blogspot.com/2013/05/pengertian-jquery-dan-cara-kerjanya.html (Diakses pada Selasa, 12 november 2013 pukul 21:01 wib) http://bisnisajidwi.blogspot.com/2012/04/pengertian-jquery-javascript-library.html (Diakses pada Selasa 12 november 2013 pukul 21:00 wib) http://pincuran.com/index.php/love-indonesia/80-web-programming/104-sejarah-jquery (Diakses pada Selasa, 12 november 2013 pukul 20:54 wib)
- 29. http://www.zainalhakim.web.id/posting/apa-yang-dapat-dilakukan-jquery.html(Diakses Sabtu, 16 november2013 pukul 10:39 wib) Diposkan oleh Rully Amrizal di 04.07 pada