Tutorial MooTools pasul 4 Functii

In al patrulea dintre aceste tutoriale, vom lasa la o parte un pic discutia despre MooTools si vom discuta despre functii in JavaScript. Bineinteles insa, programatorii trebuie sa stie unde exact sa plaseze aceste functii la MooTools. In toate exemplele de pana acum, am plasat codul in interiorul functiei domready. Totusi, cand vine vorba de functii, acestea trebuie plasate in afara buclei domready si executate in momentul apelarii acestora din domready.

Cea mai buna idee este sa tineti cat mai mult din codul javascript in afara paginii si sa il apelati cu ajutorul unei incluziuni de javascript, totusi, daca doar ne jucam cu portiuni mici de cod, cum o facem in acest tutorial, e mai usor sa tinem totul in aceeasi pagina, folosind urmatoarea conventie:

Toate exemplele urmaresc acest format, ceea ce inseamna ca functia este executata la incarcarea paginii.

Exista mai multe metode de a defini functii in javascript, dar devreme ce ne ocupam de MooTools in special, vom folosi metodologia preferata a acestei biblioteci. Declaram o variabila numita exemplu_functie si o definim ca o functie:

var exemplu_functie = function(){
// apoi adaugam o alerta la apelarea functiei
alert('Acesta este un exemplu de functie');
// apoi inchidem definirea functiei cu o acolada
}

De notat faptul ca neinchiderea acoladelor e una din cele mai frecvente greseli, iar la o secventa mare de cod, este si destul de greu de observat, deci in general trebuie acordata o mare atentie inchiderii definirii functiilor.

Puteti vedea totul in exemplul de mai jos. Dupa declararea functiei, adaugam apelarea acesteia la incarcarea paginii prin evenimentul domready.

//Defineste exemplu_functie ca o functie
var exemplu_functie = function(){
	alert('Acesta este un exemplu de functie');
}
 
window.addEvent('domready', function() {
        //apeleaza exemplu_functie cand dom-ul este activ
        exemplu_functie();
});

E foarte folositor sa ai bucati de cod pe care le poti apela oriunde, dar si mai folositor este cand ii poti adauga parametri cu care sa lucreze. Pentru a folosi parametri cu functii, trebuie sa adaugi un nume de variabila intre parantezele functiei, astfel:

var nume_functie = function(parametru){
    /*codul functiei*/
}

O data ce ati facut acest lucru, variabila este disponibila in interiorul functiei. In exemplu de mai jos voi defini o functie cu un singur parametru ce trimite o alerta continand valoarea acelui parametru. Observati ca desi prima parte a mesajului e scrisa in apostrofuri, parametrul nu este. Cand doriti sa folositi parametri in combinatie cu strinuri, trebuie sa le concatenati folosind simbolul "+":

var nume_functie = function(parameter){
        alert('parametrul este : ' + parameter);
}
window.addEvent('domready', function(){
        nume_functie('parametrul 1');
});
}

JavaScript nu limiteaza numarul de parametri ce pot fi definiti pentru o functie. In general e o idee buna sa pastrezi numarul de parametri ai unei functii la un nivel minim, din considerente de lizibilitate. Parametrii multipli in definitia unei functii sunt separati printr-o virgula, si functioneaza la fel ca la functiile cu un singur parametru. Functia din exemplul de mai jos ia doua numere, si plaseaza suma dintre acestea in variabila "suma":

var suma = un_numar + alt_numar;

Apoi, operatorul "+", este folosit intr-o alta maniera, pentru a concatena sirurile de stringuri:

alert(un_numar + " plus " + alt_numar + " egal " + suma);

Desi poate parea confuz, este destul de simplu: daca folosim operatorul "+" intre doua numere, acesta le aduna; daca il folosim intre orice combinatie de numere si stringuri, acesta le concateneaza intr-un singur sir de stringuri:

var functie_cu_parametri = function(un_numar, alt_numar){
        //obtine suma celor doua numere
        var suma = un_numar + alt_numar;
 
        //afiseaza rezultatele
        alert(un_numar + " plus " + alt_numar + " egal " + suma);
}
window.addEvent('domready', function(){
	functie_cu_parametri(7, 9);
});

Afisarea rezultatelor functiei cu ajutorul unui "alert" poate fi de ajutor, dar cateodata veti dori sa folositi acele rezultate in alta parte, iar pentru acest lucru trebuie sa le salvati. Pentru acest lucru trebuie sa folositi "return".

return suma;

Observati ca veti face mai multe lucruri si in domready. Pentru a afisa aceasta valoare, ii alocam unui parametru numit "valoare_returnata" , valoarea returnata de functie, si apoi afisam o alerta:

var functie_cu_return = function(un_numar, alt_numar){
		var suma = un_numar + alt_numar;
		return suma;
}
window.addEvent('domready', function(){
	var valoare_returnata = functie_cu_return(7,9);
	alert("valoarea returnata este : " + valoare_returnata);
});

Daca va uitati la codul domready in care scriem linii de cod, veti observa ca folosim o functie ca parametru. O functie folosita astfel, ca parametru, poarta numele de functie anonima.

window.addEvent('domready', function(){
	/*cod*/
});

Exista si posibilitatea de a folosi domready fara a folosi o functie anonima:

//creeaza functia care sa fie apelata in domready
var functie_domready = function(){
	/*cod*/
}
//aplica functia evenimentului domready
window.addEvent('domready', functie_domready);

Desi nu exista nici o diferenta intre cele doua metode, decat poate de stil, de acum incolo voi folosi predominant prima varianta. In tutorialul urmator, vom vorbi ceva mai mult despre evenimentele MooTools.

Pentru mai multe detalii, cititi tutorialele de pe site-ul MooTools.

Alex B.

3Comentarii la "Tutorial MooTools pasul 4 Functii"

  1. coscho spune:

    Salut Merci pentru tutorial. ?i acum întrebarea: Cum ppot seta inaltimea si latimea ferestrei popup. Unde pot gasi parametri acestei functii?

  2. coscho spune:

    ... parametrii evenimentului domready ...

  3. bonousdox spune:

    invatat o multime

Adauga Comentariu

Mesaj

Trimite