Saznajte

Utisci korisnika

Zaista sam prijatno iznenađena vašom brigom za korisnike, i zahvaljujem vam se na maksimalnoj podršci. Što se tiče vaših usluga sve je jasno, ja se uvijek vraćam i nastaviću…

Pre nepunih mesec dana kupila sam paket kurseva: PRIPREME ZA POLAGANJE CAMBRIDGE INTERNATIONAL DIPLOMA IN BUSINESS. Obično neki opšti utisak formiramo na kraju, ali ja u ovom trenutku želim sa…


Kompletna lista utisaka

Online učionica

Ostale multimedijalne prezentacije>>>

Testiranje online

Arhitektura računara

Za one koji žele da znaju više.

Windows OS

Ovo bi svakako trebalo da probate.

Odnosi s javnošću

Koliko znate PR?

Pogledajte još neke od testova

Newsletter

Ukoliko želite da Vas redovno obaveštavamo o novostima sa Link eLearning sajta prijavite se na našu newsletter listu.

Ime:

Prezime:

Email:


Anketa

Arhiva anketa

BAZA ZNANJA

Kurs: - Core JavaScript Programming

Modul: Kontrola toka

Autor: Vladimir Marić

Naziv jedinice: Naredbe grananja

Materijali vezani uz ovu lekciju:

- Test naredbe grananja
- Naredbe grananja (PDF dokument)


Naredbe granjanja su prve naznake da jedan program stvarno i jeste program. Bez njih, program ne može da uradi mnogo, osim da izvrši neke proste naredbe i operacije i eventualno prikaže nešto na ekranu.

Da bismo u program uneli malo više nelinearnosti i kontrole, potrebno nam je da na neki način odlučimo koje ćemo njegove delove i kada izvršavati. Prvi i osnovni način da to postognemo je upotrebom naredbi grananja, odnosno, kondicionalnim izvršavanjem programa.


if else

Prva i osnovna naredba grananja je naredba if. Ova naredba poznata je u praktično svim jezicima i predstavlja baš ono kako se i zove: ako.

Kako reč „ako“, sama za sebe, nema baš mnogo logike u retorici, tako je nema ni u programiranju, već je potrebno da, osim nje, postavimo i neki uslov od koga će zavisiti ishod ove naredbe.

Ovaj uslov mora biti smešten u male zagrade, neposredno iza ključne reči if i njegov rezultat mora biti tipa boolean.
...tok programa...
if(true)
uslovna radnja
...nastavak toka programa...


U primeru će program, kada dođe do provere uslova, u zavisnosti od ispunjenosti (a u ovom slučaju, uslov je ispunjen, jer je vrednost izraza u uslovu true) strartovati liniju koda, koja sledi nakon uslova.

U slučaju da želimo uslovno da startujemo samo jednu liniju koda, ovo je dobro rešenje, ali ako bismo želeli da startujemo uslovno neku veću strukturu, morali bismo da celu tu strukturu smestimo u blok oivičen vitičastim zagradama, za šta bi primer izgledao ovako:
...tok programa...
if(true)
{
blok koji će biti izvršen
}
uslovna radnja
...nastavak toka programa...


U ovom primeru, blok može biti neograničeno veliki „komad“ koda, pri čemu bi trebalo da obratimo pažnju praktično samo na jednu stvar, a to je, da se taj „komad“ koda, možda nikada neće izvršiti. Zato je potrebno da kompletnu logiku programa napravimo tako da, ni u jednom trenutku, samo izvršenje ne zavisi od uslova, već da on samo utiče na tipove izvršenja. Na primer, ne bi trebalo da deklarišemo neku promenljivu u uslovnom bloku, a da  nam ta petlja bude potrebna kasnije, van uslovnog bloka. To u mnogim jezicima dovodi do greške. Skript jezici su imuni na prijavljivanje greške u ovim slučajevima, što ne znači da je dobra praksa kodirati na taj način.

Sam uslovni izraz može takođe biti neograničene veličine, sve dok se iz njega može izvući jedan jedini rezultat boolean tipa. Dakle ((a==5) && (b==10)) || ((x!=25) && (c===d)) će dati jedinstven rezultat tipa boolean i kao takav, čini validan izraz u uslovu.

