Belajar JQuery Ternyata Tidak Susah, Gampang Banget

Berbicara tentang pemrograman web atau membuat sebuah website pasti ada banyak cara atau metode yang digunakan oleh setiap orang, begitupun bahasa pemrograman yang digunakan, ada yang hanya menggunakan HTML saja karena tidak ada data yang diolah, namun ada juga yang menggunakan bahasa server side seperti PHP atau ASP karena ada data yang diolah. Biasanya dulu smembuat website dengan PHP untuk pengolahan datanya atau logic dari program dan HTML untuk tampilannya dan tentunya css untuk mempercantik tampilan. Namun setelah melihat contoh-contoh website di internet kadang kita melihat ada website yang memiliki animasi yang menarik, kemudian yang biasanya kita sumbit form harus melalui proses reload dulu, dan lain-lain. tentunya hal tersebut membuat saya penasaran untuk mempelajarinya, dan ketemulah salah satunya yaitu pake "JQuery".

Awalnya dulu ketika saya melihat contoh coding yang menggunakan script jquery kok terlihat ribet ya,,, dan memusingkan pokoknya. Namun ternyata belakangan ini karena pas saya dapet project yang harus menggunakan JQuery jadi mau ga mau saya harus belajar dong.. Nah setelah saya mulai serius belajar JQuery dan berusaha memahami bagaimana sih alur dari JQuery tersebut atau bisa dibilang polanya lah.. oh ya JQuery ini merupakan library yang dibuat dengan bahasa pemrograman JavaScript. Untuk penjelasan tentang JQuery lainnya anda dapat serching di google, sangat banyak atau ke situ resminya di jQuery.com.

OK,, intinya sih untuk menghubungkan script JQuery dengan HTML itu tuh biasanya bermain di ID atau Class yang di berikan pada tag HTML seperti <input>,<p><a> dan lain-lain. Bagi yang fokus pada backend programmer jquery ini pasti berguna banget lah, apalagi kalau sudah bermain dengan FORM.

Mungkin berikut salah satu contoh yang ingin saya berikan tentang pemahaman JQuery, karena jika kalian sudah tau fondasinya, maka sangat mudah untuk dikembangkan apalagi saat ini kita sudah sangat gampang mencari referensi di internet.

ok, pertama download terlebih dahulu JQuery di situs resminya disini

Setelah itu tempatkan Jquery sebelum tag </body> pada HTML anda. Dan juga buat tag script sebelum tag </body> untuk menempatkan kode java scriptnya.

<html>
<head>

</head>
<body>

<script src="js/jquery-3.2.1.min.js"></script>
<script type="text/javascript">

</script>

</body>
</html>

Nah kemudian setelah semua sudah siap kita akan coba menggunakan fungsi yang ada di jquery yaitu, fadein, fadeout,html,val,dan click

berikut adalah contoh kode html yang akan kita gunakan :

<button id="fadeout">Fade Out</button>
  <button id="fadein">Fade In</button>
  

  <div id="text">
TEXT Awal</div>
<input type="text" name="i_text" id="i_text" value="test text">
  <button id="set_text">Set Text</button>

Kemudian taruh kode script JQuery di bawah ini pada tag <script type="text/javascript"> </script> yang sudah dibuat sebelumnya :

$(document).ready(function(){
    //fungsi onclick untuk button dengan id=fadein
    $('#fadein').click(function(){
     $('#text').fadeIn(500) //500 merupakan waktu yang animasi
    });
    
    //fungsi onclick untuk button dengan id=fadeout
    $('#fadeout').click(function(){
     $('#text').fadeOut(500)
    });

    $('#set_text').click(function(){
     var text_baru=$('#i_text').val(); 
     $('#text').html(text_baru);
    });
   });

nah jika kita perhatikan dari kode html di atas mungkin biasa aja ya ga ada yang ribet. Hanya saja inget tambahkan class atau id yang digunakan untuk menghubungkan dengan jQuery. (pada contoh di atas saya mengguakan "id").

Kemudian beralih ke script JQuerynya, dari kode jquery kalian akan sering menemui script seperti $('#dtp_fromtime'). Script tersebut merupakan script yang menghubungkan JQuery dengan html.

$('') => Standar Jquery,
# => id atau jika menggunakan class gunakan '.' (titik)
dtp_fromtime => Nama id atau class

kemudian untuk val,click,fadeIn,dan fadeOut merupakan event yang ada pada JQuery. Kalian dapat belajar tentang event JQuery di situs resminya di sini atau di situs-situs tempat belajar web seperti di w3schools.com.

Bagaimana? gampang bukan? intinya kita harus tau dasarnya dulu, setelah kita tau dasarnya maka untuk mengembangkannya terdapat banyak referensi di internet yang tersedia secara gratis,,

Ok, sekian dulu temen2.. kalau ada yang kurang dipahami bisa tinggalkan komentar dibawah ya,,,