Takip et

JavaScript Gün 2: Yavaş İlerleme Bile İlerlemektir

JavaScript öğrenme yolculuğuna yeni başlayanlar için ilk günler, heyecan verici olduğu kadar zorlayıcı da olabilir. Bilgi bombardımanı altında bo…

JavaScript Gün 2: Yavaş İlerleme Bile İlerlemektir

JavaScript öğrenme yolculuğuna yeni başlayanlar için ilk günler, heyecan verici olduğu kadar zorlayıcı da olabilir. Bilgi bombardımanı altında boğulduğunuzu hissetmeniz, hatta bazı kavramları tam olarak anlayamadığınızı düşünmeniz oldukça normaldir. Ancak unutmayın ki, her büyük yolculuk küçük adımlarla başlar ve “yavaş ilerleme” bile kesinlikle bir ilerlemedir. Bu makale, JavaScript serüveninizin ikinci gününde karşılaşabileceğiniz zorlukları aşmanıza, temel kavramları pekiştirmenize ve motivasyonunuzu yüksek tutmanıza yardımcı olmayı amaçlamaktadır.

Giriş: JavaScript Öğrenme Yolculuğunda İkinci Adım

Neden İkinci Gün Önemli?

İlk gün genellikle “Merhaba Dünya!” gibi basit çıktılar almak, değişken tanımlamak gibi temel adımlarla geçer. İkinci gün ise bu temel bilgilerin üzerine inşa etme ve daha karmaşık yapı taşlarına geçiş yapma zamanıdır. Bu aşama, öğrenilenleri pekiştirmek, kavramlar arasındaki bağlantıları kurmak ve potansiyel bilgi boşluklarını doldurmak için kritik bir fırsattır. İkinci gün, genellikle ilk “gerçek” kod yazma deneyimlerinizin başladığı, operatörler, koşullu ifadeler ve döngüler gibi programlamanın temel mantığını oluşturan yapıları keşfettiğiniz zamandır.

Yavaş İlerlemenin Gücü

Herkesin öğrenme hızı farklıdır. Bazı kavramları anında kavrarken, bazıları için daha fazla zaman ve tekrar gerekebilir. Bu durum tamamen doğaldır ve asla cesaretinizi kırmamalıdır. Yavaş ilerleme, aslında bilgiyi daha derinlemesine işlediğiniz, her adımı sağlam bir şekilde attığınız anlamına gelebilir. Hızlı ilerlemek adına anlamadığınız konuları atlamak yerine, yavaşlayın, araştırın, pratik yapın ve her bir kavramın zihninizde tam olarak oturduğundan emin olun. Unutmayın, önemli olan ne kadar hızlı gittiğiniz değil, ne kadar sağlam adımlarla ilerlediğinizdir.

Temel Kavramları Pekiştirme: Değişkenler ve Veri Tipleri

JavaScript’in temel yapı taşları olan değişkenler ve veri tipleri, her programın bel kemiğini oluşturur. Bu kavramları sağlam bir şekilde anlamak, ilerleyen konularda karşılaşacağınız karmaşık yapıları çözmek için size sağlam bir zemin sunar.

Değişken Tanımlama Yöntemleri: var, let, const

JavaScript’te değişken tanımlamak için üç ana anahtar kelime bulunur:

  • var: Eski bir yöntemdir. Fonksiyon kapsamlıdır (function-scoped) ve yeniden tanımlanabilir, yeniden atanabilir. Genellikle modern JavaScript’te kullanımı önerilmez.
  • let: ES6 ile gelen, blok kapsamlı (block-scoped) bir anahtar kelimedir. Yeniden atanabilir ancak aynı kapsamda yeniden tanımlanamaz.
  • const: Yine ES6 ile gelen, blok kapsamlı bir anahtar kelimedir. Tanımlandığı anda değer atanması gerekir ve sonrasında değeri değiştirilemez (sabit). Ancak, bir nesne veya dizi için kullanıldığında, nesnenin veya dizinin içeriği değiştirilebilir.

// var örneği
var ad = "Ali";
var ad = "Veli"; // Hata vermez, yeniden tanımlanır
console.log(ad); // Veli

