Suci Ayu Utamy: Makalah JQuery

“Makalah Pengenalan JQUERY”

Makalah ini disusun guna memenuhi tugas matakuliah Teknik Informatika dan Komunikasi

Nama : Suci Ayu Utamy

NIM : 1102412008

Prodi : Teknologi Pendidikan, S1.

Jurusan : Teknologi Pendidikan

TEKNOLOGI PENDIDIKAN

UNIVERSITAS NEGERI SEMARANG

2013/2014

KATA PENGANTAR

Puji syukur kami panjatkan kehadirat Allah SWT yang telah memberikan rahmat serta karunia-Nya kepada kami sehingga kami berhasil menyelesaikan makalah ini yang alhamdulillah tepat pada waktunya yang Makalah Pengenalan Jquery.

Makalah ini berisikan tentang informasi mengenai Jquery atau yang lebih khususnya membahas tentang sejarah serta berbagai fiturnya. Diharapkan Makalah ini dapat memberikan informasi kepada kita semua tentang Jquery.

Kami menyadari bahwa makalah ini masih jauh dari sempurna, oleh karena itu kritik dan saran dari semua pihak yang bersifat membangun selalu kami harapkan demi kesempurnaan makalah ini.
Akhir kata, kami sampaikan terima kasih kepada semua pihak yang telah berperan serta dalam penyusunan makalah ini dari awal sampai akhir. Semoga Allah SWT senantiasa meridhai segala usaha kita. Amin.

Semarang, 10 November 2013

Penyusun

BAB I

PENDAHULUAN

A. LATAR BELAKANG MASALAH

Perkembangan teknologi yang semakin maju dan pesat mengharuskan kinerja teknologi dapat dimanfaatkan dan diimplementasikan pada berbagai aspek kehidupan manusia. Tak dapat diragukan lagi perkembangan ilmu komunikasi dan teknologi informasi mengalami kemajuan yang sangat pesat. Bahkan dalam perkembangannya tak dapat dihitung dengan rentang waktu bertahun-tahun, namun cukup dengan bulan saja sudah mengalami kemajuan yang sidnifikan.

Hal ini ditandai dengan berkembangnya teknologi internet yang dapat memudahkan kebutuhan manusia dalam meringankan pekerjaan dan mempermudah dalam berkomunikasi dan saling bertukar informasi.

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

Dalam pembuatan dan pengembangan web atau blog para web developer memerlukan pengetahuan yang cukup mendalam tentang Java Script, JQUERY, AJAX dan CSS. Dan kali ini dalam makalah yang saya tulis akan membahas mengenai JQuery. Oleh sebab itu besar harapan penulis agar makalah ini dapat digunakan para pemula dalam membangun sebuah web.

B. RUMUSAN MASALAH

a. Apa Pengertian JQuery ?

b. Bagaimana Sejarah Perkembangan JQuery ?

c. Apa saja fitur-fitur yang tersedia di JQuery?

d. Seperti Apa cara kerja JQuery ?

e. Apa fungsi JQuery?

f. Apa Saja manfaat JQuery?

g. Bagaimana Implementasi JQuery?

h. Mengapa menggunakan JQuery?

i. Seperti Apa contoh dari JQuery?

j. Apa kemampuan yang dimilki JQuery?

k. Apa kekurangan yang dimiliki JQuery?

l. Seperti apa sintaks JQuery?

m. Seperti apa Jquery atribut selector ?

n. Seperti apa JQuery Selector ?

o. Apan saja kemudah yang ditawarkan oleh JQuery?

p. Bagaimana efek-efek dengan JQuery?

q. Apa perbedaan Javascript dan Jquery?

C. BATASAN MASALAH

Dalam masalah yang kami tulis ini hanya membahas tentang JQuery dari pengertiannya, sejarah hingga kemampuan yang dimiliki oleh Jquery.

D. TUJUAN PENULISAN

Adapun tujuan penulisan makalah ini kami tulis karena merupakan tugas dari Dosen mata kuliah Teknik Informatika dan komunikasi dan juga memperdalam pengetahuan kami tentang Jquery. Serta untuk mengetahui berbagai hal tentang Jquery mulai dari pengertian, sejarah, fitur – fitur, serta manfaat dan fungsi dari Jquery.

