JavaScript Temelleri Atölyesi

Temel Seviye Eğitim Programı

Web Dünyasının Kalbine Adım Atın

JavaScript Temelleri Atölyesi, web geliştirme dünyasına adım atmak ve JavaScript programlama dilinin temel kavramlarını uygulamalı olarak öğrenmek isteyenler için hazırlanan başlangıç seviyesinde bir eğitim programıdır.

Eğitmen

Furkan Kandemir

Kapsam & Kazanımlar

Değişkenler, Operatörler, Kontrol Yapıları, Döngüler, Fonksiyonlar, Dizi/Nesneler ve DOM Manipülasyonu.

Modül 1

Giriş ve Temel Yapı Taşları

JS nedir, konsol kullanımı, script dahil etme, değişkenler, veri tipleri, operatörler ve mantıksal temeller.

Modül 2

Karar Yapıları ve Döngüler

If/Else, Switch/Case koşul yapıları, For, While döngüleri ve fonksiyon tanımlama yaklaşımları.

Modül 3

Veri Yapıları & DOM

Diziler, nesneler, DOM seçicileri, içerik değiştirme ve addEventListener ile kullanıcı etkileşimleri.

Modül 1

JavaScript Dünyasına Giriş ve Temel Yapı Taşları

1. Bölüm: JavaScript Nedir, Nerede Çalışır?

🧠 Detaylı Teorik Açıklama ve Günlük Hayat Analojisi

Bir web sitesini inşa etmeyi bir ev yapımına benzetebiliriz:

HTML: Evin tuğlaları, odaları ve iskeletidir (Yapı).
CSS: Evin duvar boyası, perdeleri ve mobilyalarıdır (Görsellik).
JavaScript: Evin elektrik tesisatı, akıllı kapı zili, otomatik lambaları ve musluklarıdır (Canlılık, Mantık ve Etkileşim).

JavaScript, tarayıcıda doğrudan çalışan dinamik bir programlama dilidir. Günlük hayatta internette bir butona bastığınızda açılan açılır pencereler (pop-up), Instagram'da fotoğrafı beğendiğinizde kalp simgesinin kırmızıya dönmesi, e-ticaret sitelerinde sepetinize ürün eklediğinizde toplam tutarın anında güncellenmesi tamamen JavaScript sayesinde gerçekleşir.

Tarayıcı Konsolu (Console) Kullanımı ve İlk Kod Satırları

Konsol (console.log), geliştiricilerin yazdıkları kodların doğru çalışıp çalışmadığını izledikleri, adeta doktorların steteskobu gibi çalışan dahili bir ekrandır.

console.log("Merhaba Dünya! JavaScript'e hoş geldiniz.");

HTML İçine JS Dahil Etme Yöntemleri

Kodlar doğrudan HTML sayfasına gömülebilir veya harici dosyalardan çağrılarak düzen korunabilir.

<!-- Dahili (Internal) Kullanım -->
<script>
    console.log("Bu satır doğrudan HTML içinden çalışır.");
</script>

<!-- Harici (External) Kullanım (Önerilen) -->
<script src="script.js"></script>

Bölüm 1 - Full Çalıştırılabilir HTML/CSS/JS Kodu

Bu kodu doğrudan kopyalayıp tarayıcınızda veya bir kod editöründe çalıştırabilirsiniz.

<!DOCTYPE html>
<html lang="tr">
<head>
    <meta charset="UTF-8">
    <title>Giriş Örneği</title>
    <style>
        body { font-family: sans-serif; background: #f4f4f4; text-align: center; padding-top: 50px; }
        h1 { color: #2563eb; }
    </style>
</head>
<body>
    <h1 id="baslik">JavaScript Dünyasına Merhaba!</h1>
    <script>
        // Tarayıcı konsoluna mesaj yazdıralım
        console.log("Konsol aktif ve çalışıyor.");
        // Sayfa yüklendiğinde başlığı güncelleyelim
        document.getElementById("baslik").innerText = "Furkan Kandemir ile JS Eğitimi Başladı!";
    </script>
</body>
</html>

2. Bölüm: Değişkenler ve Veri Tipleri

🧠 Değişken Nedir? (Günlük Hayat Analojisi)

Değişkenler, üzerinde etiketler yazan saklama kutularına benzer. Örneğin üzerinde "Kullanıcı Adı" yazan bir kutunun içine "Furkan" ismini koyarsınız. Program çalıştığı sürece bu kutudaki değeri okuyabilir ya da güncelleyebilirsiniz.

let, const, var Kavramları:

let: Değeri sonradan değiştirilebilecek kutular oluşturmak için kullanılır (Örn: Sepet tutarı, kullanıcı skoru).
const: Değeri sabit olan ve bir kez atandıktan sonra asla değiştirilemeyen kutulardır (Örn: Pi sayısı, veritabanı bağlantı adresi, eğitmen adı).
var: Eski nesil değişken tanımlama yöntemidir; günümüzde modern projelerde kapsam (scope) karışıklığı yarattığı için tercih edilmez.

🧠 Veri Tipleri Nedir?

Bilgisayar belleğinde sakladığımız verilerin türleridir. Çeşitleri şunlardır:

String: Metinsel ifadelerdir, tırnak içinde yazılır ("Merhaba").
Number: Sayısal ifadelerdir (2026, 3.14).
Boolean: Mantıksal değerlerdir; sadece true (doğru/açık) veya false (yanlış/kapalı) olabilir.
Null: Bilinçli olarak boş bırakılmış değerdir.
Undefined: Henüz hiç değer atanmamış tanımsız durumdur.

let kursAdi = "JavaScript Atölyesi"; // String
const egitmen = "Furkan Kandemir";  // String (Sabit)
let sayi = 2026;            // Number
let aktifMi = true;         // Boolean
let bosDeger = null;        // Null
let tanimsiz;               // Undefined

// Tip Dönüşümleri
let strSayi = "123";
let cevrilmis = Number(strSayi); // String'i Number'a çevirme

3. Bölüm: Operatörler ve Mantıksal Temeller

🧠 Operatörlerin Detaylı Teorik Açıklaması ve Semboller

Operatörler, veriler üzerinde işlem yapmamızı sağlayan matematiksel ve mantıksal simgelerdir:

+ (Toplama / Birleştirme): Sayıları toplar veya metinleri uca uca ekler ("Ali" + " Veli").
- (Çıkarma): İki sayı arasındaki farkı alır.
* (Çarpma): Sayıları çarpar (E-ticarette sepet hesaplarında sıkça kullanılır).
/ (Bölme): Sayıları birbirine böler.
% (Mod Alma / Kalan): Bölme işleminden kalan sayıyı verir (Örn: 10 % 3 = 1. Bir sayının tek mi çift mi olduğunu anlamak için hayatidir).
== (Eşittir): Sadece değerlerin eşit olup olmadığını kontrol eder.
=== (Katı Eşittir / Strict Equality): Hem değerin hem de veri tipinin aynı olup olmadığını kontrol eder (Güvenli kodlama için önerilir).
&& (Mantıksal VE): Birden fazla koşulun hepsinin doğru olmasını bekler (Örn: Yaş >= 18 VE ehliyetVar == true).
|| (Mantıksal VEYA): Koşullardan en az birinin doğru olması yeterlidir (Örn: VIP üye VEYA indirim kuponu var).
! (Mantıksal Değil / NOT): Durumun tersini alır (True'yu false yapar).

// Aritmetik Örnekler
let toplam = 10 + 5; // 15
let kalan = 10 % 3;  // 1

// Karşılaştırma & Mantıksal Örnekler
let x = 5, y = "5";
console.log(x == y);   // true (Değerler aynı)
console.log(x === y);  // false (Biri sayı, diğeri metin!)
console.log(true && false); // false (VE)
console.log(true || false); // true (VEYA)

Operatörler ile İlgili 4 Örnek Uygulama (Tam Çalıştırılabilir Kodlar)

Örnek 1: Sepet Tutar ve KDV Hesabı

<script>
    let urun1 = 150;
    let urun2 = 250;
    let kdvOrani = 1.20;
    let toplamTutar = (urun1 + urun2) * kdvOrani;
    console.log("KDV Dahil Sepet Tutarı: " + toplamTutar + " TL");
</script>

Örnek 2: Ehliyet ve Yaş Doğrulama (Mantıksal VE)

<script>
    let kullaniciYasi = 21;
    let ehliyetVarMi = true;
    let aracKullanabilirMi = kullaniciYasi >= 18 && ehliyetVarMi;
    console.log("Araç kullanabilir mi? " + aracKullanabilirMi);
</script>

Örnek 3: Tek mi Çift mi? (Mod Alma)

<script>
    let kontrolSayisi = 14;
    let tekMi = (kontrolSayisi % 2 !== 0);
    console.log("Sayı tek mi? " + tekMi);
</script>

Örnek 4: İndirim Kampanyası (Mantıksal VEYA)

<script>
    let vipUye = false;
    let kampanyaKoduVarMi = true;
    let indirimKazandiMi = vipUye || kampanyaKoduVarMi;
    console.log("İndirim kazandı mı? " + indirimKazandiMi);
</script>

Modül 1 Değerlendirme Soruları

Soru 1: Aşağıdaki kodun konsol çıktısı ne olur?
let a = 10; let b = "10"; console.log(a === b);

Çözüm ve Açıklama: Çıktı false olacaktır çünkü === hem değer hem de tip kontrolü yapar.

<script>
    let a = 10; 
    let b = "10"; 
    console.log(a === b); // false döner
</script>

Soru 2: Bir öğrencinin vize (notun %40'ı) ve final (notun %60'ı) notunu hesaplayıp geçme durumunu (60 ve üzeri) mantıksal operatör kullanarak tek satırda yazınız.

Çözüm ve Tam Çalıştırılabilir Kod:

<script>
    let vize = 50; 
    let final = 70;
    let ortalama = (vize * 0.4) + (final * 0.6);
    let gectiMi = ortalama >= 60;
    console.log("Ortalama: " + ortalama + " | Geçti mi? " + gectiMi);
</script>

Modül 2

Karar Yapıları ve Döngüler - Algoritmik Mantık

1. Bölüm: Karar Mekanizmaları (Koşullar)

🧠 If / Else (Eğer / Değilse) Mantığı Nedir?

Günlük hayatta sürekli koşullu kararlar alırız: "Eğer hava yağmurluysa şemsiyemi alırım, değilse güneş gözlüğümü takarım." Programlama dillerinde de bu mantığı if / else bloklarıyla kurarız.

if (Eğer): Parantez içindeki koşul doğruysa (true) bu bloğu çalıştır.
else if (Değilse eğer): İlk koşul tutmadıysa ama bu yeni koşul tutuyorsa bunu çalıştır.
else (Değilse / Hiçbiri): Yukarıdaki hiçbir koşul sağlanmadıysa varsayılan olarak bunu çalıştır.
switch / case: Tek bir değişkenin çok farklı ihtimallerini (Örn: Günler veya kullanıcı rolleri) alt alta temiz bir şekilde yönetmek için kullanılır.

let saat = 14;
if (saat < 12) {
    console.log("Günaydın!");
} else if (saat < 18) {
    console.log("İyi günler!");
} else {
    console.log("İyi akşamlar!");
}

Karar Yapıları ile İlgili 4 Örnek Uygulama (Tam Çalıştırılabilir Kodlar)

Örnek 1: Hava Durumu Önerisi

<script>
    let havaDurumu = "yağmurlu";
    if (havaDurumu === "yağmurlu") {
        console.log("Şemsiye almayı unutmayın.");
    } else {
        console.log("Hava gayet güzel.");
    }
</script>

Örnek 2: Harf Notu Hesaplama

<script>
    let puan = 85;
    if (puan >= 85) {
        console.log("Harf Notunuz: AA");
    } else if (puan >= 70) {
        console.log("Harf Notunuz: BB");
    } else {
        console.log("Harf Notunuz: FF");
    }
</script>

Örnek 3: Switch ile Yetki Kontrolü

<script>
    let rol = "admin";
    switch(rol) {
        case "admin":
            console.log("Tam sistem yetkisine sahipsiniz.");
            break;
        case "editor":
            console.log("İçerik düzenleme yetkiniz var.");
            break;
        default:
            console.log("Kısıtlı misafir yetkisi.");
    }
</script>

Örnek 4: Ehliyet Yaş Sınırı Kontrolü

<script>
    let yas = 17;
    if (yas >= 18) {
        console.log("Ehliyet alabilirsiniz.");
    } else {
        console.log("Ehliyet almak için " + (18 - yas) + " yıl beklemelisiniz.");
    }
</script>

Modül 2 - Bölüm 1 Değerlendirme Soruları

Soru 1: 0 ile 100 arasında girilen bir sayının 50'den büyük ve çift olup olmadığını kontrol eden if koşul bloğunu yazınız.

Çözüm ve Tam Çalıştırılabilir Kod:

<script>
    let sayi = 64;
    if (sayi > 50 && sayi % 2 === 0) {
        console.log("Sayı 50'den büyük ve çifttir.");
    } else {
        console.log("Şartlar sağlanmadı.");
    }
</script>

Soru 2: Trafik lambası rengine göre ("kırmızı", "sarı", "yeşil") yapılması gerekenleri switch/case kullanarak yazınız.

Çözüm ve Tam Çalıştırılabilir Kod:

<script>
    let lamba = "sarı";
    switch(lamba) {
        case "kırmızı": console.log("Dur!"); break;
        case "sarı": console.log("Hazırlan, motoru çalıştır!"); break;
        case "yeşil": console.log("Geçebilirsiniz."); break;
        default: console.log("Geçersiz lamba rengi!");
    }
</script>

2. Bölüm: Döngüler (Loops)

🧠 Döngü Nedir? (Günlük Hayat Analojisi)

Düşünün ki antrenördünüz ve size 100 tane mekik çekmenizi söyledi. Tek tek saymak yerine "100 olana kadar mekik çekmeye devam et" kuralını koyarsınız. Programlamada da aynı işi 100 kez alt alta yazmak yerine döngüler (loops) ile saniyeler içinde yaparız.

for döngüsü: Başlangıcı, bitiş koşulu ve artış miktarı belli olan tekrarlarda kullanılır.
while döngüsü: Belirli bir koşul doğru olduğu sürece döner (Koşul ne zaman false olursa döner biter).
break: Döngüyü anında tamamen kırıp sonlandırır.
continue: Döngünün o anki adımını atlayıp bir sonraki adıma geçer.

// For Döngüsü
for (let i = 1; i <= 3; i++) {
    console.log("Tekrar sayısı:", i);
}

Döngüler ile İlgili 4 Örnek Uygulama (Tam Çalıştırılabilir Kodlar)

Örnek 1: 1'den 10'a Kadar Olan Sayıların Toplamı

<script>
    let toplam = 0;
    for (let i = 1; i <= 10; i++) {
        toplam += i;
    }
    console.log("1'den 10'a toplam: " + toplam);
</script>

Örnek 2: Continue ile Çift Sayıları Filtreleme

<script>
    for (let i = 1; i <= 10; i++) {
        if (i % 2 !== 0) continue; // Tek sayıları atla
        console.log("Çift sayı: " + i);
    }
</script>

Örnek 3: While Döngüsü ile Şifre Doğrulama

<script>
    let dogruSifre = "1234";
    let girilen = "1234";
    while (girilen === dogruSifre) {
        console.log("Şifre doğru, sistem açılıyor...");
        break;
    }
</script>

Örnek 4: Do...While Döngüsü Örneği

<script>
    let sayac = 1;
    do {
        console.log("Do-while çalıştı, sayaç: " + sayac);
        sayac++;
    } while (sayac <= 3);
</script>

Modül 2 - Bölüm 2 Değerlendirme Soruları

Soru 1: 1'den 20'ye kadar olan sayılardan 3'e tam bölünenleri konsola yazdıran fakat 15 sayısına gelince döngüyü tamamen sonlandıran (break ile) kodu yazınız.

Çözüm ve Tam Çalıştırılabilir Kod:

<script>
    for (let i = 1; i <= 20; i++) {
        if (i === 15) break;
        if (i % 3 === 0) {
            console.log("3'e bölünen: " + i);
        }
    }
</script>

Soru 2: while döngüsü kullanarak 5'ten geriye doğru sayıp "Kalkış!" yazdıran bir geri sayım yapınız.

Çözüm ve Tam Çalıştırılabilir Kod:

<script>
    let gerisayim = 5;
    while (gerisayim > 0) {
        console.log(gerisayim);
        gerisayim--;
    }
    console.log("Kalkış!");
</script>

3. Bölüm: Fonksiyonlar (Functions)

🧠 Fonksiyon Nedir? (Günlük Hayat Analojisi)

Mutfaktaki meyve sıkacağı makinesini düşünün: İçine portakal atarsınız (Parametre), makine çalışır ve size bardakta portakal suyu verir (return ile değer döndürme). Programlamada sürekli aynı matematiksel veya metinsel işlemi tekrarlamak yerine onu bir fonksiyon içine koyar ve ihtiyaç duydukça çağırırsınız (DRY - Don't Repeat Yourself prensibi).

// Function Declaration
function selamla(isim) {
    return "Merhaba " + isim;
}

// Arrow Function (Modern Ok Fonksiyonu)
const topla = (a, b) => a + b;

Fonksiyonlar ile İlgili 4 Örnek Uygulama (Tam Çalıştırılabilir Kodlar)

Örnek 1: KDV Hesaplama Arrow Function

<script>
    const kdvHesapla = fiyat => fiyat * 1.20;
    console.log("100 TL'nin KDV'li hali: " + kdvHesapla(100) + " TL");
</script>

Örnek 2: Sayının Karesini Alma

<script>
    function kareAl(sayi) {
        return sayi * sayi;
    }
    console.log("4'ün karesi: " + kareAl(4));
</script>

Örnek 3: Doğum Yılına Göre Yaş Hesaplama

<script>
    const yasBul = dogumYili => 2026 - dogumYili;
    console.log("2000 doğumlu biri: " + yasBul(2000) + " yaşındadır.");
</script>

Örnek 4: Çift Parametreli Karşılama Fonksiyonu

<script>
    function tanis(isim, meslek) {
        return "Merhaba ben " + isim + ", mesleğim " + meslek;
    }
    console.log(tanis("Furkan", "Yazılımcı"));
</script>

Modül 2 - Bölüm 3 Değerlendirme Soruları

Soru 1: Aldığı Celsius (°C) sıcaklık değerini Fahrenheit'a çeviren bir Arrow Function yazınız. (Formül: F = C * 9/5 + 32)

Çözüm ve Tam Çalıştırılabilir Kod:

<script>
    const cToF = c => (c * 9/5) + 32;
    console.log("30°C = " + cToF(30) + "°F");
</script>

Soru 2: Kullanıcının adı ve soyadını parametre olarak alıp büyük harflerle birleştirerek döndüren standart bir fonksiyon yazınız.

Çözüm ve Tam Çalıştırılabilir Kod:

<script>
    function tamAdYaz(ad, soyad) {
        return (ad + " " + soyad).toUpperCase();
    }
    console.log(tamAdYaz("furkan", "kandemir"));
</script>

Modül 3

Veri Yapıları ve DOM Manipülasyonu

1. Bölüm: Diziler (Arrays) ve Nesneler (Objects)

🧠 Diziler ve Nesneler Nedir? (Günlük Hayat Analojisi)

Diziler (Arrays): Alışveriş listenizdeki maddelerin alt alta sıralı olması gibidir (["Elma", "Armut", "Süt"]). Sıra numaraları (0, 1, 2...) ile içindeki verilere erişiriz.
Nesneler (Objects): Bir kişinin kimlik kartı gibidir ({ ad: "Furkan", yas: 28, meslek: "Yazılımcı" }). Verileri sıra numarasıyla değil, anahtar kelimeler (key) ile tutarız.

let meyveler = ["Elma", "Armut"];
meyveler.push("Muz"); // Sona ekleme

let ogrenci = { ad: "Furkan", kurs: "JavaScript" };
console.log(ogrenci.ad); // Furkan

Diziler ve Nesneler ile İlgili 4 Örnek Uygulama (Tam Çalıştırılabilir Kodlar)

Örnek 1: Map Metodu ile Elemanları Dönüştürme

<script>
    let sayilar = [1, 2, 3];
    let ikiKati = sayilar.map(s => s * 2);
    console.log("Orijinal: " + sayilar + " | İki Katı: " + ikiKati);
</script>

Örnek 2: Filter Metodu ile Şartlı Filtreleme

<script>
    let fiyatlar = [50, 150, 200, 80];
    let pahalilar = fiyatlar.filter(f => f > 100);
    console.log("100 TL üzeri fiyatlar: " + pahalilar);
</script>

Örnek 3: JSON / Nesne Listesi Erişimi

<script>
    let kurslar = [
        {id: 1, isim: "HTML"},
        {id: 2, isim: "JavaScript"}
    ];
    console.log("İkinci kurs adı: " + kurslar[1].isim);
</script>

Örnek 4: Push ve Pop Dizi Metotları

<script>
    let diller = ["HTML", "CSS"];
    diller.push("JavaScript");
    console.log(diller);
    diller.pop();
    console.log(diller);
</script>

Modül 3 - Bölüm 1 Değerlendirme Soruları

Soru 1: [10, 25, 30, 45, 50] dizisindeki 30'dan büyük sayıları filter kullanarak filtreleyip yeni bir dizi oluşturunuz.

Çözüm ve Tam Çalıştırılabilir Kod:

<script>
    let sayilar = [10, 25, 30, 45, 50];
    let filtrelenmis = sayilar.filter(s => s > 30);
    console.log(filtrelenmis);
</script>

Soru 2: Bir araba nesnesi (`marka`, `model`, `yil`, `calistir` metodu) oluşturup konsola bastırınız.

Çözüm ve Tam Çalıştırılabilir Kod:

<script>
    let araba = {
        marka: "Toyota",
        model: "Corolla",
        yil: 2026,
        calistir: function() {
            console.log(this.marka + " " + this.model + " çalıştırıldı.");
        }
    };
    araba.calistir();
</script>

2. Bölüm: DOM (Document Object Model) Nedir?

🧠 DOM Nedir? (Günlük Hayat Analojisi)

DOM (Document Object Model): Tarayıcının HTML sayfasını JavaScript'in anlayabileceği nesnelere dönüştürdüğü bir ağaç yapısıdır. Tıpkı bir kukla tiyatrosundaki ipler gibidir; JavaScript ipleri çekerek (DOM komutlarıyla) web sayfasındaki başlıkları, renkleri veya yazıları anlık olarak değiştirir.

let baslik = document.getElementById("baslik");
baslik.innerText = "Güncellenen Başlık";
baslik.style.color = "#3b82f6";

DOM Manipülasyonu ile İlgili 4 Örnek Uygulama (Tam Çalıştırılabilir Kodlar)

Örnek 1: getElementById ile Arka Plan Değiştirme

<!DOCTYPE html>
<html>
<body>
    <div id="kutu" style="width:100px; height:100px; background:red;">Kutu</div>
    <script>
        let kutu = document.getElementById("kutu");
        kutu.style.backgroundColor = "blue";
    </script>
</body>
</html>

Örnek 2: querySelector ile HTML İçerik Ekleme

<!DOCTYPE html>
<html>
<body>
    <p class="aciklama">Eski metin</p>
    <script>
        let p = document.querySelector(".aciklama");
        p.innerHTML = "<strong>Güncellenmiş Kalın Metin</strong>";
    </script>
</body>
</html>

Örnek 3: querySelectorAll ile Çoklu Eleman Yönetimi

<!DOCTYPE html>
<html>
<body>
    <ul>
        <li class="item">Madde 1</li>
        <li class="item">Madde 2</li>
    </ul>
    <script>
        let liste = document.querySelectorAll(".item");
        liste.forEach(el => el.style.color = "blue");
    </script>
</body>
</html>

Örnek 4: textContent ile Başlık Güncelleme

<!DOCTYPE html>
<html>
<body>
    <h1 id="baslik">Eski Başlık</h1>
    <script>
        let baslik = document.getElementById("baslik");
        baslik.textContent = "Yeni Dinamik Başlık";
    </script>
</body>
</html>

Modül 3 - Bölüm 2 Değerlendirme Soruları

Soru 1: Sayfadaki ID'si mesaj olan bir div elementinin arka plan rengini yeşil (green), yazı rengini beyaz yapan JS kodunu yazınız.

Çözüm ve Tam Çalıştırılabilir Kod:

<!DOCTYPE html>
<html>
<body>
    <div id="mesaj">Bildirim Alanı</div>
    <script>
        let box = document.getElementById("mesaj");
        box.style.backgroundColor = "green";
        box.style.color = "white";
    </script>
</body>
</html>

Soru 2: Belirli bir sınıf adına sahip tüm elemanların içerisine "Güncellendi" yazısını querySelectorAll ile nasıl aktarırsınız?

Çözüm ve Tam Çalıştırılabilir Kod:

<!DOCTYPE html>
<html>
<body>
    <div class="item">Öğe 1</div>
    <div class="item">Öğe 2</div>
    <script>
        let ogeler = document.querySelectorAll(".item");
        ogeler.forEach(elem => {
            elem.innerText = "Güncellendi";
        });
    </script>
</body>
</html>

3. Bölüm: Kullanıcı Etkileşimleri ve Olaylar (Events)

🧠 Olaylar (Events) Nedir? (Günlük Hayat Analojisi)

Evdeki ışık anahtarı gibidir: Siz anahtara basana kadar lamba yanmaz. İnternet sitesinde de kullanıcı bir tuşa tıklayana (click), klavyeden yazı yazana (input) veya farenin üzerine gelene (mouseover) kadar web sitesi pasiftir. addEventListener bu olayları dinleyen nöbetçi gibidir.

let btn = document.getElementById("tiklaBtn");
btn.addEventListener("click", function() {
    console.log("Butona tıklandı!");
});

Eventler ile İlgili 4 Örnek Uygulama (Tam Çalıştırılabilir Kodlar)

Örnek 1: Click Olayı ile Mesaj Kutusu

<!DOCTYPE html>
<html>
<body>
    <button id="btn">Tıkla</button>
    <script>
        document.getElementById("btn").addEventListener("click", () => {
            console.log("Butona başarıyla tıklandı!");
        });
    </script>
</body>
</html>

Örnek 2: Input Olayı ile Canlı Takip

<!DOCTYPE html>
<html>
<body>
    <input type="text" id="adInput" placeholder="Adınızı yazın...">
    <script>
        let input = document.getElementById("adInput");
        input.addEventListener("input", (e) => {
            console.log("Anlık giriş: " + e.target.value);
        });
    </script>
</body>
</html>

Örnek 3: Mouseover (Üzerine Gelme) Olayı

<!DOCTYPE html>
<html>
<body>
    <div id="kutu" style="width:100px; height:100px; background:gray;">Kutu</div>
    <script>
        let div = document.getElementById("kutu");
        div.addEventListener("mouseover", () => {
            div.style.background = "orange";
        });
    </script>
</body>
</html>

Örnek 4: Keydown (Klavye) Tuş Olayı

<!DOCTYPE html>
<html>
<body>
    <script>
        window.addEventListener("keydown", (e) => {
            console.log("Basılan tuş: " + e.key);
        });
    </script>
</body>
</html>

Canlı Etkileşimli Bileşen (Sayaç ve Tam Fonksiyonel Todo Listesi)

Uygulamalı Atölye Alanı

Etkileşimli Sayaç

JavaScript DOM ve Event yönetiminin canlı örneği.

Gelişmiş Todo Uygulaması (Ekle, Tamamla, Sil)

Diziler, koşullar, DOM element üretimi (createElement) ve olay dinleyicilerinin entegre tam uygulaması.

JavaScript temellerini çalış
Örnek Görev

Bu Todo Uygulamasının Full Çalıştırılabilir Kaynak Kodu (Kopyala & Çalıştır)

<!DOCTYPE html>
<html lang="tr">
<head>
    <meta charset="UTF-8">
    <title>Tam Fonksiyonel Todo Uygulaması</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <style>
        .completed { text-decoration: line-through; opacity: 0.5; }
    </style>
</head>
<body class="bg-slate-900 text-white p-6 flex justify-center items-center min-h-screen">
    <div class="w-full max-w-md bg-slate-800 p-6 rounded-xl space-y-4 shadow-xl border border-slate-700">
        <h2 class="text-xl font-bold text-blue-400">Todo Listesi Atölyesi</h2>
        <div class="flex gap-2">
            <input type="text" id="inputGorev" placeholder="Görev girin..." class="bg-slate-900 border border-slate-700 px-3 py-2 rounded flex-grow text-sm focus:outline-none focus:border-blue-500">
            <button id="btnEkle" class="bg-blue-600 px-4 py-2 rounded text-sm font-semibold hover:bg-blue-500">Ekle</button>
        </div>
        <ul id="liste" class="space-y-2 text-sm"></ul>
    </div>

    <script>
        const inputGorev = document.getElementById("inputGorev");
        const btnEkle = document.getElementById("btnEkle");
        const liste = document.getElementById("liste");

        btnEkle.addEventListener("click", () => {
            let metin = inputGorev.value.trim();
            if (metin === "") return;

            // Yeni li elementi oluştur
            let li = document.createElement("li");
            li.className = "bg-slate-900 p-3 rounded flex justify-between items-center border border-slate-700";

            let span = document.createElement("span");
            span.innerText = metin;
            span.className = "cursor-pointer flex-grow";
            span.addEventListener("click", () => {
                span.classList.toggle("completed");
            });

            let silBtn = document.createElement("button");
            silBtn.innerText = "Sil";
            silBtn.className = "text-red-400 text-xs bg-slate-800 px-2 py-1 rounded hover:bg-red-600 hover:text-white transition";
            silBtn.addEventListener("click", () => {
                li.remove();
            });

            li.appendChild(span);
            li.appendChild(silBtn);
            liste.appendChild(li);

            inputGorev.value = "";
        });
    </script>
</body>
</html>

Modül 3 - Bölüm 3 Değerlendirme Soruları

Soru 1: Bir butona tıklandığında konsola "Butona Basıldı" yazdıran addEventListener kodunu yazınız.

Çözüm ve Tam Çalıştırılabilir Kod:

<!DOCTYPE html>
<html>
<body>
    <button id="myBtn">Test Butonu</button>
    <script>
        let btn = document.querySelector("#myBtn");
        btn.addEventListener("click", () => {
            console.log("Butona Basıldı");
        });
    </script>
</body>
</html>

Soru 2: Bir input alanına yazı yazıldıkça (input olayı) girilen değeri anlık olarak konsola yazdıran event dinleyicisini yazınız.

Çözüm ve Tam Çalıştırılabilir Kod:

<!DOCTYPE html>
<html>
<body>
    <input type="text" id="nameInput" placeholder="Yazı yazın...">
    <script>
        let input = document.querySelector("#nameInput");
        input.addEventListener("input", (e) => {
            console.log("Girilen değer: " + e.target.value);
        });
    </script>
</body>
</html>