JavaScript Örnekleri

u 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

JavaScript Basit Aritmetiksel ve Metinsel Örnekler

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
 
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
</head>
 
<body>
    
    <script>
        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.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
 
<!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>
 

Çıktı:

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
 
<!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>
 

Çı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.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
 
<!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>
 

Çı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.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
 
<!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>
 

Çıktı:

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
 
<!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>
 

Çıktı:

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
 
<!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>
 

Çıktı:

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
 
<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>
 

Çıktı:

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
 
<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>
 

Çı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.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
 
<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>
 

Çı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.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
 
<!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>
 

Çı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.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
 
<!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>
 

Çı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.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
 
<!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>
 

Çı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.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
 
<!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>
 

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.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
 
<!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>
 

Çı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:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
 
<!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>
 

Ö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:

JavaScript

JavaScript Örnekleri

JavaScript Örnekleri

JavaScript Basit Aritmetiksel ve Metinsel Örnekler

JavaScript Koşul (If- Else) Örnekleri

JavaScript Döngü (For) Örnekleri

Yorum Gönder

0 Yorumlar

Search This Blog

Subscribe Us

Kötüye Kullanım Bildir

Blog Archive

Blog Archive

Home Ads

Footer Menu Widget

"If you want to build something big, you have to start with a small step!"

Text Widget

Recent Blog Posts

About Me

Home Ads

This is InBio, Portfolio Template.

Advertisement

About Us

Blogger Pages

Recent Posts

Recent in Recipes

Facebook

JSON Variables

Recent Posts

Popular

Home Ads

Subscribe Us

Facebook

Random Post

Recent Post

Most Popular

Menu

JavaScript

JavaScript Örnekleri

JavaScript Örnekleri

JavaScript Basit Aritmetiksel ve Metinsel Örnekler

JavaScript Koşul (If- Else) Örnekleri

JavaScript Döngü (For) Örnekleri

Yorum Gönder

0 Yorumlar

Search This Blog

Subscribe Us

Kötüye Kullanım Bildir

Blog Archive

Blog Archive

Home Ads

Footer Menu Widget

"If you want to build something big, you have to start with a small step!"

Text Widget

Recent Blog Posts

About Me

Home Ads

This is InBio, Portfolio Template.

Advertisement

About Us

Blogger Pages

Recent Posts

Recent in Recipes

Facebook

JSON Variables

Recent Posts

Popular

Home Ads

Social Plugin

Subscribe Us

Facebook

Random Post

Recent Post

Most Popular

Menu