Gereksinimler ve Ön Hazırlık

Projeye başlamadan önce modern bir web geliştirme ortamına ihtiyacınız var. 2026 standartlarına uygun bir geliştirme süreci için aşağıdaki araçların hazır olduğundan emin olun:

• Güncel Tarayıcı: Chrome, Firefox veya Edge'in en son sürümleri (ES modülleri ve modern API desteği için).
• Kod Editörü: VS Code veya benzeri bir editör (Eklenti olarak ESLint kullanmanız önerilir).
• Temel Bilgi: DOM (Document Object Model) manipülasyonu, olay dinleyicileri (Event Listeners) ve Fetch API kullanımı.

Projenizi başlatmak için bir klasör oluşturun ve içine index.html, style.css ve app.js dosyalarını ekleyin. Kodlarınızı yerel bir sunucuda (Live Server gibi) çalıştırmanız, dosyalar arası veri akışını test etmek için kritiktir.

Adım 1: E-Kitap Yapısını JSON ile Tanımlama

Dinamik bir okuyucu için verinin düzenli olması gerekir. İçerikleri doğrudan HTML içine yazmak yerine, onları bir JSON (JavaScript Object Notation) dosyasında tutmak, kitabın bölümlerini yönetmeyi kolaylaştırır.

// kitap.json
{
  "baslik": "JavaScript Rehberi 2026",
  "yazar": "Eğitmen",
  "bolumler": [
    { "id": 1, "baslik": "Giriş", "icerik": "JavaScript dünyasına hoş geldiniz." },
    { "id": 2, "baslik": "Değişkenler", "icerik": "Modern değişken tanımlama yöntemleri." }
  ]
}

Bu JSON yapısı, okuyucunun hangi bölümün yükleneceğini belirlemesini sağlar. id alanı, navigasyon için benzersiz bir anahtar görevi görür.

Adım 2: Temel HTML Arayüzünü Oluşturma

Okuyucunun iskeletini oluştururken semantik HTML etiketleri kullanmak, SEO ve erişilebilirlik açısından önemlidir. main ve nav etiketlerini kullanarak yapıyı netleştirin.

  
  
    

    

  
  Önceki
  Sonraki

Bu yapı, JavaScript ile DOM elemanlarına kolayca erişmemizi sağlar. id değerleri, document.getElementById() metodu ile seçilerek içerik güncellenir.

Adım 3: JavaScript ile İçeriği Dinamik Yükleme

Fetch API kullanarak JSON dosyamızı çekip, sayfaya yansıtma zamanı. JavaScript'in async/await yapısı, asenkron işlemleri yönetmek için en temiz yoldur.

async function kitapYukle() {
  const yanit = await fetch('kitap.json');
  const veri = await yanit.json();
  return veri;
}

function bolumGoster(bolumId, kitapVerisi) {
  const bolum = kitapVerisi.bolumler.find(b => b.id === bolumId);
  document.getElementById('bolum-basligi').textContent = bolum.baslik;
  document.getElementById('metin-alani').textContent = bolum.icerik;
}

Burada find metodu, dizi içerisindeki doğru bölümü seçmemize yardımcı olur. textContent kullanımı, XSS (Cross-Site Scripting) saldırılarını engellemek için güvenli bir yöntemdir; doğrudan HTML enjekte etmekten kaçının.

Adım 4: Kullanıcı Tercihleri ve LocalStorage Entegrasyonu

Okuyucuların yazı tipi boyutu veya gece modu gibi tercihleri, sayfayı yenilediklerinde kaybolmamalıdır. Bunun için localStorage kullanılır.

function temaDegistir(mod) {
  if (mod === 'gece') {
    document.body.classList.add('karanlik-mod');
    localStorage.setItem('tema', 'gece');
  } else {
    document.body.classList.remove('karanlik-mod');
    localStorage.setItem('tema', 'aydinlik');
  }
}

