Limbajul JavaScript2

Limbajul JavaScript
Notiuni de baza
Inserarea scripturilor
Afiarea datelor n JavaScript
Comentarii JavaScript
Tipuri de date
Variabile JavaScript
Operatori JavaScript
Caractere speciale
Casete Popup
Instruciuni JavaScript
Instruciuni condiionale
Instructiuni repetitive
Break i continue
Instruciunea with
Funcii
Evenimente JavaScript
Obiectele JavaScript
Obiectul String
Obiectul Date
Obiectul Array
Obiectul Boolean
Obiectul Math
Obiectul RegExp
Obiectul Number
Obiectul Navigator
Obiectele browserului
Cookies
Validarea formularelor
Animaie
Imagini mapate
Programarea evenimentelor
Depanarea aplicaiilor JavaScript
Crearea obiectelor proprii
Proprieti i metode globale
JavaScript - Notiuni de baza

JavaScript a fost dezvoltat prima data de catre firma Netscape, cu numele de Live Script, un
limbaj de script care extindea capacitatile HTML, ofera o alternativa partiala la utilizarea unui
numar mare de scripturi CGI pentru prelucrarea informatiilor din formulare si care adauga
dinamism n paginile web. Dupa lansarea limbajului Java, Netscape a inceput sa lucreze cu
firma Sun, cu scopul de a crea un limbaj de script cu o sintaxa si semantica asemanatoare cu a
limbajului Java, si din motive de marketing numele noului limbaj de script a fost schimbat n
"JavaScript".
JavaScript a aparut din nevoia ca logica si inteligenta sa fie si pe partea de client, nu doar pe
partea de server. Daca toata logica este pe partea de server, ntreaga prelucrare este facuta la
server, chiar si pentru lucruri simple, asa cum este validarea datelor. Astfel, JavaScript il
inzestreaza pe client si face ca relatia sa fie un adevarat sistem client-server. Limbajul HTML
ofera autorilor de pagini Web o anumita flexibilitate, dar statica.
Documentele HTML nu pot interactiona cu utilizatorul n alt mod mai dinamic, decat pune la
dispozitia acestuia legaturi la alte resurse (URL-uri). Crearea de CGI-uri (Common Graphics
Interface) - [programe care ruleaza pe serverul Web si care accepta informatii primite din pagina
de web si returneaza cod HTML] - a dus la imbogatirea posibilitatilor de lucru. Astfel, un pas
important spre interactivizare a fost realizat JavaScript, care permite inserarea n paginile web a
script-urilor care se executa n cadrul paginii web, mai exact n cadrul browser-ului utilizatorului,
usurand astfel si traficul dntre server si client. De exemplu, ntr-o pagina pentru colectarea de
date de la utilizator se pot adauga scripturi JavaScript pentru a valida corectitudinea introducerii
si apoi pentru a trimite serverului doar date corecte spre procesare.
JavaScript contine o lista destul de ampla de functii si comenzi menite sa ajute la operatii
matematice, manipulari de siruri, sunete, imagini, obiecte si ferestre ale browser-ului, link-urile
URL si verificari de introduceri ale datelor n formulare. Codul necesar acestor actiuni poate fi
inserat n pagina web si executat pe calculatorul vizitatorului. Dupa lansarea sa, n decembrie
1995, JavaScript si-a atras sprijinul principalilor distribuitori din domeniu, cum sunt Apple,
Borland, Informix, Oracle, Sybase, HP sau IBM. S-a dezvoltat n continuare, obtinand
recunoastere majoritatii browserelor. Intelegand importanta scripting-ului web, Microsoft s-a
dorit sa ofere suport si pentru JavaScript. Netscape a preferat sa acorde licenta de tehnologie
companiei Microsoft n loc sa o vinda, astfel Microsoft a analizat JavaScript, si bazandu-se pe
documentatia publica a creat propria sa implementare, "Jscript", care este recunoscuta de
Microsoft Internet Explorer. Jscript 1.0 este aproximativ compatibil cu JavaScript 1.1, care
este recunoscut de Netscape Navigator. Totusi, versiunile ulterioare de JavaScript si diversele
diferente specifice platformelor de operare au inceput sa dea destule probleme programatorilor
web si astfel Netscape, Microsoft si alti distribuitori au fost de acord sa predea limbajul unei
organizatii internationale de standardizare - ECMA ; aceasta a finalizat o specificatie de limbaj,
cunoscuta ca ECMAScript, recunoscuta de toti distribuitorii. Desi standardul ECMA este util,
atit Netscape cat si Microsoft au propriile lor implementari ale limbajului si continua sa extinda
limbajul dincolo de standardul de baza. Pe langa Jscript, Microsoft a introdus si un concurent
pentru JavaScript, numit VBScript, realizat pentru a usura patrunderea pe web a
programatorilor VB. VBScript este un subset al limbajului Visual Basic. Cu toate acestea
JavaScript a devenit cunoscut ca limbajul de scripting standard pentru web. n general se
considera ca exista zece aspecte fundamentale ale limbajului JavaScript pe care orice
programator n acest limbaj ar trebui sa le cunoasca :
1. JavaScript poate fi intrudus n HTML - De obicei codul JavaScript este gazduit n

documentele HTML si executat n interiorul lor. Majoritatea obiectelor JavaScript au
etichete HTML pe care le reprezinta, astfel incat programul este inclus pe partea de client
a limbajului. JavaScript foloseste HTML pentru a intra n cadrul de lucru al aplicatiilor
pentru web.
2. JavaScript este dependent de mediu - JavaScript este un limbaj de scriptare; softwareul care ruleaza de fapt programul este browser-ul web (Firefox, Opera, Netscape
Navigator, Internet Explorer, Safari, etc.) Este important sa luam n considerare aceasta
dependenta de browser atunci cand utilizam aplicatii JavaScript.
3. JavaScript este un limbaj n totalitate interpretat - codul scriptului va fi interpretat de
browser inainte de a fi executat. JavaScript nu necesita compilari sau preprocesari, ci
ramane parte integranta a documentului HTML. Dezavantajul acestui limbaj este ca
rularea dureaza ceva mai mult deoarece comenzile JavaScript vor fi citite de navigatorul
Web si procesate atunci cand user-ul apeleaza la acele functii ( prin completare de
formulare, apasare de butoane, etc). Avantajul principal este faptul ca putem mult mai
usor sa actualizam codul sursa.
4. JavaScript este un limbaj flexibil - n aceasta privinta limbajul difera radical de C++
sau Java. n JavaScript putem declara o variabila de un anumit tip, sau putem lucra cu o
variabila desi nu-i cunoastem tipul specificat inainte de rulare .
5. JavaScript este bazat pe obiecte - JavaScript nu este un limbaj de programare orientat
obiect, ca Java, ci mai corect, este "bazat pe obiecte"; modelul de obiect JavaScript este
bazat pe instanta si nu pe mostenire.
6. JavaScript este condus de evenimente - mare parte a codului JavaScript raspunde la
evenimente generate de utilizator sau de sistem. Obiectele HTML, cum ar fi butoanele,
sunt imbunatatite pentru a accepta handlere de evenimente.
7. JavaScript nu este Java - Cele doua limbaje au fost create de companii diferite, motivul
denumirii asemanatoare este legat doar de marketing.
8. JavaScript este multifunctional - limbajul poate fi folosit ntr-o multitudine de contexte
pentru a rezolva diferite probleme: grafice, matematice, si altele.
9. JavaScript evolueaza - limbajul evolueaza, fapt pozitiv care insa poate genera si
probleme, programatorii trebuind sa verifice permanent ce versiune sa foloseasca pentru
ca aplicatiile sa poata fi disponibile unui numar cat mai mare de utilizatori de browsere
diferite.
10. JavaScript acopera contexte diverse - programarea cu acest limbaj este indreptata mai
ales catre partea de client, dar putem folosi JavaScript si pentru partea de Server.
JavaScript este limbajul nativ pentru unele instrumente de dezvoltare web, ca Borland
IntraBuilder sau Macromedia Dreamweaver.
Inserarea scripturilor JavaScript
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.
Pentru inserarea script-urilor n documentele html pot fi folosite cele 4 metode prezentate mai
jos:
Metoda 1 plasarea script-ului n antet-ul paginii (ntre <head> i </head>);

Metoda 2 plasarea script-ului n corpul paginii (ntre <body> i </body>);
Metoda 3 utilizarea fiierelor surs externe;
Metoda 4 crearea unui gestionar de evenimente.
Scripturi n antetul paginii

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 inainte de a fi utilizat.
1 <html>
2 <head>
3 <script type="text/javascript">
4 function message()
5 {
6 alert("Aceasta caseta de alertare este apelata si afisata cind are loc evenimentul onload");
7 }
8 </script>
9 </head>
10
11<body onload="message()">
12<h3>Casetele de alertare</h3> <hr/>
13</body>
14</html>
Scripturi n corpul paginii

Scripturile care trebuie executate cnd pagina se incarc trebuie scrise n seciunea body i vor
genera coninutul paginii.
Exemplu
1 <html>
2 <head>
3 </head>
4 <body>
5 <h3>Afisarea textului cu JavaScript</h3> <hr/>
7 document.write("Acest mesaj este scris cu JavaScript");
8 </script>
9 </body>
10</html>
Scripturi n fiier extern

Dac dorim s utilizm acelai script n mai multe pagini web fr a rescrie codul, trebuie s
scriem scriptul JavaScript ntr-un fiier extern. Fiierul trebuie s aib extensia .js i nu poate
conine tagul <script>. Pentru a utiliza fiierul extern, indicm numele fiierului n atributul src
al tagului <script>.
Exemplu
1<html>
2<head>
3<script type="text/javascript" src="functie.js"></script>
4</head>
5<body >
6<p onclick="afisare()"> Apasa aici!</p>
7</body>
8</html>
Coninutul fiierului functie.js

1function afisare() {
2document.write("<h2>Imi place sa fiu asa cum sunt</h2>");
3}
Crearea unui gestionar de evenimente

5
Nu este obligatoriu ca toate script-urile JavaScript s se gseasc n interiorul tag-urilor <script>

... </script>. Putei apela, de asemenea la script-uri sub forma gestionarilor de evenimente, care
indic navigatorului cum s reacioneze atunci cnd se produc anumite evenimente.
n exemplu de mai jos s-a creat un script care afieaz un mesaj cu ajutorul gestionarului de
evenimente onClick.
Exemplu
1<html>
2<head>
3</head>
4<body >
5<p onclick="alert('Imi place sa fiu asa cum sunt')"> Apasa aici!</p>
6</body>
7</html>
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
1<html>
2<body>
3<script type="text/javascript">
4<!-5document.write("Bine ati venit!");
6//-->
7</script>
8</body>
9</html>
Ultimele dou caractere // reprezint simbolul JS pentru comentariu i sunt scrise pentru a
impiedica JS s execute tagul -->.
Afiarea datelor n JavaScript
n limbajul JavaScript datele pot fi afiate n 4 moduri diferite:
1.
2.
3.
4.
Afiarea n fereastra de alertare, folosind window.alert ().

Afiarea n documentul HTML folosind document.write ().
Afiarea ntr-un element HTML, folosind innerHTML.
Afiarea n consola browser-lui, folosind console.log ().
Utilizarea window.alert ()
Putem folosi o fereastr de alertare pentru a afia date.
Exemplu
1
2
3
4
5
6
7
8
9
<!DOCTYPE html>
<html>
<body>
<h1>Prima mea pagina WEB.</h1>
<p>Primul meu paragraf.</p>
<script>
window.alert(5 + 6);
</script>
</body>
10</html>
Utilizarea document.write ()
Pentru testare se recomand de folosit metoda document.write ().
Exemplu
1 <!DOCTYPE html>
2 <html>
3 <body>
4 <h1>Prima mea pagina WEB.</h1>
5 <p>Primul meu paragraf.</p>
6 <script>
7
document.write(5 + 6);
8 </script>
9 </body>
10</html>
Utilizarea metodei document.write () dup ce este complet ncrcat un document HTML,

terge toate elementele HTML existente:
Exemplu
1<!DOCTYPE html>
2<html>
3<body>
4<h1>Prima mea pagina WEB.</h1>
5<p>Primul meu paragraf.</p>
6<button onclick="document.write(5 + 6)">Click aici!</button
7</body>
8</html>
Obs: document.write () este o metod ce ar trebui s fie folosit numai pentru testare.
Utilizarea innerHTML
Pentru a accesa un element HTML, JavaScript poate utiliza metoda document.getElementById
(id). Atributul id definete elementul HTML. Proprietatea innerHTML definete coninutul
HTML:
Exemplu
1 <!DOCTYPE html>
2 <html>
3 <body>
6 <p id="demo"></p>
7 <script>
8
document.getElementById("demo").innerHTML = 5 + 6;
9 </script>
10 </body>
11 </html>
Utilizarea console.log ()
n browser-ul dvs., putei utiliza metoda console.log () pentru a afia date. Activai consola
browserului cu F12, i selectai "Console" din meniu.
Exemplu
7
1 <!DOCTYPE html>
2 <html>
3 <body>
6 <script>
7
console.log(5 + 6);
8 </script>
9 </body>
10 </html>
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:
1 <html>
2 <body>
4 // Scrie un titlu:
5 document.write("<h1>Acesta este un titlu</h1>");
6 // Scrie doua paragrafe:
7 document.write("<p>Acesta este un paragraf.</p>");
8 document.write("<p>Acesta este un alt paragraf.</p>");
9 </script>
10</body>
11</html>
Comentarii multi-linie
Aceste comentarii ncep cu /* i se ncheie cu */, ca n exemplul urmtor:
1
<html>
2 <body>
4 /*
5 Codul urmator va scrie in pagina
6 un titlu si doua paragrafe
7 */
10document.write("<p>Acesta este un alt paragraf.</p>");
11</script>
12</body>
13</html>
Folosirea comentariilor pentru a preveni execuia

n exemplul urmtor, comentariul este utilizat pentru a impiedica executarea unei linii de cod
(metoda poate fi utilizat pentru a depna codul):
1<html>
2<body>
4//document.write("<h1>Acesta este un titlu</h1>");
5document.write("<p>Acesta este un paragraf.</p>");
6document.write("<p>Acesta este un alt paragraf.</p>");
7</script>
8</body>
9</html>
n exemplul urmtor, comentariul este utilizat pentru a impiedica execuia unui bloc de cod (util
pentru depnarea codului):
1 <html>
2 <body>
4 /*
8 */
9 </script>
10</body>
11</html>
n exemplul urmtor, comentariul este plasat la sfritul liniei de cod:

1<html>
2<body>
4document.write("Salutare"); // scrie in pagina textul "Salutare"
5document.write(" prieteni!"); // scrie in pagina textul " prieteni!"
6</script>
7</body>
8</html>
Tipurile de date JavaScript

n JavaScript exist 5 tipuri de date diferite care pot conine valori:
1.
2.
3.
4.
5.
Number
String
Boolean
Object
Function
Exista 3 tipuri de obiecte:

1. Object
2. Date
3. Array
i 2 tipuri de date care nu pot conine valori:
1. Null
2. Undefened
Date numerice
Limbajul JavaScript permite specificarea datelor numerice n patru formate diferite: ntreg,
virgul flotan, octal i hexazecimal.
Prin definiie, numerele n octal i n hexazecimal sunt numere ntregi care sunt exprimate ntr-un
sistem de numeraie cu baza 8, respectiv baza 16. n JavaScript un numr ntreg octal este
precedat de zero iar un numr hexazecimal este precedat de caracterele 0x sau 0X.
Observaii:
JavaScript recunoate numerele ntregi (n baza 10, pozitive sau negative) cuprinse ntre:
+/1.7976931348623157 E 308 i +/5 E 324.
Un numr ntreg hexazecimal (hexadecimal, n limba englez) ncepe n mod obligatoriu

cu 0X sau 0x i este compus din urmtoarele simboluri: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C,
D, E, F. Putem utiliza majuscule sau minuscule.
Un numr ntreg octal ncepe obligatoriu cu 0 (zero) i este compus din urmtoarele
simboluri:0, 1, 2, 3, 4, 5, 6, 7
Un numr n virgul flotant este n baza 10. El poate fi pozitiv sau negativ i poate
conine zecimale. El poate de asemenea include un exponent pozitiv sau negativ, prin E.
Separatorul zecimal este ntotdeauna punctul. JavaScript recunoate numerele cuprinse
ntre: +/1.7976931348623157 E 308 i +/5 E 324.
ir de caractere
Un ir de caractere (string, n limba englez) este compus din litere, cifre, simboluri, caractere
speciale i secvene de ieire. Coninutul unui ir de caractere este considerat tot timpul ca fiind
text, chiar dac el const din cifre i simboluri numerice. Un ir de caractere este ncadrat de
ghilimele simple sau duble. Un ir de caractere ncadrat de ghilimele duble poate fi inclus ntr-un
ir ncadrat de ghilimele simple i vice versa.
Valori logice sau booleene
Ele sunt n numr de dou: true (adevrat) i false (fals). Cele dou valori se folosesc pentru a
indica dac rezultatul evalurii unei condiii este adevrat sau nu.
Variabile JavaScript
De obicei, limbajele de programare cer s definii tipul de date pe care-l va reprezenta o
variabil, n plus se genereaz o eroare atunci cnd ncercai s-i atribuii variabilei un alt tip de
date. Din fericire, aa ceva nu se ntmpl n JavaScript, care este un limbaj flexibil. Variabilele
JavaScript pot accepta oricnd un nou tip de date, fapt care duce la modificarea tipului variabilei.
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. Putem referi variabila
prin nume pentru a-i afia sau modifica coninutul, ca n exemplul urmtor:
1 <html>
2 <body>
3 <h3>Declararea, initializarea, atribuirea si afisarea unei variabile</h3> <hr/>
5 var prenume;
6 prenume="Mihai";
7 document.write("<b>Numele variabilei</b>: prenume");
8 document.write("<br/>");
9 document.write("<b>Valoare initiala</b>: "+ prenume);
10document.write("<br/>");
11prenume="Adrian";
12document.write("<b>Valoare dupa atribuire</b>: "+ prenume);
13</script>
14</body>
15</html>
Declararea variabilelor JavaScript

10
Putem 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;
Dup execuia instruciunilor de mai sus, variabila x are valoarea 7 care nu a fost resetat la
redeclarare.
Operatorii JavaScript
Operatorii aritmetici
Sunt folosii pentru a efectua operaii aritmetice
Dac y=5, tabelul urmtor prezint operatorii aritmetici:
Operator
+
*
/
%
cu
variabile
i/sau
valori.
Descriere
Exemplu Rezultat
adunare
x=y+2 x=7
scdere
x=y-2
x=3
inmulire
x=y*2
x=10
imprire
x=y/2
x=2.5
modulo (restul impririi ntregi) x=y%2 x=1
Operatorii de atribuire
Sunt folosii pentru a atribui valori variabilelor JavaScript. Dac x=10 i y=5, tabelul urmtor
prezint operatorii de atribuire:
11
Operator
=
+=
-=
*=
/=
%=
Exemplu Echivalent cu Rezultat

x=y
x=5
x+=y
x=x+y
x=15
x-=y
x=x-y
x=5
x*=y
x=x*y
x=50
x/=y
x=x/y
x=2
x%=y
x=x%y
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:
1 <!DOCTYPE html>
2 <html>
3 <body>
4 <p>Operatorul + utilizat pentru iruri de caractere.</p>
5 <script>
6 var txt1 = "Ce mai";
7 var txt2 = "faci azi?";
8 document.write(txt1 + txt2);
9 </script>
10</body>
11</html>
Adunarea irurilor i a numerelor

Regul: Dac adunai un numr cu un ir de caractere, vei obine un ir de caractere.
Exemplu:
1 <html>
2 <body>
3 <h3>Adunarea sirurilor de caractere si a numerelor cu siruri de caractere</h3> <hr/>
5 x=6+7;
6 document.write("6+7="+x);
7 document.write("<br />");
8 x="6"+"7";
9 document.write('"6"+"7"='+x);
10document.write("<br />");
11x=6+"7";
12document.write('6+"7"='+x);
14x="6"+7;
15document.write('"6"+7='+x);
17</script>
18</body>
19</html>
Operatori de incrementare / decrementare

Operatorii se mai clasific i n functie de operatia pe care o efectueaz i anume n:
operatori de incrementare crete valoarea variabilei cu o unitate

operatori de decrementare scade valoarea variabilei cu o unitate;
Acestea la rindul lor sunt de dou feluri:

12
prefixat operatorul se scrie inaintea operandului. Operatia de incrementare (sau

decrementare) se efectueaz inainte de a se efectua operatiile expresiei n care se afl.
De exemplu, dac initial a=1 i x=++a; vom avea la final x=2 i a=2, adic se
incrementeaz variabila a cu o unitate inainte de a i se atribui variabilei x valoarea
variabilei a.
postfixat operatorul se scrie dup operand. Operatia de incrementare (sau
decrementare) se efectueaz dup ce se efectueaz operatiile expresiei n care se afl.
De exemplu, dac initial a=1 i x=a++; vom avea la final x=1 i a=2, adic se
incrementeaz variabila a cu o unitate dup ce i se va atribui variabilei x valoarea
variabilei a.
Operator Tip de operator Descriere

Exemplu
++
incrementare
incrementare prefixat ++x sau x=x+1
incrementare postfixat x++ sau x=x+1
-decrementare
decrementare prefixat --x sau x=x-1
decrementare postfixat x-- sau x=x-1
Exemplu
1 <html>
2 <head><title>Operatori de incrementare/decrementare </title>
3 </head>
4 <body>
6 var x=1, y=2;
7 document.write("x=1 y=2");
9 document.write("z=++x-y--=",++x-y--);
10</script>
11</body>
12</html>
Operatorii de comparare
Operatorii de comparare sunt utilizai n construcii logice pentru a verifica egalitatea sau
diferena dntre dou variabile sau valori. Dac x=5, tabelul urmtor prezint operatorii de
comparare
Operator Descriere
==
Egal cu
===
!=
>
<
>=
<=
Exemple
x==5 este fals
x===5 este adevrat
Este egal exact (valoare i tip)

Diferit
Mai mare decit
Mai mic decit
Mai mare sau egal cu
Mai mic sau egal cu
x==="5" este fals

x!=8 este adevra
x>8 este fals
x<8 este adevrat
x>=8 este fals
x<=8 este adevarat
Operatorii logici
Operatorii logici sunt utilizai pentru a determina relaia logic dntre variabile sau valori.
Dac x=6 i y=3, tabelul urmtor prezint operatorii logici:
13
Operator
&&
||
!
Descriere Exemple
si
(x < 10 && y > 1) este adevrat
sau
(x==5 || y==5) este fals
not
!(x==y) este adevrat
Operatorul condiional(ternar)
Acest operator atribuie o valoare unei variabile n funcie de o anumit condiie.
Sintax:
variabila=(conditie)?valoare1:valoare2
Exemplul 1:
1 <!doctype html>
2 <html>
3 <head>
4 <title>Operatorul ternar ?</title>
5 </head>
6 <body>
7 <script>
8
document.write(
9
a <= 5 ?
10 "a este mai mic si egal ca 5" :
11 "a este mai mare ca 5"
12 )
13</script>
14</body>
15</html>
Exemplul 2:
1 <html>
2 <body>
4 var x=5; y=7;
5 document.write("x=2 y=3");
7 document.write("Calculati elementul maxim.");
9 document.write("Expresia conditionala este:");
10document.write(" (x>y)?max=x:max=y");
12document.write("Rezultatul este: ",(x>y)?"max=x":"max=y");;
13</script>
14</body>
15</html>
Operatorul typeof
Operatorul typeof returneaz tipul de date continut de operandul su. Tipurile de date pe care le
poate returna sunt:
string pentru iruri de caractere

number pentru numere
function pentru functiile JavaScript
object pentru obiectele JavaScript
Exemplu:
1 <!DOCTYPE html>
14
2 <html>
3 <body>
4 <p>Operatorul typeof utilizat pentru a returna tipul de date.</p>
5 <script>
6 document.write("variabila: tipul de date <br>");
7 var x1=-33.4;
8 document.write(x1+ ": ", typeof x1);
9 document.write("<br>");
10x2=234;
11document.write(x2+ ": ", typeof x2);
12document.write("<br>");
13y="Lucian Blaga";
14document.write(y+ ": ", typeof y);
16z=escape;
17document.write(z+ ": ", typeof z);
19t=Image;
20document.write(t+ ": ", typeof t);
21</script>
22</body>
23</html>
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:
1var txt="Noi suntem echipa "Dinamo" din Bucuresti.";
2document.write(txt);
n JavaScript, un ir de caractere ncepe i termin cu apostrof sau cu ghilimele. Asta inseamn

c irul de mai sus va fi trunchiat la: Noi suntem echipa
Pentru a rezolva aceast problem, trebuie s inserai caracterul backslash (\) inaintea fiecrui
caracter special care trebuie afiat, ca n exemplul urmtor:
1var txt="Noi suntem echipa \"Dinamo\" din Bucuresti.";
Tabelul urmtor prezint caracterele speciale ce pot fi inserate ntr-un text cu ajutorul
caracterului backslash:
Cod
\'
\"
\&
\\
\n
\r
\t
\b
\f
Ieire
apostrof
ghilimele
ampersand
backslash
linie nou
retur de car
tab
backspace
form feed
Casete Popup
JavaScript are trei tipuri de casete popup: caseta Alert, caseta Confirm i caseta Prompt.
15
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:
1alert("...un text....");
Exemplu:
1 <html>
2 <head>
4 function afiseaza_alert()
5 {
6 alert("Sunt o caseta de alertare!");
7 }
8 </script>
9 </head>
10<body>
11<h3>La apasarea butonului va fi apelata o functie care afiseaza caseta alert</h3> <hr/>
12<input type="button" onclick="afiseaza_alert()" value="Apasa" />
13</body>
14</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 continua. Dac utilizatorul acioneaz butonul "OK",
caseta returneaz valoarea true, dac acioneaz butonul "Cancel", caseta returneaz valoarea
false.
Sintax:
1confirm("...un text....");
Exemplu:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
16
<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
inainte 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:
1prompt("....un text....","valoare_implicita");
Exemplu:
1 <html>
2 <head>
4 function afiseaza_prompt()
5 {
6 var name=prompt("Va rog sa va introduceti numele","");
7 if (name!=null && name!="")
8 {
9 document.write("Buna ziua " + name + "! Ce mai faci?");
10}
11}
12</script>
13</head>
14<body>
15<h3>La apasarea butonului va fi apelata o functie care afiseaza caseta prompt</h3> <hr/>
16<input type="button" onclick="afiseaza_prompt()" value="Apasa" />
17</body>
18</html>
Obs. Dac dorii ca textul dintr-o caset s fie afiat pe mai multe linii, procedai ca n exemplul
urmtor:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<html>
<head>
function afiseaza_alert()
{
alert("Buna! Asa se adauga" + '\n' + "o ntrerupere de linie" + '\n' + "intr-o caseta de
alertare!");
}
</script>
</head>
<body>
<h3>Caseta alert cu textul scris pe mai multe linii</h3> <hr/>
<input type="button" onclick="afiseaza_alert()" value="Apasa" />
</body>
</html>
Instruciuni JavaScript
JavaScript este o secven de declaraii, instruciuni i comenzi care vor fi executate de ctre
browser. Spre deosebire de HTML, JavaScript este case-sensitive, 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
JavaScript spune browser-ului s scrie n pagin textul "Buna ziua":
document.write("Buna ziua");
17
Fiecare instruciune se ncheie cu punct i virgul (;).

Codul JavaScript este o secven de instruciuni JavaScript. 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:
1 <html>
2 <body>
3 <h3>Utilizarea tagurilor HTML in mesajele afisate cu JavaScript</h3> <hr/>
8 </script>
9 </body>
10</html>
Blocuri JavaScript
Instruciunile JavaScript pot fi grupate n blocuri care se scriu ntre acolade. Instruciunile dintrun bloc vor fi executate mpreun.
n acest exemplu, instruciunile care scriu un titlu i dou paragrafe, au fost grupate mpreun
ntr-un bloc.
1 <html>
2 <body>
4 {
8 }
9 </script>
10</body>
11</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).
Instruciunile condiionale
Adesea, cnd scriei cod JavaScript, 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
Instruciunea if
Sintax:
1if (conditie) {
2cod ce trebuie executat daca conditia este adevarata
18
3}
Exemplu:
1 <html>
2 <body>
3 <h3>Scriptul va afisa un mesaj daca ora<10 folosind instructiunea if</h3> <hr/>
5 var d = new Date();
6 var time = d.getHours();
7 if (time < 10)
8 {
9 document.write("<b>Buna dimineata</b>");
10}
11</script>
12</body>
13</html>
Instruciunea ifelse
Sintax:
1if (conditie) {
2cod executat daca conditia este adevarata
3}
4else {
5cod executat daca conditia este falsa
6}
Exemplu:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<html>
<body>
<h3>Scriptul va afisa un mesaj sau altul in functie de ora, cu instructiunea if..else</h3>
<hr/>
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>
Instruciunea if...else if...else

