Sunteți pe pagina 1din 6

VI

Definirea functiilor

Dou lucruri sunt infinite: universul i prostia omeneasc, i nc nu sunt sigur de primul.
Albert Einstein

Obiective: Exemple de scripturi care folosesc functii simple/complexe.


1. Crearea (definirea) functiilor;
4. Exemple de scripturi cu functii;
2. Instructiunea return;
5. Modificarea numarului argumentelor;
3. Apelarea functiilor;
6. Functii recursive;
Functiile ajuta la divizarea mai multor sarcini pe care trebuie sa le faca un program.
O functie poate contine mai multe instructiuni si comenzi care ulterior pot fi utilizate usor
si de mai multe ori prin apelarea functiei care le contine.
Daca un program necesita multe linii de cod, folosind functiile putem imparti codul
in parti mai mici pe care le putem utiliza separat acolo unde este nevoie.
Pot fi doua feluri de functii:
predefinite - cum sunt de exemplu: "parseInt(string)", "parseFloat(string)", ...
Create de programator
o care returneaza o valoare
o care nu returneaza o valoare

1. Crearea (definirea) functiilor


O functie se defineste la inceputul fisierului, in sectiunea head si poate fi folosita in
cadrul paginii prin apelarea ei. Scriptul care contine definirea unei functii se adauga in
sectiunea "head" pentru a fi siguri ca aceasta a fost incarcata inainte de a fi apelata.
Pentru crearea unei functii se foloseste cuvantul function urmat de numele pe care
vrem sa-l dam functiei dupa care putem adauga intre paranteze rotunde argumentele
(numite si atribute) functiei (separate prin virgula daca sunt mai multe) si intre acolade
corpul functiei care contine codul care trebuie executat.
Forma generala a unei functii este urmatoarea:
function nume_functie(argument1, argument, ...)
{
codul care va fi executat }

Argumentele sunt variabile folosite de functie si a caror valoare este preluata la


