JavaScript Seçiciler ve Operatörler

Bu yazıda, JavaScript DOM seçicileri (getElementById, querySelector), operatörler ve ileri düzey değişken kullanımı anlatılmaktadır.

1. DOM (Document Object Model) Nedir?

DOM, bir web sayfasının HTML yapısının JavaScript tarafından erişilebilir ve değiştirilebilir bir nesne modeli olarak temsil edilmesidir. JavaScript ile DOM'u manipüle ederek sayfadaki elemanları değiştirebiliriz.

2. DOM Seçicileri (Selectors)

HTML elemanlarını seçmek için kullanılan yöntemlerdir. İki ana kategori vardır:

2.1. Geleneksel Seçiciler

2.2. Modern Seçiciler (querySelector)

// HTML yapımız:
<h1 id="baslik">Merhaba</h1>
<div class="kutu">Kutu 1</div>
<div class="kutu">Kutu 2</div>

// Geleneksel seçiciler
let baslik = document.getElementById("baslik");
let kutular = document.getElementsByClassName("kutu");
let divler = document.getElementsByTagName("div");

// Modern seçiciler (önerilen)
let baslik2 = document.querySelector("#baslik");
let ilkKutu = document.querySelector(".kutu");       // İlk .kutu elemanı
let tumKutular = document.querySelectorAll(".kutu"); // Tüm .kutu elemanları

// CSS seçici kullanımı
let linkler = document.querySelectorAll("a.aktif"); // class="aktif" olan linkler
let input = document.querySelector("input[type='email']"); // type="email" olan input

3. JavaScript Operatörleri

Operatörler, değişkenler ve değerler üzerinde işlem yapmamızı sağlayan sembollerdir.

3.1. Aritmetik Operatörler

// Aritmetik operatör örnekleri
let a = 15;
let b = 4;

console.log(a + b);   // 19
console.log(a - b);   // 11
console.log(a * b);   // 60
console.log(a / b);   // 3.75
console.log(a % b);   // 3 (15 ÷ 4 = 3 kalan 3)
console.log(a ** 2);  // 225 (15²)

// String birleştirme (+ operatörü)
let ad = "Ahmet";
let soyad = "Yılmaz";
let tamAd = ad + " " + soyad; // "Ahmet Yılmaz"  

3.2. Atama Operatörleri

let x = 10;

x += 5;   // x = x + 5  → 15
x -= 3;   // x = x - 3  → 12
x *= 2;   // x = x * 2  → 24
x /= 4;   // x = x / 4  → 6
x %= 5;   // x = x % 5  → 1
x **= 3;  // x = x ** 3 → 1

// Artırma ve azaltma
let y = 5;
y++;      // y = 6 (sonradan artırma)
++y;      // y = 7 (önceden artırma)
y--;      // y = 6 (sonradan azaltma)
--y;      // y = 5 (önceden azaltma)

3.3. Karşılaştırma Operatörleri

3.4. Mantıksal Operatörler

4. Pratik Örnek: Form Kontrolü

Şimdi öğrendiklerimizi birleştirip pratik bir örnek yapalım:

  // HTML:
// <input type="text" id="kullaniciAdi" placeholder="Kullanıcı adı">
// <input type="number" id="yas" placeholder="Yaş">
// <button id="kontrolBtn">Kontrol Et</button>
// <p id="sonuc"></p>

// JavaScript:
document.addEventListener("DOMContentLoaded", function() {
    // Elemanları seç
    let kullaniciAdiInput = document.getElementById("kullaniciAdi");
    let yasInput = document.getElementById("yas");
    let kontrolBtn = document.getElementById("kontrolBtn");
    let sonucP = document.getElementById("sonuc");
    
    // Butona tıklanınca
    kontrolBtn.addEventListener("click", function() {
        // Değerleri al
        let kullaniciAdi = kullaniciAdiInput.value;
        let yas = Number(yasInput.value); // String'i number'a çevir
        
        // Kontroller yap (operatör kullanımı)
        let kullaniciAdiUzun = kullaniciAdi.length >= 3;
        let yasGecerli = yas >= 18 && yas <= 120;
        
        // Mantıksal operatörlerle karar ver
        if (kullaniciAdiUzun && yasGecerli) {
            sonucP.textContent = "✔️ Form geçerli!";
            sonucP.style.color = "green";
        } else {
            sonucP.textContent = "❌ Form geçersiz!";
            sonucP.style.color = "red";
            
            // Detaylı hata mesajı
            if (!kullaniciAdiUzun) {
                sonucP.textContent += " Kullanıcı adı en az 3 karakter olmalı.";
            }
            if (!yasGecerli) {
                sonucP.textContent += " Yaş 18-120 arasında olmalı.";
            }
        }
    });
});

5. Özet Tablosu: Hangi Seçici Ne Zaman Kullanılır?

Sonuç

Bu yazıda, JavaScript'in güçlü araçları olan DOM seçicileri ve operatörleri öğrendik. Artık web sayfalarındaki HTML elemanlarını seçebilir, bu elemanlar üzerinde matematiksel ve mantıksal işlemler yapabilirsiniz.

Öğrendiklerimizle basit form kontrolleri, dinamik içerik güncellemeleri ve kullanıcı etkileşimleri oluşturabiliriz.