Merhaba! Eğer web geliştirme, mobil uygulamalar veya hatta sunucu tarafı programlama ile ilgileniyorsanız, JavaScript (kısaca JS) kaçınılmaz bir şekilde yolunuzun kesişeceği bir dildir. Bu makalede, JavaScript'in ne olduğunu, tarihçesini, temel kavramlarını, syntax'ını, ileri düzey özelliklerini, kullanım alanlarını, güvenlik yönlerini ve en iyi pratikleri uzun ve detaylı bir şekilde ele alacağız. Makale, yeni başlayanlar için temel bir giriş niteliğinde olacakken, deneyimli geliştiricilere de hatırlatma ve derinlemesine bakış sunacak. JavaScript, dinamik web sayfaları oluşturmanın ötesinde, modern yazılım ekosisteminin temel taşlarından biri haline geldi. HTML ve CSS ile birleştiğinde tam bir web stack'i oluşturur. Hazırsanız, başlayalım! Daha fazla kaynak ve örnek kodlar için https://www.gulgec.tr adresini ziyaret edebilirsiniz.

JavaScript Nedir ve Neden Önemlidir?

JavaScript, yüksek seviyeli, yorumlanan (interpreted) bir programlama dilidir. Başlangıçta web tarayıcılarında çalışmak üzere tasarlanmış olsa da, bugün Node.js gibi ortamlarla sunucu tarafında da kullanılır. "Script" kelimesi, onun betik (scripting) dili olduğunu vurgular; yani derlenmeden doğrudan çalıştırılır. JavaScript, ECMAScript (ES) standartlarına dayanır – bu, dilin resmi spesifikasyonudur ve yıllık güncellemelerle evrilir (örneğin ES6, ES2020).

JavaScript'in önemi şu noktalarda öne çıkar:

  • Dinamik İçerik: HTML'nin statik yapısını dinamik hale getirir; kullanıcı etkileşimleri (tıklama, form gönderme) ile sayfayı günceller.
  • Çok Yönlülük: Tarayıcı (client-side), sunucu (server-side), mobil (React Native), masaüstü (Electron) ve hatta IoT (Nesne İnterneti) için kullanılır.
  • Geniş Ekosistem: NPM (Node Package Manager) ile milyonlarca paket (library/framework) mevcut; React, Vue, Angular gibi framework'ler JS tabanlı.
  • Performans: Modern motorlar (V8, SpiderMonkey) sayesinde hızlı çalışır; just-in-time (JIT) derleme ile optimize edilir.
  • Ücretsiz ve Açık: Her tarayıcıda yerleşik; öğrenmesi kolay, C-like syntax ile erişilebilir.
  • İş Olanakları: Front-end, back-end, full-stack geliştiriciler için vazgeçilmez; Stack Overflow anketlerinde en popüler dillerden biri.

JavaScript, "Java" ile karıştırılır ama tamamen farklıdır – isim benzerliği pazarlama stratejisinden kaynaklanır. JS, prototip tabanlı nesne yönelimli (OOP) destekler, fonksiyonel programlama paradigmalarını da barındırır.

JavaScript'in Tarihçesi

JavaScript'in hikayesi, 1990'ların ortasında başlar. Netscape Navigator tarayıcısında dinamik içerik ihtiyacı doğdu. Brendan Eich, 1995'te sadece 10 günde "Mocha" adlı bir dil geliştirdi; sonra "LiveScript" oldu ve Sun Microsystems ile işbirliğiyle "JavaScript" adını aldı (Java'nın popülaritesinden yararlanmak için).

  • 1995-1997: Doğuş: Netscape 2.0 ile tanıtıldı. ECMA International'a standartlaştırıldı (ECMAScript 1).
  • 1990'lar Sonu: Tarayıcı Savaşları: Microsoft'un JScript'i (IE için) rekabet yarattı; uyumsuzluklar (DOM farklılıkları) sorun oldu.
  • 2000'ler: AJAX ve Yükseliş: XMLHttpRequest ile asenkron veri yükleme (AJAX) popülerleşti; Gmail gibi uygulamalar JS'yi vazgeçilmez kıldı.
  • 2009: Node.js: Ryan Dahl, JS'yi sunucuya taşıdı; olay tabanlı, non-blocking I/O ile skalabilite sağladı.
  • 2015: ES6 (ECMAScript 2015): Büyük devrim; let/const, arrow functions, classes, promises gibi özellikler eklendi. Babel gibi transpiler'larla geriye uyumlu hale geldi.
  • 2016-2023: Yıllık Güncellemeler: ES7 (async/await), ES8 (Object.entries), ES2020 (BigInt, optional chaining) gibi yenilikler. TypeScript (tip güvenli JS) popülerleşti.
  • Günümüz: ES2023+ ile logical assignment, top-level await gibi özellikler. JS, WebAssembly ile entegre; Deno, Bun gibi runtime'lar alternatif sunuyor.

JS'nin evrimi, web'in büyümesiyle paralel gitti; bugün milyarlarca cihazda çalışıyor.

