JavaScript a fost dezvoltat prima data de catre firma Netscape, cu numele de Live Script, un limbaj de script care extindea capacitatile HTML, ofera o alternativa partiala la utilizarea unui numar mare de scripturi CGI pentru prelucrarea informatiilor din formulare si care adauga dinamism in paginile web.
Dupa lansarea limbajului Java, Netscape a inceput sa lucreze cu firma Sun, cu scopul de a crea un limbaj de script cu o sintaxa si semantica asemanatoare cu a limbajului Java, si din motive de marketing numele noului limbaj de script a fost schimbat in „JavaScript”.
Java Script a aparut din nevoia ca logica si inteligenta sa fie si pe partea de client , nu doar pe partea de server. Daca toata logica este pe partea de server, intreaga prelucrare este facuta la server, chiar si pentru lucruri simple, asa cum este validarea datelor. Astfel, Java Script il inzestreaza pe client si face ca relatia sa fie un adevarat sistem client-server.
Limbajul HTML ofera autorilor de pagini Web o anumita flexibilitate, dar statica. Documentele HTML nu pot interactiona cu utilizatorul în alt mod mai dinamic, decât pune la dispozitia acestuia legaturi la alte resurse (URL-uri). Crearea de CGI-uri (Common Graphics Interface) – [programe care ruleaza pe serverul Web si care accepta informatii primite din pagina de web si returneaza cod HTML] – a dus la imbogatirea posibilitatilor de lucru. Astfel, un pas important spre interactivizare a fost realizat de JavaScript, care permite inserarea în paginile web a script-urilor care se executa în cadrul paginii web, mai exact în cadrul browser-ului utilizatorului, usurand astfel si traficul dintre server si client. De exemplu, într-o pagina pentru colectarea de date de la utilizator se pot adauga scripturi JavaScript pentru a valida corectitudinea introducerii si apoi pentru a trimite serverului doar date corecte spre procesare.
JavaScript contine o lista destul de ampla de functii si comenzi menite sa ajute la operatii matematice, manipulari de siruri, sunete, imagini, obiecte si ferestre ale browser-ului, link-urile URL si verificari de introduceri ale datelor în formulare. Codul necesar acestor actiuni poate fi inserat în pagina web si executat pe calculatorul vizitatorului.
Dupa lansarea sa, in decembrie 1995, JavaScript si-a atras sprijinul principalilor distribuitori din domeniu, cum sunt Apple, Borland, Informix, Oracle, Sybase, HP sau IBM. S-a dezvoltat in continuare, obtinand recunoastere majoritatii browserelor. Intelegand importanta scripting-ului web, Microsoft s-a dorit sa ofere suport si pentru JavaScript. Netscape a preferat sa acorde licenta de tehnologie companiei Microsoft in loc sa o vanda, astfel Microsoft a analizat JavaScript, si bazandu-se pe documentatia publica a creat propria sa implementare, „Jscript”, care este recunoscuta de Microsoft Internet Explorer.
Jscript 1.0 este aproximativ compatibil cu JavaScript 1.1, care este recunoscut de Netscape Navigator. Totusi, versiunile ulterioare de JavaScript si diversele diferente specifice platformelor de operare au inceput sa dea destule probleme programatorilor web si astfel Netscape, Microsoft si alti distribuitori au fost de acord sa predea limbajul unei organizatii internationale de standardizare – ECMA ; aceasta a finalizat o specificatie de limbaj, cunoscuta ca ECMAScript, recunoscuta de toti distribuitorii. Desi standardul ECMA este util, atat Netscape cat si Microsoft au propriile lor implementari ale limbajului si continua sa extinda limbajul dincolo de standardul de baza.
Pe langa Jscript, Microsoft a introdus si un concurent pentru JavaScript, numit VBScript, realizat pentru a usura patrunderea pe web a programatorilor VB. VBScript este un subset al limbajului Visual Basic. Cu toate acestea JavaScript a devenit cunoscut ca limbajul de scripting standard pentru web.
In general se considera ca exista zece aspecte fundamentale ale limbajului JavaScript pe care orice programator in acest limbaj ar trebui sa le cunoasca :

• 1. JavaScript poate fi intrudus in HTML – De obicei codul JavaScript este gazduit in documentele HTML si executat in interiorul lor. Majoritatea obiectelor JavaScript au etichete HTML pe care le reprezinta, astfel incat programul este inclus pe partea de client a limbajului. JavaScript foloseste HTML pentru a intra in cadrul de lucru al aplicatiilor pentru web.
• 2. JavaScript este dependent de mediu – JavaScript este un limbaj de scriptare; software-ul care ruleaza de fapt programul este browser-ul web (Firefox, Opera, Netscape Navigator, Internet Explorer, Safari, etc.) Este important sa luam in considerare aceasta dependenta de browser atunci cand utilizam aplicatiiJavaScript.
• 3. JavaScript este un limbaj in totalitate interpretat – codul scriptului va fi interpretat de browser inainte de a fi executat. JavaScript nu necesita compilari sau preprocesari, ci ramane parte integranta a documentului HTML. Dezavantajul acestui limbaj este ca rularea dureaza ceva mai mult deoarece comenzile JavaScript vor fi citite de navigatorul Web si procesate atunci când user-ul apeleaza la acele functii ( prin completare de formulare, apasare de butoane, etc). Avantajul principal este faptul ca putem mult mai usor sa actualizam codul sursa.
• 4. JavaScript este un limbaj flexibil – in aceasta privinta limbajul difera radical de C++ sau Java. In JavaScript putem declara o variabila de un anumit tip, sau putem lucra cu o variabila desi nu-i cunoastem tipul specificat inainte de rulare .
• 5. JavaScript este bazat pe obiecte – JavaScript nu este un limbaj de programare orientat obiect, ca Java, ci mai corect, este „bazat pe obiecte”; modelul de obiect JavaScript este bazat pe instanta si nu pe mostenire.
• 6. JavaScript este condus de evenimente – mare parte a codului JavaScript raspunde la evenimente generate de utilizator sau de sistem. Obiectele HTML, cum ar fi butoanele, sunt imbunatatite pentru a accepta handlere de evenimente.
• 7. JavaScript nu este Java – Cele doua limbaje au fost create de companii diferite, motivul denumirii asemanatoare este legat doar de marketing.
• 8. JavaScript este multifunctional – limbajul poate fi folosit intr-o multitudine de contexte pentru a rezolva diferite probleme: grafice, matematice, si altele.
• 9. JavaScript evolueaza – limbajul evolueaza, fapt pozitiv care insa poate genera si probleme, programatorii trebuind sa verifice permanent ce versiune sa foloseasca pentru ca aplicatiile sa poata fi disponibile unui numar cat mai mare de utilizatori de browsere diferite.
• 10.JavaScript acopera contexte diverse – programarea cu acest limbaj este indreptata mai ales catre partea de client, dar putem folosi JavaScript si pentru partea de Server. JavaScript este limbajul nativ pentru unele instrumente de dezvoltare web, ca Borland IntraBuilder sau Macromedia Dreamweaver.

Acest curs prezinta elementele de baza ale JavaScript si modul de lucru cu acest limbaj, fiind un curs de initiere care se adreseaza in special incepatorilor in programarea web, care vor sa invete acest limbaj de scripting.

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 browser-ului 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 româna are regulile ei de sintaxa: orice propozitie incepe cu litera mare, se termina cu un semn de punctuatie, etc.! La fel si limbajele de programare au regulile si sintaxa lor.
In continuare vor fi prezentate regulile de sintaxa ala limbajului Java Script.

• 1. 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. Caractere speciale – cand scriem scripturi, apare necesitatea de a folosi in cod sau in datele de iesire, un caracter special sau o apasare de tasta , cum ar fi tasta TAB , sau o linie noua. Pentru aceasta folosim caracterul backslash „\” in fata unuia din codurile Escape , astfel :
  • \b – backspace
    \f – indica o pagina noua
    \n – linie noua
    \r – indica un retur de car
    \t – indica o apasare a tastei TAB
    \\ – caracter backslash
    \’ – indica un apostrof (ghilimele simple)
    \” – indica ghilimele duble
  • 
    – 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” \ Discant.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\” \\ Discant.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 variabilelor si functiilor – numele dat variabilelor si functiilor trebuie sa respecte urmatoarele reguli:
  • – 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

Operatorii

Cu ajutorul operatorilor manipulam, combinam si modificam datele dintr-un program 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
  Exemplu:
  • 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.
  Exemplu:
  • x = 7;
    x++;
    rezultatul va fi x = 8
• Decrementare (–) – Acest operator scade valoarea cu o unitate.
• De exemplu, daca avem variabila ‘i’, putem folosi operatorul de decrementare astfel: i– care este similar cu i = i-1.
  Exemplu:
  • x = 7;
    x–;
    rezultatul va fi x = 6
• Cei doi operatori de incrementare (++) respectiv decrementare (–) pot fi 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	Este acelasi cu
=	x = y	x = y
+=	x += y	x = x+y
-=	x -= y	x = x-y
*=	x *= y	x = x*y
/=	x /= y	x = x/y
%=	x %= y	x = x%y

3. Operatori de comparare

Expresiile care folosesc acesti operatori pun o intrebare despre doua valori pe care le compara. 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	Semnificatie	Exemple
==	Egal	3 == 8   returneaza FALSE
!=	Diferit	3 != 8   returneaza TRUE
>	Mai mare	3 > 8   returneaza FALSE
<	Mai mic	3 < 8   returneaza TRUE
>=	Mai mare sau egal	3 >= 8   returneaza FALSE
<=	Mai mic sau egal	3 <= 8   returneaza TRUE

4. Operatori logici (booleeni)

Similar cu operatori de comparatie, operatorii logici compara doua expresii si returneaza TRUE sau FALSE.
Acesti operatori sunt:

• && – si (and) – Compara doua expresii si returneaza TRUE daca amandoua sunt adevarate, in caz contrar returneaza FALSE.
  Exemplu:
  • x = 5
    y = 8
    x<7 && y>3
    (returneaza TRUE)
• || – sau (or) – Compara doua expresii si returneaza TRUE daca cel putin una din ele este adevarata, in caz contrar returneaza FALSE.
  Exemplu:
  • x = 5
    y = 8
    x>7 || y<3
    (returneaza FALSE)
• ! – not – este operator unar, foloseste o singura expresie si returneaza TRUE daca expresia este falsa, daca expresia este adevarata returneaza FALSE.
  Exemplu:
  • x = 5
    y = 8
    !(x==y)
    (returneaza TRUE 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:
  • 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:
  • 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	Descriere
typeof parseFloat	returneaza sirul ‘function’
typeof 33	returneaza sirul ‘number’
typeof „un anume text”	returneaza sirul ‘string’
typeof true	returneaza sirul ‘boolean’
typeof window	returneaza sirul ‘object’

7. Operatori pentru functii

Functiile vor fi explicate in una din lectiile urmatoare, totusi este util sa fiti familiarizati cu doi operatori:

1. Primul se numeste operator de apelare si este reprezentat printr-o pereche de paranteze rotunde () care urmeaza intodeauna dupa numele functiei, astfel o functie va fi declarata astfel:

function nume_functie() {
// Corpul functiei
}

Apoi operatorul de apelare este folosit din nou cand functia este apelata in interiorul scriptului:

• nume_functie()

Parantezele aratand ca este folosita o functie.

Al doilea operator pentru functii este virgula „,” – care se foloseste pentru a separa mai multe argumente 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.

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