Mengenal Jquery
JQuery merupakan salah satu kumpulan dari library yang dimiliki oleh javascript. Library sendiri merupakan kumpulan function dari program yang siap untuk digunakan oleh programmer. Jadi Jquery merupakan function-function yang dibuat dengan script javascript yang di kemas dalam satu file. Kegunaan dari jQuery itu sendiri sebagai library yang mempermudah programmer untuk membuat script javasccript. Sebab dengan menggunakan library jQuery, script Js akan diperpendek.
jQuery dikembangkan pertama kali oleh John Resig kisaran tahun 2006 silam. Jquery sendiri dikembangkan dengan bersifat opensource. Seiring dengan perkembangannya jQuery berkembang menjadi library JavaScript paling populer di dunia. Banyak para pengembang website menggunakan library dari jQuery.
karena Jquery merupakan sebuah library dari javascript tentu file jquery sudah disediakan. Anda dapat mengunjungi situs resminya di jquery.com.
Script tersebut merupakan script yang dimiliki oleh javascipt.
Sekarang bandingkan dengan script berikut:
var x= $("#simpan");
Nah bagaimana? jauh lebih simple dengan Jquery bukan. Hasil yang sama namun memiliki script yang berbeda. Jika kedua script tersebut di eksekusi dalam program maka hasil yang ditampilkan adalah sama. Namun pada script JQuery terlihat lebih ringkas dalam pembuatan scriptnya. Tentu ini hanya sekedar salah satu contoh saja.
Kelebihan JQuery
Ada beberapa kelebihan JQuery, antara lain:
- Mudah digunakan
- Mudah dipahamin
- Ringan Penulisan kode program yang lebih ringkas
- Bisa dikembangkan untuk membuat plugin website
- Gratis
Persiapan Belajar JQuery
Nah jika anda tertarik untuk belajar JQuery, jangan terburu-buru dulu sebab kita perlu persiapan. Software yang perlu dipersiapkan antara lain
- textEditor, Disini kita menggunakan vsCode.
- Browser, Bisa gunakan Crome atau yang lainnya
- Download File Jquery pada situs yang telah disediakan diatas(Jika anda ingin membuat JQuery secara Ofline).
- Walupun kita belajar Jquery, namun kita harus juga mengenal dasar-dasar dari Css, html dan javasrcipt. Ketiga materi tersebut akan berkaintan erat dengan Jquery.
Dari mana mulai?
Seperti yang sudah dijelaskan tadi, bahwa jQuery merupakan library dari javascirpt yang sudah disediakan, maka kita perlu mengakses library tersebut. Akses jQuery ditanamkan di dalam halaman html.
Sebelum memulai membuat projek jQuery, terlebih dahulu ada beberapa persiapan yang harus kita siapkan.
1. Buat Sebuah folder di Drive anda (Terserah anda mau buat di C/D/E atau yang lain). Sebagai contoh disini kita buat folder dengan nama "BelajarJQuery".
2. Buka textEditor dan buatlah file dengan format html. simpan file tersebut di dalam folder BelajarjQuery. Contoh disini kita akan membuat file baru dengan nama latihan1.html (pastikan format berupa format html). Tambahkan script berikut kedalam file html tadi:
3. Memasang/Akses script jQuery.
Ada 2 jenis cara memanggil library jQuery.:
1. Akses secara Ofline
Agar dapat memanggil library JQuery maka kita perlu Akses file secara ofline, Silahkan download terlebih dahulu file jQuery di situs resminya jQuery. Silahkan download file jQuery di sini. Pilih yang "uncompressed". Saat artikel ini dibuat jQuery sudah merilis yang versi 3.6.3. Berikut linknya Download the uncompressed, development jQuery 3.6.3
Saat anda membuka link tersebut, akan tampil script jQuery. Copy script tersebut. Buka file baru di textEditor dan pastekan script jquery. Simpan file tersebut didalam folder BelajarjQuery dengan nama jquery.3.6.3.js(Pastikan format adalah js).
Berikut bentuk hirarki folder kita:
📁BelajarJQuery
📄jquery.3.6.3.js
📄latihan1.html
Untuk dapat mengakses file jquery, silahkan buka kembali file latihan1.html. Tambahkan script untuk memanggil file jquery yang kita download tadi. Letakkan sicrpt tersebut diantara <head>....</head>. Perhatikan code berikut:
<html>
<head>
<title>Latihan JQuery Pertama</title>
<script type="text/javascript" src="jquery.3.6.3.js"></script>
</head>
<body></body>
perintah <script type="text/javascript" src="jquery.3.6.3.js"></script> merupakan perintah untuk mengakses file jquery.
NB: Pastikan file jquery berada satu folder dengan file html.
2. Cara kedua adalah mengakses jQuery secara online
Selain cara diatas, jika anda selalu terkoneksi ke internet maka anda bisa mengakses Jquery secara online. Tinggal anda ganti code
<script type="text/javascript" src="jquery.js"></script>
menjadi:
Menyisipkan sintak jQuery di html
Setelah semua prosedur diatas selesai, selanjutnya kita akan coba menggabungkan antar jquery dengan html. Sebelumnya tentu kita perlu tahu bagaimana cara membuat sintak jquery didaslam html.
sintak jquery diapit oleh scirpt <script> sebagai tag pembuka dan script </script> sebagai tag penutup. Penulisan script tersebut bisa berada diantara head, body atau diluar html. Sampai saat ini belum ada aturan peletakan scirpt. Berikut bentuk penulisannya:
<head>
<title>Latihan JQuery</title>
<link rel="stylesheet" href="jquery.3.6.3.js" />
</head>
<body>
//disini elemen html
</body>
<script>
// disini elemen jquery
</script>
Sedangkan bentuk penulisan code jquery seperti berikut:
$(document).ready(function(){
....
});
Perintah diatas merupakan perintah yang menyatakan function jquery akan dijalankan jika semua dokumen didalam html sudah siap. Sedangkan tanda $ merupakan perintah untuk mendefenisikan jquery. Berikut contoh penulisan jquery:
<title>Belajar jQuery Barintek</title>
<script src="jquery.3.6.3.js"></script>
</head>
<body>
<h1>selamat Belajar</h1>
<p id="paragraf"></p>
</body>
<script>
$(document).ready(function () {
$("#paragraf").text("Sedang Belajar jQuery di Barintek");
});
Tedapat tambahan element di dalam html yaitu elemen <p> yang memiliki id sebagai "paragraf". Nilai dari id ini akan ditentukan oleh function di jquery, yaitunya fucntion text(). Jadi semua nilai yang ada didalam function text akan ditampilkan pada element p.
Penjelasan tentang script dan penulisan jquery akan lebih dijelaskan di artikel selanjutnya. ikuti terus tutorial kami