BAB II

PEMBAHASAN

A. PENGERTIAN JQUERY

Jquery adalah suatu library (framework) yang berbasiskan Javascript. Javascript sendiri adalah bahasa pemrograman yang dapat bekerja di sebagian besar browser terbesar seperti Google Chrome, Mozilla Firefox Safari, Internet Explorer (IE) Opera dan lainnya. Jquery juga sama dengan Javascript Library yaitu kumpulan kode atau fungsi Javascript siap pakai, sehingga dapat mempermudah dan mempercepat dalam pembuatan Javascript atau framework yang mampu menyederhanakan penulisan kode dengan hasil yang lebih baik "Write less, do more" atau sedikit menulis tetapi bisa menghasilkan banyak.

Jquery sendiri dirancang untuk meringkas kode-kode javascript. Dimana Jquery merupakan javascript library yang dapat dengan cepat dan ringan untuk menangani dokumen HTML, menangani event yang didukung oleh jQuery, event-event tersebut akan meningkatkan interaktivitas web dengan pengunjung. Membuat animasi dan interakasi ajax. Secara default, jQuerymendukungdenganbaikkonsep AJAX, baik format data teks, XML, maupun JSON. JQuery memang dirancang untuk mengubah cara kita menulis javascript.

JQuery merupakan library yang bersifat open source, atau gratis dengan lisensi GNU General Public License dan MT License. Jquery berukuran sangat ringan, yang hanya terdiri dari satu file dan berukuran kurang lebih 20 KB. Sehingga menggunakan jQuery jauh lebih cepat dan mudah daripada menggunakan framework yang lain atau menggunakan Javascript Konvensional.

Dalam perkembangannya jQuery terus memunculkan versi-versi terbarunya yang dapat diunduh secara gratis dalam situs resmi jQuery. Tidak hanya itu jQuery juga menyediakan tambahan-tambahan plugin untuk menambah beberapa fungsionalitas. Karena keunggulannya jQuery berkembang tidak hanya untuk framework javascript saja namun juga sudah berkembang untuk tujuan-tujuan lain seperti misalnya Microsoft dan Nokia telah mengumumkan akan mengemas jQuery di platform mereka. Microsoft pada awalnya hanya mengadopsi dalam Visual Studio untuk digunakan dalam ASP.NET AJAX dan ASP.NET MVC Framework, sedangkan Nokia akan mengintegrasikannya dalam kerangka Web Run-Time.

Kemampuan yang dimiliki Library jQuery, diantaranya adalah :

ü Kemudahan mengakses elemen-elemen HTML

ü Memanipulasi elemen HTML

ü Memanipulasi CSS. Dimana penggunaan Jquery dalam mengaturtampilan (CSS + jQuery).

ü Efek-efek Javascript dan animasi. Pemggunaan teknik-teknik jQuery untukmengaturefektampilanhalaman web, termasukdidalamnyaanimasi-animasi yang bisadilakukanolehjQuery. Diantaraanimasi yang seringdigunakanadalah fading dan sliding.

ü Dapat memodifikasi HTML DOM (Document Object Model)

ü Mempermudah dalam menyederhanakan kode Javascript dan lainnya.

Jquery juga menyediakan layanan atau support para developers untuk membuat plug-ins di dalam bahasa Javascript tentunya. Sehingga lebih memungkinkan para developer website membuat website lebih interaktif dengan animasi, efek – efek, tema dan widget. Dengan menggunakan Jquery dapat pula dijadikan sebagai media untuk meluapkan kreatifitas untuk membuat website dinamis dan lebih menarik tentunya.

B. SEJARAH PERKEMBANGAN JQUERY

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

Kemudian para pengembang datang untuk membantu menyempurnakan librari ini, dan akhirnya menghasilkan rilis stabil pertama dari jQuery versi 1.0 pada tanggal 2006. Sejak itu, jQuery telah berkembang ke versi 1.7.1 dan telah mempunyai plug-in yang banyak. Sebuah plug-in adalah ekstensi dari jQuery yang bukan bagian dari library inti.

