Curs 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>

Un Test simplu in fiecare zi

HTML
CSS
JavaScript
PHP-MySQL
Engleza
Spaniola
Care atribut specifica metoda HTTP de trimitere (GET, POST) a datelor din formular?
action method value
<form action="script.php" method="post"> ... </form>
Ce proprietate CSS adauga umbra la chenar?
background-image box-shadow border-radius
#id {
  background-color: #bbfeda;
  box-shadow: 11px 11px 5px #7878da;
}
Clic pe functia care elimina primul element dintr-un array?
pop() push() shift()
var fruits = ["mar", "cireasa", "banana"];
fruits.shift();
alert(fruits.length);           // 2
Indicati functia cu care se poate verifica daca un anumit modul e instalat in PHP.
function() filetype() extension_loaded()
if(extension_loaded("PDO") === true) echo "PDO este valabil."
Alegeti verbul auxiliar corect care trebuie in propozitia: " ... I listen to music?".
has have Can
 Can I listen to music?
- Pot asculta muzica?
Alegeti verbul corect care trebuie in propozitia: "Me ... las frutas dulces"
están gustan gusta
Me gustan las frutas dulces.
- Imi plac fructele dulci.
Definire si Utilizare Clase in JavaScript

Last accessed pages

  1. Viitor perfect (4091)
  2. Gramatica limbii spaniole. Indrumator si prezentare generala (67213)
  3. Genul substantivelor 1 (9096)
  4. Exemple de conversatii in limba engleza (4912)
  5. Proverbe, expresii si zicatori (23381)

Popular pages this month

  1. Cursuri si Tutoriale: Engleza, Spaniola, HTML, CSS, Php-Mysql, JavaScript, Ajax (215)
  2. Gramatica limbii engleze - Prezentare Generala (179)
  3. Exercitii engleza - English Tests and exercises - Grammar (167)
  4. Prezentul simplu si continuu - Present Tense Simple and Continuous (115)
  5. Coduri pt culori (110)