JavaScript Ders Notları

JavaScript, günümüzde web sayfalarına dinamiklik ve etkileşim kazandırmak için en çok kullanılan programlama dillerinden biridir. Bu yazı, JavaScript’e yeni başlayanlar veya temel bilgilerini tazelemek isteyenler için hazırlanmış bir ders notu niteliği taşımaktadır. Amacımız, dilin temel yapısından başlayarak, pratik kullanım örnekleriyle birlikte özet ve anlaşılır bir anlatım sunmaktır.

İçerik boyunca; JavaScript’in HTML içinde nasıl kullanıldığından başlayarak, değişken tanımı (const, let), fonksiyon yazımı (hem klasik hem de arrow function), temel veri türleri, nesne (object) yapısı gibi temel konuları ele alacağız. Bununla birlikte, HTML elemanlarının JavaScript ile nasıl seçildiğini, olay (event) dinleyicileri ile nasıl etkileşime geçildiğini, koşullu yapılar (if/else) ve döngülerin (for, forEach) pratik kullanımını da örneklerle inceleyeceğiz. Ayrıca console.log() ve console.dir() gibi araçlarla kodun nasıl inceleneceğini ve basit debug yöntemlerini de göstereceğiz.

Makalenin ilerleyen bölümlerinde ise JavaScript ile eklenti (plugin) kullanımına değineceğiz. CDN aracılığıyla veya GitHub gibi kaynaklardan indirilen script dosyalarının sayfaya nasıl entegre edildiğini ve örnek bir eklentinin (örneğin bir lightbox ya da slider) nasıl çalıştırıldığını adım adım açıklayacağız. Böylece hem temel kavramları öğrenmiş olacak, hem de gerçek dünyada JavaScript’i nasıl kullanabileceğiniz hakkında fikir sahibi olacaksınız.

Hadi başlayalım ve JavaScript dünyasında keşfe çıkalım! Her adımda birlikte ilerleyerek, bu güçlü dilin temellerinden ileri düzey kullanımına kadar her yönünü keşfedeceğiz. Hazır mısın?

İçindekiler

JavaScript Tanıtımı ve Kullanımı

JavaScript, web sayfalarına etkileşim eklememizi sağlayan bir programlama dilidir. HTML ve CSS ile birlikte çalışır. Örneğin: bir düğmeye tıklayınca bir uyarı vermek, form alanını kontrol etmek ya da animasyon yapmak için JavaScript kullanılır.

JavaScript kodlarını iki şekilde yazabiliriz:

📍 Dahili JavaScript (HTML içinde <script> etiketiyle)
📍 Harici JavaScript (Ayrı dosya ile <script src="">)

📍 Dahili JavaScript (HTML içinde `<script>` etiketiyle)

Bu yöntemle JavaScript kodları doğrudan HTML dosyasının içine yazılır. Genellikle <body> etiketinin sonuna eklenir.

HTML


<!DOCTYPE html>
<html lang="tr">
<head>
  <meta charset="UTF-8">
  <title>Dahili JavaScript</title>
</head>
<body>

  <button onclick="selamla()">Tıkla</button>

  <script>
    function selamla() {
      alert("Merhaba dünya!");
    }
  </script>

</body>
</html>

<!DOCTYPE html>

<head>

<title>Dahili JavaScript</title>

</head>

<body>

<button onclick="selamla()">Tıkla</button>

function selamla() {

alert("Merhaba dünya!");

}

</script>

</body>

</html>

<script> etiketi içinde yazılan kodlar doğrudan sayfa yüklendiğinde tarayıcı tarafından çalıştırılır.

Butona tıklanınca selamla fonksiyonu çağrılır ve bir uyarı gösterilir.

📍 Harici JavaScript (Ayrı dosya ile `<script src="">`)

Bu yöntemde JavaScript kodları ayrı bir .js dosyasına yazılır. HTML dosyasına bu dosya <script src="dosya.js"> ile bağlanır.

HTML


<!DOCTYPE html>
<html lang="tr">
<head>
  <meta charset="UTF-8">
  <title>Harici JavaScript</title>
</head>
<body>

  <button onclick="selamla()">Tıkla</button>

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

</body>
</html>

<!DOCTYPE html>

<head>

<title>Harici JavaScript</title>

</head>

<body>

<button onclick="selamla()">Tıkla</button>

</body>

</html>

harici.js


function selamla() {
    alert("Merhaba dünya!");
  }

function selamla() {

alert("Merhaba dünya!");

}

Kodlar daha düzenli olur.

Birden fazla sayfada aynı JS dosyasını kullanmak kolaylaşır.

Genellikle projelerde bu yöntem tercih edilir.

📌 `console.log()` Nedir?

console.log() JavaScript’te en sık kullanılan yardımcı fonksiyonlardan biridir.
📤 Amacı: Bir değeri tarayıcının geliştirici konsoluna yazdırmaktır.
Bu sayede kodun nasıl çalıştığını kolayca görebilir, hataları takip edebilirsin.

Nerede Görülür?
Tarayıcının geliştirici araçlarını aç:

Sağ tık > “İncele” > “Console” sekmesi
Veya F12 tuşuna bas

Örnek:


<!DOCTYPE html>
<html lang="tr">
<head>
  <meta charset="UTF-8">
  <title>Harici JavaScript</title>
</head>
<body>

  <h1>TASARIMKODLAMA</h1>

  <script>

    let yas = 25;
    console.log("Yaşınız:", yas); // Console'a "Yaşınız: 25" yazar
    
  </script>
</body>
</html>

<!DOCTYPE html>

<head>

<title>Harici JavaScript</title>

</head>

<body>

<h1>TASARIMKODLAMA</h1>

let yas = 25;

console.log("Yaşınız:", yas); // Console'a "Yaşınız: 25" yazar

</script>

</body>

</html>

Değişken Tanımlama – `const` ve `let`

JavaScript’te veri saklamak için değişkenler kullanılır. Örneğin bir ismi, sayıyı ya da sonucu bir değişkende tutabiliriz.

Eskiden var kullanılırdı ama artık modern JavaScript’te let ve const tercih edilir.

📍 `let` – Değiştirilebilir Değişken

let ile tanımlanan değişkenin değeri sonradan değiştirilebilir.

Örnek:


<!DOCTYPE html>
<html lang="tr">
<head>
  <meta charset="UTF-8">
  <title>Harici JavaScript</title>
</head>
<body>

  <h1>TASARIMKODLAMA</h1>

  <script>

    let isim = "Ahmet";
    console.log(isim); // Ahmet

    yas = 18; // Değişken tanımlanmadı, 
    console.log(yas); // 18

  </script>
</body>
</html>

<!DOCTYPE html>

<head>

<title>Harici JavaScript</title>

</head>

<body>

<h1>TASARIMKODLAMA</h1>

let isim = "Ahmet";

console.log(isim); // Ahmet

yas = 18; // Değişken tanımlanmadı,

console.log(yas); // 18

</script>

</body>

</html>

📍 `const` – Sabit (Değiştirilemez) Değişken

const ile tanımlanan değişkenin değeri bir kez atanır, sonradan değiştirilemez.

Örnek:


<!DOCTYPE html>
<html lang="tr">
<head>
  <meta charset="UTF-8">
  <title>Harici JavaScript</title>
</head>
<body>

  <h1>TASARIMKODLAMA</h1>

  <script>

    const pi = 3.14;
    console.log(pi); // 3.14

    // pi = 3.1415; // HATA! const ile tanımlanan değişken değiştirilemez.


  </script>
</body>
</html>

<!DOCTYPE html>

<head>

<title>Harici JavaScript</title>

</head>

<body>

<h1>TASARIMKODLAMA</h1>

const pi = 3.14;

console.log(pi); // 3.14

// pi = 3.1415; // HATA! const ile tanımlanan değişken değiştirilemez.

</script>

</body>

</html>

📌 `let` mi `const` mu?

Eğer değer değişmeyecekse → const
Eğer değer değişecekse → let

Bu şekilde yazmak kodun okunabilirliğini artırır ve hata yapmanı zorlaştırır.

📝 Ekstra Not

const ile tanımlanan bir object ya da array’in içeriği değiştirilebilir ama kendisi farklı bir değere atanamaz.

Örnek:


<!DOCTYPE html>
<html lang="tr">
<head>
  <meta charset="UTF-8">
  <title>Harici JavaScript</title>
</head>
<body>

  <h1>TASARIMKODLAMA</h1>

  <script>

        const kisi = { ad: "Ali" };
        kisi.ad = "Veli"; // geçerli
        // kisi = { ad: "Ayşe" }; // HATA!

  </script>
</body>
</html>

<!DOCTYPE html>

<head>

<title>Harici JavaScript</title>

</head>

