Sunteți pe pagina 1din 43

JavaScript şi World Wide Web

1.1. Prezentarea limbajului JavaScript


Iniţial. JavaScript a fost dezvoltat de Netscape sub denumirea LiveScript, un limbaj de
scriptare care intenţiona să extindă capacităţile HTML şi să ofere o alternativă parţială la unui
număr mare de scripturi CGI pentru prelucrarea informaţiilor din formulare şi pentru a adăuga
dinamism în paginile utilizatorilor. După lansarea limbajului Java, Netscape a început să
lucreze împreună cu firma Sun pentru a oferi un limbaj de scriptare a cărui sintaxă şi
semantică erau strâns legate de Java - motiv pentru care denumirea a fost schimbată în
JavaScript. După finalizarea limbajului, Netscape şi Sun l-au lansat împreună.
Una dintre motivaţiile care au stat la baza limbajului JavaScript a fost recunoaşterea
necesităţii ca logica şi inteligenţa să existe şi pe partea de client, nu doar pe partea de server.
Dacă toată logica este pe partea de server, întreaga prelucrare este dirijată de server, chiar şi
pentru sarcini simple, aşa cum este validarea datelor. Asigurarea de logică în inetriorul
browserului îl înzestrează pe client şi face ca relaţia să fie cu adevărat sistem client-server.
După lansarea sa , în decembrie 1995, JavaScript şi-a atras sprijin din partea principalilor
distribuitori din domeniu, printre care Apple, Borland, Sybase, Informix, Oracle, Digital, HP
şi IBM. Situaţia s-a complicat însă atunci când a intervenit Microsoft. Înţelegând importanţa
scriptării Web, Microsoft a dorit să ofere suport şi pentru JavaScript. Când Netscape a
preferat să acorde licenţa de tehnologie companiei Microsoft în loc să o vândă, Redmond a
analizat JavaScript, bazându-se pe documentaţia publică, şi a creat propria sa implementare,
JScript, care este recunoscută de Microsoft Internet Explorer versiunile 3.0 şi ulterioare.
JScript 1.0 este aproximativ compatibil cu JavaScript 1.1, care este recunoscut în Netscape
Navigator 3.0 şi browserele ulterioare.
Pe lângă JScript, Microsoft are propriul său concurent pentru JavaScript, numit VBScript,
realizat pentru pătrunderea pe Web a actualilor programatori VB. În esenţă, VBScript este un
subset al limbajului Visual Basic. Deoarece Netscape nu recunoaşte VBScript, principalele
sale utilizări sunt pentru intraneturile (sau siturile Internet) unde se înregistrează o abundenţă
de utilizatori de Microsft Internet Explorer.
În prezent, JavaScript este standardizat de o organizaţie internaţională de standardizare,
ECMA. Deşi standardul ECMA este util, atât Netscape cât şi Microsoft au propriile lor
implementări ale limbajului (JavaScript şi JScript) şi continuă să extindă limbajul dincolo de
standardul de bază.

1.2. Aspecte fundamentale ale limbajului JavaScript


a) JavaScript poate fi încorporat în HTML
De obicei, codul JavaScript este găzduit în documente HTML şi executat din interiorul
lor. Cele mai multe obiecte JavaScript au etichete HTML pe care le reprezintă, astfel încât
programul este inclus la nivelul esenţial, pe partea de client, al limbajului. Pentru a fi un
programator JavaScript eficient, trebuie să cunoaştem şi caracteristicile HTML.
JavaScript foloseşte HTML ca modalitate de a sări în cadrul de lucru al aplicaţiilor pentru
Web şi-i extinde capacităile normale, asigurând evenimente pentru etichetele HTML şi
permiţând acestui cod condus de evenimente să se execute din interiorul său.

1
b) JavaScript este dependent de mediu
JavaScript este un limbaj de scriptare, nu un instrument în sine şi pentru sine. Software-ul
care rulează de fapt JavaScript este motorul de interpretare din mediu - Netscape Navigator,
Microsoft Internet Explorer sau unul din motoarele pe parte de server. Când este inclus într-
un document HTML, JavaScript depinde de browser pentru a fi recunoscut. Dacă browserul
nu-l recunoaşte, programul va fi ignorat, ba chiar mai rău - dacă nu ţinem seama de
browserele neacceptate - programul JavaScript în sine poate fi afişat ca text pe pagina HTML.

c) JavaScript este un limbaj interpretat


Ca majoritatea limbajelor de scriptare, JavaScript este interpretat de browser înainte de a
fi executat. JavaScript nu este compilat în binar - ca un fişier EXE -, ci rămâne parte a
documentului HTML la care este ataşat. Dezavantajul unui limbaj interpretat este că
executarea programului durează mai mult, deoarece browserul compilează instrucţiunile în
timpul rulării, chiar înainte să le execute. Avantajul constă în faptul că este mult mai uşor de
actualizat codul sursă.

d) JavaScript este un limbaj flexibil în privinţa tipului de date


JavaScript diferă mult de limbajele stricte în privinţa tipului de date, ca Java sau C++, în
care trebuiesc declarate toate variabilele de un anumit tip înainte de a le utiliza. Spre
deosebire de ele, JavaScript este mult mai flexibil. Putem declara variabilele de un anumit tip,
dar nu suntem obligaţi să facem această declarare; putem lucra cu o variabilă, deşi nu-i
cunoaştem tipul specific înainte de rulare.
Exemplu în care declarăm o variabilă numită myVal, îi atribuim o valoare de tip şir şi apoi
o afişăm într-o casetă de mesaje:
function flexible()
{
var myVal;
myVal = "Hello World!";
alert(myVal);
}
În exemplul următor nu vom mai declara variabila myVal înainte de folosire, lucru perfect
valid în JavaScript, dar inacceptabil într-un limbaj strict în privinţa tipului de date:
function flexible()
{
myVal = "Hello World!";
alert(myVal);
}
Pentru a ilustra mai bine flexibilitatea limbajului JavaScript, vom modifica şi tipul valorii
pe care o reprezintă variabila.
function flexible()
{
var myVal = "Hello World!";
alert(myVal);
myVal = 123;
alert(myVal);
}

e) JavaScript este un limbaj bazat pe obiecte


Netscape şi alţii se referă la JavaScript ca la un limbaj de programare orientat spre obiecte
(OOP), dar aceasta este o deformare a adevăratului înţeles al sintagmei OOP. JavaScript este
un limbaj bazat pe obiecte. Cu alte cuvinte vom lucra cu obiecte predefinite care încapsulează
date (proprietăţi) şi comportamente (metode), dar nu le vom putea subclasa.

f) JavaScript este condus de evenimente

2
Mare parte din codul JavaScript va răspunde la evenimente generate de utilizator sau
sistem. În sine, limbajul JavaScript este echipat pentru a trata evenimente. Obiectele HTML
sunt îmbunătăţite pentru a accepta handlere de evenimente.

g) JavaScript nu este Java


Cele două limbaje au fost create de companii diferite, iar motivul principal pentru
similitudinea denumirilor este legat exclusiv de marketing. Câteva diferenţe dintre cele două
limbaje ar fi:
 JavaScript este strâns integrat în HTML, pe când o miniaplicaţie Java este legată la
un document HTML prin eticheta <applet>.
 Java este un limbaj mai robust şi mai complet, fiind strict în privinţa tipului de
date, realmente orientat spre obiecte şi deţinând un compilator.
 Java este folosit pentru miniaplicaţii sau pentru aplicaţii complete, pe când
JavaScript este folosit în primul rând pentru scripturi.

h) JavaScript este multifuncţional


Principalele sale scopuri sunt:
 Înfrumuseţează şi animă paginile HTML statice prin efecte speciale şi animaţie
 Validează date fără a trece totul serverului
 Dezvoltă aplicaţii pe partea de client

i) JavaScript evoluează
Datorită evoluţiei rapide a limbajului, va trebui să ne întrebăm nu numai dacă browserul
recunoaşte JavaScript, ci şi care versiune anume o recunoaşte. În acest moment există şase
versiuni de JavaScript, de la 1.0 la 1.5.

j) JavaScript acoperă diferite contexte


Programarea în JavaScript se îndreaptă mai ales spre scriptarea pe partea de client, dar se
poate folosi şi pe partea de server în Netscape Enterprise Server şi în cadrul de lucru Active
Server Pages de la Microsoft. În plus, versiunile recente de Microsoft Windows acceptă
JavaScript în mediul Windows Script Host (WSH).

3
2. Conlucrarea dintre JavaScript şi HTML

2.1. Înglobarea instrucţiunilor JavaScript în HTML


Scripturile JavaScript sunt integrate într-un document HTML folosind perechea de
etichete <script> şi </script>. Într-un document HTML pot existamai multe perechi de
etichete <script> şi fiecare pereche poate încadra mai multe seturi de instrucţiuni
JavaScript.
Atributele etichetei <script> sunt următoarele:
Atribut Descriere
Defer Atribut boolean folosit pentru a anunţa browserul dacă scriptul din această
secţiune generează un conţinut.
Language Atribut depreciat, care era utilizat pentru a specifica limbajul şi versiunea
folosite între etichete
Ex: language="JavaScript1.1"
Src Atribut care specifică locaţia URL a unui fişier JavaScript sursă externă.
Ex: src="myscript.js"
Type Atribut care a înlocuit atributul language şi care anunţă browserul ce
limbaj se foloseşte între etichete.
Ex: type="text/javascript"

2.2. Adaptare la browsere care nu recunosc JavaScript


Nu trebuie uitat că multe browsere mai vechi nu sunt capabile să folosească pe deplin
codul JavaScript pe care l-aţi scris. Încadrând cu etichete de comentarii HTML toate
instrucţiunile aflate între etichetele <script> şi </script> permitem utilizatorilor cu
browsere mai vechi să vadă pagina, fără afişarea codului JavaScript. Ei nu vor beneficia de
efectul complet al paginii, dar nici nu vor vedea text nedorit în browser.
Formatul pentru folosirea acestor comentarii este:
<script type="text/javascript>
<!-- ascund codul pentru browserele mai vechi
cod JavaScript
//-->
</script>

2.3. Scrierea codului sursă


Instrucţiunile JavaScript pot fi implementate folosind diverse metodologii. Modalitatea
cea mai bună de a profita de limbajul JavaScript este definirea funcţiilor JavaScript în
secţiunea <head>, urmată de apelarea acestor funcţii din secţiunea <body>. Această metodă
asigură evaluarea (şi, dacă este necesar, executarea) tuturor instrucţiunilor înainte ca
utilizatorul să interacţioneze cu documentul.
Riscurile plasării instrucţiunilor scriptului în secţiunea <body> a documentului sunt mai
multe. În funcţie de etichete şi de ordinea documentului, nu putem şti niciodată dacă
utilizatorul va interacţiona cu scriptul în manieră corectă sau va reacţiona faţă de pagină
înainte ca scriptul să fi fost complet încărcat sau executat.

4
Exemplu:
<html>
<head>
<title>Pagina cu buton</title>
<script type="text/javascript">
<!--
function pushbutton()
{
alert("M-ai apasat!");
}
//-->
</script>
</head>
<body>
<form>
<input type="submit" onclick="pushbutton()">
</form>
</body>
</html>

2.4. Procesul de programare în JavaScript

Editor HTML
Creează pagina HTML

Editor JavaScript
Adaugă codul JavaScript

Browser Web
Încarcă pagina HTML

5
3. Scrierea primului script

3.1. Înainte de start


Înainte de start trebuiesc luate câteva decizii.

a) Ce browsere dorim să recunoaştem?


Mult timp de programare va fi petrecut în încercarea de a scrie scripturi care să
funcţioneze în toate browserele. Există două întrebări care trebuiesc puse:
 Avem capacitate pe parte de server pentru a determina tipul de browser-client
înainte de transmiterea paginilor?
 Dorim ca browserele pe care nu le recunoaştem să eşueze elegant?
