BÖLÜM 1: GİRİŞ VE "ÖĞRENECEKLERİNİZ" PARAGRAFI

Bu kurs, hiç bilmeyen birini ileri seviye bir JavaScript geliştiricisi yapmayı hedefler. Sadece kod yazmayı değil, arka planda nelerin döndüğünü ve bir yazılımcı gibi nasıl problem çözüleceğini öğretir.

Öğrenecekleriniz Paragrafının Detaylı Açıklaması

• Sıfırdan ileri seviye, kendine güvenen ve modern bir JavaScript geliştiricisi olmak: Dilin en eski yapılarından en modern ES6+ özelliklerine kadar her şeyi öğrenerek tarayıcıda veya sunucuda kod yazabilir hale geleceksiniz.

• Portföyünüz için 6 adet harika gerçek dünya projesi inşa etmek: Sıkıcı ve sadece konsola yazı yazdıran uygulamalar yerine; insanların gerçekten kullanabileceği görsel, dinamik ve modern web uygulamaları yapacaksınız.

• JavaScript'in perde arkasını anlayarak işe hazır hale gelmek: Kodunuzun bilgisayar hafızasında nasıl tutulduğunu, tarayıcının bu kodu nasıl çalıştırdığını öğrenerek mülakatlarda öne geçeceksiniz.

• Bir geliştirici gibi düşünmek ve çalışmak: Karşılaştığınız bir hatayı Google, StackOverflow veya MDN (Mozilla Developer Network) kullanarak nasıl çözeceğinizi ve iş akışınızı nasıl yöneteceğinizi öğreneceksiniz.

• JavaScript Temelleri: Veri saklamak, kararlar vermek, kodları tekrar oynatmak için gerekli olan tüm temel araçları (değişkenler, döngüler, fonksiyonlar, nesneler) kazanacaksınız.

• Başlangıçtan itibaren Modern ES6+ dünyası: Kodları daha kısa ve okunabilir yazmamızı sağlayan ok fonksiyonları, dizileri parçalama ve yayma operatörleri gibi modern yetenekleri öğreneceksiniz.

• Modern Nesne Yönelimli Programlama (OOP): Sınıflar ve yapıcı metotlar kullanarak düzenli, tekrar kullanılabilir ve güvenli kod yapıları kuracaksınız.

• Karmaşık kavramlar (this, higher-order functions, closures): Çoğu geliştiricinin kafasını karıştıran, JavaScript'in en güçlü ve özel fonksiyon yeteneklerini tamamen çözeceksiniz.