<body>

<h1>TASARIMKODLAMA</h1>

const kisi = { ad: "Ali" };

kisi.ad = "Veli"; // geçerli

// kisi = { ad: "Ayşe" }; // HATA!

</script>

</body>

</html>

Hazırsan şimdi sıradaki konuya geçebiliriz:

Object (Nesne) Tanımlama

JavaScript’te object (nesne), birden fazla veriyi anahtar-değer (key-value) şeklinde bir arada tutmak için kullanılır.
Eklenti kullanımında da (örneğin ayar nesneleri, veri yapılandırmaları) nesneler çok işe yarar.

📍 Basit Object Tanımı

Örnek:


<!DOCTYPE html>
<html lang="tr">
<head>
  <meta charset="UTF-8">
  <title>Harici JavaScript</title>
</head>
<body>

  <h1>TASARIMKODLAMA</h1>

  <script>

    const kullanici = {
    ad: "Ayşe",
    yas: 30,
    sehir: "İstanbul"
    };

    console.log(kullanici);

  </script>
</body>
</html>

<!DOCTYPE html>

<head>

<title>Harici JavaScript</title>

</head>

<body>

<h1>TASARIMKODLAMA</h1>

const kullanici = {

ad: "Ayşe",

yas: 30,

sehir: "İstanbul"

};

console.log(kullanici);

</script>

</body>

</html>

📝 Bu örnekte:

ad, yas, sehir → anahtar (key)
"Ayşe", 30, "İstanbul" → değer (value)

📍 Object Üzerinden Değere Erişim

Bir nesnedeki bilgilere iki şekilde ulaşabilirsin:


<!DOCTYPE html>
<html lang="tr">
<head>
  <meta charset="UTF-8">
  <title>Harici JavaScript</title>
</head>
<body>

  <h1>TASARIMKODLAMA</h1>

  <script>

    const kullanici = {
    ad: "Ayşe",
    yas: 30,
    sehir: "İstanbul"
    };

    console.log(kullanici.ad);     // "Ayşe"
    console.log(kullanici["yas"]); // 30

  </script>
</body>
</html>

<!DOCTYPE html>

<head>

<title>Harici JavaScript</title>

</head>

<body>

<h1>TASARIMKODLAMA</h1>

const kullanici = {

ad: "Ayşe",

yas: 30,

sehir: "İstanbul"

};

console.log(kullanici.ad); // "Ayşe"

console.log(kullanici["yas"]); // 30

</script>

</body>

</html>

Nokta (.) kullanımı en yaygın olandır.
Köşeli parantez ([]) daha dinamik durumlarda kullanılır (örneğin key bir değişkense).

📍 Nesneye Yeni Özellik Ekleme / Değiştirme


<!DOCTYPE html>
<html lang="tr">
<head>
  <meta charset="UTF-8">
  <title>Harici JavaScript</title>
</head>
<body>

  <h1>TASARIMKODLAMA</h1>

  <script>

    const kullanici = {
    ad: "Ayşe",
    yas: 30,
    sehir: "İstanbul"
    };

    kullanici.meslek = "Yazılımcı"; // yeni özellik
    kullanici.yas = 35;             // mevcut değeri değiştirme

    console.log(kullanici);


  </script>
</body>
</html>

<!DOCTYPE html>

<head>

<title>Harici JavaScript</title>

</head>

<body>

<h1>TASARIMKODLAMA</h1>

const kullanici = {

ad: "Ayşe",

yas: 30,

sehir: "İstanbul"

};

kullanici.meslek = "Yazılımcı"; // yeni özellik

kullanici.yas = 35; // mevcut değeri değiştirme

console.log(kullanici);

</script>

</body>

</html>

📦 Eklenti Kullanımında Neden Object Gerekli?

Birçok eklenti yapılandırma için nesne alır.
Örnek (gerçek değil, hayali bir slider eklentisi):


const ayarlar = {
    otomatikBaslat: true,
    gecisSuresi: 3000,
    gosterge: false
  };
  
  sliderBaslat(ayarlar);

const ayarlar = {

otomatikBaslat: true,

gecisSuresi: 3000,

gosterge: false

};

sliderBaslat(ayarlar);

Fonksiyon Tanımı

Fonksiyonlar, belirli bir işlemi bir kere tanımlayıp, istediğimiz zaman tekrar tekrar kullanmamızı sağlar.
Kodu daha düzenli ve okunabilir hale getirir.

📍 1. Klasik Fonksiyon Tanımı (`function` ile)


<!DOCTYPE html>
<html lang="tr">
<head>
  <meta charset="UTF-8">
  <title>Harici JavaScript</title>
</head>
<body>

  <h1>TASARIMKODLAMA</h1>

  <script>

    // Fonksiyon tanımlama
    function selamVer() {
    console.log("Merhaba!");
    }

    // Fonksiyonu çağırma
    selamVer();

  </script>
</body>
</html>

<!DOCTYPE html>

<head>

<title>Harici JavaScript</title>

</head>

<body>

<h1>TASARIMKODLAMA</h1>

// Fonksiyon tanımlama

function selamVer() {

console.log("Merhaba!");

}

// Fonksiyonu çağırma

selamVer();

</script>

</body>

</html>

function ile fonksiyon tanımlanır.

selamVer() çağrıldığında içindeki kod çalışır.

📍 Parametreli Fonksiyon

Bir fonksiyona dışarıdan değer verebiliriz:


<!DOCTYPE html>
<html lang="tr">
<head>
  <meta charset="UTF-8">
  <title>Harici JavaScript</title>
</head>
<body>

  <h1>TASARIMKODLAMA</h1>

  <script>

        function selamVer(isim) {
        console.log("Merhaba, " + isim + "!");
        }

        selamVer("Ali");   // Merhaba, Ali!
        selamVer("Zeynep"); // Merhaba, Zeynep!


  </script>
</body>
</html>

<!DOCTYPE html>

<head>

<title>Harici JavaScript</title>

</head>

<body>

<h1>TASARIMKODLAMA</h1>

function selamVer(isim) {

console.log("Merhaba, " + isim + "!");

}

selamVer("Ali"); // Merhaba, Ali!

selamVer("Zeynep"); // Merhaba, Zeynep!

</script>

</body>

</html>

📍 Geri Değer Döndüren Fonksiyon (`return`)

Fonksiyonlar sadece işlem yapmak zorunda değildir, değer de döndürebilir.


<!DOCTYPE html>
<html lang="tr">
<head>
  <meta charset="UTF-8">
  <title>Harici JavaScript</title>
</head>
<body>

  <h1>TASARIMKODLAMA</h1>

  <script>

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

    let sonuc = topla(5, 3);
    console.log(sonuc); // 8

  </script>
</body>
</html>

<!DOCTYPE html>

<head>

<title>Harici JavaScript</title>

</head>

<body>

<h1>TASARIMKODLAMA</h1>

function topla(a, b) {

return a + b;

}

let sonuc = topla(5, 3);

console.log(sonuc); // 8

</script>

</body>

</html>

📍 Arrow Function (ok fonksiyonu) – Kısaca

Modern JS’te sık kullanılan kısa fonksiyon tanımıdır.


<!DOCTYPE html>
<html lang="tr">
<head>
  <meta charset="UTF-8">
  <title>Harici JavaScript</title>
</head>
<body>

  <h1>TASARIMKODLAMA</h1>

  <script>

    const selamVer = () => {
    console.log("Merhaba!");
    };

    selamVer(); // Merhaba!

  </script>
</body>
</html>

<!DOCTYPE html>

<head>

<title>Harici JavaScript</title>

</head>

<body>

<h1>TASARIMKODLAMA</h1>

const selamVer = () => {

console.log("Merhaba!");

};

selamVer(); // Merhaba!

</script>

</body>

</html>

yada parametreli:


<!DOCTYPE html>
<html lang="tr">
<head>
  <meta charset="UTF-8">
  <title>Harici JavaScript</title>
</head>
<body>

  <h1>TASARIMKODLAMA</h1>

  <script>

    const topla = (a, b) => a + b;

    console.log(topla(2, 4)); // 6

  </script>
</body>
</html>

<!DOCTYPE html>

<head>

<title>Harici JavaScript</title>

</head>

<body>

<h1>TASARIMKODLAMA</h1>

const topla = (a, b) => a + b;

console.log(topla(2, 4)); // 6

</script>

</body>

</html>

=> sembolü sebebiyle “arrow function” (ok fonksiyonu) denir.

Genellikle kısa işlemler için tercih edilir.

this davranışı farklıdır, ama onu başlangıç seviyesi için es geçebiliriz.

📍 Anonim Fonksiyon

