Javascript İle Tarayıcı Tabanlı Bir Anket Modülü Nasıl Yapılır?

Gereksinimler ve Ön Hazırlık

Bu projeyi gerçekleştirmek için karmaşık bir kurulum sürecine ihtiyacınız yoktur. Sadece modern bir web tarayıcısı (Chrome, Firefox, Edge veya Safari) ve bir metin editörü (VS Code gibi) yeterlidir. Projemiz tamamen istemci tarafında (client-side) çalışacağı için bir sunucuya ihtiyaç duyulmamaktadır.

• Modern bir web tarayıcısı (Geliştirici araçları için F12 tuşunu kullanacağız).
• Temel HTML5 ve CSS bilgisi.
• ES6+ JavaScript sözdizimine aşinalık.

Çalışma ortamınızı hazırlamak için bir klasör oluşturun ve içine index.html, style.css ve app.js dosyalarını ekleyin. Bu yapı, kodunuzu düzenli tutmanızı ve hata ayıklamanızı kolaylaştıracaktır.

Anket Modülü İçin HTML Yapısını Oluşturma

Anket modülümüzün iskeletini oluştururken semantik HTML etiketleri kullanmak, SEO ve erişilebilirlik açısından kritiktir. Aşağıdaki kod bloğu, kullanıcının soruları göreceği ve yanıtlayacağı temel yapıyı sunar.

    


Kullanıcı Memnuniyet Anketi
    
        Adınız:
        
        
        

        
        Gönder
    

Bu yapıda, question-area div'i, JavaScript ile dinamik olarak soruları enjekte edeceğimiz ana kapsayıcıdır. Formun submit olayı, verileri işlemek için ana tetikleyicimiz olacaktır.

JavaScript ile Dinamik Soru Yönetimi

Anket sorularını bir dizi (array) içerisinde nesne olarak tutmak, sistemi esnek kılar. Bu sayede soruları kolayca güncelleyebilir veya veritabanından çekiyormuş gibi simüle edebilirsiniz.

const questions = [
    { id: 1, text: "Hizmetimizden memnun kaldınız mı?", type: "radio", options: ["Evet", "Hayır"] },
    { id: 2, text: "Bizi nereden duydunuz?", type: "select", options: ["Sosyal Medya", "Arkadaş", "Reklam"] }
];

function renderQuestions() {
    const container = document.getElementById('question-area');
    questions.forEach(q => {
        const div = document.createElement('div');
        div.innerHTML = `
${q.text}
`;
        // Burada seçenekleri oluşturma mantığı gelecek
        container.appendChild(div);
    });
}

Bu fonksiyon, questions dizisini döngüye alarak her soru için DOM elemanları oluşturur. forEach yöntemi, modern JavaScript'te dizi elemanlarını işlemek için en temiz yoldur.

Kullanıcı Girdilerini Doğrulama ve Güvenlik

JavaScript ile tarayıcı tabanlı bir anket modülü yaparken en önemli konu güvenliktir. Kullanıcıdan gelen verileri doğrudan HTML içine işlemek, XSS (Cross-Site Scripting) saldırılarına davetiye çıkarır. Bu nedenle, her zaman verileri temizlemeli (sanitize) veya textContent kullanmalısınız.

Kritik Uyarı: Kullanıcıdan alınan verileri asla doğrudan innerHTML içine yerleştirmeyin. Bu, kötü niyetli betiklerin çalıştırılmasına neden olabilir. Her zaman innerText veya textContent özelliklerini tercih edin.

function sanitizeInput(str) {
    const temp = document.createElement('div');
    temp.textContent = str;
    return temp.innerHTML;
}

const form = document.getElementById('survey-form');
form.addEventListener('submit', (e) => {
    e.preventDefault();
    const formData = new FormData(form);
    // Veri işleme mantığı burada yer alacak
});

Yukarıdaki sanitizeInput fonksiyonu, kullanıcı girdisini güvenli hale getirir. preventDefault() metodu ise formun varsayılan sayfa yenileme davranışını engelleyerek, veriyi arka planda işlemenizi sağlar.

Verileri Saklama ve Geri Bildirim

Anket tamamlandıktan sonra verileri localStorage kullanarak tarayıcıda saklayabilir veya bir API'ye gönderebilirsiniz. Aşağıdaki örnek, verilerin nasıl yerel olarak kaydedileceğini gösterir.

function saveSurvey(data) {
    const results = JSON.parse(localStorage.getItem('surveyResults') || '[]');
    results.push(data);
    localStorage.setItem('surveyResults', JSON.stringify(results));
    alert("Anketiniz başarıyla kaydedildi!");
}

localStorage kullanımı, küçük ölçekli projelerde verilerin oturumlar arasında kalıcı olmasını sağlar. Ancak büyük ölçekli uygulamalarda bu verilerin mutlaka bir sunucuya (Backend) gönderilmesi gerektiğini unutmayın.

Anket Yöntemleri Karşılaştırma Tablosu

Sıkça Sorulan Sorular

JavaScript ile yapılan anketler güvenli mi?

İstemci tarafında yapılan anketler, verinin işlenmesi ve saklanması süreçlerinde sunucu tarafı kadar güvenli değildir. Hassas veriler için mutlaka sunucu taraflı doğrulama (Backend Validation) kullanılmalıdır.

