İpucu Basit Hesap Makinesi Oluşturma - HTML ve Javascript Örneği

Prox · 16 Tem 2023

Selamlar, Bugün sizlerle HTML ve Javascript kullanarak basit bir hesap makinesi örneği paylaşmak istiyorum. Bu örnek, web geliştirmede temel düzeyde Javascript bilgisi olanlar için uygundur. İlk olarak, HTML dosyasına aşağıdaki kodu ekleyelim:

HTML:

<!DOCTYPE html>
<html>
<head>
    <title>Basit Hesap Makinesi</title>
</head>
<body>
    <input type="number" id="sayi1" placeholder="Sayı 1">
    <input type="number" id="sayi2" placeholder="Sayı 2">

    <br>

    <select id="islem">
        <option value="+">Toplama</option>
        <option value="-">Çıkarma</option>
        <option value="*">Çarpma</option>
        <option value="/">Bölme</option>
    </select>

    <br>

    <button onclick="hesapla()">Hesapla</button>

    <br>

    <div id="sonuc"></div>

    <script src="script.js"></script>
</body>
</html>

Yukarıdaki HTML kodunda, iki sayıyı girmek için iki adet input etiketi ve bir matematik işlem seçmek için bir select etiketi bulunmaktadır. Ayrıca, hesaplama sonucunu göstermek için bir div etiketi ve Hesapla butonu eklenmiştir. Şimdi, Javascript kodumuzu bir script.js dosyasında oluşturalım ve HTML dosyamıza bu dosyayı dahil edelim:

JavaScript:

function hesapla() {
    var sayi1 = parseFloat(document.getElementById("sayi1").value);
    var sayi2 = parseFloat(document.getElementById("sayi2").value);
    var islem = document.getElementById("islem").value;
 
    var sonuc;
 
    if (islem === "+") {
      sonuc = sayi1 + sayi2;
    } else if (islem === "-") {
      sonuc = sayi1 - sayi2;
    } else if (islem === "*") {
      sonuc = sayi1 * sayi2;
    } else if (islem === "/") {
      sonuc = sayi1 / sayi2;
    }
 
    document.getElementById("sonuc").innerHTML = "Sonuç: " + sonuc;
}

Yukarıdaki Javascript kodu, hesapla() adında bir fonksiyon oluşturur. Bu fonksiyon, kullanıcının girdiği sayıları ve seçilen işlemi alır ve hesaplama yapar. Sonucu da sonuc id'li div içine yazdırır. Son olarak, HTML dosyasını bir tarayıcıda açtığınızda basit bir hesap makinesi arayüzüne sahip olacaksınız. İki sayıyı girin, bir işlem seçin ve Hesapla butonuna tıklayın. Sonuç, altında görüntülenecektir. Umarım bu basit hesap makinesi örneği size Javascript ve HTML kullanarak bir uygulama geliştirmek konusunda fikir verebilir. Eğer herhangi bir sorunuz varsa, çekinmeden bana sorabilirsiniz.