Digital Kids

Această pagină poate fi doar citită. Poți vedea sursa, dar nu poți modifica pagina. Consultă administratorul dacă ești de părere că ceva este în neregulă.
====== 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**.

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

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.
Digital Kids

Unelte utilizator

Unelte site

Unelte pagină
