Curs Javascript


Evenimentele reprezinta actiuni provocate de browser sau de vizitatorul paginii.
De exemplu: cand pagina incepe sa se incarce in fereastra are loc evenimentul "Load", daca vizitatorul apasa un buton din pagina se provoaca evenimentul "Click". Cand mouse-ul este deasupra unui element, se declanseaza un eveniment "mouseover".


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


Atribute HTML pentru evenimente

JavaScript poate reactiona la evenimente cu ajutorul "event-handlers" (manageri sau gestionar de evenimente).
Handlerele de evenimente se pot adauga ca atribute in tag-urile HTML, folosind urmatoarea sintaxa.

<tag event='cod-JS'>
Unde 'event' reprezinta numele evenimentului, cu 'on' la inceput (onclick, onload, ..); iar 'cod-JS' poate fi in general o functie JavaScript care se executa la declansarea evenimentului respectiv.

- Exemplu, cand mouse-ul e pozitionat deasupra unui Div se apeleaza o functie care schimba culoarea 'background', iar cand se apasa clic pe acel Div se executa alta functie care adauga alt text in el.

Cuvantul this din cod reprezinta elementul pe care se actioneaza evenimentul, si e transmis ca argument la functia apelata.

<style>
#dv1 {
background:#b0deb0;
font-size:20px;
height:50px;
padding:3% 8px 5px 8px;
text-align:center;
width:120px;
}
</style>

<h4>Exemplu onmouseover si onclick</h4>
<div id='dv1' onmouseover='changeBgr(this)' onclick='changeTxt(this)'>Click Aici.</div>

<script>
function changeBgr(elm){
 elm.style.background ='#bebefe';
}

function changeTxt(elm){
 elm.innerHTML ='Pacea-i Buna.';
}
</script>
- Demo:
Click Aici.

Evenimentele pot fi utilizate si la elemente de formular.
Daca dorim sa apelam o functie de fiecare data cand se adauga ceva intr-o caseta <input>, se poate folosi evenimentul 'oninput'.
- Exemplu, cand se adauga caractere intr-o caseta de text, se apeleaza o functie care copie acel text in alt element HTML, si afiseaza numarul de caractere adaugate.

<h4>Exemplu oninput</h4>
<p>Cand se scrie ceva in caseta de text, e apelata o functie care afiseaza numarul de caractere si adauga textul la #resp.</p>
Text: <input type='text' value='Liniste' oninput='addTxt(this)'/>
<blockquote id='resp'>#resp</blockquote>

<script>
var resp = document.getElementById('resp');
function addTxt(elm){
 var txt = elm.value;
 resp.innerHTML ='<p>Nr. caractere: '+ txt.length +'</p>'+ txt;
}
</script>

Utilizare Evenimentele in cod JavaScript

Pentru a nu amesteca tag-urile HTML cu coduri JS, evenimentele se pot adauga in codul JavaScript, asociate la elementul HTML preluat in JS; 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. Aceasta se apeleaza doar cu numele, fara paranteze rotunde.

• Sau cu functie anonima:
elm.event = function(ev){
 // ev reprezinta obiectul cu evenimentul declansat
 //codul functiei
};


Iata un exemplu util cu 'onkeyup'.
- Muta automat cursorul in urmatoarea caseta <input> atunci cand s-a completat tot campul precedent (cand se ajunge la lungimea 'maxlength').
<style>
#frm1 input {
background:#b0dfb0;
font-size:16px;
text-align:center;
width:50px;
}
#frm1 input:focus {
background:#ededaf;
}
</style>

<h4>Exemplu onkeyup</h4>
<p>Cursorul se muta automat in urmatoarea caseta de text cand s-a completat tot campul precedent (la lungimea 'maxlength' a campului, aici 4 caractere).</p>
<form id='frm1'>
 Adaugati text: <input maxlength='4' autofocus> / <input maxlength='4'> / <input maxlength='4'>
</form>

<script>
//functia apelata de onkeyup; primeste indexul de ordine al elementului in form
function nextElm(ev){
 var elm = ev.target; //elementul curent, care declanseaza evenimentul

 //daca lungimea textului din elm este egala cu maxlength
 if(elm.value.length == elm.maxLength) {
 var next = elm.tabIndex +1; //urmatorul input

 //daca nu e ultimul element, face focus la urmatorul
 if(next < frm1.length) frm1[next].focus();
 }
}

var frm1 = document.getElementById('frm1');

//parcurge elementele din frm1
for(var i=0; i<frm1.length; i++){
 frm1[i].tabIndex = i; //seteaza indexul de ordine la atribut 'tabindex'
 frm1[i].onkeyup = nextElm; //apeleaza functia nextElm la evenimentul onkeyup
}
</script>

Un Test simplu in fiecare zi

HTML
CSS
JavaScript
PHP-MySQL
Engleza
Spaniola
Ce tag HTML5 este indicat sa contina meniul cu link-uri de navigare in site?
<section> <nav> <article>
<nav><ul>
 <li><a href="http://coursesweb.net/css/" title="CSS Course">CSS Course</a></li>
 <li><a href="http://www.marplo.net/jocuri/" title="Flash Games">Flash Games</a></li>
</ul></nav>
Ce proprietate CSS muta elementrul in dreapta sau stanga de la locul unde e?
text-align clear float
.some_class {
  width: 30%;
  float: left;
}
Clic pe metoda obiectului Math care rotunjeste numarul x descrescator la cel mai apropiat intreg.
Math.ceil(x) Math.abs(x) Math.floor(x)
var num = 12.34567;
num = Math.floor(num);
alert(num);       // 12
Indicati functia PHP care returneaza numarul de caractere dintr-un sir.
mb_strlen() count() stristr()
$str = "sir cu caractere utf-8 åèö";
$nrchr = mb_strlen($str);
echo $nrchr;        // 29
Clic pe raspunsul potrivit la intrebarea: "When it happened?".
On the 7th of July 1996 It is a quarter to 5. Nice weather.
When it happened? On the 8th of August 2001.
- Cand s-a intamplat? Pe 8 August 2001.
Indicati raspunsul potrivit la intrebarea: "¿Cuando sucedió?".
Hace buen tiempo. En el 8 de Agosto de 2001 Son las tres menos cuarto.
¿Cuando sucedió? En el 8 de Agosto de 2001.
- Cand s-a intamplat? Pe 8 August 2001.
Evenimente JavaScript

Last accessed pages

  1. Lectia 217, Recapitulare 197 (110)
  2. Superlative (1910)
  3. Subjunctiv - Introducere (5899)
  4. Gramatica limbii spaniole. Indrumator si prezentare generala (69224)
  5. Citire, Dezarhivare si Creare Arhive ZIP cu PHP (471)

Popular pages this month

  1. Cursuri si Tutoriale: Engleza, Spaniola, HTML, CSS, Php-Mysql, JavaScript, Ajax (658)
  2. Coduri pt culori (479)
  3. Cursuri limba engleza gratuite si lectii online (293)
  4. Gramatica limbii engleze - Prezentare Generala (284)
  5. Gramatica limbii spaniole. Indrumator si prezentare generala (255)