JavaScript Örnekleri

JavaScript yaygın olarak web tarayıcılarında kullanılmakta olan bir betik dilidir. JavaScript ile yazılan istemci tarafı betikler sayesinde tarayıcının kullanıcıyla etkileşimde bulunması, tarayıcının kontrol edilmesi, asenkron bir şekilde sunucu ile iletişime geçilmesi ve web sayfası içeriğinin değiştirilmesi gibi işlevler sağlanır.

Bu yazımızda JavaScript dili kullanılarak oluşturulmuş basit örnekler paylaşağım. Sayfadaki örnekler devamlı olarak güncellenecektir.

Örneği Görmek için resime tıklayın:

Butona tıklandığında, tıklanan butondaki sayıları toplayan program

JavaScript örneğinde buton click, this anahtarı kullanımı , innerHTML ve value değerleri kullanılmıştır.


<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>JS01</title>
</head>
<style>
input[type="button"]{
width:50px;
height: 50px;
line-height: 50px;

}
#butonlar{
text-align: center;
}
#sonuc{
background: #12123a;
color:#efefaa;
font-size:2em;
padding:10px;
margin:10px;
text-align: center;
}
</style>
<body>
<div id="butonlar">
<input type="button" id="t1" value="1">
<input type="button" id="t5" value="5">
<input type="button" id="t10" value="10">
<input type="button" id="t50" value="50">
</div>
<div id="sonuc">0</div> 

<script>
var b1=document.getElementById("t1");
var b2=document.getElementById("t5");
var b3=document.getElementById("t10");
var b4=document.getElementById("t50");
var sonuc=document.getElementById("sonuc");

b1.onclick=topla; 
b2.onclick=topla; 
b3.onclick=topla; 
b4.onclick=topla; 

function topla(){

sonuc.innerHTML=Number(sonuc.innerHTML)+Number(this.value);
}

</script>
</body>
</html>

<!doctype html>

<html>

<head>

</head>

<style>

input[type="button"]{

width:50px;

height: 50px;

line-height: 50px;

}

#butonlar{

text-align: center;

}

#sonuc{

background: #12123a;

color:#efefaa;

font-size:2em;

padding:10px;

margin:10px;

text-align: center;

}

</style>

<body>

</div>

var b1=document.getElementById("t1");

var b2=document.getElementById("t5");

var b3=document.getElementById("t10");

var b4=document.getElementById("t50");

var sonuc=document.getElementById("sonuc");

b1.onclick=topla;

b2.onclick=topla;

b3.onclick=topla;

b4.onclick=topla;

function topla(){

sonuc.innerHTML=Number(sonuc.innerHTML)+Number(this.value);

}

</script>

</body>

</html>

İki text kutusuna girilen şifreyi kontrol eden javaScript örneği;

Bu JavaScript örneğinde if (şart), value ve innerHTML kavramları kullanılmıştır.


<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>JS01</title>
</head>
<style>

</style>
<body>
<table>
<tr>
<td>Şifre:</td>
<td><input type="password" id="t1"></td>
</tr>
<tr>
<td> Şifre Tekrar: </td>
<td> <input type="password" id="t2"> </td>
</tr>
<tr>
<td colspan="2">
<input type="button" id="kontrol" value="ŞİFRE KONTROL">
</td>
</tr>
</table>

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

<script>
var t1=document.getElementById("t1");
var t2=document.getElementById("t2");
var sonuc=document.getElementById("sonuc");

document.getElementById("kontrol").onclick=function(){ 
if(t1.value==t2.value)
sonuc.innerHTML="Doğru Giriş Yapabilirsiniz";
else
sonuc.innerHTML="Şifreler HATALI! Tekrar Kontrol edin";
}
</script>
</body>
</html>

<!doctype html>

<html>

<head>

</head>

<style>

</style>

<body>

<table>

<tr>

<td>Şifre:</td>

</tr>

<tr>

<td> Şifre Tekrar: </td>

</tr>

<tr>

</td>

</tr>

</table>

var t1=document.getElementById("t1");

var t2=document.getElementById("t2");

var sonuc=document.getElementById("sonuc");

document.getElementById("kontrol").onclick=function(){

if(t1.value==t2.value)

sonuc.innerHTML="Doğru Giriş Yapabilirsiniz";

else

sonuc.innerHTML="Şifreler HATALI! Tekrar Kontrol edin";

}

</script>

</body>

</html>

Text kutusuna girilen sayılara göre ekrandaki div nesnesini hareket ettirme;

JavaScript Örneğinde javaScript style (javascript ile html biçimlendirme), onkeyup, style.top,style.left ve value kavramları kullanılmıştır.


