JavaScript Dikdörtgen Alan ve Çevre Hesapla

Bu örnekte Javascript ile uzun ve kısa kenarı kullanıcı tarafından girilen bir dikdörtgenin alanını ve çevresini hesaplayarak sonucu alan için ve çevre için belirlenmiş <div> ler içerisinde görüntüleyeceğiz.

Örnek için Dikdörtgenin alanı ve çevresinin nasıl hesaplandığını bilmemiz gerekir.

Bizde yukarıdaki bölüme göre kodlarımızı oluşturacağız.

Uygulmamız bittiğinde aşağıdaki gibi bir görüntü oluşacaktır. Tabi burada ekleyeceğiniz CSS stilleri ile nesneleri dilediğiniz gibi biçimlendirebilirsiniz.

dikdortgen.html Kodlar:


<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
</head>

<body>
    <h2>Javascript Dikdörtgen Alan-Çevre Hesaplama</h2>
    
    <label>Kısa Kenar</label>
    <input type="number" id="kisa">
    <label>Uzun Kenar</label>
    <input type="number" id="uzun">
    <button id="btn">Hesapla</button>
    
    <div id="cevre"></div>
    <div id="alan"></div>
    
    <script>
        function Hesapla(){
            var kk=document.getElementById("kisa").value;
            var uk=document.getElementById("uzun").value;
            kk=Number(kk);
            uk=Number(uk);
            var dAlan=kk*uk;
            var dCevre=2*(kk+uk);
            document.getElementById("cevre").innerHTML="Çevre : "+dCevre;
            document.getElementById("alan").innerHTML="Alan : "+dAlan;
        }
        
        var hspBtn=document.getElementById("btn");
        btn.onclick=Hesapla;
        
    </script>
</body>
</html>

<!doctype html>

<html>

<head>

<title>Untitled Document</title>

</head>

<body>

<h2>Javascript Dikdörtgen Alan-Çevre Hesaplama</h2>

<label>Kısa Kenar</label>

<label>Uzun Kenar</label>

<button id="btn">Hesapla</button>

function Hesapla(){

var kk=document.getElementById("kisa").value;

var uk=document.getElementById("uzun").value;

kk=Number(kk);

uk=Number(uk);

var dAlan=kk*uk;

var dCevre=2*(kk+uk);

document.getElementById("cevre").innerHTML="Çevre : "+dCevre;

document.getElementById("alan").innerHTML="Alan : "+dAlan;

}

var hspBtn=document.getElementById("btn");

btn.onclick=Hesapla;

</script>

</body>

</html>

JavaScript Dikdörtgen Alan ve Çevre Hesapla

Yorum Yap

İptal Et

Bunları da beğenebilirsiniz

Yorum Yap