JavaScript Sıfırdan Zirveye Temelden İleri Düzeye Öğren

Bölüm 1: JavaScript Nedir, Neden Bu Kadar Popüler?  Giriş: Web’in Nabzı JavaScript’le Atıyor Bugün internette gördüğün her dinamik hareket —butonlara bastığında sayfa yenilenmeden bir şeylerin değişmesi,menülerin akıcı şekilde açılıp kapanması,bir formun anında hata göstermesi,hatta YouTube yorumlarının sayfa yenilenmeden gelmesi —işte bunların hepsi JavaScript’in sihri.İçindekilerListeyi göstermek için tıklayın Giriş: Web’in Nabzı JavaScript’le Atıyor JavaScript’in Doğuşu🔧 Nerelerde Kullanılır?⚙️ JavaScript’in

Mehmet Ali Uçar tarafından
yayınlandı
24 dk 38 sn 24 dk 38 sn okuma süresi 9
White And Dark Blue Futuristic Tech Company Presentation
Google News Google News Flipboard Flipboard Sesli oku Yazıyı beğen Favorilere Ekle 5 Yorumlar
Daha fazla

Bölüm 1: JavaScript Nedir, Neden Bu Kadar Popüler?

 Giriş: Web’in Nabzı JavaScript’le Atıyor

Bugün internette gördüğün her dinamik hareket —
butonlara bastığında sayfa yenilenmeden bir şeylerin değişmesi,
menülerin akıcı şekilde açılıp kapanması,
bir formun anında hata göstermesi,
hatta YouTube yorumlarının sayfa yenilenmeden gelmesi —
işte bunların hepsi JavaScript’in sihri.

HTML ve CSS bir web sitesinin iskeletini ve görünümünü oluştururken,
JavaScript o siteye ruh veren programlama dilidir.
Yani HTML “gövde”, CSS “stil”, JavaScript ise “zeka” diyebiliriz.

 JavaScript’in Doğuşu

1995 yılında Brendan Eich tarafından sadece 10 günde geliştirildi.
Ama bugün, dünyanın en büyük teknolojilerinin merkezinde:

  • Google (Gmail, YouTube, Maps)

  • Facebook / Instagram

  • Netflix, Amazon, Spotify

  • ChatGPT’nin arayüzü

Hepsi bir şekilde JavaScript kullanıyor.

🔧 Nerelerde Kullanılır?

Eskiden JavaScript sadece “tarayıcıda çalışan” bir dildi.
Ama artık sınırlarını aştı:

Alan Kullanım Örnek
🌐 Web Geliştirme Front-End (arayüz) React, Vue, Angular
⚙️ Back-End Sunucu tarafı Node.js
📱 Mobil Uygulama geliştirme React Native
💻 Masaüstü Program geliştirme Electron
🤖 Yapay Zeka & Veri API bağlantıları, analiz TensorFlow.js

⚙️ JavaScript’in Avantajları

  1. Her Tarayıcıda Çalışır – Ekstra yükleme gerekmez.

  2. Hızlı ve Etkileşimli – Kullanıcıya anlık tepki verir.

  3. Kütüphane Desteği Sonsuz – React, Vue, Angular, jQuery, Node.js…

  4. Topluluk Çok Büyük – StackOverflow’da milyonlarca soru.

  5. Kariyer Fırsatı – Her firma bir JavaScript geliştirici arıyor.

🔥 Benim Düşüncem

JavaScript öğrenmeye başladığında ilk başta “ya bu çok karışık” diyebilirsin ama sabırlı ol aslanım.
Çünkü bu dili çözdüğünde sadece web sitesi değil, mobil uygulama, masaüstü yazılım hatta yapay zekâ arayüzü bile yapabilirsin.

Benim için JavaScript bir dil değil, tam bir sistem düşünme mantığı oldu.
Kod yazarken artık “bir butona tıklanınca ne olur?” değil, “kullanıcı burada ne ister?” diye düşünmeye başlıyorsun.
İşte bu, seni sıradan bir kodcudan geliştiriciye dönüştürüyor 🔥

🧩 Basit Bir Örnek

console.log("Merhaba MayKairos! JavaScript’e hoş geldin 🚀");

Tarayıcıda “Konsol” sekmesine (F12 → Console) yazarsan ekranda mesajı görürsün.

Interaktif Örnek:

let isim = prompt("Adını yaz aslanım:");
alert("Hoş geldin " + isim + "! Artık sen de bir JavaScript yolcususun 😎");

Bu küçük kodla kullanıcıyla etkileşim kurdun!
İşte JavaScript’in büyüsü bu kadar basit başlar.

🧠 Özetle:

  • JavaScript = Web’in beyni

  • 1995’te doğdu, 2025’te hâlâ zirvede

  • HTML ve CSS’le beraber çalışır

  • Öğrenmesi kolay, kullanımı sınırsız

  • Her yerde: Web, mobil, masaüstü, backend, AI

📘 Bir Sonraki Bölüm:

Temeller – Değişkenler, Veri Türleri ve Operatörler
Orada var, let, const farklarını çözeceğiz, matematiksel işlemler yapacağız ve ilk “mini hesap makinesi”ni kodlayacağız.

1. Değişkenler Nedir?

Değişken, bilgisayara bir veri saklama kutusu gibi düşünebilirsin.
İçine değer koyarsın, sonra o değeri kullanırsın.

JavaScript’te üç tür değişken tanımlanır:

var x = 10; // Eski tip, artık modern projelerde çok kullanılmaz
let y = 20; // Modern, değiştirilebilir
const z = 30; // Sabit, değeri değiştirilemez

Benim Düşüncem:

let ve const kullanmayı öğrendiğinde kodun çok daha düzenli oluyor. var’ı bırak bence, eski okul gibi hissediyorsun 😎

🔹 2. Veri Türleri

JavaScript’te temel veri türleri şunlardır:

Veri Türü Örnek Açıklama
Number 10, 3.14 Sayısal değerler
String “Merhaba” Metin verisi
Boolean true / false Doğru / Yanlış
Null null Boş değer
Undefined undefined Tanımlanmamış değer
Symbol Symbol(‘id’) Benzersiz değerler
Object {isim:”Ali”} Karmaşık veri yapıları

Örnek Kullanım:

let isim = "Ali";
let yas = 19;
let aktif = true;

console.log(isim, yas, aktif);

Benim Düşüncem:

Veri türlerini başta karıştırmak normal, ama console.log ile denedikçe beynin açılıyor. Bu aşamada ufak hatalar yaparak öğrenmek normal.

🔹 3. Operatörler

Operatörler, değişkenlerle işlem yapmamızı sağlar:

Matematiksel Operatörler:

let a = 10;
let b = 5;

console.log(a + b); // 15
console.log(a - b); // 5
console.log(a * b); // 50
console.log(a / b); // 2
console.log(a % b); // 0 (kalan)

Karşılaştırma Operatörleri:

console.log(a > b); // true
console.log(a < b); // false
console.log(a == b); // false
console.log(a != b); // true

Benim Düşüncem:

Karşılaştırmaları öğrenmek kod yazarken adeta beynin oyun moduna giriyor. “Eğer bu doğruysa şu yap” mantığını oturtuyor.

🔹 4. Basit Mini Örnek – Yaş Hesaplama

let dogumYili = 2005;
let suAn = 2025;
let yas = suAn - dogumYili;

console.log("Senin yaşın: " + yas);

Bu basit örnek, değişken + operatör kullanımını gösteriyor.
Kendi yaşını veya arkadaşlarının yaşını hesaplayıp denemeni öneririm 😎

Benim Düşüncem:

Küçük örneklerle başlamak kod yazmayı hem eğlenceli hem akılda kalıcı yapıyor.

🔹 5. String İşlemleri

String yani metinleri birleştirebilir, kesebilir veya değiştirebilirsin:

let ad = "Mehmet";
let soyad = "Ali";

console.log("Merhaba " + ad + " " + soyad + "!");
console.log(`Merhaba ${ad} ${soyad}, JavaScript’e hoş geldin!`); // Template literal

Benim Düşüncem:

Template literal kullanmayı öğrendiğinde string birleştirme hayatın kolaylaşıyor, klasik + işaretinden kurtuluyorsun 😎

🔹 6. Tip Dönüşümleri

JavaScript dinamik tipli bir dil olduğu için tip dönüşümleri sık olur:

let sayi = "10";
console.log(sayi + 5); // "105" (string ile toplandı)
console.log(Number(sayi) + 5); // 15 (Number’a çevirdik)

Benim Düşüncem:

Tip dönüşümlerini anlamak, daha büyük projelerde hata yapmamayı garanti ediyor.

🔹 7. Kısa Alıştırmalar

  1. Kullanıcının doğum yılına göre yaşını hesapla.

  2. İki sayıyı alıp toplam ve çarpımını konsola yazdır.

  3. Ad ve soyadını birleştirip selam mesajı göster.

Benim Düşüncem:

Bu alıştırmalar küçük ama beynini açıyor. Kodlamayı eğlenceli hale getiriyor.

🧠 Özet

  • Değişkenler: var, let, const

  • Temel veri türleri: Number, String, Boolean, Object…

  • Matematiksel ve karşılaştırma operatörleri

  • String birleştirme ve Template Literal

  • Tip dönüşümleri ve mini alıştırmalar

📘 Bir Sonraki Bölüm:

Kontrol Yapıları – Koşullar ve Döngüler
Orada if, else, switch ve for, while gibi döngülerle kendi mini oyunlarını veya uygulamalarını yazacağız.

1. Koşullar – if, else if, else

Koşullar, “Eğer bu doğruysa bunu yap, değilse şunu yap” mantığını sağlar.

Temel Örnek:

let yas = 19;

if (yas >= 18) {
console.log("Reşitsiniz, siteye giriş yapabilirsiniz!");
} else {
console.log("Üzgünüm, siteye girmek için 18 yaşından büyük olmalısınız.");
}

Benim Düşüncem:

Koşulları öğrenmek, programı kullanıcıya göre esnek hale getiriyor. Kod artık sadece sabit değil, “akıllı” hale geliyor 😎

🔹 else if Kullanımı

Birden fazla durumu kontrol etmek için:

let puan = 85;

if (puan >= 90) {
console.log("Harika! AA aldınız.");
} else if (puan >= 75) {
console.log("İyi iş! BB aldınız.");
} else if (puan >= 60) {
console.log("Geçtiniz, CC aldınız.");
} else {
console.log("Maalesef kaldınız, tekrar deneyin.");
}

