Yeni Başlayanlar için JavaScript Temelleri: Adım Adım Kılavuz

JavaScript, web sayfalarını etkileşimli hale getirmek için yaygın olarak kullanılan bir programlama dilidir. Bu kılavuz, "javascript başlangıç kodları" arayan yeni başlayanlara yönelik olarak temel kavramları, pratik örnekleri ve küçük bir proje adımlarını sunar. Amacımız kısa zamanda çalışır durumda örnekler görmek ve öğrenme temellerinizi sağlamlaştırmaktır.

Bu kılavuzda neler var?

  • Kurulum ve hemen deneme
  • Değişkenler, veri tipleri ve operatörler
  • Fonksiyonlar, kontrol akışı ve döngüler
  • Diziler, nesneler ve DOM etkileşimi
  • Basit bir to‑do uygulaması için adımlar ve iyi uygulamalar

JavaScript nedir ve nerede kullanılır?

JavaScript hem tarayıcıda çalışan hem de sunucu tarafında (örneğin Node.js ile) kullanılabilen bir dildir. Tarayıcı tarafında sayfa güncellemeleri, form doğrulamaları, animasyonlar ve kullanıcı etkileşimleri için kullanılır. Daha teknik detaylar ve referans örnekleri için MDN Web Docs kaynaklarını inceleyebilirsiniz: toWellFormed(), isWellFormed() ve unicodeSets.

Hemen denemek için hazırlık

Denemeye başlamak için iki kolay yol vardır:

  1. Tarayıcı konsolu: Herhangi bir tarayıcıda geliştirici araçlarını açın ve Console sekmesinde kod çalıştırın (örneğin sağ tık > İncele / Inspect).
  2. Node.js: Yerel ortama Node.js kurup terminalde node komutunu kullanarak dosyalarınızı çalıştırın (https://nodejs.org adresinden resmi kurulum yapılabilir).

İlk küçük alıştırma:

console.log('Merhaba Dünya');

Değişkenler: let, const ve var

Veri saklamak için değişkenler kullanılır. Modern JavaScript'te let ve const tercih edilir. Özet:

  • const: Atandıktan sonra yeniden atanmaz; sabit değerler için kullanılır.
  • let: Blok kapsamlı (block-scoped) değişken, yeniden atanabilir.
  • var: Fonksiyon kapsamlıdır (function-scoped) ve bazı beklenmedik davranışlara yol açabilir; yeni kodlarda genelde tercih edilmez.

Örnek:

let isim = 'Ayşe';
const PI = 3.14;
isim = 'Ali';
console.log(isim);

Veri tipleri ve typeof

Temel tipler: String, Number, Boolean, null, undefined, Object, Symbol. typeof ile tür kontrolü yapabilirsiniz. Örneklerle farklara göz atalım:

console.log(typeof 'merhaba'); // 'string'
console.log(typeof 42); // 'number'
console.log(typeof null); // 'object' (tarihi bir davranış sonucu)
console.log(typeof undefined); // 'undefined'

Not: null ve undefined farklıdır; null bilinçli boş değeri, undefined ise atanmamışlığı gösterir.

Fonksiyonlar: tanımlama, parametreler, arrow

Fonksiyonlar tekrar kullanılabilir kod parçaları sağlar. Hem geleneksel hem de arrow fonksiyonları öğrenin.

function topla(a, b) {
return a + b;
}
console.log(topla(2, 3));

const carp = (x, y) => x * y;
console.log(carp(4, 5));

Ayrıca varsayılan (default) parametreler ve rest parametreleri işe yarar:

function selam(isim = 'Dünya') {
return `Merhaba, ${isim}!`;
}
console.log(selam()); // 'Merhaba, Dünya!'

Kontrol akışı ve döngüler

Koşullar ve döngüler program akışını yönetir:

const sayi = 5;
if (sayi % 2 === 0) {
console.log('Çift');
} else {
console.log('Tek');
}

for, while ve for...of gibi döngüler sık kullanılır:

for (let i = 0; i < 5; i++) {
console.log(i);
}

Diziler ve nesneler: sık kullanılan metotlar

Diziler ve nesneler JavaScript'te veriyi organize etmek için merkezidir. Önemli dizi metotları: push, pop, map, filter, reduce.

const arr = [1, 2, 3];
arr.push(4);
const kare = arr.map(n => n * n);
const even = arr.filter(n => n % 2 === 0);
console.log(kare, even);

Nesnelerde anahtar-değer yapısı kullanılır:

const kisi = { isim: 'Merve', yas: 28 };
kisi.yas = 29;
console.log(kisi.isim, kisi.yas);

Basit DOM etkileşimi: metin güncelleme ve olay

Tarayıcıda HTML ile etkileşime geçmek için DOM API'sini kullanın. Örnek: bir sayfadaki metni değiştirme ve butona tıklama olayı ekleme.

const el = document.querySelector('#mesaj');
el.textContent = 'Merhaba!';
const btn = document.querySelector('#ekle');
btn.addEventListener('click', function() {
console.log('Butona tıklandı');
});

textContent, elementin yalnızca metnini değiştirirken kullanışlıdır; innerHTML HTML içeriğini işler ve dışarıdan gelen veri ile kullanırken dikkat etmek gerekir.

10 Dakikalık Başlangıç Rutini

Her gün kısa süre pratik yapmak öğrenmeyi hızlandırır. Örnek 10 dakikalık rutin:

  • 1-2 dakika: Tarayıcı konsolunu açıp console.log ile mesaj yazdırma.
  • 2-3 dakika: let/const ile birkaç değişken tanımlayıp türlerini typeof ile kontrol etme.
  • 2 dakika: Basit bir fonksiyon yazıp çağırma (örneğin topla).
  • 2-3 dakika: Bir dizi oluşturup map veya filter ile küçük dönüşümler yapma.

Bu kısa döngüleri düzenli tekrarlamak kavramların yerleşmesine yardımcı olur.

Küçük proje: To‑Do uygulaması (örnek akış ve kod parçaları)

Bu uygulama için temel akış:

  1. HTML'de bir input, ekle butonu ve ul listesi oluşturun.
  2. tasks dizisi ile görevleri saklayın.
  3. addTask fonksiyonu input değerini alıp diziye eklesin ve renderTasks ile listeyi güncellesin.
  4. silme için her maddeye bir buton ekleyin ve ilgili diziden kaldırın.

Basit addTask ve renderTasks örneği:

let tasks = [];
const input = document.querySelector('#taskInput');
const list = document.querySelector('#taskList');
function addTask() {
const text = input.value.trim();
if (text) {
tasks.push(text);
input.value = '';
renderTasks();
}
}
function renderTasks() {
list.innerHTML = ''; // basit render
tasks.forEach((t, i) => {
const li = document.createElement('li');
li.textContent = t;
list.appendChild(li);
});
}

Adım adım ilerleyip her fonksiyonu test edin; önce ekleme, sonra silme, ardından localStorage ile kalıcılık eklenebilir.

Hata ayıklama (debugging) ve pratik ipuçları

Hata ayıklamak için:

  • console.log ile değişken ve akış çıktıları kontrol edin.
  • Tarayıcı geliştirici araçlarındaki Debugger ile breakpoints koyun.
  • Adım adım test edin ve küçük değişikliklerle ilerleyin.

İyi uygulamalar

  • Kodunuzu küçük, tek amaçlı fonksiyonlara bölün.
  • Semantik değişken adları kullanın ve gerektiğinde açıklayıcı yorum ekleyin.
  • ESLint gibi araçlarla stil ve yaygın hataları yakalayın.
  • Versiyon kontrolü (ör. Git) ile ilerlemelerinizi kaydedin.
  • MDN Web Docs gibi güvenilir kaynakları referans olarak kullanın.

İleri adımlar

Temel konuları öğrendikten sonra asenkron programlama (Promises, async/await), modüller, paket yöneticileri ve modern frameworkleri keşfetmek faydalı olacaktır. Bu konular ileri okumaya uygundur.

Kaynaklar

Referans ve örnekler için MDN Web Docs'u kullanabilirsiniz: toWellFormed(), isWellFormed(), unicodeSets.

Özetle, küçük adımlarla başlayın, sık sık çalıştırıp test edin ve MDN gibi referanslara başvurarak kavramları pekiştirin. Öğrenme süreci pratik yapma ve örnekleri inceleme ile hızlanır.