JavaScript'in Temel Syntax'ı ve Kavramları

JS kodu, <script> etiketiyle HTML'e gömülür veya .js dosyası olarak bağlanır: <script src="script.js"></script>. Console.log() ile debug yapılır.

  • Yorum Satırları: // Tek satır veya /* Çok satır */.
  • Değişkenler: var, let, const. Var global/hoisted; let/const block-scoped.

    let isim = "Ahmet"; // String
    const PI = 3.14; // Sabit, number
    var dizi = [1, 2, 3]; // Array
    Veri tipleri: Primitive (string, number, boolean, null, undefined, symbol, bigint); Reference (object, array, function).
  • Operatörler: Aritmetik (+, -, *, /), Karşılaştırma (==, ===, >, <), Mantıksal (&&, ||, !), Atama (=, +=).
  • Koşullar: If-else, switch.

    if (yas >= 18) {
    console.log("Yetişkin");
    } else {
    console.log("Çocuk");
    }
  • Döngüler: For, while, do-while, forEach, for...of.

    for (let i = 0; i < 5; i++) {
    console.log(i);
    }
  • Fonksiyonlar: Normal veya arrow.

    function topla(a, b) {
    return a + b;
    }
    const carp = (a, b) => a * b; // Arrow function

JS, weakly typed (zayıf tipli); otomatik tip dönüşümü yapar (örneğin "1" + 1 = "11").

Nesne Yönelimli Programlama (OOP) ve Prototip Zinciri

JS, prototip tabanlı OOP kullanır. Nesneler, prototiplerden miras alır.

  • Object Literal: { anahtar: deger }.

    const kisi = {
    isim: "Ayşe",
    selamVer: function() { console.log("Merhaba"); }
    };
  • Classes (ES6+): Syntactic sugar.

    class Araba {
    constructor(marka) {
    this.marka = marka;
    }
    calistir() {
    console.log("Vroom!");
    }
    }
    const benimArabam = new Araba("Toyota");
  • Inheritance: extends ile.

    class ElektrikliAraba extends Araba {
    sarjEt() {
    console.log("Şarj oluyor.");
    }
    }

Prototip zinciri: Nesneler, __proto__ ile üst nesneye bağlanır; method paylaşımı sağlar.

DOM Manipülasyonu ve Etkileşim

JS'nin gücü, Document Object Model (DOM) ile ortaya çıkar. DOM, HTML'yi ağaç yapısında temsil eder.

  • Seçme: document.getElementById('id'), querySelector('.class').
  • Değiştirme: element.textContent = 'Yeni metin';, element.style.color = 'red';.
  • Ekleme/Silme: createElement, appendChild, removeChild.

Örnek: Buton tıklama.

document.getElementById('btn').addEventListener('click', () => {
alert('Tıklandı!');
});

Eventler: click, submit, load, mouseover vb.

Asenkron Programlama: Promises, Async/Await

JS, single-threaded ama non-blocking. Callback hell'i önlemek için:

  • Promises: new Promise((resolve, reject) => { ... }).

    fetch('api/url')
    .then(response => response.json())
    .catch(error => console.error(error));
  • Async/Await (ES7): Synchronous gibi yazar.

    async function veriGetir() {
    try {
    const response = await fetch('api/url');
    const data = await response.json();
    console.log(data);
    } catch (error) {
    console.error(error);
    }
    }

İleri Düzey Özellikler: ES6 ve Ötesi

  • Destructuring: const { isim, yas } = kisi;
  • Spread/Rest: [...dizi], function(...args).
  • Modules: import { fonk } from './modul.js'; export default class;.
  • Generators: function* gen() { yield 1; }
  • BigInt: Büyük sayılar için 1n.
  • Optional Chaining: obj?.prop?.method()
  • Nullish Coalescing: deger ?? varsayilan

Framework'ler ve Kütüphaneler

  • Front-end: React (komponent tabanlı UI), Vue (progresif), Angular (full framework).
  • Back-end: Express.js (Node için web server), Next.js (React için server-side rendering).
  • Diğer: jQuery (eski DOM manipülasyonu), Lodash (utility), Three.js (3D grafik).

NPM ile yükleme: npm install paket.

Güvenlik ve En İyi Pratikler

  • XSS Önleme: Kullanıcı girdilerini sanitize et (DOMPurify).
  • CSRF: Token'lar kullan.
  • Performans: Minify JS, async/defer script'ler.
  • En İyi Pratikler: Modüler kod, strict mode ('use strict';), linting (ESLint), testing (Jest).
  • Hatalar: Hoisting, scope hataları, asenkron senkronizasyon.

Sonuç

JavaScript, web'in vazgeçilmez dili; öğrenmesi eğlenceli, uygulaması güçlü. Bu makale, temelinden ileri düzeyine kadar kapsadı. Pratik yaparak ustalaşın; console'da deneyin, küçük projeler yapın (todo app, API consumer). Daha detaylı örnekler ve kaynaklar için https://www.gulgec.tr sitesini inceleyin. Kodlama yolculuğunuzda başarılar!