Bu örneğimizde JQuery ile Vize ve Final Notu Girilen bir öğrenciye ait Ortalama hesaplayarak ve Ortalaması ve Final notuna göre öğrencinin geçme ve kalma durumunu göstereceğiz. Örneğimizde Jquery ile CSS özelliklerini değiştirme, fadeIn ve fadeOut kullanımlarını da inceleyebilirsiniz. Örneğimizde Vize notunun %40 ile Final Notunun %60 ı toplamı Ortalamayı verecektir. Ortalamanın 50 den düşük olması durumunda veya Final notunun 50 den düşük olması durumunda öğrenci başarısız sayılacaktır. Bu durumların her birini kodlarımızda değerlendireceğiz.
Örneğimizde jquery-3.1.1.min.js dosyasını ve vize-final.js dosyasını script klasöründe tutacağız. vize-final.html dosyamızda ise html ve CSS kodlarımız bulunacak. jquery-3.1.1.min.js dosyasını indirmek için https://jquery.com/download/ adresini kullanabilirsiniz.
vize-final.html dosyamızın içeriği:
|
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 |
<!doctype html> <html> <head> <meta charset="utf-8"> <title>Untitled Document</title> <style> input[type="text"]{ border: none; background: #444444; color: #fff; padding: 10px; width: 150px; } input[type="button"]{ border: none; background: #4444FF; color: #fff; padding: 10px; width: 100px; } #sonuc{ background: #D55B5D; width: 450px; color: aliceblue; text-align: center; font-size: 2em; margin-top: 10px; padding: 50px 0; } </style> </head> <body> <div> <input type="text" id="vize" placeholder="Vize Notunu Girin."> <input type="text" id="final" placeholder="Final Notunu Girin."> <input type="button" id="btn" value="Hesapla"> </div> <div id="sonuc"> </div> <script src="script/jquery-3.1.1.min.js"></script> <script src="script/vize-final.js"></script> </body> </html> |
vize-final.js javaScript dosyamızın içeriği:
|
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 |
$(document).ready(function(){ $("#sonuc").hide(); $("#btn").on("click",function(){ var vizeNotu=Number($("#vize").val()); var finalNotu=Number($("#final").val()); var ortalama=(vizeNotu*0.4)+(finalNotu*0.6); //ahmetcansever.com if(ortalama>=50 && finalNotu>=50) { $("#sonuc").css({ color:"white", background:"green" //border:"#222222 8px solid" }).fadeIn(500).delay(1500).fadeOut(500); $("#sonuc").html("Geçtiniz. Ortalamanız : "+ortalama); } else if(ortalama>=50 && finalNotu<50) { $("#sonuc").css({ color:"white", background:"#D55B5D" //border:"#222222 8px solid" }).fadeIn(500).delay(1500).fadeOut(500); $("#sonuc").html("Kaldınız. Final Notu 50'den düşük. Ortalamanız : "+ortalama); } else { $("#sonuc").css({ color:"white", background:"#D55B5D" //border:"#222222 8px solid" }).fadeIn(500).delay(1500).fadeOut(500); //ahmetcansever.com $("#sonuc").html("Kaldınız. Ortalamanız : "+ortalama); } }); }); |
Ekran Çıktısı:
