Laporan Sementara Pertemuan 9
Praktikum Pemrograman Web Lanjut
DiSusun Oleh
Nama : Gilang Rahma Aji P
Nim : 223110001
Prodi : RPLA
TAHUN 2024/2025
MODUL 9
A. Teori
jQuery adalah pustaka JavaScript yang dirancang untuk mempermudah
pengembangan web dengan menyediakan metode yang memungkinkan
pengembang melakukan manipulasi HTML/DOM, menangani event, membuat
animasi, dan melakukan AJAX secara efisien. Dengan jQuery, banyak tugas
yang biasanya membutuhkan kode JavaScript yang panjang dapat
disederhanakan menjadi satu baris kode. Selain itu, jQuery mudah digunakan
dan bisa diintegrasikan dengan cepat ke dalam halaman web, baik melalui CDN
atau file lokal, sehingga menjadi pilihan populer dalam membangun situs yang
interaktif dan responsif.
B. Praktik
1. Selector
Semua pemilih di jQuery mulai dengan tanda dolar dan tanda kurung: $ (). JQuery
elemen pemilih memilih elemen berdasarkan nama elemen. Anda dapat memilih semua
<p>elemen pada halaman seperti ini: $("p")
2. jQuery Efek – Sliding slideDown
Buatlah program seperti berikut, uji hasilnya
3. jQuery Efek – Sliding slideUp
Ubah program di atas dengan mengganti slideUp() menjadi slideDown(), seperti pada skrip
berikut:
4. jQuery Efek – Sliding slideToggle
Ubah program diatas dengan mengganti slideDown() menjadi slideToggle(), seperti pada
skrip berikut:
C. Latihan
1. Buatlah program yang mahsilkan efek mengilangkan gambar pelan-pelan seperti pada
gambar berikut:
D. Tugas
1. Perbedaan antara $("#btn1") dan $("btn1"):
$("#btn1") adalah cara untuk memilih elemen dengan ID btn1 menggunakan
tanda pagar (#). Jadi, ini akan mencari elemen HTML dengan atribut id="btn1".
Misalnya, <button id="btn1">Click Me</button>.
$("btn1") akan mencari elemen yang bernama btn1 dalam bentuk tag HTML,
yang berarti jQuery akan mencari elemen dengan tag <btn1> (yang sebenarnya
tidak umum digunakan). Ini tidak akan berfungsi seperti yang diinginkan karena
btn1 bukanlah tag HTML standar.
2. Penjelasan mengenai $( "p" ).hide( "slow" ); dan $( "[Link]" ).show( "fast" );:
$( "p" ).hide( "slow" ); berarti saya memilih semua elemen <p> dalam halaman
dan kemudian menyembunyikannya dengan efek fadeOut secara pelan (slow).
Efek ini membuat elemen <p> hilang secara perlahan.
$( "[Link]" ).show( "fast" ); berarti saya memilih elemen <div> yang
memiliki kelas hidden dan kemudian menampilkannya kembali dengan efek
fadeIn secara cepat (fast). Efek ini membuat elemen <div> yang tersembunyi
muncul kembali dengan cepat.
E. Kesimpulan
jQuery adalah pustaka JavaScript yang sangat berguna untuk menyederhanakan
proses pengembangan web. Dengan kemampuannya untuk mempersingkat kode dan
menyediakan berbagai fitur seperti manipulasi DOM, efek visual, dan AJAX, jQuery
memudahkan pengembang dalam menciptakan situs web yang interaktif dan responsif.
Kemudahan penggunaan dan kompatibilitasnya dengan berbagai browser membuat jQuery
tetap menjadi pilihan utama meskipun teknologi web terus berkembang.