TUGAS TIK: MAKALAH JQUERY

MAKALAH TIK

“ JQUERY”

Dosen Pengampu :

Septia Lutfi

Disusun Oleh :

Nama : Retno Widiastuti

NIM : 1102412108

Prodi : Kurikulum dan Teknologi Pendidikan

Rombel : 003

FAKULTAS ILMU PENDIDIKAN

UNIVERSITAS NEGERI SEMARANG

TAHUN 2013/2014

KATA PENGANTAR

Alhamdulillah, puji syukur penulis haturkan kehadirat Allah SWT. Atas rahmat-Nya lah Penulis dapat menyelesaikan makalah ini tepat pada waktunya.Tak lupa Penulis juga menghaturkan terima kasih yang sebesar-besarnya kepadasemua pihak yang telah mendukung dan membantu Penulis dalam menyelesaikan makalah yang berjudul “MAKALAH JQUERY” ini.

Penulis menyadari bahwa makalah tersebut masih banyak adanya kekurangan dan masih jauh dari kesempurnaan. Oleh karena itu penulis berharap akan kritik dan sarannya dari segenap pembaca. Demikianlah semoga makalah yang telah dibuat tersebut dapat bermanfaat bagi semuanya. Terimakasih

Semarang, Oktober 2013

Penulis

Retno Widiastuti

BAB I

PENDAHULUAN

1. Latar Belakang Masalah

Perkembangan dunia informasi dan teknologi sangat cepat. Termasuk dengan teknologi yang baru-baru ini dimunculkan yaitu Jquery. Perkembangan ilmu komunikasi dan teknologi informasi sangat pesat, hal ini ditandai dengan berkembangnya teknologi internet yang memudahkan maunisa dalam meringankan pekerjaan dan mempermudah dalam berkomunikasi dan saling tukar menukar informasi.

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

Dalam pembuatan dan pengembangan web atau blog para web developer memerlukan pengetahuan tentang yang cukup mendalam tentang JQUERYoleh sebab itu besar harapan penulis agar makalah ini dapat digunakan para pemula dalam membangun sebuah web.

2. Rumusan Masalah

1. Apa yang dimaksud dengan JQuery?

2. Apa tujuan dibuatnya JQuery?

3. Bagaimana mengenai sejarah JQuery?

4. Apa saja syntax di dalam JQuery?

5. Apa saja yang dapat dilakukan JQuery?

6. Bagaimana cara mengimplementasikan Jquery?

7. Apa sajakah contoh dari Jquery?

8. Apa saja kelebihan yang dimiliki JQuery?

9. Apa saja kekurangan yang dimiliki JQuery?

10. Apa manfaat menggunakan JQuery?

3. Tujuan Penulisan

Adapun tujuan dalam penulisan makalah ini antara lain :

1) Untuk memenuhi tugas dari dosen mata kuliah Teknologi Informasi dan Komunikasi.

2) Memperkenalkan web developer pemula tentang JQuery

3) Untuk menambah wawasan ilmu pengetahuan bagi semua pembaca termasuk penulis yang telah mencari infomasi perkembangan teknologi dan referensi mengenai teknologi tentang JQuery

4) Mempermudah memahami dan menggunakan JQuery

4. Tujuan Penelitian

Bagian awal ini akan mengajak pembaca untuk mengenal lebih dekat dan mengenal lebih dalam tentang JQuery. Lebih khusus lagi, kita akan mengeksplorasi komponen-komponen fundamental yang perlu sekali diketahui dan dipahami dengan baik. Diharapkan uraian ini nantinya dapat membantu memudahkan kita ketika ingin mempelajari Jquery.

Tujuan dengan mengenal JQuery di harapakan seseorang akan mendapatkan hal berikut ini:

1. Dapat mengetahui pengertian dari JQuery

2. Dapat mengetahui sejarah terbentuknya JQuery

3. Dapat mengetahui sintax dalam JQuery

4. Dapat mengetahui contoh-contoh dari JQuery

5. Dapat mengetahui cara mengimplementasikan JQuery

6. Dapat mengetahui apa saja kelebihan dan kekurangan Jquery

BAB II

PEMBAHASAN

1) Pengertian JQuery

JQuery adalah librari JavaScript yang memungkinkan kita untuk membuat program web pada suatu halaman web, tanpa harus secara eksplisit kita menambahkan event atau pun properti pada halaman web tersebut.

JQuery adalahsebuah framework berbasiskan Javascript. JQuery sama dengan Javascript Library yaitu kumpulan kode atau fungsi Java script siap pakai, sehingga mempermudah dan mempercepat kita dalam membuat kode Java script. Hal yang menarik dari JQuery adalah penekanan interaksi antara Javascript dan HTML.

