MODUL BELAJAR HARI 17-18
Hari 17-18: Manipulasi DOM (Dokumen Object Model)
Hari ini kita akan belajar bagaimana JavaScript bisa mengubah elemen di halaman web secara dinamis!
1. Apa Itu DOM?
DOM (Document Object Model) adalah struktur pohon dari elemen-elemen dalam halaman web. Dengan JavaScript, kita bisa:
✅ Mengubah teks dan gambar.
✅ Menambahkan atau menghapus elemen.
✅ Mengubah gaya (CSS) secara dinamis.
2. Mengubah Teks dengan JavaScript
Buat file index.html dan tambahkan kode ini:
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Manipulasi DOM</title>
<style>
body { font-family: Arial, sans-serif; text-align: center; }
h1 { color: blue; }
#text { font-size: 20px; color: green; }
</style>
</head>
<body>
<h1>Belajar Manipulasi DOM</h1>
<p id="text">Ini adalah teks awal.</p>
<button onclick="ubahTeks()">Ubah Teks</button>
<script>
function ubahTeks() {
document.getElementById("text").innerHTML = "Teks ini telah diubah!";
}
</script>
</body>
</html>
🔹 Penjelasan:
document.getElementById("text")→ Mengambil elemen dengan ID text..innerHTML = "Teks ini telah diubah!"→ Mengubah isi teks.
📌 Coba klik tombolnya!
3. Mengubah Gambar dengan JavaScript
Tambahkan kode ini ke index.html:
<img id="gambar" src="https://via.placeholder.com/150" alt="Gambar awal">
<button onclick="ubahGambar()">Ubah Gambar</button>
<script>
function ubahGambar() {
document.getElementById("gambar").src = "https://via.placeholder.com/200";
}
</script>
🔹 Penjelasan:
- Menggunakan
getElementById("gambar")untuk mengambil gambar. - Mengubah
srcgambar menjadi link yang berbeda.
4. Mengubah Gaya CSS Secara Dinamis
Tambahkan kode ini ke index.html:
<p id="styleText">Ubah warna teks ini!</p>
<button onclick="ubahWarna()">Ubah Warna</button>
<script>
function ubahWarna() {
document.getElementById("styleText").style.color = "red";
}
</script>
🔹 Penjelasan:
.style.color = "red"→ Mengubah warna teks menjadi merah.
🎯 Tugas Praktik Hari 17-18:
✅ Buat tombol yang bisa mengubah background warna halaman!
✅ Coba buat fitur yang bisa menyembunyikan & menampilkan gambar dengan JavaScript!
✅ Eksperimen dengan ubah ukuran font & warna teks secara dinamis.
🚀 Next: Hari 19-20 - Dark/Light Mode!
Besok kita akan belajar cara membuat mode gelap & terang untuk website! 🔥
Komentar
Posting Komentar