Mostra la font

=Introducció=
Veurem una tècnica avançada de com podem associar events als camps d'un formulari. Amb aquesta tècnica aconseguim un codi net, doncs estem separant la part de contingut del formulari de la part de comportament del formulari (el disseny també està separat doncs s'utilitzen fulls d'estil). Aquesta tècnica s'utiltiza per exemple a http://langtrainer.joanillo.org.
=Referències=
*https://developer.mozilla.org/en-US/docs/DOM/element.addEventListener
*https://sites.google.com/site/jiansenjavascripttutorial/chapter9-5-example-addeventlistener
*http://help.dottoro.com/ljeuqqoq.php
Llibreria '''validate.js''': (mirar!)
*http://rickharrison.github.io/validate.js/

=Teoria1. 3 tècniques per fer events=
fitxer ''events_3_tecniques.html'':
<pre>
<!DOCTYPE html>
<html lang="es-ES">
<head>
<meta charset="utf-8" />
<title>Events d'un formulari: tres tècniques, de pitjor a millor</title>
<meta name="description" content="Comptar elements" />
<script src="funcions.js"></script>
</head>
<body onload="afegir_events()">
<h1>Events dun formulari: tres tècniques, de pitjor a millor</h1>
<form>
nom1: <input type="text" name="nom1" onchange="num_min_car(this.value,5)" ><br />
nom2: <input type="text" name="nom2"><br />
nom3: <input type="text" name="nom3"><br />
</form>
</body>
</html>
</pre>
fitxer ''funcions.js'':
<pre>
function num_min_car(value,vnum_min_car) {
	//alert(value);
	if (value.length < vnum_min_car) {
		alert('com a mínim ' + vnum_min_car + ' caràcters');
	}
}

function num_min_car_v2(elem,vnum_min_car) {
	var value=elem.value;
	//alert(value);
	if (value.length < vnum_min_car) {
		alert('com a mínim ' + vnum_min_car + ' caràcters');
	}
}

function afegir_events() {
document.forms[0].elements[1].setAttribute("onChange","num_min_car(this.value,5)");

//https://developer.mozilla.org/en-US/docs/Web/API/EventTarget.addEventListener
//If you want to pass parameters to the listener function, you may use an anonymous function
var elem = document.forms[0].elements[2];
elem.addEventListener("change", function(){num_min_car_v2(elem, 5)}, false);
//No funciona doncs per passar paràmetres s'ha d'utilitzar una funció anònima
//elem.addEventListener("change", num_min_car_v2(elem, 5));

}
</pre>
=Teoria2=
Fitxers que es necessiten:
*us_users.php (http://langtrainer.joanillo.org/us_users.php): és una pàgina típica amb un formulari de registre (a part de la funció d'afegir usuari té altres funcions com ara cercar, editar, esborrar).
*js_forms.js: és la llibreria de les funcions de Javascript que s'utilitzen, i concretament també les funcions '''nou_event0''', etc que comentarem. És un script que és comú per a tota l'aplicació
*js_form_us.js: són les instruccions de Javascript que incorporen els events al formulari.

Anem a veure pas per pas aquests tres fitxers.

==Fitxer us_users.php==
<pre>
<?php include( "inc_head.php" ); ?>
  <body>
<?php include( "inc_cap_esq_dreta.php" ); ?>

<!-- ##### Zona principal ########################################################## -->
        <script src="js_aux.js"></script>
        <script src="js_users.js"></script>
    <div id="zona_ppal">
...
	<div class="required">
	<label class="w80" for="mail">mail:</label>
	<input id="txt" name="mail" />
	</div>
...
    </div> <!-- fi zona_ppal-->

<?php include( "inc_peu.php" ); ?>
<script src="js_forms.js"></script>
<script src="js_form_us.js"></script>
</pre>
Veiem com utilizem els ''include'' per incorporar tot el codi referent a la capçalera, les barres esquerra i dreta, i el peu de pàgina. Els scripts ''js_aux.js'' i ''js_users.js'' no tenen rellevància referent al que anem a explicar. Tenen a veure amb les funcions AJAX per afegir, editar, esborrar els usuaris.

Hem ficat com a exemple un sol element del formulari, el que fa referència al correu electrònic. Fixem-nos bé que aquest camp del formulari no té associat cap event per tal de validar que el mail sigui correcte.

El que sí que ens importa són els scripts ''js_forms.js'' i ''js_form_us.js''. Fixem-nos bé que aquests scripts estan al final de tot, un cop s'han carregat els elements del formulari (el input del mail i els altres elements).
==Fitxer js_forms.js==
Aquest script és la llibreria de les funcions Javascript que utiltizarem. Concretament conté la funció que el mail estigui ben formatat. Per simplicitat la única cosa que fa és que contingui un punt i una arroba. A classe ja hem vist que amb l'ús de les expressions regulars es pot aconseguir de forma bastant simple una validació de mail molt més ben feta:
<pre>
function EsMail(element){
        /*de moment, comprova que hi ha . i @*/
        var bIsValidMail;
        bIsValidMail = element.value.indexOf("@")>-1 && element.value.indexOf(".")>-1;
        if (!bIsValidMail){
                alert("no valid mail"); /*tr*/
                element.value="";
        }
        return bIsValidMail;
}

...

function textCounter(element,maxlimit){
        if (element.value.length > maxlimit) /* if too long...trim it!*/
        element.value = element.value.substring(0, maxlimit);
}
</pre>
A més a més, aquest script conté les següent funcions que explicarem més avall
<pre>
function nou_event0(element, event, funcio) {
      if (element.addEventListener) {
            element.addEventListener(event, funcio, false); /*Mozilla*/
      } else {
            element.attachEvent("on"+event, funcio); /*IE*/
      }
}

function nou_event1(element, event, funcio, param1) {
      if (element.addEventListener) {
            element.addEventListener(event, function(){funcio(param1)}, false);
      } else {
            element.attachEvent("on"+event, function(){funcio(param1)});
      }
}

function nou_event2(element, event, funcio, param1,param2) {
      if (element.addEventListener) {
            element.addEventListener(event, function(){funcio(param1,param2)}, false);
      } else {
            element.attachEvent("on"+event, function(){funcio(param1,param2)});
      }
}
...
</pre>
amb el mètode '''addEventListener''' estem afegint de forma dinàmica events a diferents elements, events que es comportaran executant unes funcions que poden incloure paràmetres. En aquest cas definim diferents funcions per distingir el cas de què no volem passar paràmetres, o bé 1, 2, ... paràmetres.

==js_form_us.js==
<pre>
if (window.location.toString().indexOf("us_users.php")>0) {

        //on som
        var oDiv=document.getElementById("barra");
        oDiv.innerHTML="<a href='us_welcome.php'>LangTrainer</a>&nbsp;&#187;&nbsp;<a href='us_users.php'>Users</a>"; /*

        nou_event1(document.forms[0].name, "change",checkmaj,document.forms[0].name);
        nou_event2(document.forms[0].name, "keyup",textCounter,document.forms[0].name,30);
        nou_event2(document.forms[0].login, "keyup",textCounter,document.forms[0].login,10);
        nou_event2(document.forms[0].pwd1, "keyup",textCounter,document.forms[0].pwd1,10); /*20*3=60*/
        nou_event2(document.forms[0].pwd2, "keyup",textCounter,document.forms[0].pwd2,10);
        nou_event2(document.forms[0].mail, "keyup",textCounter,document.forms[0].mail,30);
        nou_event1(document.forms[0].mail, "change",EsMail,document.forms[0].mail);
        nou_event3(document.getElementById("infopng"), "mouseover",displayInfoFor,'infopng','info',30); /*30 em (amplad
        nou_event2(document.getElementById("infopng"), "mouseout",hideInfoFor,'infopng','info');
}
</pre>
En aquest cas veiem com, després de què s'hagi carregat el formulari, afegim tots els events associats al formulari. Concretament, per al mail afegim l'event ''keyup'' que executarà la funció ''textCounter'' i que limita el número de caràcters a 30; i afegim l'event ''change'' que executa la funció ''EsMail'' i que fa una comprovació bàsica del mail.

'''Què aconseguim amb això?''' Fixem-nos que el nostre formulari no conté les paraules ''onchange'', ''onkeyup'',... tenim un formulari net que només ens dóna informació del ''contingut'' i no del ''comportament''. El ''comportament'' el tenim associat al fitxer ''js_form_us.js''. D'altra banda, tot el disseny el tenim associat al corresponent full d'estils. Per tant, estem en la línia del paradigma modern del disseny web: separar el contingut, del disseny i del comportament, el model vista-controlador. Altres avantatges: el dissenyador es preocupa que el formulari sigui bonic; el programador es preocupa del comportament del formulari.

=Ftixers=
Pots descarregar-te els tres fitxers involucrats en aquest enllaç, i així pots estudiar més detingudament el codi:
*[[Fitxer:Events dinamics.zip]]

{{Autor}}, gener 2019
[[Categoria: Institut Jaume Balmes]]
[[Categoria: Assignatura DAW-M06-WEC]]