Javascript İle Nasıl Yapılır?

Modern web geliştirme süreçlerinin merkezinde yer alan JavaScript, dinamik ve etkileşimli kullanıcı deneyimleri sunmanın en güçlü yoludur. İnternet ekosistemindeki web sitelerinin neredeyse tamamı istemci tarafında bu dili kullanır. Bu rehberimizde, tarayıcı tabanlı uygulamalardan sunucu tarafına kadar uzanan geniş bir yelpazede, Javascript İle Nasıl Yapılır? sorusuna en güncel standartlar (ES2026+) ve en güvenli yöntemlerle yanıt arayacağız.

Bu makale, temel programlama bilgisine sahip olan ve JavaScript ekosisteminde modern pratikleri uygulamak isteyen geliştiriciler için hazırlanmıştır. Rehber boyunca öğreneceğiniz teknikler, sadece kod yazmanızı sağlamayacak; aynı zamanda performanslı, güvenli ve sürdürülebilir projeler inşa etmenize yardımcı olacaktır. Adım adım ilerleyen uygulamalı örneklerimizle, modern web geliştirmenin yapı taşlarını birlikte keşfedeceğiz.

Yazılım dünyasında standartlar hızla değişmektedir. Eski kaynaklarda sıkça karşılaştığınız verimsiz ve güvensiz yöntemleri bir kenara bırakarak, 2026 yılının modern tarayıcı standartlarına ve güvenlik protokollerine uygun kodlama pratiklerini incelemeye başlayabiliriz.

Ön Hazırlık ve Gereksinimler

JavaScript projelerini geliştirmek ve test etmek için karmaşık kurulumlara ihtiyacınız yoktur. Ancak profesyonel bir çalışma ortamı oluşturmak, hata ayıklama (debug) ve kod yazma hızınızı doğrudan etkiler. Bu rehberdeki örnekleri uygulayabilmek için aşağıdaki bileşenlerin hazır olması önerilir:

• Kod Editörü: Modern JavaScript sözdizimi desteği, otomatik tamamlama ve hata denetimi sunan Visual Studio Code (VS Code) veya benzeri bir editör.
• Güncel Web Tarayıcısı: Geliştirici araçları (Developer Tools) gelişmiş olan Google Chrome, Mozilla Firefox veya Microsoft Edge'in en güncel sürümü.
• Node.js (İsteğe Bağlı): Tarayıcı dışı ortamlarda veya paket yöneticisi (npm) gerektiren senaryolarda test yapmak için Node.js LTS sürümü.
• Temel HTML/CSS Bilgisi: JavaScript ile DOM (Document Object Model) manipülasyonu yaparken HTML yapısını ve CSS sınıflarını anlamak kritik önem taşır.

Hazırlıklarınızı tamamladıysanız, modern web sayfalarının temelini oluşturan dinamik eleman yönetimi ile ilk adımımızı atalım.

1. Modern JavaScript ile DOM Manipülasyonu Nasıl Yapılır?

DOM (Belge Nesnesi Modeli), tarayıcının HTML sayfasını bir ağaç yapısı olarak temsil etme biçimidir. JavaScript ile bu ağaca erişebilir, yeni elemanlar ekleyebilir, mevcut olanları silebilir veya güncelleyebiliriz. Geçmişte sıkça kullanılan document.write() veya güvensiz innerHTML yöntemleri yerine, modern ve güvenli DOM manipülasyon tekniklerini kullanmalıyız.

Aşağıdaki örnekte, kullanıcının girdiği veriyi güvenli bir şekilde listeye ekleyen ve XSS (Cross-Site Scripting) açıklarına karşı korumalı bir DOM manipülasyonu gerçekleştireceğiz. XSS, kötü niyetli kişilerin web sitenize zararlı kod enjekte etmesine olanak tanıyan bir güvenlik açığıdır.

// HTML'deki hedef elemanları seçiyoruz
const inputField = document.querySelector('#taskInput');
const addButton = document.querySelector('#addTaskBtn');
const taskList = document.querySelector('#taskList');

