Javascript ile sınırsız sayı için ortalama hesaplayıcının kodları aşağıdaki gibidir. Bu kodları anlamak ve değiştirebilmek için yazının devamını okuyabilirsiniz. Bu hesaplayıcının kodlarının karmaşık olmaması için bazı sorunları göz ardı ettim. Örneğin sayı dizisi yazılırken araya fazladan bir boşluk koyulursa hesaplamada sorun çıkabilir. Bu hesaplayıcının diğerlerinden farkı istediğiniz kadar büyük ve istediğiniz kadar çok değer girebilmeniz. Dolayısı ile bu hesaplayıcı daha çok istatistiksel hesaplamalar için kullanılabilir.
Uygulama bittiğinde aşağıdaki gibi bir görüntüye sahip olması gerekiyor.
JAVASCRİPT İLE SINIRSIZ SAYI İÇİN ORTALAMA HESAPLAYICI KODLARI
İndex
<h2>Ortalaması hesaplanacak sayılar</h2> <br>
<input type="text" class="sayilar" placeholder="Lütfen sayıları giriniz.">
<br> <br>
<button class="hesapla">Hesapla</button>
<br> <br>
<span class="sonuc"></span>
Css
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-size: 21px;
}
input{
outline: none;
padding: 10px;
}
h2{
font-size: 25px;
}
body{
width: 70%;
margin-left: 15%;
}
button{
outline: none;
border:1px solid gray;
}
button:hover{
cursor: pointer;
}
.calculator{
width: 100%;
margin-top: 20px;
}
.calculator button{
width: 30%;
min-height: 70px;
background-color: transparent;
color: #000;
transition: .4s;
}
.calculator button:hover{
background-color: #000;
color: #fff;
}
.hesapla{
padding: 15px;
background-color: #fff;
color: #000;
transition: .4s;
}
.hesapla:hover{
background-color: #000;
color:#fff
}
.sonuc{
display: none;
}
Javascript
var hesapla= document.querySelector('.hesapla');
var dizi= document.querySelector('.sayilar');
var sonuc= document.querySelector('.sonuc');
hesapla.addEventListener('click',function(){
function ortalama(item) {
var ayrac= item.split(" ")
var total=0;
ayrac.forEach(item => {
cevir = Number(item)
total+=cevir;
});
return total/ayrac.length;
}
sonuc.style.display="block";
sonuc.innerHTML=`
Verilen dizinin ortalaması: ${ortalama(dizi.value)}`
})
JAVASCRİPT İLE SINIRSIZ SAYI İÇİN ORTALAMA HESAPLAYICI AŞAMALARI
Hesaplayıcının görüntüsünü oluşturduktan sonra geriye basit bir javascript kodu yazmak kalıyor. Kullanacağımız elemanları tanımladıktan sonra hesaplamak için basılması gereken butona bir event ekliyoruz. Butona tıkladıktan sonra sonucun görüntülenmesi için koyduğumuz span etiketi görünür oluyor.
Ortalama fonksiyonuna sayıların girildiği inputun value değerini gönderiyor.
Daha sonra fonksiyonun içindeki ayraç değişkeni split(“ ”) yardımı ile girilen değerleri boşluğa göre ayırıyor. Bu kısımda boşluk yerine herhangi bir şey koyulabilir. Eğer kullanıcı yanlışlıkla dizinin sonuna boşluk koyarsa sorun olabileceğinden elimize gelen dizinin içindeki elemanların null olup olmadığını kontrol edebiliriz.
Daha sonra dizinin içindeki elemanları işlemeden önce bir total değişkeni tanımlıyoruz. Bu değişken sayıları toplamamızı sağlayacaktır. Bu değişkenin döngünün dışında olması sürekli sıfırlanmaması için önemlidir. Döngüden gelen her sayıyı totalin önceki değeriyle toplayıp tekrar totale eşitliyoruz. Toplamadan önce de tipini sayıya çevirmemiz gerekiyor.
Döngü bittikten sonra da totalde topladığımız değerleri dizideki eleman sayısına bölüyoruz ve geriye gönderiyoruz.
İstenildiği kadar çok ve istenilen büyüklükte sayı gönderilebilecek çok basit bir ortalama hesaplayıcı yaptık. İlgili kod dosyalarını buraya tıklayarak indirebilirsiniz. buraya tıklayarak hesaplayıcıyı görebilirsiniz.
Yorumlarınız bizim için çok değerli. Lütfen yorum yapmayı unutmayın. Daha fazla içerik için Anasayfa’ya gidebilir yada İletişim bölümünden benim ile iletişime geçebilirsiniz.