Anonim fonksiyonlar, adı olmayan fonksiyonlardır. Genellikle bir kez kullanacağımız ya da bir değişkene atayacağımız fonksiyonlar için tercih edilir. Bu fonksiyonlar, tanımlandıkları anda çalıştırılabilir.


<!DOCTYPE html>
<html lang="tr">
<head>
  <meta charset="UTF-8">
  <title>Harici JavaScript</title>
</head>
<body>

  <h1>TASARIMKODLAMA</h1>

  <script>

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

    console.log(topla(3, 4)); // 7


  </script>
</body>
</html>

<!DOCTYPE html>

<head>

<title>Harici JavaScript</title>

</head>

<body>

<h1>TASARIMKODLAMA</h1>

const topla = function(a, b) {

return a + b;

};

console.log(topla(3, 4)); // 7

</script>

</body>

</html>

Bu örnekte, topla adında bir değişkene anonim bir fonksiyon atadık. Fonksiyonun kendisi adı olmayan bir fonksiyondur.

Temel Veri Türleri ve Object Tanımı

JavaScript’te farklı türlerde veri saklayabiliriz. Bu veriler, sayılar, metinler, mantıksal değerler gibi temel türlerden oluşur. Ayrıca object (nesne) veri yapıları daha karmaşık ve organize veriler için kullanılır.

📍 Temel Veri Türleri

1. Sayı (Number)

JavaScript’te sayılar hem tam sayılar hem de ondalıklı sayılar için aynı türdeki veri tipidir.

Örnek:


<!DOCTYPE html>
<html lang="tr">
<head>
  <meta charset="UTF-8">
  <title>Harici JavaScript</title>
</head>
<body>

  <h1>TASARIMKODLAMA</h1>

  <script>

    let sayi1 = 42;      // Tam sayı
    let sayi2 = 3.14;    // Ondalık sayı

    console.log(sayi1);   // 42
    console.log(sayi2);   // 3.14

  </script>
</body>
</html>

<!DOCTYPE html>

<head>

<title>Harici JavaScript</title>

</head>

<body>

<h1>TASARIMKODLAMA</h1>

let sayi1 = 42; // Tam sayı

let sayi2 = 3.14; // Ondalık sayı

console.log(sayi1); // 42

console.log(sayi2); // 3.14

</script>

</body>

</html>

2. Metin (String)

String (metin) veri türü, kelimeler veya harfler gibi karakter dizilerini tutar.

Örnek:


<!DOCTYPE html>
<html lang="tr">
  <head>
    <meta charset="UTF-8" />
    <title>Harici JavaScript</title>
  </head>
  <body>
    <h1>TASARIMKODLAMA</h1>

    <script>
      let isim = "Ahmet";
      let mesaj = "Merhaba, nasılsın?";

      console.log(isim); // Ahmet
      console.log(mesaj); // Merhaba, nasılsın?
    </script>
  </body>
</html>

<!DOCTYPE html>

<head>

<title>Harici JavaScript</title>

</head>

<body>

<h1>TASARIMKODLAMA</h1>

let isim = "Ahmet";

let mesaj = "Merhaba, nasılsın?";

console.log(isim); // Ahmet

console.log(mesaj); // Merhaba, nasılsın?

</script>

</body>

</html>

Not: Metinler her zaman tek tırnak (”) veya çift tırnak (“”) arasında yazılır.

3. Mantıksal Değer (Boolean)

Boolean veri türü, doğru veya yanlış (true/false) değerlerini tutar. Genellikle koşul ifadelerinde kullanılır.

Örnek:


<!DOCTYPE html>
<html lang="tr">
  <head>
    <meta charset="UTF-8" />
    <title>Harici JavaScript</title>
  </head>
  <body>
    <h1>TASARIMKODLAMA</h1>

    <script>
      let dogruMu = true;
      let yanlisMi = false;

      console.log(dogruMu); // true
      console.log(yanlisMi); // false
    </script>
  </body>
</html>

<!DOCTYPE html>

<head>

<title>Harici JavaScript</title>

</head>

<body>

<h1>TASARIMKODLAMA</h1>

let dogruMu = true;

let yanlisMi = false;

console.log(dogruMu); // true

console.log(yanlisMi); // false

</script>

</body>

</html>

📍 Object Yapısı (Nesne Tanımlama)

JavaScript’teki object (nesne), anahtar-değer (key-value) çiftlerini tutan bir veri yapısıdır. Genellikle bir nesnenin özelliklerini saklamak ve düzenlemek için kullanılır. Eklentilerde de genellikle object yapısı kullanılır.

Object Tanımlama

Bir nesne, {} süslü parantezler içinde tanımlanır. Her özellik, anahtar-değer çifti olarak belirtilir.

Örnek:


<!DOCTYPE html>
<html lang="tr">
  <head>
    <meta charset="UTF-8" />
    <title>Harici JavaScript</title>
  </head>
  <body>
    <h1>TASARIMKODLAMA</h1>

    <script>
      const kisi = {
        ad: "Ali",
        yas: 28,
        sehir: "İstanbul",
      };

      console.log(kisi); // { ad: "Ali", yas: 28, sehir: "İstanbul" }
    </script>
  </body>
</html>

<!DOCTYPE html>

<head>

<title>Harici JavaScript</title>

</head>

<body>

<h1>TASARIMKODLAMA</h1>

const kisi = {

ad: "Ali",

yas: 28,

sehir: "İstanbul",

};

console.log(kisi); // { ad: "Ali", yas: 28, sehir: "İstanbul" }

</script>

</body>

</html>

Nesneden Özelliklere Erişim

Bir nesneye erişmek için nokta (.) ya da köşeli parantez ([]) kullanılabilir.

Örnek:


<!DOCTYPE html>
<html lang="tr">
  <head>
    <meta charset="UTF-8" />
    <title>Harici JavaScript</title>
  </head>
  <body>
    <h1>TASARIMKODLAMA</h1>

    <script>
      console.log(kisi.ad); // Ali
      console.log(kisi["yas"]); // 28
    </script>
  </body>
</html>

<!DOCTYPE html>

<head>

<title>Harici JavaScript</title>

</head>

<body>

<h1>TASARIMKODLAMA</h1>

console.log(kisi.ad); // Ali

console.log(kisi["yas"]); // 28

</script>

</body>

</html>

Nesneye Yeni Özellik Ekleme

Bir nesneye yeni özellik eklemek için:


<!DOCTYPE html>
<html lang="tr">
  <head>
    <meta charset="UTF-8" />
    <title>Harici JavaScript</title>
  </head>
  <body>
    <h1>TASARIMKODLAMA</h1>

    <script>
      const kisi = {
        ad: "Ali",
        yas: 28,
        sehir: "İstanbul",
      };

      kisi.meslek = "Yazılımcı"; // yeni özellik ekleme
      console.log(kisi); // { ad: "Ali", yas: 28, sehir: "İstanbul", meslek: "Yazılımcı" }
    </script>
  </body>
</html>

<!DOCTYPE html>

<head>

<title>Harici JavaScript</title>

</head>

<body>

<h1>TASARIMKODLAMA</h1>

const kisi = {

ad: "Ali",

yas: 28,

sehir: "İstanbul",

};

kisi.meslek = "Yazılımcı"; // yeni özellik ekleme

console.log(kisi); // { ad: "Ali", yas: 28, sehir: "İstanbul", meslek: "Yazılımcı" }

</script>

</body>

</html>

📍 Eklenti Verisi İçin Object Kullanımı

Eklentilerde genellikle yapılandırma (configuration) nesneleri kullanılır. Örneğin, bir slider eklentisi için ayarları tutan bir nesne:

Örnek:


const sliderAyarlar = {
  otomatikBaslat: true,
  gecisSuresi: 3000,
  gosterge: false
};

console.log(sliderAyarlar);  // { otomatikBaslat: true, gecisSuresi: 3000, gosterge: false }

const sliderAyarlar = {

otomatikBaslat: true,

gecisSuresi: 3000,

gosterge: false

};

console.log(sliderAyarlar); // { otomatikBaslat: true, gecisSuresi: 3000, gosterge: false }

Bu tür nesneler, eklentiye hangi ayarlarla çalışması gerektiğini belirtmek için kullanılır.

Özet

Number: Sayılar (tam sayı ve ondalıklı)
String: Metin (karakter dizisi)
Boolean: Mantıksal değerler (true/false)
Object: Anahtar-değer çiftleri ile veri yapısı (özellikleri gruplamak için kullanılır)

HTML Nesne Seçici – `querySelector` ve `querySelectorAll`

HTML elemanlarına JavaScript ile erişmek için kullanılır. Bu yöntemler, CSS seçicilerini kullanarak DOM (Document Object Model) içindeki öğeleri seçmeyi sağlar.

📍 `querySelector`

querySelector, ilk bulunan öğeyi seçer. CSS seçicileri ile çalışır, yani herhangi bir CSS seçicisi yazılabilir.

Kullanımı:


<!DOCTYPE html>
<html lang="tr">
  <head>
    <meta charset="UTF-8" />
    <title>Harici JavaScript</title>
  </head>
  <body>


    <div class="box">Birinci kutu</div>
    <div class="box">İkinci kutu</div>
    
    <script>
      let kutu = document.querySelector('.box');
      console.log(kutu);  // Birinci kutu
    </script>

  </body>
</html>

<!DOCTYPE html>

<head>

<title>Harici JavaScript</title>

</head>

<body>

<div class="box">Birinci kutu</div>

<div class="box">İkinci kutu</div>

let kutu = document.querySelector('.box');

console.log(kutu); // Birinci kutu

</script>

</body>

</html>

Not: Eğer birden fazla öğe varsa, sadece ilk bulunan öğe döndürülür.

📍 `querySelectorAll`

querySelectorAll, verilen CSS seçicisine uyan tüm öğeleri seçer. Sonuç bir NodeList döndürür, bu da bir dizi gibi davranır.

Kullanımı:


<!DOCTYPE html>
<html lang="tr">
  <head>
    <meta charset="UTF-8" />
    <title>Harici JavaScript</title>
  </head>
  <body>

    <div class="box">Birinci kutu</div>
    <div class="box">İkinci kutu</div>
    <div class="box">Üçüncü kutu</div>
    
    <script>
      let kutular = document.querySelectorAll('.box');
      
      //ileride forEach öğreneceksiniz. Liste üzerinde dönmek için kullanıyoruz.
      kutular.forEach(function(kutu) {
        console.log(kutu);
      });
      // Birinci kutu
      // İkinci kutu
      // Üçüncü kutu
    </script>
    

  </body>
</html>

<!DOCTYPE html>

<head>

<title>Harici JavaScript</title>

</head>

<body>

<div class="box">Birinci kutu</div>

<div class="box">İkinci kutu</div>

<div class="box">Üçüncü kutu</div>

let kutular = document.querySelectorAll('.box');

//ileride forEach öğreneceksiniz. Liste üzerinde dönmek için kullanıyoruz.

kutular.forEach(function(kutu) {

console.log(kutu);

});

// Birinci kutu

// İkinci kutu

// Üçüncü kutu

</script>

</body>

</html>

Açıklama:

console.log(kutu): Bu komut, her bir kutu öğesinin kendisini konsola yazdırır. Bu şekilde, öğenin tüm özelliklerini ve içeriğini görebiliriz.

HTML Yapısı:

Üç tane <div> öğesi var, her biri .box sınıfına sahip.

Bu div’ler sırasıyla Birinci kutu, İkinci kutu, ve Üçüncü kutu yazıları içeriyor.

JavaScript:

document.querySelectorAll('.box'): Bu kod, tüm .box sınıfına sahip öğeleri seçer ve bunları NodeList türünde bir koleksiyon olarak döndürür. Bu koleksiyon, kutular değişkenine atanır.

kutular.forEach(function(kutu) {...}): Bu satırda, NodeList üzerinde forEach döngüsü ile dönüyoruz. forEach, her bir kutu üzerinde işlem yapmamızı sağlar.

Süper! Şimdi sırada:

🎯 Olay (Event) Kullanımı

JavaScript ile HTML öğelerine etkileşim kazandırmak için olaylar (events) kullanılır. Kullanıcı bir butona tıkladığında, bir input alanına yazı yazdığında veya başka bir etkileşimde bulunduğunda, JavaScript buna tepki verebilir.

Bu bölümde olay kullanımını .onclick, .oninput gibi temel yöntemlerle sade bir şekilde göreceğiz.

📌 `.onclick` – Tıklama Olayı

Bir buton tıklandığında bir işlem yapmak için .onclick özelliğini kullanabiliriz.


<!DOCTYPE html>
<html lang="tr">
  <head>
    <meta charset="UTF-8" />
    <title>Harici JavaScript</title>
  </head>
  <body>

    <button id="buton1">Tıkla</button>

    <script>
      let buton = document.querySelector('#buton1');
    
      buton.onclick = function() {
        alert("Butona tıklandı!");
      };
    </script>
    
  </body>
</html>

<!DOCTYPE html>

<head>

<title>Harici JavaScript</title>

</head>

<body>

<button id="buton1">Tıkla</button>

let buton = document.querySelector('#buton1');

buton.onclick = function() {

alert("Butona tıklandı!");

};

</script>

</body>

</html>

Bu örnekte:

document.querySelector('#buton'): buton öğesini seçer.
.onclick: bu öğeye tıklanınca çalışacak kodu tanımlar.

📌 `.oninput` – Yazı Girişi Olayı

Kullanıcı bir input alanına yazı yazarken anlık olarak değerini alabiliriz.


<!DOCTYPE html>
<html lang="tr">
  <head>
    <meta charset="UTF-8" />
    <title>Harici JavaScript</title>
  </head>
  <body>

    <input id="isim" type="text" placeholder="Adınızı yazın" />

    <script>
      let input = document.querySelector('#isim');
    
      input.oninput = function() {
        console.log("Yazılan: " + input.value);
      };
    </script>
    
    
  </body>
</html>

<!DOCTYPE html>

<head>

<title>Harici JavaScript</title>

</head>

<body>

let input = document.querySelector('#isim');

input.oninput = function() {

console.log("Yazılan: " + input.value);

};

</script>

</body>

</html>

Burada kullanıcı her harf yazdığında console.log ile değer güncellenir.

📌 `event` Objesi Kullanımı

Olay fonksiyonları otomatik olarak bir event objesi alır. Bu obje, olay hakkında bilgiler içerir.


<!DOCTYPE html>
<html lang="tr">
  <head>
    <meta charset="UTF-8" />
    <title>Harici JavaScript</title>
  </head>
  <body>

    <input id="email" type="email" placeholder="E-posta adresiniz" />

    <script>
      let input = document.querySelector('#email');
    
      input.oninput = function(event) {
        console.log("Girilen e-posta: " + event.target.value);
      };
    </script>
    
    
  </body>
</html>

<!DOCTYPE html>

<head>

<title>Harici JavaScript</title>

</head>

<body>

let input = document.querySelector('#email');

input.oninput = function(event) {

console.log("Girilen e-posta: " + event.target.value);

};

</script>

</body>

</html>

Açıklama:

event: JavaScript’in otomatik olarak verdiği olay nesnesidir.
event.target: olayın gerçekleştiği öğeyi gösterir.
event.target.value: özellikle input alanlarında, girilen değeri verir.

🧪 Küçük Bir Uygulama


<!DOCTYPE html>
<html lang="tr">
  <head>
    <meta charset="UTF-8" />
    <title>Harici JavaScript</title>
  </head>
  <body>

    <input id="ad" type="text" placeholder="Adınızı yazın" />
    <button id="goster">Göster</button>
    
    <script>
      let adInput = document.querySelector('#ad');
      let gosterBtn = document.querySelector('#goster');
    
      gosterBtn.onclick = function() {
        console.log("Girilen ad: " + adInput.value);
      };
    </script>
    
    
    
  </body>
</html>

<!DOCTYPE html>

<head>

<title>Harici JavaScript</title>

</head>

<body>

<button id="goster">Göster</button>

let adInput = document.querySelector('#ad');

let gosterBtn = document.querySelector('#goster');

gosterBtn.onclick = function() {

console.log("Girilen ad: " + adInput.value);

};

</script>

</body>

</html>

Butona tıklandığında input alanındaki değer konsola yazdırılır.

✅ Özet

Özellik	Açıklama
`.onclick`	Öğeye tıklanınca çalışacak kodu tanımlar
`.oninput`	Input’a yazıldıkça çalışır
`event.target`	Olayın gerçekleştiği öğeyi verir
`event.target.value`	Input gibi öğelerde girilen değeri verir

📁 Olay Türleri (Gruplar Halinde)

✅ Fare Olayları (Mouse Events)

click
dblclick
mousedown
mouseup
mousemove
mouseenter
mouseleave

⌨️ Klavye Olayları (Keyboard Events)

keydown
keyup
keypress (artık çok tercih edilmez)

🖊️ Form Olayları

input
change
submit
focus
blur

📄 Belge ve Yükleme Olayları

load
DOMContentLoaded
unload
resize
scroll

📱 Dokunmatik Olaylar (Mobil)

touchstart
touchmove
touchend

💻 Pencere ve Tarayıcı Olayları

resize
hashchange
popstate
beforeunload

Bunların dışında çok daha fazla olay için buraya tıklayın.

🧰 Nesne İnceleme ve Debug