Sintax:
1if (conditia1) {
2cod executat daca conditia1 este adevarata
3}
4else if (conditia2) {
5cod executat daca conditia2 este adevarata
6}
7else {
8cod executat daca nici conditia1, nici conditia2 nu sunt adevarate
9}
Exemplu:
1 <html>
2 <body>
19
<h3>Scriptul va afisa unul din trei mesaje in functie de ora, cu instructiunea if-else-if3
else</h3> <hr/>
4
5
var d = new Date();
6
var time = d.getHours();
7
if (time<10)
8
{
9
document.write("<b>Buna dimineata</b>");
10
}
11
else if (time>=10 && time<17)
12
{
13
document.write("<b>Buna ziua</b>");
14
}
15
else
16
{
17
document.write("<b>Buna seara</b>");
18
}
19
</script>
20
21
</body>
22
</html>
Exemplu:
Link-ul din exemplul urmtor va deschide Google sau Yahoo
1 <html>
2 <body>
3 <h3>Scriptul afiseaza in mod aleator unul din doua link-uri, folosind if..else</h3> <hr/>
5 var r=Math.random();
6 if (r>0.5)
7 {
8 document.write("<a href='http://www.google.com'>Google!</a>");
9 }
10else
11{
12document.write("<a href='http://www.yahoo.com'>Yahoo!</a>");
13}
14</script>
15</body>
16</html>
Instruciunea switch
Sintax:
1switch(exp) {
2case val-1: executa bloc-1; break;
3case val-2: executa bloc-2; break;
4......
5default: cod executat daca exp este diferit de val-1, val-2,....
6}
Exemplu:
1 <html>
2 <body>
3 <h3>Scriptul utilizeaza instructiunea switch</h3>
4 <hr/>
7 theDay=d.getDay();
8 switch (theDay)
9 {
10case 5: document.write("<b>Vineri</b>"); break;
11case 6: document.write("<b>Sambata</b>"); break;
12case 0: document.write("<b>Duminica</b>"); break;
13default: document.write("<b>Astept weekend-ul!</b>");
14}
15</script>
16</body>
20
17</html>
Exerciii:
1. S se afle minimum i maximum din trei numere date a, b, c, cu ajutorul instruciunii if else.
2. Sunt date trei numere a, b, c. De afiat numerele n ordine cresctoare(descresctoare).
Instruciuni repetitive
Instruciunile repetitive sunt utilizate pentru a executa o secven de cod n mod repetat. n
JavaScript putem folosi urmatoarele instruciuni repetitive:
for repet o secven de cod de un numr precizat de ori

for...in parcurge elementele unui tablou sau a enumera proprietile unui obiect
while repet o secven de cod ct timp o condiie este adevrat
do...while nti execut o dat secven de cod apoi o repet ct timp o condiie este
adevrat
Instruciunea for
Instruciunea for se utilizeaz cnd se cunoate dinainte numrul de iteraii dorit pentru secvena
de cod.
Sintax:
1for (var=val_initiala; var<=val_finala; var=var+increment)
2{
3codul ce trebuie executat
4}
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.
1 <html>
2 <body>
3 <h3>Utilizarea instructiunii for</h3> <hr/>
5 document.write("Numerele pare mai mici sau egale cu 50: "+"<br/>");
6 var i=0;
7 for (i=0;i<=50;i+=2)
8 {
9 document.write(i +" ");
10}
11</script>
12</body>
13</html>
Exemplu: n acest exemplu, instruciunea for este utilizat pentru a afia cele 6 titluri HTML.
1
2
3
4
5
6
7
<html>
<body>
<h3>Afisarea titlurilor HTML cu instructiunea
for</h3> <hr/>
for (i = 1; i <= 6; i++)
{
21
8 document.write("<h" + i + ">Aceste este un titlu " + i);

9 document.write("</h" + i + ">");
10}
11</script>
12</body>
13</html>
Instruciunea for...in
Aceast instruciune este utilizat pentru a parcurge elementele unui tablou sau a enumera
proprietile unui obiect.
Sintax:
1for (variabila in obiect) {
2cod ce trebuie executat
3}
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:
1 <html>
2 <body>
3 <h3>Parcurgerea elementelor unui tablou cu instructiunea for..in</h3> <hr/>
5 var x;
6 var pets = new Array();
7 pets[0] = "Pisica";
8 pets[1] = "Caine";
9 pets[2] = "Papagal";
10pets[3] = "Hamster";
11document.write("Valorile memorate in tablou sunt:"+"<br/>");
12for (x in pets)
13{
14document.write(pets[x] + "<br />");
15}
16</script>
17</body>
18</html>
Exemplu:
Instruciunea for..in este utilizat pentru a parcurge proprietile unui obiect:
1 <!DOCTYPE html>
2 <html>
3
4 <body>
5 <script>
6 var txt = "";
7 var persoana = {nume:"Ion", prenume:"Cheni", virsta:25};
8 var x;
9 for (x in persoana) {
10txt += persoana[x] + " ";
11}
13</script>
14</body>
15</html>
22
Instruciunea while
Instruciunea execut n mod repetat o secven de cod, ct timp o condiie este adevrat.
Sintax:
1while (var<=val_finala) {
3}
Obs: Operatorul <= poate fi nlocuit cu orice alt operator de comparare.

Exemplu:
1 <html>
2 <body>
3 <h3>Utilizarea instructiunii while</h3> <hr/>
5 document.write("Numerele naturale mai mici egale cu 5:"+"<br/>");
6 var i=0;
7 while (i<=5)
8 {
9 document.write(i);
10document.write("<br/>");
11i++;
12}
13</script>
14</body>
15</html>
16
Instruciunea do...while
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:
1do {
3}
4while (var<=val_finala);
Exemplu:
n acest exemplu vor fi afiate numerele impare 50.
1 <html>
2 <body>
3 <h3>Utilizarea instructiunii do-while</h3> <hr/>
5 document.write("Numerele impare mai mici sau egale cu 50:"+"<br/>");
6 var i=1;
7 do
8 {
9 document.write(i + " ");
10i+=2;
11}
12while (i<=50);
13</script>
14</body>
15</html>
Exerciii:
1. Sunt date numerele K i N(N>0). De afiat de N ori numrul K;
23
2. De elaborat un script ce va afia tabla nmulirii;

