Tujuan Pembelajaran
Setelah mengikuti pertemuan ini, mahasiswa mampu mengintegrasikan HTML, CSS, dan JavaScript dalam satu aplikasi halaman yang lengkap dan memahami pola untuk memisahkan masing-masing lapisan.
Prinsip Pemisahan Lapisan
Aplikasi web modern membagi pekerjaan menjadi tiga lapisan. HTML sebagai struktur, CSS sebagai presentasi, dan JavaScript sebagai perilaku. Idealnya setiap lapisan hidup di file terpisah agar mudah dirawat: index.html, style.css, dan script.js.
Memisahkan lapisan memudahkan kerja tim, membuat kode lebih mudah dibaca, dan memungkinkan kita mengubah tampilan atau perilaku tanpa menyentuh struktur. Pemanggilan CSS dilakukan di head dengan tag link, sedangkan JavaScript dipanggil di akhir body dengan tag script.
<code class="language-html"><head> <link rel="stylesheet" href="style.css"> </head> <body> <!-- struktur --> <script src="script.js"></script> </body></code>
Alur Kerja Integrasi
Pertama rancang struktur HTML dengan elemen yang beradapan id atau class agar mudah dipilih. Kedua, beri gaya pada elemen melalui CSS. Ketiga, pilih elemen dengan querySelector di JavaScript dan lengkapi perilakunya. Dengan urutan ini setiap langkah hanya fokus pada satu tanggung jawab.
Ada baiknya menuliskan rencana singkat sebelum menulis kode: apa struktur yang dibutuhkan, bagaimana tampilannya, dan interaksi apa yang harus terjadi. Rencana kecil ini menghemat waktu debugging.
Studi Kasus: Kalkulator dan Galeri
Sebagai latihan integrasi, kita bisa membangun kalkulator sederhana. Struktur HTML berisi layar dan baris tombol angka serta operator. CSS membuat tombol rapi dengan grid. JavaScript menangkap klik tiap tombol, menyusun ekspresi, lalu menghitung hasilnya dengan fungsi eval.
Contoh lain adalah galeri dengan navigasi: satu gambar besar plus daftar thumbnail. Klik pada thumbnail mengganti atribut src gambar besar. Kedua contoh memakai ketiga lapisan dan hasilnya bisa langsung diuji di browser.
<code class="language-css">.tombol {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 8px;
}
.button { padding: 16px; background: #333; color: #fff; }</code>
Kode Lengkap Kalkulator
Berikut kerangka kode yang menggabungkan ketiga lapisan sekaligus. Perhatikan bagaimana JavaScript hanya menangani logika, bukan tampilan, dan CSS hanya menangani tampilan, bukan logika. Perkecil lingkup setiap fungsi agar mudah diperbaiki.
<code class="language-javascript">// script.js - hanyalah contoh logika
let ekspresi = "";
function tambah(nilai) {
ekspresi += nilai;
document.querySelector("#layar").textContent = ekspresi;
}
function hitung() {
ekspresi = String(eval(ekspresi));
document.querySelector("#layar").textContent = ekspresi;
}
function bersih() { ekspresi = ""; document.querySelector("#layar").textContent = "0"; }</code>
Langkah Praktik
Pilih salah satu studi kasus (kalkulator atau galeri) dan kerjakan dalam tiga file terpisah. Mulai dari struktur HTML, lanjut ke gaya CSS, lalu lengkapi perilaku JavaScript. Uji setiap langkah sebelum melanjutkan ke langkah berikutnya.
Setelah berfungsi, gunakan DevTools untuk memeriksa apakah ada error di tab Console. Perbaiki satu per satu dan pastikan tidak ada pesan kesalahan tersisa.
Konsep Kunci
- Aplikasi web modern membagi pekerjaan menjadi tiga lapisan.
- HTML sebagai struktur, CSS sebagai presentasi, dan JavaScript sebagai perilaku.
- Idealnya setiap lapisan hidup di file terpisah agar mudah dirawat: index.
- Memisahkan lapisan memudahkan kerja tim, membuat kode lebih mudah dibaca, dan memungkinkan kita mengubah tampilan atau perilaku tanpa menyentuh struktur.
- Pemanggilan CSS dilakukan di head dengan tag link, sedangkan JavaScript dipanggil di akhir body dengan tag script.
- Pertama rancang struktur HTML dengan elemen yang beradapan id atau class agar mudah dipilih.
- Kedua, beri gaya pada elemen melalui CSS.
- Ketiga, pilih elemen dengan querySelector di JavaScript dan lengkapi perilakunya.
- Dengan urutan ini setiap langkah hanya fokus pada satu tanggung jawab.
- Ada baiknya menuliskan rencana singkat sebelum menulis kode: apa struktur yang dibutuhkan, bagaimana tampilannya, dan interaksi apa yang harus terjadi.
- Rencana kecil ini menghemat waktu debugging.
- Sebagai latihan integrasi, kita bisa membangun kalkulator sederhana.
- Struktur HTML berisi layar dan baris tombol angka serta operator.
- CSS membuat tombol rapi dengan grid.
- JavaScript menangkap klik tiap tombol, menyusun ekspresi, lalu menghitung hasilnya dengan fungsi eval.
- Contoh lain adalah galeri dengan navigasi: satu gambar besar plus daftar thumbnail.
- Klik pada thumbnail mengganti atribut src gambar besar.
- Kedua contoh memakai ketiga lapisan dan hasilnya bisa langsung diuji di browser.
- Berikut kerangka kode yang menggabungkan ketiga lapisan sekaligus.
- Setelah mengikuti pertemuan ini, mahasiswa mampu mengintegrasikan HTML, CSS, dan JavaScript dalam satu aplikasi halaman yang lengkap dan memahami pola untuk memisahkan masing-masing lapisan.
- Perhatikan bagaimana JavaScript hanya menangani logika, bukan tampilan, dan CSS hanya menangani tampilan, bukan logika.
Contoh Kode
<code class="language-html"><!-- link stylesheet in the head --> <link rel="stylesheet" href="style.css"> <!-- link script at the end of the body --> <script src="script.js"></script></code>
<code class="language-javascript">function toon(text) {
const box = document.querySelector("#uitvoer");
box.textContent = text;
}</code>
Aplikasi web modern membagi pekerjaan menjadi tiga lapisan. HTML sebagai struktur, CSS sebagai presentasi, dan JavaScript sebagai perilaku. Idealnya setiap lapisan hidup di file terpisah agar mudah dirawat: index.html, style.css, dan script.js.
Latihan
Bangun aplikasi hampir lengkap yang menggabungkan ketiga lapisan: halaman profil dengan tombol yang mengganti teks, plus komponen hitung jumlah kata dari input yang ditulis di area teks. Pisahkan HTML, CSS, dan JavaScript ke tiga file yang berbeda.