Tutorial Belajar jQuery Part 1: Pengertian jQuery

Sebagai tutorial pertama dari seri belajar jQuery di Duniailkom, kita akan berkenalan dengan jQuery. Saya akan membahas pengertian jQuery dan kenapa harus menggunakan jQuery dalam pembuatan website.

---

Pengertian jQuery

jQuery adalah sebuah library JavaScript. Dalam dunia pemrograman, library adalah kumpulan dari berbagai fungsi ‘siap pakai’ untuk memudahkan pembuatan sebuah aplikasi. Dengan demikian, jQuery adalah kumpulan fungsi-fungsi JavaScript yang memudahkan penulisan kode JavaScript.

jQuery dikembangkan pertama kali oleh John Resig di tahun 2006. Sejak saat itu, jQuery berkembang menjadi proyek opensource dan menjadi libary JavaScript paling populer di dunia. Situs resmi jQuery beralamat di jquery.com.

---

Mengapa harus menggunakan jQuery?

Untuk dapat menjawab pertanyaan ini sebaiknya anda sudah pernah membuat 1 atau 2 kode program JavaScript. JavaScript sangat powerfull untuk memanipulasi element HTML, tapi penggunaannya juga tidak mudah dan ‘sedikit ribet’.

Sebagai contoh, untuk mencari sebuah element HTML, dengan JavaScript kita menggunakan fungsi getElementById():

var x = document.getElementById("tombol");

Dengan jQuery, penulisannya jauh lebih singkat:

var x = $("#tombol");

Selain itu (sebagaimana CSS) terdapat beberapa perbedaan implementasi JavaScript dari 1 web browser dengan web browser lain. Kode JavaScript yang berjalan mulus di Mozilla Firefox, belum tentu bisa berjalan di Internet Explorer, begitu juga sebaliknya. Hal ini diperparah dengan perbedaan versi dari masing-masing web browser.

Untuk mengatasi hal ini, jQuery memiliki fungsi bawaan yang mendeteksi web browser dan menyediakan fungsi pengganti. Dengan demikian, kita tidak perlu pusing memikirkan perbedaan implementasi JavaScript dari setiap web browser.

Fungsi JavaScript lanjutan seperti AJAX (Asynchronous JavaScript and XML), juga disederhanakan oleh jQuery. Untuk menggunakan AJAX, kita hanya butuh beberapa baris perintah .

Fitur lain dari jQuery (dan mungkin menjadi alasan paling penting), jQuery menyediakan berbagai efek animasi menarik. Beberapa diantaranya sangat mudah digunakan dan hanya membutuhkan 1 atau 2 baris kode program. Khusus untuk membuat efek animasi ini, jQuery juga memiliki jQuery UI yang fokus ke animasi dan interaksi user.

jQuery juga memiliki berbagai plugin atau kode tambahan untuk fungsi-fungsi lanjutan, seperti membuat efek slideshow, image carousel, hingga jQuery mobile. Efek-efek seperti ini dibuat berdasarkan kode dasar jQuery.

Dengan berbagai fitur dalam jQuery, tidak heran jika jQuery sangat populer. Tidak jarang pula programmer pemula lebih mengenal jQuery daripada JavaScript.

Walaupun memiliki banyak fitur menarik, jQuery tetaplah sebuah fungsi tambahan dari JavaScript. Untuk dapat menggunakan jQuery dengan baik, anda sebaiknya sudah memahami cara penggunaan JavaScript.

---

Dalam tutorial ini kita telah membahas pengertian jQuery dan alasan menggunakannya. Selanjutnya, saya akan langsung memandu anda untuk mulai menggunakan jQuery: Cara Menginput file jQuery ke dalam HTML.

Sumber wk.com

Tutorial Belajar jQuery Part 2: Cara Menginput File jQuery ke HTML

Dalam tutorial kedua dari seri belajar jQuery di duniailkom, saya akan membahas cara menginput file jQuery ke dalam HTML.

---

Cara Menginput File jQuery ke HTML

Pada dasarnya, jQuery hanyalah sebuah file javascript external. Agar bisa menggunakan jQuery, kita harus download file jQuery, kemudian menghubungkannya menggunakan tag

