JavaSript Bölünebilme Örneği

Bu JavaScript örneğimizde kullanıcıdan alınan iki sayıdan ilk sayının, ikinci sayıya bölünebilmesini anlatacağım.


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

</div>

HTML: Sayıların girilmesi için text nesnelerini oluşturduk. Bölme işlemini ve sayfa yenilemesini yapmak için ise iki ayrı buton oluşturduk ve bunları “panel” divinin içine koyduk. Bu sayede hepsi aynı hizada duracak.


var nesneSayi1=document.getElementById("s1");
var nesneSayi2=document.getElementById("s2");	
var btnBol=document.getElementById("bolme");
var btnRload=document.getElementById("rLoad");

var nesneSayi1=document.getElementById("s1");

var nesneSayi2=document.getElementById("s2");

var btnBol=document.getElementById("bolme");

var btnRload=document.getElementById("rLoad");

JavaScript: Nesneleri değişken içerisine atarak tanımlıyoruz. Daha sonra nesnelerin içerisindeki “value” değerlerini tanımlayacağız.


btnBol.onclick=function()
	{
		var sayi1=Number(nesneSayi1.value);
		var sayi2=Number(nesneSayi2.value);
		
		if(isNaN(sayi1) || isNaN(sayi2))
			{
				document.getElementById("sonuc").innerHTML="Metinsel ifade girdiniz";
			}
		else if(sayi1%sayi2==0)
			{
				document.getElementById("sonuc").innerHTML="Tam Bölünebilir";
			}
		else
			{
				var bsonucu=sayi1%sayi2;
				document.getElementById("sonuc").innerHTML="Tam Bölünemez. Sonuç "+bsonucu+" olur";
			}
	}

btnBol.onclick=function()

{

var sayi1=Number(nesneSayi1.value);

var sayi2=Number(nesneSayi2.value);

if(isNaN(sayi1) || isNaN(sayi2))

{

document.getElementById("sonuc").innerHTML="Metinsel ifade girdiniz";

}

else if(sayi1%sayi2==0)

{

document.getElementById("sonuc").innerHTML="Tam Bölünebilir";

}

else

{

var bsonucu=sayi1%sayi2;

document.getElementById("sonuc").innerHTML="Tam Bölünemez. Sonuç "+bsonucu+" olur";

}

Bölme butonuna “.onclick” olayını ve fonksiyon atıyoruz.

Nesnelerin içerisindeki “value” değerlerini de değişkene atayarak “number” nesnesine dönüştürüyoruz.

“isNaN” ifadesi value değeri girilen değişkenlerin number nesnesi olup olmadığını belirtiyor. Sayı yerine metinsel bir ifade girildiğinde ilk koşulun içerisindeki kodlar çalışacaktır. Ve “sonuc” id sine sahip olan div etiketinin içerisine atılıyor.

İkinci koşul değişkenlerin birbirine bölünmelerini kontrol ediyor ve bölümlerinden kalan sıfır (0) ise belirtilen dive aktarılıyor.

Değişkenler metinsel ve birbirilerine tam bölünmüyor ise uygulama bunu hesaplayarak kalan sonucu belirtilen dive aktarılıyor.

Butona basıldığında sayfanın yenilemesini sağlayan kodlar ise şu şekilde;


btnRload.onclick=function()
	{
		window.location.reload(false);
	}

btnRload.onclick=function()

{

window.location.reload(false);

}

CSS: Son olarak görünümünü düzenliyoruz.


	.panel
	{
		width: 350px;
	}
	.panel input
	{
		width: 75%;
		height: 30px;
		margin:3px 0;
		padding: 5px;
		border:solid 2px #080055;
	}
	#sonuc
	{
		font-size: 1.3em;
		text-decoration: underline;
		color: #0D0083;
	}

.panel

{

width: 350px;

}

.panel input

{

width: 75%;

height: 30px;

margin:3px 0;

padding: 5px;

border:solid 2px #080055;

}

#sonuc

{

font-size: 1.3em;

text-decoration: underline;

color: #0D0083;

}

Kodları toparlayacak olursak şu şekilde olacaktır;


<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Bölünebilme</title>
<style>
	.panel
	{
		width: 350px;
	}
	.panel input
	{
		width: 75%;
		height: 30px;
		margin:3px 0;
		padding: 5px;
		border:solid 2px #080055;
	}
	#sonuc
	{
		font-size: 1.3em;
		text-decoration: underline;
		color: #0D0083;
	}
</style>
</head>

<body>

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

	
	var nesneSayi1=document.getElementById("s1");
	var nesneSayi2=document.getElementById("s2");	
	var btnBol=document.getElementById("bolme");
	var btnRload=document.getElementById("rLoad");
	
	btnBol.onclick=function()
	{
		var sayi1=Number(nesneSayi1.value);
		var sayi2=Number(nesneSayi2.value);
		
		if(isNaN(sayi1) || isNaN(sayi2))
			{
				document.getElementById("sonuc").innerHTML="Metinsel ifade girdiniz";
			}
		else if(sayi1%sayi2==0)
			{
				document.getElementById("sonuc").innerHTML="Tam Bölünebilir";
			}
		else
			{
				var bsonucu=sayi1%sayi2;
				document.getElementById("sonuc").innerHTML="Tam Bölünemez. Sonuç "+bsonucu+" olur";
			}
	}
	
	btnRload.onclick=function()
	{
		window.location.reload(false);
	}
	

</body>
</html>
</div>

<!doctype html>

<html>

<head>

<title>Bölünebilme</title>

<style>

.panel

{

width: 350px;

}

.panel input

{

width: 75%;

height: 30px;

margin:3px 0;

padding: 5px;

border:solid 2px #080055;

}

#sonuc

{

font-size: 1.3em;

text-decoration: underline;

color: #0D0083;

}

</style>

</head>

<body>

</div>

var nesneSayi1=document.getElementById("s1");

var nesneSayi2=document.getElementById("s2");

var btnBol=document.getElementById("bolme");

var btnRload=document.getElementById("rLoad");

btnBol.onclick=function()

{

var sayi1=Number(nesneSayi1.value);

var sayi2=Number(nesneSayi2.value);

if(isNaN(sayi1) || isNaN(sayi2))

{

document.getElementById("sonuc").innerHTML="Metinsel ifade girdiniz";

}

else if(sayi1%sayi2==0)

{

document.getElementById("sonuc").innerHTML="Tam Bölünebilir";

}

else

{

var bsonucu=sayi1%sayi2;

document.getElementById("sonuc").innerHTML="Tam Bölünemez. Sonuç "+bsonucu+" olur";

}

btnRload.onclick=function()

{

window.location.reload(false);

}

</body>

</html>

</div>

Bunu paylaş:

Şunlar da Hoşunuza Gidebilir

Yorum yap X