BAZA ZNANJA

Kurs: - Core JavaScript Programming

Modul: Funkcionalnost

Autor: Vladimir Marić

Naziv jedinice: Funkcije

Funkcije zauzimaju ključnu ulogu i u modernom objektno orjentisanom programiranju, jer je, praktično, kompletna funkcionalnost klasa (koje su osnove objektno orjentisanog programiranja) smeštena baš u metode tih klasa. Metode klasa su, ništa drugo, do najobičnije funkcije. Funkcije su veoma upotrebljiv alat i nevezano za oop.

JavaScript i ne funkcioniše baš po klasičnom objektno orjentisanom modelu, već po tzv. prototipno baziranom objektnom modelu, ali, pravila su prilično slična i razumevanjem jednog od ova dva modela, lako se ostvaruje i razumevanje drugog.

Vratimo se na funkcije. Veoma je čest slučaj da se pojavi potreba za učestalom upotrebom jednog istog bloka koda u jednom programu. Ukoliko funkcije ne bi postojale, ovaj kod bismo, u najboljem slučaju, morali da kopiramo na svako mesto gde nam je potreban.

Npr. u kodu, na više mesta ispisujemo jedan isti tekst. Recimo, zvezdice u narednom primeru:

document.write("*******************************************************************");
document.write("<br>naslov<br>");
document.write("*******************************************************************");
document.write("<br>Neki tekst<br>");
document.write("*******************************************************************");

Očigledno je da se deo koji iscrtava zvezdice ponavlja tri puta, a u programiranju postoji pravilo da sve što se ponavlja, ne treba da se ponavlja.

Sledivši to pravilo, dolazimo do zaključka da je neminovno rešiti problem ponavljanja zvezdica iz prethodnog koda, a najefikasniji način da to uradimo, jeste, upotreba funkcije.

Tako bi, verzija prethodnog koda sa upotrebom funkcije, izgledala ovako:

//kreiranje funkcije zvezdice
function zvezdice()
{
    document.write("*******************************************************************");
}
//poziv funkcije zvezdice
zvezdice();
document.write("<br>naslov<br>");
//poziv funkcije zvezdice
zvezdice();
document.write("<br>Neki tekst<br>");

U prethodnom kodu, razlikujemo dve celine. Jedna je definisanje funkcije, a druga pozivanje funkcije.

Kada je u pitanju definicija funkcije, u JavaScriptu-u moraju biti ispoštovana neka pravila. Pre svega, funkcija mora biti započeta ključnom rečju - function. Zatim, mora posedovati naziv, za koji, što se tiče notacije, važe ista pravila kao i za promenljive. Nakon naziva, u malim zagradama, potrebno je naglasiti prijem parametara (kroz listu promenljivih odvojenih zarezima) ili zagrade ostaviti prazne, ukoliko funkcija ne prima parametre. I konačno, samo telo funkcije, odnosno, kod koji funkcija izvršava i koji treba postaviti u vitičaste zagrade, odmah nakon prijema parametara:

function mojaFunkcija(parametar1,parametar2) { document.write( “ovo je telo”); }

Ovakav pristup, ne samo da omogućava da se smanji veličina koda, već i dovodi do centralizacije koda, odnosno, jednostavne manipulacije raznim mehanizmima, koji se u kodu izvršavaju putem funkcija.

Recimo da primer sa zvezdicama još uvek nije prikazao pravu moć funkcija, i da je još uvek lakše kopirati jedan isti red nekoliko puta. Ali, šta ako bismo želeli da naš izlaz, sa zvezdicama ima dinamički sadržaj?
 
Na primer:

*********************** Beograd *************************
Tekst o Beogradu
*********************** Pariz ****************************
Tekst o Parizu
*********************** London **************************
Tekst o Londonu

U ovom slučaju, morali bismo, osim kopiranja zvezdica, da u svakom redu ispisujemo i naziv grada i da brišemo i dodajemo zvezdice na kraju reda, kako bi bile poravnate.

Kod bi izgledao ovako:

document.write("************************************ Beograd **************************************");
document.write("<br>Tekst o Beogradu<br>");
document.write("************************************* Pariz ****************************************");
document.write("<br>Tekst o Parizu<br>");
document.write("************************************* London **************************************");
document.write("<br>Tekst o Londonu<br>");

Upotrebom funkcije, ovaj kod bi se mogao rešiti na sledeći način:

//kreiranje funkcije zvezdice
function zvezdice(nazivGrada)
{
//petlja koja iscrtava prvi set zvezdica
for(i=0;i<35;i++)
document.write("*");
//ispis naziva grada odvojenog praznim mestima
//naziv grada je usao kao parametar u funkciju
document.write(" " + nazivGrada + " ");
//petlja koja iscrtava drugi set zvezdica
//pocetna vrednost petlje je dosadasnji broj zvezdica (duzina prve petlje)
//+ duzina grada + dva prazna prostora ubacena oko duzine grada
//ciljna vrednost je npr. 90
for(x=(i+2)+nazivGrada.length;x<90;x++)
document.write("*");
}

//poziv funkcije zvezdice
zvezdice("Beograd");
document.write("<br>Tekst o Beogradu<br>");
zvezdice("Pariz");
document.write("<br>Tekst o Parizu<br>");
zvezdice("London");
document.write("<br>Tekst o Londonu<br>");