Daha önce console.log() ve console.dir() komutlarına kısa kısa değindik. Bu bölümde ise JavaScript’te hata ayıklama (debug) ve nesne inceleme konularına biraz daha detaylı şekilde odaklanacağız.

🖨️ `console.log()` – Değeri Yazdırma

console.log(), JavaScript’te en çok kullanılan fonksiyonlardan biridir. Bir değişkenin, ifadenin veya nesnenin değerini konsola yazdırmak için kullanılır.


<!DOCTYPE html>
<html lang="tr">
  <head>
    <meta charset="UTF-8" />
    <title>Harici JavaScript</title>
  </head>
  <body>

    
    <script>

    let isim = "Ahmet";
    console.log(isim); // Ahmet

    </script>

  </body>
</html>

<!DOCTYPE html>

<head>

<title>Harici JavaScript</title>

</head>

<body>

let isim = "Ahmet";

console.log(isim); // Ahmet

</script>

</body>

</html>

Bu sayede kodun nasıl çalıştığını takip edebilir, değerlerin doğru olup olmadığını kontrol edebiliriz.

HTML öğelerini yazdırırken genelde şöyle görünür:


<!DOCTYPE html>
<html lang="tr">
  <head>
    <meta charset="UTF-8" />
    <title>Harici JavaScript</title>
  </head>
  <body>


    <div class="box">Birinci kutu</div>
    <div class="box">İkinci kutu</div>
    
    <script>
        
      let kutu = document.querySelector('.box');
      console.log(kutu);  // Birinci kutu

    </script>

  </body>
</html>

<!DOCTYPE html>

<head>

<title>Harici JavaScript</title>

</head>

<body>

<div class="box">Birinci kutu</div>

<div class="box">İkinci kutu</div>

let kutu = document.querySelector('.box');

console.log(kutu); // Birinci kutu

</script>

</body>

</html>

Konsolda öğe <div class="box">...</div> şeklinde görünür.

🧩 `console.dir()` – HTML Öğelerini Nesne Gibi İncelemek

console.dir() komutu, özellikle HTML DOM öğeleri üzerinde kullanıldığında çok daha detaylı bilgi verir. HTML öğesinin tüm özellikleri (properties) ve metotları (functions) bir nesne yapısında gösterilir.

Bu komut, kutu öğesinin iç yapısını, neler yapabileceğimizi, hangi özellikleri olduğunu görmek için kullanılır.

🆚 Farkı Nedir?

Komut	Ne Yapar?
`console.log()`	Öğeyi olduğu gibi yazdırır (HTML olarak)
`console.dir()`	Öğeyi nesne gibi gösterir, detaylı yapısını sunar

🔍 Neden Önemli?

JavaScript’te çalışırken sıkça hatalarla veya beklenmeyen durumlarla karşılaşabiliriz. Bu durumlarda konsola veri yazdırarak:

Kodun çalışıp çalışmadığını,
Değişkenlerin değerini,
HTML öğelerinin seçilip seçilmediğini,
Bir nesnenin hangi özelliklere sahip olduğunu

görmemiz çok kolaylaşır.

🎯 Örnek: Liste İçindeki Öğeleri İnceleme


<!DOCTYPE html>
<html lang="tr">
  <head>
    <meta charset="UTF-8" />
    <title>Harici JavaScript</title>
  </head>
  <body>

    <div class="kutu">Birinci</div>
    <div class="kutu">İkinci</div>
    <div class="kutu">Üçüncü</div>
    
    <script>
      let kutular = document.querySelectorAll('.kutu');
    
      kutular.forEach(function(kutu) {
        console.log(kutu);     // HTML öğesi olarak yazdırır
        console.dir(kutu);     // Öğenin iç özelliklerini gösterir
      });
    </script>
    
  </body>
</html>

<!DOCTYPE html>

<head>

<title>Harici JavaScript</title>

</head>

<body>

<div class="kutu">Birinci</div>

<div class="kutu">İkinci</div>

<div class="kutu">Üçüncü</div>

let kutular = document.querySelectorAll('.kutu');

kutular.forEach(function(kutu) {

console.log(kutu); // HTML öğesi olarak yazdırır

console.dir(kutu); // Öğenin iç özelliklerini gösterir

});

</script>

</body>

</html>

🧠 İpucu:

Tarayıcı konsolunda console.log() ile yazdırılan öğelere tıklayarak da iç yapısını görebilirsiniz. Ancak console.dir() kullanmak, özellikle DOM öğeleri ile çalışırken daha anlaşılır bir yapı sunar.

✅ Özet

Komut	Kullanım Amacı
`console.log()`	Değeri veya öğeyi olduğu gibi gösterir
`console.dir()`	Nesne veya DOM öğesinin yapısını gösterir
Kullanım Alanı	Değer kontrolü, debug, öğe inceleme

🔀 Koşullu Yapılar (if / else)

JavaScript’te bir durumun doğru (true) veya yanlış (false) olmasına göre farklı işlemler yapmak için if / else yapısı kullanılır.

📌 Yapısı


if (koşul) {
  // koşul doğruysa yapılacaklar
} else {
  // koşul yanlışsa yapılacaklar
}

if (koşul) {

// koşul doğruysa yapılacaklar

} else {

// koşul yanlışsa yapılacaklar

}

🎯 Uygulamalı Örnek

Kullanıcı bir input alanını boş bırakırsa, uyarı verelim. Aksi halde yazdığı metni konsola yazdıralım.


<!DOCTYPE html>
<html lang="tr">
<head>
  <meta charset="UTF-8">
  <title>Koşullu Yapı Örneği</title>
</head>
<body>

  <input id="kullaniciAdi" type="text" placeholder="Adınızı yazın" />
  <button id="kontrolEt">Kontrol Et</button>

  <script>
    let input = document.querySelector('#kullaniciAdi');
    let buton = document.querySelector('#kontrolEt');

    buton.onclick = function() {
      let deger = input.value;

      if (deger === "") {
        alert("Lütfen adınızı yazın!");
      } else {
        console.log("Girdiğiniz ad: " + deger);
      }
    };
  </script>

</body>
</html>

<!DOCTYPE html>

<head>

<title>Koşullu Yapı Örneği</title>

</head>

<body>

<button id="kontrolEt">Kontrol Et</button>

let input = document.querySelector('#kullaniciAdi');

let buton = document.querySelector('#kontrolEt');

buton.onclick = function() {

let deger = input.value;

if (deger === "") {

alert("Lütfen adınızı yazın!");

} else {

console.log("Girdiğiniz ad: " + deger);

}

};

</script>

</body>

</html>

📝 Açıklama:

input.value: input alanındaki değeri alır.
if (deger === ""): input boşsa alert() ile uyarı verir.
else: input doluysa değeri konsola yazar.

✅ Özet

Yapı	Açıklama
`if`	Koşul doğruysa çalışır
`else`	Koşul yanlışsa çalışır
`=== ""`	Değerin boş olup olmadığını kontrol eder

🔁 Döngü Yapıları (for, forEach)

JavaScript’te birden fazla öğeyle çalışırken döngüler çok kullanılır. Özellikle querySelectorAll() gibi çoklu öğe seçimlerinde her öğe üzerinde ayrı ayrı işlem yapmak için döngüler devreye girer.

📌 1. `for` Döngüsü

En klasik döngü yapısıdır. Kaç kez döneceğini manuel olarak ayarlarsınız.

📌 2. `forEach()` Metodu

Bir liste (dizi gibi) üzerinde otomatik olarak döner. NodeList gibi yapılarla kullanılabilir — querySelectorAll() bu türdedir.

🎯 Uygulamalı Örnek

Birden fazla .kutu sınıfına sahip div öğesi düşünelim. Her birini konsola yazdıralım.


<!DOCTYPE html>
<html lang="tr">
<head>
  <meta charset="UTF-8">
  <title>Döngü Yapıları Örneği</title>
</head>
<body>

  <div class="kutu">1. Kutu</div>
  <div class="kutu">2. Kutu</div>
  <div class="kutu">3. Kutu</div>

  <script>
    // Çoklu öğeleri seçiyoruz
    let kutular = document.querySelectorAll('.kutu');

    // --- for döngüsü ile ---
    for (let i = 0; i < kutular.length; i++) {
      console.log("for:", kutular[i].textContent);
    }

    // --- forEach ile ---
    kutular.forEach(function(kutu) {
      console.log("forEach:", kutu.textContent);
    });
  </script>

</body>
</html>

<!DOCTYPE html>

<head>

<title>Döngü Yapıları Örneği</title>

</head>

<body>

// Çoklu öğeleri seçiyoruz

let kutular = document.querySelectorAll('.kutu');

// --- for döngüsü ile ---

