Sunteți pe pagina 1din 7

Referat de laborator nr.

8 Programare interactiv
Pn acum codul JavaScript din paginile web realizate rula de ndat ce pagina era ncrcat, cu pauz de
apel al unei funcii precum alert sau confirm. Dar, nu ntotdeauna se dorete ca rularea codului s fie de
ndat ce se ncarc pagina, ci dup un timp de ateptare sau ca rspuns la ceva ce face utilizatorul. Vom
folosi diverse moduri de modificare a momentului cnd va rula codul. Acest tip de programare se numete
programare interactiv, care ne permite s crem pagini web interactive care se schimb n timp i
rspund la aciuni ale utilizatorului.

1. ntrzierea codului cu setTimeout


n loc de a avea execuia unei funcii n JavaScript imediat, se poate opta pentru execuia acesteia dup o
anumit perioad de timp. ntrzierea unei funcii n acest mod se numete setarea unui timeout. Pentru
aceasta folosim funcia setTimeout ce are 2 argumente: funcia ce este apelat dup ce timpul a trecut
i perioada de timp de ateptare n milisecunde:

Modul n care putem folosi setTimeout pentru a afia o fereastr de dialog de tip alert:

La linia 1 am creat funcia timeUp, care deschide o fereastr de dialog de tip alert, ce afieaz textul
"Time is up!"
La linia 5 apelm setTimeout cu 2 argumente: funcia pe care dorim s o apelm (timeUp) i numrul
de milisecunde (3000) pe care l ateptm nainte de apelul funciei. De fapt, se ateapt 3 secunde i apoi
se apeleaz timeUp. Atunci cnd setTimeout(timeUp, 3000) este prima dat apelat, nu se
ntmpl nimic, dar dup 3 secunde timeUp este apelat i apare o alert. Observai c apelul lui
setTimeout ntoarce 1. Aceast valoare se numete timeout ID. Acesta este un numr ce este folosit
pentru a identifica acest timeout particular (adic, aceast ntrziere particular a apelului funciei).
Numrul actual returnat ar putea fi orice numr, deoarece este un identificator.

2. Anularea unui Timeout


Dac se apeleaz setTimeout din nou, se va obine un alt timeout ID. Putem folosi acest timeout ID cu
funcia clearTimeout pentru a opri acel timeout. Dac de exemplu, setai o alarm pentru a v
reaminti s lucrai exemplele din acest laborator ;-) dar le-ai realizat mai repede, vei dori s nchidei
acea alarm. Pentru a opri un timeout se folosete funcia clearTimeout pentru timeout ID returnat
de setTimeout:

Funcia doHomeworkAlarm ntoarce o fereastr de dialog de tip alert n care este afiat un mesaj.
Atunci cnd este apelat setTimeout(doHomeworkAlarm, 60000), se va executa acea funcie
dup 60.000 de milisecunde sau 60 de secunde. Pentru a anula timeout-ul folosim:

3. Apelul de mai multe ori a aceluiai cod cu setInterval


Funcia setInterval este ca setTimeout, cu excepia faptului c n mod repetat este apelat funcia
dup un pauze regulate sau intervale. De exemplu, dac se dorete reactualizarea unui ceas folosind
JavaScript, se poate folosi setInterval pentru a apela o funcie de actualizare la fiecare secund.
Funcia setInterval are 2 argumente: funcia pe care dorim s o apelm i lungimea intervalului n
milisecunde:

De exemplu, putem scrie un mesaj n consol la fiecare secund:

La linia 14 am creat o nou variabil numit contor i am setat-o la 1. Folosesc aceast variabil pentru
a ti numrul de secunde de cnd priveti consola ;-)
La linia 15 am creat o funcie numit mesaj. Aceast funcie afieaz un mesaj n care i spun de cte
secunde te uii n consol, apoi la linia 17 incrementeaz variabila contor.
La linia 20 apelez setInterval cu argumentele mesaj i 1000, adic se va apela funcia mesaj la
fiecare 1.000 de milisecunde. Aa cum setTimeout ntoarce un timeout ID, setInterval ntoarce
un interval ID, pe care l salvm n variabila intervalId.
Putem folosi acest interval ID pentru a opri executarea funciei mesaj create. Pentru asta folosim funcia
clearInterval:

4. Animarea elementelor cu setInterval


Folosim setinterval pentru a anima elemente n browser. Trebuie s crem o funcie care
mut/mic elemente de o mrime mic i apoi cu setInterval se fixeaz un interval scurt de timp.
Dac micrile se vor face suficient de mici i intervalul suficient de scurt, atunci animaiile vor arta foarte
bine. Vom anima poziia textuluidintr-un document HTML micndu-l pe orizontal. Crem un document
numit:
Interactiv.html:

Atunci cnd vei ncrca pagina, vei vedea heading-ul micndu-se pe ecran pe orizontal pn parcurge
200 pixeli i apoi sare la capt i pornete din nou micarea.

La linia 12 am creat variabila leftOffset, pe care o folosim pentru a poziiona headingul Programare
interactiv. Se ncepe cu valoarea 0, care nseamn c headingul va ncepe s se mite din stnga paginii.
La linia 13 am creat funcia moveHeading, pe care o apelm mai trziu cu setInterval. n interiorul
funciei moveHeading, la linia 14 se folosete $("#heading") pentru a selecta elementul cu id-ul
lui heading (elementul nostru h1) i se folosete metoda offset pentru a seta offset-ul stng al headingului, adic ct de departe s ajung din partea stng a ecranului. Metoda offset pentru un obiect
poate conine o proprietate left ce seteaz partea stng a lui offset pentru element, sau o proprietate
top ce seteaz partea de sus a lui offset pentru element. n exemplul de mai sus, folosesc proprietatea
left pe care o setez variabilei leftOffset.
La linia 15 incrementez variabila leftOffset cu 1. Pentru a ne asigura c heading-ul nu se mic prea
mult, la linia 16 se verific dac leftOffset este mai mare ca 200 i dac se ntmpl acest lucru, se
reseteaz cu 0.
n final, la linia 20, apelm setInterval cu argumentele funcia moveHeading i numrul 30 (pentru
30 milisecunde). Codul acesta apeleaz funcia moveHeading la fiecare 30 milisecunde, sau aproape de
33 de ori la fiecare secund. De fiecare dat, cnd moveHeading este apelat, variabila leftOffset
este incrementat, iar valoarea acesteia este folosit pentru a seta poziia elementului heading. Din cauz
c funcia este constant apelat i leftOffset este incrementat cu 1 de fiecare dat, heading-ul se
mic gradual pe ecran cu 1 pixel la fiecare 30 milisecunde.
Exerciiul 1:
Modificai animaia:
a) prin creterea incrementrii lui leftOffset
b) prin reducerea timpului pe care setInterval l ateapt ntre dou apeluri ale lui
moveHeading.
c) Cum ai putea dubla viteza cu care se mic headingul?

5. Rspunsul la interaciunile utilizatorilor


O modalitate de control a codului este folosind funciile setTimeout i setInterval. O alt
modalitate este rularea codului, doar atunci cnd utilizatorul face anumite aciuni, precum: click-ul,
introducerea datelor sau chiar micarea mouse-ului. Aceast modalitate permite utilizatorilor
interaciunea cu pagina web astfel nct aceasta s rspund n funcie de ceea ce fac acetia.
n browser, de fiecare dat cnd este realizat o aciune se declaneaz un eveniment, pe care l poi
asculta adugnd un handler de evenimente elementului unde s-a ntmplat. Un eveniment este modul
n care browser-ul spune: S-a ntmplat acest lucru, iar adugarea unui handler de eveniment este
modul n care spunem codului JavaScript: Dac acest eveniment se ntmpl acestui element, apeleaz
aceast funcie.