Kode HTML diatas harus ditempatkan di dalam 1 folder dengan file jquery-2.1.4.js. Apabila anda sudah mempelajari HTML dan CSS, tentu tidak asing dengan maksud penempatan file ini.

---

Cara Menginput File jQuery menggunakan CDN

Cara lain untuk bisa menggunakan jQuery adalah mengakses file jQuery yang ditempatkan di CDN (Content Delivery Network). Secara sederhana, CDN adalah sejenis harddisk global yang bisa diakses oleh siapa saja. Terdapat banyak pilihan CDN, kali ini saya akan menggunakan Google CDN, dengan demikian kode HTMLnya menjadi seperti berikut:

Dengan menggunakan CDN, kita tidak perlu repot-repot mendownload file jQuery. Tapi agar bisa berjalan, harus selalu online (terhubung ke internet).

---

Dalam tutorial kali ini kita telah mendownload file jQuery dan menghubungkannya dengan HTML. Tapi kode diatas belum melakukan apapun. Selanjutnya, saya akan mengajak anda untuk mulai menulis kode jQuery: Cara Menjalankan Kode jQuery.

Sumber wk.com

Tutorial Belajar jQuery Part 3: Cara Menjalankan Kode jQuery (event ready)

Dalam tutorial sebelumnya, kita telah membahas cara menginput file jQuery ke HTML, baik dengan mendownload file jQuery (untuk dijalankan secara offline) atau dari CDN.

Kali ini saya akan lanjut dengan membahas cara menjalankan kode jQuery. Kode jQuery umumnya diletakkan didalam event ready().

---

Cara Menjalankan Kode jQuery

Seperti yang sudah kita bahas, jQuery sebenarnya adalah JavaScript. Dengan demikian, kode yang ditulis pun adalah kode JavaScript. jQuery hanya ‘memudahkan’ penulisan JavaScript dengan berbagai fungsi-fungsi bawaan.

Untuk menginput kode JavaScript dengan ‘rasa’ jQuery, cara paling umum adalah menempatkannya setelah tag

Dengan ‘template’ diatas, sebenarnya kita sudah bisa langsung menjalankan fungsi-fungsi jQuery. Namun terdapat 1 fungsi yang selalu disertakan dalam setiap kode jQuery, yakni event ready().

---

Pengertian Event ready() atau The Document Ready Event

Untuk memahami fungsi ready() jQuery atau secara formal disebut sebagai The Document Ready Event, kita harus paham bagaimana JavaScript bekerja.

Secara sederhana, JavaScript digunakan untuk memanipulasi objek HTML seperti paragraf, tombol, form, gambar, dll. Jika kita menempatkan kode JavaScript di awal (pada bagian ), besar kemungkinan objek HTML ini belum tersedia. Ini terjadi karena bagian baru diproses setelah bagian .

Salah satu solusi untuk hal ini adalah dengan meletakkan kode javaScript di bagian penutup halaman, yakni sebelum tag penutup . Namun jQuery memiliki solusi yang lebih elegant, yakni event ready().

Jika anda kurang paham tentang penjelasan ini, bisa membaca tutorial JavaScript Duniailkom: Posisi Terbaik Meletakkan kode JavaScipt di dalam HTML.

Event ready() jQuery men-simulasi efek dari event Onload JavaScript, tapi lebih efisien. Dengan menggunakan fungsi ready() jQuery, kode program JavaScript baru akan dijalankan setelah web browser selesai memproses tag HTML, tapi sebelum file external seperti gambar. Dengan demikian, kode JavaScript diproses dengan lebih awal daripada event Onload bawaan JavaScript.

Penulisan fungsi ready() jQuery adalah sebagai berikut:

Kode JavaScript yang berada didalam fungsi $(document).ready(function()) akan dijalankan setelah seluruh tag HTML diproses oleh web browser. Dengan demikian, kita bisa menghindari error yang terjadi kerena objek yang ingin dimanipulasi belum tersedia.

Jika anda melihat tutorial-tutorial tentang jQuery, hampir dipastikan seluruh kode akan berada di dalam event ready() ini.

Sebagai contoh, saya akan membuat sebuah kode program sederhana, dimana ketika tombol HTML di klik, akan tampil sebuah kalimat. Berikut kode programnya:

  
Belajar jQuery di Duniailkom
  

