Admin: /* Tujuan Pembelajaran */

2025-05-10T13:52:50Z

Tujuan Pembelajaran

← Revisi sebelumnya		Revisi per 10 Mei 2025 13.52
Baris 2:		Baris 2:

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

	==1. 🧠 Konsep Event Handling di JavaScript==		==1. 🧠 Konsep Event Handling di JavaScript==

Admin: ←Membuat halaman berisi '==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.) menggun...'

2025-05-10T13:51:57Z

←Membuat halaman berisi '==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.) menggun...'

Halaman baru

==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'''


<!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'''


<!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.

gedit event.html

* '''Nano''': Editor teks terminal.

nano validasi.html

* '''Mousepad / Pluma / Leafpad''': Tergantung desktop environment.

'''Browser untuk testing:'''

* '''Firefox''' atau '''Chromium'''

firefox event.html

==4. 📦 Tambahan: Validasi Multiple Field==


<!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 siswa==

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

==Pranala Menarik==

* [[Web Programming]]

Event handling dan validasi form - Riwayat revisi

Admin: /* Tujuan Pembelajaran */