JavaScript ile Tarayıcı Tabanlı Dinamik To-Do List Nasıl Yapılır?

Modern web geliştirme dünyasında, kullanıcı etkileşimi sağlayan arayüzler oluşturmak, bir yazılımcının temel yetkinliklerinden biridir. JavaScript ile tarayıcı tabanlı dinamik to-do list yapmak, DOM (Document Object Model - Belge Nesne Modeli) manipülasyonunu, olay yönetimini ve veri saklama yöntemlerini öğrenmek için mükemmel bir başlangıç noktasıdır. Bu rehberde, sıfırdan profesyonel bir yaklaşım ile görev yönetim uygulaması oluşturacağız.

Bu makale, temel HTML ve CSS bilgisine sahip olan ancak JavaScript ile etkileşimli özellikler eklemek isteyen geliştiriciler için hazırlanmıştır. Eğitim sonunda, görev ekleme, silme ve verileri tarayıcı hafızasında tutma yeteneklerine sahip, 2026 standartlarına uygun modern bir uygulama geliştirmiş olacaksınız.

Gereksinimler ve Ön Hazırlık

Projenize başlamadan önce bilgisayarınızda modern bir web tarayıcısı (Chrome, Firefox veya Edge) ve bir kod editörü (VS Code önerilir) yüklü olmalıdır. JavaScript projeleri için karmaşık kurulumlara gerek yoktur; tarayıcı geliştirici araçları (F12) hata ayıklama için yeterlidir.

• Kod Editörü: Visual Studio Code veya benzeri bir editör.
• Tarayıcı: Güncel bir tarayıcı (ES6+ desteği için).
• Temel Bilgi: HTML etiketleri ve temel CSS seçicileri hakkında bilgi.
• Çalışma Alanı: Projeniz için bir klasör oluşturun ve içine index.html, style.css ve app.js dosyalarını ekleyin.

Adım 1: HTML Yapısını Oluşturma

Dinamik bir yapı kurmadan önce, verilerin görüntüleneceği iskeleti hazırlamamız gerekir. JavaScript ile müdahale edeceğimiz alanları belirlemek için benzersiz "id" değerleri kullanacağız.

  
Görev Listem
  
  Ekle
  

Yukarıdaki kod bloğunda, kullanıcıdan girdi alacağımız input, işlemi tetikleyecek buton ve görevlerin liste olarak ekleneceği ul etiketini tanımladık. Bu yapı, JavaScript tarafında DOM seçimi yapmamızı kolaylaştıracaktır.

Adım 2: JavaScript ile DOM Seçimi ve Olay Dinleyicileri

HTML elementlerini JavaScript değişkenlerine atayarak, kullanıcı etkileşimlerini dinlemeye başlayabiliriz. "addEventListener" metodu, kullanıcının butona tıklama gibi eylemlerini yakalamamızı sağlar.

const input = document.getElementById('todoInput');
const addButton = document.getElementById('addBtn');
const list = document.getElementById('todoList');

addButton.addEventListener('click', () => {
    const taskText = input.value;
    if (taskText !== "") {
        addTask(taskText);
        input.value = "";
    }
});

Burada, addEventListener kullanarak tıklama olayını dinledik. Eğer input alanı boş değilse, addTask fonksiyonunu çağırarak görevi listeye ekliyoruz ve ardından input kutusunu temizliyoruz.

Adım 3: Dinamik Görev Ekleme Fonksiyonu

Görevleri listeye eklemek için yeni HTML elementleri oluşturmamız gerekir. createElement metodu, tarayıcıda dinamik olarak düğümler oluşturmamıza olanak tanır.

function addTask(text) {
    const li = document.createElement('li');
    li.textContent = text;
    
    const deleteBtn = document.createElement('button');
    deleteBtn.textContent = 'Sil';
    deleteBtn.onclick = function() {
        li.remove();
    };
    
    li.appendChild(deleteBtn);
    list.appendChild(li);
}

Bu fonksiyon, her görev için bir "li" etiketi oluşturur ve yanına bir silme butonu ekler. Silme butonuna tıklandığında, ilgili "li" elemanının DOM'dan kaldırılmasını sağlayan bir olay tanımladık.

Adım 4: Veri Kalıcılığı İçin LocalStorage Kullanımı

Sayfa yenilendiğinde verilerin kaybolmaması için tarayıcının LocalStorage (Yerel Depolama) özelliğini kullanmalıyız. Bu, verileri tarayıcıda kalıcı olarak saklamanın en basit yoludur.

function saveTasks() {
    const tasks = [];
    document.querySelectorAll('li').forEach(li => {
        tasks.push(li.firstChild.textContent);
    });
    localStorage.setItem('todos', JSON.stringify(tasks));
}

LocalStorage yalnızca metin (string) saklayabilir. Bu nedenle, görevlerimizi JSON.stringify metodu ile bir diziye dönüştürüp saklıyoruz. Uygulamayı her güncellediğinizde bu fonksiyonu çağırmak, verilerin kaybolmasını engeller.

Adım 5: Uygulama Yöntemlerinin Karşılaştırması

To-do list uygulaması yaparken farklı yaklaşımlar mevcuttur. Aşağıdaki tablo, veri yönetimi yöntemlerini karşılaştırmaktadır.

Güvenlik Uyarısı: Kullanıcıdan alınan verileri (input) doğrudan "innerHTML" ile eklemek XSS (Cross-Site Scripting) saldırılarına yol açabilir. Her zaman "textContent" veya "innerText" kullanarak veriyi metin olarak işleyin.

