SlideShare a Scribd company logo
1 of 20
Apa itu jQuery?
jQuery adalah sebuah library
Javascript yang sangat ringkas dan
sederhana
untuk memanipulasi komponen di
dokumen HTML, menangani event,
animasi, efek
dan memproses interaksi ajax. j
jQuery pertama kali diluncurkan pada
Januari 2006 oleh John Resig. jQuery adalah
library Javascript yang paling populer
saat ini. Karena kecanggihan nya pula, 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.
Library jQuery mempunyai kemampuan :
• Kemudahan mengakses elemen-elemen
HTML
• Memanipulasi elemen HTML
• Memanipulasi CSS
• Penanganan event HTML
• Efek-efek javascript dan animasi
• Modifikasi HTML DOM
• AJAX
• 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.
<script type="text/javascript" src="jquery.js"></script>
sekarang mari kita lihat contoh sederhana pemograman
dengan menggunakan
jquery. Kode 12. hello world jquery
<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".tombol1").click(function(){
$("p").hide(1000);
});
$(".tombol2").click(function(){
7
$("p").show(1000);
});
});
</script>
</head>
<body>
<p>Hello World!</p>
<button class="tombol1">Sembunyikan</button>
<button class="tombol2">Tampilkan</button>
</body>
</html>
jQuery Mobile adalah sebuah platform pengembangan dari
jQuery. Pertama kali kita
harus belajar bagaimana memahami cara kerja dan
implementasinya dalam aplikasi
web. Dengan menggunakalan jQuery Mobile, Anda dapat men-
develop berbagai
solusi mobile yang bekerja dengan baik di berbagai piranti
operasi mobile.
Contoh piranti yang
didukung jQuery Mobile
antara lain Android,
Blackberry, Fennec
(Mozilla), WebOS dari
HP (Palm), iOS (iPhone,
iPhod Touch dan iPad),
serta Opera
Mobile. Platfom lain
seperti Meego,
Windows Mobile, dan
dan platform Symbian
akan didukung di masa
depan.
Sifat dan Fitur jQuery Mobile
- jQuery Mobile memudahkan pengembangan user-interface untuk mobile
web
apps.
- Konfigurasi antarmukanya bersifat markup-driven, yang berarti Anda
dapat
membuat seluruh aplikasi antarmuka dasar dalam kode HTML, tanpa perlu
menulis
satu barus JavaScript.
- Menyediakan serangkaian event khusus, mendeteksi event dari piranti
mobile dan
piranti touchscreen seperti tap, tap-and-hold, dan perubahan orientarsi
(misalnya
merotasi piranti).
- Memastikan bahwa user-interface bekerja
pada web browser.
- Menggunakan theme untuk memudahkan
penyesuaian tampilan aplikasi Anda.
Berikut ini beberapa fitur utama dari jQuery
Mobile :
- Dibangun di atas core jQuery, sehingga
sintaksnya lebih familiar dan konsisten
serta belajarnya lebih mudah bagi mereka
yang sudah mengenal kode dan pola
jQuery
- Kompatibel dengan semua piranti
mobile, tablet, e-reader, dan desktop
terkini
seperti iOS, Android, Blackberry, Palm
WebOS. Nokiaa/Symbian, Windows
Phone 7,
MeeGo, Opera Mobile/ Mini, FireFox
Mozilla, Kindle, Nook, dan semua
browser
lainnya. Tentu dengan kompabilitas
yang berbeda-beda.
- Ukurannya ringan dan dependensi
dengan image sangat rendah, sehingga
lebih
cepat.
- Memiliki arsitektur modular untuk
custom build. Ini memiliki fitur yang bisa
disesuaikan untuk aplikasi khusus.
- Konfigurasi HTML 5 yang markup driven
untuk pengembangan yang cepat dan
scripting yang minimal.
- Selalu ditingkatkan, yang memungkinkan
fungsionalitas untuk membangun
aplikasi di mobile, tablet, dan desktop.
- Desain dan tool-nya responsive, yang
memungkinkan kode dasar yang sama
dipakai untuk smartphone dan juga layar
desktop.
- Sistem navigasi yang powerfull berbasis AJAX,
yang memungkinkan transisi
halaman dianimasikan dengan tetap
memantanance tombol back, bookmark, dan
bisa menggunakan URL yang clean via pushState.
- Ada fitur lain seperti WAI-ARIA, yang
memungkinkan halaman yang dibuat bisa
bekerja dengan screen reader (misalnya
VoiceOver di iOS) dan teknologi lainnya.
- Dukungan terhadap touch dan mouse
event, sehingga memudahkan proses
pemrogaman ketika meng-handel touch,
mouse, dan fokus kursor dengan
menggunakan API yang sederhana.
- Widget antarmuka yang
seragam, memudahkan kontrol
native dengan optimasi
pada touch. Bisa diatur temanya
sehingga mudah dipakai.
- Punya them framework serta
aplikasi ThemeRoller, sehingga
memudahkan dalam
pembuatan theme.
contoh sederhana pemograman dengan
menggunakan
jquery
Kode 12. hello world jquery.
<script type="text/javascript"
src="jquery.js"></script>
<html>
<head>
<script type="text/javascript"
src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(f
unction(){
$(".tombol1").click(fu
nction(){
$("p").hide(1000);
});
$(".tombol2").click(fu
nction(){
$("p").show(1000);
});
});
</script>
$(selector).mouseleave(functi
on)
$(selector).mousemove(functi
on)
$(selector).mouseout(functio
n)
$(selector).mouseover(functi
on)
$(selector).mouseup(function
)
$(selector).resize(function)
$(selector).scroll(function)
$(selector).select(function)
$(selector).submit(function)
$(selector).unload(function)
LOGO JQUERY
Apa yang bisa dilakukan dengan JQuery?
1. 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.
2. 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.
3. 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.

