JavaScript ile web'e etkileşim kat

Bölüm 01

JavaScript Nedir?

HTML sayfanın iskeletini, CSS görünümünü kurar. JavaScript ise sayfaya davranış ve etkileşim katar: tıklamalara tepki vermek, içeriği değiştirmek, veri hesaplamak, sunucuyla konuşmak. Web'i "canlı" yapan dildir.

Üçlünün son parçası

• HTML: yapı (ne var).
• CSS: görünüm (nasıl görünür).
• JavaScript: davranış (ne yapar, nasıl tepki verir).

JavaScript nerede çalışır?

• Tarayıcıda (sayfayı canlandırır) — bu modülün odağı.
• Sunucuda (Node.js ile) — ileri modüllerde.
• Gerçek bir programlama dilidir: değişken, mantık, döngü, fonksiyon.

console.log("Merhaba, JavaScript!");
alert("Sayfa yüklendi!");

Bölüm 02

JS'i Sayfaya Eklemek

JavaScript'i HTML sayfasına eklemenin birkaç yolu vardır. Profesyoneller genelde ayrı bir dosya kullanır; tıpkı CSS'te olduğu gibi.

Ekleme yolları

• Satır içi: onclick="..." — küçük, dağınık, kaçın.
• İç: <script> bloğu doğrudan HTML içinde.
• Dış (önerilen): ayrı .js dosyası + <script src>.

<!-- index.html, body sonunda -->
<script src="app.js"></script>

// app.js
console.log("app.js çalıştı");

Bölüm 03

Değişkenler

Değişkenler, veriyi saklayan ve isimle eriştiğin kutulardır: bir sayı, bir metin, bir liste. JavaScript'te neredeyse her şey değişkenlerle başlar.

Bir değişkenin anatomisi

let, const ve var

• const — değeri değişmeyecek (sabit). Varsayılan tercihin olsun.
• let — değeri sonradan değişebilen.
• var — eski yöntem; artık önerilmez.

const ad = "Ayşe";
let puan = 0;
puan = puan + 10;   // let değiştirilebilir
// ad = "Veli";     // const değiştirilemez — hata

Bölüm 04

Veri Türleri

JavaScript'te veriler farklı türlerde olur: metin, sayı, doğru/yanlış... Her türün kendi davranışı vardır. Türleri tanımak, hataları önler.

Temel veri türleri

• String (metin): "Merhaba" — tırnak içinde.
• Number (sayı): 42, 3.14.
• Boolean (mantıksal): true / false.
• null / undefined: değer yok / henüz tanımsız.

const ad = "Ayşe";        // string
const yas = 30;           // number
const aktif = true;       // boolean
const adres = null;       // değer yok
console.log(typeof yas);  // "number"

Bölüm 05

Operatörler

Operatörler, değerlerle işlem yapmanı sağlar: toplama, karşılaştırma, mantıksal birleştirme. Hesaplamaların ve kararların temelidir.

Operatör türleri

• Aritmetik: + - * / % (mod: kalan).
• Karşılaştırma: === !== > < >= <=.
• Mantıksal: && (ve), || (veya), ! (değil).
• Atama: =, +=, -=.

const toplam = 5 + 3;        // 8
const esit = (5 === 5);      // true
const yetiskin = yas >= 18 && aktif;
let sayac = 0; sayac += 1;   // 1

Bölüm 06

Diziler (Arrays)

Bir dizi (array), sıralı birden çok değeri tek bir değişkende tutar: bir alışveriş listesi, kullanıcı adları, puanlar. Her öğeye bir indeks (sıra numarası) ile erişirsin.

Dizi nedir?

• Köşeli parantezle oluşturulur: [...].
• İndeks 0'dan başlar: ilk öğe dizi[0].
• dizi.length — öğe sayısı.

const meyveler = ["elma", "armut", "kiraz"];
console.log(meyveler[0]);     // "elma"
console.log(meyveler.length); // 3
meyveler.push("muz");         // sona ekle

Bölüm 07

Nesneler (Objects)

Bir nesne (object), ilişkili verileri anahtar–değer çiftleriyle bir arada tutar: bir kullanıcının adı, yaşı ve durumu gibi. Gerçek dünyadaki "şeyleri" modellemenin yoludur.

Anahtar–değer çiftleri

• Süslü parantezle oluşturulur: {...}.
• Her özellik bir anahtar: değer çiftidir.
• Değere nokta ile erişilir: kullanici.ad.

