JavaScript ile Etkileşimli Web Siteleri

Anlayalım

JavaScript, web sitelerinin kullanıcılarla etkileşim kurmasını sağlayan güçlü bir programlama dilidir. HTML ve CSS'in aksine, JavaScript kullanıcı eylemlerine yanıt verebilir, sayfa içeriğini dinamik olarak değiştirebilir ve web uygulamalarına interaktivite katabilir. Bu yazıda, çeşitli JavaScript özelliklerini ve etkileşimli web siteleri oluşturma yöntemlerini örneklerle inceleyeceğiz.

Basit Bir Alert Kutusu

JavaScript ile etkileşime başlamak için basit bir alert kutusu oluşturalım. Bu kutu, kullanıcı bir butona tıkladığında ekranda bir mesaj gösterecek. Alert kutuları, kullanıcıya bilgi vermek veya dikkatini çekmek için kullanışlıdır.

<button onclick="showAlert()">Tıkla</button>
<script>
function showAlert() {
    alert('Merhaba Dünya!');
}
</script>
        

Yukarıdaki kodda, bir buton ve bir JavaScript fonksiyonu bulunmaktadır. Butona tıklandığında showAlert() fonksiyonu çağrılır ve bu fonksiyon bir alert kutusu gösterir. Bu basit etkileşim, JavaScript'in temel işlevselliğini anlamak için iyi bir başlangıçtır.

DOM Manipülasyonu

Document Object Model (DOM), web sayfasının yapısını temsil eden bir modeldir. JavaScript ile DOM'u manipüle ederek sayfadaki elemanları dinamik olarak değiştirebiliriz. Bu bölümde, DOM manipülasyonu örnekleri üzerinde duracağız.

Bir Elemanın İçeriğini Değiştirmek

JavaScript kullanarak HTML elemanlarının içeriğini değiştirebiliriz. Aşağıdaki örnekte, bir butona tıklandığında bir paragrafın içeriğini değiştireceğiz.

<p id="demo">Bu bir paragraftır.</p>
<button onclick="changeContent()">İçeriği Değiştir</button>
<script>
function changeContent() {
    document.getElementById('demo').innerHTML = 'İçerik değiştirildi!';
}
</script>
        

Bu kodda, id özelliği demo olan bir paragraf ve bir buton bulunmaktadır. Butona tıklandığında, changeContent() fonksiyonu çalışır ve bu fonksiyon paragrafın içeriğini değiştirir. document.getElementById() fonksiyonu, belirli bir id'ye sahip HTML elemanını seçmek için kullanılır.

Bir Elemanı Gizlemek ve Göstermek

JavaScript ile HTML elemanlarını gizleyebilir veya gösterebiliriz. Aşağıdaki örnekte, bir butona tıklandığında bir paragrafı gizleyip göstereceğiz.

<p id="toggleText">Gizle ve göster!</p>
<button onclick="toggleVisibility()">Gizle/Göster</button>
<script>
function toggleVisibility() {
    var element = document.getElementById('toggleText');
    if (element.style.display === 'none') {
        element.style.display = 'block';
    } else {
        element.style.display = 'none';
    }
}
</script>
        

Bu kod, id özelliği toggleText olan bir paragraf ve bir buton içerir. Butona tıklandığında, toggleVisibility() fonksiyonu çalışır ve paragrafın görünürlüğünü değiştirir. Eğer paragraf gizliyse, görünür hale gelir; eğer görünürse, gizlenir. Bu işlem, elemanın style.display özelliği kullanılarak yapılır.

Etkinlik Dinleyicileri

JavaScript'te etkinlik dinleyicileri, kullanıcı etkileşimlerini izlemek ve bunlara yanıt vermek için kullanılır. Bu bölümde, fareyle bir kutunun üzerine gelindiğinde rengini değiştiren bir örneği inceleyeceğiz.

<div id="colorBox" style="width:100px; height:100px; background-color:blue;"></div>
<script>
var box = document.getElementById('colorBox');
box.addEventListener('mouseover', function() {
    box.style.backgroundColor = 'red';
});
box.addEventListener('mouseout', function() {
    box.style.backgroundColor = 'blue';
});
</script>
        

Bu kodda, id özelliği colorBox olan bir div elemanı bulunmaktadır. JavaScript ile bu eleman üzerine fareyle gelindiğinde (mouseover), arka plan rengi kırmızıya döner. Fare elemandan ayrıldığında (mouseout), arka plan rengi tekrar mavi olur. addEventListener() fonksiyonu, belirli bir etkinlik gerçekleştiğinde çalışacak bir fonksiyon eklemek için kullanılır.

Form Doğrulama

Form doğrulama, kullanıcıların form alanlarına doğru veriler girmesini sağlamak için önemlidir. Aşağıdaki örnekte, bir formun doğrulanmasını göstereceğiz. Bu örnek, kullanıcının ad alanını doldurmasını zorunlu kılar.

<form name="myForm" onsubmit="return validateForm()">
  Ad: <input type="text" name="fname">
  <input type="submit" value="Gönder">
</form>
<script>
function validateForm() {
    var x = document.forms["myForm"]["fname"].value;
    if (x

 == "") {
        alert("Ad alanı boş bırakılamaz");
        return false;
    }
}
</script>
        

Bu kodda, bir form ve bir JavaScript doğrulama fonksiyonu bulunmaktadır. Kullanıcı formu gönderdiğinde (submit), validateForm() fonksiyonu çalışır. Bu fonksiyon, ad alanının boş olup olmadığını kontrol eder. Eğer boşsa, bir uyarı mesajı gösterir ve form gönderme işlemini durdurur (return false). Bu şekilde, kullanıcının formu doğru şekilde doldurması sağlanır.