More Related Content

What's hot

Ppt pengenalan jquery
Ppt pengenalan jqueryPpt pengenalan jquery
Ppt pengenalan jquerymutia902
 
Jquery ppt
Jquery pptJquery ppt
Jquery ppt044249
 
Tugas[1] 0317-[tryanita]-[1411511676]
Tugas[1] 0317-[tryanita]-[1411511676]Tugas[1] 0317-[tryanita]-[1411511676]
Tugas[1] 0317-[tryanita]-[1411511676]trya nita
 
Pengenalan dan implementasi j query
Pengenalan dan implementasi j queryPengenalan dan implementasi j query
Pengenalan dan implementasi j queryDerren Yuzron
 
Page & Dialog Transitions
Page & Dialog TransitionsPage & Dialog Transitions
Page & Dialog Transitionstakdirlovely09
 
Tugas 1 rek web (lingga eka pradipta, 1411501073, ka)
Tugas 1 rek web (lingga eka pradipta, 1411501073, ka)Tugas 1 rek web (lingga eka pradipta, 1411501073, ka)
Tugas 1 rek web (lingga eka pradipta, 1411501073, ka)LinggaDipta
 
Tugas 1 rek web (lingga eka pradipta, 1411501073, kb)
Tugas 1 rek web (lingga eka pradipta, 1411501073, kb)Tugas 1 rek web (lingga eka pradipta, 1411501073, kb)
Tugas 1 rek web (lingga eka pradipta, 1411501073, kb)LinggaDipta
 
Pertemuan java script 1
Pertemuan java script 1Pertemuan java script 1
Pertemuan java script 1zaenald i
 
Hello world with j query seni yuliarini
Hello world with j query seni yuliariniHello world with j query seni yuliarini
Hello world with j query seni yuliariniSeni Yuliarini
 
Cara membuat hello world menggunakan j query
Cara membuat hello world menggunakan j queryCara membuat hello world menggunakan j query
Cara membuat hello world menggunakan j queryimeldabernika
 
Hello World in jQuery-DeviMulyani
Hello World in jQuery-DeviMulyaniHello World in jQuery-DeviMulyani
Hello World in jQuery-DeviMulyaniSyah Prian
 
7 pemrograman internet javascript
7 pemrograman internet  javascript7 pemrograman internet  javascript
7 pemrograman internet javascriptToni Tegar Sahidi
 

What's hot (19)

Ppt pengenalan jquery
Ppt pengenalan jqueryPpt pengenalan jquery
Ppt pengenalan jquery
 
Jquery ppt
Jquery pptJquery ppt
Jquery ppt
 
Tugas[1] 0317-[tryanita]-[1411511676]
Tugas[1] 0317-[tryanita]-[1411511676]Tugas[1] 0317-[tryanita]-[1411511676]
Tugas[1] 0317-[tryanita]-[1411511676]
 
Lecture06 javascript1
Lecture06 javascript1Lecture06 javascript1
Lecture06 javascript1
 
Khairunnisa 1205467
Khairunnisa 1205467Khairunnisa 1205467
Khairunnisa 1205467
 
Pengenalan dan implementasi j query
Pengenalan dan implementasi j queryPengenalan dan implementasi j query
Pengenalan dan implementasi j query
 
jQuery
jQueryjQuery
jQuery
 
Page & Dialog Transitions
Page & Dialog TransitionsPage & Dialog Transitions
Page & Dialog Transitions
 
Tugas 1 rek web (lingga eka pradipta, 1411501073, ka)
Tugas 1 rek web (lingga eka pradipta, 1411501073, ka)Tugas 1 rek web (lingga eka pradipta, 1411501073, ka)
Tugas 1 rek web (lingga eka pradipta, 1411501073, ka)
 
JQuery
JQueryJQuery
JQuery
 
Tugas 1 rek web (lingga eka pradipta, 1411501073, kb)
Tugas 1 rek web (lingga eka pradipta, 1411501073, kb)Tugas 1 rek web (lingga eka pradipta, 1411501073, kb)
Tugas 1 rek web (lingga eka pradipta, 1411501073, kb)
 
JQURTY
JQURTYJQURTY
JQURTY
 
Pertemuan java script 1
Pertemuan java script 1Pertemuan java script 1
Pertemuan java script 1
 
Hello world with j query seni yuliarini
Hello world with j query seni yuliariniHello world with j query seni yuliarini
Hello world with j query seni yuliarini
 
Cara membuat hello world menggunakan j query
Cara membuat hello world menggunakan j queryCara membuat hello world menggunakan j query
Cara membuat hello world menggunakan j query
 
Hello World in jQuery-DeviMulyani
Hello World in jQuery-DeviMulyaniHello World in jQuery-DeviMulyani
Hello World in jQuery-DeviMulyani
 
7 pemrograman internet javascript
7 pemrograman internet  javascript7 pemrograman internet  javascript
7 pemrograman internet javascript
 
ppt j query
ppt j queryppt j query
ppt j query
 
Tugas rekweb 2 1212511560 m.shafwan al farisy
Tugas rekweb 2 1212511560 m.shafwan al farisyTugas rekweb 2 1212511560 m.shafwan al farisy
Tugas rekweb 2 1212511560 m.shafwan al farisy
 

Viewers also liked

Cloudcomputing
CloudcomputingCloudcomputing
Cloudcomputingagus248
 
Cloudcomputing
CloudcomputingCloudcomputing
Cloudcomputingagus248
 
Makalah cloud-computing
Makalah cloud-computingMakalah cloud-computing
Makalah cloud-computingp188
 
Sejarah cloud computing
Sejarah cloud computingSejarah cloud computing
Sejarah cloud computingcahkos
 
Cloud computing - Pros and Cons
Cloud computing - Pros and ConsCloud computing - Pros and Cons
Cloud computing - Pros and ConsSavvycom Savvycom
 

Viewers also liked (8)

Html5
Html5Html5
Html5
 
Android
AndroidAndroid
Android
 
Cloudcomputing
CloudcomputingCloudcomputing
Cloudcomputing
 
Cloudcomputing
CloudcomputingCloudcomputing
Cloudcomputing
 
Cloud computing
Cloud computingCloud computing
Cloud computing
 
Makalah cloud-computing
Makalah cloud-computingMakalah cloud-computing
Makalah cloud-computing
 
Sejarah cloud computing
Sejarah cloud computingSejarah cloud computing
Sejarah cloud computing
 
Cloud computing - Pros and Cons
Cloud computing - Pros and ConsCloud computing - Pros and Cons
Cloud computing - Pros and Cons
 

Similar to Jquery

Ristianawati 2114 r0800 jquery
Ristianawati 2114 r0800 jqueryRistianawati 2114 r0800 jquery
Ristianawati 2114 r0800 jqueryRistianawati
 
Ristianawati 2114 r0800 mikrotik
Ristianawati 2114 r0800 mikrotikRistianawati 2114 r0800 mikrotik
Ristianawati 2114 r0800 mikrotikRistianawati
 
Jequary
Jequary Jequary
Jequary p188
 
54 hal-dasar-dasar-jquery
54 hal-dasar-dasar-jquery54 hal-dasar-dasar-jquery
54 hal-dasar-dasar-jqueryFajar Baskoro
 
Makalah J query dan penggunaannya sebagai validasi form
Makalah J query dan penggunaannya sebagai validasi formMakalah J query dan penggunaannya sebagai validasi form
Makalah J query dan penggunaannya sebagai validasi formHutommo Bagus
 
Tugas Rekayasa Web 1
Tugas Rekayasa Web 1Tugas Rekayasa Web 1
Tugas Rekayasa Web 1fahreza yozi
 
