Pagina 1 din 1

[Tutorial JS]Crearea de obiecte, proprietati si metode

Scris: Sâm Noi 16, 2013 12:15 am
de Justin Bieber
Nume Tutorial:Crearea de obiecte, proprietati si metode
Descriere:Ca si in alte limbaje de programare, obiectele sunt folosite pentru a organiza codul intr-o forma mai clara si compacta.
Pe langa obiectele predefinite pe care le contine JavaScript, cum ar fi: "window", "document", "date", si altele; pot fi create de programator si folosite in acelasi fel si alte obiecte, cu propriile metode si proprietati.
In acest tutorial este explicat modul de creare a unui obiect si adaugarea de proprietati si metode.
Download:
Autor:
Sursa (Link-ul oficial):
tutorialeweb.net
Propria parere:Nu l-am incercat.
Tutorialul:
1. Crearea de obiecte JavaScript

Forma cea mai simpla de creare a unui obiect in JS este prin intermediul sintaxei:
"var nume_obiect = new Object()"
- Tehnic, un obiect JavaScript este un Array asociativ, format din proprietati si metode.

Un Array asociativ se formeaza in felul urmator (aici cu 2 elemente):

Cod: Selectaţi tot

var nume_array = new Array();
  nume_array['key1'] = 'valoarea asociata primei chei';
  nume_array['key2'] = 'valoarea asociata cheii doi';
Valorile fiecarui element se pot obtine in 2 moduri, cu sintaxele:
nume_array['cheie']
sau
nume_array.cheie
- Iata o mica demonstratie:

Cod: Selectaţi tot

<script type="text/javascript"><!--
var nume_array = new Array();
  nume_array['key1'] = 'valoarea asociata primei chei';
  nume_array['key2'] = 'valoarea asociata cheii doi';

// Utilizarea formulei cu paranteze drepte
alert('Cu paranteze drepte: '+ nume_array['key1']);

// Utilizarea formulei cu punct (.)
alert('Cu punct: '+ nume_array.key2);
//--></script>
- La fel se poate proceda si cu obiectele, in cazul acestora de obicei se utilizeaza formula cu punct.
2. Adaugarea proprietatilor

Proprietatile se definesc dupa ce a fost creat obiectul, cu "new Object()".
Forma cea mai directa de a defini proprietati cu anumite valori unui obiect este dupa urmatoarea formula:
nume_obiect.nume_proprietate = 'Valoare';

- Sau, avand in vedere ca obiectul este un Array asociativ, se poate folosi si sintaxa:
nume_obiect['nume_proprietate'] = 'Valoare';
Iata un exemplu:

Cod: Selectaţi tot

<script type="text/javascript"><!--
var Sites = new Object();
  Sites.url = 'http://www.marplo.net/';
alert(Sites.url);
//--></script>
Ca valoare a proprietatii se poate folosi si rezultatul unei functii ce a fost mai inainte creata, dupa cum se vede in urmatorul exemplu.

Cod: Selectaţi tot

<script type="text/javascript"><!--
// Se creaza functia a carei rezultat va fi valoarea unei proprietati
function f_pro(x, y) {
    var produsul = x*y;
    return produsul;
}

// Se creaza obiectul si o proprietate cu valoarea data de functia f_pro()
var obiect = new Object();
  obiect.produs = f_pro(7, 8);

// Se da Alert cu valoarea proprietatii
alert(obiect.produs);
//--></script>
3. Definirea metodelor

In principiu, metodele sunt functii, iar valoarea obtinuta prin apelarea unei metode este rezultatul returnat de functia asociata metodei respective.
Ca si proprietatile, metodele se definesc prin notatia cu punct (.), dupa crearea obiectului. Iar ca valoare se asociaza o functie. Sintaxa generala este urmatoarea:
nume_obiect.nume_metoda = functie
- Functia poate fi creata inainte si asociata prin numele ei, sau poate fi creata direct in momentul definirii metodei, cu formula:
nume_obiect.nume_metoda = function() { ... codul functiei }
Iata un exemplu din care se intelege mai bine. Se creaza un obiect cu doua metode. Primei metode i-se asociaza o functie creata inainte, iar pentru a doua metoda functia e creata direct in codul definirii ei (dupa sintaxa de mai sus).

Cod: Selectaţi tot

<script type="text/javascript"><!--
// Se creaza functia ce va fi asociata unei metode
function f_suma(a, b) {
    var suma = a+b;
    return alert('Suma este: '+ suma);
}

// Se defineste obiectul "Obj" cu proprietatea "id" si metodele "getSuma" si "getId"
var Obj = new Object();
  Obj.id = 'tutoriale';
  Obj.getSuma = f_suma;
  Obj.getId = function() {
      var idul = 'Id-ul obiectului este: '+ this.id;
      alert(idul);
  };

// Se apeleaza metoda "getSuma"
Obj.getSuma(7, 8);

// Se apeleaza metoda "getId"
Obj.getId();
//--></script>
- Observati ca pentru asocierea functiei "f_suma()" la metoda "getSuma" s-a folosit doar numele (fara parantezele rotunde), iar la apelul metodei se tine cont de cei 2 parametri ai functiei (a, b), si metoda se apeleaza cu 2 numere ca parametri.
- Un alt aspect important in acest exemplu este utilizarea sintaxei "this.id". Cuvantul this se foloseste de obicei in interiorul metodelor si mereu face referire la obiectul curent prin care e apelata metoda. "id" este proprietatea obiectului "Obj". Astfel, formula "this.id" returneaza valoarea proprietatii "id" a obiectului curent (Obj).
4. Imbricarea obiectelor

Prin imbricarea obiectelor se intelege crearea de obiecte in interiorul altui obiect. Astfel, proprietatea unui obiect (valoarea ei) poate fi un Array sau chiar un alt obiect.
Studiind exemplul urmator si explicatiile din el, se poate intelege modul de realizare a obiectelor imbricate

Cod: Selectaţi tot

<script type="text/javascript"><!--
// Se creaza un obiect principal "Cursuri", cu 2 proprietati: "tip" si "sites", si o metota "getCurs()"
// Prima proprietate, "tip", va avea ca valoare un Array cu 2 elemente
// A doua, "sites", va avea ca valoare un alt obiect ce va avea si el o proprietate "url"
// Metoda "getCurs()" va prelua, dupa un parametru, o valoare din prima proprietate si pe cea din "url", prin a doua proprietate

var Cursuri = new Object();
  Cursuri.tip = new Array('lectii', 'tutoriale');         // Prima proprietate
  Cursuri.sites = new Object();         // A doua proprietate (obiect intern)
  Cursuri.sites.url = 'www.marplo.net';         // proprietatea obiectului intern
  Cursuri.getCurs = function(nr) {         // Metoda obiectului "Cursuri"
      var sir1 = this.tip[nr];         // Preia o valoare din proprietatea "tip"
      var sir2 = this.sites.url;         // Preia valoarea proprietatii "url" (a obiectului imbricat)
      return sir1+ ' - '+ sir2
  };

// Da un alert cu apelarea metodei "getCurs"
alert(Cursuri.getCurs(1));
//--></script>
[/b]