Anket sonuçlarını nasıl dışa aktarırım?

localStorage içerisindeki verileri JSON.stringify ile bir dosyaya dönüştürüp, Blob nesnesi kullanarak kullanıcıya indirtmeniz mümkündür.

Mobil cihazlarda çalışır mı?

Evet, CSS ile media queries kullanarak anket formunuzu mobil uyumlu (responsive) hale getirebilirsiniz.

Veriler silinir mi?

localStorage tarayıcı önbelleği temizlendiğinde silinir. Kalıcı veri istiyorsanız bir veritabanı bağlantısı şarttır.

Neden kütüphane kullanmamalıyım?

Öğrenme aşamasında saf JavaScript kullanmak, dilin temel mantığını kavramanıza yardımcı olur. Basit projelerde kütüphane yükü gereksizdir.

Sorumluluk Reddi: Bu rehberde sunulan kod örnekleri eğitim amaçlıdır. Üretim ortamında (production) kullanmadan önce, verilerin sunucu tarafında doğrulanması ve gerekli güvenlik önlemlerinin (CSRF koruması, veri şifreleme) alınması geliştiricinin sorumluluğundadır.

Anket Modülünde Performans Optimizasyonu

Anket modülünüz büyüdükçe, özellikle çok sayfalı veya karmaşık mantığa sahip anketlerde performans kritik bir rol oynar. Tarayıcı tabanlı uygulamalarda DOM üzerindeki gereksiz güncellemeler, kullanıcı deneyimini doğrudan olumsuz etkiler.

DOM Manipülasyonunu Minimize Etme

Her soru geçişinde tüm sayfayı yeniden oluşturmak yerine, sadece değişmesi gereken bölümleri güncellemek (DocumentFragment kullanımı gibi) performansı artırır. Aşağıdaki örnek, anket sorularını bellekte hazırlayıp tek seferde DOM'a ekleme yöntemini göstermektedir:

function renderQuestions(questions) {
    const fragment = document.createDocumentFragment();
    questions.forEach(q => {
        const div = document.createElement('div');
        div.className = 'question-item';
        div.textContent = q.text;
        fragment.appendChild(div);
    });
    document.getElementById('survey-container').appendChild(fragment);
}

Event Delegation (Olay Yetkilendirme) Kullanımı

Her bir anket seçeneği için ayrı bir olay dinleyicisi (event listener) atamak yerine, ana kapsayıcıya tek bir dinleyici atayarak bellek kullanımını optimize edebilirsiniz.

document.getElementById('survey-container').addEventListener('click', (e) => {
    if (e.target.classList.contains('option-btn')) {
        handleSelection(e.target.dataset.value);
    }
});

Anket Modülü İçin Hata Ayıklama Stratejileri

Geliştirme aşamasında karşılaşılan hataları hızlıca çözmek, modülün kararlılığı için hayati önem taşır. Özellikle kullanıcı girdilerinin işlenmesi sırasında oluşan mantıksal hataları izlemek için şu yöntemleri izleyebilirsiniz:

• Konsol İzleme: Veri akışını console.table() kullanarak görselleştirmek, anket sonuçlarının doğru dizinlendiğini kontrol etmenizi sağlar.
• Durum Kontrolü: Kullanıcı anketi yarıda bıraktığında veya tarayıcıyı kapattığında verilerin localStorage üzerinde düzgün saklanıp saklanmadığını "Application" sekmesinden denetleyin.
• Hata Yakalama Blokları: Ağ istekleri (API gönderimleri) sırasında oluşabilecek kesintileri yönetmek için try-catch bloklarını mutlaka kullanın.

async function submitSurvey(data) {
    try {
        const response = await fetch('/api/survey', {
            method: 'POST',
            body: JSON.stringify(data)
        });
        if (!response.ok) throw new Error('Sunucu hatası: ' + response.status);
    } catch (error) {
        console.error('Anket gönderilemedi:', error);
        alert('Bir hata oluştu, lütfen tekrar deneyin.');
    }
}

İleri Seviye İpuçları ve Kullanıcı Deneyimi (UX)

Anketin tamamlanma oranını artırmak için kullanıcıya görsel geri bildirimler sunmak oldukça etkilidir. İlerleme çubuğu (progress bar) eklemek, kullanıcının ankete ne kadar zaman ayırması gerektiğini anlamasına yardımcı olur.

İpucu: Kullanıcıların anketi terk etmesini önlemek için "Kaydet ve Devam Et" özelliği ekleyerek, anketin mevcut durumunu localStorage üzerinde periyodik olarak güncelleyin.

Ayrıca, klavye navigasyonunu (Ok tuşları ile seçim yapma) desteklemek, erişilebilirlik standartlarına uyum sağlamanıza ve profesyonel bir kullanıcı deneyimi sunmanıza olanak tanır.

Sonuç

JavaScript ile tarayıcı tabanlı bir anket modülü oluşturmak, web geliştirme temellerini pekiştirmek için mükemmel bir projedir. Bu süreçte DOM manipülasyonu, olay yönetimi ve veri saklama konularında yetkinlik kazandınız. Bir sonraki adım olarak, bu modülü bir Node.js sunucusu ile birleştirerek verileri gerçek bir veritabanına kaydetmeyi deneyebilirsiniz. Başarılar dilerim.