Pelatihan j query
Pelatihan j queryPelatihan j query
Pelatihan j queryoratmangun
 
Tutorial web site aida dan jesika
Tutorial web site aida dan jesikaTutorial web site aida dan jesika
Tutorial web site aida dan jesikaRCH_98
 
Tugas 3 – 0317 (individu)
Tugas 3 – 0317 (individu)Tugas 3 – 0317 (individu)
Tugas 3 – 0317 (individu)Linda Lestari
 

Similar to Jquery (20)

Jqu
JquJqu
Jqu
 
Jqu
JquJqu
Jqu
 
JQUERY
JQUERYJQUERY
JQUERY
 
Ristianawati 2114 r0800 jquery
Ristianawati 2114 r0800 jqueryRistianawati 2114 r0800 jquery
Ristianawati 2114 r0800 jquery
 
Ristianawati 2114 r0800 mikrotik
Ristianawati 2114 r0800 mikrotikRistianawati 2114 r0800 mikrotik
Ristianawati 2114 r0800 mikrotik
 
Jequary
Jequary Jequary
Jequary
 
Jquery id
Jquery idJquery id
Jquery id
 
54 hal-dasar-dasar-jquery
54 hal-dasar-dasar-jquery54 hal-dasar-dasar-jquery
54 hal-dasar-dasar-jquery
 
Makalah J query dan penggunaannya sebagai validasi form
Makalah J query dan penggunaannya sebagai validasi formMakalah J query dan penggunaannya sebagai validasi form
Makalah J query dan penggunaannya sebagai validasi form
 
Tugas Rekayasa Web 1
Tugas Rekayasa Web 1Tugas Rekayasa Web 1
Tugas Rekayasa Web 1
 
Pelatihan j query
Pelatihan j queryPelatihan j query
Pelatihan j query
 
Jquery ppt
Jquery pptJquery ppt
Jquery ppt
 
Tutorial web site aida dan jesika
Tutorial web site aida dan jesikaTutorial web site aida dan jesika
Tutorial web site aida dan jesika
 
Ppt jquery
Ppt jqueryPpt jquery
Ppt jquery
 
Makalah jquery
Makalah jqueryMakalah jquery
Makalah jquery
 
J query
J queryJ query
J query
 
J query.
J query.J query.
J query.
 
J query
J queryJ query
J query
 
J query
J queryJ query
J query
 
Tugas 3 – 0317 (individu)
Tugas 3 – 0317 (individu)Tugas 3 – 0317 (individu)
Tugas 3 – 0317 (individu)
 

More from agus248

Presentation1 pak lutfi
Presentation1 pak lutfiPresentation1 pak lutfi
Presentation1 pak lutfiagus248
 
Mikrotik
MikrotikMikrotik
Mikrotikagus248
 

More from agus248 (6)

Java
JavaJava
Java
 
Presentation1 pak lutfi
Presentation1 pak lutfiPresentation1 pak lutfi
Presentation1 pak lutfi
 
Android
AndroidAndroid
Android
 
Html5
Html5Html5
Html5
 
Java
JavaJava
Java
 
Mikrotik
MikrotikMikrotik
Mikrotik
 

Recently uploaded

Laporan Guru Piket untuk Pengisian RHK Guru Pengelolaan KInerja Guru di PMM
Laporan Guru Piket untuk Pengisian RHK Guru Pengelolaan KInerja Guru di PMMLaporan Guru Piket untuk Pengisian RHK Guru Pengelolaan KInerja Guru di PMM
Laporan Guru Piket untuk Pengisian RHK Guru Pengelolaan KInerja Guru di PMMmulyadia43
 
AKSI NYATA MODUL 1.2-1 untuk pendidikan guru penggerak.pptx
AKSI NYATA MODUL 1.2-1 untuk pendidikan guru penggerak.pptxAKSI NYATA MODUL 1.2-1 untuk pendidikan guru penggerak.pptx
AKSI NYATA MODUL 1.2-1 untuk pendidikan guru penggerak.pptxWirionSembiring2
 
PPT Integrasi Islam & Ilmu Pengetahuan.pptx
PPT Integrasi Islam & Ilmu Pengetahuan.pptxPPT Integrasi Islam & Ilmu Pengetahuan.pptx
PPT Integrasi Islam & Ilmu Pengetahuan.pptxnerow98
 
HARMONI DALAM EKOSISTEM KELAS V SEKOLAH DASAR.pdf
HARMONI DALAM EKOSISTEM KELAS V SEKOLAH DASAR.pdfHARMONI DALAM EKOSISTEM KELAS V SEKOLAH DASAR.pdf
HARMONI DALAM EKOSISTEM KELAS V SEKOLAH DASAR.pdfkustiyantidew94
 
