JavaScript Nedir, Ne İşe Yarar?

01JavaScript Nedir?

JavaScript nedir sorusunun en pratik yanıtı: bir web sayfasında tıkladığınızda, yazdığınızda ya da kaydırdığınızda tepki veren her şeyin arkasındaki dil. Açılan menü, sepete ekle düğmesi, anlık arama önerisi ya da harita üzerindeki yakınlaştırma JavaScript ile çalışır.

Dil, 1990'ların ortasında tarayıcılar için ortaya çıktı ve ECMAScript adlı bir standartla tanımlanır. Adındaki benzerliğe rağmen Java ile doğrudan bir ilişkisi yoktur; söz dizimi ve çalışma biçimi oldukça farklıdır.

Bugün JavaScript yalnız tarayıcıyla sınırlı değil. Sunucularda, mobil uygulamalarda, masaüstü programlarda ve hatta küçük cihazlarda çalışabiliyor. Bu yaygınlık, onu yazılıma başlayanlar için en verimli dillerden biri yapıyor.

JavaScript yorumlanan ve dinamik tipli bir dildir: kodu çalıştırmadan önce ayrı bir derleme adımı gerekmez, değişkenlerin türü de çalışma anında belirlenir. Bu, hızlı deneme yapmayı kolaylaştırır; ama büyük projelerde tür hatalarının geç fark edilmesine de yol açabilir.

02HTML, CSS ve JavaScript Nasıl Birlikte Çalışır?

Bir web sayfasını ev gibi düşünebilirsiniz. HTML duvarlar ve odalardır, CSS boya ve mobilyadır, JavaScript ise elektrik tesisatıdır: ışığı yakar, kapıyı açar, alarmı çalıştırır.

Üçü birbirinin yerini tutmaz. İçerik HTML'de, görünüm CSS'te kalmalı; JavaScript yalnız davranış için kullanılmalıdır. Bu ayrım hem bakımı kolaylaştırır hem de JavaScript yüklenmese bile içeriğin görünmesini sağlar.

Sayfa tarayıcıda açıldığında HTML, DOM denen bir ağaç yapısına dönüşür. JavaScript bu ağaca erişir; bir öğeyi bulur, metnini değiştirir, yeni öğe ekler ya da bir olayı dinler.

<p id="mesaj">Merhaba!</p>
<button id="dugme">Değiştir</button>

<script>
  const mesaj = document.getElementById("mesaj");
  document.getElementById("dugme").addEventListener("click", () => {
    mesaj.textContent = "JavaScript çalıştı.";
  });
</script>

03JavaScript Ne İşe Yarar?

JavaScript ne işe yarar sorusunun yanıtı, kullanıldığı ortama göre genişler. Tarayıcıda kullanıcı deneyimini, sunucuda iş mantığını, mobil ve masaüstünde ise uygulamanın kendisini kurar.

Tarayıcıda JavaScript

Tarayıcıda JavaScript en çok şu işler için kullanılır: form doğrulama, açılır menü ve sekmeler, görsel galerileri, sayfa yenilenmeden veri çekme, harita ve grafikler, sepet ve ödeme adımları. İyi kurgulanmış bir arayüzde bu davranışlar kullanıcıyı yormadan yönlendirir; bunun planlaması UI/UX tasarım sürecinin konusudur.

Sunucuda JavaScript

Node.js, JavaScript'i tarayıcı dışında çalıştıran bir ortamdır. Onunla API'ler, gerçek zamanlı mesajlaşma servisleri, dosya işleme betikleri ve komut satırı araçları yazılır. Aynı dilin hem ön yüzde hem arka yüzde kullanılması küçük ekiplerin işini kolaylaştırır.

Mobil ve Masaüstü

React Native gibi araçlarla mobil uygulama, Electron gibi araçlarla masaüstü programı JavaScript ile geliştirilebilir. Günlük kullandığınız bazı kod editörleri ve mesajlaşma uygulamaları bu yolla yapılmıştır.

04Temel Kavramlar ve Örnekler

JavaScript öğrenmeye başlayan birinin önce şu yapı taşlarını oturtması gerekir. Aşağıdaki JavaScript örnekleri tarayıcının geliştirici konsolunda (F12) doğrudan denenebilir.

• Değişkenler: let ve const ile değer saklanır; değişmeyecek değerler için const tercih edilir.
• Veri türleri: metin (string), sayı (number), mantıksal (boolean), dizi (array), nesne (object).
• Fonksiyonlar: tekrar eden işi bir isim altında toplar; ok fonksiyonu kısa yazım sağlar.
• Dizi yöntemleri: map, filter, find ve reduce ile listeler okunaklı biçimde işlenir.
• Olaylar: click, input, submit gibi kullanıcı hareketlerine tepki verilir.
• Asenkron kod: fetch, Promise ve async/await ile veri beklenirken sayfa donmaz.

