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
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.
Definire si Utilizare Clase in JavaScript

Last accessed pages

  1. Darurile pe care le dau imi apartin (3)
  2. Dumnezeu este iubirea în care iert (14)
  3. Laravel - Upload Fisiere (307)
  4. Jokes - Glume, Bancuri, Humor (2) (5554)
  5. Utilizare array (901)

Popular pages this month

  1. Cursuri si Tutoriale: Engleza, Spaniola, HTML, CSS, Php-Mysql, JavaScript, Ajax (1004)
  2. Curs HTML gratuit Tutoriale HTML5 (723)
  3. Curs si Tutoriale JavaScript (661)
  4. Curs si Tutoriale Ajax (617)
  5. Curs CSS Online Tutoriale CSS3 (605)