Bu konudaki JavaScript Örnekleri kolay,orta seviye ve ileri seviye olarak gerçekleştirilmiştir.

Örneklerde Temel JavaScript konuları ve JavaScript kodlarının kullanımının öğretilmesi hedeflenmiştir.

JavaScript ile basit yazdırma işlemleri, JavaScript Koşul (If-Else) Örnekleri,JavaScript Döngü Örnekleri gibi bir çok örneğe ulaşacağınız bu konu sürekli olarak güncellenecektir.

Örneklerin çoğunluğu HTML Form elemanları kullanılarak, yani input,button gibi kontroller kullanılarak ve kullanıcı etkileşimi sağlanarak gerçekleştirilecektir.

Ayrıca diğer JavaScript konuları için site arama bölümü veya Web Tasarım ana menüsü altındaki JavaScript menüsüne tıklayabilirsiniz.

JavaScript Örnekleri

İçindekiler

JavaScript Basit Aritmetiksel ve Metinsel Örnekler

Örnek 1: JavaScript ile Mesaj Penceresi kullanarak ekranda “Merhaba Dünya” yazdırınız.


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

<body>
    
    <script>
        alert("Merhaba Dünya");
    </script>
</body>
</html>

<!doctype html>

<html>

<head>

<title>Untitled Document</title>

</head>

<body>

alert("Merhaba Dünya");

</script>

</body>

</html>

Çıktı:

Örnek 2: JavaScript ile sayfadaki bir elemana (p, div, h1, h2, vb.) “Merhaba Dünya” yazdırınız.


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

<body>
    <h1 id="baslik"></h1>
    <p id="p1"></p>
    
    
    <script>
        
        document.getElementById("baslik").innerHTML="Merhaba JavaScript";
        document.getElementById("p1").innerHTML="Merhaba Dünya";
        //document.querySelector("#p1").innerHTML="Merhaba Dünya";
    </script>
    
</body>
</html>

<!doctype html>

<html>

<head>

<title>Untitled Document</title>

</head>

<body>

document.getElementById("baslik").innerHTML="Merhaba JavaScript";

document.getElementById("p1").innerHTML="Merhaba Dünya";

//document.querySelector("#p1").innerHTML="Merhaba Dünya";

</script>

</body>

</html>

Çıktı:

Örnek 3: JavaScript ile değişken oluşturarak iki metni birleştiren ve mesaj penceresinde gösteren örneği oluşturunuz.


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

<body>
    
    <script>
        var metin1="Tasarım";
        var metin2="Kodlama";
        alert(metin1+metin2);
    </script>
</body>
</html>

<!doctype html>

<html>

<head>

<title>Untitled Document</title>

</head>

<body>

var metin1="Tasarım";

var metin2="Kodlama";

alert(metin1+metin2);

</script>

</body>

</html>

Çıktı:

Örnek 4: JavaScript ile değişken oluşturarak iki sayıyı toplayan ve sonucu bir div içinde gösteren örneği oluşturunuz.


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

<body>
    <div id="sonuc"></div>
    
    <script>
        var s1=34;
        var s2=16;
        var sonuc=s1+s2;
        
        document.getElementById("sonuc").innerHTML=sonuc; 
    </script>
    
</body>
</html>

<!doctype html>

<html>

<head>

<title>Untitled Document</title>

</head>

<body>

var s1=34;

var s2=16;

var sonuc=s1+s2;

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

</script>

</body>

</html>

Çıktı:

Örnek 5: JavaScript ile kullanıcıdan input içinde adını girmesini isteyerek, Buttona basıldığında alert ekranında “Merhaba [kullanici]” yazdırılmasını sağlayan örneği oluşturunuz.


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

<body>
    <input type="text" id="txtAd" placeholder="Adınızı Giriniz.">
    <button id="btn">TIKLA</button>
    
    <script>
        var btnYaz=document.getElementById("btn");
        
        btnYaz.onclick=function(){
            var metin=document.getElementById("txtAd").value;
            alert("Merhaba "+metin);
        }
    </script>
    