apelarea functiei.
Atributele nu sun obligatorii, o functie poate fi definita si fara argumente, dar se
pastreaza parantezele rotunde, astfel sintaxa unei functii fara argumente este urmatoarea:
function nume_functie()
{
codul care va fi executat

2. Instructiunea return
O functie care returneaza un rezultat foloseste pentru aceasta instructiunea return.
Aceasta specifica valoarea pe care o returneaza functia cand este apelata.
Iata un exemplu din care puteti intelege modul de aplicare a instructiunii return:
function suma(x, y)
{ z = x+y;
return z
}

- "suma" reprezinta numele functiei (puteti da orice nume care respecta regulile limbajuli si
nu sunt identice cu cele rezervate, cum ar fi "function"), "x, y" reprezinta argumentele
1

functiei a caror valoare este data cand functia este apelata. Intre acolade avem codul care
trebuie executat si care, prin instructiunea "return" va returna valoarea lui "z" care
reprezinta suma lui "x" si "y". Astfel valoarea returnata de functia "suma()" va fi valoarea
pe care o are "z".

3. Apelarea functiilor
Dupa ce am creat o functie, pentru a fi folosita, fuctia trebuie apelata.
O functie care contine argumente se apeleaza in felul urmator:
nume_functie(argument1, argument, ...)
O functie fara argumente se apeleaza in felul urmator:
nume_functie()
Observati ca la apelul functiei nu se mai folosesc cuvantul "function" si acoladele
In locul in care am apelat astfel o functie va fi executat corpul acelei functii.

4. Exemple de scripturi cu functii


In continuare studiati exemplele de mai jos, care folosesc functii simple, astfel veti
intelege mai bine modul de lucru si executie a unei functii.
Exemplu 1 - functie fara argument
Urmatorul exemplu prezinta un script care afiseaza un text:
<html>
<head>
<script type="text/javascript">
<!-function exemplu1() {
return document.write("Bine ati venit la
ora! SUCCES in continuare")
}
//-->
</script>
</head>
<body>
<script type="text/javascript">
exemplu1()
</script>
</body>
</html>

Observati ca functia "exemplu1" a fost definita in sectiunea head a documentului


HTML si apoi a fost apelata in sectiunea "body", unde va afisa textul "Bine ati venit!"

Exemplu 2 - functie cu un argument


Urmatorul exemplu prezinta un script care la apasarea unui buton deschide o
fereastra "alert" care va afisa un text in functie de argumentul transmis.
Specificatie - Sintaxa generala a functiei "alert" din JavaScript este: alert('Text'), aceasta
deschide o fereastra de atentionare in care este afisat mesajul dintre paranteze "Text".
<html>
<head>
<script type="text/javascript">
<!-function exemplu2(text) {
alert(text);
}

//-->
</script>
</head>
<body>
<form>
<input type="button"
onclick="exemplu2('Buna
dimineata!')" value="dimineata" />
<input type="button" onclick="exemplu2('Buna ziua!')"
value="ziua" />
</form>
</body>
</html>

Acest cod va afisa in pagina HTML urmatorul rezultat:

Studiati cu atentie scriptul si modul in care acesta este apelat.


Textul afisat de "alert" este preluat de la valoarea argumentului functiei "exemplu2"
care l-a randul lui il preia din ceea ce este scris la apelarea functiei.
"onclick" (la click) este o comanda JavaScript care specifica momentul cand trebuie sa
fie executata functia.
Cand apasati cele doua butoane veti obtine o fereastra 'Alert' cu doua mesaje
diferite (specificate la fiecare apelare a functiei "exemplu2")
Exemplu 3 - functie cu doua argumente
Urmatorul exemplu prezinta un script care la apasarea unui buton deschide o
fereastra "alert" care va afisa suma a doua numere.
<html>
<head>
<script type="text/javascript">
<!-function exemplu3(x,y) {
var z = 0;
z = x+y;
return alert("Suma lui "+x+" si "+y+" este: "+z)
}
//-->
</script>
</head>
<body>
<form>
<input type="button" onclick="exemplu3(7, 8)"
value="Suma" />
</form>
</body>
</html>

Acest cod va afisa in pagina HTML urmatorul rezultat:


Studiati cu atentie scriptul, modul in care au fost combinate: "alert()", sirul si valoarea
argumentelor "x, y", variabila "z" si modul in care functia "exemplu3" este apelata.
Cand apasati pe buton, veti obtine suma numerelor 7 si 8.
In interiorul functiei pot fi folosite instructiuni complexe, cum ar fi "for", "if",
"while"; care pot lua decizii diferite in functie de argumentele functiei. Depinde doar de
cunostintele si imaginatia dv.

5. Modificarea numarului argumentelor


Cand creem o functie ii definim si numarul de argumente pe care le accepta, lucru
de care se tine cont in momentul apelarii ei. Sunt situatii in care dorim sa transmitem
functiei un numar diferit de argumente, care poate fi mai mic sau mai mare decat numarul
de argumente pe care le are functia la construirea ei.
Intr-o astfel de situatie putem folosi o valoare prestabilita in interiorul functiei,
pentru cazul in care nu sunt transferate argumente.
In continuare va fi prezentat un script care afiseaza un mesaj de salut atunci cand
utilizatorul ajunge la o pagina web. Programul afiseaza un anumit mesaj daca recunoaste
sau nu numele vizitatorului. Daca "utilizator" nu este "null" variabila a fost definita. Acest
lucru este posibil doar daca o valoare, ca " Media", este transferata functiei. Daca variabila
"utilizator" este egal cu "null" atunci scriptul evita folosirea variabilei in mesajul de salut.
<html>
<head>
<script type="text/javascript">
<!-function mesaj(utilizator) {
if (utilizator!=null) {
document.writeln("Salut "+utilizator);
}
else {
document.writeln("Bine ai venit la ora!");
}
}
//-->
</script>
</head>
<body>
<script type="text/javascript">
<!-document.writeln("Prima apelare a functiei mesaj() <br
/>");
mesaj("Mihai");
document.writeln("<br />A doua apelare a functiei mesaj()
<br />");
mesaj();
//-->
</script>
</body>
</html>

Acest script va afisa in pagina urmatorul rezultat:


Prima apelare a functiei mesaj()
Salut Mihai
A doua apelare a functiei mesaj()
Bine ai venit la ora!

Studiati codul functiei si observati diferenta mesajelor din cele ddoua apelari.
In unele situatii unei functii ii sunt transferate mai multe argumente decat au fost
specificate la crearea ei. Valorile argumentelor suplimentare nu sunt pierdute, acestea se
4

stocheaza intr-un tablou (sau "matrice") numit "arguments", care exista implicit pentru
orice functie.
Toate argumentele sunt pastrate in acest tablou si pot fi extrase in interiorul
corpului functiei.
Argumentele functiei "mesaj" sunt stocate in tabloul "mesaj.arguments". Stocarea
se face intr-o ordine asigurata de o "cheie" a carei prima valoare este 0.
Pentru a extrage primul element din tabloul "arguments" al functiei "mesaj" folosim
sintaxa "arg1 = mesaj.arguments[0]", pentru al doilea "arg2 = mesaj.arguments[1]".
Toate tablourile JavaScript sunt indexate pornind de la 0. Pentru a gasi numarul
total de argumente din tablou putem folosi o instructiune speciala "length" care returneaza
lungimea (nr. de elemente) unui tablou (numit si "matrice").
Urmatorul exemplu atribuie variabilei "nrArg" o valoare care reprezinta numarul de
argumente (elemente) din tabloul "mesaj.arguments":
nrArg = mesaj.arguments.length
Folosind instructiunile prezentate mai sus (legate de tabloul "arguments"), putem crea o
noua versiune a scriptului din primul exemplu. Aceasta versiune raspunde mai corect in
functie de cunoasterea sau nu a numelui utilizatorilor.
<html>
<head>
<script type="text/javascript">
<!-function mesaj(utilizator) {
if (utilizator!=null)
{ document.writeln("Salut "+utilizator); }
else
{ document.writeln("Bine ati venit pe site. "); }
numarArgumente=mesaj.arguments.length;
if(numarArgumente>1) {
for (var i=1; i<numarArgumente; i++)
{
document.writeln(mesaj.arguments[i]); }
}
}
//-->
</script>
</head>
<body>
<script type="text/javascript">
<!-var utilizator="Marius", extraMesaj="Bine ai revenit";
var utilizator2=null;
var extraMesaj1="Vrei sa devii membru?";
var extraMesaj2="Te poti inscrie online";
mesaj(utilizator,extraMesaj);
document.writeln("<hr>");
mesaj(utilizator2,extraMesaj1,extraMesaj2);
//-->
</script>
</body>
</html>

Acest exemplu va afisa in pagina web urmatorul rezultat:


Salut Marius Bine ai revenit
Bine ati venit pe site Vrei sa devii membru ? Te poti inscrie online

6. Functii recursive
O functie JavaScript poate fi recursiva, adica se poate autoapela.
O metoda buna de a demonstra capacitatea recursiva a functiilor este rezolvarea
unei ecuatii factoriale.
In exemplul urmator avem o functie JavaScript recursiva care afla factorialul unui
numar precizat "n" (aici 7):
<html>
<head>
<script type="text/javascript">
<!-document.writeln("Calculeaza factorialul de 7 prin
functie recursiva")
function factorial(n) {
var rezultat;
if (n>0) {
rezultat = n*factorial(n-1);
}
else if (n==0) {
rezultat = 1;
}
else {
rezultat = null;
}
return(rezultat)
}
//-->
</script>
</head>
<body>
<form>
<input type = "button" value = "Factorial 7"
onclick="alert(factorial(7))" >
</form>
</body>
</html>

In fereastra browser-ului va apare urmatorul rezultat:


Functia verifica intai daca "n" este mai mare decat 0, apoi in caz afirmativ, "n" se
inmulteste cu rezultatul returnat de auto-apelarea functiei cu argumentul "n-1". Cand "n"
ajunge 0, aparitia cea mai imbricata a functiei se incheie si returneaza prima valoare.
JavaScript incheie fiecare functie imbricata pana ce ajunge la apelarea initiala a functiei
"factorial", apoi intoarce rezultatul final.