Penjelasan maksud kode diatas, akan saya bahas dalam tutorial selanjutnya. Disini kita hanya fokus agar anda bisa menjalankan kode jQuery.

Agar bisa berjalan, simpanlah kode program diatas di folder yang sama dengan file jquery-2.1.4.js. Sebagai contoh, saya akan menyimpannya ke dalam file semangat.html di folder belajar_jquery, seperti berikut ini:

Berikut hasil akhir kode diatas (silahkan klik tombol Click Me!):

See the Pen Cara Menjalankan Kode jQuery by duniailkom (@duniailkom) on CodePen.10206

Selamat! anda sudah menjalankan sebuah kode jQuery. Dalam tutorial jQuery duniailkom selanjutnya, saya akan membahas Aturan Dasar Penulisan jQuery.

Sumber wk.com

Tutorial Belajar jQuery Part 4: Aturan Dasar Penulisan Kode jQuery

Setelah mempelajari event ready() jQuery, kali ini kita akan melihat sekilas aturan dasar penggunaan kode jQuery serta pengertian jQuery Object dan jQuery Event.

---

Pengertian jQuery Object ($)

Sepanjang penggunaan jQuery, hampir selalu didahului tanda $. Tanda dollar ‘$’ (dollar sign) adalah sebuah shortcut untuk mengakses jQuery Object. Di dalam jQuery Object inilah seluruh fungsi-fungsi jQuery berada. Sebagai contoh, untuk mencari element HTML yang memiliki atribut id=”tombol”, kita bisa menulis:

$("#tombol")

Jika karena sesuatu hal kita tidak bisa menggunakan tanda $ (biasanya karena bentrok dengan library lain), bisa menggunakan jQuery(), seperti berikut:

jQuery("#tombol")

---

Pengertian jQuery Action / jQuery Event

Untuk bisa melakukan ‘sesuatu’ terhadap element HTML, kita tinggal menyambung penulisan jQuery Object dengan jQuery Action, atau dikenal juga dengan jQuery Event.

Format dasarnya adalah sebagai berikut:

$(selector).action()

Selector digunakan untuk mencari element mana dari HTML yang akan dimanipulasi. Bisa berupa sebuah paragraf

, sebuah gambar , atau sesuatu yang lebih kompleks, seperti element pertama dari tabel kedua. Kita akan membahas jenis-jenis selector jQuery dalam tutorial selanjutnya.

Action adalah sesuatu yang bisa kita lakukan dengan element HTML tersebut, apakah menyembunyikannya, menampilkannya, mengubah warna, menambahkan element baru, dll. Action mirip seperti Event dalam JavaScript, tetapi dengan penambahan berbagai fitur lain. Di dalam jQuery, sebuah action bisa disambung dengan action lain, atau dikenal dengan isitilah chaining.

Berikut contoh penulisan jQuery Object, selector dan action:

  
  
  
  


  
Belajar jQuery di Duniailkom
  
  
  
  

Silahkan anda coba sendiri dari link codepen dibawah ini:

See the Pen Aturan Dasar Penulisan Kode jQuery by duniailkom (@duniailkom) on CodePen.10206

Tampilan diatas masih sangat sederhana, dimana ketika tombol ditekan, akan terjadi “sesuatu” terhadap tag

. Menggunakan jQuery, kita bisa membuat berbagai efek menarik lainnya.

Untuk sementara, anda dapat abaikan apa maksud kode-kode diatas. Disini saya hanya memperlihatkan bagaimana sebuah kode jQuery ditulis, terutama bagian seperti  $(“h1”).hide(), atau $(“h1”).css(“font-size”,”20px”). Ini semua adalah cara penulsain gabungan dari jQuery Object, jQuery Selector, dan jQuery Action.

Dalam tutorial selanjutnya, saya akan membahas lebih dalam tentang jQuery Selector, yakni Cara Mencari Element HTML dengan jQuery Selector.

Sumber wk.com

Tutorial Belajar jQuery Part 5: Cara Mencari Elemen HTML dengan jQuery Selector

Setelah mengenal pengertian jQuery Object dalam tutorial sebelumnya, kali ini saya akan membahas tentang cara mencari element HTML dengan jQuery Selector.

---

Pengertian Fungsi/Method getElementById() JavaScript