// let örneği
let yas = 30;
// let yas = 31; // Hata verir: 'yas' zaten tanımlanmış
yas = 31; // İzin verilir, yeniden atanır
console.log(yas); // 31

// const örneği
const PI = 3.14;
// PI = 3.15; // Hata verir: Sabite atama yapılamaz
console.log(PI); // 3.14

const ogrenci = { isim: "Ayşe", numara: 123 };
ogrenci.isim = "Fatma"; // İzin verilir, nesnenin içeriği değişir
console.log(ogrenci); // { isim: 'Fatma', numara: 123 }

JavaScript Veri Tipleri: İlkel ve Referans Tipler

JavaScript'te veriler iki ana kategoriye ayrılır:

  1. İlkel (Primitive) Tipler:
    • string: Metinsel veriler ("Merhaba").
    • number: Sayısal veriler (tam sayılar ve ondalıklı sayılar) (10, 3.14).
    • boolean: Mantıksal değerler (true veya false).
    • undefined: Değer atanmamış değişkenlerin varsayılan değeri.
    • null: Bilinçli olarak "değer yok" anlamına gelen özel bir değer.
    • symbol: ES6 ile gelen, benzersiz değerler oluşturmak için kullanılır.
    • bigint: Çok büyük tam sayıları temsil etmek için kullanılır.
  2. Referans (Reference) Tipler:
    • object: Karmaşık veri yapıları ({ anahtar: değer }).
    • array: Sıralı veri koleksiyonları ([değer1, değer2]).
    • function: Çalıştırılabilir kod blokları.

Tip Dönüşümleri ve Otomatik Tip Zorlaması

JavaScript, esnek bir dildir ve bazen farklı veri tipleri arasında otomatik dönüşümler yapar (tip zorlaması). Bu durum, beklenen veya beklenmeyen sonuçlara yol açabilir. Örneğin:


let sayi = 10;
let metin = "20";
let sonuc = sayi + metin; // "1020" (sayı metne dönüştürülür ve birleştirilir)
console.log(sonuc);
console.log(typeof sonuc); // string

let metin2 = "5";
let sayi2 = 2;
let sonuc2 = metin2 * sayi2; // 10 (metin sayıya dönüştürülür ve çarpılır)
console.log(sonuc2);
console.log(typeof sonuc2); // number

Bilinçli tip dönüşümleri için Number(), String(), Boolean() gibi fonksiyonları kullanmak daha güvenlidir.

Operatörler ve İfadeler: Mantıksal Yapı Taşları

Operatörler, değişkenler ve değerler üzerinde işlemler yapmamızı sağlayan sembollerdir. İfadeler ise, bir değer üreten kod parçacıklarıdır.

Aritmetik Operatörler

Matematiksel işlemler için kullanılırlar: + (toplama), - (çıkarma), * (çarpma), / (bölme), % (modülüs - kalan), ** (üs alma), ++ (arttırma), -- (azaltma).


let a = 10, b = 3;
console.log(a + b); // 13
console.log(a % b); // 1 (10'un 3'e bölümünden kalan)
console.log(a ** b); // 1000 (10 üzeri 3)
a++; // a şimdi 11
console.log(a);

Karşılaştırma Operatörleri

İki değeri karşılaştırır ve bir boolean (true/false) değer döndürürler:

  • == (Eşit mi? - Değerleri karşılaştırır, tipleri umursamaz)
  • === (Kesinlikle eşit mi? - Hem değerleri hem de tipleri karşılaştırır)
  • != (Eşit değil mi?)
  • !== (Kesinlikle eşit değil mi?)
  • > (Büyük mü?), < (Küçük mü?)
  • >= (Büyük veya eşit mi?), <= (Küçük veya eşit mi?)

console.log(5 == "5");   // true (değerler aynı)
console.log(5 === "5");  // false (değerler aynı ama tipler farklı)
console.log(10 != 5);    // true
console.log(10 !== "10"); // true

Mantıksal Operatörler

