Creare obiecte, proprietati si metode

Curs Javascript

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.

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

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:

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

- Acest script va avea ca rezultat afisarea a doua ferestre Alert (una dupa alta). Click pe: Ex. 1
- 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:

<script type="text/javascript"><!--
var Sites = new Object();
  Sites.url = 'https://marplo.net/';
alert(Sites.url);
//--></script>

- Click pe buttonul: Ex. 2 pentru a vedea rezultatul.

Ca valoare a proprietatii se poate folosi si rezultatul unei functii ce a fost mai inainte creata, dupa cum se vede in urmatorul exemplu.

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

- Ca sa vedeti rezultatul, testati singuri acest 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).

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

- Prin apelarea celor doua metode: "getSuma" si "getId", vor fi executate functiile asociate lor, acestea returnand fiecare cate o fereastra Alert, dupa cum puteti vedea daca dati click pe: Ex. 3
- 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

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

- Ca sa vedeti rezultatul acestui script, dati click pe: Ex. 4

<p>Cursuri, Jocuri, Anime: <em>www.MarPlo.net</em></p>

h3 {
  padding: 2px 0.2em;
}

// preia primul Div cu class="cls", si afiseaza continutul
var elm = document.querySelector("div.cls");
alert(elm.innerHTML);

if(isset($_POST["field"])) {
  echo $_POST["field"];
}

We speak english.
- Noi vorbim engleza.

Nosotros hablamos español.
- Noi vorbim spaniola.