Pada versi terbaru Jquery sudah mencapai versi 1.2.3. Dalam penciptaannya Resig terinspirasi dari Behavior code, Yang pada saat itu Resig merasa hasil dari Behavior Code kurang elegan. Oleh karena itu mulai dikembangkannya Jquery. Dimana dengan penulisan code Jquery menjadi lebih mudah dan praktis serta dengan hasil yang memuaskan. Perbedaan menggunakan situs Jquery dengan situs-situs yang lainnya nampak pada browser yang seakan tidak merefresh sebuah page ketika men-submit sebuah data kedalam server.

Semenjak kemunculannya 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. Dan sampai saat ini sudah tercatat ada jutaan website yang telah menggunakan jQuery.

C. FITUR-FITUR YANG ADA DI JQUERY

Beberapa fitur yang tersedia di Jquery:

1. Dalam Pemakaian menggunakan seleksi element DOM, sehingga website lebih dinamis dan interaktif.

2. JQuery bisa 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

8. Keperluan lain seperti : User Agent, Feature detection dan lainnya.

D. CARA KERJA JQUERY

Cara kerja yang dilakukan Jquery yaitu :

1. jQuery akan memastikan bahwa semua elemen atau elemen yang diinginkan sudah ditampilkan semua di halaman web, fungsi yang digunakan adalah:
$(document).ready(function(){
// baris kode jQuery akan dijalankan
// apabila semua elemen sudah ditampilkan semua
});

2. Setelah semua elemen ditampilkan, tahap berikutnya adalah memilih elemen berdasarkan class atau id yang telah didefinisikan. Dalam hal ini, jQuery menggunakan fungsi Selector.
$("#foto")
$(".sembunyi")
$(".tampil")

3. Setelah elemen dipilih, tahap berikutnya adalah memberikan aksi/operasi terhadap elemen yang sudah dipilih. Misalnya tombol yang akan menyembunyikan dan memunculkan kembali gambar.
$(".sembunyi").click(function(){
$("#foto").hide("slow");
)};

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

F. MANFAAT JQUERY DALAM PERKEMBANGAN APLIKASI WEBSITE

Banyak orang menggunakan JQuery dalam perancangan aplikasi berbasis web terutama untuk mempercantik tampilan dan juga membuat website menjadi lebih atraktif. Berikut akan dijelaskan beberapa kegunaan dari jQuery :

1. Mengakses bagian halaman website dengan mudah

Javascript memberikan cara pengaksesan bagian tertentu dari halaman web dengan menggunakan aturan Document Objekct Model (DOM) dan pengaksesan harus secara spesifik menyesuaikan struktur aturan HTML. Oleh sebab itu dengan adanya framework ini pengaksesan dokumen HTML menjadi lebih mudah dan tidak terlalu bergantung pada aturan struktur HTML.

2. Merespon interaksi user dalam halaman

jQuery tidak hanaya memberikan tampilan yang menarik namun juga lebih atraktif. Interaksi dengan user akan semakin meningkat. Contohnya saja bila di javacript sudah ada event handling seperti onChange atau onClick untuk menangani event saat terjadi perubahan atau click pada objek-objek yang terbatas. Maka di jQuery jenis event handling yang diberikan lebih banyak daripada yang diberikan oleh javascript dengan tambahan penanganan event handling menjadi semakin mudah.

3. Menambahkan animasi ke halaman

Beberapa website sebenarnya juga sudah menggunakan animasi sebelum adanya jQuery, yaitu dengan menggunakan flash, gambar bergerak (.gif) ataupun dengan video. Namun di sini jQuery menawarkan fitur-fitur yang tidak kalah menarik dan yang menjadi kelebihan adalah animasi ini akan mengurangi bandwidth atau bisa dikatakan animasi yang diberikan oleh jQuery ringan untuk diakses. Contoh animasi yang bisa dibuat dengan jQuery adalah fading jika terdapat suatu bagian dari halaman ditambahkan atau dihilangkan, dan juga image slider untuk membuat efek foto yang bergerak.