Dacă putem determina ce browsere solicită pagina înainte ca aceasta să fie transmisă,
putem evita eventualele erori pe partea de client, netrasmiţând programele care nu sunt
recunoscute. Asta înseamnă că trebuie să avem mai multe versiuni ale scripturilor, dar se va
reduce timpul de descărcare pentru browser, cât şi probabilitatea de eroare.
Pentru a trata browserele care nu recunosc JavaScript, putem apela la eticheta HTML
<noscript>. Această etichetă permite specificarea codului HTML care va fi afişat dacă
JavaScript este necunoscut sau dezactivat.
Exemplu:
<html>
<head>
<title>Primul script</title>
</head>
<body>
<h1>Cum stam cu scripturile JavaScript?</h1>
<script type="text/javascript">
<!--
document.write("JavaScript este activat si poate fi
folosit!");
//-->
</script>
<noscript>
<p>Javascript este dezactivat si nu poate fi folosit</p>
</noscript>
</body>
</html>

b) In-line sau src?


Trebuie să hotărâm dacă dorim să punem tot programul în fişiere sursă externe (.js) şi să
includem fişierele în atributul src al etichetei <script> , sau să punem programul în
documentul propriu-zis.
Plasarea programului într-un fişier extern vă oferă capacitatea de a edita un singur fişier
pentru a afecta scripturile de pe toate paginile dumneavoastră.

c) Care sunt obiectivele urmărite?


Scripturile nu trebuie abordate din unghiul senzaţionalului, ci din unghiul funcţionalului.
De asemenea, trebuie evitat excesul de programare deoarece în acest caz urmărirea codului va
deveni dificilă.

6
3.2. Scrierea scriptului
În acest prim script vom crea o casetă de dialog simplă care-i va cere utilizatorului o
parolă. Dacă parola este incorectă, utlizatorul este redirecţionat către o pagină de eroare. Dacă
parola este corectă, utilizatorul este trimis la pagina pe care o solicită. Cei ale căror browsere
nu recunosc JavaScript vor vedea un mesaj care îi anunţă că nu pot accesa această pagină.
Toate scripturile le vom ţine in-line, nu într-un fişier sursă extern.

<html>
<head>
<title>Script</title>
<script type="text/javascript">
<!--
function pswd_check()
{
if (prompt("Introduceti parola!", "") == "letmein")
window.location = "pgsigura.html";
else
window.location = "pgeroare.html";
}
//-->
</script>
</head>
<body onload="pswd_check()">
<noscript>
Ne pare rau, dar browserul dvs. nu suporta
JavaScript sau aceasta optiune este dezactivata.
</noscript>
</body>
</html>

7
4. Elementele fundamentale ale limbajului
JavaScript
4.1. Evenimente
Una din caracteristicile-cheie ale limbajului JavaScript este capacitatea sa de a intercepta
un număr limitat de acţiuni ale utilizatorului, cunoscute majorităţii programatorilor ca
evenimente. Unele elemente HTML reacţionează deja la evenimente cum ar fi executarea unui
clic pe elementul familiar de legătură care duce la alt document HTML.
Când trecem cursorul mouse-ului peste textul sau imaginea care constituie legătura,
cursorul se modifică dintr-o săgeată într-o mână micuţă. Unele browsere reacţionează şi prin
afişarea în bara de stare a adresei URL de destinaţie. JavaScript îl numeşte eveniment
MouseOver şi reacţionează ori de câte ori trecem cursorul mouse-ului peste element. Dacă
executăm clic pe oricare parte a legăturii, browserul răspunde trimiţându-ne la o locaţie
diferită de pe Web sau deschizând un nou fişier. Acţiunea este denumită eveniment Click şi
este declanşată ori de câte ori se execută clic pe legătură. HTML interceptează aceste
evenimente şi browserul reacţionează întotdeauna în acelaşi mod.

4.2. Tokenuri
Tokenurile sunt cele mai mici cuvinte, expresii sau caractere individuale pe care le poate
înţelege JavaScript. Când JavaScript este interpretat, browserul analizează scriptul,
identificând tokenurile şi ignorând comentariile şi spaţiile albe.
Tokenurile JavaScript se clasifică în patru categorii: identificatori, cuvinte-cheie, elemente
literale şi operatori. Sintaxa unui limbaj este setul de reguli şi restricţii privind modalitatea în
care se pot combina tokenurile.

a) Identificatori
Identificatorii sunt pur şi simplu nume care reprezintă variabile, metode sau obiecte. Ei
constau dintr-o combinaţie de caractere literale şi cifre. Unele nume sunt deja încorporate în
limbajul JavaScript şi, ca uramare, sunt rezervate.
Pe lângă aceste cuvinte-cheie putem definii proprii noştrii identificatori semnificativi.
Desigur, trebuie respectate câteva reguli:
 toţi identificatorii trebuie să înceapă cu o literă sau cu o liniuţă de subliniere ( _ );
 putem folosi litere, cifre sau liniuţe de subliniere pentru toate caraceterele care
urmează;
 literele sunt toate caracterele majuscule de la "A" la "Z" şi toate caracterele
minuscule de la "a" la "z";
 şirul de caractere care alcătuieşte un identificator nu trebuie să includă spaţii;
 cifrele sunt de la 0 la 9.
Exemple de identificatori JavaScript definiţi de utilizator:
Corect Incorect
current_WebSite current WebSite
numberOfHits #ofIslands
n 2bOrNotToBe
N Return

8
Numele current WebSite este incorect deoarece conţine un spaţiu. JavaScript încearcă
să îl interpreteze ca fiind doi identificatori în loc de unul. Dacă este nevoie de un spaţiu, se
obişnuieşte să se folosească liniuţă de subliniere în locul său.
#ofIslands este incorect, deoarece semnul # nu este inclus în setul de caractere acceptat
pentru identificatori. 2bOrNotToBe este incorect deoarece începe cu o cifră. Identificatorul
return este deja folosit de JAvaScript în alt scop. Încercarea de a-l folosi ca identificator
propriu va produce erori la rularea scriptului.
Atât n cât şi N sunt identificatori corecţi şi sunt diferiţi între ei. JavaScript diferenţiază
majusculele şi, ca urmare, consideră identificatorii cu litere mari diferiţi de cei cu litere mici,
chiar dacă au aceleaşi litere.

b) Cuvinte-cheie şi cuvinte rezervate


Cuvintele-cheie sunt identificatori predefiniţi care alcătuiesc nucleul unui limbaj de
programare. În JavaScript, ele execută funcţii unice, cum ar fi declararea de noi variabile şi
funcţii, luarea deciziilor bazate pe starea actuală a calculatorului sau pornirea unui ciclu
repetitiv în interiorul aplicaţiei.
Cuvintele-cheie sunt încorporate în JavaScript şi sunt întotdeauna disponibile pentru
utilizarea de către programator, dar trebuie să respecte sintaxa corectă.
Cuvintele-rezervate sunt identificatori care nu pot fi folosiţi ca nume pentru variabile,
funcţii, obiecte sau metode JavaScript. Ele includ cuvinte-cheie şi identificatori care sunt
păstraţi pentru o posibilă utilizare viitoare. Exemple de cuvinte-rezervate: boolean, char,
double, if, private, for, while etc.

c) Elemente literale
Elementele literale sunt numere sau şiruri folosite pentru a reprezenta valori fixe în
JavaScript. Ele sunt valori care nu se modifică în timp ce se execută scripturile.
Număr întreg
Numerele întregi pot fi exprimate în format zecimal (baza 10), octal (baza 8) sau
hexazecimal (baza 16). Un element literal de tip număr întreg în format zecimal poate include
orice şir de cifre care nu începe cu 0 (zero). Un zero în faţa unui element literal de tip număr
întreg desemnează formatul octal. Numerele întregi în format octal pot include cifrele de la 0
la 7. Pentru a desemna formatul hexazecimal, în faţa numărului întreg se foloseşte 0x sau 0X.
Numerele întregi hexazecimale pot cuprinde cifrele de la 0 la 9 şi literele de la "a" la "f", sau
de la "A" la "F".
Virgulă mobilă
Elementele literale de tip virgulă mobilă reprezintă numere zecimale fracţionare. Ele pot fi
exprimate standard sau exponenţial. Reprezentarea exponenţială foloseşte "e" sau "E" pentru a
desemna exponentul. Atât numărul zecimal cât şi exponentul pot fi pozitive sau negative.
Valori booleene
JavaScript implementează tipuri de date booleene şi, ca urmare, acceptă cele două
elemente literale true şi false, care reprezintă valorile booleene 1 şi, respectiv, 0.
Cuvintele-cheie true şi false trebuie să apară cu litere mici.
Şir
Un element literal de tip şir este format din zero sau mai multe caractere încadrate între
ghilimele (" ") sau între apostrofuri (' '). JavaScript oferă aceasă opţiune, dar pentru a
încadra un şir trebuie să folosim acelaşi tip de semne.
Caractere speciale
Uneori apare necesitatea de a-i spune calculatorului să folosească un caracter special sau o
apăsare de tastă, aşa cum este tasta Tab, sau o linie nouă. Pentru aceasta, folosiţi un caracter
backslash (\) în faţa unuia din codurile Escape, ca în lista următoare:
 \b indică o apăsare a tastei Backspace

9
 \f indică o pagină nouă
 \n indică o linie nouă
 \r indică un retur de car
 \t indică o apăsare a tastei Tab
 \\ indică un caracter backslash
 \' indică un apostrof
 \" indică ghilimele

d) Operatori
Operatorii sunt simboluri sau identificatori care reprezintă o modalitate în care poate fi
evaluată sau manipulată o combinaţie de expresii. Operatorul cel mai obişnuit este cel de
atribuire. În exemplul x=10, atât 10 în sine, cât şi variabila x sunt expresii. Când JavaScript
întâlneşte un operator de atribuire între două expresii, acţionează conform regulilor
operatorului. În cazul menţionat, ia valoarea expresiei din partea dreaptă şi o atribuie
variabilei din partea stângă.

4.3. Variabile
O varibilă este numele atribuit unei locaţii din memoria calculatorului unde sunt stocate
datele. Numele unei variabile JavaScript este alcătuit din una sau mai multe litere, cifre sau
liniuţe de subliniere. Numele nu poate să înceapă cu o cifră (între 0 şi9). Literele includ toate
caracterele majuscule, de la "A" la "Z", şi toate caracterele minuscule, de la "a" la "z".
JavaScript diferenţiază majusculele de minuscule. Deşi lungimea numelui unei variabile
JavaScript este limitată doar de memoria calculatorului, este preferabil păstrarea ei în limite
practice: 1-20 caractere sau 2-3 cuvinte.

Formularea declaraţiilor
Pentru a anunţa JavaScript că vom folosi un identificator ca variabilă, trebuie mai întâi să
declaraţi variabila. Pentru declararea variabilelor în JavaScript se foloseşte cuvântul-cheie
var urmat de numele variabilei. Această acţiune rezervă numele ca variabilă ce va fi folosită
drept loc de stocare pentru orice date doriţi să ţineţi în ea. În următoarele exemple se observă
că se pot declara mai multe variabile simultan, folosind virgule între numele lor:
var a;
var i, j, k;
var mesaj;
După ce o variabilă este declarată, ea poate primi prima ei valoare. Această iniţializare se
efectuează cu operatorul de atribuire =. O variabilă se poate iniţializa în acelaşi moment în
care este declarată sau oricând după aceea.
JavaScript oferă şi o altă modalitate de a declara o variabilă - iniţializarea ei fără a utiliza
cuvântul cheie var. Dacă se atribuie o valoare unei variabile noi înainte ca această variabilă
să fie declarată cu var, atunci JavaScript o va declara automat.

Tipurile de date
Tipurile de date recunoscute de JavaScript sunt următoarele:
Tip Exemplu
number -19, 3, 3.14159
boolean true, false
string "Salutare tuturor!", ""
function unescape, write
object window, document, null