const urunler = [
  { ad: "Zeytinyağı", fiyat: 320 },
  { ad: "Sabun", fiyat: 90 },
  { ad: "Bal", fiyat: 410 }
];

const pahalilar = urunler.filter(u => u.fiyat > 300).map(u => u.ad);
console.log(pahalilar); // ["Zeytinyağı", "Bal"]

async function kullaniciGetir() {
  const yanit = await fetch("https://jsonplaceholder.typicode.com/users/1");
  const veri = await yanit.json();
  console.log(veri.name);
}
kullaniciGetir();

05JavaScript ve Site Performansı

JavaScript güçlüdür ama bedelsiz değildir. Tarayıcı her betiği indirmek, ayrıştırmak ve çalıştırmak zorundadır. Fazla ya da gereksiz JavaScript, özellikle orta seviye telefonlarda sayfanın geç tepki vermesine yol açar.

Google'ın etkileşim ölçütü INP, bir tıklamaya sayfanın ne kadar sürede yanıt verdiğini ölçer ve 200 ms altı iyi kabul edilir. Ağır betikler, kullanılmayan kütüphaneler ve çok sayıda üçüncü taraf etiketi bu değeri bozan başlıca etkenlerdir.

Pratik kurallar basittir: yalnız gereken kodu yükleyin, kritik olmayan betikleri erteleyin, aynı işi yapan birden fazla kütüphane kullanmayın. Bu ölçüm ve iyileştirme işi hız ve performans yönetimi kapsamında düzenli yapılmalıdır. Telefonda akıcı bir deneyim için mobil uyumlu tasarım ile birlikte düşünülmesi gerekir.

06Yeni Başlayanların Sık Yaptığı Hatalar

JavaScript esnek bir dildir; bu esneklik başlangıçta hata yapmayı da kolaylaştırır. Aşağıdaki tuzakları tanımak, saatlerce süren hata ayıklamaların önüne geçer.

• == yerine === kullanmamak: Gevşek karşılaştırma, türleri kendiliğinden dönüştürür ve beklenmedik sonuçlar verir; katı karşılaştırma daha güvenlidir.
• var ile değişken tanımlamak: Kapsam sorunlarına yol açar; modern kodda let ve const kullanılır.
• Asenkron kodu beklememek: fetch sonucu gelmeden veriyi kullanmaya çalışmak, tanımsız değer hatalarının en yaygın nedenidir.
• Konsoldaki hataları görmezden gelmek: Tarayıcı konsolu hatanın satırını ve nedenini çoğu zaman açıkça söyler.
• Kullanıcı girdisine güvenmek: Tarayıcıdaki doğrulama kolaylık içindir; güvenlik için aynı kontrol mutlaka sunucuda da yapılmalıdır.
• Her iş için yeni paket eklemek: Birkaç satırla çözülebilecek işler için kütüphane eklemek, sayfayı ağırlaştırır ve bakım yükü getirir.

07JavaScript Ekosistemi: React, TypeScript, Node.js

JavaScript'in etrafında çok geniş bir araç ekosistemi vardır. Yeni başlayanın kafasını en çok karıştıran da budur: hangi aracın ne işe yaradığı.

React gibi kütüphaneler arayüzü bileşenlere bölerek büyük projeleri yönetilebilir kılar; ayrıntılar React nedir yazımızda. TypeScript, JavaScript'e tip sistemi ekler ve hataları kod çalışmadan yakalar; farkları TypeScript nedir yazısında anlattık.

npm ise paket yöneticisidir; başkalarının yazdığı hazır kod parçalarını projeye eklemenizi sağlar. Ön yüz ile arka yüzün sınırını netleştirmek için frontend ve backend farkı yazısı da yol gösterir.

08JavaScript Öğrenmek İçin Yol Haritası

JavaScript öğrenmek için pahalı bir kurulum gerekmez; bir tarayıcı ve bir kod editörü yeterlidir. Önemli olan sırayı doğru kurmak ve her kavramı küçük bir projeyle pekiştirmektir.

1. HTML ve CSS ile basit bir sayfa hazırlayın.
2. Değişken, koşul, döngü ve fonksiyon konularını konsolda deneyin.
3. DOM ile sayfadaki öğeleri seçip değiştirmeyi öğrenin.
4. Bir yapılacaklar listesi ya da hesap makinesi gibi küçük bir proje bitirin.
5. fetch ve async/await ile açık bir API'den veri çekin.
6. Modüller, npm ve bir derleme aracıyla tanışın; ardından bir kütüphaneye geçin.

Güvenilir Kaynaklar

Dilin başvuru kaynağı olarak MDN Web Docs en güvenilir adreslerden biridir. Video ve kurslar faydalıdır ama asıl öğrenme, hata yapıp düzelttiğiniz kendi projelerinizde gerçekleşir.