for (let i = 0; i < kutular.length; i++) {

console.log("for:", kutular[i].textContent);

}

// --- forEach ile ---

kutular.forEach(function(kutu) {

console.log("forEach:", kutu.textContent);

});

</script>

</body>

</html>

📝 Açıklamalar:

✅ `for` döngüsü


for (let i = 0; i < kutular.length; i++) {
  console.log(kutular[i]);
}

for (let i = 0; i < kutular.length; i++) {

console.log(kutular[i]);

}

i sayacıyla çalışır.
Elemanlara sırayla erişir.

✅ `forEach` yöntemi


kutular.forEach(function(kutu) {
  console.log(kutu);
});

kutular.forEach(function(kutu) {

console.log(kutu);

});

Daha sade yazılır.
kutular bir liste gibi işlem görür.

⛳ Ne Zaman Hangisi?

Yapı	Ne zaman kullanılır?
`for`	Daha fazla kontrol gerektiğinde (index vs.)
`forEach`	Liste içinde sırayla işlem yaparken, daha okunaklıdır

🧾 JSON Yapısına Giriş

📌 JSON Nedir?

JSON (JavaScript Object Notation), verileri saklamak ve taşımak için kullanılan hafif ve okunabilir bir veri formatıdır.

JavaScript’teki object yapısına çok benzer, ama aslında dil bağımsız bir metin formatıdır. Birçok API, verileri JSON formatında gönderir.

📋 Örnek JSON Verisi


{
  "ad": "Ahmet",
  "yas": 25,
  "ogrenci": true
}

{

"ad": "Ahmet",

"yas": 25,

"ogrenci": true

}

Bu veri bir kullanıcıyı tanımlar: adı “Ahmet”, yaşı 25, öğrenci mi: evet.

🔄 JSON.parse()

Bir JSON metnini JavaScript nesnesine (object’e) çevirir.


let jsonVeri = '{"ad": "Ahmet", "yas": 25}';
let nesne = JSON.parse(jsonVeri);

console.log(nesne.ad); // "Ahmet"

let jsonVeri = '{"ad": "Ahmet", "yas": 25}';

let nesne = JSON.parse(jsonVeri);

console.log(nesne.ad); // "Ahmet"

❗ JSON verisi çift tırnak (” “) ile yazılır. Tek tırnak (‘ ‘) geçersizdir.

🔄 JSON.stringify()

Bir JavaScript nesnesini JSON metnine çevirir.


let kullanici = { ad: "Ayşe", yas: 30 };
let json = JSON.stringify(kullanici);

console.log(json); // {"ad":"Ayşe","yas":30}

let kullanici = { ad: "Ayşe", yas: 30 };

let json = JSON.stringify(kullanici);

console.log(json); // {"ad":"Ayşe","yas":30}

📎 Nerede Kullanılır?

API’den gelen veriler genelde JSON olur
Tarayıcıda localStorage gibi yerlerde veri saklamak için
Verileri sunucuya göndermeden önce metne çevirmek için

✅ Özet

Yöntem	Açıklama
`JSON.parse()`	JSON metnini nesneye çevirir
`JSON.stringify()`	Nesneyi JSON metnine çevirir

🔌 CDN ve GitHub Üzerinden Eklenti Kullanımı

JavaScript projelerinde bazen her şeyi sıfırdan yazmak yerine, başkalarının yazdığı hazır eklentileri (kütüphaneleri) kullanmak işimizi kolaylaştırır. Bu eklentilere kolayca ulaşmak için iki yaygın yöntem vardır:

📡 1. CDN (Content Delivery Network) Üzerinden

CDN, bir dosyanın başka bir sunucudan yüklenmesini sağlar. Tarayıcı internet üzerinden bu dosyayı indirir.

✅ Kullanımı:

CDN bağlantısı <script> etiketiyle HTML dosyasına eklenir.

🔧 Örnek:


<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>

Bu örnekte axios adındaki popüler bir kütüphane sayfaya dahil edilir. Artık JavaScript kodumuzda doğrudan kullanılabilir.

📁 2. GitHub Üzerinden Dosya İndirip Kullanmak

Bir eklentiyi GitHub üzerinden indirip, kendi projemize dahil edebiliriz. Böylece internet bağlantısı olmadan da çalışabilir.

✅ Adımlar:

GitHub sayfasına girip .js dosyasını indir
Projene bu dosyayı ekle (örneğin: libs/eklenti.js)
HTML dosyana <script> etiketiyle dahil et:


<script src="libs/eklenti.js"></script>

❗ Nelere Dikkat Etmeli?

Yöntem	Avantajı	Dezavantajı
CDN	Hızlı, uğraşmadan çalışır	İnternet gerekebilir
İndirme	İnternetsiz çalışabilir	Dosya güncelliği takip edilmeli

✅ Örnek: Basit Sayfa + CDN


<!DOCTYPE html>
<html lang="tr">
<head>
  <meta charset="UTF-8">
  <title>CDN Örneği</title>
  <!-- axios kütüphanesi CDN üzerinden eklendi -->
  <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
</head>
<body>

  <script>
    // axios artık kullanılabilir
    console.log("Axios mevcut mu?", typeof axios !== "undefined");
  </script>

</body>
</html>

<!DOCTYPE html>

<head>

<title>CDN Örneği</title>

</head>

<body>

// axios artık kullanılabilir

console.log("Axios mevcut mu?", typeof axios !== "undefined");

</script>

</body>

</html>

💡 Lightbox2 Eklentisi ile Görsel Galeri Oluşturma

Lightbox2, birden fazla resmi şık bir şekilde büyüterek göstermek için kullanılan basit ve kullanışlı bir eklentidir. Resim galerileri gibi projelerde çok sık tercih edilir.

🔧 1. Eklentiyi Dahil Etmek (CDN Yöntemi)

Lightbox2’yi kullanabilmek için gerekli olan CSS ve JavaScript dosyalarını sayfamıza eklememiz gerekiyor.


<!-- Lightbox2 CSS -->
<link href="https://cdn.jsdelivr.net/npm/lightbox2@2/dist/css/lightbox.min.css" rel="stylesheet" />

<!-- Lightbox2 JS -->
<script src="https://cdn.jsdelivr.net/npm/lightbox2@2/dist/js/lightbox.min.js"></script>

Bu dosyaları <head> veya <body> içinde uygun şekilde yerleştirebilirsin.

🖼️ 2. HTML Yapısını Hazırlamak

Lightbox, a etiketi içindeki img öğeleriyle çalışır. a etiketine data-lightbox özelliği eklenmelidir.


<a href="resim1.jpg" data-lightbox="galeri">
  <img src="resim1-kucuk.jpg" alt="Resim 1" />
</a>

<a href="resim2.jpg" data-lightbox="galeri">
  <img src="resim2-kucuk.jpg" alt="Resim 2" />
</a>

</a>

</a>

Aynı data-lightbox değerine sahip olanlar aynı galeri grubuna ait olur.

🔄 3. Tam Örnek Sayfa


<!DOCTYPE html>
<html lang="tr">
<head>
  <meta charset="UTF-8">
  <title>Lightbox2 Galeri Örneği</title>

  <!-- Lightbox2 CDN dosyaları -->
  <link href="https://cdn.jsdelivr.net/npm/lightbox2@2/dist/css/lightbox.min.css" rel="stylesheet" />
  <script src="https://cdn.jsdelivr.net/npm/lightbox2@2/dist/js/lightbox.min.js"></script>
</head>
<body>

  <h2>Görsel Galeri</h2>

  <a href="https://picsum.photos/800/600?1" data-lightbox="galeri">
    <img src="https://picsum.photos/150/100?1" alt="Resim 1" />
  </a>

  <a href="https://picsum.photos/800/600?2" data-lightbox="galeri">
    <img src="https://picsum.photos/150/100?2" alt="Resim 2" />
  </a>

  <a href="https://picsum.photos/800/600?3" data-lightbox="galeri">
    <img src="https://picsum.photos/150/100?3" alt="Resim 3" />
  </a>

</body>
</html>

<!DOCTYPE html>

<head>

<title>Lightbox2 Galeri Örneği</title>

</head>

<body>

<h2>Görsel Galeri</h2>

</a>

</a>

</a>

</body>

</html>

✅ Sonuç

Kullanıcı küçük resme tıklayınca büyük hali açılır.
Sağ/sol oklarla diğer görsellere geçiş yapılabilir.
Ekstra JavaScript yazmadan sade kullanıma sahiptir.

🎛️ Bootstrap Eklentileri ile JavaScript Kullanımı

Bootstrap, sadece stillendirme (butonlar, renkler) değil, aynı zamanda bazı etkileşimli özellikleri de sağlar. Bunları JavaScript ile kontrol edebiliriz.

⚙️ Gerekli Dosyalar

İlk olarak Bootstrap’i sayfamıza eklemeliyiz.


<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">

<!-- Bootstrap JS (Popper dahil) -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>

🧪 Örnek 1: Butona Tıklayınca Bootstrap Alert Mesajı Gösterme

🎯 Amaç:

Butona tıklanınca ekranda bir Bootstrap alert mesajı gösterilsin.


<!DOCTYPE html>
<html lang="tr">
<head>
  <meta charset="UTF-8">
  <title>Bootstrap Alert Örneği</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body class="p-4">

  <button id="gosterBtn" class="btn btn-primary">Mesaj Göster</button>

  <div id="uyari" class="alert alert-success mt-3 d-none" role="alert">
    İşlem başarıyla gerçekleşti!
  </div>

  <script>
    let btn = document.getElementById("gosterBtn");
    let uyari = document.getElementById("uyari");

    btn.onclick = function() {
      uyari.classList.remove("d-none"); // Gizliliği kaldır, göster
    };
  </script>

</body>
</html>

<!DOCTYPE html>

<head>

<title>Bootstrap Alert Örneği</title>

</head>

<button id="gosterBtn" class="btn btn-primary">Mesaj Göster</button>

İşlem başarıyla gerçekleşti!

</div>

let btn = document.getElementById("gosterBtn");

let uyari = document.getElementById("uyari");

btn.onclick = function() {

uyari.classList.remove("d-none"); // Gizliliği kaldır, göster

};

</script>

</body>

</html>

✅ Açıklama:

d-none: Bootstrap sınıfı, öğeyi gizler.
classList.remove("d-none"): öğeyi görünür yapar.
Basit ama etkili!

🧪 Örnek 2: Bootstrap Modal Penceresini JavaScript ile Açma

🎯 Amaç:

Butona tıklanınca Bootstrap modal penceresi JavaScript ile açılsın.


<!DOCTYPE html>
<html lang="tr">
<head>
  <meta charset="UTF-8">
  <title>Bootstrap Modal Örneği</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body class="p-4">

  <button id="modalAcBtn" class="btn btn-success">Pencereyi Aç</button>

  <!-- Modal yapısı -->
  <div class="modal fade" id="ornekModal" tabindex="-1" aria-labelledby="modalBaslik" aria-hidden="true">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title" id="modalBaslik">Bilgilendirme</h5>
          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Kapat"></button>
        </div>
        <div class="modal-body">
          Bu pencere JavaScript ile açıldı!
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Kapat</button>
        </div>
      </div>
    </div>
  </div>

  <script>
    let modalButon = document.getElementById("modalAcBtn");
    let modalEl = document.getElementById("ornekModal");

    // Bootstrap modal nesnesi oluşturuluyor
    let modal = new bootstrap.Modal(modalEl);

    modalButon.onclick = function() {
      modal.show(); // Modalı göster
    };
  </script>

</body>
</html>

<!DOCTYPE html>

<head>

<title>Bootstrap Modal Örneği</title>

</head>

<button id="modalAcBtn" class="btn btn-success">Pencereyi Aç</button>

<h5 class="modal-title" id="modalBaslik">Bilgilendirme</h5>

</div>

Bu pencere JavaScript ile açıldı!

</div>

<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Kapat</button>

</div>

let modalButon = document.getElementById("modalAcBtn");

let modalEl = document.getElementById("ornekModal");

// Bootstrap modal nesnesi oluşturuluyor

let modal = new bootstrap.Modal(modalEl);

modalButon.onclick = function() {

modal.show(); // Modalı göster

};

</script>

</body>

</html>

🔍 Öğrenciler İçin Basit Özet

Özellik	Anlamı
`d-none`	Bootstrap ile gizlemek için kullanılır
`alert`	Renkli bilgi kutuları
`modal`	Açılır pencere (pop-up)
`new bootstrap.Modal(...)`	JavaScript ile modal oluşturma
`.show()`	Modalı ekranda açar

📝 Form İşlemleri: Bootstrap ve JavaScript ile Kullanıcı Girdisi Alma

Bu bölümde bir form üzerinden kullanıcıdan veri alıp, bu veriyi JavaScript ile işleyeceğiz. Form şık ve düzenli olacak çünkü Bootstrap kullanacağız. Girdi kontrolü gibi işlemleri de JavaScript ile yapacağız.

🎯 Amaç:

Bootstrap ile sade bir form tasarımı yapmak
JavaScript ile veriyi kontrol etmek
Kullanıcıya uyarı veya başarı mesajı göstermek

🧪 Örnek: Ad Soyad Formu + Girdi Kontrolü


<!DOCTYPE html>
<html lang="tr">
<head>
  <meta charset="UTF-8">
  <title>Form Girişi Kontrol</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body class="p-4">

  <h3>Ad Soyad Formu</h3>

  <form id="kisiFormu" class="mb-3">
    <div class="mb-3">
      <label for="adSoyad" class="form-label">Ad Soyad</label>
      <input type="text" class="form-control" id="adSoyad" placeholder="Adınızı ve soyadınızı girin">
    </div>
    <button type="submit" class="btn btn-primary">Gönder</button>
  </form>

  <!-- Mesaj alanı -->
  <div id="mesaj" class="alert d-none" role="alert"></div>

  <script>
    let form = document.getElementById("kisiFormu");
    let input = document.getElementById("adSoyad");
    let mesajKutusu = document.getElementById("mesaj");

    form.onsubmit = function(e) {
      e.preventDefault(); // Formun sayfayı yenilemesini engeller

      let deger = input.value.trim();

      if (deger === "") {
        // Uyarı mesajı göster
        mesajKutusu.textContent = "Lütfen ad soyad alanını doldurun.";
        mesajKutusu.className = "alert alert-danger";
      } else {
        // Başarılı mesajı göster
        mesajKutusu.textContent = "Bilgiler alındı: " + deger;
        mesajKutusu.className = "alert alert-success";
        input.value = ""; // Giriş kutusunu temizle
      }

      mesajKutusu.classList.remove("d-none");
    };
  </script>

</body>
</html>

<!DOCTYPE html>

<head>

<title>Form Girişi Kontrol</title>

</head>

<h3>Ad Soyad Formu</h3>

<label for="adSoyad" class="form-label">Ad Soyad</label>

</div>

<button type="submit" class="btn btn-primary">Gönder</button>

</form>

let form = document.getElementById("kisiFormu");

let input = document.getElementById("adSoyad");

let mesajKutusu = document.getElementById("mesaj");

form.onsubmit = function(e) {

e.preventDefault(); // Formun sayfayı yenilemesini engeller

let deger = input.value.trim();

if (deger === "") {

// Uyarı mesajı göster

mesajKutusu.textContent = "Lütfen ad soyad alanını doldurun.";

mesajKutusu.className = "alert alert-danger";

} else {

// Başarılı mesajı göster

mesajKutusu.textContent = "Bilgiler alındı: " + deger;

mesajKutusu.className = "alert alert-success";

input.value = ""; // Giriş kutusunu temizle

}

mesajKutusu.classList.remove("d-none");

};

</script>

</body>

</html>

🧠 Açıklama

form.onsubmit = function(e) { ... } → form gönderildiğinde çalışacak kod.
e.preventDefault() → sayfanın yenilenmesini engeller.
trim() → girilen verinin başındaki ve sonundaki boşlukları siler.
alert alert-success veya alert-danger → Bootstrap mesaj stilleri.

✅ Sonuç

Kullanıcı formu boş bırakırsa uyarı alır.
Doluysa bilgisi alınır ve form sıfırlanır.
Sade, anlaşılır ve kullanışlı bir yapı!

🎯 Sonuç: JavaScript ile Temelleri Attık

Bu içerik boyunca JavaScript’in temel yapı taşlarını sade, örnekli ve aşamalı şekilde işledik. Öğrencilerin, artık basit bir etkileşimli sayfa oluşturabilecek seviyeye gelmeleri hedeflendi.

Öğrenilen konular:

JavaScript’in nasıl kullanıldığı
Değişkenler, fonksiyonlar ve veri türleri
HTML ile etkileşim: olaylar, DOM seçiciler
Basit kontrol yapıları (if, for, foreach)
Dış kütüphane kullanımı (Lightbox2, Bootstrap)
Form verisi ile çalışma

Bu temel bilgiler, ileride çok daha büyük projelere sağlam bir zemin oluşturur.

🚀 Bundan Sonra Neler Çalışılabilir?

Aşağıda, öğrencilerin bireysel olarak geliştirmesi için bazı başlıklar ve açıklamalar yer alıyor:

📌 1. jQuery ile JavaScript’in Basitleştirilmiş Hali

