Kodulehe loomine, 22. kord

15.03.2022
 |  Kommentaare pole

JavaScript if-else laused

Eelmise korra koodile lisame sisu poolele ühe uue rea:

<div id="veateade" style="display: none; color: red;"></div>

Selle tulemusena saab kood järgmine:

<div id="sisu">Palun sisesta oma nimi:</div>
<div id="veateade" style="display: none; color: red;"></div>
<input class="input" type="text" id="nimi"></input><br>
<button id="nupp" class="btn btn-primary" type="button" onclick="muuda()">Edasta andmed</button>

Ehk siis, lisasime uue bloki, mille identifikaator on veateade, mis on esialgu peidetud (display: none;) ja mille tektsivärv on punane (color: red;=

Nüüd täiendame esialgset JavaScript’i koodi järgmise if-else lausetega (nt selliselt, et kontrollitakse sisestatud andmete pikkust):

function muuda() 
{
  var nimi=document.getElementById("nimi").value;
  if (nimi.length==0) 
  {
    document.getElementById("veateade").style.display="block";
    document.getElementById("veateade").innerHTML ="Palun sisesta nimi!";
  
  }
  else if (nimi.length<5)
  {
  
    document.getElementById("veateade").style.display="block";
    document.getElementById("veateade").innerHTML ="Nimi peab olema vähemalt 5 märki pikk!";
  
  }
  else
  {
  
    document.getElementById("sisu").innerHTML = "Sinu nimi: "+nimi;
    document.getElementById("nimi").style.display="none";
    document.getElementById("veateade").style.display="none";
    document.getElementById("nupp").disabled=true; 

  }  
}

Eeltoodud kood koosneb kolmest tingimusest:

  1. if-tingimuse korral kontrollitakse, kas muutuja nimi pikkust, kasutades JavaScript’i sisseehitatud funktsiooni length, mis annab sisestatud andmete pikkuse märkides (esmalt siis kontrollitakse, kas üldse on:
    • muudetakse blokk veateade nähtavaks
    • muudetakse bloki veateade sisu: “Palun sisesta nimi!”
  2. kui 1. tingimus ei ole täidetud (st muutuja nimi pikkus on suurem kui 0), siis liigutakse edasi else if-tingimuse juurde, kontrollitakse, kas muutuja nimi pikkus on väiksem kui 5:
    • muudetakse blokk veateade nähtavaks
    • muudetakse bloki veateade sisu: “Nimi peab olema vähemalt 5 märki pikk!”
  3. kui 1. ja 2. tingimus ei ole täidetud (st muutuja nimi pikkus on 5 või rohkem märki), siis liigutakse edasi else-tingimuse juurde:
    • peidetakse blokk veateade

JavaScript for-tsükkel

For-tsükkel võimaldab teha korduvaid tegevusi.

Näiteks saame else if-tingimusele lisada järgmise osa koodist:

 tekst="";
 tahed=nimi.split("");
  for (i=0;i<nimi.length;i++)
  {
    tekst=tekst+"\r\n"+tahed[i];
   }
  alert(tekst);

Koodi selgitus on siis järgmine:

  1. lisame muutuja tekst, mille algväärtuseks on tühi tekst ehk string, jutumärgid, mille vahel ei ole ühtegi märki (“”)
  2. tekitame massiivi (massiiv on andmete jagada), jagades olemasoleva muutuja nimi üksikutest tähtedeks, kasutades JavaScript’i sisseehitud funktsiooni split ja omistades saadud tulemuse muutujale tahed
  3. seejärel tekitame for-tsükli, kus:
    1. kasutatakse loendurit i,
    2. alustades nullist =>  i=0;
    3. kuni muutuja nimi tähtede arvust ühe võrra väiksema arvuni (kuna masiivi liikmeid hakatakse loendama 0ist, siis toimub ka kordus pikkus-1ni) => i<nimi.length;
    4. suurendades iga kord i väärtust ühe võrra – i++
    5. lisatakse:
      1. muutujale tekst => tekst=tekst
      2. uus rida => +”\r\n”
      3. massiivis vastal kohal olev täht => +tahed[i];
  4. kuvatakse saadud tekst ekraaniteatena => alert(tekst);