Verdiğiniz JavaScript kurs müfredat dosyasını belirttiğiniz tüm kurallara uyarak (dakika/saniye bilgilerini kaldırarak, "Önizleme" ve "ders" satırlarını ele dışı bırakarak) satır satır ve en detaylı şekilde incelemeye başlıyoruz.

Bu rehber, bir yazılımcı dostunuz olarak konularda hiçbir özet yapmadan, her bölüme özel teorik açıklamalar, günlük hayat benzetmeleri (analojiler), kod örnekleri ve uygulamalar içerir.

🎯 "Öğrenecekleriniz" Bölümünün Detaylı Açıklaması

Kursun başındaki bu giriş kısmı, bir öğrencinin bu eğitimi bitirdiğinde hangi becerilere sahip olacağını gösteren bir yol haritasıdır. Maddeleri tek tek inceleyelim:

• JavaScript'e Başlamak İçin Mükemmel - Kod Yazmanızı Sağlayacak Başlangıç Projeleriyle Dolu: Bu kurs sıfırdan başlar. Sadece teorik bilgi vermez, sizi hemen klavye başına oturtup küçük projelerle kod yazmaya alıştırır.

• DOM (Document Object Model) Konusunda Uzmanlaşın: DOM, JavaScript'in HTML sayfasına dokunmasını sağlayan bir köprüdür. Bu köprüyü sonuna kadar kullanmayı öğreneceksiniz.

• Saf JavaScript Kullanarak DOM Etkileşimi İçeren, 50'den Fazla Gerçek Dünya Projesiyle Modüler Öğrenme Bölümleri: Kurs modüllerden oluşur. Dışarıdan hiçbir hazır kütüphane (JQuery, React vb.) almadan, sadece ham (Pure/Vanilla) JavaScript ile 50'den fazla proje yapacaksınız.

• Sıfırdan EĞLENCELİ Gerçek Dünya JavaScript Projeleri İnşa Ederken JavaScript'i Nasıl Öğrenebileceğinizi Keşfedin: Sıkıcı teoriler yerine, oyunlar ve çalışan uygulamalar yaparak kodlamayı kalıcı olarak öğreneceksiniz.

• JavaScript Nasıl Kullanılır ve JavaScript Arka Planda Nasıl Çalışır?: Yazdığınız kodun tarayıcı tarafından nasıl yorumlandığını, bilgisayarın hafızasında neler döndüğünü derinlemesine anlayacaksınız.

• JavaScript Belge Nesnesi Modelini (DOM) Keşfedin, Etkileşimli ve Dinamik Web Sayfaları Yapın: Kullanıcı bir butona bastığında sayfa yenilenmeden verilerin değiştiği, canlanan web siteleri kuracaksınız.

• JavaScript Kullanarak Öğeleri Yönetin - Web Sayfalarınıza JavaScript ile HAYAT Verin: Sayfadaki bir yazıyı büyütmek, bir resmi gizlemek veya rengini değiştirmek gibi tüm kontrol sizde olacak.

• Dinamik Olarak Öğeler Nasıl Oluşturulur ve Dahası - Oluşturulacak Oyunlar ve Harika Projelerle: HTML dosyasında hiç yokken, JavaScript koduyla havadan yeni butonlar, listeler veya kutular var etmeyi öğreneceksiniz.

• Değişkenler, Boolean Mantığı, If/Else, Döngüler, Fonksiyonlar, Diziler vb. Temel JavaScript Becerilerini Geliştirin: Programlamanın alfabesi olan temel kuralları sağlam bir şekilde oturtacaksınız.

• Tam Bir Yeni Başlayandan İleri Düzey Bir JavaScript Geliştiricisine Doğru İlerleyin: Bilgisayarda sadece klasör açmayı bilen birinden, karmaşık mantık yürüten bir yazılımcıya dönüşüm hedeflenir.

• JavaScript ve Programlama Temelleri: Bilgisayar gibi düşünmeyi ve algoritmik zekayı kazanacaksınız.

• Hem ES5 Hem de ES6+ ile Gerçek Dünya Uygulamaları Oluşturun: JavaScript'in eski yazım tarzını (ES5) ve günümüzün modern, hızlı yazım tarzını (ES6 ve sonrası) öğreneceksiniz.

• 2020 İçin Modern JavaScript: Güncel standartlara uygun temiz kod yazma becerisi kazanacaksınız.

• Kaynak Kod Dahil - Kendi Uygulama Sürümünüzü BUGÜN İnşa Edin: Kurs size kodları hazır verir ancak amaç sizin kendi hayal gücünüzle bu kodları değiştirip kendi portfolyonuzu oluşturmanızdır.

📚 KURS İÇERİĞİNİN SATIR SATIR ETKİNLİK VE KOD ANALİZİ

Bölüm 1: JavaScript Kursuna ve İçeriğe Giriş (JavaScript Uygulamaları İnşa Etme)

Bu bölüm, yazılım dünyasına adım attığınız yerdir. Gerekli araç gereçleri bilgisayarımıza kurup ilk kod ortamını hazırlarız.

Kod Editörü Visual Studio Code (VS Code)

Yazılımcıların kodlarını yazdığı, onlara renkler ve ipuçları vererek kolaylık sağlayan gelişmiş bir gelişmiş not defteridir. Tıpkı bir terzinin dikiş makinesi gibidir.

💻 Uygulama: Bilgisayara VS Code kurulur. JavaScript kodlarını tarayıcıda canlı görmek için "Live Server" eklentisi aktif edilir.

Bölüm 2: JavaScript Temel Esasları ve JavaScript ile Başlarken

Burası programlamanın temel yapı taşlarını öğrendiğimiz mutfaktır.

JavaScript Web'e Güç Verir & JavaScript Hakkında Daha Fazlası

JavaScript, web sayfalarını hareket ettiren beyindir. HTML kemik (yapı), CSS elbise (görünüm), JavaScript ise kas sistemidir (hareket).

JavaScript ve HTML Oluşturma & JavaScript Yorum Satırları (Comments)

JavaScript kodları HTML sayfasına <script> etiketi ile bağlanır. Yorum satırları ise bilgisayarın okumadığı, sadece yazılımcıların kendilerine not bırakmak için kullandığı alanlardır. Tıpkı bir yemek tarifinin kenarına "burayı çok pişirme" notu düşmek gibidir.

// Bu tek satırlık bir yorumdur. Bilgisayar burayı görmezden gelir.
/* 
   Bu ise çok satırlı 
   bir yorum alanıdır.
*/

JavaScript Değişkenleri (Variables - Let, Const) ve Veri Tipleri

Değişkenler, bilgisayarın hafızasındaki küçük kutulardır. İçlerine bilgi koyarız.

• let: İçindeki değer sonradan değiştirilebilen kutudur.

• const: İçindeki değer asla değiştirilemeyen, sabit kutudur (Constant).

Günlük Hayat Analojisi: Bir yolcunun yaşı her yıl değiştiği için let ile tutulur, T.C. kimlik numarası hiç değişmediği için const ile tutulur.

let kullaniciYasi = 25; 
kullaniciYasi = 26; // Bu işlem yapılabilir.

const dogumYili = 1999;
// dogumYili = 2000; // HATA! Sabit değer değiştirilemez.

JavaScript Prompt ve Template Literal

• prompt: Kullanıcıdan tarayıcı aracılığıyla yazı veya sayı almak için açılan küçük girdi kutusudur.