const kullanici = {
  ad: "Ayşe",
  yas: 30,
  aktif: true
};
console.log(kullanici.ad);   // "Ayşe"
kullanici.yas = 31;          // değeri güncelle

Bölüm 08

Konsol ve Hata Ayıklama

Her geliştirici hata yapar; önemli olan onları bulup düzeltebilmektir. Tarayıcının konsolu, kodunun ne yaptığını görmenin ve hataları çözmenin en güçlü aracıdır.

Konsolun gücü

• console.log(...) — değerleri görmek için.
• Hata mesajları (kırmızı) — neyin, nerede bozulduğunu söyler.
• Geliştirici araçları (F12) — Konsol sekmesi.

console.log("buraya kadar çalıştı");
console.log("değer:", puan);
console.table(meyveler);   // diziyi tablo gibi göster

Bölüm 09

Koşullar (if / else)

Programlar karar verebilmelidir: "kullanıcı giriş yaptıysa şunu göster, yapmadıysa bunu". if / else yapısı, koşula göre farklı kod çalıştırmanı sağlar.

Koşul mantığı

• if (koşul) { ... } — koşul doğruysa çalışır.
• else { ... } — koşul yanlışsa çalışır.
• else if — birden çok durumu sırayla kontrol eder.

const yas = 20;
if (yas >= 18) {
  console.log("Giriş izni verildi");
} else {
  console.log("Erişim engellendi");
}

Bölüm 10

Karşılaştırma ve Mantık

Koşulların kalbinde karşılaştırma ve mantıksal operatörler vardır. Bunları ve "truthy/falsy" kavramını anlamak, doğru kararlar kurmanın anahtarıdır.

Karşılaştırma ve mantık operatörleri

• === / !== — eşit / eşit değil (tür dahil).
• > < >= <= — büyüklük karşılaştırması.
• && (ve), || (veya), ! (değil).

Truthy ve falsy

• "Falsy" değerler koşulda false gibi davranır: 0, "", null, undefined.
• Diğer her şey "truthy"dir (koşulda doğru sayılır).

const giris = true, yas = 25;
if (giris && yas >= 18) { console.log("Erişim var"); }
if (!giris) { console.log("Lütfen giriş yap"); }
const isim = "" || "Misafir";   // "" falsy -> "Misafir"

Bölüm 11

Döngüler (Loops)

Aynı işi defalarca yapmak (bir listedeki her öğeyi işlemek, 1'den 100'e saymak) için döngüler kullanılır. Döngü, kod tekrarını ortadan kaldırır.

for ve while

• for — belli sayıda tekrar (sayaçlı).
• while — koşul doğru olduğu sürece tekrar.
• Her ikisi de "koşul doğruysa gövdeyi çalıştır, sonra tekrar kontrol et" mantığını izler.

for (let i = 1; i <= 3; i++) {
  console.log("Tekrar " + i);
}
let sayac = 0;
while (sayac < 3) { sayac++; }

Bölüm 12

Dizi Döngüleri

Diziler ve döngüler birlikte çok güçlüdür: bir dizinin her öğesini tek tek işlemek, JavaScript'te en sık yaptığın işlerden biridir. Bunun için özel, okunur yöntemler vardır.

Diziyi dolaşmanın yolları

• for...of — her öğeyi sırayla verir (en okunur).
• forEach — her öğe için bir fonksiyon çalıştırır.
• Klasik for (indeksle) — indekse ihtiyaç varsa.

const meyveler = ["elma", "armut", "kiraz"];
for (const meyve of meyveler) {
  console.log(meyve);
}
meyveler.forEach(m => console.log(m));

Bölüm 13

Fonksiyonlar

Fonksiyon, bir işi yapan ve yeniden kullanabileceğin bir kod paketidir: girdi alır, iş yapar, sonuç döndürür. Kodu düzenli, tekrarsız ve test edilebilir kılar.

Bir fonksiyonun parçaları

• Parametre: fonksiyona giren değer(ler).
• Gövde: yapılan iş.
• return: geri döndürülen sonuç.

function topla(a, b) {
  return a + b;
}
const sonuc = topla(5, 3);   // 8
console.log(sonuc);

Bölüm 14

Kapsam ve Ok Fonksiyonları

Değişkenlerin nerede görünür olduğu (kapsam) ve fonksiyon yazmanın modern, kısa yolu (ok fonksiyonları), temiz JavaScript için bilmen gereken iki kavramdır.

Kapsam (scope)

• Bir fonksiyon/blok içinde tanımlanan değişken, sadece orada görünür.
• Dışarıdan o değişkene erişilemez (bilgi gizleme).
• Bu, isim çakışmalarını ve hataları önler.

