JavaScript - Borang DOM: Panduan Pemula

Hello, para pemrogram yang sedang mencari ilmu! Hari ini, kita akan melantikan masuk ke dunia yang menarik JavaScript dan Borang DOM. Sebagai guru komputer tetangga yang ramah, saya di sini untuk menghidahkan Anda dalam perjalanan ini secara langkah demi langkah. Jadi, ambil minuman kesukaan Anda, betahkan diri, dan mari kita mulai petualangan ini bersama!

Borang DOM

Sebelum kita melompat ke hal-hal teknis JavaScript dan borang, mari kitaambil sedikit waktu untuk memahami apa itu Borang DOM. DOM adalah singkatan dari Document Object Model, dan secara esensial adalah cara bagi JavaScript untuk berinteraksi dengan elemen HTML di halaman web.

Pertimbangkan DOM seperti pohon keluarga untuk halaman web Anda. Setiap elemen adalah seperti anggota keluarga, dan JavaScript adalah sepupu yang keren yang bisa berbicara dengan semua dan membuat hal-hal terjadi!

Sekarang, tentang borang, mereka seperti kuesioner interaktif dunia web. Mereka memungkinkan pengguna memasukkan data, membuat pilihan, dan mengirimkan informasi ke situs web. Mari kita lihat contoh borang HTML sederhana:

<form id="myForm">
<label for="name">Nama:</label>
<input type="text" id="name" name="name">
<button type="submit">Kirim</button>
</form>

Borang ini memiliki field input untuk nama dan tombol kirim. cukup mudah, kan? Sekarang, mari kita lihat bagaimana kita bisa berinteraksi dengan borang ini menggunakan JavaScript!

Penyerahan Borang JavaScript

Ketika pengguna mengisi borang dan mengklik tombol kirim, kita seringkali ingin melakukan sesuatu dengan data itu sebelum mengirimkannya ke server. Ini adalah tempat JavaScript sangat berguna!

Ini adalah contoh bagaimana kita dapat menghandle penyerahan borang dengan JavaScript:

document.getElementById('myForm').addEventListener('submit', function(event) {
event.preventDefault(); // Menghentikan penyerahan borang secara normal

var name = document.getElementById('name').value;
console.log('Hello, ' + name + '!');
});

mari kitauraikan ini:

1. Kita memilih borang kita menggunakan document.getElementById('myForm').
2. Kita menambahkan penggunaan event listener untuk peristiwa 'submit'.
3. event.preventDefault() menghentikan borang dari penyerahan secara normal (yang akan merefresh halaman).
4. Kita mendapatkan nilai field nama dan mencatat pesan salam ke konsol.

Sekarang, ketika Anda mengirim borang, bukannya halaman merefresh, Anda akan melihat salam di konsol. Keren, kan?

Validasi Borang JavaScript

Validasi borang seperti memiliki penjaga yang ramah di klub. Itu memeriksa apakah semua halus sebelum membiarkan data melanjutkan. Mari kita lihat bagaimana kita dapat memvalidasi borang kita menggunakan JavaScript:

document.getElementById('myForm').addEventListener('submit', function(event) {
event.preventDefault();

var name = document.getElementById('name').value;

if (name.trim() === '') {
alert('Silakan masukkan namamu!');
} else {
console.log('Hello, ' + name + '!');
}
});

Dalam contoh ini, kita memeriksa apakah field nama kosong (atau hanya mengandung spasi). Jika itu benar, kita menampilkan peringatan meminta pengguna memasukkan namanya. Jika tidak, kita mencatat salam.

Validasi Data Borang JavaScript

kadang-kadang, kita perlu memvalidasi data yang lebih kompleks. mari kita katakan kita ingin menambahkan field email ke borang kita dan memastikan itu adalah alamat email yang valid:

<form id="myForm">
<label for="name">Nama:</label>
<input type="text" id="name" name="name">
<label for="email">Email:</label>
<input type="email" id="email" name="email">
<button type="submit">Kirim</button>
</form>

Dan ini adalah bagaimana kita dapat memvalidasinya:

document.getElementById('myForm').addEventListener('submit', function(event) {
event.preventDefault();

var name = document.getElementById('name').value;
var email = document.getElementById('email').value;

if (name.trim() === '') {
alert('Silakan masukkan namamu!');
return;
}

if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email)) {
alert('Silakan masukkan alamat email yang valid!');
return;
}

console.log('Hello, ' + name + '! Kami akan menghubungi Anda di ' + email);
});

Dalam contoh ini, kita menggunakan ekspresi regular untuk memeriksa apakah email valid. Jangan khawatir jika itu terlihat seperti kode aneh - ekspresi regular adalah topik untuk hari lain!

Validasi Borang Menggunakan Batasan HTML

Sekarang, mari kitaongkirkan rahasia kecil: HTML5 memiliki beberapa fitur validasi borang bawaan yang bisa membuat hidup kita mudah. Mari kita perbarui borang kita untuk menggunakan ini:

<form id="myForm">
<label for="name">Nama:</label>
<input type="text" id="name" name="name" required>
<label for="email">Email:</label>
<input type="email" id="email" name="email" required>
<button type="submit">Kirim</button>
</form>

Dengan menambahkan atribut required ke input kita dan menggunakan type="email" untuk field email, kita mendapatkan validasi dasar secara gratis! Browser akan menghentikan penyerahan borang dan menunjukkan pesan kesalahan jika field ini kosong atau tidak valid.

Tapi kita masih bisa menggunakan JavaScript untuk menyesuaikan perilakunya:

document.getElementById('myForm').addEventListener('submit', function(event) {
if (!this.checkValidity()) {
event.preventDefault();
alert('Silakan isi semua field dengan benar!');
} else {
var name = document.getElementById('name').value;
var email = document.getElementById('email').value;
console.log('Hello, ' + name + '! Kami akan menghubungi Anda di ' + email);
}
});

Kode ini memeriksa apakah borang valid menurut batasan HTML. Jika tidak, kita menghentikan penyerahan dan menunjukkan peringatan. Jika iya, kita melanjutkan dengan salam.

Kesimpulan

Dan begitu, teman-teman! Kita telah melintasi negeri JavaScript dan Borang DOM, dari penyerahan dasar hingga validasi dan seterusnya. Ingat, borang adalah seperti percakapan antara situs web Anda dan pengguna. Dengan JavaScript, Anda memastikan bahwa percakapan itu lancar dan semua orang mengerti satu sama lain.

Berlatih terus, terus coding, dan sebelum Anda tahu, Anda akan menciptakan pengalaman web interaktif yang menakjubkan! Ingat, setiap ahli pernah menjadi pemula. Jadi jangan frustasi jika hal-hal tidak langsung berjalan mulus. Tetap keras, dan Anda akan terkejut atas apa yang Anda capai!

Credits: Image by storyset