</body>
</html>

<!doctype html>

<html>

<head>

<title>Untitled Document</title>

</head>

<body>

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

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

btnYaz.onclick=function(){

var metin=document.getElementById("txtAd").value;

alert("Merhaba "+metin);

}

</script>

</body>

</html>

Çıktı:

Örnek 6: JavaScript ile input lara girilen 2 sayıyı toplayan ve sonucu gösteren örneği oluşturunuz.


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

<body>
    <input type="number" id="txtSayi1" placeholder="1. Sayı">
    <input type="number" id="txtSayi2" placeholder="2. Sayı">
    <button id="btn">TOPLA</button>
    <div id="sonuc"></div>
    
    <script>
        var btnTopla=document.getElementById("btn");
        
        btnTopla.onclick=function(){
            var s1=Number(document.getElementById("txtSayi1").value);
            var s2=Number(document.getElementById("txtSayi2").value);
            var toplam=s1+s2;
            document.getElementById("sonuc").innerHTML=s1+"+"+s2+"="+toplam;
        }
    </script>
</body>
</html>

<!doctype html>

<html>

<head>

<title>Untitled Document</title>

</head>

<body>

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

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

btnTopla.onclick=function(){

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

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

var toplam=s1+s2;

document.getElementById("sonuc").innerHTML=s1+"+"+s2+"="+toplam;

}

</script>

</body>

</html>

Çıktı:

Örnek 7: JavaScript ile kenar uzunluğu girilen karenin alan ve çevresini hesaplayan örneği oluşturunuz.


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

<body>
    <input type="number" id="txtKenar" placeholder="Kenar uzunluğunu girin.">
    <button id="btn">HESAPLA</button>
    <div id="sonuc"></div>
    
    <script>
        var btnHesapla=document.getElementById("btn");
        
        btnHesapla.onclick=function(){
            var kenar=Number(document.getElementById("txtKenar").value);
            var alan=kenar*kenar;
            var cevre=4*kenar;
            document.getElementById("sonuc").innerHTML="Alan : "+alan+"<br>"+"Çevre : "+cevre;
        }
    </script>
</body>
</html>

<!doctype html>

<html>

<head>

<title>Untitled Document</title>

</head>

<body>

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

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

btnHesapla.onclick=function(){

var kenar=Number(document.getElementById("txtKenar").value);

var alan=kenar*kenar;

var cevre=4*kenar;

document.getElementById("sonuc").innerHTML="Alan : "+alan+"<br>"+"Çevre : "+cevre;

}

</script>

</body>

</html>

Çıktı:

Örnek 8: JavaScript ile kullanıcının girdiği yazılı notlarının ortalamasını hesaplayan örneği oluşturunuz.


<html>
<head>
    <meta charset="UTF-8">
</head>
<body>

    <input type="text" id="not1" placeholder="1. Not"><br>
    <input type="text" id="not2" placeholder="2. Not"><br>
    <div id="sonuc"></div>
    <input type="button" onclick="notHesapla()"  value="Not Hesapla"><br>
    <script>

        function notHesapla(){
            not1 =Number( document.querySelector("#not1").value )
            not2 =Number( document.querySelector("#not2").value )
            document.querySelector("#sonuc").innerText = (not1 + not2) / 2
        }

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

<html>

<head>

</head>

<body>

function notHesapla(){

not1 =Number( document.querySelector("#not1").value )

not2 =Number( document.querySelector("#not2").value )

document.querySelector("#sonuc").innerText = (not1 + not2) / 2

}

</script>

</body>

</html>

Çıktı:

Örnek 9: JavaScript ile Kısa ve Uzun Kenarı girilen Dikdörtgenin Alanı ve Çevresini Hesaplayan örneği oluşturunuz.


<html>
<head>
    <meta charset="UTF-8">
</head>
<body>

    <input type="text" id="kisakenar" placeholder="Kısa Kenar"><br>
    <input type="text" id="uzunkenar" placeholder="Uzun Kenar"><br>
    <div id="sonuc"></div>
    <input type="button" onclick="hesapla()"  value="Hesapla"><br>
    <script>

        function hesapla(){
           let kk =Number( document.querySelector("#kisakenar").value )
           let uk =Number( document.querySelector("#uzunkenar").value )
           let alan  = kk * uk
           let cevre = (kk + uk) * 2
            document.querySelector("#sonuc").innerText = `Çevre : ${cevre} ve Alan: ${alan}`
        }

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

<html>

<head>

</head>

<body>

function hesapla(){

let kk =Number( document.querySelector("#kisakenar").value )

let uk =Number( document.querySelector("#uzunkenar").value )

let alan = kk * uk

let cevre = (kk + uk) * 2

document.querySelector("#sonuc").innerText = `Çevre : ${cevre} ve Alan: ${alan}`

}

</script>

</body>

</html>

Çıktı:

Örnek 10: JavaScript ile Tek button ile (Hesapla) butonuna basıldığında kullanıcının girdiği iki sayının toplamı, farkı, çarpımı ve bölümünü hesaplayan dört işlem örneğini oluşturunuz.

Örnek 11: JavaScript ile dört adet button ile (Topla, Çıkar, Çarp, Böl) dört işlem örneğini oluşturunuz.


<html>
<head>
    <meta charset="UTF-8">
</head>
<body>

    <input type="text" id="sayi1" placeholder="Sayı 1"><br>
    <input type="text" id="sayi2" placeholder="Sayı 2"><br>
    <div id="sonuc"></div>
    <input type="button" onclick="topla()"  value="Topla">
    <input type="button" onclick="cikar()"  value="Çıkar">
    <input type="button" onclick="carp()"  value="Çarp">
    <input type="button" onclick="bol()"  value="Böl">
    <script>
        function topla(){
           sonuc.innerText = "Toplam:" + Number(sayi1.value) + Number(sayi2.value)
        }

        function cikar(){
           sonuc.innerText = "Çıkarma:" +Number(sayi1.value) - Number(sayi2.value)
        }

        function carp(){
           sonuc.innerText = "Çarpma:" +Number(sayi1.value) * Number(sayi2.value)
        }

        function bol(){
           sonuc.innerText = "Bölme:" +Number(sayi1.value) / Number(sayi2.value)
        }
    </script>
</body>
</html>

<html>

<head>

</head>

<body>

function topla(){

sonuc.innerText = "Toplam:" + Number(sayi1.value) + Number(sayi2.value)

}

function cikar(){

sonuc.innerText = "Çıkarma:" +Number(sayi1.value) - Number(sayi2.value)

}

function carp(){

sonuc.innerText = "Çarpma:" +Number(sayi1.value) * Number(sayi2.value)

}

function bol(){

sonuc.innerText = "Bölme:" +Number(sayi1.value) / Number(sayi2.value)

}

</script>

</body>

</html>

Çıktı:

Örnek 12: JavaScript ile Arttır ve Azalt butonları kullanarak ekrandaki sayı değerinin değişimini sağlayan örneği oluşturunuz.

Örnek 13: JavaScript ile Vize ve Final notu girilen öğrencinin ortalamasını hesaplayan örneği oluşturunuz.

Örnek 14: JavaScript ile input nesnesine girilen metni Button kullanmadan her değişiklik olduğunda div içerisinde yazdırınız. (oninput olayı)

Örnek 15: JavaScript ile input nesnesine girilen metni sayfadaki listeye liste elemanı olarak ekleyen örneği oluşturunuz.


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

