Cuprins

Instruciuni condiionale.......................................................................................................................2
Instructiunea "if"..............................................................................................................................2
Instructiunea "if ... else".......................................................................................................................3
Instructiunea switch.........................................................................................................................3
Instruciuni ciclice (repetitive).............................................................................................................6
Instruciuni ciclice (repetitive).............................................................................................................6
Instructiunea for...............................................................................................................................6
Instructiunea for ... in.......................................................................................................................7
Instructiunea while...........................................................................................................................7
Instructiunea do ... while..................................................................................................................8
Instruciuni complementare..................................................................................................................9
Instruciuni complementare..................................................................................................................9
Instructiunile break si continue........................................................................................................9
Instructiunea eticheta (label)..........................................................................................................10
3 Instructiunea with........................................................................................................................11
Ferestre Alert, Prompt si Confirm......................................................................................................12
Ferestre Alert, Prompt si Confirm......................................................................................................12
Evidentiere Imagini la Clic.................................................................................................................14
Evidentiere Imagini la Clic.................................................................................................................14

Instruciuni condiionale
Partea cea mai interesanta, dar si dificila, in scrierea unui script este proectarea 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 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, cand conditia
returneaza FALSE, se trece peste acest cod.
Iata un exemplu practic. Urmatorul script afiseaza "Buna ziua" daca ora este mai mare decat 12.
Se foloseste obiectul Date care determina data curenta (va fi explicat mai amanuntit in alta lectie).
<script type="text/javascript">
<!-// daca ora > 12,
// va scrie n fereastra Buna ziua!
var d = new Date()
var time = d.getHours()
if (time>12) {
document.write("<b>Buna ziua!</b>")
}
//-->
</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 12 si in caz
adevarat executa comanda dintre acolade, care afiseaza mesajul.
Daca ora este mai mica decat 12 scriptul nu va executa instructiunea dintre acolade.

2. Instructiunea "if ... else"

In exemplul anterior am vazut ca este afisat "Buna ziua!" daca ora > 12 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).
Iata din nou exemplul de mai sus, de asta data folosindu-se instructiunea "if ... else".
Scriptul afiseaza "Buna ziua!" daca ora este mai mare decat 12, in caz contrar afiseaza 'Este ora ...'.
<script type="text/javascript">
<!-// daca ora > 12,
// va scrie n fereastra Buna ziua!
// Alfel afiseaza "Este ora ..."
var d = new Date()
var time = d.getHours()
if (time>12) {
document.write("<b>Buna ziua!</b>")
}
else {
document.write("<b>Este ora " +time+ "</b>")
}
//-->
</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 12 si in caz adevarat
executa comanda dintre primele acolade.
Daca ora este mai mica decat 12 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:
3

cod executat daca expresie = valoare1

break
case valoare2:
cod executat daca expresie = valoare2
break
case valoare3:
cod executat daca expresie = valoare3
break
default :
cod executat 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".
Daca, 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 type="text/javascript">
<!-var d = new Date()
var ziua = d.getDay()
switch (ziua) {
case 5:
document.write("Astazi e vineri");
break
case 6:
document.write("Astazi e sambata");
break
case 0:
document.write("Astazi e duminica");
break
default:
document.write("Mai e pana sambata");
}
//-->
</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".
Iata inca un exemplu cu "case", de data aceasta foloseste valori de tip sir (string).

<script type="text/javascript">
<!-var nume = "Gheorghe";
switch (nume) {
case "Ion":
document.write("Coleg");
break
case "Gheorghe":
document.write("Frate");
break
case "Maria":
document.write("Sora");
break
default:
document.write("Altcineva");
}
//-->
</script>
Va returna Frate.
Dar in general "case" e recomandat sa fie folosit cu valori numerice.

Instruciuni 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 "incepe_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 din 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 type="text/javascript">
<!-for (x=1; x<6; x++) {
document.write("<br /> x este "+x);
}
//-->
</script>
Se atribue lui 'x' valoarea 1, se verifica conditia (x<6) care este TRUE si se executa corpul
instructiunii (dintre acolade, afisand "x este 1) apoi se incrementeaza valoarea lui 'x' cu o unitate
(x++), acum 'x are valoarea 2. Se verifica iar conditia (x<6) si fiindca este adevarata, se executa iar
corpul instructiunii apoi se incrementeaza valoarea lui 'x' si tot asa pana cand 'x' va avea valoarea 6
care la verificarea conditiei returneaza FALSE, moment cand se termina executia instructiunii "for".
Acest script va afisa urmatorul rezultat:
6

x este 1
x este 2
x este 3
x este 4
x este 5

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
}
Iata exemplu anterior, de la instructiunea "for", aici este scris in varianta instructiunii "while":
<script type="text/javascript">
<!-var x = 1;
while (x<6) {
document.write("<br /> x este "+x);
x++;
}
//-->
</script>
- Prima data am declarat variabila 'x' dandu-i valoarea 1.
Instructiunea "while" verifica conditia (aici x<6) care este adevarata si permite executarea corpului
7

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".
Acest script va afisa urmatorul rezultat:
x este 1
x este 2
x este 3
x este 4
x este 5

4. Instructiunea do ... while

Forma generala a acestei instructiuni este:
do {
codul care va fi executat
}
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 type="text/javascript">
<!-var x = 8;
do {
document.write("<br /> x este "+x);
x++;
}
while (x<5)
//-->
</script>
- Aceasta functie afiseaza "x este 8".
Observati ca desi conditia este falsa (x<5), codul dintre acolade este totusi executat o singura data.

Instruciuni 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 ii
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:
<script type="text/javascript">
for (x=1; x<10; x++) {
document.write("<br /> X este "+x);
if (x==3) {
break;
}
}
</script>
Acest script va afisa urmatorul rezultat:
X este 1
X este 2
X este 3
- Dupa cum puteti 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.
2lea exemplu, in care este folosit continue:
<script type="text/javascript">
for (x=1; x<8; x++) {
9

if (x==3 || x==5) {
continue;
}
document.write("<br /> X este "+x);
}
</script>
Acest script va afisa urmatorul rezultat:
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:
<script type="text/javascript">
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".
Acest script va afisa urmatorul rezultat:
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 2 - Y este 3 --X este 2 - Y este 4 --X este 2 - Y este 5 --X este 2 - Y este 6 --X este 2 - Y este 7 -X este 3 - Y este 3 --X este 3 - Y este 4 --X este 3 - Y este 5 --X este 3 - Y este 6 --X este 3 - Y este 7 -X este 4 - Y este 3 --

Observam 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
eliminam eticheta "loopX" se va vedea diferenta.
10

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 n capitolul Obiecte JavaScript2).
In exemplul urmator este prezentat modul de folosire a instructiunii "with" :
<script type="text/javascript">
<!-with(document) {
write("Salut");
write("Acum nu mai este necesara folosirea obiectului ca prefix al functiei");
}
//-->
</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.

11

Ferestre Alert, Prompt si Confirm

Alert, Prompt si Confirm sunt ferestre predefinite de dialog, acestea apartin direct obiectului
"Window" (mai multe despre obiecte si ierarhia acestora n capitolul Ierarhia JS).

1. Fereastra Alert
Probabil ati intalnit pana acum, de mai multe ori exemple cu "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("mesaj")
- Unde "mesaj" este textul care va apare in fereastra Alert.
Urmatorul exemplu deschide o fereastra cu mesajul "Bine ai venit".
<script type="text/javascript">
<!-window.alert("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 type="text/javascript">
<!-window.prompt("Scrieti numele", "Nume");
//-->
</script>
In browser va apare o fereastra ca in imaginea de mai jos

12

Textul pe care utilizatorul il adauga in campul din fereastra prompt poate fi preluat intr-o variabila
si folosit apoi in script. 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 type="text/javascript">
<!-var nume = window.prompt("Scrieti numele", "Nume");
alert("Salut "+nume+"\n Bine ai venit.");
//-->
</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.

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 type="text/javascript">
<!-intrebare = window.confirm("Rezultatul lui 0+0 este 0?");
if (intrebare) alert("Corect");
else alert("Incorect");
//-->
</script>

In browser va apare o fereastra ca in imaginea de mai sus

13

Evidentiere Imagini la Clic

Cod JavaScript ce poate fi utilizat pentru a evidentia imaginile in pagina web cand utilizatorul
apasa clic pe ele apoi, daca apasa iar pe acea imagine evidentierea este anulata.
- Scriptul adauga stiluri CSS cu JavaScript: "padding", "background", si "border" la imaginea pe
care se apasa clic, dupa ce apasa iar pe acea imagine, efectul de evidentiere cu aceste proprietati e
sters.
Codul scriptului:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39

<script type="text/javascript">
// setare proprietati de evidentiere
var imgProp = {
'padding': '3px',
'backgroundColor': '#eded01',
'borderSize': '1ps',
'borderStyle': 'dashed',
'borderColor': '#0001fe'
};
// functie pt. evidentiere imagini la clic
function highlightImg() {
// obtine toate tag-urile <img> si numarul lor
var allimgs = document.getElementsByTagName('img');
var nrallimgs = allimgs.length;
// parcurge elementele <img> si inregistreaza onclick la fiecare
for(i=0; i<nrallimgs; i++) {
allimgs[i].onclick=function() {
// daca borderStyle e deja aplicat, anuleaza 'padding', 'background' si 'border'
// altfel, aplica proprietatile setate in $imgProp
if(this.style.borderStyle == imgProp.borderStyle) {
this.style.padding = 'auto';
this.style.background = 'none';
this.style.border = 'none';
}
else {
this.style.padding = imgProp.padding;
this.style.backgroundColor = imgProp.backgroundColor;
this.style.borderSize = imgProp.borderSize;
this.style.borderStyle = imgProp.borderStyle;
this.style.borderColor = imgProp.borderColor;
}
}
}
}
// apeleaza functia highlightImg() pentru a aplica efectul
highlightImg();
</script>

In obiectul imgProp puteti defini stilul de evidentiere, proprietatile CSS: "padding", "background",
si "border". Efectul e pentru toate tag-urile <img> din pagina; daca vreti sa fie aplicat doar la
imaginile dintr-un anumit element HTML, inlocuiti codul:
var allimgs = document.getElementsByTagName('img');
Cu aceasta linie de cod ('idelm' este id-ul elementului in care sunt adaugate imaginile).
var allimgs = document.getElementById('idelm').getElementsByTagName('img');

Scriptul JavaScript trebuie adaugat la sfarsitul documentului HTML, inainte de tag-ul de inchidere
</body>.
14