Java Script
Încărcat de
Aasfsadfg AasdgsadgJava Script
Încărcat de
Aasfsadfg AasdgsadgCUPRINS
1. INTRODUCERE N JAVASCRIPT ................................14
Ce este JavaScript? .................................................................................... 14
Ce poate face JavaScript? .......................................................................... 14
Cum se insereaz JavaScript ntr-o pagin HTML................................... 15
Browsere care nu recunosc JavaScript...................................................... 16
2. INSERAREA SCRIPTURILOR JS.................................16
Scripturi n <head>.................................................................................. 16
Scripturi n <body>.................................................................................. 17
Scripturi n <head> i <body>................................................................. 17
Folosirea unui script extern ....................................................................... 18
3. INSTRUCIUNI JAVASCRIPT ......................................18
Blocuri JavaScript...................................................................................... 19
4. COMENTARII JAVASCRIPT ........................................19
Comentarii multi-linie................................................................................ 20
Folosirea comentariilor pentru a preveni execuia .................................... 20
5. VARIABILE JAVASCRIPT ............................................21
Exemplu...................................................................................................... 21
Declararea variabilelor JavaScript............................................................ 22
6. OPERATORII JAVASCRIPT ........................................ 23
Operatorii aritmetici .................................................................................. 23
Operatorii de atribuire ............................................................................... 23
Operatorul + utilizat pentru iruri de caractere ........................................ 23
Adunarea irurilor i a numerelor ............................................................. 24
7. OPERATORII DE COMPARARE I OPERATORII
LOGICI.............................................................................. 24
Operatorul condiional ............................................................................... 25
8. INSTRUCIUNILE CONDIIONALE ............................ 25
Instruciunea if ......................................................................................... 26
Instruciunea ifelse.............................................................................. 26
Instruciunea if...else if...else .................................................. 27
Instruciunea switch ................................................................................ 29
9. CASETE POPUP .......................................................... 30
Caseta Alert ................................................................................................ 30
Caseta Confirm........................................................................................... 30
Caseta Prompt ............................................................................................ 31
10. FUNCII...................................................................... 33
Definirea unei funcii.................................................................................. 33
Instruciunea return ................................................................................ 34
Durata de via a variabilelor JavaScript.................................................. 34
Exemple ...................................................................................................... 35
11. INSTRUCIUNEA FOR ................................................37
12. INSTRUCIUNEA WHILE............................................38
Instruciunea do...while.............................................................................. 39
13. INSTRUCIUNILE BREAK I CONTINUE.....................39
Instruciunea break.................................................................................. 39
Instruciunea continue ........................................................................... 40
14. INSTRUCIUNEA FOR...IN .....................................41
15. EVENIMENTELE JAVASCRIPT .................................42
Evenimentele onLoad i onUnload......................................................... 42
Evenimentele onFocus, onBlur i onChange ....................................... 42
Evenimentul onSubmit ............................................................................ 43
Evenimentele onMouseOver i onMouseOut ......................................... 43
16. INSTRUCIUNEA TRY...CATCH ...............................43
Exemple ...................................................................................................... 44
17. INSTRUCIUNEA THROW............................................46
18. INSERAREA CARACTERELOR SPECIALE..............48
9
19. OBIECTELE JAVASCRIPT ........................................ 49
Programarea orientat pe obiecte .............................................................. 49
Proprieti................................................................................................... 49
Metode ........................................................................................................ 49
20. OBIECTUL STRING.................................................... 49
Proprietile obiectului String ................................................................ 50
Metodele obiectului String ...................................................................... 50
Metode mpachetate n taguri HTML ........................................................ 50
Exemple ...................................................................................................... 51
21. OBIECTUL DATE ........................................................ 58
Setarea datei ............................................................................................... 58
Compararea a dou date calendaristice..................................................... 58
Metodele obiectului Date........................................................................... 58
Exemple ...................................................................................................... 59
22. OBIECTUL ARRAY...................................................... 63
Crearea unui tablou.................................................................................... 63
Accesarea elementelor dintr-un tablou ...................................................... 63
Modificarea valorilor dintr-un tablou........................................................ 63
Proprietile obiectului Array .................................................................... 64
Metodele obiectului Array.......................................................................... 64
10
Exemple ...................................................................................................... 64
23. OBIECTUL BOOLEAN ..................................................74
Proprietile obiectului Boolean.............................................................. 74
Metodele obiectului Boolean ................................................................... 74
24. OBIECTUL MATH.........................................................75
Constante matematice ................................................................................ 75
Metode matematice .................................................................................... 76
Proprietile obiectului Math..................................................................... 76
Metodele obiectului Math .......................................................................... 76
Exemple ...................................................................................................... 77
25. OBIECTUL REGEXP....................................................79
Definire....................................................................................................... 79
Modificatorii............................................................................................... 79
Parantezele ptrate .................................................................................... 79
Metacaracterele.......................................................................................... 80
Cuantificatori ............................................................................................. 80
Proprietile obiectului RegExp................................................................ 81
Metodele obiectului RegExp...................................................................... 81
Exemple ...................................................................................................... 83
26. OBIECTUL NUMBER.....................................................87
11
Proprietile obiectului Number ................................................................ 87
Metodele obiectului Number ...................................................................... 87
Exemple ...................................................................................................... 88
27. OBIECTUL NAVIGATOR ............................................. 89
Navigator Object Properties....................................................................... 90
Exemple ...................................................................................................... 90
28. COOKIES ................................................................... 92
Crearea i memorarea unui cookie............................................................. 92
29. VALIDAREA FORMULARELOR................................ 95
Cmpuri obligatorii.................................................................................... 95
Validarea adresei de e-mail ........................................................................ 97
30. ANIMAIE................................................................... 98
31. IMAGINI MAPATE ...................................................... 99
32. PROGRAMAREA EVENIMENTELOR ..................... 101
Metoda setTimeout().......................................................................... 101
Metoda clearTimeout() ..................................................................... 103
33. CREAREA OBIECTELOR PROPRII ........................ 105
34. PROPRIETI I METODE GLOBALE................... 107
12
35. OBIECTELE BROWSERULUI ..................................111
Obiectul window...................................................................................... 111
Obiectul screen...................................................................................... 116
Obiectul history ................................................................................... 117
Obiectul location ................................................................................. 117
BIBLIOGRAFIE ...............................................................119
13
1. Introducere n JavaScript
JavaScript este cel mai popular limbaj pentru scripturi i funcioneaz n toate
browserele importante, cum ar fi Internet Explorer, Firefox, Chrome, Opera i
Safari.
Ce este JavaScript?
JavaScript a fost proiectat pentru a aduga interactivitate paginilor
HTML
JavaScript este un limbaj pentru scripturi
Un limbaj pentru scripturi este un limbaj de programare simplificat
JavaScript este, n general, nglobat direct n paginile HTML
JavaScript este un limbaj interpretat (adic scriptul este executat
direct, fr compilare prealabil)
JavaScript poate fi folosit fr licen
Java i JavaScript sunt dou limbaje complet diferite.
Java (dezvoltat de Sun Microsystems) este un limbaj mult mai puternic i mai
complex, din aceeai categorie cu C sau C++.
Ce poate face JavaScript?
JavaScript ofer proiectanilor HTML un instrument de
programare n general proiectanii paginilor HTML nu sunt
programatori, dar JavaScript este un limbaj cu o sintax foarte simpl
i aproape oricine poate insera mici secvene de cod n paginile HTML
JavaScript poate insera n mod dinamic text ntr-o pagin HTML
O instruciune JavaScript ca aceasta: document.write("<h1>"
+ name + "</h1>") poate scrie un text variabil n pagina HTML
JavaScript poate reaciona la evenimente Un cod JavaScript poate
fi proiecta s se execute cnd se ntmpl ceva, spre exemplu cnd
pagina s-a ncrcat complet sau utilizatorul acioneaz un element
HTML
JavaScript poate citi i scrie elementele HTML Un cod JavaScript
poate citi i modifica coninutul unui element HTML
JavaScript poate fi folosit pentru a valida datele Un cod
JavaScript poate fi folosit pentru a valida datele nainte de a fi trimise
ctre server. n acest fel serverul nu mai face procesri suplimentare.
JavaScript poate fi folosit pentru a detecta browserul
utilizatorului Un cod JavaScript poate detecta tipul browserului i
poate ncrca o pagin proiectat special pentru tipul respectiv de
browser
14
JavaScript poate fi folosit pentru a crea cookies Un cod
JavaScript poate fi utilizat pentru a stoca i extrage informaii pe
calculatorul vizitatorului paginii HTML
Cum se insereaz JavaScript ntr-o pagin HTML
Pentru a insera JavaScript ntr-o pagin HTML se utilizeaz tagul <script>.
n exemplul urmtor, JavaScript este utilizat pentru a scrie un text ntr-o pagin
web:
<html>
<body>
<h3>Afisarea unui mesaj cu JavaScript</h3> <hr/>
<script type="text/javascript">
document.write("Bine ati venit!");
</script>
</body>
</html>
Exemplul urmtor ilustreaz cum pot fi adugate taguri HTML pentru a
formata textul afiat cu JavaScript:
<html>
<body>
<h3>Utilizarea tagurilor HTML in mesajul afisat cu
JS</h3> <hr/>
<script type="text/javascript">
document.write("<h1>Bine ati venit!</h1>");
</script>
</body>
</html>
Explicaii:
Pentru a insera JavaScript ntr-o pagin HTML, folosim tagul <script> i n
interiorul acestui tag folosim atributul type pentru a defini limbajul n care este
scris scriptul. Deci tagurile <script type="text/javascript"> i
</script> marcheaz locul n care ncepe, respectiv se sfrete scriptul:
<html>
<body>
<script type="text/javascript">
...
</script>
</body>
</html>
Comanda document.write reprezint modalitatea JS standard pentru a
scrie un text ntr-o pagin . Deoarece aceast comand este inclus ntre
15
tagurile <script> i </script>, browserul o va recunoate drept comand
JS i va executa respectiva linie de cod. Pentru exemplul considerat, browserul
va scrie n pagin textul Bine ati venit!
Obs: Dac comanda document.write nu este inclus ntre tagurile de
script, browserul o va interpreta ca text obinuit i va afia pe ecran linia de
cod.
Browsere care nu recunosc JavaScript
Dac browserul nu recunoate JS, liniile de cod vor fi afiate ca atare n pagin.
Pentru a evita acest lucru, scriptul ar trebui ascuns n taguri de comentariu. n
exemplul urmtor, scriptul este scris ntre tagurile de comentariu:
<html>
<body>
<script type="text/javascript">
<!-document.write("Bine ati venit!");
//-->
</script>
</body>
</html>
Ultimele dou caractere // reprezint simbolul JS pentru comentariu i sunt
scrise pentru a mpiedica JS s execute tagul -->.
2. Inserarea scripturilor JS
Dac scriptul este inclus n seciunea body, el va fi executat ct timp se ncarc
pagina. Dac scriptul este inclus n seciunea head, el va fi executat numai
cnd este apelat..
Scripturi n <head>
Scripturile care trebuie executate cnd sunt apelate sau cnd are loc un
eveniment, trebuie scrise n seciunea head. n acest fel, scriptul va fi sigur
ncrcat nainte de a fi utilizat.
<html>
<head>
<script type="text/javascript">
function message()
{
alert("Aceasta caseta de alertare este apelata si
afisata cand are loc evenimentul onload");
16
}
</script>
</head>
<body onload="message()">
<h3>Casetele de alertare</h3> <hr/>
</body>
</html>
Scripturi n <body>
Scripturile care trebuie executate cnd pagina se ncarc trebuie scrise n
seciunea body i vor genera coninutul paginii:
<html>
<head>
</head>
<body>
<h3>Afisarea textului cu JavaScript</h3> <hr/>
<script type="text/javascript">
document.write("Acest mesaj este scris cu
JavaScript");
</script>
</body>
</html>
Scripturi n <head> i <body>
Putei include un numr nelimitat de scripturi JS n document, deci putei avea
scripturi i n head i n body:
<html>
<head>
<script type="text/javascript">
....
</script>
</head>
<body>
<script type="text/javascript">
....
</script>
</body>
17
Folosirea unui script extern
Dac dorii s utilizai acelai script n mai multe pagini web fr a rescrie
codul, trebuie s scriei scriptul JS ntr-un fiier extern. Fiierul trebuie s aib
extensia .js i nu poate conine tagul <script>. Pentru a utiliza fiierul
extern, includei-l n atributul src al tagului <script>:
<html>
<head>
<script type="text/javascript" src=".js"></script>
</head>
<body>
</body>
</html>
Obs: Scriptul trebuie plasat n locul n care ar fi fost scris n mod normal.
3. Instruciuni JavaScript
JavaScript este o secven de declaraii, instruciuni i comenzi care vor fi
executate de ctre browser. Spre deosebire de HTML, Java Script este casesensitive, deci avei grij cnd scriei instruciuni, declarai variabile sau apelai
funcii. O instruciune JavaScript este o comand ctre browser i are rolul de a
spune browserului ce trebuie s fac. Urmtoarea instruciune JS spune
browserului s scrie n pagin textul "Buna ziua":
document.write("Buna ziua");
Fiecare instruciune se ncheie cu punct i virgul (;).
Codul JavaScript este o secven de instruciuni JS. Fiecare instruciune este
executat de browser n ordinea n care a fost scris.
Exemplul urmtor va scrie un titlu i dou paragrafe ntr-o pagin web:
<html>
<body>
<h3>Utilizarea tagurilor HTML in mesajele afisate cu
JS</h3> <hr/>
<script type="text/javascript">
document.write("<h1>Acesta este un titlu</h1>");
document.write("<p>Acesta este un paragraf.</p>");
document.write("<p>Acesta este un alt
paragraf.</p>");
</script>
</body>
</html>
18
Blocuri JavaScript
Instruciunile JavaScript pot fi grupate n blocuri care se scriu ntre acolade.
Instruciunile dintr-un bloc vor fi executate mpreun.
n acest exemplu, instruciunile care scriu un titlu i dou paragrafe, au fost
grupate mpreun ntr-un bloc:
<html>
<body>
<script type="text/javascript">
{
document.write("<h1>Acesta este un titlu</h1>");
document.write("<p>Acesta este un paragraf.</p>");
document.write("<p>Acesta este un alt
paragraf.</p>");
}
</script>
</body>
</html>
n mod normal, un bloc este folosit pentru a grupa un grup de instruciuni ntr-o
funcie sau ntr-o condiie (blocul va fi executat dac o anumit condiie este
satisfcut).
4. Comentarii JavaScript
Comentariile pot fi adugate pentru a explica codul sau a-l face mai uor de
citit. Comentariile care se scriu pe o singur linie ncep cu //. n exemplul
urmtor, comentariile tip linie sunt folosite pentru a explica codul:
<html>
<body>
<script type="text/javascript">
// Scrie un titlu:
document.write("<h1>Acesta este un titlu</h1>");
// Scrie doua paragrafe:
document.write("<p>Acesta este un paragraf.</p>");
document.write("<p>Acesta este un alt
paragraf.</p>");
</script>
</body>
</html>
19
Comentarii multi-linie
Aceste comentarii ncep cu /* i se ncheie cu */, ca n exemplul urmtor:
<html>
<body>
<script type="text/javascript">
/*
Codul urmator va scrie in pagina
un titlu si doua paragrafe
*/
document.write("<h1>Acesta este un titlu</h1>");
document.write("<p>Acesta este un paragraf.</p>");
document.write("<p>Acesta este un alt
paragraf.</p>");
</script>
</body>
</html>
Folosirea comentariilor pentru a preveni execuia
n exemplul urmtor, comentariul este utilizat pentru a mpiedica executarea
unei linii de cod (metoda poate fi utilizat pentru a depana codul):
<html>
<body>
<script type="text/javascript">
//document.write("<h1>Acesta este un titlu</h1>");
document.write("<p>Acesta este un paragraf.</p>");
document.write("<p>Acesta este un alt
paragraf.</p>");
</script>
</body>
</html>
n exemplul urmtor, comentariul este utilizat pentru a mpiedica execuia unui
bloc de cod (util pentru depanarea codului):
<html>
<body>
<script type="text/javascript">
/*
document.write("<h1>Acesta este un titlu</h1>");
20
document.write("<p>Acesta este un paragraf.</p>");
document.write("<p>Acesta este un alt
paragraf.</p>");
*/
</script>
</body>
</html>
n exemplul urmtor, comentariul este plasat la sfritul liniei de cod:
<html>
<body>
<script type="text/javascript">
document.write("Salutare"); // scrie in pagina textul
"Salutare"
document.write(" prieteni!"); // scrie in pagina
textul " prieteni!"
</script>
</body>
</html>
5. Variabile JavaScript
n JS, variabilele sunt folosite pentru a pstra valori sau expresii. O variabil
poate avea un nume scurt, de exemplu x, sau mai descriptiv, de exemplu
prenume.
Reguli pentru numele variabilelor JavaScript:
numele este case-sensitive (y i Y sunt dou variabile diferite)
numele trebuie s nceap cu o liter sau cu liniua de subliniere
(underscore)
Exemplu
Valoarea unei variabile se poate modifica n timpul execuiei scriptului. Putei
referi variabila prin nume pentru a-i afia sau modifica coninutul, ca n
exemplul urmtor:
<html>
<body>
21
<h3>Declararea, initializarea, atribuirea si afisarea
unei variabile</h3> <hr/>
<script type="text/javascript">
var prenume;
prenume="Mihai";
document.write("<b>Numele variabilei</b>: prenume");
document.write("<br/>");
document.write("<b>Valoare initiala</b>: "+prenume);
document.write("<br/>");
prenume="Adrian";
document.write("<b>Valoare dupa atribuire</b>:
"+prenume);
</script>
</body>
</html>
Declararea variabilelor JavaScript
Putei crea variabile cu sintaxa :
var nume_variabila;
Dup declarare, variabila nu conine valori (este vid). Putei s iniializai o
variabil chiar n momentul declarrii:
var x=8;
var prenume="Matei";
Obs: Cnd atribuii unei variabile o valoare de tip text, textul trebuie scris ntre
ghilimele.
Dac atribuii valori unei variabile care nu a fost nc declarat, ea va fi
declarat automat.
Declaraiile:
x=8;
prenume="Matei";
au acelai efect cu declaraiile:
var x=8;
var prenume="Matei";
Dac redeclarai o variabil JavaScript, ea va pstra valoarea iniial:
var x=7;
var x;
22
Dup execuia instruciunilor de mai sus, variabila x are valoarea 7 care nu a
fost resetat la redeclarare.
6. Operatorii JavaScript
Operatorii aritmetici
Sunt folosii pentru a efectua operaii aritmetice cu variabile i/sau valori.
Dac y=5, tabelul urmtor prezint operatorii aritmetici:
Operator
+
*
/
%
++
--
Descriere
adunare
scdere
nmulire
mprire
modulo (restul mpririi
ntregi)
incrementare
decrementare
Exemplu
x=y+2
x=y-2
x=y*2
x=y/2
x=y%2
Rezultat
x=7
x=3
x=10
x=2.5
x=1
x=++y
x=--y
x=6
x=4
Operatorii de atribuire
Sunt folosii pentru a atribui valori variabilelor JavaScript. Dac x=10 i y=5,
tabelul urmtor prezint operatorii de atribuire:
Operator
=
+=
-=
*=
/=
%=
Exemplu
x=y
x+=y
x-=y
x*=y
x/=y
x%=y
Echivalent cu
x=x+y
x=x-y
x=x*y
x=x/y
x=x%y
Rezultat
x=5
x=15
x=5
x=50
x=2
x=0
Operatorul + utilizat pentru iruri de caractere
Acest operator poate fi utilizat i pentru a concatena variabile tip ir de
caractere (string sau text).
Exemplu:
t1="Ce mai";
t2="faci azi?";
t3=t1+t2;
23
Dup execuie, variabila t3 conine irul Ce maifaci azi?. Pentru a aduga un
spaiu ntre cele dou iruri, inserai un spaiu la sfritul primului ir sau la
nceputul celui de-al doilea ir sau ntre cele dou iruri:
t1="Ce mai";
t2="faci azi?";
t3=t1+" "+t2;
Adunarea irurilor i a numerelor
Regul: Dac adunai un numr cu un ir de caractere, vei obine un ir de
caractere.
<html>
<body>
<h3>Adunarea sirurilor de caractere si a numerelor cu
siruri de caractere</h3> <hr/>
<script type="text/javascript">
x=6+7;
document.write("6+7="+x);
document.write("<br />");
x="6"+"7";
document.write('"6"+"7"='+x);
document.write("<br />");
x=6+"7";
document.write('6+"7"='+x);
document.write("<br />");
x="6"+7;
document.write('"6"+7='+x);
document.write("<br />");
</script>
</body>
</html>
7. Operatorii de comparare i operatorii logici
Operatorii de comparare sunt utilizai n construcii logice pentru a verifica
egalitatea sau diferena dintre dou variabile sau valori.
Dac x=5, tabelul urmtor prezint operatorii de comparare:
Operator Descriere
==
Egal cu
Exemple
x==8 este fals
24
===
Este egal exact (valoare i tip)
!=
>
<
>=
<=
Diferit
Mai mare dect
Mai mic dect
Mai mare sau egal cu
Mai mic sau egal cu
x===5 este adevrat
x==="5" este fals
x!=8 este adevrat
x>8 este fals
x<8 este adevrat
x>=8 este fals
x<=8 este adevrat
Operatorii logici sunt utilizai pentru a determina relaia logic dintre variabile
sau valori.
Dac x=6 i y=3, tabelul urmtor prezint operatorii logici:
Operator Descriere
&&
i
||
!
Exemple
(x < 10 && y > 1) este
adevrat
(x==5 || y==5) este fals
!(x==y) este adevrat
sau
not
Operatorul condiional
Acest operator atribuie o valoare unei variabile n funcie de o anumit condiie.
Sintax:
variabila=(conditie)?valoare1:valoare2
Exemplu:
salut=(visitor=="FEM")?"Doamna ":"Domnul";
8. Instruciunile condiionale
Adesea, cnd scriei cod JS, trebuie s realizai operaii diferite n funcie de
decizii diferite. Pentru a realiza acest lucru, folosii n cod instruciunile
condiionale.
n JavaScript exist urmtoarele instruciuni condiionale:
if folosii aceast instruciune dac un cod trebuie executat cnd o
condiie este adevrat
if...else - folosii aceast instruciune pentru a executa un cod cnd o
condiie este adevrat i alt cod dac condiia este fals
if...else if....else folosii aceast instruciune pentru a selecta unul din
mai multe blocuri de cod pentru a fi executat
switch - folosii aceast instruciune pentru a selecta unul din mai
multe blocuri de cod pentru a fi executat
25
Instruciunea if
Sintax
if (conditie)
{
cod ce trebuie executat daca conditia este
adevarata
}
Exemplu:
<html>
<body>
<h3>Scriptul va afisa un mesaj daca ora<10 folosind
instructiunea if</h3> <hr/>
<script type="text/javascript">
var d = new Date();
var time = d.getHours();
if (time < 10)
{
document.write("<b>Buna dimineata</b>");
}
</script>
</body>
</html>
Instruciunea ifelse
Sintax:
if (conditie)
{
cod executat daca conditia este adevarata
}
else
{
cod executat daca conditia este falsa
}
Exemplu:
<html>
<body>
26
<h3>Scriptul va afisa un mesaj sau altul in functie
de ora, cu instructiunea if..else</h3> <hr/>
<script type="text/javascript">
var d = new Date();
var time = d.getHours();
if (time < 10)
{
document.write("<b>Buna dimineata</b>");
}
else
{
document.write("<b>Buna ziua</b>");
}
</script>
</body>
</html>
</html>
Instruciunea if...else if...else
Sintax:
if (conditia1)
{
cod executat daca conditia1 este adevarata
}
else if (conditia2)
{
cod executat daca conditia2 este adevarata
}
else
{
cod executat daca nici conditia1, nici conditia2 nu
sunt adevarate
}
Exemplu:
<html>
<body>
27
<h3>Scriptul va afisa unul din trei mesaje in functie
de ora, cu instructiunea if-else-if-else</h3> <hr/>
<script type="text/javascript">
var d = new Date();
var time = d.getHours();
if (time<10)
{
document.write("<b>Buna dimineata</b>");
}
else if (time>=10 && time<17)
{
document.write("<b>Buna ziua</b>");
}
else
{
document.write("<b>Buna seara</b>");
}
</script>
</body>
</html>
Exemplu
Link-ul din exemplul urmtor va deschide Google sau Yahoo.
<html>
<body>
<h3>Scriptul afiseaza in mod aleator unul din doua
link-uri, folosind if..else</h3> <hr/>
<script type="text/javascript">
var r=Math.random();
if (r>0.5)
{
document.write("<a
href='http://www.google.com'>Google!</a>");
}
else
{
document.write("<a
href='http://www.yahoo.com>Yahoo!</a>");
}
</script>
</body>
28
</html>
Instruciunea switch
Sintax:
switch(n)
{
case 1:
executa bloc 1
break;
case 2:
executa bloc 2
break;
......
default:
cod executat daca n este diferit de case 1, case
2,....
}
Exemplu:
<html>
<body>
<h3>Scriptul utilizeaza instructiunea switch</h3>
<hr/>
<script type="text/javascript">
var d = new Date();
theDay=d.getDay();
switch (theDay)
{
case 5:
document.write("<b>Vineri</b>");
break;
case 6:
document.write("<b>Sambata</b>");
break;
case 0:
document.write("<b>Duminica</b>");
break;
default:
document.write("<b>Astept weekend-ul!</b>");
}
</script>
29
</body>
</html>
9. Casete popup
JavaScript are trei tipuri de casete popup: caseta Alert, caseta Confirm i caseta
Prompt.
Caseta Alert
O caset de alert se utilizeaz atunci dorii s fii siguri c o anumit
informaie ajunge n atenia utilizatorului. Cnd o caset de alert este afiat,
utilizatorul va trebui s acioneze butonul "OK" pentru a putea continua.
Sintax:
alert("...un text....");
Exemplu:
<html>
<head>
<script type="text/javascript">
function afiseaza_alert()
{
alert("Sunt o caseta de alertare!");
}
</script>
</head>
<body>
<h3>La apasarea butonului va fi apelata o functie
care afiseaza caseta alert</h3> <hr/>
<input type="button" onclick="afiseaza_alert()"
value="Apasa" />
</body>
</html>
Caseta Confirm
O caset de confirmare se utilizeaz atunci cnd dorii ca utilizatorul s verifice
sau s accepte ceva. Cnd caseta de confirmare este afiat, utilizatorul va
trebui s acioneze butonul "OK" sau butonul "Cancel" pentru a putea
30
continua. Dac utilizatorul acioneaz butonul "OK", caseta returneaz valoarea
true, dac acioneaz butonul "Cancel", caseta returneaz valoarea false.
Sintax:
confirm("....un text....");
Exemplu:
<html>
<head>
<script type="text/javascript">
function afiseaza_confirm()
{
var r=confirm("Apasati un buton");
if (r==true)
{
document.write("Ati apasat butonul OK!");
}
else
{
document.write("Ati apasat butonul Cancel!");
}
}
</script>
</head>
<body>
<h3>La apasarea butonului va fi apelata o functie
care afiseaza caseta confirm si verifica ce buton ati
apasat</h3> <hr/>
<input type="button" onclick="afiseaza_confirm()"
value="Apasa" />
</body>
</html>
Caseta Prompt
Aceast caset se utilizeaz atunci cnd dorii ca utilizatorul s introduc o
anumit valoare nainte de a accesa pagina. Cnd caseta prompt este afiat,
utilizatorul va trebui s acioneze butonul "OK" sau butonul "Cancel" pentru a
putea continua dup ce introduce valoarea solicitat. Dac utilizatorul
acioneaz butonul "OK", caseta returneaz valoarea true, dac acioneaz
butonul "Cancel", caseta returneaz valoarea false.
Sintax:
31
prompt("....un text....","valoare_implicita");
Exemplu:
<html>
<head>
<script type="text/javascript">
function afiseaza_prompt()
{
var name=prompt("Va rog sa va introduceti
numele","");
if (name!=null && name!="")
{
document.write("Buna ziua " + name + "! Ce mai
faci?");
}
}
</script>
</head>
<body>
<h3>La apasarea butonului va fi apelata o functie
care afiseaza caseta prompt</h3> <hr/>
<input type="button" onclick="afiseaza_prompt()"
value="Apasa" />
</body>
</html>
Obs. Dac dorii ca textul dintr-o caset s fie afiat pe mai multe linii,
procedai ca n exemplul urmtor:
<html>
<head>
<script type="text/javascript">
function afiseaza_alert()
{
alert("Buna! Asa se adauga" + '\n' + "o intrerupere
de linie" + '\n' + "intr-o caseta de alertare!");
}
</script>
</head>
<body>
<h3>Caseta alert cu textul scris pe mai multe
linii</h3> <hr/>
32
<input type="button" onclick="afiseaza_alert()"
value="Apasa" />
</body>
</html>
10. Funcii
O funcie va fi executat cnd are loc un eveniment sau cnd este apelat.
Dac dorii ca browserul s nu execute un script atunci cnd pagina se ncarc,
putei scrie scriptul ntr-o funcie. O funcie poate fi apelat din orice punct al
paginii, sau chiar din alte pagini, dac funcia este scris ntr-un fiier JS extern.
Funciile JS pot fi scrise n seciunea <head> sau n seciunea <body> a
documentului. Totui, pentru a fi siguri c funcia este ncrcat n browser
nainte de a fi apelat, este recomandat s o scriei n seciunea <head>.
Definirea unei funcii
Sintax:
function nume_functie(var1,var2,...,varX)
{
codul functiei
}
Parametrii var1, var2, etc. sunt variabile sau valori transmise funciei.
Acoladele marcheaz nceputul i sfritul corpului funciei.
Obs: Chiar dac funcia nu are parametri, parantezele rotunde de dup numele
funciei trebuie s fie prezente.
Exemplu:
<html>
<head>
<script type="text/javascript">
function afiseaza_mesaj()
{
alert("Bine ati venit!");
}
</script>
</head>
<body>
<h3>La apasarea butonului este apelata o functie JS
care afiseaza caseta alert</h3> <hr/>
<form>
33
<input type="button" value="Apasati!"
onclick="afiseaza_mesaj()" />
</form>
</body>
</html>
Dac linia de cod alert("Bine ati venit!") din exemplul anterior nu
ar fi fost scris n corpul unei funcii, codul ar fi fost executat imediat ce linia
respectiv ar fi fost ncrcat n browser. Deoarece codul a fost inclus ntr-o
funcie, el nu va fi executat dect atunci cnd utilizatorul acioneaz butonul i
este apelat funcia afiseaza_mesaj().
Instruciunea return
Instruciunea return este folosit pentru a specifica valoarea returnat de o
funcie i trebuie inclus n orice funcie care returneaz o valoare.
n exemplul urmtor, funcia suma returneaz suma celor doi parametri de
intrare:
<html>
<head>
<script type="text/javascript">
function suma(a,b)
{
return a+b;
}
</script>
</head>
<body>
<h3>Suma urmatoare este calculata si returnata de o
functie</h3> <hr/>
<script type="text/javascript">
document.write("7+9="+suma(7,9));
</script>
</body>
</html>
Durata de via a variabilelor JavaScript
Dac declarai o variabil n interiorul unei funcii, ea poate fi accesat numai
din interiorul funciei. Cnd funcia se ncheie, variabila este distrus.
Variabilele declarate n corpul unei funcii se numesc variabile locale. Putei
avea variabile locale cu acelai nume n funcii diferite, deoarece fiecare
34
variabil local este recunoscut numai n interiorul funciei n care este
declarat. Dac declarai o variabil n afara tuturor funciilor (variabil
global), ea poate fi accesat de toate funciile din pagin. O variabil global
este distrus numai atunci cnd pagina este nchis.
Exemple
Exemplul 1
Ilustreaz cum se poate transmite o variabil unei funcii i cum poate fi
folosit respectiva variabil n corpul funciei.
<html>
<head>
<script type="text/javascript">
function functia_1(text)
{
alert(text);
}
</script>
</head>
<body>
<h3>Functii JavaScript</h3> <hr/>
<form>
<input type="button" onclick="functia_1('Bune ati
venit!')" value="Apasati">
</form>
<p>Cand apasati butonul, va fi apelata o functie cu
textul "Bine ati venit!" drept parametru. Functia va
afisa parametrul cu o caseta de alertare.</p>
</body>
</html>
Exemplul 2
Ilustreaz cum poate fi folosit rezultatul returnat de o funcie.
<html>
<head>
<script type="text/javascript">
function functie_2()
{
return ("Bine ati venit!");
}
</script>
35
</head>
<body>
<h3>Textul urmator este returnat de o functie apelata
direct din document.write()</h3> <hr/>
<script type="text/javascript">
document.write(functie_2())
</script>
</body>
</html>
Exemplul 3
<html>
<head>
<script type="text/javascript">
function salut(txt)
{
alert(txt);
}
</script>
</head>
<body>
<h3>Utilizarea functiilor JavaScript</h3> <hr/>
<form>
<input type="button"
onclick="salut('Buna dimineata!')"
value="Dimineata">
<input type="button"
onclick="salut('Buna seara!')"
value="Seara">
</form>
<p>
Cand apasati unul dintre butoane, va fi apelata o
functie care afiseaza mesajul primit ca
parametru.</p>
</body>
</html>
36
11. Instruciunea for
Instruciunile repetitive sunt utilizate pentru a executa o secven de cod n mod
repetat. n JS sunt dou tipuri diferite de instruciuni repetitive:
for repet o secven de cod de un numr precizat de ori
while repet o secven de cod ct timp o condiie este adevrat
Instruciunea for se utilizeaz cnd se cunoate dinainte numrul de iteraii
dorit pentru secvena de cod.
Sintax:
for
(var=val_initiala;var<=val_finala;var=var+increment)
{
codul ce trebuie executat
}
Exemplu:
n exemplul urmtor, instruciunea for ncepe cu i=0, corpul instruciunii se
repet ct timp i50 i contorul i este incrementat cu 2 la fiecare iteraie. Vor fi
afiate numerele pare 50.
Obs: Valoarea increment poate fi i negativ i comparaia se poate realiza i
cu orice alt operator de comparare.
<html>
<body>
<h3>Utilizarea instructiunii for</h3> <hr/>
<script type="text/javascript">
document.write("Numerele pare mai mici sau egale cu
50: "+"<br/>");
var i=0;
for (i=0;i<=50;i+=2)
{
document.write(i +" ");
}
</script>
</body>
</html>
Exemplu:
n acest exemplu, instruciunea for este utilizat pentru a afia cele 6 titluri
HTML.
<html>
<body>
37
<h3>Afisarea titlurilor HTML cu instructiunea
for</h3> <hr/>
<script type="text/javascript">
for (i = 1; i <= 6; i++)
{
document.write("<h" + i + ">Aceste este un titlu " +
i);
document.write("</h" + i + ">");
}
</script>
</body>
</html>
12. Instruciunea while
Instruciunea execut n mod repetat o secven de cod, ct timp o condiie este
adevrat.
Sintax:
while (var<=val_finala)
{
codul ce trebuie executat
}
Obs: Operatorul <= poate fi nlocuit cu orice alt operator de comparare.
Exemplu:
<html>
<body>
<h3>Utilizarea instructiunii while</h3> <hr/>
<script type="text/javascript">
document.write("Numerele naturale mai mici egale cu
5:"+"<br/>");
var i=0;
while (i<=5)
{
document.write(i);
document.write("<br/>");
i++;
}
</script>
38
</body>
</html>
Instruciunea do...while
Este o variant a instruciunii while. Secvena de instruciuni va fi executat n
mod sigur o dat, apoi n mod repetat, ct timp condiia specificat este
adevrat.
Sintax:
do
{
codul ce trebuie executat
}
while (var<=val_finala);
Exemplu:
Vor fi afiate numerele impare 50.
<html>
<body>
<h3>Utilizarea instructiunii do-while</h3> <hr/>
<script type="text/javascript">
document.write("Numerele impare mai mici sau egale cu
50:"+"<br/>");
var i=1;
do
{
document.write(i + " ");
i+=2;
}
while (i<=50);
</script>
</body>
</html>
13. Instruciunile break i continue
Instruciunea break
Este utilizat pentru a ntrerupe n mod forat execuia unei bucle. n exemplul
urmtor, bucla va fi ntrerupt cnd i=3.
<html>
39
<body>
<h3>Utilizarea instructiunii break</h3> <br/>
<script type="text/javascript">
document.write("Numerele naturale mai mici egale cu
5:"+"<br/>");
var i=0;
for (i=0;i<=10;i++)
{
if (i==3)
{
document.write("Ciclu oprit cu break"); break;
}
document.write(i);
document.write("<br />");
}
</script>
</body>
</html>
Instruciunea continue
Instruciunea ntrerupe execuia iteraiei curente i sare la urmtoarea iteraie. n
exemplul urmtor, valoarea 3 nu va fi afiat (este srit cu instruciunea
continue).
<html>
<body>
<h3>Utilizarea instructiunii continue</h3> <hr/>
<script type="text/javascript">
document.write("Numerele naturale mai mici sau egale
cu 10:"+"<br/>");
var i=0
for (i=0;i<=10;i++)
{
if (i==3)
{
document.write("valoare sarita cu
continue"+"<br/>");continue;
}
document.write(i);
document.write("<br />");
}
</script>
</body>
</html>
40
14. Instruciunea for...in
Aceast instruciune este utilizat pentru a parcurge elementele unui tablou sau
a enumera proprietile unui obiect.
Sintax:
for (variabila in obiect)
{
cod ce trebuie executat
}
Obs: Codul din corpul instruciunii este executat cte o dat pentru fiecare
element din tablou sau proprietate.
Obs: Argumentul variabila poate fi o variabil, un element de tablou sau o
proprietate a unui obiect.
Exemplu
Instruciunea for..in este utilizat pentru a parcurge elementele unui tablou:
<html>
<body>
<h3>Parcurgerea elementelor unui tablou cu
instructiunea for..in</h3> <hr/>
<script type="text/javascript">
var x;
var pets = new Array();
pets[0] = "Pisica";
pets[1] = "Caine";
pets[2] = "Papagal";
pets[3] = "Hamster";
document.write("Valorile memorate in tablou
sunt:"+"<br/>");
for (x in pets)
{
document.write(pets[x] + "<br />");
}
</script>
</body>
</html>
41
15. Evenimentele JavaScript
Utiliznd JavaScript, putem crea pagini web dinamice. Evenimentele sunt
aciuni ce pot fi detectate de JavaScript. Fiecare element dintr-o pagin web are
un anumit numr de evenimente care pot declana un script. Spre exemplu,
putem utiliza evenimentul onClick al unui buton pentru a indica ce funcie va fi
executat dac utilizatorul acioneaz butonul respectiv. Evenimentele sunt
definite n tagurile HTML.
Exemple de evenimente
Un click de mouse
ncrcarea unei pagini web sau a unei imagini
Micarea mouse-ului peste o anumit zon din pagina web
Selectarea unui cmp de intrare dintr-un formular HTML
Submiterea unui formular HTML
Apsarea unei taste
Obs: Evenimentele sunt n mod normal asociate cu funcii, care nu vor fi
executate nainte de a avea loc evenimentul.
Evenimentele onLoad i onUnload
Aceste evenimente sunt declanate cnd utilizatorul ntr ntr-o pagin web,
respectiv cnd prsete pagina.
Evenimentul onLoad este folosit n mod frecvent pentru a detecta tipul i
versiunea browserului utilizatorului i a ncrca varianta de pagin potrivit cu
aceste informaii.
Ambele evenimente sunt folosite frecvent pentru a stabili ce cookies vor fi
setate cnd utilizatorul ntr n sau prsete pagina. Spre exemplu, putei
ntreba care este numele utilizatorului cnd acesta viziteaz prima dat pagina.
Numele oferit de utilizator este memorat ntr-un cookie. Data viitoare cnd
utilizatorul v viziteaz pagina, putei s-l ntmpinai cu un mesaj personalizat
cu numele su.
Evenimentele onFocus, onBlur i onChange
Aceste evenimente sunt utilizate frecvent mpreun cu validarea cmpurilor
unui formular.
Exemplul urmtor ilustreaz utilizarea evenimentului onChange. Funcia
verificaEmail() va fi apelat ori de cte ori utilizatorul modific coninutul
unui cmp:
<input type="text" size="30" id="email"
onchange="verificaEmail()">
42
Evenimentul onSubmit
Acest eveniment este utilizat pentru a valida toate cmpurile unui formular
nainte de trimiterea lui ctre server.
Exemplul urmtor ilustreaz utilizarea evenimentului onSubmit. Funcia
verificaFormular() va fi apelat atunci cnd utilizatorul acioneaz butonul
submit din formular. Dac valorile introduse n cmpuri nu sunt valide,
trimiterea formularului va fi anulat. Funcia verificaFormular() returneaz
true sau false. Dac funcia va returna valoarea false, trimiterea formularului
va fi anulat:
<form method="post" action="xxx.htm" onsubmit="return
verificaFormular()">
Evenimentele onMouseOver i onMouseOut
Aceste evenimente sunt utilizate frecvent pentru a crea butoane animate.
n exemplul urmtor va fi afiat o caset de alert cnd este detectat un
eveniment onMouseOver:
<a href="http://www.google.com"
onmouseover="alert('Un eveniment onMouseOver
detectat');return false"><img src="flowers.gif"
alt="Flowers" /></a>
16. Instruciunea try...catch
Cnd navigm prin paginile web de pe internet, pot s apar mesaje de eroare la
ncrcarea unei pagini. n acest caz, uzual, apare o caset de alertare JavaScript
care ne anun c s-a detectat o eroare de execuie (runtime error) i ne ntreab
dac dorim s depanm codul paginii. Aceste mesaje sunt utile pentru
proiectanii paginilor web, nu i pentru vizitatori care, de obicei, prsesc
pagina respectiv. n acest capitol vei nva cum s gestionai mesajele de
eroare JavaScript, astfel nct s nu v pierdei audiena.
Instruciunea try...catch v permite s testai blocurile de cod pentru a
depista erorile. Blocul try conine codul ce trebuie executat, iar blocul
catch conine codul ce va fi executat dac apare o eroare.
Sintax:
try
{
codul ce trebuie executat
}
catch(err)
43
{
gestionarea erorilor
}
Exemple
n exemplul urmtor ar trebui afiat o caset de alertare cu mesajul "Bine ati
venit!" cnd butonul este acionat.. Totui, n corpul funciei mesaj() exist o
eroare, cuvntul rezervat alert este scris greit. Aceast eroare va fi detectat
de JS. Blocul catch sesizeaz eroarea i execut un cod special pentru a o
rezolva. Acest cod afieaz un mesaj de eroare pentru a informa utilizatorul ce
se ntmpl. Dac utilizatorul apas butonul OK, ncrcarea paginii va continua
fr probleme:
<html>
<head>
<script type="text/javascript">
var txt="";
function mesaj()
{
try
{
adddlert("Bine ati venit!");
}
catch(err)
{
text="In aceasta pagina este o eroare.\n\n";
text+="Descrierea erorii: " + err.description +
"\n\n";
text+="Pentru a continua apasati OK.\n\n";
alert(text);
}
}
</script>
</head>
<body>
<h3>Utilizarea instructiunii try..catch pentru
sesizarea erorilor</h3> <hr/>
<input type="button" value="Vedeti mesajul"
onclick="mesaj()" />
</body>
</html>
44
n exemplul urmtor alert este de asemenea scris greit. Blocul catch
utilizeaz o caset de confirmare pentru a afia un mesaj care informeaz
utilizatorii c pot apsa OK pentru a continua s viziteze pagina n care a fost
depistat eroarea sau pot apsa Cancel dac doresc s se ntoarc la pagina
principal (homepage). Dac metoda confirm returneaz false (utilizatorul a
acionat butonul Cancel), atunci utilizatorul este redirectat. Dac confirm
returneaz true, codul din blocul catch nu are nici-un efect:
<html>
<head>
<script type="text/javascript">
var txt="";
function mesaj()
{
try
{
adddlert("Bine ati venit!");
}
catch(err)
{
text="In aceasta pagina este o eroare.\n\n";
text+="Apasati OK daca doriti sa continuati
vizualizarea paginii,\n";
text+="sau Cancel pentru a va intoarce la pagina
principala.\n\n";
if(!confirm(text))
{
document.location.href="http:
//carpenmanuela.wik.is/";
}
}
}
</script>
</head>
<body>
<h3>Un alt exemplu de utilizare a instructiunii
try..catch</h3> <hr/>
<input type="button" value="Vedeti mesajul"
onclick="mesaj()" />
</body>
</html>
45
17. Instruciunea throw
Aceast instruciune v permite s creai o excepie. Dac o utilizai mpreun
cu instruciunea try...catch, putei controla execuia programului i afia
mesaje de eroare adecvate.
Sintax:
throw(exceptie)
Argumentul exceptie poate fi un ir de caractere, un numr ntreg, o valoare
boolean sau un obiect.
Examplu:
Exemplul urmtor testeaz valoarea variabilei x. Dac valoarea este mai mare
dect 10, mai mic dect 10 sau nu este un numr, blocul throw arunc o
eroare. Aceast eroare este prins de blocul catch care afieaz un mesaj
corespunztor:
<html>
<body>
<h3>Utilizarea instructiunii throw pentru tratarea
corespunzatoare a erorilor</h3> <hr/>
<script type="text/javascript">
var x=prompt("Introduceti un numar cuprins intre 0 si
10:","");
try
{
if(x>10)
{
throw "Err1";
}
else if(x<0)
{
throw "Err2";
}
else if(isNaN(x))
{
throw "Err3";
}
}
catch(er)
{
if(er=="Err1")
{
alert("Eroare! Valoarea este prea mare");
46
}
if(er=="Err2")
{
alert("Eroare! Valoarea este prea mic");
}
if(er=="Err3")
{
alert("Eroare! Valoarea nu este un numar");
}
}
</script>
</body>
</html>
Exemplu:
Exemplul urmtor ilustreaz utilizarea evenimentului onerror.
<html>
<head>
<script type="text/javascript">
onerror=handleErr;
var txt="";
function handleErr(msg,url,l)
{
txt="In aceasta pagina este o eroare.\n\n";
txt+="Eroare: " + msg + "\n";
txt+="URL: " + url + "\n";
txt+="Linie: " + l + "\n\n";
txt+="Pentru a continua apasati OK.\n\n";
alert(txt);
return true;
}
function message()
{
adddlert("Bine ai venit!");
}
</script>
</head>
<body>
<h3>Exemplu de utilizare a evenimentului onerror</h3>
<hr/>
47
<input type="button" value="Afiseaza mesajul"
onclick="message()" />
</body>
</html>
18. Inserarea caracterelor speciale
Pentru a insera ntr-un ir caractere speciale, cum ar fi apostrof, ghilimele,
ntrerupere de linie etc., se folosete caracterul backslash (\).
Fie urmtorul cod JavaScript:
var txt="Noi suntem echipa "Dinamo" din Bucuresti.";
document.write(txt);
n JavaScript, un ir de caractere ncepe i termin cu apostrof sau cu ghilimele.
Asta nseamn c irul de mai sus va fi trunchiat la: Noi suntem echipa
Pentru a rezolva aceast problem, trebuie s inserai caracterul backslash (\)
naintea fiecrui caracter special care trebuie afiat, ca n exemplul urmtor:
var txt="Noi suntem echipa \"Dinamo\" din
Bucuresti.";
document.write(txt);
Tabelul urmtor prezint caracterele speciale ce pot fi inserate ntr-un text cu
ajutorul caracterului backslash:
Cod
Ieire
\'
apostrof
\"
ghilimele
\&
ampersand
\\
backslash
\n
linie nou
\r
retur de car
\t
tab
\b
backspace
\f
form feed
48
19. Obiectele JavaScript
Programarea orientat pe obiecte
JavaScript este un limbaj de programare orientat pe obiecte (POO). Un limbaj
POO v permite s v definii propriile obiecte i propriile tipuri de variabile.
Crearea propriilor obiecte va fi explicat mai trziu, n seciunea JavaScript
avansat. Vom ncepe prin a examina obiectele ncorporate n JS i cum sunt ele
utilizate. Reinei c un obiect este de fapt, un tip special de date care are
proprieti i metode.
Proprieti
Proprietile sunt valori asociate cu un obiect.
n exemplul urmtor, utilizm proprietatea length a obiectului String (ir
de caractere) pentru a determina numrul de caractere memorate ntr-un ir:
<script type="text/javascript">
var txt="Bine ati venit!";
document.write(txt.length);
</script>
Codul de mai sus va afia valoarea: 15
Metode
Metodele sunt aciuni ce pot fi realizate cu un obiect.
n exemplul urmtor, utilizm metoda UpperCase() a obiectului String pentru a
afia un text cu litere mari:
<script type="text/javascript">
var txt="Bine ati venit!";
document.write(txt.toUpperCase());
</script>
Codul de mai sus va afia irul: BINE ATI VENIT!
20. Obiectul String
Obiectul String este folosit pentru a manipula secvene de caractere (text). Un
obiect String este creat cu instruciunea new String().
Sintaxa:
var txt = new String(string);
sau mai simplu:
var txt = string;
49
Proprietile obiectului String
Proprietate
Descriere
constructor Returneaz funcia care a creat prototipul obiectului String
length
Returneaz lungimea irului
prototype
Permite adugarea de proprieti i metode unui obiect
Metodele obiectului String
Metod
charAt()
Descriere
charCodeAt()
Returneaz codul Unicode al caracterului cu indexul
specificat
concat()
Concateneaz dou sau mai multe iruri i returneaz
irul obinut
Returneaz caracterul cu indexul specificat
fromCharCode() Convertete valori Unicode n caractere
indexOf()
Returneaz poziia primei apariii a unui subir ntr-un ir
lastIndexOf() Returneaz poziia ultimei apariii a unui subir ntr-un ir
match()
Caut potrivirile dintre un subir i un string i returneaz
subirul sau null (dac subirul nu este gsit)
replace()
Caut toate apariiile unui subir ntr-un ir i le
nlocuiete cu un nou subir
search()
Caut potrivirea dintre un subir i un ir i returneaz
poziia n care apare potrivirea
slice()
Elimin o poriune din ir i returneaz irul extras
split()
mparte un ir n subiruri pe baza unui caracter separator
substr()
Extrage dintr-un ir secvena de caractere care ncepe
ntr-o anumit poziie i are o anumit lungime
substring()
Extrage dintr-un ir caracterele situate ntre dou poziii
toLowerCase() Convertete un ir n litere mici
toUpperCase() Convertete un ir n litere mari
valueOf()
Returneaz valoarea primar a unui obiect String
Metode mpachetate n taguri HTML
Aceste metode returneaz irul mpachetat n tagurile HTML potrivite.
50
Metod
anchor()
Descriere
big()
Afieaz irul cu font mare
blink()
Afieaz un ir care clipete
bold()
Afieaz irul cu font bold
Creeaz o ancor
fixed()
Afieaz irul cu un font cu pas fix
fontcolor() Afieaz irul folosind o anumit culoare
fontsize() Afieaz irul cu o anumit dimensiune a fontului
italics()
Afieaz irul cu font italic
link()
Afieaz irul ca hiperlegtur
small()
Afieaz irul cu font mic
strike()
Afieaz irul ca tiat
sub()
Afieaz irul ca subscript (indice)
sup()
Afieaz irul ca superscript (exponent)
Exemple
Exemplul 1
Ilustreaz utilizarea proprietii length pentru a determina lungimea unui ir.
<html>
<body>
<h3>Obiectul String. Determinarea lungimii unui
sir</h3> <hr/>
<script type="text/javascript">
var txt="Bine ati venit!";
document.write("Sirul este: "+txt+"<br/>");
document.write("Are lungimea "+txt.length);
</script>
<p><b>Obs.</b>Sirul nu se modifica.</p>
</body>
</html>
Exemplul 2
Ilustreaz cum se utilizeaz tagurile HTML pentru a stiliza un ir.
<html>
<body>
51
<h3>Obiectul String. Utilizarea tagurilor HTML pentru
stilizarea unui sir.</h3> <hr/>
<script type="text/javascript">
var txt="Bine ati venit!";
document.write("<p>Big: " + txt.big() + "</p>");
document.write("<p>Small: " + txt.small() + "</p>");
document.write("<p>Bold: " + txt.bold() + "</p>");
document.write("<p>Italic: " + txt.italics() +
"</p>");
document.write("<p>Blink: " + txt.blink() + " (nu
functioneaza in IE, Chrome, Safari)</p>");
document.write("<p>Fixed: " + txt.fixed() + "</p>");
document.write("<p>Strike: " + txt.strike() +
"</p>");
document.write("<p>Fontcolor: " +
txt.fontcolor("Blue") + "</p>");
document.write("<p>Fontsize: " + txt.fontsize(14) +
"</p>");
document.write("<p>Subscript: " + txt.sub() +
"</p>");
document.write("<p>Superscript: " + txt.sup() +
"</p>");
document.write("<p>Link: " +
txt.link("http://www.google.com") + "</p>");
</script>
<br/> <br/>
<p><b>Obs.</b>Sirul stilizat nu se modifica!</p>
</body>
</html>
Exemplul 3
Ilustreaz cum se utilizeaz metoda concat() pentru a concatena iruri.
Concatenarea a dou iruri:
<html>
<body>
52
<h3>Obiectul String. Concatenarea a doua siruri.</h3>
<hr/>
<script type="text/javascript">
var txt1 = "Buna ";
var txt2 = "ziua!";
document.write("Primul sir este: "+txt1+"<br/>");
document.write("Al doilea sir este: "+txt2+"<br/>");
document.write("Sirul concatenat este:
"+txt1.concat(txt2)+"<br/>");
</script>
<p><b>Obs.</b>Sirurile concatenate nu se modifica.
Rezultatul concatenarii poate fi pastrat intr-un nou
sir.</p>
</body>
</html>
Concatenarea a trei iruri:
<html>
<body>
<h3>Obiectul String. Concatenarea a trei siruri.</h3>
<hr/>
<script type="text/javascript">
var txt1="Buna ";
var txt2="ziua!";
var txt3=" Bine ati venit!";
document.write("Primul sir este: "+txt1+"<br/>");
document.write("Al doilea sir este: "+txt2+"<br/>");
document.write("Al treilea sir este:
"+txt3+"<br/>");
document.write("Sirul concatenat este:
"+txt1.concat(txt2,txt3)+"<br/>");
</script>
<p><b>Obs.</b>Sirurile concatenate nu se modifica.
Rezultatul concatenarii poate fi pastrat intr-un nou
sir.</p>
</body>
</html>
53
Exemplul 4
Ilustreaz cum se utilizeaz metoda indexOf() pentru a determina poziia
primei apariii a unei valori ntr-un ir.
<html>
<body>
<h3>Obiectul String. Cautarea primei aparitii a unei
valori in sir cu indexof().</h3> <hr/>
<script type="text/javascript">
var str="Buna ziua!";
document.write("Sirul
in
care
se
cauta
este:
"+str+"<br/>");
document.write("Sirul \"Buna\" apare in sir in
pozitia "+str.indexOf("Buna") + "<br />");
document.write("Sirul \"ZIUA\" apare in sir in
pozitia "+str.indexOf("ZIUA") + "<br />");
document.write("Sirul \"ziua\" apare in sir in
pozitia "+str.indexOf("ziua"));
</script>
<p><b>Obs.</b>Sirul
nu
se
modifica
in
urma
cautarii!</p>
</body>
</html>
Valorile afiate sunt: 0 -1 5.
Obs. Dac valoarea nu apare n ir, valoarea returnat este -1. irurile sunt
indexate de la 0.
Exemplul 5
Ilustreaz cum se utilizeaz metoda match() pentru a cuta un subir ntr-un
ir. Metoda returneaz subirul, dac este gsit, sau valoarea null, dac subirul
nu este gsit n ir.
<html>
<body>
<h3>Obiectul String. Cauta unui subsir intr-un sir cu
match().</h3> <hr/>
<script type="text/javascript">
var str="Hello world!";
document.write("Sirul in care se cauta este:
"+str+"<br/>");
document.write("Sirul cautat: "+"world"+". ");
document.write("Valoarea returnata:
"+str.match("world") + "<br />");
54
document.write("Sirul cautat: "+"World"+". ");
document.write("Valoarea returnata:
"+str.match("World") + "<br />");
document.write("Sirul cautat: "+"worlld"+". ");
document.write("Valoarea returnata:
"+str.match("worlld") + "<br />");
</script>
<p><b>Obs.</b>Sirul nu se modifica in urma cautarii.
Rezultatul poate fi memorat intr-o variabila.</p>
</body>
</html>
Exemplul 6
Ilustreaz cum se utilizeaz metoda replace() pentru a nlocui o secven din ir
cu alt secven.
<html>
<body>
<h3>Obiectul String. Inlocuirea unei secvente din sir
cu replace().</h3> <hr/>
<script type="text/javascript">
var str="Vizitati Microsoft!";
document.write("Sirul initial este: "+str+"<br/>");
document.write("Subsirul care se modifica este:
"+"Microsoft"+"<br/>");
document.write("Subsirul cu care se inlocuieste este:
"+"Google"+"<br/>");
str.replace("Microsoft","Google");
document.write("Sirul obtinut este: "+str);
</script>
<p><b>Obs.</b>Sirul se modifica!</p>
</body>
</html>
Exemplul 7
Ilustreaz cum se folosete metoda slice() pentru a extrage dintr-un ir o
secven. Metoda returneaz irul extras sau valoarea -1. n mod normal are
dou argumente: poziia din care ncepe extragerea (primul caracter are indexul
0) i, opional, poziia n care se ncheie extragerea. Dac al doilea argument
lipsete, se vor extrage toate caracterele dintre poziia de nceput i sfritul
55
irului. Dac se folosesc valori negative, extragerea se va face numrnd napoi
de la sfritul irului.
<html>
<body>
<h3>Obiectul String. Extragerea unui subsir dintr-un
sir cu slice().</h3> <hr/>
<script type="text/javascript">
var str="Bine ati venit!";
document.write("Sirul initial este: "+str+"<br/>");
// extrage toate caracterele incepand cu pozitia 0:
var txt=str.slice(0);
document.write("Subsirul extras cu slice(0):
"+txt+"<br/>");
//extrage toate caracterele incepand cu pozitia 5:
txt=str.slice(5);
document.write("Subsirul extras cu slice(5):
"+txt+"<br />");
//extrage ultimele 6 caractere de la sfarsitul
sirului:
txt=str.slice(-6);
document.write("Subsirul extras cu slice(-6):
"+txt+"<br />");
//extrage primul caracter din sir:
txt=str.slice(0,1);
document.write("Subsirul extras cu slice(0,1):
"+txt+"<br />");
//extrage caracterele dintre pozitiile 5 si 10
txt=str.slice(5,10);
document.write("Subsirul extras cu slice(5,10):
"+txt+"<br />");
</script>
<p><b>Obs.</b> Sirul nu se modifica in urma
extragerii. Subsirul extras poate fi memorat intr-o
variabila.</p>
</body>
</html>
56
Exemplul 8
Ilustreaz utilizarea metodei split() pentru a mpri un ir n subiruri pe
baza unui caracter separator. Dac caracterul separator este omis, se va returna
ntreg irul. Dac caracterul este irul vid, irul va fi mprit caracter cu
caracter. Opional, se poate preciza i numrul maxim de mpriri.
<html>
<body>
<h3>Obiectul String. Impartirea unui sir in subsiruri
cu split().</h3> <hr/>
<script type="text/javascript">
var str="Bine ati venit";
document.write("Sirul initial:
"+str+"<br/>");
//este returnat intreg sirul
document.write("Sirurile returnate cu split():
"+str.split() + "<br />");
//sunt returnate cele trei cuvinte din sir
document.write("Sirurile returnate cu split(\" \"):
"+str.split(" ") + "<br />");
//sunt returnate caracterele din ir
document.write("Sirurile returnate cu split(\"\"):
"+str.split("") + "<br />");
//sunt returnate numai primele doua cuvinte din sir
document.write("Subsirurile returnate cu split(\"
\",2): "+str.split(" ",2)+"<br/>");
</script>
<p><b>Obs.</b> Sirul initial nu se modifica.
Rezultatul poate fi memorat intr-o variabila.
</body>
</html>
57
21. Obiectul Date
Obiectul Date este utilizat pentru a lucra cu date calendaristice i ore. Un
obiect de tip Date este creat cu instruciunea new Date(). Sunt patru
metode de a instania un obiect Date:
var d = new Date();
var d = new Date(milisecunde);
var d = new Date(dataString);
var d = new Date(an, luna, zi, ore, minute, secunde,
milisecunde);
Setarea datei
Putem manevra uor datele calendaristice folosind metodele obiectului Date.
n exemplul urmtor, data este setat la 19 februarie 2010:
var myDate=new Date();
myDate.setFullYear(2010,1,19);
n exemplul urmtor, data este setat la apte zile n viitor:
var myDate=new Date();
myDate.setDate(myDate.getDate()+7);
Compararea a dou date calendaristice
Exemplul urmtor compar data curent cu 19 februarie 2010:
var myDate=new Date();
myDate.setFullYear(2010,1,19);
var today = new Date();
if (myDate>today)
{
alert("Astazi este inainte de 19 Februarie 2010");
}
else
{
alert("Astazi este dupa 19 Februarie 2010");
}
Metodele obiectului Date
Metoda
getDate()
Descriere
Returneaz ziua din lun (ntre 1 i 31)
58
getDay()
Returneaz ziua din sptmn (0-6)
getFullYear()
Returneaz anul (patru cifre)
getHours()
Returneaz ora (0-23)
getMilliseconds()
Returneaz milisecundele (0-999)
getMinutes()
Returneaz minutele (0-59)
getMonth()
Returneaz luna (0-11)
getSeconds()
Returneaz secundele (0-59)
getTime()
Returneaz numrul de milisecunde scurse de la
1.01.1970
getTimezoneOffset() Returneaz diferena dintre GMT i timpul local,
n minute
parse()
Analizeaz(parseaz) o dat ca ir de caractere i
returneaz numrul de milisecunde scurse de la
1.01.1970
setDate()
Seteaz data din lun (1-31)
setFullYear()
Seteaz anul (patru cifre)
setHours()
Seteaz ora (0-23)
setMilliseconds()
Seteaz milisecundele (0-999)
setMinutes()
Seteaz minutele (0-59)
setMonth()
Seteaz lunile (0-11)
setSeconds()
Seteaz secundele (0-59)
setTime()
Seteaz o dat i o or adunnd sau scznd un
anumit numr de milisecunde la/din 1.01.1970
toDateString()
Convertete poriunea corespunztoare datei
calendaristice dintr-un obiect Date intr-un ir de
caractere
toString()
Convertete un obiect Date ntr-un ir de
caractere
toTimeString()
Convertete poriunea corespunztoarea timpului
dintr-un obiect Date ntr-un ir de caractere
valueOf()
Returneaz valoarea primar a unui obiect Date
Exemple
Exemplul 1
59
Ilustreaz utilizarea metodei Date() pentru a obine data curent.
<html>
<body>
<h3>Obiectul Date. Obtinerea datei curente cu
Date().</h3> <hr/>
<script type="text/javascript">
document.write("Astazi este:
"+Date());
</script>
</body>
</html>
Exemplul 2
Ilustreaz utilizarea metodei getTime() pentru a calcula anii scuri din 1970
pn n prezent.
<html>
<body>
<h3>Obiectul Date. Utilizarea metodei getTime().</h3>
<hr/>
<script type="text/javascript">
var d=new Date();
document.write("Au trecut "+d.getTime() + "
milisecunde din 01.01.1970 si pana acum.");
</script>
</body>
</html>
Exemplul 3
Ilustreaz utilizarea metodei setFullYear() pentru a seta o dat specific.
<html>
<body>
<h3>Obiectul Date. Setarea datei cu
setFullYear().</h3> <hr/>
<script type="text/javascript">
var d = new Date();
d.setFullYear(2010,1,19);
60
document.write("Data a fost setata la "+d);
</script>
</body>
</html>
Exemplul 4
Ilustreaz utilizarea metodei toString() pentru a converti data curent ntrun ir de caractere.
<html>
<body>
<script type="text/javascript">
var d=new Date();
document.write(d.toString());
</script>
</body>
</html>
Exemplul 5
Ilustreaz utilizarea metodei getDay() i a unui tablou pentru a scrie denumirea
zilei din sptmn curente.
<html>
<body>
<h3>Obiectul Date. Utilizarea metodei getDay() pentru
a determina ziua din saptamana.</h3> <hr/>
<script type="text/javascript">
var d=new Date();
var weekday=new Array(7);
weekday[0]="Duminica";
weekday[1]="Luni";
weekday[2]="Marti";
weekday[3]="Miercuri";
weekday[4]="Joi";
weekday[5]="Vineri";
weekday[6]="Sambata";
61
document.write("Astazi este " + weekday[d.getDay()]);
</script>
</body>
</html>
Exemplul 6
Ilustreaz cum se poate afia un ceas ntr-o pagin web.
<html>
<head>
<script type="text/javascript">
function ceas()
{
var today=new Date();
var h=today.getHours();
var m=today.getMinutes();
var s=today.getSeconds();
//functia urmatoare adauga un zero in fata
//numerelor<10
m=verifica(m);
s=verifica(s);
document.getElementById('txt').innerHTML=h+":"+m+":"+
s;
t=setTimeout('ceas()',500);
}
function verifica(i)
{
if (i<10)
{
i="0" + i;
}
return i;
}
</script>
</head>
<body onload="ceas()">
<h3>Obiectul String. Afisarea unui ceas.</h3> <hr/>
<div id="txt"></div>
</body>
</html>
62
22. Obiectul Array
Un tablou este o variabil special care poate pstra la un moment dat mai
multe valori de un anumit tip. Dac avei o list de elemente, animale de
companie de exemplu, ai putea pstra valorile n variabile simple, ca n
exemplul urmtor:
pet1="Caine";
pet2="Pisica";
pet3="Papagal";
Desigur, problema se complic dac avei de memorat zeci, sau sute de valori.
Cea mai bun soluie este s folosii tablouri. Un tablou poate reine toate
valorile sub un singur nume i putei accesa fiecare valoare stocat n tablou
folosind numele tabloului i indexul valorii.
Crearea unui tablou
Un tablou poate fi definit n trei moduri:
1:
var pets=new Array();
//tablou obisnuit
pets[0]="Caine";
pets[1]="Pisica";
pets[2]="Papagal";
2:
var pets=new Array("Caine","Pisica","Papagal");
//tablou condensat
3:
var pets=["Caine","Pisica","Papagal"];
//tablou literal
Obs: Dac n tablou stocai valori numerice sau logice, tipul tabloului va fi
Number sau Boolean, n loc de String.
Accesarea elementelor dintr-un tablou
Putei accesa un element dintr-un tablou preciznd numele tabloului i indexul
elementului. Primul element din tablou are indexul 0.
Urmtoarea linie de cod
document.write(pets[0]);
va afia irul: Caine
Modificarea valorilor dintr-un tablou
Pentru a modifica o valoare dintr-un tablou, este suficient s atribuii o nou
valoare elementului respectiv, ca n exemplul urmtor:
63
pets[0]="Iguana";
Proprietile obiectului Array
Proprietatea
Descriere
constructor Returneaz funcia care a creat prototipul obiectului Array
length
Seteaz sau returneaz numrul elementelor stocate n tablou
prototype
Permite adugare de proprieti i metode unui obiect
Metodele obiectului Array
Metoda
concat()
Descriere
join()
Concateneaz toate elementele unui tablou ntr-un ir de
caractere
pop()
nltur ultimul element dintr-un tablou i returneaz
respectivul element
push()
Adaug noi elemente la sfritul unui tablou i returneaz noua
lungime a tabloului
reverse()
Rstoarn ordinea elementelor dintr-un tablou
shift()
nltur primul element dintr-un tablou i returneaz
respectivul element
slice()
Selecteaz o parte dintr-un tablou i returneaz elementele
selectate
sort()
Sorteaz elementele unui tablou
splice()
Adaug/nltur elemente dintr-un tablou.
Concateneaz dou sau mai multe tablouri i returneaz tabloul
obinut
toString() Convertete un tablou n ir de caractere i returneaz rezultatul
unshift() Adaug noi elemente la nceputul unui tablou i returneaz
noua lungime a tabloului
valueOf() Returneaz valoarea primar a unui tablou
Exemple
Exemplul 1
Ilustreaz crearea unui tablou, atribuirea de valori i afiarea elementelor
tabloului.
<html>
64
<body>
<h3>Obiectul Array. Crearea unui tablou,
initializarea si afisarea elementelor.</h3> <hr/>
<script type="text/javascript">
var pets = new Array();
pets[0] = "Pisica";
pets[1] = "Caine";
pets[2] = "Perus";
document.write("Elementele memorate in tablou
sunt:"+"<br/>");
for (i=0;i<pets.length;i++)
{
document.write(pets[i] + "<br />");
}
</script>
</body>
</html>
Exemplul 2
Ilustreaz utilizarea instruciunii for...in pentru a parcurge elementele unui
tablou.
<html>
<body>
<h3>Obiectul Array. Afisarea elementelor unui tablou
cu instructiunea for..in.</h3> <hr/>
<script type="text/javascript">
var x;
var pets = new Array();
pets[0] = "Pisica";
pets[1] = "Caine";
pets[2] = "Perus";
document.write("Elementele memorate in tablou
sunt:"+"<br/>");
for (x in pets)
{
document.write(pets[x] + "<br />");
}
</script>
</body>
65
</html>
Exemplul 3
Ilustreaz utilizarea metodei concat() pentru a concatena trei tablouri.
<html>
<body>
<h3>Obiectul Array. Concatenarea a trei tablouri cu
concat().</h3> <hr/>
<script type="text/javascript">
var parinti = ["Maria", "George"];
var copii = ["Elena", "Mihai"];
var frati = ["Paul", "Dan"];
var familie = parinti.concat(copii,frati);
document.write("Parinti: "+parinti+"<br/>");
document.write("Copii: "+copii+"<br/>");
document.write("Frati: "+frati+"<br/>");
document.write("Familia: "+familie);
</script>
<p><b>Obs.</b>Tablourile concatenate nu se modifica.
Rezultatul concatenarii este un nou tablou.</p>
</body>
</html>
Exemplul 4
Ilustreaz utilizarea metodei join() pentru a concatena toate elementele unui
tablou ntr-un ir de caractere.
<html>
<body>
<h3>obiectul Array. Concatenarea elementelor unui
tablou intr-un sir de caractere cu join().</h3> <hr/>
<script type="text/javascript">
var fructe = ["Mere", "Pere", "Banane", "Kiwi"];
document.write("Tabloul contine valorile:
"+fructe+"<br/>");
document.write("Sirul concatenat cu join(\" \"):
"+fructe.join(" ") + "<br />");
document.write("Sirul concatenat cu join(\"+\"):
"+fructe.join("+") + "<br />");
66
document.write("Sirul concatenat cu join(\" si \"):
"+fructe.join(" si ")+"<br/>");
</script>
<p><b>Obs.</b>Tabloul nu se modifica. Sirul
concatenat poate fi memorat intr-o variabila.
</body>
</html>
Exemplul 5
Ilustreaz utilizarea metodei pop() pentru a nltura ultimul element dintr-un
tablou.
<html>
<body>
<h3>Obiectul Array. Eliminarea ultimului element din
tablou cu pop().</h3> <hr/>
<script type="text/javascript">
var pets = ["Pisica", "Caine", "Hamster", "Iguana"];
document.write("Tablou initial contine valorile:
"+pets+"<br/>");
document.write("S-a eliminat valoarea:
+ "<br />");
document.write("Tabloul dupa eliminare:
"<br />");
document.write("S-a eliminat valoarea:
+ "<br />");
document.write("Tabloul dupa eliminare:
"+pets.pop()
"+pets +
"+pets.pop()
"+pets);
</script>
<p><b>Obs.</b> Tabloul se modifica! Valoarea
eliminata poate fi memorata intr-o variabila.</p>
</body>
</html>
67
Exemplul 6
Ilustreaz utilizarea metodei push() pentru a aduga noi elemente la sfritul
unui tablou. Pot fi adugate mai multe valori simultan. Valorile trebuie separate
prin virgul.
<html>
<body>
<h3>Obiectul Array. Adaugarea de noi elemente la
sfarsitul tabloului cu push().</h3> <hr/>
<script type="text/javascript">
var pets = ["Pisica", "Caine", "Perus", "Hamster"];
document.write("Tabloul initial:
"+pets+"<br/>");
document.write("Se adauga valorile:
"+"Iguana"+"<br/>");
pets.push("Iguana");
document.write("Tabloul obtinut: "+pets+"<br/>");
document.write("Se adauga valorile: "+"Pesti si
Iepure"+"<br/>");
k=pets.push("Pesti","Iepure");
document.write("Tabloul obtinut: "+pets+"<br/>");
document.write("Tabloul final are "+k+" elemente");
</script>
<p><b>Obs.</b> Tabloul se modifica. Metoda returneaza
noua lungime a tabloului si
valoarea poate fi memorata intr-o variabila.</p>
</body>
</html>
Exemplul 7
Ilustreaz utilizarea metodei reverse() pentru a inversa ordinea elementelor
dintr-un tablou.
<html>
<body>
<h3>Obiectul Array. Inversarea ordinii elementelor
din tablou cu reverse().</h3> <hr/>
<script type="text/javascript">
68
var friends = ["Mihai", "Elena", "Andra", "Dan"];
document.write("Tabloul initial: "+friends+"<br/>");
friends.reverse();
document.write("Tabloul dupa inversare: "+friends);
</script>
</body>
</html>
Exemplul 8
Ilustreaz utilizarea metodei shift() pentru a elimina primul element dintrun tablou.
<html>
<body>
<h3>Obiectul Array. Eliminarea primului element din
tablou cu shift().</h3> <hr/>
<script type="text/javascript">
var friends = ["Mihai", "Elena", "Andra", "Dan"];
document.write("Tabloul initial:
"+friends+"<br/>");
var x=friends.shift();
document.write("Elementul eliminat: "+x+"<br/>");
document.write("Tabloul dupa eliminare: "+friends);
</script>
<p><b>Obs.</b> Tabloul se modifica. Metoda returneaza
elementul eliminat si rezultatul
poate fi memorat intr-o variabila.</p>
</body>
</html>
Exemplul 9
Ilustreaz cum se selecteaz elementele unui tablou cu metoda slice().
Metoda are dou argumente: primul precizeaz poziia de nceput a secvenei
selectat, iar al doilea poziia de sfrit. Dac al doilea argument lipsete, se vor
selecta toate elementele pn la sfritul tabloului. Dac argumentul este
negativ, se vor selecta elementele de la sfritul irului ctre nceput.
<html>
69
<body>
<h3>Obiectul Array. Selectare elementelor din tablou
cu slice().</h3> <hr/>
<script type="text/javascript">
var pets = ["Caine", "Pisica", "Papagal", "Hamster"];
document.write("Tabloul initial:
"+pets+"<br/>");
var x=pets.slice(0,1);
document.write("Elementele selectate cu slice(0,1):
"+x+"<br/>");
document.write("Elementele selectate cu slice(1):
"+pets.slice(1) + "<br />");
document.write("Elementele selectate cu slice(-2):
"+pets.slice(-2) + "<br />");
</script>
<p><b>Obs.</b> Tabloul nu se modifica. Elementele
selectate pot fi memorate intr-o variabila.</p>
</body>
</html
Exemplul 10
Ilustreaz utilizarea metodei sort() pentru a sorta alfabetic cresctor un
tablou de iruri de caractere. Metoda sorteaz implicit n ordine alfabetic
cresctoare.
<html>
<body>
<h3>Obiectul Array. Sortarea unui tablou cu
sort().</h3> <hr/>
<script type="text/javascript">
var friends = ["Mihai", "Elena", "Andra", "Dan"];
document.write("Tabloul initial: "+friends+"<br/>");
document.write("Tabloul sortat: "+friends.sort());
</script>
70
<p><b>Obs.</b> Tabloul se modifica!</p>
</body>
</html
Exemplul 11
Ilustreaz utilizarea metodei sort() pentru a sorta descendent un tablou de
numere. Numerele nu vor fi sortate corect. Trebuie adugat o funcie care s
compare numerele.
<html>
<body>
<h3>Obiectul Array. Sortarea unui tablou cu valori
numerice.</h3> <hr/>
<script type="text/javascript">
function sortDesc(a, b)
{
return b - a;
}
function sortCresc(a,b)
{
return a-b;
}
var n = new Array(10,5,40,25,100,1);
document.write("Tabloul initial: "+n+"<br/>");
document.write("Tabloul sortat crescator:
"+n.sort(sortCresc)+"<br/>");
document.write("Tabloul sortat descrescator:
"+n.sort(sortDesc));
</script>
<p><b>Obs.</b> In urma sortarii tabloul se
modifica!</p>
</body>
</html>
Exemplul 12
Ilustreaz utilizarea metodei splice() pentru a aduga un element n poziia
3 din tablou. Metoda are trei argumente: primul, obligatoriu precizeaz poziia
n care vor fi adugate/terse valori, al doilea, obligatoriu, reprezint numrul
71
de valori care vor fi terse (dac are valoarea 0, nu se vor terge ci se vor insera
valori) i, al treilea, opional, care reprezint noile valori adugate n tablou.
<html>
<body>
<h3>Obiectul Array. Inserarea/stergerea elementelor
dintr-o pozitie a tabloului cu splice().</h3> <hr/>
<script type="text/javascript">
var friends = ["Ana", "Mircea", "Dan", "Maria"];
document.write("Tabloul initial: "+friends+"<br/>");
document.write("Se adauga valoarea \"Andra\" in
pozitia 3 din tablou cu splice(3,0)"+"<br/>");
friends.splice(3,0,"Andra");
document.write("Tabloul obtinut: "+friends+"<br/>");
document.write("Se sterg din tablou primele doua
valori cu splice(0,2)"+"<br/>");
document.write("Valorile sterse:
"+friends.splice(0,2)+"<br/>");
document.write("Tabloul obtinut: "+friends);
</script>
<p><b>Obs.</b> Tabloul se modifica. Daca metoda
elimina elemente din tablou, va returna elementele
eliminate.</p>
</body>
</html>
Exemplul 13
Ilustreaz utilizarea metodei toString() pentru a converti un tablou ntr-un
ir de caractere. Metoda returneaz irul de caractere, valorile fiind separate
prin virgul.
<html>
<body>
<h3>Obiectul Array. Convertirea unui tablou in sir de
caractere cu toString().</h3> <hr/>
<script type="text/javascript">
var n = new Array(14,0,7,-4,25,13,7);
document.write("Tabloul contine valorile:"+"<br/>");
for(x in n) document.write(n[x]+"<br/>");
72
document.write("Sirul de caractere obtinut:"
+n.toString());
</script>
<p><b>Obs.</b> Tabloul nu se modifica. Metoda
returneaza sirul de caractere obtinut.</p>
</body>
</html>
Exemplul 14
Ilustreaz utilizarea metodei unshift() pentru a aduga noi valori la
nceputul unui tablou.
<html>
<body>
<h3>Obiectul Array. Adaugarea de elemente la
inceputul unui tablou cu unshift().</h3> <hr/>
<script type="text/javascript">
var pets = ["Pisica", "Caine", "Iguana", "Pesti"];
document.write("Tabloul initial: "+pets+"<br/>");
document.write("Se adauga valoarea \"Papagal\"
"+"<br/>");
pets.unshift("Papagal");
document.write("Tabloul dupa adaugare:
"+pets+"<br/>");
document.write("Se adauga valorile \"Perus\" si
\"Broasca testoasa\" "+"<br/>");
k=pets.unshift("Perus","Broasca testoasa");
document.write("Tabloul dupa adaugare:
"+pets+"<br/>");
document.write("Tabloul final are "+k+" elemente.");
</script>
<p><b>Nota:</b> Metoda unshift() nu lucreaza corect
in Internet Explorer; returneaza undefined!</p>
<p><b>Obs.</b>Tabloul se modifica. Metoda returneaza
numarul de elemente din tablou dupa adaugare.
Valoarea poate fi memorata intr-o variabila.</p>
</body>
</html>
73
23. Obiectul Boolean
Obiectul Boolean este utilizat pentru a converti o valoare ne-boolean ntr-o
valoare boolean (cu valoarea true sau false).
Crearea unui obiect boolean poate fi realizat ca n secvena de cod urmtoare:
var sem=new Boolean();
Obs: Dac obiectul Boolean nu are valoare iniial sau are una din valorile 0,
-0, null, "", false, undefined, sau NaN (not a number), obiectul este
iniializat cu valoarea false. n caz contrar, valoarea obiectului va fi true.
Toate declaraiile din liniile urmtoare de cod creeaz un obiect boolean
iniializat cu false:
var sem=new Boolean();
var sem=new Boolean(0);
var sem=new Boolean(null);
var sem=new Boolean("");
var sem=new Boolean(false);
var sem=new Boolean(NaN);
Toate declaraiile din liniile urmtoare de cod creaz un obiect boolean
iniializat cu true:
var sem=new Boolean(true);
var sem=new Boolean("true");
var sem=new Boolean("false");
var sem=new Boolean("home");
Proprietile obiectului Boolean
Proprietate
Descriere
constructor Returneaz funcia care a creat prototipul obiectului
prototype
Permite adugarea de proprieti i metode unui obiect
Metodele obiectului Boolean
Metod
Descriere
toString() Convertete o valoare boolean n ir de caractere i returneaz
rezultatul
valueOf() Returneaz valoarea primar a unui obiect Boolean
Exemplu
Ilustreaz cum se verific valoarea unui obiect Boolean.
74
<html>
<body>
<script type="text/javascript">
var b1=new Boolean( 0);
var b2=new Boolean(1);
var b3=new Boolean("");
var b4=new Boolean(null);
var b5=new Boolean(NaN);
var b6=new Boolean("false");
document.write("0 are valoarea "+ b1 +"<br />");
document.write("1 are valoarea "+ b2 +"<br />");
document.write("Un sir vid are valoarea "+ b3 + "<br
/>");
document.write("null are valoarea "+ b4+ "<br />");
document.write("NaN are valoarea "+ b5 +"<br />");
document.write("Sirul 'false' are valoarea "+ b6
+"<br />");
</script>
</body>
</html>
24. Obiectul Math
Obiectul Math permite realizarea prelucrrilor matematice. Obiectul include
constante matematice i metode. Obiectul nu are constructor. Toate
proprietile i metodele pot fi utilizate fr a crea efectiv un obiect.
Sintaxa de utilizare:
var pi=Math.PI;
var x=Math.sqrt(16);
Constante matematice
n JavaScript se pot utiliza opt constante matematice accesibile prin obiectul
Math. Ele pot fi utilizate cu urmtoarea sintax:
Math.E
Math.PI
Math.SQRT2
75
Math.SQRT1_2
Math.LN2
Math.LN10
Math.LOG2E
Math.LOG10E
Metode matematice
Exemplul urmtor ilustreaz utilizarea metodei round() pentru a rotunji un
numr la cel mai apropiat ntreg:
document.write(Math.round(4.7));
Exemplul urmtor utilizeaz metoda random() pentru a genera un numr
aleator cuprins ntre 0 i 1:
document.write(Math.random());
Exemplul urmtor utilizeaz metodele floor() i random() pentru a
genera un numr aleator cuprins ntre 0 i 10:
document.write(Math.floor(Math.random()*11));
Proprietile obiectului Math
Proprietate
E
Descriere
LN2
Returneaz logaritm natural din 2 (cca. 0.693)
LN10
Returneaz logaritm natural din 10 (cca. 2.302)
LOG2E
Returneaz logaritm n baza 2 din E (cca. 1.442)
LOG10E
Returneaz logaritm n baza 10 din E (cca. 0.434)
PI
Returneaz PI (cca. 3.14159)
SQRT1_2
Returneaz rdcina ptrat din 1/2 (cca. 0.707)
SQRT2
Returneaz rdcina ptrat din 2 (cca. 1.414)
Returneaz constanta lui Euler (cca. 2.718)
Metodele obiectului Math
Metod
abs(x)
Descriere
acos(x)
Arccosinus de x, n radiani
asin(x)
Arcsinus de x, n radiani
atan(x)
Arctangent de x ca valoare numeric ntre -PI/2 i
Valoarea absolut a lui x
76
PI/2 radiani
ceil(x)
Rotunjete x la ntreg prin adaos
cos(x)
Cosinus de x (x n radiani)
exp(x)
Valoarea lui Ex
floor(x)
Rotunjete x la ntreg prin lips
log(x)
Logaritm natural din x
max(x,y,z,...,n) Valoarea maxim din ir
min(x,y,z,...,n) Valoarea minim din ir
pow(x,y)
Valoarea lui x la puterea y
random()
Un numr aleator ntre 0 i 1
round(x)
Rotunjete x la cel mai apropiat ntreg
sin(x)
Sinus dex (x n radiani)
sqrt(x)
Rdcin ptrat din x
tan(x)
Tangenta unui unghi
Exemple
Exemplul 1
Ilustreaz utilizarea metodei max() pentru a determina maximul a dou sau
mai multe valori.
<html>
<body>
<script type="text/javascript">
document.write(Math.max(5,10) + "<br />");
document.write(Math.max(0,150,30,20,38) + "<br />");
document.write(Math.max(-5,10) + "<br />");
document.write(Math.max(-5,-10) + "<br />");
document.write(Math.max(1.5,2.5));
</script>
</body>
</html>
Exemplul 2
Ilustreaz utilizarea metodei min() pentru a determina minimul a dou sau
mai multe valori.
77
<html>
<body>
<script type="text/javascript">
document.write(Math.min(5,10) + "<br />");
document.write(Math.min(0,150,30,20,38) + "<br />");
document.write(Math.min(-5,10) + "<br />");
document.write(Math.min(-5,-10) + "<br />");
document.write(Math.min(1.5,2.5));
</script>
</body>
</html>
Exemplul 3
Convertirea gradelor din Celsius n Fahrenheit i reciproc.
<html>
<head>
<script type="text/javascript">
function convert(degree)
{
if (degree=="C")
{
F=document.getElementById("c").value * 9 / 5 + 32;
document.getElementById("f").value=Math.round(F);
}
else
{
C=(document.getElementById("f").value -32) * 5 / 9;
document.getElementById("c").value=Math.round(C);
}
}
</script>
</head>
<body>
<p></p><b>Introduceti un numar in unul din cele doua
campuri:</b></p>
<form>
<input id="c" name="c" onkeyup="convert('C')"> grade
Celsius<br />
egal<br />
78
<input id="f" name="f" onkeyup="convert('F')"> grade
Fahrenheit
</form>
</body>
</html>
25. Obiectul RegExp
Obiectul RegExp este folosit pentru a realiza cutri i nlocuiri ntr-un text.
RegExp este prescurtarea pentru expresie regulat. Cnd realizai cutri ntrun text, putei defini modele de cutare cu ajutorul obiectului RegExp.
Un model simplu poate fi un singur caracter. Un model mai complicat conine
mai multe caractere i poate fi utilizat pentru a analiza, verifica formatul,
nlocui etc. O expresie regulat este un obiect care descrie modelul cutat n
text.
Definire
Un obiect RegExp poate fi definit cu una din urmtoarele forme:
var txt=new RegExp(pattern,modifiers);
sau, mai simplu:
var txt=/pattern/modifiers;
pattern specific modelul cutat
modifiers specific dac ctarea este global, case-senzitiv etc.
Urmtoarea linie de cod definete un obiect RegExp numit m1 cu modelul
"d":
var m1=new RegExp("d");
Cnd folosii obiectul m1 ca s cutai ntr-un ir, va fi gsit litera "d".
.
Modificatorii
Modificator
i
Descriere
Realizeaz o cutare global (gsete toate potrivirile, nu
numai prima)
Caut potrivirea pe mai multe linii
Caut potrivirea fr a face diferena ntre literele mici i mari
Parantezele ptrate
79
Sunt utilizate pentru a defini un ir de caractere.
Expression
Description
[abc]
Gsete orice caracter precizat ntre paranteze
[^abc]
Gsete orice caracter diferit de cele precizate
[0-9]
Gsete o cifr ntre 0 i 9
[a-z]
Gsete orice liter mic
[A-Z]
Gsete orice liter mare
[a-Z]
Gsete orice liter, mare sau mic
[red|blue|green] Gsete oricare dintre alternativele specificate
Metacaracterele
Sunt caracterele care au o semnificaie special:
Metacaracter Descriere
.
Gsete un singur caracter (orice caracter diferit de linie nou
i sfrit de linie).
\w
Caut un caracter de cuvnt (litere mici sau mari, cifre i
underscore)
\W
Gsete un caracter care nu este de cuvnt
\d
Gsete o cifr
\D
Gsete un caracter care nu este cifr
\s
Caut un spaiu alb
\S
Caut un caracter diferit de spaiu
\b
Caut o potrivire la nceputul/sfritul unui cuvnt
\B
Caut o potrivire care nu este la nceputul/sfritul unui
cuvnt
\0
Caut un caracter NUL
\n
Caut un caracter linie nou
\f
Caut un caracter form feed
\r
Caut un caracter retur de car
\t
Caut un caracter tab
\v
Caut un tab caracter
Cuantificatori
80
Cuantificator
n+
Descriere
n*
Caut orice ir care conine 0 sau mai multe apariii ale
caracterului n
n?
Caut orice ir care conine 0 sau o apariie a caracterului n
n{X}
Caut orice ir care conine o secven de X caractere n
n{X,Y}
Caut orice ir care conine o secven de X sau Y caractere n
n{X,}
Caut orice ir care conine o secven de cel puin X
caractere n
n$
Caut orice ir care se ncheie cu caracterul n
^n
Caut orice ir care ncepe cu caracterul n
?=n
Caut orice ir care este urmat de irul n
?!n
Caut orice ir care nu este urmat de irul n
Caut orice ir care conine cel puin un caracter n
Proprietile obiectului RegExp
Proprietate
global
Descriere
ignoreCase
Specific dac modificatorul "i" este setat
lastIndex
Specific indexul de la care ncepe cutarea urmtoarei
potriviri
multiline
Specific dac modificatorul "m" este setat
source
Textul din modelul RegExp
Specific dac modificatorul "g" este setat
Metodele obiectului RegExp
Obiectul RegExp are trei metode: test(), exec() i compile().
Metoda test()
Caut ntr-un ir un model i returneaz true sau false.
Exemplu:
<html>
<body>
<script type="text/javascript">
var m1=new RegExp("e");
81
document.write(m1.test("Cele mai frumoase carti le
pastrez n amintire"));
</script>
</body>
</html>
Deoarece modelul "e" apare n ir, metoda va returna valoarea true care va fi
afiat.
Metoda exec()
Caut n text un model i returneaz modelul, dac acesta este gsit, sau
valoarea null, dac modelul nu apare n text.
Exemplu:
<html>
<body>
<script type="text/javascript">
var m1=new RegExp("e");
document.write(m1.exec("Cele mai frumoase carti le
pastrez n amintire"));
</script>
</body>
</html>
Deoarece modelul "e" apare n ir, metoda va returna valoarea e care va fi
afiat.
Putei aduga al doilea parametru obiectului RegExp, pentru a specifica modul
de cutare. Spre exemplu, dac dorii s gsii toate apariiile unui caracter,
putei folosi parametrul "g" ("global").
.
Cnd utilizai parametrul "g", metoda exec() lucreaz astfel:
Gsete prima apariie a modelului "e"i i memoreaz poziia
Dac executai din nou metoda exec(), cutarea va ncepe de la
poziia memorat anterior .a.m.d.
Exemplu:
<html>
<body>
<script type="text/javascript">
var m1=new RegExp("e","g");
82
do
{
result=m1.exec("Cele mai frumoase carti le pastrez n
amintire");
document.write(result);
}
while (result!=null)
</script>
</body>
</html>
Deoarece modelul "e" apare de ase ori n text, programul de mai sus va afia
secvena: eeeeeenull
Metoda compile()
Este utilizat pentru a modifica coninutul obiectului RegExp.
Metoda poate schimba modelul cutat i poate aduga sau elimina al doilea
parametru.
Exemplu:
<html>
<body>
<script type="text/javascript">
var m1=new RegExp("e");
document.write(m1.test("Cele mai frumoase carti le
pastrez n amintire"));
m1.compile("d");
document.write(m1.test("Cele mai frumoase carti le
pastrez n amintire"));
</script>
</body>
</html>
Deoarece modelul "e" apare n ir, dar modelul "d" nu apare, programul
anterior va afia valorile: truefalse
Exemple
Exemplul 1
83
Ilustreaz utilizarea metodei match() a obiectului String pentru a gsi
toate caracterele precizate n model cu ajutorul parantezelor ptrate.
<html>
<body>
<script type="text/javascript">
var str="Ce mai faci?";
var m1=/[a-h]/g;
document.write(str.match(m1));
</script>
</body>
</html>
Programul va afia rezultatul: e,a,f,a,c
Exemplul 2
Ilustreaz utilizarea metodei match() a obiectului String pentru a gsi
toate caracterelor diferite de cele din model.
<html>
<body>
<script type="text/javascript">
var str="Ce mai faci?";
var m1=/[^a-h]/g;
document.write(str.m1(patt1));
</script>
</body>
</html>
Programul anterior va afia rezultatul: C, ,m,i, ,i,?
Exemplul 3
Ilustreaz cum se poate construi un model care s gseasc toate secvenele n
care un caracter poate avea orice valoare.
<html>
<body>
<script type="text/javascript">
var str="Pisica nu are blana tarcata";
var m1=/a.a/g;
document.write(str.match(m1));
84
</script>
</body>
</html>
Programul va gsi toate secvenele de trei caractere n care primul i ultimul
caracter este a. Rezultatul afiat pentru irul de mai sus este: ana,ata
Exemplul 4
Ilustreaz cum se poate construi un model care s gseasc toate caracterele
care nu fac parte dintr-un cuvnt.
<html>
<body>
<script type="text/javascript">
var str="Ai obtinut 75%!";
var m1=/\W/g;
document.write(str.match(m1));
</script>
</body>
</html>
Programul anterior va afia rezultatul: , ,%,!
Exemplul 5
Ilustreaz cum se poate construi un model cu care s nceap sau s se
sfreasc un cuvnt.
<html>
<body>
<script type="text/javascript">
var str="Vizitati Google";
var m1=/\bGo/g;
document.write(str.match(m1));
</script>
</body>
</html>
Dac nu este gsit nici-un cuvnt care ncepe sau se sfrete cu modelul dat,
metoda match() va returna valoarea null. Pentru exemplul considerat
anterior, exist n text un cuvnt care se potrivete i metoda returneaz
modelul. Rezultatul afiat este: Go
85
Exemplul 6
Ilustreaz cum se pot gsi toate secvenele dintr-un text, n care un anumit
caracter apare cel puin o dat.
<html>
<body>
<script type="text/javascript">
var str="Tu creezi pagini web interesante!";
var m1=/e+/g;
do
{
result=m1.exec(str);
document.write(result); document.write(" ");
}
while(result!=null)
</script>
</body>
</html>
Programul anterior va determina toate secvenele din text n care caracterul e
apare cel puin o dat (n poziii consecutive). Rezultatul afiat de program este:
ee e e e e null
Exemplul 7
Ilustreaz cum se pot gsi o secvenele de text n care un anumit caracter apare
de minim x ori.
<html>
<body>
<script type="text/javascript">
var str="Aveti 10, 100, 1000 sau 10000 de lei?";
var m1=/\d{3,}/g;
document.write(str.match(m1));
</script>
</body>
</html>
Programul anterior afieaz rezultatul: 100,1000,10000, adic secvenele care
conin cel puin trei cifre zecimale.
Exemplul 8
Ilustreaz cum se pot gsi gsi toate subirurile dintr-un text, care sunt urmate
de un subir dat.
86
<html>
<body>
<script type="text/javascript">
var str="eu am o pisica, dar eu am si un papagal";
var m1=/eu(?= am)/g;
document.write(str.match(m1));
</script>
</body>
</html>
Programul anterior determin toate irurile eu care sunt urmate de irul
am. Rezultatul afiat este: eu,eu
26. Obiectul Number
Obiectul Number este un container pentru valorile numerice de baz. Obiectele
Number sunt create cu urmtoarea sintax:
var nume = new Number(valoare);
Obs: Dac parametrul valoare nu poate fi convertit ntr-un numr, va fi
returnat valoarea NaN (Not-a-Number).
Proprietile obiectului Number
Proprietate
constructor
Descriere
MAX_VALUE
Returneaz cel mai mare numr posibil n JavaScript
MIN_VALUE
Returneaz cel mai mic numr posibil n JavaScript
Returneaz funcia care a creat prototipul obiectului
NEGATIVE_INFINITY Reprezint infinitul negativ (returnat la depire)
POSITIVE_INFINITY Reprezint infinitul pozitiv (returnat la depire)
prototype
Permite adugarea de proprieti i metode
Metodele obiectului Number
Metod
Descriere
toExponential(x) Convertete numrul ntr-o notaie exponenial
toFixed(x)
Formeaz un numr cu x cifre dup virgul
toPrecision(x)
Formeaz un numr cu lungimea x
87
toString()
Convertete un obiect Number n ir de caractere.
Dac metoda are parametru, acesta precizeaz baza n
care este reprezentat numrul convertit n ir.
valueOf()
Returneaz valoarea primar a obiectului
Exemple
Exemplul 1
Ilustreaz cum se afieaz cel mai mare numr din JavaScript.
<html>
<body>
<script type="text/javascript">
document.write(Number.MAX_VALUE);
</script>
</body>
</html>
Exemplul 2
Ilustreaz cum se stabilete numrul de zecimale afiate.
<html>
<body>
<script type="text/javascript">
var num = new Number(27.2547);
document.write(num.toFixed()+"<br />");
document.write(num.toFixed(1)+"<br />");
document.write(num.toFixed(3)+"<br />");
document.write(num.toFixed(10));
</script>
</body>
</html>
Exemplul 3
Ilustreaz cum se stabilete precizia numrului afiat (numrul total de cifre
afiate).
<html>
88
<body>
<script type="text/javascript">
var num = new Number(31.1593);
document.write(num.toPrecision()+"<br />");
document.write(num.toPrecision(2)+"<br />");
document.write(num.toPrecision(3)+"<br />");
document.write(num.toPrecision(10));
</script>
</body>
</html>
Exemplul 4
Ilustreaz cum se convertete n ir un numr, folosind diferite baze de
numeraie.
<html>
<body>
<script type="text/javascript">
var num=new Number(31);
document.write(num.toString()+"<br />");
//numarul este reprezentat in baza 10 (implicit)
document.write(num.toString(2)+"<br />");
//numarul este reprezentat in baza 2
document.write(num.toString(8)+"<br />");
//numarul este reprezentat in baza 8
document.write(num.toString(16)+"<br />");
//numarul este reprezentat in baza 16
</script>
</body>
</html>
27. Obiectul Navigator
Obiectul Navigator conine informaii despre browserul vizitatorului.
89
Aproape orice exemplu din acest curs funcioneaz n browserele care recunosc
JavaScript. Totui, unele exemple nu funcioneaz n anumite browsere, n
special n cele vechi. De aceea, uneori este foarte util s determinai browserul
utilizat de vizitator pentru a-i putea furniza informaiile potrivite. Cea mai bun
metod este s v proiectai paginile web s se comporte diferit, n funcie de
browserul vizitatorului. Obiectul Navigator poate fi utilizat n acest scop,
deoarece conine informaii despre numele i versiunea browserului
vizitatorului.
Navigator Object Properties
Proprietate
appCodeName
Descriere
appName
Returneaz numele browserului
Returneaz codul browserului
appVersion
Returneaz informaii despre versiunea browserului
cookieEnabled Determin dac are cookies activate
platform
Returneaz pentru ce platform este compilat browserul
Exemple
Exemplul 1
Variabila "browser" din exemplul urmtor memoreaz numele browserului.
Proprietatea appVersion returneaz un ir de caractere care conine mult mai
multe informaii, nu numai numrul versiunii. Deoarece ne intereseaz numai
versiunea, pentru a o extrage din ir, este utilizat o funcie numit
parseFloat(), care extrage din ir i returneaz prima secven care arat
ca un numr zecimal.
<html>
<body>
<script type="text/javascript">
var browser=navigator.appName;
var b_ver=navigator.appVersion;
var versiune=parseFloat(b_ver);
document.write("Numele browserului: "+ browser);
document.write("<br />");
document.write("Versiunea browserului: "+ versiune);
</script>
</body>
</html>
90
Exemplul 2
Ilustreaz cum pot fi afiate diferite mesaje, n funcie de tipul i versiunea
browserului.
<html>
<head>
<script type="text/javascript">
function detectBrowser()
{
var browser=navigator.appName;
var b_ver=navigator.appVersion;
var versiune=parseFloat(b_ver);
if ((browser=="Netscape"||browser=="Microsoft
Internet Explorer")
&& (versiune>=4))
{
alert("Browserul dvs. este destul de bun!");
}
else
{
alert("Este timpul sa va upgradati browserul!");
}
}
</script>
</head>
<body onload="detectBrowser()">
</body>
</html>
Exemplul 3
Ilustreaz cum pot fi afiate mai multe detalii despre browserul vizitatorului.
<html>
<body>
<script type="text/javascript">
document.write("<p>Browser: ");
document.write(navigator.appName + "</p>");
document.write("<p>Versiune: ");
document.write(navigator.appVersion + "</p>");
document.write("<p>Cod: ");
document.write(navigator.appCodeName + "</p>");
91
document.write("<p>Platforma: ");
document.write(navigator.platform + "</p>");
document.write("<p>Cookies activate: ");
document.write(navigator.cookieEnabled + "</p>");
</script>
</body>
</html>
28. Cookies
Un cookie este o variabil pstrat n calculatorul vizitatorului. De fiecare dat
cnd calculatorul respectiv cere browserului o pagin, el va trimite i cookie-ul
respectiv. Cu JavaScript, putei crea i extrage cookies.
Exemple de cookies:
Numele utilizatorului Prima dat cnd utilizatorul v viziteaz
pagina trebuie s-i completeze numele. Numele este stocat ntr-un
cookie. Urmtoarea dat cnd vizitatorul ajunge la pagina dvs., putei
s-l ntmpinai cu un mesaj de genul "Bine ai venit........!" Numele
este recuperat dintr-un cookie.
Parol Prima dat utilizatorul v viziteaz pagina trebuie s
completeze o parol. Parola este memorat ntr-un cookie. Data
viitoare cnd vizitatorul ajunge n pagin, parola poate fi recuperat
dintr-un cookie.
Data calendaristic Prima dat cnd utilizatorul v viziteaz pagina,
data curent este memorat ntr-un cookie. Data viitoare cnd
utilizatorul v viziteaz pagina, putei s afiai un mesaj de genul
"Ultima dvs. vizita a fost in data de .........." Aceast dat este
recuperat dintr-un cookie.
Crearea i memorarea unui cookie
n acest exemplu vom crea un cookie care memoreaz numele vizitatorului,
apoi vom folosi numele memorat n variabila cookie pentru a afia un mesaj de
bun venit. Prima dat vom crea o funcie care memoreaz numele vizitatorului
ntr-o variabil cookie:
function setCookie(c_name,value,expiredays)
{
var exdate=new Date();
exdate.setDate(exdate.getDate()+expiredays);
document.cookie=c_name+ "=" +escape(value)+
92
((expiredays==null) ? "" :
";expires="+exdate.toGMTString());
}
Parametrii funciei reprezint numele i valoarea cookie-ului i numrul de zile
pn cnd acesta expir. Funcia convertete numrul de zile ntr-o dat valid
i apoi adaug numrul de zile dup care va expira cookie-ul va expira. Apoi,
numele i valoarea cookie-ului i data expirrii sunt memorate ntr-un obiect
document.cookie.
n continuare, vom crea o funcie care verific dac cookie-ul a fost setat:
function getCookie(c_name)
{
if (document.cookie.length>0)
{
c_start=document.cookie.indexOf(c_name + "=");
if (c_start!=-1)
{
c_start=c_start + c_name.length+1;
c_end=document.cookie.indexOf(";",c_start);
if (c_end==-1) c_end=document.cookie.length;
return unescape(document.cookie.substring
(c_start,c_end));
}
}
return "";
}
Funcia verific mai nti dac n obiectul document.cookie este memorat vreun cookie. n caz afirmativ, verificm dac este memorat cookie-ul dorit. Dac
cookie-ul este gsit, i returnm valoarea, n caz contrar returnm un ir vid.
n cele din urm, vom crea funcia care afieaz un mesaj de bun venit dac
cookie-ul este setat i o caset prompt care cere numele vizitatorului, n caz
contrar:
function checkCookie()
{
username=getCookie('username');
if (username!=null && username!="")
{
alert('Welcome again '+username+'!');
}
else
{
username=prompt('Please enter your name:',"");
if (username!=null && username!="")
93
{
setCookie('username',username,365);
}
}
}
Programul complet este:
<html>
<head>
<script type="text/javascript">
function getCookie(c_name)
{
if (document.cookie.length>0)
{
c_start=document.cookie.indexOf(c_name + "=");
if (c_start!=-1)
{
c_start=c_start + c_name.length+1 ;
c_end=document.cookie.indexOf(";",c_start);
if (c_end==-1) c_end=document.cookie.length
return
unescape(document.cookie.substring(c_start,c_end));
}
}
return ""
}
function setCookie(c_name,value,expiredays)
{
var exdate=new Date();
exdate.setDate(exdate.getDate()+expiredays);
document.cookie=c_name+
+escape(value)+((expiredays==null)
?
""
expires="+exdate.toGMTString());
}
function checkCookie()
{
username=getCookie('username');
if (username!=null && username!="")
{
alert('Bine ai revenit '+username+'!');
}
else
{
94
"="
";
username=prompt('Va rog sa va introduceti
numele:',"");
if (username!=null && username!="")
{
setCookie('username',username,365);
}
}
}
</script>
</head>
<body onLoad="checkCookie()">
</body>
</html>
Exemplul prezentat execut funcia checkCookie() cnd pagina se ncarc.
29. Validarea formularelor
JavaScript poate fi utilizat pentru a valida formularele HTML nainte de a fi
trimise ctre server.
Datele verificate uzual cu JavaScript pot fi:
au rmas cmpuri obligatorii necompletate?
adresa de e-mail este valid?
data calendaristic este valid?
s-a introdus text ntr-un cmp numeric?
Cmpuri obligatorii
Funcia urmtoare verific dac un cmp obligatoriu a rmas necompletat. n
caz afirmativ, o caset de alertare afieaz un mesaj i funcia returneaz
valoarea false. Dac cmpul a fost completat, funcia returneaz valoarea true
i data este considerat valid:
function valideaza_obligatoriu(camp,txt)
{
with (camp)
{
if (value==null||value=="")
{
alert(txt);return false;
}
else
{
95
return true;
}
}
}
Scriptul complet, cu formularul HTML, ar putea arta n felul urmtor:
<html>
<head>
<script type="text/javascript">
function valideaza_obligatoriu(camp,txt)
{
with (camp)
{
if (value==null||value=="")
{
alert(txt);return false;
}
else
{
return true;
}
}
}
function valideaza_formular(formular)
{
with (formular)
{
if (valideaza_obligatoriu(email,"Campul Email este
obligatoriu!")==false)
{email.focus();return false;}
}
}
</script>
</head>
<body>
<form action="submit.htm" onsubmit="return
valideaza_formular(this)" method="post">
Email: <input type="text" name="email" size="30">
<input type="submit" value="Trimite">
</form>
</body>
96
</html>
Validarea adresei de e-mail
Funcia urmtoare verific dac cmpul respect sintaxa general a unei adrese
de e-mail. Asta nseamn c date respectiv trebuie s conin cel puin
caracterul @ i un punct. De asemenea, @ nu poate fi primul caracter din ir,
iar ultimul punct trebuie s fie cel puin la un caracter distan de @:
function valideaza_email(camp,txt)
{
with (camp)
{
apos=value.indexOf("@");
dotpos=value.lastIndexOf(".");
if (apos<1||dotpos-apos<2)
{alert(txt);return false;}
else {return true;}
}
}
Scriptul complet, cu formularul HTML, ar putea arta n felul urmtor:
<html>
<head>
<script type="text/javascript">
function valideaza_email(camp,txt)
{
with (camp)
{
apos=value.indexOf("@");
dotpos=value.lastIndexOf(".");
if (apos<1||dotpos-apos<2)
{alert(txt);return false;}
else {return true;}
}
}
function valideaza_formular(formular)
{
with (formular)
{
if (valideaza_email(email,"Adresa e-mail nu este
valida!")==false)
{email.focus();return false;}
97
}
}
</script>
</head>
<body>
<form action="submit.htm" onsubmit="return
valideaza_formular(this);" method="post">
Email: <input type="text" name="email" size="30">
<input type="submit" value="Trimite">
</form>
</body>
</html>
30. Animaie
Putei folosi JavaScript pentru a crea imagini animate. Secretul este s lsai
scriptul s afieze imagini diferite pentru evenimente diferite.
n exemplul urmtor vom aduga o imagine care se va comporta ca un link n
pagina web. Vom aduga apoi un eveniment onMouseOver i un eveniment
onMouseOut care vor apela dou funcii JavaScript ce vor comuta ntre dou
imagini.
Codul HTML arat astfel:
<a href="http://www.google.com" target="_blank">
<img border="0" alt="Vizitati Google!" src="img2.gif"
id="m1"
onmouseOver="mouseOver()" onmouseOut="mouseOut()"
/></a>
Observai c imaginea a primit un id, pentru ca JavaScript s poat referi
imaginea n diferite puncte din script. Evenimentul onMouseOver va spune
browserului c, n momentul n care mouse-ul trece peste imagine, trebuie
apelat o funcie care s schimbe imaginea. Evenimentul onMouseOut va
spune browserului c, atunci cnd mouse-ul se ndeprteaz de imagine, trebuie
apelat o funcie care va afia din nou imaginea iniial.
Codul celor dou funcii este:
<script type="text/javascript">
function mouseOver()
{
document.getElementById("m1").src ="img1.gif";
98
}
function mouseOut()
{
document.getElementById("m1").src ="img2.gif";
}
</script>
Funcia mouseOver() va determina afiarea imaginii "img1.gif", iar funcia
mouseOut() va determina afiarea imaginii "img2.gif". Efectul de animaie
este mai vizibil dac cele dou imagini sunt foarte asemntoare, diferind spre
exemplu prin culoare.
Codul ntregului program este:
<html>
<head>
<script type="text/javascript">
function mouseOver()
{
document.getElementById("m1").src ="img1.gif";
}
function mouseOut()
{
document.getElementById("m1").src ="img2.gif";
}
</script>
</head>
<body>
<a href="http://www.google.com" target="_blank">
<img border="0" alt="Vizitati Google!" src="img2.gif"
id="b1"
onmouseover="mouseOver()" onmouseout="mouseOut()"
/></a>
</body>
</html>
31. Imagini mapate
O imagine mapat (image-map) este o imagine care are zone ce pot fi
acionate cu mouse-ul. n mod normal, fiecare zon are un hiperlink asociat.
n tagurile <area> din imaginea mapat pot fi adugate evenimente care
apeleaz funcii JavaScript. Tagul <area> suport evenimentele onClick,
onDblClick,
onMouseDown,
onMouseUp,
onMouseOver,
99
onMouseMove, onMouseOut, onKeyPress, onKeyDown, onKeyUp,
onFocus i onBlur.
Exemplul urmtor ilustreaz utilizarea unei imagini mapate ntr-un program
HTML:
<html>
<head>
<script type="text/javascript">
function writeText(txt)
{
document.getElementById("desc").innerHTML=txt;
}
</script>
</head>
<body>
<img src="planets.gif" width="145" height="126"
alt="Planets" usemap="#planetmap" />
<map name="planetmap">
<area shape ="rect" coords ="0,0,82,126"
onMouseOver="writeText('Soarele si planetele gigante
gazoase, ca Jupiter, sunt cu certitudine cele mai
mari corpuri din sistemul nostru solar.')"
href ="sun.htm" target ="_blank" alt="Sun" />
<area shape ="circle" coords ="90,58,3"
onMouseOver="writeText('Planeta Mercur este foarte
greu de studiat de pe Pamant datorita apropierii ei
de Soare.')"
href ="mercur.htm" target ="_blank" alt="Mercur" />
<area shape ="circle" coords ="124,58,8"
onMouseOver="writeText('Pana in anii 60, Venus a
fost adesea considerata sora geamana a Pamantului
pentru ca este cea mai apropiata de noi, si cele doua
planete au multe caracteristici comune.')"
href ="venus.htm" target ="_blank" alt="Venus" />
</map>
<p id="desc"></p>
</body>
</html>
100
32. Programarea evenimentelor
Codurile JavaScript pot fi execute la intervale de timp programate. Programarea
evenimentelor JavaScript se realizeaz uor cu ajutorul urmtoarelor dou
metode:
setTimeout() execut un cod cndva n viitor
clearTimeout()
anuleaz programrile realizate cu
setTimeout()
Obs: Ambele metode aparin obiectului Window din HTML DOM.
Metoda setTimeout()
Sintax:
var t=setTimeout("declaraie javascript",
milliseconds);
Metoda setTimeout() returneaz o valoare care este memorat n variabila
t declarat mai sus. Dac dorii s anulai programarea, o putei face folosind
variabila asociat. Primul argument al metodei este un ir de caractere care
conine o declaraie JavaScript care poate fi, de exemplu, un apel de funcie sau
instruciunea de afiare a unei casete de mesaj. Al doilea parametru precizeaz
numrul de milisecunde (ncepnd de acum) dup care va fi executat primul
parametru.
Obs: O secund are 1000 de milisecunde.
Exemplul 1
n exemplul urmtor, cnd butonul este apsat, o caset de alertare va fi afiat
dup 7 secunde.
<html>
<head>
<script type="text/javascript">
function mesaj()
{
var t=setTimeout("alert('Caseta afisata dupa 7
secunde!')",7000);
}
</script>
</head>
<body>
<form>
101
<input type="button" value="Afiseaza mesajul!"
onClick="mesaj()" />
</form>
</body>
</html>
Exemplul 2
Pentru o repeta la infinit o secven de cod, trebuie s scriem o funcie care se
autoapeleaz. n exemplul urmtor, cnd butonul este apsat, un cmp de
intrare dintr-un formular va ncepe s numere, plecnd de la zero, secundele
scurse, fr s se opreasc. A fost inclus i o funcie care verific dac
numrtorul funcioneaz deja, pentru a nu crea un alt numrtor dac butonul
este apsat de mai multe ori.
<html>
<head>
<script type="text/javascript">
var c=0;
var t;
var pornit=0;
function numara()
{
document.getElementById('txt').value=c;
c=c+1;
t=setTimeout("numara()",1000);
}
function verifica()
{
if (!pornit)
{
pornit=1;
numara();
}
}
</script>
</head>
<body>
<form>
<input type="button" value="Incepe numararea!"
onClick="verifica()">
<input type="text" id="txt" />
102
</form>
</body>
</html>
Metoda clearTimeout()
Sintax:
clearTimeout(variabila_setTimeout)
n exemplul urmtor utilizm numrtorul infinit din exemplul urmtor i
adugm o funcie care va opri numrtorul la apsarea unui buton:
<html>
<head>
<script type="text/javascript">
var c=0;
var t;
var pornit=0;
function numara()
{
document.getElementById('txt').value=c;
c=c+1;
t=setTimeout("numara()",1000);
}
function verifica()
{
if (!pornit)
{
pornit=1;
numara();
}
}
function stop()
{
clearTimeout(t);
pornit=0;
}
</script>
</head>
<body>
<form>
<input type="button" value="Incepe numararea!"
103
onClick="verifica()">
<input type="text" id="txt">
<input type="button" value="Opreste numararea!"
onClick="stop()">
</form>
</body>
</html>
Exemplu
Acest exemplu ilustreaz crearea unui ceas cu ajutorul evenimentelor
programate.
<html>
<head>
<script type="text/javascript">
function numara()
{
var azi=new Date();
var h=azi.getHours();
var m=azi.getMinutes();
var s=azi.getSeconds();
// adauga un zero in fata numerelor <10
m=verifica(m);
s=verifica(s);
document.getElementById('txt').innerHTML=h+":"+m+":"+
s;
t=setTimeout('numara()',500);
}
function verifica(i)
{
if (i<10)
{
i="0" + i;
}
return i;
}
</script>
</head>
<body onload="numara()">
<div id="txt"></div>
</body>
</html>
104
33. Crearea obiectelor proprii
Obiectele sunt utile pentru a organiza informaia. n completarea obiectelor
predefinite n JavaScript, cum ar fi String, Date, Array, etc., v putei crea
propriile obiecte.
Un obiect este doar un tip particular de date, cu o colecie de proprieti i
metode. Spre exemplu, o persoan este un obiect nzestrat cu proprieti cum ar
fi: nume, vrst, nlime, greutate, culoarea ochilor etc. Proprietile au
anumite valori, care difer de la o persoan la alta. Metodele sunt aciuni care
pot fi realizate cu un obiect. Pentru obiectul persoana, acestea ar putea fi:
mananca(), munceste(), doarme, scrie(), citeste() etc.
Proprietile
Pentru a accesa o proprietate a unui obiect sintaxa este:
nume_obiect.nume_proprietate
Putei aduga proprieti unui obiect prin simpla atribuire de valori. Dac
presupunem c obiectul persoana exist deja, putem s-i adugm proprieti
prin atribuiri, ca n exemplul urmtor:
persoana.nume="Popescu";
persoana.prenume="Andrei";
persoana.varsta=25;
persoana.ochi="verzi";
document.write(persoana.nume);
Codul de mai sus va afia rezultatul: Popescu
Metodele
Pentru a accesa o metod a unui obiect sintaxa este:
Nume_obiect.nume_metoda()
Obs: Dac metoda are parametri, ei vor fi scrii ntre paranteze.
Un obiect poate fi creat n trei moduri:
1. Crearea direct a unui obiect
Secvena urmtoare de cod creeaz un obiect i i adaug proprieti:
persoana=new Object();
persoana.nume="Popescu";
persoana.prenume="Andrei";
105
persoana.varsta=25;
persoana.ochi="verzi";
Adugare unei metode se face simplu, ca n exemplul urmtor:
persoana.scrie=scrie;
2 Crearea ablonului unui obiect
ablonul definete structura unui obiect:
function persoana(nume,prenume,varsta,ochi)
{
this.nume=nume;
this.prenume=prenume;
this.varsta=varsta;
this.ochi=ochi;
}
Observai c ablonul este doar o funcie. n interiorul funciei trebuie s facei
atribuiri pentru this.nume_proprietate. Construcia "this" se refer la instana
curent a obiectului.
Dup ce ai construit ablonul obiectului, putei crea noi instane dup modelul
urmtor:
tata=new persoana("Marcu","Ion",40,"verzi");
mama=new persoana("Marcu","Maria",38,"negri");
Adugarea de metode obiectului persoana se realizeaz tot n interiorul
ablonului:
function persoana(nume,prenume,varsta,ochi)
{
this.nume=nume;
this.prenume=prenume;
this.varsta=varsta;
this.ochi=ochi;
this.numenou=numenou;
}
Observai c metodele sunt funcii ataate obiectului. Acum va trebui scris
funcia numenou():
function numenou(str)
{
this.nume=str;
}
Putei folosi metoda astfel: mama.numenou(Georgescu);
106
34. Proprieti i metode globale
Aceste proprieti i metode pot fi folosite pentru orice variabile, din acest
motiv se numesc globale.
Proprietate
Infinity
Descriere
NaN
O valoare "Not-a-Number"
undefined
Indic o variabil creia nu i-a fost atribuit o valoare
O valoare numeric care reprezint infinitiv
pozitiv/negativ
Exemplul 1
Ilustreaz utilizarea proprietii NaN:
<html>
<body>
<script type="text/javascript">
var luna=13;
if (luna < 1 || luna > 12)
{
luna = luna.NaN;
}
document.write(luna);
</script>
</body>
</html>
Exemplul 2
Ilustreaz utilizarea proprietii undefined:
<html>
<body>
<script type="text/javascript">
107
var t1="";
var t2;
if (t1==undefined)
{
document.write("Variabila t1 nu este definita");
}
if (t2==undefined)
{
document.write("Variabila t2 nu este definita");
}
</script>
</body>
</html>
Funcie
escape()
Descriere
eval()
Evalueaz un ir de caractere i, dac irul conine o
secven de cod JavaScript, execut secvena
isFinite()
Determin dac valoarea este un numr valid, finit
isNaN()
Determin dac valoarea este un numr invalid
Number()
Convertete valoarea unui obiect n numr
parseFloat()
Convertete un ir ntr-un numr zecimal
parseInt()
Convertete un ir ntr-un numr ntreg
String()
Convertete valoarea unui obiect ntr-un ir
unescape()
Decodeaz un ir codat
Codeaz caracterele speciale dintr-un ir de caractere
astfel nct irul devine portabil n reea ctre orice
calculator care suport codurile ASCII
Exemplul 1
Ilustreaz utilizarea metodei eval():
<html>
<body>
<script type="text/javascript">
108
eval("x=10;y=20;document.write(x*y)");
document.write("<br />" + eval("2+2"));
document.write("<br />" + eval(x+17));
</script>
</body>
</html>
Exemplul 2
Ilustreaz utilizarea metodei Number():
<html>
<body>
<script
var t1=
var t2=
var t3=
var t4=
var t5=
type="text/javascript">
new Boolean(true);
new Boolean(false);
new Date();
new String("921");
new String("193 469");
document.write(Number(t1)+
document.write(Number(t2)+
document.write(Number(t3)+
document.write(Number(t4)+
document.write(Number(t5)+
</script>
"<br
"<br
"<br
"<br
"<br
/>");
/>");
/>");
/>");
/>");
</body>
</html>
Exemplul 3
Ilustreaz utilizarea metodei parseFloat() pentru a extrage valoarea dintrun ir ca numr zecimal:
<html>
<body>
<script type="text/javascript">
document.write(parseFloat("10") + "<br />");
document.write(parseFloat("10.00") + "<br />");
document.write(parseFloat("10.33") + "<br />");
document.write(parseFloat("34 45 66") + "<br />");
document.write(parseFloat("
60
") + "<br />");
109
document.write(parseFloat("40 de ani") + "<br />");
document.write(parseFloat("Ea are 40 de ani") + "<br
/>");
</script>
</body>
</html>
Obs. Metoda verific dac primul caracter din ir poate apare n scrierea unei
valori zecimale i, n caz afirmativ continu construirea acestui numr pn la
ntlnirea primului caracter care nu poate apare n scrierea unui numr.
Programul anterior va afia valorile:
10
10
10.33
34
60
40
NaN
Exemplul 4
Ilustreaz utilizarea metodei parseInt() pentru a extrage valoarea dintr-un
ir ca numr ntreg:
<html>
<body>
<script type="text/javascript">
document.write(parseInt("10") + "<br />") ;
document.write(parseInt("10.33") + "<br />");
document.write(parseInt("34 45 66") + "<br />");
document.write(parseInt(" 60 ") + "<br />");
document.write(parseInt("40 de ani") + "<br />");
document.write(parseInt("Ea are 40 de ani") + "<br
/>");
document.write("<br />");
document.write(parseInt("10",10)+ "<br />");
document.write(parseInt("010")+ "<br />");
document.write(parseInt("10",8)+ "<br />");
document.write(parseInt("0x10")+ "<br />");
document.write(parseInt("10",16)+ "<br />");
</script>
</body>
</html>
110
Obs. Dac numrul ncepe cu 0 va fi interpretat ca fiind scris n baza 8, iar dac
ncepe cu 0x ca fiind scris n baza 16. Baza poate fi specificat i prin
adugarea celui de-al doilea parametru n metod. Conversia se ncheie la
ntlnirea primului caracter din ir care nu poate apare n scrierea unui numr
ntreg. Programul anterior afieaz valorile:
10
10
34
60
40
NaN
10
8
8
16
16
35. Obiectele browserului
Obiectul window
Acest obiect reprezint o fereastr deschis n browser. Dac conine cadre
(tagurile <frame> sau <iframe>), browserul creeaz un obiect window
pentru documentul HTML, i cte un obiect window pentru fiecare cadru.
Proprietile obiectului window
Proprietate
Descriere
closed
Returneaz o valoare boolean care indic dac fereastra a
fost nchis sau nu
defaultStatus Seteaz sau returneaz textul implicit din bara de stare a
ferestrei
document
Returneaz obiectul Document al ferestrei
frames
Returneaz un tablou cu toate cadrele din fereastra curent
history
Returneaz obiectul History al ferestrei
innerHeight
Seteaz sau returneaz nlimea interioar a zonei de
coninut a ferestrei
innerWidth
Seteaz sau returneaz limea interioar a zonei de
coninut a ferestrei
111
length
Returneaz numrul de cadre (inclusiv cele inline) din
fereastr
location
Returneaz obiectul Location al ferestrei
name
Seteaz sau returneaz numele ferestrei
opener
Returneaz referina care a creat fereastra
outerHeight
Seteaz sau returneaz nlimea exterioar a ferestrei
(inclusiv toolbars/scrollbars)
outerWidth
Seteaz sau returneaz limea exterioar a ferestrei
(inclusiv toolbars/scrollbars)
pageXOffset
Returneaz numrul de pixeli cu care documentul curent a
fost derulat orizontal, n raport cu colul stnga sus al
ferestrei
pageYOffset
Returneaz numrul de pixeli cu care documentul curent a
fost derulat vertical, n raport cu colul stnga sus al
ferestrei
parent
Returneaz fereastra printe a ferestrei curente
screenLeft
Returneaz coordonata x a ferestrei, relativ la ecran
screenTop
Returneaz coordonata y a ferestrei, relativ la ecran
screenX
Returneaz coordonata x a ferestrei, relativ la ecran
screenY
Returneaz coordonata y a ferestrei, relativ la ecran
self
Returneaz fereastra curent
status
Seteaz textul din bara de stare a ferestrei
top
Returneaz cea mai din vrf fereastr deschis n browser
Metodele obiectului window
Metod
Descriere
alert()
Afieaz o caset de alertare care conine un mesaj i un
buton OK
blur()
ndeprteaz focus-ul de la fereastra curent
clearInterval() Reseteaz timer-ul setat cu setInterval()
clearTimeout() Reseteaz timer-ul setat cu setTimeout()
close()
nchide fereastra curent
confirm()
Afieaz o caset de dialog care conine un mesaj i
butoanele OK i Cancel
112
createPopup()
Creeaz o fereastr pop-up
focus()
Fixeaz focus-ul pe fereastra curent
moveBy()
Mut fereastra, relativ la poziia ei curent
moveTo()
Mut fereastra ntr-o nou poziie
open()
Deschide o nou fereastr n browser
print()
Tiprete coninutul ferestrei curente
prompt()
Afieaz o caset de dialog care cere utilizatorului s
introduc anumite informaii
resizeBy()
Redimensioneaz fereastra la dimensiunea specificat n
pixeli
resizeTo()
Redimensioneaz fereastra la nlimea i limea
specificate
scrollBy()
Deruleaz coninutul ferestrei cu numrul specificat de
pixeli
scrollTo()
Deruleaz coninutul ferestrei pn la coordonatele
specificate
setInterval()
Apeleaz o funcie sau evalueaz o expresie la intervale
specificate de timp (n milisecunde)
setTimeout()
Apeleaz o funcie sau evalueaz o expresie dup un
numr specificat de milisecunde
Exemplul 1
Ilustreaz utilizarea metodelor open() i focus().
<html>
<head>
<script type="text/javascript">
function deschide()
{
myWindow=window.open('','','width=200,height=100');
myWindow.document.write("<p>Aceasta este o fereastra
creata cu metoda open()</p>");
myWindow.focus();
}
</script>
</head>
<body>
<input type="button" value="Deschide fereastra"
onclick="deschide()" />
113
</body>
</html>
Exemplul 2
n acest exemplu, funcia clock() este apelat la fiecare 1000 milisecunde i
actualizeaz ceasul afiat. Ceasul poate fi oprit prin apsarea unui buton.
<html>
<body>
<input type="text" id="clock" />
<script language=javascript>
var int=self.setInterval("clock()",1000);
function clock()
{
var d=new Date();
var t=d.toLocaleTimeString();
document.getElementById("clock").value=t;
}
</script>
</form>
<button
onclick="int=window.clearInterval(int)">Stop</button>
</body>
</html>
Exemplul 3
Ilustreaz mutarea ferestrei curente cu 250 pixeli relativ la poziia ei curent.
<html>
<head>
<script type="text/javascript">
function deschide()
{
myWindow=window.open('','','width=200,height=100');
myWindow.document.write("<p>Aceasta este o fereastra
deschisa cu open()</p>");
}
function muta()
{
myWindow.moveBy(250,250);
114
myWindow.focus();
}
</script>
</head>
<body>
<input type="button" value="Deschide fereastra"
onclick="deschide()" />
<br /><br />
<input type="button" value="Muta fereastra"
onclick="muta()" />
</body>
</html>
Exemplul 4
Ilustreaz redimensioneaz redimensionarea ferestrei curente.
<html>
<head>
<script type="text/javascript">
function redimensioneaza()
{
top.resizeTo(500,300);
}
</script>
</head>
<body>
<form>
<input type="button" onclick="redimensioneaza()"
value="Redimensioneaza fereastra" />
</form>
</body>
</html>
Exemplul 5
Ilustreaz utilizarea metodei blur() pentru a trimite o fereastr n
background.
<html>
<head>
<script type="text/javascript">
function deschide()
115
{
myWindow=window.open('','','width=200,height=100');
myWindow.document.write("<p>Aceasta fereastra este
deschisa cu open()</p>");
myWindow.blur();
}
</script>
</head>
<body>
<input type="button" value="Deschide fereastra"
onclick="deschide()" />
</body>
</html>
Obiectul screen
Acest obiect conine informaii despre ecranul vizitatorului.
Proprietile obiectului screen
Proprietate
Descriere
availHeight Returneaz nlimea ecranului (fr Taskbar)
availWidth Returneaz limea ecranului (fr Taskbar)
colorDepth Returneaz numrul de bii din paleta de culori folosit pentru
afiarea imaginilor
height
Returneaz nlimea total a ecranului
pixelDepth Returneaz rezoluia culorii ecranului (n bii/pixel)
width
Returneaz limea total a ecranului
Exemplu urmtor ilustreaz utilizarea tuturor proprietilor obiectului screen
pentru a obine informaii despre ecranul vizitatorului:
<html>
<body>
<h3>Ecranul dumneavoastra are proprietatile:</h3>
<script type="text/javascript">
document.write("Latime/Inaltime totala: ");
document.write(screen.width + "*" + screen.height);
document.write("<br />");
116
document.write("Latime/Inaltime disponibila: ");
document.write(screen.availWidth + "*" +
screen.availHeight);
document.write("<br />");
document.write("Numarul de biti ai culorii: ");
document.write(screen.colorDepth);
document.write("<br />");
document.write("Rezoluia culorii: ");
document.write(screen.pixelDepth);
</script>
</body>
</html>
Obiectul history
Acest obiect conine URL-urile vizitate de utilizator (ntr-o fereastr de
browser). Obiectul history face parte din obiectul window i este accesat
prin proprietatea window.history.
Proprietile obiectului history
Proprietate
Descriere
length
Returneaz numrul de URL-uri din lista history
Metodele obiectului history
Metod
Descriere
back()
ncarc URL-ul anterior din lista history
forward()
ncarc URL-ul urmtor din lista history
go()
ncarc un anumit URL din lista history
Obiectul location
Obiectul location conine informaii despre url-ul curent..
Obiectul location este parte a obiectului window i este accesat prin intermediul
proprietii window.location.
Proprietile obiectului location
Proprietate
Descriere
hash
Returneaz poriunea de ancor din URL
host
Returneaz hostname-ul i port-ul URL-ului
117
hostname
Returneaz hostname-ul URL-ului
href
Returneaz ntregul URL
pathname
Returneaz numele cii URL-ului
port
Returneaz numrul de port pe care serverul l utilizeaz pentru
URL
protocol
Returneaz protocolul URL-ului
search
Returneaz poriunea query din URL
Metodele obiectului location
Metod
Descriere
assign()
ncarc un nou document
reload()
Rencarc documentul curent
replace()
nlocuiete documentul curent cu un alt document
Exemplu
Ilustreaz utilizarea metodei assign().
<html>
<head>
<script type="text/javascript">
function nou()
{
window.location.assign("http://www.google.com")
}
</script>
</head>
<body>
<input type="button" value="Incarca noul document"
onclick="nou()" />
</body>
</html>
118
Bibliografie
Jim Keogh, JavaScript fara mistere - ghid pentru autodidacti, Editura Rosetti
Educational, 2005
Tom Negrino, Dori Smith, JavaScript pentru World Wide Web, Editura Corint,
2004
Richard Wagner, JavaScript, Editura Teora
Diana Elena Diaconu, Pagini web cu JavaScript, Editura Edusoft, 2006
http://www.w3schools.com/
http://www.howtocreate.co.uk/tutorials/javascript/
119