Benim Düşüncem:

else if ile karmaşık senaryoları yönetmek çok kolay. Artık sadece tek koşula bağlı kalmıyorsun.

💡 2. Karşılaştırma ve Mantıksal Operatörler

  • > : büyük

  • < : küçük

  • >=, <= : büyük/küçük eşit

  • ==, != : eşit/eşit değil

  • ===, !== : tip ve değer eşitliği

  • && : ve

  • || : veya

  • ! : değil

Örnek:

let yas = 20;
let uyeMi = true;

if (yas >= 18 && uyeMi) {
console.log("Siteye giriş onaylandı!");
}

Benim Düşüncem:

Mantıksal operatörler birleştirildiğinde kodun esnekliği inanılmaz artıyor. Artık birden fazla koşulu tek satırda yönetebiliyorsun.

🔹 3. Döngüler – Tekrar Eden İşlemler

Döngüler, bir işlemi birden fazla kez yapmak için kullanılır.

for Döngüsü

for (let i = 1; i <= 5; i++) {
console.log("Sayı: " + i);
}

Benim Düşüncem:

for döngüsü ilk başta kafa karıştırıcı olabilir ama alışınca bir işi onlarca kez yapmak tek satırda mümkün oluyor.

while Döngüsü

let i = 1;
while (i <= 5) {
console.log("Sayı: " + i);
i++;
}

Benim Düşüncem:

while döngüsü koşul doğru olduğu sürece devam eder. Esnekliği fora göre biraz daha fazla ama dikkatli kullanılmalı.

do...while Döngüsü

let i = 1;
do {
console.log("Sayı: " + i);
i++;
} while (i <= 5);

Benim Düşüncem:

En az bir kez çalışacaksa do...while kullanmak mantıklı. Kodun davranışını önceden tahmin etmek kolaylaşıyor.

🔹 4. Mini Örnek – Tahmin Oyunu

Küçük bir sayı tahmin oyunu:

let gizliSayi = 7;
let tahmin = prompt("1 ile 10 arasında bir sayı tahmin et:");

if (Number(tahmin) === gizliSayi) {
alert("Tebrikler, doğru tahmin!");
} else {
alert("Yanlış, tekrar dene 😎");
}

Benim Düşüncem:

Bu tarz küçük oyunlar hem eğlenceli hem de koşul mantığını pekiştiriyor. Kullanıcıyla etkileşimli olması çok keyifli.

🧠 Özet – Bu Bölümde Öğrendiklerimiz

  • if, else if, else ile koşullar

  • Karşılaştırma ve mantıksal operatörler

  • Döngüler: for, while, do...while

  • Mini tahmin oyunu ile uygulamalı örnek

📘 Bir Sonraki Bölüm:

Fonksiyonlar ve Scope Mantığı
Orada kendi fonksiyonlarını yazmayı, parametreleri kullanmayı ve değişken kapsamını öğreneceğiz.

1. Fonksiyon Nedir?

Fonksiyon, tekrar tekrar kullanabileceğin kod bloklarıdır.
Yani bir işi tanımlayıp, istediğin zaman çalıştırabilirsin.

Temel Örnek:

function selamla() {
console.log("Merhaba MayKairos! JavaScript öğreniyorsun 🚀");
}

selamla(); // Fonksiyonu çağırıyoruz

Benim Düşüncem:

Fonksiyonları kullanmak kodu düzenli ve okunabilir yapıyor. Tekrar eden işlemleri tekrar yazmana gerek kalmıyor, tam bir kurtarıcı 😎

🔹 2. Parametreler ve Argümanlar

Fonksiyonlara veri gönderebiliriz. Bu veriye parametre denir.

function selamlaIsim(isim) {
console.log("Merhaba " + isim + "! JavaScript’e hoş geldin 😎");
}

selamlaIsim("Mehmet Ali");
selamlaIsim("Büşra");

Benim Düşüncem:

Parametreler fonksiyonları çok esnek yapıyor. Aynı fonksiyonu farklı verilerle defalarca kullanabilirsin.

🔹 3. Return – Değer Döndürme

Fonksiyon sadece ekrana yazmakla kalmaz, değer döndürebilir.

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

let sonuc = topla(10, 20);
console.log("Toplam: " + sonuc);

Benim Düşüncem:

return ile fonksiyonları birer mini hesap makinesi gibi kullanabiliyorsun. Kod modüler ve temiz oluyor.

🔹 4. Fonksiyon Türleri

a) Normal Fonksiyon

function carp(a, b) {
return a * b;
}
console.log(carp(5, 4)); // 20

b) Arrow Fonksiyon (ES6+)

const carpArrow = (a, b) => a * b;
console.log(carpArrow(5, 4)); // 20

Benim Düşüncem:

Arrow fonksiyonlar kısa ve modern. Özellikle callback’lerde hayat kurtarıyor 😎

🔹 5. Scope – Değişken Kapsamı

Scope, değişkenlerin nereden erişilebilir olduğunu belirler.

let globalDegisken = "Ben globalim";

function testScope() {
let localDegisken = "Ben sadece fonksiyondayım";
console.log(globalDegisken); // Erişebilir
console.log(localDegisken); // Erişebilir
}

testScope();
console.log(globalDegisken); // Erişebilir
// console.log(localDegisken); // Hata! Erişemez

Benim Düşüncem:

Scope’u anlamadan büyük projelere girişme. Bu temel bilgi, ilerideki hataların çoğunu önlüyor.

🔹 6. Mini Örnek – Yaş Hesaplayıcı Fonksiyon

function yasHesapla(dogumYili) {
let suAn = 2025;
return suAn - dogumYili;
}

let yasim = yasHesapla(2005);
console.log("Yaşım: " + yasim);

Benim Düşüncem:

Fonksiyonla hesap yapmak, tek seferlik iş yerine her zaman kullanabileceğin bir çözüm sunuyor. Bu tarz küçük fonksiyonlar günlük kodlamada süper işe yarıyor.

🧠 Özet – Bu Bölümde Öğrendiklerimiz

  • Fonksiyon nedir ve nasıl tanımlanır

  • Parametre ve return kullanımı

  • Normal ve Arrow fonksiyon farkları

  • Scope (global ve local değişkenler)

  • Mini örneklerle fonksiyon mantığını pekiştirme

📘 Bir Sonraki Bölüm:

Diziler, Objeler ve Veri Yönetimi
Orada listeler ve karmaşık veri yapıları ile çalışmayı, dizileri ve objeleri nasıl yöneteceğimizi öğreneceğiz.

1. Diziler (Arrays) Nedir?

Dizi, birden fazla değeri tek bir değişkende saklamanızı sağlar.
Yani bir listedeki her şeyi tek kutuda toplamak gibi düşünebilirsin.

Temel Örnek:

let meyveler = ["Elma", "Armut", "Muz"];
console.log(meyveler);
console.log(meyveler[0]); // "Elma"

Benim Düşüncem:

Diziler hayat kurtarıyor aslanım. Aynı türdeki verileri tek bir yapıda toplamak kodu çok daha okunabilir yapıyor 😎

🔹 2. Dizi Metotları

  • push() : Dizi sonuna ekler

  • pop() : Dizi sonundan çıkarır

  • shift() : Dizi başından çıkarır

  • unshift() : Dizi başına ekler

  • length : Dizi uzunluğunu verir

Örnek:

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

sayilar.pop();
console.log(sayilar); // [1,2,3]

Benim Düşüncem:

push ve pop gibi metodlarla dizilerle oynarken adeta lego ile oynar gibi hissediyorsun. Çok keyifli 😎

🔹 3. Objeler (Objects) Nedir?

Objeler, anahtar-değer (key-value) çiftlerinden oluşur.
Bir kişi veya ürün bilgilerini tutmak için idealdir.

let kisi = {
isim: "Mehmet Ali",
yas: 19,
meslek: "Öğrenci"
};

console.log(kisi.isim); // "Mehmet Ali"
console.log(kisi["yas"]); // 19

Benim Düşüncem:

Objelerle çalışmak, gerçek dünyadaki nesneleri kod dünyasına taşımak gibi. İster web sitesi, ister oyun verisi… objeler her yerde 😎

🔹 4. Diziler ve Objeleri Birleştirmek

Birden fazla objeyi bir dizide saklayabiliriz:

let kisiler = [
{isim: "Mehmet Ali", yas: 19},
{isim: "Büşra", yas: 20},
{isim: "Ahmet", yas: 22}
];

console.log(kisiler[1].isim); // "Büşra"

Benim Düşüncem:

Karmaşık veri yapıları gibi görünse de, adım adım çözünce çok anlaşılır. Büyük projelerde bu yapıları iyi bilmek şart 😎

🔹 5. Döngülerle Diziler ve Objeler

a) For Döngüsü ile Dizi

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

b) For…of Döngüsü

for (let meyve of meyveler) {
console.log(meyve);
}

c) Objelerde For…in

let kisi = {isim: "Ali", yas: 19};
for (let key in kisi) {
console.log(key + ": " + kisi[key]);
}

Benim Düşüncem:

Döngüler + diziler + objeler = veri canavarı! Bu üçlü, projelerde veri yönetimini inanılmaz kolaylaştırıyor.

🔹 6. Mini Örnek – Öğrenci Listesi

let ogrenciler = [
{isim: "Mehmet Ali", puan: 90},
{isim: "Büşra", puan: 85},
{isim: "Ahmet", puan: 70}
];

for (let ogrenci of ogrenciler) {
if (ogrenci.puan >= 85) {
console.log(ogrenci.isim + " harika bir puan aldı!");
} else {
console.log(ogrenci.isim + " daha çok çalışmalı.");
}
}

Benim Düşüncem:

Gerçek dünya senaryolarını bu şekilde kodlamak, hem eğlenceli hem de uygulamalı öğrenme sağlıyor.

🧠 Özet – Bu Bölümde Öğrendiklerimiz

  • Diziler: birden fazla veri saklamak

  • Dizi metotları: push, pop, shift, unshift, length

  • Objeler: anahtar-değer yapısı

  • Diziler ve objelerin birleşimi

  • Döngülerle veri yönetimi

  • Mini örneklerle öğrenci listesi uygulaması

📘 Bir Sonraki Bölüm:

DOM Manipülasyonu – Web Sayfasını Kodla Kontrol Etmek
Orada HTML öğelerini JavaScript ile nasıl değiştireceğimizi ve etkileşim oluşturacağımızı göreceğiz.

1. DOM Nedir?

DOM (Document Object Model), HTML sayfanın JavaScript ile okunabilir ve değiştirilebilir hâlidir.
Yani bir web sayfasını JavaScript ile yönetmek için DOM’u kullanıyoruz.

Benim Düşüncem:

DOM’u anlamadan web geliştirme eksik kalır. Bir elementin rengini değiştirmekten form verisini okumaya kadar her şey DOM ile mümkün 😎

🔹 2. Element Seçme

a) getElementById

<p id="yazi">Merhaba MayKairos!</p>
<script>
let p = document.getElementById("yazi");
p.textContent = "JavaScript ile DOM kontrolü!";
</script>

b) getElementsByClassName & getElementsByTagName

<p class="mesaj">İlk mesaj</p>
<p class="mesaj">İkinci mesaj</p>
<script>
let mesajlar = document.getElementsByClassName("mesaj");
console.log(mesajlar[0].textContent); // İlk mesaj
</script>

c) Modern: querySelector & querySelectorAll

let ilkP = document.querySelector("p"); // ilk <p>
let tumP = document.querySelectorAll("p"); // tüm <p>

Benim Düşüncem:

querySelector ve querySelectorAll modern projelerde hayat kurtarıyor. CSS selector mantığını bildiysen kullanması çok kolay 😎

🔹 3. İçerik ve Stil Değiştirme

let p = document.querySelector("p");
p.textContent = "Yeni metin!";
p.style.color = "red";
p.style.fontSize = "24px";

Benim Düşüncem:

Sayfadaki öğelerin görünümünü ve içeriğini değiştirmek, interaktif web siteleri yapmanın temel yolu.

🔹 4. Event’ler – Kullanıcı Etkileşimi

Kullanıcı bir butona tıklayınca veya fareyi hareket ettirdiğinde kod çalıştırmak için event kullanılır.

<button id="buton">Bana Tıkla!</button>
<script>
let btn = document.getElementById("buton");
btn.addEventListener("click", function() {
alert("Butona tıkladın! 😎");
});
</script>

Benim Düşüncem:

Event’ler web sitesini “canlı” yapar. Artık statik sayfa değil, kullanıcı ile etkileşimli site yapıyorsun.

🔹 5. Form Verisi Okuma

<input type="text" id="isim" placeholder="Adını yaz">
<button id="gonder">Gönder</button>

<script>
let input = document.getElementById("isim");
let btn = document.getElementById("gonder");

btn.addEventListener("click", function() {
alert("Merhaba " + input.value + "!");
});
</script>

Benim Düşüncem:

Formlardan veri okumak ve bunu işlemek, web uygulamaları için kritik bir beceri. Artık kullanıcının girdiği veriyi alıp işlem yapabiliyorsun.

🔹 6. Mini Örnek – Renk Değiştirme

<p id="metin">Bu metin değişecek!</p>
<button id="renk">Rengi Değiştir</button>

<script>
let metin = document.getElementById("metin");
let buton = document.getElementById("renk");

buton.addEventListener("click", function() {
metin.style.color = "blue";
metin.textContent = "Renk değişti! 🎨";
});
</script>

Benim Düşüncem:

DOM manipülasyonu ile sayfayı istediğin gibi şekillendirebilirsin. Küçük etkileşimler büyük fark yaratır 😎

🧠 Özet – Bu Bölümde Öğrendiklerimiz

  • DOM nedir ve neden önemlidir

  • Element seçme: getElementById, getElementsByClassName, querySelector

  • İçerik ve stil değiştirme

  • Event’ler ile kullanıcı etkileşimi

  • Form verisi okuma ve mini örnekler

📘 Bir Sonraki Bölüm:

Event’ler, Formlar ve Kullanıcı Etkileşimi
Orada ileri düzey event kullanımı, mouse ve klavye etkileşimleri ve form doğrulamayı öğreneceğiz

1. Event Nedir?

Event, kullanıcı veya tarayıcı tarafından tetiklenen olay demektir.
Örnek: bir butona tıklamak, fareyi hareket ettirmek, sayfa yüklenince çalışacak bir kod.

window.addEventListener("load", function() {
console.log("Sayfa yüklendi! 🚀");
});

Benim Düşüncem:

Event’ler, web sitelerini “statik”ten “canlı”ya çeviriyor. Kullanıcı ile etkileşim başlıyor 😎

🔹 2. Buton Click Event

<button id="tikla">Tıkla!</button>
<script>
let buton = document.getElementById("tikla");
buton.addEventListener("click", function() {
alert("Butona tıkladın! 😎");
});
</script>

Benim Düşüncem:

Basit bir alert bile kullanıcının yaptığını görmene imkan veriyor. Bu küçük etkileşimleri çoğaltmak çok keyifli.

🔹 3. Mouse Event’leri

  • mouseover : fare üzerine geldiğinde

  • mouseout : fare ayrıldığında

  • mousemove : fare hareket ettiğinde

let kutu = document.getElementById("kutu");
kutu.addEventListener("mouseover", function() {
kutu.style.backgroundColor = "yellow";
});
kutu.addEventListener("mouseout", function() {
kutu.style.backgroundColor = "red";
});

Benim Düşüncem:

Mouse event’leri ile interaktif efektler eklemek siteni profesyonel gösterir. Kullanıcı deneyimini artırır 😎

🔹 4. Klavye Event’leri

  • keydown : tuşa basınca

  • keyup : tuşu bırakınca

  • keypress : tuşa basınca (artık az kullanılıyor)

document.addEventListener("keydown", function(event) {
console.log("Basılan tuş: " + event.key);
});

Benim Düşüncem:

Klavye event’leri oyun veya form tabanlı projelerde çok işlevsel. Kullanıcı ile etkileşim katlıyor 😎

🔹 5. Form Etkileşimi ve Doğrulama

Formlardan veri almak ve doğrulamak web geliştirme için kritik.

<form id="loginForm">
<input type="text" id="kullanici" placeholder="Kullanıcı Adı">
<input type="password" id="sifre" placeholder="Şifre">
<button type="submit">Giriş</button>
</form>

<script>
let form = document.getElementById("loginForm");
form.addEventListener("submit", function(event) {
event.preventDefault(); // sayfanın yenilenmesini engeller
let kullanici = document.getElementById("kullanici").value;
let sifre = document.getElementById("sifre").value;

if(kullanici === "" || sifre === "") {
alert("Lütfen tüm alanları doldurun!");
} else {
alert("Giriş başarılı! 😎");
}
});
</script>

Benim Düşüncem:

Form doğrulama ile kullanıcıyı yönlendirmek ve hataları önlemek çok önemli. Bu küçük kodlar büyük fark yaratıyor.

🔹 6. Mini Örnek – Canlı Metin Güncelleme

<input type="text" id="yaziGir" placeholder="Bir şey yaz">
<p id="canliYazi">Buraya yazın...</p>

<script>
let input = document.getElementById("yaziGir");
let p = document.getElementById("canliYazi");

input.addEventListener("input", function() {
p.textContent = input.value;
});
</script>

Benim Düşüncem:

Kullanıcı yazarken ekranda canlı olarak görmek, web projelerinde modern ve etkileşimli his yaratıyor 😎

🧠 Özet – Bu Bölümde Öğrendiklerimiz

  • Event’ler ile kullanıcı etkileşimi

  • Mouse ve klavye event’leri

  • Form verisi okuma ve doğrulama

  • Mini örneklerle canlı metin güncelleme

📘 Bir Sonraki Bölüm:

Asenkron JavaScript – Callback, Promise, Async-Await
Orada API çağrıları, veriyi beklemek ve modern JavaScript’in en güçlü özelliklerini göreceğiz.

1. Asenkron Nedir?

Asenkron, bir işlemin diğer işlemleri beklemeden çalışması demektir.
Örnek: Bir web sayfası veriyi API’den çekerken kullanıcı başka şeyler yapabilir.

Benim Düşüncem:

Asenkron mantığı anlamak, modern web uygulamaları için şart. Sayfanın takılmadan çalışmasını sağlar 😎

🔹 2. Callback Fonksiyonlar

Callback, bir fonksiyonu başka bir fonksiyona parametre olarak göndermek demektir.

function islemTamamlandi(mesaj) {
console.log(mesaj);
}

function veriAl(callback) {
setTimeout(() => {
callback("Veri alındı! 🚀");
}, 2000);
}

veriAl(islemTamamlandi);

Benim Düşüncem:

Callback ile işlemleri sırayla yönetmek mümkün ama karmaşık projelerde iç içe geçmiş callback’ler kafa karıştırabilir 😅

🔹 3. Promise – Daha Modern Yol

Promise, gelecekte tamamlanacak işlemleri temsil eden bir nesnedir.

let veriAl = new Promise((resolve, reject) => {
setTimeout(() => {
let basarili = true;
if(basarili) resolve("Veri başarıyla alındı!");
else reject("Hata oluştu!");
}, 2000);
});

veriAl.then((mesaj) => {
console.log(mesaj);
}).catch((hata) => {
console.log(hata);
});

Benim Düşüncem:

Promise, callback’in karmaşasını çözer ve kodu okunabilir kılar. Modern projelerde standart 😎

🔹 4. Async / Await

Async / Await, Promise tabanlı asenkron kodu daha senkron gibi yazmamızı sağlar.

function veriAlPromise() {
return new Promise((resolve) => {
setTimeout(() => {
resolve("Veri alındı Async/Await ile!");
}, 2000);
});
}

async function veriGoster() {
let sonuc = await veriAlPromise();
console.log(sonuc);
}

veriGoster();

Benim Düşüncem:

Async/Await ile kod adeta sihirli bir şekilde düz ve okunabilir oluyor. Karmaşık işlemler artık anlaşılır 😎

🔹 5. Mini Örnek – API’den Veri Çekme

async function kullaniciBilgiGetir() {
try {
let response = await fetch("https://jsonplaceholder.typicode.com/users/1");
let data = await response.json();
console.log("Kullanıcı Adı: " + data.name);
} catch(error) {
console.log("Hata oluştu: " + error);
}
}

kullaniciBilgiGetir();

Benim Düşüncem:

API çağrıları yapmak, güncel veri göstermek ve kullanıcıya interaktif deneyim sunmak için mükemmel. Modern webin kalbi burada 😎

🧠 Özet – Bu Bölümde Öğrendiklerimiz

  • Asenkron işlemler nedir

  • Callback fonksiyonlar

  • Promise kullanımı

  • Async / Await ile modern asenkron yönetim

  • Mini örnek: API’den kullanıcı bilgisi çekme

📘 Bir Sonraki Bölüm:

JavaScript ile Proje Oluşturma – Mini Web Uygulaması
Orada öğrendiğimiz tüm konuları birleştirip gerçek bir proje geliştireceğiz.

1. Proje Konsepti

Bu mini projede yapacaklarımız:

  • Kullanıcıdan veri almak (form)

  • Veriyi işlemek (fonksiyonlar + koşullar)

  • Sonucu göstermek (DOM manipülasyonu)

  • Asenkron veri çekmek (API simülasyonu)

  • Event’ler ile etkileşim sağlamak

Örnek Proje: “Basit Kullanıcı Kaydı ve Puan Hesaplama Uygulaması”

🔹 2. HTML Yapısı

<!DOCTYPE html>
<html lang="tr">
<head>
<meta charset="UTF-8">
<title>Mini Web Uygulaması - MayKairos</title>
</head>
<body>
<h1>Mini Kullanıcı Kaydı</h1>

<form id="kayitForm">
<input type="text" id="isim" placeholder="İsminiz">
<input type="number" id="yas" placeholder="Yaşınız">
<button type="submit">Kaydet</button>
</form>

<h2>Kayıtlı Kullanıcılar</h2>
<ul id="kullaniciListesi"></ul>

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

Benim Düşüncem:

HTML ile temel iskeleti oluşturmak, projeyi planlamanın ilk adımı. Artık JavaScript ile interaktif yapabiliriz 😎

🔹 3. JavaScript Kodları (app.js)

let form = document.getElementById("kayitForm");
let isimInput = document.getElementById("isim");
let yasInput = document.getElementById("yas");
let liste = document.getElementById("kullaniciListesi");

let kullanicilar = [];

form.addEventListener("submit", function(event) {
event.preventDefault();

let isim = isimInput.value.trim();
let yas = Number(yasInput.value);

if(isim === "" || yas <= 0) {
alert("Lütfen geçerli bir isim ve yaş girin!");
return;
}

let kullanici = {isim: isim, yas: yas};
kullanicilar.push(kullanici);
listeGuncelle();

isimInput.value = "";
yasInput.value = "";
});

function listeGuncelle() {
liste.innerHTML = "";
kullanicilar.forEach(k => {
let li = document.createElement("li");
li.textContent = `${k.isim} – ${k.yas} yaşında`;
liste.appendChild(li);
});
}

Benim Düşüncem:

Tüm öğrendiğimiz konuları bir araya getirmek muazzam bir his. Fonksiyonlar, DOM, event ve diziler bir proje içinde canlı olarak çalışıyor 😎

🔹 4. Mini API Simülasyonu

function kullaniciPuanAl(kullanici) {
return new Promise((resolve) => {
setTimeout(() => {
let puan = Math.floor(Math.random() * 100) + 1;
resolve({...kullanici, puan: puan});
}, 1000);
});
}

async function puanGoster() {
for(let k of kullanicilar) {
let sonuc = await kullaniciPuanAl(k);
console.log(`${sonuc.isim} puanı: ${sonuc.puan}`);
}
}

puanGoster();

Benim Düşüncem:

Asenkron işlemler ve Promise/Async mantığını gerçek projede görmek, öğrenmeyi pekiştiriyor. Kod artık “canlı” ve dinamik 😎

🧠 Özet – Bu Bölümde Öğrendiklerimiz

  • Form ile kullanıcıdan veri almak

  • Koşullar ile veriyi kontrol etmek

  • Diziler ve objeler ile veri saklamak

  • DOM ile kullanıcıya göstermek

  • Asenkron işlemlerle puan simülasyonu yapmak

  • Event’ler ile kullanıcı etkileşimi

📘 Sonuç:

Artık basit ama tam donanımlı bir JavaScript projesi yaptın!

Benim Düşüncem:

Sıfırdan başlayıp böyle bir projeyi yapmak, öğrendiklerimizi pekiştirmenin en güzel yolu. Artık gerçek projelere hazırsın!

1. Neden İleri Düzey Projeler?

Artık temel bilgileri öğrendik ve mini bir proje yaptık.
Sırada:

  • Gerçek dünya problemlerini çözmek

  • API entegrasyonları yapmak

  • Modern kütüphanelerle (React, Vue, Node.js) çalışmak

Benim Düşüncem:

İleri projeler, sadece kod yazmak değil, problem çözme yeteneğini de geliştiriyor. Artık “bir şeyler üretebilirim” hissi kazanıyorsun 😎

🔹 2. İleri Proje Fikirleri

a) Hava Durumu Uygulaması – API Kullanımı

  • Kullanıcı şehir seçer

  • JavaScript fetch ile açık hava durumu API’si çağrılır

  • DOM ile sonuç gösterilir

