Sunteți pe pagina 1din 36

III. JavaScript.

Obiecte şi evenimente

• Obiecte, clase şi constructori


• Proprietăţi şi metode
• Moştenirea şi prototipuri
• Etichete HTML şi evenimente
• Handler-e de evenimente

1
III. JavaScript. Obiecte şi evenimente
1. Obiectele sunt secvenţe de cod şi date care pot fi
tratate ca un tot unitar,
2. Un obiect conţine valorile datelor care descriu natura
obiectului (proprietăţi sau atribute) şi accepta câteva
funcţii (metode),
3. JavaScript este un limbaj orientat pe obiecte, la origini
fiind doar bazat pe obiecte;
Proceduri (Metode)
4. Începând cu versiunea 2015
Date
dispune de clase, ca orice (atribute)
limbaj OOP.

Reprezentarea grafica a unui obiect

2
III. JavaScript. Obiecte şi evenimente
1.Obiectele se construiesc cu ajutorul funcțiilor constructor, exemplu:
<script>
function Masina(model, culoare){
this.model=model;
this.culoare=culoare; }
</script>

2. Pentru a le deosebi de alte funcții obișnuite, funcțiile


constructor încep cu majusculă
3. Clasele se declară folosind declarația de clasă:

<script>
class Masina{
constructor(model, culoare){
this.model=model;
this.culoare=culoare;
}
}
</script>
3
III. JavaScript. Obiecte şi evenimente
1. Există obiecte JavaScript predefinite şi obiecte definite de utilizator (UD)
2. Obiectul UD masina are proprietăţile model şi culoare
3. Instanţierea unui obiect se face cu
ajutorul cuvântului cheie new Proceduri (Metode)
model
4. Exemplu de folosire a obiectului
culoare
UD masina şi afişare a proprietăţilor:
<script>
function Masina(model, culoare){
în antet this.model=model;
Proprietăţile obiectului Masina
this.culoare=culoare; }
</script>
<pre> Puteţi crea mai multe
<script>
instanţe
var masina_mea=new Masina(„Opel", “negru");
ale obiectului
//scrie "Opel" masina, cu
atribute (proprietăţi)
în body console.log(masina_mea.model);
//scrie "negru" diferite,
console.log(masina_mea.culoare); şi afişa respectivele
</script> atribute.
</pre> 4
III. JavaScript. Obiecte şi evenimente
<head><title>obiect cu doua proprietati</title>
<script>
function Masina(model,color){
this.model=model;
this.culoare=color;
}
</script></head>
<body>
<script type="text/javascript">
var masina_mea=new Masina("Logan","Alb");
//scrie "Logan"
console.log("Masina mea: "+masina_mea.model);
//scrie "Alb"
console.log("culoarea: "+masina_mea.culoare);
var masina_ta=new Masina("Nissan", "Argintiu");
//scrie "Nissan"
console.log("culoarea: "+masina_ta.model);
//scrie „Argintiu"
console.log("Masina ta: "+ masina_ta.culoare);
</script>
</body> 5
III. JavaScript. Obiecte şi evenimente
În cazul în care dorim să folosim clasele pentru a crea, codul este:

<script>
class Masina {
constructor(model, color) {
this.model = model;
this.color = color;
}
}
</script>

constructor este o metodă specială folosită pentru a inițializa un obiect creat


cu cuvântul cheie class
În continuare instanțierea obiectelor și accesul la proprietăți este identic cu
modul anterior
<script type="text/javascript">
var masina_mea=new Masina("Logan","Alb");
//scrie "Logan"
</script>
6
III. JavaScript. Obiecte şi evenimente
Metodele obiectelor
Vom considera obiectul masina cu metodele ce permit calculul preţului
DDP şi a discountului
Pasul 1. Implementarea funcţiilor metodă
function pret_cuTVA(TVA) {
var pret_final=this.pret*(1+TVA);
return pret_final;
}

function discount(cota_discount, TVA) {


var val_discount=this.pret_cuTVA(TVA)*cota_discount;
return val_discount;
}

Pasul 2. Asociem metodele obiectului masina