3. De elaborat un script ce va afia tabla de ah;
4. De elaborat un script ce va calcula n!;
5. De elaborat un script ce va calcula numrul exact de ani, luni i zile de la ziua de natere.
6. S se scrie un program care s afieze urmtoarele valori:
1*9 + 2 = ?
12*9 + 3 = ?
123*9 + 4 = ?
.................
123456789*9 + 10 = ?
7. S se scrie un program care s afieze urmtoarea "piramid" de numere:
1
123
12345
..............
1 ......(2n-1)
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.
1 <html>
2 <body>
3 <h3>Utilizarea instructiunii break</h3> <br/>
5 document.write("Numerele naturale mai mici egale cu 5:"+"<br/>");
6 var i=0;
7 for (i=0;i<=10;i++)
8 {
9 if (i==3)
10{
11document.write("Ciclu oprit cu break"); break;
12}
13document.write(i);
15}
16</script>
17</body>
18</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).
1 <html>
2 <body>
3 <h3>Utilizarea instructiunii continue</h3> <hr/>
5 document.write("Numerele naturale mai mici sau egale cu 10:"+"<br/>");
6 var i=0
7 for (i=0;i<=10;i++)
8 {
9 if (i==3)
10{
11document.write("valoare sarita cu continue"+"<br/>");continue;
12}
13document.write(i);
15}
24
16</script>
17</body>
18</html>
Instruciunea with
Instruciunea with simplific scrierea programelor JavaScript sau reduce pe ct posibil cantitatea
de cod JavaScript. Instruciuneawith permite specificarea unui obiect i este urmat de un bloc de
instruciuni plasat ntre acolade. Pentru fiecare din instruciunile blocului, proprietile
menionate fr ca obiectul corespunztor s fie indicat se refer la obiectul specificat prin with.
Sintax:
with (obiect) {
cod JavaScript
}
Exemplu 1:
n urmtorul exemplu este apelat metoda document.write() de patru ori
1 <html>
2 <head></head>
3 <body>
4 <script>
5 document.write("Pe trotuar, alturi salt"+"<br />");
6 document.write("Dou fete vesele,"+"<br />");
7 document.write("Zu c-mi vine s las balt,"+"<br />");
8 document.write("Toate interesele"+"<br />");
9 </script>
10</body>
11</html>
Exemplu 2:
Acela exemplu, numai c cuvntul cheie with elimin referinele multiple la obiectul document
1 <html>
2 <head></head>
3 <body>
4 <script>
5 with(document){
6 write("Pe trotuar, alturi salt"+"<br />");
7 write("Dou fete vesele,"+"<br />");
8 write("Zu c-mi vine s las balt,"+"<br />");
9 write("Toate interesele"+"<br />");
10}
11</script>
12</body>
13</html>
Obs: Pentru un cod scurt interesul utilizrii instruciunii with nu este evident, dar cnd trebuie s
accesm acelai obiect n cadrul unei proceduri sau cnd utilizm un obiect predefinit precum
Math, with v ajut s ctigai foarte mult timp.
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 incarc, 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
25
seciunea <body> a documentului. Totui, pentru a fi siguri c funcia este ncrcat n browser
inainte de a fi apelat, este recomandat s o scriei n seciunea <head>.
Definirea unei funcii
Sintax:
1function nume_functie(var1,var2,...,varX)
2{
3codul functiei
4}
Parametrii var1, var2, etc. sunt variabile sau valori transmise funciei. Acoladele marcheaz
inceputul i sfiritul corpului funciei.
Obs: Chiar dac funcia nu are parametri, parantezele rotunde de dup numele funciei trebuie s
fie prezente.
Exemplu:
1 <html>
2 <head>
4 function afiseaza_mesaj()
5 {
6 alert("Bine ati venit!");
7 }
8 </script>
9 </head>
10<body>
11<h3>La apasarea butonului este apelata o functie JS care afiseaza caseta alert</h3> <hr/>
12<form>
13<input type="button" value="Apasati!" onclick="afiseaza_mesaj()" />
14</form>
15</body>
16</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 decit 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:
1 <html>
2 <head>
4 function suma(a,b)
5 {
6 return a+b;
7 }
8 </script>
9 </head>
10<body>
11<h3>Suma urmatoare este calculata si returnata de o functie</h3> <hr/>
13document.write("7+9="+suma(7,9));
14</script>
15</body>
26
16</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 incheie, 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 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 inchis.
Exemple:
Exemplul 1
Ilustreaz cum se poate transmite o variabil unei funcii i cum poate fi folosit respectiva
variabil n corpul funciei.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<html>
<head>
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>Cind 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.
1 <html>
2 <head>
4 function functie_2()
5 {
6 return ("Bine ati venit!");
7 }
8 </script>
9 </head>
10<body>
11<h3>Textul urmator este returnat de o functie apelata direct din document.write()</h3> <hr/>
13document.write(functie_2())
14</script>
15</body>
16</html>
Exemplul 3
1
2
3
4
27
<html>
<head>
function salut(txt)
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
{
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>Cind apasati unul dntre butoane, va fi apelata o functie care afiseaza mesajul primit ca
parametru.</p>
</body>
</html>
Evenimentele JavaScript. Conceptul de eveniment i gestionar de evenimente

Un eveniment este o aciune care se produce n raport cu un element (fereastr, document, buton,
etc.) el poate fi detectat i prelucrat de ctre un script care va declana o aciune. Script-ul este
executat dac evenimentul se produce pe obiectul cruia i este asociat.
Reacia la un eveniment este cunoscut sub numele de prelucrarea evenimentului, iar codul
JavaScript corespunztor este cunoscut sub numele de gestionar de evenimente.
Un gestionar de evenimente este o metod puin special care va fi apelat n mod automat de
ctre browser ori de cte ori va surveni un eveniment particular.
Gestionarii de evenimente sunt funcii JavaScript. Acetia sunt uor de programat, de multe ori
este suficient o singur instruciune pentru a putea fi creai.
Aciunile utilizatorilor sunt cele mai frecvente evenimente. ns acestea nu sunt singurele. De
exemplu evenimentul load este declanat automat de ctre browser atunci cnd este ncheiat
ncrcarea unui document.
De obicei evenimentele sunt provocate de utilizator prin efectuarea unui click sau introducerea
unor date.
Fiecare eveniment are un nume prestabilit care n acelai timp este i parametrul unui tag. Acest
parametru stabilete care eveniment anume trebuie procesat glisarea mouse-ului, introducerea
textului, ncrcarea paginii, etc. Valoarea parametrului este aciunea care trebuie ndeplinit:
<tag gestionar_evenimente=cod JavaScript (descrierea aciunii)> coninut </tag>
Petru a defini un gestionar de evenimente se adaug prefixul on la numele evenimentului.
Toate evenimentele procesate de browser pot fi mprite n patru grupuri n dependen de
elementul ce le provoac: evenimente provocate de mouse, de tastatur, de elementul
formularului, i de ferestre.
Evenimente provocate de mouse
28
onclick - are loc cand se da click pe un element

ondblclick - are loc cand se da dublu click pe un element
onmousedown - are loc cand este apasat click-ul
onmousemove - are loc cand se misca cursorul n interiorul unui element
onmouseover - are loc cand se pune cursorul deasupra unui element
onmouseout - are loc cand cursorul iese din cadrul unui element
onmouseup - are loc cand se elibereaza click-ul
Exemple:
Exemplul 1
1 <!DOCTYPE html>
2 <html>
3 <body>
4 <input type="button"
5 <p>
7 <p>
9 <p>
10<input type="button"
11<p>
12<input type="button"
13</body>
14</html>
value="onclick" onclick="alert('eveniment la click')" />

value="ondblclick" ondblclick="alert('eveniment la dublu click')" />
value="onmouseout" onmouseout="alert('eveniment la mouseout')" />
value="onmouseup" onmouseup="alert('eveniment la mouseup')" />
value="onmouseover" onmouseover="alert('eveniment la mouseover')" />
Exemplul 2
n exemplul de mai jos, am utilizat o functie care permite afiarea coordonatelor cursorului unui
mouse n micare.
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <title>Coordonatele cursorului</title>
5 </head>
6 <body>
7 <form name=formular> Coordonatele cursorului<br /><br />
8
X <input type=text name=x value=""><br />
9
Y <input type=text name=y value="">
10 </form>
11 <script>
12 var InternetExplorer = document.all?true:false;
13 if (!InternetExplorer)
14 document.captureEvents(Event.mousemove);
15 document.onmousemove = pozitie;
16 function pozitie(poz)
17 {
18 var x;
19 var y;
20 if (!InternetExplorer)
21 {
22 x = poz.pageX;
23 y = poz.pageY;
24 }
25 if (InternetExplorer)
26 {
27 x = event.clientX + document.body.scrollLeft;
28 y = event.clientY + document.body.scrollTop;
29 }
30 document.formular.x.value=x;
31 document.formular.y.value=y;
32 return true; }
33 </script>
34 </body>
35 </html>
Evenimente provocate de tastatur
29
onkeydown - are loc cand se apasa o tasta

onkeypress - are loc cand este apasata o tasta
onkeyup - are loc cand este eliberata o tasta
Exemple:
Exemplul 1
1<!DOCTYPE html>
2<html><body>
3<input type="text" onkeydown="alert('eveniment la onkeydown')" />
4<p>
5<input type="text" onkeyup="alert('eveniment la onkeyup')" />
6<p>
7<input type="text" onkeypress="alert('eveniment la onkeypress')" />
8</body>
9</html>
Exemplul 2
1
2
3
4
5
6
7
8
9
10
11
<!DOCTYPE html>
<html>
<head><title>Evenimente</title>
</head>
<body>
<form>
<input type=button value="apasati orice tasta" onKeyPress="window.alert('Codul tastei apasate
este:' +window.event.keyCode)">
</form>
</body>
</html>
Exemplul 3
1 <!DOCTYPE html>
2 <html>
3 <head><title>Evenimente</title>
4 </head>
5 <script>
6 function urmatorul(elment,text) {
7 if (text.length==elment.maxLength) {
8 next=elment.tabIndex;
9 if (next<document.form3.elements.length) {
10document.form3.elements[next].focus();
11}
12}
13}
14</script>
15</head>
16<body>
17- Cursorul se muta automat in urmatoarea caseta atunci cand s-a completat tot campul
18precedent (cand se ajunge la lungimea stabilita a campului, aici 4 caractere) <br>
19<form name="form3">
20<input size="4" tabindex="1" name="field" maxlength="4" onkeyup="urmatorul(this,this.value)">
21<input size="4" tabindex="2" maxlength="4" onkeyup="urmatorul(this,this.value)">
22<input size="4" tabindex="4" maxlength="4" onkeyup="urmatorul(this,this.value)">
23</form>
24</body>
25</html>
Functia urmatorul(elment,text), are doua argumente: element (care, prin apel, se refer la
caseta input) i text (se refer la valoarea casetei). n apelul funciei:
urmatorul(this,this.value), this se refer la obiectul curent (reprezint primul argument) iar al
doile argument this.value reprezint valoarea obiectului curent (valoarea din cmp). Observai
folosirea evenimentului onKeyup, pentru a se trece la urmatorul cmp atunci cnd s-a completat
ultimul caracter din caseta precedent.
Pentru a nelege mai bine putei s nlocuii onkeyup cu onkeydown pentru a vedea diferena.
Evenimente provocate de ferestre
30
onabort - are loc n momentul n care se se ntrerupe ncarcarea ferestrei

onerror - are loc n momentul n care o imagine nu se ncarc corect (pentru object,
body i frameset)
onload - are loc n momentul n care se termin ncarcarea ferestrei
onresize - are loc cnd este modificat dimensiunea ferestrei
onscroll - are loc n momentul n care se deruleaz bara de scroll
onunload - are loc n momentul n care nu se ncarc fereastra
Exemplu
1 <!DOCTYPE html>
2 <html>
3 <body>
4 <script>
5
function g()
6
{
7
alert("Salut!");
8
}
9
</script>
10 </head>
11 <body onLoad="g()">
12</script>
13</body>
14</html>
Evenimente provocate de formular
onblur - are loc n momentul n care cursorul este scos din casuta respectiva (se d click
n alta parte)
onchange - are loc n momentul n care se schimb coninutul din casua respectiv
onfocus - are loc n momentul n care se pune cursorul n casua respectiv
onreset - are loc cnd este apasat butonul reset din formular
onselect - are loc n momentul n care se selecteaz un text din cmpul respectiv
onsubmit - are loc n momentul n care se apas butonul de submit din formular
Exemple:
Exemplul 1
n exemplul de mai jos, am utilizat o funcie care preia o valoare introdus n formular, o verific
i afieaz un mesaj corespunztor. Dac nu a fost introdus un numr, functia isNaN() va returna
valoarea true, iar pe monitor va aprea mesajul Introduceti un numr!. Mesajele afiate vor
apare pe ecran numai dac introducem altceva dect un numr pozitiv. Evenimentul onBlur i
face efectul, adic transmite valoarea introdus de ctre utilizator, funciei verificare, dac dm
click n afara zonei de text a formularului.
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <title> onBlur </title>
5 <script>
6 function verificare(form)
7 {
8 var x=0;
9 x=document.formular.date.value;
10y=isNaN(x);
11if (y==true)
12alert("Introduceti un numar!");
13else
14if (x<0)
15{
16alert("Va rog sa introduceti un numar pozitiv!");
31
17}
18}
19</script>
20</head>
21<body>
22<h3>Introduceti un numar pozitiv:</h3>
23<p>Pentru verificare, puteti introduce altceva
24<br />
25<form name="formular">
26<input type="text" name="date" value="" size="20" onBlur='verificare(this.form)'>
27</form>
28</body>
29</html>
Exemplul 2
n exemplul de mai jos, am utilizat o functie care preia irul de caractere introdus n formular i il
transform n ir scris cu majuscule.
1 <!DOCTYPE html>
2 <html>
3 <head><title>onChange</title>
4 <script>
5 function majuscule(a)
6 {
7 a.value = a.value.toUpperCase();
8 }
9 </script>
10</head>
11<body>
12<h3>Introduceti numele si prenumele:</h3>
14<table>
15<tr>
16<td>Numele:</td>
17<td><input type="text" name="x" value="" size="20" onChange="majuscule(this)"></td>
18</tr>
19<tr>
20<td>Prenumele:</td>
21<td><input type="text" name="y" value="" size="20" onChange="majuscule(this)"></td>
22</tr>
23</table>
24</form>
25</body>
26</html>
Exemplul 3
n urmtorul exemplu, am utilizat o funcie care afieaz un mesaj, n cazul n care selectm
caracterele scrise ntr-un cmp de tip text.
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <title>onSelect</title>
5 </head>
6 <script>
7 function f()
8 {
9 alert("Felicitari! \n Ati selectat textul.");
10}
11</script>
12<body>
13<h3>Selectati textul de mai jos!</h3>
15<input type="text" name="data" value="Textul de mai jos :)" size=20 onSelect='f()'>
16</form>
17</body>
18</html>
Exemplul 4
32
n exemplul de mai jos am creat un formular ce permite calcularea unei sume, pe msur ce sunt
introduse cifrele n cmpurile formularului.
<!DOCTYPE html>
1 <html>
2 <title>Exemplu de formular</title>
3 <style>
4 body {
5 background-color: #B3FFB3;
6 }
7 .titlul { font-family: "Aldine721 Lt BT", Adolescence, "Alexei Copperplate";
8 font-size: 18px;
9 font-weight: bolder;
10color: #006600;
11}
12</style>
13<script>
14function PornireCalculare()
15{
16interval = setInterval("Calculare()",1);
17}
18function Calculare()
19{
20primul = document.adunare.x1.value;
21alDoilea = document.adunare.x2.value;
22document.adunare.x3.value = (primul * 1) + (alDoilea * 1);
23}
24function Oprire()
25{
26clearInterval(interval);
27}
28</script>
29</head>
30<body>
31<p class="titlul">Introduceti numere, pentru a le aduna
32</p><br />
33<form name="adunare">
34<input type=text name="x1" value="" onFocus="PornireCalculare();" onBlur="Oprire();" size="10">
35+
36<input type=text name="x2" value="" onFocus="PornireCalculare();" onBlur="Oprire();" size="10">
37=
38<input type=text name="x3" size="10">
39</form>
40</body>
</html>
Exemplul 5
n exemplul de mai jos am creat un formular ce permite transmiterea unui comentariu. La
activarea butonului de expediere a datelor apare o caseta de alertare.
1 <!DOCTYPE html>
2 <html>
3 <title>Evenimente</title>
4 <body>
5 <form onSubmit="window.alert('Multumim! Comentariul Dvs va fi analizat!')">
6 Comentarii:
7 <textarea cols=25 rows=5>
8 </textarea>
9 <input type=submit value=ok>
10</form>
11</body>
12</html>
Obiectele JavaScript
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.
Obiectele JavaScript sunt de trei tipuri:
33
Obiecte interne(integrate) fac parte din limbajul JavaScript i anume Array, Boolean,
Date, Function, Math, Number, Object, RegExp, String i Arguments.
Obiectele navigatorului nu fac parte din limbajul JavaScript, dar sunt recunoscute de
navigatoare.
Obiecte personalizate obiecte create de utilizator.
Crearea propriilor obiecte va fi explicat mai tirziu. Vom ncepe prin a examina obiectele
ncorporate n JavaScript i cum sunt ele utilizate.
Trebuie de reinut 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:
1<html>
2<head></head>
3<body>
5var txt="Bine ati venit!";
6document.write(txt.length);
7</body>
8</html>
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:
1<html>
2<head></head>
3<body>
5var txt="Bine ati venit!";
6document.write(txt.toUpperCase());
7</body>
8</html>
Codul de mai sus va afia irul: BINE ATI VENIT!

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:
34
var txt = string;

Proprietile obiectului String
Proprietate
constructor
length
prototype
Descriere
Returneaz funcia care a creat prototipul obiectului String
Returneaz lungimea irului
Permite adugarea de proprieti i metode unui obiec
Metodele obiectului String

Metod
charAt()
charCodeAt()
concat()
fromCharCode()
indexOf()
lastIndexOf()
Descriere
Returneaz caracterul cu indexul specificat
Returneaz codul Unicode al caracterului cu indexul specificat
Concateneaz dou sau mai multe iruri i returneaz irul obinut
Convertete valori Unicode n caractere
Returneaz poziia primei apariii a unui subir ntr-un i
Returneaz poziia ultimei apariii a unui subir ntr-un ir
Caut potrivirile dntre un subir i un string i returneaz subirul sau null
match()
(dac subirul nu este gsit)
replace()
Caut toate apariiile unui subir ntr-un ir i le inlocuiete cu un nou subir
Caut potrivirea dntre un subir i un ir i returneaz poziia n care apare
search()
potrivirea
slice()
Elimin o poriune din ir i returneaz irul extras
split()
Imparte un ir n subiruri pe baza unui caracter separator
Extrage dintr-un ir secvena de caractere care ncepe ntr-o anumit poziie i
substr()
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.
Metod
anchor()
big()
blink()
bold()
fixed()
fontcolor()
fontsize()
italics()
link()
small()
35
Descriere
Creeaz o ancor
Afieaz irul cu font mare
Afieaz un ir care clipete
Afieaz irul cu font bold
Afieaz irul cu un font cu pas fix
Afieaz irul folosind o anumit culoare
Afieaz irul cu o anumit dimensiune a fontului
Afieaz irul cu font italic
Afieaz irul ca hiperlegtur
Afieaz irul cu font mic
strike()
sub()
sup()
Afieaz irul ca tiat

Afieaz irul ca subscript (indice)
Afieaz irul ca superscript (exponent)
Exemple:
Exemplul 1
Ilustreaz utilizarea proprietii length pentru a determina lungimea unui ir.
1 <html>
2 <body>
3 <h3>Obiectul String. Determinarea lungimii unui sir</h3> <hr/>
5 var txt="Bine ati venit!";
6 document.write("Sirul este: "+txt+"<br/>");
7 document.write("Are lungimea "+txt.length);
8 </script>
9 <p><b>Obs.</b>Sirul nu se modifica.</p>
10</body>
11</html>
Exemplul 2
Ilustreaz cum se utilizeaz tagurile HTML pentru a stiliza un ir.
1 <html>
2 <body>
3 <h3>Obiectul String. Utilizarea tagurilor HTML pentru stilizarea unui sir.</h3> <hr/>
5 var txt="Bine ati venit!";
6
7 document.write("<p>Big: " + txt.big() + "</p>");
8 document.write("<p>Small: " + txt.small() + "</p>");
9
10document.write("<p>Bold: " + txt.bold() + "</p>");
11document.write("<p>Italic: " + txt.italics() + "</p>");
12
13document.write("<p>Blink: " + txt.blink() + " (nu functioneaza in IE, Chrome, Safari)</p>");
14document.write("<p>Fixed: " + txt.fixed() + "</p>");
15document.write("<p>Strike: " + txt.strike() + "</p>");
16
17document.write("<p>Fontcolor: " + txt.fontcolor("Blue") + "</p>");
18document.write("<p>Fontsize: " + txt.fontsize(14) + "</p>");
19
20document.write("<p>Subscript: " + txt.sub() + "</p>");
21document.write("<p>Superscript: " + txt.sup() + "</p>");
22
23document.write("<p>Link: " + txt.link("http://www.google.com") + "</p>");
24</script>
25<br/> <br/>
26<p><b>Obs.</b>Sirul stilizat nu se modifica!</p>
27</body>
28</html>
Exemplul 3
Ilustreaz cum se utilizeaz metoda concat() pentru a concatena iruri.
Concatenarea a dou iruri:
1
2
3
4
5
6
<html>
<body>
<h3>Obiectul String. Concatenarea a doua siruri.</h3>
<hr/>
36
var txt1 = "Buna ";

7
var txt2 = "ziua!";
8
document.write("Primul sir este: "+txt1+"<br/>");
9
document.write("Al doilea sir este: "+txt2+"<br/>");
10
document.write("Sirul concatenat este: "+txt1.concat(txt2)+"<br/>");
11
12
</script>
13
<p><b>Obs.</b>Sirurile concatenate nu se modifica. Rezultatul concatenarii poate fi pastrat
14
intr-un nou sir.</p>
15
</body>
16
</html>
Concatenarea a trei iruri:

<html>
1
<body>
2
<h3>Obiectul String. Concatenarea a trei siruri.</h3>
3
<hr/>
4
5
var txt1="Buna ";
6
var txt2="ziua!";
7
var txt3=" Bine ati venit!";
8
document.write("Primul sir este: "+txt1+"<br/>");
9
document.write("Al doilea sir este: "+txt2+"<br/>");
10
document.write("Al treilea sir este: "+txt3+"<br/>");
11
document.write("Sirul concatenat este: "+txt1.concat(txt2,txt3)+"<br/>");
12
</script>
13
<p><b>Obs.</b>Sirurile concatenate nu se modifica. Rezultatul concatenarii poate fi pastrat
14
intr-un nou sir.</p>
15
</body>
16
</html>
Exemplul 4
Ilustreaz cum se utilizeaz metoda indexOf() pentru a determina poziia primei apariii a unei
valori ntr-un ir.
1 <html>
2 <body>
3 <h3>Obiectul String. Cautarea primei aparitii a unei valori in sir cu indexof().</h3> <hr/>
5 var str="Buna ziua!";
6 document.write("Sirul in care se cauta este: "+str+"<br/>");
7 document.write("Sirul \"Buna\" apare in sir in pozitia "+str.indexOf("Buna") + "<br />");
8 document.write("Sirul \"ZIUA\" apare in sir in pozitia "+str.indexOf("ZIUA") + "<br />");
9 document.write("Sirul \"ziua\" apare in sir in pozitia "+str.indexOf("ziua"));
10</script>
11<p><b>Obs.</b>Sirul nu se modifica in urma cautarii!</p>
12</body>
13</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.
1
2
3
4
5
6
7
8
9
<html>
<body>
<h3>Obiectul String. Cauta unui subsir intr-un sir cu match().</h3> <hr/>
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 />");
document.write("Sirul cautat: "+"World"+". ");
37
document.write("Valoarea returnata: "+str.match("World") + "<br />");

10
document.write("Sirul cautat: "+"worlld"+". ");
11
document.write("Valoarea returnata: "+str.match("worlld") + "<br />");
12
</script>
13
<p><b>Obs.</b>Sirul nu se modifica in urma cautarii. Rezultatul poate
14
variabila.</p>
15
</body>
16
</html>
fi
memorat
intr-o
Exemplul 6
Ilustreaz cum se utilizeaz metoda replace() pentru a nlocui o secven din ir cu alt secven.
1 <html>
2 <body>
3 <h3>Obiectul String. Inlocuirea unei secvente din sir cu replace().</h3> <hr/>
5
6 var str="Vizitati Microsoft!";
7 document.write("Sirul initial este: "+str+"<br/>");
8 document.write("Subsirul care se modifica este: "+"Microsoft"+"<br/>");
9 document.write("Subsirul cu care se inlocuieste este: "+"Google"+"<br/>");
10str.replace("Microsoft","Google");
11document.write("Sirul obtinut este: "+str);
12
13</script>
14<p><b>Obs.</b>Sirul se modifica!</p>
15</body>
16</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 dntre poziia de
nceput i sfiritul irului. Dac se folosesc valori negative, extragerea se va face numrnd
napoi de la sfritul irului.
<html>
1
<body>
2
<h3>Obiectul String. Extragerea unui subsir dintr-un sir cu slice().</h3> <hr/>
3
4
5
var str="Bine ati venit!";
6
document.write("Sirul initial este: "+str+"<br/>");
7
// extrage toate caracterele incepand cu pozitia 0:
8
var txt=str.slice(0);
9
document.write("Subsirul extras cu slice(0): "+txt+"<br/>");
10
11
//extrage toate caracterele incepand cu pozitia 5:
12
txt=str.slice(5);
13
document.write("Subsirul extras cu slice(5): "+txt+"<br />");
14
15
//extrage ultimele 6 caractere de la sfarsitul sirului:
16
txt=str.slice(-6);
17
document.write("Subsirul extras cu slice(-6): "+txt+"<br />");
18
19
//extrage primul caracter din sir:
20
txt=str.slice(0,1);
21
document.write("Subsirul extras cu slice(0,1): "+txt+"<br />");
22
23
//extrage caracterele dntre pozitiile 5 si 10
24
txt=str.slice(5,10);
25
document.write("Subsirul extras cu slice(5,10): "+txt+"<br />");
26
27
</script>
28
<p><b>Obs.</b> Sirul nu se modifica in urma extragerii. Subsirul extras poate fi memorat intr-o
29
variabila.</p>
30
</body>
31
</html>
38
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.
1 <html>
2 <body>
3 <h3>Obiectul String. Impartirea unui sir in subsiruri cu split().</h3> <hr/>
5
6 var str="Bine ati venit";
7
8 document.write("Sirul initial: "+str+"<br/>");
9
10//este returnat ntreg sirul
11document.write("Sirurile returnate cu split(): "+str.split() + "<br />");
12
13//sunt returnate cele trei cuvnte din sir
14document.write("Sirurile returnate cu split(\" \"): "+str.split(" ") + "<br />");
15
16//sunt returnate caracterele din ir
17document.write("Sirurile returnate cu split(\"\"): "+str.split("") + "<br />");
18
19//sunt returnate numai primele doua cuvnte din sir
20document.write("Subsirurile returnate cu split(\" \",2): "+str.split(" ",2)+"<br/>");
21
22</script>
23<p><b>Obs.</b> Sirul initial nu se modifica. Rezultatul poate fi memorat intr-o variabila.
24</body>
25</html>
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:
1) var d = new Date();
2) var d = new Date(milisecunde);
3) var d = new Date(dataString);
4) 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:
1var myDate=new Date();
2myDate.setFullYear(2010,1,19);
n exemplul urmtor, data este setat la apte zile n viitor:

1var myDate=new Date();
2myDate.setDate(myDate.getDate()+7);
Compararea a dou date calendaristice

Exemplul urmtor compar data curent cu 19 februarie 2010:
1 var myDate=new Date();
39
2 myDate.setFullYear(2010,1,19);
3 var today = new Date();
4
5 if (myDate>today)
6
{
7
alert("Astazi este inainte de 19 Februarie 2010");
8
}
9 else
10 {
11 alert("Astazi este dupa 19 Februarie 2010");
12 }
Metodele obiectului Date

Metod
getDate()
getDay()
getFullYear()
getHours()
getMilliseconds()
getMinutes()
getMonth()
getSeconds()
getTime()
getTimezoneOffset()
parse()
setDate()
setFullYear()
setHours()
setMilliseconds()
setMinutes()
setMonth()
setSeconds()
setTime()
toDateString()
toString()
toTimeString()
valueOf()
Descriere
Returneaz ziua din lun (ntre 1 i 31)
Returneaz ziua din sptmn (0-6)
Returneaz anul (patru cifre)
Returneaz ora (0-23)
Returneaz milisecundele (0-999)
Returneaz minutele (0-59)
Returneaz luna (0-11)
Returneaz secundele (0-59)
Returneaz numrul de milisecunde scurse de la 1.01.1970
Returneaz diferena dntre GMT i timpul local, n minute
Analizeaz(parseaz) o dat ca ir de caractere i returneaz numrul de
milisecunde scurse de la 1.01.1970
Seteaz data din lun (1-31)
Seteaz anul (patru cifre)
Seteaz ora (0-23)
Seteaz milisecundele (0-999)
Seteaz minutele (0-59)
Seteaz lunile (0-11)
Seteaz secundele (0-59)
Seteaz o dat i o or adunnd sau scznd un anumit numr de
milisecunde la/din 1.01.1970
Convertete poriunea corespunztoare datei calendaristice dintr-un obiect
Date ntr-un ir de caractere
Convertete un obiect Date ntr-un ir de caractere
Convertete poriunea corespunztoarea timpului dintr-un obiect Date ntrun ir de caractere
Returneaz valoarea primar a unui obiect Date
Exemple:
Exemplul 1
Ilustreaz utilizarea metodei Date() pentru a obine data curent.
1
2
3
4
5
6
<html>
<body>
<h3>Obiectul Date. Obtinerea datei curente cu Date().</h3> <hr/>
document.write("Astazi este:
40
"+Date());
7
8 </script>
9 </body>
10</html>
Exemplul 2
Ilustreaz utilizarea metodei getTime() pentru a calcula anii scuri din 1970 pin n prezent.
1 <html>
2 <body>
3 <h3>Obiectul Date. Utilizarea metodei getTime().</h3>
4 <hr/>
6 var d=new Date();
7 document.write("Au trecut "+d.getTime() + " milisecunde din 01.01.1970 si pana acum.");
8 </script>
9 </body>
10</html>
Exemplul 3
Ilustreaz utilizarea metodei setFullYear() pentru a seta o dat specific.
1 <html>
2 <body>
3 <h3>Obiectul Date. Setarea datei cu setFullYear().</h3> <hr/>
5
7 d.setFullYear(2010,1,19);
8 document.write("Data a fost setata la "+d);
9
10</script>
11</body>
12</html>
Exemplul 4
Ilustreaz utilizarea metodei toString() pentru a converti data curent ntr-un ir de caractere.
1 <html>
2 <body>
4
5 var d=new Date();
6 document.write(d.toString());
7
8 </script>
9 </body>
10</html>
Exemplul 5
Ilustreaz utilizarea metodei getDay() i a unui tablou pentru a scrie denumirea zilei din
sptmna curent.
1 <html>
2 <body>
3 <h3>Obiectul Date. Utilizarea metodei getDay() pentru a determina ziua din saptamana.</h3>
4 <hr/>
6
7 var d=new Date();
8 var weekday=new Array(7);
9 weekday[0]="Duminica";
10weekday[1]="Luni";
11weekday[2]="Marti";
41
weekday[3]="Miercuri";
12
weekday[4]="Joi";
13
weekday[5]="Vineri";
14
weekday[6]="Sambata";
15
document.write("Astazi este " + weekday[d.getDay()]);
16
17
</script>
18
</body>
19
</html>
Exemplul 6
Ilustreaz cum se poate afia un ceas ntr-o pagin web.
1 <html>
2 <head>
4 function ceas()
5 {
6 var today=new Date();
7 var h=today.getHours();
8 var m=today.getMinutes();
9 var s=today.getSeconds();
10//functia urmatoare adauga un zero in fata
11//numerelor<10
12m=verifica(m);
13s=verifica(s);
14document.getElementById('txt').innerHTML=h+":"+m+":"+s;
15t=setTimeout('ceas()',500);
16}
17
18function verifica(i)
19{
20if (i<10)
21{
22i="0" + i;
23}
24return i;
25}
26</script>
27</head>
28<body onload="ceas()">
29<h3>Obiectul String. Afisarea unui ceas.</h3> <hr/>
30<div id="txt"></div>
31</body>
32</html>
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:
1pet1="Caine";
2pet2="Pisica";
3pet3="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:
42
1var pets=new Array();

2//tablou obisnuit
3pets[0]="Caine";
4pets[1]="Pisica";
5pets[2]="Papagal";
2:
1var pets=new Array("Caine","Pisica","Papagal");
2//tablou condensat
3:
1var pets=["Caine","Pisica","Papagal"];
2//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:
pets[0]="Iguana";
Proprietile obiectului Array
Proprietatea
constructor
length
prototype
Descriere
Returneaz funcia care a creat prototipul obiectului Array
Seteaz sau returneaz numrul elementelor stocate n tablou
Permite adugare de proprieti i metode unui obiect
Metodele obiectului Array

Metod
concat()
join()
pop()
push()
reverse()
shift()
43
Descriere
Concateneaz dou sau mai multe tablouri i returneaz tabloul obinut
Concateneaz toate elementele unui tablou ntr-un ir de caractere
Inltur ultimul element dintr-un tablou i returneaz respectivul element
Adaug noi elemente la sfiritul unui tablou i returneaz noua lungime a tabloului
Rstoarn ordinea elementelor dintr-un tablou
Inltur primul element dintr-un tablou i returneaz respectivul element
slice()
sort()
getTime()
splice()
toString()
unshift()
valueOf()
Selecteaz o parte dintr-un tablou i returneaz elementele selectate

Returneaz secundele (0-59)
Sorteaz elementele unui tablou
Adaug/nltur elemente dintr-un tablou
Convertete un tablou n ir de caractere i returneaz rezultatul
Adaug noi elemente la nceputul unui tablou i returneaz noua lungime a tabloului
Returneaz valoarea primar a unui tablou
Exemple:
Exemplul 1
Ilustreaz crearea unui tablou, atribuirea de valori i afiarea elementelor tabloului.
1 <html>
2 <head>
3 <h3>Obiectul Array. Crearea unui tablou, initializarea si afisarea elementelor.</h3> <hr/>
8 pets[2] = "Perus";
9
10document.write("Elementele memorate in tablou sunt:"+"<br/>");
11for (i=0;i<pets.length;i++)
12{
13document.write(pets[i] + "<br />");
14}
15</script>
16</body>
17</html>
Exemplul 2
Ilustreaz utilizarea instruciunii for...in pentru a parcurge elementele unui tablou.
1 <html>
2 <body>
3 <h3>Obiectul Array. Afisarea elementelor unui tablou cu instructiunea for..in.</h3> <hr/>
5 var x;
9 pets[2] = "Perus";
10
11document.write("Elementele memorate in tablou sunt:"+"<br/>");
12for (x in pets)
13{
14document.write(pets[x] + "<br />");
15}
16</script>
17</body>
18</html>
Exemplul 3
Ilustreaz utilizarea metodei concat() pentru a concatena trei tablouri.
1
2
3
4
5
6
<html>
<body>
<h3>Obiectul Array. Concatenarea a trei tablouri cu concat().</h3> <hr/>
var parinti = ["Maria", "George"];
44
var copii = ["Elena", "Mihai"];

7
var frati = ["Paul", "Dan"];
8
var familie = parinti.concat(copii,frati);
9
document.write("Parinti: "+parinti+"<br/>");
10
document.write("Copii: "+copii+"<br/>");
11
document.write("Frati: "+frati+"<br/>");
12
13
document.write("Familia: "+familie);
14
15
</script>
16
<p><b>Obs.</b>Tablourile concatenate nu se modifica.
17
tablou.</p>
18
</body>
19
</html>
Rezultatul
concatenarii
este
un
nou
Exemplul 4
Ilustreaz utilizarea metodei join() pentru a concatena toate elementele unui tablou ntr-un ir de
caractere.
<html>
1
<body>
2
<h3>obiectul Array. Concatenarea elementelor unui tablou intr-un sir de caractere
3
join().</h3> <hr/>
4
5
6
var fructe = ["Mere", "Pere", "Banane", "Kiwi"];
7
document.write("Tabloul contine valorile: "+fructe+"<br/>");
8
document.write("Sirul concatenat cu join(\" \"): "+fructe.join(" ") + "<br />");
9
document.write("Sirul concatenat cu join(\"+\"): "+fructe.join("+") + "<br />");
10
document.write("Sirul concatenat cu join(\" si \"): "+fructe.join(" si ")+"<br/>");
11
12
</script>
13
<p><b>Obs.</b>Tabloul nu se modifica. Sirul concatenat poate fi memorat intr-o variabila.
14
</body>
15
</html>
cu
Exemplul 5
Ilustreaz utilizarea metodei pop() pentru a nltura ultimul element dintr-un tablou.
1 <html>
2 <body>
3 <h3>Obiectul Array. Eliminarea ultimului element din tablou cu pop().</h3> <hr/>
5 var pets = ["Pisica", "Caine", "Hamster", "Iguana"];
6
7 document.write("Tablou initial contine valorile: "+pets+"<br/>");
8 document.write("S-a eliminat valoarea: "+pets.pop() + "<br />");
9 document.write("Tabloul dupa eliminare: "+pets + "<br />");
10document.write("S-a eliminat valoarea: "+pets.pop() + "<br />");
11document.write("Tabloul dupa eliminare: "+pets);
12
13</script>
14<p><b>Obs.</b>
Tabloul
se
modifica!
Valoarea
eliminata
poate
fi
memorata
15variabila.</p>
16</body>
17</html>
intr-o
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.
1
2
3
4
5
6
<html>
<body>
<h3>Obiectul Array. Adaugarea de noi elemente la sfarsitul tabloului cu push().</h3> <hr/>
var pets = ["Pisica", "Caine", "Perus", "Hamster"];
45
7 document.write("Tabloul initial: "+pets+"<br/>");

8 document.write("Se adauga valorile: "+"Iguana"+"<br/>");
9 pets.push("Iguana");
10document.write("Tabloul obtinut: "+pets+"<br/>");
11document.write("Se adauga valorile: "+"Pesti si Iepure"+"<br/>");
12k=pets.push("Pesti","Iepure");
13document.write("Tabloul obtinut: "+pets+"<br/>");
14document.write("Tabloul final are "+k+" elemente");
15
16</script>
17<p><b>Obs.</b> Tabloul se modifica. Metoda returneaza noua lungime a tabloului si valoarea
18poate fi memorata intr-o variabila.</p>
19</body>
20</html>
Exemplul 7
Ilustreaz utilizarea metodei reverse() pentru a inversa ordinea elementelor dintr-un tablou.
1 <html>
2 <body>
3 <h3>Obiectul Array. Inversarea ordinii elementelor din tablou cu reverse().</h3> <hr/>
5 var friends = ["Mihai", "Elena", "Andra", "Dan"];
6 document.write("Tabloul initial: "+friends+"<br/>");
7 friends.reverse();
8 document.write("Tabloul dupa inversare: "+friends);
9
10</script>
11</body>
12</html>
Exemplul 8
Ilustreaz utilizarea metodei shift() pentru a elimina primul element dintr-un tablou.
1 <html>
2 <body>
3 <h3>Obiectul Array. Eliminarea primului element din tablou cu shift().</h3> <hr/>
7
8 var x=friends.shift();
9 document.write("Elementul eliminat: "+x+"<br/>");
10document.write("Tabloul dupa eliminare: "+friends);
11
12</script>
13
14<p><b>Obs.</b> Tabloul se modifica. Metoda returneaza elementul eliminat si rezultatul poate fi
15memorat intr-o variabila.</p>
16</body>
17</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 sfiritul irului ctre nceput.
1
2
3
4
5
6
7
8
9
<html>
<body>
<h3>Obiectul Array. Selectare elementelor din tablou cu slice().</h3> <hr/>
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/>");
46
10document.write("Elementele selectate cu slice(1): "+pets.slice(1) + "<br />");

11document.write("Elementele selectate cu slice(-2): "+pets.slice(-2) + "<br />");
12
13</script>
14<p><b>Obs.</b> Tabloul nu se modifica. Elementele selectate pot fi memorate
15variabila.</p>
16</body>
17</html>
intr-o
Exemplul 10
Ilustreaz utilizarea metodei sort() pentru a sorta alfabetic cresctor un tablou de iruri de
caractere. Metoda sorteaz implicit n ordine alfabetic cresctoare.
1 <html>
2 <body>
3 <h3>Obiectul Array. Sortarea unui tablou cu sort().</h3> <hr/>
5
8 document.write("Tabloul sortat: "+friends.sort());
9
10</script>
11<p><b>Obs.</b> Tabloul se modifica!</p>
12</body>
13</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.
1 <html>
2 <body>
3 <h3>Obiectul Array. Sortarea unui tablou cu valori numerice.</h3> <hr/>
5
6 function sortDesc(a, b)
7 {
8 return b - a;
9 }
10
11function sortCresc(a,b)
12{
13return a-b;
14}
15
16var n = new Array(10,5,40,25,100,1);
17document.write("Tabloul initial: "+n+"<br/>");
18document.write("Tabloul sortat crescator: "+n.sort(sortCresc)+"<br/>");
19document.write("Tabloul sortat descrescator: "+n.sort(sortDesc));
20
21</script>
22<p><b>Obs.</b> In urma sortarii tabloul se modifica!</p>
23</body>
24</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 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.
1 <html>
2 <body>
47
3 <h3>Obiectul
Array.
Inserarea/stergerea
elementelor
dintr-o
pozitie
a
tabloului
cu
4 splice().</h3> <hr/>
6 var friends = ["Ana", "Mircea", "Dan", "Maria"];
8 document.write("Se
adauga
valoarea
\"Andra\"
in
pozitia
3
din
tablou
cu
9 splice(3,0)"+"<br/>");
10friends.splice(3,0,"Andra");
11document.write("Tabloul obtinut: "+friends+"<br/>");
12document.write("Se sterg din tablou primele doua valori cu splice(0,2)"+"<br/>");
13document.write("Valorile sterse: "+friends.splice(0,2)+"<br/>");
14document.write("Tabloul obtinut: "+friends);
15</script>
16<p><b>Obs.</b> Tabloul se modifica. Daca metoda elimina elemente din tablou, va returna
17elementele eliminate.</p>
18</body>
19</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.
1 <html>
2 <body>
3 <h3>Obiectul Array. Convertirea unui tablou in sir de caractere cu toString().</h3> <hr/>
5
6 var n = new Array(14,0,7,-4,25,13,7);
7 document.write("Tabloul contine valorile:"+"<br/>");
8 for(x in n) document.write(n[x]+"<br/>");
9 document.write("Sirul de caractere obtinut:" +n.toString());
10
11</script>
12<p><b>Obs.</b> Tabloul nu se modifica. Metoda returneaza sirul de caractere obtinut.</p>
13</body>
14</html>
Exemplul 14
Ilustreaz utilizarea metodei unshift() pentru a aduga noi valori la nceputul unui tablou
1 <html>
2 <body>
3 <h3>Obiectul Array. Adaugarea de elemente la inceputul unui tablou cu unshift().</h3> <hr/>
5 var pets = ["Pisica", "Caine", "Iguana", "Pesti"];
6 document.write("Tabloul initial: "+pets+"<br/>");
7 document.write("Se adauga valoarea \"Papagal\" "+"<br/>");
8 pets.unshift("Papagal");
9 document.write("Tabloul dupa adaugare: "+pets+"<br/>");
10document.write("Se adauga valorile \"Perus\" si \"Broasca testoasa\" "+"<br/>");
11k=pets.unshift("Perus","Broasca testoasa");
12document.write("Tabloul dupa adaugare: "+pets+"<br/>");
13document.write("Tabloul final are "+k+" elemente.");
14</script>
15<p><b>Nota:</b> Metoda unshift() nu lucreaza corect in Internet Explorer; returneaza undefined!
16</p>
17<p><b>Obs.</b>Tabloul se modifica. Metoda returneaza numarul de elemente din tablou dupa
18adaugare.
19<br>Valoarea poate fi memorata intr-o variabila.</p>
20
21</body>
22</html>
Obiectul Boolean
Obiectul Boolean este utilizat pentru a converti o valoare ne-boolean ntr-o valoare boolean
(cu valoarea true sau false).
48
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.
1 <html>
2 <body>
4 var b1=new Boolean( 0);
5 var b2=new Boolean(1);
6 var b3=new Boolean("");
7 var b4=new Boolean(null);
8 var b5=new Boolean(NaN);
9 var b6=new Boolean("false");
10
11document.write("0 are valoarea "+ b1 +"<br />");
12document.write("1 are valoarea "+ b2 +"<br />");
13document.write("Un sir vid are valoarea "+ b3 + "<br />");
14document.write("null are valoarea "+ b4+ "<br />");
15document.write("NaN are valoarea "+ b5 +"<br />");
16document.write("Sirul 'false' are valoarea "+ b6 +"<br />");
17</script>
49
18</body>
19</html>
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
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:
1document.write(Math.round(4.7));
Exemplul urmtor utilizeaz metoda random() pentru a genera un numr aleator cuprins ntre 0
i 1:
1document.write(Math.random());
Exemplul urmtor utilizeaz metodele floor() i random() pentru a genera un numr aleator
cuprins ntre 0 i 10:
1document.write(Math.floor(Math.random()*11));
Proprietile obiectului Math
Proprietate
E
LN2
LN10
LOG2E
50
Descriere
Returneaz constanta lui Euler (cca. 2.718)
Returneaz logaritm natural din 2 (cca. 0.693)
Returneaz logaritm natural din 10 (cca. 2.302)
Returneaz logaritm n baza 2 din E (cca. 1.442)
LOG10E
PI
SQRT1_2
SQRT2
Returneaz logaritm n baza 10 din E (cca. 0.434)

Returneaz PI (cca. 3.14159)
Returneaz rdcina ptrat din 1/2 (cca. 0.707)
Returneaz rdcina ptrat din 2 (cca. 1.414)
Metodele obiectului Math

Metod
abs(x)
acos(x)
asin(x)
atan(x)
ceil(x)
cos(x)
exp(x)
floor(x)
log(x)
max(x,y,z,...,n)
min(x,y,z,...,n)
pow(x,y)
random()
round(x)
sin(x)
sqrt(x)
tan(x)
Descriere
Valoarea absolut a lui x
Arccosinus de x, n radiani
Arcsinus de x, n radiani
Arctangent de x ca valoare numeric ntre -PI/2 i PI/2 radiani
Rotunjete x la ntreg prin adaos
Cosinus de x (x n radiani)
Valoarea lui Ex
Rotunjete x la ntreg prin lips
Logaritm natural din x
Valoarea maxim din ir
Valoarea minim din ir
Valoarea lui x la puterea y
Un numr aleator ntre 0 i 1
Rotunjete x la cel mai apropiat ntreg
Sinus de x (x n radiani)
Rdcin ptrat din x
Tangenta unui unghi
Exemple:
Exemplul 1
Ilustreaz utilizarea metodei max() pentru a determina maximul a dou sau mai multe valori.
1 <html>
2 <body>
4 document.write(Math.max(5,10) + "<br />");
5 document.write(Math.max(0,150,30,20,38) + "<br />");
6 document.write(Math.max(-5,10) + "<br />");
7 document.write(Math.max(-5,-10) + "<br />");
8 document.write(Math.max(1.5,2.5));
9 </script>
10</body>
11</html>
Exemplul 2
Ilustreaz utilizarea metodei min() pentru a determina minimul a dou sau mai multe valori.
1
2
3
4
5
6
7
8
<html>
<body>
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));
51
9 </script>
10</body>
11</html>
Exemplul 3
Convertirea gradelor din Celsius n Fahrenheit i reciproc:
1 <html>
2 <head>
4 function convert(degree)
5 {
6 if (degree=="C")
7 {
8 F=document.getElementById("c").value * 9 / 5 + 32;
9 document.getElementById("f").value=Math.round(F);
10}
11else
12{
13C=(document.getElementById("f").value -32) * 5 / 9;
14document.getElementById("c").value=Math.round(C);
15}
16}
17</script>
18</head>
19<body>
20<p><b>Introduceti un numar in unul din cele doua campuri:</b></p>
21<form>
22<input id="c" name="c" onkeyup="convert('C')"> grade Celsius<br />
23egal<br />
24<input id="f" name="f" onkeyup="convert('F')"> grade Fahrenheit
25</form>
26</body>
27</html>
Obiectul RegExp
Obiectul RegExp este folosit pentru a realiza cutri i nlocuiri ntr-un text. RegExp este
prescurtarea pentru expresie regulat. Cnd realizai cutri ntr- un 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");
52
Cnd folosii obiectul m1 ca s cutai ntr-un ir, va fi gsit litera "d".

Modificatorii
Modificator
i
g
m
Descriere
Caut potrivirea fr a face diferena ntre literele mici i mari
Realizeaz o cutare global (gsete toate potrivirile, nu numai prima)
Caut potrivirea pe mai multe linii
Parantezele ptrate
Sunt utilizate pentru a defini un ir de caractere.
Expression
[abc]
[^abc]
[0-9]
[a-z]
[A-Z]
[a-Z]
[red|blue|green]
Descriere
Gsete orice caracter precizat ntre paranteze
Gsete orice caracter diferit de cele precizate
Gsete o cifr ntre 0 i 9
Gsete orice liter mic
Gsete orice liter mare
Gsete orice liter, mare sau mic
Gsete oricare dntre alternativele specificate
Metacaracterele
Sunt caracterele care au o semnificaie special:
Metacaracter
.
\w
\W
\d
\D
\s
\S
\b
\B
\0
\n
\f
\r
\t
\v
Descriere
Gsete un singur caracter (orice caracter diferit de linie nou i sfirit de linie).
Caut un caracter de cuvnt (litere mici sau mari, cifre i underscore)
Gsete un caracter care nu este de cuvnt
Gsete o cifr
Gsete un caracter care nu este cifr
Caut un spaiu alb
Caut un caracter diferit de spaiu
Caut o potrivire la nceputul/sfritul unui cuvnt
Caut o potrivire care nu este la nceputul/sfritul unui cuvnt
Caut un caracter NUL
Caut un caracter linie nou
Caut un caracter form feed
Caut un caracter retur de car
Caut un caracter tab
Caut un tab caracter
Cuantificatori
Cuantificator Descriere
n+
Caut orice ir care conine cel puin un caracter n
n*
Caut orice ir care conine 0 sau mai multe apariii ale caracterului n
53
n?
n{X}
n{X,Y}
n{X,}
n$
^n
?=n
?!n
Caut orice ir care conine 0 sau o apariie a caracterului n

Caut orice ir care conine o secven de X caractere n
Caut orice ir care conine o secven de X sau Y caractere n
Caut orice ir care conine o secven de cel puin X caractere n
Caut orice ir care se incheie cu caracterul n
Caut orice ir care ncepe cu caracterul n
Caut orice ir care este urmat de irul n
Caut orice ir care nu este urmat de irul n
Proprietile obiectului RegExp

Proprietate
global
ignoreCase
lastIndex
multiline
source
Descriere
Specific dac modificatorul "g" este setat
Specific dac modificatorul "i" este setat
Specific indexul de la care ncepe cutarea urmtoarei potriviri
Specific dac modificatorul "m" este setat
Textul din modelul RegExp
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:
1<html>
2<body>
4var m1=new RegExp("e");
5document.write(m1.test("Cele mai frumoase carti le pastrez in amintire"));
6</script>
7</body>
8</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:
1<html>
2<body>
4var m1=new RegExp("e");
5
6document.write(m1.exec("Cele mai frumoase carti le pastrez in amintire"));
7</script>
8</body>
9</html>
54
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:
1 <html>
2 <body>
4 var m1=new RegExp("e","g");
5 do
6 {
7 result=m1.exec("Cele mai frumoase carti le pastrez in amintire");
8 document.write(result);
9 }
10while (result!=null)
11</script>
12</body>
13</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:
1 <html>
2 <body>
4 var m1=new RegExp("e");
5 document.write(m1.test("Cele mai frumoase carti le pastrez in amintire"));
6 m1.compile("d");
7 document.write(m1.test("Cele mai frumoase carti le pastrez in amintire"));
8 </script>
9 </body>
10</html>
Deoarece modelul "e" apare n ir, dar modelul "d" nu apare, programul anterior va afia
valorile: truefalse
Exemple:
Exemplul 1
Ilustreaz utilizarea metodei match() a obiectului String pentru a gsi toate caracterele precizate
n model cu ajutorul parantezelor ptrate.
55
1<html>
2<body>
4var str="Ce mai faci?";
5var m1=/[a-h]/g;
6document.write(str.match(m1));
7</script>
8</body>
9</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.
1<html>
2<body>
4var str="Ce mai faci?";
5var m1=/[^a-h]/g;
7</script>
8</body>
9</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.
1<html>
2<body>
4var str="Pisica nu are blana tarcata";
5var m1=/a.a/g;
7</script>
8</body>
9</html>
Programul va gsi toate ecvenele 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.
1<html>
2<body>
4var str="Ai obtinut 75%!";
5var m1=/\W/g;
7</script>
8</body>
9</html>
Programul anterior va afia rezultatul: , ,%,!

56
Exemplul 5
Ilustreaz cum se poate construi un model cu care s nceap sau s se sfireasc un cuvnt.
1<html>
2<body>
4var str="Vizitati Google";
5var m1=/\bGo/g;
7</script>
8</body>
9</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
Exemplul 6
Ilustreaz cum se pot gsi toate secvenele dintr-un text, n care un anumit caracter apare cel
puin o dat.
1 <html>
2 <body>
4 var str="Tu creezi pagini web interesante!";
5 var m1=/e+/g;
6 do
7 {
8 result=m1.exec(str);
9 document.write(result); document.write(" ");
10}
11while(result!=null)
12</script>
13</body>
14</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 secvenele de text n care un anumit caracter apare de minim x ori.
1<html>
2<body>
4var str="Aveti 10, 100, 1000 sau 10000 de lei?";
5var m1=/\d{3,}/g;
7</script>
8</body>
9</html>
Programul anterior afieaz rezultatul: 100,1000,10000, adic secvenele care conin cel puin
trei cifre zecimale.
Exemplul 8
57
Ilustreaz cum se pot gsi toate subirurile dintr-un text, care sunt urmate de un subir dat.
1<html>
2<body>
4var str="eu am o pisica, dar eu am si un papagal";
5var m1=/eu(?= am)/g;
7</script>
8</body>
9</html>
Programul anterior determin toate irurile eu care sunt urmate de irul am.
Rezultatul afiat este: eu,eu
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
MAX_VALUE
MIN_VALUE
NEGATIVE_INFINITY
POSITIVE_INFINITY
prototype
Descriere
Returneaz funcia care a creat prototipul obiectului
Returneaz cel mai mare numr posibil n JavaScript
Returneaz cel mai mic numr posibil n JavaScript
Reprezint infinitul negativ (returnat la depire)
Reprezint infinitul pozitiv (returnat la depire)
Permite adugarea de proprieti i metode
Metodele obiectului Number

