Hi Sob,
Langsung aj, kebetulan ada yang tanya apa sih bedanya javascript dan jquery?
Untuk penjelasan lengkap dan detail sobat bisa langsung cek di situs berikut
Javascript :
https://id.wikipedia.org/wiki/JavaScript
Jquery :
https://id.wikipedia.org/wiki/JQuery
Intinya javascript adalah bahasa pemrograman yang berjalan disisi client dan memungkinkan untuk mengidentifikasi elemen/DOM (Document Object Model) pada suatu halaman web. Salah satu penggunaannya untuk validasi form.
Sedangkan jquery adalah suatu library yang dibangun dengan javascript bertujuan untuk lebih menyederhanakan perintah-perintah javascript.
Contoh sederhana :
<html>
<form onSubmit="tampilkan()" method="POST" action="#" class="tampilkan">
Masukan kata : <input type="text" name="kata" id="kata">
<input type="submit" name="simpan" value="Tampilkan">
</form>
</html>
<script src="jquery-3-3-1.js"></script>
<script>
//Menggunakan javascript
/*
function tampilkan(){
var kata = document.getElementById("kata").value;
if (kata==""){
alert ("Pesan javascript : Silahkan masukkan kata");
}else{
alert ("Pesan javascript : kata yang di inputkan adalah "+kata);
}
}
*/
//Menggunakan jquery
$(document).ready(function() {
$('.tampilkan').submit(function() {
var kata = $("#kata").val();
if (kata==""){
alert ("Pesan jquery : Silahkan masukkan kata");
}else{
alert ("Pesan jquery : kata yang di inputkan adalah "+kata);
}
})
});
</script>
Penjelasan :
Javascript
Saat klik tombol tampilkan form akan membaca fungsi onSubmit dan menjalankan function tampilkan() di javascript.
var kata = document.getElementById("kata").value;
artinya javascript akan mengidentifikasi elemen dengan id “kata” pada halaman web dan memasukkannya ke variabel kata pada javascript. Dan elemen yang ditemukan adalah sbb :
<input type="text" name="kata" id="kata">
berikutnya akan menjalankan logika berikut
if (kata==""){
alert ("Pesan javascript : Silahkan masukkan kata");
}else{
alert ("Pesan javascript : kata yang di inputkan adalah "+kata);
Jquery
Sesuai dengan penjelasan diatas jquery merupakan suatu library sehingga sobat harus menyertakan librari tersebut pada code yang dibuat agar jquery dapat berjalan.
library jquery bisa di download di link berikut : https://jquery.com/download/
Jangan kaget jika munculnya seperti ini :
copy paste aja di text editor (contoh notepad++ dll) kemudian save dengan nama sesuai versi nya. Contoh : jquery-3-3-1.js.
Untuk memudahkan, pada pembahasan berikut simpan file library jquery 1 folder dengan file html.
Berikut adalah script untuk meload library jquery:
<script src="jquery-3-3-1.js"></script>
Setiap perintah jquery harus ditulis didalam function document ready berikut
$(document).ready(function() {
//Tuliskan code jquery disini
})
});
Sehingga untuk contoh diatas sebagai berikut :
<script src="jquery-3-3-1.js"></script>
<script>
//Menggunakan jquery
$(document).ready(function() {
$('.tampilkan').submit(function() {
var kata = $("#kata").val();
if (kata==""){
alert ("Pesan jquery : Silahkan masukkan kata");
}else{
alert ("Pesan jquery : kata yang di inputkan adalah "+kata);
}
})
});
</script>
Berikut salah satu perbedaan penulisan script untuk pengidentifikasian elemen tersebut
<script>
var kata = document.getElementById("kata").value; //---- Menggunakan javascript
var kata = $("#kata").val(); //--- Menggunakan jquery
</script>
Silahkan klik link berikut untuk download contoh diatas :
–catet
Catet saja 