Javascript Dört İşlem Örneği

Javascript ile hazırladığımız örneğimizde dört temel işlem olan toplama, çıkarma, çarpma ve bölme işlemi yapılmaktadır. Örneğimizde css’ten faydalanılmıştır. İşlem sonucu sayfanın ortasında arka plan rengi ve yazı rengi ve fontu ile görsel zenginlik katılmıştır. 

Örnekte form ve label etiketleri ile form elemanları oluşturuldu. Formda sayı girişleri içi tasarlanan metin kutularına sadece sayı girilebilmesi için type parametresine “number” tanımlanmıştır.  Her bir işlem ayrı bir fonksiyonda yapıldı. Kullanıcı dört butondan hangisine tıklar ise (onclick olayı) ilgili fonksiyona gönderilmek suretiyle kodlar çalışmaktadır.

<html>
<head>
<title>DÖRT İŞLEM ÖRNEĞİ</title>
<meta charset="utf-8">
<style type="text/css">
#demo
{
 color:#00F;
 background-color:#FF0;
 font-size:36px;
 text-align:center;
}
</style>
</head>
<body>
<h1>JavaScript Dört İşlem</h1>
<form name="toplam">
<label>1. Sayı : </label>
<input type="number" id="sayi1"><br><br>
<label>2. Sayı : </label>
<input type="number" id="sayi2"><br><br>
<input type="button" value="TOPLA" onClick="topla()">
<input type="button" value="ÇARP" onClick="carp()">
<input type="button" value="BÖL" onClick="bol()">
<input type="button" value="FARK" onClick="fark()">
</form>
<br>
<p id="demo">
<script>
function topla() 
{
var sayi1 = parseInt(document.getElementById("sayi1").value);
var sayi2 = parseInt(document.getElementById("sayi2").value);
var sonuc=sayi1+sayi2;
document.getElementById('demo').innerHTML =sonuc;
}
// megepmoduller.gen.tr
function carp() 
{
var sayi1 = document.getElementById("sayi1").value;
var sayi2 = document.getElementById("sayi2").value;
var sonuc=sayi1*sayi2;
document.getElementById('demo').innerHTML =sonuc;
}
function bol() 
{
var sayi1 = parseInt(document.getElementById("sayi1").value);
var sayi2 = parseInt(document.getElementById("sayi2").value);
var sonuc=sayi1/sayi2;
document.getElementById('demo').innerHTML =sonuc;
}
function fark() 
{
var sayi1 = parseInt(document.getElementById("sayi1").value);
var sayi2 = parseInt(document.getElementById("sayi2").value);
var sonuc=sayi1-sayi2;
document.getElementById('demo').innerHTML =sonuc;
}
// megepmoduller.gen.tr
</script>
</body>
</html>

 

Bir cevap yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir