Difference between revisions of "Praktik: Membuat interaksi sederhana pada halaman web"

From OnnoWiki
Jump to navigation Jump to search
(Created page with "Untuk memahami dan mempraktikkan pembuatan interaksi sederhana pada halaman web menggunakan JavaScript di Ubuntu 24.04 tanpa menggunakan Microsoft Code, ikuti langkah-langkah...")
 
 
Line 1: Line 1:
−
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.
+
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**
+
'''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:
+
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:
  
−
```bash
+
sudo apt update
−
sudo apt update
+
sudo apt install gedit
−
sudo apt install gedit
 
−
```
 
−
 
  
−
**2. Membuat Struktur Proyek**
+
'''2. Membuat Struktur Proyek'''
  
−
Buat folder baru untuk proyek Anda dan navigasikan ke dalamnya:
+
Buat folder baru untuk proyek Anda dan navigasikan ke dalamnya:
  
−
```bash
+
mkdir interaksi_web
−
mkdir interaksi_web
+
cd interaksi_web
−
cd interaksi_web
 
−
```
 
−
 
  
−
**3. Membuat File HTML**
+
'''3. Membuat File HTML'''
  
−
Buat file HTML baru dengan nama `index.html` menggunakan `gedit`:
+
Buat file HTML baru dengan nama `index.html` menggunakan `gedit`:
  
−
```bash
+
gedit index.html
−
gedit index.html
 
−
```
 
−
 
  
−
Tambahkan kode berikut ke dalam `index.html`:
+
Tambahkan kode berikut ke dalam `index.html`:
  
−
```html
+
<!DOCTYPE html>
−
<!DOCTYPE html>
+
<html lang="id">
−
<html lang="id">
+
<head>
−
<head>
+
    <meta charset="UTF-8">
−
    <meta charset="UTF-8">
+
    <title>Interaksi Sederhana dengan JavaScript</title>
−
    <title>Interaksi Sederhana dengan JavaScript</title>
+
    <style>
−
    <style>
+
        body {
−
        body {
+
            font-family: Arial, sans-serif;
−
            font-family: Arial, sans-serif;
+
        }
−
        }
+
        #kotak {
−
        #kotak {
+
            width: 100px;
−
            width: 100px;
+
            height: 100px;
−
            height: 100px;
+
            background-color: blue;
−
            background-color: blue;
+
            margin-top: 20px;
−
            margin-top: 20px;
+
        }
−
        }
+
    </style>
−
    </style>
+
</head>
−
</head>
+
<body>
−
<body>
+
    <h1>Interaksi Sederhana dengan JavaScript</h1>
−
    <h1>Interaksi Sederhana dengan JavaScript</h1>
+
    <button id="ubahWarna">Ubah Warna Kotak</button>
−
    <button id="ubahWarna">Ubah Warna Kotak</button>
+
    <button id="tambahKotak">Tambah Kotak</button>
−
    <button id="tambahKotak">Tambah Kotak</button>
+
    <div id="kotak"></div>
−
    <div id="kotak"></div>
+
    <script src="script.js"></script>
 +
</body>
 +
</html>
  
−
    <script src="script.js"></script>
+
'''4. Membuat File JavaScript'''
−
</body>
 
−
</html>
 
−
```
 
−
 
  
−
**4. Membuat File JavaScript**
+
Buat file JavaScript baru dengan nama `script.js` menggunakan `gedit`:
  
−
Buat file JavaScript baru dengan nama `script.js` menggunakan `gedit`:
+
gedit script.js
  
−
```bash
+
Tambahkan kode berikut ke dalam `script.js`:
−
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);
 +
});
  
−
```javascript
+
'''5. Menjalankan Proyek'''
−
// 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
+
Setelah membuat kedua file tersebut, buka file `index.html` di browser Anda. Navigasikan ke direktori proyek Anda dan jalankan perintah berikut:
−
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**
+
dg-open index.html
  
−
Setelah membuat kedua file tersebut, buka file `index.html` di browser Anda. Navigasikan ke direktori proyek Anda dan jalankan perintah berikut:
 
  
−
```bash
+
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.
−
xdg-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'''
  
−
**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.
  
−
- **HTML**: Menyediakan struktur dasar halaman dengan dua tombol dan sebuah div sebagai kotak.
+
'''7. Sumber Belajar Tambahan'''
  
−
- **CSS**: Mendefinisikan gaya dasar untuk elemen pada halaman, termasuk ukuran dan warna kotak.
+
Untuk memperdalam pemahaman tentang manipulasi DOM dan penanganan event dalam JavaScript, Anda dapat merujuk pada sumber berikut:
  
−
- **JavaScript**:
+
* [Pengantar DOM Scripting - MDN Web Docs](https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Client-side_web_APIs/Manipulating_documents)
−
  - Menambahkan event listener pada tombol "Ubah Warna Kotak" untuk mengubah warna kotak antara biru dan merah setiap kali diklik.
+
* [Panduan Praktis Penanganan Event dalam JavaScript](https://www.sencha.com/blog/event-handling-in-javascript-a-practical-guide-with-examples/)
−
  - 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**
+
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.
  
−
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)
+
==Pranala Menarik==
  
−
- [Panduan Praktis Penanganan Event dalam JavaScript](https://www.sencha.com/blog/event-handling-in-javascript-a-practical-guide-with-examples/)
+
* [[Web Programming]]
−
 
 
−
Dengan mengikuti langkah-langkah di atas, Anda telah membuat interaksi sederhana pada halaman web menggunakan JavaScript di Ubuntu 24.04 tanpa menggunakan Microsoft Code. Teruslah bereksperimen dengan berbagai elemen dan event untuk meningkatkan pemahaman dan keterampilan Anda dalam pengembangan web.
 

Latest revision as of 18:58, 6 April 2025

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:

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

Retrieved from "https://onnocenter.or.id/wiki/index.php?title=Praktik:_Membuat_interaksi_sederhana_pada_halaman_web&oldid=72371"