Yeni Başlayanlar için JavaScript Temel Kavramları: Adım Adım Rehber

JavaScript Temelleri

Yeni Başlayanlar için JavaScript Temel Kavramları: Adım Adım Rehber

JavaScript Temelleri
4 dk okuma süresi
Bu adım adım rehber, yeni başlayanlara yönelik JavaScript temel kavramlarını, kısa örnekleri ve uygulanabilir öğrenme yol haritasını Türkçe olarak sunar.
Yeni Başlayanlar için JavaScript Temel Kavramları: Adım Adım Rehber

JavaScript nedir ve neden öğrenmelisiniz?

JavaScript, web sayfalarına etkileşim ve dinamiklik eklemek için kullanılan bir programlama dilidir. Temel tanım ve tarihçe için kaynaklara bakabilirsiniz (örneğin OnlyJS). Web formlarını doğrulamak, menüleri açıp kapatmak, veri istekleri yapmak ve kullanıcı etkileşimlerini işlemek gibi görevler sıklıkla JavaScript ile yapılır.

Hızlı başlangıç: hangi araçlara ihtiyacınız var?

Yeni başlayanlar için gereken asgari araçlar şunlardır:

  • Güncel bir web tarayıcısı (Chrome, Firefox veya Safari) ve tarayıcı geliştirici araçları (console).
  • Basit bir metin düzenleyici (ör. Visual Studio Code) veya kod editörü.
  • Proje dosyalarınızı test etmek için yerel bir klasör; küçük projeler için ekstra sunucu gerekmez.

Başlangıçta tarayıcı konsolunda (F12) küçük parçalar çalıştırmak öğrenmeyi hızlandırır. Ayrıca çevrimiçi kurslar ve resmi eğitim içerikleri yol gösterici olabilir (EBA Akademi gibi).

Temel kavramlar: kısa ve uygulamalı açıklamalar

Aşağıda yeni başlayanların en çok karşılaştığı temel konular ve kısa örnekler bulunmaktadır. Resmi ve eğitim kaynakları bu konuları benzer şekilde sıralamaktadır (EBA Akademi).

Değişkenler

JavaScript'te veriyi saklamak için var, let ve const kullanılır. Genel öneri: değiştirilebilecek değerler için let, sabit değerler için const tercih edilir.

let yas = 25;
const isim = 'Ayşe';
var sayi = 10; // eski projelerde görebilirsiniz

Veri tipleri

Temel veri tipleri: string (metin), number (sayı), boolean (true/false), null, undefined, object (nesneler) ve array (dizi).

let metin = 'Merhaba';
let sayi = 3.14;
let aktif = true;
let liste = [1, 2, 3];
let kisi = { ad: 'Ali', yas: 30 };

Operatörler

Aritmetik (+, -, *, /), karşılaştırma (==, ===, !=, !==, >, <=) ve mantıksal (&&, ||, !) operatörleri sık kullanılır. === ve !== tip kontrolüyle birlikte eşitlik sağlar; öğrenirken bu fark önemlidir.

Koşullu ifadeler

Karar yapıları için if/else ve gerektiğinde switch kullanılır.

if (yas >= 18) {
console.log('Reşitsiniz');
} else {
console.log('Reşit değilsiniz');
}

Döngüler

Belli tekrarlar için for, while ve modern JavaScript'te for...of veya array metodları (forEach, map) tercih edilir.

for (let i = 0; i < 5; i++) {
console.log(i);
}
let arr = [10,20,30];
arr.forEach(item => console.log(item));

Fonksiyonlar

Fonksiyonlar kodu tekrar kullanılabilir parçalara böler. Hem klasik bildirim hem de ok (arrow) fonksiyonları vardır.

function topla(a, b) {
return a + b;
}
const carp = (a, b) => a * b;
console.log(topla(2,3));

DOM ve etkileşim (kısa giriş)

Tarayıcıda HTML ile etkileşim kurmak için DOM (Document Object Model) kullanılır. Bir düğmeye tıklama olayını dinlemek sık karşılaşılan örnektir.

// Örnek: bir buton tıklandığında metni değiştirme
document.getElementById('btn').addEventListener('click', function() {
document.getElementById('mesaj').textContent = 'Tıklandı!';
});

HTML dosyasında JavaScript dosyanızı bağlamak için <script> etiketi kullanılır. Örneğin:

<script src='app.js'></script>

Asenkron yapıların kısa tanımı

JavaScript'te zamanlanmış işlemler ve sunucu istekleri asenkron çalışır. Önce callback, sonra Promise ve async/await yaklaşımları yaygın hâle gelmiştir. Başlangıçta setTimeout ile başlayıp, daha sonra Promise'lere bakmak öğrenme akışını kolaylaştırır.


Adım adım öğrenme yolu (öneri)

Bir yol haritası takip etmek öğrenmeyi hızlandırır. Aşağıdaki adımlar, temel kavramlardan uygulamaya doğru ilerler; benzer öneriler için öğrenme rehberlerine göz atabilirsiniz (öğrenme yol haritası).

  1. Söz dizimi ve küçük komutlarla tarayıcı konsolunda pratik yapın.
  2. Değişkenler, veri tipleri ve operatörleri öğrenin.
  3. Fonksiyonlar ve kontrol akışlarını (if/for) kavrayın.
  4. Diziler ve nesnelerle veriyi modelleyin.
  5. DOM ile etkileşim ve olay dinleme öğrenin.
  6. Basit projeler yapın (to‑do list, hesap makinesi).
  7. Asenkron programlamaya giriş (setTimeout, fetch/Promise).

Pratik proje fikirleri (yeni başlayanlar için)

  • Basit bir yapılacaklar (to‑do) listesi: öğe ekleme/silme.
  • Hesap makinesi: temel aritmetik işlemler.
  • Rastgele alıntı gösterici: bir dizi içinden seçim ve DOM güncelleme.
  • Küçük test/quiz uygulaması: sorular, puanlama ve sonuç gösterimi.
  • Hava durumu isteği yapan basit uygulama (fetch kullanımı öğrenildikten sonra).

Bu tür projeler öğrendiklerinizi pekiştirmek için etkilidir; eğitim materyalleri ve kurslar uygulamalı örneklerle süreci hızlandırabilir (Udemy örnek kursu).

Hızlı kontrol listesi (başlangıç için)

  • Tarayıcı konsolunda console.log() ile çıktı alma alıştırması yaptınız mı?
  • let ve const farkını uygulamalı anladınız mı?
  • Fonksiyon tanımlayıp çağırma pratiği yaptınız mı?
  • Basit bir DOM olayı (ör. buton tıklama) eklediniz mi?
  • Küçük bir proje (to‑do veya hesap makinesi) yaptınız mı?

İyi uygulama tavsiyeleri

  • Adım adım öğrenin: önce kavram, sonra örnek, sonra proje.
  • Küçük, tekrarlanabilir görevlerle pratik yapın; her proje bir veya iki yeni kavram eklesin.
  • Güncel kaynakları takip edin; eğitim içerikleri ve resmi dokümanlar faydalıdır (EBA Akademi gibi).

Sonuç

JavaScript öğrenmek için temel kavramları (değişkenler, veri tipleri, fonksiyonlar, kontrol yapıları, döngüler ve DOM) sağlam bir şekilde anlamak önemlidir. Yukarıdaki adım adım yol haritası ve pratik proje fikirleri, öğrendiklerinizi pekiştirmenize yardımcı olacaktır. Daha derin konulara geçmeden önce bu temelleri pratikle güçlendirin.

Kaynaklar ve ileri okuma