Apa itu JQuery ??? (Belajar JQuery bagi Pemula)

Sudah banyak postingan dari berbagai macam Blog yang menjelaskan mengenai apa itu JQuery, bahkan sangat lengkap sekali. Mulai dari siapa yang mengembangkan, pada tahun berapa, sampai pada tanggal release-nya. Jadi kalau bicara masalah sejarahnya maka bisa anda jumpai banyak Blog di dunia ini. Di sini saya ingin membuat perbedaan, maksudnya saya akan menggunakan penjelasan yang mudah-mudahan bisa diterima oleh para pemula atau yang lagi baru belajar mengenai JQuery (bagi yang mahir mending jangan baca he ... ).

JQuery merupakan salah satu  library dari JS yang berfungsi untuk membuat sebuh tampilan halaman HTML menjadi cantik dan dinamis dengan kode yang mudah dan sederhana tetapi tidak "lemot" karena tidak melakukan load sebuah halaman.

Tahapan pertama adalah pelajari dulu yang namanya tag HTML dan JavaScript (mahir lebih bagus) karena cikal-bakalnya ya dari sini.
Gimana udah dipelajari belum .................... ???

Kalau sudah berikutnya usahakan untuk mengetahui konsep DOM (Document Object Model). Saya akan mencoba menjelaskan konsep DOM secara dasar agar mudah diterima (mudah-mudahan tidak menjadi salah arti). Konsep DOM adalah sebuah konsep dimana setiap komponen yang terdapat dalam halaman HTML mempunyai ciri khusus seperti atribut ID yang akan dikenali oleh semua interface browser sebagai sebuah object dengan sifat Hierarki.

Contoh penggunaan DOM :

<html>     <head><title>Contoh Penggunaan DOM</title></head> <body>     <div id="lblJudul">Hallo Friend</div>     <script type="text/javascript">         alert(document.getElementById("lblJudul").innerHTML);     </script> </body> 
</html>

Berikut ini merupakan hasil tampilan dengan Firefox :









Oke gimana sekarang udah paham mengenai konsep DOM kan ???
Kalau sudah maka sekarang sebagai Latihan pertama akan saya beri contoh perbandingan code dengan JavaScript dan JQuery seperti di bawah ini :

<html>     <head> 
<title>JQuery Lesson 1</title>
<script type="text/javascript" src="jquery-1.4.2.js"></script>
<script type="text/javascript">
function pakejava() {
  var judul="Dirubah pake JavaScript";
document.getElementById("lbljudul").innerHTML=judul;
var nama="JavaScript";
document.getElementById("txtnama").value=nama;
}
function pakejquery() {
  var judul="Dirubah pake JQuery";
$("#lbljudul").text(judul);
var nama="JQuery";
$("input#txtnama").val(nama);
}
</script>
   </head> <body>   <div id="lbljudul">Isikan secara lengkap</div> 
  <input type="text" id="txtnama">
<p>
<input type="button" value="Pake JavaScript" onClick="pakejava();">
<input type="button" value="Pake JQuery" onClick="pakejquery();"> 
</p>
</body> 
</html>

Berikut ini merupakan hasil tampilan dengan Firefox :

Jika sudah jadi sekarang silahkan dicoba, lakukan klik pada ke-dua tombol tersebut dan amati apa yang terjadi.
Gimana sekarang, apakah anda sudah memahami apa itu JQuery ???

OK untuk selanjutnya silahkan kembangkan sendiri latihan sesuai dengan keinginan anda.

Terima kasih,

2 komentar:

Yogi Wicaksono mengatakan...

gan mampir kesini yu, yang mau tau dan belajar lebih lanjut tentang masalah pemograman ==> http://cyberbusinessinstitute.com/

Bundet mengatakan...

Berbagi hasil tugas dan latihan --> BELAJAR JQUERY MENAMPILKAN - MENYEMBUNYIKAN TEXT