Javascript'te Anlık Toplama İşlemi Yapma

Anlık işlem yapmadaki kastım aslında setInterval(); ile belirlenen fonksiyonu ya da ifadeyi belirli aralıklar ile çalıştırılmasını kastediyorum. Belirlenen aralıklar ile çalıştırılan fonksiyonlar, o fonksiyonunu özelliğine göre işlemlerin tekrarlanmasını sağlayacaktır. Böylelikle anlık bir işlem söz konusu olacaktır.

Bu anlık işlem döngüsünü basit bir yoldan anlatabilmek amacı ile bir matematiksel işlem yaparak sonucun nasıl döndüğünü göreceğiz. Bunun için öncelikle 2 adet verinin geldiği input alanı oluşturuyoruz. Bu inputlardan alınan değeri ise; 3. Bir input oluşturarak onun value değerine işliyoruz.

Sayı 1 : <input type="text" name="sayi1" id="sayi1"/> <br/>
Sayı 2 : <input type="text" name="sayi2" id="sayi2"/> <br/>
Sonuç : <input type="text" name="sonuc" id="sonuc"/>

Burada dikkat edilmesi gerekilen nokta ise inputlarda yer alan id etiketidir. Bu etiketi kullanarak input içinde yer alan değeri javascript ile almamızı sağlayacaktır. Böylelikle işlemlerimizi gerçekleştirmiş olacağız.

Şimdi gel gelelim javascript kodlarının nasıl olacağına. İlk önce sayı1 ve sayı2 idlerinde yer alan değerleri alalım.

var sayi1	= document.getElementById("sayi1").value; // 1. Sayıyı Aldım
var sayi2 = document.getElementById("sayi2").value; // 2. Sayıyı Aldım

Burada yer alan getElementById ifadesi içerisinde yer alan id değeriyle bir işlem yapılmasını sağlamaktadır. Burada oluşturduğumuz inputların id değerlerini yazıyoruz. Sonrasında yer alan value ile inputların içerisinde yer alan değerleri alıyoruz.

İnputlardan gelen değerleri aldıktan sonra önceden küçük bir if else yapısı ile boş veri ve dolu veri algılamasını yaparak duruma göre işlem yapmayı sağlıyoruz. Koşuldan gelen durumda eğer input değerleri boş ise şu işlemi yap dedik;

document.getElementById("sonuc").value="Boş Alan Bırakmayınız";

Burada gene getElementById ifadesini kullanıyoruz. Fakat value ifadesini kullandığımızda içindeki değeri almak değil de, içine bir veri aktaracağız diyerek yazılacak olan değeri yazıyoruz. Böylelikle veri boş olduğunda input değerine Boş Alan Bırakmayınız yazdırmış oluyoruz.

Koşuldan gelen değer eğer boş değil ise o zaman sayı1 ve sayı2 değerlerini topla ve sonuc id'sine yaz diyeceğiz.

document.getElementById("sonuc").value= parseInt(sayi1) + parseInt(sayi2);

Bu kodda ise dikkat edilmesi gerekilen nokta parseInt(); tir. Buradaki belirtme gelen verilerin integer(tam sayı) olduğunu belirtiyoruz. Böylelikle toplama işleminin yapılmasını sağlıyoruz.

Yukarıdaki işlemleri yaptıktan sonra fonksiyonumuz hazır bir hal alacaktır. Burada oluşturulan fonksiyonun çalışması ve anlık olarak işlem yapılmasını sağlamak için makalenin başında da belirttiğim gibi setInterval(); ifadesini kullanacağız.

setInterval("toplam()", 100);

setInterval(); içerisine 2 adet argüman almaktadır. İlki çalıştırılacak/işlem görecek olan fonksiyonun belirlendiği alandır. İkincisi ise hangi aralıklar ile çalıştırılacağının tanımlandığı alandır. Burada yer alan aralık tanımlaması 1 saniye = 1000 değeri üzerinden bir işlem görmektedir. Örnekte 100 değeri kullanılmaktadır. Buda saniyenin 10 katı kadar hızlı çalıştığını anlatmaktadır. Yani 1 saniyede toplam(); fonksiyonu 10 kez çalışmaktadır.

Sonuç Olarak

Bu ders aslında temel olarak setInterval(); üzerine kuruludur. setInterval(); Kullanarak fonksiyonların nasıl yönetildiğini anlatmaya çalıştım. Bunu anlatırken de getElementById ve value 'nin nasıl kullanıldığını da görmüş oluyoruz.
- 25.03.2014 / 20:50:45 4

Sosyal Medya Paylaşım Alanı

Bunlarda İlginizi Çekebilir

12:09 Php Dersleri

Php ile Sayıları Yazıya Çevirme | Basit Mantık

Kategori: Php Dersleri | 13.02.2015
Genel Makaleler

Webmasterlıktan Sonraki İşim | Özel Güvenlik Görevlisi

Kategori: Genel Makaleler | 23.07.2013
jQuery Dersleri

jQuery ile Yanıp Sönen Link Yapma

Kategori: jQuery Dersleri | 06.10.2013
26:56 Php Dersleri

Php ile Gelişmiş Sayfalama Yapımı

Kategori: Php Dersleri | 03.05.2013
13:57 Css Dersleri

Css ile Kenarlık Vermek | Border Kullanımı

Kategori: Css Dersleri | 03.05.2013

Hadi Sende Yorum Yap!

Yorum Gönderilmiştir. Onaylandıktan Sonra Mesajınız Yayınlanacaktır.