Dokumen ini membahas tentang sistem operasi Android dan jQuery sebagai library JavaScript yang mempermudah pemrograman web. Penulis juga menjelaskan pentingnya teknologi informasi, khususnya website, dalam kehidupan sehari-hari dan mencakup karakteristik, selektor, serta fitur jQuery Mobile. Tujuan makalah ini adalah untuk memenuhi tugas akademis dan memperluas pengetahuan tentang jQuery.

1. KATA PENGANTAR
Puji syukur kehadirat Tuhan Yang Maha Esa yang telah melimpahkan rahmat,
hidayah, serta inayahnya kepada penulis sehingga penulis dapat menyelesaikan
tugas mata kuliah pengantar teknologi informatika dengan judul sistemoperasi
yang ada pada Android ini dengan tepat pada waktunya.
Rasa terima kasih senantiasa penulis haturkan kepada dosen pengampu mata
kuliah pengantar teknologi informatika yang telah memberikan kesempatan
serta bimbingannya kepada penulis, sehingga penulis dapat menyelesaikan tugas ini
dengan baik.
Penulis menyadari bahwa didalam makalah ini masih banyak kekurangan-
kekurangan yang harus di benahi dan diperbaiki. Oleh karena itu kritik maupun
saran yang membangun dari pembaca senantiasa penulis terima demi
penyempurnaan pembuatan makalah selanjutnya.
Blora 16, Juli 2014
Penulis
Agus Supriyono

2. 1.1 Latar Belakang Masalah
Teknologi adalah informasi yang merupakan salah satu bidang yang
perkembangannya semakin cepat dibandingkan dengan bidang-bidang yang lain. Selain itu,
di zaman sekarang ini teknologi informasi memberikan pengaruh besar
diberbagai aspek kehidupan masyarakat. Komputer merupakan suatu teknologi yang
dapat melakukan pengolahan data dengan cepat, akurat dan efisien. Sehingga di
zaman sekarang komputer merupakan teknologi yang banyak digunakan oleh
masyarakat dalam pengambilan keputusan. Banyak lembaga atau instansi yang
menggunakan teknologi komputer dalam menyelesaikan permasalahan yang
dihadapi. Lalu juga manfaat teknologi informasi menjadi sangat luas dan tidak ada
batasnya. Hal ini dibuktikan melalui salah satu media informasi yang dinamakan
website.
Nilai-nilai yang terkandung dalam informasi menjadi sangat penting bagi
semua kalangan ataupun lembaga, sehingga dibutuhkan sarana dan prasarana
pendukung untuk menunjang kelancaran kegiatan tersebut. Website sebagai media
informasi yang sekarang ini terus dikembangkan untuk memenuhi kebutuhan
informasi di segala bidang kehidupan. Hampir semua instansi ataupun lembaga
telah memanfaatkan website sebagai media informasi.
Tidak seperti media-media lain sepert iklan, TV, spanduk dan media infomasi
lain, website memiliki kelebihan dalam penyediaan berbagai informasi, semua itu
dapat dilihat dari segi kecepatan dan kemudan dalam memperoleh informasi.

3. I.2 Rumusan masalah
Rumusan masalah yang dibahas pada karya tulis ini adalah:
1. Apa itu yang dimaksud jQuery?
2. Komponen apa saja yang berhubungan dengan jQuery?
3. Apa saja kelebihan dan kekurangan pada jQuery?
1.3 Tujuan Makalah
1. Guna memenuhi tugas dari dosen untuk mata kuliah Pengantar Teknologi Informatika
2. Menambah wawasan dan ilmu tentang apa itu jQuery

4. BAB II
II.1 Pengenalan jQuery
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. jQuery dirancang sedemikian rupa supaya membuat
program menggunakan Javascript menjadi relatif sangat mudah. Sesuai slogan nya,
write less, do more. Menulis kode lebih sedikit, tetapi melakukan pekerjaan lebih
banyak. jQuery juga mempunyai ukuran nya cukup kecil, sehingga tidak terlalu
mempengaruhi atau memperlambat proses loading halaman web yang kita buat.
jQuery juga kompatibel dengan CSS3 dan yang tak kalah penting adalah jQuery bisa
berjalan di semua browser – cross browser. jQuery 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. Oleh karena nya kita
bisa menggunakan jQuery dengan bebas untuk keperluan pengembangan website
kita. Tanpa library seperti jQuery, menerapkan Javascript mungkin akan lebih sulit,
terutama untuk pemula yang baru belajar Javascript. Plugin tambahan seperti
JQuery UI (user interface) semakin memudahkan kita mengembangkan website
yang cantik dan interaktif. Selain itu tersedia plugin-plugin lain yang makin
memperkaya kemampuan jQuery.
Library jQuery mempunyai kemampuan :

