Pada kesempatan kali ini kita akan belajar tentang JQuery.
Namun, apakah itu JQuery???
A. Pengenalan JQuery
Jquery adalah library dari JavaScript yang cepat, kecil, dan kaya serta bisa disisipkan pada script kode HTML.
Library dari Javascript ya??? Berarti ini adalah bagian dari JavaScript.
Iya benar sekali, JavaScript adalah bahasa pemograman dalam sebuah website yang digunakan agar website jadi lebih interaktif dan dinamis.
Maksudnya, website yang kita buat jadi bisa berinteraksi dengan si pemakai.
Misalnya, saat kita registrasi form. Maka saat kita tidak mengisi form lalu kita klik tombol submit. Maka akan keluar pemberitahuan bahwa ada bagian yang harus diisi.
Bukan hanya itu aja, tapi membuat slide gambar yang sering berganti, menghilangkan objek HTML, dan lain-lain.
Begitulah JavaScript, tapi untuk melakukan hal-hal tersebut diperlukan script-script kode yang agak panjang.
Nah dengan JQuery, script-script kode Javascript tadi jadi lebih dipersingkat.
Maka dari itu, tidak perlu script kode yang panjang alias agak dipermudah.
Selain dari itu, JQuery ini juga Gratis kok.
B. Syntaxs Dasar
Sebelum mengenal script kodenya, kita perlu tahu dulu.
Bahwa dalam JQuery itu ada yang namanya istilah EVENT dan EFFECT.
Nah keduanya itu apa sih???
Oke, yang pertama EVENT dulu.
EVENT adalah kegiatan yang sering kita lakukan dalam sebuah website, seperti klik, mengarahkan mouse, dan lain-lain bahkan kita lagi tidak melakukan apa-apapun itu adalah sebuah event juga.
Sedangkan EFFECT adalah dampak dari EVENT tadi, misalkan saat kita klik sebuah tombol atau elemen HTML lainnya maka akan ada timbal baliknya.
Nah, kira-kira seperti itulah penjelasannya.
Untuk format penulisan kodenya, adalah sebagai berikut.
$(document).ready(function()
{
//kode selanjutnya adalah disini...
});
Keterangan:
$ = JQuery Object, disinilah fungsi-fungsi JQuery berada.
(document) = (nama_dokumen), untuk mencari keseluruhan elemen HTML (secara default namanya “document” dan seterusnya dengan elemen HTML tertentu).
.ready = ini adalah event, ready artinya mulai. Berarti saat sebuah halaman website dibuka di browser, maka perintah JQuery akan dilaksanakan.
(function(){}) = berfungsi untuk menjalankan EFFECT atau perintah selanjutnya, perintah tersebut ditulis tepat di antara tanda “{” dan “}”.
C. Contoh Sederhana
Sebelum kita menggunakan script kode JQuery seperti yang sudah dijelaskan di atas.
Kita harus download dulu file JQuerynya, untuk linknya bisa kita download disini (https://jquery.com), ini adalah situs resminya.
Jika sudah di download filenya, biasanya filenya bernama jquery-3.4.1.min.js.
Untuk postingan ini, kita menggunakan jQuery versi 3.4.1, untuk ke depannya biasanya akan selalu update versinya.
Dan tentunya formatnya adalah “.js”, yang berarti ini adalah file JavaScript.
- Cara pemasangan
Bisa dengan Download, seperti yang sudah dijelaskan.
<script src="jquery-3.4.1.min.js"></script>
Bisa dengan cara Online, tanpa download.
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
Untuk cara yang kedua ini, kelemahannya adalah saat kita lagi tidak ada koneksi internet (minimal jaringan wifi).
Maka fungsi JQuery tidak akan jalan.
Tapi kelebihannya, tidak akan menambah memori pada project pembuatan web karena file JQuerynya Online.
2. Peletakan Script Kode JQuery
Peletakan kode JQuery ini, bisa ditempatkan pada tag <head></head>. Lebih bagus lagi meletakkan kodenya sebelum tag </body>. Karena prosedur kerjanya membaca kode dari atas ke bawah. Maka dari itu, biarkan sistem mengenali script HTMLnya dulu baru dieksekusi di JQuerynya.
- Satu dalam file HTML
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script>
$(document).ready(function()
{
//kode selanjutnya adalah disini...
});
</script>
Selalu pastikan pemanggilan file JQUerynya terlebih dahulu, baru eksekusi di <script></script>.
- Dalam file JavaScript tersendiri
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script> <script src="nama_filenya.js"></script>
Berarti setelah kita buat file dengan format HTML, baru kita buatkan file baru dengan format “.js”, yaitu JavaScript.
Contohnya, disini kita buat nama filenya dengan nama “jikuweri.js” dan di bawah ini adalah dari script kode HTML nya:
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script> <script src="jikuweri.js"></script>
Dan ini, adalah script kode pada file “jikuweri.js”:
$(document).ready(function()
{
//kode selanjutnya adalah disini...
});
Disini tidak ada script HTML sama sekali.
3. Contoh Lanjutan
- Menulis Tag HTML melalui JQuery
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JQuery</title>
</head>
<body>
<h1>JQuery Dasar</h1>
<h3 id="pesan"></h3>
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script>
$(document).ready(function ()
{
$("#pesan").text("Ini ditulis dengan JQuery");
});
</script>
</body>
</html>
Maka akan tampil seperti ini pada browser.
Nah, pada script tersebut tampak tag HTML <h3></h3> itu kosong, lalu ada atribut id=”pesan”.
Id tersebut digunakan untuk pengenal aja, supaya bisa diterima pada script kode JQuery.
Lalu, pada script kode JQuerynya ada $(“#pesan”), berfungsi untuk menerima pengenal dari atribut id=”pesan” yang ada di script kode HTML. Kemudian, ada methodnya .text (“Ini ditulis dengan JQuery”); yang berfungsi untuk memberikan pesan teks yang akan ditampilkan pada dokumen HTML.
- Membuat Variabel pada JQuery
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JQuery</title>
</head>
<body>
<h1>JQuery Dasar</h1>
<h3 id="nilaihasil"></h3>
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script>
$(document).ready(function ()
{
var nilai1, nilai2, hasil;
nilai1 = 20;
nilai2 = 30;
hasil = nilai1 + nilai2;
$("#nilaihasil").text("Hasil dari penjulmlahan adalah "+hasil);
});
</script>
</body>
</html>
Maka akan tampil seperti ini pada browser.
Pada script JQuery di atas, ada “var nilai1, nilai2, hasil;” yang berfungsi untuk menambahkan nama-nama vaiabel yang siap menampung nilai.
Nilai tersebut, kita tambahkan nilainya seperti “nilai1 = 20;” dan “nilai2 = 30;”.
Selanjutnya ada variabelnya yang merupakan hasil dari penjumlahan angka yang sudah dihitung dari variabel sebelumnya, contohnya “hasil = nilai1 + nilai2;”.
Lalu kita tampilkan lagi pada $(“#nilaihasil”).text(“Hasil dari penjulmlahan adalah “+hasil);.
Artinya, kita akan menampilkan hasil penjumlahan tersebut dalam bentuk teks dokumen HTML.
Di dalam method .text(“”), ada tambahan “+hasil” yang berarti bahwa kita menggabungkan pesan teksnya dengan variabel.
Dan penggabungan itulah yang akhirnya tampil pada dokumen HTML.
Demikianlah postingan artikel kali ini. Untuk penggunaan JQuerynya, kita bebas aja sih.
Mau pakai yang online maupun yang offline, mau menulis scriptnya dalam dokumen HTML atau membuat file dengan JavaScript tersendiri.
Itu bebas aja, sih. Tergantung gimana sama kebutuhan kita nantinya.
Akhir kata, semoga artikel ini bermanfaat ya…