Pogledajmo primer:
a=10;
if(a==10)
{
document.write("a je 10");
}

U primeru, program će očigledno ispisati : a je 10 na stranici sa skriptom.

Ali, šta ukoliko bismo želeli da uradimo nešto posebno i kada se uslov ne ispuni.

Naravno, mogli bismo postaviti sledeći uslov u kome ćemo proveriti da a nije jednako 10. To će funkcionisati, ali ne u svim slučajevima. Na primer, šta ako se u bloku prvog uslova promeni vrednost i ispuni i drugi uslov.

Na primer:
a=10;
if(a==10)
{
a=5;
}
if(a==5)
{
document.write("a je 5");   
}

U ovom slučaju, morali bismo da napravimo posebnu logiku koja će obezbeđivati drugi blok od startovanja ukoliko se vrednost u prvom bloku promeni i ispuni uslov za drugi – što bi bilo veoma nepraktično i komplikovano.

Umesto toga, postoji ugrađena logika koja to sama radi i prezentovana je ključnom rečju else odnosno else if.

Kada bi malopređašnji primer izmenili, tako da izgleda ovako:
a=10;
if(a==10) //proverava se prvi uslov i ukoliko je ispunjen ignorisu se svi ostali else uslovi
{
a=5;
}
else if(a==5)
{
document.write("a je 5");   
}

dobili bismo baš ono što želimo. Uslov koji čak neće biti ni proveren, ukoliko je prethodni uslov ispunjen.

Ono što je takođe bitno jeste da možemo proveravati „alternativne“ uslove naredbom else if neograničen broj puta. I naravno, pri tom, ne moramo voditi računa o tome da li su se neki od uslova preklopili, jer o tome vodi računa sam programski jezik (interpreter).

Na kraju, možemo postaviti i bezuslovni alternativni kod, koji će se izvršiti ukoliko se baš ni jedan uslov ne ispuni, tako što ćemo upotrebiti samo ključnu reč else, bez uslova.
a=5;
if(a==10)
{
document.write("a je 10");
}
else
{
document.write("a nije 10");   
}

Ovim smo zatvorili set uslova i ne možemo ići dalje sa uslovima (u okviru ovog seta), jer će neki od blokova sigurno biti startovan.


Switch case

Prethodni način uslovljavanja izvršavanja nekog bloka koda je dobar ali, ne naročito elegantan, kada dođe do veće količine else alternativa, pa se za slučajeve gde ima više alternativa, koristi nešto preglednija switch case struktura.

Evo kako bi izgledao prethodni primer, korišćenjem switch case strukture:
a=5;
switch(a) //zapocinje se sa strukturom i prilaze se vrednost koju cemo porediti
{
 case 10: // prvi slucaj poredjenja, ako je a = 10
    document.write("a je 10");
    break;
 default: //podrazumevani slucaj ako se ni jedan prethodni ne izvrši
    document.write("a nije 10");
    break;
}

U primeru razlikujemo nekoliko elemenata. Nakon inicijalizacije vrednosti (a=5), ubacujemo a kao parametar u switch strukturu. Ključnim rečima case inicijalizujemo uslov (vrednost sa kojom želimo da poredimo ulaznu vrednost (u ovom slučaju a)). Nakon dvotačke, počinje alternativni blok, koji traje sve dok ga ne prekinemo ključnom rečju break.

Za slučaj da želimo alternativu, koja će biti izvršena ukoliko ni jedan uslov ne bude ispunjen, koristimo ključnu reč default, nakon koje sledi takođe blok.

U ovakvu strukturu možemo staviti neograničen broj slučajeva (case) i prilagođenija je za brze provere sa velikim brojem slučajeva i kratkim blokovima koda. Kada se radi sa većim blokovima, switch case gubi na preglednosti i obično se koriste druga rešenja (if else).


Ternarni operator

Još jedan način za kontrolu toka, zapravo, više kontrolu vrednosti promenljivih je i ternarni operator.

Pogledajmo sledeći kod:
a=10;
if(a==10)
    b=a;
else
    b=150;
document.write(b);

Očigledno je šta ovaj kod radi - dodeljuje vrednost 10 promenljivoj a, zatim proverava da li je a 10. Ako jeste, dodeljuje promenljivoj b vrednost promenljive a, a ako nije, dodeljuje promenljivoj b vrednost 150. Na kraju, emituje vrednost promenljive b na stranu.

Ovaj primer je validan i radiće bez problema. Ali, moguće ga je drastično skratiti, uz pomoć ternarnog operatora.
 
Evo primera:
a=10;
b=(a==10) ? a : 150;
document.write(b);

Ovaj program, iako višestruko kraći, daje identičan rezultat sledećem. Analizirajmo drugu liniju (koja zamenjuje ceo if else blok iz prethodnog primera):

b=

Običan operator dodeljivanja. Vrednost desne strane biće dodeljena promenljivoj sa leve.

(a==10)

Uslov relevantan za odluku o alternativi:

? a : 150;



Alternative

Iza znaka pitanja (a) je alternativa koja će biti uzeta u obzir ukoliko je uslov ispunjen, a iza dvotačke (150) je alternativa u slučaju da uslov ne bude ispunjen.
 
Tako se na kraju dobije nešto nalik na:

dodeli promenljivoj b (ako je a jednako 10)  vrednost a    u suprotnom, vrednost 150

b    =        (a==10)         ?   a        : 150;

Ovakva poređenja korisna su kada hoćemo da dodelimo podrazumevane vrednosti promenljivima ukoliko nisu inicijalizovane, ali o tome više u funkcijama.

b=(a!=null) ? a : 120;


Najvažnije iz lekcije
  1. Osnovna naredba grananja je if.
  2. If uslovljavanje se može proširiti naredbama else, odnosno else if.
  3. Ukoliko nema vitičastih zagrada, ukoliko je uslov ispunjen, izvršava se samo jedna linija ispod uslova. Ukoliko vitičaste zagrade postoje, izvršava se ceo blok u zagradama.
  4. Alternativa if else if je naredba konstrukcija switch case.
  5. Uslovljavanje je moguće izvršiti i ternarnim operatorom, što se obično radi prilikom definisanja promenljivih.



Vežba 1

Problem:

Postoji sledeći program:

var ifr = document.createElement("iframe");
ifr.style.position="absolute";
ifr.style.width="100%";
ifr.style.top="0px";
ifr.style.left="0px";
ifr.style.zIndex=100;

var url = window.location.href;
var address = url.split("?")[0];

//OVDE JE POTREBNO DODATI KOD

document.body.appendChild(ifr);


Potrebno je dodati kod koji će proveravati promenljivu address. Ukoliko je njena vrednost ”http://www.google.com”, potrebno je src atributu ifr objekta dodeliti vrednost ”http://www.yahoo.com”, u suprotnom, vrednost treba da bude „http://www.google.com”. Ukoliko učitana strana nije ni google ni yahoo, treba preusmeriti pretraživač na google.


Rešenje:

var ifr = document.createElement("iframe");
ifr.style.position="absolute";
ifr.style.width="100%";
ifr.style.top="0px";
ifr.style.left="0px";
ifr.style.zIndex=100;

var url = window.location.href;
var address = url.split("?")[0];


if(address=="http://www.google.com/")
{
    ifr.src="http://www.yahoo.com";
    document.body.appendChild(ifr);
}
else if(address=="http://www.yahoo.com/")
{
    ifr.src="http://www.google.com";
    document.body.appendChild(ifr);
}
else
    window.location="http://www.google.com";

 

Vežba 2

Problem:

JavaScript program prihvata promenljivu adresaSlike i na osnovu nje kreira sliku koju postavlja na stranu. Potrebno je proveriti ekstenziju unete promenljive i ukoliko je png ili jpg, dodeliti promenljivu src svojstvu objekta img. U suprotnom, potrebno je postaviti svojstvo src img objekta na vrednost:

http://www.google.com/intl/en_ALL/images/srpr/logo1w.png

var adresaSlike = "http://www.google.com/intl/en_ALL/images/logos/images_logo_lg.gif";
var img = new Image();


img.style.position="absolute";
img.style.top="0px";
img.style.left="0px";
document.body.appendChild(img);


 
Rešenje:

var adresaSlike = "http://www.google.com/intl/en_ALL/images/logos/images_logo_lg.gif";
var img = new Image();

var parts = adresaSlike.split("/");
var file = parts[parts.length-1];
var ext = file.split(".")[1];

if(ext == "jpg" || ext == "png")
    img.src = adresaSlike;
else
    img.src = "http://www.google.com/intl/en_ALL/images/srpr/logo1w.png";

img.style.position="absolute";
img.style.top="0px";
img.style.left="0px";
document.body.appendChild(img);


Vežba 3

Problem:

U sistemu za praćenje vozila, postoji četiri statusa vozila: stoji, krece se, nestao, nepoznat. Ovi statusi označeni su respektivno brojevima 1,2,3 i 4.

U aplikaciju ulazi poslednji poznati status vozila, kao i trenutni status vozila u promenljvima poslednjiStatus i status.

var poslednjiStatus = 2;
var status = 4;


Potrebno je dodeliti vrednost promenljivoj nazivStatusa. Ovaj naziv, sadržaće tekstualnu reprezentaciju statusa vozila (kreće se, stoji, nepoznat...).

Pri tom je potrebno je ispoštovati sledeće pravilo: Ukoliko je posledje stanje vozila bilo kreće se, a novi status je nepoznat, novo stanje mora biti nestao.

Promenljivu nazivStatusa treba emitovati na izlaz.


Rešenje:

var poslednjiStatus = 2;
var status = 4;
var nazivStatusa = "nepoznat";
 
if(status == 1)
        nazivStatusa="stoji";
else if(status == 2)
        nazivStatusa="krece se";
else if(status == 3)
        nazivStatusa="nestao";
else if(status == 4)
        {
        if(poslednjiStatus==2)
        nazivStatusa="nestao";
        else
        nazivStatusa="nepoznat";
        }
alert(nazivStatusa);


Vežba 4

Problem:

Postoji sledeći program koji prikazuje google mapu na strani u zasebnom div tagu.

var target = document.createElement("div");

target.innerHTML='<iframe width="800" height="800" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="http://maps.google.com/?ie=UTF8&hq=&hnear=Slidell+Airport,+Slidell,+St+Tammany,+Louisiana+70460&ll=30.345053,-89.820786&spn=0.007629,0.064716&z=14&output=embed"></iframe><br /><small><a href="http://maps.google.com/?ie=UTF8&hq=&hnear=Slidell+Airport,+Slidell,+St+Tammany,+Louisiana+70460&ll=30.345053,-89.820786&spn=0.007629,0.064716&z=14&source=embed" style="color:#0000FF;text-align:left">View Larger Map</a></small>';

target.style.position="absolute";
target.style.top="0px";
target.style.left="0px";
target.style.zIndex=100;

document.body.appendChild(target);


Potrebno je prepraviti program tako da longituda i latituda budu prosleđeni kroz zasebne promenljive i to da mapa ne bude prikazana ukoliko je latituda manja od 30 ili veća od 40 a longituda veća od -80 ili manja od -100.


Rešenje:

var lat = 32;
var lon = -91;

if(lat>30 && lat<40 && lon<-80 && lon>-90)
{
var target = document.createElement("div");
target.innerHTML='<iframe width="800" height="800" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="http://maps.google.com/?ie=UTF8&hq=&hnear=Slidell+Airport,+Slidell,+St+Tammany,+Louisiana+70460&ll='+lat+','+lon+'&spn=0.007629,0.064716&z=14&output=embed"></iframe><br /><small><a href="http://maps.google.com/?ie=UTF8&hq=&hnear=Slidell+Airport,+Slidell,+St+Tammany,+Louisiana+70460&ll=30.345053,-89.820786&spn=0.007629,0.064716&z=14&source=embed" style="color:#0000FF;text-align:left">View Larger Map</a></small>';

target.style.position="absolute";
target.style.top="0px";
target.style.left="0px";
target.style.zIndex=100;

document.body.appendChild(target);
}

Smatrate da je ova lekcija korisna?  Preporučite je. Broj preporuka:1


Molimo Vas unesite svoje podatke i dobićete pristup besplatnim lekcijama.

Ime: 
Prezime: 
Email: