Diferencia entre revisiones de «Usuario:Juanda/javascript/Eventos»

De WikiEducator
Saltar a: navegación, buscar
(→‎Introducción)
Línea 38: Línea 38:
 
</pre>
 
</pre>
 
</div>
 
</div>
 +
 
<div class="slide">
 
<div class="slide">
 +
*Eventos de formularios
 +
<pre>
 +
onFocus Un elemento coge el foco
 +
onBlur Un elemento pierde el foco
 +
onChange Un elemento cambia
 +
onSubmit Para validar los campos de un formulario antes de enviarlos
 +
...
 +
</pre>
 +
</div>
  
−
=== Ejemplo de evento===
+
 
 +
<div class="slide">
 +
=== Manejadores de eventos===
 +
JavaScript permite asignar una función a cada uno de los eventos. De esta forma, cuando se produce cualquier evento, JavaScript ejecuta su función asociada. Este tipo de funciones se denominan "event handlers" en inglés y suelen traducirse por "manejadores de eventos":
 
<source lang="html4strict">
 
<source lang="html4strict">
−
<html>
+
function muestraMensaje() {
−
<head>
+
  alert('Gracias por pinchar');
−
<script type="text/javascript">
+
}
−
var txt=""
+
<input type="button" value="Pinchame y verás" onclick="muestraMensaje()" />
−
function mensaje()
+
−
{
+
−
try
+
−
  {
+
−
  adddlert("¡Bienvenido a mi página!");
+
−
  }
+
−
catch(err)
+
−
  {
+
−
  txt="Ha habido un error en esta página.\n\n";
+
−
  txt+="Error: " + err.description + "\n\n";
+
−
  txt+="Click OK para continuar.\n\n";
+
−
  alert(txt);
+
−
  }
+
−
}
+
−
</script>
+
−
</head>
+
−
<body>
+
−
<input type="button" value="Ver mensaje" onclick="mensaje()" />
+
−
</body>
+
 
</html>
 
</html>
 
</source>
 
</source>
 
</div>
 
</div>
 +
 
<div class="slide">
 
<div class="slide">
 
===Captura de errores===
 
===Captura de errores===
Línea 136: Línea 131:
 
</source>
 
</source>
  
 +
<div class="slide">
 +
=== Uso de la variable this===
 +
Modificamos los bordes del elemento al pasar el ratón por encima:
 +
<source lang="html4strict">
 +
<div id="contenidos" style="width:150px; height:60px; border:thin solid silver">
 +
  Sección de contenidos...
 
</div>
 
</div>
 +
</source>
 +
 +
Uso de '''this''' para referirse al elemento o etiqueta html que ha provocado el evento:
 +
<source lang="html4strict">
 +
<div id="contenidos" style="width:150px; height:60px; border:thin solid silver" onmouseover="document.getElementById('contenidos').style.borderColor='black';" onmouseout="document.getElementById('contenidos').style.borderColor='silver';">
 +
  Sección de contenidos...
 +
</div>
 +
</source>
 +
</div>
 +
 +
<div class="slide">
 +
*Ejemplo de uso de la variable this
 +
:Al llamar a una función, debemos pasar this como parámetro.<br>
 +
:Varios case responden igual debido a las diferentes respuestas de los navegadores.
 +
<source lang="html4strict">
 +
function resalta(elemento) {
 +
  switch(elemento.style.borderColor) {
 +
    case 'silver':
 +
    case 'silver silver silver silver':
 +
    case '#c0c0c0':
 +
      elemento.style.borderColor = 'black';
 +
      break;
 +
    case 'black':
 +
    case 'black black black black':
 +
    case '#000000':
 +
      elemento.style.borderColor = 'silver';
 +
      break;
 +
  }
 +
}
 +
 +
<div style="width:150px; height:60px; border:thin solid silver" onmouseover="resalta(this)" onmouseout="resalta(this)">
 +
  Sección de contenidos...
 +
</div>
 +
</source>
 +
 +
</div>
 +
 +
 +
 +
<div class="slide">
 +
===Separación de html y javascript===
 +
Al igual que se intentan separar los contenidos (código html) y el diseño (css), se recomienda separar los contenidos, de su comportamiento (JavaScript).<br>
 +
Ejemplo:
 +
<source lang="html4strict">
 +
<input id="pinchable" type="button" value="Pinchame y verás" onclick="alert('Gracias por pinchar');" />
 +
</source>
 +
Se puede transformar en:
 +
<source lang="javascript">
 +
// Función externa
 +
function muestraMensaje() {
 +
  alert('Gracias por pinchar');
 +
}
 +
// Asignar la función externa al elemento, sin parentesis!!!!!
 +
// se ejecuta una vez que esté cargado todo el DOM (evento onload)
 +
//Si se añaden los paréntesis después del nombre de la función, en realidad se está //ejecutando la función y guardando el valor devuelto por la función en la propiedad //onclick de elemento.
 +
window.onload = function() {
 +
  document.getElementById("pinchable").onclick = muestraMensaje;
 +
}
 +
// Elemento XHTML
 +
<input id="pinchable" type="button" value="Pinchame y verás" />
 +
</div>
 +
</source>
 +
 
</div>
 
</div>

Revisión de 21:58 30 sep 2012



Eventos

