Diferențe

Aici sunt prezentate diferențele dintre versiunile selectate și versiunea curentă a paginii.

Link către această vizualizare comparativă

--- module:11-basic-web-dev:lectie-09 [2014/11/14 19:49]
astoican
+++ module:11-basic-web-dev:lectie-09 [2017/02/18 15:10] (curent)
giorgiana.vlasceanu [Task-uri]
@@ Linia 2: / Linia 2: @@
 ====Tutorial====
-În lecția de astăzi vom învătă câteva evenimente din JavaScript. În lecția precedentă am învățat deja de evenimentul **onClick** care specifica ce trebuie să se întâmple când se dă click pe un element din pagina HTML.
+În lecția de astăzi vom învătă câteva evenimente din JavaScript. În lecția precedentă am învățat deja de evenimentul **onClick** care specifica ce trebuie să se întâmple când se dă click pe un element din pagina **HTML**.
 Astăzi vom continua să învățăm despre evenimentele:
 *onMouseOver
@@ Linia 21: / Linia 21: @@
 ====Evenimentul onDblClick====
 Evenimentul **onDblClick** este identic cu **onClick**, singura diferență constând în faptul că acțiunea specificată se realizează când se apasă dublu click pe elementul respectiv în loc de click simplu.
+====Evenimentele onMouseOver și onMouseOut====
+**onMouseOver ** - Acționează când se poziționează mouse-ul deasupra unui link sau unei imagini.
+**onMouseOut** - Acționează când se mută mouse-ul de pe un link sau o imagine.
+Exemplu:
+<html><p data-height="268" data-theme-id="0" data-slug-hash="raNpxm" data-default-tab="result" data-user="andreeas" class='codepen'>See the Pen <a href='http://codepen.io/andreeas/pen/raNpxm/'>raNpxm</a> by andreea (<a href='http://codepen.io/andreeas'>@andreeas</a>) on <a href='http://codepen.io'>CodePen</a>.</p>
+<script async src="//assets.codepen.io/assets/embed/ei.js"></script></html>
+====Evenimentul onMouseMove====
+Acționează când se mișcă mouse-ul.
+Exemplu:
+<html><p data-height="268" data-theme-id="0" data-slug-hash="dPyJXq" data-default-tab="result" data-user="andreeas" class='codepen'>See the Pen <a href='http://codepen.io/andreeas/pen/dPyJXq/'>dPyJXq</a> by andreea (<a href='http://codepen.io/andreeas'>@andreeas</a>) on <a href='http://codepen.io'>CodePen</a>.</p>
+<script async src="//assets.codepen.io/assets/embed/ei.js"></script></html>
+====Evenimentele onMouseDown si onMouseUp====
+**onMouseDown** - Acționează când ținem apăsat unul din butoanele mouse-ului pe un document, buton sau link.
+**onMouseUp** - Acțiunea se execută atunci când este eliberat degetul de pe unul din butoanele mouse-ului.
+Exemplu:
+<html><p data-height="108" data-theme-id="0" data-slug-hash="dPyJWQ" data-default-tab="result" data-user="andreeas" class='codepen'>See the Pen <a href='http://codepen.io/andreeas/pen/dPyJWQ/'>dPyJWQ</a> by andreea (<a href='http://codepen.io/andreeas'>@andreeas</a>) on <a href='http://codepen.io'>CodePen</a>.</p>
+<script async src="//assets.codepen.io/assets/embed/ei.js"></script></html>
+====Evenimentul onFocus====
+Acțiunea apare când este activat un obiect câmp: casetă password, câmp text, bloc de text, dintr-un formular HTML.
+Exemplu:
+<html><p data-height="108" data-theme-id="0" data-slug-hash="JojMyZ" data-default-tab="result" data-user="andreeas" class='codepen'>See the Pen <a href='http://codepen.io/andreeas/pen/JojMyZ/'>JojMyZ</a> by andreea (<a href='http://codepen.io/andreeas'>@andreeas</a>) on <a href='http://codepen.io'>CodePen</a>.</p>
+<script async src="//assets.codepen.io/assets/embed/ei.js"></script></html>
+====Evenimentul onBlur====
+Este inversul lui onFocus, este declanșat atunci când un obiect nu mai este activ, prin trecerea la o alta resursă.
+Exemplu:
+<html><p data-height="108" data-theme-id="0" data-slug-hash="bNGaoV" data-default-tab="result" data-user="andreeas" class='codepen'>See the Pen <a href='http://codepen.io/andreeas/pen/bNGaoV/'>bNGaoV</a> by andreea (<a href='http://codepen.io/andreeas'>@andreeas</a>) on <a href='http://codepen.io'>CodePen</a>.</p>
+<script async src="//assets.codepen.io/assets/embed/ei.js"></script></html>
+====Evenimentul onChange====
+Acțiunea apare când se modifică conținutul unui câmp dintr-un formular HTML (o parolă, text, bloc de text) și când acesta pierde focalizarea.
+Exemplu:
+<html><p data-height="108" data-theme-id="0" data-slug-hash="ogNpGQ" data-default-tab="result" data-user="andreeas" class='codepen'>See the Pen <a href='http://codepen.io/andreeas/pen/ogNpGQ/'>ogNpGQ</a> by andreea (<a href='http://codepen.io/andreeas'>@andreeas</a>) on <a href='http://codepen.io'>CodePen</a>.</p>
+<script async src="//assets.codepen.io/assets/embed/ei.js"></script></html>
+==== Task-uri ====
+. Creați un dreptunghi și un pătrat. Când mouse-ul este deasupra dreptunghiului, se va colora în albastru. Iar când mouse-ul este desupra pătratului, se va colora în galben. Altfel, rămân albe.
+. Folositi **onMouseDown** și **onMouseUp** pentru a schimba o imagine cu alta, atunci când se apasă pe mouse.
+. Creați o căsuță de scris cu mai multe linii. Folosiți evenimentul **onBlur** pentru a transforma toate literele în litere mici.
+. Creați un vector de string-uri cu link-uri de poze. Folosiți functia **Math.random()** pentru a alege un link din vector.
+Odată cu mișcarea mouse-ului se va schimba aleator imaginea background-ului.
+. Folisiți **onFocus** pe o căsuță de scris cu mai multe linii. Acest eveniment va schimba culoarea căsuței și va adăuga un text.
+Culoarea se va schimba random. Vezi exemplul de la punctul **Evenimentul onMouseMove**
+. Folosiți **onChange** pe un element de tip select care conține nume de eroi. Dacă este selectat eroul preferat, atunci se va apărea o fereastră de tip **alert* cu mesajul: "Ai ghicit eroul meu preferat", altfel se va afișa alt mesaj.

Digital Kids

Unelte utilizator

Unelte site

Diferențe

Unelte pagină