// Sayfa yüklendiğinde tercihi uygula
const kaydedilenTema = localStorage.getItem('tema');
if (kaydedilenTema) temaDegistir(kaydedilenTema);

Bu kod, kullanıcının seçtiği temanın tarayıcı kapansa bile hatırlanmasını sağlar. Güvenlik açısından, localStorage'a hassas kullanıcı verileri kaydetmediğinizden emin olun.

Adım 5: Navigasyon ve Sayfa Geçiş Mantığı

Okuyucunun bölümler arasında gezinebilmesi için bir sayaç değişkeni tutmalıyız. Bu değişken, o anki bölümün indeksini takip eder.

let aktifBolumIndeksi = 0;

document.getElementById('sonraki').addEventListener('click', () => {
  aktifBolumIndeksi++;
  bolumGoster(aktifBolumIndeksi, kitapVerisi);
});

Burada addEventListener kullanarak butonlara tıklama özelliği kazandırdık. aktifBolumIndeksi değerini kontrol ederek, kitabın sonuna gelindiğinde butonun devre dışı bırakılmasını sağlayabilirsiniz.

Karşılaştırmalı Yöntemler Tablosu

Kritik Güvenlik Uyarısı: Kullanıcıdan gelen veya dış kaynaklı JSON verilerini DOM'a aktarırken asla innerHTML kullanmayın. Bunun yerine textContent veya innerText tercih edin. Aksi takdirde, zararlı scriptlerin çalıştırılmasına (XSS) davetiye çıkarabilirsiniz.

Sıkça Sorulan Sorular

E-kitap okuyucumda resimler nasıl gösterilir?

JSON verinize resim yolunu ekleyip, JavaScript'te document.createElement('img') ile bir görsel elementi oluşturarak src özelliğine bu yolu atayabilirsiniz.

Büyük kitap dosyaları performansı düşürür mü?

Evet, tüm kitabı tek seferde yüklemek yerine, bölümleri ayrı JSON dosyaları olarak tutabilir ve sadece ihtiyaç duyulduğunda (Lazy Loading) çekebilirsiniz.

Okuyucuyu mobil uyumlu nasıl yaparım?

CSS'de @media sorguları kullanarak ekran genişliğine göre yazı tipi boyutlarını ve navigasyon butonlarının yerleşimini esnek (Flexbox/Grid) hale getirmelisiniz.

Arama özelliği ekleyebilir miyim?

Evet, JavaScript'in filter() metodunu kullanarak JSON verisi içerisinde başlık veya içerik araması yapan bir fonksiyon yazabilirsiniz.

Çevrimdışı okuma desteği mümkün mü?

Service Worker teknolojisini kullanarak, ilk ziyaretten sonra dosyaların tarayıcı önbelleğine alınmasını sağlayabilir ve çevrimdışı erişim sunabilirsiniz.

İleri Seviye İpuçları: Metin İşleme ve Okunabilirlik Optimizasyonu

E-kitap okuyucunuzun kullanıcı deneyimini bir üst seviyeye taşımak için metin işleme süreçlerini optimize etmeniz gerekir. Özellikle uzun metinlerde, tarayıcının render performansını korumak adına "Virtual Scrolling" (Sanal Kaydırma) mantığını uygulamak hayati önem taşır. Ayrıca, kullanıcıların okuma deneyimini kişiselleştirmeleri için yazı tipi boyutunu ve satır aralığını dinamik olarak değiştiren bir CSS değişken yönetimi kullanmalısınız.

Aşağıdaki kod örneği, kullanıcıdan gelen ayarları CSS değişkenleri aracılığıyla anlık olarak nasıl uygulayacağınızı göstermektedir:

// Kullanıcı tercihlerini CSS değişkenlerine aktarma
function updateReaderStyles(fontSize, lineHeight) {
    const readerContainer = document.getElementById('content-area');
    readerContainer.style.setProperty('--font-size', `${fontSize}px`);
    readerContainer.style.setProperty('--line-height', lineHeight);
}

