Yeni başlayanlar için JavaScript temelleri: kısa, adım adım rehber

Giriş: JavaScript nedir ve neden öğrenilir?

JavaScript, web sayfalarına dinamiklik ve etkileşim kazandırmak için kullanılan yaygın bir programlama dilidir. Tarayıcı üzerinde kullanıcı etkinliklerine tepki verme, içerik güncelleme ve veri işleme gibi görevler için sıkça tercih edilir. Bu yazıda temel kavramları adım adım açıklayacak, kısa örneklerle nasıl başladığınızı göstereceğim. Daha derin teknik referanslar için MDN JavaScript Rehberi ve Microsoft Learn dersleri faydalı olacaktır.

Hızlı kurulum: kodu nerede çalıştırabilirsiniz?

Yeni başlayanlar için iki hızlı yol vardır:

• Tarayıcı konsolu: Her modern tarayıcıda geliştirici araçları bulunur. Geliştirici konsolunu açıp JavaScript ifadelerini doğrudan çalıştırabilirsiniz (genelde F12 veya tarayıcı menüsünden erişilir).
• Node.js: Sunucu tarafı veya terminalde çalıştırmak için Node.js kurulumu yapılabilir. Basit dosyalar oluşturup node dosya.js komutuyla çalıştırabilirsiniz.

Tarayıcı tabanlı denemeler, DOM (sayfa içi) etkileşimlerini görmek için pratik bir yoldur; Node.js ise dilin genel özelliklerini komut satırında denemek için uygundur.

Temel sözdizimi: değişkenler ve bildirimler

JavaScript'te verileri saklamak için değişkenler kullanılır. En yaygın üç bildirim şekli let, const ve eski kodlarda görülen vardır. Genel öneri, yeniden atama gerekmiyorsa const, gerekli durumlarda let kullanmaktır. (Detaylı referans: MDN - Üst değişkenler ve tipler.)

Örnek:
const isim = "Ayşe";
let yas = 25;
yas = yas + 1;
console.log(isim, yas);

const ve nesneler

Bir değişken const ile tanımlandığında aynı isimle yeniden atama yapılamaz, ancak eğer değer bir nesne veya dizi ise o nesnenin içeriği değiştirilebilir. Bu ayrımı anlamak önemli.

Veri tipleri: kısa özet

Temel veri tipleri arasında sayı (number), dize (string), boolean, null, undefined, object ve symbol bulunur. Diziler de nesne türünün özel bir halidir.

Örnek kullanım:

const skor = 10;
const mesaj = "Merhaba";
const aktif = true;
const liste = ["elma", "muz"];
const kisi = { ad: "Ali", yas: 30 };

Fonksiyonlar: görevleri paketleyin

Fonksiyonlar, belirli bir görevi yerine getiren kod bloklarıdır. İki yaygın türü fonksiyon bildirimi (function declaration) ve ok fonksiyonlarıdır (arrow functions).

Bildirilen fonksiyon örneği:
function selamla(isim) {
  return `Merhaba, ${isim}!`;
}
console.log(selamla("Dünya"));

Arrow function örneği:
const kareAl = (x) => x * x;
console.log(kareAl(4));

Kontrol akışı: koşullar ve döngüler

Program akışını kontrol etmek için koşullu ifadeler (if, switch) ve döngüler (for, while, for...of) kullanılır.

if örneği:
const puan = 75;
if (puan >= 50) {
  console.log("Geçti");
} else {
  console.log("Kaldı");
}

for döngüsü örneği:
for (let i = 0; i < 3; i++) {
  console.log(i);
}

Diziler ve nesneler: sık kullanılan işlemler

Dizilerde ekleme, okuma ve döngü ile erişim sık yapılır. Nesneler anahtar-değer çiftleriyle veriyi organize eder.

Örnekler:
const meyveler = ["elma", "muz"];
meyveler.push("armut");
console.log(meyveler[0]); // "elma"

const kisi = { ad: "Zeynep", meslek: "öğrenci" };
console.log(kisi.ad);

Basit etkileşim örneği (tarayıcı için)

Bir düğmeye tıklandığında sayfadaki bir yazıyı değiştiren basit bir kod parçası (HTML içinde bir buton ve bir paragraf olduğunu varsayarak):

document.getElementById('btn').addEventListener('click', function() {
  document.getElementById('mesaj').textContent = 'Selam! JavaScript çalışıyor.';
});

Bu tarz DOM (Document Object Model) etkileşimleri hakkında daha fazla öğrenmek için MDN'in DOM rehberleri yararlıdır: MDN - DOM Giriş.

Hataları bulma ve iyi uygulamalar

Hatalarla karşılaştığınızda şu adımları izleyin:

• Tarayıcı konsolundaki hata mesajını okuyun; satır numarası ve hata türü yardımcı olur.
• console.log ile değişkenleri kontrol edin.
• Gerekirse adım adım breakpoint (kesme noktası) kullanın.
• Değişken kapsamlarına dikkat edin; global alanı gereksiz kullanmaktan kaçının.

Ayrıca modern JavaScript özelliklerini öğrenmek için resmi kaynakları takip etmek faydalıdır. Microsoft Learn'de başlangıç için yapılandırılmış dersler bulabilirsiniz: Microsoft Learn - JavaScript Temelleri.

Adım adım pratik alıştırmalar (kısa görevler)

1. Bir dizi oluşturun ve içine 5 sayı ekleyip toplamını hesaplayın. (İpucu: döngü veya array metodları kullanılabilir.)
2. Kullanıcıdan isim isteyip, ismi büyük harfe çeviren bir fonksiyon yazın.
3. Bir nesne tanımlayın ve içinde ad, soyad ve yaş alanları olsun; yaşı 1 artıran bir fonksiyon yazın.
4. Bir for döngüsü ile 1'den 10'a kadar olan sayıların karelerini konsola yazdırın.
5. Basit bir butona tıklandığında sayfadaki bir öğenin rengini değiştiren kod yazın.

Bu görevler, öğrendiklerinizi pekiştirmeniz için tasarlanmıştır. Her biri için önce küçük bir plan yazın, sonra kodu adım adım çalıştırın.

Kaynaklar ve ileri adımlar

Resmi ve güncel rehberlere göz atmak öğrenmeyi hızlandırır:

• MDN Web Docs — JavaScript Guide (detaylı referans ve örnekler).
• Microsoft Learn — JavaScript Temelleri (başlangıç dersleri).
• EBA Akademi — JavaScript Temelleri (eğitim içeriği).

Özet

• JavaScript ile değişkenleri (let, const), fonksiyonları ve kontrol akışını öğrendiniz.
• Basit diziler, nesneler ve DOM etkileşimleri ile pratik yapın.
• Hataları konsol ve breakpoint kullanarak tespit edin, küçük adımlarla ilerleyin.

Not: Bu rehber temel kavramları hızlıca aktarmayı amaçlar. Örneklerin bazı teknik ayrıntıları ve daha ileri konular için MDN Web Docs ve Microsoft Learn kaynaklarına başvurabilirsiniz.