MATERI EKOSISTEM UNTUK SEKOLAH MENENGAH ATAS
MATERI EKOSISTEM UNTUK SEKOLAH MENENGAH ATASMATERI EKOSISTEM UNTUK SEKOLAH MENENGAH ATAS
MATERI EKOSISTEM UNTUK SEKOLAH MENENGAH ATASKurniawan Dirham
 
Jurnal Dwi mingguan modul 1.2-gurupenggerak.pptx
Jurnal Dwi mingguan modul 1.2-gurupenggerak.pptxJurnal Dwi mingguan modul 1.2-gurupenggerak.pptx
Jurnal Dwi mingguan modul 1.2-gurupenggerak.pptxBambang440423
 
Tugas 1 pembaruan dlm pembelajaran jawaban tugas tuton 1.docx
Tugas 1 pembaruan dlm pembelajaran jawaban tugas tuton 1.docxTugas 1 pembaruan dlm pembelajaran jawaban tugas tuton 1.docx
Tugas 1 pembaruan dlm pembelajaran jawaban tugas tuton 1.docxmawan5982
 
Panduan Substansi_ Pengelolaan Kinerja Kepala Sekolah Tahap Pelaksanaan.pptx
Panduan Substansi_ Pengelolaan Kinerja Kepala Sekolah Tahap Pelaksanaan.pptxPanduan Substansi_ Pengelolaan Kinerja Kepala Sekolah Tahap Pelaksanaan.pptx
Panduan Substansi_ Pengelolaan Kinerja Kepala Sekolah Tahap Pelaksanaan.pptxsudianaade137
 
Kelompok 1_Karakteristik negara jepang.pdf
Kelompok 1_Karakteristik negara jepang.pdfKelompok 1_Karakteristik negara jepang.pdf
Kelompok 1_Karakteristik negara jepang.pdfCloverash1
 
Materi Strategi Perubahan dibuat oleh kelompok 5
Materi Strategi Perubahan dibuat oleh kelompok 5Materi Strategi Perubahan dibuat oleh kelompok 5
Materi Strategi Perubahan dibuat oleh kelompok 5KIKI TRISNA MUKTI
 
PPT_AKUNTANSI_PAJAK_ATAS_ASET_TETAP.pptx
PPT_AKUNTANSI_PAJAK_ATAS_ASET_TETAP.pptxPPT_AKUNTANSI_PAJAK_ATAS_ASET_TETAP.pptx
PPT_AKUNTANSI_PAJAK_ATAS_ASET_TETAP.pptxalalfardilah
 
TUGAS GURU PENGGERAK Aksi Nyata Modul 1.1.pdf
TUGAS GURU PENGGERAK Aksi Nyata Modul 1.1.pdfTUGAS GURU PENGGERAK Aksi Nyata Modul 1.1.pdf
TUGAS GURU PENGGERAK Aksi Nyata Modul 1.1.pdfElaAditya
 
aku-dan-kebutuhanku-Kelas 4 SD Mapel IPAS
aku-dan-kebutuhanku-Kelas 4 SD Mapel IPASaku-dan-kebutuhanku-Kelas 4 SD Mapel IPAS
aku-dan-kebutuhanku-Kelas 4 SD Mapel IPASreskosatrio1
 
04-Gemelli.- kehamilan ganda- duo atau triplet
04-Gemelli.- kehamilan ganda- duo atau triplet04-Gemelli.- kehamilan ganda- duo atau triplet
04-Gemelli.- kehamilan ganda- duo atau tripletMelianaJayasaputra
 
1.2.a.6. Demonstrasi Konstektual - Modul 1.2 (Shinta Novianti - CGP A10).pdf
1.2.a.6. Demonstrasi Konstektual - Modul 1.2 (Shinta Novianti - CGP A10).pdf1.2.a.6. Demonstrasi Konstektual - Modul 1.2 (Shinta Novianti - CGP A10).pdf
1.2.a.6. Demonstrasi Konstektual - Modul 1.2 (Shinta Novianti - CGP A10).pdfShintaNovianti1
 
Materi Pertemuan 6 Materi Pertemuan 6.pptx
Materi Pertemuan 6 Materi Pertemuan 6.pptxMateri Pertemuan 6 Materi Pertemuan 6.pptx
Materi Pertemuan 6 Materi Pertemuan 6.pptxRezaWahyuni6
 
Karakteristik Negara Mesir (Geografi Regional Dunia)
Karakteristik Negara Mesir (Geografi Regional Dunia)Karakteristik Negara Mesir (Geografi Regional Dunia)
Karakteristik Negara Mesir (Geografi Regional Dunia)3HerisaSintia
 
Wawasan Nusantara sebagai satu kesatuan, politik, ekonomi, sosial, budaya, d...
Wawasan Nusantara  sebagai satu kesatuan, politik, ekonomi, sosial, budaya, d...Wawasan Nusantara  sebagai satu kesatuan, politik, ekonomi, sosial, budaya, d...
Wawasan Nusantara sebagai satu kesatuan, politik, ekonomi, sosial, budaya, d...MarwanAnugrah
 
KONSEP KEBUTUHAN AKTIVITAS DAN LATIHAN.pptx
KONSEP KEBUTUHAN AKTIVITAS DAN LATIHAN.pptxKONSEP KEBUTUHAN AKTIVITAS DAN LATIHAN.pptx
KONSEP KEBUTUHAN AKTIVITAS DAN LATIHAN.pptxawaldarmawan3
 
ppt-modul-6-pend-seni-di sd kelompok 2 ppt
ppt-modul-6-pend-seni-di sd kelompok 2 pptppt-modul-6-pend-seni-di sd kelompok 2 ppt
ppt-modul-6-pend-seni-di sd kelompok 2 pptArkhaRega1
 

Recently uploaded (20)

Laporan Guru Piket untuk Pengisian RHK Guru Pengelolaan KInerja Guru di PMM
Laporan Guru Piket untuk Pengisian RHK Guru Pengelolaan KInerja Guru di PMMLaporan Guru Piket untuk Pengisian RHK Guru Pengelolaan KInerja Guru di PMM
Laporan Guru Piket untuk Pengisian RHK Guru Pengelolaan KInerja Guru di PMM
 
AKSI NYATA MODUL 1.2-1 untuk pendidikan guru penggerak.pptx
AKSI NYATA MODUL 1.2-1 untuk pendidikan guru penggerak.pptxAKSI NYATA MODUL 1.2-1 untuk pendidikan guru penggerak.pptx
AKSI NYATA MODUL 1.2-1 untuk pendidikan guru penggerak.pptx
 
PPT Integrasi Islam & Ilmu Pengetahuan.pptx
PPT Integrasi Islam & Ilmu Pengetahuan.pptxPPT Integrasi Islam & Ilmu Pengetahuan.pptx
PPT Integrasi Islam & Ilmu Pengetahuan.pptx
 
HARMONI DALAM EKOSISTEM KELAS V SEKOLAH DASAR.pdf
HARMONI DALAM EKOSISTEM KELAS V SEKOLAH DASAR.pdfHARMONI DALAM EKOSISTEM KELAS V SEKOLAH DASAR.pdf
HARMONI DALAM EKOSISTEM KELAS V SEKOLAH DASAR.pdf
 
MATERI EKOSISTEM UNTUK SEKOLAH MENENGAH ATAS
MATERI EKOSISTEM UNTUK SEKOLAH MENENGAH ATASMATERI EKOSISTEM UNTUK SEKOLAH MENENGAH ATAS
MATERI EKOSISTEM UNTUK SEKOLAH MENENGAH ATAS
 
Jurnal Dwi mingguan modul 1.2-gurupenggerak.pptx
Jurnal Dwi mingguan modul 1.2-gurupenggerak.pptxJurnal Dwi mingguan modul 1.2-gurupenggerak.pptx
Jurnal Dwi mingguan modul 1.2-gurupenggerak.pptx
 
Tugas 1 pembaruan dlm pembelajaran jawaban tugas tuton 1.docx
Tugas 1 pembaruan dlm pembelajaran jawaban tugas tuton 1.docxTugas 1 pembaruan dlm pembelajaran jawaban tugas tuton 1.docx
Tugas 1 pembaruan dlm pembelajaran jawaban tugas tuton 1.docx
 
Panduan Substansi_ Pengelolaan Kinerja Kepala Sekolah Tahap Pelaksanaan.pptx
Panduan Substansi_ Pengelolaan Kinerja Kepala Sekolah Tahap Pelaksanaan.pptxPanduan Substansi_ Pengelolaan Kinerja Kepala Sekolah Tahap Pelaksanaan.pptx
Panduan Substansi_ Pengelolaan Kinerja Kepala Sekolah Tahap Pelaksanaan.pptx
 