Sıkça Sorulan Sorular

JavaScript ile yapılan to-do list verileri neden sayfa yenilenince siliniyor?

JavaScript değişkenleri RAM üzerinde tutulur ve sayfa yenilendiğinde sıfırlanır. Verilerin kalıcı olması için LocalStorage veya bir veritabanı kullanmanız gerekir.

LocalStorage güvenli midir?

LocalStorage, hassas kullanıcı verileri (şifre, kredi kartı vb.) için uygun değildir çünkü tarayıcıdaki herhangi bir script bu verilere erişebilir. Sadece basit uygulama ayarları veya geçici veriler için kullanın.

Neden "var" yerine "const" veya "let" kullanmalıyım?

ES6 standartları ile gelen "const" ve "let", blok kapsamlıdır ve daha tahmin edilebilir bir kod yapısı sunar. "var" kullanımı güncel projelerde önerilmemektedir.

Uygulamayı nasıl daha profesyonel hale getirebilirim?

Görevleri düzenleme (edit) özelliği ekleyebilir, görevlerin tamamlanma durumunu (checkbox) takip edebilir ve CSS animasyonları ile kullanıcı deneyimini iyileştirebilirsiniz.

Hata ayıklama (debug) için en iyi yöntem nedir?

Tarayıcınızdaki "Console" sekmesini kullanarak kodunuzdaki hataları görebilir ve "Debugger" aracılığıyla kodunuzu adım adım çalıştırarak değişkenlerin değerlerini anlık izleyebilirsiniz.

Uygulama Performansını Optimize Etme ve İleri İpuçları

To-do list uygulamanız büyüdükçe, DOM üzerindeki her değişiklik performansı etkilemeye başlayabilir. Özellikle yüzlerce görev içeren listelerde, tüm listeyi her seferinde yeniden oluşturmak yerine sadece değişen öğeyi güncellemek (diffing) daha verimli bir yaklaşımdır. İşte uygulamanızı daha profesyonel hale getirecek bazı ileri seviye ipuçları:

DOM Manipülasyonunda Verimlilik

Her görev ekleme işleminde innerHTML kullanmak yerine, document.createElement ve appendChild yöntemlerini tercih edin. Bu, tarayıcının tüm HTML içeriğini yeniden ayrıştırmasını (parsing) engeller ve bellek kullanımını optimize eder.

// Verimli öğe oluşturma yöntemi
function createTodoItem(text) {
    const li = document.createElement('li');
    li.className = 'todo-item';
    li.textContent = text;
    
    const deleteBtn = document.createElement('button');
    deleteBtn.textContent = 'Sil';
    deleteBtn.onclick = (e) => e.target.parentElement.remove();
    
    li.appendChild(deleteBtn);
    return li;
}

Event Delegation (Olay Yetkilendirme) Kullanımı

Her bir görev öğesine ayrı bir "click" dinleyicisi eklemek yerine, listenin ana kapsayıcısına (parent element) tek bir olay dinleyicisi atayın. Bu, özellikle dinamik olarak eklenen öğelerde bellek sızıntılarını önler ve kodunuzu sadeleştirir.

const todoList = document.querySelector('#todo-list');

todoList.addEventListener('click', function(e) {
    if (e.target.classList.contains('delete-btn')) {
        e.target.parentElement.remove();
    }
});

Uygulamayı Canlıya Alma (Deployment) Süreçleri

Geliştirdiğiniz uygulamayı başkalarıyla paylaşmak için basit bir statik barındırma hizmeti kullanabilirsiniz. Günümüzde GitHub Pages, Vercel veya Netlify gibi platformlar, sadece bir "git push" işlemiyle uygulamanızı yayına almanıza olanak tanır.

Deployment Öncesi Kontrol Listesi

• Minifikasyon: JavaScript ve CSS dosyalarınızı küçülterek yükleme hızını artırın.
• Hata Yönetimi: Kullanıcı boş bir görev eklemeye çalıştığında veya LocalStorage dolu olduğunda oluşabilecek hataları try-catch blokları ile yönetin.
• Erişilebilirlik (A11y): Görev giriş alanlarına aria-label ekleyerek ekran okuyucularla uyumlu hale getirin.
• Responsive Tasarım: CSS medya sorguları (media queries) kullanarak uygulamanın mobil cihazlarda da kusursuz görünmesini sağlayın.

Profesyonel İpucu: Uygulamanızı yayınlamadan önce tarayıcı konsolunda herhangi bir hata mesajı kalmadığından emin olun. Ayrıca Lighthouse aracını kullanarak uygulamanızın performans, erişilebilirlik ve SEO skorlarını denetleyin.

Sonuç

JavaScript ile tarayıcı tabanlı dinamik bir to-do list oluşturmak, web geliştirme temellerini anlamak için harika bir adımdır. Bu rehberde DOM manipülasyonu, olay yönetimi ve veri saklama konularını ele aldık. Bir sonraki adım olarak, bu uygulamayı bir sunucuya bağlayarak verileri veritabanında saklamayı veya bir JavaScript kütüphanesi (React veya Vue gibi) kullanarak bileşen tabanlı bir mimariye geçiş yapmayı deneyebilirsiniz.

Sorumluluk Reddi: Bu rehberdeki kod örnekleri eğitim amaçlıdır. Üretim (production) ortamında kullanacağınız uygulamalarda, kullanıcı girdilerini doğrulama (validation) ve güvenlik önlemlerini (XSS/CSRF koruması) kapsamlı bir şekilde uygulamanız gerektiğini unutmayın.