<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>JS01</title>
</head>
<style>
#kutu{
top:0px;
left: 0px;
width: 300px;
height: 300px;
position: absolute;
background: #3498db;
z-index: -1;
}

</style>
<body>
<input type="text" id="x" value="0">
<input type="text" id="y" value="0">

<div id="kutu"></div>

<script>

var x=document.getElementById("x");
var y=document.getElementById("y");

y.onkeyup=function(){
kutu.style.top=y.value+"px";
kutu.style.left=y.value+"px";
}
x.onkeyup=function(){
kutu.style.top=y.value+"px";
kutu.style.left=x.value+"px";
}
</script>
</body>
</html>

<!doctype html>

<html>

<head>

</head>

<style>

#kutu{

top:0px;

left: 0px;

width: 300px;

height: 300px;

position: absolute;

background: #3498db;

z-index: -1;

}

</style>

<body>

var x=document.getElementById("x");

var y=document.getElementById("y");

y.onkeyup=function(){

kutu.style.top=y.value+"px";

kutu.style.left=y.value+"px";

}

x.onkeyup=function(){

kutu.style.top=y.value+"px";

kutu.style.left=x.value+"px";

}

</script>

</body>

</html>

Butona basıldığında kullanıcının girdiği 2 sayıyı toplayan JavaScript Örneği


<!DOCTYPE html>
<html>
    <head>
        <title>www.yazilimkodlama.com</title>
        <meta charset="utf-8">
    </head>
    <body>
        <h1>JavaScript Toplama Örneği</h1>
        <form name="toplam">
            <label>1. Sayı : </label>
            <input type="text" id="sayi1"><br><br>
            <label>2. Sayı : </label>
            <input type="text" id="sayi2"><br><br>
            <input type="button" id="btnHesap" value="HESAPLA">
        </form>
        <br>
        <div id="kutuToplam"></div>
        
        <script>      
            var btn=document.getElementById("btnHesap");
            btn.onclick=function(){
                var s1=Number(document.getElementById("sayi1").value);
                var s2=Number(document.getElementById("sayi2").value);
                var sonuc=s1+s2;
                document.getElementById("kutuToplam").innerHTML="Sonuç : "+sonuc;
            }
        </script>
    </body>
</html>

<!DOCTYPE html>

<html>

<head>

<title>www.yazilimkodlama.com</title>

</head>

<body>

<h1>JavaScript Toplama Örneği</h1>

</form>

<br>

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

btn.onclick=function(){

var s1=Number(document.getElementById("sayi1").value);

var s2=Number(document.getElementById("sayi2").value);

var sonuc=s1+s2;

document.getElementById("kutuToplam").innerHTML="Sonuç : "+sonuc;

}

</script>

</body>

</html>

Farenıin tarayıcı üzerinde hareketini algılayan ve koordinat bilgisini veren JavaScript Örneği


<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>www.yazilimkodlama.com</title>
</head>
<style>
.konum{
width: 250px;
height: 50px;
line-height: 50px;
font-size: 2em;
background:#0066cc;
color:#FFFFFF;
padding:5px;
margin:5px;
}
</style>
<body>
<div id="x" class="konum">0</div>
<div id="y" class="konum">0</div>
 
 
</body>
<script>
//window (taraycı penceresi) üzerinde fare hareket ettirildikçe çalışacak kodlar
window.onmousemove=function(olay)
{
//gerçekleşen olayla ilgili tüm bilgi olay değişkenine aktarılıyor.
 
var xpos=olay.clientX;
var ypos=olay.clientY;
 
//clientX: farenin x eksenindeki konumu
//clientY farenin y eksenindeki konumu
 
document.getElementById('x').innerHTML=xpos;
document.getElementById('y').innerHTML=ypos;
 
 
} 
</script>
</html>

<!doctype html>

<html>

<head>

<title>www.yazilimkodlama.com</title>

</head>

<style>

.konum{

width: 250px;

height: 50px;

line-height: 50px;

font-size: 2em;

background:#0066cc;

color:#FFFFFF;

padding:5px;

margin:5px;

}

</style>

<body>

</body>

//window (taraycı penceresi) üzerinde fare hareket ettirildikçe çalışacak kodlar

window.onmousemove=function(olay)

{

//gerçekleşen olayla ilgili tüm bilgi olay değişkenine aktarılıyor.

var xpos=olay.clientX;

var ypos=olay.clientY;

//clientX: farenin x eksenindeki konumu

//clientY farenin y eksenindeki konumu

document.getElementById('x').innerHTML=xpos;

document.getElementById('y').innerHTML=ypos;

}

</script>

</html>

Kullanıcıdan Sayı alarak Toplama Çıkarma Çarpma Bölme İşlemi Yapan JavaScript Örneği


<!DOCTYPE html>
<html>
    <head>
        <title>www.yazilimkodlama.com</title>
        <meta charset="utf-8">
    </head>
    <body>
        <h1>JavaScript Dört İşlem</h1>
        <form name="toplam">
            <label>1. Sayı : </label>
            <input type="text" id="sayi1"><br><br>
            <label>2. Sayı : </label>
            <input type="text" id="sayi2"><br><br>
            
            <input type="button" id="btnTopla" value="TOPLA">
            <input type="button" id="btnCikar" value="ÇIKAR">
            <input type="button" id="btnCarp" value="ÇARP">
            <input type="button" id="btnBol" value="BÖL">
        </form>
        <br>
        <div id="kutuSonuc"></div>
        
        <script>
            
           //Toplama 
            var btn_Topla=document.getElementById("btnTopla");
            btn_Topla.onclick=function(){
                var s1=Number(document.getElementById("sayi1").value);
                var s2=Number(document.getElementById("sayi2").value);
                var sonuc=s1+s2;
                document.getElementById("kutuSonuc").innerHTML="Sonuç : "+sonuc;
            }
            
            //Çıkarma
            var btn_Cikar=document.getElementById("btnCikar");
            btn_Cikar.onclick=function(){
                var s1=Number(document.getElementById("sayi1").value);
                var s2=Number(document.getElementById("sayi2").value);
                var sonuc=s1-s2;
                document.getElementById("kutuSonuc").innerHTML="Sonuç : "+sonuc;
            }
            
            //Çarpma
            var btn_Carp=document.getElementById("btnCarp");
            btn_Carp.onclick(){
                var s1=Number(document.getElementById("sayi1").value);
                var s2=Number(document.getElementById("sayi2").value);
                var sonuc=s1*s2;
                document.getElementById("kutuSonuc").innerHTML="Sonuç : "+sonuc;
            }
            
            //Bölme
            var btn_Bol=document.getElementById("btnBol");
            btn_Carp.onclick(){
                var s1=Number(document.getElementById("sayi1").value);
                var s2=Number(document.getElementById("sayi2").value);
                var sonuc=s1/s2;
                document.getElementById("kutuSonuc").innerHTML="Sonuç : "+sonuc;
            }
                        
        </script>
    </body>
</html>

<!DOCTYPE html>

<html>

<head>

<title>www.yazilimkodlama.com</title>

</head>

<body>

<h1>JavaScript Dört İşlem</h1>

</form>

<br>

//Toplama

var btn_Topla=document.getElementById("btnTopla");

btn_Topla.onclick=function(){

var s1=Number(document.getElementById("sayi1").value);

var s2=Number(document.getElementById("sayi2").value);

var sonuc=s1+s2;

document.getElementById("kutuSonuc").innerHTML="Sonuç : "+sonuc;

}

//Çıkarma

var btn_Cikar=document.getElementById("btnCikar");

btn_Cikar.onclick=function(){

var s1=Number(document.getElementById("sayi1").value);

var s2=Number(document.getElementById("sayi2").value);

var sonuc=s1-s2;

document.getElementById("kutuSonuc").innerHTML="Sonuç : "+sonuc;

}

//Çarpma

var btn_Carp=document.getElementById("btnCarp");

btn_Carp.onclick(){

var s1=Number(document.getElementById("sayi1").value);

var s2=Number(document.getElementById("sayi2").value);

var sonuc=s1*s2;

document.getElementById("kutuSonuc").innerHTML="Sonuç : "+sonuc;

}

//Bölme

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

btn_Carp.onclick(){

var s1=Number(document.getElementById("sayi1").value);

var s2=Number(document.getElementById("sayi2").value);

var sonuc=s1/s2;

document.getElementById("kutuSonuc").innerHTML="Sonuç : "+sonuc;

}

</script>

</body>

</html>

Kullanıcının girdiği verilere göre Kombinasyon Hesaplayan JavaScript Örneği


<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>www.yazilimkodlama.com</title>
</head>
 
<body>
 
<h2>JavaScript Kombinasyon Hesaplama</h2>
 
<p>Bu sayfa JavaScript ile fonksiyon kullanarak kombinasyon hesaplama örneğidir.</p>
 
<form name="kombinasyon">
    Eleman Sayısı (n) :<br>
    <input type="text" id="elemanSayi"><br>
    Seçim Sayısı (r) :<br>
    <input type="text" id="secimSayi"><br>
    <input type="button" id="Hesapla" value="HESAPLA">
</form>
<p id="kutu"></p>
 
