Gereksinimler ve Ön Hazırlık

Projeye başlamadan önce bilgisayarınızda modern bir kod editörü (VS Code önerilir) ve güncel bir web tarayıcısı (Chrome, Firefox veya Edge) bulunmalıdır. Herhangi bir sunucu tarafı kurulumuna gerek yoktur; JavaScript tarayıcı üzerinde çalıştığı için dosyalarınızı doğrudan tarayıcıda açarak test edebilirsiniz.

• Kod Editörü: VS Code veya benzeri bir editör.
• Tarayıcı: Geliştirici araçlarına (F12) sahip güncel bir tarayıcı.
• Temel Bilgi: HTML etiketleri ve temel CSS seçicileri hakkında bilgi sahibi olmak.

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

İlk adımda, uygulamanın iskeletini oluşturuyoruz. HTML, sayfanın yapısını temsil eder. Kullanıcının görev gireceği bir input alanı, ekleme butonu ve görevlerin listeleneceği bir konteyner oluşturacağız.

  
To-Do Listem
  
  Ekle
  

Burada input etiketi kullanıcıdan veri almak için, ul etiketi ise görevlerin listeleneceği liste öğelerini tutmak için kullanılmıştır. ID değerleri, JavaScript tarafında bu elemanlara erişmemizi sağlayacak anahtarlardır.

Adım 2: JavaScript ile DOM Manipülasyonu

HTML elemanlarını seçip, butona tıklandığında yeni bir liste öğesi (li) oluşturacak fonksiyonu yazalım. JavaScript, DOM üzerindeki değişiklikleri yönetmek için kullanılır.

const input = document.getElementById('taskInput');
const addButton = document.getElementById('addButton');
const taskList = document.getElementById('taskList');

addButton.addEventListener('click', () => {
  const taskText = input.value;
  if (taskText === '') return;

  const li = document.createElement('li');
  li.textContent = taskText;
  taskList.appendChild(li);
  input.value = '';
});

Bu kod bloğunda, addEventListener metodu ile butona tıklanma olayını dinliyoruz. Eğer input boş değilse, createElement ile yeni bir liste öğesi oluşturup bunu taskList içine ekliyoruz.

Adım 3: Görev Silme ve Tamamlama Özelliği

Bir yapılacaklar listesinde görevleri tamamlamak veya silmek temel ihtiyaçtır. Bu adımda, her görev için bir silme butonu ekleyeceğiz ve görevlerin üzerine tıklandığında stil değiştirmesini sağlayacağız.

function createTaskElement(text) {
  const li = document.createElement('li');
  li.textContent = text;
  
  const deleteBtn = document.createElement('button');
  deleteBtn.textContent = 'Sil';
  deleteBtn.onclick = () => li.remove();
  
  li.onclick = () => li.classList.toggle('completed');
  li.appendChild(deleteBtn);
  return li;
}

Bu fonksiyon, her görev için dinamik bir yapı oluşturur. classList.toggle metodu, tıklanan öğeye 'completed' sınıfını ekleyip çıkararak CSS üzerinden üstü çizili görünüm vermemizi sağlar.

Adım 4: LocalStorage ile Veri Kalıcılığı

Tarayıcıyı yenilediğinizde verilerin kaybolmaması için localStorage kullanmalıyız. Bu, tarayıcının yerel depolama alanına veri kaydetmemizi sağlar. Aşağıdaki tablo, farklı depolama yöntemlerinin kısa bir karşılaştırmasını sunar.

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

Bu fonksiyon, mevcut listedeki tüm görevleri bir diziye dönüştürüp JSON formatında tarayıcıya kaydeder. JSON.stringify, dizi yapısını metin formatına çevirir.

Adım 5: Güvenlik ve Hata Yönetimi

Kullanıcıdan alınan verileri doğrudan DOM'a eklemek, XSS (Cross-Site Scripting) saldırılarına açık kapı bırakabilir. Kullanıcı girdisini her zaman temizlemeli veya textContent gibi güvenli yöntemler kullanmalıyız.

Kritik Güvenlik Uyarısı: Kullanıcıdan gelen verileri asla innerHTML kullanarak doğrudan eklemeyin. Her zaman textContent veya innerText kullanın. Bu, kötü niyetli kodların tarayıcıda çalıştırılmasını engeller.

// Güvenli ekleme yöntemi
const li = document.createElement('li');
li.textContent = sanitizeInput(userInput); // Girdi temizleme fonksiyonu çağrısı

Sıkça Sorulan Sorular

LocalStorage verileri ne kadar süre saklar?

LocalStorage, siz tarayıcı geçmişini temizleyene veya JavaScript ile veriyi silene kadar kalıcı olarak saklanır.

Neden innerHTML yerine textContent kullanmalıyım?

innerHTML, metin içindeki HTML etiketlerini işler. Bu da bir kullanıcının etiketi ekleyerek saldırı yapmasına neden olabilir. textContent ise veriyi sadece düz metin olarak işler.

Birden fazla kullanıcı aynı cihazda verileri görebilir mi?

Evet, LocalStorage tarayıcı bazlıdır. Aynı bilgisayarda farklı tarayıcılar (Chrome ve Firefox) farklı veriler tutar.

Bu projeyi nasıl daha ileriye taşıyabilirim?

Görevlere tarih ekleyebilir, kategorilendirme yapabilir veya bir veritabanı (Firebase gibi) ile senkronize edebilirsiniz.

Kodlarım çalışmıyor, ne yapmalıyım?

Tarayıcınızın Geliştirici Araçları (F12) kısmındaki 'Console' sekmesini kontrol edin. Hatalar genellikle burada kırmızı renkle belirtilir.

Sorumluluk Reddi: Bu rehber eğitim amaçlıdır. Ticari veya kritik veri içeren uygulamalarda, verilerin güvenliği için sunucu taraflı doğrulama ve veritabanı şifreleme yöntemleri uygulanmalıdır.

Uygulama Performansını Optimize Etme

To-Do list uygulamanızda görev sayısı arttıkça, DOM üzerindeki her değişiklik tarayıcıyı yavaşlatabilir. Performansı artırmak için "Event Delegation" (Olay Yetkilendirme) yöntemini kullanmak oldukça kritiktir. Her görev öğesine ayrı bir olay dinleyicisi (event listener) eklemek yerine, ana kapsayıcıya tek bir dinleyici ekleyerek bellek kullanımını minimize edebilirsiniz.

Event Delegation Kullanımı

Aşağıdaki örnekte, her li öğesine tek tek dinleyici atamak yerine, ul etiketine atanan tek bir dinleyici ile tüm görevlerin silinmesini ve tamamlanmasını yönetiyoruz:

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

todoList.addEventListener('click', (e) => {
    if (e.target.classList.contains('delete-btn')) {
        e.target.parentElement.remove();
    } else if (e.target.classList.contains('complete-btn')) {
        e.target.parentElement.classList.toggle('completed');
    }
});

Uygulamayı Canlıya Alma (Deployment)

Projenizi geliştirdikten sonra, başkalarının da erişebilmesi için ücretsiz platformlarda yayınlayabilirsiniz. GitHub Pages, Netlify veya Vercel, statik web siteleri için en uygun çözümlerdir.

GitHub Pages ile Yayınlama Süreci

1. Projenizi bir GitHub deposuna (repository) yükleyin.
2. Depo ayarlarından "Pages" sekmesine gidin.
3. "Source" kısmından "main" dalını seçin ve kaydedin.
4. Birkaç dakika içinde projeniz kullaniciadi.github.io/proje-adi adresinde yayına girecektir.

Performans İpuçları Tablosu

İleri Seviye Hata Ayıklama (Debugging)

Karmaşık uygulamalarda hataları bulmak için console.log() yeterli olmayabilir. Tarayıcınızın "Sources" sekmesini kullanarak kodunuzu adım adım çalıştırabilir (breakpoint) ve değişkenlerin o anki değerlerini inceleyebilirsiniz.

Ayrıca, try...catch bloklarını kullanarak LocalStorage'a erişim sırasında oluşabilecek kota aşımı veya veri bozulması gibi durumları yönetebilirsiniz:

try {
    const data = JSON.parse(localStorage.getItem('todos'));
    if (!data) throw new Error("Veri bulunamadı");
} catch (error) {
    console.error("Depolama hatası:", error);
    localStorage.clear(); // Hatalı veriyi temizle
}

Sonuç

JavaScript ile tarayıcı tabanlı bir To-Do List yapmak, temel web geliştirme becerilerinizi pekiştirmek için mükemmel bir yöntemdir. Bu süreçte DOM yönetimi, olay dinleyicileri ve tarayıcı depolama birimleri gibi modern web geliştirmenin temel taşlarını öğrendiniz. Bir sonraki adım olarak, bu projeye CSS ile animasyonlar ekleyebilir veya görevlerin öncelik durumlarını yöneten bir filtreleme sistemi geliştirebilirsiniz.