function Masina(pret){
this.pret=pret;
this.pret_cuTVA=pret_cuTVA;
this.discount=discount;
}

7
III. JavaScript. Obiecte şi evenimente
Metodele obiectelor
Pasul 3. Folosim metodele: instanţiem obiectul şi accesăm metodele:
<script>
var masina_mea=new Masina(12000);
console.log("Pret cu TVA: "+masina_mea.pret_cuTVA(0.2));
console.log("Valoare discount: " + masina_mea.discount(0.12, 0.20));
</script>

Despre this şi . pret_cuTVA()


discount()
this este cuvânt cheie care face referire la
model
obiectul curent care a apelat la funcţia
culoare
constructor. El face diferenţa intre funcţiile
obişnuite şi funcţiile constructor.
Punctul . separă obiectele de proprietăţi şi
metode. Deosebim proprietăţile de metode Obiectul masina cu metode şi
prin parantezele care însoţesc metodele: proprietăţi
obiect.metodă()

8
III. JavaScript. Obiecte şi evenimente
Definirea Metodelor claselor
<script>
class Masina { Se definesc clasa și
constructor(model, color, pret) { proprietățile cu ajutorul
this.model = model; metodei constructor,
this.color = color; ca în exemplul
this.pret = pret; anterior, slide 6
}
pret_tva(TVA){ Se definește metoda
return this.pret*(1+TVA); pret_tva
}
}
var masina_mea=new Masina("Logan","Alb",10000);
Se apelează metoda
document.write(masina_mea.pret);
document.write("<br>"+masina_mea.pret_tva(0.19));
</script>

9
III. JavaScript. Obiecte şi evenimente
Moştenirea şi prototipuri
• Obiectele moştenesc proprietăţile şi metodele funcţiilor constructor din care
sunt instanţiate
• După instanţierea unui obiect i se pot adăuga noi proprietăţi, ex:
masina_ei= new Masina ("ford", "argintiu");
masina_ei.motor=1.4;
• Proprietăţile adăugate unui obiect prin extinderea funcţiei constructor sunt
valabile numai pentru obiectul respectiv
• Cu ajutorul proprietăţii prototype se pot adăuga noi proprietăţi și metode
funcţiei constructor şi, astfel, tuturor obiectelor instanţiate cu respectiva
funcţie: masina_ei= new Masina ("ford", "argintiu");
masina.prototype.motor=1.4;

• În exemplul de mai sus toate obiectele masina vor avea proprietatea


motor egală cu 1.4, ceea ce nu este adevărat. Se obişnuieşte să se
adauge noua proprietate la prototip atribuindu-i o valoare nulă. Valorile
specifice sa stabilesc pentru fiecare instanţă a obiectului în parte.
masina.prototype.motor=null;
masina_mea.motor=1.6; 10
III. JavaScript. Obiecte şi evenimente
Exerciţii
Exerciţiul 1
Creaţi un obiect numit firma cu următoarele proprietăţi:
• Nume
• Profil /comerţ/producţie/transport/servicii
• Adresa
• Numar_salariati
Adăugaţi, folosind proprietatea prototype, două proprietăţi:
forma_organizare şi cifra_afaceri. Creaţi două instanţe ale obiectelor
şi afişaţi proprietăţile.

Exerciţiul 2
Modificaţi exemplul de mai sus adăugând o metodă, schimbare_nr_salariati(),
care să permită schimbarea numărului de salariați prin indicarea valorii cu care
se modifică acesta și care să afişeze proprietăţile obiectului după modificare

11
III. JavaScript. Obiecte şi evenimente
Modelul obiect JavaScript
Obiecte predefinite Window

Document Frame[] Location History Navigator

Form[] Textarea Plugin


