MODUL -.
JAVASCRIPT & JQUERY LANJUTAN
Tujuan Praktikum
1. Memahami konsep lanjutan pada JavaScript dan jQuery dalam konteks pengembangan
antarmuka web.
2. Mengimplementasikan manipulasi DOM, event handling, dan perubahan gaya tampilan (CSS)
menggunakan JavaScript.
3. Menggunakan jQuery untuk manipulasi konten, animasi, event, dan validasi form.
4. Membangun mini-project berbasis JavaScript dan jQuery yang interaktif dan dinamis.
1. Javascript
1.1 Pengenalan Javascript Lanjutan
JavaScript merupakan bahasa utama untuk membuat halaman web dinamis. Pada modul sebelumnya (Modul
6), mahasiswa telah mempelajari sintaks dasar, tipe data, fungsi, dan objek.
Pada modul lanjutan ini, fokus akan diarahkan pada kemampuan berinteraksi langsung dengan elemen HTML
melalui konsep Document Object Model (DOM). Dengan DOM, JavaScript dapat:
a. Membaca dan mengubah isi elemen HTML.
b. Mengubah gaya tampilan (CSS).
c. Merespons aksi pengguna seperti klik, ketik, atau hover
1.2 DOM Manipulation (Manipulasi Elemen HTML)
DOM (Document Object Model) merepresentasikan struktur dokumen HTML sebagai pohon (tree) yang bisa
dimanipulasi oleh JavaScript. Setiap elemen HTML seperti <p>, <div>, atau <h1> dianggap sebagai node, yang
dapat diakses dan diubah melalui JavaScript.
Fungsi umum yang sering digunakan:
a. getElementById("id") → mengambil elemen berdasarkan ID.
b. getElementsByClassName("class") → mengambil elemen berdasarkan class.
c. getElementsByTagName("tag") → mengambil elemen berdasarkan nama tag.
Contoh penggunaan getElementById("id"):
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<title>getElementById</title>
</head>
<body>
<h2 id="judul">Halo, Dunia!</h2>
<button onclick="ubahTeks()">Ubah Judul</button>
<script>
function ubahTeks() {
// Mengambil elemen dengan id "judul"
var elemen = [Link]("judul");
[Link] = "Selamat datang di JavaScript!";
}
</script>
</body>
</html>
Penjelasan:
- [Link]("judul") hanya akan memilih satu elemen yang memiliki ID “judul”.
- Metode ini adalah cara paling umum untuk memanipulasi elemen tertentu di halaman.
Hasil:
Sebelum diklik:
Halo, Dunia!
Setelah: diklik:
Selamat datang di JavaScript!
>>>
Contoh penggunaan getElementsByClassName("class"):
Mengambil beberapa elemen yang memiliki class sama, lalu mengubah tampilannya.
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<title>getElementsByClassName</title>
<style>
.kotak {
width: 100px;
height: 100px;
background-color: lightcoral;
margin: 5px;
display: inline-block;
}
</style>
</head>
<body>
<div class="kotak"></div>
<div class="kotak"></div>
<div class="kotak"></div><br>
<button onclick="ubahWarna()">Ubah Warna Semua Kotak</button>
<script>
function ubahWarna() {
var kotak = [Link]("kotak");
// Perulangan untuk setiap elemen dengan class "kotak"
for (var i = 0; i < [Link]; i++) {
kotak[i].[Link] = "skyblue";
}
}
</script>
</body>
</html>
Penjelasan:
getElementsByClassName("kotak") menghasilkan HTMLCollection berisi semua elemen dengan class tersebut.
Harus menggunakan perulangan (for) untuk memodifikasi tiap elemen.
Hasil:
Semua kotak berubah warna dari merah muda ke biru saat tombol diklik.
>>>
Contoh penggunaan getElementsByTagName("tag"):
Mengambil semua elemen dengan tag tertentu, misalnya <p>.
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<title>getElementsByTagName</title>
</head>
<body>
<p>Paragraf 1</p>
<p>Paragraf 2</p>
<p>Paragraf 3</p>
<button onclick="ubahTeks()">Ubah Semua Paragraf</button>
<script>
function ubahTeks() {
var paragraf = [Link]("p");
for (var i = 0; i < [Link]; i++) {
paragraf[i].[Link] = "green";
paragraf[i].innerText = "Ini paragraf ke-" + (i + 1);
}
}
</script>
</body>
</html>
Penjelasan:
- getElementsByTagName("p") memilih semua elemen <p> di halaman.
- Menggunakan perulangan untuk mengganti teks dan warna satu per satu.
- Metode ini ideal jika ingin memodifikasi seluruh elemen sejenis sekaligus.
Hasil:
Semua paragraf berubah teks menjadi “Ini paragraf ke-1”, “ke-2”, dan seterusnya dengan warna hijau.
>>>
Contoh penggunaan querySelector("selector"):
Mengambil elemen menggunakan selector CSS (seperti #id, .class, atau tag):
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<title>querySelector</title>
<style>
.kotak {
width: 100px;
height: 100px;
background-color: lightgray;
margin: 5px;
display: inline-block;
}
</style>
</head>
<body>
<div class="kotak"></div>
<div class="kotak"></div>
<div class="kotak"></div><br>
<button onclick="ubahSatu()">Ubah Kotak Pertama</button>
<script>
function ubahSatu() {
// Mengambil elemen pertama dengan class .kotak
var elemen = [Link](".kotak");
[Link] = "orange";
[Link] = "3px solid black";
}
</script>
</body>
</html>
Penjelasan:
[Link](".kotak") akan mengambil elemen pertama saja yang memiliki class .kotak.
Dapat juga digunakan dengan #id atau selector kombinasi seperti div p atau .container > span.
Kalau ingin memilih semua elemen yang cocok, gunakan querySelectorAll().
Hasil:
>>>
Hanya kotak pertama yang berubah warna menjadi oranye dan memiliki border hitam.
1.3 Manipulasi CSS Menggunakan JavaScript
Selain mengubah teks, JavaScript juga dapat mengubah tampilan elemen (CSS) secara langsung.
Perubahan gaya dilakukan menggunakan properti .style.
Contoh:
[Link] = "red"; mengubah warna teks menjadi merah.
<!DOCTYPE html>
<html>
<head>
<title>Manipulasi CSS</title>
<style>
#box {
width: 100px;
height: 100px;
background-color: tomato;
transition: 0.3s;
}
</style>
</head>
<body>
<div id="box"></div><br>
<button onclick="ubahWarna()">Ubah Warna</button>
<script>
function ubahWarna() {
let box = [Link]("box");
[Link] = "skyblue";
[Link] = "25px";
[Link] = "scale(1.2)";
}
</script>
</body>
</html>
Penjelasan:
- Properti style digunakan untuk mengubah tampilan elemen secara langsung.
- Fungsi ini memodifikasi beberapa atribut sekaligus: warna, bentuk, dan ukuran elemen.
1.4 Event Handling (Menangani Aksi Pengguna)
Event adalah aksi atau peristiwa yang terjadi di halaman web, misalnya:
- Klik tombol (click)
- Arahkan mouse (hover)
- Ketik di kolom input (input, keyup)
- Scroll halaman (scroll)
Event dapat ditangani dengan dua cara:
- Inline Event → Ditulis langsung di HTML (contoh: onclick="fungsi()")
- Event Listener → Ditulis di JavaScript (contoh: [Link]("click", fungsi))
Contoh 1:
<h2>Ubah Warna Teks:</h2>
<input type="color" id="warna">
<p id="teks">Teks ini akan berubah warna!</p>
<script>
[Link]("warna").addEventListener("input", function () {
[Link]("teks").[Link] = [Link];
});
</script>
Penjelasan:
Event input digunakan untuk mendeteksi perubahan pada elemen <input>. Setiap kali warna diganti, teks
berubah secara real-time.
Output:
>>>
Contoh 2: Event onclick (Klik Tombol)
Menjalankan fungsi saat tombol diklik.
<body>
<h2 id="judul">Halo, Dunia!</h2>
<button onclick="ubahTeks()">Klik Saya</button>
<script>
function ubahTeks() {
[Link]("judul").innerText = "Tombol telah diklik!";
}
</script>
</body>
Penjelasan:
- onclick="ubahTeks()" memanggil fungsi ubahTeks() saat tombol ditekan.
- Fungsi tersebut mencari elemen <h2> dengan id="judul" dan mengganti teks di dalamnya.
- Ini merupakan cara paling sederhana untuk menangani event klik.
Hasil:
>>
Contoh 3: Event onmouseover dan onmouseout
Membuat efek hover interaktif pada elemen.
<body>
<div id="box" onmouseover="ubahWarnaMasuk()" onmouseout="ubahWarnaKeluar()">
</div>
<script>
function ubahWarnaMasuk() {
[Link]("box").[Link] = "skyblue";
}
function ubahWarnaKeluar() {
[Link]("box").[Link] = "tomato";
}
</script>
</body>
Penjelasan:
- Event onmouseover dijalankan ketika kursor mouse masuk ke area elemen.
- Event onmouseout dijalankan saat kursor keluar dari area elemen.
- Fungsi pertama mengganti warna menjadi biru muda, fungsi kedua mengembalikannya ke semula.
Hasil:
Kotak akan berubah warna menjadi biru saat kursor diarahkan ke atasnya, dan kembali merah saat kursor
keluar.
>>>
Contoh 4: Event onkeyup (Input Ketikan)
Menampilkan teks yang diketik secara langsung pada halaman.
<body>
<h2>Ketik Sesuatu:</h2>
<input type="text" id="inputText" placeholder="Tulis di sini...">
<p id="output"></p>
<script>
[Link]("inputText").addEventListener("keyup", function
() {
[Link]("output").innerText =
"Kamu mengetik: " + [Link];
});
</script>
</body>
Penjelasan:
- addEventListener("keyup", function(){...}) mendengarkan setiap kali tombol keyboard dilepaskan.
- [Link] mengambil teks yang sudah diketik oleh pengguna.
- Setiap perubahan langsung tampil di paragraf output.
Hasil:
Setiap kali mahasiswa mengetik, teks yang mereka tulis muncul secara langsung di bawah input.
>>
2.1 Mini Project – Dark Mode Toggle
Proyek kecil ini memadukan DOM manipulation dan event handling.
<h2>Mode Gelap</h2>
<button onclick="toggleMode()">Ubah Mode</button>
<script>
function toggleMode() {
let body = [Link];
if ([Link] === "black") {
[Link] = "white";
[Link] = "black";
} else {
[Link] = "black";
[Link] = "white";
}
}
</script>
Penjelasan:
Fungsi toggleMode() mengubah warna latar dan teks secara bergantian, mensimulasikan Dark Mode dan
Light Mode.
2. Pengenalan jQuery Lanjutan
Setelah memahami JavaScript, kita beralih ke jQuery — library yang menyederhanakan manipulasi DOM,
event, dan animasi. Dengan jQuery, kita bisa menulis kode JavaScript yang lebih singkat dan efisien.
Sintaks dasar Jquery:
$(selector).action();
Di mana selector menentukan elemen yang akan dipilih dan action menentukan apa yang dilakukan.
Untuk menggunakan jQuery, tambahkan library:
<script src="[Link]
2.1 Manipulasi Konten dan CSS
Contoh: Mengubah teks dan gaya
<body>
<h2 id="judul">Belajar jQuery</h2>
<button id="ubah">Ubah Teks & Warna</button>
<script>
$("#ubah").click(function () {
$("#judul").text("Halo, ini jQuery!").css({
"color": "blue",
"font-size": "28px",
"font-weight": "bold"
});
});
</script>
</body>
Penjelasan:
- $("#ubah") memilih tombol berdasarkan ID.
- Saat diklik, fungsi di dalam .click() dijalankan.
- Fungsi .text() mengganti isi teks, sedangkan .css() mengubah tampilannya.
Try It Yourself!
2.2 Efek dan Animasi
Contoh: Efek Fade
<div id="kotak" style="width:100px; height:100px; background:salmon;"></div>
<br>
<button id="fadeOut">Fade Out</button>
<button id="fadeIn">Fade In</button>
<script>
$("#fadeOut").click(function () {
$("#kotak").fadeOut();
});
$("#fadeIn").click(function () {
$("#kotak").fadeIn();
});
</script>
Penjelasan:
Fungsi .fadeOut() dan .fadeIn() membuat efek animasi halus saat elemen disembunyikan atau ditampilkan.
Try it yourself!
2.3 Validasi Form dengan jQuery
Contoh: Validasi Nama
<h2>Form Pendaftaran</h2>
<input type="text" id="nama" placeholder="Masukkan Nama">
<span id="error" style="color:red; display:none;">Nama wajib diisi!</span>
<br><br>
<button id="submit">Kirim</button>
<script>
$("#submit").click(function () {
let nama = $("#nama").val();
if (nama === "") {
$("#error").show();
} else {
$("#error").hide();
alert("Data terkirim: " + nama);
}
});
</script>
Penjelasan:
Fungsi .val() mengambil nilai input. Jika kosong, pesan error ditampilkan. Jika tidak, alert muncul dan error
disembunyikan.
Try it yourself!
2.4 Event scroll (Efek Saat Pengguna Menggulung Halaman)
Event scroll digunakan untuk mendeteksi ketika pengguna menggulir halaman (scrolling).
Event ini bisa diterapkan ke seluruh halaman (window) atau ke elemen tertentu yang memiliki scrollbar.
Dengan event ini, JavaScript dapat menjalankan aksi otomatis setiap kali pengguna menggulir layar, seperti:
- Menampilkan atau menyembunyikan elemen.
- Mengubah tampilan header.
- Menjalankan animasi saat elemen muncul di viewport.
-
Contoh 1: Menampilkan Posisi Scroll
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<title>Event Scroll</title>
<style>
body {
height: 1500px;
font-family: Arial;
}
#info {
position: fixed;
top: 10px;
right: 10px;
background: rgb(197, 197, 109);
padding: 10px;
border: 1px solid #ccc;
}
</style>
</head>
<body>
<div id="info">Posisi scroll: 0 px</div>
<script>
[Link]("scroll", function () {
let posisi = [Link];
[Link]("info").innerText = "Posisi scroll: " +
posisi + " px";
});
</script>
</body>
</html>
Penjelasan
- $(window).scroll() akan dijalankan setiap kali halaman digulir.
- $(window).scrollTop() memberikan nilai posisi scroll vertikal.
- Nilainya diperbarui dan ditampilkan langsung di elemen #info.
Contoh 2 – Navbar Berubah Warna Saat Scroll
Membuat efek navbar berubah warna setelah pengguna menggulir ke bawah.
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<title>Navbar Scroll Effect jQuery</title>
<script src="[Link]
<style>
body {
height: 1200px;
margin: 0;
}
.navbar {
position: fixed;
top: 0;
left: 0;
width: 100%;
padding: 15px;
text-align: center;
background-color: transparent;
color: black;
transition: 0.3s;
font-weight: bold;
}
.scrolled {
background-color: #9d43b6;
color: white;
box-shadow: 0 3px 10px rgba(0, 0, 0, 0.3);
}
</style>
</head>
<body>
<div class="navbar" id="navbar">My Website</div>
<script>
$(window).scroll(function () {
if ($(window).scrollTop() > 50) {
$("#navbar").addClass("scrolled");
} else {
$("#navbar").removeClass("scrolled");
}
});
</script>
</body>
</html>
Penjelasan
- scrollTop() > 50 mendeteksi apakah pengguna sudah menggulir lebih dari 50px.
- Jika iya, class="scrolled" ditambahkan ke navbar, mengubah tampilannya.
- Saat kembali ke atas, class dihapus lagi.
Hasil
Navbar berubah dari transparan menjadi biru saat pengguna mulai menggulir halaman ke bawah.
Try it yourself!
Contoh 3 – Tombol “Kembali ke Atas”
Tombol hanya muncul ketika pengguna menggulir ke bawah, dan ketika diklik halaman kembali ke atas.
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<title>Scroll To Top jQuery</title>
<script src="[Link]
<style>
body {
height: 2000px;
}
#btnTop {
display: none;
position: fixed;
bottom: 30px;
right: 30px;
padding: 10px 15px;
font-size: 16px;
background-color: #333;
color: white;
border: none;
border-radius: 8px;
cursor: pointer;
}
</style>
</head>
<body>
<h1>Contoh Scroll To Top dengan jQuery</h1>
<p>Gulir ke bawah untuk melihat tombol "Ke Atas" muncul di sudut kanan
bawah.</p>
<button id="btnTop">⬆ Ke Atas</button>
<script>
$(window).scroll(function () {
if ($(this).scrollTop() > 300) {
$("#btnTop").fadeIn();
} else {
$("#btnTop").fadeOut();
}
});
$("#btnTop").click(function () {
$("html, body").animate({ scrollTop: 0 }, 600);
return false;
});
</script>
</body>
</html>
Penjelasan:
- Tombol disembunyikan (display: none) pada awalnya.
- Saat halaman digulir lebih dari 300px, tombol muncul dengan efek fadeIn().
- Klik tombol menjalankan animasi scrollTop: 0, yang menggulir halaman ke atas dengan efek halus.
Contoh 4 – Efek Animasi Muncul Saat Scroll
Menampilkan elemen yang muncul perlahan ketika pengguna menggulir halaman ke bawah.
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<title>Scroll Reveal jQuery</title>
<script src="[Link]
<style>
.kotak {
opacity: 0;
transform: translateY(60px);
transition: all 0.6s ease;
background: lightcoral;
width: 80%;
margin: 50px auto;
padding: 30px;
border-radius: 10px;
text-align: center;
font-size: 20px;
}
.muncul {
opacity: 1;
transform: translateY(0);
}
</style>
</head>
<body>
<div class="kotak">Konten 1</div>
<div class="kotak">Konten 2</div>
<div class="kotak">Konten 3</div>
<script>
$(window).scroll(function () {
$(".kotak").each(function () {
var posisi = $(this).offset().top;
var scrollY = $(window).scrollTop();
var tinggiLayar = $(window).height();
if (scrollY + tinggiLayar > posisi + 100) {
$(this).addClass("muncul");
}
});
});
</script>
</body>
</html>
Penjelasan:
- .offset().top digunakan untuk mendapatkan posisi elemen di halaman.
- Jika posisi elemen sudah berada dalam area tampilan (viewport), tambahkan class .muncul.
- Efek transisi membuat elemen muncul secara halus saat digulir.
Zoom 150%
2.5 Mini Project – Galeri Interaktif
Contoh: Galeri Klik
<body>
<img src="[Link]
[Link]/images?q=tbn:ANd9GcSdPCZgVT3hIkm43Y0fLRp8Cba_k-No-
YksXj5Pf9Lo70rWBho_TWWjj0Hv0YBW9ARKuiM&usqp=CAU"
class="foto" width="150">
<img
src="[Link]
class="foto" width="150">
<img
src="[Link]
_800x500.png?rmode=max&width=500&format=webp"
class="foto" width="150">
<script src="[Link]
<script>
$(".foto").click(function () {
$(this).fadeOut(200).fadeIn(200).css({
"border": "3px solid blue",
"border-radius": "15px" // 2 properti CSS
});
});
</script>
</body>
Penjelasan:
Setiap kali gambar diklik, efek animasi fadeOut() dan fadeIn() dijalankan, serta gaya border ditambahkan
untuk efek interaktif.
vvv