Načrtovanje in razvoj spletnih aplikacij

Zanke v JavaScriptu

Posebni stavek, imenovan zanka omogoča, da ga ponovimo večkrat. Program bo dani stavek ponavljal, dokler je izpolnjen nek pogoj. Ko pogoj ne bo več izpolnjen, se bo program nadaljeval z naslednjim stavkom, ki sledi zanki. Poznamo več vrst zank:

JavaScript pozna še stanja, ki se uporabljajo v zankah while, do...while in for, kjer omogočajo, da prekinemo izvajanje zanke, ali prekinemo tekoče ponovitve zanke in sprožimo naslednjo ponovitev. Ta stanja so:

while

Zanka while je najpreprostejša oblike zanke. Zapišemo jo takole:

while (pogoj) {
   stavek1;
   stavek2;
   ...
   stavekN;
}

JavaScript najprej preveri pogoj, ki je zapisan v oklepajih. Če je pogoj izpolnjen, izvede stavek ali stavke, ki sledijo, zatem spet preveri pogoj, in če je ta še vedno izpolnjen, izvede stavke še enkrat in ponovno preveri pogoj.

Ko pogoj ni več izpolnjen, nadaljuje s stavkom, ki sledi zanki. Če pogoj že pri prvem preverjanju ni izpolnjen, se stavki v zanki sploh ne izvršijo.

<p id="primer"></p>
<script>
   var stevec = 0;
   var vhod = "",
       zanka = "",
       izhod = "";
  
   vhod = "Začetek zanke" + "<br />";
  
   while (stevec < 10){    
      zanka += "Trenutni števec: " + stevec + "<br />";    
      stevec++;  
   }  
   
   izhod = "Zanka je ustavljena!";
   document.getElementById("primer").innerHTML = vhod + zanka + izhod;
</script>

do...while

Razlika med zanko do...while in prej opisano zanko while je v tem, da se pri zanki do...while pogoj preveri šele na koncu zanke. Telo zanke se zato izvrši vsaj enkrat. Zanko do...while zapišemo takole:

do {
   stavek1;
   stavek2;
   ...
   stavekN;
} while (pogoj)

<p id="primer"></p>
<script>
   var stevec = 0;
   var vhod = "",
       zanka = "",
       izhod = "";
  
   vhod = "Začetek zanke" + "<br />";
  
   do {    
      zanka += "Trenutni števec: " + stevec + "<br />";    
      stevec++;  
   } while (stevec < 0);   

   izhod = "Zanka je ustavljena!";
   document.getElementById("primer").innerHTML = vhod + zanka + izhod;
</script>

for

Zanka for je samo na drugačen način zapisana zanka while. Napišemo jo takole:

for (start; pogoj; korak) {
   stavek1;
   stavek2;
   ...
   stavekN;
}

Zanka se izvede na naslednji način. Najprej se izračuna izraz start (ta se vedno izračuna, in sicer samo enkrat na začetku zanke). Nato se ovrednoti izraz pogoj. Če je izpolnjen, se izvede stavek ali stavki, nato pa se izračuna še izraz korak. Spet se ovrednoti pogoj. Če je izpolnjen, se zgodba ponovi, sicer pa se zanka konča.

<p id="primer"></p>
<script>
   var stevec = 0;
   var vhod = "",
       zanka = "",
       izhod = "";
  
   vhod = "Začetek zanke" + "<br />";
  
   for (stevec = 0; stevec < 10; stevec++){    
      zanka += "Trenutni števec: " + stevec + "<br />";  
   }  

   izhod = "Zanka je ustavljena!";
   document.getElementById("primer").innerHTML = vhod + zanka + izhod;
</script>

for...in

Zanka for...in je zanka, ki gre skozi lastnosti objekta.

Ker do sedaj še nismo govorili o objektih, bo tudi uporaba te zanke zaenkrat otežkočena. Ko pa bomo spoznali objekte, pa se bo pokazala velika uporabnost te zanke.

Poglejmo si primer, kjer bomo kreirali objekt oseba, nato pa bomo s pomočjo zanke for...in izpisali lastnosti tega objekta:

<p id="primer"></p>
<script>
   var besedilo = "";
   var oseba = {ime:"Janez", priimek:"Novak", starost:18};
   var lastnosti;
   for (lastnosti in oseba) {
      besedilo += oseba[lastnosti] + " ";
   }
   document.getElementById("primer").innerHTML = besedilo;
</script>

