Curs Javascript


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.

Sintaxa:
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.

- Exemplu:
//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.

O functie fara parametri se apeleaza in felul urmator:
nume_functie();
- Exemplu, se defineste o functie care adauga un text intr-un element HTML:
<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>
O functie care contine parametri se apeleaza in felul urmator:
nume_functie(v1, v2);
- 'v1, v2' sunt valorile care se transmit functiei si sunt asociate in aceeasi ordine cu parametri adaugati la definirea ei.

O functie o data creata poate fi utilizata (apelata) de mai multe ori.
Iata un exemplu cu o functie care adauga in elementul HTML cu id-ul transmis un text adaugat la apelare.
<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>
- Iata si un exemplu cu 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>

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.


- Exemplu, se creaza o functie si o variabila care vor fi apelate in cadrul altei functii:
<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>
Valoarea unei variabile creata in afara functiei nu e afectata daca in interiorul unei functii se defineste (cu 'let' sau 'var') o variabila cu acelasi nume.
- Exemplu:
<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


- Exemplu, apelare functie imbricata:
<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'.


- Exemplu, functia predefinita 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>

Un Test simplu in fiecare zi

HTML
CSS
JavaScript
PHP-MySQL
Engleza
Spaniola
Care tag defineste zona de click intr-o harta creata dintr-o imagine?
<map> <img> <area>
<img src="image.jpg" usemap="#map1">
<map name="map1">
  <area shape="rect" coords="9, 120, 56, 149" href="#">
  <area shape="rect" coords="100, 200, 156, 249" href="#">
</map>
Ce proprietate CSS indica ce sa se intample cand continutul unui element depaseste dimensiunile lui?
display overflow position
#id {
  overflow: auto;
}
Clic pe evenimentul care este declansat cand mouse-ul e deasupra unui obiect.
onclick onmouseover onmouseout
document.getElementById("id").onmouseover = function(){
  document.write("Sa ai Viata Buna");
}
Indicati variabila PHP ce contine datele adaugate in adresa URL, dupa caracterul "?".
$_SESSION $_GET $_POST
if(isset($_GET["id"])) {
  echo $_GET["id"];
}
Clic pe pronumele reflexiv care e potrivit in propozitia: "Marc is the boy ... won the prize".
who which whoever
Marc is the boy who won the prize.
- Marc e baiatul care a castigat premiul.
Clic pe pronumele reflexiv care e potrivit in propozitia: "Voy a ver al pintor de ... les hablé ayer".
que quien cuyo
Voy a ver al pintor de quien les hablé ayer.
- Ma duc sa vad pictorul despre care ti-am vorbit ieri.
Definire si Utilizare Functii in JS

Last accessed pages

  1. Exercitii engleza - English Tests and exercises - Grammar (109369)
  2. Harti de imagini (8785)
  3. Verbe reflexive 1 (10189)
  4. Creare link-uri (18523)
  5. Curs HTML gratuit Tutoriale HTML5 (187187)

Popular pages this month

  1. Cursuri si Tutoriale: Engleza, Spaniola, HTML, CSS, Php-Mysql, JavaScript, Ajax (635)
  2. Conditional IF in Limba Engleza - Fraze Conditionale (550)
  3. Gramatica limbii engleze - Prezentare Generala (446)
  4. Exercitii engleza - English Tests and exercises - Grammar (382)
  5. Coduri pt culori (372)