PW5 JavaScript PDF

Universitatea Politehnica Bucuresti - Facultatea de Automatica si Calculatoare
Programare web client

client--side
side,,
JavaScript
Ciprian Dobre
ciprian.dobre@cs.pub.ro
Curs Programare Web, anul 4 C5 Curs 5
Obiective
Ob
ect e
Introducere n JavaScript
p i
a noiunilor
de
programare pe care limbajul le suport
E
Exist
i t numeroase documente
d
t ii cri
i
publicate (inclusiv n limba romn) care
conin informaii suplimentare.
Prezentm n continuare doar o trecere n
revist a limbajului.
Sumar
Su a
JavaScript
p fundamente
JavaScript i HTML - gestiunea simpl a
evenimentelor
Exemple JavaScript
Mai multe despre JavaScript
JavaScript i AJAX
JavaScript
Fundamentele Limbajului
Despre JavaScript
JavaScript nu este Java, nici mcar nu este nrudit
cu Java
Numele original al JavaScript a fost LiveScript
Numele
N
l a ffostt modificat
difi t cnd
d JJava a d
devenit
it popular
l
Astzi cnd Microsoft nu mai ndrgete Java propriul
nume acordat dialectului JavaScript este Active
Active Script
Script
Instruciunile n JavaScript seamn cu instruciuni

din Java deoarece ambele limbaje au mprumutat
multe elemente chiar din limbajul C
JavaScript
p este relativ uor
de nvat
de ctre
programatorii familiarizai cu Java
Totui JavaScript este un limbaj de sine stttor, complet
i complex
Despre JavaScript
JavaScript este rar folosit pentru a scrie
programe
programe complete
Mici blocuri de instruciuni JavaScript sunt n general
folosite pentru a aduga funcionalitate paginilor HTML
JavaScript este adesea folosit n conjuncie cu
formulare HTML
JavaScript este ntr-o bun msur independent

de platform (nu SO
SO, ct mai ales de browser)
Folosirea
o os ea Ja
JavaScript
aSc pt ntr
ntrt -u
un browser
b o se
Codul JavaScript este inclus ntre taguri <script>:
<script
i t ttype="text/javascript">
"t t/j
i t"
document.write("<h1>Hello World!</h1>") ;
</script>
Observaii:
Atributul type permite folosirea altor limbaje de scripting (chiar
dac JavaScript este limbajul implicit)
Acest exemplu simplu face acelai lucru ca a scrie <h1>Hello
World!</h1> n acelai loc n documentul HTML
Punct i virgul de la finalul instruciunii JavaScript este opional
Sfritul liniei marcheaz sfritul instruciunii, dac linia poate
fi interpretat ca o instruciune complet
Se
S poate folosi
f l i punct ii virgul
i l pentru separarea maii multor
l
instruciuni ce apar pe aceeai linie
Este indicat totui folosirea n permanen a caracterului punct
i virgul
JavaScript
Ja
aSc pt nu
u este ntotdeauna
totdeau a d
disponibil
spo b
Unele browsere mai vechi nu recunosc tag-ul script
A
Aceste
t browsere
b
vor ignora
i
ttag-ull script
i t dar
d vor afia
fi ce este
t
inclus n interiorul tag-ului (codul JavaScript inclus)
Pentru a face aceste browsere s ignore coninutul putem folosi:
<script type="text/javascript">
<!-document.write("Hello World!")
//-->
//
</script>
Caracterul , secvena // marcheaz un comentariu
JavaScript, ce ine pn la sfritul liniei respective
Unii utilizatori opresc JavaScript

Folosii <noscript>mesaj</noscript> pentru a afia un mesaj
indiferent dac n interiorul acestuia apare i cod JavaScript
Exemplu
e pu
<script language=javascript>
<!-<!
var name = "ciprian.dobre"
var host1 = "cs."
cs.
var host2 = "pub.ro"
document.write("PWeb: send emails to ")
document.write("<a href=mai" + "lto:" + name +
"@"
@ + host1 + host2 + "?subject=PWeb:"
?subject=PWeb:
+ ">" + "Ciprian Dobre" + "</a>")
//-->
</script>
</sc
ipt>
<noscript>
ciprian dobre at cs
ciprian.dobre
</noscript>
Rezultat
10
Demo 1
11
Unde
U de apare
apa e codu
codul JavaScript
Ja aSc pt
Codul JavaScript poate apare fie n seciunea
<head> fie n seciunea <body> a unui document
<head>,
HTML
Funciile JavaScript ar trebui s fie definite n
seciunea <head>
Acest lucru ne asigur
g
c funciile
sunt ncrcate
chiar nainte ca ele s fie cerute
Codul JavaScript din <body> este executat atunci
cnd este ncrcat pagina
12
Unde apare codul JavaScript

Funciile JavaScript pot fi plasate i n fiiere
separate avnd n general extensia .js
js
<script src="myJavaScriptFile.js"></script>
Codul
C d l acesta
t se plaseaz
l
n
seciunea
i
<head>
h d
Un fiier extern .js permite folosirea aceluiai cod
JavaScript n mai multe pagini HTML
Fiierul extern .js nu poate conine la rndul su alt
tag
g <script>
p
Codul JavaScript poate fi plasat i mpreun cu

un obiect al unui formular, ca de exemplu un
buton
Codul JavaScript va fi executat atunci cnd respectivul
obiect este folosit
13
Tipuri
pu de date primitive
p
t e
JavaScript are trei tipuri primitive: number, string i
boolean i dou valori speciale,
boolean,
speciale null i undefined
Orice altceva este un obiect
Numerele sunt ntotdeauna stocate ca valori de tip float

Numerele hexazecimale ncep cu 0x
Unele platforme trateaz 0123 ca octal, altele l trateaz ca
zecimal
Pentru c nu putei fi siguri, e mai indicat s evitai cu totul folosirea
valorilor in octal!
V
Valorile
l il St
String
i pott fi d
delimitate
li it t prin
i caractere
t
apostrof
t f sau
ghilimele
String
String-urile
urile pot conine \n (newline), \\" (double quote), etc.
Valorile boolean sunt fie true, fie false

0, "0", stringul
g g
gol, undefined, null i NaN sunt false,, restul
valorilor sunt true
14
Variabile
a ab e
Variabilele pot fi declarate folosind var:
var pii = 3
3.1416,
1416 x, y, name = "D
"Dr. D
Dave"" ;
Numele de variabile trebuie sa nceap cu o litera sau cu underscore
Numele de variabile sunt case-sensitive
case sensitive
Variabilele nu au tip (ele pot conine valori de orice tip)
Exist doar dou scopuri ale variabilelor: local i global

Variabilele declarate ntr-o funcie sunt locale respectivei funcii
((accesibile numai din interiorul respectivei
p
funcii)
)
Variabilele declarate n afara unei funcii sunt globale (accesibile de
oriunde din pagin)
Variabilele pot fi declarate implicit prin simpla adugare a

unei valori unor variabile
Variabilele
V i bil l d
declarate
l t iimplicit
li it suntt ntotdeauna
t td
globale
l b l
15
Operatori
Ope ato (1)
( )
Majoritatea sintaxei JavaScript este mprumutat din C (i
seamn cu cea din Java):
Operatori
p
aritmetici ((toate numerele sunt n virgul
g
mobil):
+
*
/
%
++
- Operatori de comparaie:
<
<=
==
!=
>=
>
Operatori logici:
&&
||
!
Operatori la nivel de bii:
&
|
^
~
<<
>>
>>>
Operatori de asignare:
+= -= *= /= %= <<= >>= >>>= &= ^= |=
16
Operatori
Ope ato (2)
( )
Concatenare de string-uri:
+
Operatorul condiiomal:
condition ? value_if_true : value_if_false
Teste de egalitate:
g
== i != ncearc convertirea operatorilor la acelai
tip
p naintea efecturii testului
Nu ca n C sau Java: === i !== consider operanzii
inegali dac acetia sunt de tipuri diferite
Operatori suplimentari:
new typeof
yp
void
delete
17
Comentarii
Co
e ta
Comentariile sunt similare C sau Java:
ntre // i sfritul liniei
ntre
/* i */
Comentariile de tip javadoc din Java, /** ...

/, sunt tratate similar comentariilor de tip
*/
/* ... */; ele nu au nici o semnificaie
special
i l n JavaScript
J
S i t
18
Instruc
Instruc
st uc
uciuni
u ((1))
Majoritatea sintaxelor de instruciuni JavaScript sunt
mprumutate
t t din
di C
Atribuirea: greeting = "Hello, " + name;
Instruciunea compus:
{ statement; ...;; statement }
Instruciunea If:
if (condition) statement;
if (condition) statement; else statement;
Instruciuni de iterare:
while (condition) statement;
do statement while (condition);
for (initialization; condition; increment) statement;
19
Instruc
Instruc
st uc
uciuni
u ((2))
Instruciunea switch:
switch (expression) {
case label :
statement;
break;
case label :
statement;
break;
...
default : statement;
}
Alte instruciuni familiare:

break;
continue;
Instruciunea vid, precum;; sau { }
20
JavaScript vs. Java

Deja realizai c tii destul de multe despre
JavaScript
Pn acum am vzut aspecte ce sunt similare precum n
Java
JavaScript are unele construcii ce seamn cu

construciile corespondente din Java:
JavaScript folosete Obiecte i tipuri de date primitive
JavaScript folosete evenimente i gestiunea
evenimentelor
i
t l ((eventt handlers)
h dl )
Gestiunea excepiilor n JavaScript este aproape similar
cu cea din Java
21
Totui JavaScript nu este Java

Totui
JavaScript
p are unele construcii
diferite de
cele din Java:
Numele de variabile nu au tip:
p tipul
p unei variabile
depinde de valoarea curent pe care respectiva
variabila o deine
Obiectele i array-urile sunt definite ntr-o manier
diferit de cea din Java
JJavaScript
S i t are instruciunea
i t i
with
ith ii o nou
form
f
a
instruciunii for
22
Gestiunea
Gest
u ea excep
excep
e
cepiilor
cep
o ((1))
Gestiunea exceptiilor in JavaScript este aproape la
f l ca cea din
fel
di JJava:
throw expresie creeaz i arunc o excepie
expresie este valoarea excepiei i poate fi de orice tip
(adesea este un string)
ttry {
instructiuni
} catch (e) { // Atenie: nu avem declaraie de tip pentru e
instructiuni pentru tratarea exceptiei
} finally {
// opional, similar Java
codul executat intotdeauna
}
Folosind aceast abordare exist o singur clauz catch
23
Gestiunea
Gest
u ea excep
excep
e
cepiilor
cep
o ((2))
try {
instructiuni
} catch (e if test1) {
tratarea exceptiei pentru cazul test1 = true
} catch (e if test2) {
tratarea exceptiei pentru cazul test1 = false si test2 = true
} catch (e) {
tratarea exceptiei pentru cazul test1si test2 sunt false
} finally {
codul executat intotdeauna
}
Testul poate fi:

e == "InvalidNameException
dar poate fi orice alt tip de test
24
Obiecte
n Java clasele descriu obiecte i toate instantele unei clase
au exact aceleai cmpuri i metode
Obiectele JavaScript sunt mai flexibile dect obiectele Java
JavaScript lucreaz cu object literals, scrii conform

urmtoarei sintaxe:
{ name1 : value1 , ... , nameN : valueN }
Exemplu:
car = {myCar: "Saturn", 7: "Mazda",
getCar: CarTypes("Honda"), special: Sales}
Cmpurile sunt myCar, getCar, 7 (este chiar un nume legal de
cmp) i special
"Saturn"
Saturn i "Mazda"
Mazda sunt cmpuri de tip String
CarTypes este un apel de funcie
Sales este o variabil ce a fost definit anterior
Exemplu de folosire: document.write("I own a " + car.myCar);

25
Trei moduri de a crea un obiect

1. Putei folosi un object literal:
var course = { name: PWeb"
PWeb , teacher: Ciprian
Ciprian Dobre
Dobre" }
2. Putei folosi new pentru a crea un obiect blank

cruia s i adugai cmpuri ulterior:
var course = new Object();
course.name = PWeb";
course teacher = Ciprian
course.teacher
Ciprian Dobre
Dobre";;
3. Putei scrie i folosi un constructor:

function Course(n,
Course(n t) { // functia
f
i ar trebui
b id
definita
fi i iin sectiunea
i
<head>
h d
this.name = n; // cuvantul cheie "this" este necesar, nu optional
this.teacher = t;
}
var course = new Course(PWeb", Ciprian Dobre");
26
Array
ay
JavaScript permite definirea de tablouri, declarate
folosind paranteze drepte i virgule
Exemplu: color = ["red", "yellow", "green", "blue"];
Variabilele tablou sunt iniializate ncepnd de la poziia 0
color[0] are valoarea "red"
Dac folosim dou virgule succesive, variabila

tablou va avea un element empty
p y n respectiva
p
poziie
Exemplu:
p color = [["red",, , , "green",
g
, "blue"];
];
color are 5 elemente
Totui, o virgul la final este ignorat

Exemplu: color = ["red", , , "green", "blue,]; are tot 5 elemente
27
var myArray = [];
Patru
at u moduri
odu de a c
crea
ea u
un a
array
ay
1. Putei folosi un array literal:
var myArray = [];
var colors = ["red"

[ red , "green"
green , "blue"];
blue ];
2. Putei folosi new Array() pentru a crea un tablou gol:

var colors = new Array();
Putei aduga elemente ulterior n acel tablou:
[ ] = "red";; colors[2]
[ ] = "blue";; colors[1]="green";
[ ] g
;
colors[0]
3. Putei folosi new Array(n) cu un singur argument numeric

pentru a crea un tablou avnd respectiva dimensiune
var colors = new Array(3);
4. Putei folosi new Array() cu dou sau mai multe

argumente pentru a crea un tablou coninnd respectivele
valori:
var colors
l
= new A
Array("red","green",
(" d" "
" "blue");
"bl ")
28
Iniializare
Crearea unui tablou dimensionat deja
j
pentru 10 elemente:
var badArray = new Array(10);
vs.
Crearea unui tablou avnd un singur
g
element, cu valoarea 10:
var goodArray= [10];
29
Exemplu
<!-var myArray = [ 'January', 'February', 'March' ];
document.writeln('0> '+myArray[0]+'<br>');
d
document.writeln('1>
t it l ('1 ''+myArray[1]+'<br>');
A
[1] ' b ')
// >
//-->
</script>
<noscript>
problema cu JavaScript
</noscript>
30
Un alt exemplu
var myArray = [];
myArray[0] = 'January';
myArray[1] = 'February';
myArray[5] = 'March';
y
y
31
Lungimea
u g ea u
unui
u tab
tablou
ou
Dac myArray este un tablou, lungimea acestuia este
obinute folosind myArray.length
myArray length
Dimensiunea unui tablou poate fi modificat prin
adugarea de elemente peste lungimea curent a
acestuia
Exemplu: var myArray = new Array(5); myArray[10] = 3;
Tablourile sunt structuri de date risipite, spaiul este alocat
doar pentru elementele crora le-a fost cu asignat o
valoare
Exemplu: myArray[50000] = 3; este perfect OK
Indicii trebuie s fie ntre 0 i 232-1
Similar ca n C i Java, nu exist tablouri bidimensionale;

dar exist tablou de tablou: myArray[5][3]
32
Tablouri
ab ou vs.
s ob
obiecte
ecte
Variabilele de tip array sunt obiecte
car = { myCar: "Saturn", 7: "Mazda" }
car[7] este echivalent cu car.7
car 7
car.myCar este acelai cu car["myCar"]
Dac cunoatei numele unei proprieti putei

folosi notaia cu punct: car.myCar
Daca nu cunoatei numele proprietii dar l avei
ntr-o
ntr
o variabil (sau l putei calcula),
calcula) folosii
notaia de tip array: car["my" + "Car"]
33
Stocarea datelor ntrntr-un tablou

Un tablou poate stoca orice: boolean, numere, string-uri,
f
funcii,
ii obiecte,
bi t alte
lt ttablouri,
bl i chiar
hi expresiiii regulate:
l t
var myArray = [ 3, 'hello!', function() { return 5 }, { 'color':'blue',
'budget':25
g
}, /[e11]/i
[ ] ]];
document writeln('2>
document.writeln(
2> '+myArray[2]+'<br>');
+myArray[2]+ <br> );
document.writeln('3> '+myArray[3].color+'<br>');
document.writeln('3> '+myArray[3].budget+'<br>');
document.writeln('4> '+myArray[4].test(myArray[1])+'<br>');
34
Functii
u ct ap
aplicabile
cab e tab
tablourilor
ou o
Dac myArray este un tablou,
myArray.sort() sorteaz tablou (alfabetic)
myArray
myArray.sort(function(a,
sort(function(a b) { return a - b; }) sorteaz
numeric tabloul
myArray.reverse()
myArray reverse() inverseaz elementele tabloului
myArray.push() adaug orice numr de elemente la
finalul tabloului i crete dimensiunea acestuia
myArray.pop() nltur i ntoarce ultimul element al
tabloului i decrementeaz dimensiunea acestuia
myArray.toString() ntoarce un string coninnd
elementele
l
t l ttabloului,
bl l i separate
t prin
i virgul
i l
35
Exemplu
var myarray=[7, 40, 300];
myarray.sort();
// ordine lexicografica
document.writeln("0> "+myarray+"<br>");
myarray.sort(function(a, b) { return a - b; });
// ordine numerica
myarray.reverse();
// elementele in ordine inversa
36
Instruc
Instruc
st uc
uciunea
u ea for
o in
Similar instruciunii iterative din Java for (type var :
collection)
Putei itera printre proprietile unui obiect folosind
for (variable in object) statement;
Exemplu: for (var prop in course) {
document.write(prop + ": " + course[prop]);
}
Posibil output: teacher: Ciprian Dobre
name: PWeb
Proprietile sunt accesate ntr-o ordine nedefinit
Dac adugai sau tergei proprieti obiectului din bucl este
nedefinit dac instruciunea iterativ va traversa i proprietile nou
definite sau nu
Tablourile sunt obiecte; aplicat unui tablou,
tablou forin
for in va vizita
proprietile 0, 1, 2,
Observai c course["teacher"] este echivalent cu course.teacher
Trebuie s folosii paranteze drepte dac numele proprietii este
ntr-o variabil
37
Instruc
Instruc
st uc
uciunea
u ea with
t
with (object) statement
F
Folosete
l
t object
bj t ca prefix
fi implicit
i li it all variabilelor
i bil l di
din
statement
Dac cmpurile
p
accesate nu exist p
prefixul nu va fi
folosit
De exemplu, urmtoarele sunt echivalente:

with
ith (d
(document.myForm)
t
F
){
result.value = compute(myInput.value) ;
}
document.myForm.result.value
document myForm result value =
compute(document.myForm.myInput.value);
Instruciunea with este util atunci cnd avei de

f t maii multe
fcut
lt manipulri
i l i asupra unuii acelai
l i
obiect
Instruciunea with poate conduce ns la confuzii i din
acest motiv trebuie folosit cu atenie
38
Func
Func
u c
cii
Funciile trebuie definite n seciunea <head> a
paginii
i ii HTML pentru
t a fi siguri
i i c
ele
l suntt ncrcate
t
primele
Sintaxa
Si t
pentru
t definirea
d fi i
uneii ffuncii
ii este:
t
function name(arg1, , argN) { statements }
F
Funcia
i poate
t conine
i iinstruciuni
t i i d
de titipull return
t
value;
l
Orice variabil declarat n interiorul unei funcii este
local respectivei funcii
Sintaxa pentru apelarea unei funcii este

name(arg1, , argN)
Parametrii simpli sunt transmii prin valoare,
obiectele sunt transmise prin referin
39
Expresii regulate
g
O expresie regulat poate fi scris n oricare din
urmtoarele forme:
Folosind un constructor, precum n re = new RegExp("ab+c")
Folosind slash-uri, precum n re = /ab+c/
Expresiile regulate sunt aproape la fel ca n Perl sau Java

(doar cteva elemente mai puin folosite lipsesc)
string.match(regexp)
g. atc ( ege p) a
are
e rolul
olul de a cuta n st
string
g apa
apariii
st
ale regexp
ntoarce null dac nu este gsit nimic
Dac
D regexp are setat
t t flag-ul
fl
l g (global
( l b l search),
h) match
t h ntoarce
t
un
tablou cu toate substringurile ce se potrivesc expresiei
Dac g nu este setat, match ntoarce un tablou al crui element de
pe poziia
i i 0 reprezint
i textull ce se potrivete
i
expresiei,
i i iiar restull
elementelor sunt subexpresiile paranterizate.
40
Exemplu
<head>
<script
p language=javascript>
g g j
p
function checkpostal(){
var re5digit=/^\d{5}$/ // expresie regulata ce defineste un numar din 5 cifre
if ((document.myform.myinput.value.search(re5digit)==-1)
y
y p
(
g )
) // daca nu se p
potriveste
alert("Please enter a valid 5 digit number inside form")
else
alert("Number
alert(
Number valid
valid"))
}
</script>
</head>
<body>
<form name="myform">
<input type=
type="text"
text name=
name="myinput"
myinput size=15>
<input type="button" onClick="checkpostal()" value="check">
</form>
</body>
41
Rezultat
42
Demo 2
43
JavaScript
JavaScript este un limbaj complex
Au fost prezentate doar elemente de la suprafaa
acestuia
JavaScript nu este total independent de platform

Trebuie s v ateptai ca pe diverse browsere codul s
se comporte n mod diferit
Scrierea i testarea p
programelor
g
necesit un p
pic de efort
din partea echipei de dezvoltare
Browserele n general nu raporteaz erori

Nu v ateptai s primii multe mesaje ajuttoare care
s v ajute n munca de depanare a codului JavaScript
44
Qu
Quiz
Scriei codul corespunztor
p
unei pagini
p g
HTML n care s avei un obiect Car, un
constructor declarat n <head> i care s
afieze valoarea curent a cmpului type n
document.
document
45
Soluie
Solu
ie
<head>
<script
i t llanguage=javascript>
j
i t
function obiectCar() {
this type = Dacia
this.type
Dacia
}
</script>
</head>
<body>
b d
car = new obiectCar();
document.writeln(car.type);
</script>
</body>
46
JavaScript i HTML
Gestiunea Simpl a Evenimentelor
47
JavaScript
Ja
aSc pt i DOM
O
JavaScript se bazeaz pe un Document Object
Model (DOM) ce descrie structura paginii web
Nu reprezint
p
acelai
lucru ca XML DOM
Putei face multe lucruri nelegnd conceptul de

DOM
Putei folosi DOM pentru a accesa elementele paginii
W b
Web
Putei capta evenimente fr s fii deloc familiarizai cu
conceptul
t l DOM dar
d .
Avei nevoie de DOM pentru a face eventuale modificri
n pagina Web
48
Evenimente
Unele (dar nu toate) elementele paginii web
rspund la interactivitatea din partea utilizatorului
(keystrokes, mouse clicks) prin crearea de
evenimente
Diverse
Di
titipurii d
de elemente
l
t produc
d evenimente
i
t dif
diferite
it
Browserele nu seamn nici cnd vine vorba de tipurile de
evenimente pe care le produc
Ne vom concentra pe evenimente ce in de elementele

specifice unor formulare HTML
Putei folosi handlere asociate unor elemente de

formulare HTML
Dac evenimentul nu este generat handlerul nu face
nimic
Un handler ar trebui s fie redus ca dimensiune
M
Majoritatea
j it t h
handlerelor
dl l apeleaz
l
o funcie
f
i n care se produce
d
toat funcionalitatea specific evenimentului
49
Un handler de evenimente simplu

<form method="post" action="">
<input type="button"
name="myButton"
" B tt "
value="Click me"
onclick="alert('You
(
clicked the button!');">
);
</form>
Butonul este ncorporat ntr-un formular
Tag-ul este input, avnd atributul type="button"
Atributul name poate fi folosit din codul JavaScript
onclick este numele evenimentului ce se vrea a fi
g
gestionat
Valoarea elementului onclick este codul JavaScript care va fi
executat
alert are rolul de a declana o fereastr de pop-up de tip
alert cu un mesaj furnizat ca argument
50
Conven
Conven
Co
e ii de scriere
sc e e
JavaScript este case sensitive
HTML nu este
t case sensitive
iti
onclick="alert('You clicked the button!');"
P
Prile
il subliniate
bli i t iin d
de codul
d l HTML
Stringul este cod JavaScript
Vei vedea adesea metoda onclick scris i sub forma
onClick
Conveniile de nume Java sunt mai uor de citit
Acest lucru este permis n HTML
HTML, dar dac este folosit n cod
JavaScript conduce automat la eroare
Observaie: Deoarece avem un string n interiorul

altui string avem nevoie de att varianta cu
ghilimele,ct
g
,
i de cea cu apostroafe
p
p
pentru
reprezentarea stringurilor
51
Evenimente
e
e te co
comune
u e
Majoritatea elementelor HTML produc urmtoarele
evenimente:
onClick pe elementul respectiv se execut un click de mouse
onDblClick p
pe elementul respectiv
p
se execut dublu-click ntr-o
succesiune rapid
onMouseDown butonul de mouse este apsat cnd cursorul era
p elementului
deasupra
onMouseOver cursorul mouse-ului este mutat deasupra elementului
onMouseOut cursorul mouse-ului este scos n afara ariei de
acoperire
i a elementului
l
t l i
onMouseUp butonul mouse-ului este eliberat cnd cursorul era nc
deasupra elementului
onMouseMove mouse-ul este mutat
n JavaScript, aceste funcii trebuie scrise cu litere mici

52
Exemplu:
e p u un
u rollover
o o e simplu
s pu
Urmtorul cod va face textul Hello
red atunci cnd cursorul mouse-ului trece
deasupra lui i
blue atunci cnd cursorul mouse-ului iese din
suprafaa elementului
<h1 onMouseOver="style.color='red';"
onMouseOut="style.color='blue';">Hello </h1>
Un rollover aplicabil unei imagini:

<img
g src="../Images/duke.gif"
g
g
width="55" height="68"
onMouseOver="src='../Images/duke_wave.gif';"
onMouseOut="src='../Images/duke.gif';">
M
O t "
' /I
/d k if' "
53
Demo 3
54
Evenimente i g
gestionarea
gestionare
a de evenimente (1)
( )
Urmtoarele tabele sunt preluate de la:
http://developer netscape com/docs/manuals/js/client
http://developer.netscape.com/docs/manuals/js/client
/jsguide/index.htm
Eveniment
Se aplic
Apare atunci cnd
Load
Corpul documentului Utilizatorul ncarc pagina

browser
n
b
onLoad
Unload
Corpul documentului Utilizatorul prsete

pagina
i
onUnload
Error
Imagini, ferestre
Eroare la ncrcarea unei

g sau a unei ferestre
imagini
onError
Abort
Imagini
Utilizatorul renun la
ncrcarea unui imagini
onAbort
Handler
55
Evenimente i g
gestionarea
gestionare
a de evenimente (2)
( )
Eveniment
Se aplic
p
Apare
p atunci
cnd
KeyDown
Documente, imagini,
legturi zone text
legturi,
Utilizatorul apas onKeyDown

o tast
KeyUp
Documente, imagini,
l t i zone text
legturi,
t t
Utilizatorul
elibereaz
lib
o ttast
t
KeyPress
Documente, imagini,
Documente
imagini
legturi, zone text
Utilizatorul apas onKeyPress

o tast
Change
Cmpuri text,
text zone text,
text
liste de selecie
Utilizatorul
onChange
modific valoarea
unui element
Handler
onKeyUp
56
Evenimente i g
gestionarea
gestionare
a de evenimente (3)
( )
Eveniment
Se aplic
p
Apare
p atunci
cnd
Handler
MouseDown
Documente, butoane,
legturi
Utilizatorul
termin de
apsat un buton
de mouse
onMouseDown
MouseUp
Documente, butoane,
legturi
Utilizatorul
elibereaz un
buton
bu
o de mouse
ouse
onMouseUp
Click
Butoane, butoane
radio, checkbox-uri,
b t
butoane
de
d submit,
b it
butoane de reset,
legturi
Utilizatorul face onClick

click de mouse
pe un element
l
t
din formular sau
o legtur
57
Evenimente si g
gestionare de evenimente (4)
( )
Eveniment
Se aplic
Apare atunci cnd
Handler
MouseOver
Legturi
Utilizatorul mut
cursorul deasupra
p
unei legturi
onMouseOver
MouseOut
Zone, legturi
onMouseOut
Utilizatorul mut
cursorull n
afara
f
zonei unei imagini
sau legturi
Select
Cmpuri text, zone

text
Utilizatorul
selecteaz zona de
input a
elementului din
formular
onSelect
58
Evenimente si g
( )
Eveniment
Se aplic
Apare atunci cnd
Handler
Move
Ferestre
Utilizatorul sau script

scriptul mut o fereastr
onMove
Resize
Ferestre
Utilizatorul sau scriptul redimensioneaz o

fereastr
onResize
DragDrop
Ferestre
Utilizatorul plaseaz
un obiect n fereastra
din browser
bro ser
onDragDrop
59
Evenimente si g
( )
Eveniment
Se aplic
p
Apare
p atunci
cnd
Handler
Focus
Ferestre i toate
elementele unui
formular
Utilizatorul face
focus pe element
onFocus
Blur
Ferestre i toate
elementele unui
formular
Utilizatorul mut
focusul pe alt
element
onBlur
Reset
Formulare
Utilizatorul face
click pe butonul
de Reset
onReset
Submit
Formulare
Utilizatorul face
click pe butonul
de Submit
onSubmit
60
napoi
apo la
a DOM
O
Putei ataa handlere de evenimente elementelor HTML
avnd puine cunotine legate de DOM
Totui, pentru a schimba ceea ce este afiat n cadrul
paginii
p
g
avei nevoie s cunoatei
modul n care p
putei
referi diversele elemente ale paginii
DOM-ul este un standard W3C
Elementul de pe nivelul cel mai nalt (n cazul

paginii curente) este window, i orice altceva
descinde de la acesta
n DOM, toate variabilele se presupune ca pornesc cu
window.
window.
Toate celelalte elemente pot fi accesate mergnd n
jos pornind de la acest element de nivel cel mai nalt
61
Ierarhia
DOM
Sursa:
http://sislands.com/coin70/week1/dom.htm
62
Cmpurile
pu e lui
u window
do (1)
( )
window
Fereastra curenta (nu se folosete direct prea des).
des)
self
Acelai
lucru ca i
window.
parent
Dac ne referim la un frame, fereastra imediat superioar n care
acesta este inclus
inclus.
top
Dac ne referim la un frame,, fereastra cea mai superioar
p
dpdv
p
ierarhic n care acesta este inclus.
frames[ ]
U
Un ttablou
bl d
de fframe-urii (d
(dac
exist)
i t) din
di cadrul
d l fferestrei
t i curente.
t
Frame-urile sunt i ele la rndul lor ferestre.
length
g
Numrul de frame-uri coninute n fereastra curent.
63
Cmpurile
pu e lui
u window
do (2)
( )
document
Documentul HTML ce este curent afiat n fereastr.
location
URL-ul documentului ce este curent afiat
n fereastr.
Daca setai aceast proprietate la un nou URL, respectivul URL va fi
ncrcat n fereastra curent.
Apelnd location.reload()
location reload() vei face refresh la fereastr.
fereastr
navigator
O referin la obiectul Navigator (browser)
(browser). Unele proprieti ale
obiectului Navigator sunt:
appName numele browserului, precum Mozilla Firefox"
platform numele platformei pe care ruleaz browserul
browserul, precum "Win32"
status
Un string
g ce p
poate fi citit/scris i care este afiat
n zona de status a
ferestrei browserului. Poate fi modificat cu o simpl instruciune de
atribuire.
64
Metodele
etode e lui
u window
do (1)
( )
alert(string)
Afi
Afieaz
un dialog
di l ce conine
i string-ul
ti
l primit
i it ca
argument i un buton OK.
confirm(string)
Afieaz o fereastr de dialog coninnd string-ul primit
ca argument mpreun cu dou butoane Cancel i OK.
ntoarce true dac a fost apsat butonul OK i false
dac a fost apsat butonul Cancel.
prompt(string)
Afieaz un dialog de confirmare coninand string-ul
primit ca argument, un cmp de tip text i dou
butoane Cancel i OK.
ntoarce string-ul
string ul introdus de ctre utilizator daca a fost
apsat OK i null dac a fost apsat butonul Cancel.
65
Metodele
etode e lui
u window
do (2)
( )
open(URL)
p (
)
Deschide o noua fereastr coninnd
documentul specificat de la adresa URL dat
ca argument.
close()
nchide o fereastr.
66
Cmpurile
pu e lui
u document
docu e t (1)
( )
Trebuie s p
prefixai aceste cmpuri
p cu
document.
anchors[ ]
Un tablou de obiecte Anchor (obiecte
reprezentnd
d tag-urii d
de fforma <a name=...>))
applets[
pp
[]
Un tablou de obiecte Applet
Proprietile sunt cmpurile publice definite pentru
respectivele appleturi
Metodele sunt metodele publice ale appleturilor
67
Campurile
Ca pu e lui
u docu
document
e t (2)
( )
forms[ ]
Un tablou de elemente de tip Form
Dac documentul conine un singur formular, acesta
este ntors in forms[0]
images[
g []
Un tablou de obiecte Image
Pentru schimbarea unei imagini asignai un nou
URL proprietii src
links[ ]
Un tablou de obiecte Link
Un link are cteva proprieti
proprieti, incluznd href,
href ce
conine URL-ul complet al legturii
68
Campurile
Ca
pu e lui
u docu
document
e t (3)
bgColor
Culoarea de fundal a documentului
Poate fi schimbata oricnd
title
Un string read-only ce conine titlul
documentului
URL
Un string read-only ce conine adresa URL de
unde a fost ncrcat documentul
69
Cmpurile
pu e ob
obiectului
ectu u form
o
elements[[ ]
Un tablou coninnd elementele formularului
70
Exemplu DOM
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<script
i t ttype="text/javascript">
"t t/j
i t"
<head>
titlu = document.getElementById('titlu_doc');
<title>Acesta este titlul documentului</title>
</head>
</script>
/s i t>
<body>
<h1 id="titlu_doc">Acesta este titlul documentului</h1>
<p>Acesta este un paragraf de text <img src="bullet.gif" alt="Bullet" /></p>
<p>Acesta este un alt paragraf de text</p>
</body>
</html>
// localizam imaginea
imagine = document.getElementsByTagName('img')[0];
// modificam atributul "src"
i
imagine.src
i
= ''ceva.gif';
if'
// localizam paragraful
paragraf = document.getElementsByTagName('p')[1];
// modificam
difi
atributul
t ib t l CSS font-style
f t t l
paragraf.style.fontStyle = 'italic';
</script>
71
Exemple JavaScript
72
Ob
binerea
inerea datei
var d = new Date()
document.write(d.getDate() + "/")
document.write((d.getMonth() + 1) + "/")
document.write(d.getFullYear())
</script>
Rezultatul:
25/03/2010
73
Obinerea i formatarea datei

Ob
<script
sc pt type="text/javascript">
type te t/ja asc pt
var d=new Date()
var weekday=new Array("Sunday", "Monday", "Tuesday",
"Wednesday", "Thursday", "Friday","Saturday")
var monthname=new Array("Jan", "Feb", "Mar","Apr",
May , "Jun"
Jun , "Jul"
Jul , "Aug"
Aug , "Sep"
Sep , "Oct"
Oct , "Nov"
Nov , "Dec")
Dec )
"May"
document.write(weekday[d.getDay()] + ", ")
document.write(monthname[d.getMonth()]
(
[ g
()] + " " +
d.getDate() + ", ")
document.write(d.getFullYear())
</script>
Thursday,
Th d
M
Mar 25
25, 2010
74
Obinerea unui num

Ob
num
r aleator
Codul g
genereaz un numr aleator n
virgul mobil cuprins ntre 0 i 1:
type= text/javascript >
document.write(Math.random())
</script>
/ i t
Rezultatul:
0 728762788388911
0.728762788388911
75
Obinerea unei valori ntregi

Ob
aleatoare
C
Codul
d l genereaz
un numr
aleator
l t ntreg
t
cuprins
i
ntre 0 i 10:
var max = 10;
number=Math.random()*max + 1;
document.write(Math.floor(number));
</script>
Rezultatul:
5
76
Afi
Afi
area unui mesaj de tip alert
alert
Codul afieaz un mesaj de alert atunci cnd un

buton este apsat
buto
apsat:
<form>
<input type="button"
type button name
name="Submit"
Submit
value="Alert!
onclick="alert(Something happened!');">
</form>
77
Depanare
epa a e
Urmtorul cod arat ce evenimente au fost
d l
declanate
t atunci
t
i cnd
d utilizatorul
tili t l a ntreprins
t
i
diverse aciuni
n
seciunea
i
<head>
h d a paginii
i ii HTML d
definim:
fi i
<script>
<!-<!
function tell(a, b) {
document.forms[0].result.value+="\n"+a+": " + b;
}
//-->
</script>
Pentru fiecare element al formularului adugm

un handler pentru oricare eveniment (plauzibil)
78
Depanarea
epa a ea (pe
(pentru
t uu
un Buton)
uto )
<input type="button" name="plainButton" value="Plain
Button
Button"
onMouseDown="tell(this.name, 'onmousedown');"
onMouseUp="tell(this.name, 'onmouseup');"
onClick="tell(this
onClick=
tell(this.name,
name 'onclick');"
onclick );
onDblClick="tell(this.name,'ondblclick');"
onFocus="tell(this.name, 'onfocus');"
onBlur="tell(this
onBlur=
tell(this.name,
name 'onblur');"
onblur );
onMouseOver="tell(this.name, 'onmouseover');"
onMouseOut="tell(this.name, 'onmouseout');"
onChange="tell(this
onChange=
tell(this.name,
name 'onchange');"
onchange );
onKeyPress="tell(this.name, 'onkeypress');"
onKeyDown="tell(this.name, 'onkeydown');"
onKeyUp="tell(this name 'onkeyup');"
onKeyUp="tell(this.name,
onkeyup );"
onSelect="tell(this.name, 'onselect');"
onReset="tell(this.name, 'onreset');"
>
79
Demo 4
80
JavaScript elemente
suplimentare
81
Suportul
Supo
tu b
browserului
o se u u
JavaScript funcioneaz pe aproape toate
browserele
p
folosete
JScript
p ((referit n
Internet Explorer
meniuri ca Active Scripting), ce reprezint
dialectul Microsoft-ului de JavaScript
p
Browserele mai vechi nu suport unele construcii
JavaScript
Vom presupune suportul unui browser modern
Activarea i dezactivarea JavaScript:

Dac nu tii cum s facei asta din browser, vedei i
http://www mistered us/tips/javascript/browsers shtml
http://www.mistered.us/tips/javascript/browsers.shtml
82
Ce NU
U pute
putei face
ace
Pentru protecia vizitatorilor la paginile voastre,
f l i d JJavaScript
folosind
S i t nu putei:
t i
Executa alte programe
S v
conectai
t i lla alte
lt computere,
t
exceptnd
t d
download-ul altor pagini HTML sau trimiterea de e-mail
S determinai ce alte site-uri a vizitat utilizatorul
Citi sau scrie fiiere locale
Totui,
JScript
p n IE p
permite scripting
p g ASP, modalitatea p
prin
care viermele foarte distructiv JS.Gigger.A@mm s-a rspndit
de exemplu
Implicit,
p , Outlook Express
p
p
permite ca mail-ul p
primit s ruleze
scripturi
Pentru a dezactiva scripting-ul n Outlook Express, vedei
http://support.microsoft.com/support/kb/articles/Q192/8/46.ASP
p
pp
pp
Q
83
Numere
u ee
n JavaScript, toate numerele sunt de tip floating
point
Numere speciale predefinite:
Infinity
Infinity, Number.POSITIVE_INFINITY
Number POSITIVE INFINITY rezultatul
mpririi unui numr pozitiv la zero
Number.NEGATIVE_INFINITY rezultatul mpririi unui
numr
negativ
ti la
l zero
NaN, Number.NaN (Not a Number) rezultatul
mpririi
p 0/0
NaN este diferit de orice, chiar i de sine nsui
Exist o funcie globala isNaN()
Number
Number.MAX_VALUE
MAX VALUE cel mai mare numr
reprezentabil
Number.MIN_VALUE cel mai mic (apropiat de zero)
numr
reprezentabil
t bil
84
StringString
St
g-u
uri i caractere
ca acte e
n JavaScript, string este un tip primitiv
Stringurile sunt ncadrate de ghilimele sau
apostroafe
Nu exist tipul character
Caractere
C
t
speciale:
i l
\0
\b
\f
\n
\r
\t
NUL
backspace
form feed
newline
carriage return
horizontal tab
\v vertical tab
\' single quote
\" double quote
\\ backslash
\xDD Unicode hex DD
\xDDDD Unicode hex DDDD
85
Cteva
te a metode
etode de lucru
uc u cu stringstring
st g-u
uri
charAt(n)
ntoarce
t
all n-lea
l caracter
t di
din string
ti
concat(string1, ..., stringN)

Concateneaz string-urile
string urile primite ca argumente
indexOf(substring)
ntoarce poziia primului caracter al substring n string-ul recipient
sau -1 daca nu este gsit
indexOf(substring, start)
ntoarce poziia primului caracter al substring n stringul dat ca
argument ncepnd de la poziia start, sau -1 dac nu este gsit
lastIndexOf(substring), lastIndexOf(substring, start)

Similar indexOf, dar caut string-ul ncepnd de la sfrit spre
nceput
86
Variabile
a ab e
Orice variabil este o proprietate a unui obiect
Atunci cnd JavaScript
p p
pornete,
, creaz un obiect g
global
obiectul window
Poate fi referit ca window sau ca this
Pot exista mai mult de un singur obiect global

global
De exemplu, un frame poate referi un alt frame printr-un cod precum
parent.frames[1]
Elementele HTML form pot fi referite prin
document.forms[formNumber].elements[elementNumber]
Orice element HTML form are un atribut name

Numele poate fi folosit in locul referinei de tip tablou
De exemplu, dac presupunem:
y
<form name="myForm">
<input type="button" name="myButton" ...>
Atunci n loc de document.forms[0].elements[0]
Putem folosi
i document.myForm.myButton
y
y
87
Funcii
Func
n Java, metodele sunt asociate cu obiecte
n JavaScript
JavaScript, o funcie este un obiect
Funciile pot fi recursive:
function factorial(n) {
if (n <= 1) return 1;
else return n * factorial(n - 1);
}
Funciile pot fi imbricate:

function hypotenuse(a,
yp
( , b)) {
function square(x) { return x * x; }
return Math.sqrt(square(a) + square(b));
}
88
Constructorul Function()
Deoarece funciile sunt obiecte, ele au i un constructor:
Function(arg1, arg2, ..., argN, body)
Toate argumentele constructorului sunt string-uri
Exemplu:
var f = new F
Function("x",
ti (" " ""y",
" ""return
t
x * y;");
")
Funcia nu are nici un nume
Dar se poate asigna unei variabile i folosi respectivul
nume
Numele poate fi folosit pentru apelarea funciei in modul
uzual
Se pot construi funcii n mod dinamic n JavaScript (ele
suntt automat
t
t compilate)
il t )
Totui, compilarea este o activitate computaionalintensiv
Funciile definite n acest fel sunt ntotdeauna globale
89
Func
Func
u c
cii
O funcie poate fi definit prin folosirea unui
constructor:
t t
var f = new Function("x", "y", "return x * y;");
O funcie
f
i poate fi scris
i sub
b fform
literal,
li
l
precum n urmtorul exemplu:
var f = function(x,
f
ti ( y)) { return
t
x * y; }
Aceast funcie nu este n mod necesar global
P
Pentru
t a scrie
i o funcie
f
i recursiv,
i se poate
t
proceda astfel:
var f = function fact(n) { if (n <=
< 1) return n;
else return n * fact(n - 1) ; };
Numele nu persist dup ce funcia este creat
90
Nume de func
funcii
Numele unei funcii
este o variabil ce
conine respectiva funcie
var square = function(x) { return x * x; };

var a = square(4); // a ia valoarea 16
var b = square; // b ia valoarea square
var c = b(5);
// c ia valoarea 25
var d = [ b ];
// d este un tablou
var e = d[0](6); // e ia valoarea 36
91
Propriet
Propriet
op et
et
ii a
ale
e func
func
u c
ciilor
o
Deoarece o funcie este un obiect i putei
i aduga proprieti
Proprietile
p
funciilor
sunt adesea o bun

alternativ la variabilele globale
Exemplu:
p
uniqueInteger.counter = 0;
function uniqueInteger() {
return uniqueInteger.counter++;
}
Proprietile funciilor sunt cumva similare
variabilelor statice din Java
92
Variabile
a ab e locale
oca e i globale
g oba e
O variabil este local unei funcii
dac
Este un parametru formal al funciei
Este declarat cu var n interiorul funciei (e
(e.g.
g
var x = 5)
Altf
Altfel,
l variabilele
i bil l suntt globale
l b l
Mai
a exact,
e ac , o variabil
a ab este
es e g
global
oba dac
Este declarat n afara oricrei funcii (cu sau
fr var)
Este declarat prin asignare n interiorul unei
funcii (e
(e.g.
g x = 5)
93
Func
Func
u c
cii i metode
etode
Atunci cnd o funcie reprezint o proprietate a
unui obiect, o numim metod
O metod poate fi invocat fie
call(object, arg1, ..., argN) fie
apply(object, [arg1, ..., argN])
call i apply sunt definite pentru toate funciile
call primete orice numr de argumente
apply primete un tablou de argumente
Ambele permit invocarea funciei ca i cum ar fi o

metod a unui alt obiect
obiect, object
n interiorul unei funcii cuvntul cheie this se refer la
object
94
Exemplu
var x = 10;
var o = { x: 15 };
function f() {
alert(this.x);
}
Afieaz 10 (this = obiectul global)
f();
f.call(o);
Afieaz 15 (this = o)
95
Metode
etode (2)
( )
Putem apoi transforma funcia ntr-o metod:
myPoint.dist = distance;
this n interiorul unei funcii se refer la myPoint,

d i putem spune:
deci
document.write("The distance is " + myPoint.dist(6,
9));
Dac nu dorim s asociem permanent funcia cu

myPoint putem spune:
myPoint,
document.write("The distance is " +
distance.call(myPoint, 6, 9));
Sau:
document.write("The
document.write( The distance is " +
distance.apply(myPoint, [6, 9]));
96
JavaScript i AJAX
97
Ce este AJAX?
J
AJAX = Asynchronous JavaScript and XML
Grup de tehnologii ce permit o mai bun
interaciune i prezentare, precum i actualizarea
i
incremental
t l a paginilor
i il W
Web.
b
Bazat pe tehnologii standard web - HTTP,
(X)HTML CSS
(X)HTML,
CSS, JJavaScript,
S i t D
Documentt Obj
Objectt
Model (DOM), XML
Folosit
F l it d
de multe
lt companiiii populare
l
astzi
t i
Google Suggests, Google & Yahoo! Maps

A
Amazon
A9 S
Search
h
Flickr, BaseCamp, Kayak
Y h ! AJAX Library
Yahoo!
Lib
98
Exemplu Yahoo! Sports
99
Interaciunea Web Tradi

Interac
Tradiional
ional
Clientul face o cerere http
Serverul intoarce o noua pagina

W b server
Web
100
Cum func
funcioneaz
ioneaz
AJAX
Clientul face o cerere http pentru informatii
Serverul intoarce informatiile cerute
Web server
Mai multe cereri sunt servite
101
De ce ne intereseaz
intereseaz
AJAX?
Permite construirea de aplicaii
p Rich
Internet Applications (RIA)
Permite interaciunea dinamic pe Web
mbuntete performanele
Actualizri real-time
Nu necesit plug-in-uri
plug in uri
102
Cod Simplu
p pentru
p
Schimbarea Stilului
<style type="text/css">
// get the element to hold updated data
.notice {
var priceLoc = document.getElementById('priceLoc");
g
background-color:#FFFFCC;
// update
p
the data in p
price loc
priceLoc.value = "new data";
.roInput {
// set the style so change will be noticed
border:none;
priceLoc className = "notice";

priceLoc.className
notice ;
background-color:#FFFFFF;
// create timer to call clearActive() with element id and style name
setTimeout("clearActive('priceLoc','roInput');", 5000);
</style>
function clearActive(activeId, resetStyle) {
g
y (
)
var curActive = document.getElementById(activeId);
curActive.className = resetStyle;
}
</script>
103
AJAX
Primul pas: crearea unei instane
if (window.XMLHttpRequest) {
reqObj
q j = new XMLHttpRequest();
p q
() // Firefox, Safari, ...
} else if (window.ActiveXObject) { // ActiveX version
q j = new ActiveXObject("Microsoft.XMLHTTP");
j
(
)
reqObj
// IE
}
Pasul doi: Ateptm primirea rspunsului

reqObj onreadystatechange = function() {
reqObj.onreadystatechange
processResponse(reqObj);
};
104
AJAX
Pasul 3: cererea propriu-zis
Se pot folosi dou metode ale XMLHttpRequest
open: parametrii sunt tipul cererii (GET sau POST)
POST),
URL-ul documentului, true pentru cerere asincrona
send:
d merge doar
d
cu POST
POST, accept
t datele
d t l d
de ttrimis
i i
ctre server
Exemplu
reqObj.open(
reqObj
open('GET'
GET ,
'http://www.example.com/example.xml', true);
105
AJAX
Pasul 4: Gestiunea rspunsului
function processResponse(reqObj) {
if ((reqObj.readyState
Obj
d St t == 4) {// Received,
R
i d OK
if (reqObj.status == 200) {
// perfect!
}
else {
}
}
else {
}
// there was a problem with the request
// Wait...
106
Cuprins
Ce este jQuery?
j
y
Ce face jQuery?
S t istoric
Scurt
i t i
Cum se foloseste?
jQuery API
Selectori
S
l t i
Atribute
P
Parcurgeri
i
Evenimente
Aj
Ajax
Ce este jQuery
jQuery?
?
jQuery
j
y este o biblioteca JavaScript
p , rapida
p
si compacta, ce simplifica parcurgerea
documentelor html
html, tratarea evenimentelor
evenimentelor,
realizarea de animatii, interactiunile Ajax.
Aj t d
Ajuta
decii lla o d
dezvoltare
lt
maii rapida
id d
de
pagini web
Ce face jQuery
jQuery?
?
Accesarea elementelor dintr-un document
Modificarea aspectului unei pagini web
M difi
Modificarea
continutului
ti t l i unuii d
documentt
Gestionarea evenimentelor
Aducerea de informatii de pe server fara a
face refresh la pagina
Realizare de animatii
Scurt istoric
Public Development Phase - John Resig
anunta o noua biblioteca JS ce venea ca o
imbunatatire a Prototype. E lansata sub
numele de jQuery la 14 ianuarie 2006
jQuery 1.0 (August 2006) prima versiune
stabila; are deja implementata suport pentru
selectori CSS, tratare de evenimente si
interactiuni AJAX
jQuery 1.1 (January 2007) devine mai
compacta
jQuery 1.2 (September 2007) se scot
selectorii Xpath, se adauga evenimente legate
de namespace
Scurt istoric
jQ
jQueryy UI ((Septembrie
p
2007)) destinat sa
inlocuiasca plugin-ul Interface existent. Contine o
colectie bogata de widget-uri si tool-uri cu care se
pot construi elemente complexe
jQuery 1.3 (Ianuarie 2009) imbunatatiri la modulul
d selectie
de
l ti (Sizzle)
(Si l )
jQuery 1.4(Ianuarie 2010) imbunatatiri de
performanata
jQuery 1.5(Ianuarie 2011) modulul AJAX a fost
rescris imbunatatiri in parcurgerea elementelor
rescris,
jQuery 1.5.2 versiunea curenta
Cum se foloseste ?
Se g
gaseste p
pe site-ul oficial la adresa
http://docs.jquery.com/Downloading_jQuery
Nu necesita instalare
<script type="text/javascript" src="jquery.js"></script>
Disponibial in doua versiuni

Minified ((29 kB la versiunea 1.5.2))
Regular (214 kB la versiunea 1.5.2)
Alti selectori
$("#orderedlist
$("#
d dli t > li")
li").addClass("blue");
ddCl
("bl ")
$("#orderedlist").find("li"). addClass("blue");
$("#orderedlist li"). addClass("blue");
$("#orderedlist
$(
#orderedlist #child").
#child ). addClass("blue");
addClass( blue );
$("#orderedlist .child"). addClass("blue");
$("# d dli t lili:last").
$("#orderedlist
l t") addClass("blue");
ddCl
("bl ")
$("#orderedlist li:first"). addClass("blue");
$("input:image"). addClass("blue");
Alti selectori
:lt si :gt
g
Alti selectori
Selectori Multipli
p
Atribute
.addClass() adauga clasa specificate elementelor selectate
.attr()
attr() valoarea atributului specificat al primului element ce
indeplineste conditiile de selectie
.hasClass() determina daca vreunul din elementele
selectate au clasa specificata
.html() - intoarce sau seteaza continutul html al primului
element din setul selectat
.removeAttr()
Att () elimina
li i un atribut
t ib t pentru
t toate
t t elementele
l
t l
selectate
.removeClass() elimina una sau mai multe clase specificate
pentru fiecare
f
element din setul selectat
.toggleClass() adauga sau sterge una sau mai multe clase
pentru fiecare element din set, in functie de exiestenta clasei
p
date ca argument
.val() intoarce valoare primului element din setul selectat
Parcurgeri
.find()
() cauta printre descendentii
elementelor selectate elementul dat de
selector
$("p").find("span").css('color','red');
.each()
each() pentru fiecare element selectat

executa o functie
$("li")
$("li").each(function(){
h(f
i (){
doSomething();
});
.children() copii fiecarui element selectat

$("div").children(".selected").css("color", "blue");
Parcurgeri
.parent()
() parintele fiecarui element din setul
selectat
$(
$("p").parent(".selected").css("background",
p ).parent( .selected ).css( background ,
"yellow")
.prev()
prev() fratele anterior fiecarui element din

set
$("p").prev(#myId").css("background",
$("p") prev(#myId") css("background" "yellow");
.next() fratele urmator al fiecarui element din

set
$("p").next(".selected").css("background",
(p)
(
)
(
g
"yellow");
Evenimente
.change() ataseaza un handler
evenimentului de change sau il
declanseaza;
.click() - ataseaza un handler
evenimentului de click
click sau il declanseaza;
.hover() ataseaza doua functii handler ce
vor fi apelate cand cursorul trece pe
deasupra elementului
.resize()
i () - ataseaza
t
un handler
h dl
evenimentului de resize sau il
declanseaza;
Ajax
jQuery.ajax()
jQuery
ajax() face o cerere HTTP
asincrona la server
Ajax
.ajaxComplete()
j
p
() ataseaza un handler ce
se va apela dupa trimiterea cererii Ajax
Ajax
jQuery.post()
j
y p () -cerere HTTP POST
.serialize() encodeaza date dintr-un

formular pentru a fi trimise la server
Sumar
Fundamentele JavaScript
p noiuni
de baz
ale limbajului i construciile specifice
acestuia
JavaScript i HTML - gestiunea simpl a
evenimentelor
i
t l ffolosind
l i d DOM
Exemple JavaScript
Noiuni avansate de JavaScript funcii,
metode,
t d obiecte,
bi t etc.
t
O introducere n JavaScript
p i AJAX
125

PW5 JavaScript PDF

Încărcat de

Informații document

Titlu original

Drepturi de autor

Formate disponibile

Partajați acest document

Partajați sau inserați document

Opțiuni de partajare

Vi se pare util acest document?

Este necorespunzător acest conținut?

Drepturi de autor:

Formate disponibile

PW5 JavaScript PDF

Încărcat de

Drepturi de autor:

Formate disponibile

Universitatea Politehnica Bucuresti - Facultatea de Automatica si Calculatoare

Programare web client

Curs Programare Web, anul 4 C5 Curs 5

Universitatea Politehnica Bucuresti - Facultatea de Automatica si Calculatoare

Curs Programare Web, anul 4 C5 Curs 5

Universitatea Politehnica Bucuresti - Facultatea de Automatica si Calculatoare

Curs Programare Web, anul 4 C5 Curs 5

Universitatea Politehnica Bucuresti - Facultatea de Automatica si Calculatoare

Curs Programare Web, anul 4 C5 Curs 5

Universitatea Politehnica Bucuresti - Facultatea de Automatica si Calculatoare

Instruciunile n JavaScript seamn cu instruciuni

Universitatea Politehnica Bucuresti - Facultatea de Automatica si Calculatoare

JavaScript este ntr-o bun msur independent

Curs Programare Web, anul 4 C5 Curs 5

Universitatea Politehnica Bucuresti - Facultatea de Automatica si Calculatoare

Universitatea Politehnica Bucuresti - Facultatea de Automatica si Calculatoare

Unii utilizatori opresc JavaScript

Universitatea Politehnica Bucuresti - Facultatea de Automatica si Calculatoare

Universitatea Politehnica Bucuresti - Facultatea de Automatica si Calculatoare

Curs Programare Web, anul 4 C5 Curs 5

Universitatea Politehnica Bucuresti - Facultatea de Automatica si Calculatoare

Curs Programare Web, anul 4 C5 Curs 5

Universitatea Politehnica Bucuresti - Facultatea de Automatica si Calculatoare

Curs Programare Web, anul 4 C5 Curs 5

Universitatea Politehnica Bucuresti - Facultatea de Automatica si Calculatoare

Unde apare codul JavaScript

Codul JavaScript poate fi plasat i mpreun cu

Universitatea Politehnica Bucuresti - Facultatea de Automatica si Calculatoare

Numerele sunt ntotdeauna stocate ca valori de tip float

Valorile boolean sunt fie true, fie false

Universitatea Politehnica Bucuresti - Facultatea de Automatica si Calculatoare

Exist doar dou scopuri ale variabilelor: local i global

Variabilele pot fi declarate implicit prin simpla adugare a

Universitatea Politehnica Bucuresti - Facultatea de Automatica si Calculatoare

Curs Programare Web, anul 4 C5 Curs 5

Universitatea Politehnica Bucuresti - Facultatea de Automatica si Calculatoare

Curs Programare Web, anul 4 C5 Curs 5

Universitatea Politehnica Bucuresti - Facultatea de Automatica si Calculatoare

Comentariile de tip javadoc din Java, /** ...

Curs Programare Web, anul 4 C5 Curs 5

Universitatea Politehnica Bucuresti - Facultatea de Automatica si Calculatoare

Universitatea Politehnica Bucuresti - Facultatea de Automatica si Calculatoare

Alte instruciuni familiare:

Universitatea Politehnica Bucuresti - Facultatea de Automatica si Calculatoare

JavaScript vs. Java

JavaScript are unele construcii ce seamn cu

Curs Programare Web, anul 4 C5 Curs 5

Universitatea Politehnica Bucuresti - Facultatea de Automatica si Calculatoare

Totui JavaScript nu este Java

Curs Programare Web, anul 4 C5 Curs 5

Universitatea Politehnica Bucuresti - Facultatea de Automatica si Calculatoare

Universitatea Politehnica Bucuresti - Facultatea de Automatica si Calculatoare

Testul poate fi:

Universitatea Politehnica Bucuresti - Facultatea de Automatica si Calculatoare

JavaScript lucreaz cu object literals, scrii conform

Exemplu de folosire: document.write("I own a " + car.myCar);

Universitatea Politehnica Bucuresti - Facultatea de Automatica si Calculatoare

Trei moduri de a crea un obiect

2. Putei folosi new pentru a crea un obiect blank

3. Putei scrie i folosi un constructor:

Curs Programare Web, anul 4 C5 Curs 5

Universitatea Politehnica Bucuresti - Facultatea de Automatica si Calculatoare

Dac folosim dou virgule succesive, variabila