Javascript Alıştırmalar #0 | onBlur - Karmaşık if/Else if/Else yapısı

Only RevenGe · 17 Ocak 2019

#MadNurse

Başlamadan Önce;

Tamamen insanlara yardımcı olabilecek alıştırmalar ortaya çıkarmak, kendimi geliştirmek ve hatalarımı bizzat sizler tarafından görmek, gereksiz yazdığım şeyleri anlamak ve hatalarımı düzenleyip daha iyi yazabilmek adına burada paylaşıyorum. Lütfen hatamı gördüğünüz an yorumlarınızı aşağıya atıverin.

Buraya Javascript öğrenmek isteyenler için alıştırmalar yazacağım. Ardından da çözümlerini yazacağım arkadaşlar. Siz bu tür kodların daha kısasını yazabiliyorsanız eğer, sizin de kodlarınızı görmeyi isterim. Şuanda sahip olduğum bilgi kadarıyla bu kodlarımı yazdığımı göz önünde bulundurarak eleştirilerinizi yaparsanız sevinirim.

Konu başlıklarını genelde alıştırmada neleri kullanacağımızı yazacağım.

İlk ödevimizle başlayalım.

Amacımız şu:

Sitede 2 adet input var.
onBlur eventi gerçekleştiğinde, eğer içindekiler boş ise bize "Boş Bırakılamaz" hatası verilecek ve border coloru red olacak.
Fakat dikkat etmemiz gereken bir nokta var.

Atıyorum,

x inputunda onBlur eventi gerçekleştirdik. x inputu boş. Yani "Boş Bırakılamaz" hatası verildi. Ardından y inputuna geçtik. y inputunu da boş bıraktık. X inputuna geri döndük ve onu doldurduk. onBlur eventini gerçekleştirdik. TAM DA BURADA, y inputu boş ise, onun border coloru red olmaya devam edecek onunla birlikte de "Boş Bırakılamaz" hatası verilmeye devam edilecek.

ÇÖZÜM

Javascript Kısmı

HTML Kısmı

Javascript Kodları (Kopyalabilmeniz ve sansürlü yerleri anlayabilmeniz için SS'le destekledim) :

Kod:

//inputlara tıklandığında
//to-learn:Entera tıkladığında boş olan kutulara bu işlemler uygulanacak.
var fcs,para1,fcs1durum,fcs2durum;
para = ********.getElementById("_para1"); //paragraph = para
fcs = ********.getElementById("_girisId");
fcsZZ2 = ********.getElementById("_girisPass");
fcs1durum = false; //ikisinin de durumu false olmalı ki fonksiyonların çalışmadığını anlayabilelim başlangıçta.
fcs2durum = false;

function fcs1(){
    if(fcs.value==""){
        fcs2durum = true;
        fcs.style.borderColor = "red";
        para.innerHTML = "Boş Bırakamazsın."
    }
    else if(fcs.value!=""){
        fcs2durum = false;
        fcs.style.borderColor = "";
        if(fcs1durum==true){
            para.innerHTML = "Boş Bırakamazsın.";
        }
        else if(fcs1durum == false){
            para.innerHTML = "";
        }
    }
}

function fcs2(){
    if(fcsZZ2.value==""){
        fcs1durum = true;
        fcsZZ2.style.borderColor ="red";
        para.innerHTML="Boş Bırakamazsın."
    }
    else if(fcsZZ2.value!=""){
        fcs1durum = false;
        fcsZZ2.style.borderColor ="";
        if(fcs2durum == true){
            para.innerHTML = "Boş Bırakamazsın."
        }
        else if(fcs2durum == false){
            para.innerHTML="";
        }
    }
}

Javascript Alıştırmalar #0 | onBlur - Karmaşık if/Else if/Else yapısı

Only RevenGe

Katılımcı Üye

Sosyal medya sayfalarımız