async function havaDurumuGetir(sehir) {
try {
let response = await fetch(`https://api.openweathermap.org/data/2.5/weather?q=${sehir}&appid=API_KEY&units=metric`);
let data = await response.json();
console.log(`Şehir: ${data.name}, Sıcaklık: ${data.main.temp}°C`);
} catch(error) {
console.log("Hata: " + error);
}
}

havaDurumuGetir("Istanbul");

Benim Düşüncem:

API kullanımı projeyi bir üst seviyeye taşıyor. Gerçek veriyi çekmek, uygulamayı daha dinamik ve etkileyici yapıyor 😎

b) Todo List / Görev Yönetimi

  • Kullanıcı görev ekler, siler ve tamamlar

  • LocalStorage ile tarayıcıda saklanır

  • Event ve DOM ile tüm işlemler interaktif

let gorevler = [];

function gorevEkle(gorev) {
gorevler.push({isim: gorev, tamamlandi: false});
localStorage.setItem("gorevler", JSON.stringify(gorevler));
}

Benim Düşüncem:

Todo list hem temel uygulama mantığını hem de veriyi kalıcı saklamayı gösteriyor. Küçük ama güçlü bir proje 😎

c) Basit Oyun – JavaScript ile Mini Oyunlar

  • Sayıyı tahmin etme oyunu

  • Tıklama bazlı oyun

  • Canvas ile basit grafikler

let sayi = Math.floor(Math.random() * 100) + 1;
let tahmin = prompt("1-100 arasında bir sayı tahmin edin:");
if(Number(tahmin) === sayi) alert("Tebrikler! Bildiniz 😎");
else alert("Yanlış! Doğru sayı: " + sayi);

Benim Düşüncem:

Oyun projeleri hem eğlenceli hem de event, koşul ve fonksiyon mantığını pekiştiriyor 😎

🔹 3. Modern JavaScript Kütüphaneleri ve Çerçeveler

  • React.js: Component tabanlı, büyük projelerde ideal

  • Vue.js: Basit ve öğrenmesi kolay

  • Node.js: Backend JavaScript, API ve sunucu işlemleri

  • Express.js: RESTful API geliştirme

Benim Düşüncem:

Artık tek başına vanilla JS değil, modern framework ve kütüphanelerle büyük projeler geliştirebilirsin. İşe yarar ve portföyünü güçlendirir 😎

🔹 4. İleri Düzey Proje Entegrasyon Önerileri

  1. Hava Durumu + Todo List: Kullanıcı görev eklerken hava durumunu görsün

  2. Mini Oyun + LocalStorage: Kullanıcının skorunu kaydet

  3. API + DOM + Event: Kullanıcı arayüzünde dinamik içerik ve filtreleme

  4. React + API: Daha büyük uygulamalarda component ve state yönetimi

Benim Düşüncem:

Projeleri birleştirmek, öğrendiklerini bir üst seviyeye çıkarıyor. Artık küçük projelerden büyük uygulamalara geçebilirsin 😎

🧠 Özet – Bu Bölümde Öğrendiklerimiz

  • İleri düzey proje fikirleri ve API entegrasyonu

  • Todo list ve mini oyun örnekleri

  • Modern JavaScript framework ve kütüphaneleri

  • Proje entegrasyonu ile dinamik ve güçlü uygulamalar

📘 Sonuç – JavaScript Yolculuğumuz

Artık sıfırdan başlayıp:

  • Temel değişkenler ve operatörler

  • Fonksiyonlar ve scope

  • Diziler ve objeler

  • DOM ve event yönetimi

  • Asenkron işlemler ve API kullanımı

  • Mini ve ileri projeler

…her şeyi kapsayan bir JavaScript bilgisine sahibiz.

Benim Düşüncem:

Sıfırdan zirveye JavaScript öğrenmek, sabır ve uygulama ile mümkün. Artık gerçek projeler geliştirebilir, web dünyasında aktif rol alabilirsin! 🚀

Yazar Hakkında

Mehmet Ali Uçar 243 yazı
Tüm yazıları

Benzer Yazılar

Web’in Geleceği – Web 4.0 ve Ötesi 7 dk
Yazılım

Web’in Geleceği – Web 4.0 ve Ötesi
Yapay Zeka ile Ses Tanıma ve Asistan Geliştirme (Python + NLP) 4 dk
Yapay Zeka

Yapay Zeka ile Ses Tanıma ve Asistan Geliştirme (Python + NLP)
Event-Driven Sistemler Nedir? 2 dk
Yazılım

Event-Driven Sistemler Nedir?

Bir Cevap Yaz

E-posta adresiniz yayınlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir.

0/30 karakter

5 Yorum

  1. Nida 29 Ekim 2025,

    Dayı bütün javayı burayı dökmüşsün emegine sağlık

  2. Öyle isim 29 Ekim 2025,

    Tiktok yayindan geldim mustafa hocamızın içerik önerisi olarak bunu önerdi dehset bir yazi olmus

  3. İrem 29 Ekim 2025,

    Mehmet Ali bu içeriği bekliyordum videolu da anlatım bekliyorum yandex aramalardan geldim

  4. Deniz Erdem 29 Ekim 2025,

    Google üzerinden geldim yeni bir site güncel bilgiler niceee

  5. Ferhat 29 Ekim 2025,

    Bu nasıl dolu dolu içerik böyle yazılımın dehası