Unelte utilizator

Unelte site


module:11-basic-web-dev:lectie-09

Diferențe

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

Link către această vizualizare comparativă

Both sides previous revision Previous revision
Next revision
Previous revision
Next revision Both sides next revision
module:11-basic-web-dev:lectie-09 [2014/11/14 19:45]
astoican
module:11-basic-web-dev:lectie-09 [2014/11/14 20:19]
astoican
Linia 2: Linia 2:
  
 ====Tutorial==== ====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:​ Astăzi vom continua să învățăm despre evenimentele:​
 *onMouseOver *onMouseOver
Linia 14: Linia 14:
 *onChange *onChange
  
 +Evenimentele **onmousedown**,​ **onmouseup**,​ **onmousemove**,​ **onmouseover**,​ **onmouseout**,​ **ondblclick** se numesc **evenimente de mouse**, deoarece se realizează în funcție de interacțiunea utilizatorului cu mouse-ul.
 +Evenimentele **onfocus**,​ **onblur**, **onchange** sunt **evenimente ale formularelor și elementelor acestora**.
 +
 +<note tip>​onclick este un eveniment atât de mouse cât și al formularului.</​note>​
 +
 +====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====
module/11-basic-web-dev/lectie-09.txt · Ultima modificare: 2017/02/18 15:10 de către giorgiana.vlasceanu