====== Lecția 9: JavaScript Continuare ====== ====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**. Astăzi vom continua să învățăm despre evenimentele: *onMouseOver *onMouseOut *onMouseMove *onMouseDown *onMouseUp *onDblClick *onFocus *onBlur *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**. onclick este un eveniment atât de mouse cât și al formularului. ====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:

See the Pen raNpxm by andreea (@andreeas) on CodePen.

====Evenimentul onMouseMove==== Acționează când se mișcă mouse-ul. Exemplu:

See the Pen dPyJXq by andreea (@andreeas) on CodePen.

====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:

See the Pen dPyJWQ by andreea (@andreeas) on CodePen.

====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:

See the Pen JojMyZ by andreea (@andreeas) on CodePen.

====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:

See the Pen bNGaoV by andreea (@andreeas) on CodePen.

====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:

See the Pen ogNpGQ by andreea (@andreeas) on CodePen.

==== Task-uri ==== 1. 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. 2. Folositi **onMouseDown** și **onMouseUp** pentru a schimba o imagine cu alta, atunci când se apasă pe mouse. 3. Creați o căsuță de scris cu mai multe linii. Folosiți evenimentul **onBlur** pentru a transforma toate literele în litere mici. 4. 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. 5. 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** 6. 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.