PENGENALAN DAN PENGGUNAAN JQUERY
Makalah Ini Dibuat untuk Memenuhi Tugas Teknologi Informasi dan Komunikasi
KATA PENGANTAR
Assalaamu'alaikum Warahmatullahi Wabarakatuh,
Puji syukur saya aturkan kehadirat Allah SWT atas ridho dan karunianya saya dapat menyelasaikan tugas pembuatan makalah ini. Saya juga ingin mengucapkan terima kasih kepada dosen pengampu mata kuliah Teknologi informasi dan komunikasi yang telah memberikan pengarahan-pengarahan kepada saya dalam pembuatan makalah ini. Dengan adanya tugas ini saya dapat menambah wawasan dan pengetahan, oleh karena itu makalah ini dibuat tidak hanya untuk pengumpulan tugas semata tetapi juga untuk menambah pengetahuan para pembacanya.
Makalah ini berisi tentang gambaran aplikasi jquery dalam memanfaatannya. Materi dalam makalah ini telah saya uraikan menurut kemampuan yang saya miliki.
Dalam makalah ini tentunya masih banyak kekurangan. Untuk itu saya mengharap kritik dan saran dari pembaca guna penyempurnaan makalah ini. Semoga makalah ini dapat bermanfaat bagi para pembaca untuk menambah ilmu pengetahuan. Amin
Wassalaamu'alaikum Warahmatullahi Wabarakatuh.
Penulis
DAFTAR ISI
Kata Pengantar................................................................................................... i
Daftar Isi............................................................................................................ ii
Bab I Pendahuluan
A. Latar Belakang......................................................................................... 1
B. Rumusan Masalah.................................................................................... 2
C. Tujuan...................................................................................................... 2
Bab II Pembahasan
A. Pengertian jQuery …………………………………………………..3
B. Sejarah jQuery dan versi perkembangan jQuery……………………4
C. Fungsi jQuery dan penerapannya……………………………………6
D. Fitur – fitur yang terdapat dalam jQuery……………………………16
E. Cara kerja jQuery……………………………………………………16
F. Implementasi jQuery………………………………………………..19
G. Manfaat Jquery……………………………………………………...21
H. Kelebihan dan kekurangan dalam menggunakan jQuery…………..24
I. Sintaks Jquery……………………………………………………….24
Bab III Penutup
A. Kesimpulan................................................................................................ 27
Daftar Pustaka………………………………………………………………… 28
BAB I
PENDAHULUAN
A. Latar belakang masalah
Perkembangan dunia informasi dan komunikasi semakin hari semakin berkembang dengan pesat. Tuntutan jaman yang semakin maju ini yang membuat manusia modern tidak bisa lepas dari perangkat teknologi untuk mendukung aktivitasnya. Apalagi bentuk kecanggihan dunia teknologi mengakibatkan manusia modern kini telah mengikuti arus perkembangan teknologi dan memanfaatkannya. Dengan adanya teknologi memudahkan dan membantu kita dalam aktivitas sehari-hari.
Semakin mudahnya orang mengakses internet dengan mudah, murah dan cepat, hal ini menjadikan jumlah pengguna perangkat bergerak pun semakin banyak Jika dahulu web hanya bisa diakses dengan baik melalui sebuah perangkat komputer, saat ini seiring dengan pesatnya kemajuan teknologi mendorong manusia untuk menciptakan sebuah web juga harus dapat menyesuaikan dengan berbagai ukuran mulai dari perangkat portabel, seperti high-end handheld hingga smartphone dan juga tablet.
Berbagai produk teknologipun terus bermunculan. Para pengguna internet tentunya menginginkan mengakses dengan mudah dan cepat. Selain itu juga biasanya kita menemui halaman web yang mempunyai tampilan desain menarik misalnya dengan adanya animasi bergerak. Dengan adanya hal tersebut diperlukan adanya library dan sistem pengcode-an yang paling utama dalam pembuatan/pendesainan web. Dalam pembuatan dan pengembangan web atau blog para web developer memerlukan pengetahuan yang cukup mendalam tentang Java Script, JQUERY, AJAX dan CSS. Dalam makalah ini akan mengulas tentang pengenalan dan penggunaan jQuery.
B. Rumusan masalah
a. Pengertian jQuery
b. Sejarah jQuery dan versi perkembangan jQuery
c. Fungsi jQuery dan penerapannya
d. Fitur – fitur yang terdapat dalam jQuery
e. Cara kerja jQuery
f. Implementasi jQuery
g. Manfaat Jquery
h. Kelebihan dan kekurangan dalam menggunakan jQuery
i. Sintaks Jquery
C. Tujuan
a. Untuk memenuhi salah satu tugas dari dosen mata kuliah “Teknologi Informasi dan Komunikasi”
b. Untuk menambah wawasan dan ilmu pengetahuan khususnya dalam bidang teknologi informasi dan komunikasi.
c. Dapat mengetahui gambaran jQuery secara khusus.
BAB II
PEMBAHASAN
A. Pengertian jQuery
jQuery merupakan sebuah framework dan merupakan cara baru dalam menuliskan kode javascript. jQuery mempunyai semboyan “write less, do more”. jQuery dirancang untuk mempercepat dan meringkaskan kode-kode javascript serta kaya akan fitur. Dengan demikian, menggunakan jQuery dapat dengan cepat dan ringan untuk menangani perpindahan dokumen HTML, penanganan event (event handling), pembuatan animasi didalam web. Dengan JQuery, suatu halaman web akan tampak seperti flash, dan juga interaksi AJAX untuk pengembangan web yang modern dan cepat.
Suatu halaman web yang menjadi aplikasi web, jika dilihat sourcenya, akan terlihat seperti dokumen HTML biasa; tidak ada kode JavaScript yang terlihat langsung, yang harus secara eksplisit disisipkan pada dokumen web. Pada teknik pemrograman sisi klien dengan menggunakan JavaScript biasa, setiap elemen yang akan memiliki event, akan secara eksplisit terlihat ada event yang dilekatkan pada elemen tersebut.
jQuery mempunyai lisensi dibawah GNU artinya jQuery merupakan aplikasi yang bersifat Open Source dan bebas. Oleh karena itu dapat di publikasikan oleh siapapun. Ukurannya juga cukup kecil yaitu sebesar 56 KB (compressed) sehingga menggunakan jQuery menjadi jauh lebih cepat dan mudah daripada menggunakan framework yang lain atau menggunakan Javascript Konvensional.
Tanpa adanya library seperti jQuery, menerapkan Javascript mungkin akan lebih sulit, terutama untuk para pemula yang baru mempelajari Javascript. Plugin tambahan seperti JQuery UI (user interface) akan semakin memudahkan dalam mengembangkan website yang berpenampilan cantik dan interaktif. Selain itu tersedia juga plugin-plugin lain yang makin memperkaya kemampuan jQuery dalam pemanfaatannya.
B. Sejarah jQuery
JQuery diluncurkan pada tanggal 26 Januari 2006 di Barcam NYC oleh John Resig dan berlisensi ganda di bawah MIT dan G PL. JQuery dibuat lebih ramping dari librari Prototype yang menjadi inspirasi dari libarari JQuery ini. Secara pemrograman, JQuery memiliki kemiripan seperti Prototype.
Saat ini 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. Dengan kecanggihannya, jQuery dipakai oleh perusahaan besar seperti Google. Dell, CBS, digg, Netflix, Bank of America, Mozilla, Drupal, Twitter, Facebook, Amazon, Techorati, Youtobe Apple, Wordpress, Mozila, Netflix , Digg, Time, dan masih banyak lagi. Bahkan website lokalpun tidak mau ketinggalan, Detik, Studio 21 (21cineplex.com). Indosiar, Vivanews, Kompas dan lain sebagainya.
Rilis pertama dari jQuery, versi 1.0, pada tanggal 26 Agustus 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 library inti. Hingga saat ini, versi jQuery 2.0 terbaru sudah resmi di luncurkan tanggal 18 April 2013 kemarin. Seperti yang telah dijanjikan di website jQuery sebelumnya, jQuery versi 2.0 yang baru saja di release dan tidak lagi mendukung browser lama seperti Internet Explorer versi 6, 7, and 8. Sebagai gantinya framework jQuery versi 2.0 menjadi berukuran lebih kecil, lebih cepat, dan lebih powerful. Walaupun demikian, tim jQuery masih mensupport versi 1.x yang dapat berjalan di browser lama.
Untuk menggunakan jQuery versi 2.0 anda bisa mendownloadnya di link dibawah, perlu diperhatikan jangan lagi menyertakan jquery-latest.js di halaman web karena dipertimbangkan membahayakan dan mengganggu kinerja website Anda
• http://code.jquery.com/jquery-2.0.3.min.js (minified, untuk lingkungan production)
• http://code.jquery.com/jquery-2.0.0.js (unminified, untuk lingkungan testing/development)
Jika Anda ingin melakukan upgrade versi jQuery ke veri 2.0 dari versi sebelum 1.9, disarankan untuk menggunakan jQuery Migrate plugin dan membaca Panduan Upgrade jQuery 1.9, karena ada banyak perubahan.
Versi baru biasanya terdapat penambahan fungsi baru dari fungsi jquery yang sebelumnya. Tetapi pasti memiliki besar kapasitas yang lebih besar dari versi yang sebelumnya sehingga dengan versi yang baru dapat memperberat beban dan loading pada aplikasi website yang dibuat. Maka dari itu kita harus mempertimbangkan ketika kita memakai versi jquery yang kita akan gunakan.
Perbedaan Jquery.js (tanpa min) dengan jquery.min.js (menggunakan min). Dari keduanya mempunyai kegunaan dan fungsi sama. Penggunaan “min” menandakan bahwa jquery tersebut telah dikompres (compress) sehingga muatan atau bebannya telah terkurangi dengan tujuan untuk mempercepat waktu loading. Compress jquery dilakukan dengan menghilangkan beerapa keterangan dan spasi yang sebenarnya berfungsi untuk memudahkan pengguna saat membuat desain baru dengan memanfaatkan jquery. Maka dari itu jika sekedar pengguna lebih baik menggunakan jquery.min.js agar loading lebih cepat.
Perubahan-perubahan di jQuery Versi 2.0 antara lain jQuery 2.0 dimaksudkan untuk web-web modern dan Tidak lagi mensupport IE 6/7/8: Ingatlah bahwa ini juga dapat mempengaruhi IE9 dan bahkan IE10 jika mereka digunakan dalam "Compatibility View" sebuah fasilitas mode di IE yang meniru versi lama. Selain itu juga ukuran file jQuery Versi 2.0 12 persen lebih kecil daripada file 1.9.1, hal ini dikarenakan penghapusan patch yang dibutuhkan untuk IE 6, 7, dan 8.
JQuery versi 2.0 ini setara dengan jQuery 1.9 API: jQuery 2.0 memiliki kompatibilitas yang sama dengan versi 1.9 yang berarti semua dokumentasi log perubahan di versi 1.9 juga berlaku untuk jquery versi 2.0.
C. 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.
Selain fungsi tersebut diatas, salah satu kemampuan jQuery adalah adanya fungsi-fungsi efek yang siap pakai. Biasanya digunakan untuk membuat efek memudar di javascript. Dengan menggunakan jQuery kita cukup menggunakan fungsi $(selector).fadeIn(). Berikut ini adalah efek-efek siap pakai yang disediakan jQuery :
jQuery show() : berfungsi untuk menampilkan elemen yang tersembunyi.
jQuery hide() : berfungsi untuk menyembunyikan elemen yang dipilih.
jQuery toggle() : merupakan gabungan dari fungsi hide dan show.
jQuery slideDown() : berfungsi menampilkan elemen yang tersembunyi , secara efek sliding.
jQuery slideUp() : berfungsi menyembunyikan elemen secara efek sliding.
jQuery slideToggle() : merupakan gabungan antara slideDown() dan slideUp().
jQuery fadeIn() : berfungsi menampilkan elemen yang dipilih jika tersembunyi.
jQuery fadeOut() : berfungsi menyembunyikan elemen yang dipilih secara efek memudar.
jQuery fadeTo() : berfungsi mengatur tingkat kepudaran elemen terpilih menuju tingkat opacity yang ditentukan.
jQuery animate() : berfungsi mengubah suatu elemen dari satu keadaan ke keadaan lainnya.
Lebih jelasnya untuk mendapatkan gambaran mengenai fungsi dari efek jQuery, berikut ini adalah 12 script fungsi JQuery yang sangat penting dan akan sering gunakan dalam pembuatan halaman web yaitu :
1. Script JQuery Selector Umum Digunakan
Berikut ini adalah script selector JQuery yang umum digunakan untuk memanggil elemen website.
//--- COMMON JQUERY SELECTORS ---//
// get element by id
$("#ElementID").whatever();
// get element by css class
$(".ClassName").whatever();
// get elements where id contains a string
$("[id*='value']").whatever();
// get elements where id starts with a string
$("[id^='value']").whatever();
// get elements where id ends with a string
$("[id$='value']").whatever();
// get all elements of certain type (can use "p", "a", "div" - any html tag)
$("div").whatever();
2. Script JQuery Tambah dan Hapus Class CSS
Script JQuery berikut ini berfungsi untuk menambahkan dan menghapus class css secara dinamis.
//--- ADD & REMOVE CSS CLASSES ---///
// add css class
$("#DivID").addClass("newclassname");
// remove css class
$("#DivID").removeClass("classname");
// add & remove class together
$("#DivID").removeClass("classname").addClass("newclassname");
// add & remove multiple classes
$("#DivID").removeClass("classname classname2").addClass("newclassname newclassname2");
3. Script JQuery Merubah dan Mendapatkan Nilai HTML Textbox
Script jquery berikut ini berfungsi untuk merubah dan mendapatkan nilai html Textbox secara dinamis.
//--- GET & SET TEXTBOX VALUE ---//
//--- CAN ALSO BE USED ON ANY OTHER ELEMENT THAT HAS A VALUE PROPERTY ---//
// get the value of a textbox
var TextboxValue = $("#TextboxID").val();
// set the value of a textbox
$("#TextboxID").val("New Textbox Value Here");
4. Script JQuery Mendapatkan dan Merubah Elemen HTML
Script Jquery berikut ini dapat merubah dan mengambil nilai dari elemen html
//--- GET & SET HTML OF ELEMENT ---//
// get element html
var DivHTML = $("#DivID").html();
// set element html
$("#DivID").html("This is the new html");
5. Script JQuery Mendapatkan dan Merubah Elemen Input Textarea
Script jquery ini berfungsi untuk mendapatkan dan merubah elemen html form input text area.
//--- GET & SET TEXT OF ELEMENT ---//
// get text of element
var DivText = $("#DivID").text();
// set text of element
$("#DivID").text("This is the new text.");
6. Script JQUERY Merubah Lebar dan Tinggi Elemen HTML
Script Jquery dibawah ini berfungsi untuk merubah lebar dan tinggi elemen html.
//--- GET & SET ELEMENT'S WIDTH & HEIGHT
// get element height
var ElementHeight = $("#DivID").height();
// set element height
$("#DivID").height(300);
// get element width
var ElementWidth = $("#DivID").width();
// set element width
$("#DivID").width(600);
7. Script JQuery Merubah Properti CSS
Script jquery berikut ini berfungsi merubah properti css ke dalam nilai yang anda tentukan.
//--- CHANGE AN ELEMENT'S CSS PROPERTY ---//
$("#DivID").css("background-color", "#000");
$("#DivID").css("border", "solid 2px #ff0000");
8. Script JQuery Toggle Menampilkan dan Menyembunyikan Elemen
Script jquery toggle ini berfungsi menampilkan dan menyembunyikan elemen nilai html
//--- JQUERY TOGGLE/SHOW/HIDE ---//
// toggle hide/show of an element
$("#DivID").toggle(1000);
// do something when animation is complete
$("#DivID").toggle(1000, function () {
alert("Toggle Complete");
});
// hide an element
$("#DivID").hide(1000);
// do something when animation is complete
$("#DivID").hide(1000, function () {
alert("Hide Complete");
});
// show an element
$("#DivID").show(1000);
// do something when animation is complete
$("#DivID").show(1000, function () {
alert("Show Complete");
});
9. Script JQuery Fungsi Animasi Slide
Script Jquery fungsi animasi slide up dan slide down memungkinkan anda membuat animasi menggunakan fungsi ini.
//--- JQUERY SLIDE - SLIDE AN ELEMENT IN AND OUT ---//
// toggle slide up and down
$("#DivID").slideToggle(1000);
// do something when animation complete
$("#DivID").slideToggle(1000, function () {
alert("Slide Toggle Complete");
});
// slide up
$("#DivID").slideUp(1000);
// do something when animation is complete
$("#DivID").slideUp(1000, function () {
alert("Slide Up Complete");
});
// slide down
$("#DivID").slideDown(1000);
// do something when animation is complete
$("#DivID").slideDown(1000, function () {
alert("Slide Down Complete");
});
10. Script JQuery Fungsi Animasi Fade
Script Jquery animasi memungkinkan anda untuk membuat animasi fade seperti gambar muncul dari gradasi transparan ke solid.
//--- JQUERY FADE - FADE AN ELEMENT IN, OUT & TO ---//
// fade in
$("#DivID").fadeIn(1000);
// do something when animation complete
$("#DivID").fadeIn(1000, function () {
alert("Fade In Complete");
});
// fade out
$("#DivID").fadeOut(1000);
// do something when animation is complete
$("#DivID").fadeOut(1000, function () {
alert("Fade Out Complete");
});
// fade to (fades to specified opacity)
$("#DivID").fadeTo(1000, 0.25);
// do something when animation is complete
$("#DivID").fadeTo(1000, 0.25, function () {
alert("Fade To Complete");
});
11. Script JQuery Fungsi Animasi – Animasi
Script Jquery ini digunakan untuk membuat animasi sesuai kreasi dengan menggunakan fungsi ini.
//--- ANIMATE (EXAMPLE USES OPACITY, BUT CAN USE ANY CSS PROPERTY. ---//
//--- NOTE SOME MY REQUIRE THE USE OF A PLUGIN SUCH AS JQUERY COLOR ANIMATION PLUGIN. ---//
$("#DivID").animate({ opacity: 0.25 }, 1000);
// do something when animation complete
$("#DivID").animate({ opacity: 0.25 }, 1000, function () {
alert("Opacity Animation Complete");
});
Script Jquery ini berfungsi untuk auto focus cursor pada elemen form input yang pertama kali sehingga anda tidak perlu melakukan ekstra klik. Biasanya script jquery auto focus ini cocok diletakkan pada form login atau form-form entri data.
<script type="text/javascript" language="javascript">
$(document).ready(function() {
// focus on the first text input field in the first field on the page
$("input:text:visible:first").focus();
});
</script>
Penerapan fungsi jQuery
Untuk menerapakan fungsi-fungsi yang sudah dijelaskan diatas, berikut ini merupakan contoh untuk melakukan manipulasi pada TAG div dengan beberapa fungsi yang dapat kita ambil dengan mudah pada JQUERY, diantaranya seperti fungsi:
slideUp » Menggeser TAG DIV ke arah atas
slideDown » Menggeser TAG DIV ke arah bawah
addClass » Menambahkan class pada DOM
removeClass » Menghapus class suatu DOM
fadeIn » Manampilkan DOM secara perlahan
fadeOut » Manyembunyikan DOM secara perlahan
Dan masih banyak fungsi lainnya yang bisa kita pelajari lebih jauh
Berkenaan dengan pemaparan diatas, mari kita coba fungsi - fungsi tersebut untuk kita gunakan pada sebuah halaman web dan kita lihat bagaimana hasilnya, langkah - langkahnya adalah sebagai berikut :
1. Buat halaman utamanya » utama.php
<html>
<head>
<title>Manipulasi TAG DIV dengan JQUERY</title>
<script type="text/javascript" src="jquery-1.6.1.min.js">//memanggil jquery</script>
<script type="text/javascript" src="ajax.js">//memanggil script ajax</script>
<link rel="stylesheet" href="style.css" type="text/css"/>
</head>
<body>
<div id="wrapper">
<div id="menu">
<span class="button" onclick="slideUp();">Slide UP</span>
<span class="button" onclick="slideDown();">Slide Down</span>
<span class="button" onclick="TambahBg();">+ Background</span>
<span class="button" onclick="HapusBg();">- Background</span>
<span class="button" onclick="fadeOut();">Hilangkan</span>
<span class="button" onclick="fadeIn();">Munculkan</span>
</div>
<div id="dom_text">
<p>
Media kreatif didirikan untuk dapat menjadi Partner IT Professional dan mengahasilkan produk - produk edukasi dengan harapan dapat ikut berpartisipasi dalam rangka mencerdaskan bangsa.
</p>
<p>
Produk
</p>
<p>
Produk - produk Media Kreatif saat ini antara lain :
</p>
1. Web design & PHP Programming<br/>
<p>
Produk ini meliputi produk - prodduk yang berbasis website dengan basis pemrograman PHP dan tentunya juga menggunakan Content Management System yang sudah dirancang sendiri sejak Media Kreatif didirikan, yaitu PRM-CMS
</p>
2. Kemitraan IT<br/>
<p>
Kemitraan IT merupakan program kerja dimana kami akan mengembangkan aplikasi sesuai dengan permintaan pelanggan, yang selanjutnya pengelolaan aplikasi akan diserahkan kepada kami sesuai dengan kesepakatan yang telah disetujui bersama. Program ini sangat cocok untuk usaha yang berbasis IT karena aplikasi anda secara khusus akan menjadi tanggung jawab kami sehingga pelanggan tidak perlu dispuingkan dengan penyediaan tenaga teknis.
</p>
3. Pendidikan<br/>
<p>
Program pendidikan memang sudah menjadi tujuan kami sejak dulu, dimana kami ingin menyediakan sebuah metode pengajaran yang benar - benar dapat membuat peserta didik memahami setiap alur dan materi yang kami sampaikan. Silahkan kunjungi halaman Media Edukasi untuk memahami lebih lanjut seperti apa metode pengajaran kami
</p>
</div>
</div>
</body>
</html>
Script html diatas akan kita gunakan sebagai media untuk melakukan manipulasi TAG DIV dengan menggunakan JQUERY, script dapat kita simpan dengan extensi .php atau dengan .html
2. Membuat script css untuk melakukan manipulasi class atau id selector » style.css
body{
font:normal 12px Tahoma,Verdana;
margin:0 0 0 0;
padding:0 0 0 0;
}
#dom_text{
font:normal 12px Tahoma,Verdana;
width:500px;
border:silver 1px solid;
text-align:justify;
margin-left:auto;
margin-right:auto;
padding:10px;
}
#menu{
font:normal 12px Tahoma,Verdana;
width:520px;
height:30px;
border:silver 1px solid;
text-align:justify;
margin:5px 0 5px 0;
margin-left:auto;
margin-right:auto;
}
span.button{
margin-left:10px;
line-height:30px;
border:silver 1px solid;
padding:5px;
cursor:pointer;
}
.bakcground_hitam{
background-color:#000000;
color:#ffffff;
}
3. membuat script ajax.js
Script ini merupakan sekumpulan fungsi javascript yang selanjutnya akan dipanggil oleh halaman utama pada contoh script no 1.
function slideUp()
{
$('#dom_text').slideUp('slow');
}
function slideDown()
{
$('#dom_text').slideDown('slow');
}
function TambahBg()
{
$('#dom_text').addClass('bakcground_hitam');
}
function HapusBg()
{
$('#dom_text').removeClass('bakcground_hitam');
}
function fadeOut()
{
$('#dom_text').fadeOut('slow');
}
function fadeIn()
{
$('#dom_text').fadeIn('slow');
}
Adapaun nama fungsi - fungsi tersebut dipanggil oleh event - event onclick yang sudah ditanamkan pada script utama pada contoh pertama seperti berikut :
<span class="button" onclick="slideUp();">Slide UP</span>
<span class="button" onclick="slideDown();">Slide Down</span>
<span class="button" onclick="TambahBg();">+ Background</span>
<span class="button" onclick="HapusBg();">- Background</span>
<span class="button" onclick="fadeOut();">Hilangkan</span>
<span class="button" onclick="fadeIn();">Munculkan</span>
D. Fitur –fitur yang terdapat dalam jQuery
Beberapa Fitur yang ada di JQuery :
1. dalam penggunaannya menggunakan seleksi element DOM, sehingga website lebih dinamis dan interaktif.
2. JQuery dapat memanipulasi Class pada CSS dan Support CSS 3
3. Event
4. AJAX
5. Efek-efek dan animasi
6. Ekstensi dan Plug-ins
7. Kompatibilitas dengan hampir semua Browser modern yang ada saat ini.
8. Keperluan lain seperti : User Agent, Feature detection dan lain sebagainya.
E. Cara Kerja Jquery
Cara kerja jQuery adalah sebagai berikut :
1. jQuery akan memastikan bahwa semua elemen atau elemen yang diinginkan sudah ditampilkan semua pada halaman web, fungsi yang digunakan adalah:
$(document).ready(function(){
// baris kode jQuery akan dijalankan
// apabila semua elemen sudah ditampilkan semua
});
2. Setelah semua elemen sudah 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");
)};
Download JQuery
Situs resmi JQuery dapat diakses di http://jquery.com/. Dan library JQuery dapat didownload di alamat http://docs.jquery.com/Downloading_jQuery. Tersedia library jQuery dalam 2 (dua) jenis yaitu minified dan uncompressed. Minified jika kita ingin menggunakannya saja dalam website kita (ukuran 18 KB), sedangkan uncompressed jika kita berkeinginan turut serta mengembangkan code jQuery.
Contoh Sederhana JQuery
Contoh sederhana penggunaan JQuery
Penjelasan Program
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.
F. Implementasi Jquery
Banyaknya plugin aplikasi yang siap dipakai sangatlah membantu pengguna jika menggunakan framework javascript jQuery. Plugin ini adalah semacam fungsi atau fitur tambahan yang digabungkan ke dalam sebuah JQuery mempercepat atau memudahkan dalam pembangunan sebuah website.
Dalam pembuatan website, web developer mempunyai berbagai pilihan untuk mengembangkan script-scriptnya atau memakai open source technology.
Berikut ini adalah beberapa plugin jquery yang sering digunakan oleh beberapa web developer dalam membuat atau membangun sebuah website, antara lain :
Ø Drop-Down-Menu
Apabila 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 sebuah 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
G. Manfaat Jquery
Ada beberapa manfaat yang dapat kita ambil ketika menggunakan jQuery , diantaranya :
· 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
Untuk lebih memahami manfaat jquery ini secara, berikut ini beberapa penjelasannya:
1) Mempermudah akses dan manipulasi elemen tertentu pada dokumen.
Hal ini biasanya diperlukan baris program yang cukup panjang untuk mengakses suatu elemen dokumen. Tetapi, 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 dapat dimanipulasi sesuai dengan kebutuhan dan keinginan pengguna.
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 sangatlah tergantung pada struktur dari HTML. JQuery menawarkan cara yang memudahkan para pengguna dalam mengakses bagian tertentu dari halaman. Pengaksesan ini juga tidak bergantung pada struktur HTML.
2) Mempermudah modifikasi/perubahan tampilan halaman web.
Untuk memodifikasi tampilan halaman web biasanya digunakan CSS. 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. CSS ini sangat dipengaruhi oleh web browser yang digunakan sehingga sering terjadi halaman web yang sudah tersusun rapi dan berpenampilan menarik di browser Mozilla, namun ketika ditampilkan di Opera menjadi berantakan. Namun, beda halnya dengan jQuery dapat menyesuaikan style CSS pada semua browser. JQuery menawarkan solusi yang baik untuk mengatasi hal tersebut.
3) Mempersingkat Ajax (Asynchronous Javascript and XML).
Kemampuan favorit dari Ajax adalah mampu mengambil informasi dari server tanpa melakukan refresh pada seluruh halaman web, artinya halaman web terlihat berganti secara otomatis. Hal ini mendadi salah satu konsep Ajax. Dalam penerapannya, apabila menuliskan kode Ajax secara manual, biasanya diperlukan baris yang cukup panjang, namun dengan menggunakan jQuery dapat mempersingkatnya menggunakan Ajax cell, perbandingan 25 baris kode Ajax dapat disingkat menjadi 5 baris kode saja jika menggunakan jQuery.
4) Memiliki API (Application Programming Interface)
Dengan menggunakan API, jQuery dapat memanipulasi content pada suatu halaman web, seperti pengubahan teks, manipulasi gambar (resize,rotate,crop), penyusunan daftar (list), pengurutan list, menghapus baris tabel, paging, dan lain sebagainya. Dengan JQuery, hal tersebut dapat dilakukan dengan hanya beberapa baris perintah.
5) Mampu merespon interaksi antara user dengan halaman web dengan lebih cepat. Website yang baik tidak cukup digambarkan dengan user-interface dan tampilan yang memukau. Namun lebih dari itu, yaitu 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. jQuery mempunyai cara yang sangat-sangat sederhana untuk memasukkan sebuah even ke dalam salah satu bagian dari webpage.
6) Menyediakan fasilitas untuk membuat atau menambah animasi sekelas Flash dengan mudah.
Animasi seringkali disertakan dalam suatu halaman web untuk menambah kecantikan halaman web. Hingga kini animasi masih terus digemari oleh para pengguna web. Dalam hal ini, 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 dengan mudah.
7) Menyederhanakan penulisan Javascript biasa.
Semboyan JQuery adalah “Write less, do more” atau dengan kata lain kesederhanaan dalam penulisan code, tetapi menghasilnya tampilan yang lebih. Sebenarnya inilah yang menjadi daya tarik tersendiri buat para pengembang web untuk menggunakan JQuery.
H. Kelebihan dan kekurangan Jquery
Kelebihannya yaitu:
a) Didukung oleh banyak komunitas
b) Disupport oleh plugin yang lengkap
c) Filenya hanya satu dan ukurannya relatif kecil, sekitar 20kb
d) Open source atau Free
e) jQuery lebih diminati oleh para developer web saat ini
Kekurangannya yaitu :
- 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.
I. Sintaks Jquery
Biasanya sintaks jQuery dibuat untuk memilih elemen-elemen HTML dan melakukan aksi terhadap elemen yang dipilih.
Sintaks: :
$(selector).action()
$(selector).action()
Tanda dollar, untuk mendefinisikan jQuery. (selector), untuk menunjukkan elemen yang dipilih atau dituju. action(), adalah jQuery action yang akan dilakukan terhadap elemen yang dipilih.
Contoh :
$(this).hide()
– menyembunyikan elemen saat ini
$("p").hide()
– menyembunyikan semua paragraf atau konten dari tag <p>
$(".test").hide()
– menyembunyikan elemen yang mempunya class=”test”
$("#test").show()
– menampilkan elemen yang mempunyai id=”test”
Karena hampir segala sesuatu yang kita lakukan bila menggunakan jQuery membaca atau memanipulasi document object model (DOM), kita perlu memastikan bahwa kita mulai menambahkan event segera setelah DOM siap. Untuk melakukan hal ini, kita menambahkan kode ready event untuk dokumen.
$(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);
});
Kode di atas berarti kita ingin kode dijalankan apabila halaman HTML telah di-load semuanya. Atau dengan kode javascript biasanya seperti ini :
window.onload = function(){ //kode anda di sini }
Sekarang mari kita lihat pada contoh
$(".tombol1").click(function(){
$("p").hide(1000);
});
Kode $(“.tombol1″) adalah jQuery selektor. Di mana kita memilih elemen yang mempunyai class=”tombol1” untuk kita lakukan sesuatu. $ sendiri adalah alias untuk jQuery class. Oleh karena $() untuk membuat objek jQuery. Kemudian kita tambahkan fungsi click(). Ini berguna untuk memberikan event onclick untuk elemen yang kita pilih tadi (dalam hal ini adalah elemen yang mempunya class=’tombol1’). Dan kemudian melaksanakan fungsi yang diberikan apabila event onclick terjadi. Jadi artinya apabila elemen dengan class=”tombol1” diklik maka lakukan fungsi $(“p”).hide(1000);
Fungsi hide() dan show() adalah fungsi built in dari jQuery, nanti akan kita lihat lebih lanjut fungsi-fungsi built in dari jQuery.
BAB III
PENUTUP
A. Kesimpulan
JQuery merupakan sebuah framework dan merupakan cara baru dalam menuliskan kode javascript. jQuery mempunyai semboyan “write less, do more”. jQuery dirancang untuk mempercepat dan meringkaskan kode-kode javascript serta kaya akan fitur.
Dengan demikian, menggunakan jQuery dapat dengan cepat dan ringan untuk menangani perpindahan dokumen HTML, penanganan event (event handling), pembuatan animasi didalam web. Dengan JQuery, suatu halaman web akan tampak seperti flash, dan juga interaksi AJAX untuk pengembangan web yang modern dan cepat.
JQuery dikembangkan pertama kali oleh John Resig, yang dibuat lebih ramping dari librari Prototype yang menjadi inspirasi dari libarari JQuery ini. Secara pemrograman, JQuery memiliki kemiripan seperti Prototype.
Banyak sekali kemudahan-kemudahan yang ditawarkan oleh JQuery yang belum banyak ditawarkan oleh Javascript yang lain. Dengan kecanggihannya, jQuery dipakai oleh perusahaan besar website-website terkemuka di dunia, salah satunya adalah google. Dengan hadirnya JQuery, memberi banyak kemudahan dalam pengaksesan data ataupun pencarian informasi dan lain sebagainya.
DAFTAR PUSTAKA
http://upyes.wordpress.com/2013/01/30/pengertian-jquery/ diakses pada tanggal 25 Oktober 2013 pukul 11.12
http://valentinofebrian.blogspot.com/2013/05/pengertian-jquery-dan-cara-kerjanya.html diakses pada tanggal 25 Oktober 2013 pukul 11.06
http://mrbawell.blogspot.com/2010/11/implementasi-jquery.html diakses pada tanggal 25 Oktober 2013 pukul 12.09
http://bagindokemas.com/2008/12/21/berkenalan-dengan-jquery/ diakses pada tanggal 15 pukul 13.05
http://achmatim.net/2009/01/20/jquery-untuk-orang-awam/ diakses pada tanggal 15 November 2013 pukul 13.00
http://agus-wirayasa.blogspot.com/2013/05/jquery.html diakses pada tanggal 4 november 2013
http://ujangyoyo.blogspot.com/2013/04/jquery-20-akhirnya-rilis-juga-segera.html diakses pada tanggal 4 November 2013
http://www.bukuharian.com/apa-itu-jquery.html diakses pada tanggal 25 Oktober 2013 pukul 10.54
http://fitriafebrianti.wordpress.com/2013/02/27/manfaat-menggunakan-jquery/ diakses pada tanggal 4 november 2013 pukul 19.03
http://choirulzone.wordpress.com/2011/01/10/sintaks-jquery-introduction/ diakses pada tanggal 4 november 2013 pukul 19.50
Tidak ada komentar:
Posting Komentar