Kelompok 1_Karakteristik negara jepang.pdf
Kelompok 1_Karakteristik negara jepang.pdfKelompok 1_Karakteristik negara jepang.pdf
Kelompok 1_Karakteristik negara jepang.pdf
 
Materi Strategi Perubahan dibuat oleh kelompok 5
Materi Strategi Perubahan dibuat oleh kelompok 5Materi Strategi Perubahan dibuat oleh kelompok 5
Materi Strategi Perubahan dibuat oleh kelompok 5
 
PPT_AKUNTANSI_PAJAK_ATAS_ASET_TETAP.pptx
PPT_AKUNTANSI_PAJAK_ATAS_ASET_TETAP.pptxPPT_AKUNTANSI_PAJAK_ATAS_ASET_TETAP.pptx
PPT_AKUNTANSI_PAJAK_ATAS_ASET_TETAP.pptx
 
TUGAS GURU PENGGERAK Aksi Nyata Modul 1.1.pdf
TUGAS GURU PENGGERAK Aksi Nyata Modul 1.1.pdfTUGAS GURU PENGGERAK Aksi Nyata Modul 1.1.pdf
TUGAS GURU PENGGERAK Aksi Nyata Modul 1.1.pdf
 
aku-dan-kebutuhanku-Kelas 4 SD Mapel IPAS
aku-dan-kebutuhanku-Kelas 4 SD Mapel IPASaku-dan-kebutuhanku-Kelas 4 SD Mapel IPAS
aku-dan-kebutuhanku-Kelas 4 SD Mapel IPAS
 
04-Gemelli.- kehamilan ganda- duo atau triplet
04-Gemelli.- kehamilan ganda- duo atau triplet04-Gemelli.- kehamilan ganda- duo atau triplet
04-Gemelli.- kehamilan ganda- duo atau triplet
 
1.2.a.6. Demonstrasi Konstektual - Modul 1.2 (Shinta Novianti - CGP A10).pdf
1.2.a.6. Demonstrasi Konstektual - Modul 1.2 (Shinta Novianti - CGP A10).pdf1.2.a.6. Demonstrasi Konstektual - Modul 1.2 (Shinta Novianti - CGP A10).pdf
1.2.a.6. Demonstrasi Konstektual - Modul 1.2 (Shinta Novianti - CGP A10).pdf
 
Materi Pertemuan 6 Materi Pertemuan 6.pptx
Materi Pertemuan 6 Materi Pertemuan 6.pptxMateri Pertemuan 6 Materi Pertemuan 6.pptx
Materi Pertemuan 6 Materi Pertemuan 6.pptx
 
Karakteristik Negara Mesir (Geografi Regional Dunia)
Karakteristik Negara Mesir (Geografi Regional Dunia)Karakteristik Negara Mesir (Geografi Regional Dunia)
Karakteristik Negara Mesir (Geografi Regional Dunia)
 
Wawasan Nusantara sebagai satu kesatuan, politik, ekonomi, sosial, budaya, d...
Wawasan Nusantara  sebagai satu kesatuan, politik, ekonomi, sosial, budaya, d...Wawasan Nusantara  sebagai satu kesatuan, politik, ekonomi, sosial, budaya, d...
Wawasan Nusantara sebagai satu kesatuan, politik, ekonomi, sosial, budaya, d...
 
KONSEP KEBUTUHAN AKTIVITAS DAN LATIHAN.pptx
KONSEP KEBUTUHAN AKTIVITAS DAN LATIHAN.pptxKONSEP KEBUTUHAN AKTIVITAS DAN LATIHAN.pptx
KONSEP KEBUTUHAN AKTIVITAS DAN LATIHAN.pptx
 
ppt-modul-6-pend-seni-di sd kelompok 2 ppt
ppt-modul-6-pend-seni-di sd kelompok 2 pptppt-modul-6-pend-seni-di sd kelompok 2 ppt
ppt-modul-6-pend-seni-di sd kelompok 2 ppt
 