Dengan JQuery, suatu halaman web yang menjadi aplikasi web, jika dilihat sourcenya, akan terlihat seperti dokumen HTML biasa; tidak ada kode JavaScript yang terlihat langsung. Teknik pemrograman web seperti ini disebut sebagai unobstrusive JavaScript programming.

Script JQuery dibuat untuk memudahkan pengaturan document seperti menyeleksi object dengan element DOM dan membuat aplikasi dengan AJAX. Jquery juga menyediakan layanan atau support para developers untuk membuat plug-ins di dalam bahasa Java script tentunya. Sehingga memungkinkan para developer website membuat website lebihinteraktifdengananimasi, efek – efek, temadan widget.

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.

Element DOM : Document Object Mode (DOM) adalah object model standar untuk HTML dan XML yang bersifat platform independent. Sebuah web browser tidak harus menggunakan DOM untuk menampilkan dokumen HTML. Namun DOM diperlukan oleh JavaScript yang akan mengubah tampilan sebuah website secara dinamis. Dengan kata lain, DOM adalah cara Java Script melihat suatu halaman HTML.

Sebelum ada standar DOM dari W3C, masing-masing web rowsermemiliki DOM sendiri. Akibatnya, bilasuatu website inginditampilkansecara cross-browser compatible, ia harus dirancang untuk setiap web browser yang akan didukung. DOM standar mempermudah pengembangan aplikasi web.

Pemrograman AJAX : Asynchronous java script and XMLHTTP, atau disingkat AJaX, adalah suatu teknik pemrograman berbasis web untuk menciptakan aplikasi web interaktif. Tujuannya adalah untuk memindahkan sebagian besar interaksi pada komputer web surfer, melakukan pertukaran data dengan server di belakang layar, sehingga halaman web tidak harus dibaca ulang secara keseluruhan setiap kali seorang pengguna melakukan perubahan. Hal ini akan meningkatkan interaktivitas, kecepatan, dan usability. Ajax merupakan kombinasi dari:

DOM yang diakses dengan client side scripting language, seperti VBScript dan implementasi ECMA Script seperti JavaScript dan JScript, untuk menampilkan secaradinamis dan berinteraksi dengan informasi yang ditampilkan

Objek XMLHTTP dari Microsoft atauXMLHttp Request yang lebih umum di implementasikan pada beberapa browser. Objek ini berguna sebagai kendaraan pertukaran data asin kronus dengan web server. Pada beberapa framework AJAX, element HTML IFrame lebih dipilih daripada XML HTTP atau XML Http Request untuk melakukan pertukaran data dengan web server.

XML umumnya digunakan sebagai dokumen transfer, walaupun format lain juga memungkinkan, seperti HTML, plain text. XML dianjurkan dalam pemakaian teknik AJaX karena kemudahan akses penanganannya dengan memakai DOM

JSON dapat menjadi pilihan alternative sebagai dokumen transfer, mengingat JSON adalah JavaScript itu sendiri sehingga penanganannya lebih mudah

Harus diingat AJAX bukanlah bahasa pemrograman yang baru tapi cara baru dalam menggunakan standar yang sudah ada. Ajax adalah seni yang digunakan untuk Bertukar (send and service) client dan server dan merubah bagian dari sebuah website tanpa harus mereload keseluruhan halaman website.

JQuery merupakan salah satu librari yang membuat program web di sisi klien, tidak terlihat sebagai program JavaScript biasa, yang harus secara eksplisit disisipkan pada dokumen web. Pada teknik pemrograman sisi klien dengan menggunakan JavaScript biasa, setiap elemen yang akan memiliki event, akan secara eksplisit terlihat ada event yang dilekatkan pada elemen tersebut.

JQuery, merupakan librari yang sangat ramping, core dari librari ini dalam keadaan terkompres hanya berukuran sekitar 19KB.

2) Slogan JQuery

JQuery memiliki slogan “Write less, do more” yang artinya kesederhanaan dalam penulisan code, tapi dengan hasil yang lebih banyak. JQuery adalah library Javascript yang dibuat untuk memudahkan pembuatan website dengan HTML yang berjalan di sisi Client. JQuery diluncurkan pada tanggal 26 Januari 2006 di Barcamp NYC oleh John Resigdanberlisensiganda di bawah MIT dan GPL.

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

3) Tujuan Pembuatan JQuery

JQuery merupakan kumpulan JavaScript yang dikemas sedemikian rupa sehingga bisa digunakan untuk manipulasi komponen di dokumen HTML, menangani event, animasi, efek, dan melakukan request ke server menggunakan AJAX. Tujuan dari pembuatan jQuery ini hanya satu, yaitu membuat penggunaan JavaScript menjadi relatif sangat mudah. Sesuai dengan slogan dari jQuery itu sendiri yaitu “Write Less Do More...”.

Dengan adanya jQuery yang mempermudah dalam pembuatan Web Apps yang lebih interaktif dan tentunya Cantik. Ditambah lagi dengan adanya berbagai macam Plugin dari jQuery yang tentunya akan menambahkan kemudahan yang mungkin sebelumnya hanya bisa menjadi khayalan dalam pengembangan aplikasi web.

4) Sejarah JQuery

Pertama kali dibuat oleh John Resign pada tahun 2005, JQuery sendiri pertama kalinya dirilis pada tangga 14 januari 2006. Versi terbaru dari JQuery yaitu versi 1.3.2. Jqueri dibuat terinspirasi dari Behavior code. Menurut pembuatnya hasil dari behavior code tersebut dirasa kurang elegan dan masih belom sempurna, maka dia mengembangkannya dengan JQuery. Dimana penulisan codenya menjadi lebih simple, gampang dan tentunya dengan hasil yang memuaskan.

John Resig merupakan otak dibalik jQuery, karyanya ini pertama kali diumumkan di NYC BarCamp pada awal tahun 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 bias jauh lebih baik dengan mengurangi “syntactic fluff” dan menambahkan control khusus untuk tindakan-tindakan yang bersifat umum.

Kemudian para pengembang datang untuk membantu menyempurnakan library ini, dan akhirnya menghasilkan rilis stabil pertama dari jQueryversi 1.0 padatanggal 2006. Sejakitu, 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.

5) Pengenalan JQUERY

JQuery adalah javascript library, jQuery mempunyai semboyan “write less, do more”. jQuery dirancang untuk memperingkas kode-kode javascript. JQuery adalah javascript library yang cepat dan ringan untuk menangani dokumen HTML, menangani event, membuat animasi dan interakasi ajax. JQuery dirancang untuk mengubah cara anda menulis javascript. Sebelum anda memulai mempelajari jQuery, anda harus mempunyai pengetahuan dasar mengenai HTML, CSS maupun javascript.

Kemampuan yang dimiliki JQuery diantaranya:

a. Kemudahan mengakses elemen-elemen HTML

b. Memanipulasi elemen HTML

c. Memanipulasi CSS

d. Penanganan event HTML

e. Efek-efek javascript dan animasi

f. Modifikasi HTML DOM

g. Menyederhanakan kode javascript lainnya

Kemudian untuk memulai mempelajari jQuery, anda harus mendownload jquery.js dari situs http://www.jquery.com. Setiap anda menulis kode javascript dengan menggunakan jquery, jangan lupa untuk memasukan file jquery.js kedalam kode javascript anda

Sekarang mari kita lihat contoh sederhana pemograman dengan menggunakan jquery. Kode 12. hello world jquery

<html>

<head>

$(document).ready(function(){

$(".tombol1").click(function(){

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

});

$(".tombol2").click(function(){

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

});

</script>

</head>

<body>

<p>Hello World!<p/>

<button class="tombol1">Sembunyikan</button>

<button class="tombol2">Tampilkan</button>

</body>

</html>

<p>Hello World!</p>

<button class="tombol1">Sembunyikan</button>

< button class="tombol2">Tampilkan</button>

</body>

</html>

6) SYNTAK JQUERY

Sintaks jquery biasanya dibuat untuk memilih elemen-elemen HTML dan melakukan aksi terhadap elemen yang dipilih.

Sintaks:

$(selector).action()

Tanda dollar, untuk mendefinisikan jQuery

(selector), untuk menunjukkan elemen yang dipilih atau dituju

action(), adalah jQuery action yang akan dilakukan terhadap elemen yang dipilih

contoh :

$(this).hide()

– menyembunyikan elemen saat ini

$("p").hide()

– menyembunyikan semua paragraf atau konten dari tag <p>

$(".test").hide()

– menyembunyikan elemen yang mempunya class=”test”

$("#test").show()

v 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 }

contohnya :

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

});

5. APA YANG BISA DILAKUKAN DENGAN JQUERY?

a. Mengakses bagian halaman tertentu dengan mudah.

Tanpa adanya library Javascript khusus, untuk mengakses suatu bagian tertentu dari halaman, harus mengikuti aturan Document Object Model (DOM) dan pengaksesan harus secara spesifik menyesuaikan dengan struktur HTML. Dengan kata lain, pengaksesan bagian tertentu dari halaman sangat tergantung pada struktur dari HTML. JQuery menawarkan cara yang mudah (bahkan sangat mudah) dalam mengakses bagian tertentu dari halaman. Pengaksesan juga tidak terlalu bergantung pada struktur HTML.

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

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

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

e. Menambahkan animasi ke halaman.

Animasi seringkali disertakan dalam suatu halaman web untuk menambah kecantikannya. Saat ini animasi masih cukup digemari oleh para peselancar situs. Animasi dapat dibuat dalam berbagai gaya, ada yang menggunakan Flash, gambar bergerak (GIF), video, dan sebagainya. Masing-masing tentu memiliki kelebihan dan kekurangan masing-masing. JQuery sendiri menawarkan konsep animasi (walaupun masih sederhana) yang cukup apik namun ramah bandwidth alias ringan. Salah satu animasi yang bisa dibuat dengan JQuery adalah fading jika terdapat suatu bagian dari halaman ditambahkan atau dihilangkan.

f. Mengambil informasi dari server tanpa me-refresh 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.

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

6. CARA MENGIMPLEMENTASIKAN JQUERY

Kemudahan atau kenapa orang banyak menggunakan framework javascript ini adalah karena banyaknya plugin aplikasi yang siap jadi atau siap digunakan. Plugin adalah semacam fungsi atau fitur tambahan yang digabungkan ke dalam sebuah JQuery mempercepat atau memudahkan dalam pembangunan sebuah website.

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

Ø Drop-Down-Menu

Jika dalam sebuah website terdiri dari beberapa menu, dan dari menu tersebut ada sub menu lagi, maka cocok menggunakan drop down menu. Drop down menu ini juga mendukung multi level menu (menjadi sub-sub menu yang lebih banyak), selain itu menu dropdown ini juga dilengkapi dengan fasilitas timeout effect. Timeout effect ini digunakan ketika lama waktu mouse over atau mouse out

Web Sitenya: http://javascript-array.com

Ø Tool-Tips

Tool tips adalah bubble/gelembung atau semacam kotak informasi digunakan untuk menginformasikan sesuatu ketika mouse didekatkan pada sebuah teks, gambar, tombol atau elemen lain dalam sebuah web yang muncul diatas elemen tersebut. Biasanya informasi yang disuguhkan adalah informasi yang pendek. Cara kerjanya adalah ketika mouse didekatkan, maka akan muncul bubble. Fasilitas lebih dari bubble ini adalah desainnya yang cantik, seperti fasilitas tombol close, background shadow, dll

Web Sitenya: http://www.mopstudio.jp

Ø Autocomplete-Search

Plugin ini digunakan untuk melakukan pencarian secara real time, dimana ketika kita memasukan kata atau huruf dalam sebuah teks input dalam sebuha web, secara otomatis hasil pencarian akan muncul seusai dengan yang kita masukan secara real time. Plugin ini mirip seperti pencarian pada website facebook, sehingga sangat menarik untuk dicoba

Web Sitenya: http://loopj.com

Ø Validasi-Form

Plugin ini digunakan untuk melakukan validasi data dalams sebuah form, seperti pengecekan e-mail, pengecekan password, username dan input lainnya secara real time (tidak menekan tombol submit). Jadi ketika user memasukan teks atau huruf, maka plugin ini akan melakukan validasi terhadap inputan user.
Web Sitenya: http://www.willjessup.com

Ø jQuery-Cycle-Plugin

Plugin ini digunakan untuk animasi image dalam sebuah website, plugin ini menggantikan fungsi flash sebagai animasi. Jadi dengan plugin ini, kita bisa menganimasikan image yang ada menjadi sebuah animasi seperti fade in, fade out, slide show, scroll dan banyak lagi efek yang lainnya. Web Sitenya: http://malsup.com

Ø Teks-Berjalan

Plugin ini digunakan untuk memannipulasi teks, sehingga teks yang kita tampilkan kelihatan menarik, seperti berjalan dari kiri ke kanan atau sebaliknya atau dari atas ke bawah, mirip fungsi marquee dalam tag HTML, tetapi dengan plugin ini, teks berjalan lebih lembut dan lebih banyak variasi. Web Sitenya: http://remysharp.com. Dan masih banyak yang lainnya yang bisa dikunjungi di http://www.jqueryplugins.com

7. KELEBIHAN DAN KELEMAHAN JQUERY

v Kelebihan :

1) Write Less, Do More.

2) Dengan menggunakan jQuery tentu kita telah menyederhanakan penggunaan javascript, karena kita cukup menggunakan fungsi dari library javascript yang ada.

3) Mempercepat coding javascript dalam sebuah website.

4) Dibandingkan bila kita harus mulai sebuah script javascript satu per satu dari nol.

5) Dengan menggunakan jQuery berarti kita telah meringkasnya dan membiarkan jQuery mengolahnya.

