LAPORAN PRAKTIKUM

Kelas
Pemrogaman Berbasis Web A
MODUL 6:
JQUERY

Tanda tangan
Tanggal
Nama Praktikan NIM
Kumpul Praktikan Asisten
Mohammad Rifqi 2012110028
Khoirudin

Tanggal Tanda tangan

Nama Penilai Nilai
Koreksi Asisten Dosen

Amil Mukhtar, S.Kom

Mochammad Sofi
Udin, S.Kom

PROGRAM STUDI TEKNIK INFORMATIKA

FAKULTAS TEKNIK

UNIVERSITAS QOMARUDDIN GRESIK

2022
A. Dasar teori

jQuery adalah library JavaScript yang cukup andal, ringkas, dan

mempunyai fitur yang cukup lengkap. Library ini membuat pemrosesan di
HTML seperti perubahan dan manipulasi dokumen, event handling, animasi,
dan Ajax dapat menjadi lebih sederhana. Hal ini didukung dengan API yang
mudah digunakan dan dapat bekerja di berbagai macam browser.

Menggunakan kombinasi versatility (keserbagunaan)
dan extensibillty (bisa dikembangkan), jQuery sudah mengubah cara ribuan
bahkan jutaan developer menggunakan bahasa pemrograman JavaScript. Ini
membuktikan bahwa jQuery merupakan salah satu library yang cukup populer
di JavaScript.

Fungsi jQuery

Fungsi jQuery adalah sebagai library JavaScript yang akan membantu

Anda mengatur interaksi antara JavaScript dengan HTML yang berjalan di sisi
klien.

Fitur Unggulan jQuery

jQuery adalah library yang mempunyai beberapa fitur unggulan,

 Manipulasi HTML/DOM
 Manipulasi CSS
 HTML Event Methods
 Efek dan Animasi
 AJAX
 CSS3 Compliant
 Cross-Browser

Selain itu keunggulan utama dari penggunaan jQuery adalah

kesederhanaannya. Anda hanya membutuhkan sedikit pengetahuan mengenai
pemrograman  untuk membuat berbagai macam animasi yang menarik.
 Library ini juga sangat fleksibel karena pengguna dapat menambahkan plugin.
Jadi ketika Anda tidak tahu bagaimana mengatur sebuah baris kode
menggunakan CSS, Anda dapat melakukannya menggunakan jQuery.

Library ini juga menjadi solusi cepat untuk menyelesaikan

permasalahan Anda dalam hal kecepatan. Selain itu, library ini merupakan
solusi yang pantas untuk dicoba. Melalui jQuery dan didukung kerja sama
sebuah tim yang solid membuat proses pengembangan menjadi lebih cepat dan
efektif, yang mana proses ini dapat menghemat biaya di dalam proses
pengambangan.

Kelebihan dan Kekurangan jQuery

Berikut beberapa kelebihan dan kekurangan jQuery sebagai library:

Kelebihan jQuery

Di dalam dunia open source, jQuery cukup mendapatkan dukungan karena

mempunyai banyak kelebihan, seperti:

1. Dapat berinteraksi baik dengan berbagai macam tipe bahasa pemrograman

lain;
2. Mendukung berbagai macam plugin; dan
3. Membuat sebuah animasi dasar dengan sangat mudah.
Kekurangan jQuery

Meskipun mempunyai banyak keunggulan, jQuery juga mempunyai

beberapa kekurangan.

1. Perangkat lunak open source terkadang mempunyai beberapa masalah;

2. Saat ini sudah banyak versi jQuery yang tersedia, ini berarti beberapa versi
sudah tidak kompatibel dengan daripada yang lainnya;
3. jQuery menyediakan fitur lightweight interface yang mungkin saja akan
menimbulkan sebuah permasalahan di kemudian hari.
 Terkait permasalahan perangkat lunak open source, hal ini dikarenakan
tidak ada standar yang mengatur. Jadi ketika Anda mempunyai sebuah
permasalahan, tidak mempunyai uang, dan tidak mempunyai kemampuan
untuk menyelesaikan permasalahan tersebut, Anda mungkin tidak akan pernah
menemukan solusi dari permasalahan yang Anda hadapi.

B. Soal
1. Melanjutkan modul 5
2. Menambahkan mode malam dan mode siang di halaman web
C. Source Code
Sourcecode untuk membuat mode malam dan mode siang
<style>
        body{
            margin: 20px;
            padding: 20px;
            background-color: #fcfcfc;
            color: #333333;
            transition: .5s; }
        input[type="checkbox"]{
            position: relative;
            width: 40px;
            height: 20px;
            appearance: none;
            background-color: #434343;
            outline: none;
            border-radius: 10px;
            transition: .5s ease;
            cursor: pointer;}
        input[type="checkbox"]:checked{
            background-color: #3664ff;}
        input[type="checkbox"]::before{
           content: '';
           position: absolute;
           width: 16px;
           height: 16px;
           background-color: #fcfcfc;
           border-radius: 50%;
           top: 2px;
           left: 2px;
           transition: .5 ease;}
        input[type="checkbox"]:checked::before{
            transform: translateX(20px);}
        body.dark{
            background-color: #333333;
            color: #fcfcfc;
        }
    </style>

 <input type="checkbox" onclick="ubahMode()">

        <script>
        function ubahMode(){
            const ubah =document.body;
            ubah.classList.toggle("dark");
        }
D. Hasil Uji Coba
Tampilan web untuk membuat dark web dan light mode
E. Kesimpulan
Pada percobaan kali ini membuat web yang melanjutkan modul
4& 5 perbedaan ya disisni membuat tampilan web menjadi dark mode dan
light mode dengnam mengaplikasikan Javascript
 Daftar Pustaka
[Terlengkap] Apa itu jQuery: Pengertian, Fungsi, dan Contoh (niagahoster.co.id) diakses pada
tanggal 5 juli 2022 pada jam 14.38 WIB)