|
|
| Línea 11: |
Línea 11: |
| | *Todos los elementos de una página tienen asociados eventos que pueden disparar funciones de JavaScript. | | *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. | | *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 | | *Aumento considerable de los eventos con html5 |
| | *[http://www.w3schools.com/tags/ref_eventattributes.asp Lista de eventos] | | *[http://www.w3schools.com/tags/ref_eventattributes.asp Lista de eventos] |
| Línea 37: |
Línea 38: |
| | </div> | | </div> |
| | <div class="slide"> | | <div class="slide"> |
| | + | |
| | === Ejemplo de evento=== | | === Ejemplo de evento=== |
| | <source lang="html4strict"> | | <source lang="html4strict"> |
Revisión de 10:40 1 oct 2012
javaScript
Tutorial para desarrollar en Web mediante JavaScript
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 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
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>