4. Mengubah isi dari halaman

Mungkin jika dahulu kita cukup disulitkan jika akan mengubah sebagian isi dari halaman. Dalam arti mengubah disini yaitu mengganti teks menambahkan teks atau gambar, mengurutkan suatu daftar (list), menghapus baris tabel dan sebagainya. Dengan JQuery, hal tersebut hanya dapat dilakukan dengan beberapa baris perintah.

5. Mengambil informasi di server tanpa harus merefresh halaman web

Konsep ini sebenarnya sudah ada di teknologi web berbasis AJAX. Namun pengimplementasian AJAX ternyata sulit, dan jQuery memiliki banyak library khusus yang mempermudahnya sesuai dengan semboyannya yaitu “Write less, do more”. Contoh dari penerapan pengambilan informasi tanpa merefresh seluruh halaman adalah seperti saat kita menuliskan comment di facebook, atau saat kita update status di facebook.

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

7. Menyederhanakan penulisan Javascript biasa

Dengan menggunakna jQuery penulisan code Javascript yang terlalu banyak dapat dihindari.

G. IMPLEMENTASI JQUERY

Banyaknya plugin aplikasi yang siap jadi atau siap dipakai, itu merupakan kemudahan jika kita menggunakan framework javascript jQuery. Yangmana plugin adalah semacam fungsi atau fitur tambahan yang digabungkan ke dalam sebuah JQuery mempercepat atau memudahkan dalam pembangunan sebuah website.

Setelah melakukan riset mendalam, maka PT Proweb Indonesia memutuskan mengimplementasikan jQuery. Keputusan ini diambil untuk melayani kebutuhan website yang lebih interaktif dalam waktu yang cepat seiring dengan perkembangan teknologi.

Dalam pembuatan website, web developer mempunyai pilihan untuk mengembangkan sendiri script-scriptnya atau memakai open source technology. PT Proweb Indonesia memutuskan mendevelop sendiri bagian yang critical dalam hal ini CMS(Content Management System), sedangkan di bagian client script memakai jQuery dan script hasil karya sendiri.

Dalam sisis tampilan memakai JQuery dengan pertimbangan kecepatan development. Meskipun demikian tetap ada script-script yang memakai hasil karya sendiri seperti image animation, tab, menu, show hide div dan lain-lain. Di dalam memakai jQuery ini team PT Proweb Indonesia akan mempelajari apa yang telah dikembangkan, kemudian membuat riset untuk kemungkinan membuat script yang lebih efisien. Jika berhasil membuat script yang lebih efisien, maka script yang dipakai adalah scrip hasil karya sendiri.

Ini adalah beberapa plugin jquery yang sering digunakan oleh beberapa web developer dalam membuat atau membangun sebuah website, diantaranya:

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

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

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

H. ALASAN PENGGUNAAN JQUERY

Ada beberapa alasan penggunaan JQuery dibandingkan dengan Javascript Library pendahulunya seperti Phototype, Mootools , YUI (Yahoo User Interface), dan Dojo.

ü jQuery telah banyak digunakan oleh website-website terkemuka di dunia.

ü Kompatibel/cocok dengan semua browser yang popular, seperti Mozila, Internet Explorer, Safari, Chrome, Opera.

ü Kompatibel dengan semua versi CSS (CSS 1 sampai dengan CSS 3)

ü Dokumentasi, tutorial dan contoh-contohnya lengkap,

ü Didukung oleh komunitas yang besar dan aktif, seperti forum,milis, blog, social engineering (twitter dan facebook), website, dan tutorial.

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

ü Filenya hanya satu dan ukurannya pun kecil, hanya sekitar 20 KB, sehingga cepat diakses.

ü Open source/free (gratis) dengan lisensi dari GNU General Public Lisence dan MIT License.

ü jQuery lebih banyak digunakan oleh para developer web dibandingkan Javascript Libary lainnya

I. CONTOH DARI 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>
<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>

J. KEMAMPUAN YANG DIMILIKI JQUERY

jQuery memiliki beberapa kemampuan atau kelebihan yang tidak dimiliki dengan Javascript Library lainnya.

