Gereksinimler ve Ön Hazırlık

Bu projeyi hayata geçirmek için gelişmiş bir kurulum yapmanıza gerek yoktur. Modern bir web tarayıcısı (Chrome, Firefox veya Edge) ve temel düzeyde kod düzenleme yeteneğine sahip bir metin editörü (VS Code gibi) yeterlidir. 2026 yılı standartlarında ES6+ sözdizimi kullanarak temiz ve sürdürülebilir bir kod yapısı oluşturacağız.

• Modern bir kod editörü (Visual Studio Code önerilir).
• Temel HTML5 ve CSS3 bilgisi.
• JavaScript ES6 (Arrow functions, const/let, DOM manipulation) bilgisi.
• Tarayıcı geliştirici araçlarını (F12) kullanma alışkanlığı.

Temel HTML Yapısını Oluşturma

Zamanlayıcımızın iskeletini oluşturmak için basit bir HTML yapısına ihtiyacımız var. Bu yapı, zamanı gösterecek bir alan ve kullanıcı etkileşimi için butonlardan oluşacaktır. HTML, içeriğin semantik olarak düzenlenmesini sağlar.

  
Odaklanma Zamanlayıcısı
  
25:00
  Başlat
  Sıfırla

Burada id seçicileri, JavaScript tarafında DOM (Document Object Model) elemanlarına erişmek için kritik öneme sahiptir. Bu sayede zamanlayıcıyı tetikleyebilir ve metin değerlerini güncelleyebiliriz.

JavaScript ile Zamanlayıcı Mantığını Kurma

Zamanlayıcının kalbi setInterval fonksiyonunda atar. Ancak bu fonksiyonu doğrudan kullanmak yerine, zamanı yöneten bir değişken yapısı kurmalıyız. Aşağıdaki kod bloğu, zamanlayıcının nasıl başlatılacağını ve saniye bazlı nasıl güncelleneceğini göstermektedir.

let timeLeft = 1500; // 25 dakika saniye cinsinden
let timerId = null;

function updateDisplay() {
  const minutes = Math.floor(timeLeft / 60);
  const seconds = timeLeft % 60;
  document.getElementById('display').innerText = 
    `${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}`;
}

function startTimer() {
  if (timerId) return; // Zaten çalışıyorsa tekrar başlatma
  timerId = setInterval(() => {
    if (timeLeft > 0) {
      timeLeft--;
      updateDisplay();
    } else {
      clearInterval(timerId);
      timerId = null;
      alert("Süre doldu, mola zamanı!");
    }
  }, 1000);
}

Bu kodda padStart(2, '0') metodu, tek haneli sayıların (örneğin 9 saniye) "09" şeklinde görünmesini sağlayarak profesyonel bir arayüz deneyimi sunar.

DOM Etkileşimleri ve Olay Dinleyicileri

HTML butonlarına tıklandığında JavaScript fonksiyonlarının çalışması için addEventListener metodunu kullanırız. Bu, kullanıcı arayüzü ile mantıksal katman arasındaki köprüdür.

document.getElementById('start-btn').addEventListener('click', startTimer);
document.getElementById('reset-btn').addEventListener('click', () => {
  clearInterval(timerId);
  timerId = null;
  timeLeft = 1500;
  updateDisplay();
});

Bu adımda reset-btn için bir anonim fonksiyon tanımladık. Bu fonksiyon, zamanlayıcıyı durdurur ve değişkeni başlangıç değerine döndürerek ekranı günceller.

Zamanlayıcı Yöntemleri Karşılaştırması

JavaScript ile zaman yönetimi yaparken farklı yaklaşımlar mevcuttur. Aşağıdaki tablo, bu yöntemlerin avantaj ve dezavantajlarını özetlemektedir.

Kritik Uyarılar ve Güvenlik

Güvenlik Uyarısı: Tarayıcı tabanlı uygulamalarda eval() veya benzeri güvensiz metodlardan kaçının. Kullanıcıdan gelen girdileri doğrudan DOM'a yazarken XSS (Cross-Site Scripting) saldırılarına karşı dikkatli olun ve her zaman innerText veya textContent kullanın.

Ayrıca, tarayıcıların enerji tasarrufu modları nedeniyle setInterval bazen milisaniyelik sapmalar yaşayabilir. Profesyonel uygulamalarda, geçerli zamanı (Date.now()) kontrol ederek sapmaları düzeltmek en iyi pratiktir.

Gelişmiş Özellikler: Tarayıcı Bildirimleri

Zaman dolduğunda kullanıcının tarayıcı sekmesi açık olmasa bile bildirim almasını sağlamak, kullanıcı deneyimini bir üst seviyeye taşır. Bunun için Notification API kullanılır.

function notifyUser() {
  if (Notification.permission === "granted") {
    new Notification("Odaklanma Zamanı Bitti!", {
      body: "Mola verin veya yeni bir göreve başlayın."
    });
  } else if (Notification.permission !== "denied") {
    Notification.requestPermission();
  }
}

Bu fonksiyonu startTimer içerisindeki else bloğuna ekleyerek bildirim özelliğini aktif edebilirsiniz. Kullanıcıdan izin istemek, tarayıcı güvenliği gereği zorunludur.

Sıkça Sorulan Sorular

Zamanlayıcı neden sekme arka plana atılınca yavaşlıyor?

