Definire si Utilizare Clase in JavaScript

Ca sa definiti o clasa in JavaScript, se poate folosi direct declaratia clss cu numele clasei.

class numeClasa {
 constructor(params){
 //proprietati
 }

 //metode
}

- Un alt mod, adaugarea clasei la o variabila:

let varClasa = class {
 constructor(params){
 //proprietati
 }

 //metode
}

Diferenta este faptul ca "varClasa" este o variabila, valoarea ei poate fi schimbata.

- "params" reprezinta argumentele care se transmit cand e creat un obiect al clasei (cu cuvantul new).

let obj = new numeClasa(argumente);

//sau
let ob2 = new varClasa(argumente);

Clase JS - Proprietati si Metode

Proprietatile se definesc in constructor(), folosind cuvantul: this.
constructor() e o metoda speciala care e automat apelata cand se creaza o instanta de obiect al clasei (prin cuvantul: new).
In corpul clasei, proprietatile si metodele se apeleaza aplicand cuvantul: this (sau numele clasei pentru metode statice).
In afara clasei, proprietatile si metodele se apeleaza folosind numele instantei de obiect (sau numele clasei pentru metode statice).

- Exemplu de clasa simpla JavaScript:

<div id='ex_res'>Aici e afisat rezultatul.</div>

<script>
class Rectangle {
 //primeste doua argumente la crearea unui obiect al clasei
 constructor(width, height){
 //setare proprietati
 this.width = width;
 this.height = height;
 }

 //o metoda simpla, foloseste proprietatile definite in constructor
 area(){
 return this.width * this.height;
 }

 //alta metoda (primeste un argument); ca sa vedeti cum se apeleaza o metoda in alta
 multipliArea(n){
 return this.area() *n;
 }
}

//utilizare, creare instanta de obiect a clasei, cu new
let ob_rect = new Rectangle(5, 3);

//preia valorile returnate de metodele area() si multipliArea()
var area = ob_rect.area();
var m_area = ob_rect.multipliArea(3);

//adauga in elementul html #ex_res valorile de la area si m_area
document.getElementById('ex_res').innerHTML ='area() method returned: '+ area +'<br>multipliArea(3) returned: '+ m_area;
</script>

Metode Statice

Metodele statice din corpul clasei se creaza folosind cuvantul: static.
Atat in interiorul cat si in exteriorul clasei, metodele statice se apeleaza cu "numele-clasei".

O metoda statica nu poate fi apelata cu "this", nici prin numele instantei de obiect.

- Exemplu:

<div id='ex2_res'>Aici e afisat rezultatul.</div>

<script>
class User {
 //primeste un nume de user cand se creaza un obiect de clasa
 constructor(user){
 //setare proprietate
 this.user = user;
 }

 //metoda statica
 static Hello(name){
 return 'Hello '+ name;
 }

 //metoda standard, ca sa vedeti cum se apeleaza o metoda statica in clasa
 titleHello(){
 var re = User.Hello(this.user);
 return '<h2>'+ re +'</h2>';
 }
}

//utilizare, creaza un obiect al clasei
let ob_usr = new User('MarPlo');

//adauga in elementul html #ex2_res valoarea returnata de titleHello()
document.getElementById('ex2_res').innerHTML = ob_usr.titleHello();

//preia valoarea returnata de metoda statica (folosind numele clasei)
var hello = User.Hello('Peace');
alert(hello);
</script>

Mai multe instante de obiect ale unei clase

Se pot crea mai multe instante de obiect cu aceeasi clasa, cu valori diferite.
- Exemplu:

<div id='ex_hi1'>#ex_hi1 div</div>
<div id='ex_hi2'>#ex_hi2 div</div>

<script>
class Test {
 constructor(name){
 this.name = name;
 }

 //adauga 'Helo name' in elementul HTML #id
 addHello(id){
 document.getElementById(id).innerHTML ='<h3>Hello '+ this.name +'</h3>';
 }
}

//prima instanta de obiect
let ob1 = new Test('Happines');
ob1.addHello('ex_hi1'); //apeleaza metoda cu ID-ul unui Div

//a doua instanta de obiect
let ob2 = new Test('Peace');
var hi2 = ob2.addHello('ex_hi2'); //apeleaza metoda cu alt ID
</script>

Metode de clasa Getter si Setter

Sintaxa getter/setter exista pentru proprietati care se definesc bazate pe anumite conditii sau alte proprietati.
Metoda "getter" se defineste cu cuvantul: get.
Metoda "setter" se defineste cu cuvantul: set.
"getter" si "setter" trebuie sa aibe acelasi nume.
Metoda setter trebuie sa aibe un argument. Este apelata automat cand se atribuie o valoare unei proprietati cu acelasi nume ca 'setter'; valoarea atribuita va fi argumentul transmis metodei.

- Puteti intelege din codul din acest exemplu:

<div id='ex3_res'>Aici e afisat rezultatul.</div>

<script>
class Article {
 constructor(){
 this.th1 ='No title';
 }

 //getter, returneaza valoarea proprietatii th1 setata in setter
 get title(){
 return this.th1;
 }

 //setter, e apelata cand o valoare (val) e atribuita proprietatii: title
 set title(val){
 if(val !='') this.th1 ='<h1>'+ val +'</h1>';
 }
}

//creaza obiect al clasei
let ob_art = new Article();

//seteaza o valoare proprietatii: title
//aceasta va apela automat metoda setter title() cu valoarea ca argument
ob_art.title ='MarPlo.net - Clase JS';

//acest cod apeleaza automat metoda getter: title()
var th1 = ob_art.title;

//adauga in elementul html #ex3_res valoarea de la th1
document.getElementById('ex3_res').innerHTML = th1;
</script>

<<-classList - Lucru cu .. -- Subclase cu extends si ..->>

Un Test simplu in fiecare zi

HTML

CSS

JavaScript

PHP-MySQL

Engleza

Spaniola

Ce atribut face un buton radio sau checkbox sa fie selectat?

checked="checked" selected="selected" disabled="disabled"

<input type="checkbox" name="a_name" value="value" checked="checked" />

Ce valoare CSS redimensioneaza imaginea de fundal pana la marimea elementului?

repeat-x contain linear-gradient

#id {
  background:url("path_to_image.png");
  background-size:contain;
  background-repeat:no-repeat;
}

Ce operator se foloseste pentru restul impartirii a doua numere?

% * /

var rest8_7 = 8 % 7;
alert(rest8_7);

Indicati functia PHP care rotunjeste numarul la valoarea intreaga mare.

floor() ceil() abs()

$nr = ceil(3.5);
echo $nr;        // 4

Indicati articolul corect la cuvantul "bike" in propozitia: "Alex wants to buy ... bike".

An The A

Alex wants to buy a bike.
- Alex vrea sa cumpere o bicicleta.

Indicati articolul nedefinit corect pentru cuvantul: "libros" (carti)

unos una un

Leí unos libros.
- Am citit niste carti.