Sebagaimana fungsi utama JavaScript, kita memerlukan JavaScript untuk memanipulasi element HTML. Langkah pertama adalah mencari element mana yang akan diubah, apakah itu tag

, tag

dengan atribut id=”penting”, tag

dengan atribut class=”warning”, atau sebuah tombol

Maka untuk mengakses element ini kita bisa menggunakan:

var x = document.getElementById("tombol");

Dengan menggunakan jQuery Selector, kode programnya jauh lebih singkat dan lebih powerfull.

---

Pengertian jQuery Selector

jQuery memudahkan proses pencarian element HTML dengan menyediakan jQuery Selector. jQuery Selector adalah sebuah cara yang disediakan jQuery untuk mencari element HTML. Tidak hanya dengan atribut id saja, kita juga bisa menggunakan class, atribut lain, dan kombinasi diantaranya.

Jika anda sudah pernah menggunakan CSS, jQuery meminjam cara penulisan CSS Selector sebagai jQuery Selector.

Dengan jQuery, untuk mencari sebuah element HTML yang memiliki id=”tombol”, penulisannya jauh lebih singkat:

var x = $("#tombol");

Karena sama seperti selector CSS, jQuery selector mendukung hampir semua penulisan selector dari CSS, berikut contohnya:

• Mencari seluruh element dengan tag tertentu. Misalkan kita ingin mencari seluruh tag

  , penulisan jQuery Selectornya adalah: $(“p”).