// Eleman ekleme fonksiyonu
function addNewTask() {
    const taskText = inputField.value.trim();

    if (taskText === '') {
        alert('Lütfen geçerli bir görev yazın.');
        return;
    }

    // Güvenli yöntem: createElement ve textContent kullanımı
    const newLi = document.createElement('li');
    newLi.className = 'task-item';
    
    // textContent kullanımı, girdiyi düz metin olarak işler ve XSS'i önler
    newLi.textContent = taskText;

    // Silme butonu ekleme
    const deleteBtn = document.createElement('button');
    deleteBtn.textContent = 'Sil';
    deleteBtn.className = 'delete-btn';
    deleteBtn.addEventListener('click', () => {
        taskList.removeChild(newLi);
    });

    newLi.appendChild(deleteBtn);
    taskList.appendChild(newLi);

    // Girdi alanını temizleme
    inputField.value = '';
}

// Olay dinleyici (Event Listener) ekleme
addButton.addEventListener('click', addNewTask);

Yukarıdaki kod bloğunda, document.createElement ile bellekte yeni bir HTML nesnesi oluşturduk. Kullanıcıdan alınan veriyi doğrudan HTML olarak yorumlayan innerHTML yerine, veriyi güvenli bir şekilde düz metin olarak işleyen textContent özelliğini kullandık. Bu sayede, kullanıcı girdi alanına maliciousCode() gibi zararlı bir kod yazsa bile, tarayıcı bunu çalıştırmayacak, sadece metin olarak ekranda gösterecektir.

2. Asenkron API İstekleri ve Veri Çekme İşlemi Nasıl Yapılır?

Modern web uygulamaları, sayfayı yenilemeden arka planda sunucularla iletişim kurar. JavaScript'te asenkron (eşzamansız) işlemleri yönetmek için geçmişte kullanılan callback fonksiyonları yerini Promise yapısına ve ardından çok daha okunabilir olan async/await sözdizimine bırakmıştır. API isteklerinde tarayıcı ile yerleşik olarak gelen Fetch API kullanılır.

Aşağıdaki örnek kod bloğunda, harici bir REST API'den (örnek olarak JSONPlaceholder) asenkron olarak kullanıcı verilerini nasıl çekeceğimizi, hata yönetimini (error handling) nasıl gerçekleştireceğimizi ve gelen veriyi ekrana nasıl yazdıracağımızı göreceğiz.

// Asenkron veri çekme fonksiyonu
async function fetchUserData(userId) {
    const apiUrl = `https://jsonplaceholder.typicode.com/users/${userId}`;

    try {
        // API isteği başlatılıyor
        const response = await fetch(apiUrl);

        // HTTP durum kodu kontrolü (örn. 404 veya 500 hataları için)
        if (!response.ok) {
            throw new Error(`Sunucu hatası: ${response.status}`);
        }

        // Yanıt JSON formatına dönüştürülüyor
        const userData = await response.json();
        
        // Veriyi ekrana yazdırma fonksiyonuna gönderiyoruz
        renderUser(userData);

    } catch (error) {
        // Ağ hataları veya kod içi hatalar burada yakalanır
        console.error('Veri çekme işlemi başarısız oldu:', error.message);
        showErrorMessage();
    }
}

// Veriyi DOM'a güvenli şekilde yazdırma
function renderUser(user) {
    const profileContainer = document.querySelector('#userProfile');
    profileContainer.innerHTML = ''; // Önceki içeriği temizle

    const nameElement = document.createElement('h3');
    nameElement.textContent = user.name;

    const emailElement = document.createElement('p');
    emailElement.textContent = `E-posta: ${user.email}`;

    profileContainer.appendChild(nameElement);
    profileContainer.appendChild(emailElement);
}

function showErrorMessage() {
    const profileContainer = document.querySelector('#userProfile');
    profileContainer.textContent = 'Kullanıcı bilgileri yüklenirken bir hata oluştu.';
}

// Fonksiyonu test etmek için çağırıyoruz
fetchUserData(1);

Bu kodda, async anahtar kelimesi ile tanımlanan fonksiyon içerisinde await kullanarak asenkron işlemlerin tamamlanmasını bekledik. try...catch bloğu sayesinde, internet bağlantısının kesilmesi veya sunucunun yanıt vermemesi gibi olası tüm hata senaryolarını kontrol altına aldık. Ayrıca response.ok kontrolü ile HTTP hata kodlarını (404, 500 vb.) manuel olarak yakalayıp uygun hata mesajını fırlattık.

3. JavaScript ile Güvenli Form Doğrulama (Validation) Nasıl Yapılır?

Kullanıcıların formlar aracılığıyla gönderdiği verilerin doğruluğunu kontrol etmek, hem kullanıcı deneyimi (UX) hem de veri tutarlılığı açısından önemlidir. İstemci taraflı (client-side) doğrulama, kullanıcıya anında geri bildirim sağlar. Ancak unutulmamalıdır ki, istemci taraflı doğrulama hiçbir zaman sunucu taraflı (server-side) güvenliğin yerini tutamaz; kullanıcı tarayıcıda JavaScript'i devre dışı bırakabilir.

Aşağıdaki örnekte, bir kayıt formundaki e-posta ve şifre alanlarını düzenli ifadeler (Regular Expressions - Regex) kullanarak nasıl doğrulayacağımızı adım adım inceleyeceğiz.

const registrationForm = document.querySelector('#registerForm');

registrationForm.addEventListener('submit', function(event) {
    // Formun varsayılan gönderme davranışını engelliyoruz
    event.preventDefault();

    const emailInput = document.querySelector('#email').value.trim();
    const passwordInput = document.querySelector('#password').value;
    const errorContainer = document.querySelector('#errorMessages');
    
    errorContainer.textContent = ''; // Hata mesajlarını temizle
    let errors = [];

    // E-posta formatı doğrulaması (Regex)
    const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
    if (!emailRegex.test(emailInput)) {
        errors.push('Lütfen geçerli bir e-posta adresi girin.');
    }

    // Şifre gücü doğrulaması (En az 8 karakter, bir büyük harf, bir sayı)
    const passwordRegex = /^(?=.*[A-Z])(?=.*\d).{8,}$/;
    if (!passwordRegex.test(passwordInput)) {
        errors.push('Şifre en az 8 karakter uzunluğunda olmalı, en az bir büyük harf ve bir rakam içermelidir.');
    }

    // Hata kontrolü ve formun işlenmesi
    if (errors.length > 0) {
        // Hataları ekrana yazdır
        errors.forEach(error => {
            const errorItem = document.createElement('p');
            errorItem.className = 'error-text';
            errorItem.textContent = error;
            errorContainer.appendChild(errorItem);
        });
    } else {
        // Form verileri geçerli, sunucuya gönderilebilir
        console.log('Form başarıyla doğrulandı. Veriler gönderiliyor...');
        sendDataToServer({ email: emailInput, password: passwordInput });
    }
});

function sendDataToServer(data) {
    // Sunucuya güvenli istek gönderme simülasyonu
    console.log('Sunucuya gönderilen veri:', data);
}

Bu uygulamada, event.preventDefault() fonksiyonu ile formun sayfayı yenileyerek sunucuya gitmesini engelledik. Böylece doğrulamaları tarayıcıda yapıp, hataları anlık olarak gösterebildik. E-posta ve şifre kalıplarını kontrol etmek için karmaşık metin eşleştirme şablonları olan Regex yapılarını kullandık. Şifre doğrulamasında kullanılan regex, modern güvenlik standartlarına uygun olarak güçlü şifre oluşturulmasını zorunlu kılar.

4. JavaScript ile Durum Yönetimi (State Management) Nasıl Yapılır?

Büyük ve karmaşık web uygulamalarında, uygulamanın anlık verilerini (durum / state) yönetmek zorlaşabilir. React veya Vue gibi kütüphaneler kullanmadan, saf JavaScript (Vanilla JS) ile reaktif (veriye duyarlı) bir durum yönetimi sistemi kurmak mümkündür. Bunun için ES6 ile gelen ve nesne davranışlarını özelleştirmemizi sağlayan Proxy nesnesini kullanabiliriz.

Aşağıdaki örnekte, durum değiştiğinde arayüzü (UI) otomatik olarak güncelleyen basit bir reaktif sayaç (counter) uygulaması tasarlayacağız.

// Başlangıç durumumuz (State)
const appState = {
    counter: 0,
    theme: 'light'
};

