JavaScript Tutor
Lekcija 1
Lekcija 2
Lekcija 3
Lekcija 4
Lekcija 5
   Lekcija 6
Lekcija 7
iDragstor Lab
  
Lekcija 6 - Petlje (LOOPS)

Sta su to petlje?
Petlje ili LOOPS su delovi programa koji se ponavljaju dok se ne ispuni odredjeni uslov, nakon cega program ide na sledecu liniju KOD-a i ostavlja petlju iza sebe. Petlje se cesto koriste u programiranju i imaju jako siroku primenu jer olaksavaju procesiranje podataka. Jedna od poplarnih primena petlji je u izradi animacija. Svaka animacija se sastoji iz niza slicica koje treba da se prikazu jedna posle druge, u sekvenci, tako da izazovu kretnju objekta po ekranu. Ako se animacija sastoji iz 30 slicica njihovo menjanje moze biti isprogramirano pomocu petlje koja ce poceti prikazivanje od prve slicice a zavrsiti prikazivanje kada dodje do poslednje slicice (tridesete).
JavaScript ima dve vrste petlji a to su While i For Petlja. Pogledacemo jednu po jednu.
While Loop (Petlja)
While petlja se kristi kada zelimo da ponavljamo odredjenu akciju ili akcije dokle god je ispunjen neki uslov. Pogledajte sintaksu:
while (condition) {
izvrsavanje akcija
}
Na primer, ako zelite da isprintate Zdravo deset puta koristicete sledecu While petlju:
x=1
While (x<=10) {
Document.write("Zdravo <br>")
x++
}
U gornjem primeru koristili smo x++ da bi uvecali petlju ili vrednost x za 1. Vrednost x je 1 pre petlje tako da se vrednost uvecava do broja deset i tada se petlja prekida jer je ispunjen uslov (x<=10).
U sledecem primeru koristicete se While petljom da biste pitali korisnika da pogodi vas omiljeni sport.
<HTML>
<HEAD>
</HEAD>
<BODY>
<script language = "JavaScript">

var sport = "Kosarka"
var pogodi = ""

while (pogodi.toLowerCase()!=sport.toLowerCase()) {
var pogodi = prompt("Pogodite moj omiljeni sport?","")
}
document.write(sport + " je moj omiljeni sport. Bravo !!")
</script>
</BODY>
</HTML>
Kao sto ste videli iz ovog primera dokle god je odgovor bio nesto drugo a ne kosarka uslov za petlju (pogodi.toLowerCase()!=sport.toLowerCase()) je bio ispunjen i dobijali ste prompt kutiju da ponovo pogadjate. Kada jednom unesete vrednost kosarka u kutiju petlja se zavrsava i dobijate poruku
document.write(sport + " je moj omiljeni sport. Bravo !!") i tu je kraj petlje.
For Loop (Petlja)
For petlja je slicna While petlji ali ona funkcionise tako sto je unapred odredjen broj repeticija. U For petlji koristimo variablu koja ima neku pocetnu vrednost a ta vrednost se u petlji uvecava za svaku repeticiju dok se dodje do finalnog broja repeticija. Sintaksa izgleda ovako:
for (variabla; uslov; uvecavanje variable) {
Izvrsavanje akcija
}
Pogledajte sledeci primer:
for (x=1;x<10;x++){
document.write ("Zdravo <br>")
}
U ovom primeru petlja pocinje od broja 1 (x=1) i nastavlja se dok x ne dosegne vrednost 10 (x<10) a posle svake repeticije vrednost x se uveca za jedan (x++). Dakle, rezultat petlje je prikazivanje "Zdravo" deset puta na ekranu.
U sledecem primeru pitacete korisnika da vam da svoje ime i koliko puta zeli da ga prikaze na ekranu.
<HTML>
<HEAD>
</HEAD>
<BODY>
<script language = "JavaScript">
var ime = prompt("Kako se zovete?","")
var broj = parseInt(prompt("Koliko puta zelite da prikazete svoje ime na ekranu?",""))