Text
Plugin[] Mime Type
FileUpload
Applet[] Password Notă
Hidden Când sunt utilizate în cod, numele
Anchor[]
Submit obiectelor se scriu cu minusculă.
minusculă
Area[] Reset Când se face referire la un obiect,
Radio trebuie referiţi toţi strămoşii
Image[]
acestuia
Checkbox
Link[]
Button
Layer[] Select Options[]
12
III. JavaScript. Obiecte şi evenimente
Obiectul Window - proprietăţi
Proprietatea Descriere
defaultStatus Textul implicit de pe bara de stare // depășit
document Referinţă la obiectul Document
frames[] Un tablou care conţine lista cadrelor ferestrei
history Referinţă la obiectul History
location Referinţă la obiectul Location
opener Obiectul Window care deschide altă fereastră
parent Cadrul părinte, care conţine alte cadre
self Autoreferire la obiectul Window
status Text temporar scris pe bara de stare
top Cel mai de sus obiect Window care conţine cadrul curent
window Autoreferire la obiectul Window – identică cu self
name Numele ferestrei
13
III. JavaScript. Obiecte şi evenimente
Obiectul Window - proprietăţi
Exemplu utilizare defaultStatus şi status
<html>
<head>
<script>
function changestatus(){
window.status="mesaj schimbat";
}
function setstatus(){
window.status="mesaj implicit";
}
</script>
<title>status</title>
</head>
<body onload="setstatus()">
<a href="#a" onmouseover="changestatus(); return true;"
onmouseout="setstatus()">schimba mesajul de stare</a>
</body>
</html>
14
III. JavaScript. Obiecte şi evenimente
Obiectul Window - metode
Metoda Descriere
alert() Afiseaza o casetă de atenţionare, cu un buton OK
blur() Anulează focalizarea de pe un obiect dintr-o fereastră
clearTimeout() Anulează un timp setat
close() Închide o fereastră
confirm() Afişează o casetă de confirmare cu un buton OK şi unul
Cancel
focus() Face focus pe un obiect din fereastră
open() Deschide o fereastra nouă (pop-up window)
moveTo(x,y) Mută fereastra în punctul la x px de marginea stângă și y
px de marginea de sus a ferestrei browser-ului.
prompt() Afișează o casetă de dialog solicitând introducerea unei
informații
setTimeout() Execută o funcție după un număr specificat de milisecunde

15
III. JavaScript. Obiecte şi evenimente
Obiectul Window - metode
Exemplu utilizare metoda open
<html>
<head>
<script>
function openwin(){
window.open("http://www.google.com","");
}
</script>
<title>status</title>
</head>
<body>
<a href="#a" onclick="openwin()" >deschide o fereastra
noua</a>
</body>
</html>

16
III. JavaScript. Obiecte şi evenimente
Obiectul Window - metode
Se pot specifica anumite caracteristici pentru fereastra deschisă cu ajutorul
metodei open, după sintaxa:
window.open("URL", "nume_fereastra", "lista_caracteristici");
Caracteristica Descriere Valori
directories Include bara de instrumente 0 /1 (Yes/No)
height Stabileşte înălţimea unei ferestre h, pixeli
menubar Include bara de meniuri 0 /1 (Yes/No)
resizable Stabileşte dacă fereastra poate fi redimensionată 0 /1 (Yes/No)
scrollbars Include barele de derulare 0 /1 (Yes/No)
status Include bara de stare 0 /1 (Yes/No)
toolbar Include bara de butoane standard 0 /1 (Yes/No)
width Stabileşte lăţimea unei ferestre w, pixeli

left, top Stabilesc poziţia pe orizontală şi verticală x,y pixeli


17
III. JavaScript. Obiecte şi evenimente
Exemplu metode open() și close()
<script>
function openwin(locatie,w,h,t,l){
var atribute="width="+w+", height="+h +", top="+t+",
left="+l;
w1=window.open(locatie, "", atribute);
}
</script>

<a href="javascript: void(0)"


onclick="openwin('http://www.google.ro',
600,400,100,200)"> Deschide Google</a>
<p><a href="javascript:void(0)" onclick="w1.close()
">Inchide fereastra</a></p>

Din motive de protecție, browser-ele moderne nu mai permit închiderea


ferestrelor care nu au fost deschise de JavaScript.
Dacă fereastra pop-up nu are nume, la fiecare click se va deschide o nouă
fereastră.
18
III. JavaScript. Obiecte şi evenimente
Obiectul Location
Permite încărcarea unei pagini din interiorul alteia * selectiv

