JavaScript Curs PDF

JavaScript
1. Introducere
2. Sintaxa JavaScript
3. Notiuni de baza
4. Operatori
5. Instructiuni Conditionale
6. Instructiuni ciclice
7. Instructiuni Complementare
8. Alert, Prompt, Confirm
9. Functii JS 1
10. Functii JS 2
11. Obiecte JavaScript 1
12. Obiecte JavaScript 2
13. Ierarhia JavaScript
14. DOM
15. Obiecte nivel 1
16. Obiecte nivel 2
17. Obiecte nivel 3
18. Obiecte nivel 3-4
19. Evenimente JS
20. Obiectul image 1
21. Obiectul image 2

22. Obiectul form 1
23. Obiectul form 2
24. Obiectul window 1
25. Obiectul window 2
26. Ferestre Frame
27. Cookie 1
28. Cookie 2
29. getElementByld
30. getElementByTagName
31. createElement-insertBefore
32. JavaScript cu PhP

Introducere
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(Common
Graphics Interface) pentru prelucrarea informatiilor din formulare si care adauga
dinamism in paginile web.
Dupa lansarea limbajului Java, Netscape a inceput sa lucreze cu firma Sun,
cu scopul de a crea un limbaj de scripting cu o sintaxa si semantica asemanatoare cu
a limbajului Java, iar din motive de marketing numele noului limbaj de script a fost
schimbat in "JavaScript".
Java Script 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,
intreaga prelucrare este facuta la server, chiar si pentru lucruri simple, asa cum este,
spre exemplu, validarea datelor. Astfel, Java Script 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, decât 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 de 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 dintre 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, in decembrie 1995, JavaScript si-a atras sprijinul
principalilor distribuitori din domeniu, cum sunt Apple, Borland, Informix, Oracle,
Sybase, HP sau IBM. S-a dezvoltat in 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 in loc sa o vanda, 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, atat 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.
In general se considera ca exista zece aspecte fundamentale ale limbajului
JavaScript pe care orice programator in acest limbaj ar trebui sa le cunoasca:
1. JavaScript poate fi intrudus in HTML - De obicei codul JavaScript
este gazduit in documentele HTML si executat in 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 in cadrul de lucru al aplicatiilor
pentru web.
2. JavaScript este dependent de mediu – JavaScript este un limbaj de
scripting; software-ul care ruleaza de fapt programul este browser-ul web
(Firefox, Opera, Netscape Navigator, Internet Explorer, Safari, etc.). Este
important sa luam in considerare aceasta dependenta de browser atunci
cand utilizam aplicatii JavaScript.
3. JavaScript este un limbaj in 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 când 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 - in aceasta privinta limbajul difera
radical de C++ sau Java. In 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, precum Java, C++, C#, VFP, Basic. Mai
corect, acest limbaj de programare 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 intr-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.
Acest curs prezinta elementele de baza ale limbajului de programare

JavaScript si modul de lucru al acestuia, fiind un curs de initiere care se adreseaza
in special incepatorilor in programarea web, care vor sa invete acest limbaj de
scripting.
Lectia 1
Sintaxa JavaScript
1. Adaugarea JavaScript intr-o pagina HTML
Pentru a insera cod JavaScript într-un document HTML deja existent, este
necesară introducerea în fișier a etichetelor pereche : <script> respectiv </script>.
Eticheta de început necesita unul din atributele: "type" sau "language" (cu
precizarea ca acesta din urma este depreciat in standardul XHTML) care va
specifica browser-ului limbajul folosit pentru interpretarea codului inclus.
In interiorul etichetelor <script> . . . </script> vom scrie codul dorit.
Pentru scrierea si executarea programelor JavaScript avem nevoie de un
editor de texte (cel mai simplu pentru Windows ar fi Notepad sau emacs pentru
Unix) si un browser (ex. Mozilla Firefox, Internet Explorer, ...).
- Atributul "language" (folosit doar in paginile web standard HTML, nu este
folosit in XHTML,), va avea urmatoarea sintaxa:
<script language="JavaScript">
aceasta specifica browser-ului ce limbaj este folosit
- Atributul "type" – inlocuitorul/alternativa lui "language" cu urmatoarea
sintaxa:
<script type="text/javascript">
atributul spunând browser-ului ca scriptul este scris in format plaintext.
Avem, de asemenea, posibilitatea sa introducem instructiuni JavaScript intr-
un fisier extern, cu extensia ".js":
<script src="cod.js" type="text/javascript"> ... </script>
(pentru editarea unui astfel de fisier este nevoie de un editor simplu de texte).
Avantajul folosirii unui astfel de fișier este faptul ca putem folosi acelasi
cod in mai multe pagini HTML iar in cazul necesitatii unei modificari in codul
JavaScript, modificam doar datele dintr-un singur fisier (cel cu extensia ".js").
Dezavantajul acestei metode este faptul ca intr-un fisier extern ".js" nu
putem folosi etichete HTML, ci numi instructiuni JavaScript.
In cazul in care codul JavaScript se afla intr-un fisier extern, eticheta
<script> din pagina HTML va trebui sa contina atributul "src" a carui valoare
determina locatia fisierului in care se afla codul JavaScript.
In fisierul extern cu extensia ".js" nu trebuie sa scriem eticheta "<script>",
scriem direct instructiunile scriptului.
Iata un exemplu scris intr-o sursa HTML:
<html>
<head>
<title>Cod JavaScript</title>
</head>
<body>
document.write("Textul care va fi afisat pe ecran");
</script>
</body>
</html>
Iata un exemplu de script JavaScript scris in interiorul unei pagini web (XHTML):
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="ro">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
</head>
<body>
document.write("Textul care va fi afisat pe ecran");
</script>
</body>
</html>
Comanda document.write este folosita pentru a tipari ceva in pagina.
Rezultatul acestui script, afisat in pagina web (XHTML si HTML) va fi urmatorul:

Textul care va fi afisat pe ecran
Daca dorim sa incarcam scriptul dintr-un fisier extern (spre exemplu în

fișierul "cod.js"), codul nostru in documentul HTML va arata astfel:

<html xmlns="http://www.w3.org/1999/xhtml" lang="ro">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
</head>
<body>
<script src="cod.js" type="text/javascript"> </script>
</body>
</html>
Pentru a afișa același text pe ecran, ca și în exemplele anterioare, fisierul
extern "cod.js" , va contine urmatoarea instructiune :
document.write("Textul care va fi afisat pe ecran")
Rezultatul afisat in pagina web va fi acelasi ca si in exemplele anterioare.

Recomandarea HTML 4.01 specifica introducerea unei etichete <meta> in
portiunea <head> a documentelor care folosesc scripturi JavaScript. Aceasta
eticheta specifica limbajul prestabilit folosit in toate scripturile din pagina.
Eticheta ar trebui sa arate astfel :
<meta http-equiv="Content-Script-Type"
content="text/javascript">
Atenție: aceasta eticheta nu este cu titlu obligatoriu, scripturile functionand
foarte bine si fara ea.
2. Ascunderea codului in browserele vechi
Unele browsere nu recunosc scripturile si le afiseaza în pagina web ca text.

Pentru a evita acest lucru putem folosi pentru comentarii, eticheta HTML:

delimitand cu aceasta instrictiunile JavaScript și totodată evitând aparitia
scriptului in pagina web. Acest lucru se face astfel:

</script>
3. Conventii de sintaxa
In orice limbaj, scrierea are conventii si reguli de sintaxa. Chiar si scrierea în

limba româna are regulile ei de sintaxa: orice propozitie incepe cu litera mare, se
termina cu un semn de punctuatie, etc.! La fel si limbajele de programare au regulile
si sintaxa lor.
In continuare vor fi prezentate regulile de sintaxa ala limbajului Java Script.
1. Limbaj Case-sensitive – adică face diferenta intre literele mari si cele
mici, astfel cuvinte precum "exemple, Exemple" vor fi tratate diferit.
2. Punct si virgula (;) - Toate declaratiile trebuie sa se termine cu secvența
"punct si virgula" (;) (Exemplu: var1 = 3; var2 = 8;).
3. Spatiile libere - JavaScript ignora spatiile libere, tab-urile si liniile
libere care apar în instructiuni, acestea sunt utile pentru a face codul mai
bine structurat si usor de citit. Recunoaste doar spatiile care apar în
string-uri (sirurile de caractere). (Exemplu: var1 = 2 ; este la fel cu
var1=2;).
4. Ghilimelele - Ghilimelele simple ('...') si respectiv duble ("...") sunt
folosite pentru a delimita sirurile de caractere (string).
(Exemplu: "Invat JavaScript" sau 'Invat JavaScript').
5. Carcactere speciale - cand scriem scripturi, apare necesitatea de a folosi
in cod sau in datele de iesire, un caracter special sau o apasare de tasta,
cum ar fi tasta TAB, sau o linie noua. Pentru aceasta folosim caracterul
backslash "\" in fata unuia din codurile Escape, astfel:
\b - backspace
\f - indica o pagina noua
\n - indica o linie noua
\r - imdica un retur de car
\t - indica o apasare a tastei TAB
\\ - indica un caracter backslash
\' - indica un apostrof (ghilimele simple)
\" - indica ghilimele duble
Spre exemplu, daca dorim sa afisam un text, folosind document.write(), iar
acel text trebuie sa contina ghilimele si caracterul backslash "\", si anume
textul (Curs "JavaScript" \ MarPlo.net), pentru a nu "deruta" scriptul in
interpretarea codului, deoarece ghilimelele si backslash fac parte din sintaxa,
adaugam \ in fata acestor caractere din interiorul sirului. Comanda de afisare
a sirului va fi astfel: document.write("Curs \"JavaScript\" \\ MarPlo.net");
6. Comentarii - comentariile in interiorul codului sunt necesare cand dorim
sa specificam rolul anumitor functii si variabile, pentru o mai usoara
intelegere ulterioara a scriptului. Pentru a adauga un comentariu, pe o
singura linie, in interiorul codului, incepem scrierea acestuia cu
succesiunea // (Exemplu: // Comentariu). Daca dorim sa scriem
comentarii pe mai multe randuri, se foloseste /* la inceputul
comentariului si */ la sfarsitul acestuia (Exemplu: /* ... comentariu pe
mai multe randuri ... */)
7. Numele variabileler si functiilor - numele dat variabilelor si functiilor
trebuie sa respecte urmatoarele reguli:
• primul caracter poate fi doar una din următoarele: o litera sau un
caracter de subliniere (_) sau semnul $.
cu specificația că:
• numele nu trebuie sa contina spatii libere,
• nu se folosesc cuvinte rezervate ale limbajului JavaScript
(ex: "array", "status", "alert"), deoarece interpretorul programului
nu va face diferenta intre aceste nume si comenzile JavaScript cu
aceleasi nume.
Lectia 2
Notiuni de baza
In aceasta lectie vor fi prezentate notiunile de baza ale programarii,

necesare pentru a scrie un script. Aceste notiuni sunt similare cu cele din PHP si alte
limbaje de programare.
1. Folosirea variabilelor
Intr-un script (program) se folosesc atat date constante cat si date variabile
care isi schimba valorile in timpul executei programului. Aceste date se numesc
variabile.
Modul cel mai simplu de a folosi si a face referire la o astfel de data
variabila este de a o denumi. Numele variabilei permite accesul la valoarea ei
precum si schimbarea valorii daca este necesar.
Se poate crea o variabila, atribuindu-i o valoare, prin doua metode:
variabila = numele unei locatii din memoria calculatorului,
folosita pentru a memora date.
Cu declaratia var
var nume = valoare
Fara declaratia var
nume = valoare
Unde 'nume' este numele variabilei iar 'valoare' este valoarea pe care i-o
atribuim.
Tipuri de variabile - Spre deosebire de alte limbaje (cum sunt Pascal sau C),
JavaScript nu are tipuri fixe de date, adica permite schimbarea tipului unei variabile
in cadrul scriptului, acesta poate recunoaste singur cand datele sunt de tip "sir",
numerice sau alt tip.
Exemplu:
var x =”xyz”;
X=8;
Observati ca valorile de tip 'sir' (formate din litere) se scriu intre ghilimele, iar cele
'numerice' pot fi scrise si fara ghilimele.
Durata de viata a unei variabile

Variabilele locale, sunt variabilele scrise in cadrul unei functii, valoarea
acestora fiind recunoscuta numai in cadrul acelei functii, la iesirea din functie
variabilele sunt distruse. În acest context, o alta functie poate declara si folosi o
variabila cu acelasi nume, JS (Java Script) tratând cele doua variabile ca fiind
diferite (functiile si lucrul cu acesta vor fi explicate in lectiile urmatoare).
Variabilele globale, sunt variabilele care se declara in afara functiilor, de la
incarcarea paginii web pana la inchidere, in orice script JS.
2. Operatori
Pentru a lucra cu datele introduse intr-un script si a manipula valorile

variabilelor se folosesc operatori.
Operatorii sunt simboluri si identificatori care determina felul in care sunt
modificate datele si modul in care este evaluata o combinatie de expresii si
variabile.
JavaScript recunoaste :
- operatori binari - care necesita existenta a doi operanzi in expresie.
- operatori unari - care au nevoie doar de un operand.
Operatori sunt de mai multe tipuri:
- Operatori aritmetici
- Operatori de atribuire
- Operatori de comparare
- Operatori logici (numiti si booleeni)
- Operatori pentru siruri
- Operatori typeof
- Operator conditional ?
- Operatori pentru functii
- Operatori pentru structuri de date
Lectia 3
Operatorii
Cu ajutorul operatorilor manipulam, combinam si modificam datele dintr-

un prrogram sau script. Acestia sunt de mai multe feluri, astfel:
1. Operatori aritmetici
Putem spune ca operatorii aritmetici sunt principalii operatori folositi cu

numere, acestia efectueaza operatiile aritmetice cunoscute:
adunare (+), scadere (-), inmultire (*), impartirere (/).
Pe langa acesti patru operatori, in programare sunt folositi inca trei
operatori aritmetici:
• Modulul (%) - acesta determina restul impartirii a doua numere
Eexemplu:
8%3 cu rezultatul 2
10%2 cu rezultatul 0
• Incrementare (++) - Acest operator creste valoarea cu o unitate, este
des folosit in programare, in lucrul cu variabile.
Spre exemplu, daca avem variabila 'i', putem folosi operatorul de
incrementare astfel: i++ similar cu i = i+1.
Exemplu:
x = 7;
x++;
la afisare rezultatul va fi x = 8
• Decrementare (--) - Acest operator scade valoarea cu o unitate.

De exemplu, daca avem variabila 'i', putem folosi operatorul de
decrementare astfel: i-- care este similar cu i = i-1.
Exemplu:
x = 7;
x--;
la afisare rezultatul va fi x = 6
• Cei doi operatori de incrementare (++) respectiv decrementare (--) pot

fi folositi atat ca prefix (in fata variabilei) ++i respectiv --i cat si ca
sufix (dupa numele variabilei) i++ respectiv i--. Valoarea obtinuta este
aceeasi, insa ordinea operatiei si rezultatul atribuirii valorii sunt
diferite, astfel:
o Folosirea operatorului ca prefix determina in primul rand
modificarea valorii si apoi are loc atribuirea acesteia.
o In cazul folosirii operatorului ca sufix, intai este atribuita valoarea
variabilei si apoi variabila este incrementata (sau decrementata).
2. Operatori de atribuire
In cazul acestui operator JavaScript actioneaza mereu de la dreapta la

stanga; se evalueaza operandul din dreapta iar valoarea se atribuie variabilei din
stanga semnului "=" .
Mai jos puteti vedea un tabel din care puteti intelege modul de lucru si
actiune al operatorilor de atribuire:
Operator Exemple Este acelasi cu
= x=y x=y
+= x += y x = x+y
-= x -= y x = x-y
*= x *= y x = x*y
/= x /= y x = x/y
%= x %= y x = x%y
3. Operatori de comparare
Expresiile care folosesc acesti operatori pun o intrebare despre doua valori
pe care le compara iar raspunsul nu poate fi decât TRUE sau FALSE.
Un operator des folosit, este operatorul de identitate sau de comparatie,
reprezentat prin doua semne egal "==". Operatorul "==" este diferit de operatorul
"=". Operatorul '==' compara doua valori determinand daca acestea sunt identice,
adica daca acestea sunt egale atat ca valoare cat si ca tip.
Operatori de comparatie sunt prezentati in tabelul urmator:
Operator Semnificatie Exemple

== Verifica st = dr 3 == 8 returneaza FALSE
!= Diferit 3 != 8 returneaza TRUE
> Mai mare 3>8 returneaza FALSE
< Mai mic 3<8 returneaza TRUE
>= Mai mare sau egal 3 >= 8 returneaza FALSE
<= Mai mic sau egal 3 <= 8 returneaza TRUE
4. Operatori logici (booleeni)
Similar cu operatori de comparatie, operatorii logici compara doua expresii

si returneaza TRUE sau FALSE.
Acesti operatori sunt:
&& - si (and) - Compara doua expresii si returneaza TRUE daca amandoua
sunt adevarate, in caz contrar returneaza FALSE.
Exemplu:
x=5
y=8
x<7 && y>3
(returneaza TRUE)
|| - sau (or) - Compara doua expresii si returneaza TRUE daca cel putin una
din ele este adevarata, in caz contrar returneaza FALSE.
Exemplu:
x=5
y=8
x>7 || y<3
(returneaza FALSE)
! - not - este operator unar, foloseste o singura expresie si returneaza TRUE

daca expresia este falsa, daca expresia este adevarata returneaza FALSE.
Exemplu:
x=5
y=8
!(x==y)
returneaza TRUE ('x' nu este egal cu'y')
5. Operator pentru string (sir)
Un string este in general un sir de caractere, intre ghilimele.

Pentru a alatura (concatena) doua variabile string impreuna se foloseste
operatorul de concatenare a sirurilor +
Exemplu:
t1 = "Astazi este o zi"
t2 = "frumoasa"
t3 = t1+t2
(Variabila 't3' va contine sirul "Astazi este o zifrumoasa")
Observati ca nu este saptiu intre 'zi' si 'frumoasa'. Pentru a adauga spatiu intre
siruri, sunt doua modalitati:
1 - Adaugati spatiu intre variabilele string
Exemplu:
t2 = "frumoasa"
t3 = t1+" "+t2
(Variabila 't3' va contine sirul "Astazi este o zi frumoasa")
2 - Adaugati spatiu in una din variabilele string

Exemplu:
t2 = " frumoasa"
t3 = t1+t2
(Variabila 't3' va contine sirul "Astazi este o zi frumoasa")
6. Operatorul typeof
Acest operator returneaza tipul de date continut la momentul respectiv de

operandul sau. Este util in special pentru a determina daca o variabila a fost definita
cu un anumit tip de date.
Studiind urmatorul tabel putem intelege modul de operare al acestor operatori:
Operator Descriere
typeof parseFloat returneaza sirul 'function'
typeof 33 returneaza sirul 'number'
typeof "un anume text" returneaza sirul 'string'
typeof true returneaza sirul 'boolean'
typeof window returneaza sirul 'object'
7. Operatori pentru functii
Functiile vor fi explicate in una din lectiile urmatoare, totusi este util sa fiti
familiarizati cu doi operatori:
1. Primul se numeste operator de apelare si este reprezentat printr-o pereche
de paranteze rotunde () care urmeaza intodeauna dupa numele functiei,
astfel o functie va fi declarata astfel:
function nume_functie() {
// Corpul functiei
}
Apoi operatorul de apelare este folosit din nou cand functia este apelata in
interiorul scriptului:
nume_functie()
Parantezele aratand ca este folosita o functie.
Al doilea operator pentru functii este virgula "," care se foloseste pentru a
separa mai multe argumente, din interiorul parantezei, pe care le primeste o functie.
Argumentele sunt scrise intodeauna in interiorul parantezelor rotunde si sunt
separate prin virgula.
Astfel, o functie cu doua argumente arata astfel:
function nume_functie(arg1, arg2) {
// Corpul functiei
}
8. Operatori pentru structuri de date (obiecte)
Acesti operatori sunt necesari atunci cand lucram cu structuri de date, sau obiecte.
In JavaScript obiectele sunt folosite la gruparea informatiilor pentru a servi
unui scop specific.
1. Un operator care ar trebui cunoscut bine este punctul "." , numit operator
pentru membrul unei structuri. Acesta ne permite sa ne referim la un
membru ( variabila ,functie sau obiect ) care apartine obiectului specificat.
Sintaxa este urmatoarea:
numeObiect.nume_Variabila
numeObiect.nume_Functie()
numeObiect.alt_Obiect
Aceasta modalitate de referire la o informatie, numita notatie cu punct,
returneaza valoarea variabilei, functiei sau obiectului aflat cel mai in
dreapta.
2. Operatorul folosit pentru un element din matrice, numit si operator indice
al tabloului, se foloseste pentru a accesa o data specifica, o cheie, dintr-un
tablou de date. Acesta este simbolizat printr-o pereche de paranteze drepte
[], si permite referirea la orice membru al unui tablou.
Tablourile sunt obiecte JavaScript si vor fi detaliate in lectiile urmatoare.
Sintaxa de folosire a operatorului pentru tablou este:
nume_tablou[cheie]
9. Operatorul conditional "?"
JavaScript contine si un operator conditional ? care atribuie o valoare unei

variabile pe baza unei conditii. Sintaxa de folosire a acestui operator este
urmatoarea:
variabila = (conditie)?val1:val2
Modul de operare este urmatorul - se evalueaza conditia, daca este adevarata
atunci variabila ia valoarea 'val1', altfel ia valoarea 'val2'.
Iata un exemplu:
vizitator = "barbat"
mesaj = (vizitator=="barbat")?"Stimate domn":"Stimata doamna"
document.write(mesaj)
</script>
Daca variabila "vizitator" este egala cu 'barbat', variabila "mesaj" primeste

valoarea 'Stimate domn", altfel primeste valoarea "Stimata doamna". Iar
instructiunea de afisare "document.write()" va afisa valoarea lui "mesaj".
10. Precedenta operatorilor
Cand se folosesc in expresii mai multi operatori, JavaScript tine cont de

precedenta predefinita a fiecarui operator. Precum in aritmetica, intr-o ecuatie cu
adunare si inmultire ( 2+3*4 ), daca nu sunt paranteze, se executa intai inmultirea,
aceasta avand precedenta superioara fata de adunare. La fel e si cu operatorii in
programare.
Daca apar mai multi operatori cu aceeasi precedenta, JavaScript ii va evalua de
la stanga spre dreapta. In tabelul urmator sunt prezentati operatorii in ordinea
precedentei lor, unde operatorii din partea de sus a tabelului au precedenta maxima:
Operator Nume operator

() [] . de apelare, pt. structuri de date
! ++ -- de negare, incrementare
* / % de inmultire, impartire
+ - de adunare, scadere
< <= > >= de comparatie
== != de egalitate
&& SI logic
|| SAU logic
?: conditionnal
= += -= *= /= %= de atribuire
, virgula
Lectia 4
Instructiuni conditionale
Partea cea mai interesanta, dar si dificila, in scrierea unui script este
proiectarea acestuia astfel incat sa ia decizii in timp ce este executat.
Cu ajutorul instructiunilor conditionale putem face programele sa testeze
diferite conditii dupa care sa decida modul de executie a datelor.
In Java Script sunt urmatoarele instructiuni conditionale:
if - executa comenzile dorite cand o conditie este adevarata.

if ... else - executa anumite comenzi cand o conditie este
adevarata si alte comenzi cand aceasta este falsa.
switch - selecteaza care comanda va fi executata.
1. Instructiunea "if"
Se poate spune ca instructiunea "if" este una din cele mai des folosite.
Forma generala a acestei instructiuni este urmatoarea:
if (conditie) {
codul care va fi executat daca este adevarata conditia
}
Unde 'conditie' poate fi orice expresie logica.
Daca rezultatul conditiei este TRUE se executa codul dintre acolade, in caz
contrar, se trece peste acest cod iar conditia returneaza FALSE,.
Iata un exemplu practic. Urmatorul script afiseaza "Buna ziua" daca ora este
mai mare decat 11. Se foloseste obiectul Date care determina data curenta (va fi
explicat mai amanuntit in alta lectie).

</script>
Am definit variabila 'd' a carei valoare este data curenta, apoi variabila
'time' preia numai ora din variabila 'd'. Conditia din instructiunea "if" verifica daca
ora este mai mare decat 11 si in caz adevarat executa comanda dintre acolade, care
afiseaza mesajul.
Daca ora este mai mica decat 11 scriptul nu executa instructiunea dintre
acolade.
2. Instructiunea " if ... else "

In exemplul anterior am vazut ca este afisat "Buna ziua!" daca ora > 11 iar
in caz contrar nu se intampla nimic.
Folosind instructiunea "if ... else" putem stabili comenzi care sa fie
executate cand conditia instructiunii "if" este FALSE.
Forma generala a instructiuni "if ... else" este urmatoarea:
if (conditie) {
codul care va fi executat daca este adevarata conditia
}
else {
codul care va fi executat daca conditia este falsa
}
Unde 'conditie' poate fi orice expresie logica.

Daca rezultatul conditiei este TRUE se executa codul dintre primele
acoladele, care apartin de "if", in caz contrar, cand conditia returneaza FALSE, sunt
executate comenzile din a doua grupa de acolade (dupa else).
Folosind exemplul de mai sus, dar de asta data folosindu-se instructiunea "if
... else". Scriptul afiseaza "Buna ziua!" daca ora este mai mare decat 11, in caz
contrar afiseaza 'Este ora ...'.

</script>
Am definit variabila 'd' a carei valoare este data curenta, apoi variabila
'time' preia ora din variabila 'd'.
Conditia din instructiunea "if" verifica daca ora este mai mare decat 11.
Daca ora este mai mare decat 11 executa comanda dintre primele acolade.
Daca ora este mai mica decat 11 scriptul va executa comanda din grupul de
acolade determinat de "else". (Observati folosirea operatorului de concatenare +).
3. Instructiunea switch
Aceasta instructiune e folosita pentru a compara o valoare cu altele dintr-o lista.
Sintaxa generala a instructiuni "switch" este urmatoarea:
switch (expresie) {
case valoare1:
se executa daca expresie = valoare1
break
case valoare2:
break
case valoare3:
break
default :
se executa daca expresie e diferit de valoare1, valoare2 sau valoare3
}
Prima data este evaluata expresia scrisa intre paranteze rotunde, apoi
valoarea expresiei este comparata pe rand cu fiecare valoare determinata de "case".
Daca se gaseste o identitate se executa codul asociat acelui "case". Apoi se iese din
instructiunea "switch".
Cazul în care, parcurgand fiecare "case", nu se gaseste o egalitate, se
executa codul de dupa "default".
Prin folosirea lui "break" se opreste parcurgerea corpului instructiunii atunci
cand s-a gasit o valoare egala cu 'expresie' si se iese din "switch".
Iata un exemplu de script care afiseaza un mesaj in functie de zilele
saptamanii:

</script>
Am definit variabila 'd' a carei valoare este data curenta, apoi variabila 'ziua'
care preia numarul zilei din variabila 'd' (duminica = 0, luni = 1, ...). Se intra in
corpul instructiunii "switch" si se verifica, pe rand, fiecare valoare "case" cu
valoarea variabilei 'ziua', cand se gaseste egalitatea se executa comanda asociata
acelui 'case' si se iese din "switch".
Daca nici una din valorile 'case' nu este egala cu valoarea variabilei 'ziua',
se va executa comanda de dupa 'default', care afiseaza mesajul: "Mai e pana
sambata".
Inca un exemplu cu "case", de data aceasta folosim valori de tip sir (string).

</script>
Va returna Frate.
Dar in general "case" e recomandat sa fie folosit cu valori numerice.
Lectia 5
Instructiuni ciclice (repetitive)
Instructiunile repetitive se folosesc atunci cand se doreste efectuarea unei

comenzi de mai multe ori.
In javaScript putem folosi urmatoarele instructiuni ciclice:
for - la fel ca si in alte limbaje de programare, executa codul de un numar
specificat de ori
for ... in - executa cate un set de instructiuni pentru fiecare proprietate dintr-un
obiect
while - repeta codul atata timp cat o anumita conditie este adevarata
do ... while - intai executa o data codul apoi il repeta atata timp cat o anumita
conditie este adevarata
1. Instructiunea for
Aceasta are urmatoarea forma generala:
for (incepere_nr; conditie_nr; ciclu) {
cod care va fi executat
}
unde:
"incepere_nr" e folosit la 'initializare' pentru a da o valoarea initiala
numarului de repetari, de multe ori prin aceasta se declara o variabila care poate fi
folosita ca un contor al ciclului.
"conditie_nr" verifica daca numarul de cicluri se incadreaza intr-o anumita
valoare si daca rezultatul este TRUE se executa inca o data codul dintre acolade.
"ciclu" incrementeaza sau decrementeaza valoarea la care a ajuns contoarul
ciclului, apoi aceasta valoare este verificata din nou de "conditie_nr" pana cand
rezultatul este FALSE.
Aceste trei expresii dintre parantezele rotunde sunt optionale, dar daca este
omisa una dintre ele, caracterul punct si virgula ";" trebuie sa ramana pentru ca
fiecare expresie sa ramana la locul ei.
In interiorul instructiunii for (ca si la instructiunea "if"), intre acolade, pot fi
introduse si alte instructiuni "for", sau alte instructiuni conditionale, acest lucru se
numeste imbricarea instructiunilor.
Iata un exemplu simplu de utilizare a instructiunii "for":

</script>
Se atribue lui 'x' valoarea 1, se verifica conditia (x<5) care în acest caz este
adevarata si se executa corpul instructiunii (dintre acolade, care afiseaza "x este 1")
apoi se incrementeaza valoarea lui 'x' cu o unitate (x++), acum x are valoarea 2. Se
verifica din nou conditia (x<5) si fiindca este adevarata, se executa iar corpul
instructiunii apoi se incrementeaza valoarea lui 'x', ..., si tot asa pana cand 'x' va
ajunge sa aibe valoarea 5 care la verificarea conditiei returneaza FALSE, moment in
care se termina executia instructiunii "for".
Acest script va afisa urmatorul rezultat:
X este 1
X este 2
X este 3
X este 4
2. Instructiunea for ... in

Pentru utilizarea acestei instructiuni trebuie sa aveti cunostinte despre
obiectele JavaScript asa ca va trebui sa reveniti asupra ei dupa ce le veti invata - in
lectiile urmatoare .
Cu "for ... in" se executa cate un set de instructiuni pentru fiecare
proprietate dintr-un obiect. Acest ciclul se poate executa cu orice obiect JavaScript,
indiferent daca are sau nu proprietati. Pentru fiecare proprietate se executa cate o
iteratie, daca obiectul nu are nici o proprietate nu se desfasoara nici un ciclu.
Instructiunea "for ... in" are urmatoarea forma generala:
for (nume_proprietate in
obiect) {
instructiuni
}
Unde "nume_ proprietate" este un literal de tip sir generat de JavaScript.

Pentru fiecare repetare a executiei instructiunii, lui "nume_proprietate" i-se atribuie
urmatorul nume de proprietate continut in "obiect", pana cand sunt folosite toate.
3. Instructiunea while
Aceasta instructiune repeta un cod atata timp cat conditia este adevarata.
Comanda actioneaza similar cu instructiunea "for", dar nu include functiile
de initializare si incrementare a variabilelor.
Instructiunea "while" are urmatoarea forma generala:
while (conditie) {
codul care va fi executat
}
Folosind exemplul de la instructiunea "for", il scriem in varianta instructiunii

"while":

</script>
Prima data am declarat variabila 'x' dandu-i valoarea 1.

Instructiunea "while" verifica conditia (aici x<5) care este adevarata si
permite executarea corpului functiei dintre acolade care afiseaza "x este 1" si
incrementeaza valoarea lui 'x' cu o unitate. Acum 'x' are valoarea 2, se verifica
conditia, care este adevarata si se executa iar codul dintre acolade, ..., si tot asa pana
cand la verificarea conditiei rezultatul este FALSE, moment in care se termina
rularea instructiunii "while".
X este 1
X este 2
X este 3
X este 4
4. Instructiunea do ... while

Forma generala a acestei instructiuni este:
do {
}
while (conditie)
Asemanatoare in mare parte cu instructiunea "while", instructiunea "do ...
while" intai executa codul din corpul instructiunii, dupa care verifica conditia, apoi
il repeta pana cant conditia returnbeaza FALSE. Astfel corpul functiei este executat
cel putin o data, chiar daca conditia nu este adevarata.
Iata un exemplu din care puteti intelege mai bine aceasta instructiune:

</script>
Aceasta functie afiseaza "x este 8".

Observati ca desi conditia este falsa (x<5), codul dintre acolade este totusi
executat o singura data.
Lectia 6
Instructiuni complementare
Pe langa instructiunile "for" si "while" avem si alte instructiuni

'complementare' care pot fi executate impreuna cu acestea.
• break - intrerupe definitiv executia unui ciclu.
• continue - sare peste instructiunile care au mai ramas din ciclul respectiv.
• label (eticheta) - permite iesirea dintr-un ciclu cu instructiuni ciclice
imbricate, la o locatie specificata a scriptului.
• with - se foloseste pentru a fi evitata specificarea repetata la referirea unui
obiect, cand îi accesam metodele sau proprietatile.
1. Instructiunile break si continue
Cand este folosita o instructiune ciclica, aceasta continua sa se repete pana

cand conditia este FALSE. Aceasta excutie poate fi schimbata cu ajutorul
instructiunilor break si continue, care dau posibilitatea intreruperii ciclului sau
iesirea din acesta inainte de a se ajunge la sfarsit (la ultima acolada).
break - intrerupe definitiv executarea ciclului.
Iata un exemplu din care puteti intelege modul de lucru a lui break:
for (x=1; x<10; x++) {
document.write("<br /> X este "+x);
if (x==3) {
break;
}
}
</script>

X este 1
X este 2
X este 3
Dupa cum se poate observa, nu au fost executate toate ciclurile instructiunii
"for", conform conditiei (pana cand 'x' ar fi avut valoarea 10), executia se intrerupe
cand 'x' are valoarea 3.
continue - intrerupe executia repetarii curente, inainte de a fi executate
celelalte operatii din ciclu, apoi se verifica din nou conditia si se continua
cu executarea ciclului.
Studiati si urmatorul exemplu, in care este folosit continue:
for (x=1; x<8; x++) {
if (x==3 || x==5) {
continue;
}
document.write("<br /> X este "+x);
}
</script>

X este 1
X este 2
X este 4
X este 6
X este 7
Observati ca atunci cand 'x' are valoarea 3 sau 5, prin instructiunea

"continue" se intrerupe executia codului care urmeaza dupa aceasta (aici
"document.write("<br /> X este "+x);") din repetarea curenta, dar se continua cu
verificare conditiei instructiunii "for" si executia ciclului.
2. Instructiunea eticheta (label)

Instructiunea label poate fi folosita impreuna cu "break" sau "continue".
Aceasta este utilizata atunci cand folosim instructiuni ciclice imbricate, permitand
controlul oricarei instructiuni care imbrica alte instructiuni.
Studiind exemplul urmator, puteti intelege mai bine modul de utilizare a
unei instructiuni label:
loopX:
for (x=1; x<=5; x++) {
for (y=3; y<8; y++) {
document.write("X este "+x+" - Y este "+y+" --" );
if (x==4) {
break loopX;
}
}
document.write("<br />")
}
</script>
Am etichetat o serie de instructini ciclice imbricate (aici doua "for") cu
eticheta "loopX", care va fi folosita in a doua instructiune "for" imbricata, impreuna
cu "break".
X este 1 - Y este 3 --X este 1 - Y este 4 --X este 1 - Y este 5 --X este 1 - Y este 6 --X
este 1 - Y este 7 --
X este 4 - Y este 3 --
Observati ca desi "break" este inclus in interiorul celei dea doua instructiune "for",
prin specificarea lui "loopX", care este eticheta intregului ansamblu de instructiuni
imbricate, se va intrerupe executia intregului ansamblu, nu numai instructiunii "for"
unde este adaugat "break". Daca eliminati eticheta "loopX" veti vedea diferenta.
3. Instructiunea with
Aceasta comanda se foloseste pentru a evita referirea in mod repetat la un

obiect, atunci cand ii accesam metodele sau proprietatile de mai multe ori. Orice
metoda sau proprietate dintr-un bloc "with" pe care JavaScript nu o recunoaste va fi
asociata cu obiectul specificat pentru acel bloc.
Sintaxa acestei instructiuni este:
with (obiect) {
instructiuni
}
Unde "obiect" specifica referirea la obiect care trebuie folosita, daca aceasta
nu exista in blocul "instructiuni". Ajuta mult cand se utilizeaza de mai multe ori
functii matematice avansate, prin intermediul obiectului "Math". (Acest obiect va fi
explicat mai tarziu).
In exemplul urmator este prezentat modul de folosire a instructiunii "with":

</script>
Acest script va afisa:
Salut
Acum nu mai este necesara folosirea obiectului ca
prefix al functiei
In mod normal, pt. a afisa un text folosim sintaxa:
document.write("text ..."),
dar aici, prin folosirea lui 'with' impreuna cu obiectul "document", nu mai este
necesara adaugarea acestuia la metoda "write", astfel se scurteaza codul scriptului.
Lectia 7
Ferestre Alert, Prompt si Confirm
Alert, Prompt si Confirm sunt ferestre predefinite de dialog, acestea apartin direct
obiectului "Window" (despre obiecte si ierarhia acestora puteti invata in Lectia
12).
1. Fereastra Alert
Fiind un element simplu si deja cunoscut, voi face o scurta prezentare a

sintaxei acestuia.
Crearea ferestrelor alert se face cu sintaxa:
window.alert("me
saj")
Unde "mesaj" este textul care va apare in fereastra Alert.

Urmatorul exemplu deschide o fereastra cu mesajul "Bine ai venit".

</script>
In browser va apare o fereastra ca in imaginea urmatoare:
2. Fereastra Prompt
Fereastra Prompt se creaza cu sintaxa:

window.prompt("mesaj", "default")
Unde "mesaj" este un text care va apare in fereastra, deasupra unei casute
de text input; iar "default" este textul care va apare in casuta input.
Urmatorul exemplu deschide o fereastra "Prompt".

</script>
Textul pe care utilizatorul il adauga in campul din fereastra prompt poate fi

preluat intr-o variabila si folosit apoi in script.
Iata un exemplu in care atribuim deschiderea ferestrei Prompt unei variabile
(aici "nume"), care va prelua sirul adaugat in caseta de text, apoi valoarea acestei
variabile o introducem in mesajul unei ferestre Alert:

</script>
Dupa ce utilizatorul scrie numele in fereastra Prompt si apasa OK se va

deschide o fereastra Alert care contine in mesaj numele adaugat de utilizator.
Am folosit "\n" pentru a adauga o linie noua, dupa "nume", in textul care
apare in fereastra Alert.
Incercati acest exemplu.
3. Fereastra Confirm
Fereastra de confirmare se creaza cu sintaxa:

window.confirm("intrebare")
In fereastra de confirmare va apare textul "intrebare" si doua butoane "OK"

si "Cancel".
Aceasta fereastra este folosita pentru a fi executata o comanda cand este
apasat butonul "OK" (returneaza TRUE) si alta comanda cand este apasat butonul
"Cancel" (returneaza FALSE).
Urmatorul exemplu deschide o fereastra "Confirm" in care apare intrebarea
"Rezultatul lui 0+0 este 0?". Daca este apasat butonul "OK" apare o fereastra Alert
cu mesajul "Corect", iar daca este apasat butonul "Cancel" apare o fereastra Alert cu
mesajul "Incorect".

</script>

Lectia 8
Functii – 1
Functiile ajuta la divizarea mai multor sarcini pe care trebuie sa le faca un

program.
O functie poate contine mai multe instructiuni si comenzi care ulterior pot fi
utilizate usor si de mai multe ori prin apelarea functiei care le contine.
Daca un program necesita multe linii de cod, folosind functiile putem
imparti codul in parti mai mici pe care le putem utiliza separat acolo unde este
nevoie.
Pot fi doua feluri de functii:
• predefinite - spre exemplu: "parseInt(string)",
parseFloat(string)", ..
• create de programator
- care returneaza o valoare

- care nu returneaza o valoare
1. Crearea (definirea) functiilor
O functie se defineste la inceputul fisierului, in sectiunea head si poate fi

folosita in cadrul paginii prin apelarea ei. Scriptul care contine definirea unei functii
se adauga in sectiunea "head" pentru a fi siguri ca aceasta a fost incarcata inainte de
a fi apelata.
Pentru crearea unei functii se foloseste cuvantul function urmat de numele
pe care vrem sa-l dam functiei dupa care putem adauga intre paranteze rotunde
argumentele (numite si atribute) functiei (separate prin virgula daca sunt mai multe)
si intre acolade corpul functiei care contine codul care trebuie executat.
Forma generala a unei functii este urmatoarea:
function nume_functie(argument1,
argument2, ...) {
}
Argumentele sunt variabile folosite de functie si a caror valoare este

preluata la apelarea functiei.
Atributele nu sun obligatorii, o functie poate fi definita si fara argumente,
dar se pastreaza parantezele rotunde, astfel sintaxa unei functii fara argumente este
urmatoarea:
function
nume_functie() {
codul care va fi
executat
}
2. Instructiunea return
O functie care returneaza un rezultat foloseste pentru aceasta instructiunea

return. Aceasta specifica valoarea pe care o returneaza functia cand este apelata.
Iata un exemplu din care pouteti intelege modul de aplicare a instructiunii
return:
function
suma(x, y) {
z = x+y;
return z
}
"suma" reprezinta numele functiei (puteti da orice nume care respecta

regulile limbajuli si nu sunt identice cu cele rezervate, cum ar fi "function"),
"x, y" reprezinta argumentele functiei a caror valoare este data cand functia
este apelata. Intre acolade avem codul care trebuie executat si care, prin
instructiunea "return" va returna valoarea lui "z" care reprezinta suma lui "x" si "y".
Astfel valoarea returnata de functia "suma()" va fi valoarea pe care o are "z".
3. Apelarea functiilor
Dupa ce am creat o functie, pentru a fi folosita, fuctia trebuie apelata.

O functie care contine argumente se apeleaza in felul urmator:
nume_functie(argument1,
argument, ...)
O functie fara argumente se apeleaza in felul urmator:
nume_funct
ie()
Observati ca la apelul functiei nu se mai folosesc cuvantul "function" si acoladele.
In locul in care am apelat astfel o functie va fi executat corpul acelei functii.
4. Exemple de scripturi cu functii
In continuare studiati exemplele de mai jos, care folosesc functii simple,

astfel veti intelege mai bine modul de lucru si executie a unei functii.
Exemplu 1 - functie fara argument
Urmatorul exemplu prezinta un script care afiseaza un text:
<html>
<head>

</script>
</head>
<body>
exemplu1()
</script>
</body>
</html>
Observati ca functia "exemplu1" a fost definita in sectiunea head a documentului

HTML si apoi a fost apelata in sectiunea "body", unde va afisa textul "Bine ati
venit!".
Exemplu 2 - functie cu un argument
Urmatorul exemplu prezinta un script care la apasarea unui buton deschide o
fereastra "alert" care va afisa un text in functie de argumentul transmis.
Specificatie - Sintaxa generala a functiei "alert" din JavaScript este: alert('Text'),
aceasta deschide o fereastra de atentionare in care este afisat mesajul dintre
paranteze, adica: "Text".
<html>
<head>

</script>
</head>
<body>
<form>
<input type="button" onclick="exemplu2('Buna dimineata!')"
value="dimineata" />
<input type="button" onclick="exemplu2('Buna ziua!')"
value="ziua" />
</form>
</body>
</html>
Acest cod va afisa in pagina HTML doua butoane, dimineata si ziua iar la apasarea
acestora va aparea pe ecran un alert care va zice „Buna dimineata” sau „Buna ziua”.
Studiati cu atentie scriptul si modul in care acesta este apelat.

Textul afisat de "alert" este preluat de la valoarea argumentului functiei "exemplu2"
care l-a randul lui il preia din ceea ce este scris la apelarea functiei.
"onclick" (la click) este o comanda JavaScript care specifica momentul cand trebuie
sa fie executata functia.
Pe fiecare dintre cele doua butoane veti obtine o fereastra 'Alert' cu mesaje diferite
(specificate la fiecare apelare a functiei "exemplu2").
Exemplu 3 - functie cu doua argumente

fereastra "alert" care va afisa suma a doua numere.
fereastra "alert" care va afisa suma a doua numere.
<html>
<head>

</script>
</head>
<body>
<form>
<input type="button" onclick="exemplu3(7, 8)"
value="Suma" />
</form>
</body>
</html>
Acest cod va afisa in pagina HTML un buton pe care va fi afisat cuvantul „Suma”
care la click pe buton va afisa o fereastra in care va fi afisat stringul:
"Suma lui 7 cu 8 este: 15".
- Studiati cu atentie scriptul, modul in care au fost combinate: "alert()", sirul si
valoarea argumentelor "x, y", variabila "z" si modul in care functia "exemplu3" este
apelata.
In interiorul functiei pot fi folosite instructiuni complexe, cum ar fi "for", "if",
"while"; care pot lua decizii diferite in functie de argumentele functiei. Depinde
doar de cunostintele si imaginatia dv.
Lectia 9
Functii – 2
In aceasta lectie vor fi prezentate trei exemple de scripturi care folosesc

functii mai complexe decat cele prezentate in lectia anterioara.
1. Modificarea numarului argumentelor
Atunci cand creem o functie trebuie sa-i definim si numarul de argumente

pe care le accepta, lucru de care se tine cont in momentul apelarii ei.
Sunt situatii in care dorim sa transmitem functiei un numar diferit de
argumente, care poate fi mai mic sau mai mare decat numarul de argumente pe care
le are functia la construirea ei.
Intr-o astfel de situatie putem folosi o valoare prestabilita in interiorul
functiei, pentru cazul in care nu sunt transferate argumente.
In continuare va fi prezentat un script care afiseaza un mesaj de salut atunci
cand utilizatorul ajunge la o pagina web. Programul afiseaza un anumit mesaj daca
recunoaste sau nu numele vizitatorului. Daca "utilizator" nu este "null" variabila a
fost definita. Acest lucru este posibil doar daca o valoare, ca " Media", este
transferata functiei. Daca variabila "utilizator" este egal cu "null" atunci scriptul
evita folosirea variabilei in mesajul de salut.
<html>
<head>

</script>
</head>
<body>

</script>
</body>
</html>
Acest script va afisa in pagina urmatorul rezultat:

Prima apelare a functiei mesaj()
Salut Nicu
A doua apelare a functiei mesaj()
Bine ati venit pe site!

Studiati codul functiei si observati diferenta mesajelor din cele doua apelari.
In unele situatii unei functii ii sunt transferate mai multe argumente decat
au fost specificate la crearea ei. Valorile argumentelor suplimentare nu sunt
pierdute, acestea se stocheaza intr-un tablou (sau "matrice") numit "arguments" ,
care exista implicit pentru orice functie.
Toate argumentele sunt pastrate in acest tablou si pot fi extrase in interiorul
corpului functiei.
Argumentele functiei "mesaj" sunt stocate in tabloul "mesaj.arguments".
Stocarea se face intr-o ordine asigurata de o "cheie" a carei prima valoare este 0.
Pentru a extrage primul element din tabloul "arguments" al functiei "mesaj"
folosim sintaxa:
"arg1 = mesaj.arguments[0]",
pentru al doilea:
"arg2 = mesaj.arguments[1]".
Toate tablourile JavaScript sunt indexate pornind de la 0. Pentru a gasi
numarul total de argumente din tablou putem folosi o instructiune speciala "length"
care returneaza lungimea (nr. de elemente) unui tablou (numit si "matrice").
Urmatorul exemplu atribuie variabilei "nrArg" o valoare care reprezinta
numarul de argumente (elemente) din tabloul "mesaj.arguments":
nrArg =
mesaj.arguments.length
Folosind instructiunile prezentate mai sus (legate de tabloul "arguments"),

putem crea o noua versiune a scriptului din primul exemplu. Aceasta versiune
raspunde mai corect in functie de cunoasterea sau nu a numelui utilizatorilor.
<html>
<head>

</script>
</head>
<body>

</script>
</body>
</html>
Acest exemplu va afisa in pagina web urmatorul rezultat:
Salut "Marius" Bine ai revenit

Bine ai venit pe site "Vrei sa devii membru ?" Te poti
inscrie online
2. Functii recursive
O functie JavaScript poate fi recursiva, adica se poate autoapela.
O metoda buna de a demonstra capacitatea recursiva a functiilor este
rezolvarea unei ecuatii factoriale.
In exemplul urmator avem o functie JavaScript recursiva care afla
factorialul unui numar precizat "n" (in ex. nostru 7):
<html>
<head>

</script>
</head>
<body>
<form>
<input type = "button" value = "Factorial 7"
onclick="alert(factorial(7))" >
</form>
</body>
</html>
In fereastra browser-ului va apare urmatorul rezultat:
Calculeaza factorialul de 7 prin functie recursiva
[Factorial 7] ← buton (dupa click pe buton, apare)
Functia verifica intai daca "n" este mai mare decat 0, in caz afirmativ, "n"
se inmulteste cu rezultatul returnat de auto-apelarea functiei cu argumentul "n-1".
Cand "n" ajunge 0, aparitia cea mai imbricata a functiei se incheie si returneaza
prima valoare. JavaScript incheie fiecare functie imbricata pana ce ajunge la
apelarea initiala a functiei "factorial", apoi intoarce rezultatul final.
Lectia 10
Obiectele Java Script – 1
Pentru inceput trebuie sa stiti ce sunt obiectele in programare si care sunt

conceptele fundamentale ale programarii orientate spre obiecte (OOP).
JavaScript nu este un program orientat pe obiecte (OOP), cum sunt C++, C#
sau Java, dar este bazat pe obiecte.
Spre deosebire de lumea din jurul nostru unde obiectele sunt spre exemplu:
o carte, o masina, un televizor; in JavaScript obiecte pot fi: formularele, fereastrele,
butoanele, imagini, etc, ...
Toate elementele dintr-o pagina sunt vazute de JavaScript ca fiind obiecte.
Spre exemplu, cum in lumea reala obiectele au anumite proprietati si anume
televizoarele au butoane, masinile au roti, etc; asa si in JavaScript obiectele au
proprietati: formularele au butoane, ferestrele au titluri si exemplele pot continua.
Pe langa obiecte si proprietati, in JavaScript avem si termenul "metode".
Metodele reprezinta functiile pe care un obiect poate sa le faca.
Ferestrele se deschid cu metoda "open()", butoanele au metoda "click()".
Parantezele rotunde "()" arata ca se face referire la o metoda, nu la o proprietate.
obiect.prorietate
obiect.metoda()
Punctul (.) se foloseste pentru a specifica detinatorul metodei sau al

proprietatii.
Obiectele din JavaScript le putem cataloga in trei categorii principale:
- Obiecte pe partea de
client
- Obiecte pe partea de
server
- Obiecte esentiale
Astfel, avem mai multe tipuri de obiecte care pot fi folosite. E bine de stiut
pentru incepatori ca, in principal, obiectele pe partea de client si cele esentiale, sunt:
"string", "math" sau cele care vin de la etichetele HTML.
Mai multe astfel de obiecte pot forma o grupa numita "clasa". Astfel,
diferite obiecte incorporate pentru o executie comuna formeaza un "set de clase"
care se mai numesc si "biblioteci de clase", iar pentru limbajul JavaScript aceasta
se numeste "biblioteca de obiecte JavaScript", cu specificatia ca acestea pot fi
refolosite.
JavaScript are urmatoarele obiecte esentiale, predefinite:
1 - String
2 - Math
3 - Date
4 - Array
5 - Global
1. Obiectul string
String (sau sir) se foloseste pentru a prelua text.

Proprietatea acestui obiect este:
length - returneaza numarul de caractere dintr-un
sir (string)
Metodele obiectului string sunt urmatoarele:
anchor() - Returneaza un sir ca si "anchor"

big() - Returneaza un sir cu text mare
blink() - Returneaza un sir care clipeste
bold() - Returneaza un sir cu litere ingrosate
charAt() - Returneaza un caracter de la pozitia care este
charCodeAt specificata
() - Returneaza codul ASCII al unui caracter de la o pozitie
concat() specificata
fixed() - Returneaza doua siruri concatenate
fontcolor() - Returneaza un sir cu caractere tip
fontsize() - Returneaza un sir cu o culoare specificata
fromCharCo - Returneaza un sir cu litere de o anume marime
de() - Returneaza valoare Unicode a unui caracater
indexOf() - Returneaza pozitia primei aparitii a unui subsir intr-un
sir sau daca
italics() subsirul nu e gasit, valoarea -1
lastIndexOf - Returneaza un sir in italic (scris aplecat)
() - Returneaza pozitia primei aparitii a unui subsir in un sir,
sau daca acesta nu e gasit, -1 (Important: se incepe din
dreapta sirului spre stanga)
link() - Returneaza un sir ca hyperlink
match() - Similar cu indexOf si lastIndexOf, dar aceasta metoda
returneaza sirul specificat sir, sau "null", in locul unor
replace() valori numerice
- Inlocuieste intr-un sir unele caractere specificate cu
search() altele noi specificate.
- Returneaza un numar intreg daca sirul contine
slice() caracterele specificate, altfel returneaza -1
small() - Returneaza un sir incepand de la pozitia index
split() specificata
strike()
sub() - Returneaza un sir cu caractere mai mici
substr() - Imparte un sir in mai multe siruri, in functie de
caracterele specificate
- Returneaza un sir taiat cu o linie la mijloc
substring() - Returneaza un sir ca indice
- Returneaza un subsir specificat astfel, exemplu: 12,8
sup() returneaza 8 caractere, incepand de la caracterul al 12-
toFixed(n) lea (se incepe de la 0)
toLowerCas - Returneaza un subsir specificat astfel, exemplu: 8,12
e() returneaza toate caracterele, incepand de la caracterul
toUpperCas al 8-lea, pana la al 12-lea
e()
- Returneaza un sir ca putere (superscript)
- Returneaza sirul numeric rotunjindu-l la o valoare cu 'n'
zecimale
- Converteste un sir in litere mici
- Converteste un sir in litere mari
In continuare este prezentat un exemplu in care se foloseste proprietatea

"length" pentru a afla cate elemente are un sir si metoda "indexOf" prin care
verificam daca un sir dat contine un anumit cuvant specificat. Daca este gasit
cuvantul, se returneaza pozitia primei litere din el, in caz contrar apare mesajul
"Cuvantul nu a fost gasit"
var str="MarPlo.net - Cursuri, Jocuri si Anime"
document.write(str+"<br />")
document.writeln("Acest sir are "+ str.length + " caractere")
var pos=str.indexOf("Jocuri")
if (pos>=0) {
document.write("<br>stringul cautat este \"Jocuri\" si incepe de
la pozitia: ")
document.write(pos + "<br />")
}else{
document.write("Cuvantul nu a fost gasit!")
}
</script>
Primului caracter din sir are pozitia 0, al doilea caracter are pozitia 1, si tot asa ....
Dupa ce este adaugat intr-un document HTML, acest script va afisa in
pagina urmatorul rezultat:
MarPlo.net - Cursuri, Jocuri si Anime
Acest sir are 37 caractere
stringul cautat este "Jocuri" si incepe de la pozitia: 22
Iata un alt exemplu in care este foloseste metoda replace().

Avem un sir din care vom pastra doar numerele, eliminand toate celelalte caractere.

</script>
In acest exemplu avem variabila "sir" ce contine sirul complet si o variabila

"sablon" ce contine o expresie regulata care reprezinta toate caracterele non-
numerice, \D fiind echivalent cu [^0-9] (mai multe detalii despre expresiile regulate
gasiti la: RegExp Javascript).
Expresia sir.replace(sablon, '') inlocuieste cu '' (adica cu nimic) caracterele
din "sir" care nu sunt cifre.
document.write(sir) va afisa sirul care a ramas, adica: 12378
2. Obiectul Array (tablou sau matrice)
Obiectul Array (numit si matrice sau tablou de date) se foloseste pentru a

stoca mai multe valori intr-un singur nume de variabila.
Fiecare valoare stocata devine un element al tabloului, acesta are asociat un
"numar index" (sau cheie). Cu ajutorul acestei chei se poate face referire la oricare
element din tablou.
Cu operatorul new se poate crea o "instanta" (incepere) a obiectului Array,
ca in exemplul urmator:
var nume_colegi = new
Array(4)
Unde intre parantezele rotunde este trecut numarul de elemente ale tabloului, aici 4.
Numarul de elemente, cheile, incep implicit de la 0.
Pentru a da valori elementelor din tablou, se scrie numele tabloului urmat
de o pereche de paranteze patrate, in interiorul carora se adauga cheia specifica
fiecarui element, apoi semnul egal si valoarea dorita. Dupa cum puteti vedea in
urmatorul exemplu:
nume_colegi[0] =
"Cristi"
nume_colegi[1] = "Ion"
nume_colegi[2] =
"Simona"
nume_colegi[3] = "Adi"
Sau puteti scrie si astfel:
var nume_colegi = Array('Cristi', 'Ion',

'Simona', 'Adi');
In cazul acesta cheile se subanteleg si sunt aceleasi ca in prima varianta, incepand

cu 0.
Pentru a face referire la un anumit element din tablou si pentru a extrage
anumite valori din Array, se scrie numele tabloului si intre parantezele patrate cheia
specifica acelui element; ca in exemplul urmator:
coleg = nume_colegi[0]
colega = nume_colegi[2]
Astfel, variabila "coleg" va avea valoarea "Cristi" si variabila "colega"

valoarea "Simona".
Pentru a afla numarul de elemente ale unui Array, se foloseste proprietatea
"length", ca in exemplu urmator:
nr_colegi =
nume_colegi.length
Obiectul Array are urmatoarele metode:
conca - Returneaza un tablou rezultat din concatenarea a doua tablouri

t() - Returneaza un tablou format din toate elementele unui tablou
join() concatenat
revers - Returneaza inversul unui tablou
e() - Returneaza o parte specificata a unui tablou
slice() - Returneaza tabloul ordonat
sort()
Urmatorul exemplu foloseste o instructiune "for" care parcurge un tablou

(aici tabloul "nume_colegi"), extrage valoarea fiecarui element si o afiseaza.

</script>
Am definit variabila "nr_elemente" pentru a afla numarul de elemente din

matrice, pentru a-l folosi cu instructiunea "for". Este utila aceasta metoda deoarece
de multe ori putem lucra cu matrici ale caror nr. de elemente nu-l stim exact. - In
pagina HTML va fi afisat urmatorul rezultat:
Afiseaza numele fiecarui
coleg:
Cristi
Ion
Simona
Adi
Iata un alt exemplu din care puteti intelege cum se aplica metoda "sort()" si
efectul acesteia. Folosim acelasi exemplu de mai sus.
"sort()" sorteaza elementele din Array in ordine alfabetica (sau crescatoare
in cazul valorilor numerice).

</script>
In pagina HTML va fi afisat urmatorul rezultat:
Afiseaza numele in ordine

alfabetica:
Adi
Cristi
Ion
Simona
Incercati sa creati mici exemple in care sa lucrati si cu alte tabele (create

de dv.) asi instructiuni.
Lectia 11
Obiectele Java Script – 2
In acest capitol este continuata prezentarea si explicarea obiectelor

esentiale JavaScript
1. Obiectul Date
Obiectul Date se foloseste pentru a lucra cu data zilei si timp.

Sunt doua lucruri importante pe care trebuie sa le cunoasteti inainte
de a folosi acest obiect:
1. Data initiala (de referinta) este 1-01-1970, nu puteti sa lucrati
cu date anterioare acesteia.
2. Cand creati un obiect "Date", ora folosita de obiect este aceea
de pe calculatorul client (al vizitatorului).
Pentru a crea o instanta a obiectului "Date" se foloseste
operatorul new, ca in exemplu urmator:
var data = new
Date();
Astfel se memoreaza data curenta intr-o variabila, aici cu numele

"data".
Dupa ce a fost creata instanta, se pot folosi metodele
obiectului.
De exemplu, daca se doreste afisat numarul zilei (care e de la
1 la 31) se scrie urmatoarea comanda (aici e folosita instanta cu
numele "data"):
data.getDate()
Se pot crea si altfel obiecte Date, care pot afisa data si ora intr-un
mod specificat:
new Date("Month dd, yyyy
hh:mm:ss")
new Date("Month dd, yyyy")
new
Date(yy,mm,dd,hh,mm,ss)
new Date(yy,mm,dd)
new Date(milliseconds)
Unde: Month=luna, dd=ziua (cu 2 caractere), y=anul (yy e afisat cu

2 caractere iar yyyy cu 4), h=ora, m=minute, s=secunde,
milliseconds=milisecunde.
Astfel se pot crea variabile de data pt. fiecare obiect Date de
mai sus, ca in exemplu urmator:
var data=new Date("October 15,

1996 15:16:00")
var data=new Date("October 15,
1996")
var data=new
Date(96,10,15,15,16,00)
var data=new Date(96,10,15)
var data=new Date(500)
Metodele obiectului Date:

Date() - Returneaza un obiect Date
getDate() - Returneaza data (ziua) din luna (intre 1-31)
getDay() - Returneaza ziua dintr-un obiect Date (intre 0-6;
0=Duminica, 1=Luni, etc.)
getMonth() - Returneaza luna dintr-un obiect Date (intre 0-11.
0=January, 1=February, etc.)
getFullYear() - Returneaza anul dintr-un obiect Date (patru
cifre)
getHours() - Returneaza ora dintr-un obiect Date (intre 0-23)
getMinutes() - Returneaza minutele dintr-un obiect Date
(intre 0-59)
getSeconds() - Returneaza secunda dintr-un obiect Date
(intre 0-59)
getMilliseconds() - Returneaza milisecunda dintr-un obiect
Date (intre 0-999)
getTime() - Returneaza numarul de milisecunde pana la
miezul noptii
getTimezoneOffset() - Returneaza diferenta de timp intre
computer si GMT
getUTCDate() - Returneaza data dintr-un obiect Date in (UTC)
timp universal
getUTCDay() - Returneaza ziua dintr-un obiect Date in timp
universal
getUTCMonth() - Returneaza luna dintr-un obiect Date in
timp universal
getUTCFullYear() - Returneaza anul (4 cifre) dintr-un obiect
Date in timp universal
getUTCHours() - Returneaza ora dintr-un obiect Date in timp
universal
getUTCMinutes() - Returneaza minutele dintr-un obiect Date
in timp universal
getUTCSeconds() - Returneaza secundele dintr-un obiect
Date in timp universal
getUTCMilliseconds() - Returneaza millisecundele dintr-un
obiect Date in timp universal
parse() - Returneaza un sir ce are ca valoare numarul de
millisecunde pana in January 01 1970 00:00:00
setDate() - Seteaza luna in un Obiect Date (intre 1-31)
setFullYear() - Seteaza anul in un Obiect Date (four digits)
setHours() - Seteaza ora in un Obiect Date (intre 0-23)
setMilliseconds() - Seteaza millisecundele in un Obiect Date
(intre 0-999)
setMinutes() - Seteaza minutele in un Obiect Date (intre 0-59)
setMonth() - Seteaza luna in un Obiect Date (intre 0-11.
0=January, 1=February)
setSeconds() - Seteaza secunda in un Obiect Date (intre 0-59)
setTime() - Seteaza millisecundele dupa 1/1-1970
setUTCDate() - Seteaza data in un Obiect Date, in timp
universal (intre 1-31)
setUTCMonth() - Seteaza luna in un Obiect Date, in timp
universal (intre 0-11. 0=January, 1=February)
setUTCFullYear() - Seteaza anul in un Obiect Date, in timp
universal (four digits)
setUTCHour() - Seteaza ora in un Obiect Date, in timp
universal (intre 0-23)
setUTCMinutes() - Seteaza minutele in un Obiect Date, in
timp universal (intre 0-59)
setUTCSeconds() - Seteaza secundele in un Obiect Date, in
timp universal (intre 0-59)
setUTCMilliseconds() - Seteaza millisecundele in un Obiect
Date, in timp universal (intre 0-999)
toLocaleString() - Converteste un Obiect Date la un sir, ce
contine ora curenta
toString() - Converteste un Obiect Date la un sir
Pentru a intelege mai bine obiectul Date si modul de lucru cu
metodele lui, studiati si urmatorul exemplu:

</script>
Adaugat intr-un document HTML, in sectiunea BODY, acest script va

afisa:
Afiseaza data curenta a zilei:
22.2.2011
3. Obiectul Math
Acest obiect include constante matematice si functii.

Nu este nevoie sa fie creat (instantat) un obiect Math inainte de a fi
folosit.
Daca, de exemplu dorim sa obtinem un numar aleator intre 0 si 1,
scriem comanda:
nr_aleator =
Math.random()
Proprietatile obiectului Math (sunt o lista de constante matematice.

Atentie! se scriu cu litera mare):
E - Returneaza constanta lui Euler
(2.7182.......)
LN2 - Returneaza logaritm natural din
2
LN10 - Returneaza logaritm natural
din 10
LOG2E - Returneaza logaritm in baza
2 din E
LOG10E - Returneaza logaritm in
baza10 din E
PI - Returneaza PI
SQRT1_2 - Returneaza radical din 0.5
SQRT2 - Returneaza radical din 2
Metodele obiectului Math:
abs(x) - Returneaza valoarea absoluta din x
acos(x) - Returneaza arccosinus din x
asin(x) - Returneaza arcsinus din x
atan(x) - Returneaza arctangenta din x
atan2(y,x) - Returneaza unghiul dintre axa si un
punct (x,y)
ceil(x) - Returneaza cel mai apropiat intreg mai mare
sau egal cu x
cos(x) - Returneaza cosinus din x
exp(x) - Returneaza valoarea lui E la puterea x
floor(x) - Returneaza cel mai apropiat intreg mai mic
sau egal cu x
log(x) - Returneaza log natural din x
max(x,y) - Returneaza maximul dintre x si y
min(x,y) - Returneaza minimul dintre x si y
pow(x,y) - Returneaza valoare a lui x la puterea y
random() - Returneaza un numar aleator intre 0 si 1
round(x) - Rotunjeste pe x la cel mai apropiat intreg
sin(x) - Returneaza sinus din x
sqrt(x) - Returneaza radical din x
tan(x) - Returneaza tangenta din x
Iata si un exemplu practic, urmatorul script rotunjeste o

valoare (aici 8.35) la cel mai apropiat intreg:
document.write("8.35 rotunjit este: " + Math.round(8.35));
</script>
Dupa ce este adaugat intr-un document HTML, in sectiunea BODY,

acest script va afisa:
8.35 rotunjit
este: 8
Obiecte de tip Global
Obiectele de tip Global grupeaza proprietatile si metodele de

nivel cel mai inalt, fara un obiect parinte, cum sunt functiile.
Obiectul Global are trei proprietati:
Infinity - cuvant-cheie care reprezinta plus sau

minus infinit
NaN - reprezinta un obiect null, care nu are vreo
valoare
undefined - Indica daca o variabila a fost sau nu
definita
Metodele acestui obiect (care pot fi considerate si functii JavaScript)

sunt:
escape() - Intoarce un obiect sir in care toate caracterele non

alfa-numerice sunt transformate in echivalentele lor numerice
eval() - Accepta un sir de instructiuni JS si il evalueaza ca fiind
cod sursa
isFinite() - determina daca o variabila are limite finite
isNaN() - determina daca o variabila este sau nu un numar.
Number() - Converteste valoarea unui obiect in numar
parseFloat() - transforma un sir intr-un numar de tip float (cu
virgula)
parseInt() - transforma un sir intr-un numar intreg
string() - Converteste valoarea unui obiect in string (de tip sir)
unescape() - ia o val. hexa si intoarce echivalentul sau in
ISOLatin-1 ASCII
Pentru a intelege mai bine, studiati urmatorul exemplu. Aici

este folosita de doua ori metoda "eval()", acesta transforma si
interpreteaza argumentul primit in cod JavaScript.
function calculeaza(form) {
form.rezultat.value = eval(form.expresie.value);
}
eval("alert('Bine ati venit pe site!')");
</script>
<form>
<p>Introduceti o expresie matematica, de exemplu (7*8 sau
3+8/2): </p>
<input type="text" name="expresie" size="35" >
<input type="button" name="calc" value="Calculare"
onclick="calculeaza(this.form)">
<br>
Rezultatul este:
<input type="text" name="rezultat" size="18">
</form>
Acest cod afiseaza la inceput o fereastra Alert apoi in browser

va fi afisat urmatorul rezultat:
Introduceti o expresie matematica (adunare, scadere, inmultire,
impartire), de exemplu (7*8 sau 3+8/2):
Calculare
Rezultatul este:
Dupa apasarea butonului "Calculare", prin "onclick" este accestata
functia "calculeaza()". Scriptul JavaScript din HEAD, transfera in
campul cu nmele "rezultat", din FORM, valoarea obtinuta prin
evaluarea expresiei adaugate in campul "expresie", calcularea
expresiei fiind posibila datorita folosirii metodei "eval()".
Lectia 12
Ierarhia Java Script
JavaScript organizeaza toate elementele unei pagini web intr-o

ierarhie. Toate elementele sunt vazute ca obiecte si fiecare obiect are
anumite proprietati si metode sau alte obiecte.
Cu JavaScript putem manipula usor obiectele. Pentru aceasta
este importanta intelegerea ierarhiei obiectelor HTML.
• JavaScript intelege fereastra browser-ului ca pe un obiect
window, acesta contine anumite elemente, cum ar fi de
exemplu bara de stare (status bar).
• In fereastra browser-ului putem incarca (afisa) un
document HTML (sau si de alt tip, dar aici ne referim la
HTML). Aceasta pagina din interiorul navigatorului este un
obiect document.
1. Obiectul document
Acesta este unul din obiectele cele mai importante in

JavaScript, este folosit foarte des.
Obiectul Window lasa continutul unui document web in grija
obiectului Document, acesta este responsabil de continutul afisat pe
o pagina si se poate lucra cu el pentru afisarea de paginii HTML
dinamice.
Obiectul document contine mai multe proprietati, cum ar fi
culoarea de fundal a paginii (bgcolor) sau alte obiecte, cum sunt tag-
urile HTML. De retinut ca toate elementele HTML sunt proprietati ale
obiectului document, si la randul lor acestea sunt obiecte. Un obiect
HTML este de exemplu un formular, o eticheta DIV sau un link.
Pentru a desemna obiectul sau proprietatea curenta pe care
dorim sa o folosim, adaugam cuvantul this urmat de caracterul punct
(.) si numele proprietatii, dupa cum vedeti in urmatoarea sintaxa:
this.nume_propri
etate
Astfel aceasta expresie se adreseaza proprietatii

"nume_proprietate" din obiectul curent.
Obiectul document are urmatoarele proprietati:
alinkColor - culoarea unei legaturi active

all - tabloul tuturor etichetelor HTML din
document
anchors - tabloul de obiecte "Anchor", in
ordinea specificata in sursa
applets - tabloul de obiecte "Applet"
bgcolor - culoarea de fundal a documentului
classes - tabloul claselor paginilor cu stiluri
cookie - fisier cookie asociat cu documentul
domain - domeniu al documentului
embeds - tablou de obiecte inglobate
fgcolor - culoarea textului in document
forms[] - tablou de obiecte "Form" (formular)
formName - specifica instanta "Form" care
este accesata prin folosirea valorii atributului
"name" din eticheta <form>
height - specifica inaltimea documentului in
pixeli
ids - tabloul identificatorilor paginii cu stiluri
images - tablou de obiecte "Image"
lastModified - data cand a fost modificat
ultima oara documentul
layers - tablou de obiecte "Layer"
linkColor - culoarea legaturilor
links - tablou de obiecte "Link", ce corespund
tuturor link-urilor HREF din document, in
ordinea specificata in sursa
plugins - tablou de obiecte inglobate
referrer - adresa URL (externa) a documentului
la care a fost legat documentul curent
tags - tabloul etichetelor paginii cu stiluri
title - titlul documentului
URL - adresa URL a documentului curent
vlinkColor - culoarea legaturilor vizitate
width - specifica latimea documentului in pixeli
lastModified - URL-ul documentului
Obiectul document are urmatoarele meode:
captureEvents() - captureaza evenimentele care vor fi tratate
de document
close() - inchide fluxul datelor de iesire spre document
contextual() - permite sa aplicam in mod selectiv un stil unui
element HTML care apare intr-un anumit context specific
getSelection() - intoarce textul selectat
handleEvent() - apeleaza handlerul pentru evenimentul
specificat
open() - deschide fluxul datelor de iesire spre document
releaseEvents() - elibereaza evenimentele capturate de
document
routeEvent() - dirijeaza evenimentele capturate spre alte
obiecte
write() - adauga text in document
writeln() - adauga text si un caracter linie noua in document
(textul pe linia lui)
In urmatorul exemplu puteti vedea cum au fost folosite
proprietatile obiectului document pentru stabilirea culorii de fundal, a
textului, link-urilor si titlul unei pagini web:

</script>
Acest script seteaza culoarea de fundal a pagini "#eaeafe" (un

albastru desechis), culoarea textului rosu, a legaturilor verde si titlul
"Lectie Java Script".
2. Obiectul document si Formulare
Formularele de asemenea pot fi considerate si tratate ca

obiecte dintr-un document HTML, acestea fiind sub-obiecte ale
obiectului "document", astfel se apeleaza impreuna cu acesta.
Penru a intelege mai bine lucrul cu obiectul document si cum
se lucreaza cu ierarhia obiectelor, studiati si urmatorul exemplu:
<html>
<head>

</script>
</head>
<body >
<form name="nume_form">
Name: <input type="text" name="nume_camp" value=""><br>
<input type="button" value="Apasa" name="Buton"
onClick="alert('Salut ' +afisare())">
</form>
</body>
</html>
Acest cod va afisa in pagina urmatorul formular:

Name:
Dupa ce scrieti in campul "Name" un nume si apasati butonul

"Apasa" va apare o vereastra Alert cu mesajul "Salut "nume" ".
Ierarhia obiectelor din pagina afisata de acest exemplu este
urmatoarea:
document (pagina HTML) -> Forms[0] (sau numele
formularului din "name" - intregul formular) -> {Element[0]
(primul camp din formular), Element[1] (butonul din
formular)}
Daca de exemplu doriti sa aflati ce se introdce in primul

element din formular, trebuie sa va ganditi cum sa accesati acest
obiect.
Pornim din vârful ierarhiei "document", urmarim calea catre
primul formular "forms[0]" pana la obiectul numit "elements[0]" (se
adauga toate numele obiectului pe masura ce le depasim). Astfel
putem accesa primul element prin:
document.forms[0].elem
ents[0]
Pentru a afla ce text a fost introdus, apelam valoarea acelui

element. Pentru elemente din formular (tip "input") se foloseste
proprietatea "value". Acesta arata valoarea casetei "input" respective
(aici textul introdus in campul de text). Acum putem afla valoarea cu
ajutorul urmatoruli cod:
name =
document.forms[0].elements[0].val
ue;
Valoarea este stocata in variabila "name", pe care o putem folosi in

script.
Astfel, putem crea o fereastra cu ajutorul liniei de cod
"alert("Salut! " + name)", unde "name" va fi valoarea variabilei
"name" care reprezinta textul introdus in primul element din primul
formular.
Daca aveti formulare de dimensiuni mari, poate deveni dificila
apelarea obiectelor dupa ordinea lor, prin numere intre paranteze
patrate. Daca am avea trei formulare si vrem sa apelam al
cincisprezecelea element (camp) din al treilea formular, ar trebui sa
scriem "document.forms[2].elements[14]". Pentru a facilita astfel de
apelari, se pot da nume unice diferitelor obiecte, folosind atributul
"name", dupa cum puteti vedea in exemplu urmator:
<form name="nume_form">
Nume: <input type="text"
name="nume_element" value="">
Astfel "forms[0]" este de asemenea "nume_form" si in loc de

"elements[0]" puteti utiliza "nume_element" (specificat cu atributul
"name" in eticheta <input>).
Prin urmare, in loc de a scrie "name =
document.forms[0].elements[0].value;" se poate scrie:
"name = document.nume_form.nume_element.value;"
Lectia 13
DOM - Modelul Obiectului Document
DOM (Document Object Model) defineste o structura logica si

standardizata a documentelor, o ordine prin care putem parcurge si
edita elemente si continut din documente HTML sau XML.
Structura DOM este o ierarhie de obiecte, compatibila cu a
limbajului JavaScript sau cu a oricarui limbaj bazat pe obiecte.
In schema urmatoare puteti vedea modelul si ierarhia obiectelor:
In ierarhia prezentata mai sus observati ca obiectele sunt structurate
pe 3 nivele principale.
Obiectul "window" este considerat pe cel mai inalt nivel, urmeaza
apoi obiectele de pe nivelul I, nivelul II si nivelul III.
Obiectul din nivelul 1, de exemplu "document", contine obiectele din
nivelul 2 (de ex. "forms[]) care la randul lor pot contine alte obiecte,
de nivel 3 (de ex. "Buttons"). Astfel, in JavaScript, continerea este
principiul conform caruia un obiect contine alt obiect. De exemplu
relatia dintre obiectul "Form" si obiectul "Button" nu este una dintre
clasa si subclasa, ci una intre container si continut. Prin urmare, un
obiect nu poate mosteni proprietatile si metodele altui obiect.
1. Obiecte pe partea de client
Elementele principale legate de lucrul pe partea de client din

JavaScript se axeaza pe ceea ce putem face cu paginile HTML, mai
exact - ceea ce poate face vizitatorul cu scriptul Javascript incarcat in
pagina HTML.
Primul set de obiecte are o legatura cu navigatorul si cu etichetele
HTML din acesta.
Puteti accesa sau transfera continutul unei eticheta HTML (de
exemplu dintr-un <div> ... </div>) utilizand id-ul acesteia, folosind
expresia:
nume_var =
document.getElementById("id").innerHTML;
sau
nume_var =
document.getElementById("id").childNodes[0].node
Value;
- Aici, "nume_var" este o variabila care preia continutul incadrat de
tag-ul HTML care are atributul id="id".
Pentru a schimba sau adauga continut intr-un element HTML cu un id
specific, folositi expresia de mai sus in sens invers, adica:
document.getElementById("id").innerHTML =
"continut"
Unde "id" este valoarea atributului "id" din etiheta HTML respectiva
iar "continut" este continutul (text, tag-uri) care va fi adaugat in
aceasta eticheta HTML (va inlocui orice alt context care se afla in
cadrul acestui element HTML).
Majoritatea obiectelor JavaScript din nivelul 2 sunt vazute ca obiecte
ale tag-urilor HTML, dupa cum puteti observa in lista de mai jos, in
care sunt prezentate obiectele JavaScript si etichetele HTML
corespunzatoare:
Button - <input type="button">
Checkbox - <input type="checkbox">
Hidden - <input type="hidden">
Fileupload - <input type="file">
Password - <input type="password">
Radio - <input type="radio">
Reset - <input type="reset">
Select - <select>
Frame - <frame>
Document - <body>
Layer - <layer> sau <ilayer>
Link - <a href="">
Image - <img>
Area - <map>
Anchor - <a name="">
Applet - <applet>
Plugin - <embed>
Form - <form>
Submit - <input type="submit">
Text - <input type="text">
Textarea - <textarea>
Option - <option>
2. Exemplu script
Urmatorul script este un exemplu practic de folosire a ierarhiei

DOM din JavaScript si elementele HTML.
Cu ajutorul acestui script puteti prelua datele (textul) din interiorul
unui "<div> ... </div>" pentru a le adauga intr-o caseta <textarea>,
astfel aceste date pot fi usor trimise la un script PHP.
<html>
<head>
<title>Script JS</title>

</script>
</head>
<body>
<div id="div_id">Aici este textul din interiorul Div-ului</div>
<form action="fisier.php" method="post" name="formular">
<textarea cols="30" rows="5" name="text"
id="textul"></textarea> <br>
<input type="button" value="Adauga" onclick="CitesteDiv();" />
<input type="submit" value="Trimite" />
</form>
</body>
</html>
- Am definit functia "CitesteDiv()" care va fi apelata la apasare

butonului "Adauga". In interiorul acestei functii avem variabila
"valDiv" care
(prin codul
"document.getElementById("div_id").childNodes[0].nodeValue;")
preia continutul din elementul HTML "<div>" cu id-ul "div_id", apoi
codul
("document.formular.text.value")
defineste valoarea casetei
(cu atributul name="text")
din formular egala cu valoarea variabilei "valDiv".
Acest cod va afisa in pagina urmatorul rezultat:
Aici este textul din interiorul Div-ului
Trimite
- Daca apasati butonul "Adauga", textul din interiorul etichetei

<div> ... </div> va fi introdus in formular cara apoi prin apasarea
butonului "Trimite" poate fi trimis la un script PHP (aici "fisier.php").
Exemplul 2
Iata un alt exemplu, cu o actiune inversa celui de sus. Adica, textul
introdus intr-un camp textarea, dupa apasarea unui buton va fi inclus
in pagina in cadrul unei etichete HTML <div>, fara ca pagina sa fie
reincarcata.
Retineti, aceasta actiune este pe partea de client, vizibila doar de
utilizatorul actual, nu modifica pagina originala de pe server si dupa
inchiderea navigatorului textul introdus dispare.
<html>
<head>
<title>Script JS</title>

</script>
</head>
<body>
<div id="div_id2">Aici va apare textul din formular</div><br>
<form name="formular2">
<textarea cols="30" rows="5" name="text2"
id="textul2"></textarea> <br>
<input type="button" value="Afiseaza" onclick="ScrieDiv();" />
</form>
</body>
</html>
- Am definit functia "ScrieDiv()" care va fi apelata la apasare butonului
"Afiseaza". In interiorul acestei functii avem variabila "valText" care
(prin codul "document.formular2.text2.value") preia sirul adaugat in
campul "text2" din formular, apoi, prin comanda
"document.getElementById("div_id2").innerHTML" transfera si
afiseaza sirul in cadrul etichetei <div>, inlocuindu-l pe cel existent.
Acest cod va afisa in pagina urmatorul rezultat:
Aici va apare textul din formular
- Adaugati orice text in campul din formular apoi apasati butonul

"Afiseaza", veti vedea rezultatul.
Aici am folosit exemple cu DIV, dar puteti folosi in mod similar si

pentru alte tag-uri HTML, cum sunt: <p> , <ul> , <h2> , <h3> , <span>
, si altele; important fiind atributul "id" si valoarea acestuia.
- Mai multe detalii si exemple cu "document.getElementById("id")"

gasiti la Lectia 28, Lucrul cu getElementById.
Lectia 14
Obiecte de nivel 1
In aceasa lectie sunt prezentate obiectele JavaScript de nivel 1:

obiectul "navigator (browser)", obiectul "History" si obiectul
"Location"
1. Obiectul Navigator
Obiectul Navigator reprezinta programul, aplicatia browser

folosita pentru vizualizarea rezultatelor.
Cu acest obiect putem gasi informatii despre denumirea si versiunea
browser-ului, precum si alte informatii care pot fi folosite in practica.
Obiectul Navigator are la randul lui doua sub-obiecte (sau obiecte
copil) : "Plugin" si "Mimetype".
- Proprietati ale obiectului "navigator" sunt urmatoarele:

appCodeName - reprezinta numele de cod al browserului
appName - reprezinta numele oficial al browserului
appVersion - versiunea browserului
language - limbajul browserului
mimeTypes - face referire la un tablou de obiecte
"Mimetype" care contine toate tipurile MIME pe care le
accepta browserul
platform - un sir care reprezinta platforma pe care ruleaza
browserul
plugins - face referire la un tablou de obiecte "Plugin" care
contine toate modulele plugin instalate pe browser
userAgent - sir care reprezinta antetul utilizator-agent
- Metode ale obiectului "navigator" sunt urmatoarele:

javaEnabled() - functie care testeaza daca browserul
cunoaste sau nu limbajul JAVA
plugins.refresh() - cauta orice module plugin nou
instalate
preference() - permite citirea si stabilirea diverselor
preferinte ale utilizatorului in browser
taintEnabled() - testeaza daca este activata
contaminarea datelor
Urmatorul script afiseaza proprietatile si metodele navigatorului

(browser-ului) folosit:
<body>

</script>
</body>
In pagina dv. acesta afiseaza urmatorul rezultat:

Nume cod :Mozilla
Nume browser :Microsoft Internet Explorer
versiune :4.0 (compatible; MSIE 7.0; Windows NT 6.0; GTB6.6;
SLCC1; .NET CLR 2.0.50727; Media Center PC 5.0; InfoPath.2; .NET
CLR 3.5.30729; .NET CLR 3.0.30618)
limbaj :undefined
MIME Type :
Platforma :Win32
Plugin-uri :
Agent :Mozilla/4.0 (compatible; MSIE 7.0; Windows NT 6.0;
GTB6.6; SLCC1; .NET CLR 2.0.50727; Media Center PC 5.0;
InfoPath.2; .NET CLR 3.5.30729; .NET CLR 3.0.30618)
2. Obiectul History
Navigatoarele web au o caracteristica numita "History" care
permite urmarirea locatiilor pe care le-ati vizitat. Acest obiect contine
un tablou (Array) cu paginile vizitate de client, in cadrul unei ferestre,
un istoric al paginilor vizitate.
Obiectul History permite navigarea inapoi in lista istoric la
paginile care au mai fost vizitate in cadrul aceleasi ferestre.
- Proprietatile obiectului "history" sunt urmatoarele"

current - face referire la adresa URL curenta din lista
istoric
length - intoarce numarul de intrari din lista istoric
next - face referire la urmatoarea adresa URL din lista
istoric
previous - face referire la adresa URL anterioara din lista
istoric
- Metodele obiectului "history" sunt urmatoarele"

back() - incarca ultima adresa URL din lista istoric
forward() - incarca urmatoarea adresa URL din lista istoric
go(x) - incarca o adresa URL, echivalenta cu un salt la
numarul "x" (pozitiv sau negativ) din lista istoric
Daca dorim intoarcerea inapoi cu 3 pagini in lista istoric, putem folosi
o functie si obiectul "History" ca in exemplul urmator:

</script>
- Unde "inapoi3" este numele functiei si (-3) reprezinta numarul de

pagini la care se face saltul, pornind de la pagina curenta, negativ
face saltul inapoi iar daca numarul dintre paranteze este pozitiv face
saltul inainte in lista istoric.
3. Obiectul Location
Acest obiect contine date despre originea unei pagini web, stocheaza
informatii despre o adresa URL dintr-o fereastra specifica.
- Proprietatile obiectului "location" sunt urmatoarele"

hash - reprezinta un nume de ancora in adresa URL, care
incepe cu caracterul diez (#)
host - reprezinta numele calculatorului gazda si numarul
de port al adresei URL
hostname - reprezinta partea cu numele calculatorului
gazda din adresa URL
href - reprezinta adresa URL completa
pathname - reprezinta partea PATH_INFO a adresei URL
port - reprezinta partea de port a adresei URL
protocol - reprezinta partea de protocol a adresei URL
search - partea de cautare a adresei URL, inclusiv
caracterul "?"
- Metodele obiectului "location" sunt urmatoarele"

reload() - reincarca adresa URL curenta in fereastra de
browser
replace() - incarca noua pagina transferata in browserul
curent
De exemplu, daca doriti sa preluati intr-un script JS parti din adresa

URL, si anume domeniul si calea catre pagina curenta sau toata
adresa (fara protcol, care de obicei e "http:" ori "https":), puteti folosi
modelul urmator:

</script>
<form action="">
<input type="button" value="Click" onclick="get_url()" />
</form>
- Acest script va avea urmatorul rezultat, va afisa in pagina butonul

de mai jos care, dupa ce veti da click, va afisa o fereastra alert cu
domeniul si adresa paginii curente.
???
- Studiati scriptul si comentariile din codul lui.
Daca doriti sa regasiti portiunea de protocol a adresei URL curente,

puteti folosi urmatorul exemplu :
var protocol = window.location.protocol;
</script>
- Observati modul de lucru bazat pe obiecte. Intai se adauga

obiectul de rang superior ( window ) apoi, dupa un caracter punct (.)
se adauga urmatorul sub-obiect in care vrem sa lucram (aici
"location"), si dupa un caracter punct adaugam proprietatea acestui
obiect la care vrem sa facem referire.
Pentru o mai buna invatare, incercati sa creati singuri si alte exemple

folosind si alte proprietati si metode ale obiectelor prezentate in
lectie.
Lectia 15
Obiecte de nivel 2
In aceasta lectie sunt prezentate subobiecte ale obiectului

"Navigator" si "Document", care in ierarhia generala pot fi considerate
obiecte de nivel doi.
1. Obiectul Mimetype
Numele acestui obiect vine de la Multipurpose Internet Mail

Extensions (extensii aduse serviciului de posta electronica) si este un
subobiect al obiectului "Navigator".
Mimetype permite accesarea informatiilor despre tipurile MIME pe
care le recunosc modulele plugin ale browserului.
Acesta, ca si obiectul "Plugin", nu sunt recunoscute de Internet
Explorer pana in versiunea 7).
Proprietati ale obiectului "Mimetype" sunt urmatoarele :

description - contine descrierea obiectului "Mimetype"
enabledPlugin - contine modulul plugin pentru un obiect
"Mimetype" specific
suffixes - contine extensia de fisier pentru "Mimetype"
type - contine reprezentarea de tip sir a obiectului
"Mimetype"
2. Obiectul Plughin
La fel ca si "Mimetype", nici obiectul Plughin nu este recunoscute

de Internet Explorer.
Acest obiect face referire la modulele plugin instalate pentru
browser si contine un tablou de elemente si tipuri MIME tratate de
fiecare modul plugin instalat.
Obiectul "Plugin" are o singura metoda legata direct de el : metoda
"plugins.refresh()", care apartine de obiectul "navigator". Aceasta
metoda permite reconstruirea tabloului de module plugin.
Proprietatile obiectului "Plugin" sunt urmatoarele :

description - face referire la o descriere a modulului
plugin
filename - face referire la numele fisierului unui program
plugin
length - face referire la numarul de tipuri MIME continute
in tablou
name - face referire la numele modulului plugin
3. Obiectul Anchor
Acest obiect este un text sau o imagine in pagina HTML care poate
fi tinta unei legaturi hipertext. "Anchor" este un obiect JavaScript
foarte putin important si folosit rar, totusi e bine sa-l cunoasteti
Proprietatie obiectului "Anchor" sunt urmatoarele :

name - nume care ofera acces la ancora de la o legatura
text - textul care apare intre etichetele <a> si </a>
x - coordonata x a ancorei
y - coordonata y a ancorei
4. Obiectul Area
Obiectul Area permite sa definim o suprafata dintr-o imagine ca

fiind o harta de imagini. Atributul "href" al unui obiect "<area>" este
incarcat intr-o fereastra tinta atunci cand vizitatorul executa click pe o
locatie specificata.
Mai multe detalii despre hartile de imagini HTML gasiti la pagina
Harti de imagini.
Acest obiect are o singura metoda:

handleEvent() apeleaza handlerul de evenimente asociat
acestui eveniment
Proprietatie obiectului "Area" sunt urmatoarele :

hash - portiunea de adresa URL care este ancora, inclusiv
semnul diez ( # )
host - numele calculatorului gazda (adresa IP) si portul
specificat in adresa URL
hostname - numele calculatorului gazda specificat in
adresa URL
href - intreaga adresa URL
pathname - calea fisierului specificat in adresa URL,
incepand cu simbolul /
port - portul specificat in adresa URL
protocol - protocolul specificat in adresa URL, inclusiv
caracterul doua puncte ( : )
search - partea de cautare a adresei URL, inclusiv
caracterul initial semnul intrebarii (? )
target - numele ferestrei tinta in care ar trebui afisata
adresa URL
text - textul care apare intre etichetele <area> si </area>
x - coordonata x a suprafetei
y - coordonata y a suprafetei
5. Obiectul Applet
Obiectul Applet reprezinta echivalentul JavaScript al etichetei

HTML <applet>.
Acest obiect adreseaza un applet Java. Aceste obiecte JavaScript
nu au metode proprii, dar in practica putem folosi JavaScript ca sa
accesam metodele unui anumit applet scris in limbajul Java.
Proprietatile obiectului "Applet" sunt toate campurile publice ale
respectivului applet Java, iar metodele sunt toate metodele publice
ale acestuia.
6. Obiectul Layer
Si acesta este un obiect cu anumite particularitati, este recunoscut

doar de browserele Netscape, Mozilla si permite limbajului JavaScript
sa acceseze straturile din interiorul documentului.
Utilizarea acestui obiect necesita cunostinte DHTML.
Proprietatie obiectului "Layer" sunt urmatoarele :

above - specifica stratul de deasupra
background - face referire la imaginea de fundal a
stratului
below - specifica stratul de dedesubt
bgColor - face referire la culoarea de fundal a stratului
clip.bottom - face referire la partea de jos a suprafetei
decupate a stratului
clip.height - face referire la inaltimea suprafetei decupate
a stratului
clip.left - face referire la partea stanga a suprafetei
clip.right - face referire la partea dreapta a suprafetei
clip.top - face referire la partea de sus a suprafetei
clip.width - face referire la latimea suprafetei decupate a
stratului
document - face referire la obiectul "Document" care
contine stratul
left - face referire la coordonata X a stratului
name - face referire la numele stratului
pageX - face referire la coordonata X, relativ la document
pageY - face referire la coordonata Y, relativ la document
parentLayer - face referire la stratul containe
rsiblingAbove - face referire la stratul de deasupra in
"zIndex"
siblingBelow - face referire la stratul de dedesubt in
"zIndex"
src - face referire la adresa URL sursa pentru strat
top - face referie la coordonata Y a stratului
visibility - face referire la starea de vizibilitate a stratului
window - face referire la obiectul "Window" sau "Frame"
care contine stratul
x - face referire la coordonata X a stratului
y - face referire la coordonata Y a stratului
zIndex - face referire la ordinea z-relativa a acestui strat in
raport cu fratii lui
Metodele obiectului "Layer" sunt urmatoarele :

captureEvent() - specifica tipul de evenimente care sa fie
capturate
specificat
load() - incarca o noua adresa URL
moveAbove() - deplaseaza stratul deasupra altui strat
moveBelow() - deplaseaza stratul sub alt strat
moveBy() - deplaseaza stratul intr-o pozitie specificata
moveTo() - deplaseaza coltul din stanga sus al
ferestrei la coordonatele specificate ale ecranului
moveToAbsolute() - modifica pozitia stratului in pagina,
conform coordonatelor specificate in pixeli
releaseEvents() - stabileste ca stratul sa elibereze
evenimentele capturate de tipul specificat
resizeBy() - redimensioneaza stratul cu valorile de
inaltime si latime specificate
resizeTo() - redimensioneaza stratul la valorile de inaltime
si latime specificate
7. Obiectul Link
Obiectul link permite lucrul cu legaturi (link-uri) in cadrul codului

JavaScript. Deoarece un link reprezinta un URL care face referire la o
alta pagina HTML sau la alta destinatie, este asemanator cu obiectul
"Location" (care continea aceleasi informatii pentru pagina HTML
curenta).
Acest obiect are o singura metoda:
handleEvent() apeleaza handlerul pentru evenimentul
specificat
Proprietatie obiectului "Link" sunt urmatoarele :

hash - reprezinta o denumire de ancora in adresa URL
pentru legatura, care cu caracterul diez ( # )
host - reprezinta portiunea de calculator gazda din adresa
URL asociata cu o legatura
hostname - reprezinta portiunea de nume al calculatorului
gazda din adresa URL asociata cu o legatura
href - reprezinta adresa URL completa asociata cu o
legatura
pathname - reprezinta portiunea numelui de cale a
legaturii URL
port - reprezinta portiunea de port a legaturii URL
protocol - specifica portiunea de protocol a legaturii URL
search - reprezinta portiunea de interogare a legaturii URL
target - reprezinta numele obiectului "Window" in care

este afisata legatura
x - face referire la coordonata X a legaturii
y - face referire la coordonata Y a legaturii
text - textul folosit pentru crearea legaturii
Ati intalnit de mai multe ori expresia "hanler de evenimente", pentru a

intelege ce reprezinta, vedeti Lectia 18
- Lectia 15
Lectia 16
Obiecte de nivel 3
Obiectele de nivelul 3 sunt subobiecte ale obiectului "Form".

La fel cum imbricati (adAaugati) elementele HTML in interiorul
etichetelor <form>, aceste obiecte sunt imbricate in interiorul
obiectului "Form".
1. Obiectul Button
Java Script are trei obiecte buttons: Button, Submit si Reset.

Fiecare din ele are o reprezentare a unei etichetei HTML.
Obiectul Button este un buton generic, la care, pentru a fi folosit
pt. o anumita functie, trebuie sa-i adaugam linii de cod specifice, dar
celelalte doua: Submit (trimite datele la un script) si Reset (sterge
datele noi completate in formular); au scopuri specifice. Totusi, se
poate sa folosim un obiect "Button" pentru a avea acelasi rol ca si
obiectul "Submit" (apeland Form.submit()), sau ca obiect "Reset"
(apeland Form.reset()).
Proprietati ale obiectului "Button" sunt urmatoarele :

form - returneaza obiectul Form al carui membru este
butonul
name - returneaza sirul specificat in atributul name al
etichetei HTML <input>
type - returneaza sirul specificat in atributul type al
value - returneaza sirul care apare in reprezentarea
grafica a unui buton, afisata in browser
Metode ale obiectului "Button" sunt urmatoarele :

blur() - dezactiveaza butonul
click() - apeleaza un eveniment click pentru butonul
respectiv.
focus() - eveniment de activare a butonului
handle Event() - transfera un eveniment handlerului de
eveniment corespunzator
2. Obiectul Checkbox
Acest obiect reprezinta caseta de validare HTML dintr-un "Form",

care permite vizitatorului sa specifice o valoare "DA" sau "NU", ori
"true" sau "false".
Proprietati ale obiectului "Checkbox" sunt urmatoarele :

checked - returneaza o valoare booleana care determina
daca este bifata caseta de validare
defaultChecked - returneaza o valoare booleana care
pastreaza starea initiala a casetei de validare. Este stabilita
cu atributul "checked"
form - returneaza obiectul Form al casetei de validare
value - returneaza o valoare returnata cand formularul
este inaintat
Metode ale obiectului "Checkbox" sunt urmatoarele :

blur() - dezactiveaza caseta de validare
click() - apeleaza un eveniment click pentru caseta de
validare respectiva.
focus() - eveniment de activare a caseta de validare
3. Obiectul FileUpload
Acest obiect este echivalentul elementului folosit pentru incarcarea

fisierelor.
Cu Java Script nu se poate face prea multe cu acest obiect decat
facand referire la proprietatile sale.
Proprietati ale obiectului "FileUpload" sunt urmatoarele :

form - face referire la obiectul Form ce contine caseta
FileUpload
name - contine sirul specificat in atributul name al casetei
FileUpload
type - contine sirul specificat in atributul type al casetei
FileUpload
value - contine sirul care specifica numele caii fisierului pt.
upload
Metode ale obiectului "FileUpload" sunt urmatoarele :

blur() - dezactiveaza caseta FileUpload
focus() - activeaza caseta FileUpload
select() - selecteaza suprafata de adaugare a datelor
pentru caseta FileUpload.
4. Obiectul Hidden
Acest obiect se foloseste pentru stocarea anumitor date care vor fi
transferate unei prelucrari pe server. Datele stocate in obiectul
"hidden" sunt ascunse, nu apar vzibile in browser.
Proprietati ale obiectului "Hidden" sunt urmatoarele :
form - face referire la formularul ce contine obiectul
Hidden
name - contine numele obiectului Hidden
type - contine sirul specificat in atributul type al casetei
Hidden
value - contine sirul specificat in atributul "value" al
obiectului Hidden
5. Obiectul Password
Obiectul password este asemanator cu obiectul "text", diferenta

fiind ca toate caracterele introduse in cazeta "Password" sunt afisate
cu "*" pentru a nu se vedea textul introdus.
Proprietati ale obiectului "Password" sunt urmatoarele :
defaultValue - face referire la atributul "value" al casetei
pt. parola din formularul HTML
form - face referire la obiectul Form ce contine caseta pt.
parola
name - contine sirul specificat in atributul name al pt.
parola
type - contine sirul specificat in atributul type al casetei pt.
parola
value - face referire la continutul curent din caseta pt.
parola
Metode ale obiectului "Password" sunt urmatoarele :

blur() - dezactiveaza caseta pt. parola
focus() - activeaza caseta pt. parola
select() - selecteaza textul adaugat in caseta pt. parola.
6. Obiectul Radio
Butoanele radio sunt controale dintr-un formular HTML care se

anuleaza reciproc, astfel daca este selectat un buton radio, toate
celelalte butoane din set sunt neselectate. Setul de butoane se
defineste avand aceasi proprietate "name" pentru toate butoanele
radio.
Proprietati ale obiectului "Radio" sunt urmatoarele :
checked - retrneaza o valoare care determina daca este
bifat obiectul radio
defaultChecked - returneaza o valoare care pastreaza
starea initiala a obiectului Radio, care se stabileste cu
atributul "checked" al etichetei <input> respective
form - returneaza obiectul Form ce contine obiectul Radio
name - contine sirul specificat in atributul name al
etichetei <input>
type - contine sirul specificat in atributul type al etichetei
<input>
value - face referire la atributul value al etichetei <input>
Metode ale obiectului "Radio" sunt urmatoarele :

blur() - dezactiveaza obiectul Radio
click() - apeleaza un eveniment "click" pt. obiectul Radio
focus() - activeaza un buton radio
Lectia 17
Obiecte de nivel 3 si nivel 4
In aceasta lectie se continua prezentarea celorlalte obiecte de nivel

3 si obiectul de nivel 4, "Option".
1. Obiectul Reset
Acest obiect este asociat butonului "reset" dintr-un formular HTML,

cand butonul este actionat sterge toate datele noi introduse in
formular, stabilind campurile la valoarea lor initiala.
Proprietati ale obiectului "Reset" sunt urmatoarele :
form - returneaza obiectul Form ce contine butonul
name - contine sirul specificat in atributul name al
etichetei <input> corespunzatoare butonului
type - contine sirul specificat in atributul type al etichetei
<input>
value - returneaza sirul adaugat in atributul value din
eticheta <input> a butonului
Metode ale obiectului "Reset" sunt urmatoarele :

click() - apeleaza un eveniment "click" pt. butonul
respectiv
focus() - activeaza butonul
2. Obiectul Submit
Acest obiect este asociat butonului "submit" dintr-un formular

HTML, cand butonul este actionat trimite datele din formular spre
calea specificata in atributul "action" din eticheta <form>, pentru a fi
procesate (de exemplu, la un script PHP).
Proprietati ale obiectului "Submit" sunt urmatoarele :
form - returneaza datele din intreg formularul ce contine
butonul "submit"
etichetei <input> corespunzatoare butonului
type - returneaza sirul specificat in atributul type din
eticheta <input> a butonului "submit"
value - returneaza sirul adaugat in atributul value din
eticheta <input> a butonului
Metode ale obiectului "Submit" sunt urmatoarele :

click() - apeleaza un eveniment "click" pt. butonul
respectiv
focus() - activeaza butonul
handle Event() - apeleaza handlerul pt. evenimentul
specificat
3. Obiectul Select
Acest obiect face referire la caseta cu lista de selectare si lista

derulanta dintr-un formular HTML, ambele permit utilizatorului
selectarea unor valori dintr-o lista predefinita. Dintr-o lista derulanta
se poate selecta numai o singura valoare iar dintr-o caseta cu lista de
selectare se pot selecta mai multe valori.
Obiectul select poate apare ca lista derulanta (in mod initial) sau
ca lista de selectare daca se specifica proprietatea "multiple" ca
adevarata (true).
Proprietati ale obiectului "Select" sunt urmatoarele :
form - returneaza obiectul Form ce contine lista de
selectare
length - returneaza numarul de optiuni din lista de
selectare
etichetei HTML corespunzatoare
etichetei HTML (pentru instantele select ce contin atributul
"multiple" returneaza "select-multiple", iar pentru cele fara
acest atribut returneaza "select-one")
options - returneaza un tablou ce contine toate
elementele din caseta de selectare. Elementele sunt
definite cu eticheta HTML <options>. aceasta
proprietate are doua subproprietati: "length" si
"selectedIndex"
selectedIndex - returneaza un numar care specifica
indicele optiunii selectate din caseta de selectare
Metode ale obiectului "Select" sunt urmatoarele :

blur() - dezactiveaza caseta de selectare
click() - apeleaza un eveniment "click" pt. caseta de
selectare
handleEvent() - transfera un eveniment handlerului de
4. Obiectul Text
Acest obiect este reprezentarea casetei de tip "text" dintr-un

formular HTML.
Obiectul text serveste ca unealta de capturare a datelor dintr-o
caseta de tip "text".
Proprietati ale obiectului "Text" sunt urmatoarele :
defaultValue - returneaza valoarea casetei de text,
specificate de atributul value. form - returneaza
obiectul Form ce contine caseta de text
etichetei HTML
value - returneaza valoarea afisata in caseta de text
Metode ale obiectului "Text" sunt urmatoarele :
blur() - dezactiveaza caseta de text
focus() - activeaza caseta de tip text
select() - selecteaza textul din caseta de text
5. Obiectul Textarea
Asemanator cu obiectul "Text", obiectul Textarea este

reprezentarea casetei de tip "textarea" dintr-un formular HTML.
Aceasta caseta permite adaugarea mai multor linii de text in acelasi
camp (caseta).
Proprietati ale obiectului "Textarea" sunt urmatoarele :

defaultValue - returneaza valoarea zonei de text,
specificate intre etichetele <textarea>
form - returneaza obiectul Form ce contine caseta
textarea
etichetei HTML
value - returneaza valoarea afisata in caseta textarea
Metode ale obiectului "Textarea" sunt urmatoarele :

blur() - dezactiveaza zona de text
focus() - activeaza zona de text
select() - selecteaza textul din campul de text
6. Obiectul Option (nivel 4)
Acest obiect este singurul obiect de nivel 4, acesta face referire la

elementele <option> definite intre etichetele <select>.
Obiectul option este un subobiect a obiectului "Select".
Proprietatile obiectului "Option" sunt urmatoarele :
defaultSelected - face referire la optiunea care este
selectata in mod prestabilit in caseta de selectare
index - face referire la locatia indexata a unui elem. in
tabloul "Select.options" (incepe cu 0)
selected - face referire la valoarea selectata a casetei de
selectare
text - face referire la textul pentru optiune
value - face referire la vloarea care este returnata cand
este selectate optiunea
Lectia 18
Evenimente JavaScript
Evenimentele sunt elemente foarte importante in programarea

JavaScript. Acestea sunt actiuni provocate de cele mai multe ori de
vizitatorul paginii.
Daca vizitatorul apasa un buton din pagina se provoaca
evenimentul "Click". Daca mouse-ul este deasupra unui link, se
declanseaza un eveniment "MouseOver".
JavaScript poate reactiona la unele evenimente. Aceasta se poate
realiza cu ajutorul "event-handlers" (manageri de evenimente sau
gestionar de evenimente).
Handlerele de evenimente se adauga ca atribute ale etichetelor
HTML.
De exemplu, daca dorim sa apelam o functie "nume_functie()" de
fiecare data cand s-a modificat un anumit obiect Text, procedam
astfel: atribuim functia "nume_functie()" handlerului de eveniment
"onChange" al obiectului Text respectiv, ca in exemplul de mai jos:
<input type="text" size="25" name="nume"
onChange="nume_functie(this)">
- "onChange" este atribut al etichetei <input>, a carui valoare, intre

ghilimele, este functia "nume_functie()". In locul functiei dintre
ghilimele putem sa scriem direct tot codul din functie, separand prin
caracterul ; comenzile JavaScript (acest lucru este nerecomandat in
cazul unui cod mare).
1. Evenimentele JavaScript
In continuare este prezentata o lista cu evenimentele care pot fi

folosite in programarea JavaScript:
onClick - Se executa la apasarea unui click pe un obiect.
(document, link, buton, checkbox, buton radio, buton reset
sau submit)
onDblClick - Executa actiunea la efectuarea a doua
clickuri unul dupa altul
on MouseOver - Actioneaza cand se pozitioneaza mouse-
ul deasupra unui link sau unei imagini
onMouseOut - Actioneaza cand se muta mouse-ul de pe
un hiperlink sau o imagine
onMouseMove - Actioneaza cand se misca mouse-ul
onMouseDown - Actioneaza cand tinem apasat unul din
butoanele mouse-ului, pe un document, buton sau link
onMouseUp - Actiunea se executa atunci cand este
eliberat degetul de pe unul din butoanele mouse-ului
onFocus - Actiunea apare cand este activat un obiect
camp: caseta password, camp text, bloc de text, camp
FileUpload dintr-un formular HTML.
onChange - Actiunea apare cand se modifica continutul
unui camp dintr-un formular HTML (o parola, text, bloc de
text, sau FileUpload) si cand acesta pierde focalizarea
onBlur - Este inversul lui "onFocus()", este declansat
atunci cand un obiect nu mai este activ, prin trecerea la o
alta resursa
onLoad - Actioneaza cand browserul a terminat de
incarcat un document, imagine sau toate Frame-urile dintr-
un <FRAMESET>
onUnload - Actiunea apare cand se iese din un document
si se incarca un altul.
onKeydown - Actiunea apare cand se apasa o tasta
onKeyUp - Actiunea apare dupa ce am terminat de apasat
pe o tasta
onKeyPress - Apare la apasarea unei taste (precede
"KeyDown")
onSubmit - Actiunea apare la inaintare (trimiterea) unui
formular
onReset - Actiunea apare la reinitializarea unui formular
onSelect - Actiunea apare cand utilizatorul selecteaza text
dintr-un obiect Text sau Textarea.
onAbort - Actiunea se executa in momentul in care se
renunta la incarcarea unei imagini, ferestre
onError - Actiunea apare cand actiunea de incarcare a
unei imagin sau document esueaza.
onMove - Actiunea se declanseaza cand se comanda
deplasarea ferestrei sau cadrului
onResize - Actiunea se declanseaza atunci cand se
comanda redimensionarea ferestrei sau cadrului
In continuare sunt prezentate obiectele impreuna cu evenimentele pe

care le pot folosi:
Evenimente ale ferestrelor

- onload
- onunloavd - onresize: (in Netscape)
- onmove
- onabort
- onerror
- onfocus
- onblur
Evenimente de mouse:
- onmousedown
- onmouseup
- onmousemove
- onmouseover
- onmouseout
- ondblclick
- onclick
Evenimente ale formularelor si elementelor

acestora:
- onsubmit
- onreset
- onchange
- onselect
- onclick
- onblur
- onfocus
Evenimente ale tastelor

- onkeydown
- onkeyup
- onkeypress
2. Exemple cu evenimentele JavaScript
Pentru a intelege mai bine modul de folosire a evenimentelor,

studiati exemplele de mai jos.
1. - Exemplu "onClick"
Daca dorim executia unei anumite actiuni la apasarea unui click de
mouse, folosim "onClick".
<form>
<input type="button" value="Apasa" onClick="alert('Salut')" />
</form>
Acest exemplu deschide o fereastra alert cand este apasat butonul

"Apasa".
2. - Exemplu "OnMouseOver - onMouseOut - onClick"
<html>
<head>
function setfocus() {
document.form2.camp.select();
}
</script>
</head>
<body>
<br>
<a href="http://www.marplo.net"
OnMouseOver="this.style.color='red';"
OnMouseOut="alert('Fereastra deschisa cu onMouseOut')">
Apasa aici pentru a vizita MarPlo.net!
</a>
<form name="form2">
<input type="text" name="camp" size="30" value="orice
text">
<input type="button" value="Selecteaza" onclick="setfocus()">
</form>
</body>
</html>
Pagina HTML rezultata din acest cod va afisa urmatorul rezultat:

- Cand se pozitioneaza mouse-ul pe legatura "Apasa aici pentru a
vizita MarPlo.net!", culoarea textului devine rosu (datorita expresiei
"this.style.color='red'" - "this" face referire la obiectul curent care e
actionat).
Dupa ce mutati mouse-ul de pe link, se va deschide (prin evenimentul
"onMouseOut") o fereastra Alert.
Cand apasati butonul "Selecteaza", va fi selectat textul din campul de
text.
Apasa aici pentru a vizita MarPlo.net!

orice text
3. - Exemplu "onKeyUp"
Acest script foloseste evenimentul "onKeyUp" pentru a muta

cursorul in alt camp dupa ce a fost tastat ultimul caracter permis in
caseta.
<html>
<head>

</script>
</head>
<body>
- Cursorul se muta automat in urmatoarea caseta atunci cand s-a
completat tot campul precedent
(cand se ajunge la lungimea stabilita a campului, aici 4 caractere)
<br>
<form name="form3">
<input size="4" tabindex="1" name="field" maxlength="4"
onkeyup="urmatorul(this,this.value)">
<input size="4" tabindex="2" maxlength="4"
<input size="4" tabindex="4" maxlength="4"
</form>
</body>
</html>
- Functia "urmatorul(elment,text)", are doua argumente: "element"
(care, prin apel, se refera la caseta "input") si "text" (se refera la
valoarea casetei).
In apelul functiei: "urmatorul(this,this.value)", "this" se refera la
obiectul curent (reprezinta primul argument) iar al doile argument
"this.value" reprezinta valoarea obiectului curent (valoarea din camp).
Observati folosirea evenimentului onKeyup, pentru a se trece la
urmatorul camp atunci cand s-a completat ultimul caracter din caseta
precedenta.
Pentru a intelege mai bine puteti sa inlocuiti "onkeyup" cu
onkeydown pentru a vedea diferenta.
Pagina HTML rezultata din acest cod va afisa urmatorul rezultat:
- Cursorul se muta automat in urmatoarea caseta atunci cand s-a
completat tot campul precedent (cand se ajunge la lungimea stabilita a
campului, aici 4 caractere)
Lectia 19
Obiectul image - 1
Folosind JavaScript puteti crea o multime de efecte imaginilor de

pe site.
In aceasta lectie si in urmatoarea veti invata sa lucrati cu obiectul
image, sa creati efecte cu ajutorul imaginilor, folosid JavaScript.
1. Imaginile in pagina web

In JavaScript toate imaginile sunt reprezentate intr-o matrice
numita images. Aceasta este o proprietate (si subobiect) a obiectului
"document".
Pentru indexarea in matrice (sau tablou), fiecare imagine de pe o
pagina web are un anumit numar (index). Prima imagine are numarul
0, cea de-a doua imagine are numarul 1 si asa mai departe.
Astfel, se poate face referire la prima imagine folosind expresia
"document.images[0]".
Fiecare imagine dintr-un document HTML este considarata un obiect
Image.
Un obiect Image are mai multe proprietati care pot fi accesate
prin JavaScript. De exemplu puteti vedea dimensiunile unei imagini
folosind proprietatile "width" si "height".
Urmatorul exemplu returneaza lungimea (in pixeli) a primei imagini
din document:
document.image[0].height
Declararea imaginii care apare in pagina web se face cu sintaxa

HTML:
<img src="fisier.gif" name="nume_img"
id="id_img" />
Daca sunt mai multe imagini pe o singura pagina, e mai dificil sa se

lucreze cu ele folosind numarul indexului, de aceea se poate atribui
fiecarei imagini cate un nume (cu atributul "name").
O alta metoda este folosirea proprietatii
"getElementById("id_element"), unde "id_element" este id-ul
imaginii dat cu atributul "id="..."", ca in exemplu urmator:
document.nume_img.height
sau
document.getElementById("id_img").height
Obiectul "image" are o singura metoda:

handleEvent() - reprezinta evenimentul specificat pentru
executarea unei anumite actiunie
Proprietatile obiectului image sunt urmatoarele:

Border - poate fi doar citita si este latimea marginii din
jurul imaginii specificata în pixeli
Alt - specifica textul care va fi afisat in locul imaginii(daca
nu poate fi vizualizata de browser)
Align - unde sa fie plasata imaginea
Complete - poate fi doar citita si este o valoare
booleana care permite sa stim daca imaginea a fost
descarcata complet.
Height - inaltimea in pixeli a imaginii
Hspace - se refera la spatiul din dreapta si stanga imaginii
(in pixeli)
Lowsrc - specifica un URL al unei imagini ce va fi afisata la
o rezolutie scazuta
Name - se foloseste pentru a da nume unei imagini
Src - specifica URL-ul (adresa si numele) imaginii
usemap - eticheta map
Vspace - spatiul dintre partea de sus si de jos a imaginii
Width - latimea in pixeli a imaginii
2. Incarcarea unei imagini noi
Daca doriti sa schimbati imaginile pe pagina prin JavaScript, se

foloseste propprietatea src.
Ca si in eticheta <img>, proprietatea "src" reprezinta adresa imaginii
afisate.
Cu JavaScript putem da o noua adresa imaginiii care trebuie
incarcate in pagina, astfel imaginea de la noua adresa va inlocui
vechea imagine.
Iata un exemplu prin care puteti intelege cum se face aceasta
schimbare de imagini:
<img name="imagine" src="img1.jpg" width="155" height="155">

<form>
<input type="button" onClick="document.imagine.src='img2.jpg'"
value="Schimba imaginea">
</form>
- Imaginea "img1.jpg" este incarcata si ia numele "imagine".

- Cu linia de cod "document.imagine.src='img2.jpg' se inlocuieste
fosta imagine "img1.jpg" cu o noua imagine "img2.jpg", prin apasarea
butonului "Schimba imaginea".
- Imaginea noua va fi afisata in acelasi loc, suprafata de afisare a
imaginii ramane aceeasi.
In pagina web exemplul acesta va afisa urmatorul rezultat:

Iata inca un exemplu in care avem o pagina HTML cu doua link-uri
(legaturi) care, printr-un script JS schimba afisarea mai multor imagini
in acelasi loc. Imaginile sunt declarate si stocate intr-o variabila
tablou "imagini". Pentru schimbarea imaginilor se folosesc 2 functii:
"gonext" si "goback".
<html>
<head>
<title>Titlu</title>

</script>
</head>
<body>
<h4 align=center>Imagini<br>
<img src="img/img1.jpg" name="imgs" width="155"
height="155"><br>
<a href="javascript:goback()"><<- Precedenta</a> |
<a href="javascript:gonext()">Urmatoarea ->></a>
</h4>
</body>
</html>
Dupa ce aplicati acest cod intr-un document HTML veti avea in
browser urmatorul rezultat:
Imagini
<< Precedenta | Urmatoarea >>
- Un dezavantaj al scripturilor din aceste doua exemple poate fi faptul

ca dupa apasarea butonului "Schimba imaginea" sau a link-ului
"urmatoarea >>", afisearea imagini noi poate intarzia deoarece
aceasta trebuie sa fie incarcata de browser dupa apasarea butonului
(sau a link-ului). In lectia urmatoare veti invata cum sa evitati acest
lucru prin "preincarcarea imaginilor".
Lectia 20
Obiectul image - 2
Aceasta lectie continua prezentarea modului de utilizare a

obiectului image, cu exemple ajutatoare si un script complet.
1. Preincarcarea imaginilor
In lectia precedenta a fost explicat modul de incarcare a unei

imagini noi in locul altei imagini folosind JavaScript.
In exemplul prezentat in Lectia 19 la punctul "Incarcarea unei
imagini noi", browserul trebuie sa astepte afisare noi imagini pana
cand aceasta este incarcata iar in cazul unor imagini mari asteptarea
poate dura prea mult. Acest lucru poate fi evitat prin "preincarcarea
imaginilor", toate imaginile folosite in pagina vor fi incarcate la
deschiderea acesteia (printr-un script JS) si vor fi afisate doar atunci
cand este executata o comanda de afisare.
Iata un exemplu prin care puteti intelege cum se face aceast lucru:

</script>
<img name="imagine" src="img1.jpg" width="155" height="155">
<form>
<input type="button"
onclick="document.imagine.src=hiddenImg.src" value="Schimba
imaginea">
</form>
- In interiorul scriptului, prima linie creaza un nou obiect "Image".

A doua linie defineste adresa imaginii noi care va fi incarcata si
reprezentata prin obiectul "hiddenImg". Astfel imaginea "img2.jpg"
este incarcata (dar nu afisata) cand este executata aceasta linie de
cod (la deschiderea paginii). Imaginea este pastrata in memorie
pentru folosire ulterioara, si anume cand este apasat butonul
"Schimba imaginea", care prin codul
"document.imagine.src=hiddenImg.src" va afisa imaginea "img2.jpg"
in locul celei actuale (img1.jpg). Afisarea se face imediat, fara a mai
astepta incarcarea acesteia.
Daca numarul si marimea imaginilor este mare va dura mai mult
incarcarea initiala a paginii, de aceea e bine sa aveti in vedere viteza
conexiunii pentru a sti ce metoda este mai indicata.
In pagina web exemplul acesta va afisa urmatorul rezultat:
2. Efecte mouse-over (sau rollover)
Cu mouse-over ("MouseOver" si "MouseOut") se pot crea

efecte (precum schimbarea unei poze) care apar la simpla trecere cu
mouse-ul deasupra unei zone.
Iata un exemplu foarte simplu:
<a href="#"
onMouseOver="document.Imgs.src='img1.jpg'"
onMouseOut="document.Imgs.src='img2.jpg'">
<img src="img3.jpg" name="Imgs" width="155" height="155"
border="0">
</a>
- Dupa cum observati, "onMouseOver" si "onMouseOut" au fost

adaugate in interiorul etichetei <a>, e gresit daca le adaugati in
eticheta <img>. Imaginile nu pot reactiona la evenimentele
"MouseOver" si "MouseOut", trebuie sa punem o eticheta de legatura
(link) langa imagini.
Acest exemplu va afisa in browser urmatorul rezultat:
- Initial este afisata imaginea "img3.jpg", cand pozitionati mouse-ul
deasupra imaginii va fi afisata "img1.jpg" iar dupa ce departati
mouse-ul, va apare imaginea "img2.jpg".
Daca doriti ca efectul de schimbare a imaginii sa apara cand
pozitionati mouse-ul pe un link si nu pe imagine, puteti modifica
exemplul astfel (<img> va fi adaugat in afara etichetei
"<a>...</a>"):
<a href="#"
onMouseOver="document.Imgs.src='img1.jpg'"
onMouseOut="document.Imgs.src='img2.jpg'">Legatura</a><b
r>
<img src="img3.jpg" name="Imgs" width="155" height="155"
border="0">
- Acest exemplu este mai mult de studiu pentru a intelege procedeul

de utilizare a efectelor "mouse-over". Nu este potrivit pentru
adaugarea intr-o pagina web profesionala deoarece cauzeaza unele
probleme:
Imaginile "img1.jpg" si "img2.jpg" nu au fost preincarcate
si astfel apar intarzieri in afisarea lor.
Daca vom folosi mai multe seturi de imagini trebuie scris
codul JavaScripty pentru fiecare separat.
Pentru folosirea modelului si in alte pagini, poate necesita
modificari substantiale.
Iata un script complet care evita problemele de mai sus, desi este mai
lung, o data scris poate fi folosit cu usurinta si pt. alte pagini web si
cu un numar mai mare de imagini.
<html>
<head>

</script>

</script>
</head>
<body>
<a href="adresa1.htmll" onMouseOver="on('link1')"
onMouseOut="off()">
<img name="link1" src="link1.gif" width="100" height="100"
border="0"></a>
<a href="adresa2.html" onMouseOver="on('link2')"
onMouseOut="off()">
border="0"></a>
<a href="adresa2.html" onMouseOver="on('link3')"
onMouseOut="off()">
border="0"></a>
</body>
</html>
Acest exemplu foloseste 3 imagini (respectiv 3 link-uri in BODY), dar
puteti adauga si 100.
Scriptul pune toate imaginile intr-o matrice "pics" a carei elemente
sunt construite de functia "preload()", care este apelata la inceput.
Apelul functiei "preload()" se face in felul urmator: "preload("link1",
"img1.jpg", "img1t.jpg");", ceea ce inseamna ca scriptul trebuie sa
incarce doua imagini "img1.jpg" si "img1t.jpg" pentru "link1". Prima
imagine este imaginea care va fi afisata cand cursorul mouse-ului
este în exteriorul imaginii. Iar atunci cand cursorul este pozitionat
deasupra imaginii, va fi afisata cea de-a doua imagine. Cu primul
argument "name" ("link1") al functiei "preload()" specificam carui
obiect Image de pe pagina web apartin imaginile. In corpul
( <body> ) al exemplului veti gasi o imagine cu numele "link1".
Cele doua functii "on()" si "off()" sunt apelate prin evenimentele
"onMouseOver" si "onMouseOut". Puteti observa ca functia "on()"
trimite in spate toate celelalte imagini afisate initial (care sunt
adaugate direct in eticheta <img>). Aceasta este necesar deoarece
se poate intampla ca mai multe imagini sa fie afisate accentuat (de
exemplu, evenimentul "MouseOut" nu are loc atunci cand utilizatorul
muta cursorul de deasupra imaginii direct în afara ferestrei).
Incercati sa testati si sa studiati acest script, astfel veti intelegeti
modul lui de functionare.- Lectia 20
Lectia 21
Obiectul Form - 1
Formularele sunt elemente HTML care dau viata unor pagini statice
deoarece asigura o interfata prin care vizitatorii pot interactiona, cu
ajutorul controalelor (elemente ale formularului).
Obiectul Form este mijlocul prin care se poate interactiona cu
acest element HTML in scripturile JavaScript.
1. Metode si proprietati ale obiectului form
Dupa cum ati invatat in lectiile precedente, obiectele JavaScript au

proprietati si metode.
Proprietatile obiectului "Form" sunt urmatoarele:
action - contine atributul "action" din eticheta <form>,

specifica adresa URL unde este trimis formularul
elements - matricea care contine toate elementele din
<form>
encoding - contine atributul "enctype" din <form>,
specifica o codificare MIME a formularului
length - numarul de elemente continute in formular
method - contine atributul "method" din <form>,
defineste felul in care formularul este trimis serverului (get
sau post)
name - contine atributul "name" al unei etichetei <form>
target - contine atributul "target" al etichetei <form>,
specifica fereastra in care serverul ar trebui sa returneze
informatiile. Daca nu este specificata, serverul afiseaza
rezultatele in fereastra care a expediat formularul.
Obiectul "Form" are urmatoarele metode:

handleEvent() - apeleaza handlerul de eveniment
specificat
reset() - readuce elementele formularului la valorile
prestabilite
submit() - declanseaza un eveniment "submit" care
trimite datele spre programul specificat in atributul
"action" al etichetei <form>
2. Trimiterea formularelor spre server
Limbajul JavaScript permite prelucrarea datelor introduse in

formular inainte ca acestea sa fie trimise spre procesare la programul
(scriptul) de pe server.
Puteti expedia dadele unui formular utilizand una din cele doua
modalitati:
1. - Prin apelarea metodei "submit()" a obiectului "Form".
2. - Prin click pe un buton Submit care trimite automat
datele din formularul de care apartine.
Multe din proprietatile obiectului "Form" se ocupa de informatiile

suplimentare care sunt trimise la server prin intermediul formularului.
Aceste proprietati sunt:
- action - specifica adresa URL a programului catre care vor fi trimise
datele din formular
Exemplu:
<form name="f1"
action="http://www.marplo.net/script.php"
method="post">
Pentru formularele care folosesc metoda "post" puteti preciza in
atributul "action" ca datele sa fie trimise prin e-mail, folosind
urmatoarea sintaxa:
<form name="f2" action="mailto:adresa_de_email"
method="post">
- Cand expediati formularul, se va deschide un client de e-mail ce

contine, printre altele, si perechile de "nume-valoare" ale elementelor
(casetelor) cuprinse in formular.
- enctype - specifica o codificare MIME a formularului, valoarea

prestabilita este "application/x-www-form-urlencode".
O metoda de verificare a acestei codificari este urmatoarea:
if(f1.enctype == "application/x-www-form-urlencode") {
alert("Tipul de codificare e normal");
}
Un alt tip de codificare des folosit este "text/plain".

Iata un exemplu:
<form method="post" name="f3"

action="mailto:adresa_de_mail" enctype="text/plain">
Va place site-ul? <br>
<input name="alege" type="radio" value="1" checked>Da
<br>
<input name="alege" type="radio" value="2">Nu <br>
<input name="alege" type="submit" value="Trimite">
</form>
- Proprietatea "enctype="text/plain"" este folosita pentru a trimite

text neformatat. Prin aceasta, mailul va fi mai usor de citit, in cadrul
mesajului va apare optiunea aleasa. Fara specificarea acestei
proprietati mailul va avea ca atasament un fisier cu optiunea aleasa.
- method - defineste modul in care datele formularului sunt

expediate, folosind "get" sau "post".
Pentru formularele care folosesc metoda "get", in majoriatea site-

urilor este disponibil un program CGI de testare, numit "test-cgi"
furnizat impreuna cu serverul (locatia fisierului "test-cgi" poate fi
diferita, intrebati administratorul serverului). Folositi urmatoarea
sintaxa:
<form action="http://nume_site/cgi-bin/test-cgi"
method="get">
Veti primi o pagina care va contine, printre altele, si valorile
elementelor din formular.
Pentru incepatori, mai putin cunoscatori si pentru folosirea cu
scripturi PHP, este recomandata metoda "post".
Pentru formularele care folosesc metoda "post", in majoriatea site-
urilor este disponibil un program CGI de testare, numit "post-query"
furnizat impreuna cu serverul (locatia acestuia poate fi diferita,
intrebati administratorul serverului). Daca doriti sa verificati ce
date trimite formularul, folositi urmatoarea eticheta:
<form action="http://nume_site/cgi-bin/post-query"
method="post">
- Cand trimiteti formularul veti primi, printre altele si perechile

de "nume-valoare" corespunzatoare elementelor din formular.
Puteti verifica tipul metodei de trimitere a datelor si cu un script
JavaScript, ca in exemplul urmator:

</script>
Daca doriti sa faceti o verificare a datelor din formular inainte ca

acestea sa fi expediate la server, puteti folosi evenimentul
"onSubmit". - onSubmit - este folosita pentru a valida formularul
inainte de a fi trimis.
Metoda "onSubmit" se introduce in interiorul etichetei <form>, ca in
exemplul urmator:

</script>
...
<form method="post" name="nume_form" action="script.php"
onSubmit="return validare()">
...
- Despre validarea datelor dintr-un formular veti putea invata mai
multe in lectia urmatoare.- Lectia 21
Lectia 22
Obiectul Form - 2
1. Utilizarea metodei focus si select

Cu metodele focus() si select() puteti adauga formulaului
anumite efecte grafice si sa selectati casetele dorite.
Puteti defini care element sa atraga atentia la inceput.
Puteti transmite navigatorului sa revina în locul din formular unde
au fost introduse datele gresite, astfel browser-ul va pozitiona
cursorul în elementul din formular specificat. Acest lucru se poate
face printr-un script ca cel din exemplul urmator

</script>
- Unde "nume_form" este numele formularului specfificat in atributul

"name" din eticheta <form> iar "nume_camp" este numele campului
din formular unde va fi pozitionat cursorul (specificat in atributul
"name" din eticheta campului respecftiv).
Daca doriti sa atrageti atentia sau sa pozitionati cursorul asupra unui
anumit element din formular atunci cand pagina este incarcata,
adaugati o proprietate "onload" in eticheta <body>, ca in exdemplu
urmator :
<body onload="setfocus()">
Iata un al exemplu in care campul dorit dintr-un formular atrage

atentia si este si selectat :
<html>
<head>

</script>
</head>
<body onload="setfocus()">
<form name="form1">
<input type="text" name="camp1" value="un text"> <br>
<input type="text" name="camp2" value="text selectat">
</form>
</body>
</html>
- Daca adaugati codul de mai sus intr-un document HTML, cand il veti
deschide cu un browser va fi selectat automat textul din campul doi.
2. Validarea si verificarea datelor introduse in

formular
De cele mai multe ori folosim formulare pentru ca datele introduse

in acestea sa fie trimise inapoi la server pentru procesare sau prin
posta electronica catre un cont de email.
Cu ajutorul JavaScript datele introduse intr-un formular pot fi cu
usurinta verificate inainte de a fi transmise, astfel putem usura
traficul si in plus ne putem asigura ca s-au transmis date corecte. De
exemplu: sa nu se transmita inputuri fara date în ele, sau ca o adresa
e-mail sa contina caracterul @.
Pentru a intelege mai bine vom folosi un exemplu ce contine un
formular cu 2 elemente text: "nume" si "email" si un buton "Submit"
pt. trimiterea datelor. Vizitatorul trebuie sa introduca numele în
primul text si adresa de e-mail în al doilea. Pentru verificarea este
adaugat un script JavaScript care verifica datele introduse inainte ca
acestea sa fie trimise la server.
<html>
<head>

</script>
</head>
<body>
<form name="form1" action="test.php" method="post">
Scrieti numele dvs.:<br>
<input type="text" name="nume"> <br>
Adaugati adresa de e-mail :<br>
<input type="text" name="email"> <br>
<input type="submit" name="submit" value="Trimite"
onClick="return verifica(this.form)">
</form>
</body>
</html>
- Functia "verifica()" este apelata in eticheta butonului submit prin

metoda "onClick="return verifica(this.form)"", argumentul "this.form"
este transmis catre functie si face referire la elementele din
formularul curent. Astfel, cand este apasat butonul "Trimite" se
executa imediat functia "verifica()".
Aceasta verifica cu prima instructiune "if" daca elementul "nume" din
formular are valoarea nula (adica nu a fost scris nici un caracter), se
compara cu "" pentru a verifica daca sirul este gol. Daca valoarea
este nula conditia "if" primeste valoarea "adevarata" si se executa,
deschide o fereastra Alert si apoi returneaza "false" (astfel datele nu
mai sunt trimise). Daca in casuta "nume" este adaugat vreun caracter
valoarea acesteia nu mai e nula (sirul nu e gol) si conditia
"if(form.nume.value == "")" nu mai este adevarata si se trece la
executia urmatoarei linii de cod a functie.
A doua instructiune "else if (form.email.value == "" ||
form.email.value.indexOf('@', 0) == -1 || form.email.value.indexOf('.',
0) == -1)" este ceva mai complicata, verifica daca valoarea
elementului "email" din formular este nula sau (prin operatorul "OR"
||) daca acesta nu contine caracterele '@' sau punct (.); aceasta
deoarece orice adresa de e-mail trebuie sa contina cele doua
caractere. Daca la verificarea celor trei conditii (valoare nula, lipsa
caracterului '@' si lipsa caracterului punct) vreuna din ele este
adevarata, instructiunea "else if" se executa si va deschide o
fereastra Alert apoi returneaza "false'.
In caz contrar, daca nici una din conditiile instructiunii "if", "else if" nu
este adevarata, functia "verifica()" returneaza "true" si datele vor fi
trimise la server.
In browser veti avea urmatorul rezultat:
Scrieti numele dvs.:
Adaugati adresa de e-mail :
Trimite
- Puteti introduce orice în formular si apoi apasati butonul "Trimite".

De asemenea incercati sa nu introduceti nimic si sa apasati butonul,
sau la campul pt. email adaugati o adresa incompleta (fara @ sau(.)).
Veti vedea rezultatul acestui script.
Daca introduceti datele corect nu va apare nici un mesaj.
- In exemplul de mai sus puteti folosi in loc de metoda "onClick()" din
eticheta butonlui Submit, metoda "onSubmit()", aceasta se adauga
direct in eticheta <form>, dupa cum este prezentat mai jos:
<form name="form1" action="test.php" method="post"
onSubmit="return verifica(this)">
Rezultatul va fi acelasi.- Lectia 22
Lectia 23
Obiectul window - 1
Ferestrele sunt cele mai importante elemente de interfata in

browser, iar JavaScript ofera multe modalitati de a le manipula.
In acesta lectie veti invata despre obiectul window, proprietatile
si metodele acestuia, cum sa creati noi ferestre (pop-up) si sa le
inchideti.
1. Proprietatile si metodele obiectului window
Un browser (indiferent de nume sau producator) este prezentat

intr-o fereastra si tot ceea ce utilizatorul face cu browserul se executa
in interiorul acelei ferestre. Toate elementele unei pagini web sunt de
asemenea continute in fereastra respectiva.
Obiectul "Window" este considerat obiectul de nivel ierarhic cel
mai inalt in ierarhia obiectelor JavaScript pe partea de client si contine
toate celelalte obiecte pe partea de client (cu exceptia obiectului
"navigator", conceptual diferit, nefiind un element propriu-zis vizual).
Dupa cum în practica se poate lucra cu mai multe ferestre deschise
simultan, la fel se poate lucra si cu mai multe obiecte "Window" (de
fapt cate unul pentru fiecare fereastra).
Obiectul "Window" se creaza automat atunci cand se deschide o
noua fereastra de browser.
Atentie sa nu confundati ferestrele distincte de browser cu cadrele
(frame-urile), care de asemenea mai sunt numite ferestre (fiind de
fapt subferestre ale ferestrei de browser).
Ca si celelalte obiecte si "Window" are o serie de proprietati si
metode. Fiind obiectul de nivelul cel mai inalt unele dintre acestea pot
fi apelate sau se poate face referire la ele fara a folosi in fata lor
expresia "window." (cum e de exemplu metoda "alert()").
Obiectul window are urmatoarele proprietati:

closed - specifica daca instanta "window" a fost inchisa
crypto - permite accesul la caracteristicile de criptare din
Netscape
defaultStatus - specifica mesajul prestabilit in bara de
stare a ferestrei
document - mentioneaza toate informatiile despre
documentul din aceasta fereastra
frames - mentioneaza toate informatiile despre cadrele
din aceasta fereastra
history - mentioneaza adresele URL vizitate de utilizator in
fereasrtra curenta
innerHeight - contine inaltimea in pixeli a zonei afisate
din fereastra curenta
innerWidth - contine latimea in pixeli a zonei afisate din
fereastra curenta
length - reprezinta numarul de cadre din fereastra curenta
location - contine adresa URL curenta incarcata in browser
locationbar - face referire la bara de locatie a browserului

locationbar.visible - contine valoarea booleana care
indica daca bara de locatie de pe browserul utilizatorului
este vizibila
menubar - face referire la bara de meniuri a browserului
menubar.visible - contine valoarea booleana care indica
daca bara de meniuri de pe browserul utilizatorului este
vizibila
name - contine numele ferestrei
offscreen-Buffering - contine o valoare booleana care ne
permite sa determinam daca vreo actualizare a ferestrei
este executata intr-un buffer din afara ecranului
opener - contine numele ferestrei din care a fost deschisa
o fereastra secundara
outerHeight - contine inaltimea in pixeli a suprafetei din
exteriorul ferestrei curente
outerWidth - contine latimea in pixeli a suprafetei din
exteriorul ferestrei curente
pageXOffset - contine coordonata X a ferestrei curente
pageYOffset - contine coordonata Y a ferestrei curente
parent - face referire la fereastra de nivelul cel mai inalt
care afiseaza cadrul curent
personalbar - mentioneaza informatii despre bara
personala a browserului
personalbar.visible - contine valoarea booleana care
indica daca bara personala de pe browserul utilizatorului
este vizibila
screenX - face referire la coordonata X a browserului, din
marginea stanga a ferestrei (Netscape)
screenY - face referire la coordonata Y a browserului din
marginea de sus a ferestrei
scrollbars - face referire la barele de derulare ale
browserului
scrollbars.visible - contine valoarea booleana care indica
daca barele de derulare de pe browserul utilizatorului sunt
vizibile
self - face referire la fereastra curenta
status - face referire la mesajul de pe bara de stare a
ferestrei
statusbar - face referire la bara de stare a browserului
statusbar.visible - contine valoarea booleana care indica
daca bara de stare a browserului utilizatorului este vizibila
toolbar - face referire la bara de instrumente a
browserului
toolbar.visible - contine valoarea booleana care indica
daca bara de instrumente a browserului utilizatorului este
vizibila
top - face referire la fereastra de nivelul cel mai inalt care
afiseaza cadrul curent
window - face referire la fereastra curenta
Obiectul window are urmatoarele metode:

atob() - decodifica un sir care a fost codificat in baza 64
alert() - afiseaza o fereastra de avertizare cu un anumit sir
de text
back() - incarca o pagina anterioara vizitata in fereastra
curenta
blur() - dezactiveaza o fereastra
btob() - codifica un sir in baza 64
captureEvents() - stabileste ca fereastra sa captureze
toate evenimentele de un tip specificat
clearInterval() - sterge intervalul stabilit cu metoda
"setInterval()"
clearTimeout() - sterge pauza stabilita cu metoda
"setTimeout()"
close() - inchide fereastra
confirm() - afiseaza o fereastra de confirmare
crypto.random() - genereaza un sir aleator de date, a
carui lungime este specificata de numarul de octeti
transferati
crypto.signText() - intoarce un sir de date codificate care
reprezinta un obiect semnat
disableExternalCapture() - dezactiveaza capturarea
unui eveniment extern
enableExternalCapture() - activeaza capturarea unui
eveniment extern pentru paginile incarcate din alte servere
find() - afiseaza o caseta de dialog "Find" in care

utilizatorul poate introduce text pentru cautare in pagina
curenta
focus() - activeaza instanta "window" specificata
forward() - incarca urmatoarea pagina in locul paginii
curente din fereastra
specificat
home() - incarca pagina de baza specificata a utilizatorului
in locul paginii curente din browser
moveBy() - deplaseaza fereastra cu valoarea specificata
moveTo() - deplaseaza fereastra in locatia specificata
open() - deschide o noua instanta a unei ferestre
print() - apeleaza caseta de dialog "Print" astfel ca
utilizatorul sa poata tipari fereastra curenta
prompt() - afiseaza o fereastra cu caseta de dialog
"prompt"
releaseEvents() - elibereaza evenimentele capturate de
un tip specificat
resizeBy() - redimensioneaza fereastra cu valoarea
specificata
resizeTo() - redimensioneaza fereastra la valoarea
indicata
routeEvent() - transfera evenimentele de un tip specificat
pentru a fi tratate nativ
scroll() - deruleaza documentul in fereastra pana la o
locatie specificata
scrollBy() - deruleaza documentul in fereastra cu o
valoare specificata
scrollTo() - deruleaza documentul pe latime si inaltime
pana la o locatie specificata din fereastra
setHotKeys() - permite comutarea intre activarea si
dezactivarea tastelor de selectare rapida cand nu sunt
prezente meniuri
setInterval() - apeleaza o functie sau evalueaza o
expresie la intervale de timp (constand intr-un anumit
numar de milisecunde)
setResizeable() - permite specificarea posibilitatii
redimensionarii unei ferestre
setTimeout() - apeleaza o functie sau evalueaza o
expresie dupa un anumit numar de milisecunde
setZOptions() - permite specificarea asezarii in ordinea Z
(tridimensionala) a unei ferestre
stop() - opreste fereastra curenta sa incarce alt element in
ea
2. Crearea ferestrelor pop-up (metoda open)
Folosind JavaScript puteti deschide o noua fereastra in care se

incarca o pagina HTML, cu dimensiuni, pozitie si proprietati stabilite
de dv.. Aceste ferestre mai sunt numite si ferestre pop-up.
Pentru a crea o astfel de fereastra puteti folosi metoda "open", avand
urmatoarea sintaxa:
open("URL", "nume", "proprietati")
Unde :
- URL - reprezinta adresa documentului care va fi afisat in
fereastra (e optional)
- nume - este un sir care specifica numele ferestrei (e
optional)
- proprietati - este o lista de proprietati ale ferestrei
(dimensiune, pozitionare, si altele). (e optional)
Proprietatile trebuie sa fie separate prin virgula si fara
spatii intre ele.
Urmatorul script deschide o noua fereastra (numita si pop-up) care

are dimensiunile 400x300 pixeli. Fereastra nu are bara de
instrumente, bara de stare sau bara de meniu si va fi deschisa la o
distanta de 200 pixeli fata de marginea din stanga si 100 pixeli fata
de marginea de sus.

</script>
<form>
<input type="button" value="Deschide fereastra"
onclick="open_window()">
</form>
- Butonul "Deschide fereastra" apeleaza, la click, functia

"open_window()" care prin variabila "fereastra" executa metoda
"open()", aceasta va deschide o fereastra noua cu proprietatile
adaugate in metoda.
- Observati ca "fereastra" nu este numele ferestrei. Puteti accesa
fereastra prin intermediul acestei variabile. Aceasta este o variabila
normala care este valabila numai în interiorul unui script. Numele
ferestrei (aici "numeFereastra") este un nume unic care poate fi
folosit de toate ferestrele browserului.
Adaugand acest cod intr-un document HTML, in browser veti avea un
buton ca cel de jos.
- Cand apasati pe buton, se va deschide o fereastra pop-up cu

proprietatile specificate in metoda "open()".
3. Inchiderea ferestrelor (metoda close)

Pentru inchiderea unei ferestre se foloseste metoda close(). In
fereastra pe care dorim sa o inchidem cu aceasta metoda adaugam
un element de legatura <a> (link) sau un buton in care adaugam un
eveniment "onClick" care executa metoda "close()" (sau
"self.close()"), ca in exemplul urmator:
<a href="#" onclick="self.close()">Inchide</a>

sau
<form>
<input type="button" value="Inchide" onclick="self.close()">
</form>
Cele doua elemente de inchidere a ferestrei au fost adaugate in

pagina care se deschide cu fereastra pop-up din exemplul anterior.
open() si close() sunt metode ale obiectului "window". Normal am scrie
window.open() si window.close(), dar obiectul "window" este o
exceptie. Nu trebuie scris cuvantul "window" daca se apeleaza o metoda
a unui obiect fereastra (aceasta este valabil numai pentru obiectul
window).
- Lectia 23
Lectia 24
Obiectul window - 2
Aceasta lectie continua prezentarea altor modalitati de folosire a

ferestrelor.
1. Ferestre "on the fly" ("din mers")
Pentru a creea diferite ferestre trebuie sa scriem mai multe fisiere

HTML.
Putem scrie scripturi care sa creeze ele documentul HTML (tag-
urile, etichetele) care sa apara în fereastra noua, astfel nu mai este
nevoie sa cream cate un fisier pentru fiecare pagina care va fi
deschisa.
Puteti incarca aceste documente generate de script intr-o fereastra
separata sau intr-un frame.
In primul rand trebuie modificata sintaxa "open", astfel incat sa nu
incarce nici o pagina, deci in locul unde trebuie scrisa adresa URL
vom scrie numai "" (doua ghilimele duble).
Pentru a crea continutul paginii HTML care va aparea în fereastra e
necesar sa folosim metoda document.write() prin care pot fi create
textul si codul pentru elementele HTML ale paginii.
Iata un exemplu din care veti putea intelege mai bine:
<html>
<head>
<title>Document generat de JavaScript</title>

</script>
</head>
<body>
<form>
<input type="button" value="On_the_fly"
onClick="openWindow()">
</form>
</body>
</html>
- Sa studiem functia windowOpen(). Vedem ca mai intai deschide o
noua fereastra browser, cu metoda "open()".
- Primul argument al metodei este un sir gol (""), astfel nu va fi
deschis un document extern. JavaScript o sa creeze noul document.
Am definit variabila "myWindow" prin care accesam noua fereastra
(Observati ca nu puteti folosi numele ferestrei "numeFereastra"
pentru aceasta operatie).
Dupa ce am deschis fereatra, vom deschide documentul care va fi
afisat, asta se realizeaza prin
myWindow.document.open()
S-a folosit metoda "open()" a obiectului "document" (este diferita de

metoda "open()" a obiectului "window"). Aceasta deschide un
document in fereastra, pregatind documentul pentru urmatorul input.
Tot prin variabila "myWindow" si cu ajutorul "document.write" creem
documentul dorit (codul HTML si continutul documentului afisat in
noua fereastra). Puteti scrie orice etichete HTML sau text.
Dupa afisarea continutului din document, trebuie sa inchidem crearea
documentul, aceasta se face prin urmatorul cod:
myWindow.document.close();
- aceasta linie de cod inchide "deschiderea de creare" a

documentului, si nu fereastra.
Dupa ce adaugati tot acest cod intr-un fisier HTML, in browser veti
avea un buton ca cel de jos, apasati pe el!
Aceasta metoda de crearea a paginilor printr-un script JavaScript este

recomandata pentru ferestre gen pop-up, NU pentru pagini de site
(paginare) cu un continut bogat!
2. Bara de stare (statusbar)
Bara de stare (statusbar) este bara din josul ferestrei browser-ului.

Programele JavaScript pot scrie in aceasta bara, pentru aceasta
trebuie sa dati o valoare lui:
window.status
Urmatorul exemplu va arata doua butoane, unul pentru a afisa un

text in statusbar iar celalalt pentru stergerea acestui text.
<html>
<head>

</script>
</head>
<body>
<form>
<input type="button" name="scrie" value="Scrie in statusbar"
onClick="statusbar('bara de stare!');">
<input type="button" name="sterge" value="Stegere"
onClick="statusbar('');">
</form>
</body>
</html>
- Scriptul este simplu, avem o functie cu un argument

"statusbar(text)", argumentul functiei (variabila "text") este transmis
expresiei "window.status", care va afisea valoarea acestuia in bara de
stare.
Am creat un formular cu doua butoane. Ambele butoane apeleaza
prin evenimentul "onClick" functia "statusbar()". Butonul "Scrie"
transmite functiei argumentul sir "Aici este bara de stare!", acest sir
reprezinta valoarea variabilei "text" si va fi afisat in bara de stare.
- Pentru stergerea textului din statusbar, al doilea buton transmite
functiei un sir gol, doua ghilimele simple (''), care preluat ca argument
va determina expresia "window.status" sa inlocuiasca textul deja
existent in bara de stare cu un sir gol.
Acest cod va arata in browser urmatoarele doua butoane:
- Apasati primul si al doilea buton, observati rezultatul obtinut in bara

de stare.
Browserul Mozilla Firefox ar putea avea anulata optiunea de
schimbare a textului din Statusbar, pentru activarea acestei optiuni in
Mozilla Firefox, deschideti Tools - Options - Content aici asigurativa
ca butonul "Enable JavaScript" este bifat, dati click pe Advanced si
bifati "Change status bar text".
3. Utilizare setTimeout()
Cu ajutorul unui numarator (setTimeout) puteti face computerul

sa execute un anumit cod dupa o anumita perioada de timp
(specificata in milisecunde).
Sintaxa generala a acestuia este:
setTimeout("expresie", timp)
Unde "expresie" este expresia (codul) care va fi executat iar "timp"
reprezinta pauza de timp - in milisecunde - dupa care va fi executata
"expresie".
In urmatorul exemplu se creaza un buton iar daca apasati acest buton
o fereastra va aparea dupa 3 secunde:

</script>
<form>
<input type="button" value="Timer" onClick="timer()" />
</form>
setTimeout() este o metoda a obiectului window. Aceasta metoda

fixeaza pauza (intreruperea) pana la executie.
Primul argument este codul JavaScript care va fi executat dupa o
anumita perioada de timp, aici avem "alert('S-a folosit metoda
setTimeout')". Observati ca secventa de cod JavaScript trebuie sa fie
intre ghilimile. Cel de-al doilea argument spune computerului care
este momentul în care codul va fi executat, trebuie sa specificati
timpul în milisecunde (3000 millisecunde = 3 secunde).
Ruland acest exemplu intr-un browser, va arata urmatorul button:
- Click pe butonul "Timer" si asteptati 3 secunde, se va deschide o

fereastra Alert.- Lectia 24
Lectia 25
Ferestre Frame
In prezent noile metode si tendinte de creare a site-urilor folosesc
mai putin frame-uri (cadre). Chiar daca nu le veti folosi, e bine sa
cunoasteti aceste elemente deoarece le puteti gasi in alte documente
si sa stiti despre ce este vorba.
Cadrele (frame-uri) sunt subferestre ale unei ferestre principale, in
care sunt incluse.
1. Crearea cadrelor
Fereastra navigatorului poate fi impartita în mai multe frame-uri

(cadre). Un frame este o parte din suprafata ferestrei browserului.
Fiecare frame prezinta în interior un document propriu (in general
un document HTML). De exemplu puteti creea doua frame-uri intr-o
fereastra, in primul frame puteti incarca o pagina de la o adresa (ex.
google.com) iar in al doilea frame o alta pagina, de la alta adresa (ex.
yahoo.com).
Crearea de frame-uri apartine limbajului HTML, dar am sa descriu
cateva lucruri de baza.
Pentru crearea de frame-uri se pot folosi urmatoarele etichete HTML:
<frameset> , <frame> si <iframe>
Un exemplu de cod HTML care creaza o pagina cu doua frame-uri este

urmatorul:
<html>
<frameset rows="50%,50%">
<frame src="pagina1.html" name="frame1">
<frame src="pagina2.html" name="frame2">
</frameset>
</html>
- Proprietatea "row" din eticheta <frameset> aseaza cele doua frame-

uri in linie, unul deasupra celuilalt.
Primul frame, de deasupra, incarca si afiseaza "pagina1.html" iar al
doilea frame incarca si afiseaza "pagina2.html".
Daca vreti sa asezati cele doua frame-uri in coloana, unul langa altul,
inlocuiti cuvantul "row" cu "cols".
Expresia "50%,50%" reprezinta dimensiunea fiecarui cadru,
exprimata in procente in raport cu fereastra principala.
Fiecare frame trebuie sa aibe un nume unic, exprimat prin atributul
"name" din eticheta <frame>, cu ajutorul acestui nume se poate
accesa in JavaScript cadrul dorit.
Pentru mai multe detalii desprea crearea de cadre, vedeti Cadre
(lectia 10) din cursul HTML.
Pentru crearea unui cadru cu <iframe> puteti folosi urmatoarea
sintaxa:
<iframe src="url_pagina" width="600" height="200"
align="center" scrolling="yes"
frameborder="0"
name="nume_frame">
</iframe>
- Unde "url_pagina" e adresa paginii care va fi incarcata in iframe,

"width" si "height" reprezinta lungimea respectiv inaltimea cadrului
(exprimata in procente sau pixeli), "scrolling" reprezinta permisiunea
de derulare a paginii din cadru (yes sau no), "frameborder" specifica
daca va fi sau nu afisata o margine (bordura) pentru cadru (1=da,
0=nu), iar "nume_frame" este numele cadrului care va fi folosit de
JavaScript.
2. Obiectul Frame
Acest obiect face referire la un cadru (un frame) dintr-o structura

de cadre incluse intr-o fereastra.
Intr-o pagina cu mai multe cadre, obiectul "Window" reprezinta de
fapt pagina care contine tagul <frameset>, iar celelalte pagini sunt
considerate cadre in acest context.
Obiectul frame are urmatoarele proprietati:

document - reprezinta documentul curent incarcat in
interiorul unui cadru
frames - tablou ce contine referiri la cadrele copil
length - lungimea tabloului de cadre (nnumarul de
elemende)
name - atributul "name" al etichetei <frame>
parent - fereastra principala sau cadrul principal din
care sunt create cadrele copil
self - reprezinta referire la cadrul curent
top - fereastra de browser care executa scriptul
window - face referire la fereastra curenta sau la cadrul
curent
Obiectul frame are urmatoarele metode:

blur() - dezactiveaza cadrul
clearInterval() - anuleaza o executie repetata
clearTimeout() - anuleaza orice executie intarziata
focus() - activeaza un cadru
print() - apeleaza caseta de dialog "Print"
setInterval() - stabileste planificarea functiei pentru
executare repetata
setTimeout() - stabileste planificarea functiei pentru
executare intarziata
3. Frame-uri si JavaScript
Ierarhia elementelor paginii HTML create in primul exemplu (cele 2

cadre "frame1" si "frame2" asezate in linie) este urmatoarea:
fereastra browser (parinte), care este in varful ierarhiei,
aceasta contine doua cadre copii - "frame1" si "frame2"
Cu ajutorul numelor date cadrelor putem schimba informatii intre cele

doua frame-uri impreuna cu fereastra principala, de exemplu putem
face un link intr-un frame care sa deschida o pagina in celalalt frame.
In continuare vom studia trei cazuri de relatii si accesari intre
ferestrele copil si fereastra parinte.
1. Fereastra parinte acceseaza o fereastra copil
• Daca aveti un script in fereastra parinte, ca sa se

acceseze prin el frame-urile trebuie doar folosit numele
frame-ului.
De exemplu:
frame1.document.write("Mesaj de la fereastra
parinte");
2. Fereastra copil acceseaza fereastra parinte

• Acest procedeu e util cand vreti sa eliminati cadrele din
fereastra principala. Eliminarea structuri de cadre se
face prin incarcarea unei pagini noi in locul paginii
principale care a creat frame-ul (aici fereastra parinte).
• Se poate accesa fereastra parinte din interiorul unei
ferestre copil cu ajutorul expresiei "parent". Pentru a
incarca un document nou in fereastra parinte se
foloseste "location.href", caruia ii dam un nou URL, ca
in exemplul urmator:
o parent.location.href = "http://adresa_url";
(adresa_url este adresa noi pagini care va fi
incarcata)
3. O fereastra copil acceseaza o alta fereastra copil

• Nu exista legatura directa intre cele doua cadre, primul
frame nu cunoaste existenta celuilalt.
• Pentru fereastra parinte, al doilea cadru (frame) este
numit "frame2" iar fereastra principala, vazuta din
primul frame este numita "parent". Astfel, pentru a avea
acces din primul frame la obiectul "document" al celui
de-al doilea frame trebuie sa scriem urmatoarele:
o parent.frame2.document.write("Apel de la
cadrul frame1");
4. Navigarea prin cadre

Prin "navigarea prin cadre" se intelege deschiderea paginilor intr-
un frame sau in fereastra principala printr-un link din alt frame. Acest
lucru se poate face prin mai multe metode.
Pentru a intelegere mai bine, vom lua un exemplu concret.
Folosim o pagina cu doua cadre, in al doilea cadru vom avea legaturi
catre mai multe pagini, dar care se vor incarca in primul cadru.
<html>
<frameset rows="85%,15%">
<frame src="prima.html" name="frame1">
<frame src="meniu.html" name="frame2">
</frameset>
</html>
Pagina "prima.html" reprezinta pagina initiala care va fi incarcata in

primul frame, cu numele "frame1" (poate fi orice document HTML).
Pentru pagina care va fi incarcata in al doilea frame (meniu.html) vom
folosi codul de mai jos pentru crearea ei.
<html>
<head>
<script language="JavaScript">

</script>
</head>
<body>
<center>
<a href="javascript:load('test1.htm')">Link1</a> (<i>cu
JavaScript</i>) --
<a href="test2.htm" target="frame1">Link2</a> (<i>cu
target="frame1"</i>) --
<a href="test2.htm" target="_top">Link3</a> (<i>cu
target="_top"</i>)
</center>
</body>
</html>
- Pentru a vedea cum functioneaza acest exemplu, click pe acest
buton ->
- Se observa diferitele moduri de a incarca o pagina noua.
- Primul link (Link1) foloseste functia "load()" dintr-un

script
- Al doilea link (Link2) foloseste atributul "target",
metoda standard HTML pentru cadre
- Al treilea link (Link3) foloseste tot atributul "target",
de data aceasta prin valoarea "_top" va incarca
pagina noua direct in fereastra principala, eliminand
astfel cadrele.
In functie de proiectul dv. puteti decide care varianta e mai potrivita.

Folosind atributul HTML "target" este metoda cea mai simpla.
Solutia JavaScript este recomandata daca doriti sa faceti mai multe
lucruri ca o consecinta a click-ului pe un link, de exemplu cand doriti
ca printr-un click sa deschideti doua ferestre, in doua cadre diferite.
Pentru aceasta puteti utiliza urmatorul script:

</script>
- Cand va fi apelata fuctia "loadtwo()", va incarca "pagina1.html" in
"frame1" si "pagina2.html" in "frame2".- Lectia 25
Lectia 26
Cookie-uri - 1
Valorile majoritatii variabilelor dintr-un script dispar atunci cand

fereastra navigatorului este inchisa. Spre deosebire de acestea,
valorile variabilelor cookie se pot pastra un timp indefinit. Pentru ca
valorile lor sa se poata pastra, browserul utilizatorului stocheaza
variabilele cookie în unitatea de hard-disc a utilizatorului.
Astfel, cookie-urile sunt fisiere care contin diferite date despre un
anumit site vizitat si valori de variabile, salvate pe calculatorul
vizitatorului.
In aceasta lectie veti invata cum puteti folosi JavaScript pentru a
manipula fisiere cookie.
1. Fisierele cookie
Un cookie consta in principal dintr-o pereche nume=valoare, iar

caracteristici mai avansate permit stabilirea unei date de expirare si
pot preciza ce pagini web vad informatia cookie.
Unul dintre avantajele folosirii fisierelor cookie este persistenta
acestora. Un fisier cookie poate persista luni de zile (sau ani),
simplificand vizitele ulterioare ale utilizatorului pe site, deoarece
informatiile referitoare la vizite si preferintele utilizatorului sunt
salvate si preluate din cookie de fiecare data cand va reveni la site.
Fisierele cookie sunt deosebit de utile cand sunt folosite cu
JavaScript, deoarece JavaScript are functii pentru citirea, adaugarea si
editarea fisierelor cookie.
Fisierele cookie au si unele dezavantaje, fiind stocate pe
calculatorul utilizatorului acestea poat fi sterse din gresela (sau
intentionat).
Browserul impune restrictii privind dimensiunea si numarul de
fisiere cookie care pot fi stocate, iar fisierele cookie mai noi le pot
suprascrie pe cele vechi.
- Numarul total de cookie-uri pentru un server sau
domeniu este de 200
- Numarul total de fisiere cookie pentru un browser este
de 300
- Marimea maxima a unui fisier cookie este 4 kb.
Daca aceste limite sunt depasite, browserul va sterge cele mai vechi
cookie-uri si nefolosite.
Cand un utilizator trece de la un browser la altul, fisierele cookie
salvate de un browser nu sunt recunoscute de celalalt
Daca mai multi utilizatori folosesc acelasi calculator si acelasi browser
ei pot folosi fisiere cookie care apartin altcuiva.
Cele mai multe browsere stocheaza informatiile cookie in fisiere text
necriptate, de aceea informatiile private precum parole, numere
personale nu trebuie stocate direct intr-un cookie.
Utilizatorul poate configura browserul astfel incat sa interzica
anexarea de cookie, in acest caz aplicatia care foloseste cookie ar
putea sa nu functioneze.
2. Stocarea si regasirea valorilor unui cookie
Numele si valorile dintr-un cookie sunt stocate si stabilite utilizand

proprietatea cookie a obiectului Document.
Pentru a stoca sirul cookie intr-o variabila se foloseste o comanda
precum aceasta:
var myCookie = document.cookie
Pentru a afisa intr-o pagina web sirul astfel stocat , puteti folosi
comanda:
document.write(document.cookie)
JavaScript stocheaza fisierele cookie in formatul urmator:

nume1=valoare1; nume2=valoare2; nume3=valoare3
Unde "nume1", "nume2" si "nume3" reprezinta numele fiecarui

cookie, iar "valoare1", "valoare2" si "valoare3" reprezinta valorile care
vor fi adaugate si stocate in fiecare cookie.
Perechile nume=valoare sunt separate prin caracterul punct si
virgula (;) si un spatiu, iar dupa ultima pereche nu se mai pune
caracterul punct si virgula.
Pentru extragerea si utilizarea valorilor din fisierele cookie, trebuie sa
prelucrati sirul obtinut prin comanda "document.cookie".
Pentru a simplifica regasirea unei valori dintr-un fisier cookie, puteti
folosi o functie ca cea din urmatorul script:
function GetCookie (name) {
var result = null;
var myCookie = " " + document.cookie + ";"; // toate
sirurile de cookie incep cu spatiu si se incheie cu ;
var searchName = " " + name + "="; // se cauta tot ce e
intre name si = urmator
var startOfCookie = myCookie.indexOf(searchName);
var endOfCookie;
if (startOfCookie != -1) { // daca gaseste ceva intre ele
startOfCookie += searchName.length; // omite nume
cookie anterior
endOfCookie = myCookie.indexOf(";", startOfCookie);
result = unescape(myCookie.substring(startOfCookie,
endOfCookie));
}
return result;
}
var valoare_c = GetCookie('nume_cookie');

document.write(valoare_c); // Afiseaza valoarea cookie-ului
cautat, sau cuvantul null
</script>
- Functia "GetCookie(name)" prelucreaza sirul obtinut de comanda

"document.cookie" si verifica daca exista cookie-ul cu numele
transmis ca argument functiei. Daca cookie-ul cu numele respectiv
exista, atribuie variabilei "result" valoarea asociata numelui si functia
va returna aceasta valoare. Daca numele nu exista, valoarea
variabilei "result", si returnata de functie, ramane "null".
- Variabila "valoare_c" apeleaza functia "GetCookie()", unde
'nume_cookie' dintre paranteze, este numele cookie-ului a carui
valoare doriti sa o obtineti.
Prin comanda "document.write(valoare_c)" scriptul va afisa valoarea
acestei variabile, care este cea returnata de functie.
3. Stabilirea valorilor unui cookie
Combinatia nume=valoare este informatia minima de care aveti

nevoie pentru a defini un cookie, dar un cookie bine definit inseamna
mai mult de atat.
Iata o lista de parametrii ce pot fi utilizati pentru a specifica un
cookie:
nume=valoare
expires=date
path=path
domain=nume_domeniu
secure
a. Nume si valoare
• Nume si valoare poate fi orice
cuvinte doriti
Exemplu:
culoare favorita=blue
id=num:1
• Cea mai simpla functie pentru

stabilirea unui cookie poate arata
astfel:
function SetareCookie(name, value) {

document.cookie = name + "+" + escape(value);
• Pentru siguranta, valoarea este codificata folosind

functia "escape()". Daca in sir ar exista un caracter ";" ar
puteaa fi o problema, dar aceasta functie elimina
aceasta problema.
In general operatorul = este de atribuire, dar in cazul
cookie-urilor fiecare nou "name" pe care il atribuiti este
adaugat la lista de cookie activa, iar daca adaugati
acelasi nume se va rescrie peste cel vechi.
b. Data de expirare
• Parametrul "expires=data" reprezinta data si timpul
(in formatul Wdy, DD-Mon-YYYY HH:MM:SS GMT) cand
cookie-ul va expira si va fi sters de pe hard-disc.
Perioada de expirare trebuie transformata in
milisecunde.
Daca nu este specificat nici un timp de expirare,
cookie-ul va dispare la inchiderea navigatorului.
• Iata un exemplu in care data de expirare este dupa o
saptamana:
var name = "culoare"

var value = "blue"
var oneWeek = 7*24*60*60*1000 // Data de
expirare se stabileste in mulisecunde
var expDate = new Date()
expDate.setTime(expDate.getTime()+oneWeek);
document.cookie = name + "=" + escape(value) +
"; expires=" + expDate.toGMTString()
• Observati ca data de expirare

(dateExp) este prelucrata pentru a
se incheia cu sirul GMT.
c. Path
• In mod implicit fisierele cookie sunt disponibile si pentru
alte pagini web din acelasi director al paginii la care au
fost create.
Parametrul path permite unui cookie sa fie folosit
si de pagini din alte directoare ale aceluiasi domeniu.
Daca valoarea parametrului "path" este un subsir al
adresei URL a unei pagini, fisierele cookie create cu acel
parametru "path" sunt disponibile pentru respectiva
pagina.
De exemplu, puteti crea un cookie folosind
urmatoarea comanda:
document.cookie = "nume=valoare;
path=/nume_director";
• Aceasta face ca fisierul cookie cu numele "nume" sa fie
disponibil pentru fiecare pagina din directorul
"nume_director" cat si penrtru subdirectoarele acestuia.
• Daca ati avea urmatoarea comanda:
document.cookie = "culoare=blue; path=/javascript/test";

• Fisierul cookie "culoare" ar fi disponibil pentru toate
fisierele din directorul "javascript/test" si subdirectoare
ale acestuia, dar nu va fi disponibil pt. fisierele din
directorul "/javascript".
Calea generala pentru ca fisierul cookie sa poata
fi folosit de toate paginile unui domeniu, din toate
directoarele, este calea radacina "/" (path=/).
d. Domain
• Asa cum parametrul "path" face un cookie disponibil si in alte

directoare, parametrul domain il face disponibil pentru
alte servere Web sau subdomenii ale aceluias site.
Folosirea parametrului "domain" impune folosirea a cel
putin doua caractere punct (.) daca domeniul dvs se
incheie cu .com, .net ... (de ex. .marplo.net) Sirul
parametrului "domain" trebuie sa fie identic cu sfarsitul
numelui de domeniu al serverului dvs.
Atunci cind se cauta un cookie in lista de cookie-uri se
efectueaza si o comparatie intre valoarea acestui atribut
si adresa domeniului din care s-a receptionat antetul
HTTP. Comparatia se realizeaza pornind de la sufixul
valorilor comparate, in sensul ca daca avem
"domain=marplo.net atunci aceasta valoare se va
potrivi cu un nume de gazda precum "info.marplo.net".
Dupa ce s-a efectuat aceasta comparatie, in cazul in

care cookie-ul este validat se va verifica si valoarea
atributului "path".
e. Secure
• Daca un cookie este marcat ca secure, prin intermediul
acestui atribut, va fi transmis numai daca tranzactia
HTTP este una sigura (folosindu-se protocolul HTTPS).
In felul acesta un cookie este transmis doar daca
intruneste toate conditiile de validitate (se potrivesc
domeniul, calea de directoare, timpul de expirare si
securitatea canalului de comunicatie).
Daca parametrul "secure" nu este adaugat in
comanda de creare a fisierului cookie, acesta va trimis
intr-o forma necriptata prin retea.
In urmaorul exemplu este prezentata o functie care defineste fisierele

cookie cu toti parametri:
function SetCookie (name, value, expires, path, domain, secure) {

var expString = ((expires == null) ? "" : ("; expires=" +
expires.toGMTString()));
var pathString = ((path == null) ? "" : ("; path=" + path));
var domainString = ((domain == null) ? "" : ("; domain=" +
domain));
var secureString = ((secure == true) ? "; secure" : "");
document.cookie = name + "=" + escape (value) + expString +
pathString + domainString +secureString;
}
Observati folosirea operatorului conditional ?
Pentru a folosi acesta functie, o apelati cu orice parametrii doriti sa
stabiliti si utilizati cuvantul "null" in locul parametrilor care nu
conteaza.
- In lectia urmatoare ("Lectia 27") veti gasi explicata metoda de
stergere a cookie-urilor si un exemplu complet de creare si utilizare
cookie.- Lectia 26
Lectia 27
Cookie-uri - 2
1. Fisiere cookie cu acelasi nume

Daca un browser are mai multe fisiere cookie pentru un site si au
acelasi nume, definite fiecare cu alta cale in parametrul "path", si cu
valori diferite, de exemplu daca avem trei fisiere cookie cu numele
"color", sirul cookie ar arata astfel:
• color=blue; color=green;
color=white
In cazul acesta, pentru a numara valorile asociate unui nume cookie

puteti folosi urmatoarea functie:
function GetCookieCount (name) {

var result = 0;
var myCookie = " " + document.cookie + ";";
var searchName = " " + name + "=";
var nameLength = searchName.length;
while (startOfCookie != -1) {
result += 1;
startOfCookie = myCookie.indexOf(searchName,
startOfCookie + nameLength);
}
return result;
}
Impreuna cu aceasta functie care numara cate valori asociate exista,

trebuie sa aveti si o functie care sa regaseasca o anumita instanta a
unui cookie, cum este urmatoarea:
function GetCookieNum (name, cookieNum) {

var result = null;
if (cookieNum >= 1) {
var myCookie = " " + document.cookie + ";";
var searchName = " " + name + "=";
var nameLength = searchName.length;
var cntr = 0;
for (cntr = 1; cntr < cookieNum; cntr++) {
startOfCookie = myCookie.indexOf(searchName,
startOfCookie + nameLength);
}
if (startOfCookie != -1) {
startOfCookie += nameLength; // omite nume cookie
anterior
var endOfCookie = myCookie.indexOf(";", startOfCookie);
result = unescape(myCookie.substring(startOfCookie,
endOfCookie));
}
}
return result;
}
2. Stergerea unui cookie
Pentru a sterge un cookie, numele si calea (daca a fost specificat

parametrul "path") trebuie sa fie aceleasi cu numele si calea folosite
la stabilirea fisierului cookie.
Stergerea unui cookie se face prin stabilirea datei de expirare la un
moment in trecut, ca in exemplul urmator:
function ClearCookie (name) {

var ThreeDays = 3*24*60*60*1000;
var expDate = new Date();
expDate.setTime (expDate.getTime() - ThreeDays);
document.cookie = name + "=ImOutOfHere; expires=" +
expDate.toGMTString();
}
3. Exemplu complet utilizare cookie
Pentru a intelege mai bine cum puteti crea si folosi fisierele cookie,
studiati exemplul urmator.
Exemplul este ceva mai complex, cuprinde un script cu mai multe
functii care contin multe din elementele invatate in lectiile anterioare
cat si altele mai avansate, pentru lucrul cu siruri.
Scopul acestui exemplu este de a intelege cum functioneaza
fisierele cookie, acesta contine in sectiunea HEAD a unui document
HTML un script JavaScript in care sunt definite 4 functii pentru lucrul
cu fisiere cookie, iar in corpul paginii, BODY, este creat un tabel HTML
cu 2 coloane, in prima este un formular pentru scrierea unor
preferinte care vor fi trimise la script pentru inregistrarea acestora in
cookie, iar a doua coloana contine un buton care activeaza afisarea
preferintelor din cookie si un alt buton care sterge cookie-urile.
Codul complet este urmatorul:

<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
<title>Exemplu utilizare cookie</title>

</script>
</head>
<body>
<table border="1" bordercolor="#8888fe" width="580"

cellpadding="2" cellspacing="0">
<tr><td>
<form name="preferinte">
Scrieti culoarea favorita:
<input type="text" name="culoare" size="20" maxlength="40"
/><br /><br />
Scrieti fructele preferate:
<input type="text" name="fructe" size="20"
maxlength="40" /><br /><br />
Scrieti o fraza (un citat) favorita:<br />
<input type="text" name="citat" size="40" maxlength="80"
/><br /><br />
<input type="button" value="Favorite" name="buton"
onclick="SetCookie()" />
<input type="reset" value="Reset" name="reset" />
</form>
</td><td>
<form name="preferinte2">
<input type="button" value="Afiseaza Favorite" name="buton"
onclick="getCookie('cookie1', 'cookie2',
'cookie3')" />
<input type="button" value="Sterge cookie" name="Clear"
onclick="stergeCookie('cookie1', 'cookie2',
'cookie3')" />
</form>
<b>Culoare favorita - </b><span id="idculoare"> </span><br />
<b>Fructe preferate - </b><span id="idfructe"> </span><br />
<b>Citat favorit - </b><span id="idcitat"> </span><br />
</td></tr>
</table>
</body>
</html>
- Functiile din script au fost definite pentru acest exemplu, pentru

folosirea lor in alte scripturi necesita modificari.
Dupa ce adaugati acest cod intr-un document HTML, in browser veti
avea afisat urmatorul rezultat:
Scrieti culoarea favorita:
Scrieti fructele preferate:

Culoare favorita -
Scrieti o fraza (un citat) favorita: Fructe preferate -
Citat favorit -
Reset
- Apasati intai butonul din dreapta "Afiseaza Favorie", vor fi afisate

mesaje de eroare, precum ca nu ati adaugat inca o preferinta.
Completati in campurile din stanga preferintele dv. apoi apasati
butonul "Favorite", acesta apeleaza functia "SetCookie()" care va
prelua datele adaugate si le va stoca in fisiere cookie care vor expira
peste doua zile de la crearea lor.
Dati click pe butonul "Afiseaza Favorite", acesta apeleaza functia
"getCookie()" careia ii trimite ca argumente numele cookie-urilor a
caror valoare va fi afisata, vor apare preferintele scrise de dv.,
preluate din cookie.
Importanta si avantajul fisierelor cookie le veti constata dupa aceasta.
Inchideti broweser-ul, redeshideti-l iar la aceasta pagina si apasati
butonul "Afiseaza Favorite". Observati ca sunt afisate preferintele dv.
adaugate mai devreme. Maine, daca reveniti la aceasta pagina vor fi
afisate aceleasi preferinte, fara sa trebuiasca sa le mai scrieti. Aceste
date sunt pastrate 2 zile in fisiere cookie dupa care vor fi sterse
automat.
Daca vreti sa stergeti aceste cookie-uri mai devreme, apasati butonul
"Sterge cookie", acesta apeleaza functia "stergeCookie()" careia ii
trimite ca argumente numele cookie-urilor pe care sa le stearga. -
Lectia 27
Lectia 28
Lucrul cu getElementById
ID-ul este un atribut care poate fi adaugat in etichetele (sau tag-

urile) HTML. Prin valoarea data acestui atribut se atribuie un nume
unic etichetei respective. Acest "id" poate fi folosit in stilurile CSS
pentru a defini aspectul grafic si aranjarea in pagina a tag-ului
respectiv, dar poate fi folosit si in scripturi JavaScript pentru a lucra cu
elementele si continutul etichetei HTML. Astfel, id-ul poate face o
legatura intre JavaScript si orice eticheta HTML din document.
Pentru a face referire intr-un script JS la o eticeta HTML, prin
intermediul id-ului acesteia, se foloseste urmatoarea sintaxa:
document.getElementById("id")
- getElementById("id") este o proprietate a obiectului "document",

aceasta, dupa cum sugereaza si denumirea, obtine elementul care
are id-ul dintre paranteze.
- Puteti folosi si ghilimele simple (' ') pentru numele id-ului din
paranteze.
Aceasta sintaxa "document.getElementById("id")" returneaza o
referinta la intreg elementul HTML care are acest "id", va defini un
obiect continand atributele si continutul acestuia. Pentru a face
referire la anumite parti din acest obiect (element HTML), de exemplu
la continut sau la un atribut "style", se folosesc proprietati specifice
acestui obiect de nivel 2. Mai jos este prezentata o lista cu cele mai
folosite.
Proprietati folosite cu "document.getElementById("id")"

attributes[] - contine intr-o matrice (cu index de la 0)
toate atributele etichetei HTML apelate. Acestea se
adauga in matrice incepand de la dreapta spre stanga.
Are 2 proprietati:
name - returneaza numele atributului apelat
value - returneaza valoarea atributului apelat
childNodes - contine o ierarhie de obiecte care sunt

adaugate in matrice. Aceste obiecte sunt formate din
elemente ale intreg continutului tag-ului respectiv.
Pentru a apela obiectele din fiecare nivel ierarhic se
folosesc proprietati specifice. Pentru mai multe detalii
cititi documentatia de aici.
Spre exemplu, daca doriti sa obtineti continutul de tip
text dintr-un tag, puteti folosi expresia:
document.getElementById("id").childNodes[0].no
deValue
className - preia sau modifica valoarea atributului
"class"
Exemplu: pt. preluare - var cls=obiect.className;
si pt. atribuire - obiect.className='nume';
getAttribute("atribut") - obtine valoarea atributului
specificat intre paranteze
setAttribute("atribut", "valoare") - modifica valoarea
atributului specificat cu val. data
removeAttribute("atribut") - elimina existenta
atributului specificat intre paranteze
href - defineste sau obtine valoarea atributului "href"
(adresa URL) din etichetele pentru link-uri
innerHTML - returneaza sau schimba continutul,
inclusiv cod HTML, incadrat de o eticheta HTML
src - defineste sau obtine valoarea atributului "src" din
etichetele <img>
style - defineste valori ale atributului "style", folosit
pentru elemente de stil CSS. Aceasta proprietate este
urmata de o proprietatea tip CSS.
value - se foloseste pentru elemente de formular (din
<form>), obtine sau defineste valoarea unei casete (cu
un anume id) din formular
Pentru a intelege mai bine cum se lucreazaa cu

"document.getElementById("id")" si proprietatile prezentate mai sus,
iata cateva exemple cu fiecare.
1. attributes[]
In acest exemplu folosim o functie JavaScript care este actionata

cand se exzecuta click pe un link, aceasta va afisa o fereastra Alert cu
numele atributului al doilea din eticheta pentru link.

</script>
<a href="#" id="id_link" title="Link pt. test"

onclick="test(this)">Un link</a>
- Observati ca nu am folosit "document.getElementById("un_id")", dar

am folosit proprietatea "this". Aceasta face referire la elementul
curent care este actionat, astfel, in script, in loc de
val.attributes[1].name se putea folosi
document.getElementById('id_link').attributes[1].name, rezultatul aici
este acelasi.
- Acest exemplu va afisa in pagina un link precum urmatorul, dati
click pentru a vedea rezultatul.
Un link
- Observati ca fereastra Alert va afisa "title", numele atributului, care
desi este al treile, adaugarea in matricea "attributes[]" se face de la
dreapta si primul element are insex 0, al doilea 1 (aici 'title'), si tot
asa.
2. childNodes
Lucrul cu childNodes necesita cunoasterea mai multor proprietati

care apartin de acesta, dar aici voi prezenta un exemplu simplu ca sa
intelegeti cum se foloseste.
In acest exemplu avem un DIV in cadrul careia este un text
oarecare si o eticheta SPAN. Pentru a vedea rezultatul scriptului cu
"childNodes", un link apeleaza functia acestui script.

</script>
<div id="ex2">Un text oarecare - <span>JavaScript in

span</span> - alt text</div>
<a href="#" onclick="test2()" title="Exemplu cu
childNodes">Test 2</a>
- "document.getElementById("ex2").childNodes[1].childNodes[0]" s-ar
putea traduce:
primul element ( childNodes[0] ) al elementului doi ( childNodes[1] )
din eticheta cu id="ex2", iar "nodeValue" returneaza valoarea.
- Acest exemplu va afisa in pagina urmatoarele doua randuri, dati
click pe link-ul "Test 2" pentru a vedea rezultatul.
Un text oarecare - JavaScript in span - alt text
Test 2
- Va afisa textul din SPAN, eticheta <span> cu tot continutul ei este al
doilea element al DIV-ului (primul fiind sirul "Un text oarecare -"), iar
sirul din cadrul etichetei SPAN este primul element al acesteia.
3. getAttribute() si setAttribute()
In acest exemplu sunt folosite doua link-uri care actioneaza o

functie JS care va prelua valoarea atributului specificat (aici 'title') si o
va afisa in fereastra Alert.
Al doilea link transmite parametrul 1, caz in care functia va
modifica valoarea atributului "title" din primul link inainte de
preluarea lui, rezultat care se va vedea in fereastra Alert.

</script>
<a href="#" id="ex3" title="Exemplu cu getAttribute()"

onclick="test3(0)">Link 1</a> -
<a href="#" title="Link 2 - setAttribute()" onclick="test3(1)">Link
2</a>
- Acest exemplu va afisa in pagina urmatoarele doua link-uri, dati
click pe primul apoi pe al doilea si iar pe primul; veti observa
diferenta.
Link 1 - Link 2
Sfat: Cand doriti sa schimbati valoarea unei clase, in loc de

"setAttribute()" folositi className, deoarece IE creaza probleme cu
"setAttribute" pt. clase.
Exemplu:
obiect.className = 'nume_clasa';
4. href
Aici este prezentat un exemplu care modifica adresa URL adaugata

in atributul 'href' al unui link.

</script>
<a href="http://www.marplo.net/jocuri/" id="ex4" title="Exemplu cu

href" target="_blank">Jocuri</a>
- Link-ul de mai jos, desi are scris in codul lui sa deschida pagina de
jocuri, prin evenimentul 'onmouseover' care apeleaza functia "test4()"
la pozitionarea mouse-ului pe link se modificat valoarea atributului
'href' si va deschide alta pagina (aceea setata in functie).
Jocuri
- Similar puteti proceda si cu "src", care se refera la atributul 'src' din

tag-urile <img>
5. innerHTML
Cu innerHTML se poate prelua continutul incadrat de o eticheta

HTML, dar poate sa si inlocuiasca cu altul acest continut, folosind
inclusiv tag-uri.
In acest exemplu avem DIV-ul de la exemplu 2 si doua link-uri,
acestea apeleaza o functie JS care pentru primul link va afisa o
fereastra Alert cu tot continutul DIV-ului iar pentru al doile link va
inlocui acest continut cu sirul din atributul 'title' (transmis ca
parametru).

</script>
<div id="ex5">Un text oarecare - <span>JavaScript in

span</span> - alt text</div>
<a href="#" title="Exemplu cu innerHTML"

onclick="test5(0)">Afiseaza Alert</a> -
<a href="#" title="Exemplu cu innerHTML - inlocuire"
onclick="test5(this.getAttribute('title'))">
Modifica DIV</a>
- In pagina va afisa urmatorul rezultat; dati click pe primul link si apoi

pe al doilea.
Un text oarecare - JavaScript in span - alt text
Afiseaza Alert - Modifica DIV

- Observati ca desi este folosita aceeasi expresie
"document.getElementById("ex5").innerHTML", aceasta are efecte
opuse.
Cand se afla in dreapta caracterului '=' (ca valoare a unei variabile),
aceasta expresie obtine continutul din eticheta HTML respectiva.
Cand este scrisa in stanga egalului, aceasta expresie va inlocui
continutul etichetei HTML cu valoarea adaugata dupa egal, in
dreapta.
6. style
Cu style puteti modifica grafic elementele din pagina, pentru
aceasta se folosesc proprietatile si valorile specifice CSS. Sintaxa
generala este:
document.getElementById("id").style.proprietate="valoare
"
- "proprietate" si "valoare" sunt preluate din CSS, exemplu: color
(proprietate) si blue (valoare).
- diferenta apare la proprietatile CSS compuse, cum e "font-weight",
"margin-top" sau "border-top-width" si altele similare. In JavaScript
dispare liniuta '-' si cuvintele urmatoare se scriu cu primul caracter
majuscula, astfel pentru "font-weight" din CSS in JS este "fontWeight",
iar pentru "border-top-width" in JS este "borderTopWidth".
In exemplul prezentat aici avem un DIV in cadrul caruia este un
link si un tag SPAN care la inceput are "display:none" (nu apare in
pagina). O functie JavaScript care este apelata cu "onmouseover" face
ca atunci cand mouse-ul este pe link sa apara continutul din SPAN
(adauga acestuia "display:inline") si cand mouse-ul este pozitionat
deasupra acestuia, textul devine albastru si ingrosat.

</script>
<div>
<a href="#" title="Exemplu cu style"
onmouseover="test6(0)">Link ex6</a>
- <span id="ex6" style="display:none;"
onmouseover="test6(1)">Textul din SPAN, ascuns</span>
</div>
- In pagina va apare urmatorul link, pozitionati mouse-ul pe el apoi

mutati cursorul pe textul care apare.
Link ex6 -
7. value
Proprietatea value se foloseste cu elemente din formular, aceasta
preia sau atribue valori in campurile din formular.
"value" se poate folosi si cu proprietati specifice lucrului cu
formulare, in care se utilizeaza numele din atributul "name". (Vedeti
detalii si exemple la Lectia 12 si Lectia 13).
- Pentru a folosi proprietatea "value" impreuna cu
"getElementById('id')", campul sau caseta de formular la care se face
referire trebuie sa aibe atribuita un "id".
Iata un exemplu simplu care afiseaza intr-o fereastra Alert textul
scris intr-o caseta de text.

</script>
<form action="" method="post">

<input type="text" id="ex7" />
<input type="button" value="Click" onclick="test7()" />
</form>
- Codul de mai sus va afisa urmatorul rezultat.
- Scrieti ceva in caseta de text si apasati pe butonul "Click".
Click
- Lectia 28
Lectia 29
Lucrul cu getElementsByTagName
getElementsByTagName() este o functie, sau metoda JavaScript

care obtine si face referire la toate elementele HTML a caror eticheta
este spoecificata ca parametru intre paranteze. De exemplu:
document.getElementsByTagName('div')
- face referire la toate tag-urile DIV din documentul HTML.
Aceasta functie stocheaza elementele pe care le-a obtinut intr-
un obiect de tip Array (o matrice secventiala), unde cheile sunt
numere intregi incepand de la zero. Astfel, daca intr-un document
HTML sunt 3 DIV-uri si apelam functia
document.getElementsByTagName('div'), aceasta va forma un obiect
ce are o matrice cu 3 elemente care contin fiecare o referinta la cate
un DIV, iar pentru a face referire la primul DIV, se scrie expresia:
document.getElementsByTagName('div')[0] , pentru al doilea DIV se
foloseste cheia [1] si tot asa.
Proprietatile care pot fi folosite cu "getElementBiId()" (functie
prezentata in lectia anterioara) le puteti folosi si cu elementele din
obiectul obtinut cu "getElementsByTagName()".
Ca sa intelegeti mai bine cum se lucreaza cu aceasta functie, studiati
fiecare din exemplele de mai jos.
1. Aplicarea unei proprietati elementelor cu acelasi

tag
Pentru aplicarea unei proprietati elementelor HTML care au acelasi

tag, trebuie parcursa matricea obtinuta cu metoda
getElementsByTagName(). Ca formula generala poate fi folosit
urmatorul cod:
var elemente =
document.getElementsByTagName('numeTag');
for (var i=0; i<elemente.length; i++) {
elemente[i].proprietate;
}
- Unde "elemente" este o variabila in care e stocata matricea cu tag-

urile obtinute
- Functia "for()" parcurge aceasta matrice, folosind si expresia
"elemente.length" care preia numarul de elemente din matrice.
- Iar "elemente[i].proprietate" atribuie proprietatea dorita fiecarui
element (tag).
Iata un exemplu in care atunci cand se da click pe un cuvant special
definit, continutul din fiecare tag SPAN va fi subliniat si albastru
function ad_style(tag) {
// Obtine obiectul cu toate tag-urile precizate
var get_tags = document.getElementsByTagName(tag);
// Parcurge matricea cu tag-urile

for (var i=0; i<get_tags.length; i++) {
// Atribue proprietati de stil
get_tags[i].style.textDecoration = 'underline';
get_tags[i].style.color = 'blue';
}
}
</script>
<h4 style="cursor:pointer;"
onclick="ad_style('span')"><u>Click</u></h4>
Continut cu text incadrat in etichete SPAN:<br />
www.marplo.net : <span>Cursuri</span> si
<span>tutoriale</span> web <span>gratuite</span>.
- Cand apasati pe cuvantul "Click", apeleaza functia "ad_style()"

careia ii transmite ca parametru numele tag-ului (aici 'span'). Functia
preia tag-urile din parametrul precizat, si parcurgand matricea cu
acestea, atribuie fiecaruia un stil subliniat (underline) si culoarea
albastra.
- Pentru a vedea efectul, dati click pe cuvantul "Click" de jos.
Click
Continut cu text incadrat in etichete SPAN:

www.marplo.net : Cursuri si tutoriale web gratuite.
2. getElementById() si getElementsByTagName()
Cand folositi "getElementsByTagName(numeTag)" imediat dupa

obiectul "document", se preia tag-urile 'numeTag' din tot documentul
HTML, dar sunt cazuri cand doriti preluarea unor tag-uri dintr-o
anumita portiune a paginii, cum ar fi de exemplu dintr-un DIV sau UL.
In acest caz, adaugati acelui element HTML un ID (in care se afla tag-
urile respective) si in codul JS definiti un obiect cu acesta folosind
metoda "getElementById(ID)", apoi la acest obiect aplicati functia
"getElementsByTagName()".
Sintaxa generala e urmatoarea:
var variabila =
document.getElementById(ID).getElementsByTagName(numeT
ag)
- "numeTag" fiind tag-urile care vor fi preluate si care se afla in cadrul
etichetei HTML care are id-ul "ID".
- Acestea vor fi stocate in "variabila" sub forma de matrice, pe care o
puteti parcurge cu o functie "for()".
Iata si un exemplu in care sunt doua liste <ul> diferite, iar cand este
apasat un cuvant special definit, va fi aplicat un efect doar tag-urilor
<li> a uneia din ele.
function ad_style2(id, tag) {
// Obtine elementul cu id-ul din parametru 'id'
var el_id = document.getElementById(id);
// Obtine obiectul cu toate tag-urile din 'el_id', precizate la

parametru 'tag'
var get_tags = el_id.getElementsByTagName(tag);

// Coloreaza si ingroasa textul
get_tags[i].style.color = 'blue';
get_tags[i].style.fontWeight = 'bold';
}
}
</script>
<h4 style="cursor:pointer;" onclick="ad_style2('ul2',
'li')"><u>Click</u></h4>
<ul id="ul1">
<li>Text din ul1 ...</li>
</ul>
<ul id="ul2">
</ul>
- Observati ca functia "ad_style2(id, tag)" preia doi parametri: 'id'

pentru id-ul elementului principal in care se afla tag-urile, iar 'tag'
pentru numele tag-urilor care vor fi preluate. In felul acesta puteti
folosi aceeasi functia si pentru alte grupuri (id si tag) diferite.
- Explicatiile necesare sunt cele din codul script-ului. Pentru a vedea
rezultatul, apasati pe cuvantul "Click" de mai jos
Click
• Text din ul1 ...

3. getAttribute() si getElementsByTagName()
Sunt situatii in care trebuie aplicate efecte sau proprietati

JavaScript doar la unele elemente (care au acelasi atribut) dintr-o
grupa cu aceleasi tag-uri. Cel mai adesea sunt cazurile in care este
folosit atributul "class".
Daca doriti sa adaugati un efect sau proprietate doar elementelor
HTML care au aceeasi clasa (si acelasi tag), folositi metoda
getAttribute('class') in cadrul parcurgerii matricei obtinute cu
"getElementsByTagName()". Ca o formula generala ar fi urmatoarea:
var elemente =
document.getElementsByTagName(numeTag);
for (var i=0; i<elemente.length; i++) {
if (elemente[i].getAttribute('class')=='numeClasa')
{
// Executati functia sau codul dorit
}
}
- Unde "numeClasa" e numele clasei din tag-urile "numeTag" la care

doriti sa aplicati un anume cod sau functie.
Ca sa intelegeti mai bine, studiati exemplul urmator in care sunt trei

etichete <span> intr-un paragraf, iar la apasarea pe un cuvant
"Click", va fi adaugata o culoare de fundal doar continutului din doua
etichete SPAN (care au class="cls").
function ad_style3(tag, clasa) {
// Obtine obiectul cu toate tag-urile precizate
var get_tags = document.getElementsByTagName(tag);

// Daca elementul are clasa din parametru 'clasa'
if (get_tags[i].getAttribute('class')==clasa) {
// Ii adauga o proprietate 'backgroundColor'
get_tags[i].style.backgroundColor = '#adfead';
}
}
}
</script>
<h4 style="cursor:pointer;" onclick="ad_style3('span',
'cls')"><u>Click</u></h4>
<p>Continut cu text incadrat in etichete SPAN:<br />
<span class="cls">Cursuri</span>, si <span
class="cls">tutoriale</span>
web <span>gratuite</span></p>
- Cand apasati cuvantul "Click", este apelata functia "ad_style3(tag,

clasa), aceasta primeste ca parametri numele tag-ului si al clasei la
care va aplica efectul. Rezultatul il puteti vedea mai jos.
Click
Continut cu text incadrat in etichete SPAN:
Cursuri, si tutoriale web gratuite
4. Preluarea tag-urilor la incarcarea paginii
Adaugand in etichetele HTML evenimentele JavaScript specifice,

precum "onclick()", "onmouseover()" (si altele prezentate in Lectia
18), se poate apela o functie dupa executarea evenimentului
respectiv. Precum in exemplele din aceasta lectie, functiile sunt
apelate cu "onclick()"; dar pentru aceasta trebuie specificat acest
atribut intr-o eticheta HTML, iar tag-urile dorite sunt preluate numai
dupa executarea evenimentului JS.
Exista si alta metoda, JavaScript are posibilitatea de preluare a tag-
urilor si stocarea evenimentelor in memorie la incarcarea paginii,
lucru util cand se doreste aplicarea de proprietati si efecte la
incarcarea paginii, in plus nu mai trebuie adaugat evenimentul
respectiv ca atribut intr-o eticheta HTML.
In principiu, se atribuie unei variabile un obiect "tip functie" apoi
aceasta variabila este apelata cu proprietatea window.onload care
determina executia ei la incarcarea paginii.
Studiati cu atentie codul din exemplul urmator. Acesta preia
valoarea atributului "class" si continutul fiecarui tag <li> din pagina la
incarcarea acesteia si pot fi afisate intr-o fereastra Alert cand se da
click pe ele.
<html>
<head>
<title>Preincarcarea tag-urilor</title>
<style type="text/css">
.cli { cursor:pointer; }
</style>
// Se defineste variabila cu functia obiect
var get_li = function () {
// Preia tag-urile LI din pagina
var tags_li = document.getElementsByTagName('li');
var nr_li = tags_li.length; // Obtine nr. de tag-uri LI

for (i=0; i<nr_li; i++) {
// Aplica evenimentul 'onclick' la fiecare tag, cu o functie ce
trebuie executata
tags_li[i].onclick = function () {
var clasa = this.getAttribute('class'); // Obtine
valoarea clasei
var continut = this.textContent || this.innerText; // Preia
continutul
alert('class='+ clasa+ ' - '+ continut); //
Defineste fereastra Alert
return false;
};
}
};
// Apeleaza variabila 'get_li' la incarcarea paginii

window.onload = get_li;
</script>
</head>
<body>
<ul>
<li class="cli">Text din primul LI</li>
<li class="cli">Text din al doilea LI</li>
<li class="cli">Text din al treilea LI</li>
</ul>
</body>
</html>
- Stilul CSS din HEAD este pentru schimbarea cursor-ului de mouse in

"manuta" cand se afla deasupra fiecarui <li>.
- Observati ca nu a mai fost adaugat nici un atribut "onclick", totusi,
acesta este stocat in memorie si cand dati click pe fiecare <li> va
apare fereastra Alert cu datele din fiecare.
Puteti testa acest exemplu mai jos:
• Text din primul LI
• Text din al doilea LI
• Text din al treilea LI
- Lectia 29
Lectia 30
createElement si insertBefore
createElement() si insertBefore() sunt doua functii (metode)
JavaScript care sunt folosite pentru a adauga elemente noi in pagina,
care sunt create dinamic cu JavaScript. De obicei aceste functii sunt
folosite impreuna.
1. createElement("tag")
Creaza obiectul elementului specificat la parametrul "tag".

Sintaxa generala este urmatoarea:
document.createElement("tag");
- Unde "tag" este denumirea (selectorul) elementului HTML care se

doreste sa fie creat.
- De exemplu: pentru <p> paramerul va fi "p", pentru <div>
parametrul va fi "div", iar pentru o casuta <input> se specifica
"input".
Iata un exemplu in care este creat tag-ul <h3>
var element = document.createElement("h3");
- "element" este variabila ce stocaheaza obiectul elementului creat.
Odata creat acest element, ii putem adauga atribute si continut.

Pentru aceasta i-se aplica functiile specifice, "setAttribute()" (sau
"className" pt. class) si "innerHTML" (sunt prezentate in Lectia 28).
De exemplu, ii adaugam o CLASA si un text.
var element = document.createElement("h3");
element.className = "o_clasa";
element.innerHTML = 'Textul din eticheta H3 creata dinamic';
</script>
- Acest cod va crea un obiect "element" ce contine urmatorul cod

HTML
"<h3 class="o_clasa">Textul din eticheta H3 creata
dinamic</h3>".
- Similar pot fi create si alte tag-uri (elemente) HTML, pentru un
<div>, in loc de "h3" scrieti "div" si tot asa pt. "span", "br", "li", ...
etc.
Acum trebuie doar adaugat in pagina, in locul unde dorim. Pentru
aceasta se poate folosi metoda "insertBefore()", prezentata in
contnuare.
2. insertBefore()
Adauga un obiect imediat inaintea altui obiect luat ca referinta,

ambii in interiorul unui element parinte.
Sintaxa generala este urmatoarea:
parinte.insertBefore(element_nou, referinta);
- "element_nou" este obiectul cu elementul pe care dorim sa-l

adaugam.
- "referinta" este obiectul inaintea caruia va fi adaugat
"element_nou".
- "parinte" este elementul parinte, in care se afla "referinta" si unde
va fi adaugat si "element_nou"
- Daca "referinta" are valoarea null, "element_nou" va fi adaugat la
sfarsitul listei nod-urilor copil din "parent", devenind astfel ultimul nod
copil al acestuia.
Iata un exemplu din care sa intelegeti mai bine. Ca element nou ce va

fi adaugat este folosit elementul creat mai sus, la primul subcapitol.
La click pe un buton, va fi adaugat tag-ul H3 creat mai sus, inaintea
unui aume DIV (cu id="rpr")

</script>
<div id="rpr">Elementul de reper</div>

<form action=""><input type="button" value="Click"
onclick="add_h3()" /></form>
- Cand apasati pe butonul "Click", se apeleaza functia "add_h3()" care
va crea automat elementul <h3>, cu textul si clasa precizate, apoi il
va include /afisa inaintea tag-ului cu id="rpr". Dupa cum puteti testa
mai jos.
Elementul de reper
- Daca elementul parinte nu e BODY, ci un alt DIV, TABLE ori altceva,
il preluati mai intai intr-un obiect (ex.:
parinte=document.getElementById('id_parinte');) apoi il includeti in
formula cu "parinte.insertBefore()".
3. Adaugare automata input (casute) in formular
Iata un exemplu practic si util de folosire a metodelor

createElement() si insertBefore() pentru a adauga automat casute
text intr-un formular.
Explicatiile necesare sunt in codul scriptului.

</script>
<form action="">
<input type="text" name="nume[]" />
<input type="submit" value="Submit" id="submit" /><br
/><br />
<input type="button" value="Adauga caseta"
onclick="add_input()" />
</form>
- Cand dati click pe butonul "Adauga caseta", se apeleaza functia

"add_input()", aceasta va crea si adauga caseta de text, dupa cum
puteti testa mai jos.
- Am adaugat la atributul "name" valoarea "nume[]" (cu paranteze
patrate) deoarece, in general, datele sunt trimise la un script pe
server si astfel pot fi prelucrate ca o matrice.
Submit
Adauga caseta
- Lectia 30
Lectia 31
Creare scripturi avansate - Javascript si PHP
Codul PHP este executat pe server iar datele de iesire sunt

transmise la navigatorul web.
Codul scriptului JavaScript este executat de browser pe calculatorul
utilizatorului.
Combinand aceste doua limbaje de programare web, se pot obtine
scripturi JavaScript dinamice, cu rezultate in functie de datele primite
si procesate de server. Astfel, aceeasi pagina de site poate contine un
cod JavaScript pentru un utilizator si alt cod JS in cazul altui utilizator.
- Sunt 2 modalitati de a combina JavaScript cu PHP ca sa se obtina un

rezultat dinamic sau personalizat:
1. Prin scrierea intregului script JS in codul PHP si adaugarea

acestuia in pagina web cu functia PHP "echo" (sau "print").
<?php
echo '<script type="text/javascript"> // Cod JS
</script>';
?>
- Atentie, trebuie sa tineti cont de modul de lucru al

ghilimelelor din cod, astfel incat ceea ce va fi returnat de
"echo" sa fie un script JS ca si cum a fost scris in codul HTML.
2. Prin adaugarea in scriptul JS din codul HTML doar a

variabilelor PHP necesare scriptului JavaScript (returnand
valoarea cu "echo").
var var_js = <?php echo $var_php; ?>;
</script>
- Ambele variante de cod trebuie scrise in fisiere php ca sa poata fi

procesate de modulul PHP.
In continuare sunt explicate cateva exemple practice din care sa
intelegeti modul de combinare PHP-JavaScript si utilitatea acestuia
(Trebuie sa cunoasteti deja, macar la nivel incepator, PHP si
JavaScript, si HTML).
1. Alert cu nume utilizator
De exemplu, intr-o pagina web cu sistem de autentificare sa fie

afisata o fereastra Alert cu numele utilizatorului dupa ce s-a
autentificat.
In acest caz presupunem ca numele de utilizator e stocat intr-o
variabila de sesiune: $_SESSION['nume'].
Folosind prima metoda, codul PHP ar fi urmatorul:
<?php
session_start(); // Aceasta functie trebuie scrisa la inceputul
fisierului php
// Cod php ...
echo '<script type="text/javascript">alert("Bine ai venit '.
$_SESSION['nume']. '");</script>';
?>
Sau a doua varianta:
<?php session_start(); // La inceputul paginii html ?>


alert("Bine ai venit <?php echo $_SESSION['nume']; ?>");
</script>
- O astfel de fereastra Alert poate fi utila in cazul notificarii

utilizatorului despre date ce pot fi extrase de PHP dintr-o baza de date
sau fisier, cum ar fi instiintarea unui nou mesaj privat.
2. Ceas cu ora serverului
Un ceas facut si afisat in pagina cu JavaScript va afisa ora de la

calculatorul vizitatorului. Daca se doreste afisarea unei aceleasi date
(de pe server) pentru toti vizitatorii, cum ar fi in cazul unor jocuri,
trebuie adaugat in scriptul JS timpul serverului, dupa cum e si in
urmatorul exemplu:
<div id="tag_ora"></div>

</script>
- Testati pt. a vedea rezultatul
3. Afisare date cu JavaScript de la PHP, in functie de

o adresa URL
Ati vazut in site-urile pt. trafic sau afisare banner ca e necesar

adaugarea in pagina a unui mic cod JS cu o anume adresa URL la
atributul "src".
Acestea folosesc acelasi principiu, de combinare PHP cu JavaScript.
Adresa din codul ce trebuie adaugat in pagina apeleaza un script
PHP, acesta preia cu $_GET parametri din adresa URL primita si in
functie de acestia prelucreaza datele pe server si construieste pentru
returnarea rezultatului un cod JavaScript si HTML (fara tagul <script>)
care va determina afisarea in pagina (cu document.write, sau
innerHTML intr-un anume tag) a unui cod HTML pt. banner, trafic,
top, ... etc.
Pentru a intelege mai bine, experimentati urmatorul exemplu:
a) Creati pe server un fisier php, cu denumirea "phpjs_test.php", si
adaugati urmatorul cod:
<?php
// Exemplu test, de la http://www.marplo.net
// Creaza o matrice cu denumiri
$ids = array(1=>'php-mysql', 2=>'javascript', 3=>'html');
// Preia id-ul de la adresa URL

// Va returna cu echo un link (cu denumirea asociata din matrice)
intr-un cod specific JavaScript (document.write)
if (isset($_GET['id'])) {
if ($sir = $ids[$_GET['id']]) {
// Va determina afisarea unui link in pagina apelanta
echo 'document.write("<a href=\'http://www.marplo.net/'. $sir.
'\'>Curs '. $sir. '</a>");';
}
}
?>
b) In acelasi director creati un fisier html (ex. "test_jsphp.html") in

care adaugati urmatorul cod:
<script type="text/javascript" src="phpjs_test.php?

id=2"></script>
- Apelati acest fisier html de pe server. Rezultatul va fi afisarea
(determinata de "document.write()") in pagina a unui link ce a fost
definit in scriptul php in functie de 'id' din adresa de la "src".
Similar se pot determina spre afisare banere sau orice altceva
construit cu html in interiorul comezii "document.write()".
- Trebuie acordata atentie la imbricarea ghilimelelor in codul php de
returnare a rezultatului. Rezultatul transmis de "echo" trebuie sa fie o
comanda corecta JS ce poate fi recunoscuta si executata de
JavaScript.- Lectia 31

JavaScript Curs PDF

Încărcat de

Informații document

Titlu original

Drepturi de autor

Formate disponibile

Partajați acest document

Partajați sau inserați document

Opțiuni de partajare

Vi se pare util acest document?

Este necorespunzător acest conținut?

Drepturi de autor:

Formate disponibile

JavaScript Curs PDF

Încărcat de

Drepturi de autor:

Formate disponibile

JavaScript

8. Alert, Prompt, Confirm

11. Obiecte JavaScript 1

12. Obiecte JavaScript 2

13. Ierarhia JavaScript

15. Obiecte nivel 1

16. Obiecte nivel 2

17. Obiecte nivel 3

18. Obiecte nivel 3-4

20. Obiectul image 1

21. Obiectul image 2

23. Obiectul form 2

24. Obiectul window 1

25. Obiectul window 2

26. Ferestre Frame

32. JavaScript cu PhP

JavaScript a fost dezvoltat prima data de catre firma Netscape, cu numele

Acest curs prezinta elementele de baza ale limbajului de programare

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

Comanda document.write este folosita pentru a tipari ceva in pagina.

Rezultatul acestui script, afisat in pagina web (XHTML si HTML) va fi urmatorul:

Daca dorim sa incarcam scriptul dintr-un fisier extern (spre exemplu în

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

document.write("Textul care va fi afisat pe ecran")

Rezultatul afisat in pagina web va fi acelasi ca si in exemplele anterioare.

2. Ascunderea codului in browserele vechi

Unele browsere nu recunosc scripturile si le afiseaza în pagina web ca text.

In orice limbaj, scrierea are conventii si reguli de sintaxa. Chiar si scrierea în

In aceasta lectie vor fi prezentate notiunile de baza ale programarii,

Durata de viata a unei variabile

Pentru a lucra cu datele introduse intr-un script si a manipula valorile

Cu ajutorul operatorilor manipulam, combinam si modificam datele dintr-

Putem spune ca operatorii aritmetici sunt principalii operatori folositi cu

• Decrementare (--) - Acest operator scade valoarea cu o unitate.

• Cei doi operatori de incrementare (++) respectiv decrementare (--) pot

In cazul acestui operator JavaScript actioneaza mereu de la dreapta la

Operator Semnificatie Exemple

4. Operatori logici (booleeni)

Similar cu operatori de comparatie, operatorii logici compara doua expresii

! - not - este operator unar, foloseste o singura expresie si returneaza TRUE

5. Operator pentru string (sir)

Un string este in general un sir de caractere, intre ghilimele.

2 - Adaugati spatiu in una din variabilele string

Acest operator returneaza tipul de date continut la momentul respectiv de

7. Operatori pentru functii

8. Operatori pentru structuri de date (obiecte)

9. Operatorul conditional "?"

JavaScript contine si un operator conditional ? care atribuie o valoare unei

Daca variabila "vizitator" este egala cu 'barbat', variabila "mesaj" primeste

10. Precedenta operatorilor

Cand se folosesc in expresii mai multi operatori, JavaScript tine cont de

Operator Nume operator

if - executa comenzile dorite cand o conditie este adevarata.

2. Instructiunea " if ... else "

Unde 'conditie' poate fi orice expresie logica.

Instructiunile repetitive se folosesc atunci cand se doreste efectuarea unei

2. Instructiunea for ... in

Unde "nume_ proprietate" este un literal de tip sir generat de JavaScript.

Folosind exemplul de la instructiunea "for", il scriem in varianta instructiunii

Prima data am declarat variabila 'x' dandu-i valoarea 1.

4. Instructiunea do ... while

Aceasta functie afiseaza "x este 8".

Pe langa instructiunile "for" si "while" avem si alte instructiuni