Bu javaScript örneğinde kullanıcı tarafından girilen 3 not değerine göre ortalamalarını hesaplayıp, ortalama 50 puandan küçükse KALDI, 50 ve üzerinde ise GEÇTİ olarak ekrana yazdıracaktır.
Not hesaplama işleminde kullanıcı 0’dan küçük ve 100’den büyük değer girmesi durumunda değer silinecek ve hatalı olarak girilen text kutusuna odaklanacaktır. Uygulamanın ekranda daha iyi görnmesi için CSS ile uygulama güzelleştirilmiş durumdadır. Daha fazla javaScript örneği için javascript örnekleri sayfasına bakı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 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 73 74 75 76 77 78 79 80 81 82 83 84 |
<!doctype html> <html> <head> <meta charset="utf-8"> <title>Örnek</title> <style> .panel{ width: 200px; margin: auto; } .panel input{ width: 100%; height: 30px; margin:3px 0; background: #ededed; border:solid 1px #ccc; } #sonuc-yaz{ margin-top:10px; height: 50px; line-height: 50px; font-size:1em; font-weight: bold; } </style> <script> /*sayfa yüklendiğinde aşağıdaki scripti çalıştır*/ window.onload=function(e){ var y1=document.getElementById("y1"); var y2=document.getElementById("y2"); var y3=document.getElementById("y3"); var sonuc=document.getElementById("sonuc"); var hesapla=document.getElementById("hesapla"); var sonucYaz=document.getElementById("sonuc-yaz"); /*0-100 arasında değilse uyarı ver*/ [y1,y2,y3].forEach(function(element) { element.onchange=function(){ if(Number(element.value)<0 || Number(element.value)>100) { element.value=""; this.focus(); } } }); /*hesapla butonuna tıkladığında*/ hesapla.onclick=function(){ var s=(Number(y1.value)+Number(y2.value)+Number(y3.value))/3; sonuc.value=s.toFixed(2); if(s<50) { sonucYaz.textContent="BAŞARISIZ OLDUNUZ"; } else{ sonucYaz.textContent="GEÇTİNİZ"; } } } </script> </head> <body> <div class="panel"> <input type="text" id="y1" placeholder="1.yazılı"> <input type="text" id="y2" placeholder="2.yazılı"> <input type="text" id="y3" placeholder="3.yazılı"> <input type="text" id="sonuc"> <input type="button" id="hesapla" value="hesapla"> <div id="sonuc-yaz"></div> </div> </body> </html> |