Proprietatea* Descriere
hash Ancora unui URL
host O combinaţie între un URL şi port
hostname Numele gazdei unui URL
href Adresa URL completă
pathname Calea URL ului
protocol Protocolul URL ului

metoda Descriere
reload() Echivalent butonului Refresh sau Reload
replace() Înlocuieşte URL ul curent cu un altul
assign() Atribuie un nou URL ferestrei curente

19
III. JavaScript. Obiecte şi evenimente

• Dacă URL="http://seap.usv.ro:80/ro/locatie.html",
atunci codul de mai jos va afișa rezultatul din imagine:
<script>
with(document){
console.log (location.protocol)
console.log (location.pathname)
console.log (location.hostname)
}
</script>
Exemple
location.assign(http://www.usv.ro); Toate exemplele
produc același effect,
location.href="http://www.usv.ro"; încărcarea în browser
a adresei www.usv.ro
window.location="http://www.usv.ro";
Redirectarea se face cu proprietatea location
a obiectului Window 20
III. JavaScript. Obiecte şi evenimente
Obiectul History
Obiectul History păstrează lista cu istoricul tuturor documentelor deschise pe
durata unei sesiuni a browserului:
Metoda Descriere
back() Echivalentă apăsării butonului Back
forward() Echivalentă apăsării butonului Forward
go() Deschide un anume document din lista cu istoricul

history.back() este echivalent cu history.go(-1)


history.forward() este echivalent cu history.go(1)
history.go(-2) deschide pagina cu două poziţii în urmă în listă
history.go(+2) deschide pagina cu două poziţii în faţă în listă
Exemple
<a href="#a" onclick="history.back()">inapoi</a>
<a href="javascript:history.back()">inapoi</a>
<a href="#a" onclick="history.go(-2)">inapoi 2 pagini</a>
21
III. JavaScript. Obiecte şi evenimente
Obiectul Navigator * Nu este suportată de Internet Explorer
Obiectul Navigator este folosit pentru a obţine informaţii despre browserul curent
Proprietatea Descriere
appCodeName Numele de cod al browser-lui
appName Numele browser-ului
appVersion Versiunea browser-ului
language* Limbajul (engleză, franceză) folosit de browser
platform Sistemul de operare folosit
userAgent Agentul utilizatorului
Exemplu
with (navigator){
console.log("Numele de cod: "+appCodeName);
console.log("Numele navigatorului: "+appName);
console.log("Versiunea: "+ appVersion);
//console.log("Limba: "+language);
console.log("Platforma: "+platform);
console.log("Aagentul: "+userAgent);} 22
III. JavaScript. Obiecte şi evenimente
Obiectul Navigator
Detectarea tipului de navigator
<script>
var browser = '';
var version = '';
// BROWSER?
if (browser == ''){
if (navigator.appName.indexOf('Microsoft') != -1)
browser = 'IE'
else if (navigator.appName.indexOf('Netscape') != -1)
browser = 'Netscape'
else browser = 'IE';
}
</script>

Tema
Folosind exemplul de mai sus, scrieţi un script care sa afişeze tipul
navigatorului şi versiunea, într-o manieră prietenoasă

23
III. JavaScript. Obiecte şi evenimente
• Evenimentele sunt acţiuni care pot fi detectate de Javascript
• Fiecare element dintr-un document HTML are asociate evenimente care pot
declanşa funţii Javascript
• Evenimentele sunt captate de handler-e de eveniment. Numele handler-elor
este identic cu al evenimentelor dar sunt prefixate de particula on
• Evenimentele se definesc în interiorul etichetelor HTML

Exemple de evenimente:
• Apăsarea unui buton de pe mouse
• Încărcarea unei imagini sau a unei pagini
• Selectarea unui element de formular de tip INPUT
• Modificarea de către utilizator a conţinutului unui element de formular
• Apăsarea unei taste
• Mişcarea mouse-ului desupra unei zone hotspot dintr-o imagine
• Expedierea unui formular HTML
24
III. JavaScript. Obiecte şi evenimente

Denumire Descriere
eveniment
abort O acţiune a utilizatorului a oprit încărcarea unei imagini sau a unui document
blur Un cadru, document sau un obiect de formular pierde focalizarea pentru intrare

click Se produce când se dă click pe un link sau hotspot dintr-o imagine

change Se produce când când un câmp dintr-un formular este modificat de utilizator şi îşi
pierde focalizarea
error Se produce o eroare la încărcare unui document sau a unei imagini

focus Un cadru, document sau un obiect de formular căştigă focalizarea pentru intrare

load Se produce când o imagine sau un documentHTML s+a terminat de încărcat în


browser
mouseOut Evenimentul se produce când cursorul mouse-ului părăseţte un link sau un
hotspot a unei imagini
mouseOver Se produce atunci când cursorul mouse-ului este plasat deasupra unei legaturi
sau hotspot al unei imagini
reset Utilitatorul resetează un formular (mai general, un obiect)
submit Utilizatorul trimite un formular
unload Documentul este închis de utilizator 25
III. JavaScript. Obiecte şi evenimente

obiect Evenimente asociate

imagine abort, error, load


formular blur, change, focus, reset, select, submit
harta imagine mouseOut, mouseOver
linkuri click, mouseOut, mouseOver
ferestre blur, error, focus, load, unload.

Handler-ele Javascript nu sunt Case-sensitive.

Exemplu onClick
<script>
function varsta(){
varsta_ta=prompt("cati ani ai?","introdu varsta");
Dacă nu se
alert("varsta ta este "+varsta_ta);
introduce nimic in
}
caseta prompt, aceasta
</script>
întoarce “null”
<a href="#" onclick="varsta() ">Exemplu onClick</a> 26
III. JavaScript. Obiecte şi evenimente
Obiectul Date
Este folosit pentru a lucra cu date calendaristice şi timpi.
Un obiect Date se creează cu
var myDate=new Date();
Metode
metoda descriere
getFullYear() Returnează anul, în format 4 digiţi
getMonth() Returnează luna, în domeniul 0-11!
getDate() Returnează ziua lunii, în domeniul 1-31
getDay() Returnează ziua săptămânii (domeniul este 0-6).
0=duminică, 1=luni, etc.
getHours() Returnează ora (în domeniul 0-23).
getMinutes() Returnează minutele (în domeniul 0-59)
getSeconds() Returnează secundele (în domeniul 0-59)
getTime() Returnează numărul de milisecunde scurse de la
01.01.1970 (GMT)
27
III. JavaScript. Obiecte şi evenimente
Obiectul Date
Metode
metoda descriere
setFullYear(an) Setează anul, în format 4 digiţi
setMonth(luna) Setează luna, în domeniul 0-11!
setDate(ziua) Setează ziua lunii, în domeniul 1-31
setHours(ora) Setează ora (în domeniul 0-23)
setMinutes(minute) Setează minutele (în domeniul 0-59)
setSeconds(sec.) Setează secundele (în domeniul 0-59)
setTime(milisec.) Setează data folosind numărul de milisecunde scurse
de la 01.01.1970 (GMT)

28
III. JavaScript. Obiecte şi evenimente
Obiectul Math
Permite calcule complexe prin intermediul metodelor
Metode
metoda descriere
Math.abs(a) Valoarea absoluta a lui a
Math.acos(a) / Math.asin(a) Arccosinusul / arcsinusul lui a
Math.tan(a) / Math.atan(a) Tangenta / arctangenta lui a
Math.ceil(a) Intregul cel mai aproape de a dar nu mai mic
Math.cos(a) / Math.sin(a) Cosinusul /sinusul lui a
Math.exp(a) E la puterea a
Math.log(a) Logaritmul natural al lui a
Math.min(a,b) / Math.max(a,b) Minimul /maximul dintre a şi b
Math.pow(a,b) a la puterea b
Math.random() Număr pseudo-aleatoriu între 0 şi 1
Math.round(a) Intregul cel mai apropiat de a
Math.sqrt(a) Radacina patrată a lui a
29
III. JavaScript. Obiecte şi evenimente

• Proprietăți ale obiectului Math


Proprietăți
Proprietatea Semnificație
Math.E Constanta e
Math.PI Pi
Math.SQRT2 Radăcină pătrată din2
Math.SQRT1_2 Radăcină pătrată din 1/2

Math.LN2 Logaritm natural din 2 (ln(2))


Math.LN10 Logaritm natural din 10 (ln(10))
Math.LOG2E Logaritm in baza 2 din e (log2(e))

Math.LOG10E Logaritm in baza 10 din e (log10(e))

30
III. JavaScript. Obiecte şi evenimente
• Obiectul String
Proprietăți
Proprietatea Semnificație
length Lungimea șirului
prototype Permite adăugarea de proprietăți și metode
obiectului

Metode*
Metoda Semnificație
charAt() Întoarce caracterul din poziția specificată ca
argument
charCodeAt() Întoarce codul Unicode al caracterului din
poziţia specificată ca argument
concat() Concatenează două sau mai multe șiruri
* selectiv
31
III. JavaScript. Obiecte şi eveniment
• Metode (continuare)
Metode*
Metoda Semnificație
indexOf() Întoarce poziția primei apariții a unei valori specificate
lastIndexOf() Întoarce poziția ultimei apariții a unei valori specificate
replace() Înlocuiește un subșir cu un altul specificat
slice() Extrage subșirul dintre două poziții specificate
substr() Extrage un număr de caractere începând cu o poziție
specificată și cu lungime specificată ca argument
substring() Extrage un număr de caractere între două poziții
specificate
toLowerCase() Convertește un șir în caractere minuscule
toUpperCase() Convertește un șir în caractere majuscule
trim() Elimină spațiile de la începutul și sfârșitul șirului

32
III. Exemple obiectul String
• Metoda toUpperCase()
<script>
function go_upper() {
document.getElementById('surname').value=
document.getElementById('surname').value.toUpperCase()
}
</script>
<body>
<input type="text" id="surname" placeholder="Your Surname"
onkeyup="go_upper()">
</body>

• Metoda trim()
<script>
sir= " Hello ";
console.log(sir.length)
console.log(sir.trim().length);
</script>

33
III. JavaScript. Obiecte şi evenimente
• Obiectul Array()
Proprietăți
Proprietatea Semnificație
length Lungimea tabloului (nr. de elemente)
prototype Permite adăugarea de proprietăți și metode
elementelor obiectului

Metode*
Metoda Semnificație
toString() Convertește elementele tabloului într-un șir
cu elementele separate prin virgula
join() Similar cu toString() doar ca permite folosirea
unui separator furnizat ca argument
pop() Elimină ultimul element al tabloului
* selectiv
34
III. JavaScript. Obiecte şi evenimente
• Obiectul Array() * Sortarea privește elementele ca pe
șiruri și în cazul valorilor nu
Metode*
funcționează corect
Metoda Semnificație
push() Adaugă un element la sfârșitul tabloului
pop() Elimină ultimul element al tabloului
shift() Elimină primul element al tabloului și le deplasează pe cele
rămase spre stânga
unshift() Adaugă un element nou la începutul tabloului și
deplasează celelalte elemente spre dreapta
concat() Concatenează elementele mai multor tablouri
slice() Extrage un număr de elemente începând cu poziția
specificata până la o poziție specificata, exclusiv
sort() Aranjează în ordine crescătoare elementele tabloului*
reverse() Aranjează în ordine descrescătoare elementele tabloului*

35
III. JavaScript. Obiecte şi evenimente
• Obiectul Array()
– Pentru sortarea tablourilor numerice se folosește o
funcție de comparare
var tablou = [6, 11, 1, 5, 2, 37];
tablou.sort(); //gresit
document.write(tablou)
tablou.sort(function(a, b){return a - b}); //corect
document.write("<br>");
document.write(tablou)
– Pentru găsirea minimului/maximului se sortează
elementele crescător sau descrescător și primul
element este valoarea dorită

36