Bu sayfada JavaScript'in temel konseptlerini derinlemesine öğreneceksin. Her konu pratik örnekler ve etkileşimli editör ile pekiştirilmiştir. Kodlamada ustalaşmak için sabır ve düzenli pratik gereklidir.
Başlayalım ↓// İlk JavaScript kodunuz 🎉 const mesaj = "Merhaba Dünya!"; console.log(mesaj);
Derste yapay zeka ile çok güzel projeler yaptık — Qwen'e prompt yazarak hızlıca sonuç aldık. Ama fark ettiyseniz, "bu kodu değiştir" ya da "şunu ekle" dediğimizde bazen ne olduğunu anlamadan ilerliyorduk. İşte bu sayfa tam da o boşluğu doldurmak için var.
Derste yapay zeka araçlarını kullanmayı gördük ve çok işimize yaradı. Ama şunu hiç düşündünüz mü: YZ size bir kod yazıp verdiğinde, o kodda bir hata varsa ne yapacaksınız? Ya da YZ'nin önerdiği çözüm projenize uymuyorsa?
Bu sayfadaki konuları çalıştıktan sonra YZ'yi çok daha verimli kullanacaksınız. Çünkü artık YZ'nin yazdığı kodu okuyabilecek, hataları yakalayabilecek ve "bunu şöyle değiştir" derken ne istediğinizi gerçekten bileceksiniz. Önce temel, sonra araç — sıralama bu.
Derste kısaca değinmiştik: Bir web sayfasını düşünün. HTML sayfanın iskeletini oluşturur, CSS görünümünü belirler, JavaScript ise sayfaya hayat verir. Butona tıklayınca bir şey olması, formun kontrol edilmesi, animasyonlar — bunların hepsi JavaScript sayesinde mümkün.
Programlarken en çok kullanacağınız komut console.log() olacak. Bu komut tarayıcının konsoluna
mesaj yazdırır. Derste hata ararken konsoldan çıktı aldığımızı hatırlayın — işte o bu komut sayesinde
çalışıyordu.
// Konsola mesaj yazdırma console.log("Merhaba!"); // Yazı yazdırma console.log(42); // Sayı yazdırma console.log(10 + 20); // Hesaplama sonucu: 30 console.log("Yaşım:", 15); // Birden fazla değer console.log("5 + 3 =", 5 + 3); // Metin ve hesaplama birlikte
Derste kodların arasına açıklama eklediğimizi görmüştünüz. Yorum satırları çalıştırılmaz, sadece kodu okuyan kişiye bilgi verir.
// Bu tek satırlık bir yorumdur /* Bu çok satırlı bir yorumdur. İstediğiniz kadar satır kullanabilirsiniz. */ console.log("Bu satır çalışır"); // Bu yorum çalışmaz
Aşağıdaki editöre kendi adınızı ve yaşınızı konsola yazdıran bir kod yazın. Bu sefer YZ'ye sormadan, kendiniz yazın!
Bu sayfadaki editörler pratik yapmak için harika ama gerçek dünyada JavaScript kodlarını nerede yazıp çalıştırıyoruz? Bunu bilmenizi istiyorum çünkü kendi projelerinizde bu araçları kullanacaksınız.
En kolay ve hızlı yol! Derste birkaç kez birlikte açtığımızı hatırlayın. Herhangi bir web sayfasında F12 tuşuna basın (ya da sağ tıklayıp "İncele / Inspect" deyin), açılan panelde "Console" sekmesine geçin. Buraya doğrudan JavaScript yazıp Enter'a basabilirsiniz.
// Tarayıcı konsoluna şunu yazıp Enter'a basın: alert("Merhaba! Bu tarayıcıda çalışıyor 🎉"); // Ya da bir hesaplama yapın: 365 * 24 * 60 // Bir yılda kaç dakika var?
Gerçek bir web projesi yaparken JavaScript kodunuzu bir HTML dosyasının içine yazarsınız. Derste HTML
dosyalarımızın sonuna <script> etiketi eklediğimizi hatırlıyor olmalısınız:
<!DOCTYPE html> <html> <head> <title>Benim Sayfam</title> </head> <body> <h1 id="baslik">Merhaba</h1> <button id="btn">Tıkla</button> <!-- JavaScript kodunu buraya yazıyoruz --> <script> document.getElementById("btn") .addEventListener("click", () => { alert("Butona tıklandı!"); }); </script> </body> </html>
Daha düzenli projeler için JS kodunu ayrı dosyaya yazıp HTML'den bağlarsınız:
<!-- Ayrı dosyadan bağlama (tercih edilen yöntem) --> <script src="script.js"></script>
Profesyonel geliştiricilerin çoğu Visual Studio Code kullanır. Derste kısaca göstermiştim — Live Server eklentisi ile dosyanızı kaydeder kaydetmez tarayıcı otomatik güncellenir:
index.html ve script.js dosyalarını oluşturunJavaScript sadece tarayıcıda çalışmaz! Node.js sayesinde bilgisayarınızda, sunucularda ve hatta robotlarda JavaScript çalıştırabilirsiniz.
# Node.js kurulduktan sonra terminalde: node script.js # Dosyayı çalıştır node # İnteraktif mod (konsol gibi)
Derste değişkenlerden kısaca bahsetmiştik — verileri saklamak için kullanılan kutular gibi olduklarını söylemiştim. Şimdi bunu detaylıca pekiştireceğiz.
JavaScript'te değişken tanımlamanın üç yolu var. Derste genelde let ve const
kullandık:
| Anahtar Kelime | Açıklama | Değiştirilebilir mi? |
|---|---|---|
let |
Modern değişken tanımlama. Değeri sonradan değiştirilebilir. | ✅ Evet |
const |
Sabit değer. Bir kere tanımlanır, değiştirilemez. | ❌ Hayır |
var |
Eski yöntem. Artık pek kullanılmaz. | ✅ Evet |
// let — değiştirilebilir let isim = "Ayşe"; console.log(isim); // "Ayşe" isim = "Fatma"; // Değeri değiştirdik console.log(isim); // "Fatma" // const — sabit, değiştirilemez const PI = 3.14159; console.log(PI); // 3.14159 // PI = 3.14; ← Bu hata verir! // var — eski yöntem (kullanmamaya çalışın) var sehir = "İstanbul"; console.log(sehir); // "İstanbul"
const, değişecekse let kullanın.
var kullanmaktan kaçının — derste de hep böyle yaptık.
Derste YZ'nin ürettiği kodlarda değişken isimlerinin genellikle İngilizce olduğunu görmüştünüz — bu bir standarttır ama Türkçe de kullanabilirsiniz:
_ veya $ ile başlamalı (rakamla başlayamaz)ogrenciAdi
// ✅ Doğru isimlendirme let ogrenciAdi = "Mehmet"; let yas = 15; let _ozelDeger = 100; let enBuyukSayi = 999; // ❌ Yanlış isimlendirme // let 1sayi = 10; ← Rakamla başlayamaz // let öğrenci adı = ""; ← Boşluk kullanılamaz // let let = 5; ← Anahtar kelime kullanılamaz
Backtick (`) karakteri ile değişkenleri yazıların içine kolayca yerleştirebilirsiniz. Derste
YZ'nin ürettiği kodlarda bunu çok gördük — artık ne işe yaradığını bileceksiniz:
const ad = "Zeynep"; const yas = 14; // Eski yöntem — + ile birleştirme console.log("Merhaba, ben " + ad + ". Yaşım " + yas); // Yeni yöntem — template literal (bunu kullanın!) console.log(`Merhaba, ben ${ad}. Yaşım ${yas}`); // İçinde hesaplama da yapılabilir console.log(`5 yıl sonra ${yas + 5} yaşında olacağım`);
YZ'ye sormadan tamamlayın:
1. ad, yas ve
sehir adında üç değişken oluşturun.
2. Template literal kullanarak mesajı yazdırın.
JavaScript'te farklı türlerde veriler var. Derste YZ ile kod yazarken "string", "number" gibi terimleri gördük ama tam olarak ne anlama geldiğini bilmeden geçtik. Şimdi bunu net bir şekilde öğreneceğiz.
| Tip | Açıklama | Örnek |
|---|---|---|
string |
Metin / yazı | "Merhaba" |
number |
Tam sayı veya ondalık sayı | 42, 3.14 |
boolean |
Doğru veya yanlış | true, false |
undefined |
Tanımsız (değer atanmamış) | undefined |
null |
Bilinçli olarak boş bırakılmış | null |
array |
Liste / dizi | [1, 2, 3] |
object |
Anahtar-değer çifti | {ad: "Ali"} |
"5" + 3 gibi hatalar oluşur ve
siz farkına bile varmazsınız. Veri tiplerini bilirseniz bu tuzaklara düşmezsiniz.
Bir değerin tipini öğrenmek için typeof kullanılır. Hata ayıklarken çok işinize yarayacak:
console.log(typeof "Merhaba"); // "string" console.log(typeof 42); // "number" console.log(typeof true); // "boolean" console.log(typeof undefined); // "undefined" console.log(typeof null); // "object" (JS'in garip bir davranışı!)
Bazen bir veri tipini başka bir tipe çevirmek gerekir. Derste formdan aldığımız değerin hep string geldiğini, toplama yapmadan önce sayıya çevirmemiz gerektiğini görmüştük:
// String → Number let sayi = Number("42"); // 42 let sayi2 = parseInt("100px"); // 100 let ondalik = parseFloat("3.14"); // 3.14 // Number → String let yazi = String(42); // "42" // DİKKAT! + operatörü ile string birleştirme tuzağı console.log("5" + 3); // "53" (birleştirdi!) console.log(5 + 3); // 8 (topladı) console.log(Number("5") + 3); // 8 (doğru yol)
"5" + 3 yazarsanız JavaScript bunu toplamak yerine birleştirerek
"53" yapar. Bu derste de karşılaştığımız, çok sık yapılan bir hatadır!
typeof ile değerlerin tiplerini bulun, sonra "10" ile
5'i toplayarak doğru sonucu elde edin. YZ'ye sormadan çözün!
Operatörler, değerler üzerinde işlem yapmamızı sağlar. Matematik dersinden zaten biliyorsunuz ama JavaScript'teki bazı operatörler biraz farklı davranıyor. Derste bu tuzaklara birkaç kez düştük, hatırlarsınız.
| Operatör | İşlem | Örnek | Sonuç |
|---|---|---|---|
+ |
Toplama | 10 + 3 |
13 |
- |
Çıkarma | 10 - 3 |
7 |
* |
Çarpma | 10 * 3 |
30 |
/ |
Bölme | 10 / 3 |
3.33... |
% |
Mod (kalan) | 10 % 3 |
1 |
** |
Üs alma | 2 ** 3 |
8 |
let a = 20, b = 7; console.log(a + b); // 27 console.log(a - b); // 13 console.log(a * b); // 140 console.log(a / b); // 2.857... console.log(a % b); // 6 (kalan) console.log(2 ** 10); // 1024 // Kısayollar — bunları çok kullanacaksınız let x = 10; x += 5; // x = x + 5 → 15 x -= 3; // x = x - 3 → 12 x *= 2; // x = x * 2 → 24 x++; // x = x + 1 → 25
İki değeri karşılaştırır ve true veya false döner. Derste if/else yaparken bunları
kullanmıştık:
console.log(5 === 5); // true (eşit mi? — tip dahil) console.log(5 === "5"); // false (tip farklı!) console.log(5 == "5"); // true (sadece değer kontrol) console.log(10 > 5); // true console.log(3 >= 3); // true
=== (üç eşittir) kullanın. ==
beklenmedik sonuçlar verebilir. Bunu derste de söylemiştim.
// && (VE) — her iki koşul da doğruysa true console.log(true && true); // true console.log(true && false); // false // || (VEYA) — en az biri doğruysa true console.log(true || false); // true console.log(false || false); // false // ! (DEĞİL) — tersini alır console.log(!true); // false // Gerçek hayat örneği let yas = 16, izinVar = true; console.log(yas >= 18 || izinVar); // true
İki sayı tanımlayın ve tüm aritmetik işlemleri yapıp sonuçları yazdırın. Bonus: Hangisinin büyük olduğunu kontrol edin.
Koşullar, programın farklı durumlara göre farklı işler yapmasını sağlar. Derste "eğer şu doğruysa bunu yap, değilse şunu yap" mantığını anlatmıştım. Şimdi detaylıca uygulayalım.
let not = 75; if (not >= 90) { console.log("Pekiyi! 🌟"); } else if (not >= 70) { console.log("İyi 👍"); } else if (not >= 50) { console.log("Geçer 😐"); } else { console.log("Kaldı 😔"); } // Birden fazla koşul birleştirme let yas = 16, ehliyetVar = false; if (yas >= 18 && ehliyetVar) { console.log("Araba kullanabilirsin"); } else if (yas >= 18) { console.log("Yaşın uygun ama ehliyet lazım"); } else { console.log("Henüz 18 yaşından küçüksün"); }
Kısa koşullar için tek satırda yazılabilen ternary operatör. YZ'nin ürettiği kodlarda bunu çok görürsünüz:
let yas = 20; let durum = yas >= 18 ? "Yetişkin" : "Çocuk"; console.log(durum); // "Yetişkin" // switch — çok seçenekli durumlarda let gun = "Cuma"; switch (gun) { case "Pazartesi": console.log("Hafta başladı 😤"); break; case "Cuma": console.log("Neredeyse hafta sonu! 😄"); break; case "Cumartesi": case "Pazar": console.log("Hafta sonu! 🎉"); break; default: console.log("Normal bir gün"); }
Bir not değişkeni oluşturun ve if/else ile harf notunu belirleyin. Kendi
başınıza düşünüp yazın!
Döngüler, aynı kodu tekrar tekrar çalıştırmamızı sağlar. Derste bir listedeki öğrencilerin isimlerini tek tek yazdırmak yerine döngü kullandığımızı hatırlayın.
// 1'den 5'e kadar sayma for (let i = 1; i <= 5; i++) { console.log(`Sayı: ${i}`); } // Çift sayıları bulma for (let i = 0; i <= 20; i += 2) { console.log(i); } // Geriye doğru sayma (roket fırlatma!) for (let i = 10; i >= 1; i--) { console.log(`${i}...`); } console.log("🚀 Kalkış!"); // Dizi üzerinde gezinme let renkler = ["kırmızı", "mavi", "yeşil"]; for (let i = 0; i < renkler.length; i++) { console.log(renkler[i]); }
// while — koşul doğru olduğu sürece çalışır let sayac = 1; while (sayac <= 5) { console.log(`While: ${sayac}`); sayac++; // Bunu unutursanız sonsuz döngü! } // for...of — dizi elemanlarını gezme (modern yol) let meyveler = ["elma", "armut", "çilek"]; for (let meyve of meyveler) { console.log(`🍎 ${meyve}`); } // break — döngüyü durdurur for (let i = 1; i <= 10; i++) { if (i === 5) break; console.log(i); // 1, 2, 3, 4 } // continue — bu turu atla for (let i = 1; i <= 5; i++) { if (i === 3) continue; console.log(i); // 1, 2, 4, 5 }
Bir sayının çarpım tablosunu yazdırın. Bu klasik bir programlama egzersizidir — YZ'ye sormadan çözmenizi istiyorum.
Derste "fonksiyon, bir makine gibidir: malzeme verirsin, ürün çıkar" demiştim. Aynı kodu tekrar tekrar yazmak yerine bir fonksiyon tanımlarsınız ve istediğiniz zaman çağırırsınız.
// 1. Klasik fonksiyon function selamla(isim) { console.log(`Merhaba ${isim}!`); } selamla("Ahmet"); // "Merhaba Ahmet!" // 2. Değer döndüren fonksiyon (return) function topla(a, b) { return a + b; } let sonuc = topla(5, 3); console.log(sonuc); // 8 // 3. Varsayılan parametre function guc(taban, us = 2) { return taban ** us; } console.log(guc(5)); // 25 console.log(guc(2, 10)); // 1024
YZ'nin ürettiği kodlarda sürekli => işaretini görüyordunuz — işte bu arrow fonksiyon demek:
// Klasik function kare(x) { return x * x; } // Arrow — aynı işi daha kısa yapar const kare2 = (x) => x * x; console.log(kare(5)); // 25 console.log(kare2(5)); // 25 // Çok satırlı arrow const selamMesaji = (isim, saat) => { let mesaj = saat < 12 ? "Günaydın" : "İyi günler"; return `${mesaj}, ${isim}!`; }; console.log(selamMesaji("Ali", 9)); // "Günaydın, Ali!"
Üç fonksiyonu tamamlayın — derste mantığını anlatmıştım, şimdi kendiniz yazın:
1.
alanHesapla(en, boy)
2. ciftMi(sayi)
3. faktoriyel(n)
Diziler, birden fazla değeri tek bir değişkende saklar. Derste sınıf listesi ve notlar gibi örneklerle çalışmıştık. Dizi metodlarını bilmeniz şart — YZ kodlarında bunlara çok rastlayacaksınız.
let renkler = ["kırmızı", "mavi", "yeşil"]; // Erişim (index 0'dan başlar!) console.log(renkler[0]); // "kırmızı" console.log(renkler.length); // 3 // Eleman ekleme / silme renkler.push("sarı"); // Sona ekle renkler.pop(); // Sondan sil renkler.unshift("mor"); // Başa ekle renkler.shift(); // Baştan sil // Arama ve birleştirme console.log(renkler.includes("mavi")); // true let a = [1,2], b = [3,4]; console.log([...a, ...b]); // [1,2,3,4]
[0], ikinci eleman [1]'dir.
Diziler üzerinde güçlü işlemler yapan modern yöntemler. Hem kendi kodlarınızda hem YZ'nin kodlarını okurken sürekli karşılaşacaksınız:
let sayilar = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]; // forEach — her eleman için işlem yap sayilar.forEach(s => console.log(s)); // map — dönüştür, yeni dizi oluştur let kareler = sayilar.map(s => s * s); console.log(kareler); // [1,4,9,16,...] // filter — koşula uyanları seç let ciftler = sayilar.filter(s => s % 2 === 0); console.log(ciftler); // [2,4,6,8,10] // reduce — tek değere indirge let toplam = sayilar.reduce((acc, s) => acc + s, 0); console.log("Toplam:", toplam); // 55 // find — koşula uyan ilk eleman let ilk = sayilar.find(s => s > 7); console.log("İlk > 7:", ilk); // 8
Notlar dizisini kullanarak ortalama hesaplayın, başarılı notları filtreleyin, en yüksek/düşük notu bulun. Derste benzerini yapmıştık, şimdi sıfırdan yazın.
Objeler, ilişkili verileri anahtar-değer çiftleri olarak gruplar. Derste JSON formatını görmüştük — işte JSON aslında bir JavaScript objesidir.
let ogrenci = { ad: "Elif", yas: 15, sinif: "9-A", notlar: [85, 92, 78], aktif: true }; // Erişim console.log(ogrenci.ad); // "Elif" console.log(ogrenci["sinif"]); // "9-A" // Güncelleme ve ekleme ogrenci.yas = 16; ogrenci.email = "[email protected]"; // Destructuring — YZ kodlarında çok göreceksiniz const { ad, yas, notlar } = ogrenci; console.log(`${ad}, ${yas} yaşında`); // Obje metodları ve gezinme let kitap = { baslik: "Kürk Mantolu Madonna", yazar: "Sabahattin Ali" }; console.log(Object.keys(kitap)); // ["baslik","yazar"] console.log(Object.values(kitap)); // ["Kürk...","Sabahattin..."] for (let key in kitap) { console.log(`${key}: ${kitap[key]}`); }
Bir oyuncu profili objesi oluşturun, bilgileri yazdırın, envantere eşya ekleyin, seviye artırın ve destructuring kullanın.
DOM, HTML sayfasının JavaScript ile erişilebilen yapısıdır. Derste butona tıklayınca renk değiştirme, metin güncelleme gibi örnekler yapmıştık — işte o arkada hep DOM manipülasyonu vardı. Bu konu JavaScript'in en "görünür" kısmı.
// Eleman seçme let baslik = document.getElementById("baslik"); let btn = document.querySelector(".btn"); let hepsi = document.querySelectorAll(".btn"); // İçerik ve stil değiştirme baslik.textContent = "Yeni Başlık"; baslik.style.color = "red"; baslik.classList.add("aktif"); baslik.classList.toggle("vurgulu"); // Olay dinleyici (Event Listener) btn.addEventListener("click", () => { alert("Tıklandı!"); }); // Yeni eleman oluşturma let yeniP = document.createElement("p"); yeniP.textContent = "JS ile oluşturuldu!"; document.body.appendChild(yeniP);
Bu egzersiz doğrudan sayfadaki elemanları değiştirecek! Kodu yazın, çalıştırın ve deneme alanındaki etkileri görün. Derste benzerini yapmıştık — şimdi sıra sizde.
Bu paragrafın rengini değiştirmeyi dene.