JavaScript ile Sayfalama



Elinizde çok uzun bir yazı var, bu yazıyı sitenizde yayınlamak
istiyorsunuz ama çok uzun olduğu için sitenizin görünümünü
bozacak endişesiyle bir türlü ekleyemiyorsunuz. ASP veya PHP
gibi dilleri kullanarak bu yazıyı sayfalara bölebilirsiniz
fakat bu sefer de her sayfa için sitenin yeniden yüklenmesi
gerektiğinden bu durumun kullanıcıyı iteceğini düşündüğünüz
için bunu da istemiyorsunuz. O zaman çözüm JavaScript´te.
Aşağıdaki fonksiyonu tarif edildiği şekilde kullanacak
olursanız, yazınızı istediğiniz boyutta hazırlamış olduğunuz
DIV katmanı içine ekleyebilir ve sayfalar arasında tekrar
yüklemeye gerek olmadan gezinebilirsiniz. Önce kodumuzun
tamamını yazıp daha sonra satır satır ayrıntılarına girelim.
 

     
  1. <div
    id="icerik"
    style="font:normal
    normal normal 11px verdana;border:1px solid #000000;
    width:400px;height:300px;padding:4px">&nbsp;</div>
     
  2. <div
    id="sayfalar"
    style="font:normal
    normal normal 11px verdana;border:1px solid #000000;width:400px;padding:4px;text-align:right">Sayfalar
    = </div>
     
  3. <script
    language="JavaScript">
     
  4. var
    metin =
    "Birinci sayfada okunacak yazı
    <!--bol-->İkinci sayfada okunacak yazı<!--bol-->Üçüncü
    sayfada okunacak yazı<!--bol-->Dördüncü sayfada
    okunacak yazı"
     
  5. var
    bolum =
    ""
     
  6.  

  7. function
    bol(metin) {
     
  8.   bolum = metin.split("<!--bol-->")
     
  9.  

  10.   for(i=0;i<bolum.length;i++)
    {
     
  11.     document.getElementById("sayfalar").innerHTML
    += "<a href="#" onclick="sayfaGoster("+(i)+")">"+(i+1)+"</a>&nbsp;"
     
  12.   }
     
  13. }
     
  14.  

  15. function
    sayfaGoster(syf) {
     
  16.   document.getElementById("icerik").innerHTML
    = bolum[syf]
     
  17. }
  18.  

  19. bol(metin)
     
  20. sayfaGoster(0) //Javascript´in
    saymaya sıfırdan başladığını unutmuyoruz.
     
  21. </script>

Öncelikle ilk iki
satırı ele alalım:
 

  1. <div
    id="icerik"
    style="font:normal
    normal normal 11px verdana;border:1px solid #000000; width:400px;height:300px;padding:4px">&nbsp;</div>
     
  2. <div
    id="sayfalar"
    style="font:normal
    normal normal 11px verdana;border:1px solid #000000;width:400px;padding:4px;text-align:right">Sayfalar
    = </div>

 

Buradaki DIV
katmanlarının sadece ID özelliklerine dikkat edilmeli.
Yazının ekleneceği katmanın ID´si "icerik", sayfa sayılarının
yazdırılacağı katmanın ID´sinin de "sayfalar" olması
gereklidir. Diğer tüm görsel değişiklikleri kendi isteğinize göre
değiştirebilirsiniz.
Şimdi de
scriptimize geçelim:
 

  1. var
    metin =
    "Birinci sayfada okunacak yazı <!--bol-->İkinci sayfada
    okunacak yazı<!--bol-->Üçüncü sayfada okunacak
    yazı<!--bol-->Dördüncü sayfada okunacak yazı"
     
  2. var
    bolum = ""
     

 

4. satır
işleyiş için çok önemli. Elinizde bulunan yazıya uygulamanız gereken
bir kural var. Yazınızı bölmek istediğiniz yerlere "<!--bol-->"
ayracı koymanız gereklidir. Bu ayraçlar sayesinde yazınız bol()
fonksiyonu kullanılarak sayfalara bölünecektir.
5. satırdaki "bolum" isimli değişkenimiz ise bol()
fonksiyonu tarafından kullanılacaktır. bol() fonksiyonu,
yazımızı belirttiğimiz yerlerden bölecek, bu değişkenimizin veri
tipini dizi değişkeni türüne çevirecek ve bulduğu her sayfayı bu
değişkenimizin içinde saklayacaktır. Nitekim 8. satırda bu
işlem gerçekleşiyor:
 

  1. bolum = metin.split("<!--bol-->")
     

 

10. satırda
bulunan "for" döngüsü, "bolum" değişkeni sayesinde,
"sayfalar" katmanına değişkenin dizi sayısınca sayfa linki
ekler.
11. satırda eklenen link etiketlerinin "onclick"
olaylarında; yazının görüntüleneceği "icerik" katmanında
gösterilecek kısımların numaraları sayfaGoster() fonksiyonuna
parametre olarak gönderilerek bu fonksiyon tetiklenir ve 12.
satırda döngümüzün sınırı belirlenerek kapatılır.
 

  1. for(i=0;i<bolum.length;i++)
    {
     
  2.   document.getElementById("sayfalar").innerHTML
    += "<a href="#" onclick="sayfaGoster("+(i)+")">"+(i+1)+"</a>&nbsp;"
     
  3. }
     

 

15 ve 17.
satırlar arasındaki sayfaGoster() fonksiyonu, kendisine
parametre olarak gönderilen numarayı alır, "bolum" dizi
değişkeninde bu sayıya denk gelen veriyi bulur ve "icerik"
katmanının innerHTML özelliği kullanılarak bulunan veri bu
katmana yazdırır.  
 

  1. function
    sayfaGoster(syf) {
     
  2.   document.getElementById("icerik").innerHTML
    = bolum[syf]
     
  3. }
     

 

Son olarak sayfanın
ilk yüklendiğinde sayfalama işleminin yapılabilmesi için
scriptimizin bol() fonksiyonunu çağırıp yazımızı böldürmeli
ve çıkan sonucun ilk değerini katmanımıza yazdırmalıyız. Bu,
kullanıcı sayfayı açtığında ilk sayfayı görmesini sağlamak anlamına
geliyor. 19. satırda "metin" değişkenimize atadığımız
veriyi bol() fonksiyonu ile işletiyoruz:  
 

  1. bol(metin)
     

 

Ve 20.
satırda da sayfaGoster() fonksiyonu ile elimizdeki ilk değeri
"icerik" kısmına yazdırıyoruz (Bunu yapmazsak açılışta "icerik"
katmanımız boş görünecektir).
 

  1. sayfaGoster(0)
    //Javascript´in saymaya sıfırdan
    başladığını unutmuyoruz.
     

 

Artık yazımız
istediğimiz boyutlarda ayarlanmış ve istediğimiz yerlerden kesilmiş
vaziyette, sayfa yeniden yükleme sorunu olmadan sayfalar arasında
anında geçişler yapmaya hazır şekle geldi.

Yeni yorum gönder

Bu alanın içeriği gizli tutulacak ve açıkta gösterilmeyecektir.
CAPTCHA
Aşağıdaki resimde yer alan karakterleri kutucuğa doğru olarak yazınız
Image CAPTCHA
Enter the characters shown in the image.

Anket

Web sitesinde hangisi daha önemlidir: