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.

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

var metin = "Birinci sayfada okunacak yazı İkinci sayfada okunacak yazıÜçüncü sayfada okunacak yazıDördüncü sayfada okunacak yazı"

var bolum = ""

function bol(metin) {

bolum = metin.split("")

for(i=0;i<bolum.length;i++) {

document.getElementById("sayfalar").innerHTML += "<a href="#" onclick="sayfaGoster("+(i)+")">"+(i+1)+"</a> "

}

function sayfaGoster(syf) {

document.getElementById("icerik").innerHTML = bolum[syf]

}

bol(metin)

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

</script>

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


<div id="icerik" style="font:normal normal normal 11px verdana;border:1px solid #000000; width:400px;height:300px;padding:4px"> </div> <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:


var metin = "Birinci sayfada okunacak yazı <!--bol-->İkinci sayfada okunacak yazı<!--bol-->Üçüncü sayfada okunacak yazı<!--bol-->Dördüncü sayfada okunacak yazı" 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 "" 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:


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.


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

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.


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

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:


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).


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. İyi yazılarda kullanmanız dileğiyle :)

NOT: Script hem Internet Explorer 6.0´da hem de Mozilla Firefox 1.0.4´te denenmiş olup herhangi bir hataya rastlanmamıştır. Scriptin düzgün çalışabilmesi için gerekli katmanların mutlak surette sayfaya eklenmiş olması, farklı isimler kullanılacaksa script kodu içerisinde gerekli yerlerin değiştirilmesi gerekmektedir. <SCRIPT> bloğu içerisindeki kodların 19 ve 20. satırlarının, katmanlar oluşturulduktan sonra <BODY> etiketleri arasına herhangi bir yere iliştirilmesi önemlidir. Diğer kodlar <HEAD> etiketi içinde de olabilir. Tavsiye edilen ise tüm script kodlarının <BODY> etiketi içinde katmanlar oluşturulduktan sonra herhangi bir yere eklenmesi yönündedir.