Unknown user at 12:05, 6 April 2025

2025-04-06T12:05:14Z

Unknown user: Created page with "Siap! Kita buat modul Event Handling dan Validasi Form menggunakan JavaScript, lengkap dengan contoh tanpa menggunakan Microsoft Visual Studio Code, khusus untuk Ubunt..."

2025-04-05T12:30:21Z

Created page with "Siap! Kita buat **modul Event Handling dan Validasi Form menggunakan JavaScript**, lengkap dengan contoh **tanpa menggunakan Microsoft Visual Studio Code**, khusus untuk Ubunt..."

New page

Siap! Kita buat **modul Event Handling dan Validasi Form menggunakan JavaScript**, lengkap dengan contoh **tanpa menggunakan Microsoft Visual Studio Code**, khusus untuk Ubuntu 24.04. Semua contoh bisa kamu kerjakan cukup dengan **text editor seperti Gedit, Nano, atau bahkan terminal + browser (Firefox/Chrome)**.

---

## 📘 Modul: Event Handling dan Validasi Form di JavaScript

### 🎯 Tujuan Pembelajaran
- Mahasiswa mampu memahami konsep **event handling** di JavaScript.
- Mahasiswa dapat membuat **validasi form sederhana** menggunakan JavaScript.
- Mahasiswa dapat menguji kode menggunakan **tool bawaan Ubuntu (tanpa VS Code)**.

---

## 1. 🧠 Konsep Event Handling di JavaScript

**Event Handling** adalah proses menangani interaksi pengguna (klik, ketik, submit, dll.) menggunakan JavaScript.

### 🔧 Contoh Dasar: Klik Tombol

```html

<!DOCTYPE html>
<html>
<head>
<title>Contoh Event</title>
</head>
<body>
<button id="klikSaya">Klik Saya</button>
<p id="pesan"></p>

<script>
document.getElementById("klikSaya").addEventListener("click", function() {
document.getElementById("pesan").innerText = "Tombol telah diklik!";
});
</script>
</body>
</html>
```

📂 **Cara menjalankan:**
- Simpan file sebagai `event.html`
- Buka di browser: klik kanan → **Open With Firefox/Chrome**

---

## 2. ✅ Validasi Form Sederhana

### 🔧 Contoh: Cek Nama Tidak Kosong

```html

<!DOCTYPE html>
<html>
<head>
<title>Form Validasi</title>
</head>
<body>
<form id="formulir">
Nama: <input type="text" id="nama"><br>
<input type="submit" value="Kirim">
</form>
<p id="peringatan" style="color:red;"></p>

<script>
document.getElementById("formulir").addEventListener("submit", function(event) {
let nama = document.getElementById("nama").value;
if (nama.trim() === "") {
event.preventDefault(); // mencegah form terkirim
document.getElementById("peringatan").innerText = "Nama tidak boleh kosong!";
}
});
</script>
</body>
</html>
```

📌 **Catatan:**
- `event.preventDefault()` mencegah form mengirim jika input kosong.

---

## 3. 🛠 Tools di Ubuntu 24.04 (Tanpa VS Code)

### 📝 Text Editor:
- **Gedit**: GUI Editor bawaan GNOME.
```bash
gedit event.html
```
- **Nano**: Editor teks terminal.
```bash
nano validasi.html
```
- **Mousepad / Pluma / Leafpad**: Tergantung desktop environment.

### 🌐 Browser untuk testing:
- **Firefox** atau **Chromium**
```bash
firefox event.html
```

---

## 4. 📦 Tambahan: Validasi Multiple Field

```html

<!DOCTYPE html>
<html>
<head>
<title>Validasi Lengkap</title>
</head>
<body>
<form id="formulir">
Nama: <input type="text" id="nama"><br>
Email: <input type="email" id="email"><br>
<input type="submit" value="Submit">
</form>
<p id="peringatan" style="color:red;"></p>

<script>
document.getElementById("formulir").addEventListener("submit", function(e) {
let nama = document.getElementById("nama").value;
let email = document.getElementById("email").value;
let error = "";

if (nama.trim() === "") {
error += "Nama harus diisi. ";
}
if (!email.includes("@")) {
error += "Email tidak valid. ";
}

if (error !== "") {
e.preventDefault();
document.getElementById("peringatan").innerText = error;
}
});
</script>
</body>
</html>
```

---

## 📚 Tugas Mahasiswa
1. Buat form pendaftaran yang terdiri dari:
- Nama lengkap
- Email
- Nomor telepon
- Checkbox "Saya setuju dengan syarat dan ketentuan"
2. Validasi semua input:
- Semua harus diisi
- Email harus valid
- Nomor telepon hanya angka
- Checkbox harus dicentang

---

Kalau kamu mau, aku bisa bantu bikin template tugasnya juga. Mau?

Event handling dan validasi form - Revision history

Unknown user at 12:05, 6 April 2025

Unknown user: Created page with "Siap! Kita buat **modul Event Handling dan Validasi Form menggunakan JavaScript**, lengkap dengan contoh **tanpa menggunakan Microsoft Visual Studio Code**, khusus untuk Ubunt..."

Unknown user: Created page with "Siap! Kita buat modul Event Handling dan Validasi Form menggunakan JavaScript, lengkap dengan contoh tanpa menggunakan Microsoft Visual Studio Code, khusus untuk Ubunt..."