5.1.

Rspunsul la click-uri

Atunci cnd un utilizator face click pe un element n browser, acest lucru declaneaz un eveniment de
click. JQuery uureaz adugarea unui handler pentru un astfel de eveniment.
Clickuri.html:

La linia 12 am creat o funcie clickHandler cu un singur argument event. Atunci cnd este apelat
aceast funcie, argumentul event va fi un obiect ce conine informaie despre evenimentul de click,
adic despre locaia click-ului. La linia 13, n interiorul funciei handler, am folosit console.log pentru
a afia proprietile pageX i pageY ale obiectului event. Aceste proprieti ne ofer coordonatele x i
y ale evenimentului, cu alte cuvinte ele ne spun unde s-a ntmplat click-ul n pagin.
La linia 15 am activat handler-ul pentru click-uri. Codul $("h1") selecteaz elementul h1 i apelarea
$("h1").click(clickHandler) nseamn: Atunci cnd se ntmpl click pe elementul h1,
apeleaz funcia clickHandler pentru obiectul event. n acest caz, click handler preia informaii
despre obiectul event pentru a afia coordonatele x i y ale locaiei click-ului.
ncrcnd pagina n browser, de fiecare dat cnd este realizat un click pe heading, se va afia o nou linie
n consol care va arta dou numere: coordonatele x i y ale locaiei click-ului.
Poziia 0 a coordonatelor x i y este colul din stnga sus al ecranului. X-ul crete pe msur ce ne micm
ctre dreapta iar Y-ul pe msur ce ne micm n josul paginii.

5.2.

Evenimentul de micare a mouse-ului

Evenimentul de micare a mouse-ului este declanat de fiecare dat cnd se mic mouse-ul:
Mouse.html:

La linia 12 am adugat un handler pentru evenimentul mousemove folosind


$("html").mousemove(handler). n acest caz, handler este ntreaga funcie care apare dup
mousemove i nainte de nchiderea tag-ului </script>. Folosim $("html")pentru a selecta
elementul html astfel nct handler-ul este declanat de micrile mouse-ului care apar oriunde n
pagin. Funcia care apare n paranteze va fi apelat de fiecare dat cnd utilizatorul mic mouse-ul.
La linia 13 n interiorul funciei am selectat elementul heading i am apelat metoda offset pentru el.
Aa cum am mai spus, obiectul pentru care este apelat offset poate avea proprieti, n acest caz am
setat proprietatea left la event.pageX i proprietatea top la event.pageY. De fiecare dat cnd

se mic mouse-ul, heading-ul se va mica pn la acea locaie, cu alte cuvinte oriunde se mic mouse-ul
heading-ul l va urma.
Exercitiul 2:
Modificai programul din Mouse.html astfel nct n loc ca heading-ul s urmreasc mouse-ul, headingul va urmri doar click-urile. Oriunde vei face click n pagin, heading-ul ar trebui s se mite pn la acea
locaie.
Exerciiul 3:
Creai propria animaie: Folosii setInterval pentru a anima un element h1 heading n pagina web
ntr-un ptrat. Ar trebui s se mite 200 pixeli la dreapta, 200 pixeli n jos, 200 pixeli la stnga, 200 pixeli
n sus i apoi s nceap din nou.
Exerciiul 4:
Modificai codul de la exerciiul 3 adugnd un click handler pentru elementul h1 care ntrerupe animaia.
Putei folosi funcia clearInterval.
Exerciiul 5:
Modificai codul de la exerciiul 4 astfel nct de fiecare dat cnd un utilizator face click pe heading, acesta
n loc s se opreasc i mrete viteza. Actualizai textul din heading pentru a arta de cte ori s-a fcut
click pe el (a fost apsat). Atunci cnd se ajunge la 10 click-uri animaia s se opreasc i s se afieze
textul: AI CTIGAT!!