// CSS tarafında kullanım:
// #content-area { font-size: var(--font-size); line-height: var(--line-height); }

Performans İzleme ve Hata Ayıklama Stratejileri

Dinamik içerik yükleyen uygulamalarda en büyük sorun, bellek sızıntıları (memory leaks) ve gereksiz DOM güncellemeleridir. Uygulamanızın performansını ölçmek için Chrome DevTools içerisindeki "Performance" sekmesini kullanmalı ve özellikle scroll veya resize olaylarına bağlı fonksiyonlarda Debounce veya Throttle tekniklerini uygulamalısınız.

Hata ayıklama sürecinde, JSON verilerinizin yapısını doğrulamak için bir "Schema Validator" kullanmak, beklenmedik veri tiplerinden kaynaklanan hataların önüne geçer. Aşağıdaki örnek, büyük metin bloklarını işlerken ana iş parçacığını (main thread) kilitlememek için kullanılan basit bir requestAnimationFrame kullanımını gösterir:

function renderChapter(content) {
    const container = document.getElementById('content-area');
    // DOM güncellemelerini tarayıcının boyama döngüsüne senkronize et
    requestAnimationFrame(() => {
        try {
            container.innerHTML = content;
        } catch (error) {
            console.error("İçerik yüklenirken hata oluştu:", error);
            container.innerHTML = "
İçerik yüklenemedi. Lütfen tekrar deneyin.
";
        }
    });
}

Uygulama Dağıtımı (Deployment) Öncesi Kontrol Listesi

Projenizi canlıya almadan önce aşağıdaki teknik kriterleri gözden geçirmeniz, uygulamanızın profesyonel standartlara ulaşmasını sağlar:

• Asset Optimizasyonu: Kitap içerisindeki görselleri WebP formatına dönüştürün ve lazy-load (tembel yükleme) özelliğini aktif edin.
• Güvenlik Başlıkları: XSS saldırılarına karşı Content-Security-Policy (CSP) başlıklarını sunucu tarafında yapılandırın.
• HTTPS Zorunluluğu: LocalStorage ve Service Worker gibi tarayıcı API'leri yalnızca güvenli bağlantılarda (HTTPS) kararlı çalışır.
• SEO Uyumluluğu: Eğer e-kitap içeriğinizin arama motorları tarafından indekslenmesini istiyorsanız, sunucu taraflı render (SSR) veya statik site oluşturma yöntemlerini değerlendirin.

Profesyonel İpucu: Büyük ölçekli e-kitap projelerinde, veriyi tek bir devasa JSON dosyası yerine, her bölümü ayrı bir JSON dosyası olarak tutan "Lazy Loading" mimarisini tercih edin. Bu, ilk yükleme süresini (LCP) ciddi oranda düşürecektir.

Sonuç

JavaScript ile dinamik bir e-kitap okuyucu geliştirmek, hem DOM manipülasyonu hem de veri yönetimi becerilerinizi geliştirecek harika bir projedir. Bu rehberde öğrendiğiniz temel yapıları kullanarak, üzerine not alma özelliği, sesli okuma API'si veya gelişmiş arama fonksiyonları ekleyerek projenizi 2026 standartlarında bir uygulamaya dönüştürebilirsiniz. Bir sonraki adım olarak, projenize bir Service Worker ekleyerek uygulamanızı "Progresif Web Uygulaması" (PWA) seviyesine taşımayı deneyebilirsiniz.

Yasal Sorumluluk Reddi: Bu makalede paylaşılan kod örnekleri eğitim amaçlıdır. Üretim ortamında (production) kullanacağınız uygulamalarda, veri güvenliği, kullanıcı gizliliği ve telif hakları yasalarına uygunluk konusunda bir hukuk uzmanından veya kıdemli güvenlik mühendisinden destek almanız önerilir.