jQuery İle Geri Sayım Yaptırma
Merhaba Arkadaşlar,
Bu makalede sizlere bir JavaScript Framework ‘ ü olan jQuery ile geri sayımın nasıl yaptırılacağını anlatacağım. İnternet yaşantımız içerisinde bir çok web sayfası içerisinde gördüğümüz bu sisteme en çokta reklam içeriklerinde rastlamaktayız. Örnek vermek gerekirse Türkiye ‘nin büyük haber sitelerinden birisi olan ve reklam içerikleri bir türlü boş kalamayan Mynet ‘e giriş yaptığımızda zaman zaman sayfanın hemen yüklenmediğini ve öncelikle reklam çıktığını görürüz. Bu reklamın bir köşesinde ise 10 , 9 , 8 , 7….. şeklinde bir geri sayım yapılarak ana sayfaya yönlendirme yapılmaktadır. İşte biz de bu makalede basit anlamda böyle bir geri sayım ve ardından da bir siteye yönlendirme yapacağız.
İşlemlerimize başlamamız için öncelikle bir adet klasör açıyoruz ve içerisine ” index.html ” adında bir sayfa oluşturuyoruz. Daha sonra yazacağımız script kodlarının anlaşılıp yorumlanabilmesi için son sürüm jQuery kütüphanesini jQuery.com adresinden indiriyoruz. Hemen açılış sayfasında bulunan indirme seçeneklerinden dosya boyutu küçük olanı seçerek bilgisayarımızda oluşturduğumuz klasör içerisine kaydediyoruz. Bu işlem de tamamlandıktan sonra artık kod yazmaya başlayabiliriz.
İlk olarak klasik html kodlarımızı yazıyoruz ( jQuery kütüphanesini sayfaya dahil etmeyi unutmadan ) . Daha sonraetiketlerimiz arasına bir adet div içerisine ilk olarak etiketleri oluşturuyoruz. Span etiketlerimizden sonra ise ” saniye sonra sayfaya yönlendirileceksiniz ” yazacağız. Görüntü şu şekilde olacaktır.
<html>
<head>
<title>BilgiSayaci.Org - jQuery Geri Sayım</title>
<script src="jquery-1.8.3.min.js"></script>
</head>
<body>
<div><span></span> Saniye Sonra Sayfaya Yönlendirileceksiniz..</div>
</body>
</html>
Oluşturduğumuz div de ki mantığa bakacak olursak span etiketlerini yaratma sebebimiz jQuery ile geriye doğru saydıracağımız rakamları bu alanda gösterttireceğiz. Şimdi hemen üst tarafta belirttiğim kodlar sizinde sayfanızda yerini aldı ise artık script etiketlerimizi açarak jQuery kodlarımızı yazmaya başlayalım.
<html>
<head>
<title>BilgiSayaci.Org - jQuery Geri Sayım</title>
<script src="jquery-1.8.3.min.js"></script>
<script>
$(document).ready(function(){
var ilkRakam = 5;
$.saymayaBasla = function(){
if(ilkRakam > 0){
ilkRakam--;
$("div span").html(ilkRakam);
}
else{
window.location.href="http://www.bilgisayaci.org";
}
}
$("div span").html(ilkRakam);
setInterval("$.saymayaBasla()",1000);
});
</script>
</head>
<body>
<div><span></span> Saniye Sonra Sayfaya Yönlendirileceksiniz..</div>
</body>
</html>
HTML sayfamızın son şekli hemen üst bölümdeki gibi olacaktır. Yazdığımız jQuery kodlarının tek tek taşıdıkları anlamın iyi bir biçimde anlaşılabilmesi için satırları açıklayarak şu şekilde anlatabilirim :
<script>
//Sayfa Okunduğu Anda Fonksiyonu Başlat..
$(document).ready(function(){
//ilkRakam isminde bir değişken oluştur ve buna 5 değerini ver..
var ilkRakam = 5;
//saymayaBasla isimli bir fonksiyon oluştur..
$.saymayaBasla = function(){
//Eğer ilkRakam değişkeni içindeki değer 0 'dan büyük ise ilkRakam içindeki değeri 1 kere küçült ve yeni değeri div içindeki span etiketleri arasına yaz..
if(ilkRakam > 0){
ilkRakam--;
$("div span").html(ilkRakam);
}
//Eğer ilkRakam içindeki değer 0 'a eşit veya küçük ise bulunulan pencereyi verilen adrese yönlendir..
else{
window.location.href="http://www.bilgisayaci.org";
}
}
//İşlem sonunda div içindeki span etiketleri arasına ilkRakam değerini yazdır..
$("div span").html(ilkRakam);
//saymayaBasla isimli fonksiyonu 1 saniye ara ile işlemden geçir..
setInterval("$.saymayaBasla()",1000);
});
</script>
Gördüğünüz üzere küçük ve basit bir uygulama olarak açılan sayfamızı geriye doğru saydırdık ve www.bilgisayaci.org adresine yönlendirdik.
Size bu uygulama sonunda bir hatırlatma da yapmak istiyorum. Uygulamayı kodlarken yaptığım küçük bir hata benim hem zamanımı elimden almış hem de makaleyi yayına geçirme süremi uzatmıştır. jQuery her ne kadar JavaScript ‘i kısaltmamızı sağlasa da küçük bir nokta , parantez vb. işaretini unutursak bizi cezalandırmayı ihmal etmemektedir 🙂 . Son kod satırı olan ” setInterval(“$.saymayaBasla()”,1000); ” satırında parantezi unutarak ” setInterval(“$.saymayaBasla”,1000); ” şeklinde bir yazım yapınca kötü şeyler oldu 🙂 .
Not : Bu ders içeriğinde kullanılan dosyaları İndir Sayfası 28 No ‘lu Maddeden İndirebilirsiniz..
Çok güzel olmuş elinize emeğinize sağlık.
Ben bunu 1:20 (1 saat, 20 dakika şeklinde geri sayımını nasıl yaptırabilirim?