In aceasta lectie puteti invata cum se pot crea clase in JavaScript cu metode care pot fi inlantuite.
Inlantuirea metodelor inseamna accesarea mai multor metode, sau functii ale unui obiect, intr-o singura instructune.

obiect.metoda_1().metoda_2()
Cerinta prin care se pot accesa metode inlantuite este ca metoda precedenta (aici metoda_1()) sa returneze instanta de obiect (this).
• Sintaxa:
class NumeClasa {
 constructor(){
 //aici se pot defini proprietati
 }

 metoda_1(){
 // un cod JavaScript

 return this; // returneaza instanta de obiect
 }

 metoda_2(){
 // instructiuni JavaScript
 }
}

- Iata un exemplu, un o clasa JavaScript prin care se pot calcula aria si perimetrul dreptunghiului (vedeti comentariile din cod si testati-l).
class Rectangle {
 constructor(){
 //proprietati
 this.a =0;
 this.b =0;
 }

 // seteaza valorile pt. a si b
 setAB(a1, b1){
 this.a = a1;
 this.b = b1;

 return this; // returneaza instanta de obiect
 }

 // returneaza aria
 area(){
 return this.a * this.b;
 }

 // returneaza perimetru
 perimeter(){
 return 2 * (this.a + this.b);
 }
}

// creaza o instanta de obiect a clasei
var obR = new Rectangle();

// seteaza valorile laturilor si obtine aria si perimetru
var area = obR.setAB(7, 8).area();
var perimeter = obR.setAB(7, 8).perimeter();

// test
document.write('Aria = '+ area +'<br>Perimetru = '+ perimeter);

Multiple metode inlantuite

Se pot apela mai mult de doua metode inlantuite, folosind acelasi principiu: toate metodele accesate precedent trebuie sa returneze instanta de obiect (this).


- Iata un exemplu de inlantuire trei metode. O clasa JavaScript ce poate crea un tag HTML, cu ID, atribut "class" si continut (studiati codul si testati-l).
class setTag {
 constructor(){
 //proprietati
 this.id = ''; // atributul id
 this.cls = ''; // atributul class
 }

 // seteaza id-ul
 setId(id1){
 this.id = ' id="'+ id1 +'"';

 return this; // returneaza instanta de obiect
 }

 // seteaza atributul class
 setClass(cls1){
 this.cls =' class="'+ cls1 +'"';

 return this; // returneaza instanta de obiect
 }

 // returneaza tag-ul HTML si continutul
 getTagCnt(tag, cnt){
 return '<'+ tag + this.id + this.cls +'>'+ cnt +'</'+ tag+ '>';
 }
}

// creaza o instanta de obiect a clasei
var obTag = new setTag();

// variabile cu tipul tag-ului si continut
var tag = 'div';
var cnt = 'https://marplo.net';

// apeleaza metodele inlantuite pt. setare ID, "class", si obtine un <div> cu aceste atribute si continut
var getTag = obTag.setId('some_id').setClass('a_class').getTagCnt(tag, cnt);

// test
document.write(getTag); //<div id="some_id" class="a_class">https://marplo.net</div>
Instructiunea cu metodele inlantuite din codul de mai sus:
var getTag = obTag.setId('some_id').setClass('a_class').getTagCnt(tag, cnt);
E la fel cu acest cod:
// seteaza pe rand ID-ul, "class", apoi obtine tag-ul cu continutul
obTag.setId('some_id');
obTag.setClass('a_class');
var getTag = obTag.getTagCnt(tag, cnt);

Un Test simplu in fiecare zi

HTML
CSS
JavaScript
PHP-MySQL
Engleza
Spaniola
Ce atribut indica faptul ca un camp de formular trebuie completat?
required="required" autofocus="autofocus" placeholder="text"
<input type="text" name="name1" required="required" />
Ce metoda CSS misoreaza sau mareste dimensiunile unui element (inclusiv continutul)?
translate() scale() skew()
#some_id:hover {
  transform: scale(2, 1.5);
  -ms-transform: scale(2, 1.5);    /* IE 9 */
  -moz-transform: scale(2, 1.5);   /* Firefox */
}
Click pe metoda obiectului Date care returneaza ziua din luna.
setDate() getMonth() getDate()
var rightnow = new Date();
var day = rightnow.getDate();
alert(day);
Ce functie este folosita pentru a incarca un fisier pe server?
is_file() move_uploaded_file() fopen()
if(move_uploaded_file($_FILES["field_name"]["tmp_name"], "dir/file_name")) {
  echo "Fisierul a fost incarcat";
}
Cum se spune in engleza expresia: "Ploua cu galeata"?
rain cats and dogs rain buckets quiet rain
In Bucharest it`s raining cats and dogs.
- In Bucuresti ploua cu galeata.
Cum se spune in spaniola expresia: "Ploua cu galeata"?
llover cubo llover a cántaros lluvia tranquila
En Madrid está lloviendo a cántaros.
- In Madrid ploua cu galeata.
Creare clase in JavaScript cu Metode care pot fi inlantuite

Last accessed pages

  1. Curs si Tutoriale Ajax (33299)
  2. Alphabet and Pronunciation - Alfabetul si pronuntia in limba engleza (40214)
  3. Cursuri si Tutoriale: Engleza, Spaniola, HTML, CSS, Php-Mysql, JavaScript, Ajax (118004)
  4. Gradele de comparatie: comparative, superlative (24849)
  5. Trecutul simplu si continuu - Past Tense Simple and Continuous (53960)

Popular pages this month

  1. Cursuri si Tutoriale: Engleza, Spaniola, HTML, CSS, Php-Mysql, JavaScript, Ajax (1053)
  2. Curs HTML gratuit Tutoriale HTML5 (760)
  3. Curs si Tutoriale JavaScript (691)
  4. Curs si Tutoriale Ajax (658)
  5. Curs CSS Online Tutoriale CSS3 (637)