// Arayüzü güncelleyen fonksiyon (Render)
function renderApp(state) {
    const counterDisplay = document.querySelector('#counterDisplay');
    const appContainer = document.querySelector('#appContainer');

    if (counterDisplay) {
        counterDisplay.textContent = `Mevcut Sayı: ${state.counter}`;
    }
    
    if (appContainer) {
        appContainer.className = `theme-${state.theme}`;
    }
}

// Proxy Handler: Durum değişikliklerini yakalayan mekanizma
const stateHandler = {
    set(target, property, value) {
        // Değeri nesneye ata
        target[property] = value;
        
        // Durum her değiştiğinde arayüzü otomatik olarak güncelle
        console.log(`Durum güncellendi: ${property} -> ${value}`);
        renderApp(target);
        
        return true; // İşlemin başarılı olduğunu belirtir
    }
};

// Reaktif Durum Nesnesi oluşturuluyor
const reactiveState = new Proxy(appState, stateHandler);

// Olay dinleyicileri bağlama
document.querySelector('#incrementBtn').addEventListener('click', () => {
    reactiveState.counter++; // Proxy tetiklenir ve UI güncellenir
});

document.querySelector('#decrementBtn').addEventListener('click', () => {
    reactiveState.counter--;
});

document.querySelector('#toggleThemeBtn').addEventListener('click', () => {
    reactiveState.theme = reactiveState.theme === 'light' ? 'dark' : 'light';
});

// İlk yüklemede arayüzü çiz
renderApp(reactiveState);

Bu yaklaşım sayesinde, arayüzü güncellemek için her buton tıklamasında manuel olarak DOM elemanlarını seçip değiştirmek zorunda kalmayız. Sadece reactiveState nesnesinin değerini değiştiririz; arka planda çalışan Proxy mekanizması bu değişikliği algılar ve renderApp fonksiyonunu otomatik olarak çağırarak ekranın güncellenmesini sağlar. Bu, modern framework'lerin çalışma mantığının en temel halidir.

5. Modüler JavaScript ve ES Modules Kullanımı Nasıl Yapılır?

Projeler büyüdükçe tüm kodları tek bir JavaScript dosyasında tutmak kodun okunabilirliğini ve bakımını imkansız hale getirir. ES Modules (ESM) standardı, kodlarımızı işlevlerine göre farklı dosyalara (modüllere) bölmemize ve ihtiyaç duyulduğunda bunları birbirine dahil etmemize (import/export) olanak tanır. Tarayıcılar bu sistemi yerleşik olarak destekler.

Bu adımda, matematiksel işlemleri barındıran bir yardımcı modül oluşturacağız ve bu modülü ana uygulama dosyamızda nasıl kullanacağımızı göreceğiz.

Dosya: mathHelper.js (Modül Dosyası)

// Dışarıya aktarılacak fonksiyonlar (Named Exports)
export function add(a, b) {
    return a + b;
}

export function subtract(a, b) {
    return a - b;
}

// Varsayılan dışa aktarım (Default Export)
const mathConfig = {
    precision: 2,
    version: '1.0.0'
};

export default mathConfig;

Dosya: main.js (Ana Uygulama Dosy

6. JavaScript Uygulamalarında Performans Optimizasyonu Nasıl Yapılır?

function debounce(func, delay) {
    let timeoutId;
    return function(...args) {
        clearTimeout(timeoutId);
        timeoutId = setTimeout(() => {
            func.apply(this, args);
        }, delay);
    };
}

// Kullanım örneği: Arama kutusu için
const handleSearch = debounce((query) => {
    console.log("API isteği gönderiliyor:", query);
}, 500);

document.querySelector('#search-input').addEventListener('input', (e) => {
    handleSearch(e.target.value);
});

async function fetchData(url) {
    try {
        const response = await fetch(url);
        if (!response.ok) {
            throw new Error(`HTTP hatası! Durum: ${response.status}`);
        }
        return await response.json();
    } catch (error) {
        console.error("Veri çekme sırasında hata oluştu:", error.message);
        // Hata durumunda kullanıcıya gösterilecek bir arayüz tetiklenebilir
        showErrorMessage("Sunucuya ulaşılamıyor, lütfen daha sonra tekrar deneyin.");
    } finally {
        console.log("İşlem tamamlandı (başarılı veya başarısız).");
    }
}