Javascriptle Hesap Makinesi

Javascript'i yeni öğrenenler için örnek olabilecek bir hesap makinesi kodları yazdım. Bu kodlar HTML etiketlerine erişme, değişken tanımlama ve sayısal işlemlerle ilgili örnekler içerir. Kodlardaki HTML ve CSS kodlarını anlatmadan sadece Javascript'teki en temel konulardan bir iki bölümde yorum satırında anlatmaya çalışacağım.

<script>
        var sayi = 0;
        var ilkSayi = 0;
        var islem = "";
        function HesapEkle(s) {
            if (islem == "=") //eşittir işlemi yapılmışsa islemi temizle
            {
                Temizle();
                islem = "";
            }
            if (islem != "") //işlem tuşlarına basılmış ise (/*-+) sonuc input değerini temizle
            {
                document.getElementById("sonuc").value = "";
            }
            document.getElementById("sonuc").value += s;
            sayi = document.getElementById("sonuc").value;
        }

        function HafizayaAl(p)
        {
            ilkSayi = document.getElementById("sonuc").value;
            sayi = 0;
            islem = p;
        }
        function Temizle() {
            document.getElementById("sonuc").value = "";
            ilkSayi = sayi = 0;
        }
        function Hesapla() {
            
            var sonuc = 0;
            if (islem == "/")
                sonuc = ilkSayi / sayi;

            if (islem == "*")
                sonuc = ilkSayi * sayi;
            if (islem == "+")
                sonuc = ilkSayi + sayi;
            if (islem == "-")
                sonuc = ilkSayi - sayi;
            Temizle();
            document.getElementById("sonuc").value = sonuc;
            islem = "=";
        }
    </script>

HTML kodlarımız

    <div class="container">
        <input name="sonuc" id="sonuc" class="sonuc" />
        <button value="C" onclick="Temizle()">C</button>
        <button data-num="9">9</button>
        <button onclick="HesapEkle(8)">8</button>
        <button onclick="HesapEkle(7)">7</button>
        <button onclick="HafizayaAl('/')">/</button>
        <button onclick="HesapEkle(4)">4</button>
        <button onclick="HesapEkle(5)">5</button>
        <button onclick="HesapEkle(6)">6</button>
        <button  onclick="HafizayaAl('*')">*</button>
        <button onclick="HesapEkle(1)">1</button>
        <button onclick="HesapEkle(2)">2</button>
        <button onclick="HesapEkle(3)">3</button>
        <button  onclick="HafizayaAl('-')">-</button>
        <button onclick="HesapEkle(0)" class="sifir">0</button>
        <button onclick="Hesapla()">=</button>
        <button  onclick="HafizayaAl('+')">+</button>
    </div>

Kaynak kodları https://github.com/osmanceliktr/hesapmakinesi adresinde inceleyebilirsiniz.

Genişletme Metotlarım – 4 (Extension Methods) Önceki Yazı

Genişletme Metotlarım – 4 (Extension Methods)

GoDaddy'de Plesk Panel Üzerinde Ücretsiz SSL Sertifikası Kurulumu Nasıl Yapılır? Sonraki Yazı

GoDaddy'de Plesk Panel Üzerinde Ücretsiz SSL Sertifikası Kurulumu Nasıl Yapılır?

Yorum/Soru Yazın