JavaScript-obiecte Evenimente

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
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
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
<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
Î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
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
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
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
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
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
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
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
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
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
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
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
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
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
• 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
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
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
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
• 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
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
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
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
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
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
• 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
• Obiectul String
Proprietăți
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*
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
• Obiectul Array()
Proprietăți
length Lungimea tabloului (nr. de elemente)
prototype Permite adăugarea de proprietăți și metode
elementelor obiectului
Metode*
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
• Obiectul Array() * Sortarea privește elementele ca pe
șiruri și în cazul valorilor nu
Metode*
funcționează corect
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
• 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

JavaScript-obiecte Evenimente

Încărcat de

Informații document

Titlu original

Drepturi de autor

Formate disponibile

Partajați acest document

Partajați sau inserați document

Opțiuni de partajare

Vi se pare util acest document?

Este necorespunzător acest conținut?

Drepturi de autor:

Formate disponibile

JavaScript-obiecte Evenimente

Încărcat de

Drepturi de autor:

Formate disponibile

III. JavaScript.

• Obiecte, clase şi constructori

Reprezentarea grafica a unui obiect

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

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

function discount(cota_discount, TVA) {

Pasul 2. Asociem metodele obiectului masina

Despre this şi . pret_cuTVA()

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

Document Frame[] Location History Navigator

Form[] Textarea Plugin

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

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

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

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

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

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

obiect Evenimente asociate

imagine abort, error, load

Handler-ele Javascript nu sunt Case-sensitive.

• Proprietăți ale obiectului Math

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

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

S-ar putea să vă placă și