JavaScript İle Hesap Makinesi Yapımı

PcPassW0lf

Katılımcı Üye
2 Haz 2022
405
180
BozKurt
Merhaba Arkadaşlar Ben PcPassW0lf Bugün Sizlere JavaScript İle Hesap Makinesi Yapımını Göstereceğim Hazırsanız Başlayalım.

Biz kolay bir yöntem olan JavaScript
eval fonksiyonunu kullanacağız.

Hesap makinesi yapımı için öncelikle görsel bir ara yüz yapılması iyi olacaktır.

Yapacağımız hesap makinesi, basit işlemler için kullanılabilecek, dört işlem yapan bir hesap makinesi olacağından fazla bir buton ihtiyacımız olmayacak ayrıca yazılan rakamların ve sonucun görüneceği ekran görevi gören bir veri giriş alanı olacak.


<div id="hesapMakinesi">
<div id="ekran">
<input type="text" id="sonuc">
</div>
<div id="sayilar">
<button>7</button>
<button>8</button>
<button>9</button>
<button>+</button>
<button>4</button>
<button>5</button>
<button>6</button>
<button>-</button>
<button>1</button>
<button>2</button>
<button>3</button>
<button>/</button>
<button>0</button>
<button>.</button>
<button>=</button>
<button>*</button>
</div>
</div>

Yapacağımız hesap makinesinin daha iyi görünmesi için çeşitli stil tanımlamaları yapalım.

<style>
#hesapMakinesi {
margin: 0 auto;
width: 350px;
height: auto;
background-color: slategray;
border-radius: 5px;
padding: 10px;
}

#ekran {
padding: 10px 0px 10px 0px;
text-align: center;
}

#sonuc {
padding: 10px;
width: 90%;
border: none;
border-radius: 5px;
text-align: right;
font-size: 50px;
word-wrap: break-word;
}

#sayilar {
text-align: center;
}

button {
width: 70px;
height: 50px;
margin: 4px;
border-radius: 5px;
background-color: whitesmoke;
border: none;
outline: none;
}
</style>

Hesap makinesi için görsel ara yüz oluşturduktan sonra JavaScript kodlarını yazabiliriz.

Tüm butonların tıklama (onclick) olayını bir fonksiyona bağlamamız, tüm işlemleri bir fonksiyon üzerinden yapmak iyi olacaktır.

Seçim işlemini document nesnesine ait getElementsByTagName metodu ile yapabiliriz.

Seçim işleminden sonra bir döngü ile tüm butonların tıklama olayına yazacağımız fonksiyonun adını yazıyoruz.

<script>
"use strict";
var _sayilar = document.getElementsByTagName("button"),
_sayiUzunluk = _sayilar.length,
i = 0;

for (i = 0; i < _sayiUzunluk; i++) {
_sayilar.onclick = hesapla;
}
</script>



Tüm butonları yazacağımız hesapla isimli fonksiyona bağladık.

Şimdi hesaplama işleminin yapılacağı hesapla isimli fonksiyonu yazabiliriz.


<script>
"use strict";
var _sonuc = document.getElementById("sonuc");

function hesapla() {
var _deger = this.innerHTML;

if (_deger == "=") {
try {
_sonuc.value = eval(_sonuc.value);
} catch (e) {
_sonuc.value = "0";
}
return;
}

_sonuc.value += _deger;
}
</script>

Fonksiyon gördüğünüz gibi son derece basit bir şekilde gelen tıklanan butonun değerini alıyor.

Tıklanan buton değeri, hesaplama işlemi (=) ise eval fonksiyonu ile işlemi yaparak sonucu ekran görevi gören veri giriş alanına yazıyor.

Değer hesaplama işlemi (=) değilse buton değerini veri giriş alanına ekliyor.


<script>
"use strict";
var _sayilar = document.getElementsByTagName("button"),
_sayiUzunluk = _sayilar.length,
i = 0,
_sonuc = document.getElementById("sonuc");

for (i = 0; i < _sayiUzunluk; i++) {
_sayilar.onclick = hesapla;
}

function hesapla() {
var _deger = this.innerHTML;

if (_deger == "=") {
try {
_sonuc.value = eval(_sonuc.value);
} catch (e) {
_sonuc.value = "0";
}
return;
}

_sonuc.value += _deger;
}
</script>



Hesap makinesine daha fazla işlem eklemek istersek bir buton ve hesapla isimli fonksiyon içerisinde eklenen işleme özel hesaplamalar yaptırabilirsiniz.

Hayırlı günler dilerim.
 

MuhammedTr768

Kıdemli Üye
7 Kas 2021
2,088
1,118
30
MyKrallife :)
Merhaba Arkadaşlar Ben PcPassW0lf Bugün Sizlere JavaScript İle Hesap Makinesi Yapımını Göstereceğim Hazırsanız Başlayalım.

Biz kolay bir yöntem olan JavaScript
eval fonksiyonunu kullanacağız.

Hesap makinesi yapımı için öncelikle görsel bir ara yüz yapılması iyi olacaktır.

Yapacağımız hesap makinesi, basit işlemler için kullanılabilecek, dört işlem yapan bir hesap makinesi olacağından fazla bir buton ihtiyacımız olmayacak ayrıca yazılan rakamların ve sonucun görüneceği ekran görevi gören bir veri giriş alanı olacak.




Yapacağımız hesap makinesinin daha iyi görünmesi için çeşitli stil tanımlamaları yapalım.



Hesap makinesi için görsel ara yüz oluşturduktan sonra JavaScript kodlarını yazabiliriz.

Tüm butonların tıklama (onclick) olayını bir fonksiyona bağlamamız, tüm işlemleri bir fonksiyon üzerinden yapmak iyi olacaktır.


Seçim işlemini document nesnesine ait getElementsByTagName metodu ile yapabiliriz.

Seçim işleminden sonra bir döngü ile tüm butonların tıklama olayına yazacağımız fonksiyonun adını yazıyoruz.




Tüm butonları yazacağımız hesapla isimli fonksiyona bağladık.

Şimdi hesaplama işleminin yapılacağı hesapla isimli fonksiyonu yazabiliriz.



Fonksiyon gördüğünüz gibi son derece basit bir şekilde gelen tıklanan butonun değerini alıyor.

Tıklanan buton değeri, hesaplama işlemi (=) ise eval fonksiyonu ile işlemi yaparak sonucu ekran görevi gören veri giriş alanına yazıyor.

Değer hesaplama işlemi (=) değilse buton değerini veri giriş alanına ekliyor.




Hesap makinesine daha fazla işlem eklemek istersek bir buton ve hesapla isimli fonksiyon içerisinde eklenen işleme özel hesaplamalar yaptırabilirsiniz.

Hayırlı günler dilerim.
Alıntı konu
 
Üst

Turkhackteam.org internet sitesi 5651 sayılı kanun’un 2. maddesinin 1. fıkrasının m) bendi ile aynı kanunun 5. maddesi kapsamında "Yer Sağlayıcı" konumundadır. İçerikler ön onay olmaksızın tamamen kullanıcılar tarafından oluşturulmaktadır. Turkhackteam.org; Yer sağlayıcı olarak, kullanıcılar tarafından oluşturulan içeriği ya da hukuka aykırı paylaşımı kontrol etmekle ya da araştırmakla yükümlü değildir. Türkhackteam saldırı timleri Türk sitelerine hiçbir zararlı faaliyette bulunmaz. Türkhackteam üyelerinin yaptığı bireysel hack faaliyetlerinden Türkhackteam sorumlu değildir. Sitelerinize Türkhackteam ismi kullanılarak hack faaliyetinde bulunulursa, site-sunucu erişim loglarından bu faaliyeti gerçekleştiren ip adresini tespit edip diğer kanıtlarla birlikte savcılığa suç duyurusunda bulununuz.