Gereksinimler ve Ön Hazırlık

Projeye başlamadan önce bilgisayarınızda modern bir web tarayıcısı (Chrome, Firefox veya Edge) ve bir kod editörü (VS Code önerilir) bulunması yeterlidir. JavaScript ile dinamik bir görev yönetim uygulaması yapmak için herhangi bir sunucu veya veritabanı kurulumuna ihtiyaç yoktur; tarayıcının sunduğu localStorage API'sini kullanacağız.

• HTML5: Uygulamanın iskeletini oluşturmak için.
• CSS3: Arayüzün görselleştirilmesi için.
• JavaScript (ES6+): Uygulama mantığını kurmak için.
• Tarayıcı Geliştirici Araçları: Hata ayıklama (debug) süreçleri için.

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

Uygulamanın temelini oluşturacak HTML dosyası, kullanıcıdan girdi alacağımız bir form ve görevlerin listeleneceği bir konteyner içermelidir. Aşağıdaki kod bloğu, uygulamanın iskeletini temsil eder.

  
Görev Yönetim Paneli
  
    
    Ekle
  
  

Bu yapıda task-form üzerinden gönderilen verileri JavaScript ile yakalayacağız. task-list ise dinamik olarak oluşturulan görev öğelerinin ekleneceği ana kapsayıcıdır.

Adım 2: JavaScript ile Temel Mantığı Kurma

Form gönderildiğinde sayfanın yenilenmesini engellemek ve veriyi işlemek için addEventListener yöntemini kullanacağız. Aşağıdaki kod, basit bir görev ekleme mantığını göstermektedir.

const taskForm = document.getElementById('task-form');
const taskInput = document.getElementById('task-input');
const taskList = document.getElementById('task-list');

taskForm.addEventListener('submit', (e) => {
  e.preventDefault();
  const taskText = taskInput.value;
  if (taskText.trim() === '') return;
  
  addTask(taskText);
  taskInput.value = '';
});

function addTask(text) {
  const li = document.createElement('li');
  li.textContent = text;
  taskList.appendChild(li);
}

Burada e.preventDefault() kullanarak formun varsayılan sunucuya gönderilme davranışını durdurduk. trim() metodu ise kullanıcının boş veya sadece boşluk içeren görevler eklemesini engellemek için güvenlik önlemi olarak kullanılmıştır.

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

Uygulamanın sayfayı yenilediğinizde görevleri unutmaması için localStorage kullanmalıyız. Bu yöntem, verileri kullanıcının tarayıcısında kalıcı olarak saklar.

function saveTasks(tasks) {
  localStorage.setItem('tasks', JSON.stringify(tasks));
}

function getTasks() {
  return JSON.parse(localStorage.getItem('tasks')) || [];
}

JSON.stringify, JavaScript nesnesini bir metin dizisine çevirir; JSON.parse ise bu metni tekrar nesneye dönüştürür. Bu, veritabanı olmayan uygulamalar için en pratik veri saklama yöntemidir.

Adım 4: Görevleri Silme ve Güncelleme

Dinamik bir uygulamada, oluşturulan öğelere etkileşim eklemek kritiktir. Her görev için bir silme butonu ekleyerek DOM üzerinden öğeyi kaldırabiliriz.

function renderTasks() {
  const tasks = getTasks();
  taskList.innerHTML = '';
  tasks.forEach((task, index) => {
    const li = document.createElement('li');
    li.innerHTML = `${task} Sil`;
    taskList.appendChild(li);
  });
}

function deleteTask(index) {
  let tasks = getTasks();
  tasks.splice(index, 1);
  saveTasks(tasks);
  renderTasks();
}

splice(index, 1) metodu, belirtilen indeksteki öğeyi diziden çıkarır. Ardından renderTasks fonksiyonu çağrılarak arayüzün güncel verilerle yeniden çizilmesi sağlanır.

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

Görev yönetimi geliştirirken kullanabileceğiniz farklı yöntemlerin karşılaştırması aşağıdadır:

Kritik Güvenlik Uyarısı

Güvenlik Uyarısı: Kullanıcıdan alınan verileri doğrudan innerHTML içerisine yerleştirmek, XSS (Cross-Site Scripting) saldırılarına kapı aralayabilir. Kullanıcı girdilerini her zaman textContent ile eklemeli veya veriyi temizleyerek (sanitize) kullanmalısınız. Üretim ortamında (production) her zaman güvenlik kütüphaneleri kullanın.

Sıkça Sorulan Sorular

LocalStorage verileri ne kadar süre saklanır?

LocalStorage verileri, kullanıcı tarayıcı önbelleğini temizleyene veya siz kod ile veriyi silene kadar kalıcıdır.

Neden DOM manipülasyonu yerine framework kullanmıyoruz?

Bu rehber, JavaScript'in temelini anlamanız için tasarlanmıştır. Temel DOM işlemlerini öğrendiğinizde React veya Vue gibi kütüphaneleri anlamak çok daha kolaylaşacaktır.

