JavaScript Örnekleri

JavaScript Örnekleri: Temel ve İleri Seviye Konular

JavaScript, modern web uygulamalarının temel yapı taşıdır. Web sayfalarına dinamik özellikler eklemek için kullanılır ve kullanıcı etkileşimlerini yönetir. Bu yazıda, JavaScript’in temel özelliklerinden bazılarını örneklerle açıklayarak, dilin kullanımını daha iyi kavrayabilirsiniz. Hem başlangıç seviyesindeki hem de ileri seviye JavaScript örneklerini inceleyeceğiz.

1. Değişkenler ve Veri Tipleri

JavaScript'te değişkenler, veriyi depolamak için kullanılır. ES6 ile gelen let, const ve eski var anahtar kelimeleri değişken tanımlamak için kullanılır.

Örnek:

javascript
let isim = "Ahmet";  // String
const yas = 25;  // Sayı (Number)
let aktifMi = true;  // Boolean

console.log(isim);  // Ahmet
console.log(yas);  // 25
console.log(aktifMi);  // true

• let: Değiştirilebilir değişkenler için kullanılır.
• const: Değiştirilemez (sabit) değerler için kullanılır.
• var: Eski sürümlerde kullanılan, ama let ve const ile yer değiştiren bir anahtar kelimedir.

2. Koşul İfadeleri (if-else)

Koşul ifadeleri, belirli bir koşula göre farklı işlemler yapılmasını sağlar. JavaScript'te if-else yapısı en yaygın kullanılan koşul yapısıdır.

Örnek:

javascript
let saat = 14;

if (saat < 12) {
    console.log("Günaydın!");
} else if (saat < 18) {
    console.log("İyi günler!");
} else {
    console.log("İyi akşamlar!");
}

Bu örnekte, saat değişkenine göre farklı mesajlar yazdırılır. Saatin değerine göre "Günaydın", "İyi günler" veya "İyi akşamlar" yazdırılır.

3. Döngüler (Loops)

Döngüler, belirli bir kod bloğunu birden fazla kez çalıştırmak için kullanılır. JavaScript’te yaygın döngü türleri şunlardır: for, while, do...while.

For Döngüsü Örneği:

javascript
for (let i = 1; i <= 5; i++) {
    console.log("Döngü numarası: " + i);
}

Bu örnekte, i 1’den 5’e kadar artırılarak, her seferinde “Döngü numarası: X” mesajı konsola yazdırılır.

While Döngüsü Örneği:

javascript
let sayi = 1;
while (sayi <= 5) {
    console.log("Sayı: " + sayi);
    sayi++;
}

while döngüsü, verilen şart doğru olduğu sürece kodu çalıştırmaya devam eder. Bu örnekte, sayı 5’e kadar yazdırılır.

4. Fonksiyonlar (Functions)

Fonksiyonlar, belirli bir işi yapan kod bloklarıdır ve JavaScript'teki en önemli yapı taşlarındandır. Fonksiyonlar, tekrar kullanılabilir kod parçaları yazmamızı sağlar.

Örnek:

javascript
function selamla(isim) {
    return "Merhaba, " + isim + "!";
}

console.log(selamla("Ali"));  // Merhaba, Ali!
console.log(selamla("Ayşe"));  // Merhaba, Ayşe!

Bu örnekte, selamla fonksiyonu bir parametre alır (isim) ve ona göre bir selamlaşma mesajı döndürür.

5. Objeler (Objects)

JavaScript'teki objeler, birden fazla veriyi bir arada tutmak için kullanılır. Bir obje, anahtar-değer çiftlerinden oluşur.

Örnek:

javascript
let kisi = {
    isim: "Ahmet",
    yas: 30,
    sehir: "İstanbul"
};

console.log(kisi.isim);  // Ahmet
console.log(kisi["yas"]);  // 30

Objelerin içinde farklı türdeki verileri tutabiliriz ve bu verilere obje üzerinden anahtarlar ile erişebiliriz.

6. Dizi (Array)

JavaScript dizileri, birden fazla öğeyi tek bir değişkende tutmak için kullanılır. Diziler sıfırdan başlayan indekslerle düzenlenir.

Örnek:

javascript
let renkler = ["kırmızı", "yeşil", "mavi"];

console.log(renkler[0]);  // kırmızı
console.log(renkler.length);  // 3

Bu örnekte, renkler dizisi üç öğe içeriyor ve bu öğelere sırasıyla indeksleriyle erişebiliyoruz.

7. Asenkron Programlama (Asynchronous Programming)

JavaScript'te asenkron işlemler, özellikle web uygulamalarında oldukça önemlidir. Örneğin, bir API çağrısı veya dosya okuma işlemi gibi işlemler asenkron çalışır. setTimeout ve setInterval gibi zamanlayıcı fonksiyonları da asenkron çalışır.

setTimeout Örneği:

javascript
setTimeout(function() {
    console.log("Bu mesaj 3 saniye sonra görünecek.");
}, 3000);

Bu örnekte, 3 saniye sonra bir mesaj konsola yazdırılacaktır.

8. ES6 Özellikleri ve Yeni Yapılar

ES6 (ECMAScript 2015), JavaScript'e birçok yeni özellik eklemiştir. Bunlar arasında şunlar bulunur:

• Ok Fonksiyonları (Arrow Functions)
• Template Literals (Şablon Dize)
• Destructuring (Yapıyı Çözümleme)
• Spread Operator (...)

Ok Fonksiyonu Örneği:

javascript
const topla = (a, b) => a + b;
console.log(topla(5, 7));  // 12

Template Literal Örneği:

javascript
let isim = "Ahmet";
let yas = 25;
console.log(`Benim adım ${isim} ve ${yas} yaşındayım.`);  // Benim adım Ahmet ve 25 yaşındayım.

9. DOM Manipülasyonu

JavaScript, HTML ve CSS ile etkileşim kurarak dinamik web sayfaları oluşturmak için kullanılır. DOM Manipülasyonu ile sayfa öğeleri üzerinde değişiklik yapabiliriz.

Örnek:

javascript
let paragraf = document.querySelector("p");
paragraf.textContent = "Yeni içerik!";

Bu örnekte, sayfadaki ilk <p> etiketi seçilir ve içeriği değiştirilir.

Sonuç

JavaScript, web geliştirmenin temel taşlarından biridir ve geniş bir özellik yelpazesine sahiptir. Bu makalede, JavaScript’in bazı temel özelliklerini ve ileri seviye kullanım örneklerini inceledik. Fonksiyonlar, döngüler, koşul ifadeleri ve daha fazlası ile JavaScript’i etkili bir şekilde kullanabilir ve dinamik web sayfaları oluşturabilirsiniz.