10
O variabilă de tip number conţine fie un număr întreg, fie un număr real. O variabilă de
tip boolean conţine fie true, fie false. Variabilele de tip string pot conţine orice
elemente literale de tip şir care le-au fost atribuite, inclusiv şiruri goale. Variabilele de tip
function sunt fie definite de utilizator, fie încorporate. Funcţiile care aparţin obiectelor,
numite metode în JavaScript, sunt clasificate tot în tipul de date function. Obiectele
JavaScript esenţiale pe partea de client, ca window sau document, aparţin desigur tipului de
date object. Variabilele object, sau mai simplu obiecte, pot stoca alte obiecte. Despre o
variabilă care conţine valoarea null se spune că aparţine tipului de date object, pentru că
JavaScript clasifică valoarea null ca fiind obiect. Iniţializarea unei variabile cu null
constituie o modalitate excelentă de prevenire a erorilor, dacă nu este sigur că variabila va fi
utilizată.
Limbajele de programare cer de obicei definirea tipului de date pe care-l va reprezenta o
variabilă nouă şi se aşteaptă ca orice valoare atribuită respectivei variabile să fie de tipul de
date definit, apărând eroare atunci când se înceară să se atribuie variabilei un alt tip de date.
Acest lucru nu se întâmplă în JavaScript, care este un limbaj flexibil în privinţa tipului de
date. JavaScript nu cere să se definească tipul de date şi nici nu împiedica atribuirea unor
diferite tipuri de date aceleiaşi variabile. Exemplu:
var carLength;
carLength = 4 + 5;
document.writeln(carLength);
carLength = "9 feet";
document.writeln(carLength);

Domeniul de valabilitate
Domeniul de valabilitate este format din zona sau zonele dintr-un program care pot referi
o variabilă.
a) Variabile locale
O variabilă delcarată în interiorul unei funcţii are domeniu de valabilitate local. Numai
funcţia respectivă are acces la valoarea conţinută în variabilă. Variabila este creată de fiecare
dată când funcţia este apelată. Similar, variabila este distrusă de fiecare dată când funcţia se
încheie. O altă funcţie care declară o variabilă cu acelaşi nume este considerată de JavaScript
ca fiind o variabilă diferită. Fiecare dintre ele se adresează propriului său bloc de memorie.
b) Variabile globale
Dacă se doreşte ca mai multe funcţii să partajeze o variabilă, aceasta trebuie declarată în
afara oricăror funcţii, dar, desigur, între etichete <script>. este recomandabil ca variabilele
globale să fie declarate în secţiunea <head> a paginii HTML, pentru a vă asigura că ele sunt
încărcate înainte de orice altă parte a aplicaţiei.

4.4. Constante
O constantă este o variabilă care păstrează aceeaşi valoare pe toată durata executării unui
program. JavaScript foloseşte constante încorporate pentru a reprezenta valori folosite de
operaţiile matematice uzuale, aşa cum este pi. Ele pot fi accesate prin intermediul obiectului
math.
Constantele definite de utilizator sunt variabile pe care le defineşte programatorul şi ale
căror valori nu se pot modifca. De obicei, constantele sunt reprezentate prin cuvinte care
încep cu literă mare şi sunt definite la începutul programului.
Javascript nu recunoaşte constantele în modul tradiţional. De obicei, un limbaj de
programare care recunoaşte constante definite de utilizator se asigură că nici o altă parte a
aplicaţiei nu poate modifica valoarea unei constante după ce aceasta a fost definită. Tentativa
de modificare determină o eroare. JavaScript nu va efectua însă această verificare. Chiar dacă

11
nu există nici o modalitate prin care să determinăm JavaScript să se asigure că o variabilă nu
este modificată, putem să folosim variabile care să aibă valori ce sunt folosite în mod repetat
într-un script. Înlocuind instanţele multiple ale unei valori obişnuite cu o variabilă, se va uşura
actualizarea ulterioară a scriptului. Tot ce va fi de făcut este să modificăm iniţializarea
variabilei şi întregul script este actualizat.

4.5. Culori
JavaScript acceptă culorile care sunt folosite la construirea paginilor HTML. Specificarea
unei culori se face cu ajutorul unor elemente literale de tip şir care pot fi atribuite unor
proprietăţi specifice ale obiectelor. Se poate folosi fie numele culorii, fie echivalentule ei
hexazecimal.

4.6. Comentarii
Cele două soluţii de care dispunem pentru a plasa comentarii în codul JavaScript sunt
metodele folosite şi în limbajele C/C++. Pentru comentarii care au doar o linie de text se
folosesc 2 caractere slah consecutive. Exemplu:
//Acesta este un comentariu de o singura linie
Pentru blocuri de comentarii mai mari se folosesc caracterele /* şi */. Exemplu:
/* Acesta este un comentariu
pe mai multe linii */

4.7. Funcţii
În forma ei cea mai simplă, funcţia este un script care poate fi apelat oricând folosindu-i
numele. Astfel capacităţile limbajului JavaScript sporesc în 2 modalităţi. În primul rând
reprezintă o modalitate excelentă de a stabili rularea unui script la un moment ulterior. Alt
avantaj îl reprezintă capacitatea de refolosire a scripturilor fără a scrie în mod repetat acelaşi
linii de cod. Se recomandă declararea funcţiilor în blocul <head> al documentului HTML,
astfel funcţia va fi încărcată încainte de a fi executată de corpul documentului.

12
5. Operatori
Operatorii sunt simbolurile şi identificatorii care reprezintă fie felul în care sunt
modificate datele, fie felul în care este evaluată o combinaţie de expresii.JavaScript
recunoaşte atât operatorii unari, cât şi operatorii binari. Operatorii binari necesită prezenţa a
doi operanzi în expresie, în vreme ce operatorii unari au nevoie de un singur operand.

5.1. Operatori de atribuire


Funcţia fundamentală a operatorului de atribuire este acea de a atribui o valoare unei
variabile, plasând valoarea în memorie. Când JavaScript întâlneşte operatorul de atribuire (=),
priveşte mai întâi în dreapta căutând o valoare. După aceea priveşte în stânga şi se asigură că
există un loc unde să stocheze numărul. Dacă găseşte o variabilă, îi atribuie valoarea
respectivă. Întotdeauna JavaScript acţionează de la dreapta spre stânga, astfel încât expresia
20 = x cauzează o eroare, deoarece 20 nu este o variabilă ci un număr întreg a cărui valoare
nu poate fi modificată.
JavaScript recunoaşte alţi 11 operatori de atribuire, care sunt de fapt combinaţii între un
operator de atribuire şi un operator aritmetic sau un operator la nivel de biţi.
x += y este versiunea prescurtată pentru x = x + y
x –= y este versiunea prescurtată pentru x = x – y
x *= y este versiunea prescurtată pentru x = x * y
x /= y este versiunea prescurtată pentru x = x / y
x %= y este versiunea prescurtată pentru x = x % y
x <<= y este versiunea prescurtată pentru x = x << y
x >>= y este versiunea prescurtată pentru x = x >> y
x >>>= y este versiunea prescurtată pentru x = x >>> y
x &= y este versiunea prescurtată pentru x = x & y
x |= y este versiunea prescurtată pentru x = x | y
x ^= y este versiunea prescurtată pentru x = x ^ y

5.2. Operatori aritmetici


Operatorii principali ai grupului sunt semnul plus (+) care adună două valori, semnul
(–) care scade o valoare din altă valoare, asteriscul (*) care înmulţeşte două valori şi semnul
slah (/) care împarte o valoare la altă valoare.
O operaţie obişnuită este incrementarea valorii unei variabile. Incrementarea se foloseşte
atât de frecvent în programele pe calculator încât unele limbaje încorporează operatori
speciali pentru incrementarea şi decrementarea valorilor variabilelelor. Un asemenea limbaj
este JavaScript, care foloseşte ++ pentru incrementarea şi –– pentru decrementarea unei valori
cu 1. Aceşti operatori pot fi folosiţi atât ca prefixe cât şi ca sufixe, putând astfel modifica
ordinea în care o valoare este întoarsă de expresie şi momentul când este atribuită noua
valoare.
Operatorul modulo este simbolizat prin semnul procent (%) şi este restul rămas după
împărţirea primului operand la al doilea.

5.3. Operatori de comparaţie


13
Operatorii de comparaţie sunt folosiţi exact pentru ce arată numele lor - pentru
comparaţie. Expresiile ce folosesc operatorii de comparaţie pun de fapt o întrebare despre
două valori. Răspunsul poate să fie sau true, sau false.
Două semne egal (==) simbolizează operatorul de egalitate., folosit pentru a verifica dacă
valorile celor doi operanzi sunt egale. Trebuie o foarte mare atenţie la folosirea operatorului
corect. Operatorul de egalitate (==) testează două valori pentru a vedea dacă sunt egale, în
timp ce operatorul de atribuire (=) stabileşte o nouă valoare pentru o variabilă. Dacă se
greşeşte şi se foloseşte operatorul eronat, interpretorul JavaScript anunţă acest lucru.
Operatori de comparaţie:
Operator Descriere
== Operator de egalitate. Întoarce valoarea true dacă cei doi operanzi
sunt egali.
!= Operator de ne-egalitate- Întoarce valoarea true dacă operanzii săi nu
sunt egali.
> Operator "mai-mare-decât". Întoarce valoarea true dacă operandul
său stâng are valoarea mai mare decât operandul drept.
>= Operator "mai-mare-sau-egal-cu". Întoarce valoarea true dacă
operandul său stâng are valoarea mai mare sau cel puţin egală cu a
operandului drept.
< Operator "mai-mic-decât". Întoarce valoarea true dacă operandul său
stâng are valoarea mai mică decât operandul drept.
<= Operator "mai-mic-sau-egal-cu". Întoarce valoarea true dacă
operandul său stâng are valoarea mai mică sau cel mult egală cu a
operandului drept.

Până la JavaScript 1.1, limbajul era foarte clement atunci când compara operanzi
aparţinând unor tipuri de date diferite. De exemplu, când compara numărul 7 cu şirul "7",
JavaScript mai întâi transforma operandul şir într-un număr şi apoi compara cele două
numere. În cazul acestui exemplu, le găsea egale.
În JavaScript 1.2, rămâne la latitudinea programatorului de a distribui mai şirul ca număr,
sau numărul ca şir. Dacă n-o face, JavaScript nu le va găsi niciodată ca fiind egale.

5.4. Operatori pentru şiruri


Operatorii pentru şiruri disponibili în JavaScript cuprind toţi operatorii de comparaţie şi
operatorul de concatenare (+). Folosind operatorul de concatenare se pot uni mai multe şiruri
pentru a obţine un şir mai lung.
JavaScript diferenţiază scrierea cu majuscule atunci când se compară şiruri şi întoarce
valoarea true numai când compară adrese cu acelaşi tip de litere (majuscule sau minuscule).
JavaScript porneşte de la stânga la dreapta, comparând codurile ASCII ale fiecărui caracter
din ambele şiruri. Dacă toate caracterele coincid, şirurile sunt egale.

5.5. Operatori condiţionali


JavaScript foloseşte doi operatori, ? şi :, pentru a forma expresii condiţionale. Operatorii
condiţionali JavaScript execută aceaşi operaţie ca şi o instrucţiune if imediată. Expresiile
condiţionale întorc una din două valori, în funcţie de valoarea logică a altei expresii.
Exemplu:

14
var result = (nr == 100) ? "Egal" : "Diferit";
alert(result);
Dacă variabila nr este egal cu 100, expresia condiţională întoarce şirul "Egal", altfel
întoarce "Diferit".

5.6. Operatori booleeni


Operatori booleeni (sau logici) sunt folosiţi în conjuncţie cu expresiile care întorc valori
logice. De obicei se folosesc în combinaţie cu operatori de comparaţie.
Operatori booleeni:
Operator Descriere
&& Operatorul logic AND întoarce true dacă atât expresie1, cât şi cu
expresie2 sunt true. Altfel, întoarce false.
|| Operatorul logic OR întoarce true dacă fie expresie1, fie expresie2 sunt
true. Dacă nici una dintre ele nu este true, întoarce false.
! Operatorul logic NOT este unar şi întoarce valoarea opusă a unei expresii
booleene. Dacă expresie este true, întoarce false, iar dacă expresie este
false, întoarce true. Aceasta nu va modifica permanent valoarea
expresie, deoarece acţionează la fel ca operatorul aritmetic de negare.

5.7. Operatorul typeof


Operatorul typeof întoarce tipul de date conţinut la momentul respectiv de operandul
său. Este util mai cu seamă pentru a determina dacă o variabilă a fost definită.
Exemple:
typeof unescape întoarce şirul "function"
typeof 33 întoarce şirul "number"
typeof null întoarce şirul "object".

5.8. Operatori pentru funcţii