Birden fazla görev aynı anda nasıl silinir?

Diziler üzerinde filter() metodunu kullanarak, seçili olmayan öğeleri tutan yeni bir dizi oluşturabilir ve bunu kaydedebilirsiniz.

Uygulamayı nasıl daha şık hale getirebilirim?

CSS kullanarak li elemanlarına hover efektleri, görev tamamlandığında üstünü çizme (text-decoration: line-through) gibi görsel geliştirmeler yapabilirsiniz.

Kod hatalarını nasıl ayıklarım?

Tarayıcınızın 'Console' sekmesini kullanarak console.log() ile değişkenlerin değerlerini takip edebilir ve 'Sources' sekmesinden hata ayıklama noktaları (breakpoints) koyabilirsiniz.

Uygulamanın Performansını Optimize Etme

Görev yönetimi uygulamanız büyüdükçe, her veri değişikliğinde tüm DOM ağacını yeniden oluşturmak performans sorunlarına yol açabilir. Özellikle yüzlerce görev eklendiğinde, tarayıcının render süreci yavaşlayabilir. Bu durumu engellemek için "DocumentFragment" kullanımını ve olay delegasyonunu (event delegation) tercih etmelisiniz.

Olay delegasyonu, her bir silme veya güncelleme butonu için ayrı bir dinleyici (event listener) atamak yerine, bu butonların kapsayıcısı olan ana listeye (ul etiketi) tek bir dinleyici atayarak bellek kullanımını ciddi oranda düşürür.

// Olay delegasyonu örneği
const taskList = document.querySelector('#task-list');

taskList.addEventListener('click', (event) => {
    if (event.target.classList.contains('delete-btn')) {
        const taskId = event.target.parentElement.dataset.id;
        removeTask(taskId);
    }
});

Uygulamayı Canlıya Alma (Deployment) Süreci

Geliştirdiğiniz bu uygulamayı internet üzerinde erişilebilir kılmak için karmaşık sunucu yapılarına ihtiyacınız yoktur. Statik bir web sitesi olarak GitHub Pages, Vercel veya Netlify gibi platformlar üzerinden ücretsiz olarak yayınlayabilirsiniz.

Deployment öncesi kontrol listeniz:

• Minifikasyon: Kodunuzu küçülterek dosya boyutunu azaltın.
• Meta Etiketleri: SEO uyumluluğu için etiketlerini ekleyin.
• HTTPS: Tarayıcı güvenliği için uygulamanızın mutlaka SSL sertifikası ile sunulduğundan emin olun.
• Hata İzleme: Sentry gibi araçlar kullanarak kullanıcı tarafında oluşan hataları anlık takip edin.

İleri Seviye İpuçları: Uygulamayı Geliştirme

Uygulamanızın kullanıcı deneyimini (UX) artırmak için aşağıdaki modern web özelliklerini entegre etmeyi düşünebilirsiniz:

1. Sürükle ve Bırak (Drag and Drop)

HTML5 Drag and Drop API'sini kullanarak görevlerin öncelik sırasını manuel olarak değiştirilmesini sağlayabilirsiniz. Bu, kullanıcıların iş akışlarını daha esnek yönetmelerine olanak tanır.

2. Karanlık Mod (Dark Mode) Desteği

Kullanıcıların göz yorgunluğunu azaltmak için CSS değişkenleri kullanarak kolayca karanlık mod ekleyebilirsiniz. prefers-color-scheme medya sorgusu ile kullanıcının işletim sistemi tercihini otomatik algılayabilirsiniz.

/* CSS ile basit tema yönetimi */
:root {
    --bg-color: #ffffff;
    --text-color: #000000;
}

@media (prefers-color-scheme: dark) {
    :root {
        --bg-color: #121212;
        --text-color: #ffffff;
    }
}

body {
    background-color: var(--bg-color);
    color: var(--text-color);
}

3. Veri Dışa Aktarma

Kullanıcıların görevlerini yedekleyebilmesi için mevcut localStorage verisini bir JSON dosyası olarak indirmelerini sağlayan bir "Dışa Aktar" butonu eklemek, uygulamanıza profesyonel bir dokunuş katacaktır.

Sonuç

JavaScript ile dinamik bir görev yönetim uygulaması geliştirerek, DOM manipülasyonu, olay yönetimi ve veri saklama konularında önemli bir adım attınız. Bu proje, temel bir yapı olsa da üzerine bildirimler, kategoriler veya sürükle-bırak özellikleri ekleyerek kapsamını genişletebilirsiniz. Bir sonraki adım olarak, bu uygulamayı bir API ile bağlayarak verileri gerçek bir veritabanında saklamayı deneyebilirsiniz.

Not: Bu rehberdeki kod örnekleri eğitim amaçlıdır. Ticari projelerde veri doğrulama ve güvenlik katmanlarını (sanitization) mutlaka artırmalısınız.