Membuat Web yang Interaktif
Kita telah berhasil membuat sebuah halaman web yang kontennya ditentukan oleh banyak data yang kita punya dengan melakukan manipulasi DOM sederhana pada materi sebelumnya.
Tugas selanjutnya adalah memberikan interaktifitas atau sederhananya membuat aplikasi kita dapat mendengarkan interaksi yang dilakukan oleh pengguna. Interaksi ini dapat berupa berbagai hal, misalnya saat pengguna mengklik sebuah elemen HTML pada aplikasi kita.
Dengan melanjutkan kode pada materi sebelumnya, kita ingin sebuah pop up berisi gambar yang lebih besar dan penuh akan ditampilkan jika pengguna mengklik salah satu elemen card tersebut. Mari kita modifikasi kode tersebut.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Image Gallery</title>
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<div class="image-gallery">
<!-- Tempat untuk menampilkan elemen card -->
</div>
<div id="myModal" class="modal">
<span class="close">×</span>
<img class="modal-content" id="modalImage" />
</div>
<script src="script.js"></script>
</body>
</html>
Tidak banyak yang kita ubah pada kode HTML, hanya menambahkan sebuah elemen div yang nanti akan menjadi sebuah modal yang ditampilkan berisi elemen span untuk sebagai tombol close dan elemen img yang belum ada atribut src di dalamnya.
.image-gallery {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 10px;
}
.card {
width: 200px;
border: 1px solid #ccc;
padding: 10px;
margin: 10px;
cursor: pointer;
}
.card img {
width: 100%;
height: 100%;
object-fit: cover; /* Gambar akan menutupi seluruh area elemen img */
}
.modal {
display: none;
position: fixed;
z-index: 1;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: auto;
background-color: rgba(0, 0, 0, 0.9);
}
.modal-content {
margin: auto;
display: block;
max-width: 90%;
max-height: 90%;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.close {
position: absolute;
top: 15px;
right: 35px;
color: white;
font-size: 40px;
font-weight: bold;
cursor: pointer;
}Kita menambahkan beberapa kode CSS untuk elemen modal popup. Elemen ini belum tampil karena secara default kita buat display-nya menjadi none.
const imageArray = [
"https://images.unsplash.com/photo-1682687982185-531d09ec56fc?ixlib=rb-4.0.3&ixid=M3wxMjA3fDF8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80",
"https://images.unsplash.com/photo-1696063429824-b0f45cd175eb?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1374&q=80",
"https://images.unsplash.com/photo-1659959104064-bf540e608ca0?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1430&q=80",
// tambahkan URL gambar lainnya sesuai kebutuhan
];
const galleryContainer = document.querySelector(".image-gallery");
const modal = document.getElementById("myModal");
const modalImage = document.getElementById("modalImage");
const closeModal = document.querySelector(".close");
imageArray.forEach((imageUrl) => {
const card = document.createElement("div");
card.classList.add("card");
const image = document.createElement("img");
image.src = imageUrl;
card.appendChild(image);
galleryContainer.appendChild(card);
card.addEventListener("click", () => {
modal.style.display = "block";
modalImage.src = imageUrl;
});
});
closeModal.addEventListener("click", () => {
modal.style.display = "none";
});
window.addEventListener("click", (event) => {
if (event.target === modal) {
modal.style.display = "none";
}
});Pada kode javascript, kita menambahkan beberapa variabel hasil seleksi elemen modal, modalImage (gambar di dalam modal popup) dan closeModal (tombol untuk menutup modal popup tersebut).
Di dalam perulangan, kita membuat setiap elemen card dapat menjalankan perintah untuk mengubah properti display pada elemen modal menjadi block yang artinya menampilkan elemen tersebut. Lalu kita isi atribut src pada elemen image di dalam modal tersebut dengan url yang sama dengan yang kita gunakan sebelumnya untuk ditampilkan pada elemen card.
Sebuah modal popup tentu saja harus dapat ditutup, maka dari itu kita menggunakan metode addEventListener lagi untuk membuat properti display pada elemen modal kembali menjadi none (menghilang) jika pengguna mengklik tombol close atau bagian luar dari elemen modal.
DOM Event
Sederhananya, DOM Event adalah apapun interaksi pengguna pada aplikasi kita yang dapat didengarkan oleh javascript. Method addEventListener akan mendengarkan interaksi tersebut, bahkan mengetahui jenis interaksi apa yang dilakukan pengguna (click, submit, scroll dan sebagainya) dan juga pada elemen apa interaksi tersebut dilakukan. Setelah informasi tersebut didapatkan dan sesuai dengan jenis interaksi yang kita kehendaki, kita memerintahkan javascript untuk mengeksekusi beberapa baris kode seperti contoh sebelumnya.
Terdapat banyak event yang dapat kita tangani dalam DOM (Document Object Model) menggunakan JavaScript. Berikut beberapa event umum dan penjelasannya:
click: Terjadi saat elemen diklik dengan mouse. Biasanya digunakan untuk menangani tindakan pengguna seperti mengklik tombol atau link.
mouseover: Terjadi saat kursor mouse masuk ke dalam area elemen. Digunakan untuk membuat efek saat elemen "dihover."
mouseout: Terjadi saat kursor mouse keluar dari area elemen. Digunakan untuk menghapus efek saat elemen "dihover."
keydown: Terjadi saat pengguna menekan tombol keyboard. Kita dapat memeriksa tombol apa yang ditekan oleh pengguna.
keyup: Terjadi saat pengguna melepaskan tombol keyboard setelah menekannya.
input: Terjadi saat isi dari elemen input berubah. Berguna untuk validasi atau pembaruan real-time ketika pengguna memasukkan teks.
change: Terjadi saat isi elemen input, seperti elemen
<select>atau<input type="checkbox/radio>, berubah setelah interaksi pengguna.submit: Terjadi saat sebuah form disubmit, baik melalui tombol submit atau dengan cara lain. Berguna untuk memvalidasi data sebelum mengirimnya ke server.
focus: Terjadi saat elemen mendapatkan fokus, seperti saat pengguna mengklik elemen input. Berguna untuk memberikan peringatan atau melakukan tindakan tertentu saat pengguna berinteraksi dengan elemen.
blur: Terjadi saat elemen kehilangan fokus, seperti saat pengguna meninggalkan elemen input. Berguna untuk memvalidasi atau mengubah data saat elemen kehilangan fokus.
load: Terjadi saat elemen seperti gambar atau dokumen selesai dimuat. Berguna untuk menjalankan kode setelah elemen tersebut selesai dimuat.
resize: Terjadi saat ukuran jendela browser berubah. Berguna untuk menyesuaikan tampilan halaman web secara responsif.
scroll: Terjadi saat pengguna menggulir halaman web. Berguna untuk membuat efek parallax atau mengambil tindakan saat pengguna menggulir ke lokasi tertentu.
Referensi
Last updated