Primul operator de apelare este simbolizat printr-o pereche de paranteze rotunde şi
urmează întotdeauna după numele funcţiei. De exemplu, o funcţie va fi declarată folosind
următoarea sintaxă:
function numefct()
{
instrucţiuni;
}
Operatorul de apelare este folosit şi când este apelată funcţia de altundeva dintr-un script.
Atunci va arăta astfel:
numefct()
Parantezele arătă că, în locul oricărui alt identificator definit de utilizator, este folosită o
funcţie.
Al doilea operator pentru funcţii este virgula (,), folosită pentru a separa argumentele
multiple pe care le poate accepta o funcţie. argumentele sunt întot deauna încadrate de
operatorul de apelare. Exemplu:
function numefct(arg1, arg2)
{
instrucţiuni;

15
}

5.9. Operatori pentru structuri de date


Operatori pentru structuri de date este denumirea folosită pentru doi operatori necesari
atunci când lucraţi cu structuri de date. Structurile de date sunt cadre de lucru care au fost
setate pentru stocarea într-o modalitate organizată a uneia sau a mai multor informaţii
esenţiale. În JavaScript, obiectele sunt folosite la gruparea informaţiilor pentru a servi unui
scop mult mai specific.
Un operator care trebuie cunoascut bine în lucrul cu obiecte este punctul (.), numit în
limbaj de specialitate operator pentru membrul unei structuri. El permite referirea la un
membru (variabilă, funcţie sau obiect) care aparţine obiectului specificat.
Sintaxa este:
obiect.varibila
obiect.functie()
obiect.altObiect
Modalitatea aceasta de referire la o informaţie, numită de obicei notaţie cu punct, întoarce
valoarea variabilei, funcţiei sau obiectului aflat cel mai în dreapta.
Operatorul pentru membru, numit şi operator indice al tabloului, se foloseşte pentru a
accesa o dată specifică dintr-un tablou. Simbolizat printr-o pereche de paranteze drepte,
permite referirea la orice membru al unui tablou.
Sintaxa este:
tablou[index]

5.10. Operatori la nivel de bit


La nivelul cel mai de jos, numerele întregi sau reale (ca şi toate celelalte date) sunt stocate
în memorie sub formă de biţi. stocarea se face folosind sistemul binar de numeraţie, în care
orice număr întreg poate fi reprezentat folosind simbolurile 0 şi 1. În funcţie de locul pe care-l
ocupă, un bit stabilit la 1 reprezintă o valoare egală cu 2 ridicat la puterea n, unde n este
numărul de cifre din dreapta sa.

Operatori logici la nivel de bit


La folosirea operatorilor logici la nivel de bit, JavaScript împerechează operanzii bit cu
bit, apoi execută operaţia asupra fiecărei perechi de biţi.
Operator Descriere
& Operatorul la nivel de bit AND întoarce 1 dacă ambii operanzi sunt 1.
Altfel întoarce 0.
| Operatorul la nivel de bit OR întoarce 1 dacă oricare dintre operanzi este
1. Altfel, întoarce 0.
^ Operatorul la nivel de bit OR exclusiv întoarce 1 dacă unul şi numai unul
dintre operanzi este 1. Altfel, întoarce 0.

Operatori de deplasare la nivel de bit


Toţi operatorii de deplasare la nivel de bit au doi operatori. Operandul din stânga este un
număr întreg ai cărui biţi trebuie deplasaţi. Operandul din dreapta este numărul de biţi cu care
trebuie deplasată reprezentarea binară a numărului întreg.
Operator Descriere
<< Operatorul de deplasare spre stânga întoarce valoarea unui număr întreg
16
dacă biţii săi au fost deplasaţi cu un număr de locuri spre stânga. Toţi biţii
vacanţi din dreapta sunt completaţi cu zerouri.
>> Operatorul de deplasare spre dreapta care transmite semnul întoarce
valoarea unui număr întreg dacă biţii săi au fost deplasaţi cu un număr de
locuri spre dreapta. Toţi biţii vacanţi sunt completaţi cu copia bitului cel
mai din stânga (numit şi bit de semn). Copierea bitului cel mai din stânga
asigură că numărul întreg va rămâne fie pozitiv, fie negativ.
>>> Operatorul de deplasare spre dreapta şi completare cu zerouri întoarce
valoarea unui număr întreg dacă biţii săi au fost deplasaţi cu un număr de
locuri spre dreapta. Toţi biţii vacanţi de nivel mai mare sunt completate cu
zerouri.

5.11. Precedenţa operatorilor


În cazul expresilor care folosesc mai mult de un operator, JavaScript nu evaluează
neapărat o expresie de la dreapta la stânga sau invers. Fiecare parte a unei expresii este
evaluată într-o ordine bazată pe o precedenţă predefinită pentru fiecare operator.
Parantezele sunt operatori care ridică nivelul precedenţei expresiei pe care o încadrează.
Când o expresie are mai mulţi operatori de acelaşi tip, JavaScript evaluează de la stânga la
dreapta.
Precedenţa operatorilor:
Nume operator Operator
Virgulă ,
De atribuire = += -= *= /= %= <<= >>= >>>= &= ^= |=
Condiţional ?:
Logic OR ||
Logic AND &&
OR la nivel de bit |
XOR la nivel de bit ^
AND la nivel de bit &
De egalitate == !=
De comparaţie < <= > >=
De deplasare la nivel de bit << >> >>>
De adunare/scădere + -
De înmulţire/împărţire * / %
De negare/incrementare ! ~ ++ --
De apelare, pentru structuri de () [] .
date

Unul dintre efectele pe care le poate avea precedenţa operatorilor este determinarea tipului
de valoare întoarsă de o expresie.
Când expresiile au operatori de aceeaşi precedenţă, JavaScript evaluează de la stânga la
dreapta. Operatorul de adunare are aceeaşi precedenţă ca şi operatorul de concatenare; prin
urmare, JavaScript va evalua toate adunările şi concatenările de la stânga la dreapta în toată
instrucţiunea.

17
6. Structuri de control şi cicluri

6.1. Instrucţiuni condiţionale


if
Instrucţiunea if este una dintre cele mai folosite instrucţiuni. Fiecare limbaj de
programare o deţine într-o formă sau alta şi utilizarea ei nu poate fi evitată. Instrucţiunea if
se foloseşte astfel:
if (conditie) {
[instructiuni]
}
conditie poate fi orice expresie logică. Dacă rezultatul lui conditie este true, sunt
executate instructiuni şi executarea programului continuă. Dacă însă conditie întoarce
false, JavaScript ignoră instructiuni şi continuă.
Indentarea instrucţiunilor cuprinse între acolade este o practică frecventă. Aceasta conferă
scripturilor un aspect logic şi se dovedeşte utilă mai ales când imbricaţi instrucţiuni if (atunci
când se foloseşte o instrucţiune if în interiorul altei instrucţiuni if).
Exemplu:
<html>
<head>
<title>Exemplu if</title>
</head>
<body>
<script type="text/javascript">
<!--
//Declarare variabile
var intereseVizitator = "Suport Tehnic";

document.writeln("Salut, ma numesc Vasile!");


