Bagian 4: Interaksi Sederhana

Profil yang profesional kini tampil rapi, tetapi masih statis. Bagian terakhir menambahkan satu interaksi yang sering dipakai di web sungguhan: kartu kontak yang muncul di atas halaman. Elemen dialog dari section Interactive Elements menangani perilaku modalnya, sedangkan JavaScript dari section HTML dan JavaScript membuka serta menutupnya lewat tombol.

Menambahkan Tombol dan Dialog #

File profil-interaktif.html pada folder bagian ini melengkapi profil-styling.html dengan satu tag script di head serta tombol dan dialog di section kontak:

  <link rel="stylesheet" href="../styles/style.css">
  <script src="profil.js" defer></script>
  <!-- baris 11-32: header dan section tentang-saya serta keahlian -->
  <section id="kontak">
    <h2>Kontak</h2>
    <p>Saya terbuka untuk kolaborasi proyek kecil.</p>
    <button id="tombol-kontak" type="button">Hubungi Saya</button>
    <dialog id="dialog-kontak">
      <h2>Hubungi Budi</h2>
      <p>Surel: <a href="mailto:[email protected]">[email protected]</a></p>
      <p>Alamat: Jl. Melati No. 10, Bandung</p>
      <button id="tombol-tutup" type="button">Tutup</button>
    </dialog>
  </section>

Elemen dialog tampil tertutup secara bawaan; browser menggambar kartunya hanya ketika status open aktif. Atribut type="button" pada kedua tombol mencegah perilaku submit tak diminta, sedangkan defer pada tag script menunda eksekusi hingga dokumen selesai dibaca.

Skripnya juga sengaja dipisah menjadi file sendiri, bukan ditulis inline. Pemisahan ini menjaga satu tanggung jawab per file: HTML menampung struktur, CSS mengatur tampilan, dan JS mengatur perilaku. Kebiasaan tersebut mempermudah pemeliharaan ketika halaman tumbuh lebih kompleks.

Skrip Penggerak Dialog #

Interaksinya digerakkan oleh file profil.js yang berdampingan dengan halamannya:

const tombolKontak = document.querySelector("#tombol-kontak");
const dialogKontak = document.querySelector("#dialog-kontak");
const tombolTutup = document.querySelector("#tombol-tutup");

tombolKontak.addEventListener("click", function () {
  dialogKontak.showModal();
});

tombolTutup.addEventListener("click", function () {
  dialogKontak.close();
});

Output yang Dihasilkan:

Saat halaman baru dibuka:
  - Kartu kontak tidak terlihat
Saat tombol "Hubungi Saya" ditekan:
  - Kartu dialog muncul di tengah layar, di atas lapisan gelap
  - Sisa halaman tidak dapat menerima klik
Saat tombol "Tutup" atau tombol Esc ditekan:
  - Kartu tertutup dan halaman kembali normal

Mari kita bedah skrip tersebut:

1. Baris 1-3: querySelector mengambil referensi tombol pemicu, elemen dialog, dan tombol penutup.
2. Baris 5-7: listener klik pada tombol pemicu memanggil showModal(), sehingga browser menampilkan dialog sebagai modal dan memindahkan fokus ke dalamnya.
3. Baris 9-11: listener klik pada tombol Tutup memanggil close() untuk menutup dialog kembali.

Pemeriksaan Hasil Tahap Ini #

1. Buka profil-interaktif.html, lalu tekan tombol “Hubungi Saya”: kartu dialog muncul dengan lapisan gelap di belakangnya.
2. Tutup kartu lewat tombol “Tutup”, buka kembali, lalu tekan Esc; keduanya menutup dialog.
3. Tekan tombol Tab beberapa kali saat dialog terbuka; fokus berpindah di dalam kartu, bukan ke halaman di belakangnya.
4. Jalankan tests/cek-struktur.html, lalu lengkapi butir yang tersisa hingga 10 dari 10.

Sampai di sini proyek Halaman Profil tuntas: dokumen valid, konten semantik, tampilan profesional, dan satu interaksi nyata. Simpan hasil akhirnya sebagai latihan portofolio pertama. Proyek berikutnya, Website Portofolio, menaikkan skalanya menjadi satu halaman penuh dengan navigasi antar-section.

Referensi resmi untuk pendalaman:

• MDN Web Docs — dialog
• MDN Web Docs — HTMLDialogElement: showModal()
• WHATWG — HTML Living Standard: Interactive elements

<!doctype html>
<html lang="id">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta name="description" content="Profil singkat Budi Santoso, pengembang web pemula yang gemar membangun halaman web.">
  <title>Profil Budi Santoso</title>
  <link rel="stylesheet" href="../styles/style.css">
  <script src="profil.js" defer></script>
</head>
<body>
  <header>
    <img src="../assets/logo.svg" alt="Logo monogram BS" width="56" height="56">
    <div>
      <h1>Budi Santoso</h1>
      <p>Pengembang web pemula di Bandung</p>
    </div>
  </header>
  <main>
    <section id="tentang-saya">
      <h2>Tentang Saya</h2>
      <p>Saya Budi, pengembang web pemula yang menekuni HTML dan CSS selama satu tahun terakhir. Sehari-hari saya membantu pengelola komunitas belajar memelihara situs informasi yang dibangun dengan HTML murni. Tujuan saya menjadi pengembang front-end yang mengutamakan halaman ringan dan mudah diakses siapa pun.</p>
    </section>
    <section id="keahlian">
      <h2>Keahlian</h2>
      <ul>
        <li>Menyusun dokumen HTML yang valid</li>
        <li>Menata tampilan dengan CSS dasar</li>
        <li>Menambahkan interaksi sederhana dengan JavaScript</li>
      </ul>
    </section>
    <section id="kontak">
      <h2>Kontak</h2>
      <p>Saya terbuka untuk kolaborasi proyek kecil.</p>
      <button id="tombol-kontak" type="button">Hubungi Saya</button>
      <dialog id="dialog-kontak">
        <h2>Hubungi Budi</h2>
        <p>Surel: <a href="mailto:[email protected]">[email protected]</a></p>
        <p>Alamat: Jl. Melati No. 10, Bandung</p>
        <button id="tombol-tutup" type="button">Tutup</button>
      </dialog>
    </section>
  </main>
  <footer>
    <p>&copy; 2025 Budi Santoso</p>
  </footer>
</body>
</html>

const tombolKontak = document.querySelector("#tombol-kontak");
const dialogKontak = document.querySelector("#dialog-kontak");
const tombolTutup = document.querySelector("#tombol-tutup");

tombolKontak.addEventListener("click", function () {
  dialogKontak.showModal();
});

tombolTutup.addEventListener("click", function () {
  dialogKontak.close();
});