Curs Javascript


Evenimentele sunt actiuni efectuate de utilizator in pagina web.
De exemplu, click-ul sau pozitionarea cursorului pe un element, scrierea intr-o caseta text input, sau derularea paginii, sunt evenimente efectuate de utilizator.
Pentru a putea executa un anumit cod JS cand un eveniment e declansat, JavaScript contine asa numitele 'event handlers' (manipulatoare de evenimente), precum: click, mouseover, keypress, scroll, etc.


- O lista cu evenimente JavaScript grupate pe categorii gasiti la pagina de la adresa:
marplo.net/javascript/lista-evenimente-js


Inregistrare event handlers

Metoda veche de a executa anumite instructiuni, sau o functie cand un eveniment e declansat, e prin adaugarea acestuia in tag-ul HTML in care evenimentul trebuie detectat.
De exemplu, cand un utilizator apasa click pe acest link, 'onclick' detecteaza aceasta actiune si apeleaza functia oFunctie():

<a href='#' onclick='oFunctie();' title='Text'>Link</a>

• Se pot detecta evenimente fara a-le adauga in tag-ul HTML, ci direct in codul JavaScript, folosind aceasta sintaxa:
function funcName(ev){
 // ev reprezinta obiectul cu evenimentul declansat
 //codul functiei
}

elm.event = funcName;
Unde elm reprezinta elementul HTML la care se adauga evenimentul 'event'.
La definire, functia funcName poate avea un parametru (aici 'ev'); si reprezinta obiectul cu evenimentul care apeleaza functia. Observati ca aceasta se apeleaza doar cu numele, fara paranteze rotunde.

- Exemplu, la click pe un anumit DIV, e afisata o fereastra Alert cu ID-ul acelui Div:
<h4>Exemplu onclick</h4>
<div id='dv_1' style='background:#a8eda9; cursor:pointer; padding:8px; 12px; width:125px'>Click here</div>

<script>
var elm = document.getElementById('dv_1'); // preia elementul

// functie executata cand se produce evenimentul
function oFunctie(ev){
 // ev.target reprezinta elementul care a declansat evenimentul
 let id = ev.target.id;
 alert('DIV id: '+id);
}

// inregistrare event onclick
elm.onclick = oFunctie;
</script>

Evenimente cu functie anonima

Functia apelata la declansarea evenimentului poate fi creata direct in expresia de inregistrare a eveniment.
Sintaxa:

elm.event =(ev)=>{
 // ev reprezinta obiectul cu evenimentul declansat
 //codul functiei
};
- Iata exemplu anterior, aici cu functie anonima:
<h4>Exemplu onclick cu functie anonima</h4>
<div id='dv_1' style='background:#a8eda9; cursor:pointer; padding:8px; 12px; width:125px'>Click here</div>

<script>
var elm = document.getElementById('dv_1'); // preia elementul

// inregistrare event onclick
elm.onclick =(ev)=>{
 // ev.target reprezinta elementul care a declansat evenimentul
 let id = ev.target.id;
 alert('DIV id: '+id);
};
</script>

Stergere detectare eveniment cu 'on'

• Pentru a anula detectarea unui eveniment care e atasat la elementul HTML (cele adaugate cu prefixul 'on'), i-se atribuie valoarea null.
element.event_handler = null;

- Exemplu. Cand utilizatorul plaseaza cursorul peste DIV-ul cu id='dvid', se afiseaza o fereastra Alert, apoi se sterge detectarea 'onmouseover' la acel element, astfel, cand utilizatorul muta a doua oara cursorul peste acel DIV nu se intampla nimic.
<h4>Exemplu anulare eveniment</h4>
<p>Dupa prima emitere a evenimentului 'onmouseover', acesta e anulat.</p>
<div id='dvid' style='background:#a8eda9; cursor:pointer; padding:8px; 12px; width:125px'>Mutati cursorul aici.</div>

<script>
var elm = document.getElementById('dvid'); // preia elementul

// inregistrare onmouseover
elm.onmouseover =(ev)=>{
 alert('Plasati inca o data cursorul pe acel text');
 elm.onmouseover = null; // sterge inregistrarea evenimentului
};
</script>

Cuvantul this

In JavaScript, cuvantul this (acesta) reprezinta mereu 'proprietarul' functiei. In cazul evenimentelor, this reprezinta elementul HTML care declanseaza evenimentul.

- Exemplu. La click pe tag-ul cu id='dvid', JavaScript preia continutul din el, il copie intr-un <textarea>, apoi ii modifica culoarea background.

<h4>Exemplu cu this</h4>
<p>La clic pe Div, copie continutul in textarea apoi schimba culoarea background.</p>
<div id='dvid' style='background:#a8eda9; cursor:pointer; width:125px; padding:8px 12px;'>Div, Exemplu cu this</div>
<textarea id='txta'></textarea>

<script>
var elm = document.getElementById('dvid');

// inregistrare onclick
elm.onclick = function(){
 // preia continutul HTML din elementul curent (cel ce declanseaza evenimentul)
 let cnt = this.innerHTML;
 document.getElementById('txta').value = cnt;

 // setare culoare background la elementul curent
 this.style.background ='#bebefe';
};
</script>

this si parametru event in functii arrow

Cuvantul this nu e recunoscut in functii arrow (definite cu: ()=>{} ) cu aceeasi valoare.
In functia arrow, this reprezinta obiectul parinte al functiei (in care e definita).
In functiile arrow (ca in toate celelalte functii) se poate folosi parametru event (aici definit cu 'ev'). Acesta contine un obiect cu evenimentul respectiv; si are o proprietate: target ce contine obiectul care a declansat acel eveniment.
- In functiile arrow se poate folosi urmatoarea sintaxa.

var elm = event.target;

- Iata exemplu precedent, aici cu functie arrow si parametru event (ev):
<h4>Exemplu cu functie arrow si parametru event</h4>
<p>La clic pe Div, copie continutul in textarea apoi schimba culoarea background.</p>
<div id='dvid' style='background:#a8eda9; cursor:pointer; width:125px; padding:8px 12px;'>Div, Exemplu cu event.target</div>
<textarea id='txta'></textarea>

<script>
var elm = document.getElementById('dvid');

// inregistrare onclick cu functie arrow
elm.onclick =(ev)=>{
 // preia continutul HTML din elementul care declanseaza evenimentul
 let cnt = ev.target.innerHTML;
 document.getElementById('txta').value = cnt;

 // setare culoare background la elementul declansator
 ev.target.style.background ='#bebefe';
};
</script>

Detectare eveniment cu addEventListener()

Exista inca un mod de a inregistra detectare de evenimente in JS, si anume cu metoda addEventListener().
La aceasta metoda evenimentul se adauga fara prefixul'on' ('click', 'mouseenter', 'mouseleave', ...), folosind urmatoarea sintaxa:

element.addEventListener('event', oFunctie, use_capture);
- event - e un sir cu tipul de eveniment ce trebuie detectat, fara prefixul 'on'.
- oFunctie - o functie accesata cand 'event' e declansat.
- use_capture - (optional) o valoare booleana (true sau false). Determina daca evenimentul trebuie executat in faza de capturare (true) sau in faza de 'bubbling' (false). Default e: false.

- Exemplu. Cand mouse-ul e deasupra unui element LI, capata o culoare de fundal verde, cand cursorul iese din zona acelui <li> se elimina culoarea de fundal.
<h4>Exemplu cu addEventListener()</h4>
<p>Miscati mouse-ul pe listele urmatoare.</p>
<ul>
 <li>WebDevelopment - //coursesweb.net </li>
 <li>Cursuri gratuite - //marplo.net </li>
 <li>Games - //gamv.eu </li>
</ul>

<script>
var elm_li = document.getElementsByTagName('li'); // preia toate tag-urile LI

// functie executata la mouseenter
function mEnter(ev){
 // seteaza o culoare de fundal
 ev.target.style.background ='#07da08';
}

// functie executata la mouseleave
function mLeave(ev){
 // sterge culoarea de fundal
 this.style.background ='none';
}

