Sunteți pe pagina 1din 12

Limbajul 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
 JavaScript poate genera conţinut dynamic în paginile WEB
 JavaScript poate reacţiona la evenimente
 JavaScript poate citi şi scrie elemente HTML
 JavaScript poate fi folosit pentru validarea datelor înainte de trnasmiterea acestora către
server
 JavaScript poate fi folosit pentru a detecta setările browser-ului utilizatorilor
 JavaScript poate fi folosit pentru a crea 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>

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

Într-o pagină HTML se poateinsera un număr nelimitat de scripturi atât în secţiunea head cât şi
în body (simultan)

Într-un fişier extern


Pentru a oferi posibilitate utilizării aceloraşi scripturilor în mai multe pagini se poate recurge la
gruparea acestora într-un fişier cu extensia .js către care se poate face o referinţă astfel:
<html>
<head>
<script src="numeFisier.js"></script>
</head>
<body>
</body>
</html>

Instrucţiuni JavaScript
O instrucţiune JavaScript este o comandă dată browser-ului. Se recomandă (deşi nu este
obligatoriu) plasarea la sfârşitul fiecărei instrucţiuni a semnului ;.
JavaScript este un limbaj case sensitive. (a≠A)
Instrucţiunile pot fi grupate în blocuri sub forma
<script type="text/javascript">
{
document.write("<h1>This is a header</h1>");
document.write("<p>This is a paragraph</p>");
document.write("<p>This is another paragraph</p>");
}
</script>

Inserarea comentariilor în paginile HTML


Comentariile sunt adăugate pentru a explica instrucţiunile utilizate şi face astfel codul lizibil.
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>");
document.write("<p>This is a paragraph</p>"); // 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.write("<p>This is a paragraph</p>");
document.write("<p>This is a paragraph</p>");
*/
</script>

Lucrul cu variabile
Variabilele sunt utilizate pentru stocarea temporară a valorilor cu care se lucrează la un moment
dat.
Reguli pentru denumirea variabilelor:
 Numele variabilelor sunt case sensitive
 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;
var y;
var suma;
var mesaj;
x=90;
y=80;
suma=x+y;
mesaj=”Suma este: ”;
document.write(mesaj+suma)

Varibilele pot fi declarate implicit astfel:


x=5;
mesaj=”Buna ziua”;
Redeclarare variabilelor:
x=5;
var x;
document.write(x);
în urma redeclarării variabilei x ea îşi păstrează valoarea anterioară (5 în cazul de faţă)

Operatori JavaScript:
Operatori aritmetici
Considerând că y=10
Operator Descriere Example Result
+ Adunare x=y+2 x=12
- Scădere x=y-2 x=10
* Înmulţire x=y*2 x=20
/ Împărţire x=y/2 x=5
% Modulo(restul împărţirii) x=y%2 x=0
++ Incrementare x=++y x=11
-- Decrementare x=--y x=9

Operatori de atribuire:
Considerând x=5 şi y=10
Operator Exemplu Echivalent cu Rezultat
= x=y x=10
+= x+=y x=x+y x=15
-= x-=y x=x-y x=-5
*= x*=y x=x*y x=50
/= x/=y x=x/y x=0.5
%= x%=y x=x%y x=5

Operatorul “+” utilizat cu variabile de tip text are ca efect concatenarea.


Exemplu:
var nume=”IONESCU ”;
var prenume=”Paul”;
document.write(nume+prenume);

Atunci când se utilizează operatorul „+” între un text şi un număr rezultatul este un text.

Operatori de comparare
Considerând că x=10
Operator Descriere Exemplu
== egal x==8 este fals
=== exact egal (valoare şi tip) x===10 este adevărat
x==="10" este fals
!= diferit x!=8 este adevărat
> mai mare x>8 este adevărat
< mai mic x<8 este fals
>= mai mare sau egal x>=10 este adevărat
<= mai mic sau egal x<=10 este adevărat

Operatori logici:
Considerând că x=7 şi y=8
Operator Descriere Exemplu
&& And(şi) (x < 10 && y > 1) este adevărat
|| or (sau) (x==5 || y==5) este fals
! not !(x==y) este adevărat

Structuri condiţionale
If...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","0");
if (nota<5)
{
alert ("Nepromovat");
}
else
{
alert ("Promovat");
}
</script>
</body>
</html>

