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>

Un Test simplu in fiecare zi

HTML
CSS
JavaScript
PHP-MySQL
Engleza
Spaniola
Care tag defineste zona de click intr-o harta creata dintr-o imagine?
<map> <img> <area>
<img src="image.jpg" usemap="#map1">
<map name="map1">
  <area shape="rect" coords="9, 120, 56, 149" href="#">
  <area shape="rect" coords="100, 200, 156, 249" href="#">
</map>
Ce proprietate CSS indica ce sa se intample cand continutul unui element depaseste dimensiunile lui?
display overflow position
#id {
  overflow: auto;
}
Clic pe evenimentul care este declansat cand mouse-ul e deasupra unui obiect.
onclick onmouseover onmouseout
document.getElementById("id").onmouseover = function(){
  document.write("Sa ai Viata Buna");
}
Indicati variabila PHP ce contine datele adaugate in adresa URL, dupa caracterul "?".
$_SESSION $_GET $_POST
if(isset($_GET["id"])) {
  echo $_GET["id"];
}
Clic pe pronumele reflexiv care e potrivit in propozitia: "Marc is the boy ... won the prize".
who which whoever
Marc is the boy who won the prize.
- Marc e baiatul care a castigat premiul.
Clic pe pronumele reflexiv care e potrivit in propozitia: "Voy a ver al pintor de ... les hablé ayer".
que quien cuyo
Voy a ver al pintor de quien les hablé ayer.
- Ma duc sa vad pictorul despre care ti-am vorbit ieri.
Definire si Utilizare Clase in JavaScript

Last accessed pages

  1. Prezent perfect si Prezent perfect continuu - Present perfect and Continuous (27825)
  2. Prezentul simplu si continuu - Present Tense Simple and Continuous (40194)
  3. Trecutul simplu si continuu - Past Tense Simple and Continuous (28303)
  4. Data si Ora in engleza - Date and Time (6142)
  5. Adverbele in limba engleza - Adverbs (11233)

Popular pages this month

  1. Gramatica limbii engleze - Prezentare Generala (2881)
  2. Conditional IF in Limba Engleza - Fraze Conditionale (2194)
  3. Cursuri si Tutoriale: Engleza, Spaniola, HTML, CSS, Php-Mysql, JavaScript, Ajax (1962)
  4. Curs HTML gratuit Tutoriale HTML5 (1959)
  5. Creare si editare pagini HTML (1476)