JavaScript ile Dinamik Bir Etkileşimli Egzersiz Takipçisi Nasıl Yapılır?
Modern web geliştirme dünyasında, kullanıcı verilerini anlık olarak işleyen ve tarayıcı üzerinde görselleştiren uygulamalar oluşturmak, JavaScript öğrenme sürecinin en verimli aşamalarından biridir. Bu rehberde, kendi egzersizlerinizi kaydedebileceğiniz, takip edebileceğiniz ve verileri tarayıcının yerel depolama alanında saklayabileceğiniz dinamik bir egzersiz takipçisi inşa edeceğiz. Bu proje, DOM (Document Object Model) manipülasyonu, olay dinleyicileri (event listeners) ve veri yönetimi konularında size sağlam bir temel kazandıracaktır.
Bu eğitim, JavaScript temellerine hakim olan ancak dinamik arayüz oluşturma konusunda pratiğe ihtiyaç duyan yazılım geliştiriciler için hazırlanmıştır. Projemiz boyunca modern ES6+ sözdizimini kullanarak temiz, modüler ve sürdürülebilir bir kod yapısı kuracağız. Uygulamanın sonunda, kullanıcı girdilerini işleyen, listeyi güncelleyen ve verileri kalıcı hale getiren profesyonel bir araca sahip olacaksınız.
Gereksinimler ve Ön Hazırlık
Projeye başlamadan önce bilgisayarınızda bir kod editörü (VS Code önerilir) ve modern bir web tarayıcısı (Chrome, Firefox veya Edge) yüklü olmalıdır. Projemiz tamamen istemci tarafında (client-side) çalışacağı için herhangi bir sunucu kurulumuna veya backend diline ihtiyaç duymuyoruz.
- HTML5: Arayüz yapısı için gerekli iskeleti sağlar.
- CSS3: Uygulamanın görsel tasarımı ve kullanıcı deneyimi için kullanılır.
- JavaScript (ES6+): Uygulamanın mantıksal işleyişini ve veri yönetimini üstlenir.
- LocalStorage API: Verilerin tarayıcı kapansa bile korunmasını sağlar.
Adım 1: HTML Arayüzünün Oluşturulması
Egzersiz takipçimizin iskeletini oluşturarak işe başlıyoruz. Kullanıcının egzersiz adını ve süresini girebileceği bir form alanı ve verilerin listeleneceği bir tablo yapısı kuracağız.
Adım 2: JavaScript ile Veri Yönetimi ve DOM Manipülasyonu
Şimdi formdan gelen verileri yakalayıp bir diziye aktaran ve bu diziyi ekrana basan temel JavaScript mantığını kuracağız. addEventListener kullanarak formun gönderilme olayını yakalıyoruz.
const form = document.getElementById('exerciseForm');
const exerciseList = document.getElementById('exerciseList');
let exercises = JSON.parse(localStorage.getItem('exercises')) || [];
function renderExercises() {
exerciseList.innerHTML = '';
exercises.forEach((ex, index) => {
const row = `
${ex.name}
${ex.duration} dk
Sil
`;
exerciseList.innerHTML += row;
});
}
form.addEventListener('submit', (e) => {
e.preventDefault();
const name = document.getElementById('exerciseName').value;
const duration = document.getElementById('exerciseDuration').value;
exercises.push({ name, duration });
localStorage.setItem('exercises', JSON.stringify(exercises));
renderExercises();
form.reset();
});
renderExercises();
Burada localStorage kullanarak verilerin tarayıcı yenilendiğinde kaybolmamasını sağlıyoruz. JSON.stringify ve JSON.parse metotları, nesneleri yerel depolama için metin formatına çevirir.
Adım 3: Veri Silme ve Güncelleme İşlemleri
Kullanıcıların ekledikleri hatalı verileri silmelerine olanak tanımak, uygulamanın etkileşimli olması için kritiktir. Aşağıdaki fonksiyon, diziden ilgili öğeyi kaldırır ve tabloyu yeniden günceller.
function deleteExercise(index) {
exercises.splice(index, 1);
localStorage.setItem('exercises', JSON.stringify(exercises));
renderExercises();
}
Bu fonksiyon, splice metodu ile diziden belirtilen indeksteki veriyi siler. Ardından güncellenmiş diziyi localStorage üzerinde kaydeder ve renderExercises fonksiyonunu tetikleyerek arayüzü güncel tutar.
Adım 4: Güvenlik ve Hata Yönetimi
Kullanıcı girdileriyle çalışırken en büyük risk XSS (Cross-Site Scripting) saldırılarıdır. Kullanıcının girdiği metni doğrudan innerHTML içine yerleştirmek tehlikelidir. Bunun yerine metin düğümleri (text nodes) veya güvenli veri işleme yöntemleri tercih edilmelidir.
Güvenlik Uyarısı: Kullanıcıdan alınan verileri asla doğrulamadan doğrudan DOM'a enjekte etmeyin. textContent özelliğini kullanmak, XSS saldırılarına karşı en etkili savunma yöntemlerinden biridir.
// Güvenli veri ekleme örneği
const tdName = document.createElement('td');
tdName.textContent = ex.name; // XSS koruması sağlar
row.appendChild(tdName);
Adım 5: Veri İşleme Yöntemlerinin Karşılaştırılması
Uygulamanızda veri yönetimi yaparken kullanabileceğiniz farklı yöntemlerin avantaj ve dezavantajlarını anlamak önemlidir.
Yöntem
Avantajı
Dezavantajı
LocalStorage
Basit, hızlı, tarayıcıda kalıcı
Sadece metin saklar, kapasite sınırlı
SessionStorage
Sekme kapanınca veriler silinir
Kalıcı veri tutmaz
IndexedDB
Büyük veri setleri için uygun
Karmaşık sözdizimi
Sıkça Sorulan Sorular
LocalStorage verileri ne kadar süre saklar?
LocalStorage üzerinde saklanan verilerin bir son kullanma tarihi yoktur. Kullanıcı tarayıcı önbelleğini temizlemediği veya kod ile silinmediği sürece veriler kalıcıdır.
Neden innerHTML yerine createElement kullanmalıyım?
innerHTML kullanımı, özellikle kullanıcı girdilerini işlerken güvenlik açığı oluşturur. createElement ve textContent kullanımı, tarayıcının girdiyi kod olarak değil, salt metin olarak işlemesini sağlar.
Bu uygulamayı nasıl daha gelişmiş hale getirebilirim?
Uygulamaya bir "Toplam Süre" hesaplayıcı ekleyebilir, egzersizleri kategorilere ayırabilir veya verileri bir JSON dosyası olarak dışa aktarma özelliği getirebilirsiniz.
JavaScript'te 'const' ve 'let' arasındaki fark nedir?
const, değeri değişmeyecek değişkenler için kullanılırken, let değeri zamanla değişebilecek (örneğin dizi içeriği veya sayaçlar) değişkenler için tercih edilir.
Mobil cihazlarda nasıl test edebilirim?
Tarayıcınızın geliştirici araçlarında (F12) bulunan "Device Toolbar" (cihaz araç çubuğu) modunu kullanarak uygulamanın mobil uyumluluğunu test edebilirsiniz.
Uygulama Performansını Optimize Etme Yöntemleri
Egzersiz takipçiniz büyüdükçe ve localStorage üzerinde tutulan veri miktarı arttıkça, uygulamanın performansını korumak kritik bir hale gelir. Özellikle her veri değişikliğinde tüm DOM yapısını yeniden oluşturmak, tarayıcı üzerinde gereksiz bir yük oluşturabilir. Bunun yerine "Virtual DOM" mantığına benzer şekilde, sadece değişen öğeyi güncelleyen fonksiyonlar yazmalısınız.
Performansı artırmak için aşağıdaki stratejileri uygulayabilirsiniz:
- Event Delegation (Olay Yetkilendirme): Her egzersiz öğesine ayrı bir "sil" butonu dinleyicisi eklemek yerine, ana kapsayıcıya (container) tek bir dinleyici ekleyerek
event.target kontrolü yapın.
- Debouncing: Eğer kullanıcıdan anlık metin girişi alıyorsanız, her tuş vuruşunda
localStorage'a yazmak yerine, girişi kısa bir süre (örneğin 300ms) bekleten bir debounce fonksiyonu kullanın.
- Veri İndeksleme: Egzersizleri bir dizi içinde tutarken, ID bazlı hızlı erişim için nesne (object) yapısını tercih edin.
// Event Delegation örneği
document.getElementById('exercise-list').addEventListener('click', function(e) {
if (e.target.classList.contains('delete-btn')) {
const id = e.target.getAttribute('data-id');
deleteExercise(id);
}
});
Uygulamanın Yayına Alınması (Deployment) Süreci
Geliştirdiğiniz bu yerel uygulamayı başkalarıyla paylaşmak veya bir portfolyo projesi olarak sunmak için statik bir web sunucusuna ihtiyaç duyarsınız. Modern geliştirme süreçlerinde, uygulamanızı hızlıca yayına almak için GitHub Pages veya Netlify gibi platformlar en pratik çözümlerdir.
Deployment öncesinde uygulamanızı şu adımlarla hazırlayın:
- Kod Minifikasyonu: JavaScript kodunuzdaki boşlukları ve yorum satırlarını temizleyerek dosya boyutunu küçültün.
- Asset Optimizasyonu: Kullandığınız ikonları veya görselleri optimize edin.
- HTTPS Zorunluluğu: Tarayıcıların
localStorage ve diğer web API'lerine güvenli erişim sağlaması için sitenizin mutlaka HTTPS protokolü ile yayınlandığından emin olun.
Eğer uygulamanızı GitHub üzerinden yayınlayacaksanız, projenizi bir repository haline getirip "Settings" sekmesinden "Pages" kısmını aktif etmeniz yeterlidir. Uygulamanız otomatik olarak kullaniciadi.github.io/proje-adi adresinde yayına girecektir.
Platform
Avantajı
Zorluk Derecesi
GitHub Pages
Ücretsiz ve hızlı entegrasyon
Kolay
Netlify
Sürükle-bırak deployment
Çok Kolay
Vercel
Yüksek performanslı CDN
Kolay
İpucu: Uygulamanızı yayına almadan önce console.log ifadelerini temizlemeyi unutmayın. Tarayıcı konsolunda görünen hata ayıklama mesajları, son kullanıcı için profesyonel bir görüntü oluşturmaz.
Sonuç
JavaScript ile dinamik bir egzersiz takipçisi oluşturarak, DOM manipülasyonu ve yerel veri depolama konularında pratik bir deneyim kazandınız. Bu proje, daha büyük ölçekli uygulamaların temelini oluşturur. Bir sonraki adım olarak, bu uygulamaya bir grafik kütüphanesi (örneğin Chart.js) entegre ederek egzersiz verilerinizi görselleştirmeyi deneyebilirsiniz.
Yasal Sorumluluk Reddi: Bu makalede paylaşılan kod örnekleri eğitim amaçlıdır. Üretim ortamında kullanacağınız uygulamalarda, kullanıcı verilerinin güvenliğini sağlamak için sunucu tarafı doğrulamaları ve gelişmiş güvenlik protokollerini (HTTPS, CSP vb.) mutlaka uygulayın.
Bu yazıya tepkinizi paylaşın:
İlgili Yazılar
Yorumlar (0)
Yorum Yaz