JavaScript ile Basit Hesaplama İşlemleri

Bu yazımızda JavaScript ile fonksiyon kullanarak basit dört işlemi yaptıracağız. Butona tıklanması olayını onclick() fonksiyonu ile yakalayacağız. Aşağıdaki kod satırı ile Topla etiketli butona tıklandığında topla() isimli fonksiyonun çağrılacağı belirtiliyor.
 
   <input type="button" onclick="topla();" value="Topla"/>

Burada tetiklenen topla() fonksiyonu yazılımını öğrenelim. Örneğin HTML kodunda aşağıdaki gibi metin kutusu nesnesini tanımlamış olalım. Burada önemli olan id alanına yazdığımız değerdir, burada değişken ismi kurallarında olduğu gibi Türkçe karakter kullanmayınız.

<input type="text" name="sayi1" id="sayi1"><br/>

Aşağıdaki kod ile id değerini bildiğiniz form nesnesinin içerğine ulaşıyoruz.

     s1= parseInt(document.getElementById('sayi1').value);

Şimdi topla() fonksiyonuna bakalım.

 function topla(){
        s1= parseInt(document.getElementById('sayi1').value);
        s2= parseInt(document.getElementById('sayi2').value);
        document.getElementById('sonuc').value = s1+s2;
    }

Bu şekilde dört işlemin fonksiyonunu yazabilirsiniz, yalnız bölme fonksiyonunda paydadaki sayının sıfıra eşit olup olmadığını kontrol etmemiz lazım, yoksa "infinity"  yani sonsuz hata mesajı alırız. Aşağıdaki kod satırları ile s2 değişkeninin sıfıra eşit olup olmadığı kontrol ediliyor, eğer sıfıra eşit değilse bölme işlemini yapıyoruz, değilse metin kutusuna "Sıfıra bölme hatası" yazıyoruz.

function bolme(){
        var sonuc;
        s1= parseInt(document.getElementById('sayi1').value);
        s2= parseInt(document.getElementById('sayi2').value);
        if (s2!=0){
            sonuc=s1/s2;
        }
        else {
            sonuc="Sıfıra bölme hatası";
        }

JavaScript kodlarının çalışması aşağıdaki gibi olacaktır. Tüm tarayıcılarda bu kodlar sorunsuz çalışır, bir hata varsa "Hata Ayıklayıcısı" ile kontrol ediniz.
 



Aşağıda kodun tamamı verilmektedir. Fakat önce siz kendi kendinize yapmaya çalışın, sonra aşağıdaki kodları en sonda inceleyip kontrol ediniz.

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="utf-8">

<script type="text/javascript">
    function carp(){
        s1= parseInt(document.getElementById('sayi1').value);
        s2= parseInt(document.getElementById('sayi2').value);
        document.getElementById('sonuc').value = s1*s2;
    }
    function topla(){
        s1= parseInt(document.getElementById('sayi1').value);
        s2= parseInt(document.getElementById('sayi2').value);
        document.getElementById('sonuc').value = s1+s2;
    }
    function cikar(){
        s1= parseInt(document.getElementById('sayi1').value);
        s2= parseInt(document.getElementById('sayi2').value);
        document.getElementById('sonuc').value = s1-s2;
    }
    function bolme(){
        var sonuc;
        s1= parseInt(document.getElementById('sayi1').value);
        s2= parseInt(document.getElementById('sayi2').value);
        if (s2!=0){
            sonuc=s1/s2;
        }
        else {
            sonuc="Sıfıra bölme hatası";
        }
        document.getElementById('sonuc').value = sonuc;
    }
</script>
</head>
<body>
    <form>
        <label>Sayı 1:</label>
        <input type="text" name="sayi1" id="sayi1"><br/>

        <label>Sayı 2:</label>
        <input type="text" name="sayi2" id="sayi2"><br/>

        <label>Sonuç :</label>
        <input type="text"  id="sonuc"><br/><br/>
         //Oğuzhan TAŞ Blog uygulaması JavaScript kodları
    <input type="button" onclick="topla();" value="Topla"/>
    <input type="button" onclick="carp();"  value="Çarp"/>
    <input type="button" onclick="cikar();" value="Çıkar"/>
    <input type="button" onclick="bolme();" value="Böl"/>
    
</form>
</body>
</html>

Aşağıdaki JavaScript yazılarını da inceleyebilirsiniz.

JavaScript ile CSS kodlarını Yönlendirme
JavaScript ile Zemin Rengini Değiştirme
JavaScript ile Metin Kutusu değerini artırmak ve azaltmak
JavaScript ile Form Kontrolü
JavaScript ile Döngüler
JavaScript ile Fonksiyon İşlemleri
JavaScript ile Harf ve Rakam Kontrolü
JavaScript ile Basit Hesaplatma İşlemleri
JavaScript ile Ortalama ve Harf Notu Hesaplama
JavaScript ile Twitter benzeri karakter kontrolü
JavaScript ile Yuvarlatma Hatası nasıl düzeltilir?
JavaScript Luhn Algoritması ile Kredi Kartı Doğrulama

Mutlu kodlamalar,
Oğuzhan TAŞ
Mart 2018 Bookmark and Share
Dil Değiştir(Change Language)
Kategoriler
Kütüphane Programı
En çok Okunan 18 Makale