• Asenkron JavaScript (Event loop, promises, async/await, AJAX ve API'ler): İnternetten veri çekmek, arka planda işlemler yapmak ve sayfa donmadan akıcı uygulamalar sunmak için bu yapıları öğreneceksiniz.

• Akış şemaları ve ortak kalıplar kullanarak kod mimarisi tasarlamak: Kod yazmaya başlamadan önce projenin planını yapmayı ve büyük projeleri yönetmeyi öğreneceksiniz.

• Modern Araçlar (NPM, Parcel, Babel ve ES6 modülleri): Gerçek şirketlerde kullanılan paket yöneticilerini ve kod dönüştürücü araçları kullanmayı öğreneceksiniz.

• 50'den fazla pratik meydan okuma ve ödev: Sadece izlemekle kalmayıp, çözümlü ödevlerle teorik bilginizi pratiğe dökeceksiniz.

• Soru-Cevap alanında hızlı destek: Takıldığınız her yerde topluluktan ve eğitmenden yardım alacaksınız.

• Kurs haritaları: Kendi kariyer hedefinize göre hangi bölümleri hangi sırayla izlemeniz gerektiğini seçeceksiniz.

BÖLÜM 2: JAVASCRIPT TEMELLERİ – KISIM 1 (JAVASCRIPT FUNDAMENTALS – PART 1)

Bu bölümde programlamanın en temel taşları ve JavaScript'in tarayıcı ile ilk teması işlenir.

1. Giriş ve İlk Adımlar (Section Intro, Hello World!, A Brief Introduction to JavaScript)

JavaScript, web sayfalarına canlılık ve etkileşim katan bir programlama dilidir. İlk olarak tarayıcının konsoluna bir yazı yazdırarak dünyaya merhaba deriz.

• Örnek: Tarayıcı ekranında sağ tıklayıp "İncele" (Inspect) dedikten sonra "Konsol" (Console) sekmesine gidip kod yazarız.

• Uygulama:

  console.log("Hello World!"); 
  // Konsolda 'Hello World!' yazısı görünür.

2. JavaScript Dosyasını Bağlamak (Linking a JavaScript File)

JavaScript kodları HTML dosyasına iki şekilde eklenebilir: Doğrudan HTML içine yazarak ya da dışarıdaki bir .js dosyasını bağlayarak. Gerçek projelerde kodların düzenli olması için dış dosya tercih edilir.

• Uygulama: Bir tane index.html bir tane de script.js dosyası açın. HTML dosyasının en altına şu kodu ekleyin:

  <script src="script.js"></script>

3. Değerler ve Değişkenler (Values and Variables)

Değer, program içindeki en küçük bilgi parçasıdır (Örn: "Ahmet" veya 25). Değişkenler ise bu değerleri içinde sakladığımız etiketli kutulardır.

• Örnek: Bir kişinin ismini hafızada tutmak.

• Uygulama:

  let firstName = "Ahmet";
  console.log(firstName); // Ahmet yazdırır.

4. Veri Tipleri (Data Types)

JavaScript'te değerlerin türleri vardır. En temel olanlar: Number (Sayı), String (Yazı), Boolean (Doğru/Yanlış), Undefined (Tanımlanmamış) ve Null (Boş). JavaScript "dinamik tipli" bir dildir, yani bir değişkenin türünü belirtmeniz gerekmez, sistem bunu değerden anlar.

• Uygulama:

  let age = 30;               // Number
  let name = "Zeynep";        // String
  let isCodingFun = true;     // Boolean
  let grandchildren;          // Undefined (Değer verilmedi)

5. Değişken Tanımlama Yolları (let, const and var)

• let: Değeri daha sonra değiştirilebilen değişkenler için kullanılır.

• const: Değeri asla değiştirilemeyen (sabit) değişkenler için kullanılır.

• var: Eski JavaScript sürümünden kalmadır, modern kodda güvenlik nedeniyle tercih edilmez.

• Uygulama:

  let points = 10;
  points = 20; // Bu çalışır.
  
  const birthYear = 1995;
  // birthYear = 2000; -> HATA verir, sabit değiştirilemez.

6. Temel Operatörler ve İşlem Önceliği (Basic Operators & Operator Precedence)

Matematiksel (+, -, *, /) ve karşılaştırma (>, <, >=, <=) işlemlerini yapmamızı sağlar. Matematikteki gibi işlemler belirli bir öncelik sırasına göre yapılır.

• Uygulama:

  const now = 2026;
  const ageAli = now - 1990;
  const ageVeli = now - 2010;
  console.log(ageAli > ageVeli); // true (Doğru) döndürür.

7. Metinler ve Şablon Dizileri (Strings and Template Literals)

Metinleri birleştirmek için eski yöntemde artı (+) işareti kullanılırdı. Modern JavaScript'te backtick (`) işaretleri kullanılarak yazılan Template Literals ile değişkenler metnin içine doğrudan gömülür.

• Uygulama:

  const name = "Can";
  const job = "Öğretmen";
  // Eski yöntem:
  const stringEski = "Ben " + name + ", bir " + job + "im.";
  // Modern yöntem (Template Literal):
  const stringYeni = `Ben ${name}, bir ${job}im.`;

8. Karar Mekizmaları (Taking Decisions: if / else Statements)

Kodun belirli şartlara göre farklı yollardan gitmesini sağlar. Şart doğruysa if bloğu, yanlışsa else bloğu çalışır.

• Uygulama: Ehliyet alma kontrolü:

  const age = 16;
  if (age >= 18) {
      console.log("Ehliyet alabilirsin! 🚗");
  } else {
      const yearsLeft = 18 - age;
      console.log(`Ehliyet almak için ${yearsLeft} yıl beklemen gerek.`);
  }

9. Tip Dönüşümü ve Zorlaması (Type Conversion and Coercion)

• Conversion (Dönüşüm): Bizim isteyerek bir tipi diğerine çevirmemizdir.

• Coercion (Zorlama): JavaScript'in arka planda tipleri otomatik olarak birbirine uydurmasıdır.

• Uygulama:

  // Dönüşüm
  const inputYear = "1998";
  console.log(Number(inputYear) + 10); // 2008
  
  // Zorlama
  console.log("Ben " + 23 + " yaşındayım"); // Sayı olan 23'ü otomatik yazıya çevirir.
  console.log("23" - "10" - 3); // Eksi işareti yazıları otomatik sayıya çevirir -> Sonuç: 10

10. Doğrusal ve Yanlışsal Değerler (Truthy and Falsy Values)

JavaScript'te tam olarak Boolean (true/false) olmayan ama mantıksal bir sorguya sokulduğunda false gibi davranan 5 değer vardır: 0, "" (boş yazı), undefined, null, NaN. Bunlar dışındaki her şey true kabul edilir.

• Uygulama:

  let money = 0; // 0 falsy bir değerdir.
  if (money) {
      console.log("Paran var.");
  } else {
      console.log("Paran yok ya da 0 lira!"); // Burası çalışır.
  }

11. Eşitlik Operatörleri (== vs. ===)

• === (Katı Eşitlik): Hem değerlerin hem de veri tiplerinin aynı olmasını ister. Güvenlidir.

• == (Gevşek Eşitlik): Tipleri önemsemez, sadece değerleri uydurmaya çalışır. Güvensizdir.

• Uygulama:

  console.log(18 === "18"); // false (Biri sayı, biri yazı)
  console.log(18 == "18");  // true (Yazıyı sayıya uydurur)

12. Mantıksal Operatörler (Boolean Logic & Logical Operators)

Birden fazla şartı birleştirmek için kullanılır. AND (ve -> &&), OR (veya -> ||), NOT (değil -> !).

• Uygulama:

  const hasDriversLicense = true;
  const hasGoodVision = false;
  console.log(hasDriversLicense && hasGoodVision); // false (İkisi de doğru olmalıydı)
  console.log(hasDriversLicense || hasGoodVision); // true (En az biri doğru olsa yeter)

13. Switch İfadesi (The switch Statement)

Bir değişkenin çok sayıda farklı değere eşit olma durumunu karmaşık if-else yapıları yerine daha temiz bir şekilde kontrol etmeyi sağlar.

• Uygulama:

  const day = "pazartesi";
  switch (day) {
      case "pazartesi":
          console.log("Kursa çalış");
          break;
      case "salı":
          console.log("Kodlama yap");
          break;
      default:
          console.log("Dinlen");
  }

14. İfadeler ve Deyimler (Statements and Expressions)

• Expression (İfade): Bir değer üreten her kod parçasıdır (Örn: 3 + 4 veya true).

• Statement (Deyim): Bir eylem gerçekleştiren büyük kod cümleleridir (Örn: Tüm bir if-else yapısı).

15. Koşul Operatörü / Ternary (The Conditional Operator)

Tek satırda hızlıca if-else yazmamızı sağlayan üçlü operatördür. şart ? doğruysa_burası : yanlışsa_burası şeklinde çalışır.

• Uygulama:

  const age = 20;
  const drink = age >= 18 ? "Kahve ☕" : "Süt 🥛";
  console.log(drink); // Kahve

16. JavaScript Sürümleri (JavaScript Releases: ES5, ES6+ and ESNext)

JavaScript sürekli gelişen bir dildir. 2015 yılında çıkan ES6 (ECMAScript 6) sürümü dile çağ atlatmıştır. Tarayıcıların eski kodları anlaması için Babel gibi araçlar kullanılır.

BÖLÜM 3: JAVASCRIPT TEMELLERİ – KISIM 2 (JAVASCRIPT FUNDAMENTALS – PART 2)

Bu bölümde kodlarımızı paketlemeyi, veri listeleri oluşturmayı ve döngülerle çalışmayı öğreniriz.

1. Katı Modu Aktif Etmek (Activating Strict Mode)

Kodun en başına yazılan bir metindir. JavaScript'in bazı hataları sessizce geçiştirmesini engeller, konsolda görünür hata verir ve bizi daha güvenli kod yazmaya zorlar.

• Uygulama:

  "use strict";
  let hasDriversLicense = false;
  const passTest = true;
  if (passTest) hasDriverLicense = true; // Yazım hatası yapıldı (s eksik)
  // Strict mode açık olduğu için konsolda "hasDriverLicense is not defined" hatası verir.

2. Fonksiyonlar (Functions)

Fonksiyonlar, tekrar tekrar kullanabileceğimiz kod bloklarıdır. İçine veri alabilir (parametre) ve dışarıya bir sonuç fırlatabilir (return).

• Uygulama:

  function meyveSıkacağı(elmalar, portakallar) {
      const meyveSuyu = `${elmalar} elma ve ${portakallar} portakal içeren meyve suyu.`;
      return meyveSuyu;
  }
  const tazeIçecek = meyveSıkacağı(2, 3);
  console.log(tazeIçecek);

3. Fonksiyon Tanımlama Türleri (Declarations vs. Expressions vs. Arrow)

Fonksiyon yazmanın üç yolu vardır:

• Declaration: Klasik yöntemdir, kodda tanımlanmadan önce bile çağrılabilir.

• Expression: Fonksiyon bir değişkene eşitlenir. Tanımlanmadan önce çağrılamaz.

• Arrow Function: Modern, tek satırlık ve kısa fonksiyonlar yazmak için ok (=>) işareti kullanılır.

• Uygulama:

  // Declaration
  function calcAge1(birthYear) { return 2026 - birthYear; }
  
  // Expression
  const calcAge2 = function (birthYear) { return 2026 - birthYear; };
  
  // Arrow
  const calcAge3 = birthYear => 2026 - birthYear;

4. Diziler (Introduction to Arrays & Methods)

Diziler, tek bir değişken içinde birden fazla veriyi sıra halinde saklamamızı sağlayan listelerdir. İçerisinde eleman ekleme, çıkarma gibi metotlar barındırır.

• Uygulama:

  const friends = ["Ali", "Veli", "Ayşe"];
  
  friends.push("Fatma"); // Sona eleman ekler -> ["Ali", "Veli", "Ayşe", "Fatma"]
  friends.pop();        // Sondan eleman çıkarır -> ["Ali", "Veli", "Ayşe"]
  friends.unshift("Can");// Başa eleman ekler -> ["Can", "Ali", "Veli", "Ayşe"]

5. Nesneler (Introduction to Objects & Notation)

Dizilerde elemanların sırası önemlidir. Nesnelerde ise sıranın önemi yoktur, veriler "Anahtar-Değer" (Key-Value) çiftleri olarak saklanır. Verilere Nokta (.) veya Parantez ([]) yöntemiyle erişilir.

• Uygulama:

  const ahmet = {
      firstName: "Ahmet",
      lastName: "Yılmaz",
      birthYear: 1990,
      job: "Geliştirici",
      // Nesne içine fonksiyon (Metot) da eklenebilir:
      calcAge: function () {
          return 2026 - this.birthYear; // 'this' nesnenin kendisini ifade eder.
      }
  };
  console.log(ahmet.firstName); // Nokta notasyonu -> Ahmet
  console.log(ahmet["lastName"]); // Parantez notasyonu -> Yılmaz
  console.log(ahmet.calcAge()); // 36

6. Döngüler (Iteration: for & while Loops)

Belirli bir kod bloğunu, bir şart sağlandığı sürece tekrar tekrar çalıştırmak için döngüler kullanılır.

• for: Tekrar sayısı genellikle önceden bellidir.

• while: Sadece bir şarta bağlıdır, şart doğru olduğu sürece döner.

• break: Döngüyü tamamen durdurur.

• continue: Döngünün o anki adımını pas geçip bir sonraki adıma atlar.

• Uygulama:

  // For Döngüsü
  for (let i = 1; i <= 3; i++) {
      console.log(`${i}. tekrar`);
  }
  
  // While Döngüsü
  let dice = 1;
  while (dice !== 6) {
      dice = Math.trunc(Math.random() * 6) + 1; // 1-6 arası rastgele sayı
      console.log(`Zar atıldı: ${dice}`);
  }

BÖLÜM 4: GELİŞTİRİCİ BECERİLERİ VE EDİTÖR KURULUMU (DEVELOPER SKILLS & EDITOR SETUP)

Kod yazarken hızlanmak ve profesyonel araçları kullanmak bu bölümün temel amacıdır.

1. VS Code ve Prettier Kurulumu

Kodlarımızı yazmak için VS Code editörünü kullanırız. Kodların otomatik olarak süslenmesi, girintilerin ve boşlukların standart hale gelmesi için Prettier eklentisi kurulur.

2. Node.js Ortamı

Tarayıcı dışındaki bilgisayar sisteminde JavaScript çalıştırmak ve terminal araçlarını yönetmek için bilgisayara Node.js kurulur.

3. Hata Ayıklama (Debugging)

Yazılan koddaki mantık hatalarını veya çökmeleri bulma sürecidir. console.log() kullanılarak değişkenlerin anlık değerlerine bakılır. Daha profesyonelce yapmak için tarayıcının inceleme kısmındaki Breakpoints (Durdurma noktaları) kullanılır; kod satır satır durdurularak incelenir.

4. Yapay Zeka Araçlarının Kullanımı (AI Tools)

ChatGPT, GitHub Copilot veya Cursor AI gibi modern yapay zeka araçları kodlama sürecini hızlandırır. Bu araçlara doğru sorular (prompt) sorularak hata çözümleri veya algoritma tasarımları istenir.

BÖLÜM 5: HTML & CSS HIZLANDIRILMIŞ KURS ([OPTIONAL] HTML & CSS CRASH COURSE)

Tarayıcıda JavaScript ile görsel işlemler yapabilmek için web sayfalarının iskeletini ve kıyafetini bilmek gerekir.

• HTML Yapısı: Web sayfasındaki başlıklar (<h1>), paragraflar (<p>), butonlar (<button>) ve kutular (<div>) gibi elementleri oluşturur. Class ve ID özellikleri ile bu elementlere kimlik verilir.

• CSS Kutu Modeli (Box Model): Her HTML elementini bir kutu olarak görür. Bu kutunun içeriği (content), iç boşluğu (padding), çerçevesi (border) ve dış boşluğu (margin) vardır. Bu model web sayfalarının düzenini belirler.

BÖLÜM 6: TARAYICIDA JAVASCRIPT: DOM VE EVENTLER (DOM AND EVENTS)

Bu bölüm, JavaScript kullanarak web sayfalarını canlandırdığımız ilk proje bölümüdür. Kurs bu kısımda 3 büyük proje yaptırır: "Numaramı Tahmin Et!", "Açılır Pencere (Modal)" ve "Domuz Oyunu (Pig Game)".

1. DOM Nedir? (Document Object Model)

DOM, HTML sayfasının tarayıcı tarafından oluşturulan bir ağaç haritasıdır. JavaScript bu haritayı kullanarak HTML elementlerini seçebilir, silebilir, değiştirebilir veya yeni element ekleyebilir. DOM tarayıcının bize sunduğu bir özelliktir, saf JavaScript'in bir parçası değildir.

2. Element Seçimi ve Manipülasyonu

• Uygulama: Sayfadaki bir yazıyı değiştirmek:

  // HTML'de <p class="message">Eski Yazı</p> olduğunu varsayalım:
  const messageElement = document.querySelector(".message");
  messageElement.textContent = "Yeni Başarı Mesajı! 🎉";

3. Olayları Yakalamak (Handling Click Events)

Kullanıcının sayfada yaptığı tıklama, klavyeye basma gibi hareketlere "Event" (Olay) denir. addEventListener ile bu olaylar dinlenir ve gerçekleştiğinde bir fonksiyon tetiklenir.

• Uygulama: Butona tıklandığında arka planı değiştirme:

  const btn = document.querySelector(".btn-click");
  btn.addEventListener("click", function() {
      document.querySelector("body").style.backgroundColor = "green";
  });

4. DRY Prensibi ve Kod Yenileme (Refactoring)

DRY (Don't Repeat Yourself - Kendini Tekrar Etme) yazılımın en önemli kuralıdır. Eğer aynı kod bloklarını birden fazla yerde yazdıysanız, o kodları tek bir fonksiyon içine alıp temizleme işlemine Refactoring denir.

BÖLÜM 7: JAVASCRIPT PERDE ARKASI (HOW JAVASCRIPT WORKS BEHIND THE SCENES)

Bu bölüm tamamen teoriktir ve bilgisayar hafızasında nelerin döndüğünü anlatır.

1. JavaScript Motoru ve Çalışma Zamanı (Engine and Runtime)

JavaScript kodlarını bilgisayarın anlayacağı makine koduna çeviren programlara motor denir (Örn: Chrome içindeki V8 motoru). Tarayıcı ise bu motora ek olarak DOM API'lerini ve Event Loop yapısını içeren bir çalışma ortamı (Runtime) sunar.

2. Yürütme Bağlamı ve Çağrı Yığını (Execution Context & Call Stack)

Kod çalışmaya başladığında küresel bir alan (Global Execution Context) oluşur. Her fonksiyon çağrıldığında o fonksiyona ait yeni bir kutu oluşturulur ve Call Stack (Çağrı Yığını) adlı üst üste dizilen bir kuleye konur. İş biten fonksiyon kuleden atılır.

3. Kapsam ve Kapsam Zinciri (Scope and The Scope Chain)

Değişkenlere kodun hangi bölgesinden erişebileceğimizi belirler.

• Global Scope: Her yerden erişilen alan.

• Function Scope: Sadece o fonksiyon içinden erişilen alan.

• Block Scope (ES6): let ve const ile oluşturulan değişkenler sadece bulundukları süslü parantez {} içinden erişilebilir. if veya for içindeki değişkenler dışarıya sızamaz.

4. Hoisting ve TDZ (Temporal Dead Zone)

JavaScript, kodları çalıştırmadan önce tarar ve değişken tanımlamalarını hafızada en yukarıya taşır gibi davranır. Buna Hoisting denir.

• var ile tanımlananlar yukarı taşınır ama değerleri undefined olur.

• let ve const ile tanımlananlar yukarı taşınır fakat kod satırı gelene kadar erişilemez kilitli bir bölgede kalırlar. Bu güvenli kilitli döneme TDZ (Temporal Dead Zone) denir.

5. 'this' Kelimesi (The 'this' Keyword)

this, o fonksiyonu o an kimin veya hangi nesnenin çalıştırdığını gösteren dinamik bir kelimedir.

• Normal fonksiyonlarda this, fonksiyonu çağıran nesneyi gösterir.

• Ok fonksiyonlarında (Arrow Functions) kendilerine ait bir this yoktur, bulundukları dış çevrenin (Lexical Scope) this özelliğini miras alırlar.

6. Bellek Yönetimi: İlkel vs. Nesne Tipleri (Primitives vs. Objects)

• Primitive (İlkel) Tipler (Sayı, Yazı, Boolean): Değerleri doğrudan Stack adı verilen hızlı hafızada saklanır. Bir değişkeni diğerine eşitlediğinizde değer kopyalanır.

• Reference (Referans) Tipler (Nesneler, Diziler): Büyük veriler oldukları için Heap adı verilen geniş hafızada tutulurlar. Değişkende ise sadece o verinin adresi (referansı) yazar.

• Uygulama: Referans kopyalama tehlikesi:

  const kisi1 = { isim: "Can" };
  const kisi2 = kisi1; // Adres kopyalandı!
  kisi2.isim = "Efe";
  console.log(kisi1.isim); // "Efe" olur! Çünkü ikisi de aynı Heap adresine bakıyor.

  Bunu önlemek için nesnenin yüzeysel kopyasını (Shallow Copy) oluşturan Object.assign({}, kisi1) veya derin kopyasını (Deep Copy) oluşturan yapılar kullanılır.

BÖLÜM 8: VERİ YAPILARI, MODERN OPERATÖRLER VE METİNLER (DATA STRUCTURES & OPERATORS)

Bu bölüm, verileri çok daha hızlı işlememizi sağlayan modern araçları kapsar.

1. Destructuring (Dizi ve Nesne Parçalama)

Büyük bir dizi veya nesne içindeki verileri tek hamlede çıkarıp ayrı ayrı değişkenlere atama yöntemidir.

• Uygulama:

  // Dizi Parçalama
  const arr =;
  const [x, y, z] = arr; // x=2, y=3, z=4 olur.
  
  // Nesne Parçalama
  const restoran = { ad: "Lezzet", puan: 5 };
  const { ad, puan } = restoran; // ad="Lezzet", puan=5 adında iki değişken oluşur.

2. Spread (...) ve Rest Operatörleri

Üç nokta (...) işareti kullanıldığı yere göre iki farklı işe yarar:

• Spread (Yayma): Bir dizideki tüm elemanları kutusundan çıkarıp tek tek saçar. Yeni dizi oluştururken çok kullanışlıdır.

• Rest (Toplama): Fonksiyona gelen çok sayıda parametreyi tek bir dizi altında toplar.

• Uygulama:

  // Spread Örneği
  const eskiDizi =;
  const yeniDizi = [...eskiDizi, 3, 4]; // [1, 2, 3, 4] olur.
  
  // Rest Örneği
  function topla(...sayilar) { // Gelen tüm sayıları bir dizi yapar
      return sayilar.reduce((a, b) => a + b, 0);
  }
  console.log(topla(2, 5, 8)); // 15

3. Short Circuiting (&&, ||) ve Nullish Coalescing (??) Operatörleri

• || (Veya): İlk bulduğu doğru (truthy) değeri döndürür. Varsayılan değer atamak için kullanılır.

• && (Ve): İlk bulduğu yanlış (falsy) değeri döndürür. Şart doğruysa bir sonraki kodu çalıştırmak için kullanılır.

• ?? (Nullish): Sadece değer null veya undefined ise sağdaki değeri seçer. 0 veya boş yazıyı ("") geçerli kabul eder.

• Uygulama:

  let misafirSayisi = 0;
  const konuklar1 = misafirSayisi || 10; // 0 falsy olduğu için 10 seçilir.
  const konuklar2 = misafirSayisi ?? 10; // 0 geçerli kabul edilir, sonuç 0 olur.

4. Sets ve Maps (Yeni Veri Yapıları)

• Set: İçinde asla tekrar eden (dublike) eleman barındırmayan özel bir koleksiyondur.

• Map: Nesnelere benzer ama nesnelerden farklı olarak anahtar (key) kısmına sadece yazı değil; sayı, dizi hatta fonksiyon bile koyulabilir.

• Uygulama:

  // Set Örneği
  const siparisler = new Set(["Döner", "Pizza", "Döner"]); 
  console.log(siparisler); // Set(2) {"Döner", "Pizza"} -> Tekrar eden silindi.
  
  // Map Örneği
  const soru = new Map();
  soru.set("soruMetni", "JS güzel mi?");
  soru.set(true, "Harika! Doğru cevap."); // Anahtar bir Boolean!

5. Gelişmiş Metin Metotları (Working With Strings)

Metinler üzerinde arama yapma, parçalama ve değiştirme fonksiyonlarıdır.

• indexOf(), lastIndexOf(): Karakterin konumunu bulur.

• slice(): Metnin belirli bir kısmını kesip alır.

• split(): Metni belirtilen karaktere göre bölüp diziye çevirir.

• join(): Dizideki elemanları birleştirip metin yapar.

• Uygulama: Bir ismi temizleme:

  const yolcuIsmi = "  aHMeT  ";
  const temizIsim = yolcuIsmi.trim().toLowerCase(); // "ahmet"
  const ilkHarfBuyuk = temizIsim[0].toUpperCase() + temizIsim.slice(1); // "Ahmet"

BÖLÜM 9: FONKSİYONLARA YAKINDAN BAKIŞ (A CLOSER LOOK AT FUNCTIONS)

Fonksiyonların gelişmiş özellikleri ve en zor konulardan biri olan Closures (Kapanışlar) burada yer alır.

1. Birinci Sınıf ve Yüksek Dereceli Fonksiyonlar (First-Class & Higher-Order)

JavaScript'te fonksiyonlar birer "değer" gibi görülür. Değişkenlere atanabilir, başka fonksiyonlara parametre olarak gönderilebilir veya bir fonksiyonun içinden dışarıya fonksiyon fırlatılabilir. Başka bir fonksiyonu içine alan ya da dışarıya fonksiyon döndüren yapılara Higher-Order Function denir.

• Uygulama: Callback (Geri çağrım) kullanımı:

  const tekBosluk = str => str.replace(/ /g, "");
  
  // Yüksek dereceli fonksiyon: İçine başka fonksiyon alıyor
  const donusturici = function (str, fn) {
      console.log(`Orijinal metin: ${str}`);
      console.log(`Dönüşmüş metin: ${fn(str)}`);
  };
  donusturici("Selam Dunya Yazilim", tekBosluk);

2. Call, Apply ve Bind Metotları

Bir fonksiyonun içindeki this kelimesinin hangi nesneyi göstereceğini dışarıdan zorla belirlemek için kullanılırlar.

• call(): Fonksiyonu hemen çalıştırır, parametreleri tek tek alır.

• apply(): Fonksiyonu hemen çalıştırır, parametreleri dizi olarak alır.

• bind(): Fonksiyonu hemen çalıştırmaz, this kelimesi kilitlenmiş yeni bir fonksiyon kopyası üretir.

3. IIFE (Immediately Invoked Function Expressions)

Tanımlandığı an otomatik olarak hemen çalışan ve bir daha asla çağrılamayan fonksiyonlardır. Geçmişte sadece değişkenleri dış dünyadan gizlemek (kapsüllemek) için kullanılırdı.

• Uygulama:

  (function () {
      console.log("Bu kod anında çalışır ve kaybolur!");
      const gizliVeri = 42;
  })();

4. Kapanışlar (Closures)

Bir fonksiyon, doğduğu ortamdaki (kapsamdaki) değişkenleri, o ortam yok olduktan sonra bile hatırlıyorsa buna Closure denir. Fonksiyon, yaratıldığı yerin değişken ortamına sıkı sıkıya bağlı bir görünmez çanta ile gezer.

• Uygulama:

  const yolcuSayimi = function () {
      let yolcuSayisi = 0; // Bu fonksiyonun içindeki yerel değişken
      return function () {
          yolcuSayisi++;
          console.log(`${yolcuSayisi} yolcu var.`);
      };
  };
  const biletKes = yolcuSayimi();
  biletKes(); // 1 yolcu var.
  biletKes(); // 2 yolcu var. (yolcuSayimi fonksiyonu bitmesine rağmen değeri unutmadı!)

BÖLÜM 10: DİZİLERLE ÇALIŞMAK VE BANKIST PROJESİ (WORKING WITH ARRAYS)

Bu bölüm, modern JavaScript projelerinde en çok kullanılan veri dönüştürme metotlarını (map, filter, reduce) "Bankist" adlı görsel bir banka uygulaması üzerinden öğretir.

1. Temel ve Yeni Dizi Metotları

• forEach(): Dizideki her eleman için bir fonksiyon çalıştırır (Döngünün modern hali).

• at(): Negatif sayılar vererek dizinin sondaki elemanlarına kolayca erişmeyi sağlar (arr.at(-1) sondaki elemanı verir).

• flat(), flatMap(): İç içe geçmiş dizileri tek bir düz dizi haline getirir.

2. Büyük Veri Dönüştürücüler: Map, Filter, Reduce

• map(): Orijinal dizideki her elemanı bir işlemden geçirip aynı uzunlukta yeni bir dizi üretir.

• filter(): Belirtilen şarta uyan elemanları ayıklayıp daha kısa yeni bir dizi üretir.

• reduce(): Dizideki tüm elemanları birbiriyle işleme sokarak tek bir nihai değer (Örn: Toplam değer) üretir.

• Uygulama: Hesap hareketleri analizi:

  const islemler = [200, 450, -400, 3000, -650, -130];
  
  // 1. Doları Euro'ya Çevirme (Map)
  const eurToUsd = 1.1;
  const dolarKarşılıgı = islemler.map(mov => mov * eurToUsd);
  
  // 2. Sadece Yatırılan Paraları Bulma (Filter)
  const yatirilanlar = islemler.filter(mov => mov > 0); // [200, 450, 3000]
  
  // 3. Toplam Bakiyeyi Hesaplama (Reduce)
  const bakiye = islemler.reduce((acc, mov) => acc + mov, 0); // acc biriktiricidir.

3. Arama ve Sıralama Metotları

• find(): Şartı sağlayan ilk elemanın kendisini döner.

• findIndex(): Şartı sağlayan ilk elemanın sıra numarasını (index) döner.

• some(): Dizide en az bir eleman şarta uyuyor mu diye bakar (true/false).

• every(): Dizideki tüm elemanlar şarta uyuyor mu diye bakar.

• sort(): Diziyi alfabetik ya da sayısal olarak sıralar. Orijinal diziyi kalıcı olarak değiştirir. Değiştirmeyen modern alternatifleri ise toSorted(), toReversed() metotlarıdır.

BÖLÜM 11: SAYILAR, TARİHLER VE ZAMANLAYICILAR (NUMBERS, DATES, INTL AND TIMERS)

Web uygulamalarında finansal hesaplar, zaman sayaçları ve dünya standartlarında tarih gösterimleri bu bölümün konusudur.

1. Sayı Güvenliği ve BigInt

JavaScript'te tüm sayılar arkada 64-bitlik kayan noktalı (floating point) sistemle saklanır. Bu yüzden 0.1 + 0.2 tam olarak 0.3 çıkmaz, 0.30000000000000004 çıkar. Çok büyük tam sayılarla hassas hesap yapmak için sayının sonuna n konularak BigInt veri tipi kullanılır.

2. Tarihlerle Çalışmak (Dates)

Zamanı milisaniye cinsinden yönetmek ve tarih objeleri oluşturmak için kullanılır.

• Uygulama:

  const su An = new Date();
  console.log(suAn.getFullYear()); // Bulunduğumuz yılı verir.
  
  // İki tarih arasındaki gün farkını bulma:
  const gunFarki = (tarih1, tarih2) => Math.abs(tarih2 - tarih1) / (1000 * 60 * 60 * 24);

3. Uluslararasılaştırma (Intl API)

Web sitenizdeki sayıları veya tarihleri kullanıcının yaşadığı ülkenin dil ve para birimi formatına otomatik çevirir.

• Uygulama: Finansal gösterim:

  const para = 3500450.5;
  const secenekler = { style: "currency", currency: "TRY" };
  const turkceFormat = new Intl.NumberFormat("tr-TR", secenekler).format(para);
  console.log(turkceFormat); // "₺3.500.450,50" şeklinde tertemiz yazdırır.

4. Zamanlayıcılar (Timers)

• setTimeout(): Belirtilen süre bittiğinde fonksiyonu bir kez çalıştırır.

• setInterval(): Durdurulana kadar her belirtilen süre aralığında fonksiyonu sürekli çalıştırır (Örn: Geri sayım sayaçları).

BÖLÜM 12: İLERİ SEVİYE DOM VE OLAYLAR (ADVANCED DOM AND EVENTS)

Bu bölümde web sitelerine profesyonel efektler eklemeyi ("Bankist" web sitesi projesi üzerinden) öğreniriz.

1. Olay Kabarcıklanması ve Delege Etme (Bubbling & Event Delegation)

Bir HTML elementine (Örn: bir liste elemanına) tıklandığında, o tıklama olayı sanki suyun altındaki bir hava kabarcığı gibi yukarıdaki tüm ana elementlere (parent) doğru yayılır. Buna Bubbling denir.

• Event Delegation (Olay Delege Etme): Sayfada 100 tane butona ayrı ayrı tıklama olayı eklemek yerine, hepsinin bağlı olduğu tek bir üst kutuya (parent) olay eklenir ve tıklanan elemanın kimliği tespit edilir. Bu, sitenin performansını uçurur.

2. Intersection Observer API (Gelişmiş Görüş İzleyici)

Kullanıcının sayfayı aşağı kaydırırken belirli bir resme veya bölüme gelip gelmediğini ekran sınırlarına göre tespit eden çok güçlü bir tarayıcı özelliğidir.

• Kullanım Alanı: Sayfa aşağı kaydırıldığında yukarıdan yapışkan menü (Sticky Navigation) çıkması veya aşağıda kalan büyük resimlerin performans için ekrana yaklaştıkça yüklenmesi (Lazy Loading Images).

BÖLÜM 13: JAVASCRIPT İLE NESNE YÖNELİMLİ PROGRAMLAMA (OOP)

Büyük projeleri sınıflar (Classes) yardımıyla organize etme felsefesidir.

1. Prototip Kalıtımı (Prototypes & Prototypal Inheritance)

JavaScript'teki OOP mimarisi diğer dillerden (Java, C#) farklıdır. JavaScript'te sınıflar aslında arka planda Prototip (Prototype) adı verilen objelere dayanır. Oluşturduğunuz her nesne, bağlı olduğu sınıfın prototipindeki fonksiyonları ortaklaşa kullanır. Bu sayede bilgisayar hafızasından devasa tasarruf sağlanır.

2. ES6 Sınıfları (ES6 Classes)

ES6 ile gelen class kelimesi aslında prototip sisteminin üzerine giydirilmiş süslü bir kıyafettir (Syntactic Sugar). Yazımı çok daha kolay ve temizdir.

• Uygulama: Bir Araba sınıfı tasarlamak:

  class Araba {
      constructor(marka, hiz) {
          this.marka = marka;
          this.hiz = hiz;
      }
      // Prototip metodu:
      hizlan() {
          this.hiz += 10;
          console.log(`${this.marka} şimdi ${this.hiz} km/h hızda.`);
      }
  }
  const ozelAraba = new Araba("Tesla", 120);
  ozelAraba.hizlan();

3. Kapsülleme ve Gizli Alanlar (Encapsulation: Private Fields)

Dışarıdaki kodların, sınıfın içindeki hassas verilere doğrudan erişip bozmasını engellemek için bazı değişkenler gizlenir. Modern JavaScript'te değişken isminin başına kare (#) işareti konularak o alan Private (Gizli) yapılır.

BÖLÜM 14: MAPTY UYGULAMASI: OOP, COĞRAFİ KONUM VE DIŞ KÜTÜPHANELER (MAPTY PROJECT)

Bu bölümde tamamen nesne yönelimli mimari (OOP) kullanılarak "Mapty" adında bir spor/harita uygulaması geliştirilir.

• Geolocation API: Tarayıcıdan izin isteyerek kullanıcının o anki dünya üzerindeki enlem ve boylam koordinatlarını alır.

• Leaflet Library: Açık kaynaklı harika bir harita kütüphanesidir. JavaScript kodumuza dahil edilerek sayfada etkileşimli bir harita kutusu açılmasını ve tıklanan yerlere özel spor ikonları (marker) yerleştirilmesini sağlar.

• localStorage: Kullanıcı sayfayı kapatsa veya yenilese bile eklediği spor aktivitelerinin bilgisayarın tarayıcı hafızasında kalıcı olarak saklanmasını sağlar.

BÖLÜM 15: ASENKRON JAVASCRIPT: PROMISE, ASYNC/AWAIT VE AJAX

JavaScript normalde tek hat üzerinden sırayla çalışan (Single-threaded, synchronous) bir dildir. Bir işlem uzun sürerse (Örn: internetten büyük veri çekmek) tüm sayfa donar. Bunu önlemek için asenkron yapı kullanılır.

1. AJAX ve API Kavramı

• AJAX: Sayfayı tamamen yenilemeden arka planda sunucudan veri alışverişi yapma tekniğidir.

• API: Bir sunucunun dış dünyaya sunduğu, veri çekebileceğimiz kapılardır (Örn: Hava durumu verileri sunan bir API).

2. Callback Hell ve Promises

Eski yöntemde asenkron işlemleri peş peşe yapmak için fonksiyon içine fonksiyon yazılırdı. Bu durum kodun sağa doğru okunamaz hale gelmesine (Callback Hell - Callback Cehennemi) neden olurdu. Bu sorunu çözmek için Promise (Söz) yapısı getirilmiştir. Promise, gelecekte tamamlanacak bir işlemin sonucunu temsil eder.

3. Async / Await (Modern Asenkron)

Promise yapılarını tıpkı düz, senkron kod yazıyormuş gibi alt alta tertemiz yazmamızı sağlayan en modern ve ödüllü JavaScript özelliğidir. Hataları yakalamak için klasik try...catch blokları kullanılır.

• Uygulama: İnternetten ülke verisi çekme:

  const ulkeVerisiGetir = async function (ulkeAdi) {
      try {
          // Veri gelene kadar satırda bekle (await)
          const response = await fetch(`https://restcountries.com{ulkeAdi}`);
          if(!response.ok) throw new Error("Ülke bulunamadı!");
  
          const veri = await response.json();
          console.log(veri[0]); // Ülkenin tüm bilgileri ekranda
      } catch (hata) {
          console.error(`Üzgünüz bir hata oldu: ${hata.message}`);
      }
  };
  ulkeVerisiGetir("turkey");

4. Paralel Promises (Promise.all)

Eğer birbirini beklemesi gerekmeyen 3 farklı internet sitesinden aynı anda veri çekeceksek, bunları alt alta yazıp birbirini bekletmek yerine Promise.all ile hepsini aynı anda (paralel) başlatıp hız kazanırız.

BÖLÜM 16: MODERN JAVASCRIPT GELİŞTİRME: MODÜLLER VE ARAÇLAR (MODULES & TOOLING)

Büyük projelerde tüm kodları tek bir .js dosyasına yazmak imkansızdır. Kodları parçalara bölüp yönetmek gerekir.

• ES6 Modülleri: Kodları mantıksal dosyalar halinde ayırmamızı sağlar. Bir dosyadaki fonksiyonu dışa aktarıp (export), başka bir dosyada içe aktararak (import) kullanırız.

• NPM (Node Package Manager): Dünyadaki diğer yazılımcıların yazdığı hazır paketleri ve kütüphaneleri projemize tek tıkla kurmamızı sağlayan paket yönetim sistemidir.

• Parcel (Bundler / Paketleyici): Yazdığımız onlarca farklı JavaScript, CSS ve resim dosyasını tarayıcıların çok hızlı okuyabileceği tek bir sıkıştırılmış dosya haline getiren modern bir araçtır.

• Babel: Yazdığımız en modern ES6+ kodlarını, eski model tarayıcıların (Örn: Internet Explorer) bile anlayabileceği eski ES5 formatına otomatik çeviren bir dönüştürücüdür (Polyfilling).

BÖLÜM 17: FORKIFY UYGULAMASI VE PROJE PLANLAMA (FORKIFY PROJECT)

Kursun en büyük, zirve projesidir. İçinde yemek tarifleri arama, malzeme listelerini porsiyona göre güncelleme, tarif defterine kaydetme ve API'ye yeni tarif yükleme özellikleri olan modern bir yemek platformu inşa edilir.

• MVC Mimarisi (Model-View-Controller): Büyük projelerin çorba olmasını engellemek için kodlar 3 ana parçaya bölünür:

  • Model: Verileri ve internetten veri çekme işlerini yönetir.

  • View: Ekrandaki görselliği, HTML basma ve buton tıklamalarını yönetir.

  • Controller: Model ile View arasında bir köprüdür. Ekranda butona basıldığında arka plandaki veriyi tetikler, gelen sonucu tekrar ekrana gönderir.

• Publisher-Subscriber Kalıbı: View katmanının (görsel alanın), Controller katmanındaki fonksiyonlardan haberdar olmasını sağlayan çok profesyonel bir tasarım kalıbıdır.

BÖLÜM 18: GIT KURULUMU VE CANLIYA ALMA (SETTING UP GIT AND DEPLOYMENT)

Yazılan projenin dünyaya sunulma aşamasıdır.

• Git & GitHub: Kodlarımızın geçmiş versiyonlarını kaydetmemizi, hata yaparsak geri dönebilmemizi ve kodları internet üzerinde güvenle saklamamızı sağlayan versiyon kontrol sistemidir.

• Netlify & Sürekli Entegrasyon (CI): Hazırladığımız web projesini internete ücretsiz yükleyerek herkesin erişebileceği bir link alma sürecidir. GitHub hesabımıza bağlandığında, bilgisayarımızda kodu güncelleyip GitHub'a attığımız an web sitesi internette otomatik olarak saniyeler içinde güncellenir.

************************************

Modern JavaScript From The Beginning 2.0 kurs müfredatı belgesini satır satır ele alarak, istediğiniz kurallar doğrultusunda tüm konuları derinlemesine inceliyoruz.

"Öğrenecekleriniz" Paragrafının Açıklaması

Bu paragraf, kursu tamamladığınızda kazanacağınız temel ve ileri düzey yazılım yeteneklerini özetler. Kurs, tarayıcıların dinamik olarak çalışmasını sağlayan temel mantıktan başlar. Ardından kodun arka planda nasıl yürütüldüğünü (hafıza yönetimi, asenkron motorlar) ve web sayfalarındaki elemanlara nasıl hükmedebileceğinizi (DOM ve Etkinlikler) öğretir. Sadece kod yazmayı değil; modern endüstri standartlarında kullanılan araçları (Webpack, Babel, NPM), Nesne Yönelimli Programlama (OOP) mimarilerini ve veritabanı bağlantılı (Node, Express, MongoDB) tam donanımlı Full Stack uygulamalar geliştirmeyi vadeder. Gerçek dünya projeleriyle bu teorik bilgileri kalıcı pratiğe dönüştürmeyi amaçlar.

Temel Konuların Tespiti ve Detaylı Açıklamaları

Müfredat satırlarından ayrıştırılan ana konu başlıkları aşağıda listelenmiştir. Her konu teorik altyapısı, kod örneği ve tarayıcıda/Node ortamında doğrudan çalıştırabileceğiniz pratik bir uygulama senaryosu ile ele alınmıştır.

1. JavaScript Nedir, Konsol ve Geliştirici Araçları

JavaScript, web sayfalarına dinamizm ve etkileşim kazandıran, tarayıcılarda doğrudan yorumlanan güçlü bir programlama dilidir. Kodlarımızı test etmek, hataları ayıklamak ve tarayıcıyla iletişim kurmak için geliştirici araçlarında bulunan console (konsol) yapısını kullanırız.

• Örnek: Konsola yazı yazdırmak veya matematiksel hesaplamaları anlık görmek için console.log() kullanılır.

• Uygulama: Tarayıcınızın inceleme (F12) ekranını açıp konsola aşağıdaki kodu yazın:

console.log("Sistem başarıyla başlatıldı.");
console.warn("Bu bir uyarı mesajıdır.");
console.error("Kritik bir hata oluştu!");

2. Değişkenler, Sabitler ve Veri Tipleri (Primitive vs Reference)

JavaScript'te verileri hafızada tutmak için değişkenler (let, var) ve değiştirilemeyen sabitler (const) kullanılır. Veri tipleri ikiye ayrılır: İlkel (Primitive) tipler (String, Number, Boolean, Null, Undefined, Symbol) değerleri doğrudan hafızada tutar. Referans (Reference) tipleri (Nesneler, Diziler) ise hafızadaki bir adresi (referansı) işaret eder.

• Örnek: İlkel bir veri kopyalandığında bağımsız bir kopyası oluşur. Referans veri kopyalandığında ise aynı kutuyu işaret ederler; birinde yapılan değişiklik diğerini de etkiler.

• Uygulama:

// İlkel Tip Denemesi
let isim1 = "Ahmet";
let isim2 = isim1; // Değer kopyalandı
isim1 = "Mehmet";
console.log(isim2); // Çıktı: "Ahmet" (Etkilenmedi)

// Referans Tip Denemesi
let dizi1 = [1, 2, 3];
let dizi2 = dizi1; // Adres kopyalandı
dizi1.push(4);
console.log(dizi2); // Çıktı: [1, 2, 3, 4] (Etkilendi!)

3. Tip Dönüşümü (Type Conversion) ve Tip Dayatması (Type Coercion)

Tip dönüşümü, yazılımcının bir veriyi bilerek başka bir tipe çevirmesidir (Number(), String()). Tip dayatması ise JavaScript motorunun işlem sırasında veri tiplerini kendi kendine otomatik olarak dönüştürmesidir.

• Örnek: Bir metin ile sayıyı toplamaya çalışırsanız JavaScript sayıyı metne dönüştürür.

• Uygulama:

// Manuel Dönüşüm (Conversion)
let metinSayi = "42";
let gercekSayi = Number(metinSayi);
console.log(gercekSayi + 8); // Çıktı: 50

// Otomatik Dayatma (Coercion)
let sonuc = "5" + 5; 
console.log(sonuc); // Çıktı: "55" (Metin birleştirme yaptı)
let fark = "10" - 2;
console.log(fark); // Çıktı: 8 (Çıkarma işleminde sayıya zorladı)

4. Matematik Objesi (Math) ve Tarih İşlemleri (Dates & Times)

Matematiksel karmaşık hesaplamalar için yerleşik Math nesnesi kullanılır. Zaman, saat ve gün yönetimleri ise Date nesnesi ve modern Intl.DateTimeFormat API'leri yardımıyla yerelleştirilerek çözülür.

• Örnek: Sayıları yuvarlama, rastgele sayı üretme veya bugünün tarihini yerel dilde yazdırma işlemleri.

• Uygulama:

// Rastgele sayı üretme (1 ile 10 arasında)
let rastgele = Math.floor(Math.random() * 10) + 1;
console.log("Rastgele Sayı: " + rastgele);

// Tarihi Türkçe formatta yazdırma
let bugun = new Date();
let formatliTarih = new Intl.DateTimeFormat('tr-TR', { dateStyle: 'full' }).format(bugun);
console.log("Bugün: " + formatliTarih);

5. Diziler (Arrays) ve Nesneler (Objects)

Diziler, sıralı veri listelerini tutar. Nesneler ise anahtar-değer (key-value) çiftleriyle yapılandırılmış karmaşık veri modelleri oluşturmamızı sağlar. ES6 ile gelen Spread (...) operatörü bu yapıları kopyalamayı ve birleştirmeyi kolaylaştırır. Destructuring ise içlerindeki verileri tek hamlede dışarı çıkarmayı sağlar.

• Örnek: Kullanıcı listeleri dizilerde, tek bir kullanıcının detay profili ise nesnelerde tutulur.

• Uygulama:

// Nesne ve Destructuring Uygulaması
const kullanici = {
    ad: "Can",
    yas: 28,
    roller: ["Admin", "Yazar"]
};

const { ad, yas } = kullanici; // Destructuring
console.log(`${ad} kişisi ${yas} yaşında.`);

// Spread Operatörü ile Dizi Birleştirme
const Sayilar1 = [1, 2];
const Sayilar2 = [3, 4];
const birlesikDizi = [...Sayilar1, ...Sayilar2];
console.log(birlesikDizi); // Çıktı: [1, 2, 3, 4]

6. Fonksiyonlar, Kapsam (Scope) ve Çalışma Bağlamı (Execution Context)

Fonksiyonlar yeniden kullanılabilir kod bloklarıdır. Kod çalıştırılırken JavaScript motoru bir "Execution Context" (Çalışma Bağlamı) oluşturur. Önce hafıza yerleri ayrılır, sonra kod satır satır işletilir. Kapsam (Scope) ise değişkenlerin nerelerden erişilebilir olduğunu belirler (Global, Function, Block). [1, 2, 3]

• Örnek: let ve const blok kapsamlıdır ({} dışından erişilemez), fonksiyonlar ise kendi içlerinde izole alanlar yaratır.

• Uygulama:

const globalDegisken = "Ben her yerdeyim";

function scopeTest() {
    let fonksiyonIci = "Sadece bu fonksiyonda";
    if (true) {
        let blokIci = "Sadece bu if bloğunda";
        var eskiYontem = "Blok dinlemez, fonksiyona sızar";
    }
    // console.log(blokIci); // HATA VERİR!
    console.log(eskiYontem); // Çalışır
}
scopeTest();

7. Mantıksal Akış, Denetimler ve Döngüler

Programın kararlar almasını sağlayan yapılar (if-else, switch, ternary) ve işlemlerin tekrar etmesini sağlayan döngüler (for, while, for...of, for...in) bu başlık altındadır. Ayrıca truthy (doğru kabul edilen) ve falsy (yanlış kabul edilen: 0, "", null, undefined) kavramları akış yönetiminde kritik öneme sahiptir.

• Örnek: Kullanıcı giriş yapmışsa paneli göster, yapmamışsa uyarı ver döngüsü.

• Uygulama: (Klasik FizzBuzz mülakat sorusu uygulaması)

// 1'den 15'e kadar dön, 3'ün katlarına Fizz, 5'in katlarına Buzz, ikisinin katına FizzBuzz yaz.
for (let i = 1; i <= 15; i++) {
    if (i % 3 === 0 && i % 5 === 0) {
        console.log("FizzBuzz");
    } else if (i % 3 === 0) {
        console.log("Fizz");
    } else if (i % 5 === 0) {
        console.log("Buzz");
    } else {
        console.log(i);
    }
}

8. Gelişmiş Dizi Yöntemleri (forEach, filter, map, reduce)

Diziler üzerinde döngü kurmak yerine modern JavaScript'te fonksiyonel metotlar tercih edilir. forEach listeyi gezer, filter şartı sağlayanları süzer, map elemanları dönüştürerek yeni dizi üretir, reduce tüm diziyi tek bir değere indirger.

• Örnek: Fiyat listesindeki ürünlere zam yapmak (map) veya pahalı olanları seçmek (filter).

• Uygulama:

const urunler = [
    { ad: "Kitap", fiyat: 50 },
    { ad: "Kalem", fiyat: 20 },
    { ad: "Defter", fiyat: 80 }
];

// Fiyatı 30'dan büyük olanları filtrele
const pahaliUrunler = urunler.filter(urun => urun.fiyat > 30);
console.log(pahaliUrunler);

// Tüm ürünlerin toplam fiyatını hesapla
const toplamFiyat = urunler.reduce((toplam, urun) => toplam + urun.fiyat, 0);
console.log("Toplam Sepet Tutarı: " + toplamFiyat);

9. Belge Nesnesi Modeli (DOM) Eleman Seçimi ve Yönetimi

DOM, HTML dokümanının JavaScript tarafından okunup değiştirilebilmesini sağlayan bir ağaç yapısıdır. JavaScript ile sayfadaki yazıları, renkleri, butonları seçebilir, silebilir veya yeni dinamik elementler ekleyebiliriz.

• Örnek: Bir web sayfasındaki başlık metnini arka planda kodla değiştirmek.

• Uygulama: (Boş bir HTML sayfasında konsoldan denenebilir)

// Yeni bir liste elemanı oluşturma ve sayfaya ekleme
const yeniGorev = document.createElement('li');
yeniGorev.innerText = "JavaScript DOM Çalışması Yapılacak";
yeniGorev.className = "gorev-elemani";
yeniGorev.style.color = "blue";

// Sayfadaki mevcut bir elementin içine ekleme (Varsayılan bir ul gövdesine)
document.body.appendChild(yeniGorev);

10. Etkinlikler (Events), Olay Kabarcıklanması ve Delege Etme

Kullanıcının sayfada yaptığı tıklama, klavyeye basma, formu gönderme gibi her hareket bir olaydır (Event). Olay Kabarcıklanması (Event Bubbling), tetiklenen bir olayın en alt elementten en üst elemente doğru yayılmasıdır. Olay Delegasyonu ise performans kazanmak adına etkinlik dinleyicisini alt elemanlara tek tek eklemek yerine ortak üst elemana bağlama tekniğidir.

• Örnek: Listeye yeni eklenen butonların da tıklama özelliğine otomatik sahip olması delege yöntemiyle sağlanır.

• Uygulama:

// Form yakalama ve sayfa yenilenmesini engelleme uygulaması
document.addEventListener('submit', function(etkinlik) {
    etkinlik.preventDefault(); // Sayfa yenilenmesini durdurur
    console.log("Form verileri güvenli şekilde yakalandı.");
});

11. Asenkron JavaScript (Callbacks, Promises, Async/Await, Fetch)

JavaScript tek iş parçacıklı (single-threaded) bir dildir. Zaman alan işlemlerin (internetten veri çekme, dosya okuma vb.) tarayıcıyı dondurmaması için asenkron çalışır. Eskiden Callback fonksiyonları kullanılırken, günümüzde modern Promise yapıları ve kodu senkron gibi yazmamızı sağlayan Async/Await blokları kullanılır. [4, 5]

• Örnek: Dışarıdaki bir sunucudan (API) hava durumu verisini çekip ekrana getirme süreci.

• Uygulama: (Ücretsiz bir test API'sinden veri çekme)

async function verileriGetir() {
    try {
        console.log("Veri talep ediliyor...");
        // Fetch API ile istek atma
        const yanıt = await fetch('https://typicode.com');
        const veri = await yanıt.json();
        console.log("Gelen Veri Başlığı:", veri.title);
    } catch (hata) {
        console.error("Veri çekilirken sorun oluştu:", hata);
    }
}
verileriGetir();

12. Gelişmiş Tarayıcı API'leri (Web & Browser APIs)

Tarayıcıların bize sunduğu, standart dilin ötesindeki donanımsal ve yazılımsal yeteneklerdir. Kullanıcının konumunu alma (Geolocation), local storage ile verileri tarayıcı hafızasına kalıcı kaydetme, Canvas ile 2D çizim yapma, ses ve video oynatma API'leri bu kapsama girer.

• Örnek: Web sitesini kapatıp açtığınızda kullanıcı adınızın veya sepetinizdeki ürünlerin hala orada kalması localStorage ile olur.

• Uygulama:

// LocalStorage Veri Kaydetme ve Okuma
localStorage.setItem('kullaniciAdi', 'YazilimGelistirici');

// Sayfa yenilense dahi veriyi geri çekebiliriz
const saklananIsim = localStorage.getItem('kullaniciAdi');
console.log("Kayıtlı Kullanıcı:", saklananIsim);

13. Nesne Yönelimli Programlama (OOP), Prototipler ve Sınıflar

Kod organizasyonunu nesneler üzerinden kurgulama felsefesidir. JavaScript prototip tabanlı bir dildir, yani nesneler yeteneklerini miras kalıtım yoluyla birbirine aktarır. ES6 ile gelen class (sınıf) yapısı, kapsülleme (private fields #), getter/setter metotları OOP mimarisini standartlaştırır.

• Örnek: Bir oyun projesinde yüzlerce farklı düşman karakterini tek bir ana "Düşman Sınıfı" şablonundan üretmek.

• Uygulama:

class Karakter {
    #gizliGuc; // Private mülk (Dışarıdan erişilemez)

    constructor(ad, can) {
        this.ad = ad;
        this.can = can;
        this.#gizliGuc = 100;
    }

    // Metot
    saldir() {
        console.log(`${this.ad} hasar verdi! Kalan gizli gücü: ${this.#gizliGuc}`);
    }
}

const oyuncu1 = new Karakter("Savaşçı", 80);
oyuncu1.saldir(); // Çıktı: Savaşçı hasar verdi!

14. Modüller ve Modern Araç Dünyası (Webpack, Babel, NPM)

Büyük projelerde tüm kodları tek dosyaya yazmak imkansızdır. ES Modülleri (import/export) ile kodlar parçalara ayrılır. NPM, harici kütüphaneleri yönetir. Babel, yazdığımız modern kodları eski tarayıcıların da anlaması için dönüştürür. Webpack ise tüm bu parçaları, CSS ve görselleri tarayıcının hızlıca okuyabileceği tek bir pakete (bundle) dönüştürür.

• Örnek: Matematik fonksiyonlarını içeren ayrı bir dosyayı ana script dosyamıza dahil etmek.

• Uygulama: (Teorik Dosya Yapısı Örneği)

// matematik.js dosyası içeriği
export function topla(x, y) { return x + y; }

// ana.js dosyası içeriği
import { topla } from './matematik.js';
console.log(topla(10, 20));

15. Veri Yapıları, Algoritmalar ve Birim Testleri (Unit Testing - Jest)

İleri düzey programlamada verilerin bellekte nasıl tutulacağını (Stacks, Queues, Linked Lists) bilmek ve performanslı algoritmalar üretmek gerekir. Yazılan algoritmaların doğru çalışıp çalışmadığını, gelecekte yapılan güncellemelerin sistemi bozup bozmadığını test etmek amacıyla Jest kütüphanesi ile otomatik birim testleri (Unit Testing) yazılır.

• Örnek: Bir kelimenin tersten okunuşu ile düz okunuşunun aynı olup olmadığını kontrol eden bir algoritmayı test etmek.

• Uygulama: (Jest ile test yazım mantığı)

// Kodumuz
function palidromKontrol(kelime) {
    return kelime === kelime.split('').reverse().join('');
}

// Jest Test Bloğu (Teorik Gösterim)
// test('Kelime palindrom mu?', () => {
//    expect(palidromKontrol('kabak')).toBe(true);
// });

16. Node.js Temelleri ve REST API Geliştirme (Express & MongoDB)

JavaScript'in sadece tarayıcıda değil, sunucu tarafında da (backend) çalışmasını sağlayan çalışma ortamı Node.js'tir. Dosya sistemi (fs) ve internet protokolleri (http) modülleriyle sunucular kurulur. Express kütüphanesi yardımıyla dış dünyaya veri servis eden modern bir REST API mimarisi inşa edilir. Veriler ise esnek şemaya sahip MongoDB NoSQL veritabanında saklanır.

• Örnek: Bir mobil uygulamanın veya web sitesinin kullanıcı üyeliklerini, veri tabanına kaydeden ve kontrol eden arka plan mekanizması.

• Uygulama: (Basit bir Node.js Http Sunucusu örneği)

// Node.js ortamında çalıştırılabilir temel sunucu kurulumu
const http = require('http');

const sunucu = http.createServer((istek, yanit) => {
    yanit.writeHead(200, {'Content-Type': 'text/plain; charset=utf-8'});
    yanit.end('Node.js Backend Sunucusundan Selamlar!');
});

// Sunucu 5000 portunda dinlemeye başlıyor
sunucu.listen(5000, () => {
    console.log("Sunucu çalışıyor: http://localhost:5000");
});

Bütün JavaScript müfredatını kapsayan, bilgisayarınızda adım adım kurup çalıştırabileceğiniz dev bir master rehber hazırladım. Bu yapı, öğrendiğiniz her konuyu tek bir çatı altında test edebilmeniz için modüler bir düzende tasarlanmıştır.

📁 Proje Klasör Yapısı

Bilgisayarınızda modern-js-master adında bir klasör oluşturun. Klasörün iç yapısı tam olarak aşağıdaki gibi görünmelidir:

modern-js-master/
├── package.json
├── webpack.config.js
├── .env
├── server.js
└── src/
    ├── index.html
    ├── index.js
    └── modules/
        ├── 01_konsol.js
        ├── 02_degiskenler.js
        ├── 03_donusumler.js
        ├── 04_matematik_tarih.js
        ├── 05_diziler_nesneler.js
        ├── 06_fonksiyonlar_scope.js
        ├── 07_akıs_donguler.js
        ├── 08_gelişmiş_diziler.js
        ├── 09_dom_yonetimi.js
        ├── 10_etkinlikler.js
        ├── 11_asenkron.js
        ├── 12_tarayıcı_api.js
        ├── 13_oop_siniflar.js
        └── 15_algoritmalar.js

⚙️ Kurulum Adımları (Adım Adım)

Projeyi bilgisayarınızda ayağa kaldırmak için terminal veya komut satırını açıp şu komutları sırasıyla uygulayın:

1. Proje Klasörünü Oluşturun ve İçine Girin:

mkdir modern-js-master
cd modern-js-master

2. Node.js Projesini Başlatın:

npm init -y

3. Gerekli Bağımlılıkları (Paketleri) Yükleyin:
Bu komut hem Backend (Express) hem de Frontend paketleme (Webpack, Babel) araçlarını yükler.

npm install express dotenv cors
npm install --save-dev webpack webpack-cli webpack-dev-server html-webpack-plugin babel-loader @babel/core @babel/preset-env jest

🛠️ Yapılandırma Dosyaları

package.json Dosyası

Dosyanızı açın ve scripts bölümünü aşağıdaki gibi güncelleyin:

{
  "name": "modern-js-master",
  "version": "1.0.0",
  "main": "server.js",
  "scripts": {
    "frontend:dev": "webpack serve --mode development",
    "frontend:build": "webpack --mode production",
    "backend:start": "node server.js",
    "test": "jest"
  },
  "dependencies": {
    "cors": "^2.8.5",
    "dotenv": "^16.4.5",
    "express": "^4.19.2"
  },
  "devDependencies": {
    "@babel/core": "^7.24.5",
    "@babel/preset-env": "^7.24.5",
    "babel-loader": "^9.1.3",
    "html-webpack-plugin": "^5.6.0",
    "jest": "^29.7.0",
    "webpack": "^5.91.0",
    "webpack-cli": "^5.1.4",
    "webpack-dev-server": "^5.0.4"
  }
}

webpack.config.js Dosyası

Kök dizinde bu dosyayı oluşturun. Frontend kodlarımızı birleştirecektir.

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  entry: './src/index.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js',
    clean: true,
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: './src/index.html',
    }),
  ],
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
          options: { presets: ['@babel/preset-env'] },
        },
      },
    ],
  },
  devServer: {
    port: 3000,
    open: true,
    hot: true,
  },
};

