PW5 JavaScript

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
2
Obiective
Introducere n JavaScript i a noiunilor de
programare pe care limbajul le suport
Exist numeroase documente i cri
publicate (inclusiv n limba romn) care
conin informaii suplimentare.
Prezentm n continuare doar o trecere n
revist a limbajului.
Curs Programare Web, anul 4 C5 Curs 5
3
Sumar
JavaScript fundamente
JavaScript i HTML - gestiunea simpl a
evenimentelor
Exemple JavaScript
Mai multe despre JavaScript
JavaScript i AJAX
4
JavaScript
Fundamentele Limbajului
Despre JavaScript
JavaScript nu este Java, nici mcar nu este nrudit
cu Java
Numele original al JavaScript a fost LiveScript
Numele a fost modificat cnd Java a devenit popular
Astzi cnd Microsoft nu mai ndrgete Java propriul
nume acordat dialectului JavaScript este Active Script
Instruciunile n JavaScript seamn cu instruciuni
din Java deoarece ambele limbaje au mprumutat
multe elemente chiar din limbajul C
JavaScript este relativ uor de nvat de ctre
programatorii familiarizai cu Java
Totui JavaScript este un limbaj de sine stttor, complet
i complex
Despre JavaScript
JavaScript este rar folosit pentru a scrie
programe complete
Mici blocuri de instruciuni JavaScript sunt n general
folosite pentru a aduga funcionalitate paginilor HTML
JavaScript este adesea folosit n conjuncie cu
formulare HTML
JavaScript este ntr-o bun msur independent
de platform (nu SO, ct mai ales de browser)
7
Folosirea JavaScript ntr-un browser
Codul JavaScript este inclus ntre taguri <script>:
<script type="text/javascript">
document.write("<h1>Hello World!</h1>") ;
</script>
Observaii:
Atributul type permite folosirea altor limbaje de scripting (chiar
dac JavaScript este limbajul implicit)
Acest exemplu simplu face acelai lucru ca a scrie <h1>Hello
World!</h1> n acelai loc n documentul HTML
Punct i virgul de la finalul instruciunii JavaScript este opional
Sfritul liniei marcheaz sfritul instruciunii, dac linia poate
fi interpretat ca o instruciune complet
Se poate folosi punct i virgul pentru separarea mai multor
instruciuni ce apar pe aceeai linie
Este indicat totui folosirea n permanen a caracterului punct
i virgul
8
JavaScript nu este ntotdeauna disponibil
Unele browsere mai vechi nu recunosc tag-ul script
Aceste browsere vor ignora tag-ul script dar vor afia ce este
inclus n interiorul tag-ului (codul JavaScript inclus)
Pentru a face aceste browsere s ignore coninutul putem folosi:

</script>
Caracterul , secvena // marcheaz un comentariu
JavaScript, ce ine pn la sfritul liniei respective
Unii utilizatori opresc JavaScript
Folosii <noscript>mesaj</noscript> pentru a afia un mesaj
indiferent dac n interiorul acestuia apare i cod JavaScript
9
Exemplu
<script language=javascript>

</script>
<noscript>
ciprian.dobre at cs
</noscript>
Rezultat
Demo 1
12
Unde apare codul JavaScript
Codul JavaScript poate apare fie n seciunea
<head>, fie n seciunea <body> a unui document
HTML
Funciile JavaScript ar trebui s fie definite n
seciunea <head>
Acest lucru ne asigur c funciile sunt ncrcate
chiar nainte ca ele s fie cerute
Codul JavaScript din <body> este executat atunci
cnd este ncrcat pagina
Unde apare codul JavaScript
Funciile JavaScript pot fi plasate i n fiiere
separate avnd n general extensia .js
<script src="myJavaScriptFile.js"></script>
Codul acesta se plaseaz n seciunea <head>
Un fiier extern .js permite folosirea aceluiai cod
JavaScript n mai multe pagini HTML
Fiierul extern .js nu poate conine la rndul su alt
tag <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 cnd respectivul
obiect este folosit
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 putei fi siguri, e mai indicat s evitai cu totul folosirea
valorilor in octal!
Valorile String pot fi delimitate prin caractere apostrof sau
ghilimele
String-urile pot conine \n (newline), \" (double quote), etc.
Valorile boolean sunt fie true, fie false
0, "0", stringul gol, undefined, null i NaN sunt false, restul
valorilor sunt true
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 conine valori de orice tip)
Exist doar dou scopuri ale variabilelor: local i global
Variabilele declarate ntr-o funcie sunt locale respectivei funcii
(accesibile numai din interiorul respectivei funcii)
Variabilele declarate n afara unei funcii sunt globale (accesibile de
oriunde din pagin)
Variabilele pot fi declarate implicit prin simpla adugare a
unei valori unor variabile
Variabilele declarate implicit sunt ntotdeauna globale
16
Operatori (1)
Majoritatea sintaxei JavaScript este mprumutat din C (i
seamn cu cea din Java):
Operatori aritmetici (toate numerele sunt n virgul
mobil):
+ - * / % ++ --
Operatori de comparaie:
< <= == != >= >
Operatori logici:
&& || !
Operatori la nivel de bii:
& | ^ ~ << >> >>>
Operatori de asignare:
+= -= *= /= %= <<= >>= >>>= &= ^= |=
17
Operatori (2)
Concatenare de string-uri:
+
Operatorul condiiomal:
condition ? value_if_true : value_if_false
Teste de egalitate:
== i != ncearc convertirea operatorilor la acelai
tip naintea efecturii testului
Nu ca n C sau Java: === i !== consider operanzii
inegali dac acetia sunt de tipuri diferite
Operatori suplimentari:
new typeof void delete
18
Comentarii
Comentariile sunt similare C sau Java:
ntre // i sfritul liniei
ntre /* i */
Comentariile de tip javadoc din Java, /** ...
*/, sunt tratate similar comentariilor de tip
/* ... */; ele nu au nici o semnificaie
special n JavaScript
Majoritatea sintaxelor de instruciuni JavaScript sunt
mprumutate din C
Atribuirea: greeting = "Hello, " + name;
Instruciunea compus:
{ statement; ...; statement }
Instruciunea If:
if (condition) statement;
if (condition) statement; else statement;
Instruciuni de iterare:
while (condition) statement;
do statement while (condition);
for (initialization; condition; increment) statement;
19
Instruciuni (1)
20
Instruciuni (2)
Instruciunea switch:
switch (expression) {
case label :
statement;
break;
case label :
statement;
break;
...
default : statement;
}
Alte instruciuni familiare:
break;
continue;
Instruciunea vid, precum;; sau { }
21
JavaScript vs. Java
Deja realizai c tii destul de multe despre
JavaScript
Pn acum am vzut aspecte ce sunt similare precum n
Java
JavaScript are unele construcii ce seamn cu
construciile corespondente din Java:
JavaScript folosete Obiecte i tipuri de date primitive
JavaScript folosete evenimente i gestiunea
evenimentelor (event handlers)
Gestiunea excepiilor n JavaScript este aproape similar
cu cea din Java
Totui JavaScript nu este Java
Totui JavaScript are unele construcii diferite de
cele din Java:
Numele de variabile nu au tip: tipul unei variabile
depinde de valoarea curent pe care respectiva
variabila o deine
Obiectele i array-urile sunt definite ntr-o manier
diferit de cea din Java
JavaScript are instruciunea with i o nou form a
instruciunii for
Gestiunea exceptiilor in JavaScript este aproape la
fel ca cea din Java:
throw expresie creeaz i arunc o excepie
expresie este valoarea excepiei i poate fi de orice tip
(adesea este un string)
try {
instructiuni
} catch (e) { // Atenie: nu avem declaraie de tip pentru e
instructiuni pentru tratarea exceptiei
} finally { // opional, similar Java
codul executat intotdeauna
}
Folosind aceast abordare exist o singur clauz catch
23
Gestiunea excepiilor (1)
24
Gestiunea excepiilor (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
25
Obiecte
n Java clasele descriu obiecte i toate instantele unei clase
au exact aceleai cmpuri i metode
Obiectele JavaScript sunt mai flexibile dect obiectele Java
JavaScript lucreaz cu object literals, scrii conform
urmtoarei sintaxe:
{ name1 : value1 , ... , nameN : valueN }
Exemplu:
car = {myCar: "Saturn", 7: "Mazda",
getCar: CarTypes("Honda"), special: Sales}
Cmpurile sunt myCar, getCar, 7 (este chiar un nume legal de
cmp) i special
"Saturn" i "Mazda" sunt cmpuri de tip String
CarTypes este un apel de funcie
Sales este o variabil ce a fost definit anterior
Exemplu de folosire: document.write("I own a " + car.myCar);
26
Trei moduri de a crea un obiect
1. Putei folosi un object literal:
var course = { name: PWeb", teacher: Ciprian Dobre" }
2. Putei folosi new pentru a crea un obiect blank
cruia s i adugai cmpuri ulterior:
var course = new Object();
course.name = PWeb";
course.teacher = Ciprian Dobre";
3. Putei 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");
27
Array
JavaScript permite definirea de tablouri, declarate
folosind paranteze drepte i virgule
Exemplu: color = ["red", "yellow", "green", "blue"];
Variabilele tablou sunt iniializate ncepnd de la poziia 0
color[0] are valoarea "red"
Dac folosim dou virgule succesive, variabila
tablou va avea un element empty n respectiva
poziie
Exemplu: color = ["red", , , "green", "blue"];
color are 5 elemente
Totui, o virgul la final este ignorat
Exemplu: color = ["red", , , "green", "blue,]; are tot 5 elemente
28
Patru moduri de a crea un array
1. Putei folosi un array literal:
var colors = ["red", "green", "blue"];
2. Putei folosi new Array() pentru a crea un tablou gol:
var colors = new Array();
Putei aduga elemente ulterior n acel tablou:
colors[0] = "red"; colors[2] = "blue"; colors[1]="green";
3. Putei folosi new Array(n) cu un singur argument numeric
pentru a crea un tablou avnd respectiva dimensiune
var colors = new Array(3);
4. Putei folosi new Array() cu dou sau mai multe
argumente pentru a crea un tablou coninnd respectivele
valori:
var colors = new Array("red","green", "blue");
var myArray = [];
var myArray = [];
Iniializare
Crearea unui tablou dimensionat deja
pentru 10 elemente:
var badArray = new Array(10);
vs.
Crearea unui tablou avnd un singur
element, cu valoarea 10:
var goodArray= [10];

</script>
<noscript>
problema cu JavaScript
</noscript>
Exemplu
Un alt exemplu
var myArray = [];
myArray[0] = 'January';
myArray[1] = 'February';
myArray[5] = 'March';
32
Lungimea unui tablou
Dac myArray este un tablou, lungimea acestuia este
obinute folosind myArray.length
Dimensiunea unui tablou poate fi modificat prin
adugarea de elemente peste lungimea curent a
acestuia
Exemplu: var myArray = new Array(5); myArray[10] = 3;
Tablourile sunt structuri de date risipite, spaiul este alocat
doar pentru elementele crora le-a fost cu asignat o
valoare
Exemplu: myArray[50000] = 3; este perfect OK
Indicii trebuie s fie ntre 0 i 2
32
-1
Similar ca n C i Java, nu exist tablouri bidimensionale;
dar exist tablou de tablou: myArray[5][3]
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 acelai cu car["myCar"]
Dac cunoatei numele unei proprieti putei
folosi notaia cu punct: car.myCar
Daca nu cunoatei numele proprietii dar l avei
ntr-o variabil (sau l putei calcula), folosii
notaia de tip array: car["my" + "Car"]
Stocarea datelor ntr-un tablou
Un tablou poate stoca orice: boolean, numere, string-uri,
funcii, obiecte, alte tablouri, chiar expresii regulate:
var myArray = [ 3, 'hello!', function() { return 5 }, { 'color':'blue',
'budget':25 }, /[e11]/i ];
document.writeln('3> '+myArray[3].color+'<br>');
document.writeln('3> '+myArray[3].budget+'<br>');
document.writeln('4> '+myArray[4].test(myArray[1])+'<br>');
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 numr de elemente la
finalul tabloului i crete dimensiunea acestuia
myArray.pop() nltur i ntoarce ultimul element al
tabloului i decrementeaz dimensiunea acestuia
myArray.toString() ntoarce un string coninnd
elementele tabloului, separate prin virgul
Exemplu
var myarray=[7, 40, 300];
myarray.sort();
// ordine lexicografica
document.writeln("0> "+myarray+"<br>");
myarray.sort(function(a, b) { return a - b; });
// ordine numerica
myarray.reverse();
// elementele in ordine inversa
Similar instruciunii iterative din Java for (type var :
collection)
Putei itera printre proprietile unui obiect folosind
for (variable in object) statement;
Exemplu: for (var prop in course) {
document.write(prop + ": " + course[prop]);
}
Posibil output: teacher: Ciprian Dobre
name: PWeb
Proprietile sunt accesate ntr-o ordine nedefinit
Dac adugai sau tergei proprieti obiectului din bucl este
nedefinit dac instruciunea iterativ va traversa i proprietile nou
definite sau nu
Tablourile sunt obiecte; aplicat unui tablou, forin va vizita
proprietile 0, 1, 2,
Observai c course["teacher"] este echivalent cu course.teacher
Trebuie s folosii paranteze drepte dac numele proprietii este
ntr-o variabil
37
Instruciunea for in
38
Instruciunea with
with (object) statement
Folosete object ca prefix implicit al variabilelor din
statement
Dac cmpurile accesate nu exist prefixul nu va fi
folosit
De exemplu, urmtoarele sunt echivalente:
with (document.myForm) {
result.value = compute(myInput.value) ;
}
document.myForm.result.value =
compute(document.myForm.myInput.value);
Instruciunea with este util atunci cnd avei de
fcut mai multe manipulri asupra unui acelai
obiect
Instruciunea with poate conduce ns la confuzii i din
acest motiv trebuie folosit cu atenie
39
Funcii
Funciile trebuie definite n seciunea <head> a
paginii HTML pentru a fi siguri c ele sunt ncrcate
primele
Sintaxa pentru definirea unei funcii este:
function name(arg1, , argN) { statements }
Funcia poate conine instruciuni de tipul return value;
Orice variabil declarat n interiorul unei funcii este
local respectivei funcii
Sintaxa pentru apelarea unei funcii este
name(arg1, , argN)
Parametrii simpli sunt transmii prin valoare,
obiectele sunt transmise prin referin
O expresie regulat poate fi scris n oricare din
urmtoarele forme:
Folosind un constructor, precum n re = new RegExp("ab+c")
Folosind slash-uri, precum n re = /ab+c/
Expresiile regulate sunt aproape la fel ca n Perl sau Java
(doar cteva elemente mai puin folosite lipsesc)
string.match(regexp) are rolul de a cuta n string apariii
ale regexp
ntoarce null dac nu este gsit 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 crui element de
pe poziia 0 reprezint textul ce se potrivete expresiei, iar restul
elementelor sunt subexpresiile paranterizate.
40
Expresii regulate
Exemplu
<head>
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>
Rezultat
Demo 2
44
JavaScript
JavaScript este un limbaj complex
Au fost prezentate doar elemente de la suprafaa
acestuia
JavaScript nu este total independent de platform
Trebuie s v ateptai ca pe diverse browsere codul s
se comporte n mod diferit
Scrierea i testarea programelor necesit un pic de efort
din partea echipei de dezvoltare
Browserele n general nu raporteaz erori
Nu v ateptai s primii multe mesaje ajuttoare care
s v ajute n munca de depanare a codului JavaScript
45
Quiz
Scriei codul corespunztor unei pagini
HTML n care s avei un obiect Car, un
constructor declarat n <head> i care s
afieze valoarea curent a cmpului type n
document.
Soluie
<head>
function obiectCar() {
this.type = Dacia
}
</script>
</head>
<body>
car = new obiectCar();
document.writeln(car.type);
</script>
</body>
47
JavaScript i HTML
Gestiunea Simpl a Evenimentelor
48
JavaScript i DOM
JavaScript se bazeaz pe un Document Object
Model (DOM) ce descrie structura paginii web
Nu reprezint acelai lucru ca XML DOM
Putei face multe lucruri nelegnd conceptul de
DOM
Putei folosi DOM pentru a accesa elementele paginii
Web
Putei capta evenimente fr s fii deloc familiarizai cu
conceptul DOM dar .
Avei nevoie de DOM pentru a face eventuale modificri
n pagina Web
49
Evenimente
Unele (dar nu toate) elementele paginii web
rspund la interactivitatea din partea utilizatorului
(keystrokes, mouse clicks) prin crearea de
evenimente
Diverse tipuri de elemente produc evenimente diferite
Browserele nu seamn nici cnd vine vorba de tipurile de
evenimente pe care le produc
Ne vom concentra pe evenimente ce in de elementele
specifice unor formulare HTML
Putei folosi handlere asociate unor elemente de
formulare HTML
Dac evenimentul nu este generat handlerul nu face
nimic
Un handler ar trebui s fie redus ca dimensiune
Majoritatea handlerelor apeleaz o funcie n care se produce
toat funcionalitatea specific evenimentului
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, avnd 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 declana o fereastr de pop-up de tip
alert cu un mesaj furnizat ca argument
51
Convenii de scriere
JavaScript este case sensitive
HTML nu este case sensitive
onclick="alert('You clicked the button!');"
Prile subliniate in de codul HTML
Stringul este cod JavaScript
Vei vedea adesea metoda onclick scris i sub forma
onClick
Conveniile de nume Java sunt mai uor de citit
Acest lucru este permis n HTML, dar dac este folosit n cod
JavaScript conduce automat la eroare
Observaie: Deoarece avem un string n interiorul
altui string avem nevoie de att varianta cu
ghilimele,ct i de cea cu apostroafe pentru
reprezentarea stringurilor
52
Evenimente comune
Majoritatea elementelor HTML produc urmtoarele
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 apsat cnd 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 cnd cursorul era nc
onMouseMove mouse-ul este mutat
n JavaScript, aceste funcii trebuie scrise cu litere mici
53
Exemplu: un rollover simplu
Urmtorul cod va face textul Hello
red atunci cnd cursorul mouse-ului trece
deasupra lui i
blue atunci cnd cursorul mouse-ului iese din
suprafaa elementului
<h1 onMouseOver="style.color='red';"
onMouseOut="style.color='blue';">Hello </h1>
Un rollover aplicabil unei imagini:
<img src="../Images/duke.gif"
width="55" height="68"
onMouseOver="src='../Images/duke_wave.gif';"
onMouseOut="src='../Images/duke.gif';">
Demo 3
55
Evenimente i gestionarea de evenimente (1)
Urmtoarele tabele sunt preluate de la:
http://developer.netscape.com/docs/manuals/js/client
/jsguide/index.htm
Eveniment Se aplic Apare atunci cnd Handler
Load Corpul documentului Utilizatorul ncarc pagina
n browser
onLoad
Unload Corpul documentului Utilizatorul prsete
pagina
onUnload
Error Imagini, ferestre Eroare la ncrcarea unei
imagini sau a unei ferestre
onError
Abort Imagini Utilizatorul renun la
ncrcarea unui imagini
onAbort
56
Eveniment Se aplic Apare atunci
cnd
Handler
KeyDown Documente, imagini,
legturi, zone text
Utilizatorul apas
o tast
onKeyDown
KeyUp Documente, imagini,
legturi, zone text
Utilizatorul
elibereaz o tast
onKeyUp
KeyPress Documente, imagini,
legturi, zone text
Utilizatorul apas
o tast
onKeyPress
Change Cmpuri text, zone text,
liste de selecie
Utilizatorul
modific valoarea
unui element
onChange
57
cnd
Handler
MouseDown Documente, butoane,
legturi
Utilizatorul
termin de
apsat un buton
de mouse
onMouseDown
MouseUp Documente, butoane,
legturi
Utilizatorul
elibereaz un
buton de mouse
onMouseUp
Click Butoane, butoane
radio, checkbox-uri,
butoane de submit,
butoane de reset,
legturi
Utilizatorul face
click de mouse
pe un element
din formular sau
o legtur
onClick
58
Evenimente si gestionare de evenimente (4)
MouseOver Legturi Utilizatorul mut
cursorul deasupra
unei legturi
onMouseOver
MouseOut Zone, legturi Utilizatorul mut
cursorul n afara
zonei unei imagini
sau legturi
onMouseOut
Select Cmpuri text, zone
text
Utilizatorul
selecteaz zona de
input a
elementului din
formular
onSelect
59
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
60
cnd
Handler
Focus Ferestre i toate
elementele unui
formular
Utilizatorul face
focus pe element
onFocus
Blur Ferestre i toate
elementele unui
formular
Utilizatorul mut
focusul pe alt
element
onBlur
Reset Formulare Utilizatorul face
click pe butonul
de Reset
onReset
Submit Formulare Utilizatorul face
click pe butonul
de Submit
onSubmit
61
napoi la DOM
Putei ataa handlere de evenimente elementelor HTML
avnd puine cunotine legate de DOM
Totui, pentru a schimba ceea ce este afiat n cadrul
paginii avei nevoie s cunoatei modul n care putei
referi diversele elemente ale paginii
DOM-ul este un standard W3C
Elementul de pe nivelul cel mai nalt (n cazul
paginii curente) este window, i orice altceva
descinde de la acesta
n DOM, toate variabilele se presupune ca pornesc cu
window.
Toate celelalte elemente pot fi accesate mergnd n
jos pornind de la acest element de nivel cel mai nalt
62
Ierarhia
DOM
Sursa:
http://sislands.com/coin70/week1/dom.htm
window
Fereastra curenta (nu se folosete direct prea des).
self
Acelai 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 rndul lor ferestre.
length
Numrul de frame-uri coninute n fereastra curent.
63
Cmpurile lui window (1)
64
Cmpurile lui window (2)
document
Documentul HTML ce este curent afiat n fereastr.
location
URL-ul documentului ce este curent afiat n fereastr.
Daca setai aceast proprietate la un nou URL, respectivul URL va fi
ncrcat n fereastra curent.
Apelnd location.reload() vei face refresh la fereastr.
navigator
O referin la obiectul Navigator (browser). Unele proprieti 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 afiat n zona de status a
ferestrei browserului. Poate fi modificat cu o simpl instruciune de
atribuire.
alert(string)
Afieaz un dialog ce conine string-ul primit ca
argument i un buton OK.
confirm(string)
Afieaz o fereastr de dialog coninnd string-ul primit
ca argument mpreun cu dou butoane Cancel i OK.
ntoarce true dac a fost apsat butonul OK i false
dac a fost apsat butonul Cancel.
prompt(string)
Afieaz un dialog de confirmare coninand string-ul
primit ca argument, un cmp de tip text i dou
butoane Cancel i OK.
ntoarce string-ul introdus de ctre utilizator daca a fost
apsat OK i null dac a fost apsat butonul Cancel.
65
Metodele lui window (1)
66
Metodele lui window (2)
open(URL)
Deschide o noua fereastr coninnd
documentul specificat de la adresa URL dat
ca argument.
close()
nchide o fereastr.
Trebuie s prefixai aceste cmpuri cu
document.
anchors[ ]
Un tablou de obiecte Anchor (obiecte
reprezentnd tag-uri de forma <a name=...>)
applets[ ]
Un tablou de obiecte Applet
Proprietile sunt cmpurile publice definite pentru
respectivele appleturi
Metodele sunt metodele publice ale appleturilor
67
Cmpurile lui document (1)
forms[ ]
Un tablou de elemente de tip Form
Dac documentul conine un singur formular, acesta
este ntors in forms[0]
images[ ]
Un tablou de obiecte Image
Pentru schimbarea unei imagini asignai un nou
URL proprietii src
links[ ]
Un tablou de obiecte Link
Un link are cteva proprieti, incluznd href, ce
conine URL-ul complet al legturii
68
Campurile lui document (2)
69
Campurile lui document (3)
bgColor
Culoarea de fundal a documentului
Poate fi schimbata oricnd
title
Un string read-only ce conine titlul
documentului
URL
Un string read-only ce conine adresa URL de
unde a fost ncrcat documentul
70
Cmpurile obiectului form
elements[ ]
Un tablou coninnd elementele formularului
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>
titlu = document.getElementById('titlu_doc');
</script>
// 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>
72
Exemple JavaScript
73
Obinerea datei
var d = new Date()
document.write(d.getDate() + "/")
document.write((d.getMonth() + 1) + "/")
document.write(d.getFullYear())
</script>
Rezultatul:
25/03/2010
74
Obinerea i formatarea datei
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
75
Obinerea unui numr aleator
Codul genereaz un numr aleator n
virgul mobil cuprins ntre 0 i 1:
document.write(Math.random())
</script>
Rezultatul:
0.728762788388911
76
Obinerea unei valori ntregi
aleatoare
Codul genereaz un numr aleator ntreg cuprins
ntre 0 i 10:
var max = 10;
number=Math.random()*max + 1;
document.write(Math.floor(number));
</script>
Rezultatul:
5
77
Afiarea unui mesaj de tip alert
Codul afieaz un mesaj de alert atunci cnd un
buton este apsat:
<form>
<input type="button" name="Submit"
value="Alert!
onclick="alert(Something happened!');">
</form>
78
Depanare
Urmtorul cod arat ce evenimente au fost
declanate atunci cnd utilizatorul a ntreprins
diverse aciuni
n seciunea <head> a paginii HTML definim:
<script>

</script>
Pentru fiecare element al formularului adugm
un handler pentru oricare eveniment (plauzibil)
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');"
>
Demo 4
81
JavaScript elemente
suplimentare
82
Suportul browserului
JavaScript funcioneaz pe aproape toate
browserele
Internet Explorer folosete JScript (referit n
meniuri ca Active Scripting), ce reprezint
dialectul Microsoft-ului de JavaScript
Browserele mai vechi nu suport unele construcii
JavaScript
Vom presupune suportul unui browser modern
Activarea i dezactivarea JavaScript:
Dac nu tii cum s facei asta din browser, vedei i
http://www.mistered.us/tips/javascript/browsers.shtml
83
Ce NU putei face
Pentru protecia vizitatorilor la paginile voastre,
folosind JavaScript nu putei:
Executa alte programe
S v conectai la alte computere, exceptnd
download-ul altor pagini HTML sau trimiterea de e-mail
S determinai ce alte site-uri a vizitat utilizatorul
Citi sau scrie fiiere locale
Totui, JScript n IE permite scripting ASP, modalitatea prin
care viermele foarte distructiv JS.Gigger.A@mm s-a rspndit
de exemplu
Implicit, Outlook Express permite ca mail-ul primit s ruleze
scripturi
Pentru a dezactiva scripting-ul n Outlook Express, vedei
http://support.microsoft.com/support/kb/articles/Q192/8/46.ASP
84
Numere
n JavaScript, toate numerele sunt de tip floating
point
Numere speciale predefinite:
Infinity, Number.POSITIVE_INFINITY rezultatul
mpririi unui numr pozitiv la zero
Number.NEGATIVE_INFINITY rezultatul mpririi unui
numr negativ la zero
NaN, Number.NaN (Not a Number) rezultatul
mpririi 0/0
NaN este diferit de orice, chiar i de sine nsui
Exist o funcie globala isNaN()
Number.MAX_VALUE cel mai mare numr
reprezentabil
Number.MIN_VALUE cel mai mic (apropiat de zero)
numr reprezentabil
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:
\0 NUL
\b backspace
\f form feed
\n newline
\r carriage return
\t horizontal tab
\v vertical tab
\' single quote
\" double quote
\\ backslash
\xDD Unicode hex DD
\xDDDD Unicode hex DDDD
86
Cteva 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 poziia primului caracter al substring n string-ul recipient
sau -1 daca nu este gsit
indexOf(substring, start)
ntoarce poziia primului caracter al substring n stringul dat ca
argument ncepnd de la poziia start, sau -1 dac nu este gsit
lastIndexOf(substring), lastIndexOf(substring, start)
Similar indexOf, dar caut string-ul ncepnd de la sfrit spre
nceput
87
Variabile
Orice variabil este o proprietate a unui obiect
Atunci cnd JavaScript pornete, 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 referinei 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
n Java, metodele sunt asociate cu obiecte
n JavaScript, o funcie este un obiect
Funciile pot fi recursive:
function factorial(n) {
if (n <= 1) return 1;
else return n * factorial(n - 1);
}
Funciile pot fi imbricate:
function hypotenuse(a, b) {
function square(x) { return x * x; }
return Math.sqrt(square(a) + square(b));
}
88
Funcii
Deoarece funciile 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;");
Funcia nu are nici un nume
Dar se poate asigna unei variabile i folosi respectivul
nume
Numele poate fi folosit pentru apelarea funciei in modul
uzual
Se pot construi funcii n mod dinamic n JavaScript (ele
sunt automat compilate)
Totui, compilarea este o activitate computaional-
intensiv
Funciile definite n acest fel sunt ntotdeauna globale
89
Constructorul Function()
90
Funcii
O funcie poate fi definit prin folosirea unui
constructor:
var f = new Function("x", "y", "return x * y;");
O funcie poate fi scris sub form literal,
precum n urmtorul exemplu:
var f = function(x, y) { return x * y; }
Aceast funcie nu este n mod necesar global
Pentru a scrie o funcie 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 funcia este creat
91
Nume de funcii
Numele unei funcii este o variabil ce
conine respectiva funcie
var square = function(x) { return x * x; };
var a = square(4); // a ia valoarea 16
var b = square; // b ia valoarea square
var c = b(5); // c ia valoarea 25
var d = [ b ]; // d este un tablou
var e = d[0](6); // e ia valoarea 36
92
Proprieti ale funciilor
Deoarece o funcie este un obiect i putei
i aduga proprieti
Proprietile funciilor sunt adesea o bun
alternativ la variabilele globale
Exemplu:
uniqueInteger.counter = 0;
function uniqueInteger() {
return uniqueInteger.counter++;
}
Proprietile funciilor sunt cumva similare
variabilelor statice din Java
O variabil este local unei funcii dac
Este un parametru formal al funciei
Este declarat cu var n interiorul funciei (e.g.
var x = 5)
Altfel, variabilele sunt globale
Mai exact, o variabil este global dac
Este declarat n afara oricrei funcii (cu sau
fr var)
Este declarat prin asignare n interiorul unei
funcii (e.g. x = 5)
93
Variabile locale i globale
94
Funcii i metode
Atunci cnd o funcie reprezint o proprietate a
unui obiect, o numim metod
O metod poate fi invocat fie
call(object, arg1, ..., argN) fie
apply(object, [arg1, ..., argN])
call i apply sunt definite pentru toate funciile
call primete orice numr de argumente
apply primete un tablou de argumente
Ambele permit invocarea funciei ca i cum ar fi o
metod a unui alt obiect, object
n interiorul unei funcii cuvntul cheie this se refer la
object
Exemplu
var x = 10;
var o = { x: 15 };
function f() {
alert(this.x);
}
f();
f.call(o);
Afieaz 10 (this = obiectul global)
Afieaz 15 (this = o)
Putem apoi transforma funcia ntr-o metod:
myPoint.dist = distance;
this n interiorul unei funcii se refer la myPoint,
deci putem spune:
document.write("The distance is " + myPoint.dist(6,
9));
Dac nu dorim s asociem permanent funcia 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)
97
JavaScript i AJAX
98
Ce este AJAX?
AJAX = Asynchronous JavaScript and XML
Grup de tehnologii ce permit o mai bun
interaciune 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 astzi
Google Suggests, Google & Yahoo! Maps
Amazon A9 Search
Flickr, BaseCamp, Kayak
Yahoo! AJAX Library
99
Exemplu Yahoo! Sports
100
Interaciunea Web Tradiional
Clientul face o cerere http
Web server
Serverul intoarce o noua pagina
101
Cum funcioneaz AJAX
Web server
Clientul face o cerere http pentru informatii
Serverul intoarce informatiile cerute
Mai multe cereri sunt servite
102
De ce ne intereseaz AJAX?
Permite construirea de aplicaii Rich
Internet Applications (RIA)
Permite interaciunea dinamic pe Web
mbuntete performanele
Actualizri real-time
Nu necesit plug-in-uri
103
Cod Simplu pentru Schimbarea Stilului
<style type="text/css">
.notice {
background-color:#FFFFCC;
}
.roInput {
border:none;
background-color:#FFFFFF;
}
</style>
// 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>
AJAX
Primul pas: crearea unei instane
if (window.XMLHttpRequest) {
reqObj = new XMLHttpRequest(); // Firefox, Safari, ...
} else if (window.ActiveXObject) { // ActiveX version
reqObj = new ActiveXObject("Microsoft.XMLHTTP");
// IE
}
Pasul doi: Ateptm primirea rspunsului
reqObj.onreadystatechange = function() {
processResponse(reqObj);
};
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
ctre server
Exemplu
reqObj.open('GET',
'http://www.example.com/example.xml', true);
AJAX
Pasul 4: Gestiunea rspunsului
function processResponse(reqObj) {
if (reqObj.readyState == 4) {// Received, OK
if (reqObj.status == 200) { // perfect!
}
else {
// there was a problem with the request
}
}
else {
// Wait...
}
}
Cuprins
Ce este jQuery?
Ce face jQuery?
Scurt istoric
Cum se foloseste?
jQuery API
Selectori
Atribute
Parcurgeri
Evenimente
Ajax
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
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
Scurt istoric
Public Development Phase - John Resig
anunta o noua biblioteca JS ce venea ca o
imbunatatire a Prototype. E lansata sub
numele de jQuery la 14 ianuarie 2006
jQuery 1.0 (August 2006) prima versiune
stabila; are deja implementata suport pentru
selectori CSS, tratare de evenimente si
interactiuni AJAX
jQuery 1.1 (January 2007) devine mai
compacta
jQuery 1.2 (September 2007) se scot
selectorii Xpath, se adauga evenimente legate
de namespace
Scurt istoric
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
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)
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");
Alti selectori
:lt si :gt
Alti selectori
Selectori Multipli
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
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");
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");
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
.resize() - ataseaza un handler
evenimentului de resize sau il
declanseaza;
Ajax
jQuery.ajax() face o cerere HTTP
asincrona la server
Ajax
.ajaxComplete() ataseaza un handler ce
se va apela dupa trimiterea cererii Ajax
Ajax
jQuery.post() -cerere HTTP POST
.serialize() encodeaza date dintr-un
formular pentru a fi trimise la server
Sumar
Fundamentele JavaScript noiuni de baz
ale limbajului i construciile specifice
acestuia
JavaScript i HTML - gestiunea simpl a
evenimentelor folosind DOM
Exemple JavaScript
Noiuni avansate de JavaScript funcii,
metode, obiecte, etc.
O introducere n JavaScript i AJAX

PW5 JavaScript

Încărcat de

Informații document

Drepturi de autor

Formate disponibile

Partajați acest document

Partajați sau inserați document

Opțiuni de partajare

Vi se pare util acest document?

Este necorespunzător acest conținut?

Drepturi de autor:

Formate disponibile

PW5 JavaScript

Încărcat de

Drepturi de autor:

Formate disponibile

Universitatea Politehnica Bucuresti - Facultatea de Automatica si Calculatoare

Curs Programare Web, anul 4 C5 Curs 5 1

S-ar putea să vă placă și