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

De WikiEducator
Saltar a: navegación, buscar
Línea 16: Línea 16:
 
<div class="slide">
 
<div class="slide">
 
*Eventos habituales en el body:
 
*Eventos habituales en el body:
−
 
+
<pre>
 
onload Cuando el usuario entra a la página
 
onload Cuando el usuario entra a la página
 
onUnload Cuando el usuario abandona la página
 
onUnload Cuando el usuario abandona la página
−
 
+
</pre>
 
*Eventos habituales sobre distintas etiquetas, para animaciones:
 
*Eventos habituales sobre distintas etiquetas, para animaciones:
 +
<pre>
 
onMouseOver            Cuando el ratón está sobre el elemento  
 
onMouseOver            Cuando el ratón está sobre el elemento  
 
onMouseOut Cuando el ratón se mueve fuera del elemento  
 
onMouseOut Cuando el ratón se mueve fuera del elemento  
−
 
+
</pre>
 +
</div>
 +
<div class="slide">
 
*Eventos de formularios
 
*Eventos de formularios
 +
<pre>
 
onFocus Un elemento coge el foco
 
onFocus Un elemento coge el foco
 
onBlur Un elemento pierde el foco
 
onBlur Un elemento pierde el foco
 
onChange Un elemento cambia
 
onChange Un elemento cambia
 
onSubmit Para validar los campos de un formulario antes de enviarlos
 
onSubmit Para validar los campos de un formulario antes de enviarlos
−
 
 
...
 
...
 +
</pre>
 
</div>
 
</div>
 
<div class="slide">
 
<div class="slide">
Línea 69: Línea 73:
 
:url (la url de la página que ha causado el error)
 
:url (la url de la página que ha causado el error)
 
:line (la línea en la que ha ocurrido el error).
 
:line (la línea en la que ha ocurrido el error).
−
 
+
</div>
 +
<div class="slide">
 
*Ejemplo captura de error con onerror:
 
*Ejemplo captura de error con onerror:
 
<source lang="html4strict">
 
<source lang="html4strict">

Revisión de 11:42 28 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.
  • Aumento considerable de los eventos con html5
  • Lista de eventos
  • Eventos habituales en el body: 
onload			Cuando el usuario entra a la página
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
  • 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
...

Ejemplo de evento

<html>
	<head>
		<script type="text/javascript">
			var txt=""
			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>

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>
Obtenido de «https://es.wikieducator.org/index.php?title=Usuario:Juanda/javascript/Eventos&oldid=9280»