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 tag se foloseste pentru a adauga liste in elemente <ul> si <ol>?

<ul>
 <li>http://coursesweb.net/html/</li>
 <li>http://www.marplo.net/html/</li>
</ul>

Care valoare a proprietatii "display" seteaza elementul ca tip bloc si afiseaza un punct in fata?

block list-item inline-block

.some_class {
  display: list-item;
}

Care instructiune JavaScript transforma un obiect in sir JSON.

JSON.parse() JSON.stringify eval()

var obj = {
 "courses": ["php", "javascript", "ajax"]
};
var jsonstr = JSON.stringify(obj);
alert(jsonstr);    // {"courses":["php","javascript","ajax"]}

Indicati clasa PHP folosita pentru a lucra cu elemente HTML si XML in PHP.

stdClass PDO DOMDocument

$strhtml = '<body><div id="dv1">CoursesWeb.net</div></body>';
$dochtml = new DOMDocument();
$dochtml->loadHTML($strhtml);
$elm = $dochtml->getElementById("dv1");
echo $elm->nodeValue;    // CoursesWeb.net

Indicati forma de Prezent Continuu a verbului "to live" (a trai /a locui)

lived living liveing

I`m living here.
- Traiesc /Locuiesc aici.

Care este forma de Gerunziu (sau Participiu Prezent) a verbului "vivir" (a trai /a locui)?

vivió vivido viviendo

Estoy viviendo aquí.
- Traiesc /Locuiesc aici.