Vanilla JavaScript nedir?

Mehmet · Dün 21:41 da

Vanilla JavaScript nedir?

Vanilla JavaScript, harici bir kütüphane veya framework’e dayanmadan JavaScript kullanma yaklaşımıdır. Bu rehber tarayıcıdaki kullanımını ele alır. Yani ayrı bir dil değildir; React, Vue veya jQuery gibi ek bir katman olmadan JavaScript’in kendi söz dizimini ve tarayıcının yerleşik Web API’lerini kullanma yaklaşımıdır.

Nasıl çalışır?

Tarayıcı, HTML dosyasındaki <script> etiketiyle yüklenen JavaScript’i çalıştırır. Kod; değişkenler, fonksiyonlar, koşullar ve olay dinleyicileriyle sayfanın davranışını değiştirir. Örneğin bir düğmeye tıklanmasını dinleyebilir, bir HTML öğesinin metnini değiştirebilir veya bir sunucuya istek gönderebilir.

Vanilla JavaScript kullanırken DOM, Fetch API, Web Storage ve olay sistemi gibi tarayıcı tarafından sağlanan özelliklerden yararlanılır. Bu özellikler bir framework değildir; tarayıcının JavaScript ile etkileşim kurmasını sağlayan yerleşik araçlardır.

Küçük bir sayaç örneği

Aşağıdaki dosya, düğmeye her basıldığında ekrandaki sayacı artırır. Harici paket veya derleme adımı gerektirmez.

Kod:

<!doctype html>
<html lang="tr">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <style>button { border-radius: 4px; }</style>
  <title>Vanilla JavaScript örneği</title>
</head>
<body>
  <button type="button" id="artir">Artır</button>
  <p id="sayac" aria-live="polite">Sayaç: 0</p>

  <script>
    let sayi = 0;
    const dugme = document.querySelector("#artir");
    const sayac = document.querySelector("#sayac");

    dugme.addEventListener("click", function () {
      sayi += 1;
      sayac.textContent = "Sayaç: " + sayi;
    });
  </script>
</body>
</html>

Dosyayı index.html adıyla kaydedip tarayıcıda açın. Başarı durumunda düğmeye her tıklamada “Sayaç” değerinin bir arttığını görürsünüz. Düğme tepki vermiyorsa tarayıcının geliştirici araçlarındaki Console bölümünde yazım hatası olup olmadığını kontrol edin. Özellikle id değerinin JavaScript’teki seçiciyle aynı olması gerekir.

Bu örnekte querySelector HTML öğesini seçer, addEventListener tıklama olayını dinler ve textContent görünen metni günceller. Kodun sınırlaması, sayacın yalnızca sayfa açık kaldığı sürece bellekte tutulmasıdır. Sayfa yenilenirse sayi yeniden sıfırlanır; kalıcı veri için Web Storage veya sunucu tarafı depolama gerekir.

Ne zaman Vanilla JavaScript seçilmeli?

Seçim, projenin arayüz karmaşıklığına ve ekip ihtiyaçlarına göre yapılmalıdır. Küçük ve sınırlı etkileşimlerde doğrudan tarayıcı API’lerini kullanmak daha az bağımlılık ve daha az kurulum anlamına gelebilir. Büyük, çok bileşenli ve ekip tarafından sürdürülen uygulamalarda ise bir framework; bileşen düzeni, durum yönetimi ve ortak geliştirme kuralları sağlayabilir.

İhtiyaç	Uygun yaklaşım	Gerekçe
Basit form doğrulama veya menü	Vanilla JavaScript	Az kod ve düşük bağımlılık
Tek sayfada birkaç etkileşim	Vanilla JavaScript veya küçük bir yardımcı kütüphane	Projenin büyümesine göre esneklik
Çok sayıda bileşen ve karmaşık durum	Framework değerlendirmesi	Standart yapı ve ekip ölçeği

Tablo kesin bir kural değil, başlangıç kararını kolaylaştıran bir ölçüttür. Framework kullanmamak, uygulamanın otomatik olarak daha hızlı veya daha iyi olacağı anlamına gelmez; kullanılan kodun yapısı, DOM güncellemeleri ve veri akışı da önemlidir.

Sık yapılan hatalar

Vanilla JavaScript’i ayrı bir dil sanmak: Vanilla, JavaScript’in kütüphanesiz veya frameworksüz kullanımını anlatır.
DOM öğesi oluşmadan seçim yapmak: Script’i erken çalıştırırsanız querySelector beklenen öğeyi bulamayabilir. Script’i ilgili HTML’den sonra çalıştırın veya kodu DOM’un hazır olmasını bekleyecek şekilde düzenleyin.
Her işlemde innerHTML kullanmak: Yalnızca metin değiştirilecekse textContent daha uygun ve öngörülebilirdir.
Değişken durumu DOM’dan yönetmeye çalışmak: Uygulama büyüdükçe veriyi ayrı değişkenlerde tutup arayüzü bu veriden güncellemek, hatalı ve dağınık davranışları azaltır.
Tarayıcı özelliğini her ortamda varsaymak: Kodun hedeflediği tarayıcıları ve kullandığı Web API’lerinin destek durumunu uygulamaya başlamadan kontrol edin.

Sık sorulan sorular

Vanilla JavaScript ile sunucu tarafı uygulama yazılabilir mi?

JavaScript çalışma zamanı sunucu tarafını destekliyorsa yazılabilir. Ancak DOM ve document gibi tarayıcı nesneleri sunucuda kendiliğinden bulunmaz; sunucu kodu kendi çalışma ortamının API’lerini kullanır.

Vanilla JavaScript kullanmak için paket yöneticisi gerekir mi?

Hayır. Basit bir HTML dosyasına script ekleyerek başlayabilirsiniz. Paket yöneticisi; harici bağımlılıklar, test araçları veya derleme süreci gerektiğinde tercih edilir.

Vanilla JavaScript nedir?

Mehmet