Giriş — Neden bu 10 örnek?

Bu yazıda JavaScript'in en temel yapı taşlarını kısa ve çalıştırılabilir örneklerle gösteriyoruz. Amaç, değişkenler, fonksiyonlar, koşullar, döngüler, diziler, nesneler ve basit asenkron kod gibi temel konuları hızlıca anlamak ve denemektir. Değişkenlerin nasıl tanımlandığı ve veri türleri hakkında örnekler için KodÖğreniyorum makalesine, dilin temel kavramları için ise JavaScript.info başvuru sayfasına göz atabilirsiniz.

Nasıl kullanılır? (Kısa çalışma talimatı)

1. Tarayıcıda: Herhangi bir web sayfasını açın, geliştirici araçlarını (F12) açın ve "Console" sekmesine yapıştırıp Enter ile çalıştırın.
2. Node.js kullanıyorsanız: Kodları example.js adlı dosyaya yapıştırın ve terminalde node example.js ile çalıştırın.
3. DOM örneklerini test etmek için basit bir HTML dosyası oluşturun veya tarayıcı console içinde gerekli HTML öğesinin var olduğundan emin olun.

10 Kısa JavaScript Örneği

1) Değişkenler: let, const, var

Değişkenler veriyi saklamak için kullanılır. JavaScript'te let ve const modern kullanımda tercih edilir; var ise fonksiyon-scope davranışı gösterir. (Kaynak: KodÖğreniyorum.)

let age = 30;
const name = `Ali`;
var isStudent = false;
console.log(`${name}, ${age} yaşında.`);

Beklenen çıktı: console'da 'Ali, 30 yaşında.' görünür.

2) Fonksiyon: tanımlama ve çağrı

Fonksiyonlar, belirli bir görevi yerine getiren kod bloklarıdır. Temel sözdizimi ve çağrı örneği:

function greet(name) {
return `Merhaba, ${name}!`;
}
console.log(greet('Ayşe'));

Beklenen çıktı: 'Merhaba, Ayşe!'. Fonksiyonlarla ilgili temel bilgiler için JavaScript.info faydalıdır.

3) Koşullu ifadeler: if / else

Program akışını kontrol etmek için koşullar kullanılır:

const num = 7;
if (num % 2 === 0) {
console.log(`${num} çift sayıdır.`);
} else {
console.log(`${num} tek sayıdır.`);
}

Beklenen çıktı: '7 tek sayıdır.'

4) For döngüsü: dizi üzerinde gezinme

Bir dizinin elemanlarını toplamak için for döngüsü örneği:

const numbers = [1, 2, 3, 4, 5];
let sum = 0;
for (let i = 0; i < numbers.length; i++) {
sum += numbers[i];
}
console.log('Toplam:', sum);

Beklenen çıktı: 'Toplam: 15'. Döngüler ve ana kullanım örnekleri hakkında JavaScript.info faydalı bilgiler sunar.

5) While döngüsü: koşula bağlı tekrar

While ile koşul sağlandığı sürece tekrar yapılır:

let count = 3;
while (count > 0) {
console.log('Sayaç:', count);
count--;
}
console.log('Bitti');

Beklenen çıktı: Sayaç: 3, Sayaç: 2, Sayaç: 1, Bitti.

6) Diziler ve metotlar: push, map, filter

Diziler birden çok değeri tek değişkende tutar ve çeşitli yöntemlerle işlenir:

const fruits = ['elma', 'armut', 'muz'];
fruits.push('çilek');
const upper = fruits.map(f => f.toUpperCase());
const longNames = fruits.filter(f => f.length > 4);
console.log(upper);
console.log(longNames);

Beklenen çıktı: büyük harfli dizi ve uzun isimleri içeren alt dizi. Diziler ve metotlar hakkında temel açıklamalar için kaynaklara bakabilirsiniz (örn. Programiz).

7) Nesneler: özellik ve yöntem

JavaScript nesneleri anahtar-değer çiftlerinden oluşur; metot eklemek için fonksiyon kullanılır:

const person = { name: 'Deniz', age: 25, city: 'İstanbul' };
const { name, age } = person;
console.log(`${name}, ${age} yaşında.`);
person.greet = function() { console.log(`Merhaba, ben ${this.name}`); };
person.greet();

Beklenen çıktı: 'Deniz, 25 yaşında.' ve ardından 'Merhaba, ben Deniz'.

8) DOM ile basit etkileşim (tarayıcıda)

Bir HTML düğmesine tıklanınca mesaj gösterme (HTML içinde bir button öğesi olması gerekir):

// HTML örneği: <button id='btn'>Tıkla</button>
const btn = document.getElementById('btn');
btn.addEventListener('click', () => {
alert('Butona tıklandı!');
});

Not: Bu kodu çalıştırmak için ilgili HTML öğesinin sayfada bulunması gerekir. Web etkileşimleri için JavaScript sık kullanılır (bakınız KodÖğreniyorum - adım adım).

9) Promise ve async/await: basit asenkron bekleme

Asenkron işlemleri kontrol etmek için Promise veya async/await kullanılır:

function wait(ms) {
return new Promise(resolve => setTimeout(resolve, ms));
}
async function demo() {
console.log('Bekleniyor...');
await wait(500);
console.log('500ms sonra devam');
}
demo();

Beklenen çıktı: önce 'Bekleniyor...' sonra 500ms arayla '500ms sonra devam'.

10) Kısa yardımcı fonksiyon: rest parametreleri ve reduce

Birden çok sayıyı toplayan kısa bir fonksiyon:

function sum(...nums) {
return nums.reduce((s, n) => s + n, 0);
}
console.log(sum(1, 2, 3, 4));

Beklenen çıktı: 10.

Pratik ipuçları ve sonraki adımlar

• Her örneği tarayıcı konsolunda veya Node.js'te çalıştırın ve farklı değerlerle oynamayı deneyin.
• Fonksiyonları küçük parçalara bölün; her parça için ayrı test yazın veya elle deneyin.
• Diziler ve objeler üzerinde çalışırken console.log ile ara sonuçları kontrol edin.
• Async kod yazarken try/catch ile hata yakalamayı öğrenin.

Kısa proje fikri (adım adım)

1. Basit bir To-Do listesi oluşturun (HTML, CSS, JS).
2. Yeni görev ekleme ve listeyi görüntüleme fonksiyonlarını yazın.
3. Görevleri dizi içinde saklayın; map ile listeyi güncelleyin.
4. LocalStorage ile sayfa yenilense bile görevleri saklayın.

Kontrol listesi (Öğrenme hedefleri)

• let/const/var arasındaki farkları açıklayabilme.
• Basit fonksiyon ve koşul yapıları yazabilme.
• Döngüler ve dizi metotlarını kullanarak veri işleyebilme.
• Asenkron basit işlemleri Promise veya async/await ile yönetebilme.

Kaynaklar ve ileri okumalar

• JavaScript Temelleri: Değişkenler, Türler ve Kısa Örnekler — KodÖğreniyorum
• JavaScript temelleri — JavaScript.info
• JavaScript Examples — Programiz

Not: Bu örnekler eğitim amaçlıdır ve üretim ortamlarında ekstra hata denetimi, girdi doğrulama ve güvenlik önlemleri gerekebilir. Örnekler temel kavramları pekiştirmek üzere sadeleştirilmiştir.