Metod
toExponential(x)
toFixed(x)
toPrecision(x)
toString()
Descriere
Convertete numrul ntr-o notaie exponenial
Formeaz un numr cu x cifre dup virgul
Formeaz un numr cu lungimea x
Reprezint infinitul negativ (returnat la depire)
Convertete un obiect Number n ir de caractere. Dac metoda are
POSITIVE_INFINITY parametru, acesta precizeaz baza n care este reprezentat numrul
convertit n ir.
valueOf()
Returneaz valoarea primar a obiectului
Exemple:
Exemplul 1
58
Ilustreaz cum se afieaz cel mai mare numr din JavaScript.

1<html>
2<body>
4document.write(Number.MAX_VALUE);
5</script>
6</body>
7</html>
Exemplul 2
Ilustreaz cum se stabilete numrul de zecimale afiate.
1 <html>
2 <body>
4 var num = new Number(27.2547);
5 document.write(num.toFixed()+"<br />");
6 document.write(num.toFixed(1)+"<br />");
7 document.write(num.toFixed(3)+"<br />");
8 document.write(num.toFixed(10));
9 </script>
10</body>
11</html>
Exemplul 3
Ilustreaz cum se stabilete precizia numrului afiat (numrul total de cifre afiate).
1 <html>
2 <body>
4 var num = new Number(31.1593);
5 document.write(num.toPrecision()+"<br />");
6 document.write(num.toPrecision(2)+"<br />");
7 document.write(num.toPrecision(3)+"<br />");
8 document.write(num.toPrecision(10));
9 </script>
10</body>
11</html>
Exemplul 4
Ilustreaz cum se convertete n ir un numr, folosind diferite baze de numeraie.
1 <html>
2 <body>
4 var num=new Number(31);
5
6 document.write(num.toString()+"<br />");
7
8 document.write(num.toString(2)+"<br />");
9
10document.write(num.toString(8)+"<br />");
11
12document.write(num.toString(16)+"<br />");
13</script>
14</body>
15</html>
//numarul este reprezentat in baza 10 (implicit)

//numarul este reprezentat in baza 2
Obiectul Navigator
Obiectul Navigator conine informaii despre browserul vizitatorului. 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
59
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.
Proprietile obiectului Navigator
Proprietate
appCodeName
appName
appVersion
cookieEnabled
platform
Descriere
Returneaz codul browserului
Returneaz numele browserului
Returneaz informaii despre versiunea browserului
Determin dac are cookies activate
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, se
utilizat o funcie numit parseFloat(), care extrage din ir i returneaz prima secven care
arat ca un numr zecimal.
1 <html>
2 <body>
4 var browser=navigator.appName;
5 var b_ver=navigator.appVersion;
6 var versiune=parseFloat(b_ver);
7
8 document.write("Numele browserului: "+ browser);
10document.write("Versiunea browserului: "+ versiune);
11</script>
12</body>
13</html>
Exemplul 2
Ilustreaz cum pot fi afiate diferite mesaje, n funcie de tipul i versiunea browserului.
1 <html>
2 <head>
4 function detectBrowser()
5 {
6 var browser=navigator.appName;
7 var b_ver=navigator.appVersion;
8 var versiune=parseFloat(b_ver);
9 if ((browser=="Netscape"||browser=="Microsoft Internet Explorer") && (versiune>=4))
10{
11alert("Browserul dvs. este destul de bun!");
12}
13else
14{
15alert("Este timpul sa va upgradati browserul!");
16}
17}
18</script>
19</head>
20<body onload="detectBrowser()">
21</body>
60
22</html>
Exemplul 3
Ilustreaz cum pot fi afiate mai multe detalii despre browserul vizitatorului
1 <html>
2 <body>
4 document.write("<p>Browser: ");
5 document.write(navigator.appName + "</p>");
6 document.write("<p>Versiune: ");
7 document.write(navigator.appVersion + "</p>");
8 document.write("<p>Cod: ");
9 document.write(navigator.appCodeName + "</p>");
10document.write("<p>Platforma: ");
11document.write(navigator.platform + "</p>");
12document.write("<p>Cookies activate: ");
13document.write(navigator.cookieEnabled + "</p>");
14
15</script>
16</body>
17</html>
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
closed
defaultStatus
document
frames
history
innerHeight
innerWidth
length
location
name
opener
outerHeight
outerWidth
Descriere
Returneaz o valoare boolean care indic dac fereastra a fost nchis sau nu
Seteaz sau returneaz textul implicit din bara de stare a ferestrei
Returneaz obiectul Document al ferestrei
Returneaz un tablou cu toate cadrele din fereastra curent
Returneaz obiectul History al ferestrei
Seteaz sau returneaz nlimea interioar a zonei de coninut a ferestrei
Seteaz sau returneaz limea interioar a zonei de coninut a ferestrei
Returneaz numrul de cadre (inclusiv cele inline) din fereastr
Returneaz obiectul Location al ferestrei
Seteaz sau returneaz numele ferestrei
Returneaz referina care a creat fereastra
Seteaz sau returneaz nlimea exterioar a ferestrei (inclusiv toolbars/scrollbars)
Seteaz sau returneaz limea exterioar a ferestrei (inclusiv toolbars/scrollbars)
Returneaz numrul de pixeli cu care documentul curent a fost derulat orizontal, n
pageXOffset
raport cu colul stinga sus al ferestrei
Returneaz numrul de pixeli cu care documentul curent a fost derulat vertical, n
pageYOffset
raport cu colul stinga 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
61
screenY
self
status
top
Returneaz coordonata y a ferestrei, relativ la ecran

Returneaz fereastra curent
Seteaz textul din bara de stare a ferestrei
Returneaz cea mai din vrf fereastr deschis n browser
Metodele obiectului window

Metod
alert()
blur()
clearInterval()
clearTimeout()
close()
confirm()
createPopup()
focus()
moveBy()
moveTo()
open()
print()
prompt()
resizeBy()
resizeTo()
scrollBy()
scrollTo()
setInterval()
setTimeout()
Descriere
Afieaz o caset de alertare care conine un mesaj i un buton OK
ndeprteaz focus-ul de la fereastra curent
Reseteaz timer-ul setat cu setInterval()
Reseteaz timer-ul setat cu setTimeout()
nchide fereastra curent
Afieaz o caset de dialog care conine un mesaj i butoanele OK i Cancel
Creeaz o fereastr Pop-up
Fixeaz focus-ul pe fereastra curent
Mut fereastra, relativ la poziia ei curent
Mut fereastra ntr-o nou poziie
Deschide o nou fereastr n browse
Tiprete coninutul ferestrei curente
Afieaz o caset de dialog care cere utilizatorului s introduc anumite
informaii
Redimensioneaz fereastra la dimensiunea specificat n pixeli
Redimensioneaz fereastra la nlimea i limea specificate
Deruleaz coninutul ferestrei cu numrul specificat de pixeli
Deruleaz coninutul ferestrei pn la coordonatele specificate
Apeleaz o funcie sau evalueaz o expresie la intervale specificate de timp (n
milisecunde)
Apeleaz o funcie sau evalueaz o expresie dupa un numr specificat de
milisecunde
Exemplul 1
Ilustreaz utilizarea metodelor open() i focus()
1 <html>
2 <head>
4 function deschide()
5 {
6 myWindow=window.open('','','width=200,height=100');
7 myWindow.document.write("<p>Aceasta este o fereastra creata cu metoda open()</p>");
8 myWindow.focus();
9 }
10</script>
11</head>
12<body>
13<input type="button" value="Deschide fereastra" onclick="deschide()" />
14</body>
15</html>
Exemplul 2
62
n acest exemplu, funcia clock() este apelat la fiecare 1000 milisecunde i actualizeaz ceasul
afiat. Ceasul poate fi oprit prin apsarea unui buton
1 <html>
2 <body>
3 <input type="text" id="clock" />
4 <script language=javascript>
5 var int=self.setInterval("clock()",1000);
6 function clock()
7 {
8 var d=new Date();
9 var t=d.toLocaleTimeString();
10document.getElementById("clock").value=t;
11}
12</script>
13</form>
14<button onclick="int=window.clearInterval(int)">Stop</button>
15</body>
16</html>
Exemplul 3
Ilustreaz mutarea ferestrei curente cu 250 pixeli relativ la poziia ei curent
1 <html>
2 <head>
5 {
7 myWindow.document.write("<p>Aceasta este o fereastra deschisa cu open()</p>");
8 }
9 function muta()
10{
11myWindow.moveBy(250,250);
12myWindow.focus();
13}
14</script>
15</head>
16<body>
18<br /><br />
19<input type="button" value="Muta fereastra" onclick="muta()" />
20</body>
21</html>
Exemplul 4
Ilustreaz redimensionarea ferestrei curente
1 <html>
2 <head>
4 function redimensioneaza()
5 {
6 top.resizeTo(500,300);
7 }
8 </script>
9 </head>
10<body>
11<form>
12<input type="button" onclick="redimensioneaza()" value="Redimensioneaza fereastra" />
13</form>
14</body>
15</html>
Exemplul 5
Ilustreaz utilizarea metodei blur() pentru a trimite o fereastr n background.
63
1 <html>
2 <head>
5 {
7 myWindow.document.write("<p>Aceasta fereastra este deschisa cu open()</p>");
8 myWindow.blur();
9 }
10</script>
11</head>
12<body>
14</body>
15</html>
Obiectul screen
Acest obiect conine informaii despre ecranul vizitatorului.
Proprietile obiectului screen
Proprietate
availHeight
availWidth
colorDepth
height
pixelDepth
width
Descriere
Returneaz nlimea ecranului (fr Taskbar)
Returneaz limea ecranului (fr Taskbar)
Returneaz numrul de bii din paleta de culori folosit pentru afiarea imaginilor
Returneaz nlimea total a ecranului
Returneaz rezoluia culorii ecranului (n bii/pixel)
Returneaz limea total a ecranului
Exemplu urmtor ilustreaz utilizarea tuturor proprietilor obiectului screen pentru a obine
informaii despre ecranul vizitatorului:
1 <html>
2 <body>
3 <h3>Ecranul dumneavoastra are proprietatile:</h3>
5 document.write("Latime/Inaltime totala: ");
6 document.write(screen.width + "*" + screen.height);
8 document.write("Latime/Inaltime disponibila: ");
9 document.write(screen.availWidth + "*" +
10screen.availHeight);
12document.write("Numarul de biti ai culorii: ");
13document.write(screen.colorDepth);
15document.write("Rezoluia culorii: ");
16document.write(screen.pixelDepth);
17</script>
18</body>
19</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
64
Metodele obiectului history

Metod
back()
forward()
go()
Descriere
ncarc URL-ul anterior din lista history
ncarc URL-ul urmtor din lista history
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
hash
host
hostname
href
pathname
port
protocol
search
Descriere
Returneaz poriunea de ancor din URL
Returneaz hostname-ul i port-ul URL-ului
Returneaz hostname-ul URL-ului
Returneaz ntregul URL
Returneaz numele cii URL-ului
Returneaz numrul de port pe care serverul l utilizeaz pentru URL
Returneaz protocolul URL-ului
Returneaz poriunea query din URL
Metodele obiectului location

