Javascript Sayaç (Interval) Oluşturma
Javascript meraklısı web yazılımcılara yeniden merhaba :)
Her yeni makalemizde Javascript ile yeni yeni konuları öğrenirken bu makalemizde Javascript Interval konusunu öğreneceğiz.
Interval sözcüğünü Türkçe'ye çevirirsek (süre aralığı) gibi bir anlama denk gelmektedir ancak biz buna Javascript sayaç desek daha yerinde olur sanırım :)
Javascript interval konusunun amacı; anlık zaman dilimi içerisinde (dakika,saniye,milisaniye) bir ya da birden çok javascript kodlarını web browser üzerinde çalıştırmayı amaçlar.Bu kodları çalıştırabilmek için SetInterval() metodu kullanılır ve bu metodun 3 parametresi bulunur:
SetInterval(fonksiyon,birim,lang);
Parametrelerden bahsi geçen fonksiyon daha önce öğrendiğimiz Javascript fonksiyonudur ve her birim zamanda çalıştırılmasını istediğimiz kodları buraya yazarız.Birim ise int tipinde milisaniye cinsindeki bir sayıdır ve
1 saniye=1000 milisaniye
formülünü kullanarak Javascript kodlarının hangi süre bazında tekrar çalıştırılmasını istediğimizi belirtiriz.Lang parametresi ise çok ilginç olacak ki neredeyse hiç kullanılmadığı gibi bu parametreyi yazmak zorunda da değiliz.W3 School'a göre bu parametrede JScript,VBScript ve yine Javascript kodları yazılmaktadır.
Şimdi örnek bir uygulama yapalım ve 1'den sonsuza kadar olan sayıları her 1 saniyede artırarak sayfamıza yazdıralım.Bunun için önce Dreamweaver uygulamamızı açıyor ve boş bir HTML belgesi oluşturuyoruz:
Ardından Head tagı içerisinde script tagı açarak bir Javascript fonksiyonu yazıyoruz:
Bu fonksiyonumuz içerisinde öncelikle başlangıç değeri olan sayıyı tanımladıktan sonra Javascript setInterval()
metodu ile her saniyede sayıyı 1 artırıp ekrana yazdırıyoruz:
HTML sayfamızı çalıştırıp butona tıklıyoruz:
Gördüğünüz gibi her saniye sayımız 1 artıyor ve web sayfamıza yazdırılıyor.
Bu gördüğümüz aslında yanlış bir uygulama! Yanlış diyorum çünkü birçok web yazılımcısı arkadaşım bu şekilde kullanarak
sayacı kontrolü altında tutamıyor çünkü sayaç bir değişkene atanmış değil.Evet, yanlış duymadınız tıpkı string bir
ifadenin "var" değişkenine atanması gibi Javascript setInterval() metodu bir değişkene atanabiliyor ve daha sonra
tekrar kullanılabiliyor.
Az önce yapmış olduğumuz sayacımızı değişkene atıyoruz:
Şimdi ise sayacımızın çalışma anında (runtime) çalıştırdığı fonksiyonun içerisine bir if koşulu yazıyoruz ve diyoruz ki;
Sayı 20 olduğunda sayacı durdur!
Bir Javascipt sayacını çalışma anında durdurabilmek için sayaç içerisindeki fonksiyona clearInterval(); metodunu yazarız ve bu metoumuzun yapısı ise:
clearInterval(sayacDegiskeni);
şeklinde olup parametre olarak sayacı atadığımız değişkenin adını vermemiz yeterlidir.Eğer setInterval() metodu ile yazılmış olan sayacı değişkene atamadan çalıştırsaydık doğal olarak olarak clearInterval() metodunu kullanamayacak ve sayaç sonsuza kadar ya da tarayıcı kapatılana kadar (sekme de olabilir) çalışacaktı.
Sayacımızı "sayac" değişkenine atadığımıza göre şimdi fonksiyonun içerisinde clearInterval() metodumuzu yazabiliriz:
Böylece sayaç her saniye içeriğindeki fonksiyonu çalıştırdığında if koşulunu da kontrol edecek ve sayı 20 olduğunda clearInterval() metodu ile kendi kendini durduracaktır.
Çalışan bir sayacı durdurmanın bir başka yolu ise sayaç değişkenini daha genel (global) değişken olarak kullanmak ve bir başka fonksiyon ile durdurabilmektir,ancak bu işlevi sağlıklı bir şekilde kullanabilmek için biraz JQuery'ye ihtiyacımız olacağı için bu konunun devamını ilerleyen JQuery makalelerimde anlatacağım.
Sayaç uygulaması ile ilgili olarak son söyleyeceğim söz ise; bir web sayfasında çok fazla (3-5 değil) Javascript interval kullanımı web tarayıcısının daha fazla işlemci ve bellek kullanımına neden oluyor ve kullanıcının internet keyfini kaçırabilir o yüzden daha optimize bir algoritma kullanmanızı öneririm.
Makalemizin sonuna geldik ve bir sonraki makalemizde görüşmek üzere hoşçakalın diyorum :)
Her yeni makalemizde Javascript ile yeni yeni konuları öğrenirken bu makalemizde Javascript Interval konusunu öğreneceğiz.
Interval sözcüğünü Türkçe'ye çevirirsek (süre aralığı) gibi bir anlama denk gelmektedir ancak biz buna Javascript sayaç desek daha yerinde olur sanırım :)
Javascript interval konusunun amacı; anlık zaman dilimi içerisinde (dakika,saniye,milisaniye) bir ya da birden çok javascript kodlarını web browser üzerinde çalıştırmayı amaçlar.Bu kodları çalıştırabilmek için SetInterval() metodu kullanılır ve bu metodun 3 parametresi bulunur:
SetInterval(fonksiyon,birim,lang);
Parametrelerden bahsi geçen fonksiyon daha önce öğrendiğimiz Javascript fonksiyonudur ve her birim zamanda çalıştırılmasını istediğimiz kodları buraya yazarız.Birim ise int tipinde milisaniye cinsindeki bir sayıdır ve
1 saniye=1000 milisaniye
formülünü kullanarak Javascript kodlarının hangi süre bazında tekrar çalıştırılmasını istediğimizi belirtiriz.Lang parametresi ise çok ilginç olacak ki neredeyse hiç kullanılmadığı gibi bu parametreyi yazmak zorunda da değiliz.W3 School'a göre bu parametrede JScript,VBScript ve yine Javascript kodları yazılmaktadır.
Şimdi örnek bir uygulama yapalım ve 1'den sonsuza kadar olan sayıları her 1 saniyede artırarak sayfamıza yazdıralım.Bunun için önce Dreamweaver uygulamamızı açıyor ve boş bir HTML belgesi oluşturuyoruz:
Ardından Head tagı içerisinde script tagı açarak bir Javascript fonksiyonu yazıyoruz:
Bu fonksiyonumuz içerisinde öncelikle başlangıç değeri olan sayıyı tanımladıktan sonra Javascript setInterval()
metodu ile her saniyede sayıyı 1 artırıp ekrana yazdırıyoruz:
HTML sayfamızı çalıştırıp butona tıklıyoruz:
Gördüğünüz gibi her saniye sayımız 1 artıyor ve web sayfamıza yazdırılıyor.
Bu gördüğümüz aslında yanlış bir uygulama! Yanlış diyorum çünkü birçok web yazılımcısı arkadaşım bu şekilde kullanarak
sayacı kontrolü altında tutamıyor çünkü sayaç bir değişkene atanmış değil.Evet, yanlış duymadınız tıpkı string bir
ifadenin "var" değişkenine atanması gibi Javascript setInterval() metodu bir değişkene atanabiliyor ve daha sonra
tekrar kullanılabiliyor.
Az önce yapmış olduğumuz sayacımızı değişkene atıyoruz:
Şimdi ise sayacımızın çalışma anında (runtime) çalıştırdığı fonksiyonun içerisine bir if koşulu yazıyoruz ve diyoruz ki;
Sayı 20 olduğunda sayacı durdur!
Bir Javascipt sayacını çalışma anında durdurabilmek için sayaç içerisindeki fonksiyona clearInterval(); metodunu yazarız ve bu metoumuzun yapısı ise:
clearInterval(sayacDegiskeni);
şeklinde olup parametre olarak sayacı atadığımız değişkenin adını vermemiz yeterlidir.Eğer setInterval() metodu ile yazılmış olan sayacı değişkene atamadan çalıştırsaydık doğal olarak olarak clearInterval() metodunu kullanamayacak ve sayaç sonsuza kadar ya da tarayıcı kapatılana kadar (sekme de olabilir) çalışacaktı.
Sayacımızı "sayac" değişkenine atadığımıza göre şimdi fonksiyonun içerisinde clearInterval() metodumuzu yazabiliriz:
Böylece sayaç her saniye içeriğindeki fonksiyonu çalıştırdığında if koşulunu da kontrol edecek ve sayı 20 olduğunda clearInterval() metodu ile kendi kendini durduracaktır.
Çalışan bir sayacı durdurmanın bir başka yolu ise sayaç değişkenini daha genel (global) değişken olarak kullanmak ve bir başka fonksiyon ile durdurabilmektir,ancak bu işlevi sağlıklı bir şekilde kullanabilmek için biraz JQuery'ye ihtiyacımız olacağı için bu konunun devamını ilerleyen JQuery makalelerimde anlatacağım.
Sayaç uygulaması ile ilgili olarak son söyleyeceğim söz ise; bir web sayfasında çok fazla (3-5 değil) Javascript interval kullanımı web tarayıcısının daha fazla işlemci ve bellek kullanımına neden oluyor ve kullanıcının internet keyfini kaçırabilir o yüzden daha optimize bir algoritma kullanmanızı öneririm.
Makalemizin sonuna geldik ve bir sonraki makalemizde görüşmek üzere hoşçakalın diyorum :)