JavaScript Programlama Rehberi

Kapsamlı JavaScript Eğitim Dokümanı

Bölüm 1: JavaScript’e Giriş ve Temel Kavramlar

JavaScript, web sayfalarına etkileşim eklemek için kullanılan bir programlama dilidir.
1995 yılında Brendan Eich tarafından geliştirilmiştir ve günümüzde web geliştirmenin
vazgeçilmez bir parçası haline gelmiştir.

JavaScript’in Tarihsel Gelişimi

JavaScript’in evrimi şu aşamalardan geçmiştir: - 1995: Netscape Navigator için ilk sürüm
- 1997: ECMAScript 1 standardı - 2009: ECMAScript 5 (ES5) - Modern JavaScript’in temeli
- 2015: ECMAScript 6 (ES6) - Büyük güncelleme - 2020: ECMAScript 2020 - Güncel stan-
dart

JavaScript’in Kullanım Alanları

• Web sayfalarında dinamik içerik
• Sunucu tarafında ([Link])
• Mobil uygulama geliştirme (React Native)
• Masaüstü uygulamalar (Electron)
• Oyun geliştirme

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

Değişken Tanımlama
// ES5
var isim = "Ahmet";

// ES6+
let yas = 25;
const PI = 3.14;

Temel Veri Tipleri

JavaScript’te 7 temel veri tipi bulunur:
1. String: Metin değerleri
2. Number: Sayısal değerler
3. Boolean: true/false
4. Null: Boş değer
5. Undefined: Tanımlanmamış
6. Symbol: ES6 ile gelen benzersiz değerler
7. BigInt: Büyük tam sayılar

1
Tip Dönüşümleri
// String'e dönüştürme
let sayi = 123;
let metin = String(sayi);

// Number'a dönüştürme
let yazi = "456";
let rakam = Number(yazi);

// Boolean'a dönüştürme
let deger = 1;
let mantiksal = Boolean(deger);

Bölüm 3: Operatörler ve İfadeler

Aritmetik Operatörler

Operatör Açıklama Örnek

+ Toplama 5+3=8
- Çıkarma 5-3=2
* Çarpma 5 * 3 = 15
/ Bölme 15 / 3 = 5
% Mod Alma 15 % 4 = 3
** Üs Alma 2 ** 3 = 8

Karşılaştırma Operatörleri
let a = 5, b = 10;

[Link](a == b); // false

[Link](a != b); // true
[Link](a > b); // false
[Link](a < b); // true
[Link](a >= 5); // true
[Link](b <= 10); // true

// Strict equality (tip ve değer kontrolü)

[Link](5 === "5"); // false
[Link](5 !== "5"); // true

Mantıksal Operatörler
// AND (&&) - Her iki koşul da doğru olmalı
if (yas > 18 && uyelik == true) {
[Link]("Erişim verildi");
}

// OR (||) - Koşullardan biri doğru olmalı

if (haftaSonu || resmiTatil) {
[Link]("Dinlenme zamanı");
}

2
// NOT (!) - Koşulu tersine çevirir
if (!kullaniciGiris) {
[Link]("Lütfen giriş yapın");
}

Bölüm 4: Kontrol Yapıları

If-Else Yapısı
let not = 85;

if (not >= 90) {

[Link]("AA - Mükemmel");
} else if (not >= 80) {
[Link]("BA - Çok İyi");
} else if (not >= 70) {
[Link]("BB - İyi");
} else if (not >= 60) {
[Link]("CB - Orta");
} else if (not >= 50) {
[Link]("CC - Geçer");
} else {
[Link]("FF - Kaldı");
}

Switch-Case Yapısı
let gun = new Date().getDay();
let gunAdi;

switch (gun) {
case 0:
gunAdi = "Pazar";
break;
case 1:
gunAdi = "Pazartesi";
break;
case 2:
gunAdi = "Salı";
break;
case 3:
gunAdi = "Çarşamba";
break;
case 4:
gunAdi = "Perşembe";
break;
case 5:
gunAdi = "Cuma";
break;
case 6:
gunAdi = "Cumartesi";
break;
default:

3
 gunAdi = "Geçersiz gün";
}

[Link]("Bugün: " + gunAdi);

Ternary Operatör
let yas = 20;
let durum = yas >= 18 ? "Yetişkin" : "Çocuk";

// Çoklu ternary
let puan = 75;
let sonuc = puan >= 90 ? "Mükemmel" :
puan >= 70 ? "İyi" :
puan >= 50 ? "Orta" : "Zayıf";

Bölüm 5: Döngüler

For Döngüsü
// Temel for döngüsü
for (let i = 0; i < 5; i++) {
[Link]("Iterasyon: " + i);
}

// Sonsuz döngü (dikkatli kullanın)

// for (;;) {
// [Link]("Sonsuz döngü");
// }

// For...of döngüsü (ES6)

let dizi = [1, 2, 3, 4, 5];
for (let eleman of dizi) {
[Link](eleman);
}

// For...in döngüsü (objeler için)

let obje = {a: 1, b: 2, c: 3};
for (let anahtar in obje) {
[Link](anahtar + ": " + obje[anahtar]);
}

While Döngüsü
// While döngüsü
let sayac = 0;
while (sayac < 5) {
[Link]("While: " + sayac);
sayac++;
}

// Do-while döngüsü
let i = 0;

4
do {
[Link]("Do-while: " + i);
i++;
} while (i < 5);

Döngü Kontrol İfadeleri

// Break kullanımı
for (let i = 0; i < 10; i++) {
if (i === 5) {
break; // Döngüyü tamamen sonlandırır
}
[Link](i);
}

// Continue kullanımı
for (let i = 0; i < 10; i++) {
if (i % 2 === 0) {
continue; // Mevcut iterasyonu atlar
}
[Link]("Tek sayı: " + i);
}

Bölüm 6: Fonksiyonlar

Fonksiyon Tanımlama
// Function declaration
function selamVer(isim) {
return "Merhaba, " + isim + "!";
}

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

// Arrow function (ES6)

const carp = (a, b) => a * b;

// Immediately Invoked Function Expression (IIFE)

(function() {
[Link]("Bu fonksiyon hemen çalıştı");
})();

Parametreler ve Varsayılan Değerler

// Varsayılan parametreler (ES6)
function kisiBilgisi(isim = "Misafir", yas = 0) {
return `${isim}, ${yas} yaşında`;
}

// Rest parameters

5
function toplam(...sayilar) {
return [Link]((toplam, sayi) => toplam + sayi, 0);
}

[Link](toplam(1, 2, 3, 4, 5)); // 15

Callback Fonksiyonlar
function islemYap(a, b, callback) {
return callback(a, b);
}

function toplama(x, y) {
return x + y;
}

function carpma(x, y) {
return x * y;
}

[Link](islemYap(5, 3, toplama)); // 8
[Link](islemYap(5, 3, carpma)); // 15

Bölüm 7: Diziler ve Dizi Metodları

Dizi Oluşturma ve Temel İşlemler

// Dizi oluşturma
let meyveler = ["Elma", "Armut", "Muz"];
let sayilar = new Array(1, 2, 3, 4, 5);

// Dizi elemanlarına erişim

[Link](meyveler[0]); // "Elma"
[Link]([Link]); // 3

// Eleman ekleme/çıkarma
[Link]("Portakal"); // Sonuna ekle
[Link](); // Sondan çıkar
[Link]("Çilek"); // Başına ekle
[Link](); // Baştan çıkar

Dizi Metodları
let numbers = [1, 2, 3, 4, 5];

// map - her elemanı dönüştürür

let kareler = [Link](n => n * n);

// filter - koşula uyanları filtreler

let tekler = [Link](n => n % 2 !== 0);

// reduce - diziyi tek değere indirger

let toplam = [Link]((acc, n) => acc + n, 0);

6
// find - koşula uyan ilk elemanı bulur
let bulunan = [Link](n => n > 3);

// some - koşula uyan en az bir eleman var mı

let varMi = [Link](n => n > 5);

// every - tüm elemanlar koşula uyuyor mu

let hepsi = [Link](n => n > 0);

Çok Boyutlu Diziler

// Matris oluşturma
let matris = [
[1, 2, 3],
[4, 5, 6],
[7, 8, 9]
];

// Matris elemanlarına erişim

[Link](matris[1][2]); // 6

// Matris işlemleri
for (let i = 0; i < [Link]; i++) {
for (let j = 0; j < matris[i].length; j++) {
[Link](`matris[${i}][${j}] = ${matris[i][j]}`);
}
}

Bölüm 8: Nesneler (Objects)

Nesne Oluşturma ve Erişim

// Object literal
let kisi = {
ad: "Ahmet",
yas: 30,
meslek: "Mühendis",
selamVer: function() {
return "Merhaba, ben " + [Link];
}
};

// Erişim yöntemleri
[Link]([Link]); // dot notation
[Link](kisi["yas"]); // bracket notation
[Link]([Link]()); // method çağırma

// Property ekleme/silme
[Link] = "ahmet@[Link]";
delete [Link];

7
Constructor Fonksiyonlar
// Constructor function
function Kisi(ad, yas, meslek) {
[Link] = ad;
[Link] = yas;
[Link] = meslek;
[Link] = function() {
return `${[Link]}, ${[Link]} yaşında, ${[Link]}`;
};
}

// Yeni nesne oluşturma

let kisi1 = new Kisi("Ayşe", 25, "Doktor");
let kisi2 = new Kisi("Mehmet", 35, "Öğretmen");

[Link]([Link]());

ES6 Classes
class Araba {
constructor(marka, model, yil) {
[Link] = marka;
[Link] = model;
[Link] = yil;
}

bilgileriGoster() {
return `${[Link]} ${[Link]} ${[Link]}`;
}

// Getter ve Setter
get yas() {
return new Date().getFullYear() - [Link];
}
}

let araba1 = new Araba("Toyota", "Corolla", 2020);

[Link]([Link]());
[Link]("Araba yaşı: " + [Link]);

Bölüm 9: Hata Yönetimi

Try-Catch-Finally
try {
// Riskli kod
let sonuc = riskyIslem();
[Link]("Sonuç: " + sonuc);
} catch (hata) {
// Hata durumunda
[Link]("Hata oluştu: " + [Link]);
} finally {

8
 // Her durumda çalışır
[Link]("İşlem tamamlandı");
}

Özel Hata Sınıfları

class OzelHata extends Error {
constructor(mesaj, kod) {
super(mesaj);
[Link] = "OzelHata";
[Link] = kod;
}
}

function dogrula(yas) {
if (yas < 18) {
throw new OzelHata("Yaş yetersiz", 1001);
}
return true;
}

try {
dogrula(15);
} catch (hata) {
if (hata instanceof OzelHata) {
[Link](`Özel hata: ${[Link]} (Kod: ${[Link]})`);
} else {
[Link]("Genel hata: " + [Link]);
}
}

Bölüm 10: Modern JavaScript Özellikleri (ES6+)

Destructuring
// Dizi destructuring
let [bir, iki, ...geriKalan] = [1, 2, 3, 4, 5];

// Obje destructuring
let {ad, yas, meslek} = kisi;

// Fonksiyon parametrelerinde
function kisiBilgisi({ad, yas = 25}) {
return `${ad}, ${yas} yaşında`;
}

Spread Operator
// Dizilerde
let dizi1 = [1, 2, 3];
let dizi2 = [4, 5, 6];
let birlesik = [...dizi1, ...dizi2];

9
// Objelerde
let obje1 = {a: 1, b: 2};
let obje2 = {c: 3, d: 4};
let birlesikObje = {...obje1, ...obje2};

// Fonksiyon çağrılarında
let sayilar = [1, 2, 3, 4, 5];
let enBuyuk = [Link](...sayilar);

Template Literals
let isim = "Ahmet";
let yas = 30;

// Çok satırlı string

let mesaj = `
Merhaba ${isim},

${yas} yaşındasınız.
Bugün: ${new Date().toLocaleDateString()}
`;

[Link](mesaj);

Promises ve Async/Await
// Promise
function veriGetir() {
return new Promise((resolve, reject) => {
setTimeout(() => {
[Link]() > 0.5 ? resolve("Başarılı") : reject("Hata");
}, 1000);
});
}

// Async/Await
async function islemYap() {
try {
let sonuc = await veriGetir();
[Link]("Sonuç: " + sonuc);
} catch (hata) {
[Link]("Hata: " + hata);
}
}

islemYap();

Sonuç
JavaScript, modern web geliştirmenin temel taşıdır. Bu rehber, JavaScript’in temel ve orta
düzey konseptlerini kapsamlı şekilde ele almaktadır. Pratik yaparak ve projeler geliştir-
erek bu bilgileri pekiştirebilirsiniz.

10
Önerilen Kaynaklar
• MDN Web Docs: JavaScript
• [Link]
• ECMAScript Specification
• Stack Overflow JavaScript etiketleri

Bu doküman JavaScript programlama dili hakkında temel ve orta düzey bilgiler içermektedir.
Düzenli olarak güncellenecektir.

11