Metod
assign()
reload()
replace()
Descriere
ncarc un nou document
Reincarc documentul curent
nlocuiete documentul curent cu un alt document
Exemplu
Ilustreaz utilizarea metodei assign()
1 <html>
2 <head>
4 function nou()
5 {
6 window.location.assign("http://www.google.com")
7 }
8 </script>
9 </head>
10<body>
11<input type="button" value="Incarca noul document" onclick="nou()" />
12</body>
13</html>
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.
65
Exemple de cookies:
1. 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 ntimpinai cu un mesaj de genul "Bine ai venit........!" Numele este
recuperat dintr-un cookie.
2. 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.
3. 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)
1
{
2
var exdate=new Date();
3
exdate.setDate(exdate.getDate()+expiredays);
4
document.cookie=c_name+
"="
+escape(value)+
5
";expires="+exdate.toGMTString());
6
}
((expiredays==null)
""
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. 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:
1 function getCookie(c_name)
2 {
3 if (document.cookie.length>0)
4 {
5 c_start=document.cookie.indexOf(c_name + "=");
6 if (c_start!=-1)
7 {
8 c_start=c_start + c_name.length+1;
9 c_end=document.cookie.indexOf(";",c_start);
10if (c_end==-1) c_end=document.cookie.length;
11return unescape(document.cookie.substring(c_start,c_end));
12}
13}
14return "";
15}
Funcia verific mai ntii dac n obiectul document.cookie este memorat vre-un 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:
1 function checkCookie()
66
2 {
3 username=getCookie('username');
4 if (username!=null && username!="")
5 {
6 alert('Welcome again '+username+'!');
7 }
8 else
9 {
10username=prompt('Please enter your name:',"");
11if (username!=null && username!="")
12{
13setCookie('username',username,365);
14}
15}
16}
Programul complet este:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
<html>
<head>
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
(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());
}
return
""
unescape
";
function checkCookie()
{
username=getCookie('username');
if (username!=null && username!="")
{
alert('Bine ai revenit '+username+'!');
}
else
{
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.

Validarea formularelor
JavaScript poate fi utilizat pentru a valida formularele HTML nainte de a fi trimise ctre server.
67
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 cimp numeric?
Cmpuri obligatorii
Exemplul urmtoar utilizeaza o funcie care 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:
1 <html>
2 <head>
4 function valideaza_obligatoriu(camp,txt)
5 {
6 with (camp)
7 {
8 if (value==null||value=="")
9 {
10alert(txt);return false;
11}
12else
13{
14return true;
15}
16}
17}
18function valideaza_formular(formular)
19{
20with (formular)
21{
22if (valideaza_obligatoriu(email,"Campul Email este obligatoriu!")==false)
23{
24email.focus();return false;
25}
26}
27}
28</script>
29</head>
30<body>
31<form action="submit.htm" onsubmit="return valideaza_formular(this)" method="post">
32Email: <input type="text" name="email" size="30">
33<input type="submit" value="Trimite">
34</form>
35</body>
36</html>
Validarea adresei de e-mail

Exemplul urmtoar utilizeaz o funcie care 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 @:
1 <html>
2 <head>
4 function valideaza_email(camp,txt)
5 {
6 with (camp)
7 {
8 apos=value.indexOf("@");
9 dotpos=value.lastIndexOf(".");
10if (apos<1||dotpos-apos<2)
68
11{alert(txt);return false;}
12else {return true;}
13}
14}
15
16function valideaza_formular(formular)
17{
18with (formular)
19{
20if (valideaza_email(email,"Adresa e-mail nu este valida!")==false)
21{email.focus();return false;}
22}
23}
24</script>
25</head>
26<body>
27<form action="submit.htm" onsubmit="return valideaza_formular(this);" method="post">
28Email: <input type="text" name="email" size="30">
29<input type="submit" value="Trimite">
30</form>
31</body>
32</html>
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">
1
<img
border="0"
alt="Vizitati
Google!"
src="img2.gif"
2
onmouseOut="mouseOut()">
3
</a>
id="m1"
onmouseOver="mouseOver()"
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:
2 function mouseOver()
3 {
4 document.getElementById("m1").src ="img1.gif";
5 }
6 function mouseOut()
7 {
8 document.getElementById("m1").src ="img2.gif";
9 }
10</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:
69
<html>
1
<head>
2
3
function mouseOver()
4
{
5
document.getElementById("m1").src ="img1.gif";
6
}
7
function mouseOut()
8
{
9
document.getElementById("m1").src ="img2.gif";
10
}
11
</script>
12
</head>
13
<body>
14
<a href="http://www.google.com" target="_blank">
15
<img border="0" alt="Vizitati Google!" src="img2.gif"
16
onmouseout="mouseOut()">
17
</a>
18
</body>
19
</html>
id="m1"
onmouseover="mouseOver()"
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, onMouseMove,
onMouseOut, onKeyPress, onKeyDown, onKeyUp, onFocus i onBlur.
Exemplul urmtor ilustreaz utilizarea unei imagini mapate ntr-un program HTML:
<html>
<head>
2 function writeText(txt)
3 {
4 document.getElementById("desc").innerHTML=txt;
5 }
6 </script>
7 </head>
8 <body>
9 <img src="planets.gif" width="145" height="126" alt="Planets" usemap="#planetmap" />
10<map name="planetmap"> </p>
11<area shape ="rect" coords ="0,0,82,126" onMouseOver="writeText('Soarele si planetele gigante
12gazoase, ca Jupiter, sunt cu certitudine cele mai mari corpuri din sistemul nostru solar.')"
13href ="sun.htm" target ="_blank" alt="Sun" />
14
15<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"
16alt="Mercur" />
17<area shape ="circle" coords ="124,58,8" onMouseOver="writeText('Pana in anii 60, Venus a fost
18adesea 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"
19alt="Venus" />
20</map>
21<p id="desc"></p>
</body>
</html>
Programarea evenimentelor
Codurile JavaScript pot fi execute la intervale de timp programate. Programarea evenimentelor
JavaScript se realizeaz uor cu ajutorul urmtoarelor dou metode:
70
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 (ncepind 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.
1 <html>
2 <head>
4 function mesaj()
5 {
6 var t=setTimeout("alert('Caseta afisata dupa 7 secunde!')",7000);
7 }
8 </script>
9 </head>
10<body>
11<form>
12<input type="button" value="Afiseaza mesajul!" onClick="mesaj()" />
13</form>
14</body>
15</html>
Exemplul 2
Pentru a 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.
1 <html>
2 <head>
4 var c=0;
5 var t;
6 var pornit=0;
7
8 function numara()
9 {
10document.getElementById('txt').value=c;
11c=c+1;
12t=setTimeout("numara()",1000);
13}
14
15function verifica()
16{
17if (!pornit)
18{
71
19pornit=1;
20numara();
21}
22}
23</script>
24</head>
25<body>
26<form>
27<input type="button" value="Incepe numararea!" onClick="verifica()">
28<input type="text" id="txt" />
29</form>
30</body>
31</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:
1 <html>
2 <head>
4 var c=0;
5 var t;
6 var pornit=0;
7
8 function numara()
9 {
10document.getElementById('txt').value=c;
11c=c+1;
12t=setTimeout("numara()",1000);
13}
14
15function verifica()
16{
17if (!pornit)
18{
19pornit=1;
20numara();
21}
22}
23
24function stop()
25{
26clearTimeout(t);
27pornit=0;
28}
29</script>
30</head>
31<body>
32<form>
33<input type="button" value="Incepe numararea!" onClick="verifica()">
34<input type="text" id="txt">
35<input type="button" value="Opreste numararea!" onClick="stop()">
36</form>
37</body>
38</html>
Exemplu
Acest exemplu ilustreaz crearea unui ceas cu ajutorul evenimentelor programate.
1
2
3
4
5
<html>
<head>
function numara()
{
72
6 var azi=new Date();

7 var h=azi.getHours();
8 var m=azi.getMinutes();
9 var s=azi.getSeconds();
10// adauga un zero in fata numerelor <10
11m=verifica(m);
12s=verifica(s);
13document.getElementById('txt').innerHTML=h+":"+m+":"+s;
14t=setTimeout('numara()',500);
15}
16
17function verifica(i)
18{
19if (i<10)
20{
21i="0" + i;
22}
23return i;
24}
25</script>
26</head>
27<body onload="numara()">
28<div id="txt"></div>
29</body>
30</html>
Depanarea aplicaiilor JavaScript

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 inva 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) {
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 ntimpl. Dac utilizatorul apas butonul OK, ncrcarea paginii va continua
fr probleme:
73
1 <html>
2 <head>
4 var txt="";
5 function mesaj()
6 {
7 try
8 {
9 adddlert("Bine ati venit!");
10}
11catch(err)
12{
13text="In aceasta pagina este o eroare.\n\n";
14text+="Descrierea erorii: " + err.description + "\n\n";
15text+="Pentru a continua apasati OK.\n\n";
16alert(text);
17}
18}
19</script>
20</head>
21<body>
22<h3>Utilizarea instructiunii try..catch pentru sesizarea erorilor</h3> <hr/>
23<input type="button" value="Vedeti mesajul" onclick="mesaj()" />
24</body>
25</html>
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:
1 <html>
2 <head>
4 var txt="";
5 function mesaj()
6 {
7 try
8 {
9 adddlert("Bine ati venit!");
10}
11catch(err)
12{
13text="In aceasta pagina este o eroare.\n\n";
14text+="Apasati OK daca doriti sa continuati vizualizarea paginii,\n";
15text+="sau Cancel pentru a va intoarce la pagina principala.\n\n";
16if(!confirm(text))
17{
18document.location.href="http://cich.md";
19}
20}
21}
22</script>
23</head>
24<body>
25<h3>Un alt exemplu de utilizare a instructiunii try..catch</h3> <hr/>
26<input type="button" value="Vedeti mesajul" onclick="mesaj()" />
27</body>
28</html>
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)
74
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 decit 0, mai mic
decit 10 sau nu este un numr, blocul throw arunc o eroare. Aceast eroare este prins de blocul
catch care afieaz un mesaj corespunztor:
1 <html>
2 <body>
3 <h3>Utilizarea instructiunii throw pentru tratarea corespunzatoare a erorilor</h3> <hr/>
5 var x=prompt("Introduceti un numar cuprins ntre 0 si 10:","");
6 try
7 {
8 if(x>10)
9 {
10throw "Err1";
11}
12else if(x<0)
13{
14throw "Err2";
15}
16else if(isNaN(x))
17{
18throw "Err3";
19}
20}
21catch(er)
22{
23if(er=="Err1")
24{
25alert("Eroare! Valoarea este prea mare");
26}
27if(er=="Err2")
28{
29alert("Eroare! Valoarea este prea mic");
30}
31if(er=="Err3")
32{
33alert("Eroare! Valoarea nu este un numar");
34}
35}
36</script>
37</body>
38</html>
Examplu:
Exemplul urmtor ilustreaz utilizarea evenimentului onerror
1 <html>
2 <head>
4 onerror=handleErr;
5 var txt="";
6 function handleErr(msg,url,l)
7 {
8 txt="In aceasta pagina este o eroare.\n\n";
9 txt+="Eroare: " + msg + "\n";
10txt+="URL: " + url + "\n";
11txt+="Linie: " + l + "\n\n";
12txt+="Pentru a continua apasati OK.\n\n";
13alert(txt);
14return true;
15}
16function message()
17{
18adddlert("Bine ai venit!");
19}
20</script>
75
21</head>
22<body>
23<h3>Exemplu de utilizare a evenimentului onerror</h3>
24<hr/>
25<input type="button" value="Afiseaza mesajul" onclick="message()" />
26</body>
27</html>
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 inzestrat cu proprieti cum ar fi: nume, virst, inlime,
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:
1persoana.nume="Popescu";
2persoana.prenume="Andrei";
3persoana.varsta=25;
4persoana.ochi="verzi";
5
6document.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 ii adaug proprieti:
persoana=new Object();
persoana.nume="Popescu";
persoana.prenume="Andrei";
76
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);
Proprieti i metode globale
77
Aceste proprieti i metode pot fi folosite pentru orice variabile, din acest motiv se numesc
globale.
Proprietile
Proprietate
Infinity
NaN
undefined
Descriere
O valoare numeric care reprezint infinitiv pozitiv/negativ
O valoare "Not-a-Number"
Indic o variabil creia nu i-a fost atribuit o valoare
Exemplul 1
Ilustreaz utilizarea proprietii NaN:
1 <html>
2 <body>
4 var luna=13;
5 if (luna < 1 || luna > 12)
6 {
7 luna = luna.NaN;
8 }
9 document.write(luna);
10</script>
11</body>
12</html>
Exemplul 2
Ilustreaz utilizarea proprietii undefined:
1 <html>
2 <body>
4 var t1="";
5 var t2;
6 if (t1==undefined)
7 {
8 document.write("Variabila t1 nu este definita");
9 }
10if (t2==undefined)
11{
12document.write("Variabila t2 nu este definita");
13}
14</script>
15</body>
16</html>
Metodele
Funcie
Descriere
Codeaz caracterele speciale dintr-un ir de caractere astfel incit irul devine portabil
escape()
n reea ctre orice calculator care suport codurile ASCII
Evalueaz un ir de caractere i, dac irul conine o secven de cod JavaScript,
eval()
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
78
String()
Convertete valoarea unui obiect ntr-un ir
unescape() Decodeaz un ir codat
Exemplul 1
Ilustreaz utilizarea metodei eval():
1<html>
2<body>
4eval("x=10;y=20;document.write(x*y)");
5document.write("<br />" + eval("2+2"));
6document.write("<br />" + eval(x+17));
7</script>
8</body>
9</html>
Exemplul 2
Ilustreaz utilizarea metodei Number():
1 <html>
2 <body>
4 var t1= new Boolean(true);
5 var t2= new Boolean(false);
6 var t3= new Date();
7 var t4= new String("921");
8 var t5= new String("193 469");
9
10document.write(Number(t1)+ "<br
15</script>
16</body>
17</html>
/>");
/>");
/>");
/>");
/>");
Exemplul 3
Ilustreaz utilizarea metodei parseFloat() pentru a extrage valoarea dintr-un ir ca numr
zecimal:
1 <html>
2 <body>
4 document.write(parseFloat("10") + "<br />");
5 document.write(parseFloat("10.00") + "<br />");
6 document.write(parseFloat("10.33") + "<br />");
7 document.write(parseFloat("34 45 66") + "<br />");
8 document.write(parseFloat("
60
") + "<br />");
9 document.write(parseFloat("40 de ani") + "<br />");
10document.write(parseFloat("Ea are 40 de ani") + "<br />");
11</script>
12</body>
13</html>
Obs. Metoda verific dac primul caracter din ir poate apare n scrierea unei valori zecimale i,
n caz afirmativ continu construirea acestui numr pin la intilnirea primului caracter care nu
poate apare n scrierea unui numr.
Exemplul 4
Ilustreaz utilizarea metodei parseInt() pentru a extrage valoarea dintr-un ir ca numr ntreg:
79
1 <html>
2 <body>
4 document.write(parseInt("10") + "<br />") ;
5 document.write(parseInt("10.33") + "<br />");
6 document.write(parseInt("34 45 66") + "<br />");
7 document.write(parseInt(" 60 ") + "<br />");
8 document.write(parseInt("40 de ani") + "<br />");
9 document.write(parseInt("Ea are 40 de ani") + "<br />");
11document.write(parseInt("10",10)+ "<br />");
12document.write(parseInt("010")+ "<br />");
14document.write(parseInt("0x10")+ "<br />");
16</script>
17</body>
18</html>
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 ntilnirea primului caracter din ir care nu poate aparea n
scrierea unui numr ntreg.
80

Limbajul JavaScript2

Încărcat de

Informații document

Drepturi de autor

Formate disponibile

Partajați acest document

Partajați sau inserați document

Opțiuni de partajare

Vi se pare util acest document?

Este necorespunzător acest conținut?

Drepturi de autor:

Formate disponibile

Limbajul JavaScript2

Încărcat de

Drepturi de autor:

Formate disponibile

Limbajul JavaScript

Afiarea datelor n JavaScript

Depanarea aplicaiilor JavaScript

Crearea obiectelor proprii

Proprieti i metode globale

JavaScript - Notiuni de baza

1. JavaScript poate fi intrudus n HTML - De obicei codul JavaScript este gazduit n

Metoda 1 plasarea script-ului n antet-ul paginii (ntre <head> i </head>);

Scripturi n antetul paginii

Scripturi n corpul paginii

Scripturi n fiier extern

Coninutul fiierului functie.js

Crearea unui gestionar de evenimente

Nu este obligatoriu ca toate script-urile JavaScript s se gseasc n interiorul tag-urilor <script>

Browsere care nu recunosc JavaScript

Afiarea n fereastra de alertare, folosind window.alert ().

Utilizarea metodei document.write () dup ce este complet ncrcat un document HTML,

Folosirea comentariilor pentru a preveni execuia

n exemplul urmtor, comentariul este plasat la sfritul liniei de cod:

Tipurile de date JavaScript

Exista 3 tipuri de obiecte:

Un numr ntreg hexazecimal (hexadecimal, n limba englez) ncepe n mod obligatoriu

Numele este case-sensitive (y i Y sunt dou variabile diferite)

Declararea variabilelor JavaScript

Putem crea variabile cu sintaxa:

Exemplu Echivalent cu Rezultat

Operatorul + utilizat pentru iruri de caractere

Adunarea irurilor i a numerelor

Operatori de incrementare / decrementare

operatori de incrementare crete valoarea variabilei cu o unitate

Acestea la rindul lor sunt de dou feluri:

prefixat operatorul se scrie inaintea operandului. Operatia de incrementare (sau

Operator Tip de operator Descriere

Este egal exact (valoare i tip)

x==="5" este fals

string pentru iruri de caractere

Inserarea caracterelor speciale

n JavaScript, un ir de caractere ncepe i termin cu apostrof sau cu ghilimele. Asta inseamn

Fiecare instruciune se ncheie cu punct i virgul (;).

Instruciunea if...else if...else

for repet o secven de cod de un numr precizat de ori

8 document.write("<h" + i + ">Aceste este un titlu " + i);

Obs: Operatorul <= poate fi nlocuit cu orice alt operator de comparare.

2. De elaborat un script ce va afia tabla nmulirii;

Durata de via a variabilelor JavaScript

Evenimentele JavaScript. Conceptul de eveniment i gestionar de evenimente

onclick - are loc cand se da click pe un element

value="onclick" onclick="alert('eveniment la click')" />

Evenimente provocate de tastatur

onkeydown - are loc cand se apasa o tasta

onabort - are loc n momentul n care se se ntrerupe ncarcarea ferestrei

Evenimente provocate de formular

Codul de mai sus va afia valoarea: 15

Codul de mai sus va afia irul: BINE ATI VENIT!

var txt = string;

Metodele obiectului String

Afieaz irul ca tiat

var txt1 = "Buna ";

Concatenarea a trei iruri:

Valorile afiate sunt: 0 -1 5.

document.write("Valoarea returnata: "+str.match("World") + "<br />");

n exemplul urmtor, data este setat la apte zile n viitor:

Compararea a dou date calendaristice

Metodele obiectului Date