Introducción

  • Todos los elementos de una página tienen asociados eventos que pueden disparar funciones de JavaScript.
  • Hay eventos asociados a la ventana (etiqueta <body>), a los formularios, al ratón, al teclado y a multimedia.
  • Un mismo tipo de evento puede estar asociado a elementos html diferentes.
  • Aumento considerable de los eventos con html5
  • Lista de eventos
  • Eventos habituales en el body: 
onload			Esperando a que la página se cargue por completo
onUnload		Cuando el usuario abandona la página
  • Eventos habituales sobre distintas etiquetas, para animaciones: 
onMouseOver             Cuando el ratón está sobre el elemento 
onMouseOut		Cuando el ratón se mueve fuera del elemento 
onClick                 Al hacer clic con el ratón
  • Eventos de formularios 
onFocus			Un elemento coge el foco	 		
onBlur			Un elemento pierde el foco
onChange		Un elemento cambia
onSubmit		Para validar los campos de un formulario antes de enviarlos
...
  • Eventos de formularios 
onFocus			Un elemento coge el foco	 		
onBlur			Un elemento pierde el foco
onChange		Un elemento cambia
onSubmit		Para validar los campos de un formulario antes de enviarlos
...


Manejadores de eventos

JavaScript permite asignar una función a cada uno de los eventos. De esta forma, cuando se produce cualquier evento, JavaScript ejecuta su función asociada. Este tipo de funciones se denominan "event handlers" en inglés y suelen traducirse por "manejadores de eventos": 

function muestraMensaje() {
  alert('Gracias por pinchar');
}
<input type="button" value="Pinchame y verás" onclick="muestraMensaje()" />
</html>

Captura de errores

  • El evento onerror se dispara cuando hay un error de script en la página
  • Se debe crear una función que maneje el error.
  • La función se llama desde el manejador de eventos de onerror con 3 argumentos:
msg (mensaje de error)
url (la url de la página que ha causado el error)
line (la línea en la que ha ocurrido el error).
  • Ejemplo captura de error con onerror: 
<html>
	<head>
		<script type="text/javascript">
			onerror=handleErr;
			var txt="";
			function handleErr(msg,url,l)
			{
				txt="Ha habido un error en esta página.\n\n";
				txt+="Error: " + msg + "\n";
				txt+="URL: " + url + "\n";
				txt+="Línea: " + l + "\n\n";
				txt+="Pulsa ok para continuar.\n\n";
				alert(txt);
				return true;
			}
			function mensaje()
			{
				adddlert("¡Bienvenido!");
			}
		</script>
	</head>
	<body>
		<input type="button" value="View message" onclick="mensaje()" />
	</body>
</html>

try....catch y throw

Se pueden lanzar errores mediante throw: 

<html>
	<body>
		<script type="text/javascript">
			var x=prompt("Introduce un número entre 0 y 10:","");
			try
			{ 
				if(x>10) 
					throw "Error1";
				else if(x<0)
					throw "Error2";
			} 
			catch(er)
			{
				if(er=="Error1") 
					alert("¡Error! El valor es muy alto");
				if(er == "Error2") 
					alert("¡Error! El valor es muy bajo"); 
			}
		</script>
	</body>
</html>

Uso de la variable this

Modificamos los bordes del elemento al pasar el ratón por encima: 

<div id="contenidos" style="width:150px; height:60px; border:thin solid silver">
  Sección de contenidos...
</div>

Uso de this para referirse al elemento o etiqueta html que ha provocado el evento: 

<div id="contenidos" style="width:150px; height:60px; border:thin solid silver" onmouseover="document.getElementById('contenidos').style.borderColor='black';" onmouseout="document.getElementById('contenidos').style.borderColor='silver';">
  Sección de contenidos...
</div>
  • Ejemplo de uso de la variable this
Al llamar a una función, debemos pasar this como parámetro.
Varios case responden igual debido a las diferentes respuestas de los navegadores. 
function resalta(elemento) {
  switch(elemento.style.borderColor) {
    case 'silver':
    case 'silver silver silver silver':
    case '#c0c0c0':
      elemento.style.borderColor = 'black';
      break;
    case 'black':
    case 'black black black black':
    case '#000000':
      elemento.style.borderColor = 'silver';
      break;
  }
}
 
<div style="width:150px; height:60px; border:thin solid silver" onmouseover="resalta(this)" onmouseout="resalta(this)">
  Sección de contenidos...
</div>


Separación de html y javascript

Al igual que se intentan separar los contenidos (código html) y el diseño (css), se recomienda separar los contenidos, de su comportamiento (JavaScript).
Ejemplo: 

<input id="pinchable" type="button" value="Pinchame y verás" onclick="alert('Gracias por pinchar');" />

Se puede transformar en: 

// Función externa
function muestraMensaje() {
  alert('Gracias por pinchar');
}
// Asignar la función externa al elemento, sin parentesis!!!!!
// se ejecuta una vez que esté cargado todo el DOM (evento onload)
//Si se añaden los paréntesis después del nombre de la función, en realidad se está //ejecutando la función y guardando el valor devuelto por la función en la propiedad //onclick de elemento.
window.onload = function() {
  	document.getElementById("pinchable").onclick = muestraMensaje;
}
// Elemento XHTML
<input id="pinchable" type="button" value="Pinchame y verás" /> 
</div>
Obtenido de «https://es.wikieducator.org/index.php?title=Usuario:Juanda/javascript/Eventos&oldid=9326»