• Mencari element dengan id tertentu. Misalkan ingin mencari sebuah tag HTML yang memiliki id=”belajar”, maka kita bisa menulis: $(“# belajar”).


• Mencari element dengan class tertentu. Misalkan kita ingin mencari seluruh tag HTML yang menggunakan atribut class=”warna”, maka bisa ditulis dengan: $(“.warna”).

Sama seperti CSS, kita juga bisa mengkombinasikan selector untuk mencari element yang lebih spesifik, misalnya untuk mencari tag

yang memiliki class=”warna” dan berada di dalam tag

, selectornya adalah: $(“div p.warna”).

Berikut contoh penggunaan dari jQuery Selector:

   Sebuah paragraf tanpa atribut apapun


   Sebuah paragraf dengan id = "belajar"


   Sebuah paragraf dengan class = "warna"


   Sebuah paragraf dengan id="test" class="saja"


   

     Sebuah paragraf tanpa atribut apapun
   

Pada contoh kode program diatas, terdapat 6 penulisan jQuery Selector. Dapatkah anda menemukannya? Ke enam selector tersebut adalah:

• $( “#tombol” )


• $(“p”)


• $(“#belajar”)


• $(“.warna”)


• $(“#test.saja”)


• $(“div p.warna”)

Selector pertama, $(“#tombol”) saya gunakan untuk membuat event click. Maksudnya, ketika sebuah tag HTML yang memiliki id=”tombol” di klik, jalankan perintah yang dibuat. Di dalam kode diatas, tag HTML tersebut adalah sebuah tag

Tutorial Belajar jQuery Part 6: Pengertian jQuery Event dan Cara Penggunaannya

jQuery Selector dan jQuery Event merupakan inti dari jQuery. Dengan menggabungkan keduanya, kita bisa membuat berbagai interaksi menarik. Dalam tutorial belajar jQuery kali ini saya akan membahas lebih jauh Pengertian dan Cara Penggunaan jQuery Event.

---

Pengertian jQuery Event

Di dalam JavaScript, Event adalah suatu hal yang bisa dilakukan user ke sebuah element HTML, misalnya di click, double click, mouseover (cursor mouse berada diatas element), mouseout (cursor mouse sudah keluar dari atas element), dll.

Misalkan saya ingin membuat pesan alert() ketika sebuah paragraf di klik, dengan JavaScript ini bisa dilakukan dengan kode program berikut:

   Silahkan klik saya

See the Pen Contoh Event dengan JavaScript by duniailkom (@duniailkom) on CodePen.10206

Atribut onclick dalam tag

diatas adalah sebuah Event. Ketika di klik, akan tampil pesan popup: ‘Saya sudah di klik!’. Hasil ini didapat dengan fungsi alert() JavaScript.

Selain onclick, di dalam JavaScript juga banyak event-event lain, seperti ondblclick, onmouseover, onmouseout, dll.

Penulisan seperti ini sangat praktis namun tidak “rapi”. Karena kita mencampurkan kode HTML dengan JavaScript. Bagaimana cara memisahkannya?

Di dalam JavaScript, ini bisa dilakukan menggunakan fungsi addEventListener(). Hasil yang sama bisa dihasilkan dengan kode program berikut:

   Silahkan klik saya

Sekarang, di dalam bagian tidak ada kode JavaScript apapun. Event click saya tambahkan dengan fungsi addEventListener(). Mengenai fungsi window.onload() sendiri telah saya bahas di Tutorial JavaScript: Posisi Terbaik Meletakkan kode JavaScipt di dalam HTML.

---

Cara Penggunaan jQuery Event

Sebagai alternatif, jQuery menyediakan jQuery Event dengan penulisan yang lebih praktis, berikut contohnya:

   Silahkan klik saya

Perhatikan bagaimana jQuery memudahkan penulisan event ini, sangat sederhana. Format penulisannya adalah:

$("jQuery_Selector").jQuery_Event(function() { ...isi event disini...   })

Selain event click, juga tersedia berbagai event lain, seperti dblclick, mouseenter, mouseover, mouseleave, dll.

Berikut contoh “aksi” dari berbagai event javascipt yang dibuat dengan jQuery:

   Belajar jQuery Event Duniailkom

Dalam contoh diatas, saya membuat 4 jQuery event, yakni click, dblclick, mouseover, dan mouseleave. Pada setiap event ini saya mengubah property CSS dari paragraf. Silahkan anda coba sendiri dengan men-klik, double klik, dan mouseover ke atas kotak pink:

See the Pen Contoh Penggunaan jQuery Event by duniailkom (@duniailkom) on CodePen.10206

Sepanjang tutorial jQuery di Duniailkom ini, kita akan membahas banyak hal terkait jQuery Event, termasuk Event animasi seperti show(), hide(), dll.

Dalam tutorial berikutnya akan membahas tentang cara mengambil nilai HTML dengan jQuery.

Sumber wk.com

Tutorial Belajar jQuery Part 7: Cara Mengambil Nilai HTML dengan jQuery

Dalam lanjutan tutorial belajar jQuery di duniailkom ini saya akan membahas cara mengambil nilai elemen HTML menggunakan jQuery.

Mengambil nilai dari sebuah element HTML cukup sering dilakukan. Misalkan saya membuat kotak isian form . Bagaimana cara mengambil nilai yang sudah diisi menggunakan JavaScript?

Dengan JavaScript ‘murni’ kita bisa menggunakan property innerHTML. Namun caranya cukup panjang karena harus digabung dengan fungsi document.getElementById(). Saya sudah pernah membuat tutorialnya di Tutorial Cara Mengambil Nilai HTML dengan JavaScript.

Dengan jQuery, caranya lebih simple dan lebih singkat.

---

Cara Mengambil nilai HTML dengan Method text() jQuery

Metode pertama untuk mengambil nilai sebuah elemen HTML dengan jQuery adalah menggunakan method text(). Caranya cukup menambahkan method/fungsi text() ke jQuery Selector.

Berikut contoh penggunaannya:

   Sedang belajar jQuery di Duniailkom...

See the Pen Cara Mengambil nilai HTML dengan Method text() jQuery by duniailkom (@duniailkom) on CodePen.10206

Untuk mengambil nilai teks yang ada didalam tag

, saya bisa menggunakan perintah $(“#paragraf”).text(). Selanjutnya nilai ini disimpan ke dalam variabel nilai, lalu ditampilkan dengan fungsi alert(nilai).

Jika anda men-klik tombol “Ambil Nilai” , hasilnya adalah: “Sedang belajar jQuery di Duniailkom…”. Perhatikan bahwa method text() akan menghapus semua tag HTML yang terdapat di dalam tag

, seperti tag dan yang juga berada di dalam paragraf tersebut.

Bagaimana jika kita juga ingin mengambil nilai yang ada di dalam tag

lengkap beserta tag HTML-nya? Gunakan method html() jQuery

---

Cara Mengambil nilai HTML dengan method html() jQuery

Cara berikutnya untuk mengamnil nilai HTML dengan jQuery adalah menggunakan method html(). Penggunaannya sama persis dengan method text(). Bedanya, hasil dari method html() akan tetap mempertahankan tag HTML yang ada di dalam element HTML tersebut.

Menggunakan contoh yang sama, berikut hasil yang di dapat dengan method html():

   Sedang belajar jQuery di Duniailkom...

See the Pen Cara Mengambil nilai HTML dengan Method html() jQuery by duniailkom (@duniailkom) on CodePen.10206

Seperti yang terlihat, kali ini hasil nya adalah: “Sedang belajar jQuery di Duniailkom…”.

---

Cara Mengambil nilai form HTML dengan method val() jQuery

Baik method text() maupun html() sudah mencukupi untuk mengambil nilai yang ada disetiap element HTML. Tapi khusus untuk form, jQuery menyediakan method val(). Langsung saja kita lihat contoh penggunaannya:

Nama: 

See the Pen Cara Mengambil nilai form HTML dengan method val() jQuery by duniailkom (@duniailkom) on CodePen.10206

Kali ini saya memiliki sebuah tag . Silahkan langsung anda klik tombol “Ambil Nilai”, atau ubah teks yang ada di dalam inputan form tersebut. Perintah $(“#nama”).val() akan menampilkan nilai apapun yang anda input ke dalam isian form tersebut.

Bagaimana dengan objek form lain seperti ?

Caranya sama persis, berikut contohnya:

Pilih Kota:

   Jakarta
   Bandung
   Bogor

Silahkan anda pilih salah satu nama kota, lalu klik tombol “Ambil Nilai”. Nilai yang ditampilkan berasal dari atribut value dari setiap tag .

Bagaimana dengan checkbox?

Untuk checkbox perlu penyeleksian lebih lanjut, karena jika menggunakan method val() secara langsung, nilai form akan dikembalikan apapun kondisi checkbox (baik sudah dipilih maupun belum). Untuk mengatasi hal ini, kita bisa menggunakan selector khusus jQuery, yakni :checked.

Berikut contoh penggunannya:

Saya itu: 
   Keren
   Ganteng
   Cool



  

Disini saya memiliki 3 check box: Keren, Ganteng dan Cool. Ketika tombol Ambil Nilai di klik, akan dijalankan perintah berikut:

var nilai1 = $("#keren:checked").val();
var nilai2 = $("#ganteng:checked").val();
var nilai3 = $("#cool:checked").val();
alert(nilai1+' '+nilai2+' '+nilai3);

Artinya, variabel nilai1, nilai2 dan nilai3 akan berisi value dari checkbox hanya ketika kondisi checkbox tersebut dalam keadaan ter-checklist (perhatikan cara penulisan jQuery selector, #keren:checked).

Silahkan anda coba dari link codepen berikut:

See the Pen Cara Menambil Nilai Checkbox dengan jQuery by duniailkom (@duniailkom) on CodePen.10206

Akan tetapi, sekarang muncul masalah baru. Ketika checkbox tidak terpilih, method val() akan mengembalikan nilai undefined. Ini terjadi karena selector :checked tidak menemukan element HTML yang kita tulis (karena belum di check).

Bagaimana cara mengatasinya? cukup dengan menambahkan beberapa kondisi IF, dimana jika isi variabel nilai adalah undefined, lakukan sesuatu, misalnya mengosongkan variabel.

Berikut revisinya:

 


Saya itu: 
   Keren
   Ganteng
   Cool



  

See the Pen Cara Menambil Nilai Checkbox dengan jQuery by duniailkom (@duniailkom) on CodePen.10206

Kali ini ketika tombol Ambil Nilai di klik, yang akan tampil hanyalah nilai checkbox yang sudah dipilih. Dalam kasus seperti ini anda juga bisa menyaksikan bahwa jQuery saja tidaklah cukup. Kita tetap membutuhkan JavaScript dasar untuk menangani masalah yang muncul.

---

Dalam tutorial jQuery kali ini kita telah mempelajari cara menggunakan jQuery untuk mengambil nilai element HTML, termasuk mengambil nilai form. Berikutnya, saya akan membahas cara mengubah atau memasukkan nilai baru kedalam HTML melalui jQuery.

Sumber wk.com