.env Dosyası

Arka plan ayarları için kök dizine ekleyin:

PORT=5000

🖥️ Sunucu (Backend) Kodu

server.js Dosyası

Kursun son aşamasındaki Node.js, Express ve API mantığını çalıştıran merkez üssüdür.

const express = require('express');
const cors = require('cors');
require('dotenv').config();

const app = express();
const PORT = process.env.PORT || 5000;

app.use(cors());
app.use(express.json());

// Örnek sahte veritabanı (Müfredattaki REST API konusu için)
let fikirler = [
  { id: 1, baslik: "JavaScript Öğren", yazar: "Asım" },
  { id: 2, baslik: "Webpack Ayarla", yazar: "Deniz" }
];

// GET İsteği
app.get('/api/fikirler', (req, res) => {
  res.json(fikirler);
});

// POST İsteği
app.post('/api/fikirler', (req, res) => {
  const yeniFikir = { id: Date.now(), baslik: req.body.baslik, yazar: "Anonim" };
  fikirler.push(yeniFikir);
  res.status(201).json(yeniFikir);
});

app.listen(PORT, () => {
  console.log(`Backend API çalışıyor: http://localhost:${PORT}`);
});

🎨 Arayüz (Frontend) Kodları

src/index.html Dosyası

DOM ve Etkinlikler konularının tarayıcıda hayat bulacağı HTML şablonumuz.

