Hesap Makinesi Javascript ile Nasıl Oluşturulur?

Javascript, web geliştirme dünyasının vazgeçilmez dillerinden biridir. Bu nedenle, hesap makinesi gibi temel bir aracı Javascript kullanarak nasıl oluşturabileceğini öğrenmek, bu dilin temellerini anlamak için harika bir yoldur. Hesap makinesi, kullanıcıların basit matematiksel işlemleri gerçekleştirmesine olanak tanımak amacıyla tasarlanmış özel bir uygulamadır.

Bu makalede, Javascript kullanarak nasıl bir hesap makinesi oluşturabileceğimizi adım adım göstereceğim. Hesap makinesi üzerinde temel işlemler yapabilmek için kullanıcıdan giriş alacak ve ardından sonucu gösterecek bir arayüz tasarlayacağız. Hazırsanız, şimdi nasıl başlayacağımıza bir bakalım.

İlk olarak, HTML sayfamızı oluşturmalıyız. Bunun için bir form ve bu form içinde giriş alanları ve düğmeler kullanacağız. HTML ilgili kod bloğu aşağıdaki gibidir:

“`

“`

Bu kod bloğunda, iki adet metin girişi ve dört farklı işlem düğmesi yer almaktadır. Ayrıca sonucu gösterecek bir paragraf da bulunmaktadır.

Şimdi Javascript kodumuzu ekleyerek arayüzü dinamik hale getirme zamanı geldi. İlgili kod bloğu aşağıdaki gibidir:

“`javascript
document.getElementById(‘calculator-form’).addEventListener(‘submit’, function(e) {
e.preventDefault();

var num1 = parseFloat(document.getElementById(‘num1’).value);
var num2 = parseFloat(document.getElementById(‘num2’).value);
var result = document.getElementById(‘result’);

var add = document.getElementById(‘add’);
var subtract = document.getElementById(‘subtract’);
var multiply = document.getElementById(‘multiply’);
var divide = document.getElementById(‘divide’);
var clear = document.getElementById(‘clear’);

add.addEventListener(‘click’, function() {
result.innerHTML = “” + (num1 + num2) + ““;
});

subtract.addEventListener(‘click’, function() {
result.innerHTML = “” + (num1 – num2) + ““;
});

multiply.addEventListener(‘click’, function() {
result.innerHTML = “” + (num1 * num2) + ““;
});

divide.addEventListener(‘click’, function() {
result.innerHTML = “” + (num1 / num2) + ““;
});

clear.addEventListener(‘click’, function() {
num1 = 0;
num2 = 0;
result.innerHTML = “”;
});
});
“`

Bu kod bloğunda, hesaplamaları yaparken kullanılacak düğmelerin tıklama olaylarına event listener eklenir. Giriş alanlarından sayıları alır ve sonuç paragrafını günceller.

Son olarak, Javascript kodumuzu HTML sayfamıza bağlamamız gerekmektedir. Bunun için aşağıdaki JavaScript kodunu <script> etiketleri arasına eklememiz yeterlidir:

“`html

“`

Artık hesap makinesini kullanabilirsiniz. İki sayıyı girip istediğiniz işlem düğmesine tıkladığınızda sonucu göreceksiniz. Sonucun koyu renkte gösterilmesi, bu makalenin üzerinde durduğumuz anahtar kelimenin önemini vurguluyor.

Javascript kullanarak bir hesap makinesi oluşturmak, bu dilin temelini anlamak ve pratik yapmak için mükemmel bir yoldur. Bu makalede adım adım nasıl yapılacağını açıkladık. Şimdi, bu örneği geliştirerek daha karmaşık hesaplamalar yapabilir veya başka özellikler ekleyebilirsiniz. İyi çalışmalar!