INTERAKTIVNO

PROGRAMIRANJE NA WEBU
PETLJE I OBJEKTI

Ognjen Staničić, dipl. ing.

ognjen.stanicic@tvz.hr
Sadržaj predavanja

 Grananje koda

 Programske petlje

 Objekti
Uvjetno grananje

U JavaScriptu uvjetno grananje postižemo na

sljedeće načine:

 If
 If…else
 If…else…if
 Switch

Sintaksa je vrlo slična programskom jeziku C.

If - else

Primjer (if…else…if):

var a=prompt("Unesite broj","");

if (a<0) {
alert (‘Broj je manji od 0’);
} else if (a>100) {
alert(‘Broj je veći od 100’);
} else {
alert(‘Broj je između 0 i 100’);
}
Switch

Switch (sintaksa)

switch (izraz)
{
case vrijednost_1:
//neki kod;
break;

………

case vrijednost_n:
//neki kod
break;
default:
//kod koji će se izvršiti ako nije ispunjen
nijedan uvjet
}
Switch

Primjer (switch):

var a=prompt("Unesite ocjenu");

switch (a)
{
case 1:
x="Nedovoljan";
break;

………

case 5:
x="Izvrstan";
break;
default:
x="Unijeli ste nepostojeću ocjenu";
}
Petlje

 Petlje služe za ponavljanje određenog bloka koda

određeni broj puta

 U JavaScriptu, slično kao i u C-u, postoje petlje:

 for petlja

 while petlja

 do-while petlja
For petlja

For petlja:

for (inicijalizacija; uvjet; korak) {

//neki kod
}

Blokkoda u prvom parametru for petlje se izvrši prije

nego što petlja krene s izvođenjem – korisno za
navođenje i inicijalizaciju kontrolnih varijabli

Uvjetza nastavljanje petlje – petlja će se izvoditi

dok god je taj uvjet ispunjen

Blok koda koji se izvrši nakon svake iteracije petlje

For petlja

Primjer

<script type="text/javascript">

let i=prompt ("Unesite broj!","");

for (let j=0;j<i;j++){

console.log(j+1);
}

</script>
While petlja

While petlja:

while (logički_izraz) {
// neki kod
}

Blok koda unutar vitičastih zagrada se izvršava dok god je

uvjet ispunjen

Ukolikouvjet na ulasku u petlju nije istinit petlja se neće niti

jednom izvršiti
While petlja

Primjer

<script type="text/javascript">

let i=10;

while (i>0) {
alert(i);
i--;
}

</script>
Do – while petlja

Do - while petlja:

do {
//neki kod
} while (logički_izraz);

Blok koda unutar vitičastih zagrada se izvršava dok god je uvjet

ispunjen

Uvjet se provjerava nakon svake iteracije

Petlja se izvrši minimalno jednom

Do – while petlja

Primjer

<script type="text/javascript">

do {

let i = prompt ("Unesite broj!","");

} while (i<0);

</script>
Objekti

Složeni tip podataka

Opisuje neki entitet

Objekti imaju svojstva (definiraju objekt) i metode

(definiraju njegovo ponašanje)
Objekti

Od objekta do njegovog svojstva dolazimo

pomoću sintakse točke (.) - objekt.svojstvo

Svojstvo objekta može biti bilo koji tip podataka,

pa i novi objekt

 Ako je svojstvo objekta po tipu funkcija, onda se

ono naziva metoda
Objekti

Sintaksa:

var objekt = {}
objekt.svojstvo1 = 10;
objekt.svojstvo2 = "Drugo svojstvo“;
objekt.svojstvo3 = true;
objekt.metoda = function(){ alert("Bok!");}

console.log(objekt.svojstvo1);
objekt.metoda();
Objekti

Primjer:

var stol = {};

stol.materijal = "Drvo";
stol.duzina = 200;
stol.sirina = 150;
stol.povrsina = function() {
return this.duzina * this.sirina;
}

console.log( stol.povrsina() );
Objekti – prototipovi

 Konstruktorska funkcija – služi za stvaranje više objekata istog

prototipa (imitacija OOP klasa)

function Stol(m, d, s){

this.materijal = m;
this.duzina = d;
this.sirina = s;
this.povrsina = function() {
return this.duzina * this.sirina;
}
};

var mojStol = new Stol("Plastika",100,200);

console.log( mojStol.povrsina() );
Objekti – ES6 klase

 U ES6 je uvedena klasična OOP sintaksa u JavaScript (class,

extends, super, constructor, public, private, static...)

class Stol {
constructor (m, d, s){
this.materijal = m;
this.duzina = d;
this.sirina = s;
}

povrsina(){
return this.duzina * this.sirina;
};
}
var mojStol = new Stol("Plastika",100,200);
console.log( mojStol.povrsina() );
Objekti - incijalizacija

var stol = {
materijal : "Drvo",
duzina : 200,
sirina : 150
};

var soba = {};

soba.stol = stol;
soba.kauc = { duzina : 300 , … };
Objekti

 drugi način pristupanja svojstvima objekta je

pomoću sintakse uglatih zagrada

 objekt.svojstvo
 objekt[svojstvo]

 na taj način je moguće pristupiti svojstvu pomoću

neke varijable koja pohranjuje ime svojstva
Objekti

var osoba = {}
osoba.ime = "Marko";
osoba.prezime = "Marković";
var a = "ime";
console.log( osoba[a] );

// ispis je Marko (odnosno osoba['ime'] što je

osoba.ime)

var a = "prezime";
console.log( osoba[a] );

// ispis je Marković (odnosno osoba.prezime)

Objekti - petlje

Navedeno možemo iskoristiti za petlju koja prolazi

kroz sva svojstva objekta:

for (var svojstvo in objekt){

console.log (svojstvo);
console.log (objekt[svojstvo]);
}
Neki korisni objekti

 U JavaScriptu postoje korisni predefinirani objekti

 Jedan od njih je Math objekt
 Metode Math objekta:
 ceil, floor, round
 sin, cos, tan
 min, max
 random
 sqrt, pow, abs
Math objekt ima također definirane konstante
 PI, E