Adım Adım JavaScript Temelleri: Kısa ve Çalışır Kod Örnekler

Giriş

Bu rehber, sıfırdan JavaScript öğrenmek isteyenler için kısa ve çalışır örneklerle temel kavramları adım adım açıklar. Örnekler tarayıcı konsolunda veya basit bir HTML dosyasında kolayca çalıştırılacak şekilde hazırlandı. Temel tanımlar ve daha derin okumalar için MDN Web Docs ve JavaScript.info gibi kaynaklara başvurmanızı öneririm; bu kaynaklar dili kapsamlı ve adım adım ele alır (MDN Web Docs, JavaScript.info).

JavaScript nedir ve nerelerde kullanılır?

JavaScript, web sayfalarında etkileşim eklemek için en yaygın kullanılan programlama dillerinden biridir. Hem tarayıcı içinde (DOM manipülasyonu, olay işleme) hem de sunucu tarafında (Node.js) çalışır. Dili öğrenirken önce temel sözdizimini, veri tiplerini ve kontrol akışını öğrenmek, ardından DOM ve asenkron işlemlere geçmek pratik olur (özet kaynak: web.dev, MDN Web Docs).

Çalışma ortamları: Tarayıcı konsolu ve Node.js

Basit kodları tarayıcı konsolunda (Developer Tools) doğrudan çalıştırabilirsiniz. Daha geniş projeler veya sunucu tarafı kod için Node.js kullanılır. Tarayıcı ve Node ortamı arasındaki farklar, DOM erişiminin tarayıcıya özel olması gibi konularda önem taşır; bu farkları öğrenmek ileride hata çıkmasını azaltır (ayrıntılar için: MDN).

Hızlı Başlangıç: Konsolda 'Merhaba Dünya'

Tarayıcı konsolunda denemek için en basit örnek:

console.log('Merhaba, dünya!');

Bu satır konsola metin yazdırır. console.log, hata ayıklama ve çıktı kontrolü için en sık kullanılan araçlardan biridir.

Değişkenler ve veri tipleri

JavaScript'te değişkenleri let, const veya (eski kodlarda) var ile tanımlarsınız. Temel veri tipleri: string, number, boolean, null, undefined, object ve symbol. Kısa örnekler:

// Değişken tanımlama const isim = 'Ayşe'; let yas = 25; let aktif = true; // Şablon stringleri console.log(`Merhaba ${isim}, yaşın ${yas}`);

const sabit atama için, let ise yeniden atama gerektiren durumlar için uygundur. (Kaynak: MDN - Types).

Fonksiyonlar, koşullar ve döngüler

Fonksiyonlar kodu yeniden kullanmanızı sağlar. Koşullar ve döngüler kontrol akışını yönetir. Örnek:

// Fonksiyon function topla(a, b) { return a + b; } // Koşul if (topla(2, 3) > 4) { console.log('Sonuç 4 ten büyük'); } // Döngü for (let i = 0; i < 3; i++) { console.log(i); }

Fonksiyonları arrow function biçiminde de yazabilirsiniz: const kare = x => x * x;.

Diziler ve nesneler

Diziler koleksiyonları, nesneler ise anahtar-değer çiftlerini tutar. Kısa örnek:

const sayilar = [1, 2, 3, 4]; const kareler = sayilar.map(x => x * x); console.log(kareler); const kisi = { isim: 'Mehmet', yas: 30 }; console.log(kisi.isim);

map, filter, reduce gibi metotlar dizilerle çalışırken sık kullanılır ve fonksiyonel bir yaklaşım sağlar.

DOM ile basit etkileşim örneği

Aşağıdaki örnek, bir butona tıklandığında metni değiştirmek için kullanılabilir. Bu kodu bir HTML dosyasında script içinde veya konsolda uygun şekilde çalıştırabilirsiniz.

// Buton ve paragraf seçme const btn = document.querySelector('#myButton'); const p = document.querySelector('#myText'); btn.addEventListener('click', () => { p.textContent = 'Butona tıkladınız!'; });

DOM seçimi ve olay dinleme hakkında daha fazla bilgi için MDN'in DOM rehberine bakabilirsiniz: MDN - DOM.

Asenkron JavaScript: Promise ve async/await

Uzun süren işlemler (API çağrıları, dosya okuma vb.) asenkron olarak ele alınır. Promise yapısı veya async/await sözdizimi daha temiz kod sağlar. Kısa bir örnek (tarayıcıda çalıştırılabilir):

// Promise örneği function bekle(ms) { return new Promise(resolve => setTimeout(resolve, ms)); } async function calistir() { console.log('Başladı'); await bekle(500); console.log('500 ms sonra devam'); } calistir();

Gerçek API çağrılarında fetch kullanılır; detaylı kullanım ve tarayıcı farklılıkları için web.dev ve MDN kaynaklarına bakınız (web.dev, MDN - Fetch API).

Hata yakalama ve debug

Hata yakalamak için try/catch kullanılır; console ve tarayıcı geliştirici araçları (DevTools) hata ayıklamada temel araçlardır. Örnek:

try { JSON.parse('geçersiz json'); } catch (e) { console.error('JSON parse hatası:', e.message); }

DevTools ile değişkenleri inceleyebilir, breakpoint ekleyebilir ve çağrı yığınını görebilirsiniz. Bu, davranışı anlamak için en etkili yöntemlerden biridir.

Küçük proje fikirleri ve uygulama adımları

Pratik yaparken öğrenme hızınız artar. Başlangıç için önerilen mini projeler:

To‑do listesi: görev ekleme, silme, tamamlandı işareti. Adımlar: HTML iskeleti → DOM seçimi → olay dinleyiciler → yerel depolama (localStorage).
Hava durumu uygulaması: ücretsiz bir API'den veri çekme → fetch ile veriyi gösterme → hata durumunu ele alma.
Basit hesap makinesi: olay tabanlı girişler → operatörlerin uygulanması → sonuç gösterimi.
Görsel galeri: küçük resim tıklanınca büyük resmi gösterme → basit CSS ile düzenleme.

Her proje için önce küçük bir adım atın, sonra özellik ekleyin. Kaynakların adım adım kılavuzları öğrenmeyi hızlandırır (JavaScript.info).

İyi uygulamalar: kısa kontrol listesi

Önce const, sonra let kullanın; global değişkenlerden kaçının.
Fonksiyonları küçük ve tek sorumluluklu tutun.
Asenkron kodda hata yakalamayı unutmayın (try/catch veya .catch()).
Tarayıcı uyumluluğu gerekiyorsa polyfill veya transpilasyon (Babel) düşünün.
DevTools ve console ile düzenli olarak test edin.

Kaynaklar ve sonraki adımlar

Daha derin bilgi için şu kaynakları öneririm: MDN Web Docs (genel referans ve API açıklamaları), JavaScript.info (temel ve örnek odaklı), Eloquent JavaScript (konsept derinliği) ve web.dev (modern web uygulamaları için rehberler).

Önerilen bağlantılar:

Bu makaledeki örnekler öğrenme amaçlıdır. Gerçek dünyada üretim (production) projelerinde performans, güvenlik ve tarayıcı uyumluluğu gibi ek adımlar gerekir. Başlarken küçük projelerle pratik yapın ve kaynaklara sık başvurun.

Adım Adım JavaScript Temelleri: Kısa ve Çalışır Kod Örnekleri