Merhaba Webkolog Takipçileri!
Önceki yazımızda JavaScript'in tarayıcı nesneleri ve DOM ile nasıl etkileşim kurduğunu genel hatlarıyla incelemiştik. Bugün ise bu etkileşimi biraz daha derinleştirerek, web sayfalarımızın olmazsa olmazı Formlar ve Tablolar gibi belirli DOM nesnelerine odaklanacağız. Kullanıcıdan veri almak, bu verileri işlemek, dinamik tablolar oluşturmak veya mevcut form elemanlarını manipüle etmek istediğinizde bu nesneler en büyük yardımcılarınız olacak. Hazırsanız, web formlarının ve tablolarının dinamik dünyasına dalış yapalım!
1. Form Nesnesi
HTML'deki <form> etiketi, JavaScript'te bir Form Nesnesi olarak temsil edilir. Bu nesne, formun tüm elemanlarına (input, select, textarea vb.) erişim sağlamanın yanı sıra, formun gönderimi (submit) ve sıfırlanması (reset) gibi eylemleri kontrol etmenize olanak tanır.
Form Nesnesi Özellikleri:
action: Form verilerinin gönderileceği URL'yi belirtir veya döndürür.method: Form verilerinin nasıl gönderileceğini belirtir ("GET" veya "POST").enctype: Form verilerinin sunucuya gönderilmeden önce nasıl kodlanacağını belirtir (örn:"application/x-www-form-urlencoded","multipart/form-data").name,id: Formun adını veya ID'sini belirtir.target: Formun gönderildikten sonra yanıtın hangi pencerede/sekmede gösterileceğini belirtir (örn:"_blank","_self").length: Formdaki eleman sayısını döndürür.elements[]: Formdaki tüm input, select, textarea gibi elemanlara erişim sağlayan bir koleksiyondur.
Form Nesnesi Metotları:
submit(): Formu programatik olarak gönderir.// HTML'de <form id="myForm" action="/submit" method="post">...</form> olduğunu varsayalım const myForm = document.getElementById("myForm"); // Formu JavaScript ile gönder // myForm.submit();reset(): Formdaki tüm elemanları varsayılan değerlerine sıfırlar.// Formu JavaScript ile sıfırla // myForm.reset();
// İlk forma erişim
const ilkForm = document.forms[0];
// Veya ID ile erişim
const iletisimFormu = document.getElementById("iletisimFormu");
if (iletisimFormu) {
console.log("Form Metodu:", iletisimFormu.method); // POST
console.log("Formdaki Eleman Sayısı:", iletisimFormu.length);
// Form gönderimini dinle
iletisimFormu.addEventListener("submit", function(event) {
event.preventDefault(); // Formun varsayılan gönderimini engelle
const kullaniciAdi = iletisimFormu.elements.kullaniciAdi.value;
const email = iletisimFormu.elements.email.value;
console.log(`Kullanıcı Adı: ${kullaniciAdi}, Email: ${email}`);
// Burada form verilerini sunucuya gönderme (AJAX vb.) işlemleri yapılabilir
});
}
2. Input Nesnesi
HTML'deki <input> etiketi, JavaScript'te bir Input Nesnesi olarak temsil edilir. Bu nesne, metin kutuları, şifre alanları, radyo butonları, onay kutuları gibi birçok farklı input türünü yönetmenizi sağlar.
Input Nesnesi Özellikleri:
value: Input alanının mevcut değerini döndürür veya ayarlar.readOnly: Input alanının sadece okunabilir olup olmadığını belirtir (boolean).size: Metin input'unun karakter sayısına göre görsel genişliğini belirtir.maxLength: Metin input'una girilebilecek maksimum karakter sayısını belirtir.checked: Radyo butonları ve onay kutuları için seçili olup olmadığını belirtir (boolean).
Input Nesnesi Metotları ve Olayları:
focus(): Input alanına odaklanmayı sağlar.blur(): Input alanından odağı kaldırır.select(): Metin input'undaki tüm metni seçer.onchange: Input değeri değiştiğinde tetiklenir.onfocus,onblur: Input'a odaklanıldığında veya odaktan çıkıldığında tetiklenir.onkeypress,onkeydown,onkeyup: Klavye olaylarını dinler.
// HTML'de <input type="text" id="kullaniciAdiInput" value="Varsayılan"> olduğunu varsayalım
const kullaniciAdiInput = document.getElementById("kullaniciAdiInput");
if (kullaniciAdiInput) {
console.log("Mevcut Değer:", kullaniciAdiInput.value);
kullaniciAdiInput.value = "Yeni Kullanıcı"; // Değeri değiştir
kullaniciAdiInput.addEventListener("change", function() {
console.log("Input değeri değişti:", this.value);
});
// HTML'de <input type="checkbox" id="abonelikOnay" checked> olduğunu varsayalım
const abonelikOnay = document.getElementById("abonelikOnay");
if (abonelikOnay) {
console.log("Abonelik Onaylı mı:", abonelikOnay.checked);
abonelikOnay.checked = false; // Onay kutusunun seçimini kaldır
}
}
3. SelectBox Nesnesi (<select>)
HTML'deki <select> etiketi, JavaScript'te bir SelectBox Nesnesi olarak temsil edilir. Açılır listeleri veya çoklu seçim kutularını yönetmenizi sağlar.
SelectBox Nesnesi Özellikleri:
length: Seçenek (<option>) sayısını döndürür.multiple: Çoklu seçim yapılıp yapılamayacağını belirtir (boolean).selectedIndex: Seçili olan seçeneğin indeks numarasını döndürür (ilk seçili olan için). Hiçbir şey seçili değilse -1 döndürür.value: Seçili olan seçeneğin değerini döndürür veya ayarlar.options[]: SelectBox içindeki tüm<option>nesnelerinin bir koleksiyonudur.
SelectBox Nesnesi Metotları:
add(option, before): Yeni bir seçenek (<option>) ekler.beforeparametresi, yeni seçeneğin hangi elemandan önce ekleneceğini belirtir.remove(index): Belirtilen indeksteki seçeneği kaldırır.
// HTML'de <select id="sehirSecim"><option value="ist">İstanbul</option>...</select> olduğunu varsayalım
const sehirSecim = document.getElementById("sehirSecim");
if (sehirSecim) {
console.log("Seçenek Sayısı:", sehirSecim.length);
console.log("Seçili İndeks:", sehirSecim.selectedIndex);
console.log("Seçili Değer:", sehirSecim.value);
// Seçimi değiştirme
sehirSecim.value = "ank"; // value'su "ank" olanı seçer
// Yeni seçenek ekleme
const yeniOption = document.createElement("option");
yeniOption.text = "İzmir";
yeniOption.value = "izm";
sehirSecim.add(yeniOption); // En sona ekler
// Belirli bir indekse ekleme (örneğin 0. indekse)
const ilkOption = document.createElement("option");
ilkOption.text = "Lütfen Seçiniz";
ilkOption.value = "";
sehirSecim.add(ilkOption, sehirSecim.options[0]); // İlk eleman olarak ekler
// Seçenek kaldırma (örneğin 1. indeksteki)
// sehirSecim.remove(1);
}
4. Option Nesnesi (<option>)
HTML'deki <option> etiketi, JavaScript'te bir Option Nesnesi olarak temsil edilir. Bir <select> elemanının içindeki tek bir seçeneği yönetmenizi sağlar.
Option Nesnesi Özellikleri:
text: Seçeneğin kullanıcıya görünen metnini döndürür veya ayarlar.value: Seçeneğin ilişkili değerini döndürür veya ayarlar (genellikle sunucuya gönderilen değer).
// sehirSecim selectbox'ının ilk seçeneğine erişim
const ilkSecenek = sehirSecim.options[0]; // Yukarıdaki örnekten devamla
if (ilkSecenek) {
console.log("İlk Seçeneğin Metni:", ilkSecenek.text);
console.log("İlk Seçeneğin Değeri:", ilkSecenek.value);
}
5. TextArea Nesnesi (<textarea>)
HTML'deki <textarea> etiketi, JavaScript'te bir TextArea Nesnesi olarak temsil edilir. Çok satırlı metin giriş alanlarını yönetmenizi sağlar.
TextArea Nesnesi Özellikleri:
value: TextArea'nın mevcut metin içeriğini döndürür veya ayarlar.rows: TextArea'nın görünen satır sayısını belirtir.cols: TextArea'nın görünen sütun (karakter) sayısını belirtir.readOnly: TextArea'nın sadece okunabilir olup olmadığını belirtir (boolean).disabled: TextArea'nın devre dışı olup olmadığını belirtir (boolean).
TextArea Nesnesi Metotları:
focus(): TextArea'ya odaklanmayı sağlar.blur(): TextArea'dan odağı kaldırır.select(): TextArea'daki tüm metni seçer.
// HTML'de <textarea id="mesajTextArea" rows="5" cols="30"></textarea> olduğunu varsayalım
const mesajTextArea = document.getElementById("mesajTextArea");
if (mesajTextArea) {
mesajTextArea.value = "Merhaba, bu bir deneme mesajıdır.";
console.log("TextArea İçeriği:", mesajTextArea.value);
// TextArea'ya odaklan ve tüm metni seç
// mesajTextArea.focus();
// mesajTextArea.select();
}
6. Table Nesnesi (<table>)
HTML'deki <table> etiketi, JavaScript'te bir Table Nesnesi olarak temsil edilir. Dinamik olarak tablo oluşturmak, satır ve sütun eklemek/silmek veya tablo özelliklerini değiştirmek için kullanılır.
Table Nesnesi Özellikleri:
border: Tablonun kenarlık genişliğini belirtir.caption: Tablonun başlık (<caption>) elementini döndürür.rows[]: Tablodaki tüm satır (<tr>) elementlerinin bir koleksiyonunu döndürür.tHead,tFoot,tBodies[]: Tablonun<thead>,<tfoot>ve<tbody>elementlerine erişim sağlar.cellPadding,cellSpacing: Hücre dolgusu ve hücreler arası boşlukları ayarlar.width,height: Tablonun genişliğini ve yüksekliğini ayarlar.
Table Nesnesi Metotları:
createCaption(),deleteCaption(): Tabloya başlık ekler veya kaldırır.createTHead(),deleteTHead(): Tabloya başlık bölümü (thead) ekler veya kaldırır.createTFoot(),deleteTFoot(): Tabloya alt bölüm (tfoot) ekler veya kaldırır.insertRow(index): Belirtilen indekste yeni bir satır (<tr>) ekler.const tablo = document.getElementById("veriTablosu"); if (tablo) { const yeniSatir = tablo.insertRow(-1); // -1 sona ekler const hucre1 = yeniSatir.insertCell(0); const hucre2 = yeniSatir.insertCell(1); hucre1.textContent = "Yeni Veri 1"; hucre2.textContent = "Yeni Veri 2"; }deleteRow(index): Belirtilen indeksteki satırı siler.insertCell(index): Bir satır (<tr>) içinde belirtilen indekste yeni bir hücre (<td>veya<th>) ekler.deleteCell(index): Bir satır içindeki belirtilen indeksteki hücreyi siler.
// HTML'de <table id="urunlerTablosu"></table> olduğunu varsayalım
const urunlerTablosu = document.getElementById("urunlerTablosu");
if (urunlerTablosu) {
// Tablo başlığı oluştur
const baslikSatiri = urunlerTablosu.createTHead().insertRow(0);
const baslik1 = baslikSatiri.insertCell(0);
const baslik2 = baslikSatiri.insertCell(1);
baslik1.textContent = "Ürün Adı";
baslik2.textContent = "Fiyat";
// Yeni veri satırı ekle
const veriSatiri = urunlerTablosu.insertRow(-1); // En sona ekle
const urunAdiHucre = veriSatiri.insertCell(0);
const fiyatHucre = veriSatiri.insertCell(1);
urunAdiHucre.textContent = "Klavye";
fiyatHucre.textContent = "350 TL";
// Tabloya bir border ekle
urunlerTablosu.border = "1";
urunlerTablosu.cellPadding = "5";
}
Sonuç
JavaScript'in Form, Input, SelectBox, Option, TextArea ve Table gibi özel DOM nesneleri, web sayfalarınızdaki kullanıcı etkileşimlerini ve veri sunumunu dinamik olarak yönetmenizi sağlar. Form verilerini almaktan, dinamik olarak seçenekler eklemeye, tablo satırlarını manipüle etmekten, kullanıcı girdilerini doğrulamaya kadar birçok karmaşık işlemi bu nesnelerin sunduğu özellikler ve metotlarla kolayca gerçekleştirebilirsiniz. Bu nesneleri iyi anlamak ve pratik yapmak, web uygulamalarınızın kullanıcıyla daha güçlü ve esnek bir şekilde etkileşim kurmasını sağlayacaktır.
Webkolog'u takipte kalın!
Hepinize bol kodlu ve başarılı projeler dilerim!
0 yorum:
Yorum Gönder