5. • 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(){

6. 7
$("p").show(1000);
});
});
</script>
</head>
<body>
<p>Hello World!</p>
<button class="tombol1">Sembunyikan</button>
<button class="tombol2">Tampilkan</button>
</body>
</html>
Kemudian jika kita ingin memulai mempelajari jQuery, kita 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.
Oke, sekarang mari kita lihat 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">

7. $(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>
</

8. II.2 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 yang dipilih.
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 :
Kode di atas berarti apabila terjadi event mengklik elemen yang mempunyai
class=’tombol1’, maka lakukan fungsi hide() terhadap semua element <p>.
Berikut daftar event-event yang dapat terjadi dari elemen HTML.
Event function
$(document).ready(function)
$(selector).blur(function)
$(selector).change(function)
$(selector).click(function)
$(selector).dblclick(function)
$(selector).error(function)
$(selector).focus(function)
$(selector).keydown(function)
$(selector).keypress(function)
$(selector).keyup(function)
$(selector).load(function)
$(selector).mousedown(function)

9. $(selector).mouseenter(function)
$(".tombol1").click(function(){
$("p").hide(1000);
});
$(selector).mouseleave(function)
$(selector).mousemove(function)
$(selector).mouseout(function)
$(selector).mouseover(function)
$(selector).mouseup(function)
$(selector).resize(function)
$(selector).scroll(function)
$(selector).select(function)
$(selector).submit(function)
$(selector).unload(function)

10. II.3 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.
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".
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 tabel daftar jQuery Selector.
Selector Contoh Yang dipilih
* $("*") Semua elemen

11. #id $("#lastname") Elemen yang mempunyai id=lastname
.class $(".intro") Semua elemen yang mempunyai
class="intro"
element $("p") Semua elemen <p>
.class.class $(".intro.demo") Semua elemen yang mempunyai
class=intro dan class=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 list dengan
index lebih besar dari 3
:lt(no) $("ul li:lt(3)") Elemen-elemen dari suatu list dengan
index kecil dari 3
:not(selector) $("input:not(:empty)") Semua input elemen yang tidak kosong
:header $(":header") Semua elemen header <h1><h2>...
:animated Semua elemen animasi

12. :contains(text) $(":contains('W3Schools')") Semua
elemen yang mengandung teks
‘W3Schools’
:empty $(":empty") Semua elemen yang tidak mempunyai
child (elements) nodes
:hidden $("p:hidden") Semua elemen <p> yang tersembunyi
:visible $("table:visible") Semua tabel yang visible
s1,s2,s3 $("th,td,.intro") Semua elemen yang cocok dengan th, td,
.intro
[attribute] $("[href]") Semua elemen yang mempunyai atribut
href
[attribute=value] $("[href='#']") Semua elemen yang
mempunyai atribut href bernilai="#"
[attribute!=value] $("[href!='#']") Semua elemen yang mempunyai atribut
href bernilai <>"#"
[attribute$=value] $("[href$='.jpg']") Semua elemen yang mempunyai atribut
href yang nilainya mengandung ".jpg"
:input $(":input") Semua elemen <input>
:text $(":text") Semua elemen <input> dengan type="text"
:password $(":password") Semua elemen <input> dengan
type="password"
:radio $(":radio") Semua elemen <input> dengan
type="radio"
:checkbox $(":checkbox") Semua elemen <input> dengan

13. type="checkbox"
:submit $(":submit") Semua elemen <input> dengan
type="submit"
:reset $(":reset") Semua elemen <input> dengan
type="reset"
:button $(":button") Semua elemen <input> dengan
type="button"
:image $(":image") Semua elemen <input> dengan
type="image"

14. :file $(":file") Semua elemen <input> dengan type="file"
:enabled $(":enabled") Semua elemen <input> yang enabled
:disabled $(":disabled") Semua elemen <input> yang disabled
:selected $(":selected") Semua elemen <input> yang terseleksi
:checked $(":checked") Semua elemen <input> yang ter-check

15. II.4 jQuery Mobile
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.

16. II.4.1 Sifat dan Fitur jQuery Mobile
jQuery dikembangkan menggunakan sifat-sifat tertentu. Beberapa di antara sifat
jQuery Mobile adalah :
- 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

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

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