Hiç kendi dijital araçlarınızı yaratma gücünü hayal ettiniz mi? Günlük hayatımızın ayrılmaz bir parçası olan hesap makineleri, bu gücün en basit ama en etkili örneklerinden biridir. Akıllı telefonlarımızda, bilgisayarlarımızda veya çevrimiçi platformlarda her an elimizin altında bulunan bu küçük mucizeler, aslında birkaç satır kodun ve doğru mantığın ürünüdür. Peki ya bu sihirli aracı kendi ellerinizle, sadece birkaç satır JavaScript koduyla inşa edebileceğinizi söylesek? İşte web geliştirmenin temel taşlarından biri olan interaktif uygulamalar yaratma becerisi, JavaScript ile hesap makinesi yapımı projesinde tüm detaylarıyla karşımızda duruyor. Bu rehber, sadece bir hesap makinesi yapımını anlatmakla kalmayacak, aynı zamanda DOM manipülasyonu, olay dinleyicileri ve temel algoritma mantığı gibi kritik JavaScript kavramlarını da derinlemesine işlemenizi sağlayacak.
JavaScript İle Hesap Makinesi Yapımının Temelleri: Mimariyi Anlamak
Bir hesap makinesi inşa etmek, sadece matematiksel işlemler yapmakla ilgili değildir; aynı zamanda kullanıcı arayüzü (UI) tasarımı, kullanıcı deneyimi (UX) ve sağlam bir JavaScript mantığı gerektirir. Bu projeyi üç ana katmana ayırarak ele alabiliriz:
- HTML (Yapı): Hesap makinesinin iskeletini, yani ekranını ve tüm tuşlarını oluşturur.
- CSS (Stil): Hesap makinesine görsel bir kimlik kazandırır, tuşların ve ekranın nasıl görüneceğini belirler. (Bu makalede CSS’e çok derinlemesine girmeyeceğiz, ancak önemini vurgulayacağız.)
- JavaScript (Mantık): Hesap makinesinin beyni, tuşlara basıldığında ne olacağını, sayıları nasıl işleyeceğini, işlemleri nasıl yapacağını ve sonuçları nasıl göstereceğini yönetir.
1. HTML İskeletini Oluşturma: Hesap Makinesi Paneli
Hesap makinemiz için temel HTML yapısı, bir ana kapsayıcı (div), bir ekran ve tüm sayısal ve operasyonel tuşları içerecek bir tuş takımı bölümünden oluşur. İşte basit bir örnek:
<div class="calculator"
> <input type="text" class="calculator-screen" value="0" disabled />
<div class="calculator-keys"
> <button type="button" class="operator" value="+">+</button>
<button type="button" class="operator" value="-">-</button>
<button type="button" class="operator" value="*">×</button>
<button type="button" class="operator" value="/">÷</button>
<button type="button" value="7">7</button>
<button type="button" value="8">8</button>
<button type="button" value="9">9</button>
<button type="button" value="4">4</button>
<button type="button" value="5">5</button>
<button type="button" value="6">6</button>
<button type="button" value="1">1</button>
<button type="button" value="2">2</button>
<button type="button" value="3"<3</button>
<button type="button" value="0">0</button>
<button type="button" class="decimal" value=".">.</button>
<button type="button" class="all-clear" value="all-clear">AC</button>
<button type="button" class="equal-sign operator" value="=">=</button>
</div>
</div>.calculator-screen: Kullanıcının girdiği sayıları ve sonuçları gösteren ekranımız.disabledözelliği sayesinde kullanıcı doğrudan ekrana yazı yazamayacak..calculator-keys: Tüm sayısal ve operasyonel tuşlarımızı barındıran kapsayıcı..operator: Toplama, çıkarma, çarpma, bölme ve eşittir tuşları için kullandığımız sınıf..decimal: Ondalık nokta tuşu..all-clear: Ekranı temizleme (AC) tuşu.
2. JavaScript Mantığı: Hesap Makinesine Beyin Katmak
Şimdi en heyecan verici kısma geldik: JavaScript ile hesap makinemizin nasıl çalışacağını kodlamak. Bunun için birkaç anahtar değişkene ve fonksiyona ihtiyacımız olacak.
2.1. Hesap Makinesinin Durumunu Yönetmek
Hesap makinesinin mevcut durumunu (ekranda ne gösterildiği, ilk girilen sayı, bekleyen işlem vb.) tutan bir JavaScript objesi tanımlamak, kodu daha düzenli hale getirecektir.
const calculator = {
displayValue: '0', // Ekranda görünen değer
firstOperand: null, // İlk girilen sayı
waitingForSecondOperand: false, // İkinci sayının girilmesini bekliyor muyuz?
operator: null, // Hangi işlemin seçildiği (+, -, *, /)
};
2.2. Ekranı Güncelleme
Kullanıcı bir tuşa bastığında ekranın güncellenmesi gerekir. Bu basit bir DOM manipülasyonu işlemidir.
function updateDisplay() {
const display = document.querySelector('.calculator-screen');
display.value = calculator.displayValue;
}
updateDisplay(); // Sayfa yüklendiğinde ekranı başlangıç değeriyle günceller
2.3. Sayı Tuşlarına Basma İşlemi
Kullanıcı bir sayıya veya ondalık noktaya bastığında, displayValue güncellenmelidir. Ancak burada dikkat etmemiz gereken bazı durumlar var:
- Eğer
displayValue‘0’ ise veya ikinci sayı bekleniyorsa, yeni sayıyı doğrudan atamalıyız. - Aksi takdirde, yeni sayıyı mevcut
displayValue‘un sonuna eklemeliyiz. - Ondalık nokta (
.) sadece bir kez eklenebilir.
function inputDigit(digit) {
const { displayValue, waitingForSecondOperand } = calculator;
if (waitingForSecondOperand === true) {
calculator.displayValue = digit;
calculator.waitingForSecondOperand = false;
} else {
calculator.displayValue = displayValue === '0' ? digit : displayValue + digit;
}
}
function inputDecimal(dot) {
// Eğer ikinci sayı bekleniyorsa, noktayı eklemeden önce '0.' olarak başlat
if (calculator.waitingForSecondOperand === true) {
calculator.displayValue = '0.';
calculator.waitingForSecondOperand = false;
return;
}
// Ekranda zaten bir nokta yoksa ekle
if (!calculator.displayValue.includes(dot)) {
calculator.displayValue += dot;
}
}
2.4. Operatör Tuşlarına Basma İşlemi
Bir operatör (+, -, *, /) tuşuna basıldığında, mevcut sayıyı firstOperand olarak kaydetmeli ve hangi operatörün seçildiğini işaretlemeliyiz. Eğer zaten bir işlem bekliyorsak ve yeni bir operatör seçildiyse, önceki işlemi tamamlamalıyız.
function handleOperator(nextOperator) {
const { displayValue, firstOperand, operator, waitingForSecondOperand } = calculator;
const inputValue = parseFloat(displayValue);
if (operator && waitingForSecondOperand) {
calculator.operator = nextOperator;
return;
}
if (firstOperand === null && !isNaN(inputValue)) {
calculator.firstOperand = inputValue;
} else if (operator) {
const result = performCalculation[operator](firstOperand, inputValue);
calculator.displayValue = `${parseFloat(result.toFixed(7))}`;
calculator.firstOperand = result;
}
calculator.waitingForSecondOperand = true;
calculator.operator = nextOperator;
}
2.5. Hesaplama Fonksiyonu
Asıl matematiksel işlemleri yapacak olan fonksiyonlarımızı tanımlayalım. Burada her operatör için ayrı bir fonksiyon tanımlamak veya bir obje içinde saklamak mantıklıdır.
const performCalculation = {
'/': (firstOperand, secondOperand) => firstOperand / secondOperand,
'*': (firstOperand, secondOperand) => firstOperand * secondOperand,
'+': (firstOperand, secondOperand) => firstOperand + secondOperand,
'-': (firstOperand, secondOperand) => firstOperand - secondOperand,
'=': (firstOperand, secondOperand) => secondOperand // Eşittir için sadece ikinci operandı döndürürüz, çünkü işlem zaten yapılmıştır
};
2.6. Temizleme Fonksiyonu (AC)
AC tuşuna basıldığında hesap makinesinin tüm durumunu başlangıç değerlerine sıfırlamalıyız.
function resetCalculator() {
calculator.displayValue = '0';
calculator.firstOperand = null;
calculator.waitingForSecondOperand = false;
calculator.operator = null;
}
2.7. Olay Dinleyicileri (Event Listeners)
Son olarak, HTML tuşlarımıza tıklama olaylarını dinleyecek ve uygun JavaScript fonksiyonlarını tetikleyecek kodumuzu yazalım.
const keys = document.querySelector('.calculator-keys');
keys.addEventListener('click', (event) => {
const { target } = event; // Tıklanan HTML elementini alır
// Eğer tıklanan element bir buton değilse, bir şey yapma
if (!target.matches('button')) {
return;
}
if (target.classList.contains('operator')) {
handleOperator(target.value);
updateDisplay();
return;
}
if (target.classList.contains('decimal')) {
inputDecimal(target.value);
updateDisplay();
return;
}
if (target.classList.contains('all-clear')) {
resetCalculator();
updateDisplay();
return;
}
inputDigit(target.value);
updateDisplay();
});
Gelişmiş Konular ve En İyi Uygulamalar
eval() Kullanımından Kaçınmak
Bazı basit hesap makinesi örneklerinde, JavaScript’in eval() fonksiyonunun kullanıldığını görebilirsiniz. Örneğin: eval('1 + 2 * 3'). Bu fonksiyon, bir stringi JavaScript kodu olarak çalıştırır. Ancak güvenlik açıkları ve performans sorunları nedeniyle eval() kullanmaktan kaçınılmalıdır. Kullanıcıdan gelen herhangi bir girdi, kötü niyetli kod çalıştırma potansiyeli taşır. Yukarıdaki örnekte olduğu gibi, kendi ayrıştırma ve hesaplama mantığınızı oluşturmak çok daha güvenli ve kontrol edilebilir bir yaklaşımdır.
Kullanıcı Deneyimi (UX) İyileştirmeleri
- Klavye Desteği: Kullanıcıların klavye tuşlarıyla da işlem yapmasını sağlamak, hesap makinesinin kullanılabilirliğini artırır.
keydownolay dinleyicisi ile bu özelliği ekleyebilirsiniz. - Görsel Geri Bildirim: Tuşlara basıldığında hafif bir animasyon veya renk değişimi, kullanıcının etkileşimini daha keyifli hale getirir.
- Hata Yönetimi: Sıfıra bölme gibi durumları ele almak (‘Error’ mesajı göstermek gibi) önemlidir.
Kod Organizasyonu ve Modülerlik
Daha karmaşık hesap makineleri (bilimsel, finansal vb.) için kodunuzu fonksiyonlara ve modüllere ayırmak, bakımı ve genişletmeyi kolaylaştıracaktır. Örneğin, tüm matematiksel işlemleri ayrı bir modülde tutabilirsiniz.
Sonuç: Dijital Yaratıcılığınızın Sınırlarını Zorlayın
JavaScript ile sıfırdan bir hesap makinesi inşa etmek, sadece temel aritmetik işlemler yapabilen bir araç yaratmaktan çok daha fazlasıdır. Bu süreç, web geliştirmenin kalbinde yatan DOM manipülasyonu, olay yönetimi ve durum yönetimi gibi temel kavramları derinlemesine anlamanızı sağlar. Her bir satır kod, bir tuşa basıldığında ekranın nasıl tepki vereceğini, sayıların nasıl saklanacağını ve karmaşık matematiksel problemlerin nasıl çözüleceğini belirleyen birer talimat zinciridir. Bu proje, problem çözme yeteneğinizi geliştirirken, aynı zamanda kullanıcı dostu ve etkileşimli uygulamalar yaratma becerinizi de pekiştirir. Şimdi bu temel bilgiyi edindiğinize göre, bilimsel bir hesap makinesi eklemek, geçmiş işlemleri kaydetmek veya hatta bir birim dönüştürücü entegre etmek gibi yeni ufuklara yelken açarak dijital yaratıcılığınızın sınırlarını zorlamaya hazırsınız. Unutmayın, her büyük web uygulaması, bu tür küçük, iyi düşünülmüş projelerden filizlenir ve potansiyeliniz sınırsızdır.