<script>
 
 
 
    function faktor(sayi) {
        
        var sonuc=1;
        for(var i=1;i<=sayi;i++)
            {
                sonuc*=i;
            }
            return sonuc;
    }
 
    var btn=document.getElementById("Hesapla");
    btn.onclick=function(){
        var n=Number(document.getElementById("elemanSayi").value);
        var r=Number(document.getElementById("secimSayi").value);
        var sonuc2=faktor(n)/(faktor(r)*faktor(n-r));
        document.getElementById("kutu").innerHTML=sonuc2;
    }
 
</script>
 
</body>
</html>

<!DOCTYPE html>

<html>

<head>

<title>www.yazilimkodlama.com</title>

</head>

<body>

<h2>JavaScript Kombinasyon Hesaplama</h2>

<p>Bu sayfa JavaScript ile fonksiyon kullanarak kombinasyon hesaplama örneğidir.</p>

Eleman Sayısı (n) :<br>

Seçim Sayısı (r) :<br>

</form>

function faktor(sayi) {

var sonuc=1;

for(var i=1;i<=sayi;i++)

{

sonuc*=i;

}

return sonuc;

}

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

btn.onclick=function(){

var n=Number(document.getElementById("elemanSayi").value);

var r=Number(document.getElementById("secimSayi").value);

var sonuc2=faktor(n)/(faktor(r)*faktor(n-r));

document.getElementById("kutu").innerHTML=sonuc2;

}

</script>

</body>

</html>

Yazılı ortalaması hesaplayan JavaScript Örneği


<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>www.yazilimkodlama.com</title>
<style>
	input{
		font-size: 20px;
	}
	#ort{
		color: red;
		font-size: 30px;
	}
	#sonuc{
		color: red;
		font-size: 30px;
	}
	
</style>
</head>
 
<body>
 
	<form name="ortalama">
		1. Yazılı<br>
		<input type="text" name="txtYazili1"><br><br>
		2. Yazılı<br>
		<input type="text" name="txtYazili2"><br><br>
		1. Performans<br>
		<input type="text" name="txtPerformans1"><br><br>
		2. Performans<br>
		<input type="text" name="txtPerformans2"><br><br>
		<input type="button" value="HESAPLA" id="hesap" onClick="hesapla()">
	</form>
	<div id="ort"></div>
	<div id="sonuc"></div>
	
	
	<script>
		function hesapla(){
			var y1=document.ortalama.txtYazili1.value;
			var y2=document.ortalama.txtYazili2.value;
			var p1=document.ortalama.txtPerformans1.value;
			var p2=document.ortalama.txtPerformans2.value;
			var ortalama=(Number(y1)+Number(y2)+Number(p1)+Number(p2))/4;
			
			var durum="";
			
			if(ortalama<50)
				{
					durum="KALDI";
				}
			else
				{
					durum="GEÇTİ"
				}			
			document.getElementById("ort").innerHTML=ortalama;
			document.getElementById("sonuc").innerHTML=durum;
		}		
	</script>
 
</body>
</html>

<!doctype html>

<html>

<head>

<title>www.yazilimkodlama.com</title>

<style>

input{

font-size: 20px;

}

#ort{

color: red;

font-size: 30px;

}

#sonuc{

color: red;

font-size: 30px;

}

</style>

</head>

<body>

1. Yazılı<br>

2. Yazılı<br>

1. Performans<br>

2. Performans<br>

</form>

function hesapla(){

var y1=document.ortalama.txtYazili1.value;

var y2=document.ortalama.txtYazili2.value;

var p1=document.ortalama.txtPerformans1.value;

var p2=document.ortalama.txtPerformans2.value;

var ortalama=(Number(y1)+Number(y2)+Number(p1)+Number(p2))/4;

var durum="";

if(ortalama<50)

{

durum="KALDI";

}

else

{

durum="GEÇTİ"

}

document.getElementById("ort").innerHTML=ortalama;

document.getElementById("sonuc").innerHTML=durum;

}

</script>

</body>

</html>

Örneği Görmek için resime tıklayın:

Butona tıklandığında, tıklanan butondaki sayıları toplayan program

İki text kutusuna girilen şifreyi kontrol eden javaScript örneği;

Text kutusuna girilen sayılara göre ekrandaki div nesnesini hareket ettirme;

Butona basıldığında kullanıcının girdiği 2 sayıyı toplayan JavaScript Örneği

Farenıin tarayıcı üzerinde hareketini algılayan ve koordinat bilgisini veren JavaScript Örneği

Kullanıcıdan Sayı alarak Toplama Çıkarma Çarpma Bölme İşlemi Yapan JavaScript Örneği

Kullanıcının girdiği verilere göre Kombinasyon Hesaplayan JavaScript Örneği

Yazılı ortalaması hesaplayan JavaScript Örneği

Bunu paylaş:

Şunlar da Hoşunuza Gidebilir

Yorum yap X