MAKALAH JQUERY

MAKALAH JQUERY

BAB 1 PENDAHULUAN

1. Latar Belakang

Dalam dasawarsa ini perkembangan ilmu komunikasi dan teknologi informasi sangat pesat, hal ini ditandai dengan berkembangnya teknologi internet yang memudahkan manuisa dalam meringankan pekerjaan dan mempermudah dalam berkomunikasii 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 JQUERY oleh sebab itu besar harapan penulis agar makalah ini dapat digunakan para pemula dalam membangun sebuah web.

2. Rumusan Masalah

1. Apa pengertian dari jquery?

2. Bagaimana sejarah adanya jquery?

3. Apa saja yang menjadi kelebihan dan kekurangan dari jquery?

4. Apakah manfaat dari jquery?

5. Jelaskan ragam kreasi dari jquery itu?

6. Apa saja kegunaan dari jquery?

7. Bagaimana cara menggunakan jquery?

8. Bagaimana cara membuat website menggunakan jquery?

9. Apakah perbedaan antara jquery dan javascript?

3. Tujuan Penelitian

1. Untuk mengetahui tentang pengertian jquery

2. Mengetahui sejarah adanya jquery

3. Menyebutkan dan menjelaskan kelebihan dan kekurangan dari jquery

4. Mengetahui manfaat dari jquery itu sendiri

5. Dapat menjelaskan ragam kreasi dari jquery

6. Mengetahui kegunaan jquery

7. Mengetahui cara menggnakan jquery

8. Mengetahui cara membuat website di Indonesia

9. Mengetahui perbedaan antara jquery dan javascript

BAB II

PEMBAHASAN

1. Sejarah jquery

Petama kali dibuat oleh John Resig pada tahun 2005, JQuery sendiri pertama kali dirilis tanggal 14 Januari 2006. Dan versi terbaru dari JQuery udah sampe versi 1.3.2. Dia terinspirasi dari Behavior code. Saat itu, Dia ngerasa hasil dari Behavior Code tidak elegan dan masih jelek, maka dikembangkannya JQuery. Dimana dengan penulisan code JQuery jadi lebih simple, gampang dan tentunya dengan hasil yang memuaskan. jQuery adalah library JavaScript OpenSource yang menekankan pada interaksi antara JavaScript dan HTML.

Apa bedanya dengan situs-situs yang tidak menggunakan JQuery? banyak bedanya, misalnya browser seakan tidak merefresh sebuah page ketika kita men-submit sebuah data kedalam server mereka. Dan lebih hebatnya lagi JQuery mempunyai animasi tanpa menggunakan flash(.swf), jadi lebih cepeat diload didalam browser dan tanpa harus install plugins.

2. Apa itu jquery

Jquery adalah kumpulan beberapa kode yang siap dipakai untuk mempermudah dan mempercepat dalam pembuatan kode Javascript. Yang awalnya menggunakan kode yang sangat panjang namun dengan mengggunakan jquery kita bisa langsung memanggil fungsi yang terdapat dalam Library tersebut. Jadi intinya jquery itu menyederhanakan kode Javascript sesuai dengan slogannya yaitu ”Write less, do more”. Pengertian lain dari jquery adalah pustaka JavaScript kecil bersumber terbuka yang menekankan pada interaksi antara JavaScript dan HTML. jQuery ukuran nya cukup kecil, sehingga tidak memperlambat proses loading halaman web yang kita buat. jQuery juga kompatibel dengan CSS3 dan yang tak kalah penting adalah jQuery bisa berjalan di semua browser – cross browser.

jQuery diluncurkan pada Januari 2006 oleh John Resig. jQuery adalah library Javascript yang paling populer saat ini. Karena kecanggihan nya, jQuery dipakai oleh perusahaan besar seperti Google. Dell, CBS, digg, Netflix, Bank of America, Mozilla, Drupal, dsb.

jQuery adalah library Javascript yang gratis dan open source. Oleh karena nya kita bisa menggunakan jQuery dengan bebas untuk keperluan pengembangan website kita. Tanpa library seperti jQuery, menerapkan Javascript mungkin akan lebih sulit, terutama untuk pemula yang baru belajar Javascript. Plugin tambahan seperti JQuery UI (user interface) semakin memudahkan kita mengembangkan website yang cantik dan interaktif. Selain itu tersedia plugin-plugin lain yang makin memperkaya kemampuan jQuery.

Dengan semakin berkembangnya JQuery, semakin memudahkan pula untuk para web programmer membuat website yang cantik dan dinamis. Nah, kenapa JQuery banyak digunakan, salah satunya adalah JQuery mampu menampilkan animasi-animasi semisal slideshow, datepicker, autocomplete, dan masih banyak lagi tapi tanpa membuat suatu website itu terlihat berat atau memakan waktu lama untuk diload.

File jQuery adalah library Javascript dasarnya. Ini perubahan cara pengembang menulis Javascript karena menangani banyak fitur utama yang digunakan oleh pengembang Javascript. Coding untuk hal-hal seperti event handler dan animasi menjadi jauh lebih mudah melalui penggunaan jQuery karena memerlukan sedikit coding.

Perpustakaan Jquery dapat dimuat dengan cepat dan diimplementasikan langsung untuk script website yang dapat digunakan waktu dan waktu lagi. Ini adalah batu loncatan yang besar di bidang efisiensi pemrograman yang agak mudah dipelajari. Sebagian besar proses belajar didasarkan pada tutorial yang menunjukkan bagaimana memanipulasi pengembang HMTL, CSS, dan kode Ajax.

Ketika jQuery adalah menggunakan referensi skrip file jquery.js. Perpustakaan ini adalah open source, yang berarti bahwa hal itu dapat dimodifikasi oleh pengembang untuk memenuhi kebutuhan spesifik untuk situs Web tertentu. File ini berisi semua model objek dokumen (DOM), dan ini menyederhanakan fungsi untuk cross-browser dan lintas-bahasa kompatibilitas.

Waktu pengembangan yang lebih cepat juga merupakan salah satu hal yang dikaitkan dengan pengembangan halaman web jQuery. Ini adalah sisi klien Ajax kerangka yang mendukung semua teknologi sisi server pengembangan aplikasi web. Hal ini memungkinkan pengembang untuk menulis kode kurang untuk melakukan fungsi yang sama lebih cepat. Hal ini bahkan dapat lebih baik ketika digunakan untuk mengedit kode yang sudah ada.

Plugin untuk jQuery telah menjadi cukup menjadi di antara para pengembang karena banyak dari mereka menawarkan kesempatan untuk menambahkan dimensi yang berbeda untuk halaman web. Setelah sumber file jQuery telah dimuat, salah satu perintah yang paling berguna adalah fungsi dokumen yang register acara siap. Hal ini pada titik ini bahwa pengguna dapat mulai menambahkan acara.

Bahasa adalah salah satu sederhana karena banyak peristiwa yang digunakan diberi nama dengan cara deskriptif yang bertepatan dengan perintah. Pengembang yang ingin menggunakan fungsi keluar memudar, misalnya, dapat menggunakan fadeOut jQuery () perintah untuk memulai dengan ini. Sama bekerja untuk menyembunyikan dan perintah menghidupkan yang digunakan oleh pengembang jQuery.

Ada banyak fungsi lainnya banyak digunakan untuk Cascading style sheet juga. Sintaks untuk CSS adalah sebagai berikut: css (). Ini memberi Anda berbagai pilihan karena memiliki tiga opsi sintaks yang berbeda yang dapat digunakan untuk melakukan fungsi yang berbeda. Ada css (nama) fungsi yang mengembalikan nilai properti CSS, ada juga css (nama, nilai) fungsi yang menetapkan properti dan nilai. Terakhir, ada CSS ({properti}) yang menetapkan beberapa properti dan nilai-nilai. Fungsi-fungsi ini ideal karena mereka mengijinkan pengguna untuk menambahkan tingkat tertentu dari kode untuk proyek-proyek mereka.

Ini adalah salah satu alat scripting terpanas untuk pengembangan web yang mengikuti pola dari komunitas kode open source. JQuery dipecah dalam istilah yang sangat sederhana dengan fungsi kata kunci sebagai identifier objek yang namanya $. Pengembang yang mampu mengikuti dan mengedit array tutorial seharusnya tidak memiliki masalah menggunakan kode berorientasi obyek. Ini jelas membuat pengembangan lebih mudah bagi mereka yang mengetahui JavaScript

3. Keunggulan jquery

1. Mempunyai daya akses yang sangat cepat Karena hanya terdiri dari satu file saja dan ukurannya pun sangat kecil berkisar 20Kb

2. Bersifat kompatibel/ cocok dengan banyak browser popular di dunia

3. Mempunyai banyak komunitas yang besar dan selalu aktif serta dokumentasi yang lengkap

4. Banyaknya plugin yang disediakan secara cuma-Cuma (gratis ). Plugin adalah kemampuan tambahan yang bisa disertakan pada Jquery

5. Terdapat Jquery yang berlisensi GNU atau yang dikenal dengan free. Maka kita menggunakannya dengan tanpa dikenakan biaya apapun

6. Terdapat API( Application Programming Interface) di dalamnya

7. Mendukung Ajax ( Asynchronous Javasctip and XML)

8. Telah banyak digunakan oleh website-website dunia sebut saja Google, twitter, facebook dan lain-lain.

9. Bersifat kompatibel dengan semua versi CSS dari yang versi 1 sampai versi 3

10. Mempunyai tutorial, dokumentasi dan contoh-contoh yang lengkap yang bisa kita ketahui dengan membuka halaman website nya jquery.

11. Lebih banyak digunakan oleh para developer web dibandingkan dengan Javascript lainnya

12. “write less, do more” sedikit menulis tapi banyak bekerja

13. Menyederhanakan penggunaan javascript, karena kita cukup menggunakan fungsi dari library javascropt yang ada. Juga mempercepat coding javascript dalam sebuah website. Dibandingkan bila kita harus mulai sebuah script javascript satu per satu dari nol.

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

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

Kekurangan jQuery

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

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 (sangat-sangat banyak) akan membebani server. Solusi: host jquery pada situs lain, seperti Google yang menyediakan request jquery dari servernya.

4. Kemampuan yang dimiliki jQuery

1. Mempermudah akses dan manipulasi elemen tertentu pada dokumen.

Biasanya diperlukan baris program yang cukup panjang untuk mengakses suatu elemen dokumen . Namun , 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 bisa dimanipulasi sesuai dengan keinginan kita.

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

3. 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 aja kita menggunakan jQuery.

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

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

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

5. Ragam Kreasi jQuery

1. Use jquery to “turn off the lights” while watching videos

2. 3D sphere using jquery

3. Animate curtains opening with jquery

4. Quick tip – resizing images on browser window size

5. Sliding boxes and captains with jquery

6. Creating a fading header

7. Jcaption jquery image captains with customizable mark up, style, and animation

6. Kegunaan dari jQuery

1. Dokumentasi yang baik

Dokumentasi yang disediakan pada web jQueryMobile sangatlah mudah dipahami. Di bagian awal akan dijelaskan bagaimana langkah-langkah untuk memulai menggunakan jQueryMobile. Dengan pengetahuan dasar HTML saja, seseorang akan cepat memahami tutorial yang ada didalamnya. Selain itu, dokumentasi juga dikemas dalam bentuk yang menyenangkan, yaitu dengan melampirkan contoh tampilan yang dihasilkan.

Pada halaman resources web jQueryMobile, banyak sekali informasi yang didapatkan seputar tutorial, plugins, extension, tools pengambangan, ebook, dsb. yang bisa digunakan sebagai panduan.

2. Mendesain Template dengan ThemeRoller

Pengguna jQueryMobile akan dimanjakan dengan fasilitas Themeroller. Themeroller merupakan fasilitas yang disediakan oleh jQueryMobile untuk mengganti warna dasar desain tampilan sesuai kebutuhan dengan cara drag & drop. Script hasil modifikasi yang dihasilkan pun dapat diunduh untuk dapat dikembangkan lebih lanjut.

Uniknya, themes untuk tampilan jQueryMobile dapat terdiri dari beberapa kombinasi, sehingga untuk menggunakan jenis themes yang dipilih cukup dipanggil nama class dalam HTML yang bersesuaian.

3. Fitur-fitur terbaik

jQueryMobile dikembangkan dengan core jQuery yang terkenal dengan desain UI nya yang ringan dan lembut, sehingga bisa menggantikan teknologi flash. Kemampuan yang baik untuk layar sentuh seperti pada perangkat-perangkat dengan browser iOS, Android, Blackberry, Palm WebOS, Nokia/Symbian, Windows Phone 7, MeeGo, Opera Mobile/Mini, Firefox Mobile, Kindle, Nook, dan lainnya menambah daya tarik jQueryMobile. JQueryMobile juga telah menggunakan markup dasar HTML5 dan CSS3. Desain tampilan yang responsive sangat membantu ketika ditampilkan pada smartphone yang mendukung fitur accelorometer (tampilan otomatis vertikal/horizontal)

4. jQueryMobile Maps

Penggunaan peta (maps) dalam perangkat bergerak sangatlah penting. Para pengembang jQueryMobile juga telah menyiasati hal tersebut dengan mulai membuat dokumentasi cara menampilkan maps untuk tujuan tertentu. Tutorial dan contoh aplikasi jQueryMobile Maps dapat dipelajari pada halaman ini : http://jquery-ui-map.googlecode.com/svn/trunk/demos/jquery-google-maps-mobile.html. Sebagai tambahan, jenis maps yang digunakan pada tutorial tersebut telah menggunakan Google Maps v3, yang merupakan versi Google Maps terbaru.

7. Cara menggunakan jQuery

1. Ok pertama - tama adalah kita harus mendownload terlebih dahulu jQuery Library (inti dari jQuery). Dimana download jQuery Library? Downloadnya di www.jquery.com , silahkan klik Download jQuery. Saat penulisan tutorial ini library jQuery telah sampai versi 1.9.1

gambar : screenshot website jquery.com

2. Pada halaman selanjutnya pilih versi jquery, ada versi Production dan versi Developer. Untuk saat ini pilih versi Production jQuery karena versi Developer ditujukan kepada para master pemrograman dan pengembang jquery.

gambar :

Catatan :

jQuery selalu merilis dua versi Library yaitu versi Production dan Development. Perbedaannya adalah versi Production ukuran filenya lebih kecil karena telah 'dimampatkan' atau istilahnya di Compress. Diperuntukkan bagi pengguna awam yang ingin langsung menggunakan jQuery. Sedangkan versi Development isi filenya mudah dibaca karena belum di Compress dan ditujukan unruk para Developer yang tertarik mempelajari - memanipulasi - bahkan mengembangkan fungsi - fungsi yang dimiliki oleh jQuery.

8. 3. Akan muncul code dari library JQuery

gambar : jquery code library

Klik CTRL + S di keyboard untuk menyimpan kode tersebut ke direktori website anda

gambar : save jquery lib pada direktori website

4. Ok sekarang adalah kode untuk memanggil jQuery library supaya dapat terLOAD di website yang anda buat. Buka dreamweaver dan masukkan kodenya.

Scriptnya yang saya cetak tebal merah :

gambar : script pemanggil jQuery

5. Ok sekarang cara Penggunaannya, inti dari jQuery adalah :

A) Panggil / Load library jQuery (stabilo merah)

B) buat script jquery di bagian head untuk mengontrol object berdasarkan elementnya (stabilo biru)

C) Buat Object beserta elemennya berupa id dan class di bagian body (stabilo abu - abu)

gambar : inti dari jQuery

8. Cara membuat website sederhana dengan jquery

