TUTORIAL JavaScript

Introducere în limbajul JavaScript
Limbajul JavaScript a fost inventat de o echipă de la Netscape, care dorea să facă browserul lor să
interacŃioneze mai mult cu utilizatorul şi să facă paginile mai dinamice. Deşi au nume asemănătoare,
limbajele JavaScript şi Java nu au nimic în comun unul cu celălalt. La început, când a fost introdus în
browserul Netscape Navigator prima variantă de scriptare rudimentară, se numea LiveScript. În
aceeaşi perioadă, Java era deja lansat şi era din ce în ce mai cunoscut şi se anticipa a fi un limbaj
revoluŃionar. Ulterior, Netscape a actualizat browserul Navigator pentru a permite rularea de appleturi
Java în Navigator 2, dar odată cu aceste actualizări a redenumit LiveScript în JavaScript.
Java este un limbaj de programare dezvoltat şi comercializat de compania Sun Microsystems. Limbajul
Java este descendent al familiei de limbaje de programare C şi C++, iar cu ajutorul lui se pot crea
diverse aplicaŃii şi se poate controla funŃionarea diverselor aparate electronice. Principala utilizare a
limbajului Java în domeniul web (client-side), în browserul utilizatorului, este crearea de appleturi,
aplicaŃii mici care sunt descărcate prin Internet şi rulează în cadrul browserului. Datorită
compatibilităŃii interplatformă a limbajului Java, aceste appleturi ar trebui să ruleze identic pe orice
browser care permite executarea de cod Java.
Appleturile Java sunt adăugate în pagina web prin folosirea tagului HTML <applet>. Când browserul
întâlneşte acest tag, el descarcă appletul Java de pe server, iar appletul va rula în porŃiunea de ecran
specificată în tag.
Un script JavaScript este un program inclus într-o pagina HTML. Deoarece este încadrat de
tagul <script>, textul scriptului nu apare pe ecran, dar este rulat şi interpretat de către browser.
Tagul <script> este prezent cel mai frecvent în secŃiunea <head> a paginii HTML, deşi se pot pune şi
în secŃiunea<body>. De obicei, scripturile care urmează să afişeze mesaje pe ecran sunt scrise
în <body>
Când Microsoft a văzut că limbajul JavaScript devenea popular, a preferat să-şi construiască un limbaj
propriu, foarte similar cu limbajul JavaScript, dar nu chiar identic, denumit JScript.
În continuare este prezentată o scurtă analiză a diferitelor versiuni de browsere şi versiunea de
JavaScrip pe care o are fiecare.
JavaScript creat de compania Netscape
Prima versiune, initial denumită LiveScript, a fost lansată odată cu browserul Netscape Navigator 2.0.
Ea este cunoscută şi sub denumirea de JavaScript 1.0. La Navigator 3.0, a fost introdusă versiunea
1.1, care aduce suport pentru imagini, vectori, applet-uri Java şi plug-in-uri. La versiunea Navigator
4.0 (cunoscut şi cu numele de Netscape Communicator), a fost introdusă JavaScript 1.2. La Netscape
4.5 - JavaScript 1.3. Versiunea JavaScript 1.4 a fost concepută să ruleze exclusiv pe servere. La
Netscape 6 a fost adaugată JavaScript 1.5
Proiectul destinat creeri browserului open-source denumit Mozilla, precum şi cele derivate de la
acesta, cum ar fi Camino pentru Mac OS X, folosesc ECMAScript-262, editia 3, care corespunde
versiunii 1.5 de JavaScript (Netscape 6 şi versiunile ulterioare se bazează pe Mozilla)
Browser Versiune script

