Evenimentele sunt elemente foarte importante in programarea JavaScript. Acestea sunt actiuni provocate de cele mai multe ori de vizitatorul paginii.
Daca vizitatorul apasa un buton din pagina se provoaca evenimentul "Click". Daca mouse-ul este deasupra unui link, se declanseaza un eveniment "MouseOver".
JavaScript poate reactiona la unele evenimente. Aceasta se poate realiza cu ajutorul "event-handlers" (manageri de evenimente sau gestionar de evenimente).
Handlerele de evenimente se adauga ca atribute ale etichetelor HTML.
De exemplu, daca dorim sa apelam o functie "nume_functie()" de fiecare data cand s-a modificat un anumit obiect Text, procedam astfel: atribuim functia "nume_functie()" handlerului de eveniment "onChange" al obiectului Text respectiv, ca in exemplul de mai jos:

- "onChange" este atribut al etichetei <input>, a carui valoare, intre ghilimele, este functia "nume_functie()". In locul functiei dintre ghilimele putem sa scriem direct tot codul din functie, separand prin caracterul ; comenzile JavaScript (acest lucru este nerecomandat in cazul unui cod mare).

1. Evenimentele JavaScript

In continuare este prezentata o lista cu evenimentele care pot fi folosite in programarea JavaScript:



In continuare sunt prezentate obiectele impreuna cu evenimentele pe care le pot folosi:

2. Exemple cu evenimentele JavaScript

Pentru a intelege mai bine modul de folosire a evenimentelor, studiati cu atentie exemplele de mai jos.

1. - Exemplu "onClick"
Daca dorim executia unei anumite actiuni la apasarea unui click de mouse, folosim "onClick".

<form>
    <input type="button" value="Apasa" onClick="alert('Salut')" />
</form>
Acest exemplu deschide o fereastra alert cand este apasat butonul "Apasa".

2. - Exemplu "OnMouseOver - onMouseOut - onClick"
<html>
<head>
<script type="text/javascript">
  function setfocus() {
    document.form2.camp.select();
  }
</script>
</head>
<body>
<br>
<a href="http://marplo.net"
  OnMouseOver="this.style.color='red';"
  OnMouseOut="alert('Fereastra deschisa cu onMouseOut')">
Apasa aici pentru a vizita MarPlo.net!
</a>
<form name="form2">
  <input type="text" name="camp" size="30" value="orice text">
  <input type="button" value="Selecteaza" onclick="setfocus()">
</form>
</body>
</html>
Pagina HTML rezultata din acest cod va afisa urmatorul rezultat:
- Cand se pozitioneaza mouse-ul pe legatura "Apasa aici pentru a vizita MarPlo.net!", culoarea textului devine rosu (datorita expresiei "this.style.color='red'" - "this" face referire la obiectul curent care e actionat).
Dupa ce mutati mouse-ul de pe link, se va deschide (prin evenimentul "onMouseOut") o fereastra Alert.
Cand apasati butonul "Selecteaza", va fi selectat textul din campul de text.

Apasa aici pentru a vizita MarPlo.net!


3. - Exemplu "onKeyUp"
Acest script foloseste evenimentul "onKeyUp" pentru a muta cursorul in alt camp dupa ce a fost tastat ultimul caracter permis in caseta.
<html>
<head>
<script type="text/javascript">
<!--
  function urmatorul(elment,text) {
    if (text.length==elment.maxLength) {
      next=elment.tabIndex;
      if (next<document.form3.elements.length) {
        document.form3.elements[next].focus();
      }
    }
  }
//-->
</script>
</head>
<body>
- Cursorul se muta automat in urmatoarea caseta atunci cand s-a completat tot campul
precedent (cand se ajunge la lungimea stabilita a campului, aici 4 caractere) <br>
<form name="form3">
  <input size="4" tabindex="1" name="field" maxlength="4" onkeyup="urmatorul(this,this.value)">
  <input size="4" tabindex="2" maxlength="4" onkeyup="urmatorul(this,this.value)">
  <input size="4" tabindex="4" maxlength="4" onkeyup="urmatorul(this,this.value)">
</form>
</body>
</html>
- Functia "urmatorul(elment,text)", are doua argumente: "element" (care, prin apel, se refera la caseta "input") si "text" (se refera la valoarea casetei).
In apelul functiei: "urmatorul(this,this.value)", "this" se refera la obiectul curent (reprezinta primul argument) iar al doile argument "this.value" reprezinta valoarea obiectului curent (valoarea din camp).
Observati folosirea evenimentului onKeyup, pentru a se trece la urmatorul camp atunci cand s-a completat ultimul caracter din caseta precedenta.
Pentru a intelege mai bine puteti sa inlocuiti "onkeyup" cu onkeydown pentru a vedea diferenta.
Pagina HTML rezultata din acest cod va afisa urmatorul rezultat:
- Cursorul se muta automat in urmatoarea caseta atunci cand s-a completat tot campul precedent (cand se ajunge la lungimea stabilita a campului, aici 4 caractere)

Un Test simplu in fiecare zi

HTML
CSS
JavaScript
PHP-MySQL
Engleza
Spaniola
Ce tag se foloseste pentru a adauga liste in elemente <ul> si <ol>?
<dt> <dd> <li>
<ul>
 <li>http://coursesweb.net/html/</li>
 <li>http://www.marplo.net/html/</li>
</ul>
Care valoare a proprietatii "display" seteaza elementul ca tip bloc si afiseaza un punct in fata?
block list-item inline-block
.some_class {
  display: list-item;
}
Care instructiune JavaScript transforma un obiect in sir JSON.
JSON.parse() JSON.stringify eval()
var obj = {
 "courses": ["php", "javascript", "ajax"]
};
var jsonstr = JSON.stringify(obj);
alert(jsonstr);    // {"courses":["php","javascript","ajax"]}
Indicati clasa PHP folosita pentru a lucra cu elemente HTML si XML in PHP.
stdClass PDO DOMDocument
$strhtml = '<body><div id="dv1">CoursesWeb.net</div></body>';
$dochtml = new DOMDocument();
$dochtml->loadHTML($strhtml);
$elm = $dochtml->getElementById("dv1");
echo $elm->nodeValue;    // CoursesWeb.net
Indicati forma de Prezent Continuu a verbului "to live" (a trai /a locui)
lived living liveing
I`m living here.
- Traiesc /Locuiesc aici.
Care este forma de Gerunziu (sau Participiu Prezent) a verbului "vivir" (a trai /a locui)?
viviĆ³ vivido viviendo
Estoy viviendo aquĆ­.
- Traiesc /Locuiesc aici.
Evenimente JavaScript

Last accessed pages

  1. Substantive - Exercitii si teste engleza incepatori (339)
  2. Prezentul simplu - Exercitii si teste incepatori (663)
  3. Trecut perfect continuu - Exercitii si teste incepatori (84)
  4. Trecutul simplu - Exercitii si teste incepatori (284)
  5. Lectii audio-video de limba engleza (403)

Popular pages this month

  1. Bubbles3 (3168)
  2. Gramatica limbii engleze - Prezentare Generala (2455)
  3. Prezentul simplu si continuu - Present Tense Simple and Continuous (2213)
  4. Butterfly Kyodai (2011)
  5. Zuma Deluxe (1950)