JavaScript öğrenmeye başlarken en hızlı ilerleten şey, kısa ama “çalıştırıp sonucu görebileceğiniz” örneklerdir. Aşağıdaki 10 örnek; temel sözdizimi, fonksiyonlar, akış kontrolü, veri yapıları, tarayıcı DOM etkileşimi ve fetch ile asenkron istek gibi konulara giriş yapmanızı hedefler.

Not: Bazı örnekler tarayıcıda (DOM, event) çalışır; bazıları hem tarayıcı hem Node.js ortamında çalışabilir. Modern özellikler için tarayıcı uyumluluğunu MDN uyumluluk tablolarından kontrol etmek iyi bir alışkanlıktır.

Bu örnekleri nerede çalıştırabilirsiniz?

• Tarayıcı konsolu: Chrome/Edge/Firefox’ta DevTools > Console sekmesinde kodu yapıştırıp çalıştırın.
• Basit bir HTML dosyası: DOM örnekleri için bir .html dosyasında <script> içinde çalıştırın.
• Node.js: Konsol çıktısı ve temel JS örnekleri genelde çalışır; ancak DOM API’leri Node.js’te varsayılan olarak yoktur.

Temel dil kavramları için MDN’nin başlangıç içeriği iyi bir referanstır: MDN JavaScript First Steps.

1) Console’a yazdırma: console.log

Amaç: Çıktıyı görmeyi öğrenin. Hata ayıklamada da en sık kullanacağınız araçlardan biridir.

console.log("Merhaba JavaScript!");
console.log("2 + 3 =", 2 + 3);

const user = { name: "Ada", role: "student" };
console.log("User:", user);

• Beklenen çıktı: Konsolda yazılar ve bir nesne görürsünüz.
• İpucu: Nesneleri log’lamak, ara adımları kontrol etmeyi kolaylaştırır.
• Uyumluluk: Tüm modern tarayıcılar ve Node.js.

2) Değişkenler: let, const ve basit veri tipleri

Amaç: Değişken tanımlama ve güncelleme. Başlangıçta genelde let ve const tercih edilir (blok kapsamı gibi davranışlar nedeniyle). Detaylar için: MDN First Steps.

const siteName = "Example";
let points = 10;

points = points + 5;

const isActive = true;
console.log(siteName, points, isActive);

• Beklenen çıktı: Example 15 true benzeri bir satır.
• Sık hata: const ile tanımlanan değişkene tekrar değer atamaya çalışmak hata üretir.
• Uyumluluk: Modern tarayıcılar ve Node.js. Eski tarayıcı hedefliyorsanız uyumluluk tablosuna bakın.

3) String birleştirme yerine template literal kullanımı

Amaç: Metin oluşturmayı daha okunur hale getirmek.

const firstName = "Ada";
const score = 42;

const message = `Merhaba ${firstName}, skorun: ${score}`;
console.log(message);

• Beklenen çıktı: Merhaba Ada, skorun: 42
• İpucu: Çok satırlı metinlerde de template literal pratik olur.
• Uyumluluk: Modern tarayıcılar ve Node.js. Eski tarayıcılarda dönüştürme (transpile) gerekebilir; genel yönlendirme için: MDN Browser compatibility.

4) Fonksiyon yazma: parametre ve return

Amaç: Tekrar eden işleri bir fonksiyonda toplamak. Fonksiyon temelleri için: MDN Functions.

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

const result = sum(5, 7);
console.log("Toplam:", result);

• Beklenen çıktı: Toplam: 12
• Sık hata: return unutulursa fonksiyon undefined dönebilir.
• Uyumluluk: Tüm modern tarayıcılar ve Node.js.

5) Arrow fonksiyon: kısa sözdizimi ve this farkı

Amaç: Arrow fonksiyonların kısa yazımını görmek; ayrıca this davranışının normal fonksiyondan farklı olabildiğini öğrenmek. MDN bu farkı özellikle vurgular: MDN Functions.

const user = {
name: "Ada",
sayHiNormal: function () {
console.log("Normal this.name:", this.name);
},
sayHiArrow: () => {
console.log("Arrow this.name:", this && this.name);
}
};

user.sayHiNormal();
user.sayHiArrow();

• Beklenen çıktı: Normal fonksiyon genellikle Ada yazdırır. Arrow fonksiyon ise kendi this bağlamını oluşturmadığı için, bulunduğu ortama bağlı olarak undefined ya da beklenmedik bir değer üretebilir.
• İpucu: Nesne metodu yazarken this kullanmanız gerekiyorsa çoğu zaman normal fonksiyon daha nettir.
• Uyumluluk: Modern tarayıcılar/Node.js. Eski tarayıcılarda dönüştürme gerekebilir; genel yönlendirme için: MDN.

6) Koşullar: if/else ile karar verme

Amaç: Bir koşula göre farklı sonuç üretmek.

const age = 17;

if (age >= 18) {
console.log("Erişim: izinli");
} else {
console.log("Erişim: kısıtlı");
}

• Beklenen çıktı: Erişim: kısıtlı
• Sık hata: = (atama) ile === (eşitlik) karıştırılabilir. Karşılaştırmalarda genelde === tercih edilir.
• Uyumluluk: Tüm modern tarayıcılar ve Node.js.

7) Döngüler: listedeki değerleri toplama

Amaç: Dizide dolaşma ve birikimli işlem yapma.