// parcurge obiectul cu elementele LI
for(var i=0; i<elm_li.length; i++){
 // inregistrare mouseenter si mouseleave la fiecare LI
 elm_li[i].addEventListener('mouseenter', mEnter);
 elm_li[i].addEventListener('mouseleave', mLeave);
}
</script>

Stergere evenimente inregistrate cu addEventListener()

• Pentru a anula detectare unui eveniment inregistrat cu addEventListener(), se foloseste metoda removeEventListener().
Sintaxa:
element.removeEventListener('event', oFunctie);
- oFunctie trebuie sa fie aceeai care e adaugata la addEventListener().

Iata un exemplu, dupa un anumit numar de declansari se anuleaza detectarea evenimentului 'mousemove' inregistrat la un Div.
<h4>Exemplu sterge detectare eveniment cu addEventListener()</h4>
<p>Cand mouse-ul e miscat pe urmatorul Div, se afiseaza numarul de emiteri a evenimentului 'mousemove'<br>
Cand contoarul ajnge la 12 se anuleaza detectarea acestui eveniment.</p>
<div id='dvid' style='background:#a8eda9; padding:8px; 12px; text-align:center; width:130px'>
Div - Miscati cursorul aici.<br>
<strong id='resp'>0</strong>
</div>

<script>
var elm = document.getElementById('dvid');
var resp = document.getElementById('resp');
var nre =0;

//apelata la mousemove
function mOver(ev){
 nre++;
 resp.innerHTML = nre;
 if(nre ==12) elm.removeEventListener('mousemove', mOver); // sterge inregistrarea evenimentului
}

// inregistrare mousemove
elm.addEventListener('mousemove', mOver);
</script>

Un Test simplu in fiecare zi

HTML
CSS
JavaScript
PHP-MySQL
Engleza
Spaniola
Care tag HTML5 defineste un text marcat, evidentiat?
<mark> <embed> <span>
<p>Cursuri graruite: <mark>MarPlo.net</mark> , jocuri, anime.</p>
Ce pseudo-clasa CSS defineste un stil la element cand mouse-ul e deasupra lui?
:focus :hover :active
a:hover {
  font-weight: bold;
  color: #00da01;
}
Clic pe functia ce returneaza un sir cu un numar rotunjit la x decimale.
toPrecision(x) toFixed(x) floor(x)
var num = 12.34567;
num = num.toFixed(2);
alert(num);       // 12.35
Indicati functia PHP care adauga continutul unui fisier intr-un array.
[) file() readfile()
$arr = file("a_file.txt", FILE_IGNORE_NEW_LINES | FILE_SKIP_EMPTY_LINES);
var_export($arr);
Clic pe raspunsul potrivit la intrebarea: "What time is it?"
On the 7th of July 1996 It is a quarter to 5. Nice weather.
What time is it? It is a quarter to 5.
- Cat este ora? E 5 fara un sfert.
Indicati raspunsul potrivit la intrebarea: "¿Qué hora es?"
Hace buen tiempo. En el 7 de julio de 1996 Son las tres menos cuarto.
¿Qué hora es? Son las tres menos cuarto.
- Cat este ora? E 3 fara un sfert.
Detectare si Stergere Evenimente in JS

Last accessed pages

  1. Download carti electronice si programe pentru Limba Engleza (43198)
  2. Titluri, Paragrafe, Un nou rand, Linie orizontala (32360)
  3. OOP - Clase si Obiecte - Creare Clasa (6765)
  4. Verbe ca si Gustar (1846)
  5. Gramatica limbii spaniole. Indrumator si prezentare generala (66723)

Popular pages this month

  1. Cursuri si Tutoriale: Engleza, Spaniola, HTML, CSS, Php-Mysql, JavaScript, Ajax (767)
  2. Exercitii engleza - English Tests and exercises - Grammar (596)
  3. Prezentul simplu si continuu - Present Tense Simple and Continuous (587)
  4. Gramatica limbii engleze - Prezentare Generala (580)
  5. Prezentul simplu - Exercitii si teste incepatori (504)