Lihat sumber 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>
     <h1>Interaksi Sederhana dengan JavaScript</h1>
     <button id="ubahWarna">Ubah Warna Kotak</button>
     <button id="tambahKotak">Tambah Kotak</button>
     <div id="kotak"></div>
     <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.


==Pranala Menarik==

* [[Web Programming]]