You are on page 1of 10

CURS JAVASCRIPT

Javascript este un limbaj de scripting creat pentru a oferi interactiune cu paginile WEB,
incorporat de obicei direct in paginile HTML
JavaScript ≠Java
JavaScript si Java sunt limbaje diferite, Java este un limbaj de programare mai puternic
şi mai complex din aceeaşi categorie cu C, C++.

Capabilităţile JavaScript
JavaScript oferă designerilor HTML un instrument de programare cu ajutorul căruia
aproape oricine poate insera mici bucati de cod în paginile HTML
1 JavaScript poate genera conţinut dinamic în paginile WEB
2 JavaScript poate reacţiona la evenimente
3 JavaScript poate citi şi scrie elemente HTML
4 JavaScript poate fi folosit pentru validarea datelor înainte de trnasmiterea
acestora către server
5 JavaScript poate fi folosit pentru a detecta setările browser-ului utilizatorilor
6 JavaScript poate fi folosit pentru a crea asa-numitele cookie-uri (mici fişiere care
stochează informaţii pe calculatorul utilizatorului)

Inserarea de cod JavaScript in paginile HTML
Pentru inserarea de cod JavaScript in paginile HTML se utilizează tag-ul <script>:
<html>
<body>
<script type="text/javascript">
document.write("Buna ziua!");
</script>
</body>
</html>

Inserarea de cod JavaScript într-o pagină HTML
Inserarea de cod JavaScript într-o pagină HTML se poate realiza în următoarele
secţiuni:

În secţiunea head
<html>
<head>
<script type="text/javascript">
....
</script>
</head>