În exemplul prezentat se solicită introducerea unei valori de la tastatură utilizând instrucţiunea prompt,
valoare care este stocată în variabila nota. Daca valoarea acesteia este mai mică decât 5 atunci se va afişa
cu instrucţiunea alert mesajul “Nepromovat”, în caz contrar se afişează “Promovat”.

Exemplul 2:

<html>
<head></head>
<body>
<script language="javascript">

var nota;
nota=prompt("Introduceti nota","0");
if (nota<5)
{
alert ("Nepromovat");
}
else
{

if (nota<7)
{
alert ("Bine");
}
else
{
alert ("Foarte bine");
}

</script>
</body>
</html>
switch
switch(n)
{
case 1:
bloc 1 de instrucţiuni
break;
case 2:
bloc 2 de instrucţiuni
break;
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 i = Number(0);
var suma = Number(0);
n= prompt("Pentru cate numere doriti sa calculati suma") ;
for (i=0; i<=n;i++)
{
suma=suma+i;
}
alert ("Suma este " +suma);
var s = new String;
</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);
var i=Number(0);
var suma=Number(0);

n=prompt("Pentru cate numere calculati suma");


while (i<=n)
{
suma=suma+i;
i++;
}
alert("Suma este: " +suma);
</script>
</body>
</html>

do...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
finalul blocului este îndeplinită

<html>
<body>

<script language="javascript">
var n=Number(0);
var i=Number(0);
var suma=Number(0);

n=prompt("Pentru cate numere calculati suma");

do
{
suma=suma+i;
i++;
}
while (i<=n);
alert("Suma este: " +suma);
</script>

</body>
</html>
Funcţii JavaScript
O funcţie conţine cod care va fi executat la apariţia unui eveniment sau când va fi apelat de către altă
funcţie. Funcţiile pot fi declarate in orice zona a paginii (de asemenea pot fi declarate intr-un fisier extern
cu extensia .js). Ele pot fi definite atat in sectiunea head cat si in body, dar pentru a avea certitudinea
încărcării funcţiei în memorie înainte de apelarea ei se recomandă declararea acestora în secţiunea
head.

Sintaxa generala utilizată la declararea unei funcţii:

function nume_functie(var1,var2,...,varX)
{
Bloc instrucţiuni
}

unde var1,var2,...,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);
var suma=Number(0);
do
{
suma=suma+i;
i++; //i=i+1
}
while (i<=n);
alert("Suma este: " +suma);
}
</script>
</head>
<body>
<script language="javascript">
var n;
n=prompt("Pentru cate numere calculati suma?");
rezultat=suma(n);
</script>
</body>
</html>

La incarcarea paginii se declanseaza evenimentul onload care apeleaza functia suma cu parametrul
Number(4).

Exemplul 2

<html>
<head>
<script language="javascript">
function mesaj()
{
alert(“Buna ziua”);
}
</script>
</head>
<body onload="mesaj()">
</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. Exemplu:

<html>
<head>

<script language="javascript">
function sum(n)
{
var i=Number(0);
var suma=Number(0);
while (i<=n)
{
suma=suma+i;
i++; //i=i+1
}

return suma;
}
</script>
</head>

<body>
<script language="javascript">
var n;
var rezultat;
n=prompt("Pentru cate numere calculati suma?");
rezultat=sum(n);
alert("Suma este: "+rezultat);
</script>

</body>
</html>

***

Durata de viaţa a variabilelor în JavaScript

Variabilele declarate în cadrul unei funcţii JavaScript sunt variabile locale, adică ele pot fi accesate doar în
cadrul funcţiei respective. Dupa executarea functiei ele sunt distruse. Drept urmare pot fi declarate
variabile cu acelaşi nume în funcţii diferite deoarece fiecare dintre ele este recunoscută numai de funcţia
în cadrul căreia a fost declarată.

Variabilele declarate în afara funcţiilor pot fi accesate de către toate funcţiile. Existenţa acestora începe
în momentul declarării lor şi se termină atunci când pagina este închisă.

Evenimente JavaScript
Evenimentele sunt acţiuni care pot fi detectate de JavaScript. Fiecare element al unei pagini web are
ataşate evenimente care pot declanşa funcţii JavaScript.

Exemple de evenimente:

 Un click sau dubluclick 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