break

Stavek break uporabljamo v telesih zank while, for in do..while. S tem stavkom prekinemo izvajanje zanke. Program se nadaljuje s stavkom, ki sledi zanki.

Če imamo zanko v zanki in stavek break v notranji zanki, bo ta prekinil zanko, v kateri se nahaja, torej notranjo zanko.

<p id="primer"></p>
<script>
   var x = 1;
   var vhod = "",
       zanka = "",
       izhod = "";
  
   vhod = "Začetek zanke" + "<br />";  

   while (x < 20) {    
      if (x == 5) {        
         break;   // takoj prekine izvajanje zanke 
      } x = x + 1;    
      zanka += x + "<br />";  
   }  

   izhod = "Zanka je ustavljena!";
   document.getElementById("primer").innerHTML = vhod + zanka + izhod;
</script>

continue

Stavek continue uporabljamo v telesih zank while, for in do...while. S tem stavkom prekinemo tekočo ponovitve zanke in sprožimo začetek naslednje ponovitve, seveda, če je pogoj za ponovitev zanke izpolnjen.

Stavek continue v telesu zanke while povzroči skok na začetek zanke. To pomeni, da se na novo ovrednoti pogoj, zanka pa se ponovi, če je pogoj izpolnjen. V zanki for stavek continue sproži najprej izračun tretjega izraza (korak), šele nato pa preveri pogoj za ponovitev zanke. Če je pogoj izpolnjen, se zanka ponovi. Stavek continue v telesu zanke do...while pa povzroči skok na konec zanke. Tam se na novo ovrednoti pogoj, zanka pa se ponovi, če je pogoj izpolnjen.

Če imamo zanko v zanki in stavek continue v notranji zanki, bo ta ponovil zanko, v kateri se nahaja, torej notranjo zanko.

<p id="primer"></p>
<script>
   var x = 1;
   var vhod = "",
       zanka = "",
       izhod = "";
  
   vhod = "Začetek zanke" + "<br />";  

   while (x < 10) {    
      x = x + 1;    
      if (x == 5) {        
         continue;  // nadaljuje z izvajanjem zanke    
      }    
      zanka += x + "<br />";  
   }
 
   izhod = "Zanka je ustavljena!";
   document.getElementById("primer").innerHTML = vhod + zanka + izhod;
</script>

Označevanje stavkov

V primeru gnezdenih zank lahko s stavkom break prekinemo tudi zunanjo zanko, a v tem primeru moramo to zanko posebej poimenovati z označevalnim stavkom.

ime: stavek

Stavek lahko poimenujemo s poljubnim imenom, ki ni rezervirana beseda.

zanka:     
   while (...) {
        ...        
        for (...) {
           ...           
           if (...) break zanka
           ...        
        }
        ...     
   }

Na enak način lahko označevalni stavek uporabimo v kombinaciji s stavkom continue.

 

Primer uporabe dveh oznak:

<p id="primer"></p>
<script>
   var vhod = "",
       zanka = "",
       izhod = "";
  
   vhod = "Začetek zanke" + "<br />"; 
   zunanjaZanka:   // To je ime oznake  
      for (var i = 0; i < 5; i++) {    
         zanka += "Zunanja zanka: " + i + "<br />";    
         notranjaZanka:    
            for (var j = 0; j < 5; j++) {       
               if (j >  3 ) break ;             // Izhod iz notranje zanke       
               if (i == 2) break notranjaZanka; // Izhod iz notranje zanke      
               if (i == 4) break zunanjaZanka;  // Izhod iz zunanje zanke        
               zanka += "Notranja zanka: " + j + "  <br />";     
            }  
      }  
   izhod = "Zanka je ustavljena!";
   document.getElementById("primer").innerHTML = vhod + zanka + izhod;
</script>

Primer uporabe ene oznake:

<p id="primer"></p>
<script>
   var vhod = "",
       zanka = "",
       izhod = "";
  
   vhod = "Začetek zanke" + "<br />"; 
   zunanjaZanka:   // To je ime oznake  
      for (var i = 0; i < 3; i++){
         zanka += "Zunanja zanka: " + i + "<br />";
      for (var j = 0; j < 5; j++){
         if (j == 3){
            continue zunanjaZanka;
         }
         zanka += "Notranja zanka: " + j + "<br />";
      }
   }
   izhod = "Zanka je ustavljena!";
   document.getElementById("primer").innerHTML = vhod + zanka + izhod;
</script>