JavaScript Ne İçin Kullanılır? Web, Node.js ve Modern Ekosistem Rehberi

JavaScript, modern internetin tartışılamaz temelidir. Dünyadaki tüm web sitelerinin yüzde 98’inden fazlasında çalışan JavaScript; statik HTML/CSS sayfalarına hareket, etkileşim ve yaşam katar. Dahası Node.js sayesinde tarayıcı kabuğunu kırmış ve sunucu tarafında, mobil uygulamalarda (React Native) ve masaüstü yazılımlarında (Electron) da en çok kullanılan dil haline gelmiştir.

JavaScript ile Hangi Alanlarda Neler Geliştirilir?

JavaScript öğrendiğinde "Full-Stack" (uçtan uca) geliştirici olma potansiyeline ulaşırsın:

• İnteraktif Web Arayüzleri: Tıklanınca açılan menüler, kaydırma efektleri, form doğrulamaları ve sayfa yenilenmeden güncellenen canlı bileşenler.
• Tek Sayfa Uygulamaları (SPA): React, Vue.js veya Angular gibi kütüphanelerle Gmail veya Spotify web gibi akıcı web uygulamaları.
• Sunucu Tarafı API ve Backend: Node.js ve Express/NestJS kullanarak veritabanına bağlanan, kimlik doğrulayan yüksek performanslı mikroservisler.
• Çapraz Platform Mobil Uygulamalar: React Native ile hem iOS hem Android cihazlara tek bir JavaScript/TypeScript koduyla yerel performanslı uygulamalar üretme.
• Masaüstü Uygulamaları: VS Code, Discord ve Slack gibi masaüstü uygulamaları JavaScript ve Electron teknolojisiyle geliştirilmiştir.

Adım Adım JavaScript Öğrenme Rehberi

1. 1 1. Tarayıcı Konsolu ile Başla. Hiçbir şey kurmadan tarayıcında F12 tuşuna basıp Console sekmesinde ilk kodlarını çalıştırabilirsin.
2. 2 2. Modern Sözdizimi (ES6+). let, const, ok fonksiyonları (arrow functions), şablon dizgileri (template strings) ve yapı bozma (destructuring) kavramlarını öğren.
3. 3 3. DOM Manipülasyonu. document.querySelector, addEventListener ve textContent ile HTML öğelerini seçip dinamik olarak değiştirmeyi deneyimle.
4. 4 4. Asenkron JavaScript (Async / Await). İnternetten veri çekmek zaman alır. Promise ve async/await yapısını, fetch() API ile dış dünyadan veri almayı kavra.
5. 5 5. Bir Modern Çatıya Geç (React/Vue). Temel JavaScript (Vanilla JS) oturunca modern bileşen tabanlı web geliştirmeye adım at.

JavaScript Nerede ve Hangi Uygulamayla Çalıştırılır? (Kurulum ve Ayarlar)

JavaScript, bilgisayarında zaten yüklü olan internet tarayıcısında (Chrome, Firefox, Edge, Safari) ekstra hiçbir kurulum gerektirmeden doğrudan çalışır; sunucu tarafı için ise Node.js kurulur.

Tarayıcı Konsolu (F12 — Sıfır Kurulum)

Herhangi bir web sayfasında F12 tuşuna basıp "Console" sekmesine geçerek JavaScript kodlarını saniyeler içinde yazıp çalıştırabilirsin.

Aracı incele →

VS Code + Live Server (Web Projeleri İçin)

HTML sayfasına <script defer src="app.js"></script> bağlayıp VS Code Live Server ile çalıştırdığında yaptığın her değişiklik anında tarayıcıya yansır.

Aracı incele →

Node.js LTS (Terminalde Çalıştırmak İçin)

Tarayıcı açmadan doğrudan terminalde node app.js komutuyla JavaScript çalıştırmak ve npm paketlerini kullanmak için Node.js kurulur.

Aracı incele →

JavaScript Kurarken Yapılması Gereken Kritik Ayarlar

• ✓

  1. HTML İçine Doğru Bağlama (defer Ayarı)

  JavaScript dosyasını HTML’e bağlarken <script defer src="app.js"></script> şeklinde defer niteliğini ekle; böylece HTML elemanları yüklenmeden JS çalışıp hata vermez.

• ✓

  2. Node.js LTS Kurulumu

  nodejs.org adresinden "LTS (Önerilen)" sürümü indirip kur. Kurulum otomatik olarak hem node çalışma motorunu hem de npm paket yöneticisini PATH’e ekler.

• ✓

  3. VS Code ESLint / Prettier Ayarı

  Yazım hatalarını ve unutulan parantezleri anında görmek için VS Code’da "ESLint" ve otomatik kod düzenleme için "Prettier" eklentisini etkinleştir.

İlk JavaScript Kodunu Çalıştırma Komutları:

JavaScript Kurulum & Çalıştırma Kopyala

# 1. Node.js ile terminalden doğrudan çalıştırma:
node -v
node app.js

# 2. Veya index.html içine bağlayarak tarayıcıda çalıştırma:
# <script defer src="app.js"></script>

Pratik Bir JavaScript Kod Örneği

Aşağıdaki örnekte dış bir API’den asenkron veri çeken ve güvenli şekilde ekrana basan modern bir fonksiyon yer almaktadır:

// Modern Asenkron Veri Çekme
async function kullanicilariGetir() {
  try {
    const yanit = await fetch("https://jsonplaceholder.typicode.com/users?_limit=3");
    if (!yanit.ok) {
      throw new Error(`HTTP Hatası! Durum: ${yanit.status}`);
    }
    const kullanicilar = await yanit.json();
    
    kullanicilar.forEach(kullanici => {
      console.log(`👤 ${kullanici.name} - E-posta: ${kullanici.email}`);
    });
  } catch (hata) {
    console.error("Veri alınırken sorun çıktı:", hata.message);
  }
}

kullanicilariGetir();

Yeni Başlayanların En Sık Yaptığı 3 Hata

JavaScript yazarken dikkat etmen gereken kritik noktalar:

• == ile === Arasındaki Farkı Bilmemek: Zayıf eşitlik (==) tür dönüşümü yaparak "5" == 5 ifadesini doğru kabul eder. Daima katı eşitlik (===) kullan.
• Asenkron Kodun Sırasını Karıştırmak: fetch() çağrısı hemen sonuç döndürmez; await kullanmadan veriyi okumaya çalışırsan "undefined" veya bekleyen Promise ile karşılaşırsın.
• innerHTML ile Güvenlik Açığı Yaratmak: Kullanıcıdan gelen girdiyi doğrudan innerHTML içine yazmak XSS (Cross-Site Scripting) saldırılarına yol açar. Daima textContent tercih et.