<body>
    <input type="text" id="txt1">
    <button id="btn">Listeye Ekle</button>
    <ul id="liste"></ul>
    
    <script>
        
        var btnEkle=document.getElementById("btn");
        var lst=document.getElementById("liste");
        btnEkle.onclick=function(){
            var eleman=document.getElementById("txt1").value;
            lst.innerHTML+="<li>"+eleman+"</li>";
        }
        
    </script>
    
</body>
</html>

<!doctype html>

<html>

<head>

<title>Untitled Document</title>

</head>

<body>

<button id="btn">Listeye Ekle</button>

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

var lst=document.getElementById("liste");

btnEkle.onclick=function(){

var eleman=document.getElementById("txt1").value;

lst.innerHTML+="<li>"+eleman+"</li>";

}

</script>

</body>

</html>

Çıktı:

JavaScript Koşul (If- Else) Örnekleri

Örnek 16: JavaScript ile girilen sayının tek mi çift mi olduğunu bulan örneği oluşturunuz.


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

<body>
    <input type="number" id="txtSayi" placeholder="Sayı Giriniz.">
    <button id="btn">Kontrol Et</button>
    
    <script>
    
        var btnHesap=document.getElementById("btn");
        
        btnHesap.onclick=function(){
            var sayi=Number(document.getElementById("txtSayi").value);
            
            if(sayi%2==0){
                alert(sayi+" Sayısı Çifttir.");
            }
            else{
                alert(sayi+" Sayısı Tektir.");
            }
            
        }
    
    </script>
</body>
</html>

<!doctype html>

<html>

<head>

<title>Untitled Document</title>

</head>

<body>

<button id="btn">Kontrol Et</button>

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

