TEKNIK INFORMATIKA: Makalah JQUERY

J-QUERY

Disusun Oleh :

HARIS SRI WIDYOKO

NIM :

2114R0796
Dosen :Septia Lutfi

KATA PENGANTAR

Puji syukur saya haturkan kepada ALLAH SWT, karena atas berkat dan rahmat-Nya lah tugas makalah ini dapat diselesaikan dengan penuh rasa tanggung jawab. Tugas makalah ini berjudul “J-QUERY”. Adapun tujuan dari pembuatan makalah ini untuk memenuhi tugas dari bapak dosen STMIK HIMSYA Tehnik informatika. Selain itu juga, dengan makalah ini penulis dapat lebih memahami tentang apa itu androit serta aplikasi-aplikasi didalamnya. Makalah ini saya susun sesimpel mungkin agar mudah dipahami dan dapat menarik minat siapapun untuk membaca informasi yang tertera didalamnya. Saya berusaha semaksimal mungkin dalam penyusunannya agar memberikan kesan yang baik bagi siapapun yang membacanya.

Penulis mengharapkan makalah ini dapat bermanfaat bagi semua pembaca yang khususnya para pelajar dan mahasiswa di seluruh Indonesia,terutama bagi penulis sendiri.Kepada pembaca jika terdapat kekurangan atau kekeliruan dalam makalah ini, penuli smohon maaf, karena penulis sendiri dalam tahap belajar.Dengan demikian, tak lupa penulis ucapkan terimakasih, kepad parapembaca.Semoga Allah memberkahi makalah ini sehingga benar-benar bisabermanfaat.amin

Blora,Desember 2014
Penulis,

Haris Sri Widyoko

LATAR BELAKANG MASALAH

Pesatnya Teknologi di jaman sekarang tak asing lagi bagi yang mengikuti perkembangan zaman ia tidak akan tertinggal dengan adan ya teknologi-teknologi baru di masa kini. Sebaliknya bagi yang tidak mengikuti perkembangan zaman akan mundur secara sukarela. Ibarat wabah teknologi komputer sudah menyusupi di selutuh tempat maupun kehidupan. Dalam Perkembangan jaman yang semakin maju , kemajuan teknologi juga semakin pesat tidak heran pada masa sekarang banyak banyak dan hal ini ditandai dengan berkembangnya teknologi internet yang memudahkan komunikasi.

Dalam pembuatan dan pengembangan web atau blog para web developer memerlukan pengetahuan yang cukup mendalam tentang Java Script, JQUERY, AJAX dan CSS. Dan kali ini dalam makalah yang saya tulis akan membahas mengenai JQuery .

TUJUAN

Makalah ini disusun dengan tujuan sebagai sarana untuk mengikuti pesatnya perkembangan teknologi komputer di masa sekarang ini, salah satunya di dunia pemrograman yang sekarang semakin banyak diminati dan untuk memenuhi tugas mata kuliah Teknologi Informasi dan Komunikasi.

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.

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.

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.

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.

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>

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

 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);});

KEGUNAAN JQUERY

Banyak sekali hal-hal yang dapat dilakukan oleh JQuery, diantaranya yaitu:

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.

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

JQuery Events

Salah satu kemampuan utama jquery adalah menangani event. Dalam pemograman jquery, biasanya kode-kode pemograman diletakkan di dalam penanganan event yang terjadi pada suatu atau kelompok elemen yangdipilih.

Hampir-hampir mirip dengan Visual Basic, biasanya suatu kode dijalankan apabila ada sesuatu yang terjadi (event) pada suatu elemen. Misalnya, kalau ada tombol di klik, maka action atau kode apa yang dijalankan, apabila ada combox dipilih, kode apa yang dijalankan, pada contoh jquery sebelumnya :

$(".tombol1").click(function(){$("p").hide(1000);});

Kode di atas berarti apabila terjadi event mengklik elemen yang mempunyai class=’tombol1’, maka lakukan fungsi hide() terhadap semua element <p>.

JQuery Selectors

Selectors memungkinkan Anda untuk memanipulasi elemen HTML sebagai kelompok atau sebagai elemen tunggal. Pada penjelasan sebelumnya kita telah melihat contoh cara memilih elemen HTML menggunakan jQuery.

JQuery element selectors dan attribute selectors memungkinkan Anda untuk memilih elemen HTML (atau kelompok elemen) dengan nama tag, nama atribut atau konten. Selectors memungkinkan Anda untuk memanipulasi elemen HTML sebagai kelompok atau sebagai elemen tunggal.

1. JQuery Element Selectors, jQuery mirip CSS dalam hal memilih elemen HTML.

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

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

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

2. JQuery Attribute Selectors, JQuery mirip XPath dalam hal memilih elemen berdasarkan atribut yang ada.

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

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

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

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

Berikut table beberapa daftar JQuery Selector:

Selector	Contoh	Yang Dipilih
*	$("*")	Semua elemen
#id	$("#lastname")	Elemen yang mempunyaiid=lastname
.class	$(".intro")	Semua elemen yangmempunyai class="intro"
element	$("p")	Semua elemen <p>
.class.class	$(".intro.demo")	Semua elemen yangmempunyai class=intro danclass=demo
:first	$("p:first")	Elemen <p> yang pertama
:last	$("p:last")	Elemen <p> yang terakhir
:even	$("tr:even")	Semua elemen <tr> yang genap
:odd	$("tr:odd")	Semua elemen <tr> yang ganjil
:eq(index)	$("ul li:eq(3)")	Elemen ke-empat dari suatu list(index starts at 0)
:gt(no)	$("ul li:gt(3)")	Elemen-elemen dari suatu listdengan index lebih besar dari 3
:lt(no)	$("ul li:lt(3)")	Elemen-elemen dari suatu listdengan index kecil dari 3
:not(selector)	$("input:not(:empty)")	Semua input elemen yang tidakkosong
:header	$(":header")	Semua elemen header <h1><h2>...
:animated		Semua elemen animasi
:contains(text)	$(":contains('W3Schools')")	Semua elemen yang mengandung teks ‘W3Schools’
:empty	$(":empty")	Semua elemen yang tidakmempunyai child (elements)nodes
:hidden	$("p:hidden")	Semua elemen <p> yangtersembunyi
s1,s2,s3	$("th,td,.intro")	Semua elemen yang cocokdengan th, td, .intro

Efek-efek JQuery

Salah satu kemampuan jquery adalah, adanya fungsi-fungsi efek yangsiap pakai. Biasanya untuk membuat efek memudar di javascript, kita harus membuat kode yang lumayan panjang. Tapi dengan menggunakan jquerycukup menggunakan fungsi $(selector).

Berikut adalah efek-efek siap pakai yang disediakan oleh jquery.

1. jQuery show Effect

Berguna untuk menampilkan elemen yang tersembunyi. Untuk mengatur elemen yang tersembunyi melalui CSS adalahdisplay:none (bukan visibility:hidden).

Sintaks :

$(selector).show(speed,callback)

Parameter Deskripsi speed Opsional. Menentukan kecepatan elemenmuncul dari hidden ke visible. Defaultnya adalah 0. Nilainya bisa berupa:

 milliseconds (contoh : 1500)

 "slow"

 "normal"

 "fast"

Contoh :

Kode 13. Contoh show()

<html>

<head>

$(document).ready(function(){$(".tombol1").click(function(){$("p").show(1000,tampilkanAler);});});

function tampilkanAlert(){alert("Paragraf sekarang muncul");}

</script>

</head>

<body>

<p style=”display:none”>Ini adalah paragraph tersembunyi.</p>

</body>

</html>

2. jQuery hide Effect

Berfungsi untuk menyembunyikan elemen yang dipilih. Sintaks :

$(selector).hide(speed,callback)

Untuk parameter speed dan callback adalah sama dengan show()effect. Contoh :

$(".tombol1").click(function(){$("p").hide();});

3. jQuery toggle Effect

Adalah gabungan fungsi hide dan show. Jadi toggle() berfungsimenampilkan yang tersembunyi, menyembunyikan yang tampak.

Sintaks :

$(selector).toggle(speed,callback,switch)

Parameter Deskripsi speed Opsional. Menentukan kecepatan elemenmuncul dari hidden ke visible. Defaultnya adalah 0. Nilainya bisa berupa:

 milliseconds (contoh : 1500)

 "slow"

 "normal"

 "fast

Callback Opsional. Suatu fungsi yang akan dijalankann apabila efek show selesai dijalankan.

Switch Opsional. Bernilai Boolean

 True, hanya untuk menampilkan semua elemen

 False, hanya menyembunyikan semua elemen

Jika parameter ini diset, parameter speed dan callback parameterstidak bisa digunakan.

Contoh Kode 14. Contoh toggle()

<html>

<head>

$(document).ready(function(){$(".tombol1").click(function(){$("p").toggle(true);});});

</script>

</head>

<body>

<p>Ini adalah paragraf</p>

<p style="display:none">Ini adalah paragraf lainnya yang belum muncul</p>

<p>Jika bernilai true hanya berfungsi menampilkan, kalau false hanya menyembunyikan</p>

<button class="tombol1">Tampilkan semua elemen</button>

</body>

</html>

4. jQuery slideDown Effect

Menampilkan elemen yang tersembunyi, secara efek sliding. Sintaks :

$(selector).slideDown(speed,callback)

Untuk parameter speed dan callback adalah sama dengan fungsishow(). Contoh:

$(".tombol1").click(function(){$("p").slideDown();});

5. jQuery slideUp Effect

Menyembunyikan elemen secara efek sliding. Sintaks :

$(selector).slideUp(speed,callback)

Untuk parameter speed dan callback adalah sama dengan fungsishow. Contoh:

$(".tombol1").click(function(){$("p").slideUp();});

6. jQuery slideToggle Effect

Gabungan antara slideDown() dan slideUp(). Menyembunyikanelemen jika dalam keadaan visible, menampilkan elemen jika dalam kedaanhidden.

Sintaks :

$(selector).slideToggle(speed,callback)

Untuk parameter speed dan callback adalah sama dengan fungsishow. Contoh Kode 15. Contoh slideToggle

<html>

<head>

$(document).ready(function(){$("#contact").click(function(){$("#contact-box").slideToggle("slow");});});

</script>

</head>

<body>

<p><span id="contact" style="cursor:hand;background-color:#ababab;padding:3;font-family:Verdana">Contact</span></p>

<form>

Nama : <input type=text><p>

Email : <input type=text><p>

Komentar :<textarea rows=5></textarea><p>

</div>

<p>

jQuery adalah javascript library, jQuery mempunyai semboyan "write less, do more".

jQuery dirancang untuk memperingkas kode-kode javascript. JQuery adalahjavascript

library yang cepat dan ringan untuk menangani dokumen HTML, menangani

event, membuat animasi

dan interakasi ajax. JQuery dirancang untuk mengubah cara anda menulis

javascript.

<p>Sebelum anda memulai mempelajari jQuery, anda harus mempunyai

pengetahuan dasar mengenai HTML, CSS dan Javascript.

</body>

</html>

7. jQuery fadeIn Effect

Menampilkan elemen yang dipilih jika tersembunyi, secara efek memudar. Sintaks :

$(selector).fadeIn(speed,callback)

Untuk parameter speed dan callback adalah sama dengan fungsi show().Contoh:

$(".tombol1").click(function(){$("p"). fadeIn();});

8. jQuery fadeOut Effect

Menyembunyikan elemen yang dipilih, secara efek memudar. Sintaks:

$(selector).fadeOut(speed,callback)

Untuk parameter speed dan callback adalah sama dengan fungsi show().Contoh:

Kode 16. Contoh fadeOut()

<html>

<head>

<style>

#box

{background-color:#96BC43; border:solid 3px #333333; height:160px; margin-top:30px;}

</style>

$(function(){$('.fadeOut_box').click(function(){$('#box').fadeOut("slow");});

$('.fadeIn_box').click(function(){$('#box').fadeIn("slow");});});

</script>

<body>

<a href="#" class="fadeOut_box">fadeOut()</a>

<a href="#" class="fadeIn_box">fadeIn()</a>

</body>

</html>

9. jQuery fadeTo Effect

Mengatur tingkat kepudaran elemen terpilih menuju tingkat opacity yangditentukan. Sintaks :

$(selector).fadeTo(speed,opacity,callback)

Untuk parameter speed dan callback adalah sama dengan fungsi show().Untuk parameter opacity bisa bernilai 0 sampai 1.

Contoh :

$(".tombol1").click(function(){$("p"). fadeTo(1000,0.6);});

10.jQuery animate Effect

Mengubah suatu elemen dari satu keadaan ke keadaan yang lainnya. Keadaan yang diubah ini berdasarkan CSS.

Nilai properti CSS yang berubah secara berangsur-angsur, hal iniuntuk menciptakan efek animasi. Nilai properti CSS yang bisa diubah adalah nilai bertipe angka, baik satuannya pixel atau persen%. Untuk tipestring tidak bisa dianimasikan. Sintaks :

$(selector).animate(styles,speed,easing,callback)

Parameter Deskripsi styles Wajib. Menentukan properti CSS dan nilainya yang akan di-animasi.

Properti CSS yang bisa di-animasi :

 backgroundPosition

 borderWidth

 borderBottomWidth

 borderLeftWidth

 borderRightWidth

 borderTopWidth

 borderSpacing

 margin

 marginBottom

 marginLeft

 marginRight

 marginTop

 outlineWidth

 padding

 paddingBottom

 paddingLeft

 paddingRight

 paddingTop

 height

 widt

 maxHeight

 maxWidth

 minHeight

 maxWidth

 fontSize

 bottom

 left

 right

 top

 letterSpacing

 wordSpacing

 lineHeight

 textIndent

Speed Opsional. Menentukan kecepatan elemen muncul dari hidden ke visible. Defaultnya adalah 0. Nilainya bisa berupa:

 milliseconds (contoh : 1500)

 "slow"

 "normal"

 "fast"

Easing Opsional. Menentukan fungsi easing yang diset pada speedanimasi. Callback Opsional. Suatu fungsi yang akan dijalankann apabila efek show selesai dijalankan.

Contoh :

Kode 17. Contoh animate()

<html>

<head>

$(document).ready(function(){$(".tombol1").click(function(){$("#box").animate({height:"300px"});});

$(".tombol2").click(function(){$("#box").animate({height:"100px"});});});

</script>

</head>

<body>

</div>

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

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

</body>

</html>

11.jQuery stop Effect

Menghentikan animasi yang sedang berjalan. Sintaks :

$(selector).stop(stopAll,goToEnd)

Parameter Deskripsi:

StopAll Opsional. Bernilai boolean, menentukan apakah menghentikansemua animasi, termasuk yang ngantri untuk dijalankan pada elemen yangdipilih atau tidak.

Go To End Opsional. Bernilai Boolean, menentukan apakah animasi yang sedang jalan dikompletkan atau tidak.

Parameter ini hanya bisa digunakan jika parameter stopAll di-set.

Contoh :

Kode 18. Contoh stop()

<html>

<head>

$(document).ready(function(){$("#start").click(function(){$("#box").animate({height:300},"slow");$("#box").animate({width:300},"slow");$("#box").animate({height:100},"slow");$("#box").animate({width:100},"slow");});

$("#stop").click(function(){$("#box").stop(false,true);});});

</script>

</head>

<body>

<p><button id="start">Start Animasi</button><button id="stop">Stop

Animasi</button></p>

</div>

</body>

</html>

KELEBIHAN DAN KELEMAHAN JQUERY

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

 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).

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

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

Penutup

Demikian makalah saya mengenai “JQUERY” , semoga makalah ini dapat menjadi sumber pengetahuan dan dapat bermanfaat bagi pembacanya.saya mengucapkan terima kasih terhadap pihak-pihak terkait yang membantu penyusunan makalah ini.Kepada teman-teman dan bapak dosen atas saran dan bimbinganya yang akhirnya mampu memunculkan makalah yang luar biasa ini. Mohon maaf apabila saat proses penulisan sering terjadi selisih antara yang satu dengan yang lain.Mohon maaf apabila ternyata ada kesalahan pengetikan nama dan kesalahan penulisan informasi.Sekali lagi terima kasih atas perhatian dan dukungungannya.

Penulis

Haris Sri Widyoko

DAFTAR PUSTAKA

http://aka-philtyphil.blogspot.com/2010/11/pengertian-jquery.html

http://radeninformatika.blogspot.com/2012/12/makalah-web-statis.html

http://net-crawler.blogspot.com/2013/10/belajar-jquery-fungsi-fadein-fadeout.html

http://bethasidik.wordpress.com/category/jquery/

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

http://www.ilmugrafis.com/web-jquery.php?page=tentang-fungsi-jquery-dan-sejarahnya

http://www.alimadura.com/2013/07/pengertian-kelebihan-dan-kekurangan-jquery.html

http://www.prowebpro.com/news/implementasi_jquery.html

http://ebestmateri.blogspot.com/2010/11/apa-itu-jquery.html

Untuk mendapatkan kan dalam bentuk PowerPoint silahkal klik link dibawah ini