Membuat Interaksi Pertama
Bangun interaksi DOM sederhana di project lokal: membaca input dan menampilkan hasil di halaman.
Tujuan belajar
- Memilih elemen input, button, dan output dari DOM
- Membaca value dari input
- Menangani click event
- Menampilkan feedback ke halaman
Isi lesson
6 blok- 1.Interaksi kecil sudah cukup untuk fitur pertamaBelum selesaiWajib
- 2.HTML untuk input dan outputBelum selesaiWajib
- 3.script.js untuk membaca inputBelum selesaiWajib
- 4.Checklist local taskBelum selesaiWajib
- 5.Debug dari hal paling terlihatBelum selesaiOpsional
- 6.RingkasanBelum selesaiWajib
Interaksi kecil sudah cukup untuk fitur pertama
WajibFitur pertama tidak perlu besar. Yang penting, alurnya jelas: user mengetik sesuatu, user menekan tombol, JavaScript membaca input, lalu halaman berubah.
Alur ini adalah fondasi banyak fitur frontend: form komentar, pencarian, filter, daftar tugas, kalkulator sederhana, dan dashboard kecil. Saat kamu bisa membuat satu interaksi rapi di local project, kamu mulai memahami hubungan nyata antara HTML, DOM, event, dan state kecil di browser.
Bagian ini memengaruhi progres lesson.
HTML untuk input dan output
Wajib<label for="noteInput">Catatan hari ini</label>
<input id="noteInput" type="text" placeholder="Tulis catatan singkat" />
<button id="saveButton">Tampilkan catatan</button>
<p id="noteOutput">Belum ada catatan.</p>Input menjadi sumber data dari user. Button menjadi pemicu event. Paragraph menjadi tempat JavaScript menampilkan hasil.
Bagian ini memengaruhi progres lesson.
script.js untuk membaca input
Wajibconst noteInput = document.querySelector("#noteInput");
const saveButton = document.querySelector("#saveButton");
const noteOutput = document.querySelector("#noteOutput");
saveButton.addEventListener("click", function () {
const note = noteInput.value.trim();
if (note === "") {
noteOutput.textContent = "Tulis catatan dulu.";
return;
}
noteOutput.textContent = "Catatan: " + note;
});Kode ini membaca value dari input, menolak input kosong, lalu mengubah teks output. Ini belum menyimpan data permanen; datanya hilang saat halaman di-refresh.
Bagian ini memengaruhi progres lesson.
Checklist local task
WajibKerjakan di project lokal kamu:
- Tambahkan label, input, button, dan area output di index.html.
- Pilih semua elemen itu di script.js dengan querySelector.
- Tambahkan click event pada button.
- Saat input kosong, tampilkan pesan yang membantu.
- Saat input berisi teks, tampilkan teks itu di halaman.
- Refresh browser dan pastikan behavior tetap berjalan setelah file disimpan ulang.
Tandai selesai setelah interaksi berjalan di browser lokal, bukan hanya setelah kode ditulis.
Bagian ini memengaruhi progres lesson.
Tips
OpsionalDebug dari hal paling terlihat
Jika interaksi tidak berjalan, mulai dari Console. Jika ada error null, kemungkinan selector tidak menemukan elemen. Jika tidak ada error tapi output tidak berubah, cek event listener, id elemen, dan apakah file script.js benar-benar terbaca.
Opsional, tidak menghambat penyelesaian lesson.
Ringkasan
Wajib- Interaksi dasar terdiri dari input, event, logic, dan output.
- querySelector memilih elemen dari halaman.
- addEventListener menghubungkan aksi user dengan fungsi JavaScript.
- textContent bisa dipakai untuk menampilkan hasil sederhana.
- Berikutnya kamu akan menyimpan data agar tidak hilang saat halaman di-refresh.
Bagian ini memengaruhi progres lesson.
Langkah berikutnya
Selesaikan bagian penting lesson ini
Lanjutkan blok wajib berikutnya: Interaksi kecil sudah cukup untuk fitur pertama.