a. Mempermudah akses dan manipulasi elemen tertentu pada dokumen.

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

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

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

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

e. Mampu merespon interaksi antara user dengan halaman web dengan lebih cepat.

f. Menyediakan fasilitas untuk membuat animasi sekelas Flash dengan mudah.

K. KEKURANGAN YANG DIMILIKI JQUERY

Dengan banyaknya kelebihan yang disediakan jQuery, tidak serta merta jQuery tidak memilki kelemahan. Diantara kelemahannya yaitu sebagai berikut :

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

L. SINTAKS JQUERY

Biasanya sintaks jQuery dibuat untuk memilih elemen-elemen HTML dan melakukan aksi terhadap elemen yang dipilih.

Sintaks: :
$(selector).action()

Tanda dollar, untuk mendefinisikan jQuery. (selector), untuk menunjukkan elemen yang dipilih atau dituju. action(), adalah jQuery action yang akan dilakukan terhadap elemen yang dipilih.

Contoh :

$(this).hide()

– menyembunyikan elemen saat ini

$("p").hide()

– menyembunyikan semua paragraf atau konten dari tag <p>

$(".test").hide()

– menyembunyikan elemen yang mempunya class=”test”

$("#test").show()

– menampilkan elemen yang mempunyai id=”test”

Karena hampir segala sesuatu yang kita lakukan bila menggunakan jQuery membaca atau memanipulasi document object model (DOM), kita perlu memastikan bahwa kita mulai menambahkan event segera setelah DOM siap. Untuk melakukan hal ini, kita menambahkan kode ready event untuk dokumen.

$(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);

});

M. JQUERY ATTRIBUTE SELECTORS

jQuery mirip XPath dalam hal memilih elemen berdasarkan atribut yang ada :

1. $("[href]") memilih semua elemen dengan atribut href.

2. $("[href='#']") memilih semua elemen dengan atribut href bernilai = "#".

3. $("[href!='#']") memilih semua elemen dengan atribut href dengan nilai bukan sama dengan "#".

4. $("[href$='.jpg']") memilih semua elemen dengan atribut href yang mengandung ".jpg".

N. JQUERY SELECTOR

Selector memungkinkan kita untuk memanipulasi elemen HTML sebagai kelompok atau sebagai elemen tunggal. jquery elemen selectors dan attribute selectors memungkinkan anda untuk memilih elemen HTML dengan nama tag, nama atribut, atau konten.

contoh :

$("p") memilih semua elemen <p>.

$("p.intro") memilih semua elemen <p> yang mempunyai class = "intro".

$("p#demo") memilih semua elemen <p> yang mempunyai id="demo".

O. KEMUDAHAN YANG DITAWARKAN JQUERY

Mungkin nama jQuery sudah tidak asing lagi dalam dunia teknologi, namanya yang sering disebut dalam dunia teknologi web, karena hampir semua pengembang web menggunakan JQuery. Berikut adalah kemudahan-kemudahan yang ditawarkan Jquery bagi para penggunanya :

a. Dapat mengubah tampilan bagian halaman tertentu

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

b. Dapat mengakses bagian halaman tertentu dengan mudah

Bayangkan saja tanpa adanya library Javascipt khusus, untuk mengakses suatu bagian tertentu dari halaman saja harus mengikuti aturan Document Object Model (DOM) dan pengaksesan harus secara spesifik menyesuaikan dengan struktur HTML. Dengan kata lain, pengaksesan bagian tertentu dari halaman sangat tergantung pada struktur dari HTML. Dan kali ini Jquery menwarkan cara yang sangat mudah dalam mengakses bagian tertentu dari halaman. Pengaksesan juga tidak terlalu bergantung pada struktur HTML.

c. Dapat mengubah isi halaman

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

d. Dapat menambahkan animasi ke halaman

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

e. Dapat merespond interaksi user dalam halaman