Modern tarayıcılar, pil ömrünü korumak için arka plandaki sekmelerde setInterval hızını düşürür. Bunu aşmak için Date.now() ile zaman farkını hesaplayan bir mantık kurmalısınız.

Bu projeyi nasıl kalıcı hale getirebilirim?

Kullanıcının tercihlerini kaydetmek için localStorage API'sini kullanarak zamanlayıcı ayarlarını tarayıcıda saklayabilirsiniz.

Mobil cihazlarda çalışır mı?

Evet, yazdığımız kod tamamen duyarlı (responsive) bir HTML/CSS yapısı ile birleştirildiğinde mobil tarayıcılarda sorunsuz çalışacaktır.

Daha fazla özellik eklemek istersem ne yapmalıyım?

Mola sürelerini özelleştirmek için bir input alanı ekleyebilir ve timeLeft değişkenini bu değerle güncelleyebilirsiniz.

Kodun güvenli olduğundan nasıl emin olurum?

Kodunuzu her zaman modern bir IDE ile yazın, gereksiz kütüphane kullanımından kaçının ve tarayıcı konsolunda hata mesajlarını sürekli takip edin.

Uygulama Performansını Optimize Etme ve Bellek Yönetimi

Zamanlayıcı uygulamaları, özellikle setInterval gibi döngüsel fonksiyonlar kullanıldığında, tarayıcı kaynaklarını tüketebilir. Uygulamanızın uzun süreli kullanımlarda tarayıcıyı yavaşlatmaması için bellek yönetimine dikkat etmeniz gerekir. En kritik kural, zamanlayıcı durduğunda veya sayfa kapandığında clearInterval fonksiyonunu mutlaka çağırmaktır.

Ayrıca, DOM üzerindeki güncellemeleri minimize etmek performans için hayati önem taşır. Her saniye tüm arayüzü yeniden oluşturmak yerine, sadece zamanı gösteren span veya div elementinin metin içeriğini güncellemek, tarayıcının "reflow" (yeniden düzenleme) maliyetini düşürür.

// Verimli DOM güncelleme örneği
const timerDisplay = document.getElementById('timer');

function updateDisplay(seconds) {
    const minutes = Math.floor(seconds / 60);
    const remainderSeconds = seconds % 60;
    // Sadece metin düğümünü güncelliyoruz, tüm yapıyı değil
    timerDisplay.textContent = `${minutes}:${remainderSeconds < 10 ? '0' : ''}${remainderSeconds}`;
}

Zamanlayıcıyı Yayına Alma (Deployment) Süreçleri

Uygulamanızı yerel ortamdan canlı bir sunucuya taşırken, modern web standartlarını göz önünde bulundurmalısınız. Basit bir odaklanma zamanlayıcısı için karmaşık sunucu yapılarına ihtiyacınız yoktur. GitHub Pages, Netlify veya Vercel gibi statik site barındırma servisleri, bu tür projeler için en ideal çözümlerdir.

HTTPS Zorunluluğu

Tarayıcı bildirimleri (Notification API) ve bazı gelişmiş web özellikleri, güvenlik gereği yalnızca HTTPS protokolü üzerinden çalışır. Eğer uygulamanızı canlıya alacaksanız, mutlaka SSL sertifikası sağlayan bir platform kullanın. Aksi takdirde, kullanıcıya bildirim gönderme izni veren Notification.requestPermission() metodu hata verecektir.

Performans Testi İçin Kontrol Listesi

• Lighthouse Testi: Chrome Geliştirici Araçları'ndaki Lighthouse sekmesini kullanarak uygulamanızın performans skorunu ölçün.
• Minifikasyon: Yayınlamadan önce JavaScript ve CSS dosyalarınızı terser veya cssnano gibi araçlarla sıkıştırın.
• Önbellekleme: Kullanıcıların uygulamayı çevrimdışı da kullanabilmesi için Service Worker yapısını inceleyerek basit bir cache-first stratejisi uygulayın.

// Basit bir Service Worker kaydı (app.js içerisine eklenebilir)
if ('serviceWorker' in navigator) {
    window.addEventListener('load', () => {
        navigator.serviceWorker.register('/sw.js')
            .then(reg => console.log('Service Worker kayıtlı:', reg))
            .catch(err => console.log('Kayıt başarısız:', err));
    });
}

Bu optimizasyonlar, uygulamanızın sadece çalışır durumda olmasını değil, aynı zamanda profesyonel standartlarda bir kullanıcı deneyimi sunmasını sağlar. Küçük bir zamanlayıcı projesi, doğru mühendislik yaklaşımlarıyla ölçeklenebilir bir web uygulamasına dönüşebilir.

Sonuç

Bu rehberde, Javascript ile tarayıcı tabanlı bir odaklanma zamanlayıcısı nasıl yapılır sorusunu temelden alarak pratik bir şekilde yanıtladık. DOM manipülasyonu, olay dinleyicileri ve zamanlama fonksiyonlarını kullanarak çalışan bir uygulama inşa ettik. Bir sonraki adım olarak, CSS ile modern bir arayüz tasarlayabilir veya localStorage kullanarak kullanıcı ayarlarını tarayıcıda kalıcı hale getirebilirsiniz.

Yasal Uyarı: Bu makaledeki kod örnekleri eğitim amaçlıdır. Üretim ortamında (production) kullanmadan önce gerekli güvenlik testlerini yapmanız ve tarayıcı uyumluluklarını kontrol etmeniz önerilir.