Praktik: Membuat interaksi sederhana pada halaman web
Untuk memahami dan mempraktikkan pembuatan interaksi sederhana pada halaman web menggunakan JavaScript di Ubuntu 24.04 tanpa menggunakan Microsoft Code, ikuti langkah-langkah berikut. Kita akan menggunakan editor teks bawaan seperti `gedit` dan browser web seperti Firefox atau Chromium yang tersedia di Ubuntu.
1. Persiapan Lingkungan
Pastikan Anda memiliki editor teks seperti `gedit` dan browser web seperti Firefox atau Chromium yang sudah terinstal di sistem Anda. `gedit` biasanya sudah terinstal secara default. Jika belum, Anda dapat menginstalnya melalui terminal:
sudo apt update sudo apt install gedit
2. Membuat Struktur Proyek
Buat folder baru untuk proyek Anda dan navigasikan ke dalamnya:
mkdir interaksi_web cd interaksi_web
3. Membuat File HTML
Buat file HTML baru dengan nama `index.html` menggunakan `gedit`:
gedit index.html
Tambahkan kode berikut ke dalam `index.html`:
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<title>Interaksi Sederhana dengan JavaScript</title>
<style>
body {
font-family: Arial, sans-serif;
}
#kotak {
width: 100px;
height: 100px;
background-color: blue;
margin-top: 20px;
}
</style>
</head>
<body>
Interaksi Sederhana dengan JavaScript
<button id="ubahWarna">Ubah Warna Kotak</button>
<button id="tambahKotak">Tambah Kotak</button>
<script src="script.js"></script> </body> </html>
4. Membuat File JavaScript
Buat file JavaScript baru dengan nama `script.js` menggunakan `gedit`:
gedit script.js
Tambahkan kode berikut ke dalam `script.js`:
// Mengubah warna kotak saat tombol "Ubah Warna Kotak" diklik
document.getElementById('ubahWarna').addEventListener('click', function() {
const kotak = document.getElementById('kotak');
const warnaSekarang = kotak.style.backgroundColor;
kotak.style.backgroundColor = warnaSekarang === 'blue' ? 'red' : 'blue';
});
// Menambahkan kotak baru saat tombol "Tambah Kotak" diklik
document.getElementById('tambahKotak').addEventListener('click', function() {
const kotakBaru = document.createElement('div');
kotakBaru.style.width = '100px';
kotakBaru.style.height = '100px';
kotakBaru.style.backgroundColor = 'green';
kotakBaru.style.marginTop = '20px';
document.body.appendChild(kotakBaru);
});
5. Menjalankan Proyek
Setelah membuat kedua file tersebut, buka file `index.html` di browser Anda. Navigasikan ke direktori proyek Anda dan jalankan perintah berikut:
dg-open index.html
Halaman web akan terbuka di browser default Anda. Cobalah klik tombol "Ubah Warna Kotak" untuk mengubah warna kotak antara biru dan merah. Klik tombol "Tambah Kotak" untuk menambahkan kotak baru berwarna hijau di bawahnya.
6. Penjelasan Kode
- HTML: Menyediakan struktur dasar halaman dengan dua tombol dan sebuah div sebagai kotak.
- CSS: Mendefinisikan gaya dasar untuk elemen pada halaman, termasuk ukuran dan warna kotak.
- JavaScript:
- Menambahkan event listener pada tombol "Ubah Warna Kotak" untuk mengubah warna kotak antara biru dan merah setiap kali diklik.
- Menambahkan event listener pada tombol "Tambah Kotak" untuk menambahkan kotak baru berwarna hijau di bawah kotak yang ada setiap kali diklik.
7. Sumber Belajar Tambahan
Untuk memperdalam pemahaman tentang manipulasi DOM dan penanganan event dalam JavaScript, Anda dapat merujuk pada sumber berikut:
- [Pengantar DOM Scripting - MDN Web Docs](https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Client-side_web_APIs/Manipulating_documents)
- [Panduan Praktis Penanganan Event dalam JavaScript](https://www.sencha.com/blog/event-handling-in-javascript-a-practical-guide-with-examples/)
Dengan mengikuti langkah-langkah di atas, Anda telah membuat interaksi sederhana pada halaman web menggunakan JavaScript di Ubuntu 24.04. Teruslah bereksperimen dengan berbagai elemen dan event untuk meningkatkan pemahaman dan keterampilan Anda dalam pengembangan web.