document.. document.write("<p>This is another paragraph</p>").js către care se poate face o referinţă astfel: <html> <head> <script src="numeFisier. Se recomandă (deşi nu este obligatoriu) plasarea la sfârşitul fiecărei instrucţiuni a semnului . } </script> Inserarea comentariilor în paginile HTML Comentariile sunt adăugate pentru a explica instrucţiunile utilizate şi face astfel codul lizibil..js"></script> </head> <body> </body> </html> Instrucţiuni JavaScript O instrucţiune JavaScript este o comandă dată browser-ului.. </script> </body> Într-o pagină HTML se poate insera un număr nelimitat de scripturi atât în secţiunea head cât şi în body (simultan) Într-un fşier extern Pentru a oferi posibilitate utilizării aceloraşi scripturi în mai multe pagini se poate recurge la gruparea acestora într-un fişier cu extensia . JavaScript este un limbaj case sensitive.write("<p>This is a paragraph</p>").. .write("<h1>This is a header</h1>"). (a≠A) Instrucţiunile pot fi grupate în blocuri sub forma <script type="text/javascript"> { document.În secţiunea body <html> <head> </head> <body> <script type="text/javascript"> .

Redeclarare variabilelor: x=5. var suma. document.write(x).write(mesaj+suma) Varibilele pot fi declarate implicit astfel: x=5. x=90. var x. în urma redeclarării variabilei x ea îşi păstrează valoarea anterioară (5 în cazul de faţă) .write("<p>This is a paragraph</p>").write("<p>This is a paragraph</p>").write("<p>This is a paragraph</p>"). mesaj=”Suma este: ”. suma=x+y. var mesaj. Reguli pentru denumirea variabilelor: 1 Numele variabilelor sunt case sensitive 2 Numele unei variabile trebuie să înceapă cu un caracter alfabetic sau cu _ (underscore) Crearea (declararea) variabilelor se realizează utilizând instrucţiunea var Ex: var x. document. var y. mesaj=”Buna ziua”. document. document. */ </script> Lucrul cu variabile Variabilele sunt utilizate pentru stocarea temporară a valorilor cu care se lucrează la un moment dat. // se creeza paragraf </script> Comentarea mai multor linii se realizează astfel: <script type="text/javascript"> /* acesta este un comentariul care cuprinde mai multe linii document. y=80.Comentarea unei singure linii se relizează cu „//” astfel <script type="text/javascript"> // Instructiunea urmatoare creaza un paragraf document.write("<p>This is a paragraph</p>").

Exemplu: var nume=”IONESCU ”. Atunci când se utilizează operatorul „+” între un text şi un număr rezultatul este un text. document. Operatori de comparare Considerând că x=10 Operator == === Descriere egal exact egal (valoare şi tip) != > < >= <= diferit mai mare mai mic mai mare sau egal mai mic sau egal Exemplu x==8 este fals x===10 este adevărat x==="10" este fals x!=8 este adevărat x>8 este adevărat x<8 este fals x>=10 este adevărat x<=10 este adevărat Operatori logici: Considerând că x=7 şi y=8 Operator && || ! Descriere And(şi) or (sau) not Exemplu (x < 10 && y > 1) este adevărat (x==5 || y==5) este fals !(x==y) este adevărat .write(nume+prenume).Operatori JavaScript: Operatori aritmetici Considerând că y=10 Operator + * / % ++ -- Descriere Adunare Scădere Înmulţire Împărţire Modulo(restul împărţirii) Incrementare Decrementare Example x=y+2 x=y-2 x=y*2 x=y/2 x=y%2 x=++y x=--y Result x=12 x=10 x=20 x=5 x=0 x=11 x=9 Echivalent cu Rezultat x=10 x=15 x=-5 x=50 x=0.5 x=5 Operatori de atribuire: Considerând x=5 şi y=10 Operator = += -= *= /= %= Exemplu x=y x+=y x-=y x*=y x/=y x%=y x=x+y x=x-y x=x*y x=x/y x=x%y Operatorul “+” utilizat cu variabile de tip text are ca efect concatenarea. var prenume=”Paul”.

"0"). } else { alert ("Promovat").else Permite executarea unor secvente de cod în funcţie de îndeplinirea unei condiţii Sintaxa generala if (conditie) { Cod care se va executa atunci cand conditia este indeplinita } else { Cod care se va executa atunci cand conditia este nu indeplinita } Exemplul 1: <html> <head></head> <body> <script language="javascript"> var nota. nota=prompt("Introduceti nota". if (nota<5) { alert ("Nepromovat"). } </script> </body> </html> În exemplul prezentat se solicită introducerea unei valori de la tastatură utilizând instrucţiunea prompt... în caz contrar se afşează “Promovat”.Structuri condiţionale If. Exemplul 2: <html> <head></head> <body> <script language="javascript"> . Daca valoarea acesteia este mai mică decât 5 atunci se va afşa cu instrucţiunea alert mesajul “Nepromovat”. valoare care este stocată în variabila nota.

i++) { suma=suma+i. } else { if (nota<7) { alert ("Bine").var nota. n= prompt("Pentru cate numere doriti sa calculati suma") . if (nota<5) { alert ("Nepromovat"). } else { alert ("Foarte bine"). i<=n. var i = Number(0). } . case 2: bloc 2 de instrucţiuni break. nota=prompt("Introduceti nota". } } </script> </body> </html> switch switch(n) { case 1: bloc 1 de instrucţiuni break."0"). for (i=0. default: bloc de executat în situaţia în care n este diferit de cazul 1 sau } Structuri repetitive Sunt structuri care permit repetarea <script language="javascript" type="text/javascript"> var n =Number(0). var suma = Number(0).

while (i<=n) { suma=suma+i.. </script> </body> </html> do. var i=Number(0). n=prompt("Pentru cate numere calculati suma"). i++. </script> Sintaxa while Repetă execuţia unui bloc de instrucţiuni atîta timp cât o condiţie este îndeplinită Sintaxa while (condiţie) { Bloc de instrucţiuni } Exemplu <html> <body> <script language="javascript"> var n=Number(0).while execută o dată un bloc de instrucţiuni.. după care repetă execuţia acelui bloc atâta timp cât condiţia de la fnalul blocului este îndeplinită <html> <body> <script language="javascript"> var n=Number(0).alert ("Suma este " +suma). var s = new String. } alert("Suma este: " +suma). var i=Number(0). var suma=Number(0). var suma=Number(0). .

do { suma=suma+i. //i=i+1 } .js). alert("Suma este: " +suma).. dar pentru a avea certitudinea încărcării funcţiei în memorie înainte de apelarea ei se recomandă declararea acestora în secţiunea head.. var suma=Number(0). do { suma=suma+i. Funcţiile pot f declarate in orice zona a paginii (de asemenea pot f declarate intr-un fsier extern cu extensia . i++. i++.varX sunt parametric ai funcţiei O funcţie fără parametri se declară astfel function nume_functie () { Bloc instrucţiuni } Exemplul 1 <html> <head> <script language="javascript"> function suma(n) { var i=Number(0).varX) { Bloc instrucţiuni } unde var1. } while (i<=n).var2.var2... </script> </body> </html> Funcţii JavaScript O funcţie conţine cod care va f executat la apariţia unui eveniment sau când va f apelat de către altă funcţie.. Sintaxa generala utilizată la declararea unei funcţii: function nume_functie(var1.. Ele pot f defnite atat in sectiunea head cat si in body...n=prompt("Pentru cate numere calculati suma").

n=prompt("Pentru cate numere calculati suma?"). alert("Suma este: "+rezultat). rezultat=suma(n).while (i<=n). i++. alert("Suma este: " +suma). var rezultat. n=prompt("Pentru cate numere calculati suma?"). while (i<=n) { suma=suma+i. rezultat=sum(n). </script> </body> </html> . var suma=Number(0). Exemplu: <html> <head> <script language="javascript"> function sum(n) { var i=Number(0). } </script> </head> <body> <script language="javascript"> var n. </script> </body> </html> Functii care returneaza o valoare În acest caz trebuie utilizată instrucţiunea return care permite obşinerea unei valori în urma execuţiei funcţiei. } </script> </head> <body> <script language="javascript"> var n. //i=i+1 } return suma.

Drept urmare pot f declarate variabile cu acelaşi nume în funcţii diferite deoarece fecare dintre ele este recunoscută numai de funcţia în cadrul căreia a fost declarată. Variabilele declarate în afara funcţiilor pot f accesate de către toate funcţiile. Dupa executarea functiei ele sunt distruse. Evenimente JavaScript Evenimentele sunt acţiuni care pot f detectate de JavaScript. Exemple de evenimente: · Un click sau dublu click de mouse  Încărcarea unei pagini sau a unei imagini  Deplasarea mouse-ului deasupra unei zone reactive dintr-o pagină  Selectarea unei casete de validare dintr-un formular HTML  Transmiterea unui formular HTML  Apăsarea unei taste .*** Durata de viaţa a variabilelor în JavaScript Variabilele declarate în cadrul unei funcţii JavaScript sunt variabile locale. Fiecare element al unei pagini web are ataşate evenimente care pot declanşa funcţii JavaScript. adică ele pot f accesate doar în cadrul funcţiei respective. Existenţa acestora începe în momentul declarării lor şi se termină atunci când pagina este închisă.