for (i=1; i<=broj; i++) {
document.write(i + ". " + ime + "<br>")
}
document.write("<br><br>Ovaj test je van petlje")
</script>
</BODY>
</HTML>
Break i Continue komande
Ponekad ce vam se pojaviti potreba da izadjete iz petlje kada se uspostavi neki uslov ili ce vam biti potrebno da nastavite petlju ako se ispunio neki drugi uslov. Za ovo se koriste break i continue komande.
Break komanda
Break komanda se koristi za proveru nekog uslova unitar petlje i za izlazak iz petlje ako je taj uslov ispunjen.Pogledajte sintaksu:
while(uslov) {
izvrsenje akcija
if (drugi uslov je ispunjen) break
izvrsenje akcija
}
Recomo da zelite da napravite petlju koja ce da broji po 3 do 100 pocev od broja 7 i zelimo da prekinemo petlju kod broja 79:
for (i=7; i<=100; i=i+3) {
document.write (i+ "<br>")
if (i==79) break
}
U sledecem primeru koristicemo break komandu da ogranicimo korisniku broj pokusaja pogadjanja naseg imena na 3 puta. Ako korisnik pogodi vase ime koristicete break komandu da izadjete iz petlje. Ako korisnik ne pogodi uslov nije ispunjen i petlja se nastavlja do 3. pokusaja.
<HTML>
<HEAD>
</HEAD>
<BODY>
<script language = "JavaScript">
var ime = "Bojan"
var pogodi = ""

for (i=1; i<=3; i++) {
var pogodi = prompt("Pokusajte da pogodite moje ime. Ovo vam je " + i + ".pokusaj","")

if (pogodi == ime) {
document.write("Bravo!! Pogodili ste. Moje ime je " + ime)
break }
}
if (pogodi!=ime) {
document.write("Kraj!! Izvinite ali niste pogodili.")
}
</script>
</BODY>
</HTML>
Continue komanda
Ponekad ce vam se pojaviti potreba da proverite neki uslov unutar petlje i da ukoliko je taj uslov ispunjen preskocite ostatak linija u petlji i vratite se na pocetak. Ovo mozete izvesti pomocu continue komande. Continue je slicna break komandi jer i jedna i druga prekidaju tok petlje. Razlika je u tome sto ce break prekinuti petlju a continue preskociti petlju samo za ponavljanje u kojem je ispunjen uslov i vratiti se na pocetak KOD-a u petlji. Primer kako se koristi continue komanda je ako zelimo da brojimo do 100, po 3, pocev od broja 7 a da preskocimo broj 79:
for (i=7; i<=100; i=i+3) {
if (i==79) continue
document.write(i + "<br>")
}
U sledecem primeru cete koristiti continue komandu da nadjete sve brojeve do 100 koji su deljivi sa nekim brojem koji je izabrao korisnik. Program pita korisnika da unese broj, onda koristi petlju da izbroji do 100. Svaki put u petlji program proverava ako je taj broj deljiv sa brojem koji je izabrao korisnik. Ako jeste daje poruku o tome a ako nije vraca se nazad na pocetak petlje i izbegava ostatak KOD-a u petlji. Pogledajte:
<HTML>
<HEAD>
</HEAD>
<BODY>
<script language = "JavaScript">
var broj = parseInt(prompt("Unesite broj s kojim cete deliti: ", ""))
for (x=1; x<=100; x++) {
if (x % broj ==0) {
document.write(x + " je deljivo sa " + broj + "<br>")
}
else continue
document.write("Ostatak deljenja = 0 " + "<br>")
}
</script>
</BODY>
</HTML>
Kraj seste lekcije ..
Cestitamo vam. Stigli ste do kraja seste lekcije i sada vam jos preostaje jos jedna lekcija da zavrsite ceo tutor. U sedmoj-poslednjoj lekciji cemo videti kako se koriste funkcije u JavaScript-i za organizaciju koda i pametnije programiranje. Za sad ste dobro izdrzali, jos malo i mozete da tvrdite kako ste naucili osnove iz JavaScript programiranja.

Predhodna Lekcija Pocetak Sledeca Lekcija