2.0 1.0
3.0 1.1
4.0 - 4.05 1.2
4.06 - 4.7 1.3
6.0, 7.0, Mozilla 1.5
JScript creat de compania Microsoft
Prima versiune denumită JScript 1.0, are câteva diferenŃe faŃă de JavaScript 1.0 şi se găseşte în
browserul Microsoft Internet Explorer (MSIE) 3.01
http://kidu-kid.com
Pe Windows 95/NT la unele variante de MSIE 3.02 (nu toate) este JScript 2.0 (cred că vă daŃi seama
ce aiureală este, unele variante cu versiunea JScript 1.0, altele, în aceeaşi versiune de MSIE cu JScript
2.0
Ca să aflaŃi ce versiune de JScript aveŃi instalată pe calculator, căutaŃi fişierul jscript.dll şi vedeŃi în
proprietăŃile lui la tabul Version (clic dreapta pe fişier - Properties - Version)
Pe Macintosh, MSIE 3.0 nu avea nici un fel de JScript, dar versiunea 3.01 are versiunea JScript 1.0,
dar nu este identică cu versiunea de pe Windows (de exemplu, versiunea pentru Mac tolera obiecte de
tip imagine pentru crearea de rollover la trecerea cu mouse-ul, în timp ce JScript pentru Windows nu
tolera acest lucru)
Dacă înca nu sunteti zăpacit, vedeŃi în continuare ce le trece celor de la Microsoft prin cap:
MSIE 4.0 are JScript 3.0 echivalent într-o oarecare măsură cu JavaScript 1.2, iar MSIE 5.0 are JScript
5.0 aproximativ echivalentul lui JavaScript 1.5
Astfel Windows 2000 avea JScript 5.1, Windows ME cu JScript 5.5, iar Windows XP foloseste 5.6
MSIE Versiunea JScript

3.x / 1 1.0
3.x / 2 2.0
4.0 3.0
5.0 5.0
5.1 5.1
5.5 5.5
6.0 5.6
AOL
Probabil credeŃi că dat fiind faptul că AOL este proprietarul lui Netscape ar trebui să includă versiunile
normale de JavaScript. Gresală. Din motive contractuale, AOL foloseşte Microsoft Internet Explorer.
Versiunea AOL 16-bit PC 32-bit PC MAC

3.0 3.0 3.0 2.1
3.01
3.02
4.01
4.0 3.0 n/a 3.01
5.0 n/a 4.01
ECMAScript
În 1996, programatorii web au început să se plângă că Netscape şi Microsoft mergeau în direcŃii

diferite. Nimănui nu îi place să scrie scripturi diferite pentru fiecare browser, ba chiar în limbaje
diferite, aşa că Netscape a înaintat specificaŃiile limbajului JavaScript la un organism internaŃional de
standardizare numit ECMA. În iunie 1997, ECMA a produs un standard care se numeşte ECMA-
262 (cunoscut şi sub numele de ECMAScript). Standardul seamănă destul de mult cu JavaScript 1.1
dar nu este identic.
Microsoft pretinde că versiunile mai noi de 4.0, inclusiv, respectă standardul ECMAScript având în plus,
câteva caracteristici patentate şi specifice pentru MSIE. În teorie, dacă scrieŃi cod compatibil
standardului ECMAScript, acesta ar trebui să ruleze la fel în MSIE 4.0+ şi în Netscape Navigator 6.0+.
În practică, ar trebui să testaŃi pe diferite browsere, platforme şi versiuni ca să fiŃi siguri.
În ce priveşte Netscape, se pare că începând de la Netscape 6+ respectă 100% standardul
ECMAScript.
Mozilla şi derivatele sale sunt într-adevăr compatibile cu ECMAScript.
http://kidu-kid.com
E bine de reŃinut că ECMA conduce acum procesul de standardizare al lui JavaScript şi că toŃi creatorii
de browsere încearcă să facă implementările de JavaScript compatibile cu standardul ECMAScript.
Ce puteŃi face cu JavaScript
JavaScript vă permite să creaŃi o interfaŃă activă cu utilizatorul, să dea o impresie vizuală plăcută în
timp ce navigaŃi prin paginile site-ului. PuteŃi verifica validitatea informaŃiilor introduse într-un
formular înainte ca datele să fie trimise către server. PuteŃi face calcule matematice, crea pagini HTML
dinamice, personalizate în funcŃie de opŃiunile utilizatorului sau al browserului. JavaScript controlează
browserul, şi prin intermediul scripturilor puteŃi deschide ferestre noi, puteŃi afişa mesaje de avertizare
şi puteŃi pune mesaje în bara de stare a ferestrei browserului. PuteŃi genera ceasuri, calendare şi
documente cu timpul înscris. PuteŃi chiar verifica prezenŃa plug-in-urilor în browser, şi puteŃi redirecta
utilizatorul spre o pagină diferită în cazul în care browserul nu are un anumit plug-in.
Aici trebuie sa fac o precizare, se pot detecta plug-in-urile în browserele Netscape Navigator 3.0 sau
mai nou (pe orice sistem de operare) şi în Internet Explorer 5.0 sau mai nou (doar pe platforma
Macintosh)
O menŃiune importantă: programele care rulează pe calculatorul utilizatorului sunt numite aplicaŃii
client-side (aflate pe partea de client), şi programele care ruleaza pe server (inclusiv CGI-urile) sunt
numite aplicaŃii server-side (aflate pe partea de server)
Deoarece JavaScript rulează pe calculatorul dumneavoastra, i-au fost impuse o serie de limitări,
majoritatea din raŃiuni de securitate, şi anume:
- nu permite citirea sau scrierea de fişiere pe calculatorul utilizatorului. Singura excepŃie este
permisiunea de a scrie în directorul de cookie-uri al browserului, dar şi aici sunt anumite limite.
- nu permite citirea/scrierea de fisiere pe server. Alternativa este să rulaŃi pe server un program care
să preia datele trimise de script şi să le scrie pe server (un CGI, scris într-un limbaj precum Perl sau
PHP, sau un program Java.
- un script JavaScript nu poate închide o fereastră de browser care nu a fost deschisă de el. Astfel se
evită situaŃia când intraŃi pe un site şi vi se închid celelalte ferestre active care conŃin alte site-uri...
- nu poate citi informaŃii dintr-un browser care conŃine o pagina web de pe un alt server, ca să nu
puteŃi afla pe ce site-uri navigează utilizatorul.
http://kidu-kid.com
Rutine, valori, variabile, atribuiri şi comparaŃii
JavaScript este un limbaj orientat pe obiecte. Un obiect este un lucru care are o serie de proprietăŃi. O
masă, un calculator şi o bicicletă sunt toate obiecte ale lumii fizice. Pentru JavaScript, obiectele sunt
entităŃile prin intermediul cărora utilizatorul interacŃionează cu browserele web, precum ferestrele şi
formularele, chiar şi elementele formularelor, cum ar fi butoanele şi casetele de bifare.
Obiectele, la rândul lor au anumite proprietăŃi. Calculatorul are tastatură, bicicleta are roŃi, etc. În
JavaScript, o fereastră are un titlu, un formular poate avea o casetă de validare, etc. Modificarea unei
proprietăŃi a obiectului poate modifica obiectul, iar o aceeaşi proprietate poate fi aplicată unor obiecte
diferite (un exemplu din viaŃa reală este aparatul foto, singur este doar un obiect, adăugat la un
telefon devine alt obiect cu ambele proprietăŃi, aceea de telefon şi cameră foto încorporată, iar dacă la
telefon adaugăm şi un calculator, obŃinem un telefon smart, care are toate cele trei proprietăŃi de la
fiecare obiect în parte). Tastatura calculatorului şi roŃile bicicletei nu sunt singurele lor proprietăŃi. Ele
sunt, la randul lor, obiecte, care pot avea la rândul lor proprietăŃi (roata conŃine spite, care sunt de
asemenea obiecte). Obiectele pot astfel conŃine subobiecte.
AcŃiunile pe care obiectele le pot realiza poartă numele de metode. Telefoanele sună, calculatoarele se
defectează şi bicicletele merg. Obiectele JavaScript au şi ele metode: butoanele se apasă - clik(),
ferestrele se deschid - open(), iar textul poate fi selectat - selected(). Parantezele ne anunŃă că avem
de-a face cu o metodă, nu o proprietate.
Putem grupa obiectele, proprietăŃile şi metodele pentru a obŃine o descriere mai bună a unui obiect
sau pentru a descrie un proces. În JavaScript, acestea sunt separate de puncte. Sintaxa poartă
numele de sintaxă punctată. Iată exemple de obiecte şi proprietăŃile lor:
bicicleta.roti
calculator.unitate_de_stocare.disketa
document.imagine.nume
fereastra.stare
Si iată şi câteva exemple de obiecte şi metode scrise în sintaxa punctată:
document.scrie()
formular.elemente.buton_radio.clic()
Evenimentele sunt acŃiuni efectuate de utilizator în timp ce vizitează pagina. Trimiterea unui formular
şi mişcarea cursorului mouse-ului deasupra unei imagini sunt două exemple de evenimente.
Rutinele de tratare a evenimentelor (event handlers) sunt comenzile care se ocupă de evenimente. În
JavaScript, dacă utilizatorul dă clic pe un buton, rutina de tratare a evenimentului onClick va lua
cunoştinŃă de acest lucru şi va executa codul corespunzător.
Rutine de tratare a evenimentelor:

Evenimentul Ce tratează
onAbort Utilizatorul a renunŃat la încărcarea paginii
onBlur utilizatorul a părăsit obiectul
onChange utilizatorul a modificat obiectul
onClik utilizatorul a dat clik pe un obiect
onError scriptul a întâmpinat o eroare
onFocus utilizatorul a activat un obiect
onLoad s-a terminat încărcarea obiectului
onMouseover cursorul mouse-ului s-a mişcat deasupra unui
obiect
onMouseout cursorul mouse-ului a părăsit un obiect
http://kidu-kid.com
onSelect utilizatorul a selectat conŃinutul unui obiect
onSubmit utilizatorul a trimis un formular
onUnload utilizatorul a părăsit fereastra
Valori şi variabile
În limbajul JavaScript orice formă de informaŃie este o valoare. Variabilele conŃin valori. Limbajul
JavaScript Ńine cont de majuscule şi minuscule. Numele variabilelor nu pot conŃine spaŃii sau semne de
punctuaŃie, şi nu pot începe cu o cifră. De asemenea, nu pot fi cuvinte cheie ale limbajului JavaScript.
Exemple de valori şi variabile:
numeleMeu = "Birkoff"
În acest exemplu numeleMeu este variabila şi Birkoff este valoarea. Există mai multe tipuri de valori:
Tip Descriere
Număr Contine orice valoare numerică.
Şir de caractere Şir de caractere încadrate de ghilimele.
Boolean Returnează adevărat (true) sau fals (false)
Nul orice variabilă fără conŃinut, fără înŃeles
Obiect Orice valoare asociată unui obiect
FuncŃie Valoarea returnată de o funŃie
Operatorii sunt simbolurile folosite în lucrul cu variabilele. Când daŃi unei variabile o valoare, atribuiŃi
acea valoare variabilei, şi folosiŃi un operator de atribuire pentru a efectua acŃiunea. Cu excepŃia
operatorului de egalitate, toŃi ceilalŃi operatori de atribuire sunt scurtături de modificare a valorii unei
variabile. De exemplu, o modalitate mai scurtă de a spune x=x+3 este x+=3
Operator: AcŃiune:
x + y (numeric) adună x cu y
x + y (şir de caractere) concaternează (lipeşte) x cu y
x-y scade y din x
x*y înmulŃeşte x cu y
x/y împarte pe x la y
x%y modulul lui x şi y (restul împărŃirii lui x la y)
x++, ++x adună x cu 1 (identic cu x = x + 1)
x--, --x scade 1 din x (identic cu x = x - 1)
-x schimbă semnul lui x (devine negativ)
Deşi atât x++ cât şi ++x incrementează cu o unitate valoarea lui x, operaŃiile nu sunt identice; prima
îl incrementează pe x dupa ce atribuirea a avut deja loc, iar cea de-a doua înainte. De exemplu, dacă
x are valoarea 5, y = x++ va avea y = 5 şi x = 6, în timp ce daca se face y = ++x se va obŃine y = x
= 6. Operatorul minus functionează similar. Dacă la adunarea a două valori combinaŃi numere cu şiruri
de caractere, rezultatul final este un şir de caractere. De exemplu, rezultatul adunării nume + 9 va
rezulta nume9
Atribuire AcŃiune
x=y îi dă lui x valoarea lui y
x += y identic cu x = x + y
x -= y identic cu x = x - y
x *= y identic cu x = x * y
x /= y identic cu x = x / y
x %= y identic cu x = x % y
http://kidu-kid.com
Dacă doriŃi să comparaŃi valoarea unei variabile cu altă variabilă, sau valoarea unei variabile cu o
valoare literală puteŃi face asta în modul următor:
dataDeAzi == "joi"
Când comparaŃi şiruri de caractere trebuie să fiŃi atenŃi asupra faptului că "a" este mai mare decât "A",
iar "abc" mai mic decât "bu".
Comparare AcŃiune
x == y returnează true (adevărat) dacă x şi y sunt egale
x != y returnează true dacă x şi y nu sunt egale
x>y returnează true dacă x este mai mare decât y
x >= y returnează true dacă x este mai mare sau egal
decât y
x<y returnează true dacă x este mai mic decât y
x <= y returnează true dacă x este mai mic sau egal
decât y
x && y returnează true dacă atât x căt şi y sunt adevărate
x || y returneată true dacă x sau y este adevărat
!x returnează true daca x este fals
http://kidu-kid.com
Afişarea mesajelor în JavaScript şi adăugarea de comentarii
Sctipturile JavaScript pot fi plasate atât în secŃiunea dintre tagurile <head> şi </head> (purtând
numele de script de antet) cât şi între tagurile <body> şi </body> (purtând numele de script de
corp). Este de preferat ca scripturile care afişează mesaje sau conŃinut în pagină să fie introduse
în body iar scripturile care prelucrează rezultate şi fac verificări să fie introduse în antet (în head).
Tagul de deschidere şi de închidere al unui script JavaScript este de forma <script> şi </script>. În
exemplul de mai jos va fi afişat un mesaj generat dintr'un script JavaScript.
Cod:
<!DOCTYPE HTML PUBLIC "-

//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"
>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Mesaj din JS</title>
</head>
<body>
<script language="JavaScript" type="text/javascript">
document.write("Acesta este un mesaj din JavaScript")
</script>
</body>
</html>
Tagul de deschidere este <script urmat de atributul language="JavaScript" care indică browser-
ului limbajul de scriptare utilizat, iar atributultype="text/javascript" îl informează că scriptul este
strict în format text, organizat după sintaxa limbajului JavaScript.
În continuare document.write("Acesta este un mesaj din JavaScript") este prima linie de cod
JavaScript în care este preluată fereastra document şi se afişează în ea textul respectiv. Următorul
tag </script> este tagul de închidere care semnalizează browserului terminarea codului JavaScript şi
continuarea codului HTML.
Se pot introduce oricâte taguri într-o pagină, de câte ori doriŃi. Browserele mai vechi, şi chiar şi unele
noi nu cunosc limbajul JavaScript. Pe când cele noi se presupune că ignoră tagurile necunoscute lor,
cele mai vechi de obicei dau mesaje de eroare în astfel de cazuri. Există o tehnică ce poate să
păcălească browserele vechi şi să le facă să creadă că scriptul este de fapt un comentariu HTML, care
va fi ignorat. Un comentariu este un text încadrat de taguri HTML speciale; orice text cuprins între
aceste taguri va fi ignorat de către browsere. Pentru a ascunde codul JavaScript de browserele vechi
procedăm astfel:

Linia care începe cu // este de fapt combinaŃia de marcare a unui comentariu în limbajul JavaScript, şi
ea se termină cu -->, semnalând sfârşitul comentariului HTML. Noul exemplu este prezentat în
continuare:
http://kidu-kid.com
Cod:
<!DOCTYPE HTML PUBLIC "-

//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"
>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Mesaj din JS</title>
</head>
<body>

</script>
</body>
</html>
Dacă doriŃi să scrieŃi mai multe rânduri de comentarii în cod (o idee bună dacă aveŃi rânduri lungi de
cod) puteŃi folosi combinaŃia /* şi */
În concluzie, pentru a scrie un comentariu în JavaScript pe un singur rând puteŃi folosi combinaŃia //
iar pentru a scrie comentarii pe mai multe rânduri folosiŃi combinaŃia /* la ănceput şi */ la sfârşitul
comentariului.
CombinaŃia  este în HTML şi se foloseşte de asemenea pentru comentarii. (să nu le
confundaŃi între ele, cele din JavaScript cu cele din HTML)
În cazul în care browserul vizitatorului nu are activ JavaScript, îl puteŃi avertiza sau îl puteŃi redirecta
către o pagină care nu conŃine JavaScript folosind următorul tag HTML
Cod:
<noscript>
Pentru a vedea aceasta pagina browserul dvs. trebuie sa aiba activ JavaScript
.
<meta http-equiv="refresh" content="5;URL=alta_pagina.html">
Asteptati pentru redirectare catre o pagina fara JavaScript.
</noscript>
În codul de mai sus, tagul <noscript> este activ doar dacă browserul nu are activ JavaScript, şi în
acest caz va afisa mesajul corespunzător. Linia
<meta http-equiv="refresh" content="5;URL=alta_pagina.html"> execută redirectarea
browserului către pagina specificată în intervalul de 5 secunde (pentru a da timp vizitatorului să
citească mesajul de avertizare)
Dacă doriŃi să avertizaŃi vizitatorul în legătură cu ceva anume, o puteŃi face prin intermediul codului
JavaScript astfel:
alert("Aceasta este o fereastra de alertare")
Pentru exemplificare, am creat un link aici, iar dacă daŃi clik pe el şi aveŃi JavaScript activ se va afişa
un mesaj de alertă.
AtenŃie!
Fereastra de alertă este diferită pentru fiecare browser în parte, nu poate fi customizată.
http://kidu-kid.com
Crearea ferestrelor de avertizare şi confirmare
Una din principalele utilizări ale limbajului JavaScript este posibilitatea de a oferii feed-back
vizitatorilor. În conceptul de interfaŃă cu utilizatorul, "mai puŃin" este în general "mai mult". AŃi putea
de exemplu să atrageŃi atenŃia utilizatorului folosind sunete şi bannere animate, dar puteŃi crea şi ceva
mai simplu, adică o casetă de dialog de bun gust. Pentru a avertiza un utilizator se foloseşte
metoda alert() astfel:
Cod:
alert('Bau, aceasta este fereastra generata cu alert')
Textul dorit trebuie plasat între ghilimele duble sau simple.

Pentru cazul în care doriŃi ca vizitatorul să ia anumite decizii există instrucŃiunile condiŃionale.
InstrucŃiunile condiŃionale sunt compuse din trei parŃi:
- secŃiune if (dacă), în care se efectuează testul,
- secŃiunea then (atunci), unde sunt puse instrucŃiunile pe care dorim să se execute în cazul în care
rezultatul este pozitiv,
- şi secŃiunea opŃională else (în caz contrar), care conŃine partea de script în cazul în care rezultatul
este negativ.
Expresia este încadrată între paranteze rotunde, iar conŃinutul celorlalte secŃiuni este încadrat între
acolade.
Pentru a confirma o opŃiune putem face în felul următor:
Cod:


</script>
Metoda confirm( ) preia un parametru (întrebarea adresată utilizatorului) şi returnează o valoare

(adevărat sau fals) în funcŃie de răspunsul utilizatorului.
AtenŃie!
În limbajul JavaScript nu există operatorul then, el este atribuit automat zonei TRUE. PrezenŃa
acoladelor nu este obligatorie în cadrul instrucŃiunilor condiŃionate în cazul în care blocul de cod este
format dintr-o singură înstrucŃiune (şi numai în acest caz).
O metodă alternativă de a scrie un bloc condiŃional este:
(conditie) ? parteaAdevarat :
http://kidu-kid.com
parteaFals
care este echivalentă cu:
if (conditie)
{
parteaAdev[rat
}
else
{
parteaFals
}
Nu este obligatoriu ca acoladele să fie prezente la începutul sau la sfârşitul liniilor, sau ca
blocurile true sau false să fie indentate. Este o chestiune de stil, eu asa consider codul mai inteligibil şi
mai comod de înteles.
Se pot plasa oricâte instrucŃiuni doriŃi în interiorul acoladelor corespunzătoare secŃiunii then şi
secŃiunii else.
Uneori, în loc de o întrebare cu răspuns de tipul da-nu, este necesar să primiŃi un răspuns mai specific.
Pentru asta există metoda prompt( ).
Acestei metode îi sunt pasate două informaŃii (parametrii): întrebarea pusă utilizatorului şi răspunsul
implicit. Ea returnează fie răspunsul utilizatorului, fie nul.
Valoarea "null" se obŃine la apăsarea butonului "Cancel" sau când nu se primeşte nici un parametru de
la utilizator. Este recomandat să specificaŃi întotdeauna al doilea parametru (răspunsul implicit)
deoarece pe unele browsere, în cazul în care acest parametru lipseşte, se va afişa fereastra de
interogare cu undefined (nedefinit) ca răspuns implicit. SoluŃia la problema asta este să includeŃi
întotdeauna un răspuns implicit oarecare, chiar dacă este numai un şir vid de caractere.
Cod:


</script>
http://kidu-kid.com
Redirectarea şi detectarea tipului de browser
În JavaScript puteŃi detecta tipul de browser al vizitatorului şi chiar şi versiunea de JavaScript pe care
acesta o are instalată, şi deasemeni, puteŃi, în funcŃie de situaŃie, să redirecŃionaŃi vizitatorii spre alte
pagini. Pentru a redirecŃiona un utilizator folosiŃi comanda de mai jos:
Cod:
<script language="JavaScript1.5" type="text/javascript">

window.location="pagina_noua.html"
</script>
Atributul language al tagului script vă permite să specificaŃi versiunea minimă pe care trebuie să o
aibă browserul pentru ca să poata rula scriptul. În exemplul de mai sus am specificat versiunea
minimă 1.5 sau o versiune mai nouă. Dacă browserul nu are versiunea minimă va apare în fereastra
browserului un mesaj asemănător cu cel de mai jos:
You won't get much from this site using a browser with an old version of JavaScript -- I suggest that
you upgrade now!
Următoarea linie
window.location="pagina_noua.html"
îi spune browserului să încarce pagina specificată în locul paginii curente. Se poate specifica atât o cale
relativă la documentul curent, cât şi o cale reală.
O pagină poate conŃine scripturi care să corespundă unor versiuni diferite ale limbajului, astfel putem
avea în aceeaşi pagină scripturi care să ruleze începând de la o anumită versiune şi alte scripturi care
să ruleze de la alte versiuni de JavaScript. Nu se poate specifica rularea scriptului doar pentru o
anumită versiune de JavaScript, de exemplu doar pentru versiunea 1.1 Atributul language va accepta
versiunea specificată, dar şi orice altă versiune ulterioară de JavaScript, ba mai mult, unele browsere,
încearcă să interpreteye codul din scriptul JavaScript chiar şi dacă nu corespunde versiunea cerută.
Ar trebui să aveŃi grijă ca la scrierea de cod să nu puneŃi informaŃii esenŃiale în JavaScript, astfel cei
care nu au un browser recent, sau browserul lor nu suportă JavaScript, să poata totuşi vedea
conŃinutul paginii.
În exemplul prezentat anterior, redirectarea utilizatorului se face când deja a fost încărcată o bună
parte din pagina curentă. Metoda următoare prezintă o alternativă mai bună pentru redirecŃionare, şi
anume prin intermediul unui link.
Cod:
<a href="pagina_2.html" onClik="window.location='pagina_noua.html'; return fa

lse">Clik aici</a>
Codul JavaScript este inclus complet în tagul de legătură. În cazul în care un vizitator nu are activ
JavaScript şi dă clik pe link, se va încărca paginapagina_2.html iar dacă are activ JavaScript se va
încărca pagina pagina_noua.html
PorŃiunea return false indică oprirea procesării paginii şi astfel pagina corespunzătoare lui a href nu
mai este încărcată
http://kidu-kid.com
Pentru detectarea tipului de browser puteŃi folosi ca idee scriptul de mai jos:
Cod:
<script language="javascript" type="text/javascript">


</script>
O altă metodă de a afişa direct numele de browser este:
Cod:


</script>
?>
Rezultatul scriptului de mai sus îl puteŃi vedea aici:
Numele browserului este: Netscape
Multe browsere au posibilitatea de a evita detectarea numelui prezentându-se intenŃionat drept un alt
browser. PuteŃi redirecŃiona vizitatorii în funcŃie de tipul de browser pe care îl au, folosind ideile şi
explicaŃiile prezentate în acest articol.
http://kidu-kid.com
Detectarea prezenŃei plug-in-urilor în browser
Plug-in-urile pun la dispoziŃia programatorului de pagini web o gamă largă de opŃiuni ce permit
includerea de conŃinut media cum ar fi sunete, filme şi animaŃie. Problema care apare cu aceste plug-
in-uri este că nu putem fi siguri dacă utilizatorul are instalat un anumit plug-in de care aveŃi nevoie
pentru a rula o melodie de exemplu. JavaScript vă poate ajuta în această privinŃă verificând lista de
plug-in-uri instalate pe calculatorul utilizatorului şi în cazul în care nu este instalat un anumit plug-in
se poate redirecta automat pagina către plug-in-ul respectiv. Scriptul de mai jos testează prezenŃa
unuia dintre cele mai folosite plug-in-uri, Flash Player:
Cod:
<body>
<script language="Javascript" type="text/javascript">

</script>
</body>
Să explic puŃin în continuare ce se întâmplă în codul menŃionat mai sus.
if (navigator.plugins["Shockwave Flash"])
{
În acest caz se verifică dacă în vectorul navigator.plugins este conŃinut numele "Shockwave Flash"; în
caz afirmativ, testul returnează TRUE. Dacă numele comparat diferă oricât de puŃin, testul va returna
FALSE
http://kidu-kid.com
document.write('<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000"
codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,0,
0" width="100" height="80" id="test" align="middle"><param name="allowScriptAccess"
value="sameDomain" \/><param name="movie" value="content\/images\/test.swf" \/><param
name="loop" value="false" \/><param name="quality" value="high" \/><param name="bgcolor"
value="#ffffff" \/><embed src="content\/images\/test.swf" loop="false" quality="high"
bgcolor="#ffffff" width="100" height="80" name="test" align="middle"
allowScriptAccess="sameDomain" type="application/x-shockwave-flash"
pluginspage="http://www.macromedia.com/go/getflashplayer" \/><\/object>')
}
În cazul în care verificarea returnează TRUE, scriptul scrie o bucată de cod HTML în
fereastra document. Pentru acest tip de fişier sunt necesari toŃi parametrii tagului <object>,
precum classid, codebase şi param. Parametrul value cuprinde numele fişierului şi este
content/images/test.swf. Pentru introducerea de filme Flash în pagina web se folosesc tag-urile
<embed>şi <object>
AtenŃie!
Cum am mai specificat şi în alte tutoriale, pentru a rula corect scripturile din JavaScript trebuie scrise
corect, în cazul de faŃă tot ce este inclus in document.write trebuie să se afle pe un singur rând altfel
nu va funcŃiona scriptul.
else
{
document.write("<img src='content\/images\/test.gif' alt='airport' width='414' height='300' \/>")
}
În cazul în care verificarea va returna FALSE se înlocuieste filmul Flash cu o imagine.
Este bine să luaŃi în considerare şi posibilitatea ca utilizatorul să aibă dezactivat JavaScript şi în acest
caz să afişati totuşi imaginea prin adăugarea codului de mai jos:
Cod:
<noscript>
<img src='content/images/test.gif' alt='airport' width='100' height='80' />
</noscript>
AtenŃie!
Acest script caută un plug-in în funcŃie de numele său. Dacă numele se modifică, va trebui să
modificaŃi scriptul astfel încât căutarea să se facă după noul nume.
Probabil aŃi observat că în interiorul scriptului tagul de închidere se termină cu secvenŃa \/> în loc de
secvenŃa normală />
Motivul este faptul că JavaScript trebuie împiedicat să creadă că încercăm să închidem tagul <script>.
Plasând un simbol backslash înaintea slash-ului spunem interpretorului JavaScript să ignore caracterul
care urmează, acŃiune cunoscută formal drept eludarea caracterului.
Utilizatea unei bucle pentru a verifica prezenŃa plug-in-urilor
În exemplul anterior se verifica prezenŃa unui anumit plug-in. Dacă însă dorim să căutăm orice
versiune a plug-in-ului, scriptul anterior nu ne este de folos. Pentru acest lucru avem nevoie de o
structură repetitivă, care să ne permită efectuarea unei acŃiuni de un număr specificat de ori. O astfel
de structură repetitivă este "for". Acest tip de buclă foloseşte un contor, care este o variabilă ce are o
http://kidu-kid.com
valoare iniŃială (de obicei 0) şi se termină o dată cu satisfacerea unui test condiŃional din interiorul
structurii. Scriptul de mai jos arată cum e construită o asemenea structură repetitivă pentru a verifica
dacă printre plug-in-urile browserului se află Apple QuickTime.
Cod:
<head>
<title>Test</title>

</script>
</head>
<body>

</script>
</body>
După cum observaŃi, scriptul este compus din două părŃi, o parte în secŃiunea <head> şi unul în
corpul paginii. Scriptul din <head> verifică prezenŃa plug-in-ului QuickTime, în timp ce partea din
secŃiunea <body> afişează în browser în funcŃie de rezultat, un filmuleŃ de tip mov sau o poză jpg.
Să încerc în continuare să vă explic ce se întâmplă prin script.
avemQT = false
Se iniŃializează o variabilă de tip boolean sau logică, pe nume avemQT. O variabilă booleană poate lua
exclusiv una dintre valorile adevarat (true) sau fals (false).

{
Aceasta este linia de început a structurii repetitive. Variabila i este folosită pe post de contor cu
valoarea iniŃială 0. Delimitarea cu punct şi virgulă denotă prezenŃa unei alte instrucŃiuni pe aceeaşi
linie. În continuare, dacă i este mai mic decât numărul de plug-in-uri, se incrementează i cu 1.
http://kidu-kid.com
Obiectulnavigator.plugins.length ne oferă numărul total de plug-in-uri instalate. În continuare,
operatorul ++ este folosit pentru a incrementa valoarea lui i cu o unitate.
{
Această linie începe cu o instrucŃiune condiŃională plasată în interiorul buclei.

Vectorul navigator.plugins[i] foloseşte parantezele drepte pentru a indica faptul că testul se adresează
plug-in-ului aflat în poziŃia i. Metoda indexOf() întoarce poziŃia la care şirul de caractere "QuickTime" a
fost identificat (în cazul în care este identificat) în navigator.plugins[i].name Dacă şirul de caractere nu
a fost găsit, valoarea returnată este -1. Dacă el este însă prezent, valoarea returnată este poziŃia la
care începe şirul.
AtenŃie!
În JavaScript, numărătoarea se începe de la 0, nu de la 1. Primul caracter este situat pe poziŃia 0,
următorul pe poziŃia 1 şi tot asa. Valoarea reală poate fi obŃinută efectiv numai prin verificarea valorii
atributului length (lungime). Toate celelalte metode de lucru cu şirurile de caractere sunt bazate pe
numărătoarea pornind de la 0.
avemQT = true
Dacă testul este satisfăcut, variabila avemQT ia valoarea "adevărat".

În continuare, în secŃiunea <body> se găseşte condiŃia
if (avemQT)
{
Care se traduce astfel:

Dacă variabila avemQT are valoarea true, execută linia următoare dintre acolade, respectiv
document.write('<embed src="content/images/test.mov" width="100" height="80"><\/embed>")

}
Linie care de fapt afişează filmul în browser. Mai departe, linia
else
{
document.write('<img src="content/images/test.jpg" alt="test" width="100" height="80" \/>')
}
Se traduce astfel:
Dacă testul nu este trecut (false), atunci se afişează în locul filmului o poză.
Să zicem că în continuare dorim să afişăm în browser toate plug-in-urile instalate în browser. Pentru
aceasta folosim codul următor:
Cod:
<body>

</script>
</body>
Utilizarea dublului & (ampersand) indică faptul că ambele valori trebuie să fie adevărate pentru a se
trece la execuŃia codului.
Exemplul arătat mai sus implică cunoaşterea anterioară a numelui obiectelor pe care urmează să le
afişăm. Uneori, acest lucru nu este posibil, şi pentru asta putem utiliza un tip de structură repetitivă
for/in pentru a afişa toate proprietăŃile obiectelor, indiferent de tipul acestora. Bucla for/in enumeră
toate proprietăŃile unui obiect specificat.
Cod:
<body>

http://kidu-kid.com
</script>
</body>
Similar exemplului anterior, variabila acestPlugin are valoarea plug-in-ului curent, cel pe care il
procesăm în momentul respectiv. În loc să scriem, de exemplu, acestPlugin.filename, folosim o buclă
de tipul for/in pentru a parcurge toate proprietăŃile obiectului acestPlugin. Deoarece variabila i este
deja folosită în bucla exterioară, se foloseşte variabila j, care la fiecare trecere prin buclă ia valoarea
numelui următoarei proprietăŃi a obiectului acestPlugin. Este important să vedeŃi că j nu conŃine un
număr, spre deosebire de i, este un şir de caractere, deşi îndeplineşte rolul de variabilă contor.
AtenŃie!
Este important să ştiŃi că aceste scripturi nu funcŃionează pe Internet Explorer din Windows din cauza
părŃii de cod responsabilă de lucrul cu plug-in-urile, aceasta nefiind "înŃeleasă" de browser. Internet
Explorer include obiectul plug-in, doar că acesta este lipsit de conŃinut. În schimb pe Internet explorer
de pe Mac funŃionează. De ce? Ar trebui să îi întrebaŃi direct pe programatorii de la Microsoft...
Folosirea buclei de tipul do-while
În anumite situaŃii avem nevoie de o structura repetitivă în condiŃiile in care nu ştim de căte ori se va
face numărul de repetiŃii. În această situaŃie se poate folosi bucla de tipul do/while (execută/atâta
timp cât): mai precis execută acŃiunile atât timp cât o anumită expresie este adevărată.
Exemplul de mai jos foloseste o buclă în care ne cere să introducem numele şi nu se opreşte până nu
primeşte un răspuns (mi s-a părut amuzantă ideea ;P)
Cod:
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>test</title>

</script>
</head>
http://kidu-kid.com
Să explic puŃin această porŃiune de cod:
do {
Această linie marchează începutul porŃiuni de cod do. Trebuie să ŃineŃi cont că această porŃiune de cod
se execută cel puŃin odată.
raspuns = prompt('Scrie numele tău', '')
În acest caz se solicită prin metoda prompt() introducerea numelui.
while (!raspuns)
Verificarea introdusă după while va produce repetarea porŃiunii de cod do atâta timp cât testul nu este
îndeplinit. În acest caz se verifică dacă variabilaraspuns conŃine o valoare, iar dacă conŃine se execută
instrucŃiunile următoare, altfel se revine la bucla do.
O idee de folosire a acestei structuri repetitive este îndepărtarea spaŃiilor sau a caracterelor invalide
din datele introduse de utilizator.
Crearea unei funcŃii în javascript
O funcŃie este un set de instrucŃiuni JavaScript care efectuează anumite sarcini. FuncŃiile sunt foarte
des folosite în codul JavaScript.
Orice funcŃie are un nume cu care poate fi apelată în script. FuncŃiile vă ajută de exemplu când aveŃi
nevoie de mai multe ori în script de o porŃiune de cod. Decât să rescrieŃi aceeaşi porŃiune de cod de
fiecare dată când aveŃi nevoie de ea, puteŃi scrie de la început o funcŃie care include acea porŃiune de
cod şi astfel să apelaŃi acea funcŃie de câte ori este nevoie.
O funcŃie se crează folosind cuvântul cheie "function" urmat de numele funcŃiei împreună cu un set de
paranteze. InstrucŃiunile din interiorul funŃiei sunt marcate de acolade. Exemplu:
function atentionare()
{
alert("Aceasta este un mesaj de alerta apelabil dintr-o functie JavaScript")
}
Apelarea unei funcŃii se poate face în mai multe moduri. Exemplu:
<input type="button" value="Alerta" onclick="atentionare()">
Uneori doriŃi să preluaŃi nişte informaŃii şi să le trimiteŃi unei funcŃii pentru a fi procesate. Această
acŃiune se numeşte "pasarea" informaŃiei către funcŃie. Exemplu:
http://kidu-kid.com
function atentionare(mesaj)
{
alert(mesaj)
}
Iar în codul butonului HTML scriem:
<input type="button" value="Alerta" onclick="atentionare('Ai apasat butonul de alerta')" />
Variabila "mesaj" din funcŃia de mai sus este un parametru al funcŃiei. La apelarea funcŃiei, valoarea
"Ai apasat butonul de alerta" este transferată în parametrul "mesaj". Parametrii funcŃiilor pot fi orice
tip de date pe care le doriŃi transmise, fiind incluse şirurile de caractere, numerele sau chiar alte
obiecte JavaScript. Iată mai jos un alt exemplu în care se foloseşte aceeaşi funcŃie la 3 butoane
diferite.
<input type="button" value="Mesaj 1" onclick="atentionare('Buton gresit')" />

<input type="button" value="Mesaj 2" onclick="atentionare('Asta e alt buton')" />
<input type="button" value="Mesaj 3" onclick="atentionare('Bingoooo :D')" />
Lucrul cu funcŃii care returnează valori
În afară de funcŃiile care execută acŃiuni şi apoi revin la codul principal mai există şi funcŃii care pot
returna un rezultat. În următorul exemplu se verifică existenŃa plug-in-ului QuickTime iar dacă se
găseşte, funcŃia returnează valoarea true sau false î n caz contrar.
Cod:
<head>
<title>Test</title>

</script>
</head>
<body>

</script>
</body>
Se pot returna orice tip de valori nu doar valori booleene.
Utilizarea instrucŃiunilor switch-case
Există situaŃii în care este nevoie de mai mult de două opŃiuni pentru că setul de
instrucŃiuni then şi else nu sunt suficiente iar folosirea mai multor instrucŃiuni îmbricate if devine prea
complicată. În acest caz se poate folosi cu succes blocul de instrucŃiuni switch / case. Exemplu:
Cod:
<head>
<title>Test</title>

</script>
</head>
<body>
<form action="#">
<input type="button" value="Mesaj 1" onclick="atentionare(this)" />
</form>
</body>
InstrucŃiunea break se foloseşte pentru a întrerupe ciclul buclei. Dacă break lipseste, interpretorul
JavaScript ar rula şi celelalte cazuri din interiorul blocului switch până la terminarea instrucŃiunilor.
InstrucŃiunea default: se pune pentru a preveni cazul în care nici una din cazurile anterioare nu
corespund şi în acest caz se rulează instrucŃiuniledefault.
Prin utilizarea expresiei "this" majoritatea acŃiunilor se pot petrece în zona marcată <script>, impactul
asupra codului HTML fiind cât mai mic cu putinŃă.
Unei instrucŃiuni switch îi pot fi pasate şi alte tipuri de valori, acestea nefiind limitate la şiruri de
caractere. Se pot utiliza instrucŃiuni cu valori numerice şi chiar evaluări de rezultate matematice. Dacă
tipul de date este numeric trebuie scris în acest caz astfel:
case 5:
În loc de sirul de caractere
case "5"
(valorile numerice nu trebuiesc precedate de ghilimele, altel vor fi interpretate ca şiruri de caractere)
În cazul folosiri unui bloc switch/case în interiorul unei funcŃii se poate folosi instrucŃiunea return î n
loc de break pentru a ieşi din blocul de cod şi din funcŃie în acelaşi timp.
ModalităŃi de tratare a erorilor
Uneori aveŃi nevoie de a afişa mesaje de eroare mai inteligibile (sau în alte limbi) decât cele generate
standard de către JavaScript. Pentru aceasta se folosesc instrucŃiunile try/throw/catch. Exemplu:
Cod:
<body>
http://kidu-kid.com

</script>
</body>
Să încerc în continuare să explic scriptul de mai sus.
raspuns = prompt("Introduceti un numar:", "")
Afişeaza un prompter normal în care se cere să introduceŃi un număr.
try
{
Dacă nu a fost introdus un număr se preia mesajul iniŃial de eroare şi se schimbă cu altul. În cadrul
instrucŃiunii try se verifică dacă utilizatorul a introdus sau nu un număr.
if (!raspuns || isNaN(raspuns))
{
throw new Error("Nu este un numar valid")
}
Aici se verifică dacă utilizatorul a introdus ceva "!raspuns" sau dacă a introdus orice altceva în afară de
număr "isNaN(raspuns)"
Dacă expresia "!raspuns" este adevarată, atunci utilizatorul nu a introdus nimic (a apăsat direct
enter).
Metoda JavaScript isNaN verifică dacă parametrul care îi este pasat este sau nu numeric (Not a
Number). Dacă isNaN() returnează adevărat, ştim că valoarea nu este validă. Oricare ar fi cazul,
trebuie să "lansam" (throw) o eroare: în acest context îi vom spune utilizatorului că nu a introdus un
număr. Odată ce o eroare a fost lansată, JavaScript iese din blocul de cod try şi caută
instrucŃiunea catch (prinde) corespunzătoare. Se sare peste toate celelalte linii de cod aflate
între throw şi catch.
alert("Radacina patrata a numarului " + raspuns + " este " + Math.sqrt(raspuns))
În cazul în care utilizatorul a introdus corect un număr se afişează rădăcina pătrată a numărului.
Aici se închide blocul try.
http://kidu-kid.com
catch(errMsg)
{
alert(errMsg.message)
}
Aici, în cazul în care a fost lansată o eroare se utilizează blocul catch. Variabila errMsg este pasată ca
parametru, şi este afişată partea de mesaj (message) a erorii. Codul din cadrul blocului catch nu va fi
executat decât dacă în timpul execuŃiei a fost lansată o eroare.
Acest cod are şi o parte opŃională, şi anume după catch se mai poate pune un bloc final {} care poate
conŃine instrucŃiuni care se execută indiferent dacă blocul try lansează sau nu o eroare.
Sintaxa Java Script
Având în vedere că JavaScript este inspirat din Java, care la rândul său e inspirat din limbajul C, cele
trei au o sintaxă foarte similară în ceea ce priveşte operatorii, structurile de control şi accesarea
obiectelor, chiar identică în unele cazuri. Voi recapitula totuşi structurile de control, pentru cei care nu
le cunosc sau au lucrat în alte limbaje de programare, 'non-C-like':
- instrucŃiunea multiplă
La fel ca în C sau Java, fiecare linie individuală din cod este considerată ca o instrucŃiune. De
asemenea, structurile condiŃionale sau repetitive primesc ca şi obiect de executat o singură
instrucŃiune. Putem însă grupa execuŃia mai multor instrucŃiuni ca să fie văzute ca o succesiune
unitară de execuŃie (practic 'păcălim' compilatorul să le interpreteze ca pe o singură instrucŃiune)
încadrându-le cu o pereche de acolade { }.
Acoladele sunt folosite de asemenea pentru a delimita instrucŃiunile care constituie corpul unei funcŃii-
utilizator. Nu voi elabora pe această temă, întrucât voi discuta mai pe larg într-unul din tutorialele
următoare.
- comentariile
La fel ca în C şi Java, JavaScript suportă două tipuri de comentarii: comentarii-bloc şi comentarii-linie.
Acestea nu au nici o valoare reală pentru program (conŃinutul lor nu afecteaza în nici un mod execuŃia
scriptului), fiind folosite mai mult pentru a realiza o documentare sumară a scriptului, în ideea de a
găsi mai uşor o anumită secŃiune de cod sau în ideea că scriptul scris de un programator va fi mai
târziu modificat sau extins de un altul, înlesnindu-i acestuia lucrul şi înŃelegerea algoritmului şi a
variabilelor folosite.
De asemenea, comentariile sunt utile la depanarea programului, atunci când suspectăm o instrucŃiune
sau un bloc de cod că ar genera o anumită eroare: cea mai buna metodă de a confirma acest lucru
este să eliminăm codul respectiv din program şi să vedem dacă eroarea mai apare. Ei bine, gândiŃi-vă
dacă e vorba de 20 sau chiar 50 de linii de cod, câtă muncă ar presupune dacă le-am şterge din
program, constatând apoi că sursa erorii e alta, şi să fim nevoiŃi să le scriem din nou... (da, ştiu şi eu
de comanda 'Undo', însă ea nu este una pe care trebuie să ne bazăm 100% ). Drept urmare, cea mai
simplă şi mai sigură metodă de a elimina temporar codul respectiv e să il 'comentăm'.
http://kidu-kid.com
Revenind la subiect, cele două tipuri de comentarii din JavaScript sunt:
- comentarii-bloc: orice text cuprins între perechea de simboluri /* şi */ consecutivă
- comentarii-linie: textul aflat după simbolul // şi până la sfârşitul linei respective
- structuri conditionale (branch-uri)

Blocurile condiŃionale se folosesc pentru a determina devierea execuŃiei programului în direcŃii diferite,
sau ne-executarea unei anumite secŃiuni de cod, în funcŃie de valoarea uneia sau mai multor variabile
verificate ca şi condiŃie.
- blocul if - else
Blocul condiŃional if - else se foloseşte în cazul în care dorim execuŃia uneia din două variante, sau
dorim ca o secŃiune de cod să se execute doar în anumite condiŃii. Sintaxa instrucŃiunii este
următoarea:
if (condiŃie)
instrucŃiune
//sau
if (condiŃie)
instrucŃiune1;
else
instrucŃiune2;
CondiŃia poate fi orice expresie care poate fi evaluată logic (sub formă de 'adevărat' sau 'fals') -
comparare, egalitate, inegalitate, combinaŃie de operaŃii logice etc. ReŃineŃi de asemenea că
JavaScript realizează conversia între tipurile de variabile automat (automatic typecasting), drept
urmare, chiar dacă expresia condiŃiei nu e strict logicăa, se încearcă conversia ei la o valoare true sau
false. Valorile null, 0 numeric, sau string-ul gol sunt evaluate la valoarea false, în timp ce orice altă
valoare este evaluată la true.
Ramura else e opŃională, ea putând lipsi, caz în care dacă nu se îndeplineşte condiŃia, compilatorul
continuă execuŃia codului de la linia următoare blocului, practic 'sărind' peste instrucŃiune.
InstrucŃiunea poate fi reprezentată de o singură instrucŃiune efectivă sau de o instrucŃiune multiplă.
var a = 3;
var b = 6;
if (a <b)
c = true;
else
c = false;
// in conditiile acestea, c va avea valoarea false
- blocul switch
Switch se foloseşte atunci când expresia evaluată poate avea mai multe posibile valori. Practic un bloc
switch e similar cu o succesiune de blocuri if - else.
switch (expresie) {
case valoare1 :
operatie1;
case valoare2 :
operatie2;
...
default :
operatie_implicita;
}
http://kidu-kid.com
În momentul în care compilatorul constată că expresia are una din valorile enumerate, va executa
codul din bloc, începând de la eticheta corespunzătoare valorii (eticheta = o declaraŃie "case valoare :"
).
AtenŃie, execuŃia nu va ieşi din bloc la întâlnirea următoarei valori, ci va continua execuŃia până la
finalul buclei sau întâlnirea unei instrucŃiuni break(aşa-numitul comportament 'fall-through' al
instrucŃiunii switch). Pentru a evita asta, fiecare cod aferent unei etichete trebuie finalizată cu o
instrucŃiune break.
SecŃiunea default e opŃională, iar când există, trebuie să fie ultima secŃiune. Codul din această
secŃiune se execută atunci când expresia nu are nici una din valorile etichetelor din bloc, caz în care,
dacă default lipseste, nu se va executa nimic.
- structuri repetitive (bucle)

Structurile repetitive reprezintă instrucŃiuni sau blocuri de instrucŃiuni care sunt executate în mod
repetat, atâta timp cât una sau mai multe condiŃii sunt îndeplinite.
- bucla for - repetiŃie pe un număr stabilit de iteraŃii

Atunci când o secŃiune de cod se doreşte a fi repetată de un anumit număr de ori, cea mai convenabilă
soluŃie este încapsularea codului respectiv într-o buclă for. Sintaxa instrucŃiunii for e următoarea:
for (iniŃializare; condiŃie; operaŃie_la_final)

instrucŃiune;
Codul se execută în cazul unei bucle for în următorul mod:

1. se execută codul declarat la iniŃializare
2. se verifică condiŃia. Dacă această verificare returnează false, se iese din buclă
3. se execută instrucŃiunea (sau blocul de instrucŃiuni, în cazul unei instrucŃiuni multiple)
4. se execută codul declarat în operaŃie_la_final
5. se revine la pasul 2.
a = 1;
f = 10;
for (i = 1; i <= f; i = i + 1) {
a = a * i;
}
Codul de mai sus ne calculează valoarea lui 10 factorial (1 * 2 * 3 * ... * 9 * 10), întrucât repetă
operaŃia de înmulŃire a lui a cu i de 10 ori, i fiind incrementat cu 1 la fiecare ciclare.
- buclele while şi do ... while

Aceste bucle se folosesc atunci când nu ne interesează câte iteraŃii se realizează, ci doar ca acestea să
se bucleze cât timp o condiŃie e îndeplinită. Sintaxa lor e următoarea:
while (conditie)
instructiune;
// si
do
instructiune
while (conditie)
Cele două blocuri sunt foarte similare, ambele executând codul până când condiŃie returnează false,
însă între ele există o diferenŃă crucială: în cazul luiwhile, condiŃia este verificată înainte de executarea
instrucŃiunii (astfel se poate, în funcŃie de condiŃii, ca bucla să nu cicleze nici măcar o dată), în timp
ce do ... while execută întâi instrucŃiunea, după care verifică condiŃia, astfel instrucŃiunea executându-
se cel puŃin o dată.
În oricare din buclele enumerate mai sus, execuŃia poate fi controlată cu ajutorul unor instrucŃiuni
http://kidu-kid.com
specifice, şi anume:
break - întrerupe ciclarea buclei şi continuă execuŃia programului cu prima instrucŃiune de după buclă
continue - întrerupe execuŃia iteraŃiei curente şi continuă execuŃia programului de la începutul buclei
- operatorii
În JavaScript, operatorii sunt în mare parte identici cu cei din C şi C++, şi anume:
operatori aritmetici
operatorul de atribuire =
adunare +
scădere -
înmulŃire *
împărŃire /
modulo % (returnează câtul unei împărŃiri întregi)
operatorul de incrementare ++ (adună 1 la valoarea operandului)
operatorul de decrementare -- (scade 1 din valoarea operandului)
Notă: operatorii de incrementare şi decrementare sunt operatori unari (necesită un singur operand),
în timp ce toŃi ceilalti sunt binari (lucrează cu doi operanzi). Ordinea de executare a operaŃiilor este
cea cunoscută din matematica clasica: operaŃiile se execută de la stânga spre dreapta, cu operaŃiile de
înmulŃire şi împărŃire prioritare asupra adunării şi scăderii.
Operatorii ++ şi -- necesită puŃină atenŃie suplimentară, întrucât comportamentul lor diferă în funcŃie
de poziŃia operatorului în raport cu operandul său. Astfel, considerând codul:
var a = 5;
if (a++> 5) a = 10;
La rularea acestui script, valoarea lui a la final va fi 6, nu 10. De ce? Ei bine, poziŃia operatorului ++
este după operand, ceea ce înseamnă că operaŃia de incrementare va fi ultima din blocul său de
operaŃii, care în acest caz mai conŃine comparaŃia variabilei cu constanta 5. Adică întâi se compară,
după care a se incrementează la 6. Efectuând însă doar o modificare minoră la cod, datele problemei
se schimbă:
if (++a> 5) a = 10;
Rulând acest script, a va lua valoarea 10, deoarece în acest caz incrementarea se va efectua înaintea
comparaŃiei, moment în care a va avea valoarea 6, condiŃia fiind îndeplinită.
- operatori de comparaŃie
mai mic strict <
mai mic sau egal <=
mai mare strict >
mai mare sau egal >=
egal ==
diferit !=
strict egal ===
strict diferit !==
AtenŃie! ReŃineŃi că operatorul care verifică dacă două valori sunt egale este reprezentat de un dublu
semn 'egal' (==), 'egal'-ul simplu fiind operatorul de atribuire. EvitaŃi confuzia între aceşti doi
operatori!
DiferenŃa dintre == şi ===, respectiv dintre != şi !==, este că la cele din urmă, typecasting-ul nu mai
este efectuat înainte de comparaŃie.
Cu alte cuvinte, 5 == '5' va returna true, în timp ce 5 === '5' va returna false.
- operatori logici - folosiŃi în combinarea de valori logice (adevărat/fals):
http://kidu-kid.com
şi logic &&
sau logic ||
negare (non logic) !
Aceşti operatori se folosesc cel mai des în cazul combinării mai multor condiŃii, în bucle sau structuri
condiŃionale. Spre exemplu:
if (a>= 4 && a <= 10)

b = 7;
else
b = 10;
În acest caz, variabila b va avea valoarea 7 doar atunci când a aparŃine intervalului 4 - 10, orice altă
valoare a lui a rezultând în atribuirea valorii 10 luib.
- variabilele
În JS, variabilele nu trebuie declarate explicit. Declararea unei valori este echivalentă cu prima
asignare de valoare identificatorului corespunzător. Până la acel moment identificatorul respectiv nu
exista în structura script-ului, deci orice referire la el va genera o eroare:
var a = 0; // identificatorul 'a' devine accesibil

if (a == b) a = 1; // va genera o eroare, întrucât
// identificatorul 'b' nu exista în program
Precedarea primei declarări a unei variabile cu cuvântul-cheie var e opŃională, însă e recomandată din
motive de compatibilitate, motoarele de interpretare a JavaScript-ului implementate în unele browsere
necesitând acest cuvânt-cheie.
După cum am mai spus, interpretorul JavaScript realizează typecasting-ul (conversia între tipuri) în
mod automat, debarasând programatorul de această sarcină. Astfel, dacă rulăm următoarea secvenŃă
de cod, variabila v se va modifica conform comentariilor:
var v = 2; // se initializează variabila v sub forma numărului întreg 2

v += 1.4; // v devine un număr real cu valoarea 3.4
v += '5'; // v se transformă într-un string, cu valoarea '3.45'
AtenŃie! Observăm aici două proprietăŃi specifice JavaScript-ului:

- pentru concatenarea ('alipirea') cifrei '5' la variabila v, am folosit tot operatorul de adunare +,
deoarece în JavaScript, + mai reprezintă şi operator de concatenare de şiruri de caractere. ReŃineŃi-l,
deoarece îl veŃi folosi destul de des.
- în ciuda aparenŃelor, rezultatul ultimei operaŃii nu este numărul real 8.4, ci un string (şir de
caractere), cu valoarea '3.45'. Asta se întâmplă deoarece în JavaScript, typecasting-ul se desfăşoară
prioritar în direcŃia unui rezultat de tip string. ReŃineŃi şi această anomalie, întrucât, după cum vom
vedea în tutorialele viitoare, majoritatea proprietăŃilor obiectelor DOM-ului sunt reŃinute în variabile de
tip string.
http://kidu-kid.com
Operatori JavaScript
Cuprins:
1. Operatori aritmetici
2. Operatori de atribuire
3. Operatori de comparare
4. Operatori logici (booleeni)
5. Operatorul string (sir)
6. Operatorul typeof
7. Operatori pentru funcŃii
8. Operatori pentru structuri de date (obiecte)
9. Operatorul condiŃional ?
10. PrecedenŃa operatorilor
Cu ajutorul operatorilor manipulăm, combinăm şi modificăm datele dintr-un program sau script.
Aceştia sunt de mai multe feluri, în această lecŃie sunt prezentaŃi tipurile de operatori folosiŃi în
JavaScript.
1. Operatori aritmetici
Putem spune că operatorii aritmetici sunt principalii operatori folosiŃi alături de numere, aceştia
efectuează operaŃiile aritmetice cunoscute: adunare(+), scădere (-
), înmulŃire (*), împărŃirere (/). Pe lângă aceşti patru operatori, în programare sunt folosiŃi încă trei
operatori aritmetici :
Modulul (%) - acesta determină restul împărŃirii a două numere

Exemplu:
8%3 dă rezultatul 2
10%2 dă rezultatul 0
Incrementare (++) - Acest operator creşte valoarea cu o unitate, este foarte folosit în
programare, în lucrul cu variabile.
De exemplu, dacă avem variabila 'i', putem folosi operatorul de incrementare astfel: ++i care
este similar cu i = i+1.
Eexemplu:
x=7
++x
rezultatul va fi x = 8
Decrementare (--) - Acest operator scade valoarea cu o unitate

De exemplu, daca avem variabila 'i', putem folosi operatorul de decrementare astfel: --i care
este similar cu i = i-1.
Exemplu:
x=7
--x
rezultatul va fi x = 6
Cei doi operatori de incrementare (++) respectiv decrementare (--) pot fi folosiŃi atât
ca prefix (în faŃa variabilei) ++i respectiv --i cât şi ca sufix(după numele
variabilei) i++ respectiv i--. Valoarea obŃinută este aceeaşi, însă ordinea operaŃiei şi rezultatul
atribuirii valorii sunt diferite.
Folosirea operatorului ca prefix determină modificarea valorii în primul rând şi apoi are loc
atribuirea.
http://kidu-kid.com
În cazul folosirii operatorului ca sufix, întâi este atribuită valoarea variabilei şi apoi variabila
este incrementată (sau decrementată).
Înapoi la cuprins
2. Operatori de atribuire
În cazul acestui operator JavaScript acŃionează mereu de la dreapta la stânga, se evaluează operandul
din dreapta iar valoarea se atribuie variabilei din stânga semnului "=" .
Mai jos puteŃi vedea un tabel din care puteŃi înŃelege modul de lucru şi acŃiune al operatorilor de
atribuire
Operator Exemple Este acelaşi cu

= x =y x = y
+= x += y x = x+y
-= x -= y x = x-y
*= x *= y x = x*y
/= x /= y x = x/y
%= x %= y x = x%y
Înapoi la cuprins
3. Operatori de comparare
Expresiile care folosesc aceşti operatori pun o întrebare despre două valori pe care le compară.
Răspunsul poate fi TRUE sau FALSE.
Un operator de comparaŃie des folosit este operatorul de egalitate, reprezentat prin două semne egal
"==". Este diferit de simplul "=", operatorul '==' compară două valori determinând dacă acestea sunt
identice, adică egale atât ca valoare cât şi ca tip.
Operatori de comparaŃie sunt prezentaŃi în tabelul următor:
Operator Exemple Exemple

== Egal 3 == 8 returnează FALSE
!= Diferit 3 != 8 returnează TRUE
> Mai mare 3 > 8 returnează FALSE
< Mai mic 3 < 8 returnează TRUE
>= Mai mare sau egal 3 >= 8 returnează FALSE
<= Mai mic sau egal 3 <= 8 returnează TRUE
Înapoi la cuprins
4. Operatori logici (booleeni)
Similar cu operatori de comparaŃie, operatorii logici compară două expresii şi returnează TRUE sau
FALSE.
Aceşti operatori sunt:
&& - şi (and) - Compară două expresii şi returnează TRUE dacă amândouă sunt adevarate, în
caz contrar returnează FALSE.
Eexemplu:
x=5
y=8
x<7 && y>3
(returnează TRUE)
http://kidu-kid.com
|| - sau (or) - Compară două expresii şi returnează TRUE dacă cel puŃin una din ele este
adevărată, în caz contrar returnează FALSE.
Eexemplu:
x=5
y=8
x>7 || y<3
(returnează FALSE)
! - not - este operator unar, foloseşte o singură expresie şi returnează TRUE dacă expresia
este falsă, dacă expresia este adevărată returnează FALSE.
Eexemplu:
x=5
y=8
!(x==y)
(returnează TRUE deoarece 'x' nu este egal cu'y')
Înapoi la cuprins
5. Operatorul string (şir)
Un string este în general un şir de caractere, între ghilimele.

Pentru a alătura (concatena) două variabile string împreună se foloseşte operatorul de concatenare a
şirurilor +
Exemplu:
t1 = "Astazi este o zi"

t2 = "frumoasa"
t3 = t1+t2
(Variabila 't3' va conŃine şirul "Astăzi este o zifrumoasa")
ObservaŃi că nu este spaŃiu între 'zi' şi 'frumoasă'. Pentru a adăuga spaŃiu între şiruri, sunt două
modalităŃi:
1 - AdăugaŃi spaŃiu între variabilele string
Exemplu:
t2 = "frumoasa"
t3 = t1+" "+t2
(Variabila 't3' va conŃine şirul "Astazi este o zi frumoasa")
2 - AdăugaŃi spatiu în una din variabilele string
Exemplu:
t2 = " frumoasa"
t3 = t1+t2
(Variabila 't3' va conŃine şirul "Astazi este o zi frumoasa")
Înapoi la cuprins
6. Operatorul typeof
Acest operator returnează tipul de date conŃinut la momentul respectiv de operandul său . Este util în
special pentru a determina dacă o variabilă a fost definită .
Studiind tabelul următor puteŃi înŃelege modul de operare al acestui operator :
Operator Descriere
typeof parseFloat returnează şirul 'function'
http://kidu-kid.com
typeof 33 returnează şirul 'number'
type of "un anume text" returnează şirul 'string'
typeof true returnează şirul 'boolean'
typeof window returnează şirul 'object'
Înapoi la cuprins
7. Operatori pentru funcŃii
FuncŃiile vor fi explicate în una din lecŃiile următoare, totuşi este util să fiŃi familiarizaŃi cu doi
operatori:
1. Primul se numeşte operator de apelare şi este reprezentat printr-o pereche de paranteze

rotunde () care urmează întodeauna după numele funcŃiei, astfel o funcŃie va fi declarată astfel:
function nume_functie() {
// Corpul functiei
}
Apoi operatorul de apelare este folosit din nou când funcŃia este apelată în interiorul scriptului:
nume_functie()
Parantezele arătând că este folosită o funcŃie.
Al doilea operator pentru funcŃii este virgula "," - care se foloseşte pentru a separa mai multe
argumente pe care le primeşte o funcŃie.
Argumentele sunt scrise întodeauna în interiorul parantezelor rotunde şi sunt separate prin virgulă.
Astfel o funcŃie cu două argumente ar arăta:
function nume_functie(arg1, arg2) {
// Corpul functiei
}
Înapoi la cuprins
8. Operatori pentru structuri de date (obiecte)
Aceşti operatori sunt necesari atunci când lucrăm cu structuri de date, sau obiecte.
În JavaScript obiectele sunt folosite la gruparea informaŃiilor pentru a servi unui scop specific.
1. Un operator care ar trebui cunoscut bine este punctul "." , numit operator pentru membrul unei
structuri. Acesta ne permite să ne referim la un membru ( variabilă , funcŃie sau obiect ) care aparŃine
obiectului specificat.
Sintaxa este următoarea :
numeObiect.nume_Variabila
numeObiect.nume_Functie()
numeObiect.alt_Obiect
Aceasta modalitate de referire la o informaŃie, numită notaŃie cu punct, returnează valoarea
variabilei, funcŃiei sau obiectului aflat cel mai în dreapta.
2. Operatorul pentru membru, numit şi operator indice al tabloului, se foloseşte pentru a accesa o
dată specifică, o cheie, dintr-un tablou de date. Acesta este simbolizat printr-o pereche de paranteze
drepte [ ] , şi permite să ne referim la orice membru al unui tablou.
Tablourile sunt obiecte JavaScript şi vor fi detaliate în lecŃiile următoare.
Sintaxa de folosire a operatorului pentru tablou este :
nume_tablou[cheie]
Înapoi la cuprins
9. Operatorul condiŃional "?"
http://kidu-kid.com
JavaScript conŃine şi un operator condiŃional ? : care atribuie o valoare unei variabile pe baza unei
condiŃii.
Sintaxa de folosire a acestui operator este următoarea:
variabila = (conditie) ? val1 : val2

Modul de operare este următorul - se evaluează condiŃia, dacă este adevarată atunci variabila ia
valoarea 'val1', altfel valoarea 'val2'.
Iată un exemplu:
<script type="text/javascript">
vizitator = "barbat"
mesaj = (vizitator=="barbat")?"Stimate domn":"Stimata doamna"
document.write(mesaj) </script>
Dacă variabila "vizitator" este egală cu 'barbat', variabila "mesaj" primeşte valoarea 'Stimate domn",
altfel primeşte valoarea "Stimata doamna". Iar instrucŃiunea de afişare "document.write()" va afişa
valoarea lui "mesaj".
Înapoi la cuprins
10. PrecedenŃa operatorilor
Când în expresii se folosesc mai mulŃi operatori, JavaScript Ńine cont de precedenŃa (importanŃa)
predefinită a fiecărui operator.
Dacă apar mai mulŃi operatori cu aceeaşi precedenŃă JavaScript îi va evalua de la stânga spre dreapta
.
În tabelul următor sunt prezentaŃi operatorii în ordinea precedenŃei lor, unde operatorii din partea de
sus a tabelului au precedenŃa maximă :
Operator Nume operator

() [] . de apelare, pt. structuri de date
! ++ -- de negare, incrementare
*/% de înmultire, împărŃire
+- de adunare, scădere
< <= > >= de comparaŃie
== != de egalitate
&& SI logic
|| SAU logic
?: condiŃional
= += -= *= /= %= de atribuire
, virgula
Înapoi la cuprins
http://kidu-kid.com
Instructiuni conditionale
Partea cea mai interesantă, dar şi dificilă, în scrierea unui script este proiectarea acestuia astfel încât
să ia decizii în timp ce este executat.
Cu ajutorul instructiunilor condiŃionale putem face programele să testeze diferite condiŃii după care să
decidă modul de execuŃie a datelor.
În Java Script sunt următoarele instrucŃiuni condiŃionale:
if - execută comenzile dorite când o condiŃie este adevărată.

if ... else - execută anumite comenzi când o condiŃie este adevărată şi alte comenzi când
aceasta este falsă
switch - selectează care comandă va fi executată
1. InstrucŃiunea "if"
Se poate spune că instrucŃiunea "if" este una din cele mai des folosite.
Forma generală a acestei instrucŃuni este urmăoarea :
if (conditie) {
codul care va fi executat dacă este adevarată condiŃia
}
Unde 'condiŃie' poate fi orice expresie logică.
Dacă rezultatul condiŃiei este TRUE se execută codul dintre acolade, în caz contrar, când condiŃia
returnează FALSE, se trece peste acest cod.
Iată un exemplu practic. Următorul script afişează "Buna ziua" dacă ora este mai mare decât 11.
Se foloseşte obiectul Date care determină data curentă (va fi explicat mai amănunŃit în altă lecŃie)
Cod:
// daca ora > 11,
// va scrie în fereastra Buna ziua!
var d = new Date()
var time = d.getHours()
if (time>11) {
document.write("<b>Buna ziua!</b>")
}
</script>
Am definit variabila 'd' a cărei valoare este data curentă, apoi variabila 'time' preia ora din
variabila 'd'. CondiŃia din instrucŃiunea "if" verifică dacă ora este mai mare decât 11 şi în caz adevarăt
execută comanda dintre acolade, care afişează mesajul.
Dacă ora este mai mică decât 11 scriptul nu va executa instrucŃiunea dintre acolade.
2. Instructiunea "if ... else"
În exemplul anterior am văzut că este afişat "Bună ziua!" dacă ora > 11 iar în caz contrar nu se
întâmplă nimic.
Folosind instrucŃiunea "if ... else" putem stabili o serie de comenzi care să fie executate când condiŃia
instrucŃiunii "if" este FALSE.
Forma generală a instrucŃiuni "if ... else" este următoarea:
http://kidu-kid.com
if (condiŃie) {
codul care va fi executat dacă este adevarată condiŃia
}
else {
codul care va fi executat dacă condiŃia este falsă
}
Unde 'condiŃie' poate fi orice expresie logică.
Dacă rezultatul condiŃiei este TRUE se execută codul dintre primele acolade, care aparŃin de "if", în caz
contrar, când condiŃia returnează FALSE, sunt executate comenzile din a doua grupă de acolade (dupa
else).
Iată din nou exemplul de mai sus, de astă dată folosindu-se instrucŃiunea "if ... else".
Scriptul afişează "Bună ziua!" dacă ora este mai mare decât 11, în caz contrar afişează 'Este ora ...'.
Cod:
// daca ora > 11,
// va scrie în fereastra Buna ziua!
// Alfel afiseaza "Este ora ..."
var d = new Date()
var time = d.getHours()
if (time>11) {
document.write("<b>Buna ziua!</b>")
}
else {
document.write("<b>Este ora " +time+ "</b>")
}
</script>
Am definit variabila 'd' a cărei valoare este data curentă, apoi variabila 'time' preia ora din
variabila 'd'. CondiŃia din instrucŃiunea "if" verifică dacă ora este mai mare decât 11 şi în caz adevărat
execută comanda dintre primele acolade.
Dacă ora este mai mică decât 11 scriptul va executa comanda din grupul de acolade determinat de
"else". (Observati folosirea operatorului de concatenare +)
3. InstrucŃiunea switch
Această instrucŃiune e folosită pentru a compara o valoare cu altele dintr-o listă.

Sintaxa generală a instrucŃiuni "switch" este următoarea.
switch (expresie) {
case valoare1:
cod executat dacă expresie = valoare1
break
case valoare2:
break
case valoare3:
break
default :
cod executat dacă expresie e diferit de valoare1, valoare2 sau valoare3
}
Prima dată este evaluată expresia scrisă între paranteze rotunde, apoi valoarea expresiei este
comparată pe rând cu fiecare valoare determinată de "case". Dacă se găseşte o identitate se execută
codul asociat acelui "case". Apoi se iese din instrucŃiunea "switch".
Dacă, parcurgând fiecare "case", nu se găseşte o egalitate, se execută codul de după "default".
http://kidu-kid.com
Prin folosirea lui "break" se opreşte parcurgerea corpului instrucŃiunii atunci când s-a găsit o valoare
egală cu 'expresie' şi se iese din "switch".
Iată un exemplu de script care afişează un mesaj în funcŃie de zilele săptămâii:
Cod:
var d = new Date()
var ziua = d.getDay()
switch (ziua) {
case 5:
document.write("Astăzi e vineri")
break
case 6:
document.write("Astăzi e sâmbătă")
break
case 0:
document.write("Astăzi e duminică")
break
default:
document.write("Mai e până sâmbătă")
}
</script>
Am definit variabila 'd' a cărei valoare este data curentă, apoi variabila 'ziua' care preia numărul zilei
din variabila 'd' (duminică = 0, luni = 1, ...). Se intră în corpul instrucŃiunii "switch" şi se verifică, pe
rând, fiecare valoare "case" cu valoarea variabilei 'ziua', când se găseşte egalitatea se execută
comanda asociată acelui 'case' şi se iese din "switch".
Dacă nici una din valorile 'case' nu este egală cu valoarea variabilei 'ziua', se va executa comanda de
după 'default', care afişeaza mesajul: "Mai e până sâmbătă".
Instructiuni ciclice (repetitive)
InstrucŃiunile repetitive se folosesc atunci când se doreşte efectuarea unei comenzi de mai multe ori.
În Java Script putem folosi următoarele instrucŃiuni ciclice:
for - la fel ca şi în alte limbaje de programare, execută codul de un număr specificat de ori
for ... in - execută câte un set de instrucŃiuni pentru fiecare proprietate dintr-un obiect
while - repetă codul atâta timp cât o anumită condiŃie este adevărată
do ... while - întâi execută o dată codul apoi îl repetă atâta timp cât o anumită condiŃie este
adevărată
1. InstrucŃiunea for
Aceasta are următoarea formă generală:
http://kidu-kid.com
for (începere_nr; condiŃie_nr; ciclu) {
cod care va fi executat
}
Unde "începe_nr" e folosit la 'iniŃializare' pentru a da o valoare iniŃială numărului de repetări, de
multe ori prin aceasta se declară o variabilă care poate fi folosită ca un contor al ciclului.
"conditie_nr" verifică dacă numărul de cicluri se încadrează într-o anumită valoare şi dacă rezultatul
este TRUE se execută încă o dată codul dintre acolade.
"ciclu" incrementează sau decrementează valoarea la care a ajuns contorul ciclului, apoi această
valoare este verificată din nou de "conditie_nr" până când rezultatul este FALSE.
Aceste trei expresii dintre parantezele rotunde sunt opŃionale, dar dacă este omisă una din ele,
caracterul punct şi virgulă ";" trebue să rămână pentru ca fiecare expresie să rămână la locul ei.
În interiorul instrucŃiunii for (ca şi la instrucŃiunea "if"), între acolade, pot fi introduse şi alte
instrucŃiuni "for", sau alte instrucŃiuni condiŃionale, acest lucru se numeşte îmbricarea
instrucŃiunilor.
Iată un exemplu simplu de utilizare a instrucŃiunii "for"
Cod:
for (x=1; x<5; x++) {
document.write("<br /> x este "+x)
}
</script>
Se atribuie lui 'x' valoarea 1, se verifică condiŃia (x<5) care este adevărată şi se execută corpul
instrucŃiunii (dintre acolade, care afişează "x este 1") apoi se incrementează valoarea lui 'x' cu o
unitate (x++), acum 'x are valoarea 2'. Se verifică din nou condiŃia (x<5) şi fiindcă este adevărată, se
execută iar corpul instrucŃiunii apoi se incrementează valoarea lui 'x', ..., şi tot aşa până când 'x' va
ajunge să aibe valoarea 5 care la verificarea condiŃiei returnează FALSE, moment în care se termină
execuŃia instrucŃiunii "for".
Acest script va afişa următorul rezultat
x este 1
x este 2
x este 3
x este 4
2. InstrucŃiunea for ... in
Pentru utilizarea acestei instrucŃiuni trebuie să aveŃi cunoştinŃe despre obiectele JavaScript aşa că va
trebui să reveniŃi asupra ei după ce le veŃi învăŃa - în lecŃiile următoare.
Cu "for ... in" se execută câte un set de instrucŃiuni pentru fiecare proprietate dintr-un obiect. Acest
ciclul se poate executa cu orice obiect JavaScript, indiferent dacă are sau nu proprietăŃi. Pentru fiecare
proprietate se execută câte o iteraŃie, dacă obiectul nu are nici o proprietate nu se desfăşoară nici un
ciclu.
InstrucŃiunea "for ... in" are următoarea formă generală:
for (nume_proprietate în obiect) {

instrucŃiuni
}
Unde "nume_proprietate" este un literal de tip şir generat de JavaScript. Pentru fiecare repetare a
execuŃiei instrucŃiunii, lui "nume_proprietate" i se atribuie următorul nume de proprietate conŃinut în
"obiect", până când sunt folosite toate.
3. InstrucŃiunea while
Această instrucŃiune repetă un cod atâta timp cât condiŃia este adevărată.
Comanda acŃionează similar cu instrucŃiunea "for", dar nu include funcŃiile de iniŃializare şi
http://kidu-kid.com
incrementare a variabilelor.
InstrucŃiunea "while" are următoarea formă generală:
while (condiŃie) {
codul care va fi executat
}
Iată exemplu anterior, de la instrucŃiunea "for" scris în varianta instrucŃiunii "while":
Cod:
var x = 1
while (x<5) {
x++
}
</script>
Prima dată am declarat variabila 'x' dându-i valoarea 1.

InstrucŃiunea "while" verifică condiŃia (aici x<5) care este adevărată şi permite executarea corpului
funcŃiei dintre acolade care afişează "x este 1" şi incrementează valoarea lui 'x' cu o unitate.
Acum 'x' are valoarea 2, se verifică condiŃia, care este adevărată şi se execută iar codul dintre
acolade, ..., şi tot aşa până când la verificarea condiŃiei rezultatul este FALSE, moment în care se
termină rularea instrucŃiunii "while".
Acest script va afişa următorul rezultat
x este 1
x este 2
x este 3
x este 4
4. InstrucŃiunea do ... while
Forma generală a acestei instrucŃiuni este:
do {
codul care va fi executat
}
while (conditie)
Asemănătoare în mare parte cu instrucŃiunea "while", instrucŃiunea "do ... while" întâi execută codul
din corpul instrucŃiunii după care verifică condiŃia, apoi îl repetă până când condiŃia returnează FALSE.
Astfel corpul funcŃiei este executat cel puŃin o dată, chiar dacă condiŃia nu este adevărată.
Iată un exemplu din care puteŃi înŃelege mai bine această instrucŃiune
Cod:
var x = 8
do {
x++
}
while (x<5)
</script>
Această funcŃie afişează "x este 8".

ObservaŃi că deşi condiŃia este falsă (x<5), codul dintre acolade este executat o singură dată.
http://kidu-kid.com
Instructiuni complementare
Pe lângă instrucŃiunile "for" şi "while" avem şi alte instrucŃiuni 'complementare' care pot fi executate
împreună cu acestea.
break - întrerupe definitiv execuŃia unui ciclu

continue - sare peste instrucŃiunile care au mai rămas din ciclul respectiv
label (eticheta) - permite ieşirea dintr-un ciclu cu instrucŃiuni îmbricate la o locaŃie specificată a
scriptului
with - se foloseşte pentru fi evitată specificarea repetată la referirea unui obiect, când îi accesăm
metodele sau proprietăŃile
1. InstrucŃiunile break şi continue
Când este folosită o instrucŃiune ciclică, aceasta continuă să se repete până când condiŃia este FALSE.
Această excuŃie poate fi schimbată cu ajutorul instrucŃiunilor break şi continue, care dau posibilitatea
întreruperii ciclului sau ieşirea din acesta înainte de a se ajunge la sfârşit (la ultima acoladă).
break - întrerupe definitiv executarea ciclului.
Iată un exemplu din care puteŃi înŃelege modul de lucru a lui break:
Cod:
for (x=1; x<10; x++)
{
document.write("<br /> X este "+x);
if (x==3)
{
break;
}
}
</script>
Acest script va afişa următorul rezultat:
X este 1
X este 2
X este 3
După cum puteŃi observa, nu au fost executate toate ciclurile instrucŃiunii "for", conform condiŃiei
(până când 'x' ar fi avut valoarea 10), execuŃia se întrerupe când 'x' are valoarea 3.
continue - întrerupe execuŃia repetării curente, înainte de a fi executate celelalte operaŃii din ciclu,
apoi se verifică din nou condiŃia şi se continuă cu executarea ciclului.
StudiaŃi şi următorul exemplu, în care este folosit continue
Cod:
http://kidu-kid.com
for (x=1; x<8; x++)
{
if (x==3 || x==5)
{
continue;
}
document.write("<br /> X este "+x);
}
</script>
X este 1
X este 2
X este 4
X este 6
X este 7
ObservaŃi că atunci când 'x' are valoarea 3 sau 5, prin instrucŃiunea "continue" se întrerupe execuŃia
codului care urmează după aceasta (aici "document.write("<br /> X este "+x);") din repetarea
curentă, dar se continuă cu verificarea condiŃiei instrucŃiunii "for" şi execuŃia ciclului
2. InstrucŃiunea etichetă (label)
InstrucŃiunea label poate fi folosită împreună cu "break" sau "continue". Aceasta este utilizată
atunci când folosim instrucŃiuni ciclice îmbricate, permiŃând controlul oricărei instrucŃiuni de control
care îmbrică alte instrucŃiuni.
Studiind exemplul următor, puteŃi înŃelege mai bine modul de utilizare a unei instrucŃiuni label:
Cod:
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 instrucŃiuni ciclice îmbricate (aici două "for") cu eticheta "loopX", care va fi
folosită în a doua instrucŃiune "for" îmbricată, împreună cu "break".
X este 1 - Y este 3 --X este 1 - Y este 4 --X este 1 - Y este 5 --X este 1 - Y este 6 --X este 1 - Y este 7
--
--
http://kidu-kid.com
--
X este 4 - Y este 3 --
ObservaŃi că deşi "break" este inclus în interiorul celei dea doua instrucŃiuni "for", prin specificarea lui
"loopX", care este eticheta întregului ansamblu de instrucŃiuni îmbricate, se va întrerupe execuŃia
întregului ansamblu, nu numai a instrucŃiunii "for" unde este adăugat "break". Dacă eliminaŃi eticheta
"loopX" veŃi vedea diferenŃa.
3 InstrucŃiunea with
Această comandă se foloseşte pentru a evita referirea în mod repetat la un obiect, atunci când îi
accesăm metodele sau proprietăŃile de mai multe ori. Orice metodă sau proprietate dintr-un bloc
"with" pe care JavaScript nu o recunoaşte va fi asociată cu obiectul specificat pentru acel bloc.
Sintaxa acestei instrucŃiuni este:
with (obiect) {
instructiuni
}
Unde "obiect" specifică referirea la obiect care trebuie folosită, dacă aceasta nu există în blocul
"instrucŃiuni". Ajută mult când se utilizează de mai multe ori funcŃii matematice avansate, prin
intermediul obiectului "Math". (Acest obiect va fi explicat mai târziu).
În exemplul următor este prezentat modul de folosire a instrucŃiunii "with" :
Cod:

</script>
Acest script va afişa :
Salut
Acum nu mai este necesara folosirea obiectului ca prefix al functiei
În mod normal, pt. a afişa un text folosim sintaxa "document.write("text ...")", dar aici, prin folosirea
lui 'with' împreună cu obiectul "document", nu mai este necesară adăugarea acestuia la metoda
"write", astfel se scurtează codul scriptului.
http://kidu-kid.com
Ferestre de alert, prompt si confirm
Alert, Prompt şi Confirm sunt ferestre predefinite de dialog, acestea aparŃin direct obiectului
"Window".
1. Fereastra Alert
AŃi întâlnit până acum, de mai multe ori exemple cu "Alert".

Fiind un element simplu şi deja cunoscut, voi face o scurtă prezentare a sintaxei acestuia.
Crearea ferestrelor alert se face cu sintaxa:
window.alert("mesaj")
Unde "mesaj" este textul care va apare în fereastra Alert.

Următorul exemplu deschide o fereastră cu mesajul "Bine ai venit".
Cod:

</script>
În browser va apare o fereastră ca în imaginea următoare
2. Fereastra Prompt
Fereastra Prompt se crează cu sintaxa:
window.prompt("mesaj", "default")
Unde "mesaj" este un text care va apare în fereastră, deasupra unei căsuŃe input; iar "default" este
textul care va apare în căsuŃa input.
Următorul exemplu deschide o fereastră "Prompt".
http://kidu-kid.com
Cod:

</script>
3. Fereastra Confirm
Fereastra de confirmare se crează cu sintaxa:
window.confirm("intrebare")
În fereastra de confirmare va apare textul "întrebare" şi două butoane "OK" şi "Cancel".

Această fereastră este folosită pentru a fi executată o comandă când este apăsat butonul "OK"
(returnează TRUE) şi altă comandă când este apăsat butonul "Cancel" (returnează FALSE).
Următorul exemplu deschide o fereastră "Confirm" în care apare întrebarea "Rezultatul lui 0+0 este
0?". Dacă este apăsat butonul "OK" apare o fereastră Alert cu mesajul "Corect", iar dacă este apăsat
butonul "Cancel" apare o fereastră Alert cu mesajul "Incorect"
Cod:

</script>
AtenŃie!
În exemplu de mai sus nu am mai pus acolade deşi normal ar trebui puse. Regula este că dacă după o
comandă există doar o singură instrucŃiune, nu este obligatoriu adăugarea acoladelor, iar în exemplul
de mai sus după if şi else avem doar o singură instrucŃiune, în acest caz un alert, deci nu am mai pus
acolade. În cazul în care ar fi fost necesare mai multe instrucŃiuni, acoladele după if şi else erau
obligatorii.
http://kidu-kid.com
Crearea functiilor in javascript
FuncŃiile ajută la divizarea mai multor sarcini pe care trebuie să le facă un program.
O funcŃie poate conŃine mai multe instrucŃiuni şi comenzi care ulterior pot fi utilizate uşor şi de mai
multe ori prin apelarea funcŃiei care le conŃine.
Dacă un program necesită multe linii de cod, folosind funcŃiile putem împărŃi codul în părti mai mici pe
care le putem utiliza separat acolo unde este nevoie.
Pot fi două feluri de funcŃii:
predefinite - cum sunt de exemplu: "parseIntt(string)", "parseFloat(string)", ...

Create de programator
- care returnează o valoare
- care nu returnează o valoare
1. Crearea (definirea) funcŃiilor
O funcŃie se defineşte la începutul fişierului, în secŃiunea head şi poate fi folosită în cadrul paginii prin
apelarea ei. Scriptul care conŃine definirea unei funcŃii se adaugă în secŃiunea "head" pentru a fi siguri
că acesta a fost încărcată înainte de a fi apelată.
Pentru crearea unei funcŃii se foloseşte cuvântul function urmat de numele pe care vrem să-l dăm
funcŃiei după care putem adăuga între paranteze rotunde argumentele (numite şi atribute) funcŃiei
(separate prin virgulă dacă sunt mai multe) şi între acolade corpul funcŃiei care conŃine codul care
trebuie executat.
Forma generală a unei funcŃii este următoarea:
function nume_functie(argument1, argument, ...) {

codul care va fi executat }
http://kidu-kid.com
Argumentele sunt variabile folosite de funcŃie şi a căror valoare este preluată la apelarea funcŃiei.
Atributele nu sunt obligatorii, o funcŃie poate fi definită şi fără argumente, dar se păstrează
parantezele rotunde, astfel sintaxa unei funcŃii fără argumente este următoarea:
function nume_functie() {
codul care va fi executat }
2. InstrucŃtiunea return
O funcŃie care returnează un rezultat foloseşte pentru aceasta instrucŃiunea return. Aceasta specifică
valoarea pe care o returnează funcŃia când este apelată.
Iată un exemplu din care puteŃi înŃelege modul de aplicare a instrucŃiunii return:
function suma(x, y) {
c = x+y
return c }
- "suma" reprezintă numele funcŃiei (puteŃi da orice nume care respectă regulile limbajului şi nu sunt
identice cu cele rezervate, cum ar fi "function"),
"x, y" reprezintă argumentele funcŃiei a căror valoare este dată când funcŃia este apelată. Între
acolade avem codul care trebuie executat şi care, prin instrucŃiunea "return" va returna valoarea lui
"c" care reprezintă suma lui "x" şi "y". Astfel valoarea returnată de funcŃia "suma()" va fi valoarea pe
care o are "c".
3. Apelarea funcŃiilor
După ce am creat o funcŃie, pentru a fi folosită, funcŃia trebuie apelată.

- O funcŃie care conŃine argumente se apelează în felul următor:
nume_functie(argument1, argument, ...)

- O funcŃie fără argumente se apelează în felul următor:
nume_functie()
ObservaŃi că la apelul funcŃiei nu se mai folosesc cuvantul "function" şi acoladele
În locul în care am apelat astfel o funcŃie va fi executat corpul acelei funcŃii.
4. Exemple de scripturi cu funcŃii
În continuare studiaŃi exemplele de mai jos, care folosesc funcŃii simple, astfel veŃi înŃelege mai bine
modul de lucru şi execuŃie a unei funcŃii.
- Exemplu 1 - funcŃie fără argument

Următorul exemplu prezintă un script care afişează un text.
Cod:
<html>
<head>

</script>
</head>
<body>
http://kidu-kid.com
exemplu1()
</script>
</body>
</html>
ObservaŃi că funcŃia "exemplu1" a fost definită în secŃiunea head a documentului HTML şi apoi a fost
apelată în secŃiunea "body", unde va afişa textul "Bine ati venit!"
- Exemplu 2 - funcŃie cu un argument

Următorul exemplu prezintă un script care la apăsarea unui buton deschide o fereastră "alert" care va
afişa un text în funcŃie de argumentul transmis.
SpecificaŃie - Sintaxa generală a funcŃiei "alert" din JavaScript este: alert('Text'), aceasta deschide o
fereastră de atenŃionare în care este afişat mesajul dintre paranteze "Text".
Cod:
<html>
<head>

</script>
</head>
<body>
<form>
<input type="button" onclick="exemplu2('Buna dimineata!')" value="dimineata"
/>
<input type="button" onclick="exemplu2('Buna ziua!')" value="ziua" />
</form>
</body>
</html>
StudiaŃi cu atenŃie scriptul şi modul în care acesta este apelat.

Textul afişat de alert este preluat de la valoarea argumentului funcŃiei "exemplu2" care l-a rândul lui îl
preia din ceea ce este scris la apelarea funcŃiei.
"onclick" (la click) este o comandă JavaScript care specifică momentul când trebuie să fie executată
funcŃia.
Când apăsaŃi cele două butoane veŃi obŃine o fereastră 'Alert' cu două mesaje diferite (specificate la
fiecare apelare a funcŃiei "exemplu2")
- Exemplu 3 - funcŃie cu două argumente

Următorul exemplu prezintă un script care la apăsarea unui buton deschide o fereastră "alert" care va
afişa suma a două numere.
Cod:
<html>
<head>

</script>
</head>
<body>
<form>
<input type="button" onclick="exemplu3(7, 8)" value="Suma" />
</form>
</body>
</html>
StudiaŃi cu atenŃie scriptul, modul în care au fost combinate: "alert()", şirul şi valoarea argumentelor
"x, y", variabila "z" şi modul în care funcŃia "exemplu3" este apelată.
Când apăsaŃi pe buton, veŃi obŃine suma numerelor 7 şi 8.
În interiorul funcŃiei pot fi folosite instrucŃiuni complexe, cum ar fi "for", "if", "while"; care pot lua
decizii diferite în funcŃie de argumentele funcŃiei. Depinde doar de cunoştinŃele şi imaginaŃia dvs.
Lucrul cu functii in javascript
În această lecŃie vor fi prezentate trei exemple de scripturi care folosesc funcŃii mai complexe decât
cele prezentate în lecŃia anterioară.
1. Modificarea numărului argumentelor
Când creem o funcŃie îi definim şi numărul de argumente pe care le acceptă, lucru de care se Ńine cont
în momentul apelării ei.
Sunt situaŃii în care dorim să transmitem funcŃiei un număr diferit de argumente; de obicei 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 astfel de situaŃie putem folosi o valoare prestabilită în interiorul funcŃiei, pentru cazul în care nu
sunt transferate argumente.
În continuare va fi prezentat un script care afişează un mesaj de salut atunci când utilizatorul ajunge
la o pagină web. Programul afişează un anumit mesaj dacă recunoaşte sau nu numele vizitatorului.
Dacă "utilizator" nu este "null" variabila a fost definită. Acest lucru este posibil doar dacă o valoare, ca
"Media", este transferată funcŃiei. Dacă variabila "utilizator" este egal cu "null" atunci scriptul evită
folosirea variabilei în mesajul de salut.
http://kidu-kid.com
Cod:
<html>
<head>

</script>
</head>
<body>

</script>
</body>
</html>
Acest script va afişa în pagină următorul rezultat:
Citat:
Prima apelare a functiei mesaj()

Salut Media
A doua apelare a functiei mesaj()
Bine ati venit pe site!
StudiaŃi codul funcŃiei şi observaŃi diferenŃa mesajelor din cele două apelări.
În unele situaŃii unei funcŃii îi sunt transferate mai multe argumente decât au fost specificate la
declararea ei. Valorile argumentelor suplimentare nu sunt pierdute, acestea se stochează într-un
tablou numit "arguments" , care există implicit pentru orice funcŃie.
Toate argumentele sunt păstrate în acest tablou şi pot fi extrase în interiorul corpului funcŃiei.
Argumentele funcŃiei "mesaj" sunt stocate în tabloul "mesaj.arguments". Stocarea se face într-o
ordine asigurată de o "cheie" a cărei primă valoare este 0.
Pentru a extrage primul element din tabloul "arguments" al funcŃiei "mesaj" folosim sintaxa "arg1 =
mesaj.arguments[0]", pentru al doilea "arg2 = mesaj.arguments[1]".
Toate tablourile JavaScript sunt indexate pornind de la 0. Pentru a găsi numărul total de argumente
din tablou putem folosi o instrucŃiune specială "length" care returnează lungimea (nr. de elemente)
unui tablou.
Următorul exemplu atribue variabilei "nrArg" o valoare care reprezintă numărul de argumente
(elemente) din tabloul "mesaj.arguments":
nrArg = mesaj.arguments.length
Folosind instrucŃiunile prezentate mai sus (legate de tabloul "arguments"), putem crea o nouă
versiune a scriptului din primul exemplu. Această versiune răspunde mai corect în funcŃie de
cunoaşterea sau nu a numelui utilizatorilor.
Cod:
http://kidu-kid.com
<head>
function mesaj(utilizator) {
if (utilizator!=null) {
document.writeln("Salut "+utilizator);
}
else {
document.writeln("Bine ati venit pe site");
}
numarArgumente=mesaj.arguments.length;
if(numarArgumente>1) {
for (var i=1;i<numarArgumente;i++) {
document.writeln(mesaj.arguments[i]);
} // end for
} // end if
} // end function
</script>
</head>
<body>
var utilizator="Marius", extraMesaj="Bine ai revenit";
var utilizator2=null;
var extraMesaj1="Vrei sa devii membru ?";
var extraMesaj2="Te poti inscrie online";
mesaj(utilizator,extraMesaj);
document.writeln("<hr>");
mesaj(utilizator2,extraMesaj1,extraMesaj2);
</script>
</body>
</head>
Acest exemplu va afişa în pagina web următorul rezultat:
Citat:
Salut Marius Bine ai revenit
Bine ati venit pe site Vrei sa devii membru ? Te poti inscrie online
2. FuncŃii recursive
O funcŃie JavaScript poate fi recursivă, adică se poate autoapela.

O metodă bună de a demonstra capacitatea recursivă a funcŃiilor este rezolvarea unei ecuaŃii
factoriale.
În exemplul următor avem o funcŃie JavaScript recursivă care află factorialul unui număr precizat "n"
(aici 7)
Cod:
<html>
<head>
<script type=text/javascript>
document.writeln("Calculeaza factorialul de 7 prin functie recursiva")
function factorial(n) {
var rezultat;
if (n>0)
http://kidu-kid.com
{
rezultat=n*factorial(n-1);
}
else if (n==0) {
rezultat=1;
}
else {
rezultat =null;
}
return(rezultat)
}
</script>
</head>
<body>
<form>
<input type = button value = "Factorial" onclick=alert(factorial(7)) >
</form>
</body>
</html>
FuncŃia verifică întâi dacă "n" este mai mare decât 0, apoi în caz afirmativ, "n" se înmulŃeşte cu
rezultatul returnat de apelarea funcŃiei cu argumentul "n-1". Când "n" ajunge 0, apariŃia cea mai
îmbricată a funcŃiei se încheie şi returnează prima valoare. JavaScript încheie fiecare funcŃie îmbricată
până ce ajunge la apelarea iniŃială a funcŃiei "factorial", apoi întoarce rezultatul final.
Obiectele Java Script - partea 1
Pentru început trebuie să ştiŃi ce sunt obiectele în programare şi care sunt conceptele fundamentale
ale programării orientate spre obiecte (OOP).
Java Script nu este un program orientat pe obiecte (OO), cum sunt C++ sau Java, dar este bazat pe
obiecte.
În lumea din jurul nostru obiectele sunt de exemplu: o carte, o maşina, un televizor; în
JavaScript obiectele sunt de exemplu: un formular, o fereastră, butoane, imagini ...
Toate elementele dintr-o pagină sunt văzute de JavaScript ca fiind obiecte.
Obiectele au anumite proprietăŃi, de exemplu în lumea reală televizoarele au butoane, maşinile au
roŃi; aşa şi în JavaScript obiectele au proprietăŃi: formularele au buton, ferestrele au titluri.
Pe lângă obiecte şi proprietăŃi, în JavaScript avem şi termenul "metode".
Metodele reprezintă funcŃiile pe care un obiect poate să le facă. Ferestrele se deschid cu metoda
"open()", butoanele au metoda "click()". Parantezele rotunde "()" arată că se face referire la o
metodă, nu la o proprietate.
http://kidu-kid.com
Astfel, putem rezuma că un obiect este o colecŃie de proprietăŃi şi funcŃii (metode)
Sintaxa pentru folosirea obiectelor este:
obiect.prorietate obiect.metoda()
Punctul (.) se foloseşte pentru a specifica deŃinătorul metodei sau proprietăŃii.
Obiectele din JavaScript le putem cataloga în trei categorii principale:

- Obiecte pe partea de client
- Obiecte pe partea de server
- Obiecte esenŃiale
Astfel avem mai multe tipuri de obiecte care pot fi folosite, pentru începători e bine de ştiut în
principal obiectele pe partea de client şi cele esentiale, cum sunt: "string", "math" sau cele care vin de
la etichetele HTML.
Mai multe astfel de obiecte pot forma o celulă (o grupă) numită "clasa", astfel diferite obiecte
încorporate pentru o execuŃie comună formează un "set de clase" care se mai numeşte şi "biblioteca
de clase", iar mai exact pentru limbajul JavaScript "biblioteca de obiecte JavaScript", şi pot fi
refolosite.
JavaScript are următoarele obiecte esenŃiale, predefinite:
1 - String
2 - Math
3 - Date
4 - Array
5 - Global
1. Obiectul string
String (sau şir) se foloseşte pentru a prelua text.

Proprietatea acestui obiect este:
length - returnează numărul de caractere dintr-un şir (string)

Metodele obiectului string sunt următoarele:
anchor() - Returnează un şir ca şi "anchor"
big() - Returnează un şir cu text mare
blink() - Returnează un şir care clipeste
bold() - Returnează un şir cu litere îngroşate
charAt() - Returnează un caracter de la poziŃia care este specificată
charCodeAt() - Returnează codul ASCII al unui caracter de la o poziŃie specificată
concat() - Returnează două şiruri concaternate
fixed() - Returnează un şir cu caractere tip
fontcolor() - Returnează un şir cu o culoare specificată
fontsize() - Returnează un şir cu litere de o anume mărime
fromCharCode() - Returnează valoarea Unicode a unui caracater
indexOf() - Returnează poziŃia primei apariŃii a unui subşir într-un şir, sau dacă subşirul nu e
găsit, valoarea -1
italics() - Returnează un şir în italic (scris aplecat)
lastIndexOf() - Returnează poziŃia primei apariŃii a unui subşir într-un şir, sau dacă acesta
nu e găsit, -1 (Important: se începe din dreapta şirului spre stânga)
link() - Returnează un şir ca hyperlink
match() - Similar cu indexOf şi lastIndexOf, dar această metodă returnează şirul specificat
şir, sau "null", în locul unor valori numerice
replace() - Înlocuieşte unele caractere specificate cu altele noi specificate.
search() - Returnează un număr întreg dacă şirul conŃine caracterele specificate, altfel
returnează -1
slice() - Returnează un şir începând de la poziŃia index specificată
small() - Returnează un şir cu caractere mai mici
split() - Împarte un şir în mai multe şiruri, în funcŃie de caracterele specificate
strike() - Returnează un şir tăiat cu o linie la mijloc
sub() - Returnează un şir ca indice
http://kidu-kid.com
substr() - Returnează un subşir specificat astfel, exemplu: 12,8 returnează 8 caractere,
începând de la caracterul al 12-lea (se începe de la 0)
substring() - Returnează un subşir specificat astfel, exemplu: 8,12 returnează toate
caracterele, începand de la caracterul al 8-lea, până la al 12-lea
sup() - Returnează un şir ca putere (superscript)
toFixed(n) - Returnează şirul numeric rotunjindu-l la o valoare cu 'n' zecimale
toLowerCase() - Converteşte un şir în litere mici
toUpperCase() - Converteşte un şir în litere mari
În continuare este prezentat un exemplu în care se foloseşte proprietatea "length" pentru a afla câte
elemente are un şir şi metoda "indexOf" prin care verificăm dacă un şir dat conŃine un anumit cuvânt
specificat. Dacă este găsit cuvântul, se returnează poziŃia primei litere din el, în caz contrar apare
mesajul "Cuvantul nu a fost gasit"
Cod:
var str="Un sir de text cu multe caractere"
document.write(src+"<br />")
document.writeln("Acest sir are "+ str.length + " caractere")
var pos=str.indexOf("multe")
if (pos>=0)
{
document.write("Cuvantul multe incepe de la pozitia: ")
document.write(pos + "<br />")
}
else
{
document.write("Cuvantul nu a fost gasit!")
}
</script>
Şirul începe cu poziŃia 0.
Dupa ce este adăugat într-un document HTML, acest script va afişa în pagină următorul rezultat:
Un sir de text cu multe caractere
Acest sir are 33 caractere Cuvantul multe incepe de la pozitia: 18
PuteŃi să exersaŃi în acest script metodete prezentate mai sus, testând propriile dvs. exemple
2. Obiectul Array (tablou)
Obiectul Array (numit şi tablou) se foloseşte pentru a stoca mai multe valori într-un singur nume de
variabilă.
Fiecare valoare stocată devine un element al tabloului, acesta are asociat un "numar index" (sau
cheie). Cu ajutorul acestei chei se poate face referire la oricare element specificat din tablou.
Cu operatorul new se poate crea o "instanŃă" a obiectului Array, ca în exemplul următor:
var nume_colegi = new Array(4)

Unde între parantezele rotunde este trecut numărul de elemente ale tabloului, aici 4.
Numărul de elemente, cheile, încep implicit de la 0.
Pentru a da valori elementelor din tablou, se scrie numele tabloului urmat de o pereche de paranteze
pătrate, în interiorul cărora se adaugă cheia specifică fiecarui element, apoi semnul egal şi valoarea
dorită, după cum puteŃi vedea în următorul exemplu:
nume_colegi[0] = "Cristi"
nume_colegi[1] = "Ion"
nume_colegi[2] = "Simona"
nume_colegi[3] = "Adi"
http://kidu-kid.com
Pentru a face referire la un anumit element din tablou şi pentru a extrage anumite valori din Array, se
scrie numele tabloului şi între parantezele pătrate cheia specifică acelui element; ca în exemplul
următor:
coleg = nume_colegi[0]
colega = nume_colegi[2]
Astfel, variabila "coleg" va avea valoarea "Cristi" şi variabila "colega" valoarea "Simona".
Pentru a afla numărul de elemente ale unui Array, se foloseste proprietatea "length", ca în exemplul
următor:
nr_colegi = nume_colegi.length
Obiectul Array are următoarele metode:
concat() - Returnează un tablou rezultat din concatenarea a două tablouri
join() - Returnează un tablou format din toate elementele unui tablou concatenat
reverse() - Returnează inversul unui tablou
slice() - Returnează o parte specificată a unui tablou
sort() - Returnează tabloul ordonat
Următorul exemplu foloseşte o instrucŃiune "for" care parcurge un tablou (aici tabloul "nume_colegi"),
extrage valoarea fiecărui element şi o afişează.
Cod:

</script>
În pagina HTML va fi afişat următorul rezultat:

Afiseaza numele fiecarui coleg:
Cristi
Ion
Simona
Adi
ÎncercaŃi să creaŃi mici exemple în care să lucraŃi şi cu alte tabele (create de dv.) şi instrucŃiuni.
http://kidu-kid.com
Obiectele Java Script - partea 2
În această lecŃie este continuată prezentarea şi explicarea obiectelor esentiale JavaScript
1. Obiectul Date
Obiectul Date se foloseşte pentru a lucra cu data zilei şi timp.

Sunt două lucruri importante pe care trebuie să le cunoaşteŃi înainte de a folosi acest obiect:
1. Data iniŃială (de referinŃă) este 1-01-1970, nu puteŃi să lucraŃi cu date anterioare acesteia
2. Când creaŃi un obiect "Date", ora folosită de obiect este aceea de pe calculatorul client (al
vizitatorului)
Pentru a crea o instanŃă a obiectului "Date" se foloseşte operatorul new, ca în exemplul următor:
var data = new Date
Se memorează data curentă într-o variabilă, aici cu numele "data".
După ce a fost creată instanŃa, se pot folosi metodele obiectului.
De exemplu, dacă se doreşte afişat numărul zilei (de la 1 la 31) se scrie următoarea comandă (aici e
folosită instanŃa cu numele "data"):
data.getDate()
Se pot crea şi altfel obiecte Date, care pot afişa data şi ora într-un mod specificat:
new Date("Month dd, yyyy hh:mm:ss")
new Date("Month dd, yyyy")
new Date(yy,mm,dd,hh,mm,ss)
new Date(yy,mm,dd)
new Date(milliseconds)
Unde: Month=luna, dd=ziua (cu 2 caractere), y=anul (yy e afisat cu 2 caractere iar yyyy cu 4),
h=ora, m=minute, s=secunde, milliseconds=milisecunde.
Astfel se pot crea variabile de data pt. fiecare obiect Date de mai sus, ca în exemplul următor:
var data=new Date("October 15, 1996 15:16:00")
var data=new Date("October 15, 1996")
var data=new Date(96,10,15,15,16,00)
var data=new Date(96,10,15)
var data=new Date(500)
- Metodele obiectului Date:
Date() - Returnează un obiect Date
getDate() - Returnează data (ziua) din luna (între 1-31)
getDay() - Returnează ziua dintr-un obiect Date (între 0-6; 0=Duminica, 1=Luni, etc.)
getMonth() - Returnează luna dintr-un obiect Date (între 0-11. 0=January, 1=February,
etc.)
getFullYear() - Returnează anul dintr-un obiect Date (patru cifre)
getYear() - Returnează anul dintr-un obiect Date (cu 2 cifre, între 0-99). Este recomandat
getFullYear
getHours() - Returnează ora dintr-un obiect Date (între 0-23)
getMinutes() - Returnează minutele dintr-un obiect Date (între 0-59)
getSeconds() - Returnează secunda dintr-un obiect Date (între 0-59)
getMilliseconds() - Returnează milisecunda dintr-un obiect Date (între 0-999)
getTime() - Returnează numărul de milisecunde până la miezul noptii
getTimezoneOffset() - Returnează diferenŃa de timp între computer şi GMT
getUTCDate() - Returnează data dintr-un obiect Date în (UTC) timp universal
getUTCDay() - Returnează ziua dintr-un obiect Date în timp universal
getUTCMonth() - Returnează luna dintr-un obiect Date în timp universal
http://kidu-kid.com
getUTCFullYear() - Returnează anul (4 cifre) dintr-un obiect Date în timp universal
getUTCHours() - Returnează ora dintr-un obiect Date în timp universal
getUTCMinutes() - Returnează minutele dintr-un obiect Date în timp universal
getUTCSeconds() - Returnează secundele dintr-un obiect Date în timp universal
getUTCMilliseconds() - Returnează millisecundele dintr-un obiect Date în timp universal
parse() - Returnează un şir ce are ca valoare numărul de millisecunde până în January 01
1970 00:00:00
setDate() - Setează luna într-un Obiect Date (între 1-31)
setFullYear() - Setează anul într-un Obiect Date (four digits)
setHours() - Setează ora într-un Obiect Date (între 0-23)
setMilliseconds() - Setează millisecundele într-un Obiect Date (între 0-999)
setMinutes() - Setează minutele într-un Obiect Date (între 0-59)
setMonth() - Setează luna într-un Obiect Date (între 0-11. 0=January, 1=February)
setSeconds() - Setează secunda într-un Obiect Date (între 0-59)
setTime() - Setează millisecundele după 1/1-1970
setYear() - Setează anul într-un Obiect Date (00-99)
setUTCDate() - Setează data într-un Obiect Date, în timp universal (între 1-31)
setUTCDay() - Setează ziua într-un Obiect Date, în timp universal (între 0-6. Sunday=0,
Monday=1, etc.)
setUTCMonth() - Setează luna într-un Obiect Date, în timp universal (între 0-11. 0=January,
1=February)
setUTCFullYear() - Setează anul într-un Obiect Date, în timp universal (four digits)
setUTCHour() - Setează ora într-un Obiect Date, în timp universal (între 0-23)
setUTCMinutes() - Setează minutele într-un Obiect Date, în timp universal (între 0-59)
setUTCSeconds() - Setează secundele într-un Obiect Date, în timp universal (între 0-59)
setUTCMilliseconds() - Setează millisecundele într-un Obiect Date, în timp universal (între
0-999)
toGMTString() - Converteşte un Obiect Date la un şir, ce conŃine ora GMT
toLocaleString() - Converteşte un Obiect Date la un şir, ce conŃine ora curentă
toString() - Converteşte un Obiect Date la un şir
Pentru a înŃelege mai bine obiectul Date şi modul de lucru cu metodele lui, studiaŃi şi următorul
exemplu:
Cod:
var d = new Date()
document.write("Afiseaza data curenta a zilei: <br /> ")
document.write(d.getDate())
document.write(".")
document.write(d.getMonth() + 1)
document.write(".")
document.write(d.getFullYear())
</script>
Adaugat într-un document HTML, în secŃiunea BODY, acest script va afişa:

Afiseaza data curenta a zilei:
27.4.2009
2. Obiectul Math
Acest obiect include constante matematice şi funcŃii.

Nu este nevoie să fie creat (instanŃat) un obiect Math înainte de a fi folosit.
Dacă, de exemplu dorim să obŃinem un număr aleator între 0 şi 1, scriem comanda:
nr_aleator = Math.random
http://kidu-kid.com
- ProprietăŃile obiectului Math (sunt o listă de constante matematice. AtenŃie! se scriu cu literă mare):
E - Returnează constanta lui Euler (2.7182.......)
LN2 - Returnează logaritm natural din 2
LN10 - Returnează logaritm natural din 10
LOG2E - Returnează logaritm în baza 2 din E
LOG10E - Returnează logaritm în baza10 din E
PI - Returnează PI
SQRT1_2 - Returnează radical din 0.5
SQRT2 - Returnează radical din 2
- Metodele obiectului Math:

abs(x) - Returnează valoarea absolută din x
acos(x) - Returnează arccosinus din x
asin(x) - Returnează arcsinus din x
atan(x) - Returnează arctangenta din x
atan2(y,x) - Returnează unghiul dintre axa şi un punct (x,y)
ceil(x) - Returnează cel mai apropiat întreg mai mare sau egal cu x
cos(x) - Returnează cosinus din x
exp(x) - Returnează valoarea lui E la puterea x
floor(x) - Returnează cel mai apropiat întreg mai mic sau egal cu x
log(x) - Returnează log natural din x
max(x,y) - Returnează maximul dintre x si y
min(x,y) - Returnează minimul dintre x si y
pow(x,y) - Returnează valoare a lui x la puterea y
random() - Returnează un număr aleator între 0 şi 1
round(x) - Rotunjeste pe x la cel mai apropiat întreg
sin(x) - Returnează sinus din x
sqrt(x) - Returnează radical din x
tan(x) - Returnează tangenta din x
Iata şi un exemplu practic, următorul script rotunjeste o valoare (aici 8.35) la cel mai apropiat întreg:
Cod:
document.write("8.35 rotunjit este: " + Math.round(8.35))
</script>
După ce este adăugat într-un document HTML, în secŃiunea BODY, acest script va afişa:
8.35 rotunjit este: 8
3. Obiectul Global
Acest obiect grupează proprietăŃile şi metodele de nivel cel mai înalt, fără un obiect părinte, cum sunt
funcŃiile.
Obiectul Global are trei proprietăŃi:
Infinity - cuvant-cheie care reprezintă plus sau minus infinit

NaN - reprezintă un obiect null, care nu este egal cu nici un număr
undefined - Indică dacă o variabilă a fost sau nu definită
Metodele acestui obiect (care pot fi considerate şi funcŃii JavaScript) sunt:
escape() - Întoarce un obiect şir în care toate caracterele non alfa-numerice sunt
transformate în echivalentele lor numerice
eval() - Acceptă un şir de instrucŃiuni Java Script şi îl evaluează ca fiind cod sursă
isFinite() - determină dacă o variabilă are limite finite
isNaN() - determină dacă o variabilă este sau nu un număr.
Number() - Converteşte valoarea unui obiect în număr
parseFloat() - transformă un şir într-un număr de tip float (cu virgulă)
http://kidu-kid.com
parseInt() - transformă un şir într-un număr întreg
string() - Converteşte valoarea unui obiect în string (de tip şir)
unescape() - ia o valoare hexazecimală şi întoarce echivalentul său în ISOLatin-1 ASCII
Pentru a întelege mai bine, studiaŃi următorul exemplu. Aici este folosită de două ori metoda "eval()",
acesta transformă şi interpretează argumentul primit în cod JavaScript.
Cod:
function calculeaza(form) {
form.rezultat.value=eval(form.expresie.value)
}
eval("alert('Bine ati venit pe site!')")
</script>
<form>
<p>Introduceti o expresie matematica (adunare, scadere, inmultire, impartire)
, de exemplu (7*8 sau 3+8/2): </p>
<input type=text name="expresie" size='35' >
<input type=button name='calc' value="Calculare" onclick='calculeaza(this.for
m)'>
<br>
Rezultatul este:
<input type=text name="rezultat" size=18>
</form>
Acest cod afişează la început o fereastră Alert apoi în browser va fi afişat un formular în care
introduceŃi formula matematică şi se afişează rezultatul.
După apăsarea butonului "Calculare", prin "onclick" este accestată funcŃia "calculeaza()". Scriptul
JavaScript din HEAD, transferă în campul cu numele "rezultat", din FORM, valoarea obŃinută prin
evaluarea expresiei adăugate în câmpul "expresie", calcularea expresiei fiind posibilă datorită folosirii
metodei "eval()".
http://kidu-kid.com
Ierarhia Java Script
JavaScript organizează toate elementele unei pagini web într-o ierarhie. Toate elementele sunt văzute
ca obiecte şi fiecare obiect are anumite proprietăŃi şi metode.
Cu JavaScript putem manipula uşor obiectele. Pentru aceasta este importantă înŃelegerea ierarhiei
obiectelor HTML.
JavaScript înŃelege fereastra browser-ului ca pe un obiect window, acesta conŃine anumite elemente,
cum ar fi de exemplu bara de stare (status bar)
În fereastra browser-ului putem încărca (afişa) un document HTML (sau şi de alt tip, dar aici ne
referim la HTML). Această pagină din interiorul navigatorului este un obiect document.
1. Obiectul document
Acesta este unul din obiectele cele mai importante în JavaScript, este folosit foarte des.
Obiectul Window lasă conŃinutul unui document web în grija obiectului Document, acesta este
responsabil de conŃinutul afişat pe o pagina şi se poate lucra cu el pentru afişarea de pagini HTML
dinamice.
Obiectul document conŃine mai multe proprietăŃi, cum ar fi culoarea de fundal a paginii (bgcolor). De
reŃinut că toate obiectele HTML sunt proprietăŃi ale obiectului document, şi la rândul lor acestea sunt
obiecte. Un obiect HTML este de exemplu un formular sau un link.
Pentru a desemna proprietatea curentă pe care dorim să o folosim, adăugăm cuvantul this urmat de
caracterul punct (.) şi numele proprietăŃii, după cum vedeŃi în următoarea sintaxă:
Cod:
this.nume_proprietate
Astfel această expresie se adresează proprietăŃii "nume_proprietate" din obiectul curent.
Obiectul document are următoarele proprietăŃi:
alinkColor - culoarea unei legături active

all - tabloul tuturor etichetelor HTML din document
anchors - tabloul de obiecte "Anchor", în ordinea specificată în sursă
applets - tabloul de obiecte "Applet"
bgcolor - culoarea de fundal a documentului
classes - tabloul claselor paginilor cu stiluri
cookie - fişier cookie asociat cu documentul
domain - domeniu al documentului
embeds - tablou de obiecte înglobate
fgcolor - culoarea textului în document
forms - tablou de obiecte "Form" (formular)
formName - specifică instanŃa "Form" care este accesată prin folosirea valorii atributului "name" în
eticheta <form>
height - specifică înălŃimea documentului în pixeli
ids - tabloul identificatorilor paginii cu stiluri
images - tablou de obiecte "Image"
lastModified - data când a fost modificat ultima oara documentul
layers - tablou de obiecte "Layer"
linkColor - culoarea legăturilor
links - tablou de obiecte "Link", ce corespund tuturor link-urilor HREF din document, în ordinea
specificată în sursă
plugins - tablou de obiecte înglobate
referrer - adresa URL (externă) a documentului la care a fost legat documentul curent
tags - tabloul etichetelor paginii cu stiluri
title - titlul documentului
http://kidu-kid.com
URL - adresa URL a documentului curent
vlinkColor - culoarea legăturilor vizitate
widthb - specifică lăŃimea documentului în pixeli
lastModifiedb - URL-ul documentului
Obiectul document are următoarele metode:
captureEvents() - capturează evenimentele care vor fi tratate de document

close() - închide fluxul datelor de ieşire spre document
contextual() - permite să aplicăm în mod selectiv un stil unui element HTML care apare într-un
anumit context specific
getSelection() - întoarce textul selectat
handleEvent() - apelează handlerul pentru evenimentul specificat
open() - deschide fluxul datelor de ieşire spre document
releaseEvents() - eliberează evenimentele capturate de document
routeEvent() - dirijează evenimentele capturate spre alte obiecte
write() - adaugă text în document
writeln() - adaugă text şi un caracter linie nouă în document (textul pe linia lui)
În următorul exemplu puteŃi vedea cum au fost folosite proprietăŃile obiectului document pentru
stabilirea culorii de fundal, a textului, link-urilor şi titlul unei pagini web:
Cod:

</script>
Acest script setează culoarea de fundal a paginii "#eaeafe" (un albastru deschis), culoarea textului
roşu, a legăturilor verde şi titlul "LecŃie Java Script". Pentru a înŃelege mai bine lucrul cu obiectul
document şi cum se lucrează cu ierarhia obiectelor, studiaŃi şi următorul exemplu:
Cod:
<html>
<head>

</script>
</head>
<body>
<form name="formular">
Name: <input type="text" name="numele" value=""><br>
e-Mail: <input type="text" name="email" value=""><br><br>
<input type="button" value="Apasa" name="Buton" onClick="alert('Salut
' +afisare())">
http://kidu-kid.com
</form>
</body>
</html>
Acest cod va afişa în pagină următorul formular:
Name:
e-Mail:
După ce scrieŃi în câmpul "Name" un nume şi apăsaŃi butonul "Apasă" va apare o fereastră Alert cu
mesajul "Salut "nume.
Ierarhia obiectelor din pagina afişată de acest exemplu este următoarea:
document (pagina HTML) -> Forms[0] (intregul formular) -> {Element[0] (primul camp din
formular), Element[1] (al doilea camp din formular),Element[2] (butonul din formular)}
Dacă de exemplu doriŃi să aflaŃi ce se introduce în primul element din formular, trebuie să vă gandiŃi
cum să accesaŃi acest obiect.
Pornim din vârful ierarhiei "document", urmărim calea din formular "forms[0]" până la obiectul numit
"elements[0]" (se adaugă toate numele obiectului pe măsură ce le depăşim). Astfel putem accesa
primul element prin :
document.forms[0].elements[0]
Pentru a afla ce text a fost introdus, apelăm valoarea acelui element. Un element "text" are
proprietatea "value". Acesta arată textul introdus în elementul "text". Acum putem afla valoarea cu
ajutorul următorului cod:
name= document.forms[0].elements[0].value;
Valoarea este stocată în variabila "name", pe care o putem folosi în script.

Astfel, putem crea o fereastră cu ajutorul liniei de cod "alert("Salut! " + name)", unde "name" va fi
valoarea variabilei "name" care reprezintă textul introdus în primul element din formular.
Dacă aveŃi formulare de dimensiuni mari, poate deveni dificilă apelarea obiectelor după ordinea lor,
prin numere între paranteze pătrate. Dacă am avea trei formulare şi vrem să apelăm al
cincisprezecelea element (câmp) din al treilea formular, ar trebui să scriem
"document.forms[2].elements[14]". Pentru a facilita astfel de apelări, se pot da nume unice diferitelor
obiecte, folosind atributul "name", după cum puteŃi vedea în exemplu următor:
<form name="formular">
Nume: <input type="text" name="nume_element" value="">
Astfel "forms[0]" este de asemenea "formular" şi în loc de "elements[0]" puteŃi utiliza

"nume_element" (specificat cu atributul "name" în eticheta <input>).
Prin urmare, în loc de a scrie
"name= document.forms[0].elements[0].value;"
se poate scrie:
"name= document.formular.nume_element.value;"
http://kidu-kid.com
Modelul Obiectului Document DOM
DOM defineşte o structură logică şi standardizată a documentelor, o ordine prin care putem parcurge
şi edita elemente şi conŃinut din documente HTML sau XML.
Structura DOM este o ierarhie de obiecte, compatibilă cu a limbajului Java Script sau cu a oricărui
limbaj bazat pe obiecte.
În schema următoare puteŃi vedea modelul şi ierarhia obiectelor:
În ierarhia prezentată mai sus observaŃi că obiectele sunt structurate pe 3 nivele principale.
Obiectul "window" este considerat pe cel mai înalt nivel, urmează apoi obiectele de pe nivelul I, nivelul
II şi nivelul III.
Obiectul din nivelul 1, de exemplu "document" conŃine obiectele din nivelul 2 (de ex. forms[]) care la
http://kidu-kid.com
rândul lor pot conŃine alte obiecte, de nivel 3 (de ex. "Buttons"). Astfel, în Java
Script, conŃinerea este principiul conform căruia un obiect conŃine alt obiect. De exemplu relaŃia
dintre obiectul "Form" şi obiectul "Button" nu este una dintre clasă şi subclasă, ci una între container şi
conŃinut. Prin urmare, un obiect nu poate moşteni proprietăŃile şi metodele altui obiect.
1. Obiecte pe partea de client
Elementele principale legate de lucrul pe partea de client din JavaScript se axează pe ceea ce putem
face cu paginile HTML, mai exact - ceea ce poate face vizitatorul cu scriptul Javascript încărcat în
pagina HTML.
Primul set de obiecte are o legătură cu navigatorul şi cu etichetele HTML din acesta.
PuteŃi accesa sau transfera conŃinutul unei etichete HTML (de exemplu dintr-un <div> ... </div>)
utilizând id-ul acesteia, folosind expresia:
Cod:
document.getElementById("id").childNodes[0].nodeValue = nume_variabila
sau
Cod:
document.getElementById("id").innerHTML = "continut"
"id" este valoarea atributului "id" din eticheta HTML respectivă, "nume_variabilă" este o variabilă a
cărei valoare este şirul reprezentat de conŃinutul etichetei iar "conŃinut" este, la fel, conŃinutul din
eticheta HTML.
Majoritatea obiectelor JavaScript din nivelul 2 sunt văzute ca obiecte ale etichetelor HTML, după cum
puteŃi observa în lista de mai jos, în care sunt prezentate obiectele JavaScript şi etichetele HTML
corespunzătoare:
Button - <input type="button">
Checkbox - <input type="checkbox">
Hidden - <input type="hidden">
Fileupload - <input type="file">
Password - <input type="password">
Radio - <input type="radio">
Reset - <input type="reset">
Select - <select>
Frame - <frame>
Document - <body>
Layer - <layer> sau <ilayer>
Link - <a href="">
Image - <img>
Area - <map>
Anchor - <a name="">
Applet - <applet>
Plugin - <embed>
Form - <form>
Submit - <input type="submit">
Text - <input type="text">
Textarea - <textarea>
Option - <option>
2. Exemplu script
Următorul script este un exemplu practic de folosire a ierarhiei DOM din JavaScript şi elementele
HTML
Cu ajutorul acestui script puteŃi prelua datele (textul) din interiorul unui "<div> ... </div>" pentru a le
adăuga într-o casetă <textarea>, astfel aceste date pot fi uşor trimise la un script PHP.
http://kidu-kid.com
Cod:
<html>
<head>
<title>Script JS</title>

</script>
</head>
<body>
<div id= "div_id">Aici este textul din interiorul Div-ului</div>
<form action="fisier.php" method="post" name="formular">
<textarea cols="30" rows="5" name="text" id="textul"></textarea> <br>
<input type="button" value="Adauga" onclick="CitesteDiv();" />
<input type="submit" value="Trimite" />
</form>
</body>
</html>
Am definit funcŃia "CitesteDiv()" care va fi apelată la apăsarea butonului "Adaugă". În interiorul

acestei funcŃii avem variabila "valDiv" care (prin
codul"document.getElementById("div_id").childNodes[0].nodeValue;") preia valoarea din elementul
HTML "<div>" cu id-ul "div_id", apoi codul ("document.formular.text.value") defineşte valoarea
casetei (cu atributul name="text") din formular egală cu valoarea variabilei "valDiv".
Acest cod va afişa în pagină următorul rezultat:
Aici este textul din interiorul Div-ului
Trimite
Dacă apăsaŃi butonul "Adaugă", textul din interiorul etichetei <div> ... </div> va fi introdus în
formular care apoi prin apăsarea butonului "Trimite" va fi trimis la un script PHP (aici "fisier.php').
Exemplu 2
Iată un alt exemplu, cu o acŃiune inversă celui de sus. Adică, textul introdus într-un câmp textarea,
după apăsarea unui buton va fi inclus în pagină în cadrul unei etichete HTML <div>, fără ca pagina să
fie reîncărcată.
ReŃineŃi, această acŃiune este pe partea de client, vizibilă doar de utilizatorul actual, nu modifică
pagina originală de pe server şi după închiderea navigatorului textul introdus dispare.
http://kidu-kid.com
Cod:
<html>
<head>
<title>Script JS</title>

</script>
</head>
<body>
<div id="div_id2">Aici va apare textul din formular</div><br>
<form name="formular2">
<textarea cols="30" rows="5" name="text2" id="textul2"></textarea> <br>
<input type="button" value="Afiseaza" onclick="ScrieDiv();" />
</form>
</body>
</html>
Am definit funcŃia "ScrieDiv()" care va fi apelată la apăsarea butonului "Afişează". În interiorul acestei
funcŃii avem variabila "valText" care (prin codul "document.formular2.text2.value") preia şirul adăugat
în câmpul "text2" din formular, apoi, prin
comanda"document.getElementById("div_id2").innerHTML" transferă şi afişează şirul în cadrul
etichetei <div>, înlocuindu-l pe cel existent.
Acest cod va afişa în pagină următorul rezultat:
Aici va apare textul din formular
AdăugaŃi orice text în câmpul din formular apoi apăsaŃi butonul "Afişează", veŃi vedea rezultatul.
http://kidu-kid.com
Obiecte de nivel 1
În această lecŃie sunt prezentate obiectele JavaScript de nivel 1: obiectul "navigator (browser)",
obiectul "History" şi obiectul "Location"
1. Obiectul Navigator
Obiectul Navigator reprezintă programul, aplicaŃia browser folosită pentru vizualizarea rezultatelor.
Cu acest obiect putem găsi informaŃii despre denumirea şi versiunea browser-ului, precum şi alte
informaŃii care pot fi folosite în practică.
Obiectul Navigator are la rândul său două obiecte copil : "Plugin" şi "Mimetype".
ProprietăŃi ale obiectului "navigator" sunt următoarele:
appCodeName - reprezintă numele de cod al browserului
appName - reprezintă numele oficial al browserului
appVersion - versiunea browserului
language - limbajul browserului
mimeTypes - face referire la un tablou de obiecte "Mimetype" care conŃine toate tipurile MIME pe
care le acceptă browserul
platform - un şir care reprezintă platformă pe care rulează browserul
plugins - face referire la un tablou de obiecte "Plugin" care conŃine toate modulele plugin instalate
pe browser
userAgent - şir care reprezintă antetul utilizator-agent
Metode ale obiectului "navigator" sunt următoarele:

javaEnabled() - funcŃie care testează dacă browserul cunoaşte sau nu limbajul JAVA
plugins.refresh() - caută orice module plugin nou instalate
preference() - permite citirea şi stabilirea diverselor preferinŃe ale utilizatorului în browser
taintEnabled() - testează dacă este activată contaminarea datelor
Următorul script afişează proprietăŃile şi metodele navigatorului (browser-ului) folosit:
Cod:
<body>
document.write("Nume cod :".bold()+navigator.appCodeName+"<br>");
document.write("Nume browser :".bold()+navigator.appName+"<br>");
document.write("versiune :".bold()+navigator.appVersion+"<br>");
document.write("limbaj :".bold()+navigator.language+"<br>");
document.write("MIME Type :".bold()+navigator.mimeTypes+"<br>");
document.write("Platforma :".bold()+navigator.platform+"<br>");
document.write("Plugin-uri :".bold()+navigator.plugins+"<br>");
document.write("Agent :".bold()+navigator.userAgent+"<br>");
document.close();
</script>
</body>
În pagină acesta afişează următorul rezultat:
Citat:
Nume cod :Mozilla

Nume browser :Opera
versiune :9.64 (Windows NT 5.1; U; en)
http://kidu-kid.com
limbaj :en
MIME Type :[object MimeTypes]
Platforma :Win32
Plugin-uri :[object PluginArray]
Agent :Opera/9.64 (Windows NT 5.1; U; en) Presto/2.1.1
2. Obiectul History
Browserele au o caracteristică numită "History" care permite urmărirea locaŃiilor pe care le-aŃi vizitat.
Acest obiect conŃine un tablou (Array) cu paginile vizitate de client, în cadrul unei ferestre, un istoric al
paginilor vizitate.
Obiectul History permite navigarea înapoi în lista istoric la paginile care au mai fost vizitate în cadrul
aceleaşi ferestre.
ProprietăŃile obiectului "history" sunt următoarele"
current - face referire la adresa URL curentă din lista istoric
length - întoarce numărul de intrări din lista istoric
next - face referire la următoarea adresă URL din lista istoric
previous - face referire la adresa URL anterioară din lista istoric
Metodele obiectului "history" sunt următoarele"

back() - încarcă ultima adresă URL din lista istoric
forward() - încarcă următoarea adresă URL din lista istoric
go(x) - încarcă o adresă URL, echivalentă cu un salt la numărul "x" (pozitiv sau negativ) din lista
istoric
Dacă dorim întoarcerea înapoi cu 3 pagini în lista istoric, putem folosi o funcŃie şi obiectul "History" ca
în exemplul următor:
Cod:

</script>
Unde "înapoi3" este numele funcŃiei şi (-3) reprezintă numărul de pagini la care se face saltul, pornind
de la pagina curentă, negativ face saltul înapoi, iar dacă numărul dintre paranteze este pozitiv face
saltul înainte în lista istoric.
3. Obiectul Location
Acest obiect conŃine date despre originea unei pagini web, stochează informaŃii despre o adresă URL
pentru o fereastră specifică.
ProprietăŃile obiectului "location" sunt următoarele:
hash - reprezintă un nume de ancoră în adresa URL, care începe cu caracterul diez (#)
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
http://kidu-kid.com
protocol - reprezintă partea de protocol a adresei URL
search - partea de căutare a adresei URL, inclusiv caracterul "?"
Metodele obiectului "location" sunt următoarele:

reload() - reîncarcă adresa URL curentă în fereastra de browser
replace() - încarcă noua pagină transferată în browserul curent
Dacă doriŃi să regăsiŃi porŃiunea de protocol a adresei URL curente şi să o evaluaŃi, puteŃi folosi
scriptul din următorul exemplu :
Cod:

</script>
Pentru o mai bună învăŃare, încercaŃi să creaŃi singuri şi alte exemple folosind şi alte proprietăŃi şi
metode ale obiectelor prezentate în lecŃie.
http://kidu-kid.com
Obiecte de nivel 2
În această lecŃie sunt prezentate subobiecte ale obiectului "Navigator" şi "Document", care în ierarhia
generală pot fi considerate obiecte de nivel doi.
1. Obiectul Mimetype
Numele acestui obiect vine de la Multipurpose Internet Mail Extensions (extensii aduse serviciului de
poştă electronică) şi este un subobiect al obiectului "Navigator".
Mimetype permite accesarea informaŃiilor despre tipurile MIME pe care le recunosc modulele plugin
ale browserului.
Acesta, ca şi obiectul "Plugin" nu sunt recunoscute de Internet Explorer.
ProprietăŃi ale obiectului "Mimetype" sunt următoarele :
description - conŃine descrierea obiectului "Mimetype"
enabledPlugin - conŃine modulul plugin pentru un obiect "Mimetype" specific
suffixes - conŃine extensia de fişier pentru "Mimetype"
type - conŃine reprezentarea de tip şir a obiectului "Mimetype"
2. Obiectul Plugin
La fel ca şi "Mimetype", nici obiectul Plugin nu este recunoscut de Internet Explorer.

Acest obiect este creat prin instalarea de module plugin pentru browser şi conŃine un tablou de
elemente şi tipuri MIME tratate de fiecare modul plugin instalat.
Obiectul "Plugin" are o singură metodă legată direct de el : metoda "plugins.refresh()", care
aparŃine de obiectul "navigator". Această metodă permite reconstruirea tabloului de module plugin.
ProprietăŃile obiectului "Plugin" sunt următoarele :
description - face referire la o descriere a modulului plugin
filename - face referire la numele fisierului unui program plugin
length - face referire la numărul de tipuri MIME conŃinute în tablou
name - face referire la numele modulului plugin
3. Obiectul Anchor
Acest obiect este un text sau o imagine în pagina HTML care poate fi Ńinta unei legături hipertext.
"Anchor" este un obiect JavaScript foarte puŃin important şi folosit rar, totuşi e bine să-l cunoaşteŃi
ProprietăŃile obiectului "Anchor" sunt următoarele :
name - nume care oferă acces la ancora de la o legătură
text - textul care apare între etichetele <a> şi </a>
x - coordonata x a ancorei
y - coordonata y a ancorei
4. Obiectul Area
Obiectul Area permite să definim o suprafaŃă a unei imagini ca fiind o hartă de imagine. Atributul
"href" al unui obiect "<area>" este încărcat într-o fereastră Ńintă atunci când vizitatorul execută click
pe o locaŃie specificată.
Acest obiect are o singură metodă:
handleEvent() apelează handlerul de evenimente asociat acestui eveniment
http://kidu-kid.com
ProprietăŃile obiectului "Area" sunt următoarele :
hash - porŃiunea de adresă URL care este ancora, inclusiv semnul diez ( # )
host - numele calculatorului gazdă (adresa IP) şi portul specificat în adresa URL
hostname - numele calculatorului gazdă specificat în adresa URL
href - întreaga adresă URL
pathname - calea fişierului specificat în adresa URL, începând cu simbolul ( / )
port - portul specificat în adresa URL
protocol - protocolul specificat în adresa URL, inclusiv caracterul doua puncte ( : )
search - partea de căutare a adresei URL, inclusiv caracterul iniŃial semnul intrebării (? )
target - numele ferestrei Ńintă în care ar trebui afişată adresa URL
text - textul care apare între etichetele <area> şi </area>
x - coordonata x a suprafeŃei
y - coordonata y a suprafeŃei
5. Obiectul Applet
Obiectul Applet reprezintă echivalentul JavaScript al etichetei HTML <applet>.

Acest obiect adresează un applet Java. Aceste obiecte JavaScript nu au metode proprii, dar în practică
putem folosi JavaScript ca să accesăm metodele unui anumit applet scris în limbajul Java.
ProprietăŃile obiectului "Applet" sunt toate câmpurile publice ale respectivului applet Java, iar metodele
sunt toate metodele publice ale acestuia.
6. Obiectul Layer
Şi acesta este un obiect cu anumite particularităŃi, este recunoscut doar de browserele Netscape şi
permite limbajului JavaScript să acceseze straturile din interiorul documentului.
Utilizarea acestui obiect necesită cunoştinŃe DHTML.
ProprietăŃile obiectului "Layer" sunt următoarele :
above - specifică stratul de deasupra
background - face referire la imaginea de fundal a stratului
below - specifică stratul de dedesubt
bgColor - face referire la culoarea de fundal a stratului
clip.bottom - face referire la partea de jos a suprafeŃei decupate a stratului
clip.height - face referire la înălŃimea suprafeŃei decupate a stratului
clip.left - face referire la partea stângă a suprafeŃei decupate a stratului
clip.right - face referire la partea dreaptă a suprafeŃei decupate a stratului
clip.top - face referire la partea de sus a suprafeŃei decupate a stratului
clip.width - face referire la lăŃimea suprafeŃei decupate a stratului
document - face referire la obiectul "Document" care conŃine stratul
left - face referire la coordonata X a stratului
name - face referire la numele stratului
pageX - face referire la coordonata X, relativ la document
pageY - face referire la coordonata Y, relativ la document
parentLayer - face referire la stratul container
rsiblingAbove - face referire la stratul de deasupra în "zIndex"
siblingBelow - face referire la stratul de dedesubt în "zIndex"
src - face referire la adresa URL sursă pentru strat
top - face referire la coordonata Y a stratului
visibility - face referire la starea de vizibilitate a stratului
window - face referire la obiectul "Window" sau "Frame" care conŃine stratul
x - face referire la coordonata X a stratului
y - face referire la coordonata Y a stratului
zIndex - face referire la ordinea z-relativă a acestui strat în raport cu fraŃii lui
http://kidu-kid.com
Metodele obiectului "Layer" sunt următoarele :
captureEvent() - specifică tipul de evenimente care să fie capturate
handleEvent() - apelează handlerul pentru evenimentul specificat
load() - încarcă o nouă adresă URL
moveAbove() - deplasează stratul deasupra altui strat
moveBelow() - deplasează stratul sub alt strat
moveBy() - deplasează stratul într-o poziŃie specificată
moveTo() - deplasează colŃul din stânga sus al ferestrei la coordonatele specificate ale ecranului
moveToAbsolute() - modifică poziŃia stratului în pagină, conform coordonatelor specificate în
pixeli
releaseEvents() - stabileşte ca stratul să elibereze evenimentele capturate de tipul specificat
resizeBy() - redimensionează stratul cu valorile de înălŃime şi lăŃime specificate
resizeTo() - redimensionează stratul la valorile de înălŃime şi lăŃime specificate
7. Obiectul Link
Obiectul link permite lucrul cu legături (link-uri) în cadrul codului JavaScript. Deoarece un link face
referire la o altă pagină HTML sau la altă destinaŃie, este asemănător cu obiectul "Location" (care
conŃine aceleaşi informaŃii pentru pagina HTML curentă).
Acest obiect are o singură metodă:
handleEvent() apelează handlerul pentru evenimentul specificat.
ProprietăŃile obiectului "Link" sunt următoarele :

hash - reprezintă o denumire de ancoră în adresa URL pentru legătură, inclusiv caracterul diez ( #
)
host - reprezintă porŃiunea de calculator gazdă din adresa URL asociată cu o legătură
hostname - reprezintă porŃiunea de nume al calculatorului gazdă din adresa URL asociată cu o
legătură
href - reprezintă adresa URL completă asociată cu o legătură
pathname - reprezintă porŃiunea numelui de cale a legăturii URL
port - reprezintă porŃiunea de port a legăturii URL
protocol - specifică porŃiunea de protocol a legăturii URL
search - reprezintă porŃiunea de interogare a legăturii URL
target - reprezintă numele obiectului "Window" în care este afişată legătura
x - face referire la coordonata X a legăturii
y - face referire la coordonata Y a legăturii
text - textul folosit pentru crearea legăturii
http://kidu-kid.com
Obiecte de nivel 3 (prima parte)
Obiectele de nivelul 3 sunt subobiecte ale obiectului "Form".

La fel cum îmbricaŃi elementele HTML în interiorul etichetelor <form>, aceste obiecte sunt îmbricate în
interiorul obiectului "Form".
1. Obiectul Button
Java Script are trei obiecte buttons: Button, Submit şi Reset. Fiecare din ele are o reprezentare a
unei etichetei HTML.
Obiectul Button este un buton generic, la care, pentru a fi folosit pt. o anumită funcŃie, trebuie să îi
adăugăm linii de cod specifice, dar celelalte două:Submit (trimite datele la un script) şi Reset (şterge
datele noi completate în formular); au scopuri specifice. Totuşi, se poate să folosim un obiect "Button"
pentru a juca acelaşi rol ca şi obiectul "Submit" (apelând Form.submit()), sau ca obiect "Reset"
(apelând Form.reset()).
ProprietăŃile obiectului "Button" sunt următoarele :
form - returnează obiectul Form al cărui membru este butonul
name - returnează şirul specificat în atributul name al etichetei HTML <input>
type - returnează şirul specificat în atributul type al etichetei HTML <input>
value - returnează şirul care apare în reprezentarea grafică a unui buton, afişată în browser
Metode ale obiectului "Button" sunt următoarele :

blur() - dezactivează butonul
click() - apelează un eveniment click pentru butonul respectiv.
focus() - eveniment de activare a butonului
handle Event() - transferă un eveniment handlerului de eveniment corespunzător
2. Obiectul Checkbox
Acest obiect reprezintă caseta de validare HTML dintr-un "Form", care permite vizitatorului să specifice
o valoare "DA" sau "NU", ori "true" sau "false".
ProprietăŃile obiectului "Checkbox" sunt următoarele :
checked - returnează o valoare booleană care determină dacă este bifată caseta de validare
defaultChecked - returnează o valoare booleană care păstrează starea iniŃială a casetei de
validare. Este stabilită cu atributul "checked"
form - returnează obiectul Form al casetei de validare
name - returnează şirul specificat în atributul name al etichetei HTML <input>
type - returnează şirul specificat în atributul type al etichetei HTML <input>
value - returnează o valoare returnată când formularul este înaintat
Metode ale obiectului "Checkbox" sunt următoarele :

blur() - dezactivează caseta de validare
click() - apelează un eveniment click pentru caseta de validare respectivă.
focus() - eveniment de activare pentru caseta de validare
3. Obiectul FileUpload
http://kidu-kid.com
Acest obiect este echivalentul elementului folosit pentru încărcarea fişierelor.
Cu Java Script nu se poate face prea multe cu acest obiect decât făcând referire la proprietăŃile sale.
ProprietăŃile obiectului "FileUpload" sunt următoarele :
form - face referire la obiectul Form ce conŃine caseta FileUpload
name - conŃine şirul specificat în atributul name al casetei FileUpload
type - conŃine şirul specificat în atributul type al casetei FileUpload
value - conŃine şirul care specifică numele căii fişierului pt. upload
Metode ale obiectului "FileUpload" sunt următoarele :

blur() - dezactivează caseta FileUpload
focus() - activează caseta FileUpload
select() - selectează suprafaŃa de adăugare a datelor pentru caseta FileUpload.
4. Obiectul Hidden
Acest obiect se foloseşte pentru stocarea anumitor date care vor fi transferate unei prelucrări pe
server. Datele stocate în obiectul "hidden" sunt ascunse, nu apar vizibile în browser.
ProprietăŃile obiectului "Hidden" sunt următoarele :
form - face referire la formularul ce conŃine obiectul Hidden
name - conŃine numele obiectului Hidden
type - conŃine şirul specificat în atributul type al casetei Hidden
value - conŃine şirul specificat în atributul "value" al obiectului Hidden
5. Obiectul Password
Obiectul password este asemănător cu obiectul "text", diferenŃa fiind că toate caracterele introduse
în caseta "Password" sunt afişate cu "*" pentru a nu se vedea textul introdus.
ProprietăŃile obiectului "Password" sunt următoarele :
defaultValue - face referire la atributul "value" al casetei pt. parola din formularul HTML
form - face referire la obiectul Form ce conŃine caseta pt. parolă
name - conŃine şirul specificat în atributul name al pt. parolă
type - conŃine şirul specificat în atributul type al casetei pt. parolă
value - face referire la conŃinutul curent din caseta pt. parolă
Metode ale obiectului "Password" sunt următoarele :

blur() - dezactivează caseta pt. parolă
focus() - activează caseta pt. parolă
select() - selectează textul adăugat în caseta pt. parolă.
6. Obiectul Radio
Butoanele radio sunt controale dintr-un formular HTML care se anulează reciproc, astfel dacă este
selectat un buton radio, toate celelalte butoane din set sunt neselectate. Setul de butoane se defineşte
având aceaşi proprietate "name" pentru toate butoanele radio.
ProprietăŃile obiectului "Radio" sunt următoarele :
checked - returnează o valoare care determină dacă este bifat obiectul radio
defaultChecked - returnează o valoare care păstrează starea iniŃială a obiectului Radio, care se
stabileşte cu atributul "checked" al etichetei <input> respective
form - returnează obiectul Form ce conŃine obiectul Radio
http://kidu-kid.com
name - conŃine şirul specificat în atributul name al etichetei <input>
type - conŃine şirul specificat în atributul type al etichetei <input>
value - face referire la atributul value al etichetei <input>
Metode ale obiectului "Radio" sunt următoarele :

blur() - dezactivează obiectul Radio
click() - apelează un eveniment "click" pt. obiectul Radio focus() - activează un buton radio
Obiecte de nivel 3 (part. 2) si nivel 4
În această lecŃie se continuă prezentarea celorlalte obiecte de nivel 3 şi obiectul de nivel 4, "Option".
1. Obiectul Reset
Acest obiect este asociat butonului "reset" dintr-un formular HTML, când butonul este acŃionat şterge
toate datele noi introduse în formular, stabilind câmpurile la valoarea lor iniŃială.
ProprietăŃile obiectului "Reset" sunt următoarele :
form - returnează obiectul Form ce conŃine butonul
name - conŃine şirul specificat în atributul name al etichetei <input> corespunzătoare butonului
type - conŃine şirul specificat în atributul type al etichetei <input>
value - returnează şirul adăugat în atributul value din eticheta <input> a butonului
Metode ale obiectului "Reset" sunt următoarele :

click() - apelează un eveniment "click" pt. butonul respectiv
focus() - activează butonul
2. Obiectul Submit
Acest obiect este asociat butonului "submit" dintr-un formular HTML, când butonul este acŃionat
trimite datele din formular, spre calea specificată în atributul "action" din eticheta <form>, pentru a fi
http://kidu-kid.com
procesate (de exemplu, la un script PHP).
ProprietăŃile obiectului "Submit" sunt următoarele :
form - returnează datele din întreg formularul ce conŃine butonul "submit"
name - returnează şirul specificat în atributul name al etichetei <input> corespunzătoare butonului
type - returnează şirul specificat în atributul type din eticheta <input> a butonului "submit"
value - returnează şirul adăugat în atributul value din eticheta <input> a butonului
Metode ale obiectului "Submit" sunt următoarele :

click() - apelează un eveniment "click" pt. butonul respectiv
focus() - activează butonul
handle Event() - apelează handlerul pt. evenimentul specificat
3. Obiectul Select
Acest obiect face referire la caseta cu lista de selectare şi lista derulantă dintr-un formular HTML,
ambele permit utilizatorului selectarea unor valori dintr-o listă predefinită. Dintr-o listă derulantă se
poate selecta numai o singură valoare iar dintr-o casetă cu lista de selectare se pot selecta mai multe
valori.
Obiectul select poate apare ca listă derulantă (în mod iniŃial) sau ca listă de selectare dacă se
specifică proprietatea "multiple" ca adevărată (true).
ProprietăŃile obiectului "Select" sunt următoarele :
form - returnează obiectul Form ce conŃine lista de selectare
length - returnează numărul de opŃiuni din lista de selectare
name - returnează şirul specificat în atributul name al etichetei HTML corespunzătoare
type - returnează şirul specificat în atributul type al etichetei HTML (pentru instanŃele select ce
conŃin atributul "multiple" returnează "select-multiple", iar pentru cele fără acest atribut returnează
"select-one")
options - returnează un tablou ce conŃine toate elementele din caseta de selectare. Elementele sunt
definite cu eticheta HTML <options>. Această proprietate are două subproprietăŃi: "length" şi
"selectedIndex"
selectedIndex - returnează un număr care specifică indicele opŃiunii selectate din caseta de
selectare
Metode ale obiectului "Select" sunt următoarele :

blur() - dezactivează caseta de selectare
click() - apelează un eveniment "click" pt. caseta de selectare
handleEvent() - transferă un eveniment handlerului de eveniment corespunzător
4. Obiectul Text
Acest obiect este reprezentarea casetei de tip "text" dintr-un formular HTML.
Obiectul text serveşte ca unealtă de capturare a datelor dintr-o casetă de tip "text".
ProprietăŃile obiectului "Text" sunt următoarele :
defaultValue - returnează valoarea casetei de text, specificate de atributul value.
form - returnează obiectul Form ce conŃine caseta de text
type - returnează şirul specificat în atributul type al etichetei HTML
value - returnează valoarea afişată în caseta de text
Metode ale obiectului "Text" sunt următoarele :

blur() - dezactivează caseta de text
focus() - activează caseta de tip text
http://kidu-kid.com
select() - selectează textul din caseta de text
5. Obiectul Textarea
Asemănător cu obiectul "Text", obiectul Textarea este reprezentarea casetei de tip "textarea" dintr-
un formular HTML. Această casetă permite adăugarea mai multor linii de text în acelaşi câmp (casetă).
ProprietăŃile obiectului "Textarea" sunt următoarele :
defaultValue - returnează valoarea zonei de text, specificate între etichetele <textarea>
form - returnează obiectul Form ce conŃine caseta textarea
type - returnează şirul specificat în atributul type al etichetei HTML
value - returnează valoarea afişată în caseta textarea
Metode ale obiectului "Textarea" sunt următoarele :

blur() - dezactivează zona de text
focus() - activează zona de text
select() - selectează textul din câmpul de text
6. Obiectul Option (nivel 4)
Acest obiect este singurul obiect de nivel 4, acesta face referire la elementele <option> definite între
etichetele <select>.
Obiectul option este un subobiect a obiectului "Select".
ProprietăŃile obiectului "Option" sunt următoarele :
defaultSelected - face referire la opŃiunea care este selectată în mod prestabilit în caseta de
selectare
index - face referire la locaŃia indexată a unui element în tabloul "Select.options" (începe cu 0)
selected - face referire la valoarea selectată a casetei de selectare
text - face referire la textul pentru opŃiune
value - face referire la valoarea care este returnată când este selectată opŃiunea
http://kidu-kid.com
Evenimente JavaScript
Evenimentele sunt elemente foarte importante în programarea JavaScript. Acestea sunt acŃiuni
provocate de cele mai multe ori de vizitatorul paginii.
Dacă vizitatorul apasă un buton din pagină se provoacă evenimentul "Click". Dacă mouse-ul este
deasupra unui link, se declanşează un eveniment "MouseOver".
JavaScript poate reacŃiona la unele evenimente. Aceasta se poate realiza cu ajutorul "event-
handlers" (manageri de evenimente sau gestionar de evenimente).
Handlerele de evenimente se adaugă ca atribute ale etichetelor HTML.
De exemplu, dacă dorim să apelăm o funcŃie "nume_funcŃie()" de fiecare dată când s-a modificat un
anumit obiect Text, procedăm astfel: atribuim funcŃia "nume_funcŃie()" handlerului de eveniment
"onChange" al obiectului Text respectiv, ca în exemplul de mai jos:
Cod:
<input type="text" size="25" name="nume" onChange="nume_functie(this)">
- "onChange" este atribut al etichetei <input>, a cărui valoare, între ghilimele, este funcŃia
"nume_funcŃie()". În locul funcŃiei dintre ghilimele putem să scriem direct tot codul din funcŃie,
separând prin caracterul ; comenzile JavaScript (acest lucru este nerecomandat în cazul unui cod
mare).
1. Evenimentele JavaScript
În continuare este prezentată o listă cu evenimentele care pot fi folosite în programarea JavaScript:
onClick - Se execută la apăsarea unui click pe un obiect.(document, link, buton, checkbox, buton
radio, buton reset sau submit)
onDblClick - Execută acŃiunea la efectuarea a două clickuri unul după altul
onMouseOver - AcŃionează când se poziŃionează mouse-ul deasupra unui link sau unei imagini
onMouseOut - AcŃionează când se mută mouse-ul de pe un hiperlink sau o imagine
onMouseMove - AcŃionează când se mişcă mouse-ul
onMouseDown - AcŃionează când Ńinem apăsat unul din butoanele mouse-ului, pe un document,
buton sau link
onMouseUp - AcŃiunea se execută atunci când este eliberat degetul de pe unul din butoanele mouse-
ului
onFocus - AcŃiunea apare când este activat un obiect câmp: caseta password, câmp text, bloc de
text, câmp FileUpload dintr-un formular HTML.
onChange - AcŃiunea apare când se modifică conŃinutul unui câmp dintr-un formular HTML (o parolă,
text, bloc de text, sau FileUpload) şi când acesta pierde focalizarea
onBlur - Este inversul lui "onFocus()", este declanşat atunci când un obiect nu mai este activ, prin
trecerea la o alta resursă
onLoad - AcŃionează când browserul a terminat de încărcat un document, imagine sau toate Frame-
urile dintr-un <FRAMESET>
onUnload - AcŃiunea apare când se iese dintr-un document şi se încarcă un altul.
onKeydown - AcŃiunea apare când se apasă o tastă
onKeyUp - AcŃiunea apare după ce am terminat de apăsat pe o tastă
onKeyPress - Apare la apăsarea unei taste (precede "KeyDown")
onSubmit - AcŃiunea apare la înaintarea (trimiterea) unui formular
onReset - AcŃiunea apare la reiniŃializarea unui formular
onSelect - AcŃiunea apare când utilizatorul selectează text dintr-un obiect Text sau Textarea.
onAbort - AcŃiunea se execută în momentul în care se renunŃă la încărcarea unei imagini, ferestre
onError - AcŃiunea apare când acŃiunea de încărcare a unei imagini sau document eşuează.
http://kidu-kid.com
onMove - AcŃiunea se declanşează când se comandă deplasarea ferestrei sau cadrului
onResize - AcŃiunea se declanşează atunci când se comandă redimensionarea ferestrei sau cadrului
În continuare sunt prezentate obiectele împreună cu evenimentele pe care le pot folosi:

Evenimente ale ferestrelor
- onload
- onunloavd - onresize: (în Netscape)
- onmove
- onabort
- onerror
- onfocus
- onblur
Evenimente de mouse:
- onmousedown
- onmouseup
- onmousemove
- onmouseover
- onmouseout
- ondblclick
- onclick
Evenimente ale formularelor şi elementelor acestora:
- onsubmit
- onreset
- onchange
- onselect
- onclick
- onblur
- onfocus
Evenimente ale tastelor
- onkeydown
- onkeyup
- onkeypress
2. Exemple cu evenimentele JavaScript
Pentru a înŃelege mai bine modul de folosire a evenimentelor, studiaŃi cu atenŃie exemplele de mai jos.
1. - Exemplu "onClick"
Dacă dorim execuŃia unei anumite acŃiuni la apăsarea unui click de mouse, folosim "onClick".
Cod:
<form>
<input type="button" value="Apasa" onClick="alert('Salut')" />
</form>
Acest exemplu deschide o fereastră alert când este apăsat butonul "Apasă".
2. - Exemplu "onMouseOut - onClick"
http://kidu-kid.com
Cod:
<html>
<head>
function setfocus() {
document.form2.camp.select()
}
document.write("Priveste bara status, de jos, cand pozitionezi mouse-
ul pe link!")
</script>
</head>
<body>
<br>
<a href="http://www.tutoriale.far-php.ro"
OnMouseOver="window.status='Bine ati venit!'; return true;"
OnMouseOut="alert('Fereastra deschisa cu onMouseOut')">
Apasa aici pentru a vizita pagina!
</a>
<form name="form2">
<input type="text" name="camp" size="30" value="orice text">
<input type="button" value="Selecteaza" onclick="setfocus()">
</form>
</body>
</html>
Când se poziŃionează mouse-ul pe legătura "Apasă aici pentru a vizita pagina!", în bara de status va
apare mesajul "Bine aŃi venit!" (în unele versiuni Mozilla nu funcŃionează acŃiunea onMouseOver din
acest exemplu, va afişa adresa link-ului).
După ce mutaŃi mouse-ul de pe link, se va deschide (prin evenimentul "onMouseOut") o fereastră
Alert.
Când apăsaŃi butonul "Selectează", va fi selectat textul din câmpul de text.
3. - Exemplu "onKeyUp"
Acest script foloseşte evenimentul "onKeyUp" pentru a muta cursorul în alt câmp după ce a fost
tastat ultimul caracter permis în casetă.
Cod:
<html>
<head>

</script>
</head>
<body>
- Cursorul se muta automat in urmatoarea caseta atunci cand s-
http://kidu-kid.com
a completat tot campul
precedent (cand se ajunge la lungimea stabilita a campului, aici 4 caractere)
<br>
<form name="form3">
<input size="4" tabindex="1" name="field" maxlength="4" onkeyup="urmatorul(
this,this.value)">
<input size="4" tabindex="2" maxlength="4" onkeyup="urmatorul(this,this.val
ue)">
<input size="4" tabindex="4" maxlength="4" onkeyup="urmatorul(this,this.val
ue)">
</form>
</body>
</html>
FuncŃia "următorul(elment,text)", are două argumente: "element" (care se referă la caseta "input") şi
"text" (se referă la valoarea casetei).
În apelul funcŃiei: "următorul(this,this.value)", "this" se referă la obiectul curent (reprezintă primul
argument) iar al doilea argument "this.value" reprezintă valoarea obiectului curent (valoarea din
câmp).
ObservaŃi folosirea evenimentului onKeyup, pentru a se trece la următorul câmp atunci când s-a
completat ultimul caracter din caseta precedentă.
Pentru a înŃelege mai bine puteŃi să înlocuiŃi "onkeyup" cu onkeydown pentru a vedea diferenŃa.
Pagina HTML rezultată din acest cod va afişa următorul rezultat:
- Cursorul se mută automat în următoarea casetă atunci când s-a completat tot câmpul precedent (când se ajunge la
lungimea stabilită a câmpului, aici 4 caractere)
Obiectul image (part. 1)
Folosind JavaScript puteŃi crea o mulŃime de efecte imaginilor de pe site.

În această lecŃie şi în următoarea veŃi învăŃa să lucraŃi cu obiectul image, să creaŃi efecte cu ajutorul
imaginilor, folosind JavaScript.
1. Imaginile în pagina web
În JavaScript toate imaginile sunt reprezentate printr-o matrice numită images. Aceasta este o
proprietate (şi subobiect) a obiectului "document".
http://kidu-kid.com
Pentru indexarea în matrice (sau tablou), fiecare imagine de pe o pagină web are un anumit număr
(index). Prima imagine are numărul 0, cea de-a doua imagine are numărul 1 şi aşa mai departe.
Astfel, putem adresa prima imagine cu "document.images[0]".
Fiecare imagine dintr-un document HTML este considerată un obiect Image.
Un obiect Image are mai multe proprietăŃi care pot fi accesate prin JavaScript. De exemplu puteŃi
vedea dimensiunile unei imagini folosind proprietăŃile "width" şi "height".
Următorul exemplu returnează lungimea (în pixeli) a primei imagini din document:
Cod:
document.image[0].height
Declararea imaginii care apare în pagina web se face cu sintaxa HTML:
Cod:
<img src="fisier.gif" name="nume_img" id="id_img" width="100" height="100">
Dacă sunt mai multe imagini pe o singură pagină, e mai dificil să se lucreze cu ele folosind numărul
indexului, de aceea se poate atribui fiecărei imagini câte un nume (cu atributul "name").
O altă metodă este folosirea proprietăŃii "getElementById("id_element")", unde "id_element" este
id-ul imaginii (sau alt obiect) dat cu atributul "id="..."", ca în exemplu următor:
Cod:
document.nume_img.height
sau
Cod:
document.getElementById("id_img").height
Obiectul "image" are o singură metodă:

handleEvent() - reprezintă evenimentul specificat pentru executarea unei anumite acŃiuni
ProprietăŃile obiectului image sunt următoarele:
Border - poate fi doar citită şi este lăŃimea marginii din jurul imaginii specificată în pixeli
Alt - specifică textul care va fi afişat în locul imaginii(dacă nu poate fi vizualizată de browser)
Align - unde să fie plasată imaginea
Complete - poate fi doar citită şi este o valoare booleana care permite să ştim dacă imaginea a fost
descărcată complet.
Height - înălŃimea în pixeli a imaginii
Hspace - se referă la spaŃiul din dreapta şi stânga imaginii (în pixeli)
Lowsrc - specifică un URL al unei imagini ce va fi afişată la o rezoluŃie scăzută
Name - se foloseşte pentru a da nume unei imagini
Src - specifică URL-ul (adresa şi numele) imaginii
Usemap - eticheta map
Vspace - spaŃiul dintre partea de sus şi de jos a imaginii
Width - lăŃimea în pixeli a imaginii
2. Încărcarea unei imagini noi
Dacă doriŃi să schimbaŃi imaginile pe pagină prin JavaScript, se foloseşte proprietatea src.
Ca şi în eticheta <img>, proprietatea "src" reprezintă adresa imaginii afişate.
Cu JavaScript putem da o nouă adresă imaginii care trebuie încărcate în pagină, astfel imaginea de la
noua adresă va înlocui vechea imagine.
Iată un exemplu prin care puteŃi înŃelege cum se face această schimbare de imagini
http://kidu-kid.com
Cod:
<img name="imagine" src="img1.jpg" width="155" height="155">

<form>
<input type="button" onClick="document.imagine.src='img2.jpg'" value="Schim
ba imaginea">
</form>
Imaginea "img1.jpg" este încărcată şi ia numele "imagine".

Cu linia de cod "document.imagine.src='img2.jpg'" se înlocuieşte fosta imagine "img1.jpg" cu o nouă
imagine "img2.jpg", prin apăsarea butonului "Schimbă imaginea".
Imaginea nouă are aceleaşi dimensiuni ca şi vechea imagine, suprafaŃa de afişare a imaginii rămane
aceeaşi.
Iată încă un exemplu în care avem o pagină HTML cu două link-uri (legături) care, printr-un script JS
schimbă afişarea mai multor imagini în acelaşi loc. Imaginile sunt declarate şi stocate într-un tablou
"imagini". Pentru schimbarea imaginilor se folosesc 2 funcŃii: "gonext" şi "goback".
Cod:
<html>
<head>
<title>Titlu</title>
<script>

</script>
</head>
<body>
<h4 align=center>Imagini<br>
<img src="img/img1.jpg" name="imgs" width="155" height="155"><br>
<a href="javascript:goback()"><<- Precedenta</a> |
<a href="javascript:gonext()">Urmatoarea ->></a>
</h4>
</body>
</html>
http://kidu-kid.com
Un dezavantaj al scripturilor din aceste două exemple poate fi faptul că după apăsarea butonului
"Schimbă imaginea" sau a link-ului "următoarea >>" afişarea imaginii noi poate întarzia deoarece
aceasta trebuie să fie încărcată de browser după apăsarea butonului (sau a link-ului). În lecŃia
următoare veŃi învăŃa cum să evitaŃi acest lucru prin "preîncărcarea imaginilor".
Obiectul image (part. 2)
Această lecŃie continuă prezentarea modului de utilizare a obiectului image, cu exemple ajutătoare şi
un script complet
1. Preîncărcarea imaginilor
În lecŃia precedentă a fost explicat modul de încărcare a unei imagini noi în locul altei imagini folosind
Javascript.
În exemplul prezentat în prima parte a lecŃiei la punctul "Încărcarea unei imagini noi", browserul
trebuie să aştepte afişarea de noi imagini până când aceasta este încărcată iar în cazul unor imagini
mari aşteptarea poate dura prea mult. Acest lucru poate fi evitat prin "preîncărcarea imaginilor", toate
imaginile folosite în pagină vor fi încărcate la deschiderea acesteia (printr-un script JS) şi vor fi afişate
doar atunci când este executată o comandă de afişare
Iată un exemplu prin care puteŃi înŃelege cum se face acest lucru:
Cod:

</script>
<img name="imagine" src="img1.jpg" width="155" height="155">
<form>
<input type=button onclick="document.imagine.src=hiddenImg.src" value="Schimb
a imaginea">
</form>
În interiorul scriptului, prima linie crează un nou obiect "Image".

A doua linie defineşte adresa imaginii noi care va fi încărcată şi reprezentată prin obiectul
"hiddenImg". Astfel imaginea "img2.jpg" este încărcată (dar nu afişată) când este executată această
http://kidu-kid.com
linie de cod (la deschiderea paginii). Imaginea este păstrată în memorie pentru folosirea ulterioară, şi
anume când este apăsat butonul "Schimbă imaginea", care prin codul
"document.imagine.src=hiddenImg.src" va afişa imaginea "img2.jpg" în locul celei actuale (img1.jpg).
Afişarea se face imediat, fără a mai aştepta încărcarea acesteia.
Dacă numărul şi mărimea imaginilor este mare va dura mai mult încărcarea iniŃială a paginii, de aceea
e bine să aveŃi în vedere viteza conexiunii pentru a şti ce metodă este mai indicată.
2. Efecte mouse-over (sau rollover)
Cu mouse-over ("MouseOver" şi "MouseOut") se pot crea efecte (precum schimbarea unei poze)
care apar la simpla trecere cu mouse-ul deasupra unei zone.
Iată un exemplu foarte simplu
Cod:
<a href="#"
onMouseOver="document.Imgs.src='img1.jpg'"
onMouseOut="document.Imgs.src='img2.jpg'">
<img src="img3.jpg" name="Imgs" width="155" height="155" border="0">
După cum observaŃi, "onMouseOver" şi "onMouseOut" au fost adăugate în interiorul etichetei <a>, e
greşit dacă le adăugaŃi în eticheta <img>. Imaginile nu pot reacŃiona la evenimentele "MouseOver" şi
"MouseOut", trebuie să punem o etichetă de legătură (link) lângă imagini.
IniŃial este afişată imaginea "img3.jpg", când poziŃionaŃi mouse-ul deasupra imaginii va fi afişată
"img1.jpg" iar după ce depărtaŃi mouse-ul, va apare imaginea "img2.jpg" (cunoscut si ca efectul
rolover)
Dacă doriŃi ca efectul de schimbare a imaginii să apară când poziŃionaŃi mouse-ul pe un link şi nu pe
imagine, puteŃi modifica exemplul astfel (<img> va fi adăugat în afara etichetei "<a>...</a>"):
Cod:
<a href="#"
onMouseOver="document.Imgs.src='img1.jpg'"
onMouseOut="document.Imgs.src='img2.jpg'">Legatura</a><br>
<img src="img3.jpg" name="Imgs" width="155" height="155" border="0">
Acest exemplu este mai mult de studiu pentru a înŃelege procedeul de utilizare a efectelor "mouse-
over". Nu este potrivit pentru adăugarea într-o pagină web profesională deoarece cauzează unele
probleme:
- imaginile "img1.jpg" şi "img2.jpg" nu au fost preîncărcate şi astfel apar întarzieri în afişarea lor
- dacă vom folosi mai multe seturi de imagini trebuie scris codul pentru fiecare separat
- pentru folosirea şi în alte pagini, poate necesita modificări substanŃiale
Iată un script complet care evită problemele de mai sus, deşi este mai lung, odată scris poate fi folosit
cu uşurinŃă şi pt. alte pagini web şi cu un număr mai mare de imagini.
Cod:
<html>
<head>
<script language="JavaScript1.1">

</script>
<script language="JavaScript">

</script>
</head>
<body>
<a href="adresa1.htmll" onMouseOver="on('link1')" onMouseOut="off()">
<img name="link1" src="link1.gif" width="100" height="100" border="0"></a>
http://kidu-kid.com
<a href="adresa2.html" onMouseOver="on('link2')" onMouseOut="off()">
<a href="adresa2.html" onMouseOver="on('link3')" onMouseOut="off()">
</body>
</html>
Acest exemplu foloseşte 3 imagini (respectiv 3 link-uri in BODY), dar puteŃi adăuga şi 100.
Scriptul pune toate imaginile într-o matrice "pics" construită de funcŃia "preload()", care este apelată
la început.
Apelul funcŃiei "preload()" se face în felul următor: "preload("link1", "img1.jpg", "img1t.jpg");", ceea
ce înseamnă că scriptul trebuie să încarce două imagini "img1.jpg" şi "img1t.jpg" pentru "link1". Prima
imagine este imaginea care va fi afişată când cursorul mouselui este în exteriorul imaginii. Iar atunci
când cursorul este poziŃionat deasupra imaginii, va fi afişată cea de-a doua imagine. Cu primul
argument "name" ("link1") al funcŃiei "preload()" specificăm cărui obiect Image de pe pagina web
aparŃin imaginile . În corpul ( <body> ) al exemplului veŃi găsi o imagine cu numele "link1".
Cele două funcŃii "on()" şi "off()" sunt apelate prin evenimentele "onMouseOver" şi "onMouseOut".
PuteŃi observa că funcŃia "on()" trimite în spate toate celelalte imagini afişate iniŃial (care sunt
adăugate direct în eticheta <img>). Aceasta este necesară deoarece se poate întâmpla ca mai multe
imagini să fie afişate accentuat (de exemplu, evenimentul "MouseOut" nu are loc atunci când
utilizatorul mută cursorul de deasupra imaginii direct în afara ferestrei).
ÎncercaŃi să studiaŃi acest script, să înŃelegeŃi modul în care a fost creat.
http://kidu-kid.com
Obiectul Form (part. 1)
Formularele sunt elemente HTML care dau viaŃă unor pagini statice deoarece asigură o interfaŃă prin
care vizitatorii pot interacŃiona, cu ajutorul controalelor (elemente ale formularului).
Obiectul Form este mijlocul prin care se poate interacŃiona cu acest element HTML în cadrul
scripturilor JavaScript.
1. Metode şi proprietăŃi ale obiectului form
După cum aŃi învăŃat în lecŃiile precedente, obiectele JavaScript au proprietăŃi şi metode.
ProprietăŃile obiectului "Form" sunt următoarele:
action - conŃine atributul "action" din eticheta <form>, specifică adresa URL unde este trimis
formularul
elements - matricea care conŃine toate elementele din <form>
encoding - conŃine atributul "enctype" din <form>, specifică o codificare MIME a formularului
length - numărul de elemente conŃinute în formular
method - conŃine atributul "method" din <form>, defineşte felul în care formularul este trimis
serverului (get sau post)
name - conŃine atributul "name" al unei etichete <form>
target - conŃine atributul "target" al etichetei <form>, specifică fereastra în care serverul ar trebui
să returneze informaŃiile. Dacă nu este specificată, serverul afişează rezultatele în fereastra care a
expediat formularul
Obiectul "Form" are următoarele metode:

handleEvent() - apelează handlerul de eveniment specificat
reset() - readuce elementele formularului la valorile prestabilite
submit() - declanşează un eveniment "submit" care trimite datele spre programul specificat în
atributul "action" al etichetei <form>
2. Trimiterea formularelor spre server
Limbajul JavaScript permite prelucrarea datelor introduse în formular înainte ca acestea să fie trimise
spre procesare la programul (scriptul) de pe server.
PuteŃi expedia datele unui formular utilizând una din cele două modalităŃi:
1. - Prin apelarea metodei "submit()" a obiectului "Form"
2. - Prin click pe un buton Submit care trimite automat datele din formularul de care aparŃine
Multe din proprietăŃile obiectului "Form" se ocupă de informaŃiile suplimentare care sunt trimise la
server prin intermediul formularului. Aceste proprietăŃi sunt:
- action - specifică adresa URL a programului către care vor fi trimise datele din formular
Exemplu:
Cod:
<form name="f1" action="http://www.unsite.net/script.php" method="post">
Pentru formularele care folosesc metoda "post" puteŃi preciza în atributul "action" ca datele să fie
trimise prin e-mail, folosind următoarea sintaxa:
http://kidu-kid.com
Cod:
<form name="f2" action="mailto:adresa_de_email" method="post">
Când expediaŃi formularul, se va deschide un client de e-mail ce conŃine, printre altele, şi perechile de
"nume-valoare" ale elementelor (casetelor) cuprinse în formular.
- enctype - specifică o codificare MIME a formularului, valoarea prestabilită este "application/x-www-

form-urlencode".
O metodă de verificare a acestei codificări este următoarea:
Cod:
if(f1.enctype == "application/x-www-form-urlencode") {
alert("Tipul de codificare e normal")
}
Un alt tip de codificare des folosit este "text/plain".

Iată un exemplu:
Cod:
<form method="post" name="f3" action="mailto:adresa_de_mail" enctype="text/pl

ain">
Va place site-ul? <br>
<input name="alege" type="radio" value="1" checked>Da <br>
<input name="alege" type="radio" value="2">Nu <br>
<input name="alege" type="submit" value="Trimite">
</form>
Proprietatea "enctype="text/plain"" este folosită pentru a trimite text neformatat. Prin aceasta,
mailul va fi mai uşor de citit, în cadrul mesajului va apare opŃiunea aleasă. Fără specificarea acestei
proprietăŃi mailul va avea ca ataşament un fişier cu opŃiunea aleasă.
- method - defineşte modul în care datele formularului sunt expediate. Se poate folosi valoarea "get"
sau "post".
Pentru formularele care folosesc metoda "get", în majoritatea site-urilor este disponibil un program
CGI de testare, numit "test-cgi" furnizat împreuna cu serverul (locaŃia fişierului "test-cgi" poate fi
diferită, întrebaŃi administratorul serverului). FolosiŃi următoarea sintaxa:
Cod:
<form action="http://nume_site/cgi-bin/test-cgi" method="get">
VeŃi primi o pagină care va conŃine, printre altele, şi valorile elementelor din formular.
Pentru începători, mai puŃin cunoscători, şi folosirea cu scripturi PHP, este recomandată metoda
"post".
Pentru formularele care folosesc metoda "post", în majoritatea site-urilor este disponibil un program
CGI de testare, numit "post-query" furnizat împreuna cu serverul (locaŃia acestuia poate fi diferită,
întrebaŃi administratorul serverului). FolosiŃi următoarea etichetă:
Cod:
<form action="http://nume_site/cgi-bin/post-query" method="post">
Când trimiteŃi formularul veŃi primi, printre altele, şi perechile de "nume-valoare" corespunzătoare
http://kidu-kid.com
elementelor din formular.
PuteŃi verifica tipul metodei de trimitere a datelor şi cu un script JavaScript, ca în exemplul următor:
Cod:

</script>
- onSubmit - este folosită pentru a valida formularul înainte de a fi trimis.

Metoda "onSubmit" se introduce în interiorul etichetei <form>, ca în exemplul următor:
Cod:

</script>
...
<form method="post" name="nume_form" action="script.php" onSubmit="return val
idare()">
...
Despre validarea datelor dintr-un formular veŃi putea învaŃa mai multe în lecŃia următoare.
http://kidu-kid.com
Obiectul Form (part. 2)
1. Utilizarea metodei focus şi select
Cu metodele focus() şi select() puteŃi adăuga formularului anumite efecte grafice şi să selectaŃi
casetele dorite.
PuteŃi defini care element să atragă atenŃia la început.
PuteŃi transmite navigatorului să revină în locul din formular unde au fost introduse datele greşit,
astfel browserul va poziŃiona cursorul în elementul din formular specificat. Acest lucru se poate face
printr-un script ca cel din exemplul următor:
Cod:

</script>
Unde "nume_form" este numele formularului specificat în atributul "name" din eticheta <form> iar
"nume_câmp" este numele câmpului din formular unde va fi poziŃionat cursorul (specificat în atributul
"name" din eticheta câmpului respectiv)
Dacă doriŃi să atrageŃi atenŃia sau să poziŃionaŃi cursorul asupra unui anumit element din formular
atunci când pagina este încarcată, adăugaŃi o proprietate "onload" în eticheta <body>, ca în exemplu
următor :
Cod:
<body onload="setfocus()">
Iata un alt exemplu în care câmpul dorit dintr-un formular atrage atenŃia şi este şi selectat :
Cod:
<html>
<head>

</script>
</head>
<body onload="setfocus()">
<form name="form1">
<input type="text" name="camp1" value="un text"> <br>
<input type="text" name="camp2" value="text selectat">
</form>
http://kidu-kid.com
</body>
</html>
Dacă adăugaŃi codul de mai sus într-un document HTML, cand îl veŃi deschide cu un browser va fi
selectat automat textul din câmpul doi.
2. Validarea şi verificarea datelor introduse în formular
De cele mai multe ori folosim formulare pentru ca datele introduse în acestea să fie trimise înapoi la
server pentru procesare sau prin poşta electronică către un cont de email.
Cu ajutorul JavaScript datele introduse într-un formular pot fi cu uşurinŃă verificate înainte de a fi
transmise, astfel putem uşura traficul şi în plus ne putem asigura că s-au transmis date corecte. De
exemplu: să nu se transmită inputuri fără date în ele, sau ca o adresa e-mail să conŃină caracterul @!
Pentru a înŃelege mai bine vom folosi un exemplu ce conŃine un formular cu 2 elemente text: "nume"
şi "email" şi un buton "Submit" pt. trimiterea datelor. Vizitatorul trebuie să introducă numele în primul
text şi adresa de e-mail în al doilea. Pentru verificare este adăugat un script JavaScript care verifică
datele introduse înainte ca acestea să fie trimise la server.
Cod:
<html>
<head>

</script>
</head>
<body>
<form name="form1" action="test.php" method="post">
Scrieti numele dvs.:<br>
<input type="text" name="nume"> <br>
AdăugaŃi adresa de e-mail :<br>
<input type="text" name="email"> <br>
<input type="submit" name="submit" value="Trimite" onClick="return verifica
(this.form)">
</form>
</body>
</html>
FuncŃia "verifică()" este apelată în eticheta butonului submit prin metoda "onClick=return
verifica(this.form)", argumentul "this.form" este transmis către funcŃie şi face referire la elementele
din formularul curent. Astfel când este apăsat butonul "Trimite" se execută imediat funcŃia
"verifică()".
Aceasta verifică cu prima instructiune "if" dacă elementul "nume" din formular are valoarea nulă
http://kidu-kid.com
(adică nu a fost scris nici un caracter), se compară cu ""pentru a verifica dacă şirul este gol. Dacă
valoarea este nulă condiŃia "if" primeşte valoarea "adevarată" şi se execută, deschide o fereastră Alert
şi apoi returnează "false" (astfel datele nu mai sunt trimise). Dacă în căsuŃa "nume" este adăugat
vreun caracter valoarea acesteia nu mai e nulă (şirul nu e gol) şi condiŃia "if(form.nume.value == "")"
nu mai este adevărată şi se trece la execuŃia următoarei linii de cod a funcŃiei.
A doua instrucŃiune "else if (form.email.value == "" || form.email.value.indexOf('@', 0) == -
1 || form.email.value.indexOf('.', 0) == -1)" este ceva mai complicată, verifică dacă valoarea
elementului "email" din formular este nulă sau (prin operatorul "OR" ||) dacă acesta nu conŃine
caracterele '@' sau punct (.); aceasta deoarece orice adresa de e-mail trebuie să conŃină cele două
caractere. Dacă la verificarea celor trei condiŃii (valoare nulă, lipsa caracterului '@' şi lipsa caracterului
punct) vreuna din ele este adevărată, instrucŃiunea "else if" se execută şi va deschide o fereastră Alert
apoi returnează "false'.
În caz contrar, dacă nici una din condiŃiile instrucŃiunii "if", "else if" nu este adevărată, funcŃia
"verifică()" returnează "true" şi datele vor fi trimise la server.
În browser veŃi avea următorul rezultat:
Scrieti numele dvs.:
Adaugati adresa de e-mail :
Trimite
PuteŃi introduce orice în formular şi apoi apăsaŃi butonul "Trimite". De asemenea încercaŃi să nu
introduceŃi nimic şi să apăsaŃi butonul, sau la câmpul pt. email adăugaŃi o adresă incompletă (fără @
sau(.)). VeŃi vedea rezultatul acestui script.
Dacă introduceŃi datele corect nu va apare nici un mesaj.
În exemplul de mai sus puteŃi folosi în loc de metoda "onClick()" din eticheta butonlui Submit, metoda
"onSubmit()", aceasta se adaugă direct în eticheta <form>, după cum este prezentat mai jos:
Cod:
<form name="form1" action="test.php" method="post" onSubmit="return verifica(

this)">
Rezultatul va fi acelaşi.
http://kidu-kid.com
Obiectul window - part. 1
Ferestrele sunt cele mai importante elemente de interfaŃă în browser, iar JavaScript oferă multe
modalităŃi de a le manipula.
În această lecŃie veŃi învăŃa despre obiectul window, proprietăŃile şi metodele acestuia, cum să
creaŃi noi ferestre (pop-up) şi să le închideŃi.
1. ProprietăŃile şi metodele obiectului window
Un browser (indiferent de nume sau producător) este prezentat într-o fereastră şi tot ceea ce
utilizatorul face cu browserul se execută în interiorul acelei ferestre. Toate elementele unei pagini web
sunt de asemenea conŃinute în fereastra respectivă.
Obiectul "Window" este considerat obiectul de nivel ierarhic cel mai înalt în ierarhia obiectelor
JavaScript pe partea de client şi conŃine toate celelalte obiecte pe partea de client (cu excepŃia
obiectului "navigator", conceptual diferit, nefiind un element propriu-zis vizual). După cum în practică
se poate lucra cu mai multe ferestre deschise simultan, la fel se poate lucra şi cu mai multe obiecte
"Window" (de fapt câte unul pentru fiecare fereastră). Obiectul "Window" se creează automat atunci
când se deschide o nouă fereastră de browser. AtenŃie să nu confundaŃi ferestrele distincte de browser
cu cadrele (frame-urile), care de asemenea mai sunt numite ferestre (fiind de fapt subferestre ale
ferestrei de browser).
Ca şi celelalte obiecte şi "Window" are o serie de proprietăŃi şi metode. Fiind obiectul de nivelul cel mai
înalt unele dintre acestea pot fi apelate sau se poate face referire la ele fără a folosi în faŃa lor
expresia "window." (cum e de exemplu metoda "alert()").
Obiectul window are următoarele proprietăŃi:

- closed - specifică dacă instanŃa "window" a fost închisă
- crypto - permite accesul la caracteristicile de criptare din Netscape
- defaultStatus - specifică mesajul prestabilit în bara de stare a ferestrei
- document - menŃionează toate informaŃiile despre documentul din această fereastră
- frames - menŃionează toate informaŃiile despre cadrele din această fereastră
- history - menŃionează adresele URL vizitate de utilizator în fereastra curentă
- innerHeight - conŃine înalŃimea în pixeli a zonei afişate din fereastra curentă
- innerWidth - conŃine lăŃimea în pixeli a zonei afişate din fereastra curentă
- length - reprezintă numărul de cadre din fereastra curentă
- location - conŃine adresa URL curentă încărcată în browser
- locationbar - face referire la bara de locaŃie a browserului
- locationbar.visible - conŃine valoarea booleană care indică dacă bara de locaŃie de pe browserul
utilizatorului este vizibilă
- menubar - face referire la bara de meniuri a browserului
- menubar.visible - conŃine valoarea booleană care indică dacă bara de meniuri de pe browserul
- name - conŃine numele ferestrei
- offscreen-Buffering - conŃine o valoare booleană care ne permite să determinăm dacă vreo
actualizare a ferestrei este executată într-un buffer din afara ecranului
- 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
- outerWidth - conŃine lăŃimea în pixeli a suprafeŃei din exteriorul ferestrei curente
- pageXOffset - conŃine coordonata X a ferestrei curente
- pageYOffset - conŃine coordonata Y a ferestrei curente
- parent - face referire la fereastra de nivelul cel mai înalt care afişeaza cadrul curent
- personalbar - menŃionează informaŃii despre bara personală a browserului
- personalbar.visible - conŃine valoarea booleană care indică dacă bara personală de pe browserul
http://kidu-kid.com
- screenX - face referire la coordonata X a browserului, din marginea stângă a ferestrei (Netscape)
- screenY - face referire la coordonata Y a browserului din marginea de sus a ferestrei
- scrollbars - face referire la barele de derulare ale browserului
- scrollbars.visible - conŃine valoarea booleană care indică dacă barele de derulare de pe
browserul utilizatorului sunt vizibile
- self - face referire la fereastra curentă
- status - face referire la mesajul de pe bara de stare a ferestrei
- statusbar - face referire la bara de stare a browserului
- statusbar.visible - conŃine valoarea booleanŧ care indică dacă bara de stare a browserului
- toolbar - face referire la bara de instrumente a browserului
- toolbar.visible - conŃine valoarea booleană care indică dacă bara de instrumente a browserului
- top - face referire la fereastra de nivelul cel mai înalt care afişeaza cadrul curent
- window - face referire la fereastra curentă
Obiectul window are următoarele metode:

- atob() - decodifică un şir care a fost codificat în baza 64
- alert() - afişează o fereastră de avertizare cu un anumit şir de text
- back() - încarcă o pagină anterioară vizitată în fereastra curentă
- blur() - dezactivează o fereastră
- btob() - codifică un şir în baza 64
- captureEvents() - stabileşte ca fereastră să captureze toate evenimentele de un tip specificat
- clearInterval() - şterge intervalul stabilit cu metoda "setInterval()"
- clearTimeout() - şterge pauza stabilită cu metoda "setTimeout()"
- close() - închide fereastra
- confirm() - afişează o fereastră de confirmare
- crypto.random() - generează un şir aleator de date, a cărui lungime este specificată de numărul
de octeŃi transferaŃi
- crypto.signText() - întoarce un şir de date codificate care reprezintă un obiect semnat
- disableExternalCapture() - dezactivează capturarea unui eveniment extern
- enableExternalCapture() - activează capturarea unui eveniment extern pentru paginile
încărcate din alte servere
- find() - afişează o casetă de dialog "Find" în care utilizatorul poate introduce text pentru căutare
în pagina curentă
- focus() - activează instanŃa "window" specificată
- forward() - încarcă următoarea pagina în locul paginii curente din fereastră
- handleEvent() - apelează handlerul pentru evenimentul specificat
- home() - încarcă pagina de baza specificată a utilizatorului în locul paginii curente din browser
- moveBy() - deplasează fereastra cu valoarea specificată
- moveTo() - deplasează fereastra în locaŃia specificată
- open() - deschide o nouă instanŃă a unei ferestre
- print() - apelează caseta de dialog "Print" astfel ca utilizatorul să poata tipări fereastra curentă
- prompt() - afişează o fereastră cu caseta de dialog "prompt"
- releaseEvents() - eliberează evenimentele capturate de un tip specificat
- resizeBy() - redimensionează fereastra cu valoarea specificată
- resizeTo() - redimensionează fereastra la valoarea indicată
- routeEvent() - transferă evenimentele de un tip specificat pentru a fi tratate nativ
- scroll() - derulează documentul în fereastră până la o locaŃie specificată
- scrollBy() - derulează documentul în fereastra cu o valoare specificată
- scrollTo() - derulează documentul pe laŃime şi înalŃime până la o locaŃie specificată din fereastră
- setHotKeys() - permite comutarea între activarea şi dezactivarea tastelor de selectare rapidă
când nu sunt prezente meniuri
- setInterval() - apelează o funcŃie sau evaluează o expresie la intervale de timp (constând într-un
anumit număr de milisecunde)
- setResizeable() - permite specificarea posibilităŃii redimensionării unei ferestre
- setTimeout() - apelează o funcŃie sau evaluează o expresie după un anumit număr de
http://kidu-kid.com
milisecunde
- setZOptions() - permite specificarea asezării în ordinea Z (tridimensională) a unei ferestre
- stop() - opreşte fereastra curentă să încarce alt element în ea
2. Crearea ferestrelor pop-up (metoda open)
Folosind JavaScript puteŃi deschide o nouă fereastră în care se încarcă o pagina HTML, cu dimensiuni,
poziŃie şi proprietăŃi stabilite de dv. Aceste ferestre mai sunt numite şi ferestre pop-up.
Pentru a crea o astfel de fereastră puteŃi folosi metoda "open", având următoarea sintaxă:
open("URL", "nume", "proprietăŃi")
Unde :
- URL - reprezintă adresa documentului care va fi afişat în fereastră (e opŃional)
- nume - este un şir care specifică numele ferestrei (e opŃional)
- proprietăŃi - este o listă de proprietăŃi ale ferestrei (dimensiune, poziŃionare, şi altele). (e
opŃional) ProprietăŃile trebuie să fie separate prin virgulă şi fără spaŃii între ele.
Următorul script deschide o nouă fereastră (numită şi pop-up) care are dimensiunile 400x300 pixeli.
Fereastra nu are bara de instrumente, bara de stare sau bara de meniu şi va fi deschisă la o distanŃă
de 200 pixeli faŃă de marginea din stânga şi 100 pixeli faŃă de marginea de sus.
Cod:

</script>
<form>
<input type="submit" value="Deschide fereastra" onclick="open_window()">
</form>
- Butonul "Deschide fereastra" apelează, la click, funcŃia "open_window()" care prin variabila
"fereastra" execută metoda "open()", aceasta va deschide o fereastră nouă cu proprietăŃile adăugate
în metodă.
- ObservaŃi că "fereastra" nu este numele ferestrei. PuteŃi accesa fereastra prin intermediul acestei
variabile. Aceasta este o variabilă normală care este valabilă numai în interiorul unui script. Numele
ferestrei (aici "numeFereastră") este un nume unic care poate fi folosit de toate ferestrele
browserului.
Adăugând acest cod într-un document HTML, în browser veŃi avea un buton ca cel de jos.
Deschide fereastra
- Când apăsaŃi pe buton, se va deschide o fereastră pop-up cu proprietăŃile specificate în metoda

"open()".
3. Închiderea ferestrelor (metoda close)
Pentru închiderea unei ferestre se foloseşte metoda close(). În fereastra pe care dorim să o închidem
http://kidu-kid.com
cu această metodă adăugăm un element de legătură (link) sau un buton în care adăugăm un
eveniment "onClick" care execută metoda "close()" (sau "self.close()"), ca în exemplul următor:
Cod:
<a href="#" onclick="self.close()">Inchide</a>
sau
Cod:
<form>
<input type="button" value="Inchide" onclick="self.close()">
</form>
Cele două elemente de închidere a ferestrei au fost adăugate în pagina care se deschide cu fereastra
pop-up din exemplul anterior.
open() şi close() sunt metode ale obiectului "window". Normal am

scrie window.open() şi window.close(), dar obiectul "window" este o excepŃie. Nu trebuie scris
cuvântul "window" dacă se apelează o metodă a unui obiect fereastră (aceasta este valabil numai
pentru obiectul window).
Obiectul window - part. 2
Această lecŃie continuă prezentarea altor modalităŃi de folosire a ferestrelor.
1. Ferestre "on the fly" ("din mers")

Pentru a creea diferite ferestre trebuie să scriem mai multe fisiere HTML.
Putem scrie scripturi care să creeze ele documentul HTML (tag-urile, etichetele) care să apară în
fereastra nouă, astfel nu mai este nevoie să creăm câte un fişier pentru fiecare pagină care va fi
deschisă.
PuteŃi încărca aceste documente generate de script într-o fereastră separată sau într-un frame.
În primul rând trebuie modificată sintaxa "open", astfel încât să nu încarce nici o pagină, deci în locul
unde trebuie scrisă adresa URL vom scrie numai ""(două ghilimele duble).
Pentru a crea conŃinutul paginii HTML care va apărea în fereastră e necesar să folosim
metoda document.write() prin care pot fi create textul şi codul pentru elementele HTML ale paginii.
Iată un exemplu din care veŃi putea întelege mai bine:
http://kidu-kid.com
Cod:
<html>
<head>
<title>Document generat de JavaScript</title>

</script>
</head>
<body>
<form>
<input type="button" value="On_the_fly" onClick="openWindow()">
</form>
</body>
</html>
- Să studiem funcŃia windowOpen(). Vedem că mai întâi deschide o nouă fereastră browser, cu
metoda "open()".
- Primul argument al metodei este un şir gol (""), astfel nu va fi deschis un document extern.
JavaScript o să creeze noul document.
Am definit variabila "myWindow" prin care accesăm noua fereastră (ObservaŃi că nu puteŃi folosi
numele ferestrei "numeFereastra" pentru această operaŃie).
După ce am deschis fereastra, vom deschide documentul care va fi afiîat, asta se realizeaza prin
• myWindow.document.open()
S-a folosit metoda "open()" a obiectului "document" (este diferită de metoda "open()" a obiectului
"window"). Aceasta deschide un document în fereastră, pregătind documentul pentru următorul input.
Tot prin variabila "myWindow" şi cu ajutorul "document.write" creem documentul dorit (codul HTML şi
conŃinutul documentului afişat în noua fereastră). PuteŃi scrie orice etichete HTML sau text.
După afişarea conŃinutului din document, trebuie să închidem crearea documentului. Aceasta se face
prin următorul cod:
• my Window.do cument.close();
- această linie de cod închide "deschiderea de creare" a documentului, şi nu fereastra.

După ce adăugaŃi tot acest cod într-un fişier HTML, în browser veŃi avea un buton ca cel de jos,
apasaŃi pe el!
http://kidu-kid.com
On_the_fly
Această metodă de creare a paginilor printr-un script JavaScript este recomandată pentru ferestre gen
pop-up, NU pentru pagini de site (paginare) cu un conŃinut bogat!
2. Bara de stare (statusbar)

Bara de stare (statusbar) este bara din josul ferestrei browser-ului. Programele JavaScript pot scrie în
această bară, pentru aceasta trebuie să daŃi o valoare lui:
• window.status
Următorul exemplu va arăta două butoane, unul pentru a afişa un text în statusbar iar celălalt pentru
ştergerea acestui text.
Cod:
<html>
<head>

</script>
</head>
<body>
<form>
<input type="button" name="scrie" value="Scrie in statusbar" onClick="statu
sbar('Aici este bara de stare!');">
<input type="button" name="sterge" value="Stegere" onClick="statusbar('');"
>
</form>
</body>
</html>
- Scriptul este simplu, avem o funcŃie cu un argument "statusbar(text)", argumentul funcŃiei (variabila
"text") este transmis expresiei "window.status", care va afişa valoarea acestuia în bara de stare.
Am creat un formular cu două butoane. Ambele butoane apelează prin evenimentul "onClick" funcŃia
"statusbar()". Butonul "Scrie" transmite funcŃiei argumentul şir "Aici este bara de stare!", acest şir
reprezintă valoarea variabilei "text" şi va fi afişat în bara de stare.
- Pentru ştergerea textului din statusbar, al doilea buton transmite funcŃiei un şir gol, două ghilimele
simple (''), care preluat ca argument va determina expresia "window.status" să înlocuiască textul deja
existent în bara de stare cu un şir gol.
Acest cod va arăta în browser următoarele două butoane:
Scrie in statusbar Stegere
ăsaŃi primul îi al doilea buton, observaŃi rezultatul obŃinut în bara de stare.

Browserul Mozilla Firefox ar putea avea anulată opŃiunea de schimbare a textului din Statusbar, pentru
activarea acestei opŃiuni în Mozilla Firefox, deschideŃiTools - Options - Content aici asiguraŃivă ca
butonul "Enable JavaScript" este bifat, daŃi click pe Advanced îi bifaŃi "Change status bar text".
http://kidu-kid.com
3. Utilizare setTimeout()
Cu ajutorul unui numărător (setTimeout) puteŃi face computerul să execute un anumit cod după o
anumită perioadă de timp (specificată în milisecunde).
Sintaxa generală a acestuia este:
• setTimeout("expresie", timp)
Unde "expresie" este expresia (codul) care va fi executat iar "timp" reprezintă pauza de timp - în
milisecunde - după care va fi executată "expresie".
În următorul exemplu se crează un buton iar dacă apasaŃi acest buton o fereastră va apărea după 3
secunde:
Cod:

</script>
<form>
<input type="button" value="Timer" onClick="timer()" />
</form>
setTimeout() este o metodă a obiectului window. Această metodă fixează pauză (întreruperea) pînă
la execuŃie.
Primul argument este codul JavaScript care va fi executat după o anumită perioadă de timp, aici avem
"alert('S-a folosit metoda setTimeout')". ObservaŃi ca secvenŃa de cod JavaScript trebuie să fie între
ghilimile. Cel de-al doilea argument spune computerului care este momentul în care codul va fi
executat, trebuie să specificaŃi timpul în milisecunde (3000 millisecunde = 3 secunde).
Rulând acest exemplu într-un browser, va arăta următorul button:
- Click pe butonul "Timer" şi aşteptaŃi 3 secunde, se va deschide o fereastră Alert.
http://kidu-kid.com
Ferestre Frame
În prezent noile metode şi tendinŃe de creare a site-urilor folosesc mai puŃin frame-uri (cadre). Chiar
dacă nu le veŃi folosi, e bine să cunoasteŃi aceste elemente deoarece le puteŃi găsi în alte documente
şi să ştiŃi despre ce este vorba.
Cadrele (frame-uri) sunt subferestre ale unei ferestre principale, în care sunt incluse.
1. Crearea cadrelor
Fereastra navigatorului poate fi împărŃită în mai multe frame-uri (cadre). Un frame este o parte din
suprafaŃa ferestrei browserului.
Fiecare frame prezintă în interior un document propriu (în general un document HTML). De exemplu
puteŃi creea două frame-uri într-o fereastră, în primul frame puteŃi încărca o pagină de la o adresă
(ex. google.com) iar în al doilea frame o altă pagină, de la altă adresă (ex. yahoo.com).
Crearea de frame-uri aparŃine limbajului HTML, dar am să descriu câteva lucruri de bază.
Pentru crearea de frame-uri se pot folosi următoarele etichete HTML:
<frameset> , <frame> si <iframe>

Un exemplu de cod HTML care crează o pagină cu două frame-uri este următorul:
Cod:
<html>
<frameset rows="50%,50%">
<frame src="pagina1.html" name="frame1">
<frame src="pagina2.html" name="frame2">
</frameset>
</html>
Proprietatea "row" din eticheta <frameset> asează cele două frame-uri în linie, unul deasupra
celuilalt.
Primul frame, de deasupra, încarcă şi afişează "pagina1.html" iar al doilea frame încarcă şi afişează
"pagina2.html".
Dacă vreŃi să aşezaŃi cele dou&3259 frame-uri în coloană, unul lângă altul, înlocuiŃi cuvântul "row" cu
"cols".
Expresia "50%,50%" reprezintă dimensiunea fiecărui cadru, exprimată în procente în raport cu
fereastra principală.
Fiecare frame trebuie să aibe un nume unic, exprimat prin atributul "name" din eticheta <frame>, cu
ajutorul acestui nume se poate accesa în JavaScript cadrul dorit.
Pentru mai multe detalii desprea crearea de cadre, vedeŃi Cadre din cursul HTML.
Pentru crearea unui cadru cu <iframe> puteŃi folosi următoarea sintaxă:
<iframe src="url_pagină" width="600" height="200" align="center"
scrolling="yes" frameborder="0" name="nume_frame"> </iframe>
Unde "url_pagină" e adresa paginii care va fi încărcată în iframe, "width" şi "height" reprezintă
lungimea respectiv înălŃimea cadrului (exprimată în procente sau pixeli), "scrolling" reprezintă
permisiunea de derulare a paginii din cadru (yes sau no), "frameborder" specifică dacă va fi sau nu
afişată o margine (bordură) pentru cadru (1=da, 0=nu), iar "nume_frame" este numele cadrului care
va fi folosit de JavaScript.
2. Obiectul Frame
http://kidu-kid.com
Acest obiect face referire la un cadru (un frame) dintr-o structură de cadre incluse într-o fereastră.
Într-o pagină cu mai multe cadre, obiectul "Window" reprezintă de fapt pagina care conŃine tagul
<frameset>, iar celelalte pagini sunt considerate cadre în acest context.
Obiectul frame are următoarele proprietăŃi:
document - reprezintă documentul curent încărcat în interiorul unui cadru

frames - tablou ce conŃine referiri la cadrele copil
length - lungimea tabloului de cadre (numărul de elemente)
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 frame are următoarele metode:

blur() - dezactivează cadrul
clearInterval() - anulează o execuŃie repetată
clearTimeout() - anuleaz&3259 orice execuŃie întârziată
focus() - activează un cadru
print() - apeleaz&3259 caseta de dialog "Print"
setInterval() - stabileşte planificarea funcŃiei pentru executare repetată
setTimeout() - stabileşte planificarea funcŃiei pentru executare întârziată<
3. Frame-uri şi JavaScript
Ierarhia elementelor paginii HTML create în primul exemplu (cele 2 cadre "frame1" şi "frame2" aşezate
în linie) este următoarea:
fereastra browser (parinte), care este în vârful ierarhiei, aceasta conŃine două cadre copii -
"frame1" şi "frame2"
Cu ajutorul numelor date cadrelor putem schimba informaŃii între cele două frame-uri împreună cu
fereastra principală, de exemplu putem face un link într-un frame care să deschidă o pagină în celălalt
frame.
În continuare vom studia trei cazuri de relaŃii şi accesări între ferestrele copil şi fereastra părinte.
1. Fereastra părinte accesează o fereastră copil

frame1.document.write("Mesaj de la fereastra părinte");
2. Fereastra copil accesează fereastra părinte

Acest procedeu e util când vreŃi să eliminaŃi cadrele din fereastra principală. Eliminarea
structurii de cadre se face prin încărcarea unei pagini noi în locul paginii principale care a creat
frame-ul (aici fereastra părinte). Se poate accesa fereastra părinte din interiorul unei ferestre
copil cu ajutorul expresiei "parent". Pentru a încărca un document nou în fereastra părinte se
foloseşte "location.href", căruia îi dăm un nou URL, ca în exemplul următor:
parent.location.href = "http://adresa_url"; (adresa_url este adresa noi paginii
care va fi încărcată)
3. O fereastră copil accesează o altă fereastră copil

Nu există legătură directă între cele două cadre, primul frame nu cunoaşte existenŃa celuilalt.
Pentru fereastra părinte, al doilea cadru (frame) este numit "frame2" iar fereastra principală,
văzută din primul frame este numită "parent". Astfel, pentru a avea acces din primul frame la
obiectul "document" al celui de-al doilea frame trebuie să scriem următoarele:
parent.frame2.document.write("Apel de la cadrul frame1");
4. Navigarea prin cadre
http://kidu-kid.com
Prin "navigarea prin cadre" se înŃelege deschiderea paginilor într-un frame sau în fereastra principală
printr-un link din alt frame. Acest lucru se poate face prin mai multe metode.
Pentru a înŃelegere mai bine, vom lua un exemplu concret.
Folosim o pagină cu două cadre, în al doilea cadru vom avea legături către mai multe pagini, dar care
se vor încărca în primul cadru.
Cod:
<html>
<frameset rows="85%,15%">
<frame src="prima.html" name="frame1">
<frame src="meniu.html" name="frame2">
</frameset>
</html>
Pagina "prima.html" reprezintă pagina iniŃială care va fi încărcata în primul frame, cu numele "frame1"
(poate fi orice document HTML).
Pentru pagina care va fi încărcata în al doilea frame (meniu.html) vom folosi codul de mai jos pentru
crearea ei.
Cod:
<html>
<head>

</script>
</head>
<body>
<center>
<a href="javascript:load('test1.htm')">Link1</a> (<i>cu JavaScript</i>) --
<a href="test2.htm" target="frame1">Link2</a> (<i>cu target="frame1"</i>) -
-
<a href="test2.htm" target="_top">Link3</a> (<i>cu target="_top"</i>)
</center>
</body>
</html></html>
- Se observă diferitele moduri de a încărca o pagină nouă.

- Primul link (Link1) foloseşte funcŃia "load()" dintr-un script
- Al doilea link (Link2) foloseşte atributul "target", metoda standard HTML pentru cadre
- Al treilea link (Link3) foloseşte tot atributul "target", de data aceasta prin valoarea "_top" va
încărca pagina nouă direct în fereastra principală, eliminând astfel cadrele.
În funcŃie de proiectul dv. puteŃi decide care variantă e mai potrivită.
Folosind atributul HTML "target" este metoda cea mai simplă.
SoluŃia JavaScript este recomandată dacă doriŃi să faceŃi mai multe lucruri ca o consecinŃă a click-ului
pe un link, de exemplu când doriŃi ca printr-un click să deschideŃi două ferestre, în două cadre diferite.
Pentru aceasta puteŃi utiliza următorul script:
http://kidu-kid.com
Cod:

</script>
- Când va fi apelată funcŃia "loadtwo()", va ïncărca "pagina1.html" în "frame1" şi "pagina2.html" în

"frame2".
Instructiunile de ciclare
• Mică introducere
Modul în care un browser ia decizii poate fi controlat şi de un ciclu. Acesta este folosit pentru a repeta
una sau mai multe instrucŃiuni, dacă o condiŃie este îndeplinită. Un exemplu classic al acestui
mecanism este situaŃia în care un elev obraznic este pus de profesoară să scrie de 100 de ori “Sunt un
copil cuminte” . Daca elevul ar şti JavaScript, ar putea scrie de 100 de ori propoziŃia cerută cu
ajutorul unei instrucŃiuni de ciclare.
În acest articol sunt prezentate instrucŃiunile de ciclare din JavaScript, alături de exemple scurte,
insoŃite de programe simple şi uşor de înŃeles. Un “bonus” este de asemenea prezent în încheierea
articolului. La sfârşit vă aşteaptă nişte întrebări care vă vor ajuta să realizaŃi cât de bine aŃi priceput.
Să trecem aşadar la treabă !
Limbajul JavaScript cuprinde 4 tipuri de instrucŃiuni ciclice, anume: instrucŃiunea “for”, instrucŃiunea
“for in” , instrucŃiunea “while” şi instrucŃiunea “do … while”.
• InstrucŃiunea for
Cu ajutorul acestei instrucŃiuni elevul nostru şi-ar putea scrie pedeapsa. Ciclul for determină browser-
ul să execute instrucŃiunile din cadrul ciclului, cât timp o condiŃie este îndeplinită.
Forma generală:
for (iniŃializator; condiŃie; instrucŃiuni post-ciclu)
http://kidu-kid.com
{
instrucŃiune 1
instrucŃiune 2
instrucŃiune 3
………….
instrucŃiune n
}
Să analizăm puŃin această formă:

-expresia de iniŃializare reŃine de câte ori va executa browser-ul instrucŃiunile din cadrul ciclului
-expresia condiŃional stabileşte dacă instrucŃiunile se vor mai repeta
Spre exemplu, dacă dorim să afişăm de 5 ori propoziŃia “Sunt un copil cuminte.” vom lua o variabilă
contor i, care la început va fi 0. Vom verifica la fiecare pas dacă valoarea curentă a lui i este mai mică
decât 5. Dacă este adevărat vom executa instrucŃiunile dintre acolade, iar dacă nu ciclul se va
termina.
Exemplu:
Cod:
<HTML>
<head>
<title> For simplu JavaScript </title>
</head>
<body>

</script>
</body>
</HTML>
Blocul de instrucŃiune for se poate scrie şi astfel:
Cod:
var i = 0
for ( ; i<5; ++i)
http://kidu-kid.com
{
document.wrie( (i+1)+' ( Sunt un copil cuminte. ')
}
// Sau:
var i = 0
for ( ; i<5 ; ++i)
{
document.write( (i+1) +' ( Sunt un copil cuminte. ')
++i
}
Toate au acelaşi efect, dar prima variantă este mai uşor de înŃeles.
• InstrucŃiunea for in
InstrucŃiunea for in este o instrucŃiune mai specială, care face parte tot din ciclul for. O utilizăm atunci
când nu se cunoaşte numărul de paşi pe care-i avem de repetat. În acest caz, ca parametru vom avea
o listă. Acest fenomen se întâmplă când dorim să aflăm proprietăŃile unui obiect, dar nu ştim câte
sunt. Ciclul for in îi cere browser-ului să execute instrucŃiunile pentru fiecare element din cadrul listei.
Forma generală:
for (lista)
{
Instructiuni
}
Să luăm ca exemplu situaŃia în care dorim să afişăm proprietăŃile unei ferestre din browser. Vom avea
următorul cod:
Cod:
<HTML>
<head>
<title> Exemplu For in loop JavaScript </title>
</head>
</body>

</script>
</body>
</HTML>
• InstrucŃiunea while
Această instrucŃiune îi cere browser-ului să execute una sau mai multe instrucŃiuni, cât timp este
respectată o condiŃie. Ciclul while nu specifică numărul de repetiŃii.
http://kidu-kid.com
Forma generală:
while (conditie=adevarat)
{
instructiune 1
instructiune 2
instructiune 3
……..
instructiune n
}
ExecuŃie:
-se evaluează expresia condiŃional

-dacă aceasta este adevărată, atunci se execută instrucŃiunile cuprinse între { …. }
-dacă nu, se iese din ciclul while
Exemplu:
Să spunem că vrem să afişăm numerele de la 10 la 1 cu ajutorul acestei instrucŃiuni. Fragmentul de

cod corespunzător este:
Cod:
<HTML>
<head>
<title> Instructiunea While JavaScript </title>
</head>
</body>

</script>
</body>
</HTML>
http://kidu-kid.com
Programul începe prin iniŃializarea variabile i cu valoarea 10, se verifică dacă valorea curentă a lui i
este mai mare sau egală cu 1. În caz afirmativ, vom afişa variabila i, vom trece pe linie nouă, iar
variabila i va fi decrementată ( -- i ), adică se va scădea 1 din ea. În cazul în care condiŃia nu mai este
respectată, ciclul se va opri.
• InstrucŃiunea do … while
Această instrucŃiune este asemănătoare cu precendenta, cu diferenŃa elementelor de sintaxă şi a

faptului că instrucŃiunile din blocul repetitiv vor fi executate cel puŃin o dată, deoarece valabilitatea
condiŃiei este verificată abia la sfârşit.
Forma generală:
do
{
instructiune 1
instructiune 2
instructiune 3
…….
instructiune n
}
Vom încerca să afişăm numerele de la 1 la 10 de această dată, cu ajutorul instrucŃiunii do … while.

Avem următorul cod:
Cod:
<HTML>
<head>
<title> Instructiunea do ... while JavaScript </title>
</head>
<body>

</script>
</body>
</HTML>
Principiul de executie este următorul:

-iniŃializăm şi declarăm variabila i cu 1
- executăm instrucŃiunile dintre acolade cât timp condiŃia din while este adevărată
-când condiŃia devine falsă, ne oprim şi ieşim din ciclu
• Bonus: Cuvântul cheie continue
Cu excepŃia ciclului do … while, o instrucŃiune de ciclare îi cere browser-ului să execute instrucŃiunile

din blocul repetitiv numai dacă expresia condiŃională (condiŃia) este validă. În asta constă diferenŃa
dintre instrucŃiunea do … while şi celelalte instrucŃiuni.
Să spunem că vrem să afişăm numerele 1,2,3,5 , dar fără 4. Cum putem face asta folosindu-ne de o
instrucŃiune ciclică? Ne vine în ajutor cuvântul cheiecontinue!
Cod:
<HTML>
<head>
<title> Cuvantul cheie Continue JavaScript </title>
</head>
<body>

</script>
</body>
</HTML>
Atâta timp cât valoarea lui i este mai mică decât 5, browser-ul execută instrucŃiunile din cadrul
blocului repetitiv. Browserul creşte valoarea lui i, apoi evaluează condiŃia, pentru a afla dacă valoarea
lui i este 4. Dacă este adevărat, browser-ul continuă, adică sare peste 4.
http://kidu-kid.com
Cookie-uri part. 1
Valorile majorităŃii variabilelor dintr-un script dispar atunci când fereastra navigatorului este închisă.
Spre deosebire de acestea, valorile variabilelor cookie se pot păstra un timp indefinit. Pentru ca
valorile lor să se poata păstra, browserul utilizatorului stochează variabilele cookie în unitatea de hard-
disc a utilizatorului.
Astfel, cookie-urile sunt fişiere care conŃin diferite date despre un anumit site vizitat şi valori de
variabile, salvate pe calculatorul vizitatorului.
În această lecŃie veŃi învăŃa cum puteŃi folosi JavaScript pentru a manipula fişiere cookie.
1. Fisierele cookie
Un cookie constă în principal dintr-o pereche nume=valoare, iar caracteristici mai avansate permit
stabilirea unei date de expirare şi pot preciza ce pagini web vad informaŃia cookie.
Unul dintre avantajele folosirii fişierelor cookie este persistenŃa acestora. Un fişier cookie poate
persista luni de zile (sau ani), simplificând vizitele ulterioare ale utilizatorului pe site, deoarece
informaŃiile referitoare la vizite şi preferinŃele utilizatorului sunt salvate şi preluate din cookie de
fiecare dată când va reveni la site.
Fişierele cookie sunt deosebit de utile când sunt folosite cu JavaScript, deoarece JavaScript are funcŃii
pentru citirea, adăugarea şi editarea fişierelor cookie.
Fişierele cookie au şi unele dezavantaje, fiind stocate pe calculatorul utilizatorului acestea poat fi
şterse din greşală (sau intenŃionat).
Browserul impune restricŃii privind dimensiunea şi numărul de fişiere cookie care pot fi stocate, iar
fişierele cookie mai noi le pot suprascrie pe cele vechi.
- Numărul total de cookie-uri pentru un server sau domeniu este de 200

- Numărul total de fişiere cookie pentru un browser este de 300
- Mărimea maximă a unui fişier cookie este 4 kb. Dacă aceste limite sunt depăşite, browserul va
şterge cele mai vechi cookie-uri şi pe cele nefolosite.
Când un utilizator trece de la un browser la altul, fişierele cookie salvate de un browser nu sunt
recunoscute de celălalt
Dacă mai mulŃi utilizatori folosesc acelaşi calculator şi acelaşi browser ei pot folosi fişiere cookie care
aparŃin altcuiva.
Cele mai multe browsere stochează informaŃiile cookie în fişiere text necriptate, de aceea informaŃiile
private precum parole, numere personale, nu trebuie stocate direct într-un cookie.
Utilizatorul poate configura browserul astfel încât să interzică anexarea de cookie, în acest caz
aplicaŃia care foloseşte cookie ar putea să nu funcŃioneze.
2. Stocarea şi regăsirea valorilor unui cookie
Numele şi valorile dintr-un cookie sunt stocate şi stabilite utilizând proprietatea cookie a obiectului
Document.
Pentru a stoca şirul cookie într-o variabilă se foloseşte o comandă precum aceasta:
• var myCookie = document.cookie
Pentru a afişa într-o pagina web şirul astfel stocat , puteŃi folosi comanda:
• document.write(document.cookie)
http://kidu-kid.com
JavaScript stochează fişierele cookie în formatul următor:
• nume1=valoare1; nume2=valoare2; nume3=valoare3
Unde "nume1", "nume2" şi "nume3" reprezintă numele fiecărui cookie, iar "valoare1", "valoare2" şi
"valoare3" reprezintă valorile care vor fi adăugate şi stocate în fiecare cookie.
Perechile nume=valoare sunt separate prin caracterul punct şi virgulă (;) şi un spaŃiu, iar după
ultima pereche nu se mai pune caracterul punct şi virgulă.
Pentru extragerea şi utilizarea valorilor din fişierele cookie, trebuie să prelucraŃi şirul obŃinut prin
comanda "document.cookie".
Pentru a simplifica regăsirea unei valori dintr-un fişier cookie, puteŃi folosi o funcŃie ca cea din
următorul script:
Cod:
<script type="text/javascript" language="javascript">

function GetCookie(name)
{
var result = null;
var myCookie = " " + document.cookie + ";"; // toate sirurile de cookie i
ncep cu spatiu si se incheie cu ;
var searchName = " " + name + "="; // se cauta tot ce e intre name si = u
rmator
var startOfCookie = myCookie.indexOf(searchName);
var endOfCookie;
if (startOfCookie != -1)
{ // daca gaseste ceva intre ele
startOfCookie += searchName.length; // omite nume cookie anterior
endOfCookie = myCookie.indexOf(";", startOfCookie);
result = unescape(myCookie.substring(startOfCookie, endOfCookie));
}
return result;
}
var valoare_c = GetCookie('nume_cookie');

document.write(valoare_c); // Afiseaza valoarea cookie-
ului cautat, sau cuvantul null
</script>
- FuncŃia "GetCookie(name)" prelucrează şirul obŃinut de comanda "document.cookie" şi verifică dacă

există cookie-ul cu numele transmis ca argument funcŃiei. Dacă cookie-ul cu numele respectiv există,
atribuie variabilei "result" valoarea asociată numelui şi funcŃia va returna această valoare. Dacă
numele nu există, valoarea variabilei "result" returnată de funcŃie, rămâne "null".
- Variabila "valoare_c" apelează funcŃia "GetCookie()", unde 'nume_cookie' dintre paranteze, este
numele cookie-ului a cărui valoare doriŃi să o obŃineŃi.
Prin comanda "document.write(valoare_c)" scriptul va afişa valoarea acestei variabile, care este cea
returnată de funcŃie.
3. Stabilirea valorilor unui cookie
CombinaŃia nume=valoare este informaŃia minimă de care aveŃi nevoie pentru a defini un cookie,
dar un cookie bine definit înseamnă mai mult de atât.
Iată o listă de parametrii ce pot fi utilizaŃi pentru a specifica un cookie:
nume=valoare
expires=date
http://kidu-kid.com
path=path
domain=nume_domeniu
secure
a. Nume şi valoare
• Nume şi valoare pot fi orice cuvinte doriŃi

• Exemplu:
o culoare favorita=blue
id=num:1
• Cea mai simplă funcŃie pentru stabilirea unui cookie poate arăta astfel:
function SetareCookie(name, value) {

document.cookie = name + "+" + escape(value);
}
• Pentru siguranŃă, valoarea este codificată folosind funcŃia "escape()". Dacă în şir ar exista un
caracter ";" ar putea fi o problemă, dar această funcŃie elimină această problemă.
În general operatorul = este de atribuire, dar în cazul cookie-urilor fiecare nou "name" pe care
îl atribuiŃi este adăugat la lista de cookie activă, iar dacă adaugaŃi acelaŃi nume se va rescrie
peste cel vechi.
b. Data de expirare
• Parametrul "expires=data" reprezintă data şi timpul (în formatul Wdy, DD-Mon-YYYY

HH:MM:SS GMT) când cookie-ul va expira şi va fi şters de pe hard-disc.
Perioada de expirare trebuie transformată în milisecunde.
Dacă nu este specificat nici un timp de expirare, cookie-ul va dispare la închiderea
navigatorului.
• Iată un exemplu în care data de expirare este după o săptămână:
Cod:
var name = "culoare"

var value = "blue"
var oneWeek = 7*24*60*60*1000 // Data de expirare se stabileste in mili
secunde
var expDate = new Date()
expDate.setTime(expDate.getTime()+oneWeek);
document.cookie = name + "=" + escape(value) + "; expires=" + expDate.t
oGMTString()
• ObservaŃi că data de expirare (dateExp) este prelucrată pentru a se încheia cu şirul GMT.
c. Path
• În mod implicit fişierele cookie sunt disponibile şi pentru alte pagini web din acelaşi director al
paginii la care au fost create.
Parametrul path permite unui cookie să fie folosit şi de pagini din alte directoare ale aceluiaşi
domeniu.
Dacă valoarea parametrului "path" este un subsir al adresei URL a unei pagini, fişierele cookie
create cu acel parametru "path" sunt disponibile pentru respectiva pagină.
De exemplu, puteŃi crea un cookie folosind următoarea comandă:
http://kidu-kid.com
document.cookie = "nume=valoare; path=/nume_director";
• Aceasta face ca fişierul cookie cu numele "nume" să fie disponibil pentru fiecare pagină din
directorul "nume_director" cât şi pentru subdirectoarele acestuia.
• Dacă aŃi avea următoarea comandă:
document.cookie = "culoare=blue; path=/javascript/test";
• Fişierul cookie "culoare" ar fi disponibil pentru toate fişierele din directorul "javascript/test" şi
subdirectoare ale acestuia, dar nu va fi disponibil pt. fişierele din directorul "/javascript".
Calea generală pentru ca fişierul cookie să poată fi folosit de toate paginile unui domeniu, din
toate directoarele, este calea rădăcină "/"(path=/).
d. Domain
• Aşa cum parametrul "path" face un cookie disponibil şi în alte directoare,

parametrul domain îl face disponibil pentru alte servere Web sau subdomenii ale aceluiaş
site.
Folosirea parametrului "domain" impune folosirea a cel puŃin două caractere punct (.) dacă
domeniul dvs se încheie cu .com, .net ... (de ex..marplo.net) Şirul parametrului "domain"
trebuie să fie identic cu sfârşitul numelui de domeniu al serverului dvs.
Atunci când se caută un cookie în lista de cookie-uri se efectuează şi o comparaŃie între
valoarea acestui atribut şi adresa domeniului din care s-a recepŃionat antetul HTTP.
ComparaŃia se realizează pornind de la sufixul valorilor comparate, în sensul că dacă avem
"domain=marplo.net atunci această valoare se va potrivi cu un nume de gazdă precum
"info.marplo.net".
După ce s-a efectuat această comparaŃie, în cazul în care cookie-ul este validat se va verifica
şi valoarea atributului "path".
e. Secure
• Dacă un cookie este marcat ca secure, prin intermediul acestui atribut, va fi transmis numai
dacă tranzacŃia HTTP este una sigură (folosindu-se protocolul HTTPS).
În felul acesta un cookie este transmis doar dacă intruneşte toate condiŃiile de validitate (se
potrivesc domeniul, calea de directoare, timpul de expirare şi securitatea canalului de
comunicaŃie).
Dacă parametrul "secure" nu este adăugat în comanda de creare a fişierului cookie, acesta va
trimis într-o formă necriptată prin reŃea.
În următorul exemplu este prezentată o funcŃie care defineşte fişierele cookie cu toŃi parametri:
Cod:
function SetCookie (name, value, expires, path, domain, secure)

{
var expString = ((expires == null) ? "" : ("; expires=" + expires.toGMTSt
ring()));
var pathString = ((path == null) ? "" : ("; path=" + path));
var domainString = ((domain == null) ? "" : ("; domain=" + domain));
var secureString = ((secure == true) ? "; secure" : "");
document.cookie = name + "=" + escape (value) + expString + pathString +
domainString +secureString;
}
ObservaŃi folosirea operatorului condiŃional ?
http://kidu-kid.com
Pentru a folosi acestă funcŃie, o apelaŃi cu orice parametrii doriŃi să stabiliŃi şi utilizaŃi cuvântul "null" în
locul parametrilor care nu contează.
- În lecŃia următoare veŃi găsi explicată metoda de ştergere a cookie-urilor şi un exemplu complet de
creare şi utilizare cookie.
Cookie-uri part. 2
1. Fişiere cookie cu acelaşi nume
Dacă un browser are mai multe fişiere cookie pentru un site şi au acelaşi nume, definite fiecare cu altă
cale în parametrul "path", şi cu valori diferite, de exemplu dacă avem trei fişiere cookie cu numele
"color", şirul cookie ar arăta astfel:
• color=blue; color=green; color=white
În cazul acesta, pentru a număra valorile asociate unui nume cookie puteŃi folosi următoarea funcŃie:
Cod:
function GetCookieCount (name)

{
var result = 0;
var myCookie = " " + document.cookie + ";";
var searchName = " " + name + "=";
var nameLength = searchName.length;
while (startOfCookie != -1)
{
result += 1;
startOfCookie = myCookie.indexOf(searchName, startOfCookie + nameLeng
th);
}
return result;
}
http://kidu-kid.com
Împreună cu această funcŃie care numără câte valori asociate există, trebuie să aveŃi şi o funcŃie care
să regăsească o anumită instanŃă a unui cookie, cum este următoarea:
Cod:
function GetCookieNum (name, cookieNum)

{
var result = null;
if (cookieNum >= 1)
{
var myCookie = " " + document.cookie + ";";
var searchName = " " + name + "=";
var nameLength = searchName.length;
var cntr = 0;
for (cntr = 1; cntr < cookieNum; cntr++)
{
startOfCookie = myCookie.indexOf(searchName, startOfCookie + name
Length);
}
if (startOfCookie != -1)
{
startOfCookie += nameLength; // omite nume cookie anterior
var endOfCookie = myCookie.indexOf(";", startOfCookie);
result = unescape(myCookie.substring(startOfCookie, endOfCookie))
;
}
}
return result;
}
2. Ştergerea unui cookie
Pentru a şterge un cookie, numele şi calea (dacă a fost specificat parametrul "path") trebuie să fie
acelaşi cu numele şi calea folosite la stabilirea fişierului cookie.
Ştergerea unui cookie se face prin stabilirea datei de expirare la un moment în trecut, ca în exemplul
următor:
Cod:
function ClearCookie (name)

{
var ThreeDays = 3*24*60*60*1000;
var expDate = new Date();
expDate.setTime (expDate.getTime() - ThreeDays);
document.cookie = name + "=ImOutOfHere; expires=" + expDate.toGMTString()
;
}
3. Exemplu complet de utilizare cookie
Pentru a înŃelege mai bine cum puteŃi crea şi folosi fişierele cookie, studiaŃi exemplul următor.
Exemplul este ceva mai complex, cuprinde un script cu mai multe funcŃii care conŃin multe din
elementele învăŃate în lecŃiile anterioare cât şi altele mai avansate, pentru lucrul cu şiruri.
Scopul acestui exemplu este de a înŃelege cum funcŃionează fişierele cookie, acesta conŃine în
secŃiunea HEAD a unui document HTML un script JavaScript în care sunt definite 4 funcŃii pentru lucrul
http://kidu-kid.com
cu fişiere cookie, iar în corpul paginii, BODY, este creat un tabel HTML cu 2 coloane, în prima este un
formular pentru scrierea unor preferinŃe care vor fi trimise la script pentru înregistrarea acestora în
cookie, iar a doua coloană conŃine un buton care activează afişarea preferinŃelor din cookie şi un alt
buton care şterge cookie-urile.
Codul complet este următorul:
Cod:
<!DOCTYPE html PUBLIC "-

//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml
1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
<title>Exemplu utilizare cookie</title>

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

ng="0">
<tr><td>
<form name="preferinte">
Scrieti culoarea favorita:
http://kidu-kid.com
<input type="text" name="culoare" size="20" maxlength="40" /><br /><br />
Scrieti fructele preferate:
<input type="text" name="fructe" size="20" maxlength="40" /><br /><br />
Scrieti o fraza (un citat) favorita:<br />
<input type="text" name="citat" size="40" maxlength="80" /><br /><br />
<input type="button" value="Favorite" name="buton" onclick="SetCookie()" />
<input type="reset" value="Reset" name="reset" />
</form>
</td><td>
<form name="preferinte2">
<input type="button" value="Afiseaza Favorite" name="buton" onclick="getCooki
e('cookie1', 'cookie2', 'cookie3')" />
<input type="button" value="Sterge cookie" name="Clear" onclick="stergeCookie
('cookie1', 'cookie2', 'cookie3')" />
</form>
<b>Culoare favorita - </b><span id="idculoare"> </span><br />
<b>Fructe preferate - </b><span id="idfructe"> </span><br />
<b>Citat favorit - </b><span id="idcitat"> </span><br />
</td></tr>
</table>
</body>
</html>
- FuncŃiile din script au fost definite pentru acest exemplu, pentru folosirea lor în alte scripturi necesită
modificări.
După ce adăugaŃi acest cod într-un document HTML, în browser veŃi avea afişat următorul rezultat:
Scrieti culoarea favorita:
Scrieti fructele preferate:
Scrieti o fraza (un citat) favorita: Culoare favorita -

Fructe preferate -
Citat favorit -
Reset
- ApăsaŃi întâi butonul din dreapta "Afişează Favorie", vor fi afişate mesaje de eroare, precum că nu
aŃi adăugat încăo preferinŃă.
CompletaŃi în câmpurile din stânga preferinŃele dv. apoi apăsaŃi butonul "Favorite", acesta apelează
funcŃia "SetCookie()" care va prelua datele adăugate şi le va stoca în fişiere cookie care vor expira
peste două zile de la crearea lor.
DaŃi click pe butonul "Afişează Favorite", acesta apelează funcŃia "getCookie()" căreia îi trimite ca
argumente numele cookie-urilor a căror valoare va fi afişată, vor apare preferinŃele scrise de dv.,
preluate din cookie.
ImportanŃa şi avantajul fişierelor cookie le veŃi constata după aceasta.
InchideŃi broweser-ul, redeschideŃi-l iar la această pagină şi apăsaŃi butonul "Afişează Favorite".
ObservaŃi că sunt afişate preferinŃele dv. adăugate mai devreme. Mâine, dacă reveniŃi la această
pagină vor fi afişate aceleaşi preferinŃe, fără să trebuiască să le mai scrieŃi. Aceste date sunt păstrate
2 zile în fişiere cookie după care vor fi şterse automat.
Dacă vreŃi să ştergeŃi aceste cookie-uri mai devreme, apăsaŃi butonul "Şerge cookie", acesta apelează
funcŃia "stergeCookie()" căreia îi trimite ca argumente numele cookie-urilor pe care să le şteargă.
http://kidu-kid.com
Lucrul cu getElementById
ID-ul este un atribut care poate fi adăugat în etichetele (sau tag-urile) HTML. Prin valoarea dată
acestui atribut se atribuie un nume unic etichetei respective. Acest "id" poate fi folosit în stilurile CSS
pentru a defini aspectul grafic şi aranjarea în pagină a tag-ului respectiv, dar poate fi folosit şi în
scripturi JavaScript pentru a lucra cu elementele şi conŃinutul etichetei HTML. Astfel, id-ul poate face o
legătură între JavaScript şi orice etichetă HTML din document.
Pentru a face referire într-un script JS la o etichetă HTML, prin intermediul id-ului acesteia, se
foloseşte următoarea sintaxă:
• document.getElementById("id")
- getElementById("id") este o proprietate a obiectului "document", aceasta, după cum sugerează şi

denumirea, obŃine elementul care are id-ul dintre paranteze.
- Puteti folosi si ghilimele simple (' ') pentru numele id-ului din paranteze.
Această sintaxă "document.getElementById("id")" returnează o referinŃă la întreg elementul HTML

care are acest "id", va defini un obiect conŃinând atributele şi conŃinutul acestuia. Pentru a face
referire la anumite părŃi din acest obiect (element HTML), de exemplu la conŃinut sau la un atribut
"style", se folosesc proprietăŃi specifice acestui obiect de nivel 2. Mai jos este prezentată o listă cu cele
mai folosite.
ProprietăŃi folosite cu "document.getElementById("id")"
• attributes[] - conŃine într-o matrice (cu index de la 0) toate atributele etichetei HTML
apelate. Acestea se adaugă în matrice începând de la dreapta spre stânga. Are 2 proprietăŃi:
o name - returnează numele atributului apelat
o value - returnează valoarea atributului apelat
• childNodes - conŃine o ierarhie de obiecte care sunt adăugate în matrice. Aceste obiecte
sunt formate din elemente ale întreg conŃinutului tag-ului respectiv. Pentru a apela obiectele
din fiecare nivel ierarhic se folosesc proprietăŃi specifice. Pentru mai multe detalii cititi
documentaŃia de aici.
o De exemplu, dacă doriŃi să obŃineŃi conŃinutul de tip text dintr-un tag, puteŃi folosi
expresia :
o document.getElementById("id").childNodes[0].nodeValue
• getAttribute("atribut") - obŃine valoarea atributului specificat între paranteze
• setAttribute("atribut", "valoare") - modifică valoarea atributului specificat cu valoarea
dată
• removeAttribute("atribut") - elimină existenŃa atributului specificat între paranteze
• href - defineşte sau obŃine valoarea atributului "href" (adresa URL) din etichetele pentru
link-uri
• innerHTML - returnează sau schimbă conŃinutul, inclusiv cod HTML, încadrat de o etichetă
HTML
• src - defineşte sau obŃine valoarea atributului "src" din etichetele <img>
• style - defineşte valori ale atributului "style", folosit pentru elemente de stil CSS. Această
proprietate este urmată de o proprietate tip CSS.
• value - se foloseşte pentru elemente de formular (din <form>), obŃine sau defineşte
valoarea unei casete (cu un anume id) din formular
Ca să înŃelegeŃi mai bine cum se lucrează cu "document.getElementById("id")" şi proprietăŃile

prezentate mai sus, iată câeva exemple cu fiecare.
http://kidu-kid.com
1. attributes[]
În acest exemplu folosim o funcŃie JavaScript care este acŃionată când se execută click pe un link,
aceasta va afişa o fereastră Alert cu numele atributului al doilea din eticheta pentru link.
Cod:

</script>
<a href="#" id="id_link" title="Link pt. test" onclick="test(this)">Un link</

a>
- ObservaŃi că nu am folosit "document.getElementById("un_id")", dar am folosit proprietatea "this".

Aceasta face referire la elementul curent care este acŃionat, astfel, în script, în loc
de val.attributes[1].name se putea folosi document.getElementById('id_link').attributes[1].name,
rezultatul aici este acelaşi.
- ObservaŃi că fereastra Alert va afişa "title", numele atributului, care deşi este al treilea, adăugarea în
matricea "attributes[]" se face de la dreapta şi primul element are index 0, al doilea 1 (aici 'title'), şi
tot aşa.
2. childNodes
Lucrul cu childNodes necesită cunoaşterea mai multor proprietăŃi care aparŃin de acesta, dar aici voi
prezenta un exemplu simplu ca să înŃelegeŃi cum se foloseşte. În acest exemplu avem un DIV în
cadrul căruia este un text oarecare şi o etichetă SPAN. Pentru a vedea rezultatul scriptului cu
"childNodes", un link apelează funcŃia acestui script.
Cod:

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

alt text</div>
<a href="#" onclick="test2()" title="Exemplu cu childNodes">Test 2</a>
- "document.getElementById("ex2").childNodes[1].childNodes[0]" s-ar putea traduce: primul element

( childNodes[0] ) al elementului doi ( childNodes[1]) din eticheta cu id="ex2", iar "nodeValue"
returnează valoarea.
http://kidu-kid.com
- Acest exemplu va afişa în pagină următoarele două rânduri
- Va afişa textul din SPAN, eticheta <span> cu tot conŃinutul ei este al doilea element al DIV-ului
(primul fiind sirul "Un text oarecare -"), iar şirul din cadrul etichetei SPAN este primul element al
acesteia.
3. getAttribute() şi setAttribute()
În acest exemplu sunt folosite două link-uri care acŃionează o funcŃie JS care va prelua valoarea
atributului specificat (aici 'title') şi o va afişa în fereastra Alert.
Al doilea link transmite parametrul 1, caz în care funcŃia va modifica valoarea atributului "title" din
primul link înainte de preluarea lui, rezultat care se va vedea în fereastra Alert.
Cod:

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

k 1</a> -
<a href="#" title="Link 2 - setAttribute()" onclick="test3(1)">Link 2</a>
4. href
Aici este prezentat un exemplu care modifică adresa URL adăugată în atributul 'href' al unui link.
Cod:

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

et="_blank">Jocuri</a>
- Link-ul de mai sus, deşi are scris în codul lui să deschidă pagina de jocuri, prin evenimentul
'onmouseover' care apelează funcŃia "test4()" la poziŃionarea mouse-ului pe link sa modificat valoarea
atributului 'href' şi va deschide altă pagina (aceea setată în funcŃie).
- Similar puteŃi proceda şi cu "src", care se referă la atributul 'src' din tag-urile <img>
http://kidu-kid.com
5. innerHTML
Cu innerHTML se poate prelua conŃinutul încadrat de o etichetă HTML, dar poate să şi înlocuiască cu
altul acest conŃinut, folosind inclusiv tag-uri.
În acest exemplu avem DIV-ul de la exemplu 2 şi două link-uri, acestea apelează o funcŃie JS care
pentru primul link va afişa o fereastră Alert cu tot conŃinutul DIV-ului iar pentru al doile link va înlocui
acest conŃinut cu şirul din atributul 'title' (transmis ca parametru).
Cod:

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

alt text</div>
<a href="#" title="Exemplu cu innerHTML" onclick="test5(0)">Afiseaza Alert</a

> -
<a href="#" title="Exemplu cu innerHTML -
inlocuire" onclick="test5(this.getAttribute('title'))">Modifica DIV</a>
- ObservaŃi că deşi este folosită aceeaşi expresie "document.getElementById("ex5").innerHTML",

aceasta are efecte opuse.
Când se află în dreapta caracterului '=' (ca valoare a unei variabile), această expresie obŃine
conŃinutul din eticheta HTML respectivă.
Când este scrisă în stânga egalului, această expresie va înlocui conŃinutul etichetei HTML cu valoarea
adăugatădupă egal, în dreapta.
6. style
Cu style puteŃi modifica grafic elementele din pagină, pentru aceasta se folosesc proprietăŃile şi
valorile specifice CSS. Sintaxa generală este:
document.getElementById("id").style.proprietate="valoare"
- "proprietate" şi "valoare" sunt preluate din CSS, exemplu: color (proprietate) şi blue (valoare).
- diferenŃa apare la proprietăŃile CSS compuse, cum e "font-weight", "margin-top" sau "border-top-
width" şi altele similare. În JavaScript dispare liniuŃa '-' şi cuvintele următoare se scriu cu primul
caracter majusculă, astfel pentru "font-weight" din CSS în JS este "fontWeight", iar pentru "border-
top-width" în JS este "borderTopWidth".
În exemplul prezentat aici avem un DIV în cadrul căruia este un link şi un tag SPAN care la început are
"display:none" (nu apare în pagiă). O funcŃie JavaScript care este apelată cu "onmouseover" face ca
http://kidu-kid.com
atunci când mouse-ul este pe link să apară conŃinutul din SPAN (adaugă acestuia "display:inline") şi
când mouse-ul este poziŃionat deasupra acestuia, textul devine albastru şi îngroşat.
Cod:

</script>
<div>
<a href="#" title="Exemplu cu style" onmouseover="test6(0)">Link ex6</a>
-
<span id="ex6" style="display:none;" onmouseover="test6(1)">Textul din SPAN,
ascuns</span>
</div>
7. value
Proprietatea value se foloseşte cu elemente din formular, aceasta preia sau atribue valori în câmpurile
din formular.
"value" se poate folosi şi cu proprietăŃi specifice lucrului cu formulare, în care se utilizează numele din
atributul "name".
- Pentru a folosi proprietatea "value" împreună cu "getElementById('id')", câmpul sau caseta de
formular la care se face referire trebuie să aibe atribuită un "id".
Iată un exemplu simplu care afişează într-o fereastră Alert, textul scris într-o casetă de text.
Cod:

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

<input type="text" id="ex7" />
<input type="button" value="Click" onclick="test7()" />
</form>
http://kidu-kid.com
JQuery pentru WebDesign
Acest tutorial conŃine câteva exemple practice de efecte JavaScript în care este folosit JQuery.
Tutorialul se adresează în special celor care sunt începători în utilizarea JQuery în webdesign.
JQuery este o librărie de funcŃii JavaScript. Aceasta conŃine mai multe funcŃii pentru Ajax şi lucrul cu
elemente HTML şi CSS.
Pentru a înŃelege şi aplica exemplele din acest tutorial, trebuie să cunoaşteŃi HTML şi CSS.
Cum funcŃionează JQuery
Pentru început trebuie să descărcaŃi o copie Jquery (aceasta este versiunea 1.3.2), o adăugaŃi într-un
director din cadrul site-ului dvs. şi o introduceŃi (apelaŃi) în paginile HTML (indicat în secŃiunea HEAD),
după cum puteŃi vedea în exemplul următor.
Cod:
<html>
<head>
<title>JQuery</title>
<script type="text/javascript" src="cale_catre_script/jquery132.js"></script>
</head>
<body>
...
</body>
</html>
- În acest exemplu fişierul cu librăria de funcŃii JQuery "jquery321.js" se află în acelaşi director cu
pagina HTML care-l foloseşte.
După ce aŃi adăugat acest fişier JS (JavaScript) trebuie să scrieŃi funcŃii care să spună JQuery ce să
facă.
StudiaŃi cu atenŃie diagrama următoare (click pe ea), prezintă modul de scriere a unei funcŃii care va fi
folosită cu JQuery şi explică elementele ce o compun.
http://kidu-kid.com
Adăugarea elementelor în funcŃii
Scrierea funcŃiilor care folosesc JQuery este relativ simplă dacă ştiŃi efectul pe care doriŃi să-l aplicaŃi.
Pentru începători partea mai dificilă este cunoaşterea denumirii funcŃiilor pentru efectele din librăria
JQuery şi atributele pe care le folosesc. Aceste lucruri le puteŃi învăŃa dacă studiaŃiDocumentatia
JQuery
După ce cunoaşteŃi efectul pe care doriŃi să-l aplicaŃ este important să ştiŃi cum să obŃineŃi, să
adăugaŃi într-o funcŃie elementele cărora veŃi aplica efectul.
Partea fundamentală în JQuery este selectarea unei părŃi din document, aceasta se face folosind
construcŃia $() iar între paranteze se adaugă ca parametru un şir care poate fi orice selector CSS, id
sau clasă.
- Exemplu: $("a") face referire la toate elementele de tip link (<a>) din document.
StudiaŃi şi următoarele sintaxe:
• $("#top") - obŃine (adaugă în funcŃie, pt. aplicarea efectului) elementul cu id="top"

• $("h2") - adaugă şi aplică efectul tuturor elementelor <h2>
• $("div#continut .poze") - adaugă şi aplică efectul tuturor elementelor ce au
clasa class="poze" şi sunt incluse în cadrul div-ului cuid="continut"
• $("ul li") - obŃine şi aplică efectul tuturor elementelor <li> din toate tag-urile <ul>
• $("ul li:first") - obŃine şi aplică efectul numai primului element <li> din fiecare tag <ul>
- După aceste construcŃii se adaugă, prin concaternare (folosind caracterul punct "."), ceea ce vrem să
facem cu elementul selectat, se poate adăuga un efect, exemplu: $("h3").slideToggle("slow") sau
un handle-event (click, hover, ...) ce conŃine o altă funcŃie care se execută la apelarea respectivului
handle-event, exemplu: $("h3").click(function()).
- FuncŃiile se adaugă folosind sintaxa function(). În interiorul funcŃiilor se pot adăuga coduri
JavaScript cât şi alte construcŃii şi funcŃii pentru JQuery.
În continuare vor fi prezentate câteva exemple practice prin care, dacă le studiaŃi, veŃi învăŃa şi
înŃelege singuri modul de scriere a funcŃiilor pentru JQuery şi cum se adaugă în acestea elementele
HTML şi CSS.
1. Slide panel
Pentru început iată un exemplu simplu "slide panel".

Când apăsaŃi pe un link, un panou (un cadru div) se va mişca sus/jos, ascunzând sau dezvăluind
conŃinutul acestuia.
http://kidu-kid.com
Am creat un div cu id="panou" şi un link ce are class="buton", în cadrul unui paragraf (p). Codul
HTML este următorul
Cod:
<div id="panou">
... CONTINUT ...
</div>
<p class="slide"><a href="#" class="buton">Slide Panel</a></p>
- Folosind CSS puteŃi configura grafica acestora (background, margini, poziŃie, ...).
După crearea elementelor HTML scriem (de preferinŃă în secŃiunea HEAD) funcŃia care va folosi JQuery
pentru acest efect.
Cod:
$(document).ready(function()
{
$(".buton").click(function()
{
$("#panou").slideToggle("slow");
});
});
</script>
- În cadrul "$(document).ready(function()" care este baza, se scriu funcŃiile pentru adăugarea

efectelor împreună cu elementele HTML sau CSS care activează şi primesc efectul dorit ( ready este
un eveniment din biblioteca JQuery ).
- Aici se adaugă o funcŃie care conŃine elementul (acesta poate fi un id, clasa sau tag) care va fi
acŃionat (aici este $(".buton")) şi modul acŃiunii (click), în interiorul acestei funcŃii este adăugat iar
"function()" ce va conŃine efectul JQuery (slideToggle("slow")) şi elementul HTML care va avea acest
efect ($("#panou")).
2. Efect de dispariŃie
Acest exemplu arată un efect simplu care face să dispară din fereastră elementul dorit la apăsarea pe
un text "Close".
Pentru început se scriu tag-urile HTML cu id-uri sau clase pentru fiecare. Importante sunt cadrul
(elementul care va dispare) şi elementul pentru "Close". Codul HTML pentru acest exemplu este
următorul:
Cod:
<div class="cadru">
<h3>Un titlu</h3>
<p>Aici se adauga textul, continutul dorit.</p>
<h5 class="delete">Close</h5>
</div>
- PuteŃi adăuga de mai multe ori acest cod, cu un conŃinut diferit.

- Grafica şi poziŃionarea acestor elemente se face folosind CSS.
Acum, partea importantă este scrierea funcŃiei pentru JQuery astfel când se apasă pe Close (eticheta
h5 cu class="delete") să dispară tot conŃinutul din div-ul ce are class="cadru".
http://kidu-kid.com
Similar ca în exemplul precedent, se adaugă funcŃia (cu function()) în interiorul evenimentului de bază
"ready". Această funcŃie va conŃine referinŃa la elementul care va acŃiona efectul (eticheta HTML cu
class="delete") şi modul de acŃiune (click), apoi, în cadrul acesteia se adaugă iar "function()", în
interiorul căreia se scrie elementul care va primi efectul (div-ul cu class="cadru") urmat de efectul
dorit din JQuery (aici este folosit animate({ opacity: 'hide' }, "slow"))
Codul pentru o astfel de funcŃie este următorul:
Cod:
{
$(".cadru .delete").click(function()
{
$(this).parents(".cadru").animate({ opacity: 'hide' }, "slow");
});
});
</script>
De reŃinut
- "this" face referire la elementul curent care este acŃionat,
- "parents" face referire la elementul părinte.
Astfel, "(this).parents(".cadru")" reprezintă - elementul părinte, cu class="cadru", al elementului
curent acŃionat.
În felul acesta, dacă sunt mai multe elemente cu class="cadru" ce conŃine element cu class="delete",
scriptul ştie la care din ele să aplice efectul.
3. Efect acordeon
Acest exemplu prezintă un efect de slide-bar de tip acordeon.

Ca şi la celelalte exemple, pentru început se crează codul HTML pentru cadrul cu etichetele, id-ul şi
clasele la care dorim să avem efectul şi care vor fi folosite în funcŃia pentru JQuery.
Creem un cadru principal DIV (cu class="acordeon") în interiorul căruia vom adăuga tag-uri "h3" şi
sub fiecare câte un paragraf "p", când se efectuează click pe zona 'h3' se va dezvălui conŃinutul
paragrafului corespunzător şi se va închide cel actual deschis.
Codul HTML pentru acest exemplu este următorul:
Cod:
<div class="acordeon">
<h3>Topic unu</h3>
<p>Continut, text topic unu ... .</p>
<h3>Topic doi</h3>
<p>Continut, text al doile topic ... .</p>
<h3>Intrebare unu</h3>
<p>Continut, text intrebare unu ... .</p>
<h3>Intrebare doi</h3>
<p>Continut, text pentru a doua intrebare ... .</p>
</div>
- PuteŃi adăuga de mai multe ori etichete 'h3' şi paragraf.

- Grafica şi poziŃionarea acestor elemente se face folosind CSS.
Acum vom scrie funcŃiile pentru JQuery (în interiorul evenimentului "ready").
- Prima linie ascunde toate paragrafele (<p>) din interiorul div-ului cu class="acordeon", cu excepŃia
http://kidu-kid.com
primului paragraf.
Când este acŃionat click pe zona 'h3' va activa efectul "slideToggle" pentru următorul <p> şi "slideUp"
celorlalte paragrafe comune (siblings) care sunt vizibile.
Codul pentru această funcŃie este următorul:
Cod:
{
$(".acordeon p:not(:first)").hide();
$(".acordeon h3").click(function()
{
$(this).next("p").slideToggle("slow").siblings("p:visible").slideUp("
slow");
});
});
</script>
4. Efect hover animat
Acest exemplu afişează un meniu orizontal la care este adăugat un efect ce afişează animat deasupra
fiecărui link din meniu o zonă în care apare textul din atributul "title" al link-ului respectiv.
Pentru crearea meniului se foloseşte tag-ul <ul> unde se adaugă elemente <li> şi link-uri. Partea
principală pentru aranjarea şi grafica meniului se face din CSS.
Codul HTML pentru meniul din acest exemplu este următorul:
Cod:
<ul class="meniu">
<li><a href="http://www.marplo.net" title="Viziteaza pagina principala">H
ome</a></li>
<li><a href="http://www.marplo.net/javascript" title="Curs gratuit JavaSc
ript">JavaScript</a></li>
<li><a href="http://www.marplo.net/php-mysql" title="Curs gratuit PHP-
MySQL">PHP-MySQL</a></li>
<li><a href="http://www.marplo.net/jocuri" title="Jocuri flash gratuite">
Jocuri</a></li>
</ul>
Acum trebuie scrise funcŃiile pentru JQuery, cu efectul animat.

Prima linie ataşează o etichetă <em> goală la elementul <a> din meniu (în CSS se configurează şi
acest element "em")
În continuare se adaugă o altă funcŃie care atunci când mouse-ul se află pe suprafaŃa link-ului (hover)
afişează animat suprafaŃa etichetei <em>, preia din link valoarea atributului "title" şi o adaugă într-o
variabilă "hoverText", iar valoarea acestei variabile este introdusă în cadrul <em>
Apoi o ultimă funcŃie ascunde celelalte suprafeŃe <em> ca să nu rămână vizibile când mouseul se
mută pe alt link.
Codul acestor funcŃii pentru JQuery este următorul:
Cod:
{
$(".meniu a").append("<em></em>");
http://kidu-kid.com
$(".meniu a").hover(function()
{
$(this).find("em").animate({opacity: "show", top: "-75"}, "slow");
var hoverText = $(this).attr("title");
$(this).find("em").text(hoverText);
}, function() {
$(this).find("em").animate({opacity: "hide", top: "-85"}, "fast");
});
});
</script>
5. Galerie de imagini
Acest exemplu foloseşte JQuery pentru a afişa în acelaşi cadru din pagină mai multe imagini dintr-o
galerie foto, fără a deschide altă pagină.
Începem cu crearea codului HTML. Este nevoie de 3 zone principale: prima pentru titlu, a doua pentru
afişarea imaginii şi a treia pentru galeria de imagini.
Pentru titlu adăugăm un tag <h2>, apoi pentru zona în care va fi afişată imaginea scriem o etichetă
DIV în care includem tagul pentru imaginea iniŃială (cu id="imagine"), iar pentru galeria de imagini
adăugăm un paragraf (<p> cu class="thumbs") unde se adaugă etichete de link (<a>) cu imagini
mici.
Codul HTML pentru acest exemplu este următorul
Cod:
<center>
<h2>Ilustratii</h2>
<div><img id="imagine" src="imgs/img1.jpg" alt="Imagine 1" /></div>
<p class="thumbs">
<a href="imgs/img2.jpg" title="Imagine 2"><img src=".imgs/img2thumb.jpg"
/></a>
<a href="imgs/img3.jpg" title="Imagine 3"><img src="imgs/img3thumb.jpg" /
></a>
></a>
></a>
></a>
</p>
</center>
Acum urmează scrierea funcŃiei pentru JQuery, care, atunci când este acŃionat click pe o imagine mică
din galerie, aceasta va afişa imaginea mare corespunzătoare în locul celei existente şi va modifica şi
denumirea în titlu.
Deci, ca şi în celelalte exemple, scriem funcŃia în interiorul evenimentului "ready".
- prima linie ataşeaza un element <em> în interiorul lui <h2>, element în care va fi modificat titlul
pentru fiecare imagine.
- în continuare scriem o funcŃie care atunci când este dat click pe un link din interiorul paragrafului cu
class="thumbs", adaugă valoarea atributului "href" într-o variabilă "urlimg" şi valoarea atributului
"title" într-o variabilă "altimg". Apoi se înlocuieşte valoarea atributelor "src" şi "alt" din <img
id="imagine"> cu valoarea variabilelor "urlimg" respectiv "altimg", iar pentru titlu, setează conŃinutul
lui 'em' (din h2) cu valoarea lui "altimg".
Codul acestei functii este urmatorul:
http://kidu-kid.com
Cod:
{
$("h2").append('<em></em>')
$(".thumbs a").click(function(){
var urlimg = $(this).attr("href");
var altimg = $(this).attr("title");
$("#imagine").attr({ src: urlimg, alt: altimg });
$("h2 em").html(" (" + altimg + ")"); return false;
});
});
</script>
Important: În fiecare pagină în care doriŃi să folosiŃi JQuery trebuie să adăugaŃi (de preferat în
secŃiunea HEAD, înaintea funcŃiei scrisă de dv.) apelarea la fişierul JS "jquery".
Astfel:
<script type="text/javascript" src="cale/jquery.js"></script>
- unde "cale/jquery.js" este calea şi numele fişierului cu biblioteca de funcŃii JQuery.
Coduri pentru lucrul cu date si zile
În php am scris mai demult câteva funcŃii utile pentru lucrul cu data, chestii utile peste care te poŃi
lovi zilnic...
De curând am avut nevoie de acelaşi lucru dar în javascript, aşa că m-am apucat să rescriu unele din
funcŃiile din tutorialul de php - Scripturi pentru lucrul cu date şi zile - şi a rezultat ceea ce vedeŃi mai
jos:
1. Calcularea numărului de zile între 2 date
Cod:
/*
* calcularea numarului de zile intre 2 date
*/
/*
* varianta detaliata fara functii
http://kidu-kid.com
*/
// data 1
var data1 = '2009-07-11'; // YYYY-mm-dd
// data 2
var data2 = '2009-07-13';
// separam data in bucati
var valori_data1 = data1.split('-');
// setam data in formatul acceptat pentru instantiere
var fd1 = valori_data1[1]+'/'+valori_data1[2]+'/'+valori_data1[0]; // mm-dd-
YYYY
var fd2 = valori_data2[1]+'/'+valori_data2[2]+'/'+valori_data2[0];
// setam instanta pentru data
var d1 = new Date(fd1);
// preluam timpul pentru cele 2 date
var t1 = d1.getTime();
//setam nr de milisecunde pentru 1 zi
var o_zi=1000*60*60*24
// calcularea nr de zile diferenta
var zdif = Math.ceil((t2 - t1)/(o_zi))
// afisam nr de zile diferenta
document.write('Data start: ' + data1 + '<br />');
document.write('Data stop: ' + data2 + '<br />');
document.write('Diferenta zile: ' + zdif + '<br />');
şi o altă variantă
Cod:
/*
* varianta simplificata cu functii
*/
// data 1
// data 2
var data2 = '2009-07-13';
YYYY
var fd2 = valori_data2[1]+'/'+valori_data2[2]+'/'+valori_data2[0];
// afisam nr de zile diferenta
document.write('Diferenta zile prin functie: ' + nr_zile_intre(d1, d2) + '<br
/>');
/*
* returneaza nr de zile dintre 2 date
*
* @param dt1 - valoarea instantei pentru prima data
* @param dt2 - valoarea instantei pentru a doua data
http://kidu-kid.com
*
* @return nr_zile - nr de zile diferenta
*/
function nr_zile_intre(d1, d2) {
//setam nr de milisecunde pentru 1 zi

var o_zi=1000*60*60*24;
// preluam timpul pentru cele 2 date
// calculam diferenta in milisecunde
var dif = Math.abs(t1 - t2);
// converteste milisecundele in zile
var nr_zile = Math.round(dif/o_zi);
// returnam nr de zile
return nr_zile;
}
Mai jos aveŃi un cod care afişează data calculată începând de la data specificată + nr de zile:
Cod:
/*
* afisarea unei date de la data specificata + x zile
*/
// data 1
YYYY
// nr de zile diferenta
var zile = 2;
// compunem data noua
var data_noua = d1.getTime() + 1000 * 60 * 60 * 24 * zile;
// setam instanta pentru data noua
var d2 = new Date(data_noua);
// data 2
var data2 = d2.getFullYear() + '-' + (d2.getMonth() + 1) + '-
' + d2.getDate();
// afisam data noua
document.write('Diferenta zile: ' + zile + '<br />');
http://kidu-kid.com
http://kidu-kid.com

TUTORIAL JavaScript

Încărcat de

Informații document

Drepturi de autor

Formate disponibile

Partajați acest document

Partajați sau inserați document

Opțiuni de partajare

Vi se pare util acest document?

Este necorespunzător acest conținut?

Drepturi de autor:

Formate disponibile

TUTORIAL JavaScript

Încărcat de

Drepturi de autor:

Formate disponibile

Introducere în limbajul JavaScript

JavaScript creat de compania Netscape

Browser Versiune script

JScript creat de compania Microsoft

MSIE Versiunea JScript

Versiunea AOL 16-bit PC 32-bit PC MAC

În 1996, programatorii web au început să se plângă că Netscape şi Microsoft mergeau în direcŃii

Ce puteŃi face cu JavaScript

Si iată şi câteva exemple de obiecte şi metode scrise în sintaxa punctată:

Rutine de tratare a evenimentelor:

<!DOCTYPE HTML PUBLIC "-

<!-- Aceasta linie este un comentariu

<!DOCTYPE HTML PUBLIC "-

alert("Aceasta este o fereastra de alertare")

alert('Bau, aceasta este fereastra generata cu alert')

Textul dorit trebuie plasat între ghilimele duble sau simple.

<script language="JavaScript" type="text/javascript">

Metoda confirm( ) preia un parametru (întrebarea adresată utilizatorului) şi returnează o valoare

O metodă alternativă de a scrie un bloc condiŃional este:

care este echivalentă cu:

<script language="JavaScript" type="text/javascript">

<script language="JavaScript1.5" type="text/javascript">

<a href="pagina_2.html" onClik="window.location='pagina_noua.html'; return fa

<script language="javascript" type="text/javascript">

O altă metodă de a afişa direct numele de browser este:

<script language="javascript" type="text/javascript">

Rezultatul scriptului de mai sus îl puteŃi vedea aici:

Numele browserului este: Netscape

loop="false" quality="high" bgcolor="#ffffff" width="100" height="80" name="t

Să explic puŃin în continuare ce se întâmplă în codul menŃionat mai sus.

În cazul în care verificarea va returna FALSE se înlocuieste filmul Flash cu o imagine.

Utilizatea unei bucle pentru a verifica prezenŃa plug-in-urilor

for (i=0; i<navigator.plugins.length; i++)

Această linie începe cu o instrucŃiune condiŃională plasată în interiorul buclei.

Dacă testul este satisfăcut, variabila avemQT ia valoarea "adevărat".

Care se traduce astfel:

document.write('<embed src="content/images/test.mov" width="100" height="80"><\/embed>")

Linie care de fapt afişează filmul în browser. Mai departe, linia

Folosirea buclei de tipul do-while

raspuns = prompt('Scrie numele tău', '')

În acest caz se solicită prin metoda prompt() introducerea numelui.

Crearea unei funcŃii în javascript

Apelarea unei funcŃii se poate face în mai multe moduri. Exemplu:

<input type="button" value="Alerta" onclick="atentionare()">

Iar în codul butonului HTML scriem:

<input type="button" value="Alerta" onclick="atentionare('Ai apasat butonul de alerta')" />

<input type="button" value="Mesaj 1" onclick="atentionare('Buton gresit')" />

Lucrul cu funcŃii care returnează valori

Se pot returna orice tip de valori nu doar valori booleene.

Utilizarea instrucŃiunilor switch-case

În loc de sirul de caractere

ModalităŃi de tratare a erorilor

Să încerc în continuare să explic scriptul de mai sus.

raspuns = prompt("Introduceti un numar:", "")

Afişeaza un prompter normal în care se cere să introduceŃi un număr.

alert("Radacina patrata a numarului " + raspuns + " este " + Math.sqrt(raspuns))

Aici se închide blocul try.

Sintaxa Java Script

- structuri conditionale (branch-uri)

// in conditiile acestea, c va avea valoarea false

- structuri repetitive (bucle)

- bucla for - repetiŃie pe un număr stabilit de iteraŃii

for (iniŃializare; condiŃie; operaŃie_la_final)

Codul se execută în cazul unei bucle for în următorul mod: