Giriş
JavaScript, web geliştirmenin temel taşlarından biridir ve dinamik, etkileşimli web siteleri oluşturmak için bir araçtır. Bu makalede, JavaScript’in temel yapı taşlarını oluşturan veri tiplerini, değişken tanımlama yöntemlerini, koşullu ifadeleri, döngüleri ve dizi/nesne işlemlerini detaylı bir şekilde inceleyeceğiz. Bu kavramlar, JavaScript ile programlamaya yeni başlayanlar için sağlam bir temel oluşturacak ve daha karmaşık uygulamalar geliştirebilmelerine olanak sağlayacaktır. Özellikle, kullanıcı giriş formu ve girilen verilere göre farklı mesajlar gösteren bir uygulama örneği üzerinden, bu temel kavramların pratikte nasıl kullanıldığını göstereceğiz. Bu sayede, teorik bilgileri somut bir örnekle pekiştirerek, JavaScript öğrenme sürecinizi hızlandıracağız ve daha anlaşılır kılacağız. JavaScript temellerini öğrenmek, web geliştirme yolculuğunuzda size güçlü bir avantaj sağlayacaktır.
JavaScript Veri Tipleri ve Değişken Tanımlama
JavaScript’te veriler, farklı tiplerde saklanabilir. Bu tipler, verinin türünü ve üzerinde yapılabilecek işlemleri belirler. Temel veri tipleri şunlardır:
- String: Metinsel verileri temsil eder. Tırnak işaretleri (“” veya ”) içinde yazılır. Örneğin: “Merhaba Dünya”, ‘JavaScript’.
- Number: Sayısal verileri temsil eder. Tam sayılar (integer) ve ondalıklı sayılar (float) olabilir. Örneğin: 10, 3.14, -5.
- Boolean: Mantıksal değerleri temsil eder. Sadece iki değeri olabilir: true (doğru) ve false (yanlış).
- Array: Birden fazla değeri sıralı bir şekilde saklamak için kullanılır. Köşeli parantezler ([]) içinde tanımlanır ve her bir elemana indeks numarası ile erişilir. Örneğin: [1, 2, 3, “elma”, “armut”].
- Object: İlişkili verileri anahtar-değer (key-value) çiftleri şeklinde saklamak için kullanılır. Süslü parantezler ({}) içinde tanımlanır. Örneğin: { isim: “Ahmet”, yas: 30, meslek: “Mühendis” }.
- Undefined: Bir değişken tanımlanmış ancak henüz bir değer atanmamışsa, bu değişkenin tipi undefined olur.
- Null: Bir değişkenin kasıtlı olarak boş bırakıldığını belirtmek için null değeri kullanılır.
Değişkenler, verileri saklamak için kullanılan adlandırılmış alanlardır. JavaScript’te değişkenler var, let ve const anahtar kelimeleri ile tanımlanır:
- var: Eski bir tanımlama yöntemidir. Fonksiyon kapsamında (function-scoped) değişkenler oluşturur.
- let: Blok kapsamında (block-scoped) değişkenler oluşturur. Daha modern ve tercih edilen bir yöntemdir.
- const: Blok kapsamında sabitler (constants) oluşturur. Değeri sonradan değiştirilemez.
let ve const, var‘a göre daha öngörülebilir ve hataya daha az meyilli olduğu için modern JavaScript geliştirmede daha çok tercih edilir.
Koşullu İfadeler (if-else, switch-case)
Koşullu ifadeler, belirli bir koşulun doğru (true) veya yanlış (false) olmasına bağlı olarak farklı kod bloklarının çalıştırılmasını sağlar. JavaScript’te en yaygın kullanılan koşullu ifadeler if-else ve switch-case‘dir.
if-else ifadesi, bir koşulun doğru olup olmadığını kontrol eder ve buna göre farklı kod bloklarını çalıştırır. Genel yapısı şöyledir:
if (koşul) {
// Koşul doğruysa çalışacak kod bloğu
} else {
// Koşul yanlışsa çalışacak kod bloğu
}
else if ifadesi ile birden fazla koşul zincirleme olarak kontrol edilebilir.
switch-case ifadesi, bir değişkenin farklı değerlerine göre farklı kod bloklarını çalıştırmak için kullanılır. if-else‘e göre daha okunaklı ve düzenli bir yapı sunar, özellikle çok sayıda koşulun kontrol edilmesi gerektiğinde:
switch (değişken) {
case değer1:
// değişken değeri değer1’e eşitse çalışacak kod bloğu
break;
case değer2:
// değişken değeri değer2’ye eşitse çalışacak kod bloğu
break;
default:
// Hiçbir case eşleşmezse çalışacak kod bloğu
}
break ifadesi, ilgili case bloğunun çalıştırılması bittikten sonra switch-case yapısından çıkılmasını sağlar. default bloğu ise hiçbir case bloğu eşleşmediğinde çalıştırılır.
Döngüler (for, while, do-while)
Döngüler, belirli bir kod bloğunu tekrar tekrar çalıştırmak için kullanılır. JavaScript’te yaygın olarak kullanılan döngü türleri for, while ve do-while‘dır.
for döngüsü, genellikle bir sayaç değişkeni kullanarak belirli sayıda tekrar yapmak için kullanılır. Genel yapısı şöyledir:
for (başlangıç; koşul; artış) {
// Tekrar çalışacak kod bloğu
}
Başlangıç ifadesi döngü başlamadan önce bir kez çalıştırılır (genellikle sayaç değişkenine ilk değer atanır). Koşul ifadesi her döngü adımından önce kontrol edilir, koşul doğru olduğu sürece döngü devam eder. Artış ifadesi her döngü adımından sonra çalıştırılır (genellikle sayaç değişkeni artırılır veya azaltılır).
while döngüsü, belirli bir koşul doğru olduğu sürece döngünün devam etmesini sağlar:
while (koşul) {
// Koşul doğru olduğu sürece çalışacak kod bloğu
}
Koşul, döngünün her adımından önce kontrol edilir.
do-while döngüsü, while döngüsüne benzer, ancak kod bloğu en az bir kez çalıştırılır, çünkü koşul kontrolü döngünün sonunda yapılır:
do {
// En az bir kez çalışacak ve koşul doğru olduğu sürece tekrar çalışacak kod bloğu
} while (koşul);
Dizi ve Nesne İşlemleri
Diziler ve nesneler, JavaScript’te verileri düzenli bir şekilde saklamak ve işlemek için kullanılan önemli veri yapılarıdır. Daha önce de belirtildiği gibi, diziler sıralı veri koleksiyonlarını, nesneler ise anahtar-değer çiftlerini saklar.
Diziler:
- Eleman Ekleme/Çıkarma: push() metodu ile dizinin sonuna eleman eklenebilir. pop() metodu ile dizinin sonundaki eleman silinebilir. shift() metodu ile dizinin başındaki eleman silinebilir. unshift() metodu ile dizinin başına eleman eklenebilir.
- Elemanlara Erişim: Dizi elemanlarına indeks numaraları ile erişilir. İlk elemanın indeksi 0’dır. Örneğin: dizi[0] ilk elemanı, dizi[1] ikinci elemanı verir.
- Dizi Boyutu: length özelliği dizinin eleman sayısını verir.
- Döngülerle İşleme: for veya forEach gibi döngüler kullanılarak dizi elemanları üzerinde işlem yapılabilir.
Nesneler:
- Özellik Ekleme/Silme/Güncelleme : Nokta (.) veya köşeli parantez ([]) notasyonu kullanılarak nesne özelliklerine erişilebilir, yeni özellikler eklenebilir, mevcut özellikler güncellenebilir veya silinebilir. Örneğin: nesne.ozellik veya nesne[“ozellik”].
- Nesne Anahtarları ve Değerleri: Object.keys() metodu nesnenin anahtarlarını (keys) bir dizi olarak verir. Object.values() metodu nesnenin değerlerini (values) bir dizi olarak verir. Object.entries() metodu nesnenin anahtar-değer çiftlerini bir dizi olarak verir.
- Döngülerle İşleme: for…in döngüsü kullanılarak nesnenin özellikleri üzerinde işlem yapılabilir.
Kullanıcı Giriş Formu ve Mesaj Gösterme Uygulaması
Önceki bölümlerde öğrendiğimiz bilgileri kullanarak basit bir kullanıcı giriş formu ve girilen verilere göre farklı mesajlar gösteren bir uygulama örneği geliştirelim. Bu uygulama, HTML, CSS ve JavaScript’ten oluşacak.
HTML tarafında bir form oluşturup, CSS ile görünüm kazandırdık. JavaScript kısmında ise, formdaki verileri alıp (kullanıcı adı ve yaş), bu verilere göre farklı mesajlar gösteren bir fonksiyon yazdık. Eğer yaş 18’den küçükse farklı, büyük veya eşitse farklı bir mesaj gösteriliyor. “Gönder” butonuna tıklandığında bu fonksiyon çalışıyor.
Sonuç
Bu makalede, JavaScript’in temel yapı taşlarını oluşturan veri tipleri, değişken tanımlama, koşullu ifadeler, döngüler ve dizi/nesne işlemleri gibi konuları detaylı bir şekilde inceledik. Bu temel kavramlar, JavaScript ile programlama yaparken sürekli karşılaşacağınız ve kullanacağınız yapıtaşlarıdır. Her bir konuyu örneklerle açıklamaya çalıştık böylelikle soyut bilgilerin somutlaşmasını hedefledik. Son olarak hazırladığımız basit kullanıcı giriş formu uygulamasıyla, öğrendiğimiz bilgilerin pratikte nasıl kullanılabileceğini gördük. Unutmayın ki, bu sadece bir başlangıçtır. JavaScript, çok daha gelişmiş ve karmaşık uygulamalar geliştirebileceğiniz, sürekli gelişen ve öğrenmeye açık bir dildir. Bu temel bilgileri sağlam bir şekilde öğrendikten sonra, daha ileri seviye konulara geçebilir, kendi projelerinizi geliştirebilir ve web geliştirme becerilerinizi sürekli olarak artırabilirsiniz.