//evaluarea valorii variabilei intereseVizitator
if (intereseVizitator == "Produse Noi")
document.writeln("Multumim pentru interesul aratat!");
if (intereseVizitator == "Suport tehnic") {
document.writeln("Suportul tehnic este disponibil.");
document.writeln("Dar mai intai sa va prezint noile noastre
produse!");
}
document.writeln("<br>Cele mai noi produse ale noastre va vor
satisaface toate necesitatile!");
// -->
</script>
</body>
</html>

if..else
Uneori, simpla folosire a instrucţiunii if nu este suficientă şi puteţi rezerva un set de
instrucţiuni care să fie executate dacă expresia condiţională întoarce false. Acest lucru se
realizează prin adăugarea unui bloc de instrucţiuni else imediat după blocul if:

18
if (conditie) {
instructiuni
} else {
instructiuni
}
Dacă nu se doreşte intrarea directă într-un bloc prestabilit, combinaţi porţiunea else cu
altă instrucţiune if. Folosind această metodă, se pot evalua câteva scenarii acceptabile
diferite înainte de a executa operaţiunea corectă. Frumuseţea utilizării metodei constă în faptul
că se poate încheia tot cu un segment else. Formatul pentru acest tip de instrucţiune este
următorul:
if (conditie) {
instructiuni
} else if (conditie) {
instructiuni
} else {
instructiuni
}
Exemplu:
<html>
<head>
<title>Exemplu if..else</title>
</head>
<body>
<script type="text/javascript">
<!--
//declarari variabile
var suma = 10.00;
if(suma >500.00)
document.write("Multumim pentru cumparaturi!");
else
document.write("Multumim, dar sigur mai doriti si
altceva!");
// -->
</script>
</body>
</html>

try..catch
Instrucţiunea try..catch este folosită pentru a ignora tratarea prestabilită a erorilor.

6.2. Instrucţiuni pentru cicluri


Crearea unui ciclu în interiorul unui script poate servi multor scopuri. O utilizare banală,
dar foarte răspândită, a ciclului este contorizarea.

for
Sintaxa instrucţiunii for este următoarea:
for([expr_initializare]; [expr_conditie]; [expr_ciclu]) {
instructiuni
}
Cele trei expresii încadrate de paranteze sunt opţionale, dar dacă este omisă una dintre ele,
semnul punct şi virgulă (;) tot este necesar. În felul acesta, fiecare expresie este păstrată acolo
unde îi este locul.

19
În mod obiţnuit, expresia de iniţializare este folosită pentru a iniţializa şi chiar pentru a
declara o variabilă care va fi folosită drept contor pentru ciclu. După aceea, expresia condiţie
trebuie evaluată la true înainte de fiecare execuţie a instrucţiunilor încadrate de acolade. În
sfâsşit, expresia ciclu incrementează sau decrementează variabila folosită drept contor pentru
ciclu. Dacă expresia condiţie întoarce false la primul ciclu, instrucţiunile cuprinse între
acolade nu sunt executate niciodată.
Ca şi în cazul instrucţiunilor if, ciclurile for pot fi imbricate. Numărul imbricărilor nu
este limitat.
Exemplu:
<html>
<head>
<title>Exemplu for</title>
</head>
<body>
<script type="text/javascript">
<!--
//Scrie header
document.write("Numerele de la 0 la 99:");
document.write('<hr size="0" width="50%" align="left">');

for(var i=0; i<100; i++) {


//La fiecare al zecelea numar se pune un break
if (i%10 == 0)
document.write("<br>");
//Scrie numar
document.write(i + ",");
}

//Finalizare
document.write("<br><br>Dupa terminarea ciclului, i este egal
cu " + i);
// -->
</script>
</body>
</html>

for..in
Cu instrucţiunea for..in se poate executa câte un set de instrucţiuni pentru fiecare
proprietate dintr-un obiect. Se poate folosi ciclul for..in cu orice obiect JavaScript,
indiferent dacă are sau nu proprietăţi. Pentru fiecare proprietate se execută câte o iteraţie, aşa
că dacă obiectul nu are nici o proprietate nu se desfăşoară nici un ciclu. for..in
funcţionează şi cu obiectele particularizate; o variabilă a unui obiect particularizat JavaScript
este considerată o proprietate şi, ca urmare, se execută câte un ciclu pentru fiecare. Sintaxa
este:
for (proprietate in obiect) {
instructiuni
}
proprietate este un element literal de tip şir generat de JavaScript. Pentru fiecare ciclu,
lui proprietate i se atribuie următorul nume de proprietate conţinut în obiect, până ce
sunt folosite toate.
Următorul exemplu foloseşte această instrucţiune pentru a afişa fiecare nume de
proprietate din obiectul Document , alături de toate valorile proprietăţilor:
<html>
<head>

20
<title>Exemplu for..in</title>
</head>
<body>
<script language="JavaScript1.1" type="text/javascript">
<!--
// Declara variabile
var altObiect = Document;
var infoProprietate = "";
for (var numeProprietate in altObiect) {
infoProprietate=numeProprietate+" =
"+altObiect[numeProprietate];
document.write(infoProprietate + "<br>");
}
// -->
</script>
</body>
</html>

while
Instrucţiunea while acţionează în mare parte ca un ciclu for, dar nu include în declaraţia
ei expresia de iniţializare sau de incrementare a variabilelor. Variabilele trebuie declarate
înainte de a le incrementa sau a le decrementa în blocul instrucţiuni. Sintaxa este următoarea:
while (expr_conditie) {
instructiuni
}
Următorul exemplu arată cum se poate folosi o variabilă logică drept indicator pentru a
determina dacă se mai continuă ciclul:
<html>
<head>
<title>Exemplu while</title>
</head>
<body>
<script type="text/javascript">
<!--
//Declarare variabile
var i=0;
var rezultat=0;
var status=true;

document.write("0");
while(status) {
rezultat += ++i;
document.write(" + " + i);
if(i==10)
status=false;
}
document.write(" = " + rezultat);
// -->
</script>
</body>
</html>

do..while
Începând cu JavaScript 1.2, limbajul oferă o instrucţiune do..while, care funcţionează
exact ca o instrucţiune while, atât doar că nu verifică expresia condiţională decât după prima

21
iteraţie. În felul acesta se garantează că scriptul dintre acolade va fi executat cel puţin o dată.
Sintaxa este următoarea:
do {
instructiuni
} while (expr_conditie);
Următorul exemplu prezintă un exemplu în care nu se cunoaşte valoarea exactă a lui
userEntry (dacă ea a fost introdusă de utilizator). Valoarea 0 este atribuită lui userEntry
pentru a demonstra că utilizatorul poate să nu introducă o valoare care să satisfacă
instrucţiunea condiţională. Valoarea introdusă de utilizator rămâne afişată.
<html>
<head>
<title>Exemplu do..while</title>
</head>
<body>
<script language=JavaScript1.2" type="text/javascript">
<!--
//Declarare variabile
var userEntry=0;
var x=1;
do {
document.writeln(x);
x++;
} while (x <= userEntry);
// -->
</script>
</body>
</html>

break şi continue
Un aspect care trebuie remarcat este că, atunci când se foloseşte un ciclu, acesta continuă
să se repete până ce condiţia specificată întoarce false. Uneori însă se doreşte ieşirea din
ciclu înainte de a fi ajuns la acolada finală. Acest lucru se face adăugând fie break, fie
continue în blocul instructiuni al ciclului.
Instrucţiunea break întrerupe definitiv ciclul, în vremea ce instrucţiunea continue sare
peste instrucţiunile rămase din ciclul curent, evaluează expresia ciclului (dacă aceasta există)
şi începe următorul ciclu.
În următorul exemplu se poate vedea diferenţa dintre cele două instrucţiuni. Scriptul
acesta calculează prin încercări succesive rădăcina pătrată aproximativă a numărului n.
<html>
<head>
<title>Exemplu break si continue</title>
</head>
<script type="text/javascript">
<!--
//Declarare variabile
var nr_maxim = 0;
var n = 175; // Valoare oarecare

for(var i=0; i<n; i++) {


document.write(i + "<br>");
if (n<0) {
document.write("n nu poate fi negativ.");
break;
}
if (i*i <= n) {

22
nr_maxim = i;
continue;
}
document.write("<br>Am terminat!");
break;
}
document.write("<br>Cel mai mare ]ntreg mai mic sau egal cu
Radacina Patrata");
document.write( al lui " + n + " = " + nr_maxim);
// -->
</script>
</body>
</html>

6.3. Instrucţiuni label


O dată cu versiunea JavaScript 1.2, limbajul oferă o modalitate de a fi mai specific atunci
când folosiţi instrucţiunile break sau continue. Instrucţiunea label poate fi plasată
înaintea oricărei structuri de control care poate imbrica alte instrucţiuni, ceea ce permite
ieşirea dintr-o instrucţiune condiţională sau dintr-un ciclu la o locaţie specifică de program.

6.4. Instrucţiuni with


Instrucţiunea with este folosită pentru a evita să specificaţi în mod repetat referirea la
obiect, atunci când îi accesaţi proprietăţile sau metodele. Orice proprietate sau metodă dintr-
un bloc with pe care JavaScript nu o recunoaşte este asociată cu obiectul specificat pentru
acel bloc. Sintaxa este următoarea:
with (obiect) {
instructiuni
}
obiect specifică referirea la obiect care trebuie folosită, dacă aceasta nu există în blocul
instructiuni. Este foarte util atunci când folosiţi funcţii matematice avansate, disponibile
doar prin intermediul obiectului Math.
Exemplu:
<html>
<head>
<title>Exemplu with</title>
</head>
<body>
<script type="text/javascript">
<!--
with (document) {
write("Salut!");
write("<br>Titlul documentului este: \"" + title + "\".");
write("URL-ul documentului este: " + URL);
}
// -->
</script>
</body>
</html>

23
6.5. Instrucţiuni switch
Instrucţiunea switch este folosită pentru a compara o valoare cu multe altele. Se poate
crede că sarcina aceasta poate fi realizată doar prin folosirea mai multor instrucţiuni if, dar
instrucţiunea switch reprezintă răspunsul corect. Ea este mai uşor de citit şi permite
specificarea unui set prestabilit de instrucţiuni care să fie executate în cazul în care nu este
găsită o potrivire. Instrucţiunea switch a fost introdusă abia în JavaScript 1.2.
Instrucţiunea break este folosită pentru a stopa orice executare ulterioară a codului care a
mai rămas în instrucţiunea switch. Dacă n-a fost folosită nici o instrucţiune break, codul
rămas pentru fiecare caz (case) va fi executat.
Următorul exemplu presupune că variabila cerere se poate modifica în funcţie de ceea
ce a solicitat utilizatorul. Variabilei cerere i se atribuie "Nume" ca valoare ce trebuie
comparată cu fiecare case. Al doilea case este egal cu cerere şi atunci se execută
instrucţiunile care urmează.
<html>
<head>
<title>Exemplu switch</title>
</head>
<body>
<script language="JavaScript1.2" type="text/javascript">
<!--
//Declarare variabile
var cerere = "Nume";

switch (cerere) {
case "Logo":
document.write('<img src="logo.gif" alt="Logo">');
document.write("<br>");
break;
case "Name":
document.write("Software Inc.");
document.write("<br>");
break;
case "Produse":
document.write("Editorul meu");
document.write("<br>");
break;
default:
document.write("www.mysite.com");
break;
}
// -->
</script>
</body>
</html>

24
7. Funcţii
Executarea uneia sau mai multor funcţii este obiectivul tuturor programelor JavaScript. În
forma sa cea mai simplă, un script poate să citească sau să preia date, să efectueze operaţii
asupra unui set de date sau să afişeze şi să trimită date înn exterior. Se pot efectua combinaţii
ale acestor instrumente fundamentale sau doar unul dintre ele, pentru un scop general.
Îndeplinirea unor diferite sarcini necesită multe linii de cod JavaScript. Poate fi necesar ca
unele secţiuni ale scriptului să fie executate imediat ce o pagină Web este încărcată în
browser. Alte părţi ale scriptului pot fi utile dacă sunt amânate până ce un formular HTML
acceptă date de la client. Uneori este posibil să avem nevoie de părţi ale unui script de mai
multe ori, poate chiar de un număr nelimitat de ori, şi poate deveni necesară repetarea
intermitentă a unei secţiuni de cod.
Toate aceste probleme duc la ideea divizării unui script în părţi mai mici, care să
urmărească un ţel individual, specific. Acest ţel specific poate fi semnalarea unei "lovituri
nimerite în plin" în timpul unui joc JavaScript. Validarea datelor introduse într-un formular
HTML este altă sarcină pe care va fi nevoie ca un script s-o execute de mai multe ori atunci
când cineva vizualizează pagina Web.
Este cât se poate de justificată divizarea logică a unui script în secţiuni care să urmărească
fiecare un singur obiectiv. La momentul potrivit, o anumită secţiune a unui script poate fi
apelată pentru executare. JavaScript oferă această capacitate prin intermediul unei structuri
numite funcţie.

7.1. Câteva cuvinte despre funcţii


O funcţie JavaScript este pur şi simplu un script care este desprins ca o secţiune separată
de cod şi căreia i se atribuie un nume. Folosind numele respectiv, un alt script poate să
apeleze după aceea executarea acelei secţiuni oricând şi de oricâte ori are nevoie. Multe
limbaje de programare, de pildă C/C++ şi Java, folosesc de asemenea funcţii, în timp ce altele
conţin aceeaşi semantică dar o numesc metode, proceduri sau subrutine. În esenţă toate fac
acelaşi lucru, totuşi există diferenţe.
Funcţiile slujesc unicului scop de a ajuta la divizarea multelor sarcini pentru care a fost
conceput un program. Când sunt apelate, funcţiilor li se pot transfera valori, numite
argumente. După aceea, argumentele se pot folosi ca variabile în interiorul blocului de
instrucţiuni.

Crearea funcţiilor
Următorul fragment de cod arată sintaxa pentru declararea unei funcţii în JavaScript:
function nume_functie ([argument1][...,argumentN]) {
[instructiuni]
}
Cuvântul cheie function este folosit pentru a specifica un nume, nume_functie, care
serveşte ca identificator pentru setul de instrucţiuni cuprins între acolade. Încadrate între
paranteze drepte şi separate prin virgule se află numele argumentelor, care conţin toate
valorile pe care le primeşte o funcţie.
Din punct de vedere tehnic, argumentele sunt variabile atribuite unor valori de tip literal,
altor variabile, sau obiectelor care sunt transferate funcţiei prin intermediul instrucţiunii de
apelare. Dacă nu se specifică nici un argument, trebuie introdusă o pereche de paranteze fără
conţinut, pentru a completa declararea.

25
Instrucţiunile, care constituie nucleul funcţiei, sunt executate la fiecare apelare a funcţiei.
Pentru o mai bună vizibilitate, instrucţiunile din blocul de instrucţiuni sunt de obicei
indentate.

Declararea funcţiilor
O funcţie se poate declara oriunde în interiorul unui bloc <script>. Singura restricţie
este că nu se poate declara o funcţie în interiorul unei alte funcţii sau în interiorul unei
structuri de control. Se recomandă ca funcţiile să fie declarate în blocul <head> al
documentului HTML, deoarece blocuri diferite ale unui document HTML sunt încărcate
înaintea altora. Declararea tuturor funcţiilor aici asigură disponibilitatea funcţiilor, dacă un alt
script trebuie să le utilizeze imediat.

Apelarea funcţiilor
Când documentul HTML este încărcat, funcţia este încărcată în memorie şi "ţinută în
aşteptare". Ea nu este executată până când nu este apelată cu sintaxa:
nume_functie ([argument1][...,argumentN])
În acel moment, execuţia programului sare direct la prima linie a funcţiei. După ce se
execută liniile funcţiei, programul revine la locul din care pleacase şi îşi urmează cursul.

7.2. Argumente
Construirea funcţiilor pentru a accepta argumente este foarte utilă. Procedând astfel,
funcţia poate fi folosită, urmărind acelaşi scop general, în mai multe moduri.

Modificarea numărului de argumente


O funcţie este construită astfel încât să accepte un anumit număr de argumente. deşi un
bun obicei al programatorilor este să transfere acelaşi număr de argumente care a fost
declarat, uneori este practic să se permită folosirea unui alt număr de argumente. Aceasta se
obişnuieşte atunci când se apelează o funcţie care foloseşte acelaşi parametru de fiecare dată,
dar este construită pentru a trata cazuri speciale.
Într-o asftel de situaţie, se poate folosi o valoare prestabilită în interiorul funcţiei, dacă nu
sunt transferate argumente. Se poate folosi funcţia fără argumente, sau se poate specifica o
valoare diferită de cea prestabilită. Dacă parametrul nu primeşte nici o valoare la apelare va
avea valoarea null.
O altă posibilitate este să-i fie transferate mai multe argumente decât au fost specificate la
declarare. Valorile suplimentare nu sunt pierdute, ci sunt stocate într-un tablou numit
arguments, care este o proprietate a tuturor funcţiilor. Toate argumentele stocate în tablou
pot fi extrase în interiorul blocului de instrucţiuni.

7.3. Folosirea variabilelor globale şi locale


Se ştie că variabilele globale pot fi modificate de oriunde dintr-un document, în timp ce o
variabilă locală poate fi modificată numai în interiorul funcţiei în care este declarată. Tipul de
variabilă care să fie folosit poate fi decis urmând liniile directoare de mai jos:
• dacă se intenţionează ca valoarea unei variabile să fie utilizată şi, eventual, modificată
de orice parte a unui program, atât în interiorul cât şi în exteriorul funcţiilor, variabila
trebuie declarată în exteriorul tuturor funcţiilor. În felul acesta, ea devine globală şi
poate fi modificată de oricare parte a programului. Locul cel mai bun pentru
declararea variabilelor globale este blocul <head> al documentului HTML, pentru a

26
asigura că a fost declarată înainte de a fi utilizată. Variabila nu trebuie declarată din
nou în interiorul vreunei funcţii.
• dacă variabila este necesară numai în interiorul unei funcţii anume, ea trebuie
declarată în interiorul funcţiei respective. Trebuie avută grijă ca la declararea
variabilei să se folosească cuvântul-cheie var. astfel va putea fi modificată doar din
interiorul funcţiei, JavaScript considerând că această variabilă este unică şi distinctă de
orice variabile globale care pot avea acelaşi nume.

7.4. Transferul obiectelor prin referinţă


Când un tip de date simplu, cum ar fi şir, număr sau boolean, este transferat unei funcţii,
el este transferat prin valoare. Aceasta înseamnă că funcţia utilizează o copie a variabilei, nu
variabila originală. Orice modificări aduse copiei nu afectează originalul.
Pe de altă parte, atunci când un obiect este transferat unei funcţii, el este transferat prin
referinţă. În acest fel, funcţiei i se permite să modifice versiunea originală a obiectului.

7.5. Alte informaţii despre funcţii


Refolosirea funcţiilor
O funcţie este excelentă pentru separarea unei aplicaţii în componentele ei logice, totuşi
principalul său atu îl constituie refolosirea codului.
Spre deosebire de secţiunile de cod cuprinde în cicluri pentru a fi repetate de mai multe ori
succesiv, o funcţie poate fi refolosită în orice moment, pur şi simplu prin apelarea numelui
său. Crearea funcţiilor care să fie destinate unui scop, dar care să fie utile în multe situaţii,
necesită experienţă şi un anumit grad de previziune.
Funcţiile pot fi stocate în fişiere sursă JavaScript externe, ceea ce permite includerea
acestor fişiere în mai multe documente HTML.

7.6. Funcţii recursive


O funcţie JavaScript poate fi recursivă, adică se poate autoapela. Rezolvarea ecuaţiilor
factoriale este o modalitate obişnuită de demonstrare a felului în care funcţionează
recursivitatea.
Exemplu:
function factorial(n) {
if(n>1)
return n*factorial(n-1);
return 1;
}

27
8. Obiecte pe partea de client

8.1. Obiecte
În construirea aplicaţiilor software OO, obiectele constituie "cărămizile" logice esenţiale.
În programe, obiectele sunt adesea reprezentări ale obiectelor din lumea reală care există în
spaţiul-problemă. În plus, puteţi construi obiecte de asistenţă tehnică pentru rezolvarea unor
probleme speciale din domeniul informaticii.
Un obiect poate fi:
• un lucru tangibil sau vizibil în spaţiul-problemă - de exemplu, o comandă sau un
client.
• un concept abstract în mintea programatorului sau ceva care poate fi înţeles la nivel
raţional. Obiectul Math din JavaScript constituie un alt exemplu bun de concept pur
logic.
• un obiect GUI vizibil, cum ar fi ferestre, cadre, butoane şi câmpuri de introducere a
datelor
Un obiect include valorile datelor necesare pentru a-i descrie natura şi funcţiile pe care le
poate efectua. Se poate considera că obiectul reprezintă o entitate cu limite definite. Nucleul
obiectului este constituit din valorile datelor sale. Datele unui obiect îi descriu caracteristicile
speciale şi identitatea. În jargonul OOP, datele obiectului sunt numite proprietăţi sau atribute.
În general, un obiect acceptă câteva funcţii. Funcţiile unui obiect care sunt vizibile în
exterior formează comportamentul obiectului. În limbajul orientat spre obiect, funcţia unui
obiect este denumită frecvent metodă. Metoda este un fragment din codul sursă ce execută o
singură sarcină, care este o caracteristică importantă a obiectului. Cu alte cuvinte, metodele
unui obiect reprezintă comportamentul său, activitatea sa ce poate fi testată şi vizualizată din
exterior.
Pe lângă caracteristicile specifice şi valorile de identificare, atributul unui obiect poate să
reprezinte şi starea obiectului sau rolul pe care acesta îl poate juca la un moment dat. Starea şi
rolul sunt caracteristici speciale ale obiectului, dependente de timp. Starea este un tip de
elemente de date care s schimbă în timp şi, în general, arată o valoare curentă pentru obiect.

8.2. Încapsularea
Atributele şi funcţiile unui obiect formează o entitate indivizibilă. In formaţiile despre
funcţionarea internă a unui obiect trebuie ascunse.
Un obiect se prezintă lumii prin metodele sale publice care formează interfaţa. Opusul
meotdei publice este metoda privată. Metodele private sunt funcţii de asistenţă pentru un
obiect. Ele sunt folosite numai în interiorul obiectului şi nu pot fi apelate din exterior.
JavaScript nu are metode private, astfel că toate funcţiile declarate într-un obiect sunt publice.
Nici chiar atributele unui obiect nu ar trebui manipulate în exteriorul obiectului. În
ingineria software, acest principiu se numeşte ascunderea informaţiei. Ascunderea informaţiei
oferă programatorului oportunitatea de a modifica ulterior reprezentarea datelor, fără să
schimbe reprezentarea obiectului pentru lumea exterioară.

28
8.3. Clasele
Obiectele cu aceleaşi proprietăţi şi acelaşi comportament formează o clasă, sau un tip de
obiecte. O clasă prezintă un plan de construcţie pentru obiectele conţinute în ea, aşadar
defineşte numărul, numele şi structura atributelor şi metodelor. În plus, o clasă asigură
comportamentul (implementarea funcţiilor). Obiectele noi sunt create graţie planului de
construcţie definit iniţial. Fiecare obiect este membru al unei anumite clase; se spune că este o
instanţă a clasei respective. De aceea, proprietatea unui obiect este numită variabila instanţei
clasei.
JavaScript nu este un limbaj orientat spre obiecte bazat pe clase, deoarece nu există
instrucţiuni pentru clase, însă include un concept similar: tipul obiect.Din tipurile de obiecte
pe parte de client fac parte mai întâi diferitele obiecte GUI sau obiecte esenţiale ca Date.
String şi Math. Obiectele noi sunt create cu metoda new a tipului obiect. Acest lucru este
valabil pentru toate tipurile de obiecte.
JavaScript este un limbaj bazat pe instanţe deoarece nu există o metodă constructoare de
clase. Bazat pe instanţe este o sintagmă din limbajul orientat spre obiecte, care înseamnă că
limbajul de programare are obiecte, dar nu şi clase.
În acest context, JavaScript nu este foarte bine structurat. Nu are clase, dar are conceptul
de tip obiect. Mai mult, obiectele noi nu sunt construite prin intermediul obiectelor existente,
ci folosind instrucţiunea new. Netscape defineşte JavaScript ca fiind un limbaj de programare
bazat pe instanţe.
Trebui subliniat că instrucţiunea function slujeşte mai multor scopuri în JavaScript.
Crearea unui nou tip de obiect înseamnă definirea unei funcţii ce are ca nume chiar numel
tipului de obiect. Rezultă un cod sursă aparent derutant pentru cel care-l citeşte. Proprietăţile
noului tip de obiect sunt declarate ca parametri ai funcţiei definitorii, ceea ce înseamnă că
pentru o clasă nouă există un singur constructor. Aşa cum sugerează denumirea însăşi
denumirea sa, constructorul este o metodă a unei clase care creează un obiect nou din şablonul
clasei. Constructorul iniţializează noul obiect cu valorile datelor pe care le-a primit în partea
de parametri a metodei. Următorul cod arată un şablon pentru declararea unui nou tip de
obiect în JavaScript:

function ObjectType(instVar1, instVar2, ...) {


this.property1 = instVar1;
this.property2 = instVar2;
...
this.method1 = fct1;
this.method2 = fct2;
...
}

function fct1(param1, param2, ...) {


//impementare
}

function fct2(param1, param2, ...) {


//implementare
}

Obiectul special this adresează obiectul curent în declararea tipului de obiect.


Proprietăţile şi metodele noului tip de obiect sunt definite prin atribuiri făcute lui this.
Proprietăţile iniţiale pentru noul obiect sunt date ca parametri ai funcţiei creatoare; în şablon,
ele sunt numite instVar1 şi instVar2. În definirea tipului de obiect, sunt prezente numai

29
numele metodelor (method1 şi method2). Implementarea metodelor ca funcţii JavaScript
(function1 şi function2) va fi prezentată mai târziu.
Este preferabil ca declarările noilor tipuri de obiecte să fie plasate în secţiunea <head> a
documentului HTML, pentru a fi citite la începutul procesului de încărcare a documentului. În
felul acesta se asigură cunoaşterea declarărilor clasei atunci când este interpretat restul
programului. De obiecei, în segmentul <body> al documentului HTML sunt plasate sarcinile
de acţiune.
Următorul exemplu prezintă o descriere a clasei Clock:

<html>
<head>
<title>Exemplu clasa Clock</title>
<script type="text/javascript">
<!--
function Clock (hours, minutes) {
this.hours = hours;
this.minutes = minutes;
this.settime = setTime;
this.displayTime = displayTime;
}

function setTime (hours, minutes) {


this.hours = hours;
this.minutes = minutes;
}

function displayTime () {
var line = this.hours + ":" + this.minutes;
document.write("<hr>Time of clock:" + line);
}
// -->
</script>
</head>
<body>
<script type="text/javascript">
<!--
var currTime = new Date();
var myClock = new Clock(currTime.getHours(),
currTime.getMinutes());
myClock.displayTime();
// -->
</script>
</body>
</html>

Deoarece JavaScript este un limbaj bazat pe instanţe, în timpul rulării de poate extinde cu
proprietăţi şi metode noi orice obiect existent. În felul acesta, o caracteristică nouă este
adăugată unui sinur obiect particular şi nu sunt afectate celelalte obiecte de acelaşi tip.

30
8.4. Obiecte JavaScript
Notaţia cu punct
În JavaScript, accesarea proprietăţilor şi metodelor unui obiect se face prin intermediul
notaţiei cu punct. Această notaţie, demonstrată în următorul exemplu de sintaxă, oferă o
metodă de tip ierarhie pentru accesarea proprietăţilor şi implementarea metodelor:
objectName.propertyName
objectName.methodName(arguments)
Obiectul curent este adresat prin intermediul variabilei speciale this.

Modelul de obiect JavaScript


Obiectele JavaScript sunt realmente obiecte, în sensul că au proprietăţi şi metode, şi pot
răspunde la evenimente. Cu toate acestea, JavaScript nu are aceleaşi capacităţi OOP reale de
moştenire. Spre deosebire de ierarhia de clase, care este bazată pe moştenire, modelul de
obiecte JavaScript este o ierarhie de conţinere, aşa cum este arătat în figura de mai jos:

Conţinerea este principiul conform căruia un obiect cconţine un alt obiect. Între obiecte
nu există o legătură genealogică, deoarece unul nu derivă din celălalt. Drept urmare, un obiect
nu poate moşteni proprietăţile şi metodele altui obiect, şi nici nu se poate subclasifica un
obiect în ierarhie.

Conţinerea în JavaScript
Conţinerea este un termen important de înţeles, nu numai în privinţa modului în care un
obiect este relaţionat cu altul, ci şi în privinţa modului practic în care se face referire la un
obiect. Pentru a face referire la proprietăţile sau metodele unui obiect se foloseşte notaţia cu
punct pentru a desemna deţinătorul. Se poate extinde conceptul, pentru a include nu numai
proprietăţile şi metodele unui obiect, ci şi eventualele obiecte conţinute de respectivul obiect.
Este important de ştiut când trebuie şi când nu este necesar să se facă referire la obiectl
container. Astfel, obiectul Window este obiectul de nivelul cel mai înalt cu care se lucrează.
Deşi în majoritatea cazurilor de poate ignora referirea la Window, ea este necesară atunci când
se lucrează cu ferestre sau cadre multiple.
Obiectul Window este singurul care dovedeşte indulgenţă în referirile la obiecte. Dacă se
doreşte să se refere un formular dintr-o pagină HTML, trebuie neapărat adăugat obiectul
părinte (Document) pentru ca JavaScript să înţeleagă la care obiect se face referire.

31
Proprietăţi
În JavaScript, proprietăţile seamănă cu atributele unui obiect. Proprietăţile unui obiect
explică identitatea şi caracteristicile obiectului respectiv. Pe lângă caracteristici şi valori de
identificare specifice, atributele obiectului pot reprezenta starea obiectului sau un rol pe care
acesta îl poate juca într-un moment anume.
Pe lângă notaţia cu punct, există şi alte modalităţi de a accesa proprietăţile unui obiect.
Exemplul următor demonstrează notaţia tablou:
objectName["propertyName"]
Următoarea linie demonstrează indexarea prin numerale ordinale:
objectName[integerIndex]
Tehnica aceasta întoarce atributul numărului integerIndex.

Metode
O metodă desemnează un serviciu pe care clasa îl oferă altor obiecte. În general metodele
se încadrează în una dintre următoarele 4 categorii:
• modificatoare: metodă care modifică starea unui obiect. Metoda aceasta modifică
valoarea unuia su mai multor atribute ale obiectului.
• selectoare: metodă care accesează atributele unui obiect, dar nu întreprinde nici o
modificare.
• iterativă: metodă care accesează toate părţile unui obiect, de pildă toate atributele, într-
o ordine definită. Metoda iterativă execută operaţii repetate asupra atributelor unui
obiect.
• constructoare: metoda unui tip de obiect care crează un obiect nou din şablonul clasei.
O metodă constructoare iniţializează noul obiect cu valorile datelor primite în partea
de aprametri a metodei.
Metodele obiectelor sunt funcţii JavaScript normale şi se accesează folosind noataţia cu
punct:
objectName.functionName(arguments)
În cadrul metodelor referirea la proprietăţile obiectului curent se face folosind obiectul
special this.

Evenimente
Adesea, instrucţiunile JavaScript creează sau manipulează elemente ale interfeţei grafice
cu utilizatorul, ca formulare sau ferestre. În contextul unei interfeţe grafice cu utilizatorul, un
eveniment este rezultatul unei acţiuni a utilizatorului. El are loc atunci când utilizatorul
întreprinde ceva. De exemplu, când utilizatorul execută clic pe un buton al interfeţei, are loc
un eveniment click. Alte evenimente GUI sunt executarea unui clic într-o casetă de validare,
selectarea unui şir într-o casetă cu listă, executarea unui dublu clic pe un element şi
deschiderea sau închiderea unei ferestre.
Modalitatea optimă de a controla interfeţele grafice cu utilizatorul este prin intermediul
programării conduse de evenimente. În JavaScript, evenimentele pot fi capturate, adică
tratate de handlere de evenimente.

8.5. Clasificarea obiectelor


Cele mai multe obiecte sunt fie partea de client, fie pe partea de server, fie esenţiale.
Funcţionalitate pe partea de client încorporată în JavaScript se focalizează asupra a ceea ce se
poate face cu paginile HTML. În general, primul set de obiecte are o corelare cu browserul şi
cu etichetele HTML din acesta.

32
Majoritatea obiectelor JavaScript sunt reprezentări ca obiecte ale etichetelor HTML.
Tabelul de mai jos enumeră obiectele pe partea de client şi etichetele HTML care le
corespund.

Obiect JavaScript Etichetă HTML corespondentă


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>

8.6. Obiectele Navigator, Mimetype şi Plugin


Obiectul Navigator
Denumit ca atare de inventatorii limbajului JavaScript (Netscape), obiectul navigator
reprezintă software-ul browser care este utilizat. Folosind acest obiect se pot regăsi informaţii
despre denumirea şi versiunea browserului, dar şi alte informaţii. Atât Netscpae Navigator,
cât şi Microsoft Internet Explorer, recunosc obiectul navigator. Obiectul în sine are două
obiecte copil: Plugin şi Mimetype. Metodele şi proprietăţile obiectului navigator sunt:

Tip Element Descriere


Metodă javaEnabled() Funcţie care testează dacă Java este recunoscut de
browser (JavaScript1.1)
plugins.refresh() Caută orice module plug-in nou instalate
(JavaScript1.2)
preference() Permite citirea şi stabilirea diverselor preferinţe
ale utilizatorului în browser (JavaScript1.2)
taintEnabled() Testează dacă este activă contaminarea datelor
(JavaScript1.1)
Proprietat appCodeName Reprezintă numele de cod al browserului.
e appName Face referire la numele oficial al browserului.
appVersion Face referire la versiunea browserului.
language Face referire la limbajul browserului
(JavaScript1.2).

33
mimeTypes Face referire la un tablou de obiecte MimeType
care conţine toate tipurile MIME pe care le
acceptă browserul (JavaScript1.1).
platform Şir care reprezintă platforma pe care rulează
browserul (JavaScript1.2).
plugins Face referire la un tablou de obiecte Plugin care
conţine toate modulele plug-in instalate pe
browser (JavaScript1.1).
userAgent Şir care reprezintă antetul utilizator-agent.

Obiectul Mimetype
Obiectul MIME (Multipurpose Internet Mail Extensions), un subobiect al obiectului
navigator, a fost adăugat în JavaScript 1.1. El permite accesarea informaţiilor despre
tipurile MIME pe care le recunosc modulele pluf-in. Proprietăţile obiectului Mimetype sunt
date în tabelul de mai jos:

Proprietate Descriere
description Conţine descrierea obiectului Mimetype.
enabledPlugin Conţine modulul plug-in pentru un obiect Mimetype specific.
suffixes Conţine extensia de fişier pentru Mimetype.
type Conţine reprezentarea de tip şir a obiectului Mimetype.

Obiectul Plugin
Obiectul Plugin, care a fost adăugat în JavaScript 1.1 şi nu este recunoscut de Internet
Explorer, este creat prin instalarea de module plug-in pentru browser. Acest obiect conţine un
tablou de elemente şi tipuri MIME tratate de fiecare modul plug-in. Proprietăţile obiectului
Plugin sunt date în tabelul de mai jos:

Proprietate Descriere
Description Face referire la o descriere a modulului plug-in.
Filename Face referire la numele fişierului unui program plug-in.
Length Face referire la numărul de tipuri MIME conţinute în tablou.
Name Face referire la numele modulului plug-in.

8.7. Obiectul Window


Un browser Web este prezentat utilizatorului într-o fereastră şi tot ceea ce utilizatorul face
cu browserul se execută în interiorul ferestrei respective. Mai mult chiar, toate elementele
ecranului sunt de asemenea conţinute în fereastra respectivă.
Obiectul Window este considerat obiectul de nivelul cel mai înalt în ierarhia obiectelor
JavaScript pe partea de client (cu excepţia obiectului navigator în sine). Obiectul Window
nu are o etichetă HTML corspondentă, dar este creat atunci când se deschide o nouă fereastră
de browser. Proprietăţile şi metodele obiectului Window sunt următoarele:

Tip Element Descriere


Metodă atob() Decodifică un şir care a fost codificat în baza 64
(JavaScript1.2).

34
alert() Afişează o casetă de avertizare cu şirul de text
transferat.
back() Încarcă pagina anterioară în locul instanţei window
(JavaScript1.2).
blur() Dezactivează o fereastră.
btob() Codifică un şir în baza 64 (JavaScript1.2).
captureEvents() Stabileşte ca fereastra să captureze toate
evenimentele de un tip specificat (JavaScript1.2).
clearInterval() Şterge intervalul stabilit cu metoda
setInterval()(JavaScript1.2).
clearTimeout Şterge pauza stabilită cu metoda setTimeout().
close() Închide instanţa ferestrei (JavaScript1.1).
confirm() Afişează o casetă de confirmare.
crypto.random() Generează un şir aleator de date, a cărui lungime
este specificată de numărul de octeţi transferaţi
(JavaScript1.2).
crypto.signText( Întoarce un şir de date codificate care reprezintă un
) obiect semnat (JavaScript1.2).
disableExternalC Dezactivează capturarea unui eveniment extern
apture() (JavaScript1.2).
enableExternalCa Activează capturarea unui eveniment extern pentru
pture() paginile încărcate din alte servere (JavaScript1.2).
find() Afişează o casetă de dialog Find în care utilizatorul
poate introduce text pentru căutare în pagina
curentă (JavaScript1.2).
focus() Activează instanţa window specificată
(JavaScript1.1).
forward() Încarcă următoarea pagină în locul instanţei
window (JavaScript1.2).
handleEvent() Apelează handlerul pentru evenimentul transferat
(JavaScript1.2).
home() Încarcă pagina de bază specificată a utilizatorului în
locul instanţei window (JavaScript1.2).
moveBy() Deplasează fereastra cu valoarea specificată
(JavaScript1.2).
moveTo() Deplasează fereastra în locaţia specificată
(JavaScript1.2).
open() Deschide o nouă instanţă a unei ferestre.
print() Apelează caseta de dialog Print, astfel ca
utilizatorul să poată tipări fereastra curentă
(JavaScript1.2).
prompt() Afişează o casetă de dialog.
releaseEvents() Eliberează evenimentele capturate (JavaScript1.2)
resizeBy() Redimensionează fereastra cu dimensiunea
specificată (JavaScript1.2).
resizeTo() Redimensionează fereastra la dimensiunea
specificată (JavaScript1.2).
routeEvent() Transferă evenimentele de un tip specificat pentru a
fi tratate nativ (JavaScript1.2).
scroll() derulează documentul în fereastră până la o locaţie
specificată (JavaScript1.1).

35
scrollBy() Derulează documentul în fereastră cu o valoare
pecificată (JavaScript1.2).
scrollTo() Derulează documentul pe lăţime şi înăţime, până la
o locaţie specificată din fereastră (JavaScript1.2).
setHotKeys() Permite comutarea între activarea şi dezactivarea
tastelor de selectarea rapidă, când nu sunt prezente
meniuri (JavaScript1.2).
setInterval() Apelează o funcţie sau evaluează o expresie la
intervale de timp (JavaScript1.2).
setResizable() Permite specificarea dacă un utilizator poate
redimensiona o fereastră (JavaScript1.2).
setTimeout() Apelează o funcţie sau evaluează o expresie după
un anumit număr de secunde.
setZOptions() Permite specificarea stivuirii în ordine z a unei
ferestre (JavaScript1.2).
stop() Opreşte încărcarea de noi elemente în fereastra
curentă (JavaScript1.2).
Proprietat closed Specifică dacă instanţa window a fost închisă.
e crypto Permite accesul la caracteristicile de criptare din
Navigator (JavaScript1.2).
defaultStatus Specifică mesajul prestabilit în bara de stare a
ferestrei.
document Menţionează toate informaţiile despre documentul
din fereastră (a se vedea obiectul Document)
frames Menţionează toate informaţiile despre cadrele din
fereastră (a se vedea obiectul Frame)
history Menţionează adresle URL vizitate de utilizator
(JavaScript1.2)
innerWidth Conţine lăţimea în pixeli a zonei afişate din
fereastra curentă (JavaScript1.2).
length Reprezintă numărul de cadre din fereastra curentă.
location Conţine adresa URL curentă încărcată în fereastră.
locationbar Face referire la bara de locaţie a browserului
(JavaScript1.2).
locationbar.visi Valoare booleană care indică dacă bara de locaţie
ble este vizibilă (JavaScript1.2).
menubar Face referire la bara de meniui a browserului
(JavaScript1.2).
menubar.visible Valoare booleană care indică dacă bara de meniuri
de pe browserul utilizatorului este vizibilă
(JavaScript1.2).
name Conţine numele ferestrei.
offscreenBufferi Valoare booleană care permite să se determine dacă
ng vreo actualizare a ferestrei este executată într-un
buffer din afara ecranului (JavaScript1.2).
opener Conţine numele ferestrei din care a fost deschisă o
fereastră secundară.
outerHeight Conţine înălţimea în pixeli a suprafeţei din
exteriorul ferestrei curente (JavaScript1.2).
outerWidth Conţine lăţimea în pixeli a suprafeţei din exteriorul
ferestrei curente (JavaScript1.2).

36
pageXOffset Conţine coordonata X a ferestrei curente
(JavaScript1.2).
pageYOffset Conţine coordonata Y a ferestrei curente
(JavaScript1.2).
parent Face referire la fereastra de nivelul cel mai înalt
care afişează cadrul curent.
personalbar Menţionează informaţii despre bara personală a
browserului (JavaScript1.2).
personalbar.visi Valoare booleană care indică dacă bara personală
ble de pe browserul utilizatorului este vizibilă
(JavaScript1.2).
screenX Face referire la coordonata X a browserului din
marginea stângă a ferestrei (JavaScript1.2).
screenY Face referire la coordonata Y a browserului din
marginea de sus a ferestrei (JavaScript1.2).
scrollbars Face referire la barele de derulare ale browserului
(JavaScript1.2).
scrollbars.visib Valoare booleană care indică dacă barele de
le derulare de pe browserul utilizatorului sunt vizibile
(JavaScript1.2).
self Face referire la fereastra curentă.
status Face referire la bara de stare a browserului
(JavaScript1.2).
status.visible Valoare booleană care indică dacă bara de stare de
pe browserul utilizatorului este vizibilă
(JavaScript1.2).
toolbar Face referire la bara de instrumente a browserului
(JavaScript1.2).
toolbar.visible Valoare booleană care indică dacă bara de
instrumente de pe browserul utilizatorului este
vizibilă (JavaScript1.2).
top Face referire la fereastra de nivelul cel mai înalt
care afişează cadrul curent.
window Face referire la fereastra curentă.

8.8. Obiecte de nivelul cel mai înalt


Obiectul Window, de nivelul cel mai înalt pe parte de client, conţine patru obiecte copil,
caer formează baza pentru toate celelalte obiecte. Ele sunt:
• Document
• Frame
• History
• Location

Obiectul Document
Deşi obiectul Window are nivelul cel mai înalt în ierarhie, obiectul Document este
probabil cel mai important. El este responsabil pentru conţinutul efectiv afişat pe o pagină şi
se poate lucra cu el pentru a construi pagini HTML dinamice. În document sunt conţinute de
asemenea toate elementele obişnuite ale interfeţei cu utilizatorul (UI) ale unei aplicaţii Web.
Proprietăţile şi metodele obiectului Document sunt date în tabelul de mai jos:

37
Tip Element Descriere
Metodă capturEvents() Capturează evenimentele ce vor fi tratate de
document (JavaScript1.2).
close() Închide fluxul datelor de ieşire spre document.
contextual() Permite aplicarea în mod selectiv a unui stil unui
element HTML care apare într-un context specific
(JavaScript1.2).
getSelection() Întoarce textul selectat (JavaScript1.2).
handleEvent() Apelează handlerul pentru evenimentul specificat
(JavaScript1.2).
open() Deschide fluxul datelor de ieşire spre document.
releaseEvents() Eliberează evenimentele capturate de document
(JavaScript1.2).

38
routeEvent() Dirijează evenimentele capturate spre alte obiecte
(JavaScript1.2).
write() Adaugă text în document.
writeln() Adaugă text şi un caracter linie nouă în document.
Proprietăţi alinkColor Culoarea unei legături activate.
all Tabloul tuturor etichetelor HTML din document
(JavaScript1.3).
anchors Tabloul de obiecte Anchor (JavaScript1.2).
applets Tabloul de obiecte Applet (JavaScript1.1).
bgColor Culoarea de fundal a documentului.
classes Tabloul claselor paginilor cu stiluri
(JavaScript1.2).
cookie Fişier cookie asociat cu documentul.
domain Domeniul documentului (JavaScript1.1).
embeds Tablou de obiecte înglobate (JavaScript1.1).
fgColor Culoarea textului în document.
forms Tablou de obiecte Form.
formName Specifică instanţa Form care este accesată prin
folosirea valorii atributului name în eticheta
<form> (JavaScript1.1).
height Specifică înălţimea documentului în pixeli
(JavaScript1.2).
ids Tabloul identificatorilor paginilor cu stiluri
(JavaScript1.2).
images Tablou de obiecte Image (JavaScript1.2).
lastModified Data când a fost modificat ultima oară
documentul.
layers Tablou de obiecte Layer (JavaScript1.2).
linkColor Culoarea legăturilor.
links Tablou de obiecte Link.
plugins Tablou de obiecte înglobate (JavaScript1.2).
referrer Adresa URL a documentului la care a fost legat
documentul curent.
tags Tabloul etichetelor paginilor cu stiluri
(JavaScript1.2).
title Titlul documentului.
URL Adresa URL a documentului curent
(JavaScript1.1).
vlinkColor Culoarea leagăturilor vizitate.
width Specifică lăţimea în pixeli a documentului
(JavaScript1.2).

Obiectul Frame
Cadrele sunt obiecte foarte importante, folosite pentru îmbunătăţirea prezentării
aplicaţiilor Web. Obiectul Frame reprezintă un cadru dintr-o structură de cadre. Într-o
prezentare de cadre multiple, obiectul Window este pagina care conţine definirea
<frameset>, în timp ce celelalte pagini sunt considerate cadre în acest context. Proprietăţile
şi metodele obiectului Frame sunt date în tabelul de mai jos:

39
Tip Element Descriere
Metodă blur() Dezactivează cadrul (JavaScript1.1).
clearInterval() Anulează o execuţie repetată (JavaScript1.2).
clearTimeout() Anulează orice execuţie întârziată.
focus() Activează un cadru (JavaScript1.1).
print() Afişează caseta de dialog Print (JavaScript1.2).
setInterval() Stabileşte planificarea funcţiei pentru executare
repetată (JavaScript1.2).
setTimeout() Stabileşte planificarea funcţiei pentru executare
întârziată.
Proprietat document Documentul curent încărcat în interiorul unui
e cadru.
frames Tablou conţinând referiri la cadrele copil.
length Lungimea tabloului de cadre.
name Atributul name al etichetei <frame>.
parent Fereastra principală sau cadrul principal din care
sunt create cadrele copil.
self Face referire la cadrul curent.
top Fereastra de browser care execută scriptul.
window Face referire la fereastra curentă sau la cadrul
curent.

Obiectul History
O veche caracteristică în softul browserelor este capacitatea de a urmării locaţiile care au
fost vizitate în decursul unei sesiuni. Această caracteristică a ajuns să fie cunoscută ca lista
istoric, iar obiectul History este echivalentul ei în JavaScript. Proprietăţile şi metodele
obiectului History sunt date în tabelul de mai jos:

Tip Element Descriere


Metodă back() Încarcă precedenta adresă din lista istoric.
forward() Încarcă următoarea adresă din lista istoric,
presupunând că la un moment dat utilizatorul s-a
întors.
Go() Încarcă o adrsă URL din lista istoric, folosind
decalarea transferată.
Proprietat current Face referire la adresa URL curentă din lista
e istoric (JavaScript1.1).
length Întoarce numărul de intrări din lista istoric.
next Face referire la următoarea adresă URL din lista
istoric (JavaScript1.1).
previous Face referire la adresa URL anterioară din lista
istoric (JavaScript1.1).

Obiectul Location
În Web, principalul este prezentarea conţinutului. Toate obiectele Window sunt concepute
pentru a afişa conţinut pe ecranul utilizatorului, dar conţinutul respectiv trebuie să provină de
undeva şi, de aceea, originea paginii este conţinută în obiectul Location. Proprietăţile şi
metodele obiectului Location sunt date în tabelul de mai jos:

40
Tip Element Descriere
Metodă reload() Reîncarcă adresa URL curentă în fereastra de
browser (JavaScript1.1).
replace() Încarcă noua pagină transferată în browserul
curent (JavaScript1.1).
Proprietat hash Reprezintă un nume de ancoră în adresa URL,
e care începe cu caracterul #.
host Reprezintă numele calculatorului gazdă şi
numărul de port al adresei URL.
hostname Reprezintă partea cu numele calculatorului gazdă
din adresa URL
href Reprezintă adresa URL completă.
pathname Reprezintă partea PATH_INFO a adresei URL.
port Reprezintă partea de port a adresei URL.
protocol Reprezintă partea de protocol a adresei URL.
search Partea de căutare a adresei URL, inclusiv
caracterul ?.

41
9. Scriptarea modelului obiectului
document

9.1. Elemente esenţiale ale modelului obiectului document (DOM)


Progresele importante ale Web-ului soluţionează întotdeauna problemele vechi. De
exemplu, Java oferea o modalitate de dezvoltare a unor aplicaţii Web independente de
platforma de lucru prin folosirea miniaplicaţiilor. Deşi nu este la fel de important, modelul
obiectului document rezolvă altă problemă destul de veche - portabilitatea scripturilor
JavaScript şi a programelor Java în contextul browserelor Web. DOM reuşeşte acest lucru
folosind interfeţe standard de programare a aplicaţiilor (API), care sunt definite în Object
Management Group (OMG) Interface Definition Language (IDL) şi, ca urmare, pot fi utilizate
de orice limbaj care respectă IDL. Se poate considera că interfeţele colective ale DOM sunt o
modalitate de a standardiza obiectele în toate browserele, la distribuirea de documente HTML
şi XML. Desigur, browserul Web trebuie să accepte DOM, iar mişcarea în această direcţie a
căpătat un ritm rapid.
Actualmente, DOM nu este foarte complex, ci doar defineşte o structură logică şi
standardizată a documentelor, graţie căreia se pot construi, edita şi răsfoi elemente şi conţinut
în documente HTML sau XML. Structura DOM este pur şi simplu o ierarhie de obiecte,
comparabilă cu a limbajului JavaScript sau a oricărui alt limbaj bazat pe obiecte. Diferenţa
este că DOM are o interfaţă API utilă, neutră din punctul de vedere al limbajului, care
defineşte un set standard de interefeţe. Asta nu înseamnă că toate aplicaţiile DOM vor fi
bazate pe aceleaşi obiecte; ele îşi pot defini propriile interefeţe şi obiecte.

9.2. De la DHTML la DOM


Tranziţia paginilor Web spre un model de obiect cunoaşte multe etape, dar puţine sunt atât
de importante ca DHTML, care, în sine, este nesemnificatic prin comparaţie cu DOM.
Aceasta se datorează faptului că DOM este un model standardizat de obiect pe care
programatorii Web îl doreau de multă vreme. De exemplu, dacă un programator Web trebuie
să actualizeze o pagină Web cu modelul de obiect DHTML, va fi necesar un volum
considerabil de informaţii, posibil sub forma unui ghid pentru programatori. În realitate,
DHTML este pur şi simplu o modalitate de a permite modificarea obiectelor care sunt
accesate şi manipulate folosind atributele lor id şi name. El nu introduce standardizarea şi
simplificarea din DOM, care încapsulează întregul document ca un model de obiecte,
reprezentându-l sub forma unei ierarhii sau structuri arborescente. Nodurile acestei structuri
arborescente reprezintă etichetele HTML şi segmentele de text pe care le pot conţine. Întregul
document HTML se află în structura aceasta arborescentă, arătând toate obiectele şi relaţiile
între copii, părinţi şi fraţi. Spre deosebire de DHTML, se poate naviga prin structura
arborescentă a documentului DOM, efectuând modificări cu uşurinţă.

9.3. Navigarea prin documente


Listingul următor prezintă o structură DOM care conţine un titlu de document, o intrare de
tip text şi patru paragrafe:

42
<html>
<head>
<title>DOM</title>
</head>
<body id="bodyNode">
<p id="Node1">Prim paragraf</p>
Documentul principal
<p id="Node2"></p>
<p id="Node3"></p>
<p id="Node4"></p>
</body>
</html>

Eticheta <body> se află la nivelul cel mai înalt al structurii arborescente şi are cinci copii
- patru etichete şi o singură intrare text. Structura arborescentă DOM a unui document are
noduri pentru etichete şi intrări text. Folosind proprietăţile DOM se poate naviga spre orice
punct din document:
Navigare spre Expresie
Primul copil bodyNode.firstchild sau
bodyNode.childNodes[0]
Al doilea copil bodyNode.childNodes[1]
Al cincilea sau ultimul copil bodyNode.childNodes[4] sau
bodyNode.lastChild
Al doilea copil al rădăcinii (nodul text) Node1.nextSibling
de la nodul 1

43

S-ar putea să vă placă și