JavaScript ile Etkileşimli Web Öğeleri Oluşturma

Stajımın dördüncü haftasında, kullanıcı etkileşimi sağlayan dinamik yapıları oluşturmak için JavaScript öğrenmeye başladım. HTML ve CSS ile oluşturduğum yapılar sabitken, JavaScript sayesinde bu yapılar artık kullanıcı eylemlerine göre değişebilir hale geldi.

JavaScript Nedir?

JavaScript, web sayfalarında etkileşim sağlamak için kullanılan bir programlama dilidir. Tarayıcıda çalışır ve buton tıklamaları, form doğrulamaları, içerik güncellemeleri gibi dinamik işlemleri gerçekleştirmeye yarar.

İlk JavaScript Kodum

Stajın ilk günlerinde yazdığım ilk JS kodu bir butona tıklanınca uyarı gösterilmesiydi:

<button onclick="gosterUyari()">Tıkla</button>

<script>
  function gosterUyari() {
    alert("Merhaba! Butona tıkladın.");
  }
</script>

Bu küçük örnek sayesinde kullanıcıyla etkileşim kurmanın ne kadar kolay olduğunu gördüm.

HTML Öğeleri ile Etkileşim

Bir paragrafın içeriğini JavaScript ile değiştirmek için şu kodu kullandım:

<p id="paragraf">Eski içerik</p>
<button onclick="degistir()">Değiştir</button>

<script>
  function degistir() {
    document.getElementById("paragraf").innerHTML = "Yeni içerik burada!";
  }
</script>

Form Doğrulama (Validation)

JavaScript kullanarak formda kullanıcı adı girilmediğinde uyarı verdim:

<form onsubmit="return kontrolEt()">
  <input type="text" id="kullaniciAdi" placeholder="Adınızı girin">
  <input type="submit" value="Gönder">
</form>

<script>
  function kontrolEt() {
    var ad = document.getElementById("kullaniciAdi").value;
    if(ad === "") {
      alert("Lütfen adınızı giriniz.");
      return false;
    }
    return true;
  }
</script>

Bu uygulama sayesinde form gönderimlerini daha güvenli hale getirmeyi öğrendim.

Değişkenler, Koşullar ve Döngüler

JavaScript dilinin temelini oluşturan değişkenler (var, let, const), koşul ifadeleri (if-else) ve döngüleri (for, while) öğrendim ve bolca pratik yaptım.

Karşılaştığım Zorluklar

• Fonksiyon çağırırken parantez unutmak
• HTML etiketleriyle etkileşim kurarken id’leri karıştırmak
• Konsol hatalarını çözmeyi öğrenmek zaman aldı

Uygulamalı Projem

Basit bir hesap makinesi yaptım. Kullanıcının girdiği iki sayıyı toplama, çıkarma, çarpma ve bölme fonksiyonlarıyla hesaplayan bir arayüz oluşturdum. Bu proje sayesinde değişken kullanımı ve fonksiyon mantığını pekiştirdim.

Genel Değerlendirme

JavaScript ile web sayfalarına hayat verdim diyebilirim. Kullanıcıların etkileşimde bulunabileceği öğeler oluşturmak, web programcılığının en eğlenceli yanlarından biri oldu. Şu an temel seviyede etkileşimli arayüzler yapabiliyor ve kullanıcı deneyimini artırabiliyorum.