` Langkah-langkahnya sebagai berikut :

Download terlebih dahulu jquery.js yang ada di http://jquery.com/ di link ini http://code.jquery.com/jquery-1.4.2.min.js atau http://code.jquery.com/jquery-1.4.2.js. Perbedaan antara link pertama dan kedua adalah link pertama “yang jquery-1.4.2.min.js” merupakan versi compress dari yang versi development “jquery-1.4.2.js”. Jadi pada dasarnya Anda hanya membutuhkan satu jenis saja untuk digunakan. Saran saya, gunakanlah yang versi development (yang kedua) supaya lebih mudah untuk dibaca Setelah itu persiapkan editor yang sering anda gunakan, seperti notepad, notepad++, scite, netbeans, ataupun eclipse. Kali ini saya akan menggunakan notepad++ saja.

Buatlah file baru berekstensi .html dan jangan lupa file jquery-1.4.2.js ada pada

kali ini, saya memberi nama filenya jquery-latihan.html. kemudian buka jquery-latihan.html tersebut dengan editor anda dan buat template code html biasa (tag html, head, body)

Selanjutnya kita harus meload javascript yang akan kita gunakan. Dalam hal ini yaitu jquery-1.4.2.js. Tambahkan di dalam tag headnya

<head>

</head>

Tahap persiapan telah selesai, sekarang saatnya kita masuk tahap main2 dengan jquery

Selanjutnya tambahkan script di bagian head seperti dibawah ini :

<head>

//code ini akan dieksekusi ketika halaman ini di load pertama kali

$(document).ready(function(){

//kode-kode lainnya

});

</script>

</head>

Source code “$(document).ready(function(){});” pada jquery sama halnya seperti code window.onload pada javascript biasa. Fungsi ini akan dipanggil ketika halaman html ini di load oleh browser. Nah, nantinya kode-kode jquery kita akan diletakan di dalam situ deh.

$(document).ready(function(){ //disini});. “disini” –> tempat dimana anda dapat menambahkan script-script lainnya. Sekarang saya akan coba mengambil text dari body. Sebelumnya, tambahkan di dalam tag <body> sebuah kalimat apa saja. Contoh :

<body>

Hello World!

</body>

Kemudian tambahkan di tag scriptnya sehingga menjadi seperti ini :

//code ini akan dieksekusi ketika halaman ini di load pertama kali

$(document).ready(function(){

//kode-kode lainnya

var text = $("body").text(); //deklarasi dan inisialisasi variable text

alert(text); //menampilkan windows alert

});

</script>

Cukup mudah bukan :). Sekarang coba anda save dan jalankan jquery-latihan di browser anda. Ketika di load pertama kali, maka akan muncul windows alert”.

Yang menampilkan “Hello World!

Perhatikan baris $(“body”).text(), $(“body”) merupakan salah satu contoh “Selector” terhadap suatu tag html (body). Keterangan lebih lengkap mengenai selectors di jquery ada disini : http://docs.jquery.com/Selectors. Kemudian .text() bermakna mengambil semua text dalam suatu “selectors” tertentu, dalam hal ini adalah body. Kemudian hasilnya (bertipe string) disimpan dalam variable bernama text dan ditampilkan kelayar dengan fungsi alert bawaan javascript. “alert” bukan fungsi jquery tapi fungsi “native” javascript. Cobalah anda load halaman html anda, maka akan muncul alert yang isinya text dalam tag body anda.

Sekarang kita akan mencoba mengubah css dari body dengan jquery. Referensi, silakan baca http://api.jquery.com/css/. Ubah code menjadi seperti berikut.

//code ini akan dieksekusi ketika halaman ini di load pertama kali

$(document).ready(function(){

//kode-kode lainnya

var text = $("body").text();

alert(text);

$("body").css("background-color","black");

$("body").css("color","white");

});

</script>

Tambahkan yang di bold ya. Sebetulnya sama konsepnya seperti yang awal. Hanya saja kali ini kita mengubah cssnya. Dalam contoh kali ini saya mengubah warna background belakang dari body dan warna tulisan yang ada di body. Maka sourcenya akan seperti yang ditunjukkan seperti yang diatas. Source code lengkapnya sebagai berikut.

Maka akan muncul perubahan ketika anda meload htmlnya. Silakan dicoba Maksud dari $(“body”).css(“background-color”,”black”); adalah mengubah background-color dari tag body dengan warna “black”. Pengertian yang sama dengan $(“body”).css(“color”,”white”);

Sekarang kita akan latihan event handler di jquery. Kalau di javascript itu contohnya seperti .onclick, onload, onblur, dll. Referensi : http://docs.jquery.com/Events Source codenya.

<html>

<head>

//code ini akan dieksekusi ketika halaman ini di load pertama kali

$(document).ready(function(){

//kode-kode lainnya

var text = $("body").text();

alert(text);

$("body").css("background-color","black");

$("body").css("color","white");

$("#idButton").click(

function()

{

alert("button dengan id di click");

}

);

$(".clsButton").click(

function()

{

alert("button dengan calss di click");

}

);

});

</script>

</head>

<body>

hello world

</body>

</html>

Screen shotnya

Hasilnya.

Hal yang perlu diperhatikan : selectors untuk class dan id. Untuk class –> $(“.[classname])….., ada ‘titik’ di depan nama kelasnya, untuk id –> $(“#……”)…. Ada ‘pagar’ didepan nama idnya. Sebetulnya konsepnya sama seperti css bukan –>. Untuk event di jquery anda dapat melihatnya di http://docs.jquery.com/Events

Salah satu yang menarik dari jquery adalah fungsi animasi yang disediakan. Anda dapat melihatnya di http://docs.jquery.com/Effects untuk panduan dokumentasinya. Berikut contoh source codenya.

<html>

<head>

//code ini akan dieksekusi ketika halaman ini di load pertama kali

$(document).ready(function(){

//kode-kode lainnya

var text = $("body").text();

alert(text);

//mengubah css

$("body").css("background-color","black");

$("body").css("color","white");

//event handler

$("#idButton").click(

function()

{

//event jika button di klik

alert("button dengan id di click");

}

);

//event handler

$(".clsButton").click(

function()

{

//event jika button di klik

alert("button dengan calss di click");

}

);

//event handler

$("#hide").click(

function()

{

//hilangkan div id animated secara perlahan2

$("#animated").fadeOut('slow', function() {

alert("udh selesai animasinya");

});

//atau (tanpa ada pesan selesainya <img src

" alt=":)" class="wp-smiley"> )

//$("#animated").fadeOut('slow');

}

);

});

</script>

</head>

<body>

hello world

lorem ipsum lorem ipsum

</div>

<button id="hide"> sembunyikan saya</button>

</body>

</html>

Perhatikan source code yang saya tambahkan (di bold). Saya menambahkan suatu div dan suatu button yang jika di klik maka div akan perlahan-lahan hilang (fadeout). Untuk itu saya menambahkan event handler pada button dengan id “hide” yaitu $(“#hide”).click(function () { …. dan menghilangkannya dengan fungsi fadeOut(‘slow’, function() { ….. atau fadeOut(‘slow’) saja. Keterangan lebih rinci mengenai fadeout, dan animasi-animasi lainnya anda dapat liat di dokumentasi.

9. Perbedaan jquery dengan javascript

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 :

function changeBackground(color)

{

document.body.style.background = color;

}

onload="changeBackground('red');"

</script>

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

</script>

Dari script diatas bisa anda lihat, bahwa jquery lebih bepusat pada objek sehingga cara melakukan perubahannya akan lebih sederhana.

BAB III

PENUTUP

1. Kesimpulan

Jquery adalah kumpulan beberapa kode yang siap dipakai untuk mempermudah dan mempercepat dalam pembuatan kode Javascript

Jadi intinya jquery itu menyederhanakan kode Javascript sesuai dengan slogannya yaitu”Write less, do more”. Pengertian lain dari jquery adalah pustaka JavaScript kecil bersumber terbuka yang menekankan pada interaksi antara JavaScript dan HTML. Jquery terdapat banyak eklebihan dan kekurangan di dalamnya. Jquery juga mempunyai beragam jenis kreasi yaitu terdapat 7 ragam. Jika dilihat cara kerja dari jquery pun kelihatannya tidak terlalu sulit.

2. Saran

Makalah ini diharapkan mampu dijadikan referensi dan sarana pembelajaran mengenai jaringan komputer serta mampu diaplikasikan dan dikembangkan di kehidupan sehari-hari tepatnya dunia komputerisasi.

DAFTAR PUSTAKA

1. Pradita, viyan. 2013. Pengertian jquery dan ragam kreasinya. Kode blogger.htm. diakses pada 18 desember 2013

2. Sisvanto, gregah. 2012. Mari membahas tentang jquery.http://tecnoismylife.blogspot.com diakses pada 12 november 2013

3. Johan. 2013. Tentang fungsi jquery dan sejarahnya. www.ilmugrafis.com. Diakses pada tanggal 12 november 2013

4. Sofa, ahmad. 2012. Jquery kelebihan kekurangan dan fakta lainnya.http://ahmadsoffa.blogspot.com . diakses pada tanggal 12 november 2013

5. Zulfikar. 2011. Pengertian jquery dan ragam kreasinya. http://kode-blogger.blogspot.com/. Diakses pada 12 november2013

6. Kakaeriel. 2012. Pengenalan dasar jquery. http://kakaeriel.com . diakses pada 20 november 2013

7. Hakim, zainal. 2013. Kumpulan artikel pemrograman jquery.www.zainalhakim.web.id . diakses pada 20 november 2013

8. Johan. 2013. Cara menggunakan Jquery. www.ilmugrafis.com. Diakses pada 18 desember 2013