Sunteți pe pagina 1din 11

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
comple! din aceeai categorie cu ", "##$
Capabilitile 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 d(namic &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 bro)ser*ului utili+atorilor
JavaScript poate fi folosit pentru a crea coo,ie*uri -mici fiiere care stoc.ea+% informa'ii
pe calculatorul utili+atorului/
Inserarea de cod JavaScript in paginile HTML
0entru inserarea de cod JavaScript in paginile HTML se utili+ea+% tag*ul 1script23
1.tml2
1bod(2
1script t(pe45te!t6javascript52
document$)rite-5Buna +iua75/8
16script2
16bod(2
16.tml2
Inserarea de cod JavaScript ntr-o pagin HTML
9nserarea de cod JavaScript &ntr*o pagin% HTML se poate reali+a &n urm%toarele sec'iuni3
n seciunea head
1.tml2
1.ead2
1script t(pe45te!t6javascript52
$$$$
16script2
16.ead2
n seciunea body
1.tml2
1.ead2
16.ead2
1bod(2
1script t(pe45te!t6javascript52
$$$$
16script2
16bod(2
:ntr*o pagin% HTML se poateinsera un num%r nelimitat de scripturi at;t &n sec'iunea .ead c;t i
&n bod( -simultan/
ntr-un i!ier e"tern
0entru a oferi posibilitate utili+%rii acelorai scripturilor &n mai multe pagini se poate recurge la
gruparea acestora &ntr*un fiier cu e!tensia $js c%tre care se poate face o referin'% astfel3
<html>
<head>
<script src="numeFisier.js"></script>
</head>
<body>
</body>
</html>
Instruciuni JavaScript
< instruc'iune JavaScript este o comand% dat% bro)ser*ului$ Se recomand% -dei nu este
obligatoriu/ plasarea la sf;ritul fiec%rei instruc'iuni a semnului 8$
JavaScript este un limbaj case sensitive. -a=/
9nstruc'iunile pot fi grupate &n blocuri sub forma
<script type="text/javascript">
{
document.write("<h>!his is a header</h>""#
document.write("<p>!his is a para$raph</p>""#
document.write("<p>!his is another para$raph</p>""#
%
</script>
9nserarea comentariilor &n paginile HTML
"omentariile sunt ad%ugate pentru a e!plica instruc'iunile utili+ate i face astfel codul li+ibil$
"omentarea unei singure linii se reli+ea+% cu >66? astfel
<script type="text/javascript">
// &nstructiunea urmatoare crea'a un para$ra(
document.write("<p>!his is a para$raph</p>""#
document.write("<p>!his is a para$raph</p>""# // se cree'a para$ra(
</script>
"omentarea mai multor linii se reali+ea+% astfel3
<script type="text/javascript">
/) acesta este un comentariul care cuprinde mai multe linii
document.write("<p>!his is a para$raph</p>""#
document.write("<p>!his is a para$raph</p>""#
)/
</script>
Lucrul cu variabile
@ariabilele sunt utili+ate pentru stocarea temporar% a valorilor cu care se lucrea+% la un moment
dat$
Aeguli pentru denumirea variabilelor3
Bumele variabilelor sunt case sensitive
Bumele unei variabile trebuie s% &nceap% cu un caracter alfabetic sau cu C -underscore/
"rearea -declararea/ variabilelor se reali+ea+% utili+;nd instruc'iunea var
Ex:
var !8
var (8
var suma8
var mesaj8
!4DE8
(4FE8
suma4!#(8
mesaj4?Suma este3 ?8
document$)rite-mesaj#suma/
@aribilele pot fi declarate implicit astfel3
!4G8
mesaj4?Buna +iua?8
Aedeclarare variabilelor3
!4G8
var !8
document$)rite-!/8
&n urma redeclar%rii variabilei ! ea &i p%strea+% valoarea anterioar% -G &n ca+ul de fa'%/
Operatori JavaScript:
#peratori arit$etici
"onsider;nd c% (4HE
Operator Descriere !a"ple #esult
+ Adunare x=y+2 x=12
- Scdere x=y-2 x=10
* nmulire x=y*2 x=20
/ mprire x=y/2 x=5
% Modulore!"ul #mpririi$ x=y%2 x=0
++ %ncremen"are x=++y x=11
-- &ecremen"are x=--y x='
#peratori de atribuire%
"onsider;nd !4G i (4HE
Operator !e"plu c$ivalent cu #e%ultat
= 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
<peratorul I#? utili+at cu variabile de tip te!t are ca efect concatenarea$
E!emplu3
var nume4?9<BES"J ?8
var prenume4?0aul?8
document$)rite-nume#prenume/8
=tunci c;nd se utili+ea+% operatorul >#? &ntre un te!t i un num%r re+ultatul este un te!t$
#peratori de co$parare
"onsider;nd c% !4HE
Operator Descriere !e"plu
== e)al x==* e!"e +al!
=== exac" e)al ,aloare -i "ip$ x===10 e!"e ade,ra"
x===.10. e!"e +al!
/= di+eri" x/=* e!"e ade,ra"
0 mai mare x0* e!"e ade,ra"
1 mai mic x1* e!"e +al!
0= mai mare !au e)al x0=10 e!"e ade,ra"
1= mai mic !au e)al x1=10 e!"e ade,ra"
#peratori logici%
"onsider;nd c% !4K i (4F
Operator Descriere !e"plu
22 And-i$ x 1 10 22 y 0 1$ e!"e ade,ra"
33 or !au$ x==5 33 y==5$ e!"e +al!
/ no" /x==y$ e!"e ade,ra"
Structuri condiionale
I&&&else
Permite executarea unor secvente de cod n funcie de ndeplinirea unei condiii
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>
<bod>
<script language!"#avascript">
var nota$
nota!prompt%"&ntroduceti nota"'"(")$
if %nota<*)
+
alert %",epromovat")$
-
else
+
alert %"Promovat")$
-
</script>
</bod>
</html>
.n exemplul pre/entat se solicit0 introducerea unei valori de la tastatur0 utili/1nd instruciunea
prompt' valoare care este stocat0 n variabila nota2 3aca valoarea acesteia este mai mic0 dec1t
* atunci se va afi4a cu instruciunea alert mesa#ul 5,epromovat6' n ca/ contrar se afi4ea/0
5Promovat62
Exemplul 7:
<html>
<head></head>
<bod>
<script language!"#avascript">
var nota$
nota!prompt%"&ntroduceti nota"'"(")$
if %nota<*)
+
alert %",epromovat")$
-
else
+
if %nota<8)
+
alert %"9ine")$
-
else
+
alert %":oarte bine")$
-
-
</script>
</bod>
</html>
s'itch
switch(n"
{
case *
bloc 1 de instruciuni
brea+#
case ,*
bloc 2 de instruciuni
brea+#
de(ault*
bloc de executat n situaia n care n este diferit de cazul 1 sau
%
Structuri repetitive
Sunt structuri care permit repetarea
<script lan$ua$e="javascript" type="text/javascript">
var n =-umber(."#
var i = -umber(."#
var suma = -umber(."#
n= prompt("/entru cate numere doriti sa calculati suma"" #
(or (i=.# i<=n#i00"
{
suma=suma0i#
%
alert ("1uma este " 0suma"#
var s = new 1trin$#
</script>
Sintaxa
'hile
2epet3 execu4ia unui bloc de instruc4iuni at5ta timp c6t o condi4ie este
5ndeplinit3
1intaxa
while (condi4ie"
{
7loc de instruc4iuni
%
Exemplu
<html>
<bod>
<script language!"#avascript">
var n!,umber%()$
var i!,umber%()$
var suma!,umber%()$
n!prompt%"Pentru cate numere calculati suma")$
;hile %i<!n)
+
suma!suma<i$
i<<$
-
alert%"Suma este: " <suma)$
</script>
</bod>
</html>
do&&&'hile
execut0 o dat un bloc de instruciuni' dup0 care repet0 execuia acelui bloc at1ta timp c1t
condiia de la finalul blocului este ndeplinit0
<html>
<bod>
<script language!"#avascript">
var n!,umber%()$
var i!,umber%()$
var suma!,umber%()$
n!prompt%"Pentru cate numere calculati suma")$
do
{
suma=suma+i;
i++;
}
while (i<=n);
alert%"Suma este: " <suma)$
</script>
</bod>
</html>
(uncii JavaScript
= funcie conine cod care va fi executat la apariia unui eveniment sau c1nd va fi apelat de
c0tre alt0 funcie2 :unciile pot fi declarate in orice /ona a paginii %de asemenea pot fi declarate
intr>un fisier extern cu extensia 2#s)2 Ele pot fi definite atat in sectiunea head cat si in bod' dar
pentru a avea certitudinea nc0rc0rii funciei n memorie nainte de apelarea ei se recomand0
declararea acestora n seciunea head2
Sintaxa generala utili/at0 la declararea unei funcii:
(unction nume_functie(var1,var2,...,varX"
{
Bloc instruciuni
%
unde var1'var7'222'var? sunt parametric ai funciei
= funcie f0r0 parametri se declar0 astfel
(unction nume_functie ("
{
Bloc instruciuni
%
Exemplul 1
<html>
<head>
<script language!"#avascript">
function suma%n)
+
var i!,umber%()$
var suma!,umber%()$
do
+
suma!suma<i$
i<<$ //i!i<1
-
;hile %i<!n)$
alert%"Suma este: " <suma)$
-
</script>
</head>
<bod>
<script language!"#avascript">
var n$
n!prompt%"Pentru cate numere calculati suma@")$
re/ultat!suma%n)$
</script>
</bod>
</html>
Aa incarcarea paginii se declansea/a evenimentul onload care apelea/a functia suma cu
parametrul Number(4).
Exemplul 7
<html>
<head>
<script language!"#avascript">
function mesa#%)
+
alert%59una /iua6)$
-
</script>
</head>
<bod onload!"mesa#%)">
</bod>
</html>
:unctii care returnea/a o valoare
.n acest ca/ trebuie utili/at0 instruciunea return care permite ob4inerea unei valori n urma
execuiei funciei2 Exemplu:
<html>
<head>
<script language!"#avascript">
function sum%n)
+
var i!,umber%()$
var suma!,umber%()$
;hile %i<!n)
+
suma!suma<i$
i<<$ //i!i<1
-
return suma;
-
</script>
</head>
<bod>
<script language!"#avascript">
var n$
var re/ultat$
n!prompt%"Pentru cate numere calculati suma@")$
re/ultat!sum%n)$
alert%"Suma este: "<re/ultat)$
</script>
</bod>
</html>
BBB
3urata de viaa a variabilelor n CavaScript
Dariabilele declarate n cadrul unei funcii CavaScript sunt variabile locale' adic0 ele pot fi
accesate doar n cadrul funciei respective2 3upa executarea functiei ele sunt distruse2 3rept
urmare pot fi declarate variabile cu acela4i nume n funcii diferite deoarece fiecare dintre ele
este recunoscut0 numai de funcia n cadrul c0reia a fost declarat02
Dariabilele declarate n afara funciilor pot fi accesate de c0tre toate funciile2 Existena acestora
ncepe n momentul declar0rii lor 4i se termin0 atunci c1nd pagina este nchis02
)veni$ente JavaScript
Evenimentele sunt aciuni care pot fi detectate de CavaScript2 :iecare element al unei pagini
;eb are ata4ate evenimente care pot declan4a funcii CavaScript2
Exemple de evenimente:
En clicF sau dubluclicF de mouse
.nc0rcarea unei pagini sau a unei imagini
3eplasarea mouse>ului deasupra unei /one reactive dintr>o pagin0
Selectarea unei casete de validare dintr>un formular GHIA
Hransmiterea unui formular GHIA
Jp0sarea unei taste