jQuery, JavaScript işlemlerini daha kısa ve kolay yazmanızı sağlar. DOM işlemleri, animasyonlar ve AJAX gibi işlemleri çok daha az kodla yapabilirsiniz.

Başlangıç Önerisi:

Sayfa yüklendiğinde mesaj göster
Butona tıklayınca bir öğeyi gizle/göster

📌 2. Firebase ile Veritabanına Veri Kaydetme

Gerçek projelerde kullanıcı verilerini saklamak gerekir. Firebase, Google’ın sunduğu ücretsiz bir veritabanı servisidir. Formdan alınan verileri kayıt edebilir, gerçek zamanlı olarak görüntüleyebilirsiniz.

Başlangıç Önerisi:

Firebase’e bir formdan isim ve mesaj gönder
Gönderilen mesajları ekranda listele

📌 3. LocalStorage ile Tarayıcıda Veri Saklama

Küçük uygulamalarda verileri veritabanına göndermeden, tarayıcıda geçici olarak saklamak mümkün. Özellikle form verileri ya da ayarlar için çok kullanışlıdır.

Başlangıç Önerisi:

Kullanıcının yazdığı ismi localStorage’a kaydet
Sayfa yenilense bile isim ekranda kalsın

📌 4. Bootstrap Bileşenlerini Gelişmiş Kullanma

Modal, tooltip, dropdown gibi Bootstrap öğelerini JavaScript ile daha etkileşimli hale getirebilirsiniz. Özellikle form validasyonları veya kullanıcıya rehberlik sağlayan içerikler için işe yarar.

Başlangıç Önerisi:

Modal penceresinden veri alma
Tooltip ile açıklamalar gösterme

📌 5. API Kullanımı (Veri Alma – Fetch)

Başka servislerden (hava durumu, haberler vb.) veri alarak dinamik sayfalar yapılabilir. Fetch API ile JSON veriler alınabilir.

Başlangıç Önerisi:

Hava durumu API’sinden şehir bilgisine göre veri çekme
Gelen veriyi ekranda listeleme

📌 6. Kendi Küçük Projeni Yap

To-do list (yapılacaklar listesi)
Not defteri uygulaması
Basit galeri sayfası
Mini anket uygulaması

Bu projeler hem özgüveni artırır hem de öğrenilenleri pekiştirir.

🎓 Bonus: Öğrenme Kaynakları

📚 Genel JavaScript Öğrenimi

JavaScript.info
JavaScript konularını sıfırdan, modern yöntemlerle anlatan çok kapsamlı bir kaynak. İngilizce ama sade bir dille yazılmış.
MDN Web Docs – JavaScript
Mozilla tarafından sunulan resmi JavaScript dökümantasyonu. Teknik bilgileri doğru ve güncel tutmak isteyenler için birebir.
W3Schools – JavaScript
Yeni başlayanlar için sade anlatım, interaktif örneklerle ilerlemek isteyenler için oldukça kullanışlı.

🎥 YouTube – Türkçe Video Eğitimler

Kodluyoruz YouTube Kanalı
Temelden başlayarak front-end konularını anlatan sade ve anlaşılır bir kanal.
Sadık Turan
JavaScript ve React gibi konuları bol örnekli ve detaylı anlatan bir başka kaliteli Türkçe kaynak.
Bilgisayar Kavramları
Teknik detaylara ve yazılım mantığına daha derinlemesine girmek isteyenler için harika bir kanal.

🧪 Uygulama Yapabileceğiniz Platformlar

JSFiddle
HTML, CSS ve JavaScript kodlarını birlikte yazarak sonuçları anında görebileceğiniz bir çevrimiçi ortam.
CodePen
Web tabanlı projelerinizi deneyip paylaşabileceğiniz interaktif bir kod platformu.
Replit
JavaScript de dahil olmak üzere pek çok dilde çevrimiçi kodlama yapabileceğiniz bir ortam. Proje kaydetme özelliğiyle öne çıkıyor.

📘 Kitap Tavsiyesi (İsteğe Bağlı)

“Eloquent JavaScript” (Türkçe ve İngilizce)
JavaScript’i derinlemesine öğrenmek isteyenler için önerilen en iyi kitaplardan biri. Hem teorik bilgileri hem de pratik uygulamaları birleştiriyor.
(Kitabın hem ücretsiz çevrimiçi versiyonu hem de basılı versiyonları mevcuttur.)

JavaScript Tanıtımı ve Kullanımı

📍 Dahili JavaScript (HTML içinde <script> etiketiyle)

📍 Harici JavaScript (Ayrı dosya ile <script src="">)

📌 console.log() Nedir?

Değişken Tanımlama – const ve let

📍 let – Değiştirilebilir Değişken

📍 const – Sabit (Değiştirilemez) Değişken

📌 let mi const mu?

📝 Ekstra Not

Object (Nesne) Tanımlama

📍 Basit Object Tanımı

📍 Object Üzerinden Değere Erişim

📍 Nesneye Yeni Özellik Ekleme / Değiştirme

📦 Eklenti Kullanımında Neden Object Gerekli?

Fonksiyon Tanımı

📍 1. Klasik Fonksiyon Tanımı (function ile)

📍 Parametreli Fonksiyon

📍 Geri Değer Döndüren Fonksiyon (return)

📍 Arrow Function (ok fonksiyonu) – Kısaca

📍 Anonim Fonksiyon

Temel Veri Türleri ve Object Tanımı

📍 Temel Veri Türleri

1. Sayı (Number)

2. Metin (String)

3. Mantıksal Değer (Boolean)

📍 Object Yapısı (Nesne Tanımlama)

Object Tanımlama

Nesneden Özelliklere Erişim

Nesneye Yeni Özellik Ekleme

📍 Eklenti Verisi İçin Object Kullanımı

Özet

HTML Nesne Seçici – querySelector ve querySelectorAll

📍 querySelector

Kullanımı:

📍 querySelectorAll

Kullanımı:

🎯 Olay (Event) Kullanımı

📌 .onclick – Tıklama Olayı

📌 .oninput – Yazı Girişi Olayı

📌 event Objesi Kullanımı

🧪 Küçük Bir Uygulama

✅ Özet

📁 Olay Türleri (Gruplar Halinde)

✅ Fare Olayları (Mouse Events)

⌨️ Klavye Olayları (Keyboard Events)

🖊️ Form Olayları

📄 Belge ve Yükleme Olayları

📱 Dokunmatik Olaylar (Mobil)

💻 Pencere ve Tarayıcı Olayları

🧰 Nesne İnceleme ve Debug

🖨️ console.log() – Değeri Yazdırma

🧩 console.dir() – HTML Öğelerini Nesne Gibi İncelemek

🆚 Farkı Nedir?

🔍 Neden Önemli?

🎯 Örnek: Liste İçindeki Öğeleri İnceleme

🧠 İpucu:

✅ Özet

🔀 Koşullu Yapılar (if / else)

📌 Yapısı

🎯 Uygulamalı Örnek

📝 Açıklama:

✅ Özet

🔁 Döngü Yapıları (for, forEach)

📌 1. for Döngüsü

📌 2. forEach() Metodu

🎯 Uygulamalı Örnek

📝 Açıklamalar:

✅ for döngüsü

✅ forEach yöntemi

⛳ Ne Zaman Hangisi?

🧾 JSON Yapısına Giriş

📌 JSON Nedir?

📋 Örnek JSON Verisi

🔄 JSON.parse()

🔄 JSON.stringify()

📎 Nerede Kullanılır?

✅ Özet

🔌 CDN ve GitHub Üzerinden Eklenti Kullanımı

📡 1. CDN (Content Delivery Network) Üzerinden

✅ Kullanımı:

📍 Dahili JavaScript (HTML içinde `<script>` etiketiyle)

📍 Harici JavaScript (Ayrı dosya ile `<script src="">`)

📌 `console.log()` Nedir?

Değişken Tanımlama – `const` ve `let`

📍 `let` – Değiştirilebilir Değişken

📍 `const` – Sabit (Değiştirilemez) Değişken

📌 `let` mi `const` mu?

📍 1. Klasik Fonksiyon Tanımı (`function` ile)

📍 Geri Değer Döndüren Fonksiyon (`return`)

HTML Nesne Seçici – `querySelector` ve `querySelectorAll`

📍 `querySelector`

📍 `querySelectorAll`

📌 `.onclick` – Tıklama Olayı

📌 `.oninput` – Yazı Girişi Olayı

📌 `event` Objesi Kullanımı

🖨️ `console.log()` – Değeri Yazdırma

🧩 `console.dir()` – HTML Öğelerini Nesne Gibi İncelemek

📌 1. `for` Döngüsü

📌 2. `forEach()` Metodu

✅ `for` döngüsü

✅ `forEach` yöntemi