Birden fazla koşulu birleştirmek veya tersine çevirmek için kullanılırlar:

  • && (VE - Her iki koşul da doğruysa true)
  • || (VEYA - Koşullardan en az biri doğruysa true)
  • ! (DEĞİL - Koşulun tersini döndürür)

let yas = 20;
let ehliyetVarMi = true;
console.log(yas > 18 && ehliyetVarMi); // true
console.log(yas < 18 || ehliyetVarMi); // true
console.log(!ehliyetVarMi);           // false

Atama Operatörleri

Bir değişkene değer atamak için kullanılırlar: = (atama), += (topla ve ata), -= (çıkar ve ata), *= (çarp ve ata), /= (böl ve ata), %= (modülüs al ve ata).


let x = 10;
x += 5; // x = x + 5; yani x şimdi 15
console.log(x);

Koşullu İfadeler: Karar Vermenin Temeli

Programlamada, belirli koşullara göre farklı kod bloklarını çalıştırmak için koşullu ifadeler kullanılır. Bu, programlarınızın dinamik ve etkileşimli olmasını sağlar.

if, else if, else Yapısı

En temel koşullu yapıdır. Bir koşul doğruysa belirli bir kod bloğu çalışır; aksi takdirde başka bir blok çalışabilir.


let not = 75;

if (not >= 90) {
    console.log("AA");
} else if (not >= 80) {
    console.log("BB");
} else if (not >= 70) {
    console.log("CC");
} else {
    console.log("Kaldı");
}

Ternary Operatörü: Kısa Koşullar

Basit if-else yapılarını tek bir satırda yazmak için kullanılır. Yapısı: koşul ? doğru_ise_değer : yanlış_ise_değer.


let yas = 17;
let mesaj = (yas >= 18) ? "Ehliyet alabilir." : "Ehliyet alamaz.";
console.log(mesaj); // Ehliyet alamaz.

switch İfadesi

Bir değişkenin veya ifadenin birden fazla olası değerini kontrol etmek için kullanılır. Genellikle çok sayıda else if bloğu yerine daha okunabilir bir alternatif sunar.


let gun = "Pazartesi";

switch (gun) {
    case "Pazartesi":
        console.log("Haftanın ilk günü.");
        break;
    case "Cuma":
        console.log("Hafta sonuna az kaldı!");
        break;
    default:
        console.log("Diğer bir gün.");
        break;
}

break anahtar kelimesi, eşleşen durum bulunduğunda switch bloğundan çıkmayı sağlar. Aksi takdirde, sonraki case blokları da çalışmaya devam eder (fall-through).

Döngüler: Tekrarlayan İşlemleri Yönetme

Döngüler, belirli bir kod bloğunu belirli bir koşul doğru olduğu sürece veya belirli sayıda tekrar etmek için kullanılır. Bu, aynı kodu tekrar tekrar yazmaktan kaçınmanızı sağlar.

for Döngüsü

Belirli bir başlangıç, bitiş koşulu ve artış/azalış adımı olan durumlarda idealdir.


for (let i = 0; i < 5; i++) {
    console.log("Sayı: " + i);
}
// Çıktı:
// Sayı: 0
// Sayı: 1
// Sayı: 2
// Sayı: 3
// Sayı: 4

while ve do...while Döngüleri

  • while: Koşul doğru olduğu sürece çalışır. Koşul en başta kontrol edilir, bu yüzden koşul yanlışsa hiç çalışmayabilir.
  • do...while: En az bir kere çalışmayı garanti eder, çünkü koşul döngü bloğu çalıştıktan sonra kontrol edilir.

// while döngüsü
let sayac = 0;
while (sayac < 3) {
    console.log("While Sayacı: " + sayac);
    sayac++;
}
// Çıktı:
// While Sayacı: 0
// While Sayacı: 1
// While Sayacı: 2

// do...while döngüsü
let sayac2 = 5;
do {
    console.log("Do-While Sayacı: " + sayac2);
    sayac2++;
} while (sayac2 < 3);
// Çıktı:
// Do-While Sayacı: 5 (Koşul yanlış olsa da bir kez çalıştı)

