Javascript Curs

1.
Adaugarea JavaScript intr-o pagina HTML

Pentru a insera JavaScript ntr-un document HTML deja existent, este necesara introducerea n fisier a etichetei <script> si </script>. Aceasta eticheta necesita aributul "type", sau atributul "language" (acesta din urma este depreciat in standardul XHTML) care va specifica browserului limbajul folosit pentru interpretarea codului inclus. In interiorul etichetei <script> ... </script> vom scrie codul nostru. Pentru scrierea si executarea programelor JavaScript avem nevoie de un editor simplu de texte (cum ar fi Notepad pentru Windows sau emacs pentru Unix) si un browser (ex. Mozilla Firefox, Internet Explorer). - Atributul "language" (care insa nu este folosit in XHTML, ci doar in paginile web standard HTML) va avea urmatoarea sintaxa: language="JavaScript", aceasta specifica browser-ului ce limbaj este folosit - Atributul "type" inlocuitorul lui "language" va avea urmatoarea sintaxa: type="text/javascript", aceasta spune browser-ului ca scriptul este scris in format plaintext. Putem, de asemenea, sa introducem instructiunile JavaScript intr-un alt fisier, extern, care va avea extensia ".js", pentru editarea acestui fisier este nevoie la fel de un editor simplu de texte. Avantajul fiind ca putem folosi acelasi cod in mai multe pagini HTML si in cazul necesitatii unei modificari in codul JavaScript, modificam doar datele dintr-un singur fisier (cel cu extensia ".js"), dezavantajul acestei metode este faptul ca intr-un fisier extern ".js" nu putem folosi etichete HTML, ci numi instructiuni JavaScript. In cazul in care codul JavaScript se afla intr-un fisier extern, eticheta <script> din pagina HTML va trebui sa contina atributul "src" a carui valoare determina locatia fisierului in care se afla codul JavaScript. In fisierul extern cu extensia "js" nu trebuie sa scriem eticheta "<script>", scriem direct instructiunile scriptului. Iata un exemplu de script JavaScript scris in interiorul unei pagini web (XHTML): <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="ro"> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <title>Cod JavaScript</title> </head> <body> <script type="text/javascript"> document.write("Textul care va fi afisat pe ecran"); </script> </body> </html> Si pt. HTML: <html> <head> <title>Cod JavaScript</title> </head>
<body> <script type="text/javascript"> document.write("Textul care va fi afisat pe ecran"); </script> </body> </html> Comanda document.write este folosita pentru a tipari ceva in pagina. Rezultatul acestui script, afisat in pagina web (XHTML si HTML) va fi urmatorul: Textul care va fi afisat pe ecran Daca dorim sa incarcam scriptul dintr-un fisier extern (de exemplu "cod.js"), codul nostru in documentul HTML va arata astfel: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="ro"> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <title>Cod JavaScript</title> </head> <body> <script src="cod.js" type="text/javascript"> </script> </body> </html> - Iar fisierul "cod.js" va contine :
document.write("Textul care va fi afisat pe ecran")
Rezultatul afisat in pagina web va fi acelasi ca-n exemplele anterioare. Recomandarea HTML 4.01 specifica introducerea unei etichete <meta> in portiunea <head> a documentelor care folosesc scripturi JavaScript. Aceasta eticheta specifica limbajul prestabilit folosit in toate scripturile din pagina. Eticheta ar trebui sa arate astfel : <meta http-equiv="Content-Script-Type" content="text/javascript"> - Totusi, aceasta eticheta nu este obligatorie, scripturile functionand foarte bine si fara ea.
2. Ascunderea codului in browserele vechi

Unele browsere nu recunosc scripturile si le afisaza n pagina web ca text. Pentru a evita acest lucru putem folosi eticheta HTML pentru comentarii  delimitand cu aceasta instrictiunile JavaScript, astfel evitam aparitia scriptului in pagina web: Acest lucru se face precum puteti vedea in exemplul urmator: <script type="text/javascript"> <!-Codul scriptului
//--> </script>
3. Conventii de sintaxa
In orice limbaj, scrierea are conventii si reguli de sintaxa. Chiar si scrierea n limba romna are regulile ei de sintaxa: orice propozitie incepe cu litera mare, se termina cu un semn de punctuatie, etc.! La fel si limbajele de programare au regulile si sintaxa lor. In continuare vor fi prezentate regulile de sintaxa ala limbajului Java Script.

1. Case-sensitive - se face diferenta intre literele mari si mici, astfel cuvinte precum "exemple, Exemple" vor fi tratate diferit. 2. Punct si virgula (;) - Toate declaratiile trebuie sa se termine cu un caracter "punct si virgula" (;) (Exemplu" var1 = 3; var2 = 8;). 3. Spatiile libere - JavaScript ignora spatiile libere, tab-urile si liniile libere care apar n instructiuni, acestea sunt utile pentru a face codul mai bine structurat si usor de citit. Recunoaste doar spatiile care apar n string-uri (sirurile de caractere). Exemplu: "var1 = 2 ;" este la fel cu "var1=2;". 4. Ghilimelele - Ghilimelele simple ('') si duble ("") sunt folosite pentru a delimita sirurile de caractere (string). (Exemplu: "Invat JavaScript" sau 'Invat JavaScript'). 5. Carcactere speciale - cand scriem scripturi, apare necesitatea de a folosi in cod sau in datele de iesire, un caracter special sau o apasare de tasta , cum ar fi tasta TAB , sau o linie noua. Pentru aceasta folosim caracterul backslash "\" in fata unuia din codurile Escape , astfel : o \b - backspace \f - indica o pagina noua \n - indica o linie noua \r - imdica un retur de car \t - indica o apasare a tastei TAB \\ - indica un caracter backslash \' - indica un apostrof (ghilimele simple) \" - indica ghilimele duble
o
- De exemplu, daca dorim sa afisam un text, folosind document.write(), iar acel text trebuie sa contina ghilimele si caracter backslash "\", si anume textul (Curs "JavaScript" \ MarPlo.net), pentru a nu "deruta" scriptul in interpretarea codului, deoarece ghilimelele si backslash fac parte din sintaxa, adaugam \ in fata acestor caractere din interiorul sirului. Comanda de afisare a sirului va fi astfel: document.write("Curs \"JavaScript\" \\ MarPlo.net");
6. Comentarii - comentariile in interiorul codului sunt necesare cand dorim sa specificam rolul anumitor functii si variabile, pentru o mai usoara intelegere ulterioara a scriptului. Pentru a adauga un comentariu, pe o singura linie, in interiorul codului, incepem scrierea acestuia cu succesiunea // (Exemplu: // Comentariu). Daca dorim sa
scriem comentarii pe mai multe randuri, se foloseste /* la inceputul comentariului si */ la sfarsitul acestuia (Exemplu: /* ... comentariu pe mai multe randuri ... */) 7. Numele variabileler si functiilor - numele dat variabilelor si functiilor trebuie sa respecte urmatoarele reguli: o - primul caracter trebuie sa fie o litera, un caracter de subliniere (_) sau semnul $ - primul caracter nu poate fi un numar - numele nu trebuie sa contina spatii libere - nu se folosesc cuvinte rezervate, care fac parte din limbajul JavaScript (cum sunt "array", "status", "alert"), deoarece interpretorul programului nu va face diferenta intre aceste nume si comenzile JavaScript cu aceleasi nume.
Notiuni de baza
In aceasta lectie veti invata notiunile de baza ale programari, care sunt necesare pentru a scrie un script. Aceste notiuni sunt similare cu cele din PHP si alte limbaje de programare.
1. Folosirea variabilelor
Intr-un script (sau program) se folosesc date constante dar si date variabile care isi schimba valorile in timpul executei programului. Aceste date se numesc variabile.
Variabila = numele unei locatii din memoria calculatorului, folosita pentru a memora date.
Modul cel mai simplu de a folosi si a face referire la o astfel de data variabila este de a o denumi. Numele variabilei permite accesul la valoarea ei precum si schimbarea valorii daca este necesar. Se poate crea o variabila si sa-i atribuim o valoare prin doua metode: - Cu declaratia var
var nume = valoare
- Fara declaratia var
nume = valoare
- Unde 'nume' este numele variabilei iar 'valoare' este valoarea pe care i-o atribuim. Tipuri de variabile - Spre deosebire de alte limbaje (cum sunt Pascal sau C), JavaScript nu are tipuri fixe de date, adica permite schimbarea tipului unei variabile in cadrul scriptului, acesta poate recunoaste singur cand datele sunt de tip "sir", numerice sau alt tip. De exemplu:
var x = "xyz"; x = 8;
- Observati ca valorile de tip 'sir' (formate din litere) se scriu intre ghilimele, iar cele 'numerice' pot fi scrise si fara ghilimele. Durata de viata a unei variabile - O variabila scrisa in cadrul unei functii este o variabila locala, valoarea ei fiind recunoscuta numai in cadrul acelei functii, cand se iese din functie variabila este distrusa. Astfel, o alta functie poate declara si folosi o variabila cu acelasi nume, JS (Java Script) trateaza cele doua variabile ca fiind diferite (functiile si lucrul cu acesta vor fi explicate in lectiile urmatoare). Se pot declara si variabile, in afara oricarei functii, care sa fie folosite de toate functiile, acestea se numesc variabile globale si sunt valabile de la incarcarea paginii web pana la inchidere, in orice script JS.
2. Operatori
Pentru a lucra cu datele introduse intr-un script si a manipula valorile variabilelor se folosesc operatori Operatorii sunt simboluri si identificatori care determina felul in care sunt modificate datele si modul in care este evaluata o combinatie de expresii si variabile. JavaScript recunoaste :

- operatori binari - care necesita existenta a doi operanzi in expresie. - operatori unari - care au nevoie doar de un operand.
Operatori sunt de mai multe tipuri:
- Operatori aritmetici - Operatori de atribuire - Operatori de comparare - Operatori logici (numiti si booleeni) - Operatori pentru siruri - Operatori typeof - Operator conditional ? - Operatori pentru functii - Operatori pentru structuri de date
Acestia vor fi prezentati dataliat in lectia urmatoare
Operatorii
Cu ajutorul operatorilor manipulam, combinam si modificam datele dintr-un prrogram sau script. Acestia sunt de mai multe feluri, in aceasta lectie sunt prezentati tipurile de operatori folositi in JavaScript.
1. Operatori aritmetici
Putem spune ca operatorii aritmetici sunt principalii operatori folositi cu numere, acestia efectueaza operatiile aritmetice cunoscute: adunare (+), scadere (-), inmultire (*), impartirere (/). Pe langa acesti patru operatori, in programare sunt folositi inca trei operatori aritmetici :
Modulul (%) - acesta determina restul impartirii a doua numere Eexemplu: o 8%3 da rezultatul 2 10%2 da rezultatul 0 Incrementare (++) - Acest operator creste valoarea cu o unitate, este des folosit in programare, in lucrul cu variabile. De exemplu, daca avem variabila 'i', putem folosi operatorul de incrementare astfel: i++ care este similar cu i = i+1. Eexemplu: o 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. Eexemplu: o x = 7; x--; rezultatul va fi x = 6 Cei doi operatori de incrementare (++) respectiv decrementare (--) pot fi folositi atat ca prefix (in fata variabilei) ++i respectiv --i cat si ca sufix (dupa numele variabilei) i++ respectiv i--. Valoarea obtinuta este aceeasi, insa ordinea operatiei si rezultatul atribuirii valorii sunt diferite. Folosirea operatorului ca prefix determina in primul rand modificarea valorii si apoi are loc atribuirea acesteia. In cazul folosirii operatorului ca sufix, intai este atribuita valoarea variabilei si apoi variabila este incrementata (sau decrementata).
2. Operatori de atribuire
In cazul acestui operator JavaScript actioneaza mereu de la dreapta la stanga ; se evalueaza operandul din dreapta iar valoarea se atribuie variabilei din stanga semnului "=" . Mai jos puteti vedea un tabel din care puteti intelege modul de lucru si actiune al operatorilor de atribuire
Operator = += Exemple x=y x += y x=y x = x+y Este acelasi cu
-= *= /= %=
x -= y x *= y x /= y x %= y
x = x-y x = x*y x = x/y x = x%y
3. Operatori de comparare
Expresiile care folosesc acesti operatori pun o intrebare despre doua valori pe care le compara. Raspunsul poate fi TRUE sau FALSE. Un operator de comparatie des folosit este operatorul de identitate (egalitate), reprezentat prin doua semne egal "==". Este diferit de simplul "=", operatorul '==' compara doua valori determinand daca acestea sunt identice, adica egale atat ca valoare cat si ca tip. Operatori de comparatie sunt prezentati in tabelul urmator:
Operator == != > < >= <= Egal Diferit Mai mare Mai mic Mai mare sau egal Mai mic sau egal Semnificatie Exemple 3 == 8 returneaza FALSE 3 != 8 returneaza TRUE 3 > 8 returneaza FALSE 3 < 8 returneaza TRUE 3 >= 8 returneaza FALSE 3 <= 8 returneaza TRUE
4. Operatori logici (booleeni)

Similar cu operatori de comparatie, operatorii logici compara doua expresii si returneaza TRUE sau FALSE. Acesti operatori sunt:
&& - si (and) - Compara doua expresii si returneaza TRUE daca amandoua sunt adevarate, in caz contrar returneaza FALSE. Eexemplu: o x=5 y=8
x<7 && y>3 (returneaza TRUE) || - sau (or) - Compara doua expresii si returneaza TRUE daca cel putin una din ele este adevarata, in caz contrar returneaza FALSE. Eexemplu: o x=5 y=8 x>7 || y<3 (returneaza FALSE) ! - not - este operator unar, foloseste o singura expresie si returneaza TRUE daca expresia este falsa, daca expresia este adevarata returneaza FALSE. Eexemplu: o x=5 y=8 !(x==y) (returneaza TRUE deoarece 'x' nu este egal cu'y')
5. Operator pentru string (sir)

Un string este in general un sir de caractere, intre ghilimele. Pentru a alatura (concatena) doua variabile string impreuna se foloseste operatorul de concatenare a sirurilor + Exemplu:
t1 = "Astazi este o zi" t2 = "frumoasa" t3 = t1+t2 (Variabila 't3' va contine sirul "Astazi este o zifrumoasa")
Observati ca nu este saptiu intre 'zi' si 'frumoasa'. Pentru a adauga spatiu intre siruri, sunt doua modalitati:
1 - Adaugati spatiu intre variabilele string Exemplu: o t1 = "Astazi este o zi" t2 = "frumoasa" t3 = t1+" "+t2 (Variabila 't3' va contine sirul "Astazi este o zi frumoasa") 2 - Adaugati spatiu in una din variabilele string Exemplu: o t1 = "Astazi este o zi" t2 = " frumoasa" t3 = t1+t2 (Variabila 't3' va contine sirul "Astazi este o zi frumoasa")
6. Operatorul typeof
Acest operator returneaza tipul de date continut la momentul respectiv de operandul sau. Este util in special pentru a determina daca o variabila a fost definita cu un anumit tip de date. Studiind tabelul urmator puteti intelege modul de operare al acestuiai operator :
Operator typeof parseFloat typeof 33 typeof "un anume text" typeof true typeof window Descriere returneaza sirul 'function' returneaza sirul 'number' returneaza sirul 'string' returneaza sirul 'boolean' returneaza sirul 'object'
7. Operatori pentru functii

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

JavaScript contine si un operator conditional ? : care atribuie o valoare unei variabile pe baza unei conditii. Sintaxa de folosire a acestui operator este urmatoarea:
variabila = (conditie)?val1:val2
Modul de operare este urmatorul - se evalueaza conditia, daca este adevarata atunci variabila ia valoarea 'val1', altfel ia valoarea 'val2'. Iata un exemplu: <script type="text/javascript"> vizitator = "barbat" mesaj = (vizitator=="barbat")?"Stimate domn":"Stimata doamna" document.write(mesaj) </script> Daca variabila "vizitator" este egala cu 'barbat', variabila "mesaj" primeste valoarea 'Stimate domn", altfel primeste valoarea "Stimata doamna". Iar instructiunea de afisare "document.write()" va afisa valoarea lui "mesaj".
10. Precedenta operatorilor
Cand in expresii se folosesc mai multi operatori, JavaScript tine cont de precedenta (importanta) predefinita a fiecarui operator. Precum in aritmetica, intr-o ecuatie cu adunare si inmultire ( 2+3*4 ), daca nu sunt paranteze, se executa intai inmultirea, aceasta avand precedenta superioara fata de adunare. La fel e si cu operatorii in programare. Daca apar mai multi operatori cu aceeasi precedenta, JavaScript ii va evalua de la stanga spre dreapta. In tabelul urmator sunt prezentati operatorii in ordinea precedentei lor, unde operatorii din partea de sus a tabelului au precedenta maxima :
Operator () [] . ! ++ -* / % + < <= > >= == != && || ?: = += -= *= /= %= , Nume operator de apelare, pt. structuri de date de negare, incrementare de inmultire, impartire de adunare, scadere de comparatie de egalitate SI logic SAU logic conditionnal de atribuire virgula
Instructiuni conditionale
Partea cea mai interesanta, dar si dificila, in scrierea unui script este proectarea acestuia astfel incat sa ia decizii in timp ce este executat. Cu ajutorul instructiunilor conditionale putem face programele sa testeze diferite conditii dupa care sa decida modul de executie a datelor. In Java Script sunt urmatoarele instructiuni conditionale:
if - executa comenzile dorite cand o conditie este adevarata. if ... else - executa anumite comenzi cand o conditie este adevarata si alte comenzi cand aceasta este falsa. switch - selecteaza care comanda va fi executata.
1. Instructiunea "if"
Se poate spune ca instructiunea "if" este una din cele mai des folosite. Forma generala a acestei instructiuni este urmatoarea :
if (conditie) { codul care va fi executat daca este adevarata conditia }
- Unde 'conditie' poate fi orice expresie logica. Daca rezultatul conditiei este TRUE se executa codul dintre acolade, in caz contrar, cand conditia returneaza FALSE, se trece peste acest cod. Iata un exemplu practic. Urmatorul script afiseaza "Buna ziua" daca ora este mai mare decat 11. Se foloseste obiectul Date care determina data curenta (va fi explicat mai amanuntit in alta lectie). <script type="text/javascript"> <!-// 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 carei valoare este data curenta, apoi variabila 'time' preia numai ora din variabila 'd'. Conditia din instructiunea "if" verifica daca ora este mai mare decat 11 si in caz adevarat executa comanda dintre acolade, care afiseaza mesajul. Daca ora este mai mica decat 11 scriptul nu va executa instructiunea dintre acolade.
2. Instructiunea "if ... else"

In exemplul anterior am vazut ca este afisat "Buna ziua!" daca ora > 11 iar in caz contrar nu se intampla nimic. Folosind instructiunea "if ... else" putem stabili comenzi care sa fie executate cand conditia instructiunii "if" este FALSE. Forma generala a instructiuni "if ... else" este urmatoarea :
if (conditie) { codul care va fi executat daca este adevarata conditia } else { codul care va fi executat daca conditia este falsa }
- Unde 'conditie' poate fi orice expresie logica. Daca rezultatul conditiei este TRUE se executa codul dintre primele acoladele, care apartin de "if", in caz contrar, cand conditia returneaza FALSE, sunt executate comenzile din a doua grupa de acolade (dupa else). Iata din nou exemplul de mai sus, de asta data folosindu-se instructiunea "if ... else". Scriptul afiseaza "Buna ziua!" daca ora este mai mare decat 11, in caz contrar afiseaza 'Este ora ...'. <script type="text/javascript"> <!-// 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 carei valoare este data curenta, apoi variabila 'time' preia ora din variabila 'd'. Conditia din instructiunea "if" verifica daca ora este mai mare decat 11 si in caz adevarat executa comanda dintre primele acolade. Daca ora este mai mica decat 11 scriptul va executa comanda din grupul de acolade determinat de "else". (Observati folosirea operatorului de concatenare +).
3. Instructiunea switch
Aceasta instructiune e folosita pentru a compara o valoare cu altele dintr-o lista. Sintaxa generala a instructiuni "switch" este urmatoarea.
switch (expresie) { case valoare1: cod executat daca expresie = valoare1 break
case valoare2: cod executat daca expresie = valoare2 break case valoare3: cod executat daca expresie = valoare3 break default : cod executat daca expresie e diferit de valoare1, valoare2 sau valoare3 } - Prima data este evaluata expresia scrisa intre paranteze rotunde, apoi valoarea expresiei este comparata pe rand cu fiecare valoare determinata de "case". Daca se gaseste o identitate se executa codul asociat acelui "case". Apoi se iese din instructiunea "switch". Daca, parcurgand fiecare "case", nu se gaseste o egalitate, se executa codul de dupa "default". Prin folosirea lui "break" se opreste parcurgerea corpului instructiunii atunci cand s-a gasit o valoare egala cu 'expresie' si se iese din "switch". Iata un exemplu de script care afiseaza un mesaj in functie de zilele saptamanii: <script type="text/javascript"> <!-var d = new Date() var ziua = d.getDay() switch (ziua) { case 5: document.write("Astazi e vineri"); break case 6: document.write("Astazi e sambata"); break case 0: document.write("Astazi e duminica"); break default: document.write("Mai e pana sambata"); } //--> </script> - Am definit variabila 'd' a carei valoare este data curenta, apoi variabila 'ziua' care preia numarul zilei din variabila 'd' (duminica = 0, luni = 1, ...). Se intra in corpul instructiunii "switch" si se verifica, pe rand, fiecare valoare "case" cu valoarea variabilei 'ziua', cand se gaseste egalitatea se executa comanda asociata acelui 'case' si se iese din "switch". Daca nici una din valorile 'case' nu este egala cu valoarea variabilei 'ziua', se va executa comanda de dupa 'default', care afiseaza mesajul: "Mai e pana sambata".
Iata inca un exemplu cu "case", de data aceasta foloseste valori de tip sir (string). <script type="text/javascript"> <!-var nume = "Marius"; switch (nume) { case "Cristi": document.write("Coleg"); break case "Marius": document.write("Frate"); break case "Maria": document.write("Sora"); break default: document.write("Altcineva"); } //--> </script> Va returna Frate. Dar in general "case" e recomandat sa fie folosit cu valori numerice.
Instructiuni ciclice (repetitive)

Instructiunile repetitive se folosesc atunci cand se doreste efectuarea unei comenzi de mai multe ori. In java script putem folosi urmatoarele instructiuni ciclice:
for - la fel ca si in alte limbaje de programare, executa codul de un numar specificat de ori for ... in - executa cate un set de instructiuni pentru fiecare proprietate dintr-un obiect while - repeta codul atata timp cat o anumita conditie este adevarata do ... while - intai executa o data codul apoi il repeta atata timp cat o anumita conditie este adevarata
1. Instructiunea for
Aceasta are urmatoarea forma generala:
for (incepere_nr; conditie_nr; ciclu) { cod care va fi executat }
- Unde "incepe_nr" e folosit la 'initializare' pentru a da o valoarea initiala numarului de repetari, de multe ori prin aceasta se declara o variabila care poate fi folosita ca un contor al ciclului. "conditie_nr" verifica daca numarul de cicluri se incadreaza intr-o anumita valoare si daca rezultatul este TRUE se executa inca o data codul dintre acolade. "ciclu incrementeaza sau decrementeaza valoarea la care a ajuns contoarul ciclului, apoi aceasta valoare este verificata din nou de "conditie_nr" pana cand rezultatul este FALSE. Aceste trei expresii dintre parantezele rotunde sunt optionale, dar daca este omisa una din ele, caracterul punct si virgula ";" trebuie sa ramana pentru ca fiecare expresie sa ramana la locul ei. In interiorul instructiunii for (ca si la instructiunea "if"), intre acolade, pot fi introduse si alte instructiuni "for", sau alte instructiuni conditionale, acest lucru se numeste imbricarea instructiunilor. Iata un exemplu simplu de utilizare a instructiunii "for": <script type="text/javascript"> <!-for (x=1; x<5; x++) { document.write("<br /> x este "+x); } //--> </script> - Se atribue lui 'x' valoarea 1, se verifica conditia (x<5) care este adevarata si se executa corpul instructiunii (dintre acolade, care afiseaza "x este 1) apoi se incrementeaza valoarea lui 'x' cu o unitate (x++), acum 'x are valoarea 2. Se verifica din nou conditia (x<5) si fiindca este adevarata, se executa iar corpul instructiunii apoi se incrementeaza valoarea lui 'x', ..., si tot asa pana cand 'x' va ajunge sa aibe valoarea 5 care la verificarea conditiei returneaza FALSE, moment in care se termina executia instructiunii "for". Acest script va afisa urmatorul rezultat: x este 1 x este 2 x este 3 x este 4
2. Instructiunea for ... in

Pentru utilizarea acestei instructiuni trebuie sa aveti cunostinte despre obiectele JavaScript asa ca va trebui sa reveniti asupra ei dupa ce le veti invata - in lectiile urmatoare . Cu "for ... in" se executa cate un set de instructiuni pentru fiecare proprietate dintr-un obiect. Acest ciclul se poate executa cu orice obiect JavaScript, indiferent daca are sau nu proprietati. Pentru fiecare proprietate se executa cate o iteratie, daca obiectul nu are nici o proprietate nu se
desfasoara nici un ciclu. Instructiunea "for ... in" are urmatoarea forma generala:
for (nume_proprietate in obiect) { instructiuni }
- Unde "nume_ proprietate" este un literal de tip sir generat de JavaScript. Pentru fiecare repetare a executiei instructiunii, lui "nume_proprietate" i-se atribuie urmatorul nume de proprietate continut in "obiect", pana cand sunt folosite toate.
3. Instructiunea while
Aceasta instructiune repeta un cod atata timp cat conditia este adevarata. Comanda actioneaza similar cu instructiunea "for", dar nu include functiile de initializare si incrementare a variabilelor. Instructiunea "while" are urmatoarea forma generala:
while (conditie) { codul care va fi executat }
Iata exemplu anterior, de la instructiunea "for", aici este scris in varianta instructiunii "while": <script type="text/javascript"> <!-var x = 1; while (x<5) { document.write("<br /> x este "+x); x++; } //--> </script> - Prima data am declarat variabila 'x' dandu-i valoarea 1. Instructiunea "while" verifica conditia (aici x<5) care este adevarata si permite executarea corpului functiei dintre acolade care afiseaza "x este 1" si incrementeaza valoarea lui 'x' cu o unitate. Acum 'x' are valoarea 2, se verifica conditia, care este adevarata si se executa iar codul dintre acolade, ..., si tot asa pana cand la verificarea conditiei rezultatul este FALSE, moment in care se termina rularea instructiunii "while". Acest script va afisa urmatorul rezultat: x este 1 x este 2
x este 3 x este 4
4. Instructiunea do ... while

Forma generala a acestei instructiuni este:
do { codul care va fi executat } while (conditie)
Asemanatoare in mare parte cu instructiunea "while", instructiunea "do ... while" intai executa codul din corpul instructiunii, dupa care verifica conditia, apoi il repeta pana cant conditia returnbeaza FALSE. Astfel corpul functiei este executat cel putin o data, chiar daca conditia nu este adevarata. Iata un exemplu din care puteti intelege mai bine aceasta instructiune: <script type="text/javascript"> <!-var x = 8; do { document.write("<br /> x este "+x); x++; } while (x<5) //--> </script> - Aceasta functie afiseaza "x este 8". Observati ca desi conditia este falsa (x<5), codul dintre acolade este totusi executat o singura data.
Instructiuni complementare
Pe langa instructiunile "for" si "while" avem si alte instructiuni 'complementare' care pot fi executate impreuna cu acestea.

break - intrerupe definitiv executia unui ciclu. continue - sare peste instructiunile care au mai ramas din ciclul respectiv. label (eticheta) - permite iesirea dintr-un ciclu cu instructiuni ciclice imbricate, la o locatie specificata a scriptului.
with - se foloseste pentru a fi evitata specificarea repetata la referirea unui obiect, cand ii accesam metodele sau proprietatile.
1. Instructiunile break si continue

Cand este folosita o instructiune ciclica, aceasta continua sa se repete pana cand conditia este FALSE. Aceasta excutie poate fi schimbata cu ajutorul instructiunilor break si continue, care dau posibilitatea intreruperii ciclului sau iesirea din acesta inainte de a se ajunge la sfarsit (la ultima acolada).
break - intrerupe definitiv executarea ciclului.
Iata un exemplu din care puteti intelege modul de lucru a lui break: <script type="text/javascript"> for (x=1; x<10; x++) { document.write("<br /> X este "+x); if (x==3) { break; } } </script> Acest script va afisa urmatorul rezultat: X este 1 X este 2 X este 3 - Dupa cum puteti observa, nu au fost executate toate ciclurile instructiunii "for", conform conditiei (pana cand 'x' ar fi avut valoarea 10), executia se intrerupe cand 'x' are valoarea 3.
continue - intrerupe executia repetarii curente, inainte de a fi executate celelalte operatii din ciclu, apoi se verifica din nou conditia si se continua cu executarea ciclului.
Studiati si urmatorul exemplu, in care este folosit continue: <script type="text/javascript"> for (x=1; x<8; x++) { if (x==3 || x==5) { continue; } document.write("<br /> X este "+x);
} </script> Acest script va afisa urmatorul rezultat: X este 1 X este 2 X este 4 X este 6 X este 7 - Observati ca atunci cand 'x' are valoarea 3 sau 5, prin instructiunea "continue" se intrerupe executia codului care urmeaza dupa aceasta (aici "document.write("<br /> X este "+x);") din repetarea curenta, dar se continua cu verificare conditiei instructiunii "for" si executia ciclului.
2. Instructiunea eticheta (label)

Instructiunea label poate fi folosita impreuna cu "break" sau "continue". Aceasta este utilizata atunci cand folosim instructiuni ciclice imbricate, permitand controlul oricarei instructiuni care imbrica alte instructiuni. Studiind exemplul urmator, puteti intelege mai bine modul de utilizare a unei instructiuni label:
<script type="text/javascript"> loopX: for (x=1; x<=5; x++) { for (y=3; y<8; y++) { document.write("X este "+x+" - Y este "+y+" --" ); if (x==4) { break loopX; } } document.write("<br />") } </script> - Am etichetat o serie de instructini ciclice imbricate (aici doua "for") cu eticheta "loopX", care va fi folosita in a doua instructiune "for" imbricata, impreuna cu "break". Acest script va afisa urmatorul rezultat: X este 1 - Y este 3 --X este 1 - Y este 4 --X este 1 - Y este 5 --X este 1 - Y este 6 --X este 1 - Y este 7 -X este 2 - Y este 3 --X este 2 - Y este 4 --X este 2 - Y este 5 --X este 2 - Y este 6 --X este 2 - Y este 7 -X este 3 - Y este 3 --X este 3 - Y este 4 --X este 3 - Y este 5 --X este 3 - Y este 6 --X este 3 - Y este 7 -X este 4 - Y este 3 --
- Observati ca desi "break" este inclus in interiorul celei dea doua instructiune "for", prin specificarea lui "loopX", care este eticheta intregului ansamblu de instructiuni imbricate, se va intrerupe executia intregului ansamblu, nu numai instructiunii "for" unde este adaugat "break". Daca eliminati eticheta "loopX" veti vedea diferenta.
3 Instructiunea with
Aceasta comanda se foloseste pentru a evita referirea in mod repetat la un obiect, atunci cand ii accesam metodele sau proprietatile de mai multe ori. Orice metoda sau proprietate dintr-un bloc "with" pe care JavaScript nu o recunoaste va fi asociata cu obiectul specificat pentru acel bloc. Sintaxa acestei instructiuni este :
with (obiect) { instructiuni }
- Unde "obiect" specifica referirea la obiect care trebuie folosita, daca aceasta nu exista in blocul "instructiuni". Ajuta mult cand se utilizeaza de mai multe ori functii matematice avansate, prin intermediul obiectului "Math". (Acest obiect va fi explicat mai tarziu). In exemplul urmator este prezentat modul de folosire a instructiunii "with" : <script type="text/javascript"> <!-with(document) { write("Salut"); write("Acum nu mai este necesara folosirea obiectului ca prefix al functiei"); } //--> </script> Acest script va afisa : Salut Acum nu mai este necesara folosirea obiectului ca prefix al functiei In mod normal, pt. a afisa un text folosim sintaxa "document.write("text ...")", dar aici, prin folosirea lui 'with' impreuna cu obiectul "document", nu mai este necesara adaugarea acestuia la metoda "write", astfel se scurteaza codul scriptului.
Alert, Prompt si Confirm sunt ferestre predefinite de dialog, acestea apartin direct obiectului "Window" (despre obiecte si ierarhia acestora puteti invata in Lectia 12).
1. Fereastra Alert
Probabil ati intalnit pana acum, de mai multe ori exemple cu "Alert". Fiind un element simplu si deja cunoscut, voi face o scurta prezentare a sintaxei acestuia. Crearea ferestrelor alert se face cu sintaxa:
window.alert("mesaj")
- Unde "mesaj" este textul care va apare in fereastra Alert. Urmatorul exemplu deschide o fereastra cu mesajul "Bine ai venit". <script type="text/javascript"> <!-window.alert("Bine ai venit"); //--> </script> In browser va apare o fereastra ca in imaginea urmatoare
2. Fereastra Prompt
Fereastra Prompt se creaza cu sintaxa:
window.prompt("mesaj", "default")
- Unde "mesaj" este un text care va apare in fereastra, deasupra unei casute de text input; iar "default" este textul care va apare in casuta input. Urmatorul exemplu deschide o fereastra "Prompt". <script type="text/javascript"> <!-window.prompt("Scrieti numele", "Nume"); //--> </script> In browser va apare o fereastra ca in imaginea urmatoare
Textul pe care utilizatorul il adauga in campul din fereastra prompt poate fi preluat intr-o variabila si folosit apoi in script. Iata un exemplu in care atribuim deschiderea ferestrei Prompt unei variabile (aici "nume"), care va prelua sirul adaugat in caseta de text, apoi valoarea acestei variabile o introducem in mesajul unei ferestre Alert: <script type="text/javascript"> <!-var nume = window.prompt("Scrieti numele", "Nume"); alert("Salut "+nume+"\n Bine ai venit."); //--> </script> - Dupa ce utilizatorul scrie numele in fereastra Prompt si apasa OK se va deschide o fereastra Alert care contine in mesaj numele adaugat de utilizator. - Am folosit "\n" pentru a adauga o linie noua, dupa "nume", in textul care apare in fereastra Alert. - Incercati si singuri acest exemplu.
3. Fereastra Confirm
Fereastra de confirmare se creaza cu sintaxa:
window.confirm("intrebare")
In fereastra de confirmare va apare textul "intrebare" si doua butoane "OK" si "Cancel". Aceasta fereastra este folosita pentru a fi executata o comanda cand este apasat butonul "OK" (returneaza TRUE) si alta comanda cand este apasat butonul "Cancel" (returneaza FALSE) Urmatorul exemplu deschide o fereastra "Confirm" in care apare intrebarea "Rezultatul lui 0+0 este 0?". Daca este apasat butonul "OK" apare o fereastra Alert cu mesajul "Corect", iar daca este apasat butonul "Cancel" apare o fereastra Alert cu mesajul "Incorect" <script type="text/javascript"> <!-intrebare = window.confirm("Rezultatul lui 0+0 este 0?"); if (intrebare) alert("Corect"); else alert("Incorect"); //--> </script> In browser va apare o fereastra ca in imaginea urmatoare
Functii - 1
Functiile ajuta la divizarea mai multor sarcini pe care trebuie sa le faca un program. O functie poate contine mai multe instructiuni si comenzi care ulterior pot fi utilizate usor si de mai multe ori prin apelarea functiei care le contine. Daca un program necesita multe linii de cod, folosind functiile putem imparti codul in parti mai mici pe care le putem utiliza separat acolo unde este nevoie. Pot fi doua feluri de functii:

predefinite - cum sunt de exemplu: "parseInt(string)", "parseFloat(string)", ... Create de programator o - care returneaza o valoare o - care nu returneaza o valoare
1. Crearea (definirea) functiilor

O functie se defineste la inceputul fisierului, in sectiunea head si poate fi folosita in cadrul paginii prin apelarea ei. Scriptul care contine definirea unei functii se adauga in sectiunea "head" pentru a fi siguri ca aceasta a fost incarcata inainte de a fi apelata. Pentru crearea unei functii se foloseste cuvantul function urmat de numele pe care vrem sa-l dam functiei dupa care putem adauga intre paranteze rotunde argumentele (numite si atribute) functiei (separate prin virgula daca sunt mai multe) si intre acolade corpul functiei care contine codul care trebuie executat. Forma generala a unei functii este urmatoarea:
function nume_functie(argument1, argument, ...) { codul care va fi executat }
Argumentele sunt variabile folosite de functie si a caror valoare este preluata la apelarea functiei. Atributele nu sun obligatorii, o functie poate fi definita si fara argumente, dar se pastreaza parantezele rotunde, astfel sintaxa unei functii fara argumente este urmatoarea:
function nume_functie() { codul care va fi executat }
2. Instructiunea return
O functie care returneaza un rezultat foloseste pentru aceasta instructiunea return. Aceasta specifica valoarea pe care o returneaza functia cand este apelata. Iata un exemplu din care pouteti intelege modul de aplicare a instructiunii return:
function suma(x, y) { z = x+y; return z }
- "suma" reprezinta numele functiei (puteti da orice nume care respecta regulile limbajuli si nu sunt identice cu cele rezervate, cum ar fi "function"), "x, y" reprezinta argumentele functiei a caror valoare este data cand functia este apelata. Intre acolade avem codul care trebuie executat si care, prin instructiunea "return" va returna valoarea lui "z" care reprezinta suma lui "x" si "y". Astfel valoarea returnata de functia "suma()" va fi valoarea pe care o are "z".
3. Apelarea functiilor
Dupa ce am creat o functie, pentru a fi folosita, fuctia trebuie apelata. - O functie care contine argumente se apeleaza in felul urmator:
nume_functie(argument1, argument, ...)
- O functie fara argumente se apeleaza in felul urmator:
nume_functie()
Observati ca la apelul functiei nu se mai folosesc cuvantul "function" si acoladele In locul in care am apelat astfel o functie va fi executat corpul acelei functii.
4. Exemple de scripturi cu functii

In continuare studiati exemplele de mai jos, care folosesc functii simple, astfel veti intelege mai bine modul de lucru si executie a unei functii.
- Exemplu 1 - functie fara argument Urmatorul exemplu prezinta un script care afiseaza un text:
<html> <head> <script type="text/javascript"> <!-function exemplu1() { return document.write("Bine ati venit!") } //--> </script> </head> <body> <script type="text/javascript"> exemplu1() </script> </body> </html> - Observati ca functia "exemplu1" a fost definita in sectiunea head a documentului HTML si apoi a fost apelata in sectiunea "body", unde va afisa textul "Bine ati venit!" - Exemplu 2 - functie cu un argument Urmatorul exemplu prezinta un script care la apasarea unui buton deschide o fereastra "alert" care va afisa un text in functie de argumentul transmis. Specificatie - Sintaxa generala a functiei "alert" din JavaScript este: alert('Text'), aceasta deschide o fereastra de atentionare in care este afisat mesajul dintre paranteze "Text". <html> <head> <script type="text/javascript"> <!-function exemplu2(text) { alert(text); } //--> </script> </head> <body> <form> <input type="button" onclick="exemplu2('Buna dimineata!')" value="dimineata" /> <input type="button" onclick="exemplu2('Buna ziua!')" value="ziua" />
</form> </body> </html> Acest cod va afisa in pagina HTML urmatorul rezultat: dimineata ziua - Studiati cu atentie scriptul si modul in care acesta este apelat. Textul afisat de "alert" este preluat de la valoarea argumentului functiei "exemplu2" care l-a randul lui il preia din ceea ce este scris la apelarea functiei. - "onclick" (la click) este o comanda JavaScript care specifica momentul cand trebuie sa fie executata functia. Cand apasati cele doua butoane veti obtine o fereastra 'Alert' cu doua mesaje diferite (specificate la fiecare apelare a functiei "exemplu2") - Exemplu 3 - functie cu doua argumente Urmatorul exemplu prezinta un script care la apasarea unui buton deschide o fereastra "alert" care va afisa suma a doua numere. <html> <head> <script type="text/javascript"> <!-function exemplu3(x,y) { var z = 0; z = x+y; return alert("Suma lui "+x+" si "+y+" este: "+z) } //--> </script> </head> <body> <form> <input type="button" onclick="exemplu3(7, 8)" value="Suma" /> </form> </body> </html> Acest cod va afisa in pagina HTML urmatorul rezultat: suma
- Studiati cu atentie scriptul, modul in care au fost combinate: "alert()", sirul si valoarea argumentelor "x, y", variabila "z" si modul in care functia "exemplu3" este apelata. Cand apasati pe buton, veti obtine suma numerelor 7 si 8. In interiorul functiei pot fi folosite instructiuni complexe, cum ar fi "for", "if", "while"; care pot lua decizii diferite in functie de argumentele functiei. Depinde doar de cunostintele si imaginatia dv..
1. Modificarea numarului argumentelor

