JavaScript - Petlje


Vrste petlji u JavaScript-u

Petlje se koriste za izvršavanje istog bloka koda iznova i iznova, sve dok je ispunjen određeni uslov. Osnovna ideja koja se nalazi iza petlje je automatizovati zadatke koji se ponavljaju unutar programa kako bi se uštedjelo vrijeme i trud. JavaScript sada podržava pet različitih tipova petlje:

  • while - petlja koja izvršava koda sve dok navedeni uslov ne bude tačan (true).
  • do...while - jednom preskače blok koda, tada se stanje procjenjuje. Ako je uslov tačan (true), izjava se ponavlja sve dok je navedeni uslov tačan (true).
  • for - prolazi kroz blok koda, dok brojač ne postigne zadani broj.
  • for...in - petlje koja prolazi kroz svojstva objekta.
  • for...of - petlje koja se koristi nad objektima poput nizova, stringova itd.

U nastavku ćemo detaljno razmotriti svaku od ovih petlji.



While petlja

Ovo je najjednostavnija izjava for petlje koju pruža JavaScript. While petlja prolazi kroz blok koda sve dok se navedeni uslov procijeni kao tačan (true). Čim stanje ne uspije, petlja se zaustavlja. Sintaksa while petlje je:

while(condition) {
    // Kod koji se treba izvršiti
}

Sljedeći primjer defiše petlju koja će se nastaviti izvoditi sve dok je varijabla manja ili jednaka 5. Svakom promjenom povećava se za 1 svaki put kad se petlja pokrene:

var i = 1;
while(i <= 5) {    
    document.write("<p>Broj je " + i + "</p>");
    i++;
}
Pogledajmo kako koristiti primjer u praksi:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>JavaScript While petlja</title>
</head>
<body>
    <script>
    var i = 1;
    while(i <= 5) {    
        document.write("<p>Broj je: " + i + "</p>");
        i++;
    }
    </script>
</body>
</html>


do...while petlja

Petlja do...while je varijanta petlje while, koja procjenjuje stanje na kraju svake iteracije petlje. S petljom do...while blok koda izvršava se jednom, a zatim se uslov procjenjuje, ako je uslov istinit (true), izjava se ponavlja sve dok je navedeni uslov koji je procijenjen tačan (true). Sintaksa do...while petlje je:

do {
    // Kod koji se treba izvršiti
}
while(condition);

JavaScript kod u sljedećem primjeru defiše petlju koja počinje s i=1, zatim će ispisati izlaz i povećati vrijednost varijable i za 1. Nakon toga se uslov procjenjuje, a petlja će se nastaviti izvoditi sve dok je varijabla i manja ili jednaka 5.

var i = 1;
do {
    document.write("<p>Broj je " + i + "</p>");
    i++;
}
while(i <= 5);
Pogledajmo kako koristiti primjer u praksi:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>JavaScript Do-While petlja</title>
</head>
<body>
    <script>
    var i = 1;
    do {
        document.write("<p>Broj je " + i + "</p>");
        i++;
    }
    while(i <= 5);
    </script>
</body>
</html>


Razlika između while i do...while petlja

While petlja se razlikuje od do...while petlje na jedan važan način. S while petljom, uslova se procjenjuje i testira na početku svake iteracije petlje, tako da ako se uslovi izraza procijeni na lažno (false), petlja se nikada neće izvršiti. S druge strane, petlja do...while će se uvijek jednom izvršiti, čak i ako se uslovi izraz procjeni na lažnu (false), jer se za razliku od petlje while, uslov ne procjenjuje na kraju iteracije petlje, već na početku.



For petlja

Petlja for ponavlja blok koda sve dok je ispunjen određeni uslov. Obično se koristi za izvršavanje bloka koda određeni broja puta. Sintaksa for petlje je:

for(initialization; condition; increment) {
    // Kod koji treba da se izvrši
}

Parametri izjave for petlje imaju sljedeće značenje:

  • inicijalizacija (eng. initialization) - koristi se za inicijalizaciju brojača i procjenjuje se jednom bezuslovno prije prvog izvršenja tijela petlje.
  • stanje (eng.condition) - ocjenjuje se na početku svake iteracije. Ako se ocijeni istinitim (true), izvršavaju se izjave u petlji. Ako ocijeni kao lažno (false), izvršavanje petlje se završava.
  • povećavanje (eng. increment) - ažurira brojač petlje s novom vrijednošću svaki put kad se petlja pokrene.

