Son dnemlerde bazı arkadaşların bana bu konuda talepleri geliyordu. Gelen bu taleplere karşı kayıtsız kalmayıp JavaScript ile not ortalaması hesaplayan küçük bir uygulamayı sizlerle paylaşmak istedim. Üniversite yıllarında çokca bu durumla karşı karşıya kalmışızdır. Şimdi de siteden mesaj gnderenlerin talebine karşılık bu makaleyi herkesin yararlanacağı şekilde açık edeyim. Kısaca bir zet geçtikten sonra malzemeleri hazırlayıp uygulamamızı yayına alalım. Üniversite zamanlarımdan hatırladığım kadarıyla vize puanının %40'ı, final puanının %60'ı alınıp ortalama puan hesaplaması geçerli oluyordu. Şimdi bu durumu biraz daha ucu açık olacak şekilde yapalım. Yani vize ile final yüzdelerini kullanıcının gireceği şekilde yapalım. ncelikle arayüz giydirmesi için HTML iskeletini yapalım. HTML Betikleri <div class="kapsul"> <div class="satir"> <div class="sutun"> <div class="input-kapsul"> <label class="baslik">Vize Notu</label> <input type="text" class="input vize-notu" placeholder="Lütfen vize notunu giriniz" /> </div> </div> <div class="sutun"> <div class="input-kapsul"> <label class="baslik">Vize Yüzdesi</label> <input type="text" class="input vize-yuzde" placeholder="Lütfen vize yüzdesi giriniz" /> </div> </div> </div> <div class="satir"> <div class="sutun"> <div class="input-kapsul"> <label class="baslik">Final Notu</label> <input type="text" class="input final-notu" placeholder="Lütfen final notunu giriniz" /> </div> </div> <div class="sutun"> <div class="input-kapsul"> <label class="baslik">Final Yüzdesi</label> <input type="text" class="input final-yuzde" placeholder="Lütfen final yüzdesi giriniz" /> </div> </div> </div> <div class="sonuc"> </div> <div class="satir"> <div class="buton-kapsul"> <button class="buton hesapla">Hesapla</button> </div> </div> </div> HTML iskeleti üzerine giydirme yapmak için CSS kısmını hazırlayalım. CSS Betikleri body . kapsul . ortalayici . ortalayici h1 . ortalayici a . satir . satir. sutun . input-kapsul . input-kapsul. input . input-kapsul. baslik . buton-kapsul . buton-kapsul. buton . buton-kapsul. buton:hover . sonuc . sonuc:before . sonuc. basarisiz . sonuc. basarisiz:before . sonuc. basarili . sonuc. basarili:before Oluşan ArayüzOluşan Arayüz İskelet ve giydirme bitti. Şimdi buna aksiyon ekleme zamanı. Kısaca aksiyon şu şekilde ilerleyecek: - Vize notunu girecek - Vize yüzdesini girecek - Final notunu girecek - Final yüzdesini girecek - Uygun koşullar sağlandığının kontrolü yapılacak (Girdiği herhangi bir notun 0'dan küçük ve 100'den büyük olmamasını sağlamak vb.. gibi) JavaScript Betikleri var divSonuc = document. querySelector ; var btnHesapla = document. querySelector ; btnHesapla. addEventListener("click", function { let flVizeNotu = 0; let strVizeNotu = document. querySelector . value; let flVizeYuzde = 0; let strVizeYuzde = document. querySelector . value; let flFinalNotu = 0; let strFinalNotu = document. querySelector . value; let flFinalYuzde = 0; let strFinalYuzde = document. querySelector . value; let strUyari = ""; if (strVizeNotu '' || isNaN strUyari += "- Lütfen vize notu giriniz.<br />"; else flVizeNotu = parseFloat ; if (strVizeYuzde '' || isNaN strUyari += "- Lütfen vize yüzdesi giriniz.<br />"; else flVizeYuzde = parseFloat ; if (strFinalNotu '' || isNaN strUyari += "- Lütfen final notu giriniz.<br />"; else flFinalNotu = parseFloat ; if (strFinalYuzde '' || isNaN strUyari += "- Lütfen final yüzdesi giriniz.<br />"; else flFinalYuzde = parseFloat ; if (flVizeNotu < 0 || flVizeNotu > 100) strUyari += "- Vize notu 0-100 arasında olmalıdır.<br />"; if (flVizeYuzde < 0 || flVizeYuzde > 100) strUyari += "- Vize yüzdesi 0-100 arasında olmalıdır.<br />"; if (flFinalNotu < 0 || flFinalNotu > 100) strUyari += "- Final notu 0-100 arasında olmalıdır.<br />"; if (flFinalYuzde < 0 || flFinalYuzde > 100) strUyari += "- Final yüzdesi 0-100 arasında olmalıdır.<br />"; if != 100) strUyari += "- Vize ve Final yüzdeleri toplamı 100 olmalıdır.<br />"; divSonuc. classList. remove ; divSonuc. classList. remove ; if else }); Ortalamayı geçmeniz dileğiyle :) Kaynak: https://www.ontedi.com/javascript/javascript-ile-vize-final-not-ortalamasi-hesaplama ontedi tarafından 19/Nis/20 20:17 tarihinde düzenlenmiştir Matematikçi ve Yazılımcı. http://www.ontedi.com ve http://www.cizgi.site Siteme beklerim herkesi.