btnHesap.onclick=function(){

var sayi=Number(document.getElementById("txtSayi").value);

if(sayi%2==0){

alert(sayi+" Sayısı Çifttir.");

}

else{

alert(sayi+" Sayısı Tektir.");

}

</script>

</body>

</html>

Çıktı:

Örnek 17: JavaScript ile not ortalaması hesaplanan öğrencinin Geçme ve Kalma durumunu ekranda gösteren (Ortalama 50′ den küçükse “Kaldı” değilse “Geçti”) örneği oluşturunuz.

Örnek 18: JavaScript ile not ortalaması hesaplanan öğrencinin ortalaması 50 ve üstündeyse yeşil renkli, değilse kırmızı renkli olacak şekilde CSS özelliğini değiştiren örneği oluşturunuz.

Örnek 19: JavaScript ile Vize ve Final ortalaması hesaplanan öğrencinin Final notu ve Ortalaması 50 ve üzerindeyse Durumunu “GEÇTİ” diğer durumlarda “KALDI” olarak gösteren örneği oluşturunuz.

Örnek 20: JavaScript ile girilen sayının pozitif, sıfır ya da negatif olduğunu ekranda gösteriniz.

Örnek 21: JavaScript ile 0-100 arası girilen notu 5 lik sisteme çeviren örneği oluşturunuz.


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

<body>
    <input type="number" id="txtPuan" placeholder="0-100 arası Notu Gir">
    <button id="btn">ÇEVİR</button>
    <div id="sonuc"></div>
    
    <script>
        var btnCevir=document.getElementById("btn");
        var notu;
        btnCevir.onclick=function(){
            var puan=Number(document.getElementById("txtPuan").value);
            if(puan>=0 && puan<50){
                notu=1;
            }
            else if(puan>=50 && puan<60){
                notu=2;
            }
            else if(puan>=60 && puan<70){
                notu=3;
            }
            else if(puan>=70 && puan<85){
                notu=4;
            }
            else if(puan>=85 && puan<=100){
                notu=5;
            }
            else
                {
                    notu=-1;
                    alert("Geçersiz Puan Girdiniz.");
                }
            
            document.getElementById("sonuc").innerHTML="Notunuz : "+notu;
        }
    </script>
</body>
</html>

<!doctype html>

<html>

<head>

<title>Untitled Document</title>

</head>

<body>

<button id="btn">ÇEVİR</button>

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

var notu;

btnCevir.onclick=function(){

var puan=Number(document.getElementById("txtPuan").value);

if(puan>=0 && puan<50){

notu=1;

}

else if(puan>=50 && puan<60){

notu=2;

}

else if(puan>=60 && puan<70){

notu=3;

}

else if(puan>=70 && puan<85){

notu=4;

}

else if(puan>=85 && puan<=100){

notu=5;

}

else

{

notu=-1;

alert("Geçersiz Puan Girdiniz.");

}

document.getElementById("sonuc").innerHTML="Notunuz : "+notu;

}

</script>

</body>

</html>

Çıktı:

Örnek 22: JavaScript ile girilen iki sayıyı karşılaştıran örneği oluşturunuz.

Örnek 23:JavaScript ile girilen sayının 0-100 arası olup olmadığını kontrol eden örneği oluşturunuz.

Örnek 24: JavaScript ile girilen iki sayıyı Select ile yapılan seçime göre işlem yatıran örneği oluşturunuz.


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

<body>
    <input type="number" id="txtSayi1" placeholder="1. Sayı">
    <label for="islemler">İşlem Seç:</label>

    <select id="islemler">
      <option value="topla">+</option>
      <option value="cikar">-</option>
      <option value="carp">*</option>
      <option value="bol">/</option>
    </select>
    <input type="number" id="txtSayi2" placeholder="2. Sayı">
    <button id="btn">HESAPLA</button>
    
    <script>
        var btnHesapla=document.getElementById("btn");
        var sonuc;
        btnHesapla.onclick=function(){
            var islem=document.getElementById("islemler").value;
            var s1=Number(document.getElementById("txtSayi1").value);
            var s2=Number(document.getElementById("txtSayi2").value);
            
            if(islem=="topla"){
                sonuc=s1+s2;
            }
            else if(islem=="cikar"){
                sonuc=s1-s2;
            }
            else if(islem=="carp"){
                sonuc=s1*s2;
            }
            else if(islem=="bol"){
                sonuc=s1/s2;
            }
            else
                {
                    alert("Seçim Yapın.");
                }
            
            alert("Sonuç : "+sonuc);
            
        }
    </script>
    
</body>
</html>

<!doctype html>

<html>

<head>

<title>Untitled Document</title>

</head>

<body>

<label for="islemler">İşlem Seç:</label>

</select>

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

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

var sonuc;

btnHesapla.onclick=function(){

var islem=document.getElementById("islemler").value;

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

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

if(islem=="topla"){

sonuc=s1+s2;

}

else if(islem=="cikar"){

sonuc=s1-s2;

}

else if(islem=="carp"){

sonuc=s1*s2;

}

else if(islem=="bol"){

sonuc=s1/s2;

}

else

{

alert("Seçim Yapın.");

}

alert("Sonuç : "+sonuc);

}

</script>

</body>

</html>

JavaScript Döngü (For) Örnekleri

Örnek 25: JavaScript ile ekranda 10 defa “Merhaba Dünya” yazdıran örneği For Döngüsü kullanarak oluşturunuz.

Örnek 26: JavaScript ile input kontrolüne girilen metni 10 defa ekranda yazdıran örneği For Döngüsü kullanarak oluşturunuz.

Örnek 27: JavaScript ile Girilen metni girilen adet kadar ekranda alt alta yazdıran örneği For Döngüsü kullanarak oluşturunuz.


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

<body>
    <input type="text" id="txtMetin" placeholder="Metni Girin.">
    <input type="number" id="txtSayi" placeholder="Sayıyı Girin.">
    <button id="btn">YAZDIR</button>
    <div id="kutu"></div>
    
    <script>
        btn.onclick=function(){
            var adet=Number(txtSayi.value);
            var metin=txtMetin.value;
            kutu.innerHTML="";
            
            for(var i=1;i<=adet;i++){
            kutu.innerHTML+=i+"."+metin+"<br>";
            }
        }
        
    </script>
</body>
</html>

<!doctype html>

<html>

<head>

<title>Untitled Document</title>

</head>

<body>

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

btn.onclick=function(){

var adet=Number(txtSayi.value);

var metin=txtMetin.value;

kutu.innerHTML="";

for(var i=1;i<=adet;i++){

kutu.innerHTML+=i+"."+metin+"<br>";

}

</script>

</body>

</html>

Çıktı:

Örnek 28: JavaScript ile 1′ den 10′ a kadar sayıları yan yana yazdıran örneği For Döngüsü kullanarak oluşturunuz..

Örnek 29: JavaScript ile 10-30 arası sayıları ekranda yazdıran örneği For Döngüsü kullanarak oluşturunuz.

Örnek 30: JavaScript ile input nesnelerine girilen iki sayı arasındaki sayıları yazdıran örneği For Döngüsü kullanarak oluşturunuz.

Örnek 31: JavaScript ile 1′ den girilen sayıya kadar olan sayıları toplayan örneği For Döngüsü kullanarak oluşturunuz.

Örnek 32: JavaScript ile girilen iki sayı arasındaki sayıları toplayan örneği For Döngüsü kullanarak oluşturunuz.

Örnek 33: JavaScript ile girilen sayının faktoriyelini hesaplayan örneği örneği For Döngüsü kullanarak oluşturunuz.

Örnek 34: JavaScript ile girilen sayının asal sayı olup olmadığını kontrol eden örneği For Döngüsü kullanarak oluşturunuz.

Örnek 35: Fare nesnenin üzerine geldiğinde nesnenin rengini değiştiren if else uygulamasını oluşturun.

Çıktı:

Kod:


<!DOCTYPE html>
<html lang="tr">
<head>
    <meta charset="UTF-8">
    <style>
        *{
            box-sizing: border-box;
        }
        .panel{
            width: 240px;
            margin:50px auto;
        }
        .kutu{
            width: 50px;
            height: 50px;
            line-height: 50px;
            margin:5px;
            text-align: center;
            border:solid 1px red;
            float:left;
        }
    </style>
</head>
<body>
    <div class="panel">
        <div class="kutu">1</div>
        <div class="kutu">2</div>
        <div class="kutu">3</div>
        <div class="kutu">4</div>
        <div class="kutu">5</div>
        <div class="kutu">6</div>
        <div class="kutu">7</div>
        <div class="kutu">8</div>
        <div class="kutu">9</div>
        <div class="kutu">10</div>
        <div class="kutu">11</div>
        <div class="kutu">12</div>
    </div>
    <script>

        //tüm .kutu elementlerini bir düğüm listesi olarak seçin
        const kutular = document.querySelectorAll(".kutu");

        //for ile tüm kutular üzerinde hareket edin
        //ilk index(0) ve son index kutular.length-1 dir
        //örnek bir kutu seçme kutular[2] 
        for(var i=0;i<kutular.length;i++)
        {

            //her bir kutu ögesine bir tane anonim fonksiyon atayın, fare üzerine gelince çalışsın
            kutular[i].onmouseover=function(){

                //fare kutunun üzerine gelince kutunu rengine göre kırmızı beyaz yapsın
                
                //kırmızı ise beyaz, kırmızı değilse kırmızı yapsın
                if(this.style.backgroundColor=="red")
                {
                    this.style.backgroundColor="white";
                }
                else
                {
                    this.style.backgroundColor="red";
                }
            }

        }

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

<!DOCTYPE html>

<head>

<style>

box-sizing: border-box;

}

.panel{

width: 240px;

margin:50px auto;

}

.kutu{

width: 50px;

height: 50px;

line-height: 50px;

margin:5px;

text-align: center;

border:solid 1px red;

float:left;

}

</style>

</head>

<body>

</div>

//tüm .kutu elementlerini bir düğüm listesi olarak seçin

const kutular = document.querySelectorAll(".kutu");

//for ile tüm kutular üzerinde hareket edin

//ilk index(0) ve son index kutular.length-1 dir

//örnek bir kutu seçme kutular[2]

for(var i=0;i<kutular.length;i++)

{

//her bir kutu ögesine bir tane anonim fonksiyon atayın, fare üzerine gelince çalışsın

kutular[i].onmouseover=function(){

//fare kutunun üzerine gelince kutunu rengine göre kırmızı beyaz yapsın

//kırmızı ise beyaz, kırmızı değilse kırmızı yapsın

if(this.style.backgroundColor=="red")

{

this.style.backgroundColor="white";

}

else

{

this.style.backgroundColor="red";

}

</script>

</body>

</html>

Örnek 36: Bu javascript örneğinde aktif olan butondan önce basılan butonu hafızada tutup aktif olan buton ile önceki butona efekt uygulama örneğini yapacağız.

Kod:


<!DOCTYPE html>
<html lang="tr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <button id="btn1" class="btn">Örnek Buton</button>
    <button id="btn2" class="btn">Örnek Buton</button>
    <button id="btn3" class="btn">Örnek Buton</button>
    <button id="btn4" class="btn">Örnek Buton</button>
    <button id="btn5" class="btn">Örnek Buton</button>
        <h1 id="sonuc"></h1>
    <script>
        var prevBtn=null;
        const butonlar=document.querySelectorAll(".btn");
        const sonuc=document.querySelector("#sonuc");

        butonlar.forEach(function(element,indis){
            element.addEventListener("click",function(){

                //aktif buton efekt uygulama
                this.style.color="red";
                
                
                //önceki butona efekt uygulama
                if(prevBtn!=null)
                {
                    prevBtn.style.color="green";
                    sonuc.innerText="Önceki BTN ID: "+prevBtn.id;
                }

                //prevBtn değişkenine aktarma
                //daha sonra kullanmak için kaydediyoruz.
                prevBtn=this;//efekten sonra eski buton olarak aktarıyoruz.

            });
        });
    </script>
</body>
</html>

<!DOCTYPE html>

<head>

<title>Document</title>

</head>

<body>

<button id="btn1" class="btn">Örnek Buton</button>

<button id="btn2" class="btn">Örnek Buton</button>

<button id="btn3" class="btn">Örnek Buton</button>

<button id="btn4" class="btn">Örnek Buton</button>

<button id="btn5" class="btn">Örnek Buton</button>

var prevBtn=null;

const butonlar=document.querySelectorAll(".btn");

const sonuc=document.querySelector("#sonuc");

butonlar.forEach(function(element,indis){

element.addEventListener("click",function(){

//aktif buton efekt uygulama

this.style.color="red";

//önceki butona efekt uygulama

if(prevBtn!=null)

{

prevBtn.style.color="green";

sonuc.innerText="Önceki BTN ID: "+prevBtn.id;

}

//prevBtn değişkenine aktarma

//daha sonra kullanmak için kaydediyoruz.

prevBtn=this;//efekten sonra eski buton olarak aktarıyoruz.

});

</script>

</body>

</html>

DEMO

JavaScript Örnekleri

JavaScript Örnekleri

JavaScript Basit Aritmetiksel ve Metinsel Örnekler

JavaScript Koşul (If- Else) Örnekleri

JavaScript Döngü (For) Örnekleri

Yorum Yap

İptal Et

JavaScript Örnekleri

JavaScript Basit Aritmetiksel ve Metinsel Örnekler

JavaScript Koşul (If- Else) Örnekleri

JavaScript Döngü (For) Örnekleri

Bunları da beğenebilirsiniz

Yorum Yap