Universitatea Politehnica Bucuresti - Facultatea de Automatica si Calculatoare

Curs Programare Web, anul 4 C5 – Curs 5 1
Ciprian Dobre
ciprian.dobre@cs.pub.ro
Programare web client-side,
JavaScript
Universitatea Politehnica Bucuresti - Facultatea de Automatica si Calculatoare
2
Obiective
• Introducere în JavaScript și a noțiunilor de
programare pe care limbajul le suportă
• Există numeroase documente şi cărţi
publicate (inclusiv în limba română) care
conţin informaţii suplimentare.
• Prezentăm în continuare doar o trecere în
revistă a limbajului.
Curs Programare Web, anul 4 C5 – Curs 5
Universitatea Politehnica Bucuresti - Facultatea de Automatica si Calculatoare
3
Sumar
• JavaScript – fundamente
• JavaScript și HTML - gestiunea simplă a
evenimentelor
• Exemple JavaScript
• Mai multe despre JavaScript
• JavaScript și AJAX
Curs Programare Web, anul 4 C5 – Curs 5
Universitatea Politehnica Bucuresti - Facultatea de Automatica si Calculatoare
4
JavaScript
Fundamentele Limbajului
Curs Programare Web, anul 4 C5 – Curs 5
Universitatea Politehnica Bucuresti - Facultatea de Automatica si Calculatoare
Despre JavaScript
• JavaScript nu este Java, nici măcar nu este înrudit
cu Java
– Numele original al JavaScript a fost “LiveScript”
– Numele a fost modificat când Java a devenit popular
– Astăzi când Microsoft nu mai îndrăgește Java propriul
nume acordat dialectului JavaScript este “Active Script”
• Instrucțiunile în JavaScript seamănă cu instrucțiuni
din Java deoarece ambele limbaje au împrumutat
multe elemente chiar din limbajul C
– JavaScript este relativ ușor de învățat de către
programatorii familiarizați cu Java
– Totuși JavaScript este un limbaj de sine stătător, complet
și complex
Curs Programare Web, anul 4 C5 – Curs 5 5
Universitatea Politehnica Bucuresti - Facultatea de Automatica si Calculatoare
Despre JavaScript
• JavaScript este rar folosit pentru a scrie
“programe” complete
– Mici blocuri de instrucțiuni JavaScript sunt în general
folosite pentru a adăuga funcționalitate paginilor HTML
– JavaScript este adesea folosit în conjuncție cu
formulare HTML
• JavaScript este într-o bună măsură independent
de platformă (nu SO, cât mai ales de browser)
Curs Programare Web, anul 4 C5 – Curs 5 6
Universitatea Politehnica Bucuresti - Facultatea de Automatica si Calculatoare
7
Folosirea JavaScript într-un browser
• Codul JavaScript este inclus între taguri <script>:
– <script type="text/javascript">
document.write("<h1>Hello World!</h1>") ;
</script>
• Observații:
– Atributul type permite folosirea altor limbaje de scripting (chiar
dacă JavaScript este limbajul implicit)
– Acest exemplu simplu face același lucru ca a scrie <h1>Hello
World!</h1> în același loc în documentul HTML
– Punct și virgulă de la finalul instrucțiunii JavaScript este opțional
• Sfârșitul liniei marchează sfârșitul instrucțiunii, dacă linia poate
fi interpretată ca o instrucțiune completă
• Se poate folosi punct și virgulă pentru separarea mai multor
instrucțiuni ce apar pe aceeași linie
• Este indicat totuși folosirea în permanență a caracterului punct
și virgulă
Curs Programare Web, anul 4 C5 – Curs 5
Universitatea Politehnica Bucuresti - Facultatea de Automatica si Calculatoare
8
JavaScript nu este întotdeauna disponibil
• Unele browsere mai vechi nu recunosc tag-ul script
– Aceste browsere vor ignora tag-ul script dar vor afișa ce este
inclus în interiorul tag-ului (codul JavaScript inclus)
– Pentru a face aceste browsere să ignore conținutul putem folosi:
<script type="text/javascript">
<!--
document.write("Hello World!")
//-->
</script>
– Caracterul <!-- introduce un comentariu HTML
– Pentru a face ca JavaScript să ignore codul de sfârșit de
comentariu HTML, -->, secvența // marchează un comentariu
JavaScript, ce ține până la sfârșitul liniei respective
• Unii utilizatori opresc JavaScript
– Folosiți <noscript>mesaj</noscript> pentru a afișa un mesaj
indiferent dacă în interiorul acestuia apare și cod JavaScript
Curs Programare Web, anul 4 C5 – Curs 5
Universitatea Politehnica Bucuresti - Facultatea de Automatica si Calculatoare
9
Exemplu
<script language=javascript>
<!--
var name = "ciprian.dobre"
var host1 = "cs."
var host2 = "pub.ro"
document.write("PWeb: send emails to ")
document.write("<a href=mai" + "lto:" + name +
"&#64;" + host1 + host2 + "?subject=PWeb:"
+ ">" + "Ciprian Dobre" + "</a>")
//-->
</script>
<noscript>
ciprian.dobre at cs
</noscript>
Curs Programare Web, anul 4 C5 – Curs 5
Universitatea Politehnica Bucuresti - Facultatea de Automatica si Calculatoare
Rezultat
Curs Programare Web, anul 4 C5 – Curs 5 10
Universitatea Politehnica Bucuresti - Facultatea de Automatica si Calculatoare
Curs Programare Web, anul 4 C5 – Curs 5 11
Demo 1
Universitatea Politehnica Bucuresti - Facultatea de Automatica si Calculatoare
12
Unde apare codul JavaScript
• Codul JavaScript poate apare fie în secțiunea
<head>, fie în secţiunea <body> a unui document
HTML
– Funcțiile JavaScript ar trebui să fie definite în
secțiunea <head>
• Acest lucru ne asigură că funcțiile sunt încărcate
chiar înainte ca ele să fie cerute
– Codul JavaScript din <body> este executat atunci
când este încărcată pagina
Curs Programare Web, anul 4 C5 – Curs 5
Universitatea Politehnica Bucuresti - Facultatea de Automatica si Calculatoare
Unde apare codul JavaScript
• Funcțiile JavaScript pot fi plasate și în fișiere
separate având în general extensia .js
<script src="myJavaScriptFile.js"></script>
– Codul acesta se plasează în secțiunea <head>
– Un fișier extern .js permite folosirea aceluiași cod
JavaScript în mai multe pagini HTML
– Fișierul extern .js nu poate conţine la rândul său alt
tag <script>
• Codul JavaScript poate fi plasat și împreună cu
un obiect al unui formular, ca de exemplu un
buton
– Codul JavaScript va fi executat atunci când respectivul
obiect este folosit
Curs Programare Web, anul 4 C5 – Curs 5 13
Universitatea Politehnica Bucuresti - Facultatea de Automatica si Calculatoare
14
Tipuri de date primitive
• JavaScript are trei tipuri “primitive”: number, string și
boolean, și două valori 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 puteți fi siguri, e mai indicat să evitați cu totul folosirea
valorilor in octal!
• Valorile String pot fi delimitate prin caractere apostrof sau
ghilimele
– String-urile pot conține \n (newline), ###BOT_TEXT###quot; (double quote), etc.
• Valorile boolean sunt fie true, fie false
– 0, "0", stringul gol, undefined, null și NaN sunt false, restul
valorilor sunt true
Curs Programare Web, anul 4 C5 – Curs 5
Universitatea Politehnica Bucuresti - Facultatea de Automatica si Calculatoare
15
Variabile
• Variabilele pot fi declarate folosind var:
var pi = 3.1416, x, y, name = "Dr. Dave" ;
– Numele de variabile trebuie sa înceapă cu o litera sau cu underscore
– Numele de variabile sunt case-sensitive
– Variabilele nu au tip (ele pot conține valori de orice tip)
• Există doar două scopuri ale variabilelor: local și global
– Variabilele declarate într-o funcție sunt locale respectivei funcții
(accesibile numai din interiorul respectivei funcții)
– Variabilele declarate în afara unei funcții sunt globale (accesibile de
oriunde din pagină)
• Variabilele pot fi declarate implicit prin simpla adăugare a
unei valori unor variabile
– Variabilele declarate implicit sunt întotdeauna globale
Curs Programare Web, anul 4 C5 – Curs 5
Universitatea Politehnica Bucuresti - Facultatea de Automatica si Calculatoare
16
Operatori (1)
• Majoritatea sintaxei JavaScript este împrumutată din C (și
seamănă cu cea din Java):
• Operatori aritmetici (toate numerele sunt în virgulă
mobilă):
+ - * / % ++ --
• Operatori de comparație:
< <= == != >= >
• Operatori logici:
&& || !
• Operatori la nivel de biți:
& | ^ ~ << >> >>>
• Operatori de asignare:
+= -= *= /= %= <<= >>= >>>= &= ^= |=
Curs Programare Web, anul 4 C5 – Curs 5
Universitatea Politehnica Bucuresti - Facultatea de Automatica si Calculatoare
17
Operatori (2)
• Concatenare de string-uri:
+
• Operatorul condițiomal:
condition ? value_if_true : value_if_false
• Teste de egalitate:
– == și != încearcă convertirea operatorilor la același
tip înaintea efectuării testului
– Nu ca în C sau Java: === și !== consideră operanzii
inegali dacă aceștia sunt de tipuri diferite
• Operatori suplimentari:
new typeof void delete
Curs Programare Web, anul 4 C5 – Curs 5
Universitatea Politehnica Bucuresti - Facultatea de Automatica si Calculatoare
18
Comentarii
• Comentariile sunt similare C sau Java:
– Între // și sfârșitul liniei
– Între /* și */
• Comentariile de tip javadoc din Java, /** ...
*/, sunt tratate similar comentariilor de tip
/* ... */; ele nu au nici o semnificație
specială în JavaScript
Curs Programare Web, anul 4 C5 – Curs 5
Universitatea Politehnica Bucuresti - Facultatea de Automatica si Calculatoare
• Majoritatea sintaxelor de instrucțiuni JavaScript sunt
împrumutate din C
– Atribuirea: greeting = "Hello, " + name;
– Instrucțiunea compusă:
{ statement; ...; statement }
– Instrucțiunea If:
if (condition) statement;
if (condition) statement; else statement;
– Instrucțiuni de iterare:
while (condition) statement;
do statement while (condition);
for (initialization; condition; increment) statement;
19
Instrucțiuni (1)
Curs Programare Web, anul 4 C5 – Curs 5
Universitatea Politehnica Bucuresti - Facultatea de Automatica si Calculatoare
20
Instrucțiuni (2)
• Instrucțiunea switch:
switch (expression) {
case label :
statement;
break;
case label :
statement;
break;
...
default : statement;
}
• Alte instrucțiuni familiare:
– break;
– continue;
– Instrucțiunea vidă, precum;; sau { }
Curs Programare Web, anul 4 C5 – Curs 5
Universitatea Politehnica Bucuresti - Facultatea de Automatica si Calculatoare
21
JavaScript vs. Java
• Deja realizați că știți destul de multe despre
JavaScript
– Până acum am văzut aspecte ce sunt similare precum în
Java
• JavaScript are unele construcții ce seamănă cu
construcțiile corespondente din Java:
– JavaScript folosește Obiecte și tipuri de date primitive
– JavaScript folosește evenimente și gestiunea
evenimentelor (event handlers)
– Gestiunea excepțiilor în JavaScript este aproape similară
cu cea din Java
Curs Programare Web, anul 4 C5 – Curs 5
Universitatea Politehnica Bucuresti - Facultatea de Automatica si Calculatoare
Totuși JavaScript nu este Java
• Totuși JavaScript are unele construcții diferite de
cele din Java:
– Numele de variabile nu au tip: tipul unei variabile
depinde de valoarea curentă pe care respectiva
variabila o deține
– Obiectele și array-urile sunt definite într-o manieră
diferită de cea din Java
– JavaScript are instrucțiunea with și o nouă formă a
instrucțiunii for
Curs Programare Web, anul 4 C5 – Curs 5 22
Universitatea Politehnica Bucuresti - Facultatea de Automatica si Calculatoare
• Gestiunea exceptiilor in JavaScript este aproape la
fel ca cea din Java:
throw expresie creează și aruncă o excepție
– expresie este valoarea excepției și poate fi de orice tip
(adesea este un string)
try {
instructiuni
} catch (e) { // Atenţie: nu avem declaraţie de tip pentru e
instructiuni pentru tratarea exceptiei
} finally { // opţional, similar Java
codul executat intotdeauna
}
– Folosind această abordare există o singură clauză catch
23
Gestiunea excepțiilor (1)
Curs Programare Web, anul 4 C5 – Curs 5
Universitatea Politehnica Bucuresti - Facultatea de Automatica si Calculatoare
24
Gestiunea excepțiilor (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
Curs Programare Web, anul 4 C5 – Curs 5
Universitatea Politehnica Bucuresti - Facultatea de Automatica si Calculatoare
25
Obiecte
• În Java clasele descriu obiecte și toate instantele unei clase
au exact aceleași câmpuri și metode
– Obiectele JavaScript sunt mai flexibile decât obiectele Java
• JavaScript lucrează cu “object literals”, scriși conform
următoarei sintaxe:
– { name1 : value1 , ... , nameN : valueN }
• Exemplu:
– car = {myCar: "Saturn", 7: "Mazda",
getCar: CarTypes("Honda"), special: Sales}
• Câmpurile sunt myCar, getCar, 7 (este chiar un nume legal de
câmp) și special
• "Saturn" și "Mazda" sunt câmpuri de tip String
• CarTypes este un apel de funcţie
• Sales este o variabilă ce a fost definită anterior
– Exemplu de folosire: document.write("I own a " + car.myCar);
Curs Programare Web, anul 4 C5 – Curs 5
Universitatea Politehnica Bucuresti - Facultatea de Automatica si Calculatoare
26
Trei moduri de a crea un obiect
1. Puteți folosi un object literal:
var course = { name: “PWeb", teacher: “Ciprian Dobre" }
2. Puteți folosi new pentru a crea un obiect “blank”
căruia să îi adăugați câmpuri ulterior:
var course = new Object();
course.name = “PWeb";
course.teacher = “Ciprian Dobre";
3. Puteți scrie și folosi un constructor:
function Course(n, t) { // functia ar trebui definita in sectiunea <head>
this.name = n; // cuvantul cheie "this" este necesar, nu optional
this.teacher = t;
}
var course = new Course(“PWeb", “Ciprian Dobre");
Curs Programare Web, anul 4 C5 – Curs 5
Universitatea Politehnica Bucuresti - Facultatea de Automatica si Calculatoare
27
Array
• JavaScript permite definirea de tablouri, declarate
folosind paranteze drepte și virgule
– Exemplu: color = ["red", "yellow", "green", "blue"];
– Variabilele tablou sunt inițializate începând de la poziția 0
 color[0] are valoarea "red"
• Dacă folosim două virgule succesive, variabila
tablou va avea un element “empty” în respectiva
poziție
– Exemplu: color = ["red", , , "green", "blue"];
• color are 5 elemente
– Totuși, o virgulă la final este ignorată
• Exemplu: color = ["red", , , "green", "blue”,]; are tot 5 elemente
Curs Programare Web, anul 4 C5 – Curs 5
Universitatea Politehnica Bucuresti - Facultatea de Automatica si Calculatoare
28
Patru moduri de a crea un array
1. Puteți folosi un array literal:
var colors = ["red", "green", "blue"];
2. Puteți folosi new Array() pentru a crea un tablou gol:
var colors = new Array();
– Puteți adăuga elemente ulterior în acel tablou:
colors[0] = "red"; colors[2] = "blue"; colors[1]="green";
3. Puteți folosi new Array(n) cu un singur argument numeric
pentru a crea un tablou având respectiva dimensiune
var colors = new Array(3);
4. Puteți folosi new Array(…) cu două sau mai multe
argumente pentru a crea un tablou conţinând respectivele
valori:
var colors = new Array("red","green", "blue");
Curs Programare Web, anul 4 C5 – Curs 5
var myArray = [];
var myArray = [];
Universitatea Politehnica Bucuresti - Facultatea de Automatica si Calculatoare
Inițializare
• Crearea unui tablou dimensionat deja
pentru 10 elemente:
var badArray = new Array(10);
vs.
• Crearea unui tablou având un singur
element, cu valoarea 10:
var goodArray= [10];
Curs Programare Web, anul 4 C5 – Curs 5 29
Universitatea Politehnica Bucuresti - Facultatea de Automatica si Calculatoare
<script language=javascript>
<!--
var myArray = [ 'January', 'February', 'March' ];
document.writeln('0> '+myArray[0]+'<br>');
document.writeln('1> '+myArray[1]+'<br>');
document.writeln('2> '+myArray[2]+'<br>');
//-->
</script>
<noscript>
problema cu JavaScript
</noscript>
Exemplu
Curs Programare Web, anul 4 C5 – Curs 5 30
Universitatea Politehnica Bucuresti - Facultatea de Automatica si Calculatoare
Un alt exemplu
var myArray = [];
myArray[0] = 'January';
myArray[1] = 'February';
myArray[5] = 'March';
document.writeln('0> '+myArray[0]+'<br>');
document.writeln('1> '+myArray[1]+'<br>');
document.writeln('2> '+myArray[2]+'<br>');
document.writeln('3> '+myArray[3]+'<br>');
document.writeln('4> '+myArray[4]+'<br>');
document.writeln('5> '+myArray[5]+'<br>');
Curs Programare Web, anul 4 C5 – Curs 5 31
Universitatea Politehnica Bucuresti - Facultatea de Automatica si Calculatoare
32
Lungimea unui tablou
• Dacă myArray este un tablou, lungimea acestuia este
obținute folosind myArray.length
• Dimensiunea unui tablou poate fi modificată prin
adăugarea de elemente peste lungimea curentă a
acestuia
– Exemplu: var myArray = new Array(5); myArray[10] = 3;
• Tablourile sunt structuri de date risipite, spațiul este alocat
doar pentru elementele cărora le-a fost cu asignată o
valoare
– Exemplu: myArray[50000] = 3; este perfect OK
– Indicii trebuie să fie între 0 și 2
32
-1
• Similar ca în C și Java, nu există tablouri bidimensionale;
dar există tablou de tablou: myArray[5][3]
Curs Programare Web, anul 4 C5 – Curs 5
Universitatea Politehnica Bucuresti - Facultatea de Automatica si Calculatoare
33
Tablouri vs. obiecte
• Variabilele de tip array sunt obiecte
car = { myCar: "Saturn", 7: "Mazda" }
– car[7] este echivalent cu car.7
– car.myCar este același cu car["myCar"]
• Dacă cunoașteți numele unei proprietăți puteți
folosi notația cu punct: car.myCar
• Daca nu cunoașteți numele proprietății dar îl aveți
într-o variabilă (sau îl puteți calcula), folosiți
notația de tip array: car["my" + "Car"]
Curs Programare Web, anul 4 C5 – Curs 5
Universitatea Politehnica Bucuresti - Facultatea de Automatica si Calculatoare
Stocarea datelor într-un tablou
• Un tablou poate stoca orice: boolean, numere, string-uri,
funcții, obiecte, alte tablouri, chiar expresii regulate:
var myArray = [ 3, 'hello!', function() { return 5 }, { 'color':'blue',
'budget':25 }, /[e11]/i ];
document.writeln('0> '+myArray[0]+'<br>');
document.writeln('1> '+myArray[1]+'<br>');
document.writeln('2> '+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>');
Curs Programare Web, anul 4 C5 – Curs 5 34
Universitatea Politehnica Bucuresti - Facultatea de Automatica si Calculatoare
35
Functii aplicabile tablourilor
• Dacă myArray este un tablou,
– myArray.sort() sortează tablou (alfabetic)
– myArray.sort(function(a, b) { return a - b; }) sortează
numeric tabloul
– myArray.reverse() inversează elementele tabloului
– myArray.push(…) adaugă orice număr de elemente la
finalul tabloului și crește dimensiunea acestuia
– myArray.pop() înlătură și întoarce ultimul element al
tabloului și decrementează dimensiunea acestuia
– myArray.toString() întoarce un string conținând
elementele tabloului, separate prin virgulă
Curs Programare Web, anul 4 C5 – Curs 5
Universitatea Politehnica Bucuresti - Facultatea de Automatica si Calculatoare
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
document.writeln("1> "+myarray+"<br>");
myarray.reverse();
// elementele in ordine inversa
document.writeln("2> "+myarray+"<br>");
Curs Programare Web, anul 4 C5 – Curs 5 36
Universitatea Politehnica Bucuresti - Facultatea de Automatica si Calculatoare
• Similară instrucțiunii iterative din Java for (type var :
collection)
• Puteți itera printre proprietățile 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
– Proprietățile sunt accesate într-o ordine nedefinită
– Dacă adăugați sau ștergeți proprietăți obiectului din buclă este
nedefinit dacă instrucțiunea iterativă va traversa și proprietățile nou
definite sau nu
– Tablourile sunt obiecte; aplicată unui tablou, for…in va vizita
“proprietățile” 0, 1, 2, …
– Observați că course["teacher"] este echivalent cu course.teacher
• Trebuie să folosiți paranteze drepte dacă numele proprietății este
într-o variabilă
37
Instrucțiunea for … in
Curs Programare Web, anul 4 C5 – Curs 5
Universitatea Politehnica Bucuresti - Facultatea de Automatica si Calculatoare
38
Instrucțiunea with
with (object) statement
– Folosește object ca prefix implicit al variabilelor din
statement
– Dacă câmpurile accesate nu există prefixul nu va fi
folosit
• De exemplu, următoarele sunt echivalente:
– with (document.myForm) {
result.value = compute(myInput.value) ;
}
– document.myForm.result.value =
compute(document.myForm.myInput.value);
• Instrucțiunea with este utilă atunci când aveţi de
făcut mai multe manipulări asupra unui același
obiect
– Instrucțiunea with poate conduce însă la confuzii și din
acest motiv trebuie folosită cu atenție
Curs Programare Web, anul 4 C5 – Curs 5
Universitatea Politehnica Bucuresti - Facultatea de Automatica si Calculatoare
39
Funcții
• Funcțiile trebuie definite în secțiunea <head> a
paginii HTML pentru a fi siguri că ele sunt încărcate
primele
• Sintaxa pentru definirea unei funcții este:
function name(arg1, …, argN) { statements }
– Funcția poate conține instrucțiuni de tipul return value;
– Orice variabilă declarată în interiorul unei funcții este
locală respectivei funcții
• Sintaxa pentru apelarea unei funcții este
name(arg1, …, argN)
• Parametrii simpli sunt transmiși prin valoare,
obiectele sunt transmise prin referință
Curs Programare Web, anul 4 C5 – Curs 5
Universitatea Politehnica Bucuresti - Facultatea de Automatica si Calculatoare
• O expresie regulată poate fi scrisă în oricare din
următoarele 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 câteva elemente mai puțin folosite lipsesc)
• string.match(regexp) are rolul de a căuta în string apariții
ale regexp
– Întoarce null dacă nu este găsit nimic
– Dacă regexp are setat flag-ul g (global search), match întoarce un
tablou cu toate substringurile ce se potrivesc expresiei
– Dacă g nu este setat, match întoarce un tablou al cărui element de
pe poziția 0 reprezintă textul ce se potrivește expresiei, iar restul
elementelor sunt subexpresiile paranterizate.
40
Expresii regulate
Curs Programare Web, anul 4 C5 – Curs 5
Universitatea Politehnica Bucuresti - Facultatea de Automatica si Calculatoare
Exemplu
<head>
<script language=javascript>
function checkpostal(){
var re5digit=/^\d{5}$/ // expresie regulata ce defineste un numar din 5 cifre
if (document.myform.myinput.value.search(re5digit)==-1) // daca nu se potriveste
alert("Please enter a valid 5 digit number inside form")
else
alert("Number valid")
}
</script>
</head>
<body>
<form name="myform">
<input type="text" name="myinput" size=15>
<input type="button" onClick="checkpostal()" value="check">
</form>
</body>
Curs Programare Web, anul 4 C5 – Curs 5 41
Universitatea Politehnica Bucuresti - Facultatea de Automatica si Calculatoare
Rezultat
Curs Programare Web, anul 4 C5 – Curs 5 42
Universitatea Politehnica Bucuresti - Facultatea de Automatica si Calculatoare
Curs Programare Web, anul 4 C5 – Curs 5 43
Demo 2
Universitatea Politehnica Bucuresti - Facultatea de Automatica si Calculatoare
44
JavaScript
• JavaScript este un limbaj complex
– Au fost prezentate doar elemente de la suprafața
acestuia
• JavaScript nu este total independent de platformă
– Trebuie să vă așteptați ca pe diverse browsere codul să
se comporte în mod diferit
– Scrierea și testarea programelor necesită un pic de efort
din partea echipei de dezvoltare
• Browserele în general nu raportează erori
– Nu vă așteptați să primiți multe mesaje ajutătoare care
să vă ajute în munca de depanare a codului JavaScript
Curs Programare Web, anul 4 C5 – Curs 5
Universitatea Politehnica Bucuresti - Facultatea de Automatica si Calculatoare
45
Quiz
• Scrieți codul corespunzător unei pagini
HTML în care să aveți un obiect Car, un
constructor declarat în <head> și care să
afișeze valoarea curentă a câmpului type în
document.
Curs Programare Web, anul 4 C5 – Curs 5
Universitatea Politehnica Bucuresti - Facultatea de Automatica si Calculatoare
Soluție…
<head>
<script language=javascript>
function obiectCar() {
this.type = “Dacia”
}
</script>
</head>
<body>
<script language=javascript>
car = new obiectCar();
document.writeln(car.type);
</script>
</body>
Curs Programare Web, anul 4 C5 – Curs 5 46
Universitatea Politehnica Bucuresti - Facultatea de Automatica si Calculatoare
47
JavaScript și HTML
Gestiunea Simplă a Evenimentelor
Curs Programare Web, anul 4 C5 – Curs 5
Universitatea Politehnica Bucuresti - Facultatea de Automatica si Calculatoare
48
JavaScript și DOM
• JavaScript se bazează pe un Document Object
Model (DOM) ce descrie structura paginii web
– Nu reprezintă același lucru ca XML DOM
• Puteți face multe lucruri înțelegând conceptul de
DOM
– Puteți folosi DOM pentru a accesa elementele paginii
Web
– Puteți capta evenimente fără să fiți deloc familiarizați cu
conceptul DOM dar ….
– Aveți nevoie de DOM pentru a face eventuale modificări
în pagina Web
Curs Programare Web, anul 4 C5 – Curs 5
Universitatea Politehnica Bucuresti - Facultatea de Automatica si Calculatoare
49
Evenimente
• Unele (dar nu toate) elementele paginii web
răspund la interactivitatea din partea utilizatorului
(keystrokes, mouse clicks) prin crearea de
evenimente
– Diverse tipuri de elemente produc evenimente diferite
• Browserele nu seamănă nici când vine vorba de tipurile de
evenimente pe care le produc
– Ne vom concentra pe evenimente ce țin de elementele
specifice unor formulare HTML
• Puteți 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
• Majoritatea handlerelor apelează o funcție în care se produce
toată funcționalitatea specifică evenimentului
Curs Programare Web, anul 4 C5 – Curs 5
Universitatea Politehnica Bucuresti - Facultatea de Automatica si Calculatoare
50
Un handler de evenimente simplu
• <form method="post" action="">
<input type="button"
name="myButton"
value="Click me"
onclick="alert('You clicked the button!');">
</form>
– Butonul este încorporat într-un formular
– Tag-ul este input, având atributul type="button"
– Atributul name poate fi folosit din codul JavaScript
– onclick este numele evenimentului ce se vrea a fi
gestionat
• Valoarea elementului onclick este codul JavaScript care va fi
executat
• alert are rolul de a declanșa o fereastră de pop-up de tip
alertă cu un mesaj furnizat ca argument
Curs Programare Web, anul 4 C5 – Curs 5
Universitatea Politehnica Bucuresti - Facultatea de Automatica si Calculatoare
51
Convenții de scriere
• JavaScript este case sensitive
• HTML nu este case sensitive
• onclick="alert('You clicked the button!');"
– Părțile subliniate țin de codul HTML
– Stringul este cod JavaScript
– Veți vedea adesea metoda onclick scrisă și sub forma
onClick
• Convențiile de nume Java sunt mai ușor de citit
• Acest lucru este permis în HTML, dar dacă este folosit în cod
JavaScript conduce automat la eroare
• Observație: Deoarece avem un string în interiorul
altui string avem nevoie de atât varianta cu
ghilimele,cât și de cea cu apostroafe pentru
reprezentarea stringurilor
Curs Programare Web, anul 4 C5 – Curs 5
Universitatea Politehnica Bucuresti - Facultatea de Automatica si Calculatoare
52
Evenimente comune
• Majoritatea elementelor HTML produc următoarele
evenimente:
– onClick – pe elementul respectiv se execută un click de mouse
– onDblClick – pe elementul respectiv se execută dublu-click într-o
succesiune rapidă
– onMouseDown – butonul de mouse este apăsat când cursorul era
deasupra elementului
– onMouseOver – cursorul mouse-ului este mutat deasupra elementului
– onMouseOut – cursorul mouse-ului este scos în afara ariei de
acoperire a elementului
– onMouseUp – butonul mouse-ului este eliberat când cursorul era încă
deasupra elementului
– onMouseMove –mouse-ul este mutat
• În JavaScript, aceste funcții trebuie scrise cu litere mici
Curs Programare Web, anul 4 C5 – Curs 5
Universitatea Politehnica Bucuresti - Facultatea de Automatica si Calculatoare
53
Exemplu: un rollover simplu
• Următorul cod va face textul Hello
red atunci când cursorul mouse-ului trece
deasupra lui și
blue atunci când cursorul mouse-ului iese din
suprafața elementului
<h1 onMouseOver="style.color='red';"
onMouseOut="style.color='blue';">Hello </h1>
• Un rollover aplicabil unei imagini:
<img src="../Images/duke.gif"
width="55" height="68"
onMouseOver="src='../Images/duke_wave.gif';"
onMouseOut="src='../Images/duke.gif';">
Curs Programare Web, anul 4 C5 – Curs 5
Universitatea Politehnica Bucuresti - Facultatea de Automatica si Calculatoare
Curs Programare Web, anul 4 C5 – Curs 5 54
Demo 3
Universitatea Politehnica Bucuresti - Facultatea de Automatica si Calculatoare
55
Evenimente și gestionarea de evenimente (1)
• Următoarele tabele sunt preluate de la:
http://developer.netscape.com/docs/manuals/js/client
/jsguide/index.htm
Eveniment Se aplică Apare atunci când Handler
Load Corpul documentului Utilizatorul încarcă pagina
în browser
onLoad
Unload Corpul documentului Utilizatorul părăsește
pagina
onUnload
Error Imagini, ferestre Eroare la încărcarea unei
imagini sau a unei ferestre
onError
Abort Imagini Utilizatorul renunță la
încărcarea unui imagini
onAbort
Curs Programare Web, anul 4 C5 – Curs 5
Universitatea Politehnica Bucuresti - Facultatea de Automatica si Calculatoare
56
Evenimente și gestionarea de evenimente (2)
Eveniment Se aplică Apare atunci
când
Handler
KeyDown Documente, imagini,
legături, zone text
Utilizatorul apasă
o tastă
onKeyDown
KeyUp Documente, imagini,
legături, zone text
Utilizatorul
eliberează o tastă
onKeyUp
KeyPress Documente, imagini,
legături, zone text
Utilizatorul apasă
o tastă
onKeyPress
Change Cămpuri text, zone text,
liste de selecție
Utilizatorul
modifică valoarea
unui element
onChange
Curs Programare Web, anul 4 C5 – Curs 5
Universitatea Politehnica Bucuresti - Facultatea de Automatica si Calculatoare
57
Evenimente și gestionarea de evenimente (3)
Eveniment Se aplică Apare atunci
când
Handler
MouseDown Documente, butoane,
legături
Utilizatorul
termină de
apăsat un buton
de mouse
onMouseDown
MouseUp Documente, butoane,
legături
Utilizatorul
eliberează un
buton de mouse
onMouseUp
Click Butoane, butoane
radio, checkbox-uri,
butoane de submit,
butoane de reset,
legături
Utilizatorul face
click de mouse
pe un element
din formular sau
o legătură
onClick
Curs Programare Web, anul 4 C5 – Curs 5
Universitatea Politehnica Bucuresti - Facultatea de Automatica si Calculatoare
58
Evenimente si gestionare de evenimente (4)
Eveniment Se aplică Apare atunci când Handler
MouseOver Legături Utilizatorul mută
cursorul deasupra
unei legături
onMouseOver
MouseOut Zone, legături Utilizatorul mută
cursorul în afara
zonei unei imagini
sau legături
onMouseOut
Select Câmpuri text, zone
text
Utilizatorul
selectează zona de
input a
elementului din
formular
onSelect
Curs Programare Web, anul 4 C5 – Curs 5
Universitatea Politehnica Bucuresti - Facultatea de Automatica si Calculatoare
59
Evenimente si gestionare de evenimente (5)
Eveniment Se aplică Apare atunci când Handler
Move Ferestre Utilizatorul sau script-
ul mută o fereastră
onMove
Resize Ferestre Utilizatorul sau script-
ul redimensionează o
fereastră
onResize
DragDrop Ferestre Utilizatorul plasează
un obiect în fereastra
din browser
onDragDrop
Curs Programare Web, anul 4 C5 – Curs 5
Universitatea Politehnica Bucuresti - Facultatea de Automatica si Calculatoare
60
Evenimente si gestionare de evenimente (6)
Eveniment Se aplică Apare atunci
când
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
Curs Programare Web, anul 4 C5 – Curs 5
Universitatea Politehnica Bucuresti - Facultatea de Automatica si Calculatoare
61
Înapoi la DOM
• Puteți atașa handlere de evenimente elementelor HTML
având puține cunoștințe legate de DOM
• Totuși, pentru a schimba ceea ce este afișat în cadrul
paginii aveți nevoie să cunoașteți modul în care puteți
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.”
– Toate celelalte elemente pot fi accesate mergând în
jos pornind de la acest element de nivel cel mai înalt
Curs Programare Web, anul 4 C5 – Curs 5
Universitatea Politehnica Bucuresti - Facultatea de Automatica si Calculatoare
62
Ierarhia
DOM
Sursa:
http://sislands.com/coin70/week1/dom.htm
Curs Programare Web, anul 4 C5 – Curs 5
Universitatea Politehnica Bucuresti - Facultatea de Automatica si Calculatoare
• window
– Fereastra curenta (nu se folosește direct prea des).
• self
– Același lucru ca și window.
• parent
– Dacă ne referim la un frame, fereastra imediat superioară în care
acesta este inclus.
• top
– Dacă ne referim la un frame, fereastra cea mai superioară dpdv
ierarhic în care acesta este inclus.
• frames[ ]
– Un tablou de frame-uri (dacă există) din cadrul ferestrei curente.
Frame-urile sunt și ele la rândul lor ferestre.
• length
– Numărul de frame-uri conținute în fereastra curentă.
63
Câmpurile lui window (1)
Curs Programare Web, anul 4 C5 – Curs 5
Universitatea Politehnica Bucuresti - Facultatea de Automatica si Calculatoare
64
Câmpurile lui window (2)
• document
– Documentul HTML ce este curent afișat în fereastră.
• location
– URL-ul documentului ce este curent afișat în fereastră.
– Daca setați această proprietate la un nou URL, respectivul URL va fi
încărcat în fereastra curentă.
– Apelând location.reload() veți face refresh la fereastră.
• navigator
– O referință la obiectul Navigator (browser). Unele proprietăți ale
obiectului Navigator sunt:
• appName – numele browserului, precum “Mozilla Firefox"
• platform – numele platformei pe care rulează browserul, precum "Win32"
• status
– Un string ce poate fi citit/scris și care este afișat în zona de status a
ferestrei browserului. Poate fi modificat cu o simplă instrucțiune de
atribuire.
Curs Programare Web, anul 4 C5 – Curs 5
Universitatea Politehnica Bucuresti - Facultatea de Automatica si Calculatoare
• alert(string)
– Afișează un dialog ce conține string-ul primit ca
argument și un buton OK.
• confirm(string)
– Afișează o fereastră de dialog conținând string-ul primit
ca argument împreună cu două butoane Cancel și OK.
– Întoarce true dacă a fost apăsat butonul OK și false
dacă a fost apăsat butonul Cancel.
• prompt(string)
– Afișează un dialog de confirmare conținand string-ul
primit ca argument, un câmp de tip text și două
butoane Cancel și OK.
– Întoarce string-ul introdus de către utilizator daca a fost
apăsat OK și null dacă a fost apăsat butonul Cancel.
65
Metodele lui window (1)
Curs Programare Web, anul 4 C5 – Curs 5
Universitatea Politehnica Bucuresti - Facultatea de Automatica si Calculatoare
66
Metodele lui window (2)
• open(URL)
– Deschide o noua fereastră conținând
documentul specificat de la adresa URL dată
ca argument.
• close()
– Închide o fereastră.
Curs Programare Web, anul 4 C5 – Curs 5
Universitatea Politehnica Bucuresti - Facultatea de Automatica si Calculatoare
• Trebuie să prefixați aceste câmpuri cu
document.
• anchors[ ]
– Un tablou de obiecte Anchor (obiecte
reprezentând tag-uri de forma <a name=...>)
• applets[ ]
– Un tablou de obiecte Applet
• Proprietățile sunt câmpurile publice definite pentru
respectivele appleturi
• Metodele sunt metodele publice ale appleturilor
67
Câmpurile lui document (1)
Curs Programare Web, anul 4 C5 – Curs 5
Universitatea Politehnica Bucuresti - Facultatea de Automatica si Calculatoare
• forms[ ]
– Un tablou de elemente de tip Form
• Dacă documentul conține un singur formular, acesta
este întors in forms[0]
• images[ ]
– Un tablou de obiecte Image
• Pentru schimbarea unei imagini asignați un nou
URL proprietății src
• links[ ]
– Un tablou de obiecte Link
• Un link are câteva proprietăți, incluzând href, ce
conține URL-ul complet al legăturii
68
Campurile lui document (2)
Curs Programare Web, anul 4 C5 – Curs 5
Universitatea Politehnica Bucuresti - Facultatea de Automatica si Calculatoare
69
Campurile lui document (3)
• bgColor
– Culoarea de fundal a documentului
• Poate fi schimbata oricând
• title
– Un string read-only ce conține titlul
documentului
• URL
– Un string read-only ce conține adresa URL de
unde a fost încărcat documentul
Curs Programare Web, anul 4 C5 – Curs 5
Universitatea Politehnica Bucuresti - Facultatea de Automatica si Calculatoare
70
Câmpurile obiectului form
• elements[ ]
– Un tablou conținând elementele formularului
Curs Programare Web, anul 4 C5 – Curs 5
Universitatea Politehnica Bucuresti - Facultatea de Automatica si Calculatoare
Exemplu DOM
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>Acesta este titlul documentului</title>
</head>
<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>
Curs Programare Web, anul 4 C5 – Curs 5 71
<script type="text/javascript">
titlu = document.getElementById('titlu_doc');
</script>
<script type="text/javascript">
// localizam imaginea
imagine = document.getElementsByTagName('img')[0];
// modificam atributul "src"
imagine.src = 'ceva.gif';
// localizam paragraful
paragraf = document.getElementsByTagName('p')[1];
// modificam atributul CSS font-style
paragraf.style.fontStyle = 'italic';
</script>
Universitatea Politehnica Bucuresti - Facultatea de Automatica si Calculatoare
72
Exemple JavaScript
Curs Programare Web, anul 4 C5 – Curs 5
Universitatea Politehnica Bucuresti - Facultatea de Automatica si Calculatoare
73
Obținerea datei
• <script type="text/javascript">
var d = new Date()
document.write(d.getDate() + "/")
document.write((d.getMonth() + 1) + "/")
document.write(d.getFullYear())
</script>
• Rezultatul:
– 25/03/2010
Curs Programare Web, anul 4 C5 – Curs 5
Universitatea Politehnica Bucuresti - Facultatea de Automatica si Calculatoare
74
Obținerea și formatarea datei
• <script type="text/javascript">
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", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec")
document.write(weekday[d.getDay()] + ", ")
document.write(monthname[d.getMonth()] + " " +
d.getDate() + ", ")
document.write(d.getFullYear())
</script>
• Thursday, Mar 25, 2010
Curs Programare Web, anul 4 C5 – Curs 5
Universitatea Politehnica Bucuresti - Facultatea de Automatica si Calculatoare
75
Obținerea unui număr aleator
• Codul generează un număr aleator în
virgulă mobilă cuprins între 0 și 1:
• <script type="text/javascript">
document.write(Math.random())
</script>
• Rezultatul:
0.728762788388911
Curs Programare Web, anul 4 C5 – Curs 5
Universitatea Politehnica Bucuresti - Facultatea de Automatica si Calculatoare
76
Obținerea unei valori întregi
aleatoare
• Codul generează un număr aleator întreg cuprins
între 0 și 10:
• <script type="text/javascript">
var max = 10;
number=Math.random()*max + 1;
document.write(Math.floor(number));
</script>
• Rezultatul:
5
Curs Programare Web, anul 4 C5 – Curs 5
Universitatea Politehnica Bucuresti - Facultatea de Automatica si Calculatoare
77
Afișarea unui mesaj de tip alertă
• Codul afișează un mesaj de alertă atunci când un
buton este apăsat:
• <form>
<input type="button" name="Submit"
value="Alert!“
onclick="alert(‘Something happened!');">
</form>
Curs Programare Web, anul 4 C5 – Curs 5
Universitatea Politehnica Bucuresti - Facultatea de Automatica si Calculatoare
78
Depanare
• Următorul cod arată ce evenimente au fost
declanșate atunci când utilizatorul a întreprins
diverse acțiuni
• în secțiunea <head> a paginii HTML definim:
– <script>
<!--
function tell(a, b) {
document.forms[0].result.value+="\n"+a+": " + b;
}
//-->
</script>
• Pentru fiecare element al formularului adăugăm
un handler pentru oricare eveniment (plauzibil)
Curs Programare Web, anul 4 C5 – Curs 5
Universitatea Politehnica Bucuresti - Facultatea de Automatica si Calculatoare
79
Depanarea (pentru un Buton)
<input type="button" name="plainButton" value="Plain
Button"
onMouseDown="tell(this.name, 'onmousedown');"
onMouseUp="tell(this.name, 'onmouseup');"
onClick="tell(this.name,'onclick');"
onDblClick="tell(this.name,'ondblclick');"
onFocus="tell(this.name, 'onfocus');"
onBlur="tell(this.name, 'onblur');"
onMouseOver="tell(this.name, 'onmouseover');"
onMouseOut="tell(this.name, 'onmouseout');"
onChange="tell(this.name, 'onchange');"
onKeyPress="tell(this.name, 'onkeypress');"
onKeyDown="tell(this.name, 'onkeydown');"
onKeyUp="tell(this.name, 'onkeyup');"
onSelect="tell(this.name, 'onselect');"
onReset="tell(this.name, 'onreset');"
>
Curs Programare Web, anul 4 C5 – Curs 5
Universitatea Politehnica Bucuresti - Facultatea de Automatica si Calculatoare
Curs Programare Web, anul 4 C5 – Curs 5 80
Demo 4
Universitatea Politehnica Bucuresti - Facultatea de Automatica si Calculatoare
81
JavaScript – elemente
suplimentare
Curs Programare Web, anul 4 C5 – Curs 5
Universitatea Politehnica Bucuresti - Facultatea de Automatica si Calculatoare
82
Suportul browserului
• JavaScript funcționează pe aproape toate
browserele
• Internet Explorer folosește JScript (referit în
meniuri ca “Active Scripting”), ce reprezintă
dialectul Microsoft-ului de JavaScript ☺
• Browserele mai vechi nu suportă unele construcții
JavaScript
– Vom presupune suportul unui browser modern
• Activarea și dezactivarea JavaScript:
– Dacă nu știți cum să faceți asta din browser, vedeți și
http://www.mistered.us/tips/javascript/browsers.shtml
Curs Programare Web, anul 4 C5 – Curs 5
Universitatea Politehnica Bucuresti - Facultatea de Automatica si Calculatoare
83
Ce NU puteți face
• Pentru protecția vizitatorilor la paginile voastre,
folosind JavaScript nu puteți:
– Executa alte programe
– Să vă conectați la alte computere, exceptând
download-ul altor pagini HTML sau trimiterea de e-mail
– Să determinați ce alte site-uri a vizitat utilizatorul
– Citi sau scrie fișiere locale
• Totuși, JScript în IE permite scripting ASP, modalitatea prin
care viermele foarte distructiv JS.Gigger.A@mm s-a răspândit
de exemplu
• Implicit, Outlook Express permite ca mail-ul primit să ruleze
scripturi
• Pentru a dezactiva scripting-ul în Outlook Express, vedeți
http://support.microsoft.com/support/kb/articles/Q192/8/46.ASP
Curs Programare Web, anul 4 C5 – Curs 5
Universitatea Politehnica Bucuresti - Facultatea de Automatica si Calculatoare
84
Numere
• În JavaScript, toate numerele sunt de tip floating
point
• Numere speciale predefinite:
– Infinity, Number.POSITIVE_INFINITY – rezultatul
împărțirii unui număr pozitiv la zero
– Number.NEGATIVE_INFINITY – rezultatul împărțirii unui
număr negativ la zero
– NaN, Number.NaN (Not a Number) – rezultatul
împărțirii 0/0
• NaN este diferit de orice, chiar și de sine însuși
• Există o funcție globala isNaN()
– Number.MAX_VALUE – cel mai mare număr
reprezentabil
– Number.MIN_VALUE – cel mai mic (apropiat de zero)
număr reprezentabil
Curs Programare Web, anul 4 C5 – Curs 5
Universitatea Politehnica Bucuresti - Facultatea de Automatica si Calculatoare
85
String-uri și caractere
• În JavaScript, string este un tip primitiv
• Stringurile sunt încadrate de ghilimele sau
apostroafe
• Nu există tipul “character”
• Caractere speciale:
###BOT_TEXT### NUL
\b backspace
\f form feed
\n newline
\r carriage return
\t horizontal tab
\v vertical tab

single quote
###BOT_TEXT###quot; double quote
\ backslash
\xDD Unicode hex DD
\xDDDD Unicode hex DDDD
Curs Programare Web, anul 4 C5 – Curs 5
Universitatea Politehnica Bucuresti - Facultatea de Automatica si Calculatoare
86
Câteva metode de lucru cu string-uri
• charAt(n)
– Întoarce al n-lea caracter din string
• concat(string1, ..., stringN)
– Concatenează string-urile primite ca argumente
• indexOf(substring)
– Întoarce poziția primului caracter al substring în string-ul recipient
sau -1 daca nu este găsit
• indexOf(substring, start)
– Întoarce poziția primului caracter al substring în stringul dat ca
argument începând de la poziția start, sau -1 dacă nu este găsit
• lastIndexOf(substring), lastIndexOf(substring, start)
– Similar indexOf, dar caută string-ul începând de la sfârșit spre
început
Curs Programare Web, anul 4 C5 – Curs 5
Universitatea Politehnica Bucuresti - Facultatea de Automatica si Calculatoare
87
Variabile
• Orice variabilă este o proprietate a unui obiect
• Atunci când JavaScript pornește, crează un obiect global –
obiectul window
– Poate fi referit ca window sau ca this
• Pot exista mai mult de un singur obiect “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 referinței de tip tablou
– De exemplu, dacă presupunem:
• <form name="myForm">
<input type="button" name="myButton" ...>
• Atunci în loc de document.forms[0].elements[0]
• Putem folosi și document.myForm.myButton
Curs Programare Web, anul 4 C5 – Curs 5
Universitatea Politehnica Bucuresti - Facultatea de Automatica si Calculatoare
• În Java, metodele sunt asociate cu obiecte
• În JavaScript, o funcție este un obiect
• Funcțiile pot fi recursive:
function factorial(n) {
if (n <= 1) return 1;
else return n * factorial(n - 1);
}
• Funcțiile pot fi imbricate:
– function hypotenuse(a, b) {
function square(x) { return x * x; }
return Math.sqrt(square(a) + square(b));
}
88
Funcții
Curs Programare Web, anul 4 C5 – Curs 5
Universitatea Politehnica Bucuresti - Facultatea de Automatica si Calculatoare
• Deoarece funcțiile sunt obiecte, ele au și un constructor:
Function(arg1, arg2, ..., argN, body)
– Toate argumentele constructorului sunt string-uri
– Exemplu:
var f = new Function("x", "y", "return x * y;");
• Funcția nu are nici un nume
– Dar se poate asigna unei variabile și folosi respectivul
nume
– Numele poate fi folosit pentru apelarea funcției in modul
uzual
• Se pot construi funcții în mod dinamic în JavaScript (ele
sunt automat compilate)
– Totuși, compilarea este o activitate computațional-
intensivă
• Funcțiile definite în acest fel sunt întotdeauna globale
89
Constructorul Function()
Curs Programare Web, anul 4 C5 – Curs 5
Universitatea Politehnica Bucuresti - Facultatea de Automatica si Calculatoare
90
Funcții
• O funcție poate fi definită prin folosirea unui
constructor:
– var f = new Function("x", "y", "return x * y;");
• O funcție poate fi scrisă sub formă literală,
precum în următorul exemplu:
– var f = function(x, y) { return x * y; }
– Această funcție nu este în mod necesar globală
• Pentru a scrie o funcție recursivă, se poate
proceda astfel:
– var f = function fact(n) { if (n <= 1) return n;
else return n * fact(n - 1) ; };
– Numele nu persistă după ce funcția este creată
Curs Programare Web, anul 4 C5 – Curs 5
Universitatea Politehnica Bucuresti - Facultatea de Automatica si Calculatoare
91
Nume de funcții
• “Numele” unei funcții este o variabilă ce
conține respectiva funcție
– 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
Curs Programare Web, anul 4 C5 – Curs 5
Universitatea Politehnica Bucuresti - Facultatea de Automatica si Calculatoare
92
Proprietăți ale funcțiilor
• Deoarece o funcție este un obiect îi puteți
și adăuga proprietăți
– Proprietățile funcțiilor sunt adesea o bună
alternativă la variabilele globale
– Exemplu:
uniqueInteger.counter = 0;
function uniqueInteger() {
return uniqueInteger.counter++;
}
– Proprietățile funcțiilor sunt cumva similare
variabilelor statice din Java
Curs Programare Web, anul 4 C5 – Curs 5
Universitatea Politehnica Bucuresti - Facultatea de Automatica si Calculatoare
• O variabilă este locală unei funcții dacă
– Este un parametru formal al funcției
– Este declarată cu var în interiorul funcției (e.g.
var x = 5)
• Altfel, variabilele sunt globale
• Mai exact, o variabilă este globală dacă
– Este declarată în afara oricărei funcții (cu sau
fără var)
– Este declarată prin asignare în interiorul unei
funcții (e.g. x = 5)
93
Variabile locale și globale
Curs Programare Web, anul 4 C5 – Curs 5
Universitatea Politehnica Bucuresti - Facultatea de Automatica si Calculatoare
94
Funcții și metode
• Atunci când o funcție 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 funcțiile
• call primește orice număr de argumente
• apply primește un tablou de argumente
– Ambele permit invocarea funcției ca și cum ar fi o
metodă a unui alt obiect, object
– În interiorul unei funcții cuvântul cheie this se referă la
object
Curs Programare Web, anul 4 C5 – Curs 5
Universitatea Politehnica Bucuresti - Facultatea de Automatica si Calculatoare
Exemplu
var x = 10;
var o = { x: 15 };
function f() {
alert(this.x);
}
f();
f.call(o);
Curs Programare Web, anul 4 C5 – Curs 5 95
Afișează 10 (this = obiectul global)
Afișează 15 (this = o)
Universitatea Politehnica Bucuresti - Facultatea de Automatica si Calculatoare
• Putem apoi transforma funcția într-o metodă:
– myPoint.dist = distance;
• this în interiorul unei funcții se referă la myPoint,
deci putem spune:
– document.write("The distance is " + myPoint.dist(6,
9));
• Dacă nu dorim să asociem permanent funcția cu
myPoint, putem spune:
– document.write("The distance is " +
distance.call(myPoint, 6, 9));
• Sau:
– document.write("The distance is " +
distance.apply(myPoint, [6, 9]));
96
Metode (2)
Curs Programare Web, anul 4 C5 – Curs 5
Universitatea Politehnica Bucuresti - Facultatea de Automatica si Calculatoare
97
JavaScript și AJAX
Curs Programare Web, anul 4 C5 – Curs 5
Universitatea Politehnica Bucuresti - Facultatea de Automatica si Calculatoare
98
Ce este AJAX?
• AJAX = Asynchronous JavaScript and XML
• Grup de tehnologii ce permit o mai bună
interacțiune și prezentare, precum și actualizarea
incrementală a paginilor Web.
• Bazat pe tehnologii standard web - HTTP,
(X)HTML, CSS, JavaScript, Document Object
Model (DOM), XML
• Folosit de multe companii populare astăzi
– Google Suggests, Google & Yahoo! Maps
– Amazon A9 Search
– Flickr, BaseCamp, Kayak
– Yahoo! AJAX Library
Curs Programare Web, anul 4 C5 – Curs 5
Universitatea Politehnica Bucuresti - Facultatea de Automatica si Calculatoare
99
Exemplu – Yahoo! Sports
Curs Programare Web, anul 4 C5 – Curs 5
Universitatea Politehnica Bucuresti - Facultatea de Automatica si Calculatoare
100
Interacțiunea Web Tradițională
Clientul face o cerere http
Web server
Serverul intoarce o noua pagina
Curs Programare Web, anul 4 C5 – Curs 5
Universitatea Politehnica Bucuresti - Facultatea de Automatica si Calculatoare
101
Cum funcționează AJAX
Web server
Clientul face o cerere http pentru informatii
Serverul intoarce informatiile cerute
Mai multe cereri sunt servite
Curs Programare Web, anul 4 C5 – Curs 5
Universitatea Politehnica Bucuresti - Facultatea de Automatica si Calculatoare
102
De ce ne interesează AJAX?
• Permite construirea de aplicații Rich
Internet Applications (RIA)
• Permite interacțiunea dinamică pe Web
• Îmbunătățește performanțele
• Actualizări real-time
• Nu necesită plug-in-uri
Curs Programare Web, anul 4 C5 – Curs 5
Universitatea Politehnica Bucuresti - Facultatea de Automatica si Calculatoare
103
Cod Simplu pentru Schimbarea Stilului
<style type="text/css">
.notice {
background-color:#FFFFCC;
}
.roInput {
border:none;
background-color:#FFFFFF;
}
</style>
<script type="text/javascript">
// get the element to hold updated data
var priceLoc = document.getElementById('priceLoc");
// update the data in price loc
priceLoc.value = "new data";
// set the style so change will be noticed
priceLoc.className = "notice";
// create timer to call clearActive() with element id and style name
setTimeout("clearActive('priceLoc','roInput');", 5000);
function clearActive(activeId, resetStyle) {
var curActive = document.getElementById(activeId);
curActive.className = resetStyle;
}
</script>
Curs Programare Web, anul 4 C5 – Curs 5
Universitatea Politehnica Bucuresti - Facultatea de Automatica si Calculatoare
AJAX
• Primul pas: crearea unei instanțe
if (window.XMLHttpRequest) {
reqObj = new XMLHttpRequest(); // Firefox, Safari, ...
} else if (window.ActiveXObject) { // ActiveX version
reqObj = new ActiveXObject("Microsoft.XMLHTTP");
// IE
}
• Pasul doi: Așteptăm primirea răspunsului
reqObj.onreadystatechange = function() {
processResponse(reqObj);
};
Curs Programare Web, anul 4 C5 – Curs 5 104
Universitatea Politehnica Bucuresti - Facultatea de Automatica si Calculatoare
AJAX
• Pasul 3: cererea propriu-zisă
• Se pot folosi două metode ale XMLHttpRequest
– open: parametrii sunt tipul cererii (GET sau POST),
URL-ul documentului, true pentru cerere asincrona
– send: merge doar cu POST, acceptă datele de trimis
către server
• Exemplu
reqObj.open('GET',
'http://www.example.com/example.xml', true);
Curs Programare Web, anul 4 C5 – Curs 5 105
Universitatea Politehnica Bucuresti - Facultatea de Automatica si Calculatoare
AJAX
• Pasul 4: Gestiunea răspunsului
function processResponse(reqObj) {
if (reqObj.readyState == 4) {// Received, OK
if (reqObj.status == 200) { // perfect!
}
else {
// there was a problem with the request
}
}
else {
// Wait...
}
}
Curs Programare Web, anul 4 C5 – Curs 5 106
Universitatea Politehnica Bucuresti - Facultatea de Automatica si Calculatoare
Universitatea Politehnica Bucuresti - Facultatea de Automatica si Calculatoare
Cuprins
Ce este jQuery?
Ce face jQuery?
Scurt istoric
Cum se foloseste?
jQuery API
• Selectori
• Atribute
• Parcurgeri
• Evenimente
• Ajax
Universitatea Politehnica Bucuresti - Facultatea de Automatica si Calculatoare
Ce este jQuery?
jQuery este o biblioteca JavaScript , rapida
si compacta, ce simplifica parcurgerea
documentelor html, tratarea evenimentelor,
realizarea de animatii, interactiunile Ajax.
Ajuta deci la o dezvoltare mai rapida de
pagini web
Universitatea Politehnica Bucuresti - Facultatea de Automatica si Calculatoare
Ce face jQuery?
Accesarea elementelor dintr-un document
Modificarea aspectului unei pagini web
Modificarea continutului unui document
Gestionarea evenimentelor
Aducerea de informatii de pe server fara a
face refresh la pagina
Realizare de animatii
Universitatea Politehnica Bucuresti - Facultatea de Automatica si Calculatoare
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
Universitatea Politehnica Bucuresti - Facultatea de Automatica si Calculatoare
Scurt istoric
jQuery UI (Septembrie 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
de selectie (Sizzle)
 jQuery 1.4(Ianuarie 2010) – imbunatatiri de
performanata
jQuery 1.5(Ianuarie 2011) – modulul AJAX a fost
rescris, imbunatatiri in parcurgerea elementelor
jQuery 1.5.2 – versiunea curenta
Universitatea Politehnica Bucuresti - Facultatea de Automatica si Calculatoare
Cum se foloseste ?
Se gaseste 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)
Universitatea Politehnica Bucuresti - Facultatea de Automatica si Calculatoare
Universitatea Politehnica Bucuresti - Facultatea de Automatica si Calculatoare
Alti selectori
$("#orderedlist > li").addClass("blue");
$("#orderedlist").find("li"). addClass("blue");
$("#orderedlist li"). addClass("blue");
$("#orderedlist #child"). addClass("blue");
$("#orderedlist .child"). addClass("blue");
$("#orderedlist li:last"). addClass("blue");
$("#orderedlist li:first"). addClass("blue");
$("input:image"). addClass("blue");
Universitatea Politehnica Bucuresti - Facultatea de Automatica si Calculatoare
Alti selectori
 :lt si :gt
Universitatea Politehnica Bucuresti - Facultatea de Automatica si Calculatoare
Alti selectori
Selectori Multipli
Universitatea Politehnica Bucuresti - Facultatea de Automatica si Calculatoare
Atribute
 .addClass() – adauga clasa specificate elementelor selectate
 .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() – elimina un atribut pentru toate elementele
selectate
 .removeClass() – elimina una sau mai multe clase specificate
pentru fiecare element din setul selectat
 .toggleClass() – adauga sau sterge una sau mai multe clase
pentru fiecare element din set, in functie de exiestenta clasei
date ca argument
 .val() – intoarce valoare primului element din setul selectat
Universitatea Politehnica Bucuresti - Facultatea de Automatica si Calculatoare
Parcurgeri
.find() – cauta printre descendentii
elementelor selectate elementul dat de
selector
• $("p").find("span").css('color','red');
.each() – pentru fiecare element selectat
executa o functie
• $("li").each(function(){
doSomething();
});
.children() – copii fiecarui element selectat
• $("div").children(".selected").css("color", "blue");
Universitatea Politehnica Bucuresti - Facultatea de Automatica si Calculatoare
Parcurgeri
.parent() – parintele fiecarui element din setul
selectat
• $("p").parent(".selected").css("background",
"yellow")
.prev() – fratele anterior fiecarui element din
set
• $("p").prev(“#myId").css("background", "yellow");
.next() – fratele urmator al fiecarui element din
set
• $("p").next(".selected").css("background",
"yellow");
Universitatea Politehnica Bucuresti - Facultatea de Automatica si Calculatoare
Evenimente
• .change() – ataseaza un handler
evenimentului de “change” sau il
declanseaza;
• .click() - ataseaza un handler
evenimentului de “click” sau il declanseaza;
• .hover() – ataseaza doua functii handler ce
vor fi apelate cand cursorul trece pe
deasupra elementului
• .resize() - ataseaza un handler
evenimentului de “resize” sau il
declanseaza;
Universitatea Politehnica Bucuresti - Facultatea de Automatica si Calculatoare
Ajax
jQuery.ajax() – face o cerere HTTP
asincrona la server
Universitatea Politehnica Bucuresti - Facultatea de Automatica si Calculatoare
Ajax
.ajaxComplete() –ataseaza un handler ce
se va apela dupa trimiterea cererii Ajax
Universitatea Politehnica Bucuresti - Facultatea de Automatica si Calculatoare
Ajax
jQuery.post() -cerere HTTP POST
.serialize() – encodeaza date dintr-un
formular pentru a fi trimise la server
Universitatea Politehnica Bucuresti - Facultatea de Automatica si Calculatoare
Sumar
• Fundamentele JavaScript – noțiuni de bază
ale limbajului și construcțiile specifice
acestuia
• JavaScript și HTML - gestiunea simplă a
evenimentelor folosind DOM
• Exemple JavaScript
• Noțiuni avansate de JavaScript – funcții,
metode, obiecte, etc.
• O introducere în JavaScript și AJAX
Curs Programare Web, anul 4 C5 – Curs 5 125

single quote
###BOT_TEXT###quot; double quote
\ backslash
\xDD Unicode hex DD
\xDDDD Unicode hex DDDD
Curs Programare Web, anul 4 C5 – Curs 5
Universitatea Politehnica Bucuresti - Facultatea de Automatica si Calculatoare
86
Câteva metode de lucru cu string-uri
• charAt(n)
– Întoarce al n-lea caracter din string
• concat(string1, ..., stringN)
– Concatenează string-urile primite ca argumente
• indexOf(substring)
– Întoarce poziția primului caracter al substring în string-ul recipient
sau -1 daca nu este găsit
• indexOf(substring, start)
– Întoarce poziția primului caracter al substring în stringul dat ca
argument începând de la poziția start, sau -1 dacă nu este găsit
• lastIndexOf(substring), lastIndexOf(substring, start)
– Similar indexOf, dar caută string-ul începând de la sfârșit spre
început
Curs Programare Web, anul 4 C5 – Curs 5
Universitatea Politehnica Bucuresti - Facultatea de Automatica si Calculatoare
87
Variabile
• Orice variabilă este o proprietate a unui obiect
• Atunci când JavaScript pornește, crează un obiect global –
obiectul window
– Poate fi referit ca window sau ca this
• Pot exista mai mult de un singur obiect “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 referinței de tip tablou
– De exemplu, dacă presupunem:
• <form name="myForm">
<input type="button" name="myButton" ...>
• Atunci în loc de document.forms[0].elements[0]
• Putem folosi și document.myForm.myButton
Curs Programare Web, anul 4 C5 – Curs 5
Universitatea Politehnica Bucuresti - Facultatea de Automatica si Calculatoare
• În Java, metodele sunt asociate cu obiecte
• În JavaScript, o funcție este un obiect
• Funcțiile pot fi recursive:
function factorial(n) {
if (n <= 1) return 1;
else return n * factorial(n - 1);
}
• Funcțiile pot fi imbricate:
– function hypotenuse(a, b) {
function square(x) { return x * x; }
return Math.sqrt(square(a) + square(b));
}
88
Funcții
Curs Programare Web, anul 4 C5 – Curs 5
Universitatea Politehnica Bucuresti - Facultatea de Automatica si Calculatoare
• Deoarece funcțiile sunt obiecte, ele au și un constructor:
Function(arg1, arg2, ..., argN, body)
– Toate argumentele constructorului sunt string-uri
– Exemplu:
var f = new Function("x", "y", "return x * y;");
• Funcția nu are nici un nume
– Dar se poate asigna unei variabile și folosi respectivul
nume
– Numele poate fi folosit pentru apelarea funcției in modul
uzual
• Se pot construi funcții în mod dinamic în JavaScript (ele
sunt automat compilate)
– Totuși, compilarea este o activitate computațional-
intensivă
• Funcțiile definite în acest fel sunt întotdeauna globale
89
Constructorul Function()
Curs Programare Web, anul 4 C5 – Curs 5
Universitatea Politehnica Bucuresti - Facultatea de Automatica si Calculatoare
90
Funcții
• O funcție poate fi definită prin folosirea unui
constructor:
– var f = new Function("x", "y", "return x * y;");
• O funcție poate fi scrisă sub formă literală,
precum în următorul exemplu:
– var f = function(x, y) { return x * y; }
– Această funcție nu este în mod necesar globală
• Pentru a scrie o funcție recursivă, se poate
proceda astfel:
– var f = function fact(n) { if (n <= 1) return n;
else return n * fact(n - 1) ; };
– Numele nu persistă după ce funcția este creată
Curs Programare Web, anul 4 C5 – Curs 5
Universitatea Politehnica Bucuresti - Facultatea de Automatica si Calculatoare
91
Nume de funcții
• “Numele” unei funcții este o variabilă ce
conține respectiva funcție
– 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
Curs Programare Web, anul 4 C5 – Curs 5
Universitatea Politehnica Bucuresti - Facultatea de Automatica si Calculatoare
92
Proprietăți ale funcțiilor
• Deoarece o funcție este un obiect îi puteți
și adăuga proprietăți
– Proprietățile funcțiilor sunt adesea o bună
alternativă la variabilele globale
– Exemplu:
uniqueInteger.counter = 0;
function uniqueInteger() {
return uniqueInteger.counter++;
}
– Proprietățile funcțiilor sunt cumva similare
variabilelor statice din Java
Curs Programare Web, anul 4 C5 – Curs 5
Universitatea Politehnica Bucuresti - Facultatea de Automatica si Calculatoare
• O variabilă este locală unei funcții dacă
– Este un parametru formal al funcției
– Este declarată cu var în interiorul funcției (e.g.
var x = 5)
• Altfel, variabilele sunt globale
• Mai exact, o variabilă este globală dacă
– Este declarată în afara oricărei funcții (cu sau
fără var)
– Este declarată prin asignare în interiorul unei
funcții (e.g. x = 5)
93
Variabile locale și globale
Curs Programare Web, anul 4 C5 – Curs 5
Universitatea Politehnica Bucuresti - Facultatea de Automatica si Calculatoare
94
Funcții și metode
• Atunci când o funcție 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 funcțiile
• call primește orice număr de argumente
• apply primește un tablou de argumente
– Ambele permit invocarea funcției ca și cum ar fi o
metodă a unui alt obiect, object
– În interiorul unei funcții cuvântul cheie this se referă la
object
Curs Programare Web, anul 4 C5 – Curs 5
Universitatea Politehnica Bucuresti - Facultatea de Automatica si Calculatoare
Exemplu
var x = 10;
var o = { x: 15 };
function f() {
alert(this.x);
}
f();
f.call(o);
Curs Programare Web, anul 4 C5 – Curs 5 95
Afișează 10 (this = obiectul global)
Afișează 15 (this = o)
Universitatea Politehnica Bucuresti - Facultatea de Automatica si Calculatoare
• Putem apoi transforma funcția într-o metodă:
– myPoint.dist = distance;
• this în interiorul unei funcții se referă la myPoint,
deci putem spune:
– document.write("The distance is " + myPoint.dist(6,
9));
• Dacă nu dorim să asociem permanent funcția cu
myPoint, putem spune:
– document.write("The distance is " +
distance.call(myPoint, 6, 9));
• Sau:
– document.write("The distance is " +
distance.apply(myPoint, [6, 9]));
96
Metode (2)
Curs Programare Web, anul 4 C5 – Curs 5
Universitatea Politehnica Bucuresti - Facultatea de Automatica si Calculatoare
97
JavaScript și AJAX
Curs Programare Web, anul 4 C5 – Curs 5
Universitatea Politehnica Bucuresti - Facultatea de Automatica si Calculatoare
98
Ce este AJAX?
• AJAX = Asynchronous JavaScript and XML
• Grup de tehnologii ce permit o mai bună
interacțiune și prezentare, precum și actualizarea
incrementală a paginilor Web.
• Bazat pe tehnologii standard web - HTTP,
(X)HTML, CSS, JavaScript, Document Object
Model (DOM), XML
• Folosit de multe companii populare astăzi
– Google Suggests, Google & Yahoo! Maps
– Amazon A9 Search
– Flickr, BaseCamp, Kayak
– Yahoo! AJAX Library
Curs Programare Web, anul 4 C5 – Curs 5
Universitatea Politehnica Bucuresti - Facultatea de Automatica si Calculatoare
99
Exemplu – Yahoo! Sports
Curs Programare Web, anul 4 C5 – Curs 5
Universitatea Politehnica Bucuresti - Facultatea de Automatica si Calculatoare
100
Interacțiunea Web Tradițională
Clientul face o cerere http
Web server
Serverul intoarce o noua pagina
Curs Programare Web, anul 4 C5 – Curs 5
Universitatea Politehnica Bucuresti - Facultatea de Automatica si Calculatoare
101
Cum funcționează AJAX
Web server
Clientul face o cerere http pentru informatii
Serverul intoarce informatiile cerute
Mai multe cereri sunt servite
Curs Programare Web, anul 4 C5 – Curs 5
Universitatea Politehnica Bucuresti - Facultatea de Automatica si Calculatoare
102
De ce ne interesează AJAX?
• Permite construirea de aplicații Rich
Internet Applications (RIA)
• Permite interacțiunea dinamică pe Web
• Îmbunătățește performanțele
• Actualizări real-time
• Nu necesită plug-in-uri
Curs Programare Web, anul 4 C5 – Curs 5
Universitatea Politehnica Bucuresti - Facultatea de Automatica si Calculatoare
103
Cod Simplu pentru Schimbarea Stilului
<style type="text/css">
.notice {
background-color:#FFFFCC;
}
.roInput {
border:none;
background-color:#FFFFFF;
}
</style>
<script type="text/javascript">
// get the element to hold updated data
var priceLoc = document.getElementById('priceLoc");
// update the data in price loc
priceLoc.value = "new data";
// set the style so change will be noticed
priceLoc.className = "notice";
// create timer to call clearActive() with element id and style name
setTimeout("clearActive('priceLoc','roInput');", 5000);
function clearActive(activeId, resetStyle) {
var curActive = document.getElementById(activeId);
curActive.className = resetStyle;
}
</script>
Curs Programare Web, anul 4 C5 – Curs 5
Universitatea Politehnica Bucuresti - Facultatea de Automatica si Calculatoare
AJAX
• Primul pas: crearea unei instanțe
if (window.XMLHttpRequest) {
reqObj = new XMLHttpRequest(); // Firefox, Safari, ...
} else if (window.ActiveXObject) { // ActiveX version
reqObj = new ActiveXObject("Microsoft.XMLHTTP");
// IE
}
• Pasul doi: Așteptăm primirea răspunsului
reqObj.onreadystatechange = function() {
processResponse(reqObj);
};
Curs Programare Web, anul 4 C5 – Curs 5 104
Universitatea Politehnica Bucuresti - Facultatea de Automatica si Calculatoare
AJAX
• Pasul 3: cererea propriu-zisă
• Se pot folosi două metode ale XMLHttpRequest
– open: parametrii sunt tipul cererii (GET sau POST),
URL-ul documentului, true pentru cerere asincrona
– send: merge doar cu POST, acceptă datele de trimis
către server
• Exemplu
reqObj.open('GET',
'http://www.example.com/example.xml', true);
Curs Programare Web, anul 4 C5 – Curs 5 105
Universitatea Politehnica Bucuresti - Facultatea de Automatica si Calculatoare
AJAX
• Pasul 4: Gestiunea răspunsului
function processResponse(reqObj) {
if (reqObj.readyState == 4) {// Received, OK
if (reqObj.status == 200) { // perfect!
}
else {
// there was a problem with the request
}
}
else {
// Wait...
}
}
Curs Programare Web, anul 4 C5 – Curs 5 106
Universitatea Politehnica Bucuresti - Facultatea de Automatica si Calculatoare
Universitatea Politehnica Bucuresti - Facultatea de Automatica si Calculatoare
Cuprins
Ce este jQuery?
Ce face jQuery?
Scurt istoric
Cum se foloseste?
jQuery API
• Selectori
• Atribute
• Parcurgeri
• Evenimente
• Ajax
Universitatea Politehnica Bucuresti - Facultatea de Automatica si Calculatoare
Ce este jQuery?
jQuery este o biblioteca JavaScript , rapida
si compacta, ce simplifica parcurgerea
documentelor html, tratarea evenimentelor,
realizarea de animatii, interactiunile Ajax.
Ajuta deci la o dezvoltare mai rapida de
pagini web
Universitatea Politehnica Bucuresti - Facultatea de Automatica si Calculatoare
Ce face jQuery?
Accesarea elementelor dintr-un document
Modificarea aspectului unei pagini web
Modificarea continutului unui document
Gestionarea evenimentelor
Aducerea de informatii de pe server fara a
face refresh la pagina
Realizare de animatii
Universitatea Politehnica Bucuresti - Facultatea de Automatica si Calculatoare
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
Universitatea Politehnica Bucuresti - Facultatea de Automatica si Calculatoare
Scurt istoric
jQuery UI (Septembrie 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
de selectie (Sizzle)
 jQuery 1.4(Ianuarie 2010) – imbunatatiri de
performanata
jQuery 1.5(Ianuarie 2011) – modulul AJAX a fost
rescris, imbunatatiri in parcurgerea elementelor
jQuery 1.5.2 – versiunea curenta
Universitatea Politehnica Bucuresti - Facultatea de Automatica si Calculatoare
Cum se foloseste ?
Se gaseste 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)
Universitatea Politehnica Bucuresti - Facultatea de Automatica si Calculatoare
Universitatea Politehnica Bucuresti - Facultatea de Automatica si Calculatoare
Alti selectori
$("#orderedlist > li").addClass("blue");
$("#orderedlist").find("li"). addClass("blue");
$("#orderedlist li"). addClass("blue");
$("#orderedlist #child"). addClass("blue");
$("#orderedlist .child"). addClass("blue");
$("#orderedlist li:last"). addClass("blue");
$("#orderedlist li:first"). addClass("blue");
$("input:image"). addClass("blue");
Universitatea Politehnica Bucuresti - Facultatea de Automatica si Calculatoare
Alti selectori
 :lt si :gt
Universitatea Politehnica Bucuresti - Facultatea de Automatica si Calculatoare
Alti selectori
Selectori Multipli
Universitatea Politehnica Bucuresti - Facultatea de Automatica si Calculatoare
Atribute
 .addClass() – adauga clasa specificate elementelor selectate
 .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() – elimina un atribut pentru toate elementele
selectate
 .removeClass() – elimina una sau mai multe clase specificate
pentru fiecare element din setul selectat
 .toggleClass() – adauga sau sterge una sau mai multe clase
pentru fiecare element din set, in functie de exiestenta clasei
date ca argument
 .val() – intoarce valoare primului element din setul selectat
Universitatea Politehnica Bucuresti - Facultatea de Automatica si Calculatoare
Parcurgeri
.find() – cauta printre descendentii
elementelor selectate elementul dat de
selector
• $("p").find("span").css('color','red');
.each() – pentru fiecare element selectat
executa o functie
• $("li").each(function(){
doSomething();
});
.children() – copii fiecarui element selectat
• $("div").children(".selected").css("color", "blue");
Universitatea Politehnica Bucuresti - Facultatea de Automatica si Calculatoare
Parcurgeri
.parent() – parintele fiecarui element din setul
selectat
• $("p").parent(".selected").css("background",
"yellow")
.prev() – fratele anterior fiecarui element din
set
• $("p").prev(“#myId").css("background", "yellow");
.next() – fratele urmator al fiecarui element din
set
• $("p").next(".selected").css("background",
"yellow");
Universitatea Politehnica Bucuresti - Facultatea de Automatica si Calculatoare
Evenimente
• .change() – ataseaza un handler
evenimentului de “change” sau il
declanseaza;
• .click() - ataseaza un handler
evenimentului de “click” sau il declanseaza;
• .hover() – ataseaza doua functii handler ce
vor fi apelate cand cursorul trece pe
deasupra elementului
• .resize() - ataseaza un handler
evenimentului de “resize” sau il
declanseaza;
Universitatea Politehnica Bucuresti - Facultatea de Automatica si Calculatoare
Ajax
jQuery.ajax() – face o cerere HTTP
asincrona la server
Universitatea Politehnica Bucuresti - Facultatea de Automatica si Calculatoare
Ajax
.ajaxComplete() –ataseaza un handler ce
se va apela dupa trimiterea cererii Ajax
Universitatea Politehnica Bucuresti - Facultatea de Automatica si Calculatoare
Ajax
jQuery.post() -cerere HTTP POST
.serialize() – encodeaza date dintr-un
formular pentru a fi trimise la server
Universitatea Politehnica Bucuresti - Facultatea de Automatica si Calculatoare
Sumar
• Fundamentele JavaScript – noțiuni de bază
ale limbajului și construcțiile specifice
acestuia
• JavaScript și HTML - gestiunea simplă a
evenimentelor folosind DOM
• Exemple JavaScript
• Noțiuni avansate de JavaScript – funcții,
metode, obiecte, etc.
• O introducere în JavaScript și AJAX
Curs Programare Web, anul 4 C5 – Curs 5 125

","doc_promotions_enabled":false,"static_promo_banner_cta_url":"https://www.scribd.com/"},"eligible_for_exclusive_trial_roadblock":false,"eligible_for_seo_roadblock":false,"exclusive_free_trial_roadblock_props_path":"/doc-page/exclusive-free-trial-props/223951111","flashes":[],"footer_props":{"urls":{"about":"/about","press":"/press","blog":"http://literally.scribd.com/","careers":"/careers","contact":"/contact","plans_landing":"/subscribe","referrals":"/referrals?source=footer","giftcards":"/giftcards","faq":"/faq","accessibility":"/accessibility-policy","faq_paths":{"accounts":"https://support.scribd.com/hc/sections/202246346","announcements":"https://support.scribd.com/hc/sections/202246066","copyright":"https://support.scribd.com/hc/sections/202246086","downloading":"https://support.scribd.com/hc/articles/210135046","publishing":"https://support.scribd.com/hc/sections/202246366","reading":"https://support.scribd.com/hc/sections/202246406","selling":"https://support.scribd.com/hc/sections/202246326","store":"https://support.scribd.com/hc/sections/202246306","status":"https://support.scribd.com/hc/en-us/articles/360001202872","terms":"https://support.scribd.com/hc/sections/202246126","writing":"https://support.scribd.com/hc/sections/202246366","adchoices":"https://support.scribd.com/hc/articles/210129366","paid_features":"https://support.scribd.com/hc/sections/202246306","failed_uploads":"https://support.scribd.com/hc/en-us/articles/210134586-Troubleshooting-uploads-and-conversions","copyright_infringement":"https://support.scribd.com/hc/en-us/articles/210128946-DMCA-copyright-infringement-takedown-notification-policy","end_user_license":"https://support.scribd.com/hc/en-us/articles/210129486","terms_of_use":"https://support.scribd.com/hc/en-us/articles/210129326-General-Terms-of-Use"},"publishers":"/publishers","static_terms":"/terms","static_privacy":"/privacy","copyright":"/copyright","ios_app":"https://itunes.apple.com/us/app/scribd-worlds-largest-online/id542557212?mt=8&uo=4&at=11lGEE","android_app":"https://play.google.com/store/apps/details?id=com.scribd.app.reader0&hl=en","books":"/books","sitemap":"/directory"}},"global_nav_props":{"header_props":{"logo_src":"/images/landing/home2_landing/scribd_logo_horiz_small.svg","root_url":"https://www.scribd.com/","search_term":"","small_logo_src":"/images/logos/scribd_s_logo.png","uploads_url":"/upload-document","search_props":{"redirect_to_app":true,"search_url":"/search","query":"","search_page":false}},"user_menu_props":null,"sidebar_props":{"urls":{"bestsellers":"https://www.scribd.com/bestsellers","home":"https://www.scribd.com/","saved":"/saved","subscribe":"/archive/pmp_checkout?doc=223951111&metadata=%7B%22context%22%3A%22pmp%22%2C%22action%22%3A%22start_trial%22%2C%22logged_in%22%3Afalse%2C%22platform%22%3A%22web%22%7D","top_charts":"/bestsellers","upload":"https://www.scribd.com/upload-document"},"categories":{"book":{"icon":"icon-ic_book","icon_filled":"icon-ic_book_fill","url":"https://www.scribd.com/books","name":"Books","type":"book"},"news":{"icon":"icon-ic_articles","icon_filled":"icon-ic_articles_fill","url":"https://www.scribd.com/news","name":"News","type":"news"},"audiobook":{"icon":"icon-ic_audiobook","icon_filled":"icon-ic_audiobook_fill","url":"https://www.scribd.com/audiobooks","name":"Audiobooks","type":"audiobook"},"magazine":{"icon":"icon-ic_magazine","icon_filled":"icon-ic_magazine_fill","url":"https://www.scribd.com/magazines","name":"Magazines","type":"magazine"},"document":{"icon":"icon-ic_document","icon_filled":"icon-ic_document_fill","url":"https://www.scribd.com/docs","name":"Documents","type":"document"},"sheet_music":{"icon":"icon-ic_songbook","icon_filled":"icon-ic_songbook_fill","url":"https://www.scribd.com/sheetmusic","name":"Sheet Music","type":"sheet_music"},"summary":{"icon":"icon-ic_globalnav_snapshot","icon_filled":"icon-ic_globalnav_snapshot_fill","url":"https://www.scribd.com/snapshots","name":"Snapshots","type":"summary"}},"nav_categories":["mixed","book","audiobook","magazine","document","sheet_music"],"selected_content_type":"mixed","username":"","search_overlay_props":{"search_input_props":{"focused":false,"keep_suggestions_on_blur":false}}}},"recommenders":{"related_titles_recommender":{"ids":[50901018,195786289,80355209,98859880,123656042,195787126,56924158,48088015,319606438,43200135,248612941,139394560,94463213,146518858,174099634,126000171,61116902,288312034,170861389,49767322,6894618,37449396,57677148,79850305,102146714,47484195,62444820,113102900,85385717,152766856,167831688,170198555,167831190,119854941,164714148],"title_link":null,"title":null,"track_opts":{"compilation_id":"ExD2pe/2EwC7gmUBzvfctMaB9S0=","module_id":"XJz0dkSzzGzIdoHyp3u39LaeHH0=","widget_name":"right sidebar","track_id":"flattened_recommender"}},"footer_recommenders":{"recommenders":[{"ids":[50901018,195786289,80355209,98859880,123656042,195787126,56924158,48088015,319606438,43200135,248612941,139394560,94463213,146518858,174099634,126000171,61116902,288312034,170861389,49767322,6894618,37449396,57677148,79850305,102146714,47484195,62444820,113102900,85385717,152766856],"title_link":null,"title":"Documents Similar To PW5 JavaScript","track_opts":{"compilation_id":"ExD2pe/2EwC7gmUBzvfctMaB9S0=","module_id":"32HAgI/3PoBL0+alwJAwS2x47Og=","widget_name":"document_carousel"}},{"ids":[167831688,170198555,167831190,119854941,164714148],"title_link":null,"title":"More From Roxana Branzoi","track_opts":{"compilation_id":"ExD2pe/2EwC7gmUBzvfctMaB9S0=","module_id":"R8nS7MjEqeiXGzzAt6Ro7LvCLmk=","widget_name":"document_carousel"}}]},"seo_new_docs_recommenders":{"recommenders":[]},"documents":{"6894618":{"type":"document","id":6894618,"thumb_url":"https://imgv2-1-f.scribdassets.com/img/document/6894618/149x198/e82736018f/1399635899?v=1","retina_thumb_url":"https://imgv2-1-f.scribdassets.com/img/document/6894618/298x396/2577a22da8/1399635899?v=1","title":"proiectare_pagini_web","short_title":"proiectare_pagini_web","author":"api-3741945","tracking":{"object_type":"document","object_id":6894618,"track":"flattened_recommender","doc_uuid":"3/N91oAblaPF6Zo+2hxdJKRQ1Yg="},"url":"https://www.scribd.com/document/6894618/proiectare-pagini-web","top_badge":null},"37449396":{"type":"document","id":37449396,"thumb_url":"https://imgv2-1-f.scribdassets.com/img/document/37449396/149x198/3a9e7bf17d/1532061793?v=1","retina_thumb_url":"https://imgv2-1-f.scribdassets.com/img/document/37449396/298x396/daf7304777/1532061793?v=1","title":"Javascript","short_title":"Javascript","author":"alexquentin","tracking":{"object_type":"document","object_id":37449396,"track":"flattened_recommender","doc_uuid":"rNS9HvBmIRobZ5GePn+KuOlEu3s="},"url":"https://www.scribd.com/document/37449396/Javascript","top_badge":null},"43200135":{"type":"document","id":43200135,"thumb_url":"https://imgv2-1-f.scribdassets.com/img/document/43200135/149x198/c81e988c1a/1374069322?v=1","retina_thumb_url":"https://imgv2-1-f.scribdassets.com/img/document/43200135/298x396/6f506b2308/1374069322?v=1","title":"AJAX Romana","short_title":"AJAX Romana","author":"johhnny83","tracking":{"object_type":"document","object_id":43200135,"track":"flattened_recommender","doc_uuid":"Xq8f4iYHY2tV+Xm2GMsaNrDoyB8="},"url":"https://www.scribd.com/doc/43200135/AJAX-Romana","top_badge":null},"47484195":{"type":"document","id":47484195,"thumb_url":"https://imgv2-2-f.scribdassets.com/img/document/47484195/149x198/d68866bcc4/1522386897?v=1","retina_thumb_url":"https://imgv2-1-f.scribdassets.com/img/document/47484195/298x396/641ca6e374/1522386897?v=1","title":"Visual Basic for Application - romana","short_title":"Visual Basic for Application - romana","author":"Vladimir Atanasiu","tracking":{"object_type":"document","object_id":47484195,"track":"flattened_recommender","doc_uuid":"6FjQVPQHCI/ekjY1JmvnPTM0ziA="},"url":"https://www.scribd.com/document/47484195/Visual-Basic-for-Application-romana","top_badge":null},"48088015":{"type":"document","id":48088015,"thumb_url":"https://imgv2-1-f.scribdassets.com/img/document/48088015/149x198/22fc0577ff/1508092371?v=1","retina_thumb_url":"https://imgv2-1-f.scribdassets.com/img/document/48088015/298x396/0023d7dd1a/1508092371?v=1","title":"JavaScript","short_title":"JavaScript","author":"dumitrus100","tracking":{"object_type":"document","object_id":48088015,"track":"flattened_recommender","doc_uuid":"iH1iQc4pypTA7aTLgknSSmZEALQ="},"url":"https://www.scribd.com/document/48088015/JavaScript","top_badge":null},"49767322":{"type":"document","id":49767322,"thumb_url":"https://imgv2-2-f.scribdassets.com/img/document/49767322/149x198/ef2f3234d6/1408123002?v=1","retina_thumb_url":"https://imgv2-2-f.scribdassets.com/img/document/49767322/298x396/ea63a3b251/1408123002?v=1","title":"Curs-7-javascript","short_title":"Curs-7-javascript","author":"Aly Alex","tracking":{"object_type":"document","object_id":49767322,"track":"flattened_recommender","doc_uuid":"JouqCylk2qPcWxCdov8L5DCcsV8="},"url":"https://www.scribd.com/document/49767322/Curs-7-javascript","top_badge":null},"50901018":{"type":"document","id":50901018,"thumb_url":"https://imgv2-1-f.scribdassets.com/img/document/50901018/149x198/42a4b1e897/1373373113?v=1","retina_thumb_url":"https://imgv2-2-f.scribdassets.com/img/document/50901018/298x396/2a30156bee/1373373113?v=1","title":"Proiectare Site si Web Design","short_title":"Proiectare Site si Web Design","author":"iura12","tracking":{"object_type":"document","object_id":50901018,"track":"flattened_recommender","doc_uuid":"haJNNT7RnexkpeQ42FGEXPVHCRo="},"url":"https://www.scribd.com/document/50901018/Proiectare-Site-si-Web-Design","top_badge":null},"56924158":{"type":"document","id":56924158,"thumb_url":"https://imgv2-1-f.scribdassets.com/img/document/56924158/149x198/eebe202b4c/1539120732?v=1","retina_thumb_url":"https://imgv2-2-f.scribdassets.com/img/document/56924158/298x396/b4489b3659/1539120732?v=1","title":"HTML 5","short_title":"HTML 5","author":"loretta00","tracking":{"object_type":"document","object_id":56924158,"track":"flattened_recommender","doc_uuid":"rq+xrsDtQlZJV3NUoHY1HEU9nWM="},"url":"https://www.scribd.com/document/56924158/HTML-5","top_badge":null},"57677148":{"type":"document","id":57677148,"thumb_url":"https://imgv2-2-f.scribdassets.com/img/document/57677148/149x198/fa3fe756c3/1515776221?v=1","retina_thumb_url":"https://imgv2-2-f.scribdassets.com/img/document/57677148/298x396/1592d6a794/1515776221?v=1","title":"Aplicatii Ec in Visual Basic","short_title":"Aplicatii Ec in Visual Basic","author":"tavirossi81","tracking":{"object_type":"document","object_id":57677148,"track":"flattened_recommender","doc_uuid":"96sjZlN319+tZVIK3NLxNaSSiNY="},"url":"https://www.scribd.com/document/57677148/Aplicatii-Ec-in-Visual-Basic","top_badge":null},"61116902":{"type":"document","id":61116902,"thumb_url":"https://imgv2-2-f.scribdassets.com/img/document/61116902/149x198/3417b23f94/1526041948?v=1","retina_thumb_url":"https://imgv2-1-f.scribdassets.com/img/document/61116902/298x396/0e7cafbf3c/1526041948?v=1","title":"Lucrare de licenta","short_title":"Lucrare de licenta","author":"Zsolt Molnar","tracking":{"object_type":"document","object_id":61116902,"track":"flattened_recommender","doc_uuid":"pwmz/ch8j+G6yKWIBfp5BStDS24="},"url":"https://www.scribd.com/doc/61116902/Lucrare-de-licenta","top_badge":null},"62444820":{"type":"document","id":62444820,"thumb_url":"https://imgv2-2-f.scribdassets.com/img/document/62444820/149x198/83e22e9109/1371558424?v=1","retina_thumb_url":"https://imgv2-1-f.scribdassets.com/img/document/62444820/298x396/539064ccd1/1371558424?v=1","title":"Java Script Slide","short_title":"Java Script Slide","author":"Silviu Cornestean","tracking":{"object_type":"document","object_id":62444820,"track":"flattened_recommender","doc_uuid":"tgsUgSvwprrrPCePY7r89gW0De4="},"url":"https://www.scribd.com/document/62444820/Java-Script-Slide","top_badge":null},"79850305":{"type":"document","id":79850305,"thumb_url":"https://imgv2-1-f.scribdassets.com/img/document/79850305/149x198/a6e699de16/1355409869?v=1","retina_thumb_url":"https://imgv2-2-f.scribdassets.com/img/document/79850305/298x396/7a5f992608/1355409869?v=1","title":"Suport Curs Java Script","short_title":"Suport Curs Java Script","author":"Dan Radu","tracking":{"object_type":"document","object_id":79850305,"track":"flattened_recommender","doc_uuid":"Nc3po5MEbG+zYgNHeN3yhVxt9fM="},"url":"https://www.scribd.com/document/79850305/Suport-Curs-Java-Script","top_badge":null},"80355209":{"type":"document","id":80355209,"thumb_url":"https://imgv2-1-f.scribdassets.com/img/document/80355209/149x198/37f9ef3693/1328265585?v=1","retina_thumb_url":"https://imgv2-2-f.scribdassets.com/img/document/80355209/298x396/c8d92212d4/1328265585?v=1","title":"Javascript","short_title":"Javascript","author":"ileanat11","tracking":{"object_type":"document","object_id":80355209,"track":"flattened_recommender","doc_uuid":"q6xqoAZwxJqzBLEv4rVaMbYXB/U="},"url":"https://www.scribd.com/doc/80355209/Javascript","top_badge":null},"85385717":{"type":"document","id":85385717,"thumb_url":"https://imgv2-2-f.scribdassets.com/img/document/85385717/149x198/eae51054e4/1539271459?v=1","retina_thumb_url":"https://imgv2-1-f.scribdassets.com/img/document/85385717/298x396/77285b83cb/1539271459?v=1","title":"Java","short_title":"Java","author":"simona64","tracking":{"object_type":"document","object_id":85385717,"track":"flattened_recommender","doc_uuid":"Byr0NbhFZVpdXWKLdwBezTTtScw="},"url":"https://www.scribd.com/document/85385717/Java","top_badge":null},"94463213":{"type":"document","id":94463213,"thumb_url":"https://imgv2-1-f.scribdassets.com/img/document/94463213/149x198/89de2595f9/1379934752?v=1","retina_thumb_url":"https://imgv2-1-f.scribdassets.com/img/document/94463213/298x396/b8c68aea25/1379934752?v=1","title":"57122015 Curs Java Script","short_title":"57122015 Curs Java Script","author":"gaby21marian3712","tracking":{"object_type":"document","object_id":94463213,"track":"flattened_recommender","doc_uuid":"rqaqxL5dwfM/XlsmWiCWLHjgjuU="},"url":"https://www.scribd.com/doc/94463213/57122015-Curs-Java-Script","top_badge":null},"98859880":{"type":"document","id":98859880,"thumb_url":"https://imgv2-2-f.scribdassets.com/img/document/98859880/149x198/21b481b24b/1371558430?v=1","retina_thumb_url":"https://imgv2-1-f.scribdassets.com/img/document/98859880/298x396/9856c225f0/1371558430?v=1","title":"Tutorial JavaScript","short_title":"Tutorial JavaScript","author":"Silviu Ilie","tracking":{"object_type":"document","object_id":98859880,"track":"flattened_recommender","doc_uuid":"MF5uZCQELxrJWF80geELS+UKNx0="},"url":"https://www.scribd.com/doc/98859880/Tutorial-JavaScript","top_badge":null},"102146714":{"type":"document","id":102146714,"thumb_url":"https://imgv2-1-f.scribdassets.com/img/document/102146714/149x198/584306b487/1420326829?v=1","retina_thumb_url":"https://imgv2-1-f.scribdassets.com/img/document/102146714/298x396/a5088049c4/1420326829?v=1","title":"Python Tutorial Romana","short_title":"Python Tutorial Romana","author":"Florin Radu","tracking":{"object_type":"document","object_id":102146714,"track":"flattened_recommender","doc_uuid":"XOc7g50yHNYBMbx22ag2N1oCHb8="},"url":"https://www.scribd.com/doc/102146714/Python-Tutorial-Romana","top_badge":null},"113102900":{"type":"document","id":113102900,"thumb_url":"https://imgv2-2-f.scribdassets.com/img/document/113102900/149x198/dec3fd18bd/1428319835?v=1","retina_thumb_url":"https://imgv2-2-f.scribdassets.com/img/document/113102900/298x396/910e31fd61/1428319835?v=1","title":"72173220-Flash-and-PHP","short_title":"72173220-Flash-and-PHP","author":"Sorina Aorina","tracking":{"object_type":"document","object_id":113102900,"track":"flattened_recommender","doc_uuid":"xLyd47yR+UnsUh+OSv/LrgSv8OU="},"url":"https://www.scribd.com/doc/113102900/72173220-Flash-and-PHP","top_badge":null},"119854941":{"type":"document","id":119854941,"thumb_url":"https://imgv2-2-f.scribdassets.com/img/document/119854941/149x198/17078220ab/1404297598?v=1","retina_thumb_url":"https://imgv2-2-f.scribdassets.com/img/document/119854941/298x396/012b1f3ae7/1404297598?v=1","title":"flex","short_title":"flex","author":"Roxana Branzoi","tracking":{"object_type":"document","object_id":119854941,"track":"flattened_recommender","doc_uuid":"F7MP3OcrFMqiKLoAceFtBX2aJbQ="},"url":"https://www.scribd.com/document/119854941/flex","top_badge":null},"123656042":{"type":"document","id":123656042,"thumb_url":"https://imgv2-2-f.scribdassets.com/img/document/123656042/149x198/2d45ec24f7/1377972304?v=1","retina_thumb_url":"https://imgv2-1-f.scribdassets.com/img/document/123656042/298x396/745ed44094/1377972304?v=1","title":"css","short_title":"css","author":"Dumitru Cristian","tracking":{"object_type":"document","object_id":123656042,"track":"flattened_recommender","doc_uuid":"jKi7t4MnCjUeHtuy+kiE6hyXauI="},"url":"https://www.scribd.com/document/123656042/css","top_badge":null},"126000171":{"type":"document","id":126000171,"thumb_url":"https://imgv2-1-f.scribdassets.com/img/document/126000171/149x198/d995458e33/1384796273?v=1","retina_thumb_url":"https://imgv2-1-f.scribdassets.com/img/document/126000171/298x396/7e1e79257d/1384796273?v=1","title":"Майкл Монкур Освой самостоятельно JavaScript","short_title":"Майкл Монкур Освой самостоятельно JavaScript","author":"Oleg Meleca","tracking":{"object_type":"document","object_id":126000171,"track":"flattened_recommender","doc_uuid":"4/HjY/rOtJNOGm4rvSnhejL7eeY="},"url":"https://www.scribd.com/document/126000171/Майкл-Монкур-Освой-самостоятельно-JavaScript","top_badge":null},"139394560":{"type":"document","id":139394560,"thumb_url":"https://imgv2-1-f.scribdassets.com/img/document/139394560/149x198/461022347a/1373009050?v=1","retina_thumb_url":"https://imgv2-1-f.scribdassets.com/img/document/139394560/298x396/d355214902/1373009050?v=1","title":"112071788 Javascript Curs","short_title":"112071788 Javascript Curs","author":"AlCatalinAdrian","tracking":{"object_type":"document","object_id":139394560,"track":"flattened_recommender","doc_uuid":"0tmK/86cvkvA66QkDDyHbQLj6iU="},"url":"https://www.scribd.com/document/139394560/112071788-Javascript-Curs","top_badge":null},"146518858":{"type":"document","id":146518858,"thumb_url":"https://imgv2-1-f.scribdassets.com/img/document/146518858/149x198/94d3f4cbfb/1374990317?v=1","retina_thumb_url":"https://imgv2-1-f.scribdassets.com/img/document/146518858/298x396/5336e80001/1374990317?v=1","title":"JavaScript Curs","short_title":"JavaScript Curs","author":"Muj Adrian Sebastian","tracking":{"object_type":"document","object_id":146518858,"track":"flattened_recommender","doc_uuid":"U62x/9qndeHpXCOt/nDfhr4W7WI="},"url":"https://www.scribd.com/document/146518858/JavaScript-Curs","top_badge":null},"152766856":{"type":"document","id":152766856,"thumb_url":"https://imgv2-1-f.scribdassets.com/img/document/152766856/149x198/ab5bda98c4/1446113592?v=1","retina_thumb_url":"https://imgv2-1-f.scribdassets.com/img/document/152766856/298x396/a229cedd8f/1446113592?v=1","title":"Visual Basic","short_title":"Visual Basic","author":"Ciprian Harbuz","tracking":{"object_type":"document","object_id":152766856,"track":"flattened_recommender","doc_uuid":"pmiRuTbP8OTGNhMmwcnFqpOArUU="},"url":"https://www.scribd.com/document/152766856/Visual-Basic","top_badge":null},"164714148":{"type":"document","id":164714148,"thumb_url":"https://imgv2-2-f.scribdassets.com/img/document/164714148/149x198/5776f4216e/1388569608?v=1","retina_thumb_url":"https://imgv2-1-f.scribdassets.com/img/document/164714148/298x396/ede3b00676/1388569608?v=1","title":"clusterguide-v3.0","short_title":"clusterguide-v3.0","author":"Roxana Branzoi","tracking":{"object_type":"document","object_id":164714148,"track":"flattened_recommender","doc_uuid":"+Hp9y6kfo+osQuYxiePmE98MYKY="},"url":"https://www.scribd.com/document/164714148/clusterguide-v3-0","top_badge":null},"167831190":{"type":"document","id":167831190,"thumb_url":"https://imgv2-1-f.scribdassets.com/img/document/167831190/149x198/437ab8d0bf/1406570885?v=1","retina_thumb_url":"https://imgv2-2-f.scribdassets.com/img/document/167831190/298x396/e1a727691f/1406570885?v=1","title":"Curs1_Introducere (1)","short_title":"Curs1_Introducere (1)","author":"Roxana Branzoi","tracking":{"object_type":"document","object_id":167831190,"track":"flattened_recommender","doc_uuid":"uSkVm9kIbuWtG4POfdWuFvHi83Q="},"url":"https://www.scribd.com/doc/167831190/Curs1-Introducere-1","top_badge":null},"167831688":{"type":"document","id":167831688,"thumb_url":"https://imgv2-2-f.scribdassets.com/img/document/167831688/149x198/a06c8b1a9c/1379049634?v=1","retina_thumb_url":"https://imgv2-2-f.scribdassets.com/img/document/167831688/298x396/3448325234/1379049634?v=1","title":"Modul 4 Excel2007_RO (1)","short_title":"Modul 4 Excel2007_RO (1)","author":"Roxana Branzoi","tracking":{"object_type":"document","object_id":167831688,"track":"flattened_recommender","doc_uuid":"Zu56gdeaEBiBLjf186NBXR4UHtc="},"url":"https://www.scribd.com/doc/167831688/Modul-4-Excel2007-RO-1","top_badge":null},"170198555":{"type":"document","id":170198555,"thumb_url":"https://imgv2-2-f.scribdassets.com/img/document/170198555/149x198/cc9f183498/1412189887?v=1","retina_thumb_url":"https://imgv2-1-f.scribdassets.com/img/document/170198555/298x396/ec25c5b13e/1412189887?v=1","title":"laborator1_2011","short_title":"laborator1_2011","author":"Roxana Branzoi","tracking":{"object_type":"document","object_id":170198555,"track":"flattened_recommender","doc_uuid":"RLqvYrHrOFzzLcWN7GJY7xcUm68="},"url":"https://www.scribd.com/doc/170198555/laborator1-2011","top_badge":null},"170861389":{"type":"document","id":170861389,"thumb_url":"https://imgv2-2-f.scribdassets.com/img/document/170861389/149x198/44cf9c1207/1393509359?v=1","retina_thumb_url":"https://imgv2-1-f.scribdassets.com/img/document/170861389/298x396/58e199d5c2/1393509359?v=1","title":"Curs JAvaScript","short_title":"Curs JAvaScript","author":"Andrei Ciobanu","tracking":{"object_type":"document","object_id":170861389,"track":"flattened_recommender","doc_uuid":"etr/ZT+3eB05hIGx3rW6nyWD1IA="},"url":"https://www.scribd.com/document/170861389/Curs-JAvaScript","top_badge":null},"174099634":{"type":"document","id":174099634,"thumb_url":"https://imgv2-2-f.scribdassets.com/img/document/174099634/149x198/e20db8f525/1429443665?v=1","retina_thumb_url":"https://imgv2-1-f.scribdassets.com/img/document/174099634/298x396/1c283aac93/1429443665?v=1","title":"jQuery_ro","short_title":"jQuery_ro","author":"Eric Myers","tracking":{"object_type":"document","object_id":174099634,"track":"flattened_recommender","doc_uuid":"ia4Lf1aOPCUt7ghQIVgeVH+ZPm4="},"url":"https://www.scribd.com/document/174099634/jQuery-ro","top_badge":null},"195786289":{"type":"document","id":195786289,"thumb_url":"https://imgv2-1-f.scribdassets.com/img/document/195786289/149x198/f453fdc0bc/1388833618?v=1","retina_thumb_url":"https://imgv2-2-f.scribdassets.com/img/document/195786289/298x396/7b10cf7058/1388833618?v=1","title":"PW C07 JavaScript Obiectele Navigatorului","short_title":"PW C07 JavaScript Obiectele Navigatorului","author":"denisaprovizoriu","tracking":{"object_type":"document","object_id":195786289,"track":"flattened_recommender","doc_uuid":"HpWKW6BatNZWdtucCOPz51AF+jw="},"url":"https://www.scribd.com/doc/195786289/PW-C07-JavaScript-Obiectele-Navigatorului","top_badge":null},"195787126":{"type":"document","id":195787126,"thumb_url":"https://imgv2-1-f.scribdassets.com/img/document/195787126/149x198/8e2e2f2f6b/1388833882?v=1","retina_thumb_url":"https://imgv2-2-f.scribdassets.com/img/document/195787126/298x396/48aa635d38/1388833882?v=1","title":"Javascript Ajax","short_title":"Javascript Ajax","author":"denisaprovizoriu","tracking":{"object_type":"document","object_id":195787126,"track":"flattened_recommender","doc_uuid":"J/QMloZCHzwVZPwPz8/+bttnjBg="},"url":"https://www.scribd.com/doc/195787126/Javascript-Ajax","top_badge":null},"248612941":{"type":"document","id":248612941,"thumb_url":"https://imgv2-1-f.scribdassets.com/img/document/248612941/149x198/8824cdd305/1440061222?v=1","retina_thumb_url":"https://imgv2-2-f.scribdassets.com/img/document/248612941/298x396/6f956258cf/1440061222?v=1","title":"Javascript","short_title":"Javascript","author":"luncas","tracking":{"object_type":"document","object_id":248612941,"track":"flattened_recommender","doc_uuid":"F5+eQRww5PaKRA6K9Iw3vwt+WR4="},"url":"https://www.scribd.com/document/248612941/Javascript","top_badge":null},"288312034":{"type":"document","id":288312034,"thumb_url":"https://imgv2-1-f.scribdassets.com/img/document/288312034/149x198/e5019a7aa0/1449557977?v=1","retina_thumb_url":"https://imgv2-1-f.scribdassets.com/img/document/288312034/298x396/6c1f69eed7/1449557977?v=1","title":"JavaScript","short_title":"JavaScript","author":"Aasfsadfg Aasdgsadg","tracking":{"object_type":"document","object_id":288312034,"track":"flattened_recommender","doc_uuid":"qgdOOMVdXTKheF/CTELSvQTviiw="},"url":"https://www.scribd.com/doc/288312034/JavaScript","top_badge":null},"319606438":{"type":"document","id":319606438,"thumb_url":"https://imgv2-2-f.scribdassets.com/img/document/319606438/149x198/b712e6ab78/1469774155?v=1","retina_thumb_url":"https://imgv2-1-f.scribdassets.com/img/document/319606438/298x396/4dbf747e9a/1469774155?v=1","title":"Adaugarea JavaScript intr-o pagina HTML","short_title":"Adaugarea JavaScript intr-o pagina HTML","author":"Ion Temciuc","tracking":{"object_type":"document","object_id":319606438,"track":"flattened_recommender","doc_uuid":"ZNw+g5osrJcVIpSFnnXdSKxmRVY="},"url":"https://www.scribd.com/document/319606438/Adaugarea-JavaScript-intr-o-pagina-HTML","top_badge":null}}},"seo_roadblock_props_path":"/doc-page/seo-roadblock-props/223951111","signup_context":null,"toolbar":{"search_path":"/search-4gen?allowed_pages=1%2C2%2C3%2C33%2C34%2C35%2C65%2C66%2C67%2C102%2C103%2C104&auth_token=qeh4DOC4LSSvZTSyd5Siw03KriM%3D&authenticity_token=w%2Bm%2BDknxYa9cy1R%2F80qqieXM2hrIxMdmSWYTDAbXZ2oUiZi5%2B%2BiRjFa%2BUhuECStqZDSuwu5cz1Cg2Qsa4529uw%3D%3D&expires=1540396486&wordDocumentId=223951111&wordUploadId=228287882"},"renewal_nag_props":null}-->