Website yang baik tidak cukup digambarkan dengan user-interface dan tampilan yang memukau. Namun lebih dari itu, bagaimana pengunjung dapat berinteraksi dengan website dan dapat mengatur tampilannya sendiri. Interaktivitas sangat bergantung bagaimana pemrograman yang dipakai dalam menangani event-handling. Javascript sendiri memiliki beberapa event-handling seperti onclick untuk menangani event saat terjadi click. Namun demikian, event handling pada Javascript terbatas pada object-object tertentu, dan jenisnya pun terbatas. Kemudian JQuery melengkapi semuanya dengan tambahan penanganan event-handling yang semakin mudah.

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

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

g. Dapat menyederhanakan penulisan avascript biasa

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

P. EFEK-EFEK DENGAN JQUERY

Salah satu kemampuan jQuery adalah adanya fungsi-fungsi efek yang siap pakai. biasanya untuk membuat efek memudar di javascript. Dengan menggunakan jQuery kita cukup menggunakan fungsi $(selector).fadeIn(). berikut adalah efek-efek siap pakai yang disediakan jQuery :

1. jQuery show() : berguna untuk menampilkan elemen yang tersembunyi.

2. jQuery hide() : berguna untuk menyembunyikan elemen yang dipilih.

3. jQuery toggle() : gabungan fungsi hide dan show.

4. jQuery slideDown() : menampilkan elemen yang tersembunyi , secara efek sliding.

5. jQuery slideUp() : menyembunyikan elemen secara efek sliding.

6. jQuery slideToggle() : gabungan antara slideDown() dan slideUp().

7. jQuery fadeIn() : menampilkan elemen yang dipilih jika tersembunyi.

8. jQuery fadeOut() : menyembunyikan elemen yang dipilih secara efek memudar.

9. jQuery fadeTo() : mengatur tingkat kepudaran elemen terpilih menuju tingkat opacity yang ditentukan.

10. jQuery animate() : mengubah suatu elemen dari satu keadaan ke keadaan lainnya.

Q. PERBEDAAN ANTARA JAVASCRIPT DAN JQUERY

Perbedaan antara javascript dan jquery sering menimbulkan pertanyaan, dari segi penulisan maupun penggunaanya. Dimana perbedaan itu terletak dari definisi anata Javascript dan JQuery.

Javascript adalah bahasa pemrograman yang dirancang untuk berjalan di lingkungan klien yang dikombinasikan dengan dokumen HTML. Javascript dijalankan dengan bantuan browser sehingga dapat melakukan interaksi dengan user, melakukan kontrol browser dan memanipulasi dokumen web saat ditampilkan.

Sedangkan jquery adalah komponen/librari/framework yang dibuat dari javascript dengan tujuan memudahkan seorang programmer dalam menggunakan fungsi-fungsi yang lebih rumit. Dengan jquery, seorang programmer bisa lebih leluasa dan mudah melakukan kontrol/manipulasi halaman web. Oleh karena kemudahan tersebut jquery memiliki semboyan "write less, do more" yang bisa kita artikan dengan sedikit menulis kode tapi dapat melakukan banyak hal.

Jquery dibangun dengan berorientasi objek sehingga akan lebih optimal dan memiliki kemampuan yang lebih luas untuk menciptakan serta memanipulasi halaman web yang dikirimkan ke browser pengguna.

penulisan javascript dan JQuery dalam melakukan sebuah manipulasi background dokumen html dapat dilihat sebagai berikut :

Javascript:

functionchangeBackground(color)

{

document.body.style.background = color;

}

onload="changeBackground('red');"

</script>

JQuery:

$('body').css('background', '#ccc');

</script>

Dari penulisan diatas terlihat bahwa, JQuery lebih bepusat pada objek sehingga cara melakukan perubahannya akan lebih sederhana.

BAB III

PENUTUP

A. Kesimpulan.

B. Saran

Makalah ini merupakan resume dari berbagai sumber, untuk lebih mendalami isi makalah kiranya dapat merujuk pada sumber aslinya yang tercantum dalam sumber. Kritik dan saran yang membangun tentunya sangat diharapkan untuk kesempurnaan makalah ini.

Suci Ayu Utamy

Welcome to My Blog, Have Fun! :)

Kamis, 19 Desember 2013

Makalah JQuery

Tidak ada komentar:

Posting Komentar