Cand creem o functie ii definim si numarul de argumente pe care le accepta, lucru de care se tine cont in momentul apelarii ei. Sunt situatii in care dorim sa transmitem functiei un numar diferit de argumente, care poate fi mai mic sau mai mare decat numarul de argumente pe care le are functia la construirea ei. Intr-o astfel de situatie putem folosi o valoare prestabilita in interiorul functiei, pentru cazul in care nu sunt transferate argumente. In continuare va fi prezentat un script care afiseaza un mesaj de salut atunci cand utilizatorul ajunge la o pagina web. Programul afiseaza un anumit mesaj daca recunoaste sau nu numele vizitatorului. Daca "utilizator" nu este "null" variabila a fost definita. Acest lucru este posibil doar daca o valoare, ca " Media", este transferata functiei. Daca variabila "utilizator" este egal cu "null" atunci scriptul evita folosirea variabilei in mesajul de salut. <html> <head> <script type="text/javascript"> <!-function mesaj(utilizator) { if (utilizator!=null) { document.writeln("Salut "+utilizator); } else { document.writeln("Bine ati venit pe site!"); } } //--> </script> </head> <body> <script type="text/javascript"> <!-document.writeln("Prima apelare a functiei mesaj() <br />"); mesaj("Media"); document.writeln("<br />A doua apelare a functiei mesaj() <br />"); mesaj();
//--> </script> </body> </html> Acest script va afisa in pagina urmatorul rezultat: Prima apelare a functiei mesaj() Salut Media A doua apelare a functiei mesaj() Bine ati venit pe site! - Studiati codul functiei si observati diferenta mesajelor din cele ddoua apelari. In unele situatii unei functii ii sunt transferate mai multe argumente decat au fost specificate la crearea ei. Valorile argumentelor suplimentare nu sunt pierdute, acestea se stocheaza intr-un tablou (sau "matrice") numit "arguments" , care exista implicit pentru orice functie. Toate argumentele sunt pastrate in acest tablou si pot fi extrase in interiorul corpului functiei. Argumentele functiei "mesaj" sunt stocate in tabloul "mesaj.arguments". Stocarea se face intr-o ordine asigurata de o "cheie" a carei prima valoare este 0. Pentru a extrage primul element din tabloul "arguments" al functiei "mesaj" folosim sintaxa "arg1 = mesaj.arguments[0]", pentru al doilea "arg2 = mesaj.arguments[1]". Toate tablourile JavaScript sunt indexate pornind de la 0. Pentru a gasi numarul total de argumente din tablou putem folosi o instructiune speciala "length" care returneaza lungimea (nr. de elemente) unui tablou (numit si "matrice"). Urmatorul exemplu atribue variabilei "nrArg" o valoare care reprezinta numarul de argumente (elemente) din tabloul "mesaj.arguments":
nrArg = mesaj.arguments.length
Folosind instructiunile prezentate mai sus (legate de tabloul "arguments"), putem crea o noua versiune a scriptului din primul exemplu. Aceasta versiune raspunde mai corect in functie de cunoasterea sau nu a numelui utilizatorilor. <html> <head> <script type="text/javascript"> <!-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]); } } } //--> </script> </head> <body> <script type="text/javascript"> <!-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> </html> Acest exemplu va afisa in pagina web urmatorul rezultat: Salut Marius Bine ai revenit Bine ati venit pe site Vrei sa devii membru ? Te poti inscrie online
2. Functii recursive
O functie JavaScript poate fi recursiva, adica se poate autoapela. O metoda buna de a demonstra capacitatea recursiva a functiilor este rezolvarea unei ecuatii factoriale. In exemplul urmator avem o functie JavaScript recursiva care afla factorialul unui numar precizat "n" (aici 7): <html> <head> <script type="text/javascript"> <!-document.writeln("Calculeaza factorialul de 7 prin functie recursiva") function factorial(n) { var rezultat; if (n>0) { 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 7" onclick="alert(factorial(7))" > </form> </body> </html> In fereastra browser-ului va apare urmatorul rezultat: Calculeaza factorialul de 7 prin functie recursiva - Functia verifica intai daca "n" este mai mare decat 0, apoi in caz afirmativ, "n" se inmulteste cu rezultatul returnat de auto-apelarea functiei cu argumentul "n-1". Cand "n" ajunge 0, aparitia cea mai imbricata a functiei se incheie si returneaza prima valoare. JavaScript incheie fiecare functie imbricata pana ce ajunge la apelarea initiala a functiei "factorial", apoi intoarce rezultatul final.
Obiectele Java Script - 1

Pentru inceput trebuie sa stiti ce sunt obiectele in programare si care sunt conceptele fundamentale ale programarii orientate spre obiecte (OOP). JavaScript nu este un program orientat pe obiecte (OO), cum sunt C++ sau Java, dar este bazat pe obiecte. In lumea din jurul nostru obiectele sunt de exemplu: o carte, o masina, un televizor; in JavaScript obiectele sunt de exemplu: un formular, o fereastra, butoane, imagini ... Toate elementele dintr-o pagina sunt vazute de JavaScript ca fiind obiecte. Obiectele au anumite proprietati, de exemplu in lumea reala televizoarele au butoane, masinile au roti; asa si in JavaScript obiectele au proprietati: formularele au buton, ferestrele au titluri. Pe langa obiecte si proprietati, in JavaScript avem si termenul "metode". Metodele reprezinta functiile pe care un obiect poate sa le faca. Ferestrele se deschid cu metoda "open()", butoanele au metoda "click()". Parantezele rotunde "()" arata ca se face referire la o metoda, nu la o proprietate. Astfel, putem rezuma ca un obiect este o colectie de proprietati si functii (metode) Sintaxa pentru folosirea obiectelor este:
obiect.prorietate obiect.metoda()
- Punctul (.) se foloseste pentru a specifica detinatorul metodei sau proprietatii. Obiectele din JavaScript le putem cataloga in trei categorii principale:
- Obiecte pe partea de client - Obiecte pe partea de server - Obiecte esentiale
Astfel avem mai multe tipuri de obiecte care pot fi folosite, pentru incepatori e bine de stiut in principal obiectele pe partea de client si cele esentiale, cum sunt: "string", "math" sau cele care vin de la etichetele HTML. Mai multe astfel de obiecte pot forma o celula (o grupa) numita "clasa", astfel, diferite obiecte incorporate pentru o executie comuna formeaza un "set de clase" care se mai numeste si "biblioteca de clase", iar mai exact pentru limbajul JavaScript "biblioteca de obiecte JavaScript", si pot fi refolosite. JavaScript are urmatoarele obiecte esentiale, predefinite:
1 - String 2 - Math 3 - Date 4 - Array 5 - Global
1. Obiectul string
String (sau sir) se foloseste pentru a prelua text. Proprietatea acestui obiect este:
length - returneaza numarul de caractere dintr-un sir (string)
Metodele obiectului string sunt urmatoarele:
anchor() - Returneaza un sir ca si "anchor" big() - Returneaza un sir cu text mare blink() - Returneaza un sir care clipeste bold() - Returneaza un sir cu litere ingrosate charAt() - Returneaza un caracter de la pozitia care este specificata charCodeAt() - Returneaza codul ASCII al unui caracter de la o pozitie specificata concat() - Returneaza doua siruri concatenate fixed() - Returneaza un sir cu caractere tip fontcolor() - Returneaza un sir cu o culoare specificata fontsize() - Returneaza un sir cu litere de o anume marime fromCharCode() - Returneaza valoare Unicode a unui caracater indexOf() - Returneaza pozitia primei aparitii a unui subsir in un sir, sau daca subsirul nu e gasit,
valoarea -1 italics() - Returneaza un sir in italic (scris aplecat) lastIndexOf() - Returneaza pozitia primei aparitii a unui subsir in un sir, sau daca acesta nu e gasit, -1 (Importanr: se incepe din dreapta sirului spre stanga) link() - Returneaza un sir ca hyperlink match() - Similar cu indexOf si lastIndexOf, dar aceasta metoda returneaza sirul specificat sir, sau "null", in locul unor valori numerice replace() - Inlocuieste intr-un sir unele caractere specificate cu altele noi specificate. search() - Returneaza un numar intreg daca sirul contine caracterele specificate, altfel returneaza -1 slice() - Returneaza un sir incepand de la pozitia index specificata small() - Returneaza un sir cu caractere mai mici split() - Imparte un sir in mai multe siruri, in functie de caracterele specificate strike() - Returneaza un sir taiat cu o linie la mijloc sub() - Returneaza un sir ca indice substr() - Returneaza un subsir specificat astfel, exemplu: 12,8 returneaza 8 caractere, incepand de la caracterul al 12-lea (se incepe de la 0) substring() - Returneaza un subsir specificat astfel, exemplu: 8,12 returneaza toate caracterele, incepand de la caracterul al 8-lea, pana la al 12-lea sup() - Returneaza un sir ca putere (superscript) toFixed(n) - Returneaza sirul numeric rotunjindu-l la o valoare cu 'n' zecimale toLowerCase() - Converteste un sir in litere mici toUpperCase() - Converteste un sir in litere mari
In continuare este prezentat un exemplu in care se foloseste proprietatea "length" pentru a afla cate elemente are un sir si metoda "indexOf" prin care verificam daca un sir dat contine un anumit cuvant specificat. Daca este gasit cuvantul, se returneaza pozitia primei litere din el, in caz contrar apare mesajul "Cuvantul nu a fost gasit" <script type="text/javascript"> var str="MarPlo.net - Cursuri, Jocuri si Anime" document.write(src+"<br />") document.writeln("Acest sir are "+ str.length + " caractere") var pos=str.indexOf("Jocuri") if (pos>=0) { document.write("Jocuri incepe de la pozitia: ") document.write(pos + "<br />") } else { document.write("Cuvantul nu a fost gasit!") } </script>
Primului caracter din sir are pozitia 0, al doilea caracter are pozitia 1, si tot asa .... Dupa ce este adaugat intr-un document HTML, acest script va afisa in pagina urmatorul rezultat: MarPlo.net - Cursuri, Jocuri si Anime Acest sir are 37 caractere Jocuri incepe de la pozitia: 22
- Iata un alt exemplu in care este foloseste metoda replace(). Avem un sir din care vom pastra doar numerele, eliminand toate celelalte caractere. <script type="text/javascript"> <!-var sir = 'Un sir test: 123ab 78%'; var sablon = /\D/g; // \D este echivalent cu [^0-9] iar /g determina urmarirea sablonului in tot sirul sir = sir.replace(sablon, ''); document.write(sir); //--> </script> - In acest exemplu avem variabila "sir" ce contine sirul complet si o variabila "sablon" ce contine o expresie regulata care reprezinta toate caracterele non-numerice, \D fiind echivalent cu [^0-9] (mai multe detalii despre expresiile regulate gasiti la: RegExp Javascript). - Expresia sir.replace(sablon, '') inlocuieste cu '' (adica nimic) caracterele din "sir" care se incadreaza in "sablon". - document.write(sir) va afisa sirul care a ramas, adica 12378
2. Obiectul Array (tablou sau matrice)

Obiectul Array (numit si matrice sau tablou de date) se foloseste pentru a stoca mai multe valori intr-un singur nume de variabila. Fiecare valoare stocata devine un element al tabloului, acesta are asociat un "numar index" (sau cheie). Cu ajutorul acestei chei se poate face referire la oricare element din tablou. Cu operatorul new se poate crea o "instanta" (incepere) a obiectului Array, ca in exemplul urmator:
var nume_colegi = new Array(4)
- Unde intre parantezele rotunde este trecut numarul de elemente ale tabloului, aici 4. Numarul de elemente, cheile, incep implicit de la 0. Pentru a da valori elementelor din tablou, se scrie numele tabloului urmat de o pereche de paranteze patrate, in interiorul carora se adauga cheia specifica fiecarui element, apoi semnul egal si valoarea dorita. Dupa cum puteti vedea in urmatorul exemplu:
nume_colegi[0] = "Cristi" nume_colegi[1] = "Ion" nume_colegi[2] = "Simona" nume_colegi[3] = "Adi"
Sau puteti scrie si astfel:
var nume_colegi = Array('Cristi', 'Ion', 'Simona', 'Adi');
- In cazul acesta cheile se subanteleg si sunt aceleasi ca in prima varianta, incepand cu 0. Pentru a face referire la un anumit element din tablou si pentru a extrage anumite valori din Array, se scrie numele tabloului si intre parantezele patrate cheia specifica acelui element; ca in exemplul urmator:
coleg = nume_colegi[0] colega = nume_colegi[2]
Astfel, variabila "coleg" va avea valoarea "Cristi" si variabila "colega" valoarea "Simona". Pentru a afla numarul de elemente ale unui Array, se foloseste proprietatea "length", ca in exemplu urmator:
nr_colegi = nume_colegi.length
Obiectul Array are urmatoarele metode:
concat() - Returneaza un tablou rezultat din concatenarea a doua tablouri join() - Returneaza un tablou format din toate elementele unui tablou concatenat reverse() - Returneaza inversul unui tablou slice() - Returneaza o parte specificata a unui tablou sort() - Returneaza tabloul ordonat
Urmatorul exemplu foloseste o instructiune "for" care parcurge un tablou (aici tabloul "nume_colegi"), extrage valoarea fiecarui element si o afiseaza. <script type="text/javascript"> <!-var nume_colegi = new Array(); nume_colegi[0] = "Cristi"; nume_colegi[1] = "Ion"; nume_colegi[2] = "Simona"; nume_colegi[3] = "Adi";
var nr_elemente = nume_colegi.length;
// Afla nr. elemente din matrice
document.write("Afiseaza numele fiecarui coleg: <br />"); for (i=0; i<nr_elemente; i++) { document.write(nume_colegi[i] + "<br />"); } //--> </script> - Am definit variabila "nr_elemente" pentru a afla numarul de elemente din matrice, pentru a-l folosi cu instructiunea "for". Este utila aceasta metoda deoarece de multe ori putem lucra cu matrici ale caror nr. de elemente nu-l stim exact. - In pagina HTML va fi afisat urmatorul rezultat: Afiseaza numele fiecarui coleg: Cristi Ion Simona Adi
Iata un alt exemplu din care puteti intelege cum se aplica metoda "sort()" si efectul acesteia. Folosim acelasi exemplu de mai sus. "sort()" sorteaza elementele din Array in ordine alfabetica (sau crescatoare in cazul valorilor numerice). <script type="text/javascript"> <!-var nume_colegi = new Array(); nume_colegi[0] = "Cristi"; nume_colegi[1] = "Ion"; nume_colegi[2] = "Simona"; nume_colegi[3] = "Adi"; var nr_elemente = nume_colegi.length; // Afla nr. elemente din matrice nume_colegi.sort(); // Aranjeaza elementele in ordine crescatoare, alfabetic document.write("Afiseaza numele in ordine alfabetica: <br />"); for (i=0; i<nr_elemente; i++) { document.write(nume_colegi[i] + "<br />"); } //--> </script> - In pagina HTML va fi afisat urmatorul rezultat:
Afiseaza numele in ordine alfabetica: Adi Cristi Ion Simona
Incercati sa creati mici exemple in care sa lucrati si cu alte tabele (create de dv.) asi instructiuni.
In aceasta lectie este continuata prezentarea si explicarea obiectelor esentiale JavaScript
1. Obiectul Date
Obiectul Date se foloseste pentru a lucra cu data zilei si timp. Sunt doua lucruri importante pe care trebuie sa le cunoasteti inainte de a folosi acest obiect:

1. Data initiala (de referinta) este 1-01-1970, nu puteti sa lucrati cu date anterioare acesteia. 2. Cand creati un obiect "Date", ora folosita de obiect este aceea de pe calculatorul client (al vizitatorului).
Pentru a crea o instanta a obiectului "Date" se foloseste operatorul new, ca in exemplu urmator:
var data = new Date
- Astfel se memoreaza data curenta intr-o variabila, aici cu numele "data". Dupa ce a fost creata instanta, se pot folosi metodele obiectului. De exemplu, daca se doreste afisat numarul zilei (care e de la 1 la 31) se scrie urmatoarea comanda (aici e folosita instanta cu numele "data"):
data.getDate()
Se pot crea si altfel obiecte Date, care pot afisa data si ora intr-un mod specificat:
new Date("Month dd, yyyy hh:mm:ss") new Date("Month dd, yyyy") new Date(yy,mm,dd,hh,mm,ss) new Date(yy,mm,dd) new Date(milliseconds)
- Unde: Month=luna, dd=ziua (cu 2 caractere), y=anul (yy e afisat cu 2 caractere iar yyyy cu 4), h=ora, m=minute, s=secunde, milliseconds=milisecunde. Astfel se pot crea variabile de data pt. fiecare obiect Date de mai sus, ca in exemplu urmator:
var data=new Date("October 15, 1996 15:16:00") var data=new Date("October 15, 1996") var data=new Date(96,10,15,15,16,00) var data=new Date(96,10,15) var data=new Date(500)
- Metodele obiectului Date:

Date() - Returneaza un obiect Date getDate() - Returneaza data (ziua) din luna (intre 1-31) getDay() - Returneaza ziua dintr-un obiect Date (intre 0-6; 0=Duminica, 1=Luni, etc.) getMonth() - Returneaza luna dintr-un obiect Date (intre 0-11. 0=January, 1=February, etc.) getFullYear() - Returneaza anul dintr-un obiect Date (patru cifre) getYear() - Returneaza anul dintr-un obiect Date (cu 2 cifre, intre 0-99). Este recomandat getFullYear getHours() - Returneaza ora dintr-un obiect Date (intre 0-23) getMinutes() - Returneaza minutele dintr-un obiect Date (intre 0-59) getSeconds() - Returneaza secunda dintr-un obiect Date (intre 0-59) getMilliseconds() - Returneaza milisecunda dintr-un obiect Date (intre 0-999) getTime() - Returneaza numarul de milisecunde pana la miezul noptii getTimezoneOffset() - Returneaza diferenta de timp intre computer si GMT getUTCDate() - Returneaza data dintr-un obiect Date in (UTC) timp universal getUTCDay() - Returneaza ziua dintr-un obiect Date in timp universal getUTCMonth() - Returneaza luna dintr-un obiect Date in timp universal getUTCFullYear() - Returneaza anul (4 cifre) dintr-un obiect Date in timp universal getUTCHours() - Returneaza ora dintr-un obiect Date in timp universal getUTCMinutes() - Returneaza minutele dintr-un obiect Date in timp universal getUTCSeconds() - Returneaza secundele dintr-un obiect Date in timp universal getUTCMilliseconds() - Returneaza millisecundele dintr-un obiect Date in timp universal parse() - Returneaza un sir ce are ca valoare numarul de millisecunde pana in January 01 1970 00:00:00 setDate() - Seteaza luna in un Obiect Date (intre 1-31) setFullYear() - Seteaza anul in un Obiect Date (four digits) setHours() - Seteaza ora in un Obiect Date (intre 0-23) setMilliseconds() - Seteaza millisecundele in un Obiect Date (intre 0-999) setMinutes() - Seteaza minutele in un Obiect Date (intre 0-59) setMonth() - Seteaza luna in un Obiect Date (intre 0-11. 0=January, 1=February) setSeconds() - Seteaza secunda in un Obiect Date (intre 0-59) setTime() - Seteaza millisecundele dupa 1/1-1970 setYear() - Seteaza anul in un Obiect Date (00-99) setUTCDate() - Seteaza data in un Obiect Date, in timp universal (intre 1-31) setUTCDay() - Seteaza ziua in un Obiect Date, in timp universal (intre 0-6. Sunday=0, Monday=1, etc.)
setUTCMonth() - Seteaza luna in un Obiect Date, in timp universal (intre 0-11. 0=January, 1=February) setUTCFullYear() - Seteaza anul in un Obiect Date, in timp universal (four digits) setUTCHour() - Seteaza ora in un Obiect Date, in timp universal (intre 0-23) setUTCMinutes() - Seteaza minutele in un Obiect Date, in timp universal (intre 0-59) setUTCSeconds() - Seteaza secundele in un Obiect Date, in timp universal (intre 0-59) setUTCMilliseconds() - Seteaza millisecundele in un Obiect Date, in timp universal (intre 0-999) toGMTString() - Converteste un Obiect Date la un sir, ce contine ora GMT toLocaleString() - Converteste un Obiect Date la un sir, ce contine ora curenta toString() - Converteste un Obiect Date la un sir
Pentru a intelege mai bine obiectul Date si modul de lucru cu metodele lui, studiati si urmatorul exemplu: <script type="text/javascript"> <!-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 intr-un document HTML, in sectiunea BODY, acest script va afisa: Afiseaza data curenta a zilei: 20.11.2010
2. Obiectul Math
Acest obiect include constante matematice si functii. Nu este nevoie sa fie creat (instantat) un obiect Math inainte de a fi folosit. Daca, de exemplu dorim sa obtinem un numar aleator intre 0 si 1, scriem comanda:
nr_aleator = Math.random
- Proprietatile obiectului Math (sunt o lista de constante matematice. Atentie! se scriu cu litera mare):

E - Returneaza constanta lui Euler (2.7182.......) LN2 - Returneaza logaritm natural din 2 LN10 - Returneaza logaritm natural din 10 LOG2E - Returneaza logaritm in baza 2 din E
LOG10E - Returneaza logaritm in baza10 din E PI - Returneaza PI SQRT1_2 - Returneaza radical din 0.5 SQRT2 - Returneaza radical din 2
- Metodele obiectului Math:

abs(x) - Returneaza valoarea absoluta din x acos(x) - Returneaza arccosinus din x asin(x) - Returneaza arcsinus din x atan(x) - Returneaza arctangenta din x atan2(y,x) - Returneaza unghiul dintre axa si un punct (x,y) ceil(x) - Returneaza cel mai apropiat intreg mai mare sau egal cu x cos(x) - Returneaza cosinus din x exp(x) - Returneaza valoarea lui E la puterea x floor(x) - Returneaza cel mai apropiat intreg mai mic sau egal cu x log(x) - Returneaza log natural din x max(x,y) - Returneaza maximul dintre x si y min(x,y) - Returneaza minimul dintre x si y pow(x,y) - Returneaza valoare a lui x la puterea y random() - Returneaza un numar aleator intre 0 si 1 round(x) - Rotunjeste pe x la cel mai apropiat intreg sin(x) - Returneaza sinus din x sqrt(x) - Returneaza radical din x tan(x) - Returneaza tangenta din x
Iata si un exemplu practic, urmatorul script rotunjeste o valoare (aici 8.35) la cel mai apropiat intreg: <script type="text/javascript"> document.write("8.35 rotunjit este: " + Math.round(8.35)); </script> Dupa ce este adaugat intr-un document HTML, in sectiunea BODY, acest script va afisa: 8.35 rotunjit este: 8
Obiecte de tip Global

Obiectele de tip Global grupeaza proprietatile si metodele de nivel cel mai inalt, fara un obiect parinte, cum sunt functiile. Obiectul Global are trei proprietati:

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

escape() - Intoarce un obiect sir in care toate caracterele non alfa-numerice sunt transformate in echivalentele lor numerice eval() - Accepta un sir de instructiuni Java Script si il evalueaza ca fiind cod sursa isFinite() - determina daca o variabila are limite finite isNaN() - determina daca o variabila este sau nu un numar. Number() - Converteste valoarea unui obiect in numar parseFloat() - transforma un sir intr-un numar de tip float (cu virgula) parseInt() - transforma un sir intr-un numar intreg string() - Converteste valoarea unui obiect in string (de tip sir) unescape() - ia o valoare hexazecimala si intoarce echivalentul sau in ISOLatin-1 ASCII
Pentru a intelege mai bine, studiati urmatorul exemplu. Aici este folosita de doua ori metoda "eval()", acesta transforma si interpreteaza argumentul primit in cod JavaScript. <script type="text/javascript"> function calculeaza(form) { form.rezultat.value = eval(form.expresie.value); } eval("alert('Bine ati venit pe site!')"); </script> <form> <p>Introduceti o expresie matematica (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.form)"> <br> Rezultatul este: <input type="text" name="rezultat" size="18"> </form> Acest cod afiseaza la inceput o fereastra Alert apoi in browser va fi afisat urmatorul rezultat:
Introduceti o expresie matematica (adunare, scadere, inmultire, impartire), de exemplu (7*8 sau 3+8/2):
Rezultatul este: Dupa apasarea butonului "Calculare", prin "onclick" este accestata functia "calculeaza()". Scriptul JavaScript din HEAD, transfera in campul cu nmele "rezultat", din FORM, valoarea obtinuta prin evaluarea expresiei adaugate in campul "expresie", calcularea expresiei fiind posibila datorita folosirii metodei "eval()".
JavaScript organizeaza toate elementele unei pagini web intr-o ierarhie. Toate elementele sunt vazute ca obiecte si fiecare obiect are anumite proprietati si metode sau alte obiecte. Cu JavaScript putem manipula usor obiectele. Pentru aceasta este importanta intelegerea ierarhiei obiectelor HTML.

JavaScript intelege fereastra browser-ului ca pe un obiect window, acesta contine anumite elemente, cum ar fi de exemplu bara de stare (status bar). In fereastra browser-ului putem incarca (afisa) un document HTML (sau si de alt tip, dar aici ne referim la HTML). Aceasta pagina din interiorul navigatorului este un obiect document.
1. Obiectul document
Acesta este unul din obiectele cele mai importante in JavaScript, este folosit foarte des. Obiectul Window lasa continutul unui document web in grija obiectului Document, acesta este responsabil de continutul afisat pe o pagina si se poate lucra cu el pentru afisarea de paginii HTML dinamice. Obiectul document contine mai multe proprietati, cum ar fi culoarea de fundal a paginii (bgcolor) sau alte obiecte, cum sunt tag-urile HTML. De retinut ca toate elementele HTML sunt proprietati ale obiectului document, si la randul lor acestea sunt obiecte. Un obiect HTML este de exemplu un formular, o eticheta DIV sau un link. Pentru a desemna obiectul sau proprietatea curenta pe care dorim sa o folosim, adaugam cuvantul this urmat de caracterul punct (.) si numele proprietatii, dupa cum vedeti in urmatoarea sintaxa:
this.nume_proprietate
Astfel aceasta expresie se adreseaza proprietatii "nume_proprietate" din obiectul curent. Obiectul document are urmatoarele proprietati:

alinkColor - culoarea unei legaturi active all - tabloul tuturor etichetelor HTML din document anchors - tabloul de obiecte "Anchor", in ordinea specificata in sursa applets - tabloul de obiecte "Applet" bgcolor - culoarea de fundal a documentului classes - tabloul claselor paginilor cu stiluri cookie - fisier cookie asociat cu documentul domain - domeniu al documentului embeds - tablou de obiecte inglobate fgcolor - culoarea textului in document forms[] - tablou de obiecte "Form" (formular) formName - specifica instanta "Form" care este accesata prin folosirea valorii atributului "name" din eticheta <form>
height - specifica inaltimea documentului in pixeli ids - tabloul identificatorilor paginii cu stiluri images - tablou de obiecte "Image" lastModified - data cand a fost modificat ultima oara documentul layers - tablou de obiecte "Layer" linkColor - culoarea legaturilor links - tablou de obiecte "Link", ce corespund tuturor link-urilor HREF din document, in ordinea specificata in sursa plugins - tablou de obiecte inglobate referrer - adresa URL (externa) a documentului la care a fost legat documentul curent tags - tabloul etichetelor paginii cu stiluri title - titlul documentului URL - adresa URL a documentului curent vlinkColor - culoarea legaturilor vizitate width - specifica latimea documentului in pixeli lastModified - URL-ul documentului
Obiectul document are urmatoarele meode:

captureEvents() - captureaza evenimentele care vor fi tratate de document close() - inchide fluxul datelor de iesire spre document contextual() - permite sa aplicam in mod selectiv un stil unui element HTML care apare intr-un anumit context specific getSelection() - intoarce textul selectat handleEvent() - apeleaza handlerul pentru evenimentul specificat open() - deschide fluxul datelor de iesire spre document releaseEvents() - elibereaza evenimentele capturate de document routeEvent() - dirijeaza evenimentele capturate spre alte obiecte write() - adauga text in document writeln() - adauga text si un caracter linie noua in document (textul pe linia lui)
In urmatorul exemplu puteti vedea cum au fost folosite proprietatile obiectului document pentru stabilirea culorii de fundal, a textului, link-urilor si titlul unei pagini web: <script type="text/javascript"> <!-document.bgColor = '#eaeafe' document.fgColor = '#fe1111' document.linkColor = '#01ff01' document.title = "Lectie JavaScript" //--> </script> Acest script seteaza culoarea de fundal a pagini "#eaeafe" (un albastru desechis), culoarea textului rosu, a legaturilor verde si titlul "Lectie Java Script".
2. Obiectul document si Formulare

Formularele de asemenea pot fi considerate si tratate ca obiecte dintr-un document HTML, acestea fiind sub-obiecte ale obiectului "document", astfel se apeleaza impreuna cu acesta. Penru a intelege mai bine lucrul cu obiectul document si cum se lucreaza cu ierarhia obiectelor, studiati si urmatorul exemplu: <html> <head> <script type="text/javascript"> <!-function afisare() { nume = document.nume_form.nume_camp.value; return nume } //--> </script> </head> <body > <form name="nume_form"> Name: <input type="text" name="nume_camp" value=""><br> <input type="button" value="Apasa" name="Buton" onClick="alert('Salut ' +afisare())"> </form> </body> </html> Acest cod va afisa in pagina urmatorul formular: Name: Dupa ce scrieti in campul "Name" un nume si apasati butonul "Apasa" va apare o vereastra Alert cu mesajul "Salut "nume" ". Ierarhia obiectelor din pagina afisata de acest exemplu este urmatoarea:
document (pagina HTML) -> Forms[0] (sau numele formularului din "name" - intregul formular) -> {Element[0] (primul camp din formular), Element[1] (butonul din formular)}
Daca de exemplu doriti sa aflati ce se introdce in primul element din formular, trebuie sa va ganditi cum sa accesati acest obiect. Pornim din vrful ierarhiei "document", urmarim calea catre primul formular "forms[0]" pana la obiectul numit "elements[0]" (se adauga toate numele obiectului pe masura ce le depasim). Astfel putem accesa primul element prin :
document.forms[0].elements[0]
Pentru a afla ce text a fost introdus, apelam valoarea acelui element. Pentru elemente din formular (tip "input") se foloseste proprietatea "value". Acesta arata valoarea casetei "input" respective (aici textul introdus in campul de text). Acum putem afla valoarea cu ajutorul urmatoruli cod:
name = document.forms[0].elements[0].value;
Valoarea este stocata in variabila "name", pe care o putem folosi in script. Astfel, putem crea o fereastra cu ajutorul liniei de cod "alert("Salut! " + name)", unde "name" va fi valoarea variabilei "name" care reprezinta textul introdus in primul element din primul formular. Daca aveti formulare de dimensiuni mari, poate deveni dificila apelarea obiectelor dupa ordinea lor, prin numere intre paranteze patrate. Daca am avea trei formulare si vrem sa apelam al cincisprezecelea element (camp) din al treilea formular, ar trebui sa scriem "document.forms[2].elements[14]". Pentru a facilita astfel de apelari, se pot da nume unice diferitelor obiecte, folosind atributul "name", dupa cum puteti vedea in exemplu urmator:
<form name="nume_form"> Nume: <input type="text" name="nume_element" value="">
Astfel "forms[0]" este de asemenea "nume_form" si in loc de "elements[0]" puteti utiliza "nume_element" (specificat cu atributul "name" in eticheta <input>). Prin urmare, in loc de a scrie "name = document.forms[0].elements[0].value;" se poate scrie: "name = document.nume_form.nume_element.value;"
DOM (Document Object Model) defineste o structura logica si standardizata a documentelor, o ordine prin care putem parcurge si edita elemente si continut din documente HTML sau XML. Structura DOM este o ierarhie de obiecte, compatibila cu a limbajului JavaScript sau cu a oricarui limbaj bazat pe obiecte. In schema urmatoare puteti vedea modelul si ierarhia obiectelor:
In ierarhia prezentata mai sus observati ca obiectele sunt structurate pe 3 nivele principale. Obiectul "window" este considerat pe cel mai inalt nivel, urmeaza apoi obiectele de pe nivelul I, nivelul II si nivelul III. Obiectul din nivelul 1, de exemplu "document", contine obiectele din nivelul 2 (de ex. "forms[]) care la randul lor pot contine alte obiecte, de nivel 3 (de ex. "Buttons"). Astfel, in JavaScript, continerea este principiul conform caruia un obiect contine alt obiect. De exemplu relatia dintre obiectul "Form" si obiectul "Button" nu este una dintre clasa si subclasa, ci una intre container si continut. Prin urmare, un obiect nu poate mosteni proprietatile si metodele altui obiect.
1. Obiecte pe partea de client

Elementele principale legate de lucrul pe partea de client din JavaScript se axeaza pe ceea ce putem face cu paginile HTML, mai exact - ceea ce poate face vizitatorul cu scriptul Javascript
incarcat in pagina HTML. Primul set de obiecte are o legatura cu navigatorul si cu etichetele HTML din acesta. Puteti accesa sau transfera continutul unei eticheta HTML (de exemplu dintr-un <div> ... </div>) utilizand id-ul acesteia, folosind expresia:

nume_var = document.getElementById("id").innerHTML; - sau nume_var = document.getElementById("id").childNodes[0].nodeValue;
- Aici, "nume_var" este o variabila care preia continutul incadrat de tag-ul HTML care are atributul id="id". Pentru a schimba sau adauga continut intr-un element HTML cu un id specific, folositi expresia de mai sus in sens invers, adica:
document.getElementById("id").innerHTML = "continut"
Unde "id" este valoarea atributului "id" din etiheta HTML respectiva iar "continut" este continutul (text, tag-uri) care va fi adaugat in aceasta eticheta HTML (va inlocui orice alt context care se afla in cadrul acestui element HTML). Majoritatea obiectelor JavaScript din nivelul 2 sunt vazute ca obiecte ale tag-urilor HTML, dupa cum puteti observa in lista de mai jos, in care sunt prezentate obiectele JavaScript si etichetele HTML corespunzatoare:
Button - <input type="button"> Checkbox - <input type="checkbox"> Hidden - <input type="hidden"> Fileupload - <input type="file"> Password - <input type="password"> Radio - <input type="radio"> Reset - <input type="reset"> Select - <select> Frame - <frame> Document - <body> Layer - <layer> sau <ilayer> Link - <a href=""> Image - <img> Area - <map> Anchor - <a name=""> Applet - <applet> Plugin - <embed> Form - <form> Submit - <input type="submit"> Text - <input type="text">
Textarea - <textarea> Option - <option>
2. Exemplu script
Urmatorul script este un exemplu practic de folosire a ierarhiei DOM din JavaScript si elementele HTML. Cu ajutorul acestui script puteti prelua datele (textul) din interiorul unui "<div> ... </div>" pentru a le adauga intr-o caseta <textarea>, astfel aceste date pot fi usor trimise la un script PHP. <html> <head> <title>Script JS</title> <script type="text/javascript"> <!-function CitesteDiv(){ valDiv = document.getElementById("div_id").childNodes[0].nodeValue; document.formular.text.value = valDiv; } // --> </script> </head> <body> <div id="div_id">Aici este textul din interiorul Div-ului</div> <form action="fisier.php" method="post" name="formular"> <textarea cols="30" rows="5" name="text" id="textul"></textarea> <br> <input type="button" value="Adauga" onclick="CitesteDiv();" /> <input type="submit" value="Trimite" /> </form> </body> </html> - Am definit functia "CitesteDiv()" care va fi apelata la apasare butonului "Adauga". In interiorul acestei functii avem variabila "valDiv" care (prin codul "document.getElementById("div_id").childNodes[0].nodeValue;") preia continutul din elementul HTML "<div>" cu id-ul "div_id", apoi codul ("document.formular.text.value") defineste valoarea casetei (cu atributul name="text") din formular egala cu valoarea variabilei "valDiv". Acest cod va afisa in pagina urmatorul rezultat: Aici este textul din interiorul Div-ului
Trimite
- Daca apasati butonul "Adauga", textul din interiorul etichetei <div> ... </div> va fi introdus in formular cara apoi prin apasarea butonului "Trimite" poate fi trimis la un script PHP (aici "fisier.php"). - Exemplu 2 Iata un alt exemplu, cu o actiune inversa celui de sus. Adica, textul introdus intr-un camp textarea, dupa apasarea unui buton va fi inclus in pagina in cadrul unei etichete HTML <div>, fara ca pagina sa fie reincarcata. Retineti, aceasta actiune este pe partea de client, vizibila doar de utilizatorul actual, nu modifica pagina originala de pe server si dupa inchiderea navigatorului textul introdus dispare. <html> <head> <title>Script JS</title> <script type="text/javascript"> <!-function ScrieDiv(){ valText = document.formular2.text2.value; document.getElementById("div_id2").innerHTML = valText; } // --> </script> </head> <body> <div id="div_id2">Aici va apare textul din formular</div><br> <form name="formular2"> <textarea cols="30" rows="5" name="text2" id="textul2"></textarea> <br> <input type="button" value="Afiseaza" onclick="ScrieDiv();" /> </form> </body> </html> - Am definit functia "ScrieDiv()" care va fi apelata la apasare butonului "Afiseaza". In interiorul acestei functii avem variabila "valText" care (prin codul "document.formular2.text2.value") preia sirul adaugat in campul "text2" din formular, apoi, prin comanda "document.getElementById("div_id2").innerHTML" transfera si afiseaza sirul in cadrul etichetei <div>, inlocuindu-l pe cel existent. Acest cod va afisa in pagina urmatorul rezultat: Aici va apare textul din formular
- Adaugati orice text in campul din formular apoi apasati butonul "Afiseaza", veti vedea rezultatul. Aici am folosit exemple cu DIV, dar puteti folosi in mod similar si pentru alte tag-uri HTML, cum sunt: <p> , <ul> , <h2> , <h3> , <span> , si altele; important fiind atributul "id" si valoarea acestuia.
In aceasa lectie sunt prezentate obiectele JavaScript de nivel 1: obiectul "navigator (browser)", obiectul "History" si obiectul "Location"
1. Obiectul Navigator
Obiectul Navigator reprezinta programul, aplicatia browser folosita pentru vizualizarea rezultatelor. Cu acest obiect putem gasi informatii despre denumirea si versiunea browser-ului, precum si alte informatii care pot fi folosite in practica. Obiectul Navigator are la randul lui doua sub-obiecte (sau obiecte copil) : "Plugin" si "Mimetype". - Proprietati ale obiectului "navigator" sunt urmatoarele:

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

javaEnabled() - functie care testeaza daca browserul cunoaste sau nu limbajul JAVA plugins.refresh() - cauta orice module plugin nou instalate preference() - permite citirea si stabilirea diverselor preferinte ale utilizatorului in browser taintEnabled() - testeaza daca este activata contaminarea datelor
Urmatorul script afiseaza proprietatile si metodele navigatorului (browser-ului) folosit:
<body> <script type="text/javascript"> <!-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> In pagina dv. acesta afiseaza urmatorul rezultat: Nume cod :Mozilla Nume browser :Netscape versiune :5.0 (Windows; ro) limbaj :ro MIME Type :[object MimeTypeArray] Platforma :Win32 Plugin-uri :[object PluginArray] Agent :Mozilla/5.0 (Windows; U; Windows NT 6.1; ro; rv:1.9.2.12) Gecko/20101026 Firefox/3.6.12 ( .NET CLR 3.5.30729)
2. Obiectul History
Navigatoarele web au o caracteristica numita "History" care permite urmarirea locatiilor pe care le-ati vizitat. Acest obiect contine un tablou (Array) cu paginile vizitate de client, in cadrul unei ferestre, un istoric al paginilor vizitate. Obiectul History permite navigarea inapoi in lista istoric la paginile care au mai fost vizitate in cadrul aceleasi ferestre. - Proprietatile obiectului "history" sunt urmatoarele"

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

back() - incarca ultima adresa URL din lista istoric forward() - incarca urmatoarea adresa URL din lista istoric
go(x) - incarca o adresa URL, echivalenta cu un salt la numarul "x" (pozitiv sau negativ) din lista istoric
Daca dorim intoarcerea inapoi cu 3 pagini in lista istoric, putem folosi o functie si obiectul "History" ca in exemplul urmator: <script type="text/javascript"> <!-function inapoi3 { window.history,go(-3); } //--> </script> - Unde "inapoi3" este numele functiei si (-3) reprezinta numarul de pagini la care se face saltul, pornind de la pagina curenta, negativ face saltul inapoi iar daca numarul dintre paranteze este pozitiv face saltul inainte in lista istoric.
3. Obiectul Location
Acest obiect contine date despre originea unei pagini web, stocheaza informatii despre o adresa URL dintr-o fereastra specifica. - Proprietatile obiectului "location" sunt urmatoarele"

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

reload() - reincarca adresa URL curenta in fereastra de browser replace() - incarca noua pagina transferata in browserul curent
De exemplu, daca doriti sa preluati intr-un script JS parti din adresa URL, si anume domeniul si calea catre pagina curenta sau toata adresa (fara protcol, care de obicei e "http:" ori "https":), puteti folosi modelul urmator: <script type="text/javascript"> <!-function get_url() {
var domeniu = window.location.hostname; // Preia numele domeniului din adresa URL var cale = window.location.pathname; // Preia cale ce reprezinta directorul si pagina curenta var url = domeniu+cale; // Compune variabilele pt. a forma adresa URL (fara protocol) alert("Adresa paginii este: \n" + url); } //--> </script> <form action=""><input type="button" value="Click" onclick="get_url()" /></form> - Acest script va avea urmatorul rezultat, va afisa in pagina butonul de mai jos care, dupa ce veti da click, va afisa o fereastra alert cu domeniul si adresa paginii curente. - Studiati scriptul si comentariile din codul lui. Daca doriti sa regasiti portiunea de protocol a adresei URL curente, puteti folosi urmatorul exemplu : <script type="text/javascript"> var protocol = window.location.protocol; </script> - Observati modul de lucru bazat pe obiecte. Intai se adauga obiectul de rang superior ( window ) apoi, dupa un caracter punct (.) se adauga urmatorul sub-obiect in care vrem sa lucram (aici "location"), si dupa un caracter punct adaugam proprietatea acestui obiect la care vrem sa facem referire.
Pentru o mai buna invatare, incercati sa creati singuri si alte exemple folosind si alte proprietati si metode ale obiectelor prezentate in lectie.
In aceasta lectie sunt prezentate subobiecte ale obiectului "Navigator" si "Document", care in ierarhia generala pot fi considerate obiecte de nivel doi.
1. Obiectul Mimetype
Numele acestui obiect vine de la Multipurpose Internet Mail Extensions (extensii aduse serviciului de posta electronica) si este un subobiect al obiectului "Navigator". Mimetype permite accesarea informatiilor despre tipurile MIME pe care le recunosc modulele plugin ale browserului. Acesta, ca si obiectul "Plugin", nu sunt recunoscute de Internet Explorer (cel putin pana in versiunea 7). Proprietati ale obiectului "Mimetype" sunt urmatoarele :
description - contine descrierea obiectului "Mimetype" enabledPlugin - contine modulul plugin pentru un obiect "Mimetype" specific suffixes - contine extensia de fisier pentru "Mimetype" type - contine reprezentarea de tip sir a obiectului "Mimetype"
2. Obiectul Plughin
La fel ca si "Mimetype", nici obiectul Plughin nu este recunoscute de Internet Explorer. Acest obiect face referire la modulele plugin instalate pentru browser si contine un tablou de elemente si tipuri MIME tratate de fiecare modul plugin instalat. Obiectul "Plugin" are o singura metoda legata direct de el : metoda "plugins.refresh()", care apartine de obiectul "navigator". Aceasta metoda permite reconstruirea tabloului de module plugin. Proprietatile obiectului "Plugin" sunt urmatoarele :
description - face referire la o descriere a modulului plugin filename - face referire la numele fisierului unui program plugin length - face referire la numarul de tipuri MIME continute in tablou name - face referire la numele modulului plugin
3. Obiectul Anchor
Acest obiect este un text sau o imagine in pagina HTML care poate fi tinta unei legaturi hipertext. "Anchor" este un obiect JavaScript foarte putin important si folosit rar, totusi e bine sal cunoasteti Proprietatie obiectului "Anchor" sunt urmatoarele :
name - nume care ofera acces la ancora de la o legatura text - textul care apare intre etichetele <a> si </a> x - coordonata x a ancorei y - coordonata y a ancorei
4. Obiectul Area
Obiectul Area permite sa definim o suprafata dintr-o imagine ca fiind o harta de imagini. Atributul "href" al unui obiect "<area>" este incarcat intr-o fereastra tinta atunci cand vizitatorul executa click pe o locatie specificata. Mai multe detalii despre hartile de imagini HTML gasiti la pagina Harti de imagini. Acest obiect are o singura metoda:
handleEvent() apeleaza handlerul de evenimente asociat acestui eveniment
Proprietatie obiectului "Area" sunt urmatoarele :
hash - portiunea de adresa URL care este ancora, inclusiv semnul diez ( # ) host - numele calculatorului gazda (adresa IP) si portul specificat in adresa URL hostname - numele calculatorului gazda specificat in adresa URL href - intreaga adresa URL pathname - calea fisierului specificat in adresa URL, incepand cu simbolul / port - portul specificat in adresa URL protocol - protocolul specificat in adresa URL, inclusiv caracterul doua puncte ( : ) search - partea de cautare a adresei URL, inclusiv caracterul initial semnul intrebarii (? ) target - numele ferestrei tinta in care ar trebui afisata adresa URL text - textul care apare intre etichetele <area> si </area> x - coordonata x a suprafetei y - coordonata y a suprafetei
5. Obiectul Applet
Obiectul Applet reprezinta echivalentul JavaScript al etichetei HTML <applet>. Acest obiect adreseaza un applet Java. Aceste obiecte JavaScript nu au metode proprii, dar in practica putem folosi JavaScript ca sa accesam metodele unui anumit applet scris in limbajul Java. Proprietatile obiectului "Applet" sunt toate campurile publice ale respectivului applet Java, iar metodele sunt toate metodele publice ale acestuia.
6. Obiectul Layer
Si acesta este un obiect cu anumite particularitati, este recunoscut doar de browserele Netscape, Mozilla si permite limbajului JavaScript sa acceseze straturile din interiorul documentului. Utilizarea acestui obiect necesita cunostinte DHTML. Proprietatie obiectului "Layer" sunt urmatoarele :
above - specifica stratul de deasupra background - face referire la imaginea de fundal a stratului below - specifica stratul de dedesubt bgColor - face referire la culoarea de fundal a stratului
clip.bottom - face referire la partea de jos a suprafetei decupate a stratului clip.height - face referire la inaltimea suprafetei decupate a stratului clip.left - face referire la partea stanga a suprafetei decupate a stratului clip.right - face referire la partea dreapta a suprafetei decupate a stratului clip.top - face referire la partea de sus a suprafetei decupate a stratului clip.width - face referire la latimea suprafetei decupate a stratului document - face referire la obiectul "Document" care contine stratul left - face referire la coordonata X a stratului name - face referire la numele stratului pageX - face referire la coordonata X, relativ la document pageY - face referire la coordonata Y, relativ la document parentLayer - face referire la stratul containe rsiblingAbove - face referire la stratul de deasupra in "zIndex" siblingBelow - face referire la stratul de dedesubt in "zIndex" src - face referire la adresa URL sursa pentru strat top - face referie la coordonata Y a stratului visibility - face referire la starea de vizibilitate a stratului window - face referire la obiectul "Window" sau "Frame" care contine stratul x - face referire la coordonata X a stratului y - face referire la coordonata Y a stratului zIndex - face referire la ordinea z-relativa a acestui strat in raport cu fratii lui
Metodele obiectului "Layer" sunt urmatoarele :
captureEvent() - specifica tipul de evenimente care sa fie capturate handleEvent() - apeleaza handlerul pentru evenimentul specificat load() - incarca o noua adresa URL moveAbove() - deplaseaza stratul deasupra altui strat moveBelow() - deplaseaza stratul sub alt strat moveBy() - deplaseaza stratul intr-o pozitie specificata moveTo() - deplaseaza coltul din stanga sus al ferestrei la coordonatele specificate ale ecranului moveToAbsolute() - modifica pozitia stratului in pagina, conform coordonatelor specificate in pixeli releaseEvents() - stabileste ca stratul sa elibereze evenimentele capturate de tipul specificat resizeBy() - redimensioneaza stratul cu valorile de inaltime si latime specificate resizeTo() - redimensioneaza stratul la valorile de inaltime si latime specificate
7. Obiectul Link
Obiectul link permite lucrul cu legaturi (link-uri) in cadrul codului JavaScript. Deoarece un link reprezinta un URL care face referire la o alta pagina HTML sau la alta destinatie, este asemanator cu obiectul "Location" (care continea aceleasi informatii pentru pagina HTML curenta).
Acest obiect are o singura metoda:
handleEvent() apeleaza handlerul pentru evenimentul specificat
Proprietatie obiectului "Link" sunt urmatoarele :
hash - reprezinta o denumire de ancora in adresa URL pentru legatura, care cu caracterul diez ( # ) host - reprezinta portiunea de calculator gazda din adresa URL asociata cu o legatura hostname - reprezinta portiunea de nume al calculatorului gazda din adresa URL asociata cu o legatura href - reprezinta adresa URL completa asociata cu o legatura pathname - reprezinta portiunea numelui de cale a legaturii URL port - reprezinta portiunea de port a legaturii URL protocol - specifica portiunea de protocol a legaturii URL search - reprezinta portiunea de interogare a legaturii URL target - reprezinta numele obiectului "Window" in care este afisata legatura x - face referire la coordonata X a legaturii y - face referire la coordonata Y a legaturii text - textul folosit pentru crearea legaturii
- Ati intalnit de mai multe ori expresia "hanler de evenimente", pentru a intelege ce reprezinta, vedeti Lectia 18
Obiectele de nivelul 3 sunt subobiecte ale obiectului "Form". La fel cum imbricati (adAaugati) elementele HTML in interiorul etichetelor <form>, aceste obiecte sunt imbricate in interiorul obiectului "Form".
1. Obiectul Button
Java Script are trei obiecte buttons: Button, Submit si Reset. Fiecare din ele are o reprezentare a unei etichetei HTML. Obiectul Button este un buton generic, la care, pentru a fi folosit pt. o anumita functie, trebuie sa-i adaugam linii de cod specifice, dar celelalte doua: Submit (trimite datele la un script) si Reset (sterge datele noi completate in formular); au scopuri specifice. Totusi, se poate sa folosim un obiect "Button" pentru a avea acelasi rol ca si obiectul "Submit" (apeland Form.submit()), sau ca obiect "Reset" (apeland Form.reset()).
Proprietati ale obiectului "Button" sunt urmatoarele :
form - returneaza obiectul Form al carui membru este butonul name - returneaza sirul specificat in atributul name al etichetei HTML <input> type - returneaza sirul specificat in atributul type al etichetei HTML <input> value - returneaza sirul care apare in reprezentarea grafica a unui buton, afisata in browser
Metode ale obiectului "Button" sunt urmatoarele :
blur() - dezactiveaza butonul click() - apeleaza un eveniment click pentru butonul respectiv. focus() - eveniment de activare a butonului handle Event() - transfera un eveniment handlerului de eveniment corespunzator
2. Obiectul Checkbox
Acest obiect reprezinta caseta de validare HTML dintr-un "Form", care permite vizitatorului sa specifice o valoare "DA" sau "NU", ori "true" sau "false". Proprietati ale obiectului "Checkbox" sunt urmatoarele :
checked - returneaza o valoare booleana care determina daca este bifata caseta de validare defaultChecked - returneaza o valoare booleana care pastreaza starea initiala a casetei de validare. Este stabilita cu atributul "checked" form - returneaza obiectul Form al casetei de validare name - returneaza sirul specificat in atributul name al etichetei HTML <input> type - returneaza sirul specificat in atributul type al etichetei HTML <input> value - returneaza o valoare returnata cand formularul este inaintat
Metode ale obiectului "Checkbox" sunt urmatoarele :
blur() - dezactiveaza caseta de validare click() - apeleaza un eveniment click pentru caseta de validare respectiva. focus() - eveniment de activare a caseta de validare handle Event() - transfera un eveniment handlerului de eveniment corespunzator
3. Obiectul FileUpload
Acest obiect este echivalentul elementului folosit pentru incarcarea fisierelor. Cu Java Script nu se poate face prea multe cu acest obiect decat facand referire la proprietatile sale.
Proprietati ale obiectului "FileUpload" sunt urmatoarele :
form - face referire la obiectul Form ce contine caseta FileUpload name - contine sirul specificat in atributul name al casetei FileUpload type - contine sirul specificat in atributul type al casetei FileUpload value - contine sirul care specifica numele caii fisierului pt. upload
Metode ale obiectului "FileUpload" sunt urmatoarele :
blur() - dezactiveaza caseta FileUpload focus() - activeaza caseta FileUpload handle Event() - transfera un eveniment handlerului de eveniment corespunzator select() - selecteaza suprafata de adaugare a datelor pentru caseta FileUpload.
4. Obiectul Hidden
Acest obiect se foloseste pentru stocarea anumitor date care vor fi transferate unei prelucrari pe server. Datele stocate in obiectul "hidden" sunt ascunse, nu apar vzibile in browser. Proprietati ale obiectului "Hidden" sunt urmatoarele :
form - face referire la formularul ce contine obiectul Hidden name - contine numele obiectului Hidden type - contine sirul specificat in atributul type al casetei Hidden value - contine sirul specificat in atributul "value" al obiectului Hidden
5. Obiectul Password
Obiectul password este asemanator cu obiectul "text", diferenta fiind ca toate caracterele introduse in cazeta "Password" sunt afisate cu "*" pentru a nu se vedea textul introdus. Proprietati ale obiectului "Password" sunt urmatoarele :
defaultValue - face referire la atributul "value" al casetei pt. parola din formularul HTML form - face referire la obiectul Form ce contine caseta pt. parola name - contine sirul specificat in atributul name al pt. parola type - contine sirul specificat in atributul type al casetei pt. parola value - face referire la continutul curent din caseta pt. parola
Metode ale obiectului "Password" sunt urmatoarele :
blur() - dezactiveaza caseta pt. parola focus() - activeaza caseta pt. parola handle Event() - transfera un eveniment handlerului de eveniment corespunzator select() - selecteaza textul adaugat in caseta pt. parola.
6. Obiectul Radio
Butoanele radio sunt controale dintr-un formular HTML care se anuleaza reciproc, astfel daca este selectat un buton radio, toate celelalte butoane din set sunt neselectate. Setul de butoane se defineste avand aceasi proprietate "name" pentru toate butoanele radio. Proprietati ale obiectului "Radio" sunt urmatoarele :
checked - retrneaza o valoare care determina daca este bifat obiectul radio defaultChecked - returneaza o valoare care pastreaza starea initiala a obiectului Radio, care se stabileste cu atributul "checked" al etichetei <input> respective form - returneaza obiectul Form ce contine obiectul Radio name - contine sirul specificat in atributul name al etichetei <input> type - contine sirul specificat in atributul type al etichetei <input> value - face referire la atributul value al etichetei <input>
Metode ale obiectului "Radio" sunt urmatoarele :
blur() - dezactiveaza obiectul Radio click() - apeleaza un eveniment "click" pt. obiectul Radio focus() - activeaza un buton radio handle Event() - transfera un eveniment handlerului de eveniment corespunzator
In aceasta lectie se continua prezentarea celorlalte obiecte de nivel 3 si obiectul de nivel 4, "Option".
1. Obiectul Reset
Acest obiect este asociat butonului "reset" dintr-un formular HTML, cand butonul este actionat sterge toate datele noi introduse in formular, stabilind campurile la valoarea lor initiala. Proprietati ale obiectului "Reset" sunt urmatoarele :
form - returneaza obiectul Form ce contine butonul name - contine sirul specificat in atributul name al etichetei <input> corespunzatoare butonului
type - contine sirul specificat in atributul type al etichetei <input> value - returneaza sirul adaugat in atributul value din eticheta <input> a butonului
Metode ale obiectului "Reset" sunt urmatoarele :
blur() - dezactiveaza butonul click() - apeleaza un eveniment "click" pt. butonul respectiv focus() - activeaza butonul
2. Obiectul Submit
Acest obiect este asociat butonului "submit" dintr-un formular HTML, cand butonul este actionat trimite datele din formular spre calea specificata in atributul "action" din eticheta <form>, pentru a fi procesate (de exemplu, la un script PHP). Proprietati ale obiectului "Submit" sunt urmatoarele :
form - returneaza datele din intreg formularul ce contine butonul "submit" name - returneaza sirul specificat in atributul name al etichetei <input> corespunzatoare butonului type - returneaza sirul specificat in atributul type din eticheta <input> a butonului "submit" value - returneaza sirul adaugat in atributul value din eticheta <input> a butonului
Metode ale obiectului "Submit" sunt urmatoarele :
blur() - dezactiveaza butonul click() - apeleaza un eveniment "click" pt. butonul respectiv focus() - activeaza butonul handle Event() - apeleaza handlerul pt. evenimentul specificat
3. Obiectul Select
Acest obiect face referire la caseta cu lista de selectare si lista derulanta dintr-un formular HTML, ambele permit utilizatorului selectarea unor valori dintr-o lista predefinita. Dintr-o lista derulanta se poate selecta numai o singura valoare iar dintr-o caseta cu lista de selectare se pot selecta mai multe valori. . Obiectul select poate apare ca lista derulanta (in mod initial) sau ca lista de selectare daca se specifica proprietatea "multiple" ca adevarata (true). Proprietati ale obiectului "Select" sunt urmatoarele :
form - returneaza obiectul Form ce contine lista de selectare length - returneaza numarul de optiuni din lista de selectare
name - returneaza sirul specificat in atributul name al etichetei HTML corespunzatoare type - returneaza sirul specificat in atributul type al etichetei HTML (pentru instantele select ce contin atributul "multiple" returneaza "select-multiple", iar pentru cele fara acest atribut returneaza "select-one") options - returneaza un tablou ce contine toate elementele din caseta de selectare. Elementele sunt definite cu eticheta HTML <options>. aceasta proprietate are doua subproprietati: "length" si "selectedIndex" selectedIndex - returneaza un numar care specifica indicele optiunii selectate din caseta de selectare
Metode ale obiectului "Select" sunt urmatoarele :
blur() - dezactiveaza caseta de selectare click() - apeleaza un eveniment "click" pt. caseta de selectare handleEvent() - transfera un eveniment handlerului de eveniment corespunzator
4. Obiectul Text
Acest obiect este reprezentarea casetei de tip "text" dintr-un formular HTML. Obiectul text serveste ca unealta de capturare a datelor dintr-o caseta de tip "text". Proprietati ale obiectului "Text" sunt urmatoarele :
defaultValue - returneaza valoarea casetei de text, specificate de atributul value. form returneaza obiectul Form ce contine caseta de text name - returneaza sirul specificat in atributul name al etichetei HTML corespunzatoare type - returneaza sirul specificat in atributul type al etichetei HTML value - returneaza valoarea afisata in caseta de text
Metode ale obiectului "Text" sunt urmatoarele :
blur() - dezactiveaza caseta de text focus() - activeaza caseta de tip text handleEvent() - transfera un eveniment handlerului de eveniment corespunzator select() - selecteaza textul din caseta de text
5. Obiectul Textarea
Asemanator cu obiectul "Text", obiectul Textarea este reprezentarea casetei de tip "textarea" dintr-un formular HTML. Aceasta caseta permite adaugarea mai multor linii de text in acelasi camp (caseta). Proprietati ale obiectului "Textarea" sunt urmatoarele :
defaultValue - returneaza valoarea zonei de text, specificate intre etichetele <textarea> form - returneaza obiectul Form ce contine caseta textarea name - returneaza sirul specificat in atributul name al etichetei HTML corespunzatoare type - returneaza sirul specificat in atributul type al etichetei HTML value - returneaza valoarea afisata in caseta textarea
Metode ale obiectului "Textarea" sunt urmatoarele :
blur() - dezactiveaza zona de text focus() - activeaza zona de text handleEvent() - transfera un eveniment handlerului de eveniment corespunzator select() - selecteaza textul din campul de text
6. Obiectul Option (nivel 4)

Acest obiect este singurul obiect de nivel 4, acesta face referire la elementele <option> definite intre etichetele <select>. Obiectul option este un subobiect a obiectului "Select". Proprietatile obiectului "Option" sunt urmatoarele :
defaultSelected - face referire la optiunea care este selectata in mod prestabilit in caseta de selectare index - face referire la locatia indexata a unui element in tabloul "Select.options" (incepe cu 0) selected - face referire la valoarea selectata a casetei de selectare text - face referire la textul pentru optiune value - face referire la vloarea care este returnata cand este selectate optiunea
Evenimentele sunt elemente foarte importante in programarea JavaScript. Acestea sunt actiuni provocate de cele mai multe ori de vizitatorul paginii. Daca vizitatorul apasa un buton din pagina se provoaca evenimentul "Click". Daca mouse-ul este deasupra unui link, se declanseaza un eveniment "MouseOver". JavaScript poate reactiona la unele evenimente. Aceasta se poate realiza cu ajutorul "eventhandlers" (manageri de evenimente sau gestionar de evenimente). Handlerele de evenimente se adauga ca atribute ale etichetelor HTML. De exemplu, daca dorim sa apelam o functie "nume_functie()" de fiecare data cand s-a modificat un anumit obiect Text, procedam astfel: atribuim functia "nume_functie()" handlerului de eveniment "onChange" al obiectului Text respectiv, ca in exemplul de mai jos:
<input type="text" size="25" name="nume" onChange="nume_functie(this)">
- "onChange" este atribut al etichetei <input>, a carui valoare, intre ghilimele, este functia "nume_functie()". In locul functiei dintre ghilimele putem sa scriem direct tot codul din functie,
separand prin caracterul ; comenzile JavaScript (acest lucru este nerecomandat in cazul unui cod mare).
1. Evenimentele JavaScript
In continuare este prezentata o lista cu evenimentele care pot fi folosite in programarea JavaScript:
onClick - Se executa la apasarea unui click pe un obiect.(document, link, buton, checkbox, buton radio, buton reset sau submit) onDblClick - Executa actiunea la efectuarea a doua clickuri unul dupa altul on MouseOver - Actioneaza cand se pozitioneaza mouse-ul deasupra unui link sau unei imagini onMouseOut - Actioneaza cand se muta mouse-ul de pe un hiperlink sau o imagine onMouseMove - Actioneaza cand se misca mouse-ul onMouseDown - Actioneaza cand tinem apasat unul din butoanele mouse-ului, pe un document, buton sau link onMouseUp - Actiunea se executa atunci cand este eliberat degetul de pe unul din butoanele mouse-ului onFocus - Actiunea apare cand este activat un obiect camp: caseta password, camp text, bloc de text, camp FileUpload dintr-un formular HTML. onChange - Actiunea apare cand se modifica continutul unui camp dintr-un formular HTML (o parola, text, bloc de text, sau FileUpload) si cand acesta pierde focalizarea onBlur - Este inversul lui "onFocus()", este declansat atunci cand un obiect nu mai este activ, prin trecerea la o alta resursa onLoad - Actioneaza cand browserul a terminat de incarcat un document, imagine sau toate Frame-urile dintr-un <FRAMESET> onUnload - Actiunea apare cand se iese din un document si se incarca un altul. onKeydown - Actiunea apare cand se apasa o tasta onKeyUp - Actiunea apare dupa ce am terminat de apasat pe o tasta onKeyPress - Apare la apasarea unei taste (precede "KeyDown") onSubmit - Actiunea apare la inaintare (trimiterea) unui formular onReset - Actiunea apare la reinitializarea unui formular onSelect - Actiunea apare cand utilizatorul selecteaza text dintr-un obiect Text sau Textarea. onAbort - Actiunea se executa in momentul in care se renunta la incarcarea unei imagini, ferestre onError - Actiunea apare cand actiunea de incarcare a unei imagin sau document esueaza. onMove - Actiunea se declanseaza cand se comanda deplasarea ferestrei sau cadrului onResize - Actiunea se declanseaza atunci cand se comanda redimensionarea ferestrei sau cadrului
In continuare sunt prezentate obiectele impreuna cu evenimentele pe care le pot folosi:
Evenimente ale ferestrelor o - onload - onunloavd - onresize: (in Netscape) - onmove - onabort - onerror - onfocus - onblur Evenimente de mouse: o - onmousedown - onmouseup - onmousemove - onmouseover - onmouseout - ondblclick - onclick Evenimente ale formularelor si elementelor acestora: o - onsubmit - onreset - onchange - onselect - onclick - onblur - onfocus Evenimente ale tastelor o - onkeydown - onkeyup - onkeypress
2. Exemple cu evenimentele JavaScript

Pentru a intelege mai bine modul de folosire a evenimentelor, studiati cu atentie exemplele de mai jos. 1. - Exemplu "onClick" Daca dorim executia unei anumite actiuni la apasarea unui click de mouse, folosim "onClick". <form> <input type="button" value="Apasa" onClick="alert('Salut')" /> </form> Acest exemplu deschide o fereastra alert cand este apasat butonul "Apasa". 2. - Exemplu "OnMouseOver - onMouseOut - onClick"
<html> <head> <script type="text/javascript"> function setfocus() { document.form2.camp.select(); } </script> </head> <body> <br> <a href="http://www.marplo.net" OnMouseOver="this.style.color='red';" OnMouseOut="alert('Fereastra deschisa cu onMouseOut')"> Apasa aici pentru a vizita MarPlo.net! </a> <form name="form2"> <input type="text" name="camp" size="30" value="orice text"> <input type="button" value="Selecteaza" onclick="setfocus()"> </form> </body> </html> Pagina HTML rezultata din acest cod va afisa urmatorul rezultat: - Cand se pozitioneaza mouse-ul pe legatura "Apasa aici pentru a vizita MarPlo.net!", culoarea textului devine rosu (datorita expresiei "this.style.color='red'" - "this" face referire la obiectul curent care e actionat). Dupa ce mutati mouse-ul de pe link, se va deschide (prin evenimentul "onMouseOut") o fereastra Alert. Cand apasati butonul "Selecteaza", va fi selectat textul din campul de text. Apasa aici pentru a vizita MarPlo.net!
orice text
3. - Exemplu "onKeyUp" Acest script foloseste evenimentul "onKeyUp" pentru a muta cursorul in alt camp dupa ce a fost tastat ultimul caracter permis in caseta. <html> <head> <script type="text/javascript"> <!-function urmatorul(elment,text) { if (text.length==elment.maxLength) { next=elment.tabIndex; if (next<document.form3.elements.length) { document.form3.elements[next].focus(); }
} } //--> </script> </head> <body> - Cursorul se muta automat in urmatoarea caseta atunci cand s-a completat tot campul precedent (cand se ajunge la lungimea stabilita a campului, aici 4 caractere) <br> <form name="form3"> <input size="4" tabindex="1" name="field" maxlength="4" onkeyup="urmatorul(this,this.value)"> <input size="4" tabindex="2" maxlength="4" onkeyup="urmatorul(this,this.value)"> <input size="4" tabindex="4" maxlength="4" onkeyup="urmatorul(this,this.value)"> </form> </body> </html> - Functia "urmatorul(elment,text)", are doua argumente: "element" (care, prin apel, se refera la caseta "input") si "text" (se refera la valoarea casetei). In apelul functiei: "urmatorul(this,this.value)", "this" se refera la obiectul curent (reprezinta primul argument) iar al doile argument "this.value" reprezinta valoarea obiectului curent (valoarea din camp). Observati folosirea evenimentului onKeyup, pentru a se trece la urmatorul camp atunci cand s-a completat ultimul caracter din caseta precedenta. Pentru a intelege mai bine puteti sa inlocuiti "onkeyup" cu onkeydown pentru a vedea diferenta. Pagina HTML rezultata din acest cod va afisa urmatorul rezultat: - Cursorul se muta automat in urmatoarea caseta atunci cand s-a completat tot campul precedent (cand se ajunge la lungimea stabilita a campului, aici 4 caractere)
Folosind JavaScript puteti crea o multime de efecte imaginilor de pe site. In aceasta lectie si in urmatoarea veti invata sa lucrati cu obiectul image, sa creati efecte cu ajutorul imaginilor, folosid JavaScript.
1. Imaginile in pagina web

In JavaScript toate imaginile sunt reprezentate intr-o matrice numita images. Aceasta este o proprietate (si subobiect) a obiectului "document". Pentru indexarea in matrice (sau tablou), fiecare imagine de pe o pagina web are un anumit numar (index). Prima imagine are numarul 0, cea de-a doua imagine are numarul 1 si asa mai departe. Astfel, se poate face referire la prima imagine folosind expresia "document.images[0]". Fiecare imagine dintr-un document HTML este considarata un obiect Image. Un obiect Image are mai multe proprietati care pot fi accesate prin JavaScript. De exemplu
puteti vedea dimensiunile unei imagini folosind proprietatile "width" si "height". Urmatorul exemplu returneaza lungimea (in pixeli) a primei imagini din document:
document.image[0].height
Declararea imaginii care apare in pagina web se face cu sintaxa HTML:
<img src="fisier.gif" name="nume_img" id="id_img" />
Daca sunt mai multe imagini pe o singura pagina, e mai dificil sa se lucreze cu ele folosind numarul indexului, de aceea se poate atribui fiecarei imagini cate un nume (cu atributul "name"). O alta metoda este folosirea proprietatii "getElementById("id_element"), unde "id_element" este id-ul imaginii dat cu atributul "id="..."", ca in exemplu urmator:

document.nume_img.height o sau document.getElementById("id_img").height
Obiectul "image" are o singura metoda:
handleEvent() - reprezinta evenimentul specificat pentru executarea unei anumite actiunie
Proprietatile obiectului image sunt urmatoarele:
Border - poate fi doar citita si este latimea marginii din jurul imaginii specificata n pixeli Alt - specifica textul care va fi afisat in locul imaginii(daca nu poate fi vizualizata de browser) Align - unde sa fie plasata imaginea Complete - poate fi doar citita si este o valoare booleana care permite sa stim daca imaginea a fost descarcata complet. Height - inaltimea in pixeli a imaginii Hspace - se refera la spatiul din dreapta si stanga imaginii (in pixeli) Lowsrc - specifica un URL al unei imagini ce va fi afisata la o rezolutie scazuta Name - se foloseste pentru a da nume unei imagini Src - specifica URL-ul (adresa si numele) imaginii usemap - eticheta map Vspace - spatiul dintre partea de sus si de jos a imaginii Width - latimea in pixeli a imaginii
2. Incarcarea unei imagini noi

Daca doriti sa schimbati imaginile pe pagina prin JavaScript, se foloseste propprietatea src. Ca si in eticheta <img>, proprietatea "src" reprezinta adresa imaginii afisate. Cu JavaScript putem da o noua adresa imaginiii care trebuie incarcate in pagina, astfel imaginea
de la noua adresa va inlocui vechea imagine. Iata un exemplu prin care puteti intelege cum se face aceasta schimbare de imagini:
<img name="imagine" src="img1.jpg" width="155" height="155"> <form> <input type="button" onClick="document.imagine.src='img2.jpg'" value="Schimba imaginea"> </form> - Imaginea "img1.jpg" este incarcata si ia numele "imagine". - Cu linia de cod "document.imagine.src='img2.jpg' se inlocuieste fosta imagine "img1.jpg" cu o noua imagine "img2.jpg", prin apasarea butonului "Schimba imaginea". - Imaginea noua va fi afisata in acelasi loc, suprafata de afisare a imaginii ramane aceeasi. In pagina web exemplul acesta va afisa urmatorul rezultat:
Iata inca un exemplu in care avem o pagina HTML cu doua link-uri (legaturi) care, printr-un script JS schimba afisarea mai multor imagini in acelasi loc. Imaginile sunt declarate si stocate intr-o variabila tablou "imagini". Pentru schimbarea imaginilor se folosesc 2 functii: "gonext" si "goback". <html> <head> <title>Titlu</title> <script type="text/javascript"> <!-imagini = new Array("img1.jpg","img2.jpg","img3.jpg"); nr = 0; function goback() { if (document.images && nr > 0) { nr--; document.imgs.src=imagini[nr]; } } function gonext() { if (document.images && nr < (imagini.length - 1)) { nr++;
document.imgs.src=imagini[nr]; } } // --> </script> </head> <body> <h4 align=center>Imagini<br> <img src="img/img1.jpg" name="imgs" width="155" height="155"><br> <a href="javascript:goback()"><<- Precedenta</a> | <a href="javascript:gonext()">Urmatoarea ->></a> </h4> </body> </html> Dupa ce aplicati acest cod intr-un document HTML veti avea in browser urmatorul rezultat: Imagini
<< Precedenta | Urmatoarea >> - Un dezavantaj al scripturilor din aceste doua exemple poate fi faptul ca dupa apasarea butonului "Schimba imaginea" sau a link-ului "urmatoarea >>", afisearea imagini noi poate intarzia deoarece aceasta trebuie sa fie incarcata de browser dupa apasarea butonului (sau a link-ului). In lectia urmatoare veti invata cum sa evitati acest lucru prin "preincarcarea imaginilor".
Aceasta lectie continua prezentarea modului de utilizare a obiectului image, cu exemple ajutatoare si un script complet.
1. Preincarcarea imaginilor
In lectia precedenta a fost explicat modul de incarcare a unei imagini noi in locul altei imagini folosind JavaScript. In exemplul prezentat in Lectia 19 la punctul "Incarcarea unei imagini noi", browserul trebuie sa astepte afisare noi imagini pana cand aceasta este incarcata iar in cazul unor imagini mari
asteptarea poate dura prea mult. Acest lucru poate fi evitat prin "preincarcarea imaginilor", toate imaginile folosite in pagina vor fi incarcate la deschiderea acesteia (printr-un script JS) si vor fi afisate doar atunci cand este executata o comanda de afisare. Iata un exemplu prin care puteti intelege cum se face aceast lucru: <script type="text/javascript"> <!-var hiddenImg = new Image(); hiddenImg.src = "img2.jpg"; //--> </script> <img name="imagine" src="img1.jpg" width="155" height="155"> <form> <input type="button" onclick="document.imagine.src=hiddenImg.src" value="Schimba imaginea"> </form> - In interiorul scriptului, prima linie creaza un nou obiect "Image". A doua linie defineste adresa imaginii noi care va fi incarcata si reprezentata prin obiectul "hiddenImg". Astfel imaginea "img2.jpg" este incarcata (dar nu afisata) cand este executata aceasta linie de cod (la deschiderea paginii). Imaginea este pastrata in memorie pentru folosire ulterioara, si anume cand este apasat butonul "Schimba imaginea", care prin codul "document.imagine.src=hiddenImg.src" va afisa imaginea "img2.jpg" in locul celei actuale (img1.jpg). Afisarea se face imediat, fara a mai astepta incarcarea acesteia. Daca numarul si marimea imaginilor este mare va dura mai mult incarcarea initiala a paginii, de aceea e bine sa aveti in vedere viteza conexiunii pentru a sti ce metoda este mai indicata. In pagina web exemplul acesta va afisa urmatorul rezultat:
2. Efecte mouse-over (sau rollover)

Cu mouse-over ("MouseOver" si "MouseOut") se pot crea efecte (precum schimbarea unei poze) care apar la simpla trecere cu mouse-ul deasupra unei zone. Iata un exemplu foarte simplu: <a href="#" onMouseOver="document.Imgs.src='img1.jpg'" onMouseOut="document.Imgs.src='img2.jpg'"> <img src="img3.jpg" name="Imgs" width="155" height="155" border="0"></a>
- Dupa cum observati, "onMouseOver" si "onMouseOut" au fost adaugate in interiorul etichetei <a>, e gresit daca le adaugati in eticheta <img>. Imaginile nu pot reactiona la evenimentele "MouseOver" si "MouseOut", trebuie sa punem o eticheta de legatura (link) langa imagini. Acest exemplu va afisa in browser urmatorul rezultat:
- Initial este afisata imaginea "img3.jpg", cand pozitionati mouse-ul deasupra imaginii va fi afisata "img1.jpg" iar dupa ce departati mouse-ul, va apare imaginea "img2.jpg". Daca doriti ca efectul de schimbare a imaginii sa apara cand pozitionati mouse-ul pe un link si nu pe imagine, puteti modifica exemplul astfel (<img> va fi adaugat in afara etichetei "<a>...</a>"): <a href="#" onMouseOver="document.Imgs.src='img1.jpg'" onMouseOut="document.Imgs.src='img2.jpg'">Legatura</a><br> <img src="img3.jpg" name="Imgs" width="155" height="155" border="0"> - Acest exemplu este mai mult de studiu pentru a intelege procedeul de utilizare a efectelor "mouse-over". Nu este potrivit pentru adaugarea intr-o pagina web profesionala deoarece cauzeaza unele probleme:

Imaginile "img1.jpg" si "img2.jpg" nu au fost preincarcate si astfel apar intarzieri in afisarea lor. Daca vom folosi mai multe seturi de imagini trebuie scris codul JavaScripty pentru fiecare separat. Pentru folosirea modelului si in alte pagini, poate necesita modificari substantiale.
Iata un script complet care evita problemele de mai sus, desi este mai lung, o data scris poate fi folosit cu usurinta si pt. alte pagini web si cu un numar mai mare de imagini. <html> <head> <script type="text/javascript"> <!-// Daca browserul suporta JavaScript // Creaza matricea care va stoca imaginile, in variabila pics browserOK = true; var pics = new Array(); // --> </script>
<script type="text/javascript"> <!-var objCount = 0; // numarul imaginilor care se modifica in pagina web // Functia pentru preancarcarea imaginilor, le introduce intr-o matrice function preload(name, first, second) { if (browserOK) { pics[objCount] = new Array(3); pics[objCount][0] = new Image(); pics[objCount][0].src = first; pics[objCount][1] = new Image(); pics[objCount][1].src = second; pics[objCount][2] = name; objCount++; } } function on(name) { if (browserOK) { for (i = 0; i < objCount; i++) { if (document.images[pics[i][2]] != null) if (name != pics[i][2]) { document.images[pics[i][2]].src = pics[i][0].src; } else { // afiseaza cea de-a doua imagine la pozitionarea cursorului deasupra acesteia document.images[pics[i][2]].src = pics[i][1].src; } } } } function off() { if (browserOK) { for (i = 0; i < objCount; i++) { // trimite in spate toate imaginile if (document.images[pics[i][2]] != null) document.images[pics[i][2]].src = pics[i][0].src; } } } // preancarca imaginile - trebuie sa specificati care imagini trebuie preancarcate // si carui obiect Image apartin. Schimbati aceasta parte daca folositi imagini diferite sau daca adaugati mai multe // (s-ar putea sa fie nevoie sa schimbati si in corpul documentului (body). preload("link1", "img1.jpg", "img1t.jpg"); preload("link2", "img2.jpg", "img2t.jpg"); preload("link3", "img3.jpg", "img3t.jpg");
// --> </script> </head> <body> <a href="adresa1.htmll" onMouseOver="on('link1')" onMouseOut="off()"> <img name="link1" src="link1.gif" width="100" height="100" border="0"></a> <a href="adresa2.html" onMouseOver="on('link2')" onMouseOut="off()"> <img name="link2" src="link2.gif" width="100" height="100" border="0"></a> <a href="adresa2.html" onMouseOver="on('link3')" onMouseOut="off()"> <img name="link3" src="link3.gif" width="100" height="100" border="0"></a> </body> </html> Acest exemplu foloseste 3 imagini (respectiv 3 link-uri in BODY), dar puteti adauga si 100. Scriptul pune toate imaginile intr-o matrice "pics" a carei elemente sunt construite de functia "preload()", care este apelata la inceput. Apelul functiei "preload()" se face in felul urmator: "preload("link1", "img1.jpg", "img1t.jpg");", ceea ce inseamna ca scriptul trebuie sa incarce doua imagini "img1.jpg" si "img1t.jpg" pentru "link1". Prima imagine este imaginea care va fi afisata cand cursorul mouse-ului este n exteriorul imaginii. Iar atunci cand cursorul este pozitionat deasupra imaginii, va fi afisata cea de-a doua imagine. Cu primul argument "name" ("link1") al functiei "preload()" specificam carui obiect Image de pe pagina web apartin imaginile. In corpul ( <body> ) al exemplului veti gasi o imagine cu numele "link1". Cele doua functii "on()" si "off()" sunt apelate prin evenimentele "onMouseOver" si "onMouseOut". Puteti observa ca functia "on()" trimite in spate toate celelalte imagini afisate initial (care sunt adaugate direct in eticheta <img>). Aceasta este necesar deoarece se poate intampla ca mai multe imagini sa fie afisate accentuat (de exemplu, evenimentul "MouseOut" nu are loc atunci cand utilizatorul muta cursorul de deasupra imaginii direct n afara ferestrei). Incercati sa testati si sa studiati acest script, astfel veti intelegeti modul lui de functionare.
Formularele sunt elemente HTML care dau viata unor pagini statice deoarece asigura o interfata prin care vizitatorii pot interactiona, cu ajutorul controalelor (elemente ale formularului). Obiectul Form este mijlocul prin care se poate interactiona cu acest element HTML in scripturile JavaScript.
1. Metode si proprietati ale obiectului form

Dupa cum ati invatat in lectiile precedente, obiectele JavaScript au proprietati si metode. Proprietatile obiectului "Form" sunt urmatoarele:
action - contine atributul "action" din eticheta <form>, specifica adresa URL unde este trimis formularul elements - matricea care contine toate elementele din <form>
encoding - contine atributul "enctype" din <form>, specifica o codificare MIME a formularului length - numarul de elemente continute in formular method - contine atributul "method" din <form>, defineste felul in care formularul este trimis serverului (get sau post) name - contine atributul "name" al unei etichetei <form> target - contine atributul "target" al etichetei <form>, specifica fereastra in care serverul ar trebui sa returneze informatiile. Daca nu este specificata, serverul afiseaza rezultatele in fereastra care a expediat formularul.
Obiectul "Form" are urmatoarele metode:
handleEvent() - apeleaza handlerul de eveniment specificat reset() - readuce elementele formularului la valorile prestabilite submit() - declanseaza un eveniment "submit" care trimite datele spre programul specificat in atributul "action" al etichetei <form>
2. Trimiterea formularelor spre server

Limbajul JavaScript permite prelucrarea datelor introduse in formular inainte ca acestea sa fie trimise spre procesare la programul (scriptul) de pe server. Puteti expedia dadele unui formular utilizand una din cele doua modalitati:

1. - Prin apelarea metodei "submit()" a obiectului "Form". 2. - Prin click pe un buton Submit care trimite automat datele din formularul de care apartine.
Multe din proprietatile obiectului "Form" se ocupa de informatiile suplimentare care sunt trimise la server prin intermediul formularului. Aceste proprietati sunt: - action - specifica adresa URL a programului catre care vor fi trimise datele din formular Exemplu:
<form name="f1" action="http://www.marplo.net/script.php" method="post">
Pentru formularele care folosesc metoda "post" puteti preciza in atributul "action" ca datele sa fie trimise prin e-mail, folosind urmatoarea sintaxa:
<form name="f2" action="mailto:adresa_de_email" method="post">
- Cand expediati formularul, se va deschide un client de e-mail ce contine, printre altele, si perechile de "nume-valoare" ale elementelor (casetelor) cuprinse in formular. - enctype - specifica o codificare MIME a formularului, valoarea prestabilita este "application/xwww-form-urlencode". O metoda de verificare a acestei codificari este urmatoarea:
if(f1.enctype == "application/x-www-form-urlencode") { alert("Tipul de codificare e normal"); } Un alt tip de codificare des folosit este "text/plain". Iata un exemplu: <form method="post" name="f3" action="mailto:adresa_de_mail" enctype="text/plain"> Va place site-ul? <br> <input name="alege" type="radio" value="1" checked>Da <br> <input name="alege" type="radio" value="2">Nu <br> <input name="alege" type="submit" value="Trimite"> </form> - Proprietatea "enctype="text/plain"" este folosita pentru a trimite text neformatat. Prin aceasta, mailul va fi mai usor de citit, in cadrul mesajului va apare optiunea aleasa. Fara specificarea acestei proprietati mailul va avea ca atasament un fisier cu optiunea aleasa. - method - defineste modul in care datele formularului sunt expediate. Se poate folosi valoarea "get" sau "post". Pentru formularele care folosesc metoda "get", in majoriatea site-urilor este disponibil un program CGI de testare, numit "test-cgi" furnizat impreuna cu serverul (locatia fisierului "testcgi" poate fi diferita, intrebati administratorul serverului). Folositi urmatoarea sintaxa:
<form action="http://nume_site/cgi-bin/test-cgi" method="get">
Veti primi o pagina care va contine, printre altele, si valorile elementelor din formular. Pentru incepatori, mai putin cunoscatori, si pentru folosirea cu scripturi PHP, este recomandata metoda "post". Pentru formularele care folosesc metoda "post", in majoriatea site-urilor este disponibil un program CGI de testare, numit "post-query" furnizat impreuna cu serverul (locatia acestuia poate fi diferita, intrebati administratorul serverului). Daca doriti sa verificati ce date trimite formularul, folositi urmatoarea eticheta:
<form action="http://nume_site/cgi-bin/post-query" method="post">
- Cand trimiteti formularul veti primi, printre altele, si perechile de "nume-valoare" corespunzatoare elementelor din formular. Puteti verifica tipul metodei de trimitere a datelor si cu un script JavaScript, ca in exemplul urmator: <script type="text/javascript"> <!-var tip_metoda; tip_metoda = formular.method; alert("Tipul metodei pt. acest formular e :" +tip_metoda); //--> </script> Daca doriti sa faceti o verificare a datelor din formular inainte ca acestea sa fi expediate la
server, puteti folosi evenimentul "onSubmit". - onSubmit - este folosita pentru a valida formularul inainte de a fi trimis. Metoda "onSubmit" se introduce in interiorul etichetei <form>, ca in exemplul urmator: <script type="text/javascript"> <!-// Verifica daca input OK function validare() { if (inputOK) return true; else return false; } //--> </script> ... <form method="post" name="nume_form" action="script.php" onSubmit="return validare()"> ... - Despre validarea datelor dintr-un formular veti putea invata mai multe in lectia urmatoare.
1. Utilizarea metodei focus si select

Cu metodele focus() si select() puteti adauga formulaului anumite efecte grafice si sa selectati casetele dorite. Puteti defini care element sa atraga atentia la inceput. Puteti transmite navigatorului sa revina n locul din formular unde au fost introduse datele gresite, astfel browser-ul va pozitiona cursorul n elementul din formular specificat. Acest lucru se poate face printr-un script ca cel din exemplul urmator <script type="text/javascript"> <!-function setfocus () { document.nume_form.nume_camp.focus(); } //--> </script> - Unde "nume_form" este numele formularului specfificat in atributul "name" din eticheta <form> iar "nume_camp" este numele campului din formular unde va fi pozitionat cursorul (specificat in atributul "name" din eticheta campului respecftiv). Daca doriti sa atrageti atentia sau sa pozitionati cursorul asupra unui anumit element din formular atunci cand pagina este incarcata, adaugati o proprietate "onload" in eticheta <body>, ca in exdemplu urmator :
<body onload="setfocus()">
Iata un al exemplu in care campul dorit dintr-un formular atrage atentia si este si selectat :
<html> <head> <title>Titlu</title> <script type="text/javascript"> <!-function setfocus () { document.form1.camp2.focus(); document.form1.camp2.select(); } //--> </script> </head> <body onload="setfocus()"> <form name="form1"> <input type="text" name="camp1" value="un text"> <br> <input type="text" name="camp2" value="text selectat"> </form> </body> </html> - Daca adaugati codul de mai sus intr-un document HTML, cand il veti deschide cu un browser va fi selectat automat textul din campul doi.
2. Validarea si verificarea datelor introduse in formular

De cele mai multe ori folosim formulare pentru ca datele introduse in acestea sa fie trimise inapoi la server pentru procesare sau prin posta electronica catre un cont de email. Cu ajutorul JavaScript datele introduse intr-un formular pot fi cu usurinta verificate inainte de a fi transmise, astfel putem usura traficul si in plus ne putem asigura ca s-au transmis date corecte. De exemplu: sa nu se transmita inputuri fara date n ele, sau ca o adresa e-mail sa contina caracterul @. Pentru a intelege mai bine vom folosi un exemplu ce contine un formular cu 2 elemente text: "nume" si "email" si un buton "Submit" pt. trimiterea datelor. Vizitatorul trebuie sa introduca numele n primul text si adresa de e-mail n al doilea. Pentru verificarea este adaugat un script JavaScript care verifica datele introduse inainte ca acestea sa fie trimise la server. <html> <head> <title>Titlu</title> <script type="text/javascript"> <!-function verifica(form) { if (form.nume.value == "") { alert("Va rog introduceti numele dvs."); return false; } else if (form.email.value == "" || form.email.value.indexOf('@', 0) == -1 ||
form.email.value.indexOf('.', 0) == -1) { alert("Scrieti corect adresa de e-mail !"); return false; } return true; } // --> </script> </head> <body> <form name="form1" action="test.php" method="post"> Scrieti numele dvs.:<br> <input type="text" name="nume"> <br> Adaugati adresa de e-mail :<br> <input type="text" name="email"> <br> <input type="submit" name="submit" value="Trimite" onClick="return verifica(this.form)"> </form> </body> </html> - Functia "verifica()" este apelata in eticheta butonului submit prin metoda "onClick="return verifica(this.form)"", argumentul "this.form" este transmis catre functie si face referire la elementele din formularul curent. Astfel, cand este apasat butonul "Trimite" se executa imediat functia "verifica()". Aceasta verifica cu prima instructiune "if" daca elementul "nume" din formular are valoarea nula (adica nu a fost scris nici un caracter), se compara cu "" pentru a verifica daca sirul este gol. Daca valoarea este nula conditia "if" primeste valoarea "adevarata" si se executa, deschide o fereastra Alert si apoi returneaza "false" (astfel datele nu mai sunt trimise). Daca in casuta "nume" este adaugat vreun caracter valoarea acesteia nu mai e nula (sirul nu e gol) si conditia "if(form.nume.value == "")" nu mai este adevarata si se trece la executia urmatoarei linii de cod a functie. A doua instructiune "else if (form.email.value == "" || form.email.value.indexOf('@', 0) == -1 || form.email.value.indexOf('.', 0) == -1)" este ceva mai complicata, verifica daca valoarea elementului "email" din formular este nula sau (prin operatorul "OR" ||) daca acesta nu contine caracterele '@' sau punct (.); aceasta deoarece orice adresa de e-mail trebuie sa contina cele doua caractere. Daca la verificarea celor trei conditii (valoare nula, lipsa caracterului '@' si lipsa caracterului punct) vreuna din ele este adevarata, instructiunea "else if" se executa si va deschide o fereastra Alert apoi returneaza "false'. In caz contrar, daca nici una din conditiile instructiunii "if", "else if" nu este adevarata, functia "verifica()" returneaza "true" si datele vor fi trimise la server. In browser veti avea urmatorul rezultat: Scrieti numele dvs.: Adaugati adresa de e-mail :
Trimite
- Puteti introduce orice n formular si apoi apasati butonul "Trimite". De asemenea incercati sa nu introduceti nimic si sa apasati butonul, sau la campul pt. email adaugati o adresa incompleta (fara @ sau(.)). Veti vedea rezultatul acestui script. Daca introduceti datele corect nu va apare nici un mesaj. - In exemplul de mai sus puteti folosi in loc de metoda "onClick()" din eticheta butonlui Submit, metoda "onSubmit()", aceasta se adauga direct in eticheta <form>, dupa cum este prezentat mai jos:
<form name="form1" action="test.php" method="post" onSubmit="return verifica(this)"> Rezultatul va fi acelasi.
Ferestrele sunt cele mai importante elemente de interfata in browser, iar JavaScript ofera multe modalitati de a le manipula. In acesta lectie veti invata despre obiectul window, proprietatile si metodele acestuia, cum sa creati noi ferestre (pop-up) si sa le inchideti.
1. Proprietatile si metodele obiectului window

Un browser (indiferent de nume sau producator) este prezentat intr-o fereastra si tot ceea ce utilizatorul face cu browserul se executa in interiorul acelei ferestre. Toate elementele unei pagini web sunt de asemenea continute in fereastra respectiva. Obiectul "Window" este considerat obiectul de nivel ierarhic cel mai inalt in ierarhia obiectelor JavaScript pe partea de client si contine toate celelalte obiecte pe partea de client (cu exceptia obiectului "navigator", conceptual diferit, nefiind un element propriu-zis vizual). Dupa cum n practica se poate lucra cu mai multe ferestre deschise simultan, la fel se poate lucra si cu mai multe obiecte "Window" (de fapt cate unul pentru fiecare fereastra). Obiectul "Window" se creaza automat atunci cand se deschide o noua fereastra de browser. Atentie sa nu confundati ferestrele distincte de browser cu cadrele (frame-urile), care de asemenea mai sunt numite ferestre (fiind de fapt subferestre ale ferestrei de browser). Ca si celelalte obiecte si "Window" are o serie de proprietati si metode. Fiind obiectul de nivelul cel mai inalt unele dintre acestea pot fi apelate sau se poate face referire la ele fara a folosi in fata lor expresia "window." (cum e de exemplu metoda "alert()"). Obiectul window are urmatoarele proprietati:
- closed - specifica daca instanta "window" a fost inchisa - crypto - permite accesul la caracteristicile de criptare din Netscape - defaultStatus - specifica mesajul prestabilit in bara de stare a ferestrei
- document - mentioneaza toate informatiile despre documentul din aceasta fereastra - frames - mentioneaza toate informatiile despre cadrele din aceasta fereastra - history - mentioneaza adresele URL vizitate de utilizator in fereasrtra curenta - innerHeight - contine inaltimea in pixeli a zonei afisate din fereastra curenta - innerWidth - contine latimea in pixeli a zonei afisate din fereastra curenta - length - reprezinta numarul de cadre din fereastra curenta - location - contine adresa URL curenta incarcata in browser - locationbar - face referire la bara de locatie a browserului - locationbar.visible - contine valoarea booleana care indica daca bara de locatie de pe browserul utilizatorului este vizibila - menubar - face referire la bara de meniuri a browserului - menubar.visible - contine valoarea booleana care indica daca bara de meniuri de pe browserul utilizatorului este vizibila - name - contine numele ferestrei - offscreen-Buffering - contine o valoare booleana care ne permite sa determinam daca vreo actualizare a ferestrei este executata intr-un buffer din afara ecranului - opener - contine numele ferestrei din care a fost deschisa o fereastra secundara - outerHeight - contine inaltimea in pixeli a suprafetei din exteriorul ferestrei curente - outerWidth - contine latimea in pixeli a suprafetei din exteriorul ferestrei curente - pageXOffset - contine coordonata X a ferestrei curente - pageYOffset - contine coordonata Y a ferestrei curente - parent - face referire la fereastra de nivelul cel mai inalt care afiseaza cadrul curent - personalbar - mentioneaza informatii despre bara personala a browserului - personalbar.visible - contine valoarea booleana care indica daca bara personala de pe browserul utilizatorului este vizibila - screenX - face referire la coordonata X a browserului, din marginea stanga a ferestrei (Netscape) - screenY - face referire la coordonata Y a browserului din marginea de sus a ferestrei - scrollbars - face referire la barele de derulare ale browserului - scrollbars.visible - contine valoarea booleana care indica daca barele de derulare de pe browserul utilizatorului sunt vizibile - self - face referire la fereastra curenta - status - face referire la mesajul de pe bara de stare a ferestrei - statusbar - face referire la bara de stare a browserului - statusbar.visible - contine valoarea booleana care indica daca bara de stare a browserului utilizatorului este vizibila - toolbar - face referire la bara de instrumente a browserului - toolbar.visible - contine valoarea booleana care indica daca bara de instrumente a browserului utilizatorului este vizibila - top - face referire la fereastra de nivelul cel mai inalt care afiseaza cadrul curent - window - face referire la fereastra curenta
Obiectul window are urmatoarele metode:
- atob() - decodifica un sir care a fost codificat in baza 64 - alert() - afiseaza o fereastra de avertizare cu un anumit sir de text - back() - incarca o pagina anterioara vizitata in fereastra curenta - blur() - dezactiveaza o fereastra - btob() - codifica un sir in baza 64 - captureEvents() - stabileste ca fereastra sa captureze toate evenimentele de un tip specificat - clearInterval() - sterge intervalul stabilit cu metoda "setInterval()" - clearTimeout() - sterge pauza stabilita cu metoda "setTimeout()" - close() - inchide fereastra - confirm() - afiseaza o fereastra de confirmare - crypto.random() - genereaza un sir aleator de date, a carui lungime este specificata de numarul de octeti transferati - crypto.signText() - intoarce un sir de date codificate care reprezinta un obiect semnat - disableExternalCapture() - dezactiveaza capturarea unui eveniment extern - enableExternalCapture() - activeaza capturarea unui eveniment extern pentru paginile incarcate din alte servere - find() - afiseaza o caseta de dialog "Find" in care utilizatorul poate introduce text pentru cautare in pagina curenta - focus() - activeaza instanta "window" specificata - forward() - incarca urmatoarea pagina in locul paginii curente din fereastra - handleEvent() - apeleaza handlerul pentru evenimentul specificat - home() - incarca pagina de baza specificata a utilizatorului in locul paginii curente din browser - moveBy() - deplaseaza fereastra cu valoarea specificata - moveTo() - deplaseaza fereastra in locatia specificata - open() - deschide o noua instanta a unei ferestre - print() - apeleaza caseta de dialog "Print" astfel ca utilizatorul sa poata tipari fereastra curenta - prompt() - afiseaza o fereastra cu caseta de dialog "prompt" - releaseEvents() - elibereaza evenimentele capturate de un tip specificat - resizeBy() - redimensioneaza fereastra cu valoarea specificata - resizeTo() - redimensioneaza fereastra la valoarea indicata - routeEvent() - transfera evenimentele de un tip specificat pentru a fi tratate nativ - scroll() - deruleaza documentul in fereastra pana la o locatie specificata - scrollBy() - deruleaza documentul in fereastra cu o valoare specificata - scrollTo() - deruleaza documentul pe latime si inaltime pana la o locatie specificata din fereastra - setHotKeys() - permite comutarea intre activarea si dezactivarea tastelor de selectare rapida cand nu sunt prezente meniuri - setInterval() - apeleaza o functie sau evalueaza o expresie la intervale de timp (constand intr-un anumit numar de milisecunde) - setResizeable() - permite specificarea posibilitatii redimensionarii unei ferestre - setTimeout() - apeleaza o functie sau evalueaza o expresie dupa un anumit numar de milisecunde - setZOptions() - permite specificarea asezarii in ordinea Z (tridimensionala) a unei
ferestre - stop() - opreste fereastra curenta sa incarce alt element in ea
2. Crearea ferestrelor pop-up (metoda open)

Folosind JavaScript puteti deschide o noua fereastra in care se incarca o pagina HTML, cu dimensiuni, pozitie si proprietati stabilite de dv.. Aceste ferestre mai sunt numite si ferestre popup. Pentru a crea o astfel de fereastra puteti folosi metoda "open", avand urmatoarea sintaxa:
open("URL", "nume", "proprietati") Unde :
- URL - reprezinta adresa documentului care va fi afisat in fereastra (e optional) - nume - este un sir care specifica numele ferestrei (e optional) - proprietati - este o lista de proprietati ale ferestrei (dimensiune, pozitionare, si altele). (e optional) Proprietatile trebuie sa fie separate prin virgula si fara spatii intre ele.
Urmatorul script deschide o noua fereastra (numita si pop-up) care are dimensiunile 400x300 pixeli. Fereastra nu are bara de instrumente, bara de stare sau bara de meniu si va fi deschisa la o distanta de 200 pixeli fata de marginea din stanga si 100 pixeli fata de marginea de sus. <script type="text/javascript"> <!-function open_window() { fereastra = open("pagina.html", "numeFereastra", "width=400,height=300,left=200,top=100,status=no,toolbar=no,menubar=no"); } //--> </script> <form> <input type="button" value="Deschide fereastra" onclick="open_window()"> </form> - Butonul "Deschide fereastra" apeleaza, la click, functia "open_window()" care prin variabila "fereastra" executa metoda "open()", aceasta va deschide o fereastra noua cu proprietatile adaugate in metoda. - Observati ca "fereastra" nu este numele ferestrei. Puteti accesa fereastra prin intermediul acestei variabile. Aceasta este o variabila normala care este valabila numai n interiorul unui script. Numele ferestrei (aici "numeFereastra") este un nume unic care poate fi folosit de toate ferestrele browserului. Adaugand acest cod intr-un document HTML, in browser veti avea un buton ca cel de jos. - Cand apasati pe buton, se va deschide o fereastra pop-up cu proprietatile specificate in metoda "open()".
3. Inchiderea ferestrelor (metoda close)

Pentru inchiderea unei ferestre se foloseste metoda close(). In fereastra pe care dorim sa o inchidem cu aceasta metoda adaugam un element de legatura <a> (link) sau un buton in care adaugam un eveniment "onClick" care executa metoda "close()" (sau "self.close()"), ca in exemplul urmator: <a href="#" onclick="self.close()">Inchide</a> sau <form> <input type="button" value="Inchide" onclick="self.close()"> </form> Cele doua elemente de inchidere a ferestrei au fost adaugate in pagina care se deschide cu fereastra pop-up din exemplul anterior. open() si close() sunt metode ale obiectului "window". Normal am scrie window.open() si window.close(), dar obiectul "window" este o exceptie. Nu trebuie scris cuvantul "window" daca se apeleaza o metoda a unui obiect fereastra (aceasta este valabil numai pentru obiectul window).
Aceasta lectie continua prezentarea altor modalitati de folosire a ferestrelor.
1. Ferestre "on the fly" ("din mers")

Pentru a creea diferite ferestre trebuie sa scriem mai multe fisiere HTML. Putem scrie scripturi care sa creeze ele documentul HTML (tag-urile, etichetele) care sa apara n fereastra noua, astfel nu mai este nevoie sa cream cate un fisier pentru fiecare pagina care va fi deschisa. Puteti incarca aceste documente generate de script intr-o fereastra separata sau intr-un frame. In primul rand trebuie modificata sintaxa "open", astfel incat sa nu incarce nici o pagina, deci in locul unde trebuie scrisa adresa URL vom scrie numai "" (doua ghilimele duble). Pentru a crea continutul paginii HTML care va aparea n fereastra e necesar sa folosim metoda document.write() prin care pot fi create textul si codul pentru elementele HTML ale paginii. Iata un exemplu din care veti putea intelege mai bine: <html> <head> <title>Document generat de JavaScript</title> <script type="text/javascript">
<!-function openWindow() { myWindow= open("", "numeFereastra", "width=400,height=300,top=100,left=200,status=yes,toolbar=yes,menubar=yes"); myWindow.document.open(); // se creaza documentul myWindow.document.write("<html><head><title>Document creat cu JavaScript"); myWindow.document.write("</title></head><body>"); myWindow.document.write("<center><h1>"); myWindow.document.write("Acest document a fost creat cu Java Script!"); myWindow.document.write("</h1></center>"); myWindow.document.write("</body></html>"); //Se inchide crearea documentului (nu fereastra) myWindow.document.close(); } // --> </script> </head> <body> <form> <input type="button" value="On_the_fly" onClick="openWindow()"> </form> </body> </html> - Sa studiem functia windowOpen(). Vedem ca mai intai deschide o noua fereastra browser, cu metoda "open()". - Primul argument al metodei este un sir gol (""), astfel nu va fi deschis un document extern. JavaScript o sa creeze noul document. Am definit variabila "myWindow" prin care accesam noua fereastra (Observati ca nu puteti folosi numele ferestrei "numeFereastra" pentru aceasta operatie). Dupa ce am deschis fereatra, vom deschide documentul care va fi afisat, asta se realizeaza prin
myWindow.document.open()
S-a folosit metoda "open()" a obiectului "document" (este diferita de metoda "open()" a obiectului "window"). Aceasta deschide un document in fereastra, pregatind documentul pentru urmatorul input. Tot prin variabila "myWindow" si cu ajutorul "document.write" creem documentul dorit (codul HTML si continutul documentului afisat in noua fereastra). Puteti scrie orice etichete HTML sau text. Dupa afisarea continutului din document, trebuie sa inchidem crearea documentul, aceasta se face prin urmatorul cod:
myWindow.document.close();
- aceasta linie de cod inchide "deschiderea de creare" a documentului, si nu fereastra. Dupa ce adaugati tot acest cod intr-un fisier HTML, in browser veti avea un buton ca cel de jos, apasati pe el! Aceasta metoda de crearea a paginilor printr-un script JavaScript este recomandata pentru ferestre gen pop-up, NU pentru pagini de site (paginare) cu un continut bogat!
2. Bara de stare (statusbar)

Bara de stare (statusbar) este bara din josul ferestrei browser-ului. Programele JavaScript pot scrie in aceasta bara, pentru aceasta trebuie sa dati o valoare lui:
window.status
Urmatorul exemplu va arata doua butoane, unul pentru a afisa un text in statusbar iar celalalt pentru stergerea acestui text. <html> <head> <script type="text/javascript"> <!-function statusbar(text) { window.status = text; } // --> </script> </head> <body> <form> <input type="button" name="scrie" value="Scrie in statusbar" onClick="statusbar('Aici este bara de stare!');"> <input type="button" name="sterge" value="Stegere" onClick="statusbar('');"> </form> </body> </html> - Scriptul este simplu, avem o functie cu un argument "statusbar(text)", argumentul functiei (variabila "text") este transmis expresiei "window.status", care va afisea valoarea acestuia in bara de stare. Am creat un formular cu doua butoane. Ambele butoane apeleaza prin evenimentul "onClick" functia "statusbar()". Butonul "Scrie" transmite functiei argumentul sir "Aici este bara de stare!", acest sir reprezinta valoarea variabilei "text" si va fi afisat in bara de stare. - Pentru stergerea textului din statusbar, al doilea buton transmite functiei un sir gol, doua ghilimele simple (''), care preluat ca argument va determina expresia "window.status" sa inlocuiasca textul deja existent in bara de stare cu un sir gol. Acest cod va arata in browser urmatoarele doua butoane:
- Apasati primul si al doilea buton, observati rezultatul obtinut in bara de stare. Browserul Mozilla Firefox ar putea avea anulata optiunea de schimbare a textului din Statusbar, pentru activarea acestei optiuni in Mozilla Firefox, deschideti Tools - Options - Content aici asigurativa ca butonul "Enable JavaScript" este bifat, dati click pe Advanced si bifati "Change status bar text".
3. Utilizare setTimeout()
Cu ajutorul unui numarator (setTimeout) puteti face computerul sa execute un anumit cod dupa o anumita perioada de timp (specificata in milisecunde). Sintaxa generala a acestuia este:
setTimeout("expresie", timp)
Unde "expresie" este expresia (codul) care va fi executat iar "timp" reprezinta pauza de timp - in milisecunde - dupa care va fi executata "expresie". In urmatorul exemplu se creaza un buton iar daca apasati acest buton o fereastra va aparea dupa 3 secunde: <script type="text/javascript"> <!-function timer() { setTimeout("alert('S-a folosit metoda setTimeout')", 3000); } // --> </script> <form> <input type="button" value="Timer" onClick="timer()" /> </form> setTimeout() este o metoda a obiectului window. Aceasta metoda fixeaza pauza (intreruperea) pana la executie. Primul argument este codul JavaScript care va fi executat dupa o anumita perioada de timp, aici avem "alert('S-a folosit metoda setTimeout')". Observati ca secventa de cod JavaScript trebuie sa fie intre ghilimile. Cel de-al doilea argument spune computerului care este momentul n care codul va fi executat, trebuie sa specificati timpul n milisecunde (3000 millisecunde = 3 secunde). Ruland acest exemplu intr-un browser, va arata urmatorul button: - Click pe butonul "Timer" si asteptati 3 secunde, se va deschide o fereastra Alert.
In prezent noile metode si tendinte de creare a site-urilor folosesc mai putin frame-uri (cadre). Chiar daca nu le veti folosi, e bine sa cunoasteti aceste elemente deoarece le puteti gasi in alte documente si sa stiti despre ce este vorba. Cadrele (frame-uri) sunt subferestre ale unei ferestre principale, in care sunt incluse.
1. Crearea cadrelor
Fereastra navigatorului poate fi impartita n mai multe frame-uri (cadre). Un frame este o parte din suprafata ferestrei browserului. Fiecare frame prezinta n interior un document propriu (in general un document HTML). De exemplu puteti creea doua frame-uri intr-o fereastra, in primul frame puteti incarca o pagina de la o adresa (ex. google.com) iar in al doilea frame o alta pagina, de la alta adresa (ex. yahoo.com). Crearea de frame-uri apartine limbajului HTML, dar am sa descriu cateva lucruri de baza. Pentru crearea de frame-uri se pot folosi urmatoarele etichete HTML:
<frameset> , <frame> si <iframe>
Un exemplu de cod HTML care creaza o pagina cu doua frame-uri este urmatorul: <html> <frameset rows="50%,50%"> <frame src="pagina1.html" name="frame1"> <frame src="pagina2.html" name="frame2"> </frameset> </html> - Proprietatea "row" din eticheta <frameset> aseaza cele doua frame-uri in linie, unul deasupra celuilalt. Primul frame, de deasupra, incarca si afiseaza "pagina1.html" iar al doilea frame incarca si afiseaza "pagina2.html". Daca vreti sa asezati cele doua frame-uri in coloana, unul langa altul, inlocuiti cuvantul "row" cu "cols". Expresia "50%,50%" reprezinta dimensiunea fiecarui cadru, exprimata in procente in raport cu fereastra principala. Fiecare frame trebuie sa aibe un nume unic, exprimat prin atributul "name" din eticheta <frame>, cu ajutorul acestui nume se poate accesa in JavaScript cadrul dorit. Pentru mai multe detalii desprea crearea de cadre, vedeti Cadre (lectia 10) din cursul HTML. Pentru crearea unui cadru cu <iframe> puteti folosi urmatoarea sintaxa:
<iframe src="url_pagina" width="600" height="200" align="center" scrolling="yes" frameborder="0" name="nume_frame"> </iframe>
- Unde "url_pagina" e adresa paginii care va fi incarcata in iframe, "width" si "height" reprezinta lungimea respectiv inaltimea cadrului (exprimata in procente sau pixeli), "scrolling" reprezinta permisiunea de derulare a paginii din cadru (yes sau no), "frameborder" specifica daca va fi sau nu afisata o margine (bordura) pentru cadru (1=da, 0=nu), iar "nume_frame" este numele cadrului care va fi folosit de JavaScript.
2. Obiectul Frame
Acest obiect face referire la un cadru (un frame) dintr-o structura de cadre incluse intr-o fereastra. Intr-o pagina cu mai multe cadre, obiectul "Window" reprezinta de fapt pagina care contine tagul <frameset>, iar celelalte pagini sunt considerate cadre in acest context.
Obiectul frame are urmatoarele proprietati:
document - reprezinta documentul curent incarcat in interiorul unui cadru frames - tablou ce contine referiri la cadrele copil length - lungimea tabloului de cadre (nnumarul de elemende) name - atributul "name" al etichetei <frame> parent - fereastra principala sau cadrul principal din care sunt create cadrele copil self - reprezinta referire la cadrul curent top - fereastra de browser care executa scriptul window - face referire la fereastra curenta sau la cadrul curent
Obiectul frame are urmatoarele metode:
blur() - dezactiveaza cadrul clearInterval() - anuleaza o executie repetata clearTimeout() - anuleaza orice executie intarziata focus() - activeaza un cadru print() - apeleaza caseta de dialog "Print" setInterval() - stabileste planificarea functiei pentru executare repetata setTimeout() - stabileste planificarea functiei pentru executare intarziata
3. Frame-uri si JavaScript
Ierarhia elementelor paginii HTML create in primul exemplu (cele 2 cadre "frame1" si "frame2" asezate in linie) este urmatoarea:
fereastra browser (parinte), care este in varful ierarhiei, aceasta contine doua cadre copii - "frame1" si "frame2"
Cu ajutorul numelor date cadrelor putem schimba informatii intre cele doua frame-uri impreuna cu fereastra principala, de exemplu putem face un link intr-un frame care sa deschida o pagina in celalalt frame. In continuare vom studia trei cazuri de relatii si accesari intre ferestrele copil si fereastra parinte. 1. Fereastra parinte acceseaza o fereastra copil

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

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

Prin "navigarea prin cadre" se intelege deschiderea paginilor intr-un frame sau in fereastra principala printr-un link din alt frame. Acest lucru se poate face prin mai multe metode. Pentru a intelegere mai bine, vom lua un exemplu concret. Folosim o pagina cu doua cadre, in al doilea cadru vom avea legaturi catre mai multe pagini, dar care se vor incarca in primul cadru. <html> <frameset rows="85%,15%"> <frame src="prima.html" name="frame1"> <frame src="meniu.html" name="frame2"> </frameset> </html> Pagina "prima.html" reprezinta pagina initiala care va fi incarcata in primul frame, cu numele "frame1" (poate fi orice document HTML). Pentru pagina care va fi incarcata in al doilea frame (meniu.html) vom folosi codul de mai jos pentru crearea ei. <html> <head> <script language="JavaScript"> <!-function load(url) { parent.frame1.location.href= url; } // -->
</script> </head> <body> <center> <a href="javascript:load('test1.htm')">Link1</a> (<i>cu JavaScript</i>) -<a href="test2.htm" target="frame1">Link2</a> (<i>cu target="frame1"</i>) -<a href="test2.htm" target="_top">Link3</a> (<i>cu target="_top"</i>) </center> </body> </html> - Pentru a vedea cum functioneaza acest exemplu, click pe acest buton -> - Se observa diferitele moduri de a incarca o pagina noua.
- Primul link (Link1) foloseste functia "load()" dintr-un script - Al doilea link (Link2) foloseste atributul "target", metoda standard HTML pentru cadre - Al treilea link (Link3) foloseste tot atributul "target", de data aceasta prin valoarea "_top" va incarca pagina noua direct in fereastra principala, eliminand astfel cadrele.
In functie de proiectul dv. puteti decide care varianta e mai potrivita. Folosind atributul HTML "target" este metoda cea mai simpla. Solutia JavaScript este recomandata daca doriti sa faceti mai multe lucruri ca o consecinta a click-ului pe un link, de exemplu cand doriti ca printr-un click sa deschideti doua ferestre, in doua cadre diferite. Pentru aceasta puteti utiliza urmatorul script: <script type="text/javascript"> <!-function loadtwo() { parent.frame1.location.href= "pagina1.html"; parent.frame2.location.href= "pagina.html"; } //--> </script> - Cand va fi apelata fuctia "loadtwo()", va incarca "pagina1.html" in "frame1" si "pagina2.html" in "frame2".
Valorile majoritatii variabilelor dintr-un script dispar atunci cand fereastra navigatorului este inchisa. Spre deosebire de acestea, valorile variabilelor cookie se pot pastra un timp indefinit. Pentru ca valorile lor sa se poata pastra, browserul utilizatorului stocheaza variabilele cookie n unitatea de hard-disc a utilizatorului. Astfel, cookie-urile sunt fisiere care contin diferite date despre un anumit site vizitat si valori de variabile, salvate pe calculatorul vizitatorului. In aceasta lectie veti invata cum puteti folosi JavaScript pentru a manipula fisiere cookie.
1. Fisierele cookie
Un cookie consta in principal dintr-o pereche nume=valoare, iar caracteristici mai avansate permit stabilirea unei date de expirare si pot preciza ce pagini web vad informatia cookie. Unul dintre avantajele folosirii fisierelor cookie este persistenta acestora. Un fisier cookie poate persista luni de zile (sau ani), simplificand vizitele ulterioare ale utilizatorului pe site, deoarece informatiile referitoare la vizite si preferintele utilizatorului sunt salvate si preluate din cookie de fiecare data cand va reveni la site. Fisierele cookie sunt deosebit de utile cand sunt folosite cu JavaScript, deoarece JavaScript are functii pentru citirea, adaugarea si editarea fisierelor cookie. Fisierele cookie au si unele dezavantaje, fiind stocate pe calculatorul utilizatorului acestea poat fi sterse din gresela (sau intentionat). Browserul impune restrictii privind dimensiunea si numarul de fisiere cookie care pot fi stocate, iar fisierele cookie mai noi le pot suprascrie pe cele vechi.
- Numarul total de cookie-uri pentru un server sau domeniu este de 200 - Numarul total de fisiere cookie pentru un browser este de 300 - Marimea maxima a unui fisier cookie este 4 kb.
Daca aceste limite sunt depasite, browserul va sterge cele mai vechi cookie-uri si nefolosite. Cand un utilizator trece de la un browser la altul, fisierele cookie salvate de un browser nu sunt recunoscute de celalalt Daca mai multi utilizatori folosesc acelasi calculator si acelasi browser ei pot folosi fisiere cookie care apartin altcuiva. Cele mai multe browsere stocheaza informatiile cookie in fisiere text necriptate, de aceea informatiile private precum parole, numere personale nu trebuie stocate direct intr-un cookie. Utilizatorul poate configura browserul astfel incat sa interzica anexarea de cookie, in acest caz aplicatia care foloseste cookie ar putea sa nu functioneze.
2. Stocarea si regasirea valorilor unui cookie

Numele si valorile dintr-un cookie sunt stocate si stabilite utilizand proprietatea cookie a obiectului Document. Pentru a stoca sirul cookie intr-o variabila se foloseste o comanda precum aceasta:
var myCookie = document.cookie
Pentru a afisa intr-o pagina web sirul astfel stocat , puteti folosi comanda:
document.write(document.cookie)
JavaScript stocheaza fisierele cookie in formatul urmator:
nume1=valoare1; nume2=valoare2; nume3=valoare3
Unde "nume1", "nume2" si "nume3" reprezinta numele fiecarui cookie, iar "valoare1", "valoare2" si "valoare3" reprezinta valorile care vor fi adaugate si stocate in fiecare cookie. Perechile nume=valoare sunt separate prin caracterul punct si virgula (;) si un spatiu, iar dupa
ultima pereche nu se mai pune caracterul punct si virgula. Pentru extragerea si utilizarea valorilor din fisierele cookie, trebuie sa prelucrati sirul obtinut prin comanda "document.cookie". Pentru a simplifica regasirea unei valori dintr-un fisier cookie, puteti folosi o functie ca cea din urmatorul script: <script type="text/javascript"> function GetCookie (name) { var result = null; var myCookie = " " + document.cookie + ";"; // toate sirurile de cookie incep cu spatiu si se incheie cu ; var searchName = " " + name + "="; // se cauta tot ce e intre name si = urmator var startOfCookie = myCookie.indexOf(searchName); var endOfCookie; if (startOfCookie != -1) { // daca gaseste ceva intre ele startOfCookie += searchName.length; // omite nume cookie anterior endOfCookie = myCookie.indexOf(";", startOfCookie); result = unescape(myCookie.substring(startOfCookie, endOfCookie)); } return result; } var valoare_c = GetCookie('nume_cookie'); document.write(valoare_c); // Afiseaza valoarea cookie-ului cautat, sau cuvantul null </script> - Functia "GetCookie(name)" prelucreaza sirul obtinut de comanda "document.cookie" si verifica daca exista cookie-ul cu numele transmis ca argument functiei. Daca cookie-ul cu numele respectiv exista, atribuie variabilei "result" valoarea asociata numelui si functia va returna aceasta valoare. Daca numele nu exista, valoarea variabilei "result", si returnata de functie, ramane "null". - Variabila "valoare_c" apeleaza functia "GetCookie()", unde 'nume_cookie' dintre paranteze, este numele cookie-ului a carui valoare doriti sa o obtineti. Prin comanda "document.write(valoare_c)" scriptul va afisa valoarea acestei variabile, care este cea returnata de functie.
3. Stabilirea valorilor unui cookie

Combinatia nume=valoare este informatia minima de care aveti nevoie pentru a defini un cookie, dar un cookie bine definit inseamna mai mult de atat. Iata o lista de parametrii ce pot fi utilizati pentru a specifica un cookie:
nume=valoare expires=date path=path domain=nume_domeniu secure
a. Nume si valoare

Nume si valoare poate fi orice cuvinte doriti Exemplu: o culoare favorita=blue id=num:1 Cea mai simpla functie pentru stabilirea unui cookie poate arata astfel: function SetareCookie(name, value) { document.cookie = name + "+" + escape(value); }
Pentru siguranta, valoarea este codificata folosind functia "escape()". Daca in sir ar exista un caracter ";" ar puteaa fi o problema, dar aceasta functie elimina aceasta problema. In general operatorul = este de atribuire, dar in cazul cookie-urilor fiecare nou "name" pe care il atribuiti este adaugat la lista de cookie activa, iar daca adaugati acelasi nume se va rescrie peste cel vechi. b. Data de expirare
Parametrul "expires=data" reprezinta data si timpul (in formatul Wdy, DD-Mon-YYYY HH:MM:SS GMT) cand cookie-ul va expira si va fi sters de pe hard-disc. Perioada de expirare trebuie transformata in milisecunde. Daca nu este specificat nici un timp de expirare, cookie-ul va dispare la inchiderea navigatorului. Iata un exemplu in care data de expirare este dupa o saptamana: var name = "culoare" var value = "blue" var oneWeek = 7*24*60*60*1000 // Data de expirare se stabileste in mulisecunde var expDate = new Date() expDate.setTime(expDate.getTime()+oneWeek); document.cookie = name + "=" + escape(value) + "; expires=" + expDate.toGMTString()
Observati ca data de expirare (dateExp) este prelucrata pentru a se incheia cu sirul GMT. c. Path
In mod implicit fisierele cookie sunt disponibile si pentru alte pagini web din acelasi director al paginii la care au fost create. Parametrul path permite unui cookie sa fie folosit si de pagini din alte directoare ale aceluiasi domeniu. Daca valoarea parametrului "path" este un subsir al adresei URL a unei pagini, fisierele cookie create cu acel parametru "path" sunt disponibile pentru respectiva pagina. De exemplu, puteti crea un cookie folosind urmatoarea comanda:
document.cookie = "nume=valoare; path=/nume_director"; Aceasta face ca fisierul cookie cu numele "nume" sa fie disponibil pentru fiecare pagina din directorul "nume_director" cat si penrtru subdirectoarele acestuia. Daca ati avea urmatoarea comanda: document.cookie = "culoare=blue; path=/javascript/test";
Fisierul cookie "culoare" ar fi disponibil pentru toate fisierele din directorul "javascript/test" si subdirectoare ale acestuia, dar nu va fi disponibil pt. fisierele din directorul "/javascript". Calea generala pentru ca fisierul cookie sa poata fi folosit de toate paginile unui domeniu, din toate directoarele, este calea radacina "/" (path=/). d. Domain
Asa cum parametrul "path" face un cookie disponibil si in alte directoare, parametrul domain il face disponibil pentru alte servere Web sau subdomenii ale aceluias site. Folosirea parametrului "domain" impune folosirea a cel putin doua caractere punct (.) daca domeniul dvs se incheie cu .com, .net ... (de ex. .marplo.net) Sirul parametrului "domain" trebuie sa fie identic cu sfarsitul numelui de domeniu al serverului dvs. Atunci cind se cauta un cookie in lista de cookie-uri se efectueaza si o comparatie intre valoarea acestui atribut si adresa domeniului din care s-a receptionat antetul HTTP. Comparatia se realizeaza pornind de la sufixul valorilor comparate, in sensul ca daca avem "domain=marplo.net atunci aceasta valoare se va potrivi cu un nume de gazda precum "info.marplo.net". Dupa ce s-a efectuat aceasta comparatie, in cazul in care cookie-ul este validat se va verifica si valoarea atributului "path". e. Secure
Daca un cookie este marcat ca secure, prin intermediul acestui atribut, va fi transmis numai daca tranzactia HTTP este una sigura (folosindu-se protocolul HTTPS). In felul acesta un cookie este transmis doar daca intruneste toate conditiile de validitate (se potrivesc domeniul, calea de directoare, timpul de expirare si securitatea canalului de comunicatie). Daca parametrul "secure" nu este adaugat in comanda de creare a fisierului cookie, acesta va trimis intr-o forma necriptata prin retea.
In urmaorul exemplu este prezentata o functie care defineste fisierele cookie cu toti parametri: function SetCookie (name, value, expires, path, domain, secure) { var expString = ((expires == null) ? "" : ("; expires=" + expires.toGMTString())); var pathString = ((path == null) ? "" : ("; path=" + path)); var domainString = ((domain == null) ? "" : ("; domain=" + domain)); var secureString = ((secure == true) ? "; secure" : ""); document.cookie = name + "=" + escape (value) + expString + pathString + domainString
+secureString; } Observati folosirea operatorului conditional ? Pentru a folosi acesta functie, o apelati cu orice parametrii doriti sa stabiliti si utilizati cuvantul "null" in locul parametrilor care nu conteaza. - In lectia urmatoare ("Lectia 27") veti gasi explicata metoda de stergere a cookie-urilor si un exemplu complet de creare si utilizare cookie.
1. Fisiere cookie cu acelasi nume

Daca un browser are mai multe fisiere cookie pentru un site si au acelasi nume, definite fiecare cu alta cale in parametrul "path", si cu valori diferite, de exemplu daca avem trei fisiere cookie cu numele "color", sirul cookie ar arata astfel:
color=blue; color=green; color=white
In cazul acesta, pentru a numara valorile asociate unui nume cookie puteti folosi urmatoarea functie: function GetCookieCount (name) { var result = 0; var myCookie = " " + document.cookie + ";"; var searchName = " " + name + "="; var nameLength = searchName.length; var startOfCookie = myCookie.indexOf(searchName); while (startOfCookie != -1) { result += 1; startOfCookie = myCookie.indexOf(searchName, startOfCookie + nameLength); } return result; } Impreuna cu aceasta functie care numara cate valori asociate exista, trebuie sa aveti si o functie care sa regaseasca o anumita instanta a unui cookie, cum este urmatoarea: function GetCookieNum (name, cookieNum) { var result = null; if (cookieNum >= 1) { var myCookie = " " + document.cookie + ";"; var searchName = " " + name + "="; var nameLength = searchName.length; var startOfCookie = myCookie.indexOf(searchName); var cntr = 0; for (cntr = 1; cntr < cookieNum; cntr++) { startOfCookie = myCookie.indexOf(searchName, startOfCookie + nameLength); } if (startOfCookie != -1) {
startOfCookie += nameLength; // omite nume cookie anterior var endOfCookie = myCookie.indexOf(";", startOfCookie); result = unescape(myCookie.substring(startOfCookie, endOfCookie)); } } return result; }
2. Stergerea unui cookie

Pentru a sterge un cookie, numele si calea (daca a fost specificat parametrul "path") trebuie sa fie aceleasi cu numele si calea folosite la stabilirea fisierului cookie. Stergerea unui cookie se face prin stabilirea datei de expirare la un moment in trecut, ca in exemplul urmator: function ClearCookie (name) { var ThreeDays = 3*24*60*60*1000; var expDate = new Date(); expDate.setTime (expDate.getTime() - ThreeDays); document.cookie = name + "=ImOutOfHere; expires=" + expDate.toGMTString(); }
3. Exemplu complet utilizare cookie

Pentru a intelege mai bine cum puteti crea si folosi fisierele cookie, studiati exemplul urmator. Exemplul este ceva mai complex, cuprinde un script cu mai multe functii care contin multe din elementele invatate in lectiile anterioare cat si altele mai avansate, pentru lucrul cu siruri. Scopul acestui exemplu este de a intelege cum functioneaza fisierele cookie, acesta contine in sectiunea HEAD a unui document HTML un script JavaScript in care sunt definite 4 functii pentru lucrul cu fisiere cookie, iar in corpul paginii, BODY, este creat un tabel HTML cu 2 coloane, in prima este un formular pentru scrierea unor preferinte care vor fi trimise la script pentru inregistrarea acestora in cookie, iar a doua coloana contine un buton care activeaza afisarea preferintelor din cookie si un alt buton care sterge cookie-urile. Codul complet este urmatorul: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="en"> <head> <title>Exemplu utilizare cookie</title> <script type="text/javascript"> <!-// Functia pt. setarea cookie-urilor function SetCookie () { // Se definesc variabilele care preiau valorile campurilor din formular
var culoare = document.preferinte.culoare.value; var fructe = document.preferinte.fructe.value; var citat = document.preferinte.citat.value; // Seteaza timpul de expirare, 2 zile var twoDays = 2*24*60*60*1000 var expDate = new Date() expDate.setTime(expDate.getTime()+twoDays); // Creaza cookie-urile document.cookie = "cookie1" + "=" + escape(culoare) + "; expires=" + expDate.toGMTString() ; document.cookie = "cookie2" + "=" + escape(fructe) + "; expires=" + expDate.toGMTString() ; document.cookie = "cookie3" + "=" + escape(citat) + "; expires=" + expDate.toGMTString() ; } // Functia care verifica daca exista cookie-ul cu un anumit nume transmis ca argument // Daca exista, prelucreaza sirul pt. extragerea valorii acestuia // Returneaza valoarea asociata numelui function checkCookie(c_name) { if (document.cookie.length>0) { c_start=document.cookie.indexOf(c_name + "="); if (c_start!=-1) { c_start=c_start + c_name.length+1; c_end=document.cookie.indexOf(";",c_start); if (c_end==-1) { c_end=document.cookie.length; } return unescape(document.cookie.substring(c_start,c_end)); } } // Daca cookie-ul verificat nu exista return "Nu ati adaugat inca o preferinta"; } // Functia trimite valorile primite la apelare spre verificare la functia precedenta // Daca numele cookie-ului exista, stocheaza valoarea intr-o matrice // Afiseaza in pagina valorile cookie-urilor function getCookie() { nr = getCookie.arguments.length var val_c = new Array(nr) var a = 0 for (var i=0; i<nr; i++) {
valoare=checkCookie(getCookie.arguments[i]); if (valoare!=null && valoare!="") { val_c[a] = valoare; a++ } } // Afiseaza in pagina, la id-urile indicate, valorile cookie-urilor document.getElementById("idculoare").childNodes[0].nodeValue = val_c[0]; document.getElementById("idfructe").childNodes[0].nodeValue = val_c[1]; document.getElementById("idcitat").childNodes[0].nodeValue = val_c[2]; } // Functia pt. stergerea cookie-urilor function stergeCookie() { nr_c = stergeCookie.arguments.length var ThreeDays = 3*24*60*60*1000; var expDate = new Date(); expDate.setTime (expDate.getTime() - ThreeDays); for (var n=0; n<nr; n++) { document.cookie = stergeCookie.arguments[n] + "=DataStearsa; expires=" + expDate.toGMTString(); } } // --> </script> </head> <body> <table border="1" bordercolor="#8888fe" width="580" cellpadding="2" cellspacing="0"> <tr><td> <form name="preferinte"> Scrieti culoarea favorita: <input type="text" name="culoare" size="20" maxlength="40" /><br /><br /> Scrieti fructele preferate: <input type="text" name="fructe" size="20" maxlength="40" /><br /><br /> Scrieti o fraza (un citat) favorita:<br /> <input type="text" name="citat" size="40" maxlength="80" /><br /><br /> <input type="button" value="Favorite" name="buton" onclick="SetCookie()" /> <input type="reset" value="Reset" name="reset" /> </form> </td><td> <form name="preferinte2">
<input type="button" value="Afiseaza Favorite" name="buton" onclick="getCookie('cookie1', 'cookie2', 'cookie3')" /> <input type="button" value="Sterge cookie" name="Clear" onclick="stergeCookie('cookie1', 'cookie2', 'cookie3')" /> </form> <b>Culoare favorita - </b><span id="idculoare"> </span><br /> <b>Fructe preferate - </b><span id="idfructe"> </span><br /> <b>Citat favorit - </b><span id="idcitat"> </span><br /> </td></tr> </table> </body> </html> - Functiile din script au fost definite pentru acest exemplu, pentru folosirea lor in alte scripturi necesita modificari. Dupa ce adaugati acest cod intr-un document HTML, in browser veti avea afisat urmatorul rezultat: Scrieti culoarea favorita: Scrieti fructele preferate: Scrieti o fraza (un citat) favorita: Culoare favorita Fructe preferate Citat favorit -
Reset
- Apasati intai butonul din dreapta "Afiseaza Favorie", vor fi afisate mesaje de eroare, precum ca nu ati adaugat inca o preferinta. Completati in campurile din stanga preferintele dv. apoi apasati butonul "Favorite", acesta apeleaza functia "SetCookie()" care va prelua datele adaugate si le va stoca in fisiere cookie care vor expira peste doua zile de la crearea lor. Dati click pe butonul "Afiseaza Favorite", acesta apeleaza functia "getCookie()" careia ii trimite ca argumente numele cookie-urilor a caror valoare va fi afisata, vor apare preferintele scrise de dv., preluate din cookie. Importanta si avantajul fisierelor cookie le veti constata dupa aceasta. Inchideti broweser-ul, redeshideti-l iar la aceasta pagina si apasati butonul "Afiseaza Favorite". Observati ca sunt afisate preferintele dv. adaugate mai devreme. Maine, daca reveniti la aceasta pagina vor fi afisate aceleasi preferinte, fara sa trebuiasca sa le mai scrieti. Aceste date sunt pastrate 2 zile in fisiere cookie dupa care vor fi sterse automat. Daca vreti sa stergeti aceste cookie-uri mai devreme, apasati butonul "Sterge cookie", acesta apeleaza functia "stergeCookie()" careia ii trimite ca argumente numele cookie-urilor pe care sa le stearga.
ID-ul este un atribut care poate fi adaugat in etichetele (sau tag-urile) HTML. Prin valoarea data acestui atribut se atribuie un nume unic etichetei respective. Acest "id" poate fi folosit in stilurile CSS pentru a defini aspectul grafic si aranjarea in pagina a tag-ului respectiv, dar poate fi folosit si in scripturi JavaScript pentru a lucra cu elementele si continutul etichetei HTML. Astfel, id-ul poate face o legatura intre JavaScript si orice eticheta HTML din document. Pentru a face referire intr-un script JS la o eticeta HTML, prin intermediul id-ului acesteia, se foloseste urmatoarea sintaxa:
document.getElementById("id")
- getElementById("id") este o proprietate a obiectului "document", aceasta, dupa cum sugereaza si denumirea, obtine elementul care are id-ul dintre paranteze. - Puteti folosi si ghilimele simple (' ') pentru numele id-ului din paranteze. Aceasta sintaxa "document.getElementById("id")" returneaza o referinta la intreg elementul HTML care are acest "id", va defini un obiect continand atributele si continutul acestuia. Pentru a face referire la anumite parti din acest obiect (element HTML), de exemplu la continut sau la un atribut "style", se folosesc proprietati specifice acestui obiect de nivel 2. Mai jos este prezentata o lista cu cele mai folosite. Proprietati folosite cu "document.getElementById("id")"
attributes[] - contine intr-o matrice (cu index de la 0) toate atributele etichetei HTML apelate. Acestea se adauga in matrice incepand de la dreapta spre stanga. Are 2 proprietati: o name - returneaza numele atributului apelat o value - returneaza valoarea atributului apelat childNodes - contine o ierarhie de obiecte care sunt adaugate in matrice. Aceste obiecte sunt formate din elemente ale intreg continutului tag-ului respectiv. Pentru a apela obiectele din fiecare nivel ierarhic se folosesc proprietati specifice. Pentru mai multe detalii cititi documentatia de aici. o De exemplu, daca doriti sa obtineti continutul de tip text dintr-un tag, puteti folosi expresia : o document.getElementById("id").childNodes[0].nodeValue className - preia sau modifica valoarea atributului "class" Exemplu: pt. preluare - var cls=obiect.className; si pt. atribuire obiect.className='nume'; getAttribute("atribut") - obtine valoarea atributului specificat intre paranteze setAttribute("atribut", "valoare") - modifica valoarea atributului specificat cu valoarea data removeAttribute("atribut") - elimina existenta atributului specificat intre paranteze
href - defineste sau obtine valoarea atributului "href" (adresa URL) din etichetele pentru link-uri innerHTML - returneaza sau schimba continutul, inclusiv cod HTML, incadrat de o eticheta HTML src - defineste sau obtine valoarea atributului "src" din etichetele <img> style - defineste valori ale atributului "style", folosit pentru elemente de stil CSS. Aceasta proprietate este urmata de o proprietatea tip CSS. value - se foloseste pentru elemente de formular (din <form>), obtine sau defineste valoarea unei casete (cu un anume id) din formular
Ca sa intelegeti mai bine cum se lucreazaa cu "document.getElementById("id")" si proprietatile prezentate mai sus, iata cateva exemple cu fiecare.
1. attributes[]
In acest exemplu folosim o functie JavaScript care este actionata cand se exzecuta click pe un link, aceasta va afisa o fereastra Alert cu numele atributului al doilea din eticheta pentru link. <script type="text/javascript"> <!-function test(val) { var nume_a = val.attributes[1].name; alert(nume_a); } //--> </script> <a href="#" id="id_link" title="Link pt. test" onclick="test(this)">Un link</a> - Observati ca nu am folosit "document.getElementById("un_id")", dar am folosit proprietatea "this". Aceasta face referire la elementul curent care este actionat, astfel, in script, in loc de val.attributes[1].name se putea folosi document.getElementById('id_link').attributes[1].name, rezultatul aici este acelasi. - Acest exemplu va afisa in pagina un link precum urmatorul, dati click pentru a vedea rezultatul. Un link - Observati ca fereastra Alert va afisa "title", numele atributului, care desi este al treile, adaugarea in matricea "attributes[]" se face de la dreapta si primul element are insex 0, al doilea 1 (aici 'title'), si tot asa.
2. childNodes
Lucrul cu childNodes necesita cunoasterea mai multor proprietati care apartin de acesta, dar aici voi prezenta un exemplu simplu ca sa intelegeti cum se foloseste. In acest exemplu avem un DIV in cadrul careia este un text oarecare si o eticheta SPAN. Pentru a vedea rezultatul scriptului cu "childNodes", un link apeleaza functia acestui script.
<script type="text/javascript"> <!-function test2() { var val2 = document.getElementById("ex2").childNodes[1].childNodes[0].nodeValue; alert(val2); } //--> </script> <div id="ex2">Un text oarecare - <span>JavaScript in span</span> - alt text</div> <a href="#" onclick="test2()" title="Exemplu cu childNodes">Test 2</a> - "document.getElementById("ex2").childNodes[1].childNodes[0]" s-ar putea traduce: primul element ( childNodes[0] ) al elementului doi ( childNodes[1] ) din eticheta cu id="ex2", iar "nodeValue" returneaza valoarea. - Acest exemplu va afisa in pagina urmatoarele doua randuri, dati click pe link-ul "Test 2" pentru a vedea rezultatul. Un text oarecare - JavaScript in span - alt text Test 2 - Va afisa textul din SPAN, eticheta <span> cu tot continutul ei este al doilea element al DIVului (primul fiind sirul "Un text oarecare -"), iar sirul din cadrul etichetei SPAN este primul element al acesteia.
3. getAttribute() si setAttribute()
In acest exemplu sunt folosite doua link-uri care actioneaza o functie JS care va prelua valoarea atributului specificat (aici 'title') si o va afisa in fereastra Alert. Al doilea link transmite parametrul 1, caz in care functia va modifica valoarea atributului "title" din primul link inainte de preluarea lui, rezultat care se va vedea in fereastra Alert. <script type="text/javascript"> <!-function test3(nr) { if (nr == 1) { document.getElementById("ex3").setAttribute('title', 'Valoare title modificata'); } var val3 = document.getElementById("ex3").getAttribute('title'); alert(val3); } //--> </script> <a href="#" id="ex3" title="Exemplu cu getAttribute()" onclick="test3(0)">Link 1</a> - <a href="#" title="Link 2 - setAttribute()" onclick="test3(1)">Link 2</a> - Acest exemplu va afisa in pagina urmatoarele doua link-uri, dati click pe primul apoi pe al doilea si iar pe primul; veti observa diferenta. Link 1 - Link 2
Sfat: Cand doriti sa schimbati valoarea unei clase, in loc de "setAttribute()" folositi className, deoarece IE creaza probleme cu "setAttribute" pt. clase. Exemplu: obiect.className = 'nume_clasa';
4. href
Aici este prezentat un exemplu care modifica adresa URL adaugata in atributul 'href' al unui link. <script type="text/javascript"> <!-function test4() { document.getElementById("ex4").href="http://www.marplo.net/javascript/"; } //--> </script> <a href="http://www.marplo.net/jocuri/" id="ex4" title="Exemplu cu href" target="_blank">Jocuri</a> - Link-ul de mai jos, desi are scris in codul lui sa deschida pagina de jocuri, prin evenimentul 'onmouseover' care apeleaza functia "test4()" la pozitionarea mouse-ului pe link se modificat valoarea atributului 'href' si va deschide alta pagina (aceea setata in functie). Jocuri - Similar puteti proceda si cu "src", care se refera la atributul 'src' din tag-urile <img>
5. innerHTML
Cu innerHTML se poate prelua continutul incadrat de o eticheta HTML, dar poate sa si inlocuiasca cu altul acest continut, folosind inclusiv tag-uri. In acest exemplu avem DIV-ul de la exemplu 2 si doua link-uri, acestea apeleaza o functie JS care pentru primul link va afisa o fereastra Alert cu tot continutul DIV-ului iar pentru al doile link va inlocui acest continut cu sirul din atributul 'title' (transmis ca parametru). <script type="text/javascript"> <!-function test5(vl) { if (vl == 0) { var val5 = document.getElementById("ex5").innerHTML; alert(val5); } else { document.getElementById("ex5").innerHTML = vl; }
} //--> </script> <div id="ex5">Un text oarecare - <span>JavaScript in span</span> - alt text</div> <a href="#" title="Exemplu cu innerHTML" onclick="test5(0)">Afiseaza Alert</a> - <a href="#" title="Exemplu cu innerHTML - inlocuire" onclick="test5(this.getAttribute('title'))">Modifica DIV</a> - In pagina va afisa urmatorul rezultat; dati click pe primul link si apoi pe al doilea. Un text oarecare - JavaScript in span - alt text Afiseaza Alert - Modifica DIV - Observati ca desi este folosita aceeasi expresie "document.getElementById("ex5").innerHTML", aceasta are efecte opuse. Cand se afla in dreapta caracterului '=' (ca valoare a unei variabile), aceasta expresie obtine continutul din eticheta HTML respectiva. Cand este scrisa in stanga egalului, aceasta expresie va inlocui continutul etichetei HTML cu valoarea adaugata dupa egal, in dreapta.
6. style
Cu style puteti modifica grafic elementele din pagina, pentru aceasta se folosesc proprietatile si valorile specifice CSS. Sintaxa generala este: document.getElementById("id").style.proprietate="valoare" - "proprietate" si "valoare" sunt preluate din CSS, exemplu: color (proprietate) si blue (valoare). - diferenta apare la proprietatile CSS compuse, cum e "font-weight", "margin-top" sau "bordertop-width" si altele similare. In JavaScript dispare liniuta '-' si cuvintele urmatoare se scriu cu primul caracter majuscula, astfel pentru "font-weight" din CSS in JS este "fontWeight", iar pentru "border-top-width" in JS este "borderTopWidth". In exemplul prezentat aici avem un DIV in cadrul caruia este un link si un tag SPAN care la inceput are "display:none" (nu apare in pagina). O functie JavaScript care este apelata cu "onmouseover" face ca atunci cand mouse-ul este pe link sa apara continutul din SPAN (adauga acestuia "display:inline") si cand mouse-ul este pozitionat deasupra acestuia, textul devine albastru si ingrosat. <script type="text/javascript"> <!-function test6(nr) { if (nr == 0) { document.getElementById('ex6').style.display = 'inline'; } else if (nr == 1) { document.getElementById('ex6').style.color = '#0101ff'; document.getElementById('ex6').style.fontWeight = 'bold'; }
} //--> </script> <div> <a href="#" title="Exemplu cu style" onmouseover="test6(0)">Link ex6</a> - <span id="ex6" style="display:none;" onmouseover="test6(1)">Textul din SPAN, ascuns</span> </div> - In pagina va apare urmatorul link, pozitionati mouse-ul pe el apoi mutati cursorul pe textul care apare. Link ex6 -
7. value
Proprietatea value se foloseste cu elemente din formular, aceasta preia sau atribue valori in campurile din formular. "value" se poate folosi si cu proprietati specifice lucrului cu formulare, in care se utilizeaza numele din atributul "name". (Vedeti detalii si exemple la Lectia 12 si Lectia 13). - Pentru a folosi proprietatea "value" impreuna cu "getElementById('id')", campul sau caseta de formular la care se face referire trebuie sa aibe atribuita un "id". Iata un exemplu simplu care afiseaza intr-o fereastra Alert textul scris intr-o caseta de text. <script type="text/javascript"> <!-function test7() { var val7 = document.getElementById("ex7").value; alert(val7); } //--> </script> <form action="" method="post"> <input type="text" id="ex7" /> <input type="button" value="Click" onclick="test7()" /> </form> - Codul de mai sus va afisa urmatorul rezultat. - Scrieti ceva in caseta de text si apasati pe butonul "Click".
getElementsByTagName() este o functie, sau metoda JavaScript care obtine si face referire la toate elementele HTML a caror eticheta este spoecificata ca parametru intre paranteze. De
exemplu: document.getElementsByTagName('div') - face referire la toate tag-urile DIV din documentul HTML. Aceasta functie stocheaza elementele pe care le-a obtinut intr-un obiect de tip Array (o matrice secventiala), unde cheile sunt numere intregi incepand de la zero. Astfel, daca intr-un document HTML sunt 3 DIV-uri si apelam functia document.getElementsByTagName('div'), aceasta va forma un obiect ce are o matrice cu 3 elemente care contin fiecare o referinta la cate un DIV, iar pentru a face referire la primul DIV, se scrie expresia: document.getElementsByTagName('div')[0] , pentru al doilea DIV se foloseste cheia [1] si tot asa. Proprietatile care pot fi folosite cu "getElementBiId()" (functie prezentata in lectia anterioara) le puteti folosi si cu elementele din obiectul obtinut cu "getElementsByTagName()". Ca sa intelegeti mai bine cum se lucreaza cu aceasta functie, studiati fiecare din exemplele de mai jos.
1. Aplicarea unei proprietati elementelor cu acelasi tag

Pentru aplicarea unei proprietati elementelor HTML care au acelasi tag, trebuie parcursa matricea obtinuta cu metoda getElementsByTagName(). Ca formula generala poate fi folosit urmatorul cod:
var elemente = document.getElementsByTagName('numeTag'); for (var i=0; i<elemente.length; i++) { elemente[i].proprietate; }
- Unde "elemente" este o variabila in care e stocata matricea cu tag-urile obtinute - Functia "for()" parcurge aceasta matrice, folosind si expresia "elemente.length" care preia numarul de elemente din matrice. - Iar "elemente[i].proprietate" atribuie proprietatea dorita fiecarui element (tag). Iata un exemplu in care atunci cand se da click pe un cuvant special definit, continutul din fiecare tag SPAN va fi subliniat si albastru <script type="text/javascript"> function ad_style(tag) { // Obtine obiectul cu toate tag-urile precizate var get_tags = document.getElementsByTagName(tag); // Parcurge matricea cu tag-urile for (var i=0; i<get_tags.length; i++) { // Atribue proprietati de stil get_tags[i].style.textDecoration = 'underline'; get_tags[i].style.color = 'blue';
} } </script> <h4 style="cursor:pointer;" onclick="ad_style('span')"><u>Click</u></h4> Continut cu text incadrat in etichete SPAN:<br /> www.marplo.net : <span>Cursuri</span> si <span>tutoriale</span> web <span>gratuite</span>. - Cand apasati pe cuvantul "Click", apeleaza functia "ad_style()" careia ii transmite ca parametru numele tag-ului (aici 'span'). Functia preia tag-urile din parametrul precizat, si parcurgand matricea cu acestea, atribuie fiecaruia un stil subliniat (underline) si culoarea albastra. - Pentru a vedea efectul, dati click pe cuvantul "Click" de jos. Click Continut cu text incadrat in etichete SPAN: www.marplo.net : Cursuri si tutoriale web gratuite.
2. getElementById() si getElementsByTagName()
Cand folositi "getElementsByTagName(numeTag)" imediat dupa obiectul "document", se preia tag-urile 'numeTag' din tot documentul HTML, dar sunt cazuri cand doriti preluarea unor tag-uri dintr-o anumita portiune a paginii, cum ar fi de exemplu dintr-un DIV sau UL. In acest caz, adaugati acelui element HTML un ID (in care se afla tag-urile respective) si in codul JS definiti un obiect cu acesta folosind metoda "getElementById(ID)", apoi la acest obiect aplicati functia "getElementsByTagName()". Sintaxa generala e urmatoarea: var variabila = document.getElementById(ID).getElementsByTagName(numeTag) - "numeTag" fiind tag-urile care vor fi preluate si care se afla in cadrul etichetei HTML care are id-ul "ID". - Acestea vor fi stocate in "variabila" sub forma de matrice, pe care o puteti parcurge cu o functie "for()". Iata si un exemplu in care sunt doua liste <ul> diferite, iar cand este apasat un cuvant special definit, va fi aplicat un efect doar tag-urilor <li> a uneia din ele.
<script type="text/javascript"> function ad_style2(id, tag) { // Obtine elementul cu id-ul din parametru 'id' var el_id = document.getElementById(id); // Obtine obiectul cu toate tag-urile din 'el_id', precizate la parametru 'tag' var get_tags = el_id.getElementsByTagName(tag); // Parcurge matricea cu tag-urile
for (var i=0; i<get_tags.length; i++) { // Coloreaza si ingroasa textul get_tags[i].style.color = 'blue'; get_tags[i].style.fontWeight = 'bold'; } } </script> <h4 style="cursor:pointer;" onclick="ad_style2('ul2', 'li')"><u>Click</u></h4> <ul id="ul1"> <li>Text din ul1 ...</li> <li>Text din ul1 ...</li> <li>Text din ul1 ...</li> </ul> <ul id="ul2"> <li>Text din ul2 ...</li> <li>Text din ul2 ...</li> <li>Text din ul2 ...</li> </ul> - Observati ca functia "ad_style2(id, tag)" preia doi parametri: 'id' pentru id-ul elementului principal in care se afla tag-urile, iar 'tag' pentru numele tag-urilor care vor fi preluate. In felul acesta puteti folosi aceeasi functia si pentru alte grupuri (id si tag) diferite. - Explicatiile necesare sunt cele din codul script-ului. Pentru a vedea rezultatul, apasati pe cuvantul "Click" de mai jos Click

Text din ul1 ... Text din ul1 ... Text din ul1 ... Text din ul2 ... Text din ul2 ... Text din ul2 ...
3. getAttribute() si getElementsByTagName()
Sunt situatii in care trebuie aplicate efecte sau proprietati JavaScript doar la unele elemente (care au acelasi atribut) dintr-o grupa cu aceleasi tag-uri. Cel mai adesea sunt cazurile in care este folosit atributul "class". Daca doriti sa adaugati un efect sau proprietate doar elementelor HTML care au aceeasi clasa (si acelasi tag), folositi metoda getAttribute('class') in cadrul parcurgerii matricei obtinute cu "getElementsByTagName()". Ca o formula generala ar fi urmatoarea:
var elemente = document.getElementsByTagName(numeTag); for (var i=0; i<elemente.length; i++) { if (elemente[i].getAttribute('class')=='numeClasa') { // Executati functia sau codul dorit } }
- Unde "numeClasa" e numele clasei din tag-urile "numeTag" la care doriti sa aplicati un anume cod sau functie. Ca sa intelegeti mai bine, studiati exemplul urmator in care sunt trei etichete <span> intr-un paragraf, iar la apasarea pe un cuvant "Click", va fi adaugata o culoare de fundal doar continutului din doua etichete SPAN (care au class="cls"). <script type="text/javascript"> function ad_style3(tag, clasa) { // Obtine obiectul cu toate tag-urile precizate var get_tags = document.getElementsByTagName(tag); // Parcurge matricea cu tag-urile for (var i=0; i<get_tags.length; i++) { // Daca elementul are clasa din parametru 'clasa' if (get_tags[i].getAttribute('class')==clasa) { // Ii adauga o proprietate 'backgroundColor' get_tags[i].style.backgroundColor = '#adfead'; } } } </script> <h4 style="cursor:pointer;" onclick="ad_style3('span', 'cls')"><u>Click</u></h4> <p>Continut cu text incadrat in etichete SPAN:<br /> <span class="cls">Cursuri</span>, si <span class="cls">tutoriale</span> web <span>gratuite</span></p> - Cand apasati cuvantul "Click", este apelata functia "ad_style3(tag, clasa), aceasta primeste ca parametri numele tag-ului si al clasei la care va aplica efectul. Rezultatul il puteti vedea mai jos. Click
Continut cu text incadrat in etichete SPAN: Cursuri, si tutoriale web gratuite
4. Preluarea tag-urilor la incarcarea paginii
Adaugand in etichetele HTML evenimentele JavaScript specifice, precum "onclick()", "onmouseover()" (si altele prezentate in Lectia 18), se poate apela o functie dupa executarea evenimentului respectiv. Precum in exemplele din aceasta lectie, functiile sunt apelate cu "onclick()"; dar pentru aceasta trebuie specificat acest atribut intr-o eticheta HTML, iar tag-urile dorite sunt preluate numai dupa executarea evenimentului JS. Exista si alta metoda, JavaScript are posibilitatea de preluare a tag-urilor si stocarea evenimentelor in memorie la incarcarea paginii, lucru util cand se doreste aplicarea de proprietati si efecte la incarcarea paginii, in plus nu mai trebuie adaugat evenimentul respectiv ca atribut intr-o eticheta HTML. In principiu, se atribuie unei variabile un obiect "tip functie" apoi aceasta variabila este apelata cu proprietatea window.onload care determina executia ei la incarcarea paginii. Studiati cu atentie codul din exemplul urmator. Acesta preia valoarea atributului "class" si continutul fiecarui tag <li> din pagina la incarcarea acesteia si pot fi afisate intr-o fereastra Alert cand se da click pe ele.
<html> <head> <title>Preincarcarea tag-urilor</title> <style type="text/css"> .cli { cursor:pointer; } </style> <script type="text/javascript"> // Se defineste variabila cu functia obiect var get_li = function () { // Preia tag-urile LI din pagina var tags_li = document.getElementsByTagName('li'); var nr_li = tags_li.length; // Obtine nr. de tag-uri LI // Parcurge matricea cu tag-urile for (i=0; i<nr_li; i++) { // Aplica evenimentul 'onclick' la fiecare tag, cu o functie ce trebuie executata tags_li[i].onclick = function () { var clasa = this.getAttribute('class'); // Obtine valoarea clasei var continut = this.textContent || this.innerText; // Preia continutul alert('class='+ clasa+ ' - '+ continut); // Defineste fereastra Alert return false; }; } }; // Apeleaza variabila 'get_li' la incarcarea paginii window.onload = get_li; </script> </head> <body> <ul> <li class="cli">Text din primul LI</li> <li class="cli">Text din al doilea LI</li>
<li class="cli">Text din al treilea LI</li> </ul> </body> </html>
- Stilul CSS din HEAD este pentru schimbarea cursor-ului de mouse in "manuta" cand se afla deasupra fiecarui <li>. - Observati ca nu a mai fost adaugat nici un atribut "onclick", totusi, acesta este stocat in memorie si cand dati click pe fiecare <li> va apare fereastra Alert cu datele din fiecare. Puteti testa acest exemplu mai jos:

Text din primul LI Text din al doilea LI Text din al treilea LI
createElement() si insertBefore() sunt doua functii (metode) JavaScript care sunt folosite pentru a adauga elemente noi in pagina, care sunt create dinamic cu JavaScript. De obicei aceste functii sunt folosite impreuna.
1. createElement("tag")
Creaza obiectul elementului specificat la parametrul "tag". Sintaxa generala este urmatoarea:
document.createElement("tag");
- Unde "tag" este denumirea (selectorul) elementului HTML care se doreste sa fie creat. - De exemplu: pentru <p> paramerul va fi "p", pentru <div> parametrul va fi "div", iar pentru o casuta <input> se specifica "input". Iata un exemplu in care este creat tag-ul <h3> var element = document.createElement("h3"); - "element" este variabila ce stocaheaza obiectul elementului creat. Odata creat acest element, ii putem adauga atribute si continut. Pentru aceasta i-se aplica functiile specifice, "setAttribute()" (sau "className" pt. class) si "innerHTML" (sunt prezentate in Lectia 28). De exemplu, ii adaugam o CLASA si un text. <script type="text/javascript"> var element = document.createElement("h3"); element.className = "o_clasa"; element.innerHTML = 'Textul din eticheta H3 creata dinamic'; </script>
- Acest cod va crea un obiect "element" ce contine urmatorul cod HTML "<h3 class="o_clasa">Textul din eticheta H3 creata dinamic</h3>". - Similar pot fi create si alte tag-uri (elemente) HTML, pentru un <div>, in loc de "h3" scrieti "div", si tot asa pt. "span", "br", "li", ... etc. Acum trebuie doar adaugat in pagina, in locul unde dorim. Pentru aceasta se poate folosi metoda "insertBefore()", prezentata in contnuare.
2. insertBefore()
Adauga un obiect imediat inaintea altui obiect luat ca referinta, ambii in interiorul unui element parinte. Sintaxa generala este urmatoarea:
parinte.insertBefore(element_nou, referinta);
- "element_nou" este obiectul cu elementul pe care dorim sa-l adaugam. - "referinta" este obiectul inaintea caruia va fi adaugat "element_nou". - "parinte" este elementul parinte, in care se afla "referinta" si unde va fi adaugat si "element_nou" - Daca "referinta" are valoarea null, "element_nou" va fi adaugat la sfarsitul listei nod-urilor copil din "parent", devenind astfel ultimul nod copil al acestuia. Iata un exemplu din care sa intelegeti mai bine. Ca element nou ce va fi adaugat este folosit elementul creat mai sus, la primul subcapitol. La click pe un buton, va fi adaugat tag-ul H3 creat mai sus, inaintea unui aume DIV (cu id="rpr") <script type="text/javascript"> <!-// Functia ce creaza noul element si-l adauga inaintea unui cadru cu id="rpr" function add_h3() { // Creaza noul element H3 si ii adauga o clasa si continut var element = document.createElement('h3'); element.className = 'o_clasa'; element.innerHTML = 'Textul din eticheta H3 creata dinamic' // Creaza obiectul cu elementul de reper (Adaugati-i si valoarea null pentru a vedea diferenta) var reper = document.getElementById('rpr'); // Adauga elementul nou inaintea celui de reper // Parinte este body document.body.insertBefore(element, reper); } //--> </script> <div id="rpr">Elementul de reper</div> <form action=""><input type="button" value="Click" onclick="add_h3()" /></form>
- Cand apasati pe butonul "Click", se apeleaza functia "add_h3()" care va crea automat elementul <h3>, cu textul si clasa precizate, apoi il va include /afisa inaintea tag-ului cu id="rpr". Dupa cum puteti testa mai jos. Elementul de reper - Daca elementul parinte nu e BODY, ci un alt DIV, TABLE ori altceva, il preluati mai intai intrun obiect (ex.: parinte=document.getElementById('id_parinte');) apoi il includeti in formula cu "parinte.insertBefore()".
3. Adaugare automata input (casute) in formular

Iata un exemplu practic si util de folosire a metodelor createElement() si insertBefore() pentru a adauga automat casute text intr-un formular. Explicatiile necesare sunt in codul scriptului. <script type="text/javascript"> <!-// Functia creaza elementul input si-l adauga inaintea butonului Submit function add_input() { // Seteaza noul element input, cu atributul type=text si name=nume[] var new_input = document.createElement("input"); new_input.setAttribute("type", "text"); new_input.setAttribute("name", "nume[]"); new_input.style.display = 'block'; // Seteaza display:block; pt. a afisa casutele unele sub altele // Seteaza obiectele cu elementul de reper (Submit) si cadru parinte var reper = document.getElementById('submit'); var parinte = reper.parentNode; // Adauga elementul nou inaintea celui de reper parinte.insertBefore(new_input, reper); } //--> </script> <form action=""> <input type="text" name="nume[]" /> <input type="submit" value="Submit" id="submit" /><br /><br /> <input type="button" value="Adauga caseta" onclick="add_input()" /> </form> - Cand dati click pe butonul "Adauga caseta", se apeleaza functia "add_input()", aceasta va crea si adauga caseta de text, dupa cum puteti testa mai jos. - Am adaugat la atributul "name" valoarea "nume[]" (cu paranteze patrate) deoarece, in general, datele sunt trimise la un script pe server si astfel pot fi prelucrate ca o matrice.
Submit
Creare scripturi avansate - Javascript si PHP

Codul PHP este executat pe server iar datele de iesire sunt transmise la navigatorul web. Codul scriptului JavaScript este executat de browser pe calculatorul utilizatorului. Combinand aceste doua limbaje de programare web, se pot obtine scripturi JavaScript dinamice, cu rezultate in functie de datele primite si procesate de server. Astfel, aceeasi pagina de site poate contine un cod JavaScript pentru un utilizator si alt cod JS in cazul altui utilizator. - Sunt 2 modalitati de a combina JavaScript cu PHP ca sa se obtina un rezultat dinamic sau personalizat:
1. Prin scrierea intregului script JS in codul PHP si adaugarea acestuia in pagina web cu functia PHP "echo" (sau "print"). <?php echo '<script type="text/javascript"> // Cod JS </script>'; ?> - Atentie, trebuie sa tineti cont de modul de lucru al ghilimelelor din cod, astfel incat ceea ce va fi returnat de "echo" sa fie un script JS ca si cum a fost scris in codul HTML.
2. Prin adaugarea in scriptul JS din codul HTML doar a variabilelor PHP necesare scriptului JavaScript (returnand valoarea cu "echo"). <script type="text/javascript"> var var_js = <?php echo $var_php; ?>; </script>
- Ambele variante de cod trebuie scrise in fisiere php ca sa poata fi procesate de modulul PHP. In continuare sunt explicate cateva exemple practice din care sa intelegeti modul de combinare PHPJavaScript si utilitatea acestuia (Trebuie sa cunoasteti deja, macar la nivel incepator, PHP si JavaScript, si HTML).
1. Alert cu nume utilizator

De exemplu, intr-o pagina web cu sistem de autentificare sa fie afisata o fereastra Alert cu numele utilizatorului dupa ce s-a autentificat. In acest caz presupunem ca numele de utilizator e stocat intr-o variabila de sesiune: $_SESSION['nume']. Folosind prima metoda, codul PHP ar fi urmatorul:
<?php session_start(); // Aceasta functie trebuie scrisa la inceputul fisierului php
// Cod php ... echo '<script type="text/javascript">alert("Bine ai venit '. $_SESSION['nume']. '");</script>'; ?>
Sau a doua varianta: <?php session_start(); // La inceputul paginii html ?>  <script type="text/javascript"> alert("Bine ai venit <?php echo $_SESSION['nume']; ?>"); </script> - O astfel de fereastra Alert poate fi utila in cazul notificarii utilizatorului despre date ce pot fi extrase de PHP dintr-o baza de date sau fisier, cum ar fi instiintarea unui nou mesaj privat.
2. Ceas cu ora serverului

Un ceas facut si afisat in pagina cu JavaScript va afisa ora de la calculatorul vizitatorului. Daca se doreste afisarea unei aceleasi date (de pe server) pentru toti vizitatorii, cum ar fi in cazul unor jocuri, trebuie adaugat in scriptul JS timpul serverului, dupa cum e si in urmatorul exemplu:
<div id="tag_ora"></div> <script type="text/javascript"> <!-// Script ora server-time, de la http://www.marplo.net // Preia data serverului prin PHP var serverdate = new Date(<?php echo date('y,n,j,G,i,s'); ?>); // Defineste variabilele JS de lucru var ore = serverdate.getHours() // Preia ora var minute = serverdate.getMinutes() // Preia minutele var secunde = serverdate.getSeconds() // Preia secundele // Functia de prelucrare si afisare a datelor function ceas() { secunde++; if (secunde>59) { secunde = 0; minute++; } if (minute>59) {
minute = 0; ore++; } if (ore>23) { ore = 0; } var output = "<font size='4'><b><font size='1'>Ora server</font><br />"+ore+":"+minute+":"+secunde+"</b></font>" document.getElementById("tag_ora").innerHTML = output; } // Apeleaza functia la incarcarea paginii si la fiecare secunda window.onload = function(){ setInterval("ceas()", 1000); } //--> </script> - Testati singuri pt. a vedea rezultatul
3. Afisare date cu JavaScript de la PHP, in functie de o adresa URL

Ati vazut in site-urile pt. trafic sau afisare banner ca e necesar adaugarea in pagina a unui mic cod JS cu o anume adresa URL la atributul "src". Acestea folosesc acelasi principiu, de combinare PHP cu JavaScript. Adresa din codul ce trebuie adaugat in pagina apeleaza un script PHP, acesta preia cu $_GET parametri din adresa URL primita si in functie de acestia prelucreaza datele pe server si construieste pentru returnarea rezultatului un cod JavaScript si HTML (fara tagul <script>) care va determina afisarea in pagina (cu document.write, sau innerHTML intr-un anume tag) a unui cod HTML pt. banner, trafic, top, ... etc. Ca sa intelegeti mai bine, experimentati urmatorul exemplu: a) Creati pe server un fisier php, cu denumirea "phpjs_test.php", si adaugati urmatorul cod:
<?php // Exemplu test, de la http://www.marplo.net // Creaza o matrice cu denumiri $ids = array(1=>'php-mysql', 2=>'javascript', 3=>'html'); // Preia id-ul de la adresa URL // Va returna cu echo un link (cu denumirea asociata din matrice) intr-un cod specific JavaScript
(document.write) if (isset($_GET['id'])) { if ($sir = $ids[$_GET['id']]) { // Va determina afisarea unui link in pagina apelanta echo 'document.write("<a href=\'http://www.marplo.net/'. $sir. '\'>Curs '. $sir. '</a>");'; } } ?>
b) In acelasi director de pe server creati un fisier html (ex. "test_jsphp.html") in care adaugati urmatorul cod: <script type="text/javascript" src="phpjs_test.php?id=2"></script>
- Apelati acest fisier html de pe server. Rezultatul va fi afisarea (determinata de "document.write()") in pagina a unui link ce a fost definit in scriptul php in functie de 'id' din adresa de la "src". Similar se pot determina spre afisare banere sau orice altceva construit cu html in interiorul comezii "document.write()". - Trebuie acordata atentie la imbricarea ghilimelelor in codul php de returnare a rezultatului. Rezultatul transmis de "echo" trebuie sa fie o comanda corecta JS ce poate fi recunoscuta si executata de JavaScript.

Javascript Curs

Încărcat de

Informații document

Titlu original

Drepturi de autor

Formate disponibile

Partajați acest document

Partajați sau inserați document

Opțiuni de partajare

Vi se pare util acest document?

Este necorespunzător acest conținut?

Drepturi de autor:

Formate disponibile

Javascript Curs

Încărcat de

Drepturi de autor:

Formate disponibile

1.

Adaugarea JavaScript intr-o pagina HTML

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

2. Ascunderea codului in browserele vechi

var nume = valoare

- Fara declaratia var

Operatori sunt de mai multe tipuri:

Acestia vor fi prezentati dataliat in lectia urmatoare

x = x-y x = x*y x = x/y x = x%y

4. Operatori logici (booleeni)

5. Operator pentru string (sir)

7. Operatori pentru functii

8. Operatori pentru structuri de date (obiecte)

numeObiect.nume_Variabila numeObiect.nume_Functie() numeObiect.alt_Obiect

9. Operatorul conditional "?"

10. Precedenta operatorilor

if (conditie) { codul care va fi executat daca este adevarata conditia }

2. Instructiunea "if ... else"

Instructiuni ciclice (repetitive)

for (incepere_nr; conditie_nr; ciclu) { cod care va fi executat }

2. Instructiunea for ... in

for (nume_proprietate in obiect) { instructiuni }

while (conditie) { codul care va fi executat }

4. Instructiunea do ... while

do { codul care va fi executat } while (conditie)

1. Instructiunile break si continue

break - intrerupe definitiv executarea ciclului.

2. Instructiunea eticheta (label)

with (obiect) { instructiuni }

1. Crearea (definirea) functiilor

function nume_functie(argument1, argument, ...) { codul care va fi executat }

function nume_functie() { codul care va fi executat }

function suma(x, y) { z = x+y; return z }

nume_functie(argument1, argument, ...)

- O functie fara argumente se apeleaza in felul urmator:

4. Exemple de scripturi cu functii

1. Modificarea numarului argumentelor

Obiectele Java Script - 1

- Obiecte pe partea de client - Obiecte pe partea de server - Obiecte esentiale

1 - String 2 - Math 3 - Date 4 - Array 5 - Global

length - returneaza numarul de caractere dintr-un sir (string)

Metodele obiectului string sunt urmatoarele:

2. Obiectul Array (tablou sau matrice)

var nume_colegi = new Array(4)

nume_colegi[0] = "Cristi" nume_colegi[1] = "Ion" nume_colegi[2] = "Simona" nume_colegi[3] = "Adi"

Sau puteti scrie si astfel:

var nume_colegi = Array('Cristi', 'Ion', 'Simona', 'Adi');

coleg = nume_colegi[0] colega = nume_colegi[2]

Obiectul Array are urmatoarele metode:

var nr_elemente = nume_colegi.length;

// Afla nr. elemente din matrice

Afiseaza numele in ordine alfabetica: Adi Cristi Ion Simona

In aceasta lectie este continuata prezentarea si explicarea obiectelor esentiale JavaScript

var data = new Date

- Metodele obiectului Date:

- Metodele obiectului Math:

Obiecte de tip Global

Metodele acestui obiect (care pot fi considerate si functii JavaScript) sunt:

Obiectul document are urmatoarele meode:

2. Obiectul document si Formulare

<form name="nume_form"> Nume: <input type="text" name="nume_element" value="">

1. Obiecte pe partea de client

nume_var = document.getElementById("id").innerHTML; - sau nume_var = document.getElementById("id").childNodes[0].nodeValue;