Döngü Kontrol Deyimleri: break ve continue

  • break: İçinde bulunduğu döngüyü anında sonlandırır ve döngüden çıkar.
  • continue: Döngünün mevcut iterasyonunu atlar ve bir sonraki iterasyona geçer.

for (let i = 0; i < 10; i++) {
    if (i === 3) {
        continue; // 3'ü atla
    }
    if (i === 7) {
        break;    // 7'ye gelince döngüyü bitir
    }
    console.log(i);
}
// Çıktı:
// 0
// 1
// 2
// 4
// 5
// 6

Hata Ayıklama ve Konsol Kullanımı: Geliştiricinin En İyi Dostu

Kod yazarken hata yapmak kaçınılmazdır. Önemli olan, bu hataları bulup düzeltebilme becerisini kazanmaktır. JavaScript geliştiricileri için tarayıcı konsolu ve console.log() metodu vazgeçilmez araçlardır.

console.log() ile Değerleri İzleme

console.log(), değişkenlerin değerlerini, ifadelerin sonuçlarını veya kodunuzun belirli bir noktaya ulaşıp ulaşmadığını kontrol etmek için en sık kullanılan araçtır. Kodunuzun içine yerleştirerek, programınızın akışını ve veri durumunu adım adım izleyebilirsiniz.


let fiyat = 100;
let indirimOrani = 0.1;
console.log("Başlangıç fiyatı:", fiyat); // Başlangıç fiyatını izle

fiyat = fiyat - (fiyat * indirimOrani);
console.log("İndirimli fiyat:", fiyat); // İndirim sonrası fiyatı izle

if (fiyat < 90) {
    console.log("Fiyat 90'ın altında.");
} else {
    console.log("Fiyat 90'ın üstünde veya eşit.");
}

console.warn() (uyarı mesajları), console.error() (hata mesajları) ve console.table() (nesne/dizi tabloları) gibi diğer konsol metotları da mevcuttur.

Hata Mesajlarını Anlama

Tarayıcı konsolunda veya Node.js ortamında karşılaştığınız hata mesajları size sorunun ne olduğu ve nerede meydana geldiği hakkında değerli ipuçları verir. En yaygın hata türlerinden bazıları:

  • ReferenceError: Tanımlanmamış bir değişkene veya fonksiyona erişmeye çalıştığınızda.
  • TypeError: Bir değerin beklenen tipte olmaması veya olmayan bir metodu çağırmaya çalıştığınızda.
  • SyntaxError: Kodunuzda yazım hatası veya dilin kurallarına uymayan bir yapı olduğunda.

Hata mesajının verdiği satır numarasını ve dosya adını dikkatlice inceleyerek sorunun kaynağını bulmaya çalışın.

Tarayıcı Geliştirici Araçları

Modern web tarayıcıları (Chrome, Firefox, Edge vb.) güçlü geliştirici araçları sunar. Bu araçlar genellikle F12 tuşuna basılarak açılır ve şunları içerir:

  • Console (Konsol): JavaScript hatalarını, uyarıları ve console.log() çıktılarını görüntüler.
  • Sources (Kaynaklar): JavaScript kodunuzu adım adım çalıştırmanıza, kesme noktaları (breakpoints) koyarak değişken değerlerini anlık olarak incelemenize olanak tanır.
  • Elements (Öğeler): HTML ve CSS yapısını incelemenizi ve anlık değişiklikler yapmanızı sağlar.

Bu araçları kullanmayı öğrenmek, hata ayıklama sürecinizi hızlandıracak ve geliştirici olarak yeteneklerinizi artıracaktır.

Motivasyonu Yüksek Tutmak ve Pratik Yapmak

JavaScript öğrenmek bir maratondur, kısa bir koşu değil. Motivasyonunuzu yüksek tutmak ve düzenli pratik yapmak, bu yolculukta başarılı olmanın anahtarıdır.

Küçük Projeler Geliştirme

Sadece dersleri takip etmek yerine, öğrendiklerinizi uygulayabileceğiniz küçük projeler yapmaya başlayın. Örneğin:

  • Basit bir hesap makinesi
  • Yapılacaklar listesi (To-Do List) uygulaması
  • Sayı tahmin oyunu
  • Basit bir sayaç

Bu projeler, teorik bilgiyi pratiğe dökmenizi ve gerçek dünya senaryolarında nasıl çalıştığını görmenizi sağlar.

Topluluklarla Etkileşim

Yalnız olmadığınızı bilmek önemlidir. Online forumlara (Stack Overflow), Discord sunucularına veya yerel geliştirici gruplarına katılarak sorular sorabilir, başkalarının sorunlarına çözüm arayabilir ve deneyimlerinizi paylaşabilirsiniz. Bu, hem öğrenme sürecinizi hızlandırır hem de motivasyonunuzu artırır.

Sabırlı Olmak ve Düzenli Tekrar

Her gün küçük bir miktar bile olsa kod yazmaya zaman ayırın. Bir konuyu ilk seferde anlamadıysanız, pes etmeyin. Farklı kaynaklardan okuyun, video izleyin, örnekleri kendiniz yazın ve değiştirin. Tekrar, öğrenmenin temelidir. Sabırlı olun ve her küçük başarıyı kutlayın.

Sonuç: Her Adım Değerlidir

JavaScript öğrenme yolculuğunuzun ikinci gününde, belki de ilk günkü heyecanınızın yerini biraz kafa karışıklığı veya zorlanma almıştır. Ancak unutmayın ki bu, öğrenme sürecinin doğal bir parçasıdır. Değişkenler, veri tipleri, operatörler, koşullu ifadeler ve döngüler gibi temel kavramları anlamak ve pratik etmek, sağlam bir temel oluşturmanızı sağlayacaktır. Yavaş ilerleme bile ilerlemedir; her yazdığınız kod satırı, her çözdüğünüz hata ve her anladığınız yeni kavram sizi hedefinize bir adım daha yaklaştırır. Sabırlı olun, düzenli pratik yapın ve bu heyecan verici dünyaya adım atmaktan çekinmeyin. JavaScript'in sunduğu sınırsız olanakları keşfetmeye devam edin!

Sıkça Sorulan Sorular (SSS)

JavaScript öğrenmek ne kadar sürer?

Bu, kişiden kişiye ve öğrenme hedeflerinize göre değişir. Temel seviyede bir web sayfası etkileşimi oluşturmak birkaç hafta sürebilirken, profesyonel bir geliştirici olmak aylar hatta yıllar sürebilir. Önemli olan sürekli öğrenmek ve pratik yapmaktır.

Hangi kaynakları kullanmalıyım?

MDN Web Docs, freeCodeCamp, The Odin Project, Codecademy gibi platformlar başlangıç için harika kaynaklardır. YouTube'da birçok ücretsiz ders serisi de bulabilirsiniz. Farklı kaynaklardan öğrenmek, farklı bakış açıları kazanmanızı sağlar.

Her gün kod yazmak zorunda mıyım?

Mümkünse evet. Düzenli pratik, kas hafızası oluşturmanıza ve öğrendiklerinizi pekiştirmenize yardımcı olur. Günde 30 dakika bile olsa, düzenli olmak uzun vadede büyük fark yaratır.

Takıldığımda ne yapmalıyım?

Öncelikle hata mesajlarını dikkatlice okuyun. Google'da veya Stack Overflow'da hata mesajınızı veya sorununuzu arayın. Genellikle başkaları da benzer sorunlarla karşılaşmıştır. Çözüm bulamazsanız, bir geliştirici topluluğunda veya forumda soru sormaktan çekinmeyin.

Yorumlar
İçeriği beğendiniz mi? Bir tartışma başlatın veya görüşlerinizi paylaşın.
Yorum Yaz

Bir yanıt yazın

E-posta adresiniz yayınlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir

E-posta Bülteni
Yazılım Topluluğuna Katılın
En son güncellemeleri, yaratıcı ipuçlarını ve özel kaynakları doğrudan e-posta kutunuza alın. Tasarım ve inovasyonun geleceğini birlikte keşfedelim.