Jquery

  • 2. jQuery adalah sebuah library Javascript yang sangat ringkas dan sederhana untuk memanipulasi komponen di dokumen HTML, menangani event, animasi, efek dan memproses interaksi ajax. j
  • 3. jQuery pertama kali diluncurkan pada Januari 2006 oleh John Resig. jQuery adalah library Javascript yang paling populer saat ini. Karena kecanggihan nya pula, 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.
  • 4. Library jQuery mempunyai kemampuan : • Kemudahan mengakses elemen-elemen HTML • Memanipulasi elemen HTML • Memanipulasi CSS • Penanganan event HTML • Efek-efek javascript dan animasi • Modifikasi HTML DOM • AJAX • Menyederhanakan kode javascript lainnya
  • 5. 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. <script type="text/javascript" src="jquery.js"></script> sekarang mari kita lihat contoh sederhana pemograman dengan menggunakan jquery. Kode 12. hello world jquery <html> <head> <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript"> $(document).ready(function(){ $(".tombol1").click(function(){ $("p").hide(1000); }); $(".tombol2").click(function(){ 7 $("p").show(1000); }); }); </script> </head> <body> <p>Hello World!</p> <button class="tombol1">Sembunyikan</button> <button class="tombol2">Tampilkan</button> </body> </html>
  • 6. jQuery Mobile adalah sebuah platform pengembangan dari jQuery. Pertama kali kita harus belajar bagaimana memahami cara kerja dan implementasinya dalam aplikasi web. Dengan menggunakalan jQuery Mobile, Anda dapat men- develop berbagai solusi mobile yang bekerja dengan baik di berbagai piranti operasi mobile.
  • 7. Contoh piranti yang didukung jQuery Mobile antara lain Android, Blackberry, Fennec (Mozilla), WebOS dari HP (Palm), iOS (iPhone, iPhod Touch dan iPad), serta Opera Mobile. Platfom lain seperti Meego, Windows Mobile, dan dan platform Symbian akan didukung di masa depan.
  • 8. Sifat dan Fitur jQuery Mobile - jQuery Mobile memudahkan pengembangan user-interface untuk mobile web apps. - Konfigurasi antarmukanya bersifat markup-driven, yang berarti Anda dapat membuat seluruh aplikasi antarmuka dasar dalam kode HTML, tanpa perlu menulis satu barus JavaScript. - Menyediakan serangkaian event khusus, mendeteksi event dari piranti mobile dan piranti touchscreen seperti tap, tap-and-hold, dan perubahan orientarsi (misalnya merotasi piranti).
  • 9. - Memastikan bahwa user-interface bekerja pada web browser. - Menggunakan theme untuk memudahkan penyesuaian tampilan aplikasi Anda. Berikut ini beberapa fitur utama dari jQuery Mobile : - Dibangun di atas core jQuery, sehingga sintaksnya lebih familiar dan konsisten serta belajarnya lebih mudah bagi mereka yang sudah mengenal kode dan pola jQuery
  • 10. - Kompatibel dengan semua piranti mobile, tablet, e-reader, dan desktop terkini seperti iOS, Android, Blackberry, Palm WebOS. Nokiaa/Symbian, Windows Phone 7, MeeGo, Opera Mobile/ Mini, FireFox Mozilla, Kindle, Nook, dan semua browser lainnya. Tentu dengan kompabilitas yang berbeda-beda. - Ukurannya ringan dan dependensi dengan image sangat rendah, sehingga lebih cepat.
  • 11. - Memiliki arsitektur modular untuk custom build. Ini memiliki fitur yang bisa disesuaikan untuk aplikasi khusus. - Konfigurasi HTML 5 yang markup driven untuk pengembangan yang cepat dan scripting yang minimal.
  • 12. - Selalu ditingkatkan, yang memungkinkan fungsionalitas untuk membangun aplikasi di mobile, tablet, dan desktop. - Desain dan tool-nya responsive, yang memungkinkan kode dasar yang sama dipakai untuk smartphone dan juga layar desktop. - Sistem navigasi yang powerfull berbasis AJAX, yang memungkinkan transisi halaman dianimasikan dengan tetap memantanance tombol back, bookmark, dan bisa menggunakan URL yang clean via pushState. - Ada fitur lain seperti WAI-ARIA, yang memungkinkan halaman yang dibuat bisa bekerja dengan screen reader (misalnya VoiceOver di iOS) dan teknologi lainnya.
  • 13. - Dukungan terhadap touch dan mouse event, sehingga memudahkan proses pemrogaman ketika meng-handel touch, mouse, dan fokus kursor dengan menggunakan API yang sederhana.
  • 14. - Widget antarmuka yang seragam, memudahkan kontrol native dengan optimasi pada touch. Bisa diatur temanya sehingga mudah dipakai. - Punya them framework serta aplikasi ThemeRoller, sehingga memudahkan dalam pembuatan theme.
  • 15. contoh sederhana pemograman dengan menggunakan jquery Kode 12. hello world jquery. <script type="text/javascript" src="jquery.js"></script> <html> <head> <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript">
  • 19. Apa yang bisa dilakukan dengan JQuery? 1. 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.
  • 20. 2. 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. 3. 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.