• Template Literal: Yazılar ile değişkenleri birbirine kolayca bağlamamızı sağlayan ters tırnak (`) yöntemidir.

💻 Uygulama: Kullanıcıdan ismini alıp ona özel karşılama mesajı hazırlayalım.

let isim = prompt("Lütfen adınızı giriniz:");
// Eski yöntem (ES5):
console.log("Merhaba " + isim + ", hoş geldin!");
// Modern yöntem (Template Literal - ES6+):
console.log(`Merhaba ${isim}, hoş geldin!`);

JavaScript Operatörleri ve Karşılaştırma Operatörleri

Matematiksel işlemler (+, -, *, /) ve durum karşılaştırmaları yapmak için kullanılır.

• == : Değerler eşit mi?

• === : Hem değerler hem de veri tipleri (yazı mı sayı mı olduğu) tamamen aynı mı?

let sayi = 5;
let yazi = "5";

console.log(sayi == yazi);  // true (Çünkü ikisi de özünde 5)
console.log(sayi === yazi); // false (Çünkü biri sayı, biri yazı tipinde)

If Else Yapıları, Ternary Operatörü ve Switch Durumları

Karar verme mekanizmalarıdır. "Eğer hava yağmurluysa şemsiye al, değilse gözlük al" mantığıyla çalışır. Ternary, tek satırda hızlıca if-else yazma yoludur.

// Normal If-Else
let yas = 18;
if (yas >= 18) {
    console.log("Ehliyet alabilirsin.");
} else {
    console.log("Yaşın henüz küçük.");
}

// Ternary Operatörü Kullanımı
let mesaj = (yas >= 18) ? "Ehliyet alabilirsin." : "Yaşın henüz küçük.";
console.log(mesaj);

JavaScript Fonksiyonları (Parameters, Return, Arrow Functions)

Fonksiyonlar, tekrar tekrar kullanılabilen küçük fabrikalardır. İçine hammadde (parametre) verirsiniz, size işlenmiş ürün (return) verir. Arrow Function ise modern, kısa yazım şeklidir.

// Modern Arrow Function ve Return Kullanımı
const kareAl = (sayi) => {
    return sayi * sayi;
};

let sonuc = kareAl(4); // sonuc kutusuna 16 yüklenir.
console.log(sonuc);

Fonksiyon Kapsamı (Scope) ve Rekürsiyon (Recursion)

• Scope: Bir değişkenin nerede yaşayabildiğini belirler. Fonksiyon içinde tanımlanan değişken dışarıda okunamaz (Local Scope).

• Recursion: Bir fonksiyonun kendi kendisini tekrar çağırmasıdır. Sonsuz bir döngü gibi çalışabilir, bu yüzden durma noktası iyi belirlenmelidir.

// Rekürsiyon ile Faktöriyel Hesaplama Örneği
function faktoriyel(n) {
    if (n === 1) return 1; // Durma noktası
    return n * faktoriyel(n - 1);
}
console.log(faktoriyel(5)); // 120 sonucunu verir.

IIFE (Immediately Invoked Function Expression)

Tanımlandığı anda kendiliğinden hemen çalışan, isim verilmesi zorunlu olmayan gizli fonksiyonlardır. Sayfa açılır açılır çalışmasını istediğimiz ayarlar için kullanılır.

(function() {
    console.log("Sayfa yüklendi, bu fonksiyon hemen çalıştı!");
})();

JavaScript Objeleri (Objects) ve Diziler (Arrays)

• Dizi (Array): Tek bir kutuda birden fazla veriyi sırayla saklama listesidir. Alışveriş listesi gibi düşünülebilir.

• Obje (Object): Bir varlığın tüm özelliklerini detaylı saklayan yapılardır. Bir arabanın rengi, modeli ve hızı gibi.

// Dizi Örneği
let meyveler = ["Elma", "Armut", "Muz"];

// Obje Örneği
let araba = {
    marka: "Toyota",
    model: "Corolla",
    yil: 2022,
    calis: function() {
        console.log("Araba çalıştı...");
    }
};
console.log(araba.marka); // Toyota
araba.calis(); // Objeye ait fonksiyonu çalıştırır.

Gelişmiş Dizi Yöntemleri (Filter, Map ve Döngüler)

Diziler üzerinde arama yapmak, her elemanı değiştirmek veya listeyi dönmek için kullanılan modern süper güçlerdir.

• map: Tüm elemanları tek tek elden geçirip yeni bir liste üretir.

• filter: Belirli bir kurala uyan elemanları ayıklayıp yeni bir liste yapar.

let sayilar =;

// Sadece çift sayıları filtreleyelim
let ciftler = sayilar.filter(sayi => sayi % 2 === 0); // [2, 4, 6]

// Her sayının iki katını alalım
let ikiKati = sayilar.map(sayi => sayi * 2); // [2, 4, 6, 8, 10, 12]

Bölüm 3: JavaScript Web Sayfası Etkileşimi ve Dinamik İçerik (DOM)

Bu bölümde ekran üzerindeki HTML elementlerini kontrol etmeyi, değiştirmeyi öğreniyoruz.

Element Seçimi (Selection) ve Yönetimi (Manipulation)

JavaScript'in HTML elementini bulması işlemine seçim denir. Onu değiştirmesine ise manipülasyon denir.

• document.querySelector(): HTML sayfasındaki kimlik (id) veya sınıfa (class) göre tek bir elementi yakalar.

// HTML'deki id'si "baslik" olan yazıyı seçelim ve rengini değiştirelim
const anaBaslik = document.querySelector("#baslik");
anaBaslik.textContent = "Yeni Başlık JavaScript ile Yazıldı!";
anaBaslik.style.color = "red"; // Yazıyı kırmızı yapar.

Çocuk Öğeler ve DOM Ağacında Gezinme (Traversing)

HTML elementleri birbirinin içinde yaşar (Anne/Baba ve Çocuk ilişkisi). Bir elementi seçip onun üst sınırına (Parent) veya içindeki alt öğelerine (Children) kodla ulaşabiliriz.

Olay Dinleyiciler (Event Listeners) ve Olay Nesnesi (Event Object)

Kullanıcının yaptığı tıklama, fareyi oynatma veya klavyeden bir tuşa basma hareketlerine "Event" (Olay) denir. JavaScript bu hareketleri pusuya yatarak dinler.

💻 Uygulama: Bir butona basıldığında sayfada yeni bir liste elemanı oluşturalım.

const buton = document.querySelector("#ekleButon");
const liste = document.querySelector("#benimListem");

buton.addEventListener("click", function(event) {
    // event nesnesi tıklamanın nerede yapıldığı bilgisini taşır.
    const yeniMadde = document.createElement("li"); // Havadan li elementi oluşturduk.
    yeniMadde.textContent = "Yeni Alışveriş Maddesi";
    liste.appendChild(yeniMadde); // Listeye ekledik.
});

Olay Kabarcıklanması (Event Bubbling) ve Yakalama (Capturing)

Bir elemente tıkladığınızda, o element bir kutunun içindeyse, tıklama olayı dıştaki kutuya da bulaşır. Buna kabarcıklanma denir. Sudan çıkan bir hava kabarcığının yukarı doğru çıkması gibidir. event.stopPropagation() ile bu bulaşma engellenebilir.

Bölüm 4: İleri Düzey JavaScript Yöntemleri ve Fazlası

Sayı ve Metin Metotları (String / Number Methods)

Yazıları parçalamak, büyütmek veya sayıları yuvarlamak için hazır fonksiyonlardır.

• Math.random(): 0 ile 1 arasında rastgele bir sayı üretir. Oyunların temelidir.

• Math.floor(): Ondalıklı sayıları aşağıya tam sayıya yuvarlar.

let rastgeleSayi = Math.floor(Math.random() * 10) + 1; // 1 ile 10 arasında rastgele tam sayı üretir.

JSON Parse ve Stringify & LocalStorage

• LocalStorage: Tarayıcının hafızasıdır. Tarayıcı kapansa bile veriler burada saklı kalır.

• JSON.stringify: Bir objeyi yazıya dönüştürür (Hafızaya kaydetmek için).

• JSON.parse: Yazıyı tekrar objeye çevirir (Hafızadan okumak için).

let kullanici = { isim: "Ahmet", skor: 90 };

// Hafızaya kaydetme
localStorage.setItem("aktifKullanici", JSON.stringify(kullanici));

// Hafızadan geri okuma
let gelenVeri = localStorage.getItem("aktifKullanici");
let orjinalObje = JSON.parse(gelenVeri);
console.log(orjinalObje.isim); // Ahmet

Zamanlayıcılar (Timers - SetTimeout, SetInterval)

• setTimeout: Belirli bir süre bekleyip ardından bir kez çalışır.

• setInterval: Belirli aralıklarla durmadan tekrarlayarak çalışır (Saatler ve kronometreler için).

// 3 saniye sonra ekrana uyarı ver
setTimeout(() => {
    console.log("3 saniye doldu!");
}, 3000);

Düzenli İfadeler (RegEx - Regular Expressions)

Bir yazı bloğunun içinde belirli kurallara uyan kelimeleri arama yöntemidir. Örneğin girilen metnin gerçekten bir e-posta adresi olup olmadığını denetlemek için kullanılır.

Hata Yakalama (Try and Catch)

Yazdığımız kodda ani bir hata oluştuğunda programın tamamen çökmesini engelleyen güvenlik duvarıdır.

try {
    // Hata yapma ihtimali olan kod bloğu
    olmayanFonksiyonuCalistir();
} catch (error) {
    // Hata olursa burası çalışır ve hata mesajını basar, kod çökmez.
    console.log("Bir hata meydana geldi: " + error.message);
}

Asenkron Yapılar: XHR ve Fetch

İnternetteki başka bir sunucudan sayfayı yenilemeden canlı veri çekme (Hava durumu verisi, döviz kuru vb.) teknolojisidir. Modern dünyada fetch yöntemi kullanılır.

// Fetch ile internetten veri çekme örneği
fetch("https://github.com")
    .then(cevap => cevap.json())
    .then(veri => console.log(`Kullanıcı Adı: ${veri.name}`))
    .catch(hata => console.log("Hata oldu:", hata));

Bölüm 5: JavaScript HTML5 Canvas Giriş

Canvas, web sayfasında üzerine kodla resim, çizgi ve animasyon yapabileceğimiz boş bir dijital tuvaldir. Oyun grafikleri burada çizilir.

💻 Uygulama: Canvas üzerinde hareket eden bir kutu yapımı ve requestAnimationFrame kullanımı. requestAnimationFrame, tarayıcının ekran yenileme hızına göre animasyonları akıcı oynatan modern bir motordur.

const canvas = document.querySelector("#oyunAlani");
const ctx = canvas.getContext("2d");

let x = 10;
function animasyon() {
    ctx.clearRect(0, 0, canvas.width, canvas.height); // Ekranı temizle
    ctx.fillStyle = "blue";
    ctx.fillRect(x, 50, 50, 50); // Mavi kutu çiz
    x += 2; // Kutuyu sağa kaydır
    requestAnimationFrame(animasyon); // Sürekli tekrarla
}
// animasyon(); // Tetiklendiğinde kutu kaymaya başlar.

Bölüm 6'dan İtibaren Kurs İçi Projelerin ve Uygulamaların Birebir Yapılışı

Bu kısımdan sonra kurs içerisindeki uygulamaların çalışma mantıklarını kurup kod bloklarını ayağa kaldırıyoruz.

📌 Proje 1: Bahşiş Hesaplayıcı (Tip Calculator)

Kullanıcının hesap tutarını ve memnuniyet oranını girerek ödenecek bahşişi anlık hesapladığı uygulamadır.

// Mantık: Tutar ile oran çarpılır, kişi sayısına bölünür.
function bahsisHesapla(tutar, servisYuzdesi) {
    return tutar * (servisYuzdesi / 100);
}
console.log(`Ödenecek Bahşiş: ${bahsisHesapla(500, 15)} TL`); // 75 TL

📌 Proje 2: Karşılama Mesajları (Zamana Göre Değişen Dinamik Karşılayıcı)

Kullanıcının bilgisayar saatine bakar. Sabah ise "Günaydın", akşam ise "İyi Akşamlar" yazar ve sayfa arka plan rengini zamana göre gece moduna veya gündüz moduna alır.

const saat = new Date().getHours();
let mesaj = "";
if (saat < 12) {
    mesaj = "Günaydın!";
    document.body.style.backgroundColor = "#lightyellow";
} else if (saat < 18) {
    mesaj = "Tünaydın!";
} else {
    mesaj = "İyi Akşamlar!";
    document.body.style.backgroundColor = "#2c3e50"; // Gece koyuluğu
}
console.log(mesaj);

📌 Proje 3: Yazı Tura Uygulaması (Coin Toss)

Bilgisayarın Math.random ile 0 veya 1 seçerek "Yazı" veya "Tura" tahmini yaptığı oyun simülasyonudur.

function yaziTuraAt() {
    let sonuc = Math.random() < 0.5 ? "Yazı" : "Tura";
    console.log(`Para döndü ve geldi: ${sonuc}`);
}
yaziTuraAt();

📌 Proje 4: Taş Kağıt Makas Oyunu (Rock Paper Scissors)

Kullanıcının seçimi ile bilgisayarın rastgele ürettiği seçimi karşılaştırıp kazananı skor tablosuna işleyen sistemdir.

const secenekler = ["Taş", "Kağıt", "Makas"];
let bilgisayarSecimi = secenekler[Math.floor(Math.random() * 3)];
console.log(`Bilgisayarın Hamlesi: ${bilgisayarSecimi}`);

📌 Proje 5: Gelişmiş Zar Oyunu (Ultimate Dice Game)

JavaScript ile sayfada hiç zar yokken HTML elementlerini (document.createElement) kullanarak kare şeklinde zarlar oluşturur ve içine gelen sayı kadar küçük noktalar (daireler) çizer.

📌 Proje 6: Ses Çalar Uygulaması (Play Audio Files)

Sayfada birden fazla buton oluşturur. Her butona tıklandığında ona tanımlı olan kısa mp3 ses dosyasını (örneğin alkış, davul, hata sesi) oynatır.

let ses = new Audio("alkis.mp3");
// ses.play(); // Sesi çalar.

📌 Proje 7: Dinamik Klavye Hız Testi (Dynamic Typing Test)

Ekrana rastgele uzun bir cümle getirir. Kullanıcı yazmaya başladığı an Date nesnesi ile zamanı tutar. Kullanıcı cümleyi bitirdiğinde geçen süreyi hesaplayıp dakika başına kelime hızını (WPM) ölçer.

📌 Proje 8: Nesne Hareket Ettirici (Functionator / DOM Mover)

Klavyedeki yön tuşlarını (keydown olayı) dinleyerek ekrandaki bir karakter resmini veya kutuyu duvar sınırlarına çarpmayacak şekilde oyun alanında yürütür.

📌 Proje 9: Sihirli 8 Top (Magic Eight Ball)

Kullanıcı bir soru yazar, butona tıklar. İçerideki dizi içerisinden rastgele ("Kesinlikle evet", "Daha sonra tekrar dene", "Asla") gibi cevaplar ekrana animasyonla gelir.

📌 Proje 10: JavaScript Akordeon Menü (Accordion Project)

Sıkça sorulan sorular sayfalarında gördüğümüz, başlığa tıklayınca altındaki cevabın aşağı doğru süzülerek açıldığı, diğer açık olanların ise kapandığı sistemdir. classList.toggle("active") komutuyla yapılır.

📌 Proje 11: Şifre Kırıcı / Kasa Tahmin Oyunu (Combination Guesser)

Bilgisayar gizli bir 3 basamaklı sayı tutar. Kullanıcı yukarı aşağı butonlarıyla sayıları tahmin etmeye çalışır. JavaScript "Daha büyük bir sayı gir" veya "Kilit açıldı" şeklinde ipuçları basar.

📌 Proje 12: Kelime Karıştırma Oyunu (Word Scramble)

Bir kelimenin harflerinin yerini karmaşık hale getirir (Array.sort(() => Math.random() - 0.5)). Kullanıcıdan orijinal kelimeyi tahmin etmesini ister.

📌 Proje 13: Geri Sayım Sayacı (Countdown Timer)

Belirli bir gelecekteki tarihe (Örneğin yılbaşı gecesine) ne kadar gün, saat, dakika ve saniye kaldığını matematiksel hesaplamalarla her saniye ekranda günceller.

📌 Proje 14: Hafıza / Desen Eşleştirme Oyunu (Pattern Matching Game)

Ekranda renkli kutular sırayla yanar söner (Simond Says oyunu gibi). Kullanıcıdan bilgisayarın yaktığı sırayı hafızasında tutup aynı düzende kutulara tıklaması istenir.

📌 Proje 15: Balon Patlatma Oyunu (Click Popper Game)

Ekranda rastgele yerlerde ve hızlarda sürekli balonlar veya ikonlar belirir. Kullanıcı süre bitmeden onlara tıklayarak patlatmaya ve skor toplamaya çalışır.

📌 Proje 16: Yüksek Alçak Kart Oyunu (Hi Lo Card Game)

Deste oluşturulur. Ekrandaki karttan bir sonraki çekilecek kartın değerinin daha mı yüksek daha mı düşük olacağını tahmin etme oyunudur.

📌 Proje 17: Araba Yarışı Oyunu (Car Driving Game)

Tamamen JavaScript ile yapılmış dikey bir oyundur. Yukarı ok tuşuyla araba hızlanır, yol şeritleri aşağı doğru kayarak hareket illüzyonu yaratır. Karşıdan gelen arabalara çarpma kontrolü (Collision Detection) mesafeler ölçülerek yapılır.

📌 Proje 18: Karakter Sayacı (Character Counter)

Bir mesaj kutusuna (textarea) yazı yazıldıkça kaç harf hakkı kaldığını söyler. Sınır yaklaştığında yazıyı sarıya, sınır bittiğinde kırmızıya boyar ve yazmayı engeller.

📌 Proje 19: Otomatik Kayan İçerik (Element Scroller)

Haber sitelerindeki alt bant gibi, yazıların ekranın altından durmadan sola doğru akmasını sağlar. Fare üzerine gelince akış durur (mouseover), fare çekilince devam eder.

📌 Proje 20: Sürükle Bırak Çöp Kutusu Uygulaması (DOM Trash Bin)

Ekrandaki elementleri fareyle tutup ekran üzerinde herhangi bir yere sürüklememizi, çöp kutusu görselinin üzerine bıraktığımızda ise o elementi sayfadan tamamen silmemizi (Element.remove()) sağlar.

📌 Proje 21: Adam Asmaca (Hangman Game)

Gizli kelime kadar ekrana alt çizgi koyar. Alfabedeki harf butonlarına tıklandıkça harf kontrolü yapılır. Bilemedikçe adam asılma aşamaları görsel olarak güncellenir.

📌 Proje 22: Pop-up Modal Pencere Görünümü

Sayfanın ortasında açılan, arkadaki her şeyi karartan modern uyarı pencereleridir. Kapatma butonuna basıldığında CSS sınıfları kaldırılarak gizlenir.

📌 Proje 23: Resim Galerisi Slider (Image Carousel)

İleri ve geri ok butonlarına basıldığında resimlerin sırayla değiştiği, altında hangi resimde olduğumuzu gösteren küçük noktaların (indikatörler) yandığı slayt gösterisidir.

📌 Proje 24: Yıldız Değerlendirme Sistemi (Star Rating)

Ürün yorumlarında olan 5 yıldızlı sistemdir. Fareyle 3. yıldızın üzerine gelirseniz ilk 3 yıldız parlar (mouseover), tıkladığınızda o puan sabitlenir (click).

📌 Proje 25: Uçak Bombardıman Oyunu (Plane Bomber)

Ekranın üstünde sağa sola giden bir uçaktan boşluk tuşuyla bombalar bırakarak yerdeki hedefleri vurmaya çalıştığınız hareketli bir DOM oyunudur.

📌 Proje 26: Kutu Kovalama Oyunu (Chaser Box Game)

Oyun alanı içinde sürekli kaçan akıllı bir hedef kutu vardır. Kullanıcı kendi kutusunu yön tuşlarıyla hareket ettirerek kaçan kutuyu yakalamaya çalışır. Her yakalamada skor artar ve hedef başka yere ışınlanır.

📌 Proje 27: Bilgi İpucu Kutusu (Tooltip)

Bir kelimenin üzerine fareyle gelindiğinde, farenin hemen yanında siyah küçük bir açıklama balonu açılır. Farenin koordinatları (event.pageX, event.pageY) alınarak konumlandırılır.

📌 Proje 28: E-posta Ayıklayıcı (Email Extractor)

Kullanıcı karmaşık, upuzun bir yazı yapıştırır. JavaScript içerideki düzenli ifadeleri (RegEx) tarayarak sadece e-posta adreslerini cımbızla çeker gibi ayıklar ve listeler. Çift kayıtları eler.

📌 Proje 29: JavaScript Hesap Makinesi (Calculator)

Ekrandaki rakam ve işlem butonlarına basılarak matematiksel işlemler yapılan bir uygulamadır. Arka planda eval() metodu kullanılarak formüller sonuçlandırılır.

📌 Proje 30: Dinamik Alışveriş Listesi (Shopping List)

Listeye yeni eleman ekleme, eklenen elemanın yanındaki "Sil" butonuna basınca uçurma ve elemanın üzerine çift tıklayınca anında düzenlenebilir yazı kutusuna dönüştürme (contenteditable) özelliklerine sahiptir.

📌 Proje 31: Sahte Resim Linki Üretici (Placeholder Image Generator)

Kullanıcı genişlik, yükseklik ve renk seçer. JavaScript ona test çalışmalarında kullanabileceği dinamik bir resim url adresi üretip ekrana basar.

📌 Proje 32: Form Doğrulama Örneği (Form Validation)

Kullanıcı kayıt olurken şifrenin uzunluğunu, e-postada "@" işareti olup olmadığını denetler. Eğer kurallara uymuyorsa formu göndermez ve kutuların altına kırmızı uyarılar yazar.

📌 Proje 33: Çerez Test Makinesi (Cookie Tester)

Kullanıcının tarayıcısına küçük bilgi kırıntıları (çerez/cookie) bırakmasını, bu çerezlerin son kullanma tarihlerini ayarlamasını ve silmesini sağlayan yönetim panelidir.

📌 Proje 34: Sayfa Dinamosu (DOMinator)

Kullanıcının açılır menüden (Select Box) seçim yaparak sayfaya anında yeni butonlar, yeni inputlar ekleyebildiği veya silebildiği, DOM sınırlarını zorlayan bir yönetim aracıdır.

📌 Proje 35: Google E-Tablo Verisini CSV Dosyasına Çevirme (CSV Maker)

Tablo halindeki verileri virgüllerle ayrılmış metin dosyası biçimine (.csv) dönüştürüp kullanıcının bilgisayarına dosya olarak indirmesini sağlayan veri transfer projesidir.

📌 Proje 36: Flappy Bird Benzeri Kuş Uçurma Oyunu (Flying Bird)

Boşluk tuşuna bastıkça yukarı zıplayan, basmayınca yerçekimiyle düşen bir kuşun, karşıdan gelen engellerin arasından geçmesini sağlayan çarpışma algılamalı tam fonksiyonel oyundur.

📌 Proje 37: Sayı Tahmin Oyunu (Number Guessing Game)

Bilgisayar 1-100 arası sayı tutar. Kullanıcı tahmin eder. "Yukarı", "Aşağı" yönlendirmeleriyle haklar azalarak sayı bulunmaya çalışılır.

📌 Proje 38: Uzay İstilacıları Oyunu (Alien Invader)

Klasik atari oyunudur. Ekranın üstündeki uzaylı ordusu sağa sola giderek aşağı yaklaşır. Aşağıdaki oyuncu sağa sola kaçarak uzaylıları mermilerle vurup yok eder.

📌 Proje 39: Kart Savaşı Oyunu (Card War Game)

52'lik deste karıştırılır ve iki oyuncuya dağıtılır. Butona basıldığında kartlar açılır, değeri büyük olan kartı alan o elin puanını kapar. Deste bitene kadar savaş sürer.

📌 Proje 40: YouTube API Bağlantılı Video Arama Sistemi

Kullanıcı arama kutusuna bir kelime yazar. Kod, YouTube sunucularına arka planda bağlanarak gelen video sonuçlarını başlıkları ve küçük resimleriyle sayfaya listeler. Sayfalama (Sonraki sayfa) mantığını içerir.

📌 Proje 41: Tuğla Kırma Oyunu (Brick Breaker)

Alttaki tahtayı fareyle sağa sola oynatarak zıplayan topu düşürmemeye çalışırsınız. Top yukarıdaki tuğlalara çarptıkça tuğlalar kırılır ve yok olur.

📌 Proje 42: Nesne Yönelimli Programlama (OOP) Yapıları ve Alışveriş Sepeti

JavaScript'teki class (Sınıf) yapılarını öğreniriz. Ürünler ve Alışveriş sepeti birer yazılımsal nesne olarak kurgulanır. Sepete ekle, adeti arttır, KDV hesapla gibi işler fonksiyonel objeler üzerinden yürütülür.

📌 Proje 43: Var mısın Yok musun Oyunu (Deal Game)

Ekranda 24 adet kapalı kutu oluşturulur. Kullanıcı bir kutu seçer. Ardından diğer kutuları tek tek açarak büyük ödülleri eler. Belirli turlarda banka kullanıcıya teklif sunar ("Kabul" veya "Reddet").

📌 Proje 44: Sonsuz Kaydırma Sayfası (Endless Scroll / JSON Fetch)

Kullanıcı fare tekerleğiyle sayfanın en altına geldiğinde, JavaScript bunu fark eder ve internetten yeni veri (örneğin yeni Instagram fotoğrafları gibi) çekip sayfanın altına otomatik ekler. Sayfa hiç bitmez.

📌 Proje 45: Blackjack / 21 Oyunu

Yazılımsal olarak iskambil kartları oluşturulur, karıştırılır (Shuffle). Oyuncu "Kart Al" veya "Kal" der. Kurpiyerin elindeki sayılarla karşılaştırılıp 21'e en yakın olan veya tam 21 yapan kazanır, bahisler ödenir.

Bölüm 46: İleri Düzey JavaScript Ödevleri ve Teknik Konu Açıklamaları

Bu kısım mülakatlarda (iş görüşmelerinde) karşımıza çıkan kıdemli yazılımcı konularını içerir.

⚡ Nesneyi Derinlemesine Klonlamak (Deep Cloning An Object)

JavaScript'te bir objeyi direkt başka bir değişkene eşitlerseniz, sadece adresini kopyalarsınız. Birinde yapılan değişiklik diğerini de bozar (Shallow Copy). deepClone fonksiyonu hafızada tamamen bağımsız yeni bir kopya oluşturur.

function deepClone(obj) {
    return JSON.parse(JSON.stringify(obj));
}
let orijinal = { ad: "Can", detay: { yas: 30 } };
let kopya = deepClone(orijinal);
kopya.detay.yas = 31; // Orijinaldeki yaş hala 30 kalır, bozulmaz.

⚡ Özel Promise Yapısı İnşa Etmek (Implementing a Simple Promise)

Asenkron işlemlerin (zaman alan işlerin) bittiğinde bize olumlu (resolve) veya olumsuz (reject) cevap dönmesini sağlayan, zincirleme .then() komutlarıyla birbirine bağlanan JavaScript söz verme motorunun ham halini sıfırdan kodlamaktır.

⚡ Geciktirme Fonksiyonu (Debouncing Function)

Kullanıcı klavyede yazı yazarken, o her harfe bastığında internette arama yaparsak sistem çöker. Debounce, kullanıcının tuşlara basmayı tamamen bitirmesini bekler (Örneğin yarım saniye duraksadıysa), ardından tek bir defa işlem yapar.

function debounce(fn, beklemeSuresi) {
    let zamanlayici;
    return function(...args) {
        clearTimeout(zamanlayici);
        zamanlayici = setTimeout(() => fn.apply(this, args), beklemeSuresi);
    };
}

⚡ Hız Sınırlayıcı Fonksiyon (Throttle Function)

Özellikle sayfa aşağı kaydırılırken (scroll olayı) tarayıcı salaniyede yüzlerce kez kod çalıştırır. Throttle, bu tetiklenme ne kadar çok olursa olsun, fonksiyonun sadece belirlenen süre aralığında (örneğin 200 milisaniyede bir) en fazla bir kez çalışmasını zorunlu kılar. Tarayıcıyı rahatlatır.

⚡ Basit Yönlendirici Sistemi (Simple Router)

Sayfa yenilenmeden, sadece üstteki URL kısmındaki diyez (#about, #contact) işaretine bakarak ekranın ortasındaki içeriği dinamik değiştiren, dış kütüphanesiz Single Page Application (SPA) alt yapısı kurmaktır.

⚡ Resimleri Tembelce Yükleme (Image Lazy Loader)

Bir web sayfasında 100 tane büyük resim varsa, site ilk açıldığında hepsi yüklenirse internet çöker. Bu kod, kullanıcının ekranı aşağı kaydırıp ilgili resmin kutusunun yanına gelip gelmediğini kontrol eder (getBoundingClientRect). Resim ekrana girdiği an gerçek resmi yükler.

⚡ Karmaşık İç İçe Dizileri Düzleştirmek (Flatten Nested Array)

İç içe geçmiş kutular gibi duran dizileri tek katmanlı hale getirme işlemidir. Rekürsiyon ve .reduce() yöntemi kullanılır.

// Örnek girdi: [1, [2, [3, 4]], 5]
// Çıktı: [1, 2, 3, 4, 5]
function duzlestir(dizi) {
    return dizi.reduce((acc, eleman) => 
        Array.isArray(eleman) ? acc.concat(duzlestir(eleman)) : acc.concat(eleman), []);
}
console.log(duzlestir([1, [2, 3], 4])); // [1, 2, 3, 4]

⚡ Fonksiyon Parçalama / Körileme (Currying Function)

Çok parametreli bir fonksiyonu, her seferinde tek bir parametre alan ve geriye yeni bir fonksiyon döndüren zincirleme bir yapıya dönüştürme sanatıdır. Fonksiyonel programlamanın temel ileri düzey tekniğidir.

// Normal: topla(2, 3) yerine Currying: topla(2)(3)
const topla = a => b => a + b;
console.log(topla(5)(10)); // 15 sonucunu verir.

-------------------------------------------------------------------------------------------------------------------------------------------------------------------

Müfredatta yer alan 45 projenin tamamını tek bir seferde tek bir mesaja sığdırmak, yapay zeka hafıza ve karakter sınırları (output token limitleri) nedeniyle teknik olarak imkansızdır. Kodların kesilmemesi, eksik kalmaması ve tarayıcınızda doğrudan çift tıklayarak sorunsuz çalışabilmesi için projeleri bölüm bölüm ve sırayla inşa etmemiz gerekiyor.

İlk aşamada, kursun temelini ve ilk dinamik uygulamalarını oluşturan İlk 5 Projeyi tüm HTML, CSS ve JavaScript kodları tek bir dosyada olacak şekilde (kopyala-yapıştır yapıp çalıştırabileceğiniz biçimde) aşağıda hazırladım.

📌 Proje 1: Bahşiş Hesaplayıcı (Tip Calculator)

Dosya Adı: 1-bahsis-hesaplayici.html

<!DOCTYPE html>
<html lang="tr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Bahşiş Hesaplayıcı</title>
    <style>
        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            background-color: #f4f7f6;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
        }
        .container {
            background-color: white;
            padding: 30px;
            border-radius: 12px;
            box-shadow: 0 8px 24px rgba(0,0,0,0.1);
            width: 350px;
        }
        h2 { text-align: center; color: #2c3e50; margin-top: 0; }
        .form-group { margin-bottom: 20px; }
        label { display: block; margin-bottom: 8px; color: #7f8c8d; font-weight: bold; }
        input, select {
            width: 100%;
            padding: 10px;
            border: 2px solid #bdc3c7;
            border-radius: 6px;
            box-sizing: border-box;
            font-size: 16px;
        }
        button {
            width: 100%;
            background-color: #2ecc71;
            color: white;
            border: none;
            padding: 12px;
            border-radius: 6px;
            font-size: 18px;
            cursor: pointer;
            transition: background 0.2s;
        }
        button:hover { background-color: #27ae60; }
        .result {
            margin-top: 20px;
            padding: 15px;
            background-color: #e8f8f5;
            border-radius: 6px;
            text-align: center;
            font-size: 18px;
            font-weight: bold;
            color: #16a085;
            display: none;
        }
    </style>
</head>
<body>

<div class="container">
    <h2>Bahşiş Hesapla</h2>
    <div class="form-group">
        <label for="bill">Hesap Tutarı (TL)</label>
        <input type="number" id="bill" placeholder="Örn: 250">
    </div>
    <div class="form-group">
        <label for="service">Hizmet Kalitesi</label>
        <select id="service">
            <option value="30">Harika (%30)</option>
            <option value="20">İyi (%20)</option>
            <option value="15" selected>Standart (%15)</option>
            <option value="10">Kötü (%10)</option>
        </select>
    </div>
    <button id="calculate">Hesapla</button>
    <div class="result" id="result"></div>
</div>

<script>
    document.getElementById('calculate').addEventListener('click', function() {
        const bill = parseFloat(document.getElementById('bill').value);
        const service = parseFloat(document.getElementById('service').value);
        const resultDiv = document.getElementById('result');

        if (isNaN(bill) || bill <= 0) {
            alert('Lütfen geçerli bir hesap tutarı girin.');
            return;
        }

        const tipAmount = bill * (service / 100);
        const totalAmount = bill + tipAmount;

        resultDiv.innerHTML = `Bahşiş: ${tipAmount.toFixed(2)} TL<br>Toplam: ${totalAmount.toFixed(2)} TL`;
        resultDiv.style.display = 'block';
    });
</script>
</body>
</html>

📌 Proje 2: Zamana Göre Değişen Dinamik Karşılayıcı

Dosya Adı: 2-dinamik-karsilayici.html

<!DOCTYPE html>
<html lang="tr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Dinamik Karşılama</title>
    <style>
        body {
            font-family: 'Arial', sans-serif;
            margin: 0;
            height: 100vh;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            transition: all 1s ease;
            color: white;
            text-shadow: 0 2px 4px rgba(0,0,0,0.5);
        }
        .clock { font-size: 4rem; font-weight: bold; margin-bottom: 10px; }
        .greeting { font-size: 2.5rem; }
    </style>
</head>
<body>

<div class="clock" id="clock">00:00:00</div>
<div class="greeting" id="greeting">Yükleniyor...</div>

<script>
    function updatePage() {
        const now = new Date();
        const hours = now.getHours();
        const minutes = String(now.getMinutes()).padStart(2, '0');
        const seconds = String(now.getSeconds()).padStart(2, '0');
        
        document.getElementById('clock').textContent = `${String(hours).padStart(2, '0')}:${minutes}:${seconds}`;
        
        const greetingDiv = document.getElementById('greeting');
        
        if (hours >= 5 && hours < 12) {
            greetingDiv.textContent = "Günaydın!";
            document.body.style.backgroundColor = "#f39c12"; // Gün doğumu turuncusu
        } else if (hours >= 12 && hours < 18) {
            greetingDiv.textContent = "Tünaydın!";
            document.body.style.backgroundColor = "#3498db"; // Gündüz mavisi
        } else if (hours >= 18 && hours < 22) {
            greetingDiv.textContent = "İyi Akşamlar!";
            document.body.style.backgroundColor = "#e67e22"; // Gün batımı
        } else {
            greetingDiv.textContent = "İyi Geceler!";
            document.body.style.backgroundColor = "#2c3e50"; // Gece karanlığı
        }
    }

    setInterval(updatePage, 1000);
    updatePage(); // İlk açılışta hemen çalışsın
</script>
</body>
</html>

📌 Proje 3: Yazı Tura Uygulaması (Coin Toss)

Dosya Adı: 3-yazi-tura.html

<!DOCTYPE html>
<html lang="tr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Yazı Tura Oyunu</title>
    <style>
        body {
            font-family: sans-serif;
            background: #f0f2f5;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            height: 100vh;
            margin: 0;
        }
        .coin {
            width: 150px;
            height: 150px;
            background-color: #f1c40f;
            border: 8px solid #f39c12;
            border-radius: 50%;
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 24px;
            font-weight: bold;
            color: #7f8c8d;
            box-shadow: 0 6px 12px rgba(0,0,0,0.15);
            transition: transform 0.5s ease;
        }
        .spin { transform: rotateY(720deg); }
        button {
            margin-top: 30px;
            padding: 12px 30px;
            font-size: 18px;
            background-color: #9b59b6;
            color: white;
            border: none;
            border-radius: 25px;
            cursor: pointer;
            box-shadow: 0 4px 6px rgba(0,0,0,0.1);
        }
        button:hover { background-color: #8e44ad; }
        .stats { margin-top: 20px; font-size: 18px; color: #34495e; }
    </style>
</head>
<body>

<div class="coin" id="coin">?</div>
<button id="flipBtn">Parayı At!</button>
<div class="stats" id="stats">Yazı: 0 | Tura: 0</div>

<script>
    let heads = 0; // Yazı
    let tails = 0; // Tura

    document.getElementById('flipBtn').addEventListener('click', function() {
        const coin = document.getElementById('coin');
        coin.classList.add('spin');
        coin.textContent = "...";

        setTimeout(() => {
            coin.classList.remove('spin');
            const isHeads = Math.random() < 0.5;
            
            if (isHeads) {
                coin.textContent = "YAZI";
                coin.style.backgroundColor = "#f1c40f";
                heads++;
            } else {
                coin.textContent = "TURA";
                coin.style.backgroundColor = "#e67e22";
                tails++;
            }
            document.getElementById('stats').textContent = `Yazı: ${heads} | Tura: ${tails}`;
        }, 500);
    });
</script>
</body>
</html>

📌 Proje 4: Taş Kağıt Makas Oyunu (Rock Paper Scissors)

Dosya Adı: 4-tas-kagit-makas.html

<!DOCTYPE html>
<html lang="tr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Taş Kağıt Makas</title>
    <style>
        body {
            font-family: sans-serif;
            text-align: center;
            background: #e1e8ed;
            margin: 0;
            padding: 20px;
        }
        .choices { display: flex; justify-content: center; gap: 20px; margin: 30px 0; }
        .btn {
            font-size: 2rem;
            padding: 15px 30px;
            cursor: pointer;
            border: none;
            border-radius: 10px;
            background: white;
            box-shadow: 0 4px 6px rgba(0,0,0,0.1);
            transition: transform 0.1s;
        }
        .btn:hover { transform: scale(1.1); }
        .score-board { font-size: 1.5rem; margin: 20px; color: #2c3e50; }
        .message { font-size: 1.3rem; font-weight: bold; color: #16a085; min-height: 30px; }
    </style>
</head>
<body>

    <h1>Taş - Kağıt - Makas</h1>
    <div class="score-board">
        Oyuncu: <span id="player-score">0</span> | Bilgisayar: <span id="comp-score">0</span>
    </div>
    
    <div class="choices">
        <button class="btn" onclick="play('Taş')">✊</button>
        <button class="btn" onclick="play('Kağıt')">✋</button>
        <button class="btn" onclick="play('Makas')">✌️</button>
    </div>

    <div class="message" id="message">Seçimini yap ve oyuna başla!</div>

<script>
    let pScore = 0;
    let cScore = 0;
    const options = ["Taş", "Kağıt", "Makas"];

    function play(playerChoice) {
        const compChoice = options[Math.floor(Math.random() * 3)];
        let msg = `Sen: ${playerChoice} vs Bilgisayar: ${compChoice}. `;

        if (playerChoice === compChoice) {
            msg += "Berabere!";
        } else if (
            (playerChoice === "Taş" && compChoice === "Makas") ||
            (playerChoice === "Kağıt" && compChoice === "Taş") ||
            (playerChoice === "Makas" && compChoice === "Kağıt")
        ) {
            msg += "Kazandın! 🎉";
            pScore++;
        } else {
            msg += "Kaybettin! 😢";
            cScore++;
        }

        document.getElementById('player-score').textContent = pScore;
        document.getElementById('comp-score').textContent = cScore;
        document.getElementById('message').textContent = msg;
    }
</script>
</body>
</html>

📌 Proje 5: Gelişmiş Zar Oyunu (Ultimate Dice Game)

Dosya Adı: 5-gelismis-zar-oyunu.html

<!DOCTYPE html>
<html lang="tr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Gelişmiş Zar Oyunu</title>
    <style>
        body {
            font-family: sans-serif;
            background: #27ae60;
            color: white;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            height: 100vh;
            margin: 0;
        }
        .board { display: flex; gap: 40px; margin: 30px; }
        .dice-container { text-align: center; }
        .dice {
            width: 100px;
            height: 100px;
            background: white;
            border-radius: 15px;
            box-shadow: 0 10px 20px rgba(0,0,0,0.3);
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            grid-template-rows: repeat(3, 1fr);
            padding: 10px;
            box-sizing: border-box;
        }
        .dot {
            background: #333;
            border-radius: 50%;
            width: 16px;
            height: 16px;
            margin: auto;
            visibility: hidden;
        }
        /* Zar Nokta Pozisyon Matrisi */
        .visible { visibility: visible; }
        button {
            padding: 12px 40px;
            font-size: 20px;
            font-weight: bold;
            color: #27ae60;
            background: white;
            border: none;
            border-radius: 8px;
            cursor: pointer;
            box-shadow: 0 5px 15px rgba(0,0,0,0.2);
        }
        button:hover { background: #f0f0f0; }
        #result-text { font-size: 24px; font-weight: bold; margin-top: 20px; min-height: 35px;}
    </style>
</head>
<body>

    <h1>Zar Atma Düellosu</h1>
    <div class="board">
        <div class="dice-container">
            <h3>Oyuncu 1</h3>
            <div class="dice" id="dice1"></div>
        </div>
        <div class="dice-container">
            <h3>Oyuncu 2</h3>
            <div class="dice" id="dice2"></div>
        </div>
    </div>
    <button id="rollBtn">Zarları At</button>
    <div id="result-text"></div>

<script>
    // 1-6 arasındaki sayıların 3x3 grid üzerindeki nokta indeks haritası
    const diceMaps = {
        1:,
        2:,
        3:,
        4:,
        5:,
        6: [0, 2, 3, 5, 6, 8]
    };

    function buildDice(diceElement, value) {
        diceElement.innerHTML = ''; // Temizle
        for (let i = 0; i < 9; i++) {
            const dot = document.createElement('div');
            dot.className = 'dot';
            if (diceMaps[value].includes(i)) {
                dot.classList.add('visible');
            }
            diceElement.appendChild(dot);
        }
    }

    // İlk kurulum boş zarlar
    buildDice(document.getElementById('dice1'), 1);
    buildDice(document.getElementById('dice2'), 1);

    document.getElementById('rollBtn').addEventListener('click', function() {
        const val1 = Math.floor(Math.random() * 6) + 1;
        const val2 = Math.floor(Math.random() * 6) + 1;

        buildDice(document.getElementById('dice1'), val1);
        buildDice(document.getElementById('dice2'), val2);

        const resultText = document.getElementById('result-text');
        if (val1 > val2) {
            resultText.textContent = "🏆 Oyuncu 1 Kazandı!";
        } else if (val2 > val1) {
            resultText.textContent = "Oyuncu 2 Kazandı! 🏆";
        } else {
            resultText.textContent = "🤝 Berabere!";
        }
    });
</script>
</body>
</html>

Müfredat listemizde sıradaki 6. ve 10. projeler arasındaki uygulamaların tüm HTML, CSS ve JavaScript kod bloklarını, tarayıcınızda doğrudan çalıştırabileceğiniz şekilde tek bir dosya formatında hazırladım.

📌 Proje 6: Ses Çalar Uygulaması (Play Audio Files)

Bu uygulama, sayfada dinamik olarak ses butonları oluşturur ve tarayıcının yerleşik ses sentezleyicisini (SpeechSynthesis) kullanarak ek bir .mp3 dosyasına ihtiyaç duymadan ses efektleri üretir.
Dosya Adı: 6-ses-calar.html

<!DOCTYPE html>
<html lang="tr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JavaScript Ses Çalar</title>
    <style>
        body {
            font-family: 'Segoe UI', sans-serif;
            background: #1e1e24;
            color: white;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            height: 100vh;
            margin: 0;
        }
        h1 { margin-bottom: 30px; color: #4a90e2; }
        .buttons-container {
            display: flex;
            gap: 15px;
            flex-wrap: wrap;
            justify-content: center;
            max-width: 600px;
        }
        .sound-btn {
            background: #2a2b3d;
            border: 2px solid #4a90e2;
            color: white;
            padding: 20px 40px;
            font-size: 18px;
            font-weight: bold;
            border-radius: 10px;
            cursor: pointer;
            transition: all 0.2s ease;
            box-shadow: 0 4px 15px rgba(0,0,0,0.2);
        }
        .sound-btn:hover {
            background: #4a90e2;
            transform: translateY(-3px);
            box-shadow: 0 6px 20px rgba(74, 144, 226, 0.4);
        }
        .sound-btn:active { transform: translateY(0); }
    </style>
</head>
<body>

    <h1>Müzik & Efekt Kutusu</h1>
    <div class="buttons-container" id="btnContainer"></div>

<script>
    // Dinamik butonlar için ses isimleri listesi
    const sounds = ["Alkış", "Hata", "Lazer", "Başarı", "Davul"];
    const container = document.getElementById('btnContainer');

    sounds.forEach(sound => {
        const btn = document.createElement('button');
        btn.className = 'sound-btn';
        btn.innerText = sound;

        btn.addEventListener('click', () => {
            playSyntheticSound(sound);
        });

        container.appendChild(btn);
    });

    // Harici mp3 bağımlılığı olmadan ses üretme fonksiyonu
    function playSyntheticSound(type) {
        const synth = window.speechSynthesis;
        if (!synth) {
            alert("Tarayıcınız ses sentezini desteklemiyor.");
            return;
        }
        
        let word = type;
        if(type === "Alkış") word = "Bravo! Muhteşem!";
        if(type === "Hata") word = "Dikkat! Hata oluştu.";
        if(type === "Lazer") word = "Piuw! Piuw!";
        if(type === "Başarı") word = "Tebrikler! Kazandınız.";
        if(type === "Davul") word = "Güm! Güm! Taka tak!";

        const utterance = new SpeechSynthesisUtterance(word);
        utterance.lang = 'tr-TR';
        utterance.rate = 1.2; 
        synth.speak(utterance);
    }
</script>
</body>
</html>

📌 Proje 7: Dinamik Klavye Hız Testi (Dynamic Typing Test)

Ekrana gelen rastgele cümleleri kullanıcının ne kadar hızlı ve doğru yazdığını ölçer. Dakika başına kelime (WPM) ve doğruluk oranı hesaplar.
Dosya Adı: 7-klavye-hiz-testi.html

<!DOCTYPE html>
<html lang="tr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Klavye Hız Testi</title>
    <style>
        body {
            font-family: system-ui, sans-serif;
            background: #f4f6f9;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
        }
        .card {
            background: white;
            padding: 30px;
            border-radius: 12px;
            box-shadow: 0 10px 30px rgba(0,0,0,0.05);
            width: 550px;
            box-sizing: border-box;
        }
        .quote {
            background: #eef2f7;
            padding: 15px;
            border-radius: 6px;
            font-size: 18px;
            margin-bottom: 20px;
            line-height: 1.5;
            color: #333;
            user-select: none;
        }
        textarea {
            width: 100%;
            height: 100px;
            padding: 10px;
            font-size: 16px;
            border: 2px solid #ddd;
            border-radius: 6px;
            resize: none;
            box-sizing: border-box;
        }
        textarea:focus { border-color: #3498db; outline: none; }
        .score-board {
            display: flex;
            justify-content: space-between;
            margin-top: 20px;
            font-size: 16px;
            font-weight: bold;
            color: #555;
        }
        button {
            margin-top: 15px;
            width: 100%;
            padding: 12px;
            background: #3498db;
            color: white;
            border: none;
            border-radius: 6px;
            font-size: 16px;
            cursor: pointer;
        }
        button:hover { background: #2980b9; }
    </style>
</head>
<body>

<div class="card">
    <h2>Klavye Hız Testi</h2>
    <div class="quote" id="quoteTarget">Yükleniyor...</div>
    <textarea id="typeInput" placeholder="Yazmaya başladığınızda süre tetiklenecektir..." disabled></textarea>
    <div class="score-board">
        <div>Süre: <span id="timer">0</span>s</div>
        <div>WPM (Hız): <span id="wpm">0</span></div>
        <div>Doğruluk: <span id="accuracy">0%</span></div>
    </div>
    <button id="startBtn">Testi Başlat</button>
</div>

<script>
    const quotes = [
        "JavaScript web sayfalarını dinamik hale getiren güçlü bir dildir.",
        "Hızlı yazmak sadece parmakların değil düzenli pratiğin bir sonucudur.",
        "Kod yazarken hata yapmaktan korkmayın çünkü en büyük öğretmen hatalardır.",
        "Teknoloji her gün gelişiyor ve bizim de kendimizi güncellememiz gerekiyor."
    ];

    let startTime, timerInterval;
    let isRunning = false;
    let selectedQuote = "";

    const quoteTarget = document.getElementById('quoteTarget');
    const typeInput = document.getElementById('typeInput');
    const timerText = document.getElementById('timer');
    const wpmText = document.getElementById('wpm');
    const accText = document.getElementById('accuracy');
    const startBtn = document.getElementById('startBtn');

    startBtn.addEventListener('click', startTest);
    typeInput.addEventListener('input', checkTyping);

    function startTest() {
        isRunning = true;
        typeInput.disabled = false;
        typeInput.value = "";
        typeInput.focus();
        
        selectedQuote = quotes[Math.floor(Math.random() * quotes.length)];
        quoteTarget.textContent = selectedQuote;
        
        startTime = new Date();
        clearInterval(timerInterval);
        timerInterval = setInterval(updateTimer, 1000);
        startBtn.textContent = "Yeniden Başlat";
    }

    function updateTimer() {
        const timePassed = Math.floor((new Date() - startTime) / 1000);
        timerText.textContent = timePassed;
    }

    function checkTyping() {
        const currentInput = typeInput.value;
        
        // Doğruluk hesaplama
        let correctChars = 0;
        for (let i = 0; i < currentInput.length; i++) {
            if (currentInput[i] === selectedQuote[i]) correctChars++;
        }
        const acc = currentInput.length > 0 ? Math.floor((correctChars / currentInput.length) * 100) : 0;
        accText.textContent = acc + "%";

        // Hız (WPM) hesaplama
        const timePassedMin = (new Date() - startTime) / 60000;
        const wordsCount = currentInput.split(' ').length;
        if (timePassedMin > 0) {
            wpmText.textContent = Math.floor(wordsCount / timePassedMin);
        }

        // Test bitti mi?
        if (currentInput === selectedQuote) {
            clearInterval(timerInterval);
            typeInput.disabled = true;
            alert("Tebrikler! Testi başarıyla tamamladınız.");
        }
    }
</script>
</body>
</html>