Ok fonksiyonları (arrow functions)

• Daha kısa söz dizimi: (a, b) => a + b.
• Özellikle map, filter gibi yerlerde çok kullanılır.

const kare = x => x * x;
console.log(kare(4));        // 16
const selam = isim => "Merhaba, " + isim;

Bölüm 15

DOM Nedir?

Tarayıcı, HTML sayfanı bir ağaç yapısına dönüştürür: DOM (Document Object Model). JavaScript bu ağaca erişip öğeleri okuyabilir ve değiştirebilir — işte sayfayı "canlı" yapan budur.

Sayfa bir ağaçtır

• document — tüm sayfayı temsil eden nesne.
• Her HTML etiketi bir "düğüm" (node) olur.
• JS, bu düğümleri seçip değiştirebilir.

console.log(document.title);   // sayfa başlığı
console.log(document.body);    // body öğesi

Bölüm 16

Element Seçme

Bir öğeyi değiştirmeden önce onu "seçmen" gerekir. JavaScript, CSS seçicilerine benzer yöntemlerle sayfadaki öğeleri bulmanı sağlar.

Seçim yöntemleri

• querySelector(".sinif") — CSS seçiciyle ilk eşleşeni bulur (en yaygın).
• querySelectorAll("p") — eşleşen tüm öğeleri bulur (liste).
• getElementById("id") — id ile tek öğe.

const baslik = document.querySelector("h1");
const dugme = document.querySelector("#gonder");
const tumKartlar = document.querySelectorAll(".kart");
console.log(baslik.textContent);

Bölüm 17

İçerik ve Stil Değiştirme

Öğeyi seçtikten sonra onu değiştirebilirsin: metnini, içeriğini, sınıfını veya stilini. İşte sayfayı dinamik olarak güncellemek budur.

Değiştirme yolları

• textContent — öğenin metnini değiştirir (güvenli).
• innerHTML — HTML içeriğini değiştirir (dikkatli kullan).
• classList.add/remove/toggle — CSS sınıfı ekler/çıkarır.
• style.renk — doğrudan stil (genelde sınıf tercih edilir).

const baslik = document.querySelector("h1");
baslik.textContent = "Yeni Başlık";
baslik.classList.add("vurgulu");
baslik.style.color = "#CA8A04";

Bölüm 18

Olaylar (Events)

Etkileşimin kalbi olaylardır: kullanıcı bir düğmeye tıkladığında, bir tuşa bastığında veya formu gönderdiğinde, JavaScript buna tepki verebilir. addEventListener bunun için kullanılır.

Olay dinleme

• Bir öğe seç, ona bir "dinleyici" ekle.
• addEventListener("click", fonksiyon) — tıklamayı dinler.
• Olay olunca, verdiğin fonksiyon çalışır.

const dugme = document.querySelector("#gonder");
dugme.addEventListener("click", () => {
  console.log("Düğmeye tıklandı!");
});

Bölüm 19

Form ve Girdi

Kullanıcıdan veri almak (giriş, arama, yorum) formlarla olur. JavaScript ile girdiyi okuyabilir, form gönderimini kontrol edebilir ve veriyi işleyebilirsin.

Girdiyi okumak

• Bir <input> seç, değerini .value ile oku.
• submit olayını dinle.
• event.preventDefault() — sayfanın yenilenmesini engelle.

const form = document.querySelector("#form");
const girdi = document.querySelector("#ad");
form.addEventListener("submit", (e) => {
  e.preventDefault();
  console.log("Merhaba, " + girdi.value);
});

Bölüm 20

Eleman Oluşturma

JavaScript yalnızca var olan öğeleri değiştirmekle kalmaz; yenilerini oluşturup sayfaya ekleyebilir. Bir yapılacaklar listesine madde eklemek gibi dinamik içerikler böyle yapılır.

Yeni öğe ekleme adımları

• document.createElement("li") — yeni öğe oluştur.
• İçeriğini ayarla (textContent).
• append() ile bir ataya ekle. remove() ile sil.

const liste = document.querySelector("#liste");
const madde = document.createElement("li");
madde.textContent = "Yeni görev";
liste.append(madde);   // listede görünür

Bölüm 21

Modern Söz Dizimi

Modern JavaScript (ES6+), kodu daha kısa ve okunur yazmanı sağlayan güçlü araçlar getirdi. Bunlar her gün kullanılan, hayat kolaylaştıran özelliklerdir.