6) Fungsi pemakaian beserta contohnya bisa anda lihat di http://jquery.com untuk mempermudah dalam pembelajaran jQuery.

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

8) Halaman website/blog yang dibangun dengan jQuery akan lebih interaktif dan menarik, membuat para pengunjung lebih terkesan.

v Kelemahan

1) Walaupun klaim bahwa loading menjadi semakin ringan, web/blog yang tidak menggunakan jQuery alias HTML murni tetap lebih ringan untuk diload terutama dimata CPU dan RAM

2) 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 melebihi standar akan membebani server tersebut.

3) Solusi: host jquery pada situs lain, seperti Google yang menyediakan request jQuery dari servernya (API).

8. CARA KERJA JQUERY

Cara kerja jQuery dapat dijabarkan sebagai berikut:

1. JQuery akan memastikan bahwa semua elemen atau elemen yang diinginkan sudah ditampilkan semua di halaman web, fungsi yang digunakanadalah:

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

9. FITUR-FITUR JQUERY

Beberapa Fitur yang ada di JQuery :

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

Document Object Mode (DOM) adalah object model standar untuk HTML dan XML yang bersifat platform independent. Sebuah web browser tidak harus menggunakan DOM untuk menampilkan dokumen HTML. Namun DOM diperlukan oleh JavaScript yang akan mengubah tampilan sebuah website secara dinamis. Dengan kata lain, DOM adalah cara JavaScript melihat suatu halaman HTML.

2. JQuery bias memanipulasi Class pada CSS dan Support CSS 3

3. Event

4. AJAX

5. Efek-efekdananimasi

6. Ekstensidan Plug-ins

7. Kompatibilitas dengan hamper semua Browser modern

8. Keperluan lain seperti : User Agent, Feature detection danlainnya

9. Perbedaan dari definisi 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.Mari kita lihat bagaimana penulisan javascript dan javascript untuk melakukan sebuah manipulasi background dokumen html berikut :

1 2 3 4 5 6 7	`<script language="javascript">` `function` `changeBackground(color)` `{` `document.body.style.background = color;` `}` `onload="changeBackground('red');"` `</script>` ?
1 2 3	`<script>` `$('body').css('background', '#ccc');` `</script>`

10. BEBERAPA VERSI JQUERY

Versi 1.0

Merek baru jQuery 1.0 . dalam merilis ini banyak pekerjaannya. Banyak pulabug tetap, satu ton fitur baru, dan perbaikan lengkap tentang bagaimana proses pembangunan jQuery dijalankan.

Pada kenyataannya, rilis ini begitu besar, itu akan mengambil beberapa hari untuk melepaskannya (termasuk versi baru dari situs web jQuery). Ada beberapa Kinks yang harus dikerjakan (yaitu, menyelesaikan dokumentasi baru) tapi itu semua di dalam pipa dan akan siap dalam beberapa hari ke depan.

Untuk saat ini, berikut adalah beberapa link yang relevan untuk dimulai:

· jQuery 1.0

· jQuery 1.0 - Compressed

· Dokumentasi API

· (Partial) Test Suite

Dalam membangun salinan sendiri dari jQuery, kita bisa memeriksanya dari Subversion dan membangun dari baris perintah. Kita pun bisa mendapatkan jQuery terbaru dengan melakukan:

  svn co svn :/ / jquery.com / home / jquery / src / jquery

Versi 1.0.1

Pasca-1.0 rilis pertama sekarang siap - dan itu rilis bug fix. Dalam memperbaiki beberapa yang paling mendesak 1.0 bug selama beberapa hari terakhir. Sehingga terilis lah jQuery 1.0.1:

· jQuery 1.0.1

· jQuery 1.0.1 Compressed

Versi 1.0.4

Beberapa perbaikan yang sangat dibutuhkan ke Ajax fungsi jQuery.

Pada Mailing List jQuery. Dan jquery 1.0.4 diantaranya :

· Compressed JavaScript

· Tak terkompresi JavaScript

· 1.0.4 Dokumentasi

· 1.0.4 Test Suite

· Rilis penuh (jQuery, Test Suite, Dokumentasi)

· Membangun File (Kompilasi versi Anda sendiri jQuery 1.0.4)

Versi 1.1.2

Pelepasan jQuery 1.1.2 rilis memperbaiki bug lain. Perbaikan telah diuji dengan baik, sehingga tidak boleh ada regresi. Masalah paling nyata yang diselesaikan terkait dengan film animasi saat melakukan slideDown.

Perbaikan Bug

Perbaikan bug yang paling penting, relevan dengan rilis ini, adalah sebagai berikut:

1. Mengubah: Event handler (seperti element.onclick ) sekarang dihapus bila tidak ada fungsi yang lebih terikat untuk acara tersebut.

2. Tetap: DOM Manipulasi untuk elemen form.

3. Tetap: jQuery.isfunction untuk kembali palsu pada node.

4. Tetap: jQuery.className.has , melarikan diri karakter regex di className (untuk metadata)

5. Tetap: masalah di IE di mana acara pada elemen kloning dipecat selama .clone() dalam sebuah event handler.

6. Tetap: IE ID pemilih memilih dengan nama atribut.

7. Berubah: Events sekarang secara internal disimpan dalam elem.$events daripada elem.events (karena bug jahat yang berkaitan dengan DOM 0 expandos).

8. Berubah: .attr('href') sekarang konsisten di semua browser.

9. Berubah: @href sekarang konsisten di semua browser.

10. Tetap: the slideDown kerlip bug.

11. Fixed: Memiliki \r endline di $("...") menyebabkan lingkaran tidak pernah berakhir.

12. Tetap: IE6 AJAX kebocoran memori

13. Fixed: bug di pushStack, pelaporan elemen di [0] dalam sebuah objek jQuery dengan panjang 0

Versi 1.1.3

1. Peningkatan kecepatan, dengan DOM traversal lebih dari 800% lebih cepat daripada di 1.1.2.

2. Sebuah sistem event ditulis ulang, dengan penanganan yang lebih anggun peristiwa keyboard.

3. Sebuah sistem ditulis ulang-efek (dengan fx menyertainya test suite), menampilkan eksekusi yang lebih cepat dan dukungan cross-platform yang lebih baik.

Versi 1.4.4

Query 1.4.4 keluar dirilis minor keempat di atas jQuery 1.4 dan tanah sejumlah perbaikan untuk bug termasuk beberapa perbaikan baik atas 1.4.3. Seiring dengan anggota berikut tim inti jQuery: John Resig, Dave Methvin, Karl Swedberg, Paul Irlandia.

Ada beberapa daerah di jQuery yang telah melihat perubahan sejak 1.4.3 dirilis:

· Ditambahkan (New) metode animasi baru,. FadeToggle ()

· (Enh) Calling. Data () tanpa argumen sekarang termasuk data dari HTML5 data atribut ( # 7222 )

· (Enh) Pindah jQuery.props dari support.js ke attributes.js ( # 6897 )

· (Enh). Lebar () dan. Tinggi () sekarang melaporkan lebar dan tinggi elemen tersembunyi ( # 7225 )

· (Bug) stopImmediatePropagation tidak dihormati dalam hidup / mendelegasikan event handler ( # 7217 )

· (Bug) Tetap masalah di mana host dan protokol tidak dibandingkan kasus-insensitively ketika menentukan apakah permintaan AJAX adalah lokal atau remote ( # 6908 )

· (Bug) Tetap masalah di mana "clone" variabel tidak sedang dinyatakan benar ( # 7226 )

· (Bug) Fixed bug di mana kita hanya mengganti ID pada node yang belum memiliki ID untuk berakar QSA ( # 7212 )

· (Bug) Limited ruang lingkup CSS 'auto' perubahan hanya tinggi / lebar ( # 7393 )

· (Bug) Fixed bug untuk memastikan bahwa penyeleksi atribut kuotasi dikutip (yang memungkinkan mereka untuk masuk ke QSA / matchesSelector benar). Perbaikan ( # 7216 )

· (Bug) Fixed bug untuk memastikan bahwa jika peristiwa beban tambahan dipicu (misalnya iframe yang dinamis disuntikkan di DOM siap) acara siap tidak dipicu dua kali ( # 7352 ).

· (Bug) Fixed suatu kondisi yang mencegah attr dari bekerja pada non-Element node ( # 7451 ).

· (Bug) Mengubah data atribut HTML5 setelah memanggil data. ('Foo') tidak lagi menyebabkan. Data ('foo') untuk juga mengubah ( # 7223 )

· (Bug) Fixed bug di mana Opera tidak memberikan tinggi / lebar display: none elemen dengan getComputedStyle tapi lakukan dengan currentStyle - jatuh kembali ke bahwa jika exists ditambahkan.

Versi 1.9

Pertama adalah versi terakhir dari jQuery 1.9 dan jQuery Migrasi 1.0. jQuery 1.9 dan 2.0 memiliki API yang sama. Beberapa fitur usang seperti $.browser telah dihapus dari kedua versi. Ini semua ditata dalam jQuery 1.9 Panduan Upgrade .

· jQuery 1.9 berjalan pada Internet Explorer 6, 7, dan 8 ("Oldie"), sama seperti versi sebelumnya. Anggap saja lebih bersih, lebih ramping, upgrade yang modern API dari jQuery 1.8.

· jQuery 2.0 tak akan berjalan pada oldie. Sebagai hasil dari menghilangkan beberapa lapisan kode teritip-bertatahkan, itu akan menjadi baik lebih cepat dan lebih kecil dari jQuery 1.9.

· Tim ini mendukung kedua jQuery 1.9 dan 2.0 ke masa depan.

Apa yang Baru di 1.9?

Mungkin beberapa minggu sebelum dokumentasi lengkap untuk rilis ini tanah di api.jquery.com , terutama karena API dan situs dokumentasi lainnya sedang dalam proses upgrade mereka sendiri. Untuk saat ini, berikut adalah ringkasan dari apa yang baru dan berubah.

. Baru css () pengambil multi-properti: Sekarang kita dapat melewati .css() array nama properti CSS dan akan kembali suatu objek dengan nilai saat ini dari semua properti CSS:

 var meredup = $ ("# box") css (["width", "tinggi", "backgroundColor"]).;

 / / {Width: "10px", tinggi: "20px", backgroundColor: "# D00DAD"}

Peningkatan dukungan CSS3 cross-browser: jQuery 1.9 kini mendukung penyeleksi CSS3 berikut di semua browser, sepanjang perjalanan kembali ke IE6:

:nth-last-child, :nth-of-type, :nth-last-of-type,
:first-of-type, :last-of-type, :only-of-type, :target, :root,

dan :lang .

. Baru selesai () method: Metode ini dapat digunakan untuk segera menyelesaikan semua animasi antri pada elemen.

Memulai dengan 2.0

Sejak jQuery 2.0 memiliki landasan dalam bekerja untuk jQuery 1.9, semua diskusi di Panduan Upgrade juga berlaku untuk 2.0.Plugin Migrasi akan mengidentifikasi banyak masalah ini secara otomatis.

Jika menggunakan jQuery dalam situasi HTML non-web-situs seperti Android, iOS, atau Windows 8 app, atau Chrome / Firefox add-on, jQuery 2.0 adalah pilihan yang luar biasa. Kita bahkan dapat menggunakan jQuery 2.0 pada situs web jika a tidak mendukung oldie atau tidak keberatan menggunakan komentar bersyarat:

 <- [If lt IE 9]>

     <script src="jquery-1.9.0.js"> </ script>

 <[Endif] ->

 <-! [If gte IE 9]> <->

     <script src="jquery-2.0.0.js"> </ script>

 <- [Endif] ->

Dengan ini beta pertama jQuery 2.0 telah dibuat dengan uang muka yang besar pada pembersihan besar-besaran, memotong ukuran perpustakaan dengan lebih dari 10 persen. Ada lebih refactoring mungkin sekarang bahwa secara konsisten dapat bergantung pada JavaScript modern, CSS, HTML, dan DOM fitur berada di sana.

Meskipun tidak semua versi saya jabarkan dalam makalah ini namun sudah cukup jelas mengenai versi-versi nya.

11. MANFAAT MENGGUNAKAN 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

Selain itu JQuery membuat menggunakan halaman Web DOM (document object model), menambahkan efek ke halaman, menghidupkan elemen, dan melaksanakan Ajax panggilan ke server sangat sederhana, menyembunyikan kompleksitas yang mendasari JavaScript. Ada sejumlah manfaat lain untuk menggunakan jQuery.

Ø Manfaat jQuery Dalam Perkembangan Aplikasi Website

jQuery banyak digunakan 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. Dengan adanya framework ini pengaksesan dokumen HTML menjadi lebih mudah dan tidak terlalu bergantung pada aturan struktur HTML.

2. Merespon interaksi user dalam halaman

Dengan adanya jQuery tampilan web tidak hanya menarik namun juga lebih atraktif. Interaksi dengan user akan semakin meningkat. Sebagai contoh 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

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

7. Menyederhanakan penulisan Javascript biasa

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

· jQuery adalah ramping dan berarti. Salah satu cara yang tepat untuk menggambarkan perpustakaan. Ukuran diminimalkan versi 1.5 dari perpustakaan adalah 83KB belaka, hanya 29KB bila gzip'd. Itu mungkin lebih kecil dari satu foto pada banyak situs web, dan browser hanya untuk men-download dan cache sekali untuk digunakan di semua halaman kita. Jika kita menggunakan jaringan pengiriman konten (CDN), browser pengguna dapat cache di banyak situs web bukannya download untuk masing-masing. jQuery bungkus banyak menjadi ukuran yang sangat kecil.

Salah satu manfaat utama dari jQuery-manfaat bersama dengan beberapa lainnya JavaScript perpustakaan-adalah bahwa hal itu mulus menangani masalah crossbrowser. Implementasi JavaScript berbeda antara browser untuk berbagai tingkat, dan dapat menyebabkan pengembang untuk prematur dan berat usia untuk mendapatkan semuanya bekerja di browser dengan JavaScript. Relax: penulis jQuery telah melakukan sebagian besar pekerjaan.

· jQuery menggunakan sederhana, bersih, sintaks yang kuat yang membuatnya mudah untuk memilih elemen DOM pada halaman yang ingin Anda ubah dengan JavaScript dan memungkinkan untuk tindakan rantai dan efek bersama-sama untuk kode efisien. Hal ini sangat umum untuk menggantikan selusin atau lebih baris JavaScript dengan satu baris kode jQuery. jQuery menggunakan CSS (Cascading Style Sheets) versi 3 pemilih spesifikasi untuk memilih elemen, sehingga tidak harus belajar sintaks yang berbeda untuk menggunakan jQuery. Ini mengasumsikan.

jQuery sangat extensible. Seperti disebutkan sebelumnya, inti jQuery perpustakaan disimpan ketat dan fokus, menjaga fitur-fitur yang tidak penting. Ini juga menyediakan kerangka kerja plugin yang memudahkan untuk memperpanjang jQuery, dan ada kedua plugin jQuery resmi serta ribuan dari pihak ketiga. Dengan cara ini halaman kita harus men-download hanya serangkaian tertentu fitur yang dibutuhkan. Setiap kali kita membutuhkan fitur yang tidak termasuk dalam inti jQuery perpustakaan, ada kesempatan baik bahwa seseorang telah menulis sebuah plugin yang melakukan apa yang kita butuhkan.

jQuery mendukung halaman gedung menggunakan JavaScript mengganggu, pendekatan untuk menggunakan JavaScript dalam halaman Web. Antara lain, tidak mengganggu JavaScript prihatin dengan pemisahan fungsi antara struktur halaman Web / isi dan presentasi. Hal ini membuat nugget kode dari elemen HTML pada halaman, seperti dengan atribut event seperti onclick. Sebaliknya, kita memasang kode event dalam rangkaian script, menjaga perilaku diimplementasikan dalam kode terpisah dari struktur halaman.
Salah satu tujuan dari jQuery adalah untuk membuat hal-hal yang sulit di JavaScript mudah bila menggunakan jQuery. Jadi jQuery mencakup banyak fungsi utilitas untuk melakukan hal-hal seperti string trim, mengurai data JSON, periksa apakah satu elemen DOM ada di dalam yang lain, dan mencari elemen array menggunakan filter.
jQuery adalah salah satu perpustakaan JavaScript yang paling banyak digunakan tersedia, dengan dukungan dari beberapa situs Web yang paling banyak diperdagangkan di dunia. Menurut jquery.com situs Web, Google, Amazon, IBM, Microsoft, Twitter, Dell, CBS News, Bank of America, dan banyak orang lain menggunakannya di situs Web mereka, dan itu digunakan di banyak proyek open source termasuk Mozilla , DotNetNuke, dan Wordpress. Digunakan secara luas seperti memastikan bahwa jQuery akan menerima dukungan pengembangan aktif selama bertahun-tahun yang akan datang, dan komunitas pengguna bersemangat telah membentuk perpustakaan keliling.

Jika ingin menambahkan interaktivitas pengguna yang kaya atau fitur Ajax ke situs Web, benar-benar ada alasan untuk tidak mempertimbangkan jQuery.

BAB III

PENUTUPAN

v KESIMPULAN

JQuery adalahsebuah framework.berbasiskan Javascript. JQuery sama dengan Javascript Library yaitu kumpulan kode atau fungsi Java script siap pakai, sehingga mempermudah dan mempercepat kita dalam membuat kode Java script

JQuery mampu merubah interaksi sebuah website menjadi lebih baik dan menarik, namun harus di bayar dengan beban load yang lebih lama dibandingkan dengan tidak menggunakan script jQuery.

Dengan menggunakan jQuery tentu kita telah menyederhanakan penggunaan javascript, karena kita cukup menggunakan fungsi dari library javascript yang ada, Mempercepat coding javascript dalam sebuah website.

DAFTAR PUSTAKA

http://zakki.dosen.narotama.ac.id/2011/04/05/jquery-adalah/

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

http://translate.google.co.id/translate?hl=id-ID&langpair=en%7Cid&u=http://blogs.learnnowonline.com/2012/10/03/7-benefits-of-jquery/

http://mrbawell.blogspot.com/2010/11/implementasi-jquery.html

http://mrbawell.blogspot.com/search/label/dampak%20jquery

http://www.zainalhakim.web.id/posting/perbedaan-javascript-dan-jquery.html

https://www.google.co.id/#q=versi+jquery

download ppt disini