<!DOCTYPE html>
<html lang="tr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Modern JS Master Projesi</title>
    <style>
        body { font-family: sans-serif; margin: 30px; background: #f4f4f9; }
        .kutu { background: white; padding: 20px; border-radius: 8px; box-shadow: 0 2px 10px rgba(0,0,0,0.1); margin-bottom: 20px; }
        button { padding: 10px 15px; background: #007bff; color: white; border: none; border-radius: 4px; cursor: pointer; }
        button:hover { background: #0056b3; }
    </style>
</head>
<body>
    <h1>Modern JavaScript Müfredat Uygulaması</h1>
    <p>Konsolu (F12) açarak arka plandaki tüm JS çıktılarının çalışmasını izleyebilirsiniz.</p>

    <!-- DOM ve Etkinlik Kutusu -->
    <div class="kutu" id="dom-kutusu">
        <h2 id="ana-baslik">DOM ve Etkinlik Alanı</h2>
        <button id="renk-butonu">Arka Plan Rengini Değiştir</button>
        <ul id="gorev-listesi"></ul>
    </div>

    <!-- API Veri Kutusu -->
    <div class="kutu">
        <h2>Backend Rest API Bağlantısı</h2>
        <button id="api-veri-butonu">API'den Fikirleri Çek</button>
        <ul id="api-listesi"></ul>
    </div>
</body>
</html>

src/index.js Dosyası

Bütün JavaScript modüllerimizi (konularını) Webpack dünyasına bağlayan ana damardır.

// Müfredat konularını sırayla içeri aktarıyoruz (Modül Sistemi)
import './modules/01_konsol.js';
import './modules/02_degiskenler.js';
import './modules/03_donusumler.js';
import './modules/04_matematik_tarih.js';
import './modules/05_diziler_nesneler.js';
import './modules/06_fonksiyonlar_scope.js';
import './modules/07_akıs_donguler.js';
import './modules/08_gelişmiş_diziler.js';
import './modules/09_dom_yonetimi.js';
import './modules/10_etkinlikler.js';
import './modules/11_asenkron.js';
import './modules/12_tarayıcı_api.js';
import './modules/13_oop_siniflar.js';

📦 Konu Modüllerinin İçerikleri (src/modules/)

Aşağıdaki kodların her birini src/modules/ klasörünün altında ilgili dosya isimleriyle oluşturun.

01_konsol.js (Konsol Kullanımı)

console.log("--- Konu 1: Konsol ---");
console.warn("Bu bir uyarı mesajıdır.");
console.error("Bu bir hata simülasyonudur.");

02_degiskenler.js (Primitive vs Reference)

console.log("--- Konu 2: Değişken Tipleri ---");
let sayi1 = 10;
let sayi2 = sayi1; 
sayi1 = 20;
console.log("İlkel Kopya (Değişmez):", sayi2); // 10

let dizi1 =;
let dizi2 = dizi1;
dizi1.push(3);
console.log("Referans Kopya (Değişir!):", dizi2); // [1, 2, 3]

03_donusumler.js (Type Conversion & Coercion)

console.log("--- Konu 3: Tip Dönüşümleri ---");
let metin = "100";
console.log("Dönüşüm:", Number(metin) + 50); // 150
console.log("Dayatma (Coercion):", "5" + 5); // "55"

04_matematik_tarih.js (Math & Date)

console.log("--- Konu 4: Math ve Tarih ---");
console.log("Rastgele Sayı (1-10):", Math.floor(Math.random() * 10) + 1);
const bugun = new Date();
console.log("Formatlı Tarih:", new Intl.DateTimeFormat('tr-TR').format(bugun));

05_diziler_nesneler.js (Destructuring & Spread)

console.log("--- Konu 5: Diziler ve Nesneler ---");
const kisi = { ad: "Hasan", yas: 32 };
const { ad } = kisi; // Destructuring
console.log("Destructure Edilen Ad:", ad);

const eskiDizi =;
const yeniDizi = [...eskiDizi, 3, 4]; // Spread Operatörü
console.log("Birleşik Dizi:", yeniDizi);

06_fonksiyonlar_scope.js (Arrow Functions & Scope)

console.log("--- Konu 6: Fonksiyonlar ve Kapsam ---");
const karesi = (x) => x * x; // Arrow Function
console.log("9'un Karesi:", karesi(9));

if (true) {
    let blokDegiskeni = "Sadece buraya ait";
    var fonksiyonSizintisi = "Blok dışına taşar";
}
console.log("Sızıntı Kontrolü:", fonksiyonSizintisi);

07_akıs_donguler.js (Logic & FizzBuzz)

console.log("--- Konu 7: Döngüler (FizzBuzz) ---");
let sonuclar = [];
for (let i = 1; i <= 5; i++) {
    if (i % 3 === 0) sonuclar.push("Fizz");
    else sonuclar.push(i);
}
console.log("FizzBuzz İlk 5 Adım:", sonuclar);

08_gelişmiş_diziler.js (Map, Filter, Reduce)