Sık kullanılan modern özellikler

• Şablon dizgileri: `Merhaba ${ad}` — değişkeni metne gömer.
• Destructuring: const { ad, yas } = kullanici;.
• Spread: [...dizi1, ...dizi2] — birleştir/kopyala.
• Varsayılan parametre: function selam(ad = "Misafir").

const ad = "Ayşe", yas = 30;
console.log(`${ad}, ${yas} yaşında`);
const kullanici = { ad, yas };          // kısa nesne
const { sehir = "Bilinmiyor" } = kullanici;
const hepsi = [...[1,2], ...[3,4]];      // [1,2,3,4]

Bölüm 22

Dizi Metotları (map, filter, reduce)

Modern JavaScript'in en güçlü araçlarından biri dizi metotlarıdır. map, filter ve reduce ile dizileri döngü yazmadan, okunur biçimde dönüştürür, süzer ve özetlersin.

Üç temel metot

• map — her öğeyi dönüştür, yeni dizi üret.
• filter — koşulu sağlayan öğeleri seç.
• reduce — diziyi tek bir değere indirge (örn. toplam).

const sayilar = [1, 2, 3, 4];
const kareler = sayilar.map(n => n * n);      // [1,4,9,16]
const ciftler = sayilar.filter(n => n % 2 === 0); // [2,4]
const toplam = sayilar.reduce((a, n) => a + n, 0); // 10

Bölüm 23

Asenkron JavaScript

Bazı işler zaman alır: bir sunucudan veri çekmek, bir dosya okumak. JavaScript bunları beklerken donmaz; işi "arka planda" yürütür ve bittiğinde devam eder. Buna asenkron çalışma denir.

Asenkron kavramı

• Uzun işler (örn. ağ isteği) beklenirken kod akmaya devam eder.
• Promise: "ileride gelecek bir sonuç" sözü.
• async / await: asenkron kodu okunur biçimde yazma yolu.

async function veriGetir() {
  const yanit = await fetch("/veri.json");
  const veri = await yanit.json();
  console.log(veri);
}

Bölüm 24

Veri Çekme (fetch & API)

Modern uygulamalar verilerini genelde bir sunucudan/API'den çeker: hava durumu, ürün listesi, kullanıcı bilgisi. fetch ile bu veriyi alır, JSON olarak okur ve sayfanda kullanırsın.

fetch akışı

• fetch(url) — bir adrese istek gönderir.
• Yanıt gelir; .json() ile JSON verisine çevrilir.
• API: verinin alındığı uç nokta (genelde JSON döner).

async function urunleriGetir() {
  const yanit = await fetch("https://api.ornek.com/urunler");
  const urunler = await yanit.json();
  urunler.forEach(u => console.log(u.ad));
}

Bölüm 25

Hatalar ve Güvenli Kod

Gerçek dünyada işler ters gider: ağ kopar, kullanıcı hatalı veri girer, beklenmeyen değerler gelir. Sağlam kod, bu durumları öngörür ve nazikçe ele alır.

Hataları ele almak

• try { ... } catch (e) { ... } — riskli kodu güvenle çalıştır.
• Hata olursa catch bloğu devreye girer; program çökmez.
• Kullanıcı girdisini her zaman doğrula (boş, tür, aralık).

async function veriGetir() {
  try {
    const yanit = await fetch("/veri.json");
    if (!yanit.ok) throw new Error("Sunucu hatası");
    return await yanit.json();
  } catch (e) {
    console.log("Veri alınamadı:", e.message);
  }
}

Bölüm 26

Bitirme: Etkileşimli Bir Uygulama

Tüm JavaScript bilgini birleştirip küçük, gerçek bir uygulama kuruyorsun: örneğin bir "yapılacaklar" listesi. Seçme, olay, DOM güncelleme ve veri yönetimi bir arada.

Bir uygulamanın iskeleti

• Veri: bir dizide görevleri tut.
• Olay: "Ekle" düğmesini ve girdiyi dinle.
• DOM: her görevi listeye ekle; silmeyi bağla.

const girdi = document.querySelector("#yeni");
const liste = document.querySelector("#liste");
document.querySelector("#ekle").addEventListener("click", () => {
  if (!girdi.value) return;          // doğrula
  const li = document.createElement("li");
  li.textContent = girdi.value;
  liste.append(li);
  girdi.value = "";                  // alanı temizle
});

Ek

JavaScript Sözlüğü

En sık kullanılan JavaScript yapıları ve işlevleri. Bir başvuru kaynağı olarak saklayabilirsin.