Javascript. Obiecte si evenimente
Download
Report
Transcript Javascript. Obiecte si 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 bazat pe
obiecte; nu dispune de clase,
Proceduri (Metode)
Date
(atribute)
Reprezentarea grafica a unui obiect
4. Obiectele se construiesc cu ajutorul funcţiilor constructor,
exemplu:
<script language="javascript" type="text/javascript">
function Masina(model, culoare)
{ this.model=parametru;
this.culoare="Alb Casablanca"; }
</script>
5. Pentru a le deosebi de alte funcţii obişnuite, funcţiile constructor
încep cu majusculă
2
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)
4. Exemplu de folosire a obiectului
UD masina şi afişare a proprietăţilor:
<script language="javascript">
function Masina(model, culoare)
in antet { this.model=model;
this.culoare=culoare; }
</script>
<pre>
model
culoare
Proprietăţile obiectului masina
<script language="javascript">
var masina_mea=new Masina("Logan", “Alb");
//scrie "Logan"
in body document.writeln(masina_mea.model);
//scrie "Alb"
document.writeln(masina_mea.culoare);
</script>
</pre>
Puteţi crea mai multe
instanţe
ale obiectului
masina, cu
atribute (proprietăţi)
diferite,
şi afişa respectivele
atribute.
3
III. JavaScript. Obiecte şi evenimente
<head><title>obiect cu doua proprietati</title>
<script language="javascript">
function Masina(model,color){
this.model=model;
this.culoare=color;
}
</script></head>
<body><pre>
<script language="javascript" type="text/javascript">
var masina_mea=new Masina("Logan","Alb Casablanca");
//scrie "Logan"
document.writeln("Masina mea: "+masina_mea.model);
//scrie "Alb Casablanca"
document.writeln("culoarea: "+masina_mea.culoare);
var masina_ta=new Masina("Nisan","Gris petrol");
//scrie "Nisan"
document.writeln("culoarea: "+masina_ta.model);
//scrie "Gris petrol"
document.writeln("Masina ta: "+ masina_ta.culoare);
</script>
</pre></body>
4
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ă
var TVA=0.19;
function pret_DDP() {
var pret_final=this.pret_CIP*(1+TVA);
return pret_final;
}
function discount() {
var discount=this.pret_CIP*(1+TVA)*0.12;
return discount;}
Pasul 2. Asociem metodele obiectului masina
function Masina(PC){
this.pret_CIP=PC;
this.pret_DDP=pret_DDP;
this.discount=discount;
}
5
III. JavaScript. Obiecte şi evenimente
Metodele obiectelor
Pasul 3. Folosim metodele: instanţiem obiectul şi accesăm metodele:
<script language="javascript">
var masina_mea=new Masina(12000);
document.write("Pret DDP: "+masina_mea.pret_DDP());
document.write("<br/>Valoare discount: " +
masina_mea.discount());
</script>
pret_DDP()
valoare_discount()
model
culoare
Despre this şi .
this este cuvânt cheie care face referire la
obiectul curent care a apelat la funcţia
Obiectul masina cu metode şi proprietăţi
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 prin parantezele care însoţesc metodele: obiect.metodă()
6
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 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;
7
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: încasări şi
Cheltuieli. Creaţi două instanţe ale obiectelor şi afişaţi proprietăţile.
Exerciţiul 2
Modificaţi exemplul de mai sus incluzând in proprietăţile obiectului
încasările şi cheltuielile. Adăugaţi o metodă, profit(), care să determine
profitul din diferenţa dintre venituri şi cheltuieli şi alta informatii() care să
afişeze proprietăţile obiectului
8
III. JavaScript. Obiecte şi evenimente
Obiecte predefinite
Document
Form[]
Plugin[]
Applet[]
Anchor[]
Frame[]
History
Navigator
Plugin
Text
Mime Type
FileUpload
Password
Notă
Hidden
Când sunt utilizate în cod, numele
obiectelor se scriu cu minusculă.
minusculă
Area[]
Reset
Image[]
Radio
Layer[]
Location
Textarea
Submit
Link[]
Window
Checkbox
Când se face referire la un obiect,
trebuie referiţi toţi strămoşii
acestuia
Modelul obiect JavaScript
Button
Select
Options[]
9
III. JavaScript. Obiecte şi evenimente
Obiectul Window - proprietăţi
Proprietatea
Descriere
defaultStatus
Textul implicit de pe bara de stare
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
10
III. JavaScript. Obiecte şi evenimente
Obiectul Window - proprietăţi
Exemplu utilizare defaultStatus şi status
<html>
<head>
<script language="javascript">
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>
11
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 fereastra
open()
Deschide o fereastra nouă
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
12
III. JavaScript. Obiecte şi evenimente
Obiectul Window - metode
Exemplu utilizare metoda open
<html>
<head>
<script language="javascript">
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>
13
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
14
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="#" onclick="openwin('http://www.google.ro',
600,400,100,200); return false">Deschide Google</a>
<p><a href="#" onclick="w1.close(); return false">Inchide
fereastra</a></p>
• return false are rolul de a bloca comportamentul implicit al link-ului;
• începând cu Firefox 2, acest navigator nu mai permite închiderea ferestrelor
care nu au fost deschise de Javascript. Vezi cum e posibil, fără a modifica
configurările navigatorului aici.
15
III. JavaScript. Obiecte şi evenimente
Obiectul Location
Permite încărcarea unei pagini din interiorul alteia
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
Exemplu
* selectiv
location.href="http://www.usv.ro"; Aceasta este
window.location="http://www.usv.ro";
proprietatea location a
obiectului Window!
16
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>
17
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){
document.writeln("Numele de cod: "+appCodeName);
document.writeln("Numele navigatorului: "+appName);
document.writeln("Versiunea: "+ appVersion);
//document.writeln("Limba: "+language);
document.writeln("Platforma: "+platform);
document.writeln("Aagentul: "+userAgent);}
18
III. JavaScript. Obiecte şi evenimente
Obiectul Navigator
Detectarea tipului de navigator
<script language = "JavaScript">
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ă
19
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
20
III. JavaScript. Obiecte şi evenimente
Descriere
Denumire
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
21
III. JavaScript. Obiecte şi evenimente
Evenimente asociate
obiect
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
Dacă nu se
introduce nimic in
caseta prompt, aceasta
întoarce “null”
script language="javascript">
function varsta(){
varsta_ta=prompt("cati ani ai?","introdu varsta");
alert("varsta ta este "+varsta_ta);
}
</script>
<a href="#a", onclick=varsta()>Exemplu onClick</a>
22
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)
23
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)
24
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
25