JavaScript Tutor
Lekcija 1
Lekcija 2
Lekcija 3
Lekcija 4
Lekcija 5
Lekcija 6
Lekcija 7
iDragstor Lab
|
|
|
Lekcija 7 - Funkcije
Sta su funkcije?
Kada pisete programe cesto vam se javi potreba da izvrsite neke akcije
na nekoliko mesta u programu. To znaci da bi trebalo da prepisujete isti KOD
nekoliko puta sto moze da bude veoma neefikasno. Bolji nacin bi bio da KOD
koji se ponavlja bude napisan jednom i smesten u jednoj centralnoj lokaciji
a da posle u programu mozemo da pozovemo taj KOD gde god je on potreban. Za to nam
zluze funkcije. Znaci po definiciji, funkcija je sekcija KOD-a koja ima svoje
ime i izvrsava neki zadatak ili pruza neku funkcionalnost.
Kada vasi programi postanu slozeniji a stranice komplikovanije imacete jako
puno KOD-a iz HTML i JavaScript-a koji ce da se mesa pa ce njegova citljivost
biti sve teza i teza. Ako zelite da izbegnete ovu situaciju koristicete funkcije.
Kasnije u lekciji videcete sve detaljnije. Za sada da znate da
se pomocu funkcija moze razdvojiti KOD iz HTML od KOD-a koji napisan u
JavaScript-u tako da ce fajl biti laksi za citanje a u isto vreme otklanjanje
gresaka ce biti lakse.
Uloga Funkcija u programiranju
Grupiranje Koda
Funkcije imaju veoma vazan znacaj u programiranju i koriste za pre svega za efikasnije
programiranje. Jedna od znacajnih prednosti koriscenja funkcija u odnosu
na programe koji nemaju funkcije je to sto funkcije organizuju KOD tako da
je lakse izvrsiti promene ili otkloniti greske. Zamislite program u kojem
postoji funkcija koja ce upitati korisnika za ime i upisati taj padatak u variablu.
Ime se moze prikazati na razlicitim delovima stranice referenciranjem
te variable. Ako kasnije zelimo da promenimo funkciju tako da variabla sadrzi samo
prva tri slova necijeg imena tu promenu cemo izvrsiti samo na jednom mestu, u
funkciji a promene ce biti propagirane svuda gde se koristi variabla.
Debugging ili otkljanjanje gresaka sa funkcijama
Kada se pojavi greska u programu, ukoliko koristimo funkcije bice nam lakse
da utvrdimo gde je greska, u HTML delu ili JavaScript delu. Ako je greska u JavaScript
delu, dobicemo broj linije gde je nastao problem u izvrsenju programa,
a greska ce biti u nekoj od funkcija koje smo napisali. Znaci, pisanjem
funkcija olaksacemo proces rada sa greskama jer ce nam biti lakse da izolujemo deo
programa koji treba ispraviti.
Deklaracija funkcija
Znaci, funkcije sluze da bi se grupisao KOD na jednom centralnom mestu i
kasnije prozivao iz razlicitih delova programa. Deklaracija funkcija
vrsi se na sledeci nacin:
function imefunkcije(argumenti) {
akcije koje treba da se izvrse
}
Funkcije se smestaju u Header sekcije izmedju HEAD tega(<HEAD>).
Pogledajte sledeci primer:
<HTML>
<HEAD>
<script language = "JavaScript">
function zdravo() {
alert("Dobro dosli na iDragstor!")
}
</script>
</HEAD>
<BODY>
<script language = "JavaScript">
zdravo()
</script>
Bravo stigli ste na kraj KOD-a
</BODY>
</HTML>
Kao sto ste videli funkcija zdravo() je napisana u Header sekciji HTML-a
izmedju Head teg-ova. KOD koji zove funkciju na izvrsenje se nalazi u
Body sekciji HTML-a. Taj kod se sastoji iz imena funkcije nakon cega se
stave () zagrade u ovom primeru zdravo(). Kada program pozove funkciju on
izvrsava linije KOD-a koje definisu tu funkciju a kada zavrsi vraca se ponovo
u Body sekciju.
Ime funkcije i argumenti
Ime funkcije moze biti bilo sta osim rezervisanih reci (While, If, Break)
a nakon imena se uvek dodaju male zagrade () cak i ako funkcija
nema argumenta. U proslom primeru funkcija zdravo() nije imala nikakvih
argumenata. Cesto funkcije sadrze jedan ili vise argumenta. Recomo, ako
zelite da napravite funkciju koja mnozi dva broja, funkcija ce imati dva
argumenta koja prestavljaju brojeve koji treba da se pomnoze. Pogledajte na primeru:
function pomnozi(x,y) {
var z = x*y
document.write(z)
}
Ovakva funkcija se moze pozvati iz HTML-a ili JavaScript-a tako sto ce
se navesti ime funkcije i vrednost argumenata (brojeva koji se mnoze):
<BODY onLoad = "pomnozi(5,10)">
Ova linija ce pozvati funkciju pomnozi(5,10) sa argumentima a njen resultat
ce biti 50. Pored brojeva argumenti mogu biti i variable, kao u sledecem
primeru:
<BODY onLoad = "pomnozi(nekibroj,dan)">
Osim brojeva i variabli funkcijama mozete poslati i tekst kao argument a
u nakim slucajevima argument moze biti i objekat. U sledecem primeru koristicemo
tekst kao argument u funkciji:
<HTML>
<HEAD>
<script language = "JavaScript">
function poruka(i,s) {
document.write("Zdravo " + i + " vas omiljeni sport je " + s + ".")
}
</script>
</HEAD>
<BODY>
<script language = "JavaScript">
var i = prompt("Kako se zovete? ","")
var s = prompt("Koji je vas najomiljeniji sport? ","")
poruka(i,s)
</script>
</BODY>
</HTML>
Rezultati funkcije
Osim sto funkciji mozete poslati argumente kao brojeve, tekst ili variable
funkcije mogu da obrade te podatke i vrate broj, tekst ili variablu.
Broj kao rezultat
U sledecem primeru funkcija dupliraj prima brojcani argument od korisnika, duplira
njegovu vrednost i vraca brojcani rezultat (return y).
<HTML>
<HEAD>
<script language = "JavaScript">
function dupliraj(y) {
var y = y*2
return y
}
</script>
</HEAD>
<BODY>
<script language = "JavaScript">
var x=parseInt(prompt("Unesite broj koji zelite da pomnozite:",""))
var rezultat2x = dupliraj(x)
document.write ("Rezultat funkcije je " + rezultat2x)
</script>
</BODY>
</HTML>
Linija var rezultat2x = dupliraj(x) kreira variablu rezultat2x koja je
jednaka vrednosti funkcije dupliraj kada se posalje x kao argument.
Tekst kao rezultat
U sledecem primeru funkcija ce vratiti tekst kao resultat:
<HTML>
<HEAD>
<script language = "JavaScript">
function poruka(i,s) {
var tekst = "Zdravo " + i + " vas omiljeni sport je " + s + "."
return tekst
}
</script>
</HEAD>
<BODY>
<script language = "JavaScript">
var i = prompt("Kako se zovete? ","")
var s = prompt("Koji je vas najomiljeniji sport? ","")
var pokazi_tekst = poruka(i,s)
document.write(pokazi_tekst)
</script>
</BODY>
</HTML>
Funkcije i programiranje
Cesto cete naici na situaciju gde ce biti potrebno da pozeve dve ili
vise funkcija u zavisnosti od nekih uslova. Za to ce biti potrebno da
koristite If / Else komande u kombinaciji sa funkcijama. Ova kombinacija
predstavlja veoma snazan mehanizam koji ce vam omoguciti kompleksno
programiranje. Radi ilustracije pogledajte sledeci primer:
<HTML>
<HEAD>
<script language = "JavaScript">
function jedan() {document.write("Funkcija broj 1") }
function dva() {document.write("Funkcija broj 2") }
function tri() {document.write("Funkcija broj 3") }
</script>
</HEAD>
<BODY>
<script language = "JavaScript">
var x = parseInt(prompt("Unesi broj 1,2,3 ",""))
if (x==1) {jedan()}
else if (x==2) {dva()}
else {tri()}
</script>
</BODY>
</HTML>
U sledecem primeru If/Else logika (ispitivanje uslova) je smesteno u
funkciji. Program pita korisnika koliko dana ima za svoj
godisnji odmor. U zavisnosti od tog broja funkcija vraca razlicitu poruku
koja se prikazuje u Body sekciji. Znaci, funkciji se salje broj (argument
je broj dana) a funkcija vraca tekst. Jos jedna mogucnost u koriscenju funkcija
<HTML>
<HEAD>
<script language = "JavaScript">
function poruka(x) {
var rezultat=""
if (x<5) {rezultat = "Idite na kampovanje!"}
else if (x<15) {rezultat = "Idite na more!"}
else if (x<25) {rezultat = "Idite na kampovanje pa na more!"}
else if (x<=30) {rezultat = "Idite na put oko sveta!"}
else {rezultat = "Niste uneli validan broj dana!"}
return rezultat
}
</script>
</HEAD>
<BODY>
<script language = "JavaScript">
var dani = parseInt(prompt("Koliko dana imate za godisnji odmor (1-30)",""))
var mogucnosti = poruka(dani)
document.write(mogucnosti)
</script>
</BODY>
</HTML>
Na kraju...
Cestitam vam! Stigli ste do kraja mukotrpnog rada. Na ovim stranicama
ste naucili osnove JavaScript-a i sada imate podlogu da lakse naucite kompleksnije
tehnike JavaScript-a. Vratite se na ove stranice kad god treba da osvezite
svoje znanje. Nadam se da tutor nije bio suvise dosadan, da smo dali dovoljno primera i da
ste izdrzali do kraja. Ako imate neke utiske, komentare, zalbe ili
bilo sta drugo da kazete u vezi ovog tutora posaljite mi poruku
na brasic@iDragstor.com.
Hvala vam na vasoj paznji.
|
|
|
