(Bu sefer gerçekten “giriş” değil, içeri dalış yapıyoruz. Simidi kaptın mı? 🧠🥨)

JavaScript…
Web’in sahne arkasındaki sihirbazı. HTML dekoru kurar, CSS kostümü giydirir, JavaScript ise sahneye çıkar ve “Şimdi başlıyoruz!” der. 🎭

1995’te Brendan Eich tarafından yazıldı. O dönem kimse “Bu dil bir gün frontend, backend, mobil, masaüstü her yerde olacak” demiyordu. Ama oldu.

Şimdi temellere gerçekten sağlam bir giriş yapıyoruz.
Yüzeysel değil. “Neden böyle?” sorusuna cevap vere vere.

1️⃣ JavaScript Nasıl Çalışır? (Motorun İçine Bakıyoruz)

JavaScript genelde tarayıcı motoru içinde çalışır.

Chrome → V8 engine
Kod yazarsın → Motor okur → Makine koduna çevirir → Çalıştırır

Yani:

console.log("Selam!");

Bu satır arka planda ciddi bir işlemden geçer.
Ama sana basit görünür. Çünkü JavaScript “karmaşıklığı saklama ustasıdır”.

📌 Script’i Nereye Yazıyoruz?

HTML içine:

<script>
  console.log("Sayfa yüklendi");
</script>

Ayrı dosya:

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

👉 Gerçek projede her zaman ayrı dosya kullan.
Kod düzenli olsun. Gelecekteki sen sana teşekkür eder.

2️⃣ Değişkenler – Hafıza Kutuları 📦

Programlama = Bilgiyi sakla + işle + göster.

🟢 let – Günlük Kullanım

let puan = 10;
puan = puan + 5;console.log(puan);

Ne oldu?

puan = 10
puan + 5 → 15
Yeni değer 15 oldu

Konsol: 15

👉 Pratik bilgi:
puan += 5 yazabilirsin. Aynı şey.

🔵 const – Değişmez Ama Dikkat!

const kullanici = "Cansu";

Bu değişmez.

Ama bak şimdi sürpriz:

const liste = [1, 2, 3];
liste.push(4);console.log(liste);

Neden hata vermedi?

Çünkü const değişkenin referansını sabitler.
İçeriği değişebilir.

👉 İpucu:
Objeler ve array’lerde bu farkı bilmek çok önemli.

🔴 var – Scope Tuzakları

if (true) {
  var test = "Merhaba";
}console.log(test);

Çalışır.

Ama:

if (true) {
  let test2 = "Selam";
}console.log(test2); // HATA

👉 let block scope,
👉 var function scope.

Modern dünyada var kullanma.
Geçmişi geride bırakalım 😄

3️⃣ Veri Tipleri – JavaScript’in Karakter Analizi 🧬

🧵 String

let isim = "Cansu";
let mesaj = `Merhaba ${isim}`;
console.log(mesaj);

Backtick (`) sayesinde string interpolation yapıyoruz.

👉 Eski stil:

"Merhaba " + isim

👉 Modern stil daha temiz.

🔢 Number ve İlginç Matematik

console.log(0.1 + 0.2);

Beklenen: 0.3
Gerçek: 0.30000000000000004 😅

Neden?
Floating point hassasiyet sorunu.

👉 Finans uygulaması yazıyorsan dikkat et.

🟡 Boolean

let girisYaptiMi = false;if (!girisYaptiMi) {
  console.log("Lütfen giriş yapın");
}

! → ters çevirir.

⚫ Truthy & Falsy (Çok Önemli!)

if (0) console.log("Çalışmaz");
if ("") console.log("Çalışmaz");
if (null) console.log("Çalışmaz");
if (undefined) console.log("Çalışmaz");

Falsy değerler:

0
“”
null
undefined
NaN
false

Bunları bilmek bug kurtarır.

4️⃣ Operatörler – Güç Kombinasyonları ⚔️

Karşılaştırma

console.log(5 > 3);   // true
console.log(5 < 3);   // false

Mantıksal Operatörler

let yas = 20;
let ehliyet = true;if (yas > 18 && ehliyet) {
  console.log("Araba kullanabilir");
}

&& → VE
|| → VEYA

Kısa Devre Mantığı

let isim = "";
let sonuc = isim || "Misafir";console.log(sonuc);

Eğer isim boşsa → “Misafir”

Bu teknik çok kullanılır.

5️⃣ Koşullar – Karar Mekanizması 🧠

Ternary Operator (Kısa Yazım)

let yas = 20;
let mesaj = yas >= 18 ? "Yetişkin" : "Çocuk";console.log(mesaj);

👉 if-else’in kısa hali.

Switch

let gun = 2;switch (gun) {
  case 1:
    console.log("Pazartesi");
    break;
  case 2:
    console.log("Salı");
    break;
  default:
    console.log("Bilinmeyen gün");
}

break koymazsan aşağı doğru akmaya devam eder.

6️⃣ Döngüler – Tekrarın Gücü 🔁

Array ile for

let meyveler = ["Elma", "Armut", "Muz"];for (let i = 0; i < meyveler.length; i++) {
  console.log(meyveler[i]);
}

.length → eleman sayısı

forEach (Modern Stil)

meyveler.forEach(function(meyve) {
  console.log(meyve);
});

Arrow versiyonu:

meyveler.forEach(meyve => console.log(meyve));

👉 forEach daha okunabilir.

7️⃣ Fonksiyonlar – Kodun Süper Kahramanı 🦸

Default Parametre

function selam(isim = "Misafir") {
  return `Merhaba ${isim}`;
}console.log(selam());

Eğer parametre verilmezse “Misafir” olur.

Function Expression

const topla = function(a, b) {
  return a + b;
};

Arrow Function ve this Farkı

Arrow function this bağlamını değiştirmez.

Bu ileri konu ama not düşelim 😎

8️⃣ Array & Object – Gerçek Dünya Modeli 🌍

Array

let sayilar = [1, 2, 3];
sayilar.push(4);console.log(sayilar);

Object

let kullanici = {
  isim: "Cansu",
  yas: 25,
  aktif: true
};console.log(kullanici.isim);

👉 Gerçek projelerde her şey objedir.

9️⃣ DOM Manipülasyonu – Sayfaya Hükmetmek 👑

<h1 id="baslik">Merhaba</h1>
<button id="degistir">Değiştir</button>

const baslik = document.getElementById("baslik");
const buton = document.getElementById("degistir");buton.addEventListener("click", () => {
  baslik.textContent = "JavaScript Gücü!";
});

Açıklama:

Element seçiyoruz
Olay dinliyoruz
İçeriği değiştiriyoruz

Bu noktada artık web sayfasını kontrol ediyorsun.

🔟 Scope & Hoisting – Sahne Arkası 🎭

Hoisting

console.log(a);
var a = 5;

undefined verir.

Çünkü var yukarı taşınır.