Sljedeći primjer definiše petlju koja počinje s i=1. Petlja se nastaviti sve dok vrijednost varijable i ne bude manja ili jednaka 5. Mjenja se i povećava za 1 svaki put kada se petlja pokrene:

for(var i=1; i<=5; i++) {
    document.write("<p>Broj je " + i + "</p>");
}
Pogledajmo kako koristiti primjer u praksi:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>JavaScript For petlja</title>
</head>
<body>
    <script>
    for(var i=1; i<=5; i++) {
        document.write("<p>Broj je " + i + "</p>");
    }
    </script>
</body>
</html>

Petlja for je posebno korisna za iteriranje preko niza. Sljedeći će vam primjer pokazati kako ispisati svaku stavku ili element JavaScript niza.

// Niz sa nekim elementima
var fruits = ["Jabuka", "Banana", "Mango", "Narandža", "Šljiva"];
 
// Loop through all the elements in the array 
for(var i=0; i<fruits.length; i++) {
    document.write("<p>" + fruits[i] + "</p>");
}
Pogledajmo kako koristiti primjer u praksi:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>JavaScript Ispisivanje stavki niza</title>
</head>
<body>
    <script>
    // Niz sa nekim elementima
    var fruits = ["Jabuka", "Banana", "Mango", "Narandža", "Papaja"];
     
    // Prelistavanje svih elemente niza
    for(var i=0; i<fruits.length; i++) {
        document.write("<p>" + fruits[i] + "</p>");
    }
    </script>
</body>
</html>


For...in petlja

Petlja for...in je posebna vrsta petlje koja iteratira nad svojstvima objekta ili elementima niza. Sintaksa for...in petlje je:

for(variable in object) {
    // Kod koji se treba izvršiti
}

Brojač petlje, tj. varijabla u ulaznoj petlji je niz, a ne broj. Sadrži ime trenutnog svojstva ili indeks trenutnog elementa niza. Sljedeći primjer će vam pokazati kako prolaziti kroz sva svojstva JavaScript objekta.

// Objekat s nekim svojstvima
var person = {"name": "Miloš", "surname": "Mihaljica", "age": "29"};
 
// Pregledavanje svih svojstava u objektu  
for(var prop in person) {  
    document.write("<p>" + prop + " = " + person[prop] + "</p>"); 
}
Pogledajmo kako koristiti primjer u praksi:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>JavaScript Iteriranje preko niza pomoću petlje</title>
</head>
<body>
    <script>
    // Objekt sa nekim svojstvima
    var person = {"name": "Miloš", "surname": "Mihaljica", "age": "29"};
     
    // Prelistavanje svih svojstva objekta
    for(var prop in person) {  
        document.write("<p>" + prop + " = " + person[prop] + "</p>"); 
    }
    </script>
</body>
</html>

Slično tome, možete prolaziti kroz elemente niza, kao što je prikazano u sljedećem primjeru:

// Niz s nekim elementima
var fruits = ["Jabuka", "Banana", "Mango", "Narandža", "Lubenica"];
 
// Pregledaj sve elemente u nizu
for(var i in fruits) {  
    document.write("<p>" + fruits[i] + "</p>");
}



for...of petlja ES6

ES6 uvodi novu for...of petlju koja nam omogućava vrlo lako ponavljanje nizova ili drugih iterabilnih objekata (npr. stringova). Takođe kod unutar petlje se izvršava za svaki element objekta koji se može ponoviti. Sljedeći primjer će vam pokazati kako prolaziti kroz nizove i stringove pomoću ove petlje.

// Iteracija preko niza
let letters = ["a", "b", "c", "d", "e", "f"];

for(let letter of letters) {
    console.log(letter); // a,b,c,d,e,f
}

// Iteracija preko stringa
let greet = "Hello World!";

for(let character of greet) {
    console.log(character); // H,e,l,l,o, ,W,o,r,l,d,!
}
Pogledajmo kako koristiti primjer u praksi:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>JavaScript ES6 for...of petlja</title>
</head>
<body>
    <script>
    // Iteriracija preko niza
    let letters = ["a", "b", "c", "d", "e", "f"];
    
    for(let letter of letters) {
        document.write(letter + "<br>"); // a,b,c,d,e,f
    }
    document.write("<hr>");
    
    // Iteracija preko stringa
    let greet = "Hello World!";
    
    for(let character of greet) {
        document.write(character + "<br>"); // H,e,l,l,o, ,W,o,r,l,d,!
    }
    </script>
</body>
</html>