const numbers = [3, 5, 7];
let total = 0;

for (const n of numbers) {
total += n;
}

console.log("Toplam:", total);

• Beklenen çıktı: Toplam: 15
• İpucu: Başlangıç seviyesinde önce net ve okunur döngülerle ilerleyin; sonra map/filter/reduce gibi yöntemlere geçmek daha kolay olur (pratik alıştırmalar için: freeCodeCamp JavaScript Basics).
• Uyumluluk: Modern tarayıcılar ve Node.js. Eski tarayıcılar için uyumluluk kontrolü gerekebilir.

8) Diziler: filter ile seçme, map ile dönüştürme

Amaç: “Veriyi seç, dönüştür, göster” gibi çok sık kullanılan bir akış kurmak.

const prices = [5, 12, 8, 130];

const expensive = prices.filter((p) => p > 10);
const labels = expensive.map((p) => `Fiyat: ${p}`);

console.log(expensive);
console.log(labels);

• Beklenen çıktı: İlk satırda [12, 130]; ikinci satırda metin dizisi.
• Sık hata: filter ve map yeni dizi döndürür; orijinal diziyi değiştirmez.
• Uyumluluk: Modern tarayıcılar ve Node.js’te yaygın olarak bulunur. Hedeflediğiniz tarayıcılarda destek durumunu MDN uyumluluk tablolarından kontrol edin: MDN browser compatibility.

9) DOM seçme + event: tıklayınca metin güncelleme (güvenli şekilde)

Amaç: Kullanıcı etkileşimiyle sayfadaki metni değiştirmek. Event’ler için MDN: Introduction to events.

Güvenlik notu: Basit örneklerde innerHTML cazip görünebilir; ancak kullanıcı girdisiyle birleştirildiğinde XSS riskini artırabilir. Metin koymak için textContent, yapı oluşturmak için createElement/appendChild gibi yöntemler çoğu zaman daha güvenlidir. Ayrıntı: MDN innerHTML security considerations.

Önce bir HTML sayfasına şu iskeleti koyduğunuzu varsayalım (sadece fikir vermesi için):

<button id="helloBtn" type="button">Selamla</button>
<p id="output">Henüz tıklanmadı.</p>

Ardından şu JavaScript’i çalıştırın:

const btn = document.querySelector("#helloBtn");
const output = document.querySelector("#output");

btn.addEventListener("click", () => {
output.textContent = "Merhaba! Butona tıkladınız.";
});

• Beklenen çıktı: Butona tıklayınca paragraf metni değişir.
• Sık hata: Seçici yanlışsa (#helloBtn gibi) querySelector null dönebilir. Konsolda kontrol edin.
• Uyumluluk: Modern tarayıcılarda çalışır. DOM API’leri Node.js’te yoktur.

10) fetch ile basit API çağrısı + hata yakalama

Amaç: Asenkron veri çekmek ve başarısızlık durumunu yönetmek. fetch Promise döndürür; hem .then hem async/await yaklaşımları yaygındır. Referans: MDN Fetch API.

async function loadTodo() {
try {
const res = await fetch("https://jsonplaceholder.typicode.com/todos/1");
if (!res.ok) throw new Error("HTTP status: " + res.status);

const data = await res.json();
console.log("Todo:", data.title);
} catch (err) {
console.log("İstek başarısız:", err.message);
}
}

loadTodo();

• Beklenen çıktı: Konsolda bir “todo” başlığı görürsünüz; ağ sorunu olursa hata mesajı yazdırılır.
• Sık hata: fetch bazı durumlarda (ör. HTTP 404) Promise’i otomatik reddetmeyebilir; bu yüzden res.ok kontrolü pratik bir alışkanlıktır.
• Uyumluluk: Modern tarayıcılar genelde destekler; bazı ortamlarda polyfill gerekebilir. Güncel destek durumunu MDN uyumluluk bilgisinden kontrol edin: MDN ve genel yönlendirme için MDN browser compatibility.

Mini kontrol listesi: Başlangıçta hızlı ilerlemek için

• Kısa çalıştır-dönüt döngüsü: Her örneği çalıştırın, çıktıyı görün, bir satır değiştirip sonucu tekrar gözlemleyin.
• Ortamı netleştirin: “Bu kod tarayıcı mı istiyor, Node.js mi?” sorusunu her seferinde sorun.
• Güvenli DOM alışkanlığı: Metin koymak için önce textContent; HTML birleştirme ihtiyacı varsa kaynağı ve riskleri düşünün (MDN uyarıları: innerHTML security).
• Uyumluluğu kontrol edin: Özellikle fetch, arrow fonksiyonlar, modern dizi metotları gibi özelliklerde hedef kitlenize göre MDN uyumluluk bilgisine bakın.

Sırada ne var?

Bu 10 örnekle temeli attıktan sonra şu adımlar mantıklı bir devam olur:

• Basit bir “To-do list” arayüzü yaparak DOM seçme, event ve dizi işlemlerini birlikte kullanın.
• Bir API’den veri çekip ekrana listeleme yapın (fetch + DOM) ve hata durumlarını (boş veri, ağ kesintisi) ele alın.
• MDN rehberlerinden temel konuları pekiştirin: First steps ve Functions.

Bu içerik eğitim amaçlıdır; üretim ortamında güvenlik ve uyumluluk gereksinimleri projeye göre değişebilir.