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.
Exista functii predefinite, adica cele care apartin direct programului JavaScript (precum: alert(), parseInt(), trim(), etc.); si functii create in script (cele definite de programator).
- In aceasta lectie este prezentat modul de creare si utilizare a functiilor in script.
Exista mai multe moduri de a crea o functie in JavaScript.
function
urmat de numele functiei si doua paranteze rotunde.function nameFun(p1, p2){ //codul care va fi executat }- 'nameFun' reprezinta numele functiei. Poate fi orice nume ca si la variabile.
function fun1(){ alert('Love yourself; love everyone.'); }
var nameVar = function(p1, p1){ //codul care va fi executat }- 'nameVar' e numele variabilei dar si al functiei utilizat la apelarea ei.
var fun1 = function(){ alert('Love yourself; love everyone.'); }
Diferenta fata da modul standard e aceasta: o functie definita in mod standard nu mai poate fi redefinita, dar o functie atribuita unei variabile poate fi redefinita deoarece reprezinta o valoare a variabilei iar valorile de variabile pot fi schimbate.
this
(care face referire la obiectul functiei).var nameVar = (p1, p1)=>{ //codul care va fi executat }- 'p1, p2' sunt parametri functiei (optionali).
var fun1 = ()=>{ alert('Love yourself; love everyone.'); }
O functie care returneaza un rezultat foloseste pentru aceasta instructiunea return
. Aceasta specifica valoarea pe care o returneaza functia cand este apelata.
function nameFun(p1, p2) //codul care va fi executat return 'Valoare';
Instructiunea return se poate aplica in oricare tip de functie; la cele atribuite ca valori de variabile, si la 'arrow functions'.
Pe langa faptul ca 'return' returneaza o valoare, acesta opreste executia functiei; codul din functie adaugat dupa 'return' nu este executat.
//returneaza suma parametrilor a si b function fun2(a, b){ return a + b; }
Dupa ce am creat o functie, pentru a fi folosita, functia trebuie apelata.
O functie fara parametri se apeleaza in felul urmator:<h3 id='hid'>Default text</h3> <script> //definim o functie care scrie un text HTML in elementul cu id #hid function textHid(){ document.getElementById('hid').innerHTML ='<h3>Mereu e o zi frumoasa.</h3>'; } //se apeleaza functia textHid(); </script>
<h3 id='hid1'>Tag H3</h3> <div id='dv1'>Continut Div</div> <script> //adauga in elementul HTML cu id-ul de la 'id' textul de la 'str' function addText(id, str){ document.getElementById(id).innerHTML = str; } //se apeleaza functia de 2 ori, cu valori diferite addText('hid1', 'Tutorial JavaScript'); addText('dv1', 'Text adaugat prin apelarea functiei.'); </script>
return
:
<h3 id='sum'>Tag H3</h3> <script> //returneaza un text cu suma lui x si y function sumXY(x, y){ let re = x+y; return 'Suma lui x si y este: '+ re; } //preia valoarea returnata de sumXY let sum1 = sumXY(7, 12); //adauga in elementul HTML cu id 'sum' valoarea de la sum1 document.getElementById('sum').innerHTML = sum1; </script>
Functiile si variabilele definite in afara unei functii pot fi utilizate in interiorul ei.
Valoare unei variabile definite in afara functiei poate fi modificata in codul ei, iar modificare ramane si in afara functiei dupa apelarea ei.
<div id='dv1'>Continut Div</div><br> <div id='dv2'>Arata nr</div> <script> var nr =8; //dubleaza valoare lui x function setVal(x){ return x*2; } //adauga valoarea returnata de setVal() in elementul cu id-ul 'id' //apoi modifica valoarea variabilei 'nr' function showVal(id){ document.getElementById(id).innerHTML ='Valoare lui "nr" dublat este: '+ setVal(nr); nr =99; } //apeleaza showVal() cu id-ul pt. parametru showVal('dv1'); //adauga valoare curenta a lui 'nr' in Div-ul #dv2 document.getElementById('dv2').innerHTML ='Valoare lui "nr" dupa modificare in functie este: '+nr; </script>
<div id='dv1'>Div-ul #dv1</div><br> <div id='dv2'>Div-ul #dv2</div> <script> var nr =8; //defineste in functie o variabila 'nr' cu valoarea parametrului function f1(x){ var nr = x; //adauga valoarea lui 'nr' in elementul #dv1 document.getElementById('dv1').innerHTML ='Valoare lui "nr" din functie este: '+nr; } //apeleaza f1() cu valoarea pt. 'nr' din functie f1(5); //adauga valoare lui 'nr' in Div-ul #dv2. 'nr' extern nu a fost modificat document.getElementById('dv2').innerHTML ='Valoare lui "nr" extern este: '+nr; </script>
In cadrul unei functii se poate crea si apela alta functie.
Functiile si variabilele create direct intr-o functie nu pot fi utilizate in afara ei
<div id='dv1'>Continut HTML</div> <script> //o functie definita standard in care se creaza si se apeleaza un 'arrow function' function f1(x){ //arrow function imbricata let f2 =(x)=>{ return 'X dublat este: '+ (x*2); } //daca x < 4 adauga in #dv1 rezultat returnat de f2() if(x <4) document.getElementById('dv1').innerHTML = f2(x); } f1(3); //daca se incearca apelarea lui f2(), apare eroare in consola din browser f2(3); //ReferenceError: f2 is not defined </script>
Functiile anonime nu au un nume, ele nu pot fi apelate, ci se creaza direct ca argument transmis la apelarea altei functii.
Functiile anonime pot fi definite standard (utilizand cuvantul 'function') sau cu modul 'arrow function'.
setTimeout()
din JavaScript necesita doua argumente la apelare, primul e o functie, al doilea e o valoare numeria (milisecunde).
<div id='dv1'>Div-ul #dv1</div><br> <div id='dv2'>Div-ul #dv2</div> <script> //primul argument transmis e o functie anonima, care va fi executata de setTimeout() dupa 2 secunde window.setTimeout( function(){ document.getElementById('dv1').innerHTML ='<h3>Viata e Fericire; Bucurati-va.</h3>'; }, 2000); //primul argument e o functie anonima (arrow function), executata de setTimeout() dupa 3 secunde window.setTimeout( ()=>{ document.getElementById('dv2').innerHTML ='<h3>Fiecare zi e placuta; Bucurati-va.</h3>'; }, 3000); </script>
<form action="script.php" method="post"> ... </form>
#id { background-color: #bbfeda; box-shadow: 11px 11px 5px #7878da; }
var fruits = ["mar", "cireasa", "banana"]; fruits.shift(); alert(fruits.length); // 2
if(extension_loaded("PDO") === true) echo "PDO este valabil."
Can I listen to music? - Pot asculta muzica?
Me gustan las frutas dulces. - Imi plac fructele dulci.