Sunteți pe pagina 1din 12

Sintaxa JavaScript

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 in exemplele anterioare.
Recomandarea HTML 5 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. 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" \ google.com), 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\" \\ google.com");
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 JS
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
- Operatorul conditional ?
- Operatori pentru functii
- Operatori pentru structuri de date

Operatorii JS
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
x=y
x += y
x -= y
x *= y
x /= y
x %= y

Este acelasi cu
x=y
x = 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
==
!=
>
<
>=
<=

Semnificatie
Egal
Diferit
Mai mare
Mai mic
Mai mare sau egal
Mai mic sau egal

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.
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
typeof 33
typeof "un anume text"
typeof true
typeof window

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
() [] .
! ++ -* / %
+ < <= > >=
== !=
&&
||
?:
= += -= *= /= %=
,
end

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