U slučaju 3 grada, koliko ih ima u primeru, postavlja se pitanje svrhe ovakve funkcije. Ali, već posle nekoliko novih gradova, kod bi se umnogostručio kada ne bi bilo ove funkcije.

Osim toga, šta ukoliko bismo poželeli da u jednom trenutku smanjimo broj zvezdica kojima je oivičen naziv grada?

U ovoj funkciji, za to bi trebalo promeniti samo dve vrednost, dok bi, bez funkcije, trebalo menjati kod onoliko puta koliko ima gradova.

 

Tipovi funkcija

JavaScript ima dve vrste funkcija, korisnički kreirane i unutrašnje (ugrađene) funkcije koje su deo JavaScript jezika.

Korisnički definisane funkcije se kreiraju korišćenjem ključne reči function, kao u prethodnom i sledećem primeru:

function saberi(num1,num2)
 {
 //Ovo je primer JavaScript funkcije koja sabira dva broja
// i vraća dobijeni zbir programu koji je poziva";
 return num1 + num2;
 }

Funkcija može biti napisana bilo gde u kodu, ali je ustaljena praksa da se sve funkcije pišu na početku koda, pre ostalih naredbi. Takođe, funkcija može biti napisana i u posebnom fajlu. Tada je potrebno da se ovaj fajl uključi na svaku stranu koja će da koristi njegove funkcije.

Funkcije mogu biti pozvane iz bilo kog dela JavaScript (HTML) koda. Nakon poziva funkcije, funkcija preuzima prosleđene parametre, ukoliko ih ima, izvršava određene naredbe i vraća dobijenu vrednost programu (ključnom rečju return).

function saberi(num1,num2)
{
 return num1 + num2;
}
document.write( "Zbir brojeva 5 i 2 je  " + saberi(5,2));

U gornjem primeru koda, funkcija se prvo definiše, ali se poziva tek kasnije, u okviru document.write naredbe. Prilikom poziva funkcije, prosleđuju joj se prave vrednosti parametara (5 i 2). Funkcija preuzima ove vrednosti, smešta ih u promenljive num1 i num2, obavlja zadate operacije (sabira ih) i dobijenu vrednost vraća document.write naredbi.

Moguće je napraviti i funkciju koja može, a ne mora da primi parametre, a da pri tom, ne dođe do greške. U tu svrhu, postavljaju se podrazumevane vrednosti parametara. JavaScript nema ugrađen mehanizam koji ovo rešava, ali se jednostavno, upotrebom standardne provere, ovakav mehanizam može implementirati u funkciju.

function pod(a, b) {
    var a = (a == null) ? 100 : a;
    var b = (b == null) ? 200 : b;
    document.write(a + " " + b);
}
pod(1,2);

U slučaju ovog primera, podrazumevane vrednosti će biti 100 za a i 200 za b.

Promenljive koje se koriste unutar tela funkcije nazivaju se lokalne promenljive. Njima ne može da se pristupa izvan funkcije. Ukoliko je, ipak, potrebno da se jednoj istoj promenljivoj pristupa i iz tela funkcije i izvan njega, ovu promenljivu treba deklarisati kao globalnu, odnosno, izvan funkcije. Tada će promenljiva postojati i izvan funkcija u kojima je definisana.

var a=100;
function pod() {
    document.write(a);
    a=200;
}
pod();
document.write(a);

Promenljiva a je kreirana izvan funkcije, što znači da će postojati izvan funkcija, ali i u njima. Prilikom poziva funkcije, promenljiva a biva ispisana na stranu i promenjena joj je vrednost na 200, koju je moguće koristiti kasnije u kodu (document.write).

Ponekad funkciju treba definisati generički u samom kodu. Na primer, kada hoćemo da definišemo funkcionalnost za neki događaj. U tom slučaju, funkcija neće imati ime, već će se samo aktivirati kroz kod. Ovakve funkcije nazivaju se još i anonimus funkcije.

document.onclick=function() { document.write("123"); }

Vežba 1

Problem:

Potrebno je napraviti funkciju za izračunavanje obima pravougaonika. Funkcija treba da prihvata dva parametra a i b.

Rešenje:

function prm(a,b)
{ return 2*a + 2*b; }

Vežba 2

Problem:

Dat je niz:

var ar = [ 2,4,1,6,5,8,9,7,0,1 ];

Potrebno je napraviti funkciju koja prihvata niz, prolazi kroz njega i vraća samo parne vrednosti niza u rezultujućem nizu.

 
Rešenje:

function getOdds(arr)
{
    var rez = new Array();
    for(var i=0;i<arr.length;i++)
       if(arr[i]%2==0)
        rez.push(arr[i]);
    return rez;
}

var ar = [ 2,4,1,6,5,8,9,7,0,1 ];
alert(getOdds(ar));

Vežba 3

Problem:

Potrebno je napraviti (rekurzivnu) funkciju koja poziva samu sebe onoliko puta kolika je vrednost njenog prosleđenog parametra i prikazuje putem alert funkcije preostali broj aktivacija.

Rešenje:

function rec(x)
{
    if(x>0)
        {
            x--;
            alert(x);
                rec(x);
        }
}
rec(10);

Najvažnije iz lekcije:

1. Funkcije su konstrukcije koje logičke celine koda enkapsuliraju u jednu strukturu.
2. Funkcije u JavaScriptu mogu vratiti i primati vrednosti.
3. Podrazumevani tipovi funkcija u JavaScriptu su korisnički definisane i ugrađene funkcije.