Mohamad Mustakim: MAKALAH JQUERI

MAKALAH JQUERI

Makalah ini disusun untuk memenuhi tugas kejuruan Teknik Informatika

Disusun Oleh:

Nama :MOHAMAD MUSTAKIM

NIM :2114R0851

Jurusan :TEKNIK INFORMATIKA

Guru Pembimbing :Septia Lutfi S,COM.M,COM

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

DAFTAR ISI

Cover...........................................................................................................

Kata Pengantar...........................................................................................

Daftar Isi .....................................................................................................

BAB I PENDAHULUANA.

   Latar Belakang ........................................................................................
B.     Rumusan Masalah..............................................................................
C.     Tujuan Penulisan................................................................................
D.    Manfaat Penulisa................................................................................

BAB II PEMBAHASAN1.

A. Pengertian JQuery................................................................................                                                                             B. Sejarah JQuery........................................................................................
C. Pengenalan JQuery................................................................................                                                                 D.    Kelebihan JQuery................................................................................
E. Kelemahan JQuery..................................................................................
F.   Versi JQuery.........................................................................................
G. Cara kerja JQuery.................................................................................                             H. Cara membuat website sederhana dengan JQuery..........................................................
I. Struktr JQuery.........................................................................................

BAB III PENUTUPA.

Kesimpulan................................................................................................... Saran......................................................................................................... Daftar Pustaka..........................................................................................

BAB I

PENDAHULUAN

A. LATAR BELAKANG

Di era sekarang ini, teknologi berkembang sangat pesat. Hal ini tentu saja memperngaruhi kehidupan dan pola hidup masyarakat pada saat ini. dimana setiap individu lebih condong unttuk menginginkan segala sesuatunya dalam bentuk instan dan praktis.

Teknologi yang serba maju ini juga mendorong komunikasi manusia untuk menjadi lebih instan dan praktis. Dahulu orang berkomunikasi dan berbagi informasi dengan memanfaatkan burung pengantar pesan. Lalu berkembang dengan ditemukannya alat tulis hingga terciptalah komunikasi melalui surat menyurat. Setelah itu komunikasi berkembang dengan adanya radio, televisi, telepon, handphone, hingga internet dan adanya smartphone pada saat ini. manusia jaman sekarang lebih condong dalam penggunaan internet bagi komunikasinya.

Media cetakpun mulai tergusur dengan adanya berbagai jenis situs blog online yang menyajikan berita dan informasi dengan lebih cepat dan praktis. Pengadaan blog atau website ini tentu saja tidak terlepas dari adanya jQuery. Apa itu jQuery? Selanjutnya akan saya bahas dalam pembahasan.

2. Rumusan Masalah

A. Apa pengertian JQuery?

B. Bagaimana sejarah JQuery?

C.Bagaimana pengenalan JQuery?

D. Apa saja kelebihan yang dimiliki JQuery?

E. Apa saja kekurangan yang dimiliki JQuery?

F. Apa manaja versi JQuery?

G. Bagaimana cara kerja jQuery

H. Bagaimana Cara membuat website sederhana dengan 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

BAB II

PEMBAHASAN

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

B.SEJARAH

jQuery pertama dirilis pada tahun 2006 oleh John Resig. Dan kini jQuery telah digunakan oleh beberapa situs yang canggih nan terkenal seperti: Google, Facebook, Twitter, Youtube, Nokia dan masih banyak lagi. Tidak hanya situs interlokal, lokal juga ada kok yang telah memakai jQuery, contohnya: VivaNews, Studio 21, Kompas dan lain-lain.

jQuery sendiri adalah Javascript Library atau kumpulan kode/fungsi Javascript siap pakai, sehingga mempermudah kita untuk membuat kode Javascript. Atau dalam kesimpulannya jQuery menyederhanakan kode Javascript

C.PENGEALAN 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>

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

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

F.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]>

<[Endif] ->

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

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

G.CARA KERJA JQUERY

· 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

});

· 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")

· 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");

)};

H. Cara membuat website sederhana dengan jquery

Langkah-langkahnya sebagai berikut :

Download terlebih dahulu jquery.js yang ada di http://jquery.com/ di link inihttp://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.

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.

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