Definire si Utilizare Functii in JS

Curs Javascript

• Instructiunea return
• Apelarea functiilor
• Functii si domeniul variabilelor
• Functii imbricate
• Functii Anonime

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.

Creare (definire) functii

Exista mai multe moduri de a crea o functie in JavaScript.

1. Modul standard - folosind cuvantul function urmat de numele functiei si doua paranteze rotunde.
   Sintaxa:

   function nameFun(p1, p2){
    //codul care va fi executat
   }
   

   - 'nameFun' reprezinta numele functiei. Poate fi orice nume ca si la variabile.
   - 'p1, p2' sunt parametri fuunctiei, si reprezinta valorile care trebuie sa le primeasca functia cand este apelata. Acestia sunt optionali (poate fi definita si fara parametri).
   Parametri sunt necesari cand se doreste transmiterea de date care sa fie utilizate in codul functiei. Se pot adauga unul sau mai multi parametri, cat sunt necesari.
   - Exemplu, fara parametru:

   function fun1(){
    alert('Love yourself; love everyone.');
   }
   

2. Functii atribuite la variabile - se adauga ca valori la variabile, si se apeleaza cu numele variabilei.
   Sintaxa:

   var nameVar = function(p1, p1){
    //codul care va fi executat
   }
   

   - 'nameVar' e numele variabilei dar si al functiei utilizat la apelarea ei.
   - 'p1, p2' sunt parametri functiei (optionali).
   - Exemplu:

   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.

   
   
3. Arrow functions - functii definite fara cuvantul "function"; se foloseste o prescurtare: "()=>".
   Diferit la acestea e faptul ca nu au propriul this (care face referire la obiectul functiei).
   Sintaxa:

   var nameVar = (p1, p1)=>{
    //codul care va fi executat
   }
   

   - 'p1, p2' sunt parametri functiei (optionali).
   - Exemplu:

   var fun1 = ()=>{
    alert('Love yourself; love everyone.');
   }
   

Instructiunea return

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;
}

Apelarea functiilor

Dupa ce am creat o functie, pentru a fi folosita, functia trebuie apelata.

<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>

<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>

Functii si domeniul variabilelor

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>

Functii imbricate

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>

Functii Anonime

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'.

<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>