Control de eventos con Javascript

Download Report

Transcript Control de eventos con Javascript

Control de eventos con
Javascript
Pablo Lledó Rovira
Control de eventos con Javascript
Contenidos

Introducción

Eventos

Ejemplos

Conclusión
1
Control de eventos con Javascript
Introducción

Comunicación Web

Servidor <-> Cliente
- Protocolos HTTP,FTP…

Cliente <-> Usuario
- Ratón, teclado y monitor
2
Control de eventos con Javascript
Introducción

¿Que es un evento?
Señal que se genera cuando el
usuario interactúa con el cliente


Ejemplos:

Hacer ‘clic’ en un botón

Presionar tecla en una caja de texto
3
Control de eventos con Javascript
Introducción

¿Por que se genera una señal?
Para poder controlar que ocurrirá
cuando se produce


Ejemplos:


Al cerrar una página se muestra mensaje
Al pulsar botón se limpian casillas de texto
4
Control de eventos con Javascript
Introducción

Cliente - Usuario
5
Control de eventos con Javascript
Eventos

Características
Pueden producirse cuando se
interactúa con etiquetas

Hay eventos comunes y propios
de una etiqueta

6
Control de eventos con Javascript
Eventos

¿Como capturar un evento?


Con ‘handlers’ o manejadores
Ejemplos:
- onClick, onLoad, onDblClick…

Capturan los eventos producidos
7
Control de eventos con Javascript
Eventos


‘Handlers’ mas importantes
Tipo de manejador
- onClick, cuando el usuario
hace ‘clic’
- onLoad, al terminar de cargar
una página
- onFocus, al coger el foco un

Etiquetas
Button, document, Checkbox,
Link, Radio, Reset, Submit
Image, Layer, window
control
Button, Checkbox, Password,
Radio, Reset, Select…
- onResize, al modificar el
window
tamaño de la ventana
8
Control de eventos con Javascript
Eventos


‘Handlers’ mas importantes
Tipo de manejador
- onBlur, cuando un elemento
pierde el foco
- onChange, el valor de un
campo de formulario cambia
- onKeyPress, cuando el

Etiquetas
Button, Checkbox, Layer,
Radio, Select, Submit, Text…
FileUpload, Select, Text,
Textarea
usuario pulsa una tecla
document, Image, Link,
Textarea
- onMove, cuando se mueve
window
una venta o un marco
9
Control de eventos con Javascript
Eventos


‘Handlers’ mas importantes
Tipo de manejador
- onSelect, cuando se

Etiquetas
Text, Textarea
selecciona texto o area de texto
- onUnload, el usuario cierra la
página
- onReset, cuando el usuario
window
Form
limpia el formulario
-onMouseDown,
cuando el
Button, document, Link
usuario pulsa el boton del raton
10
Control de eventos con Javascript
Eventos

Codigo
El código manejador esta en el
interior del código html


Patrón
<‘Etiqueta’ ‘manejador’=‘codigo a ejecutar’>

Ejemplo
<input type="button" value=" Pulsar boton “
onClick="window.alert('Hola mundo!')";>
11
Control de eventos con Javascript
Eventos

Ejemplos
onClick
<html>
<head>
<title>Ejemplo onClick</title>
</head>
<body>
<center>
<input type="button" value=" Pulsar boton para saludo... "
onClick="window.alert('Hola mundo!')";>
</center>
</body>
</html>
12
Control de eventos con Javascript
Eventos

Ejemplos
onLoad
<html>
<head>
<title>Ejemplo onLoad</title>
</head>
<body
onLoad="boton.value='hola!'">
<center>
<input type="button" name="boton" value="" onLoad = " value=
'hola mundo!' ">
</center>
</body>
</html>
13
Control de eventos con Javascript
Eventos

Ejemplos
onFocus
<html>
<head>
<title>Ejemplo onFocus</title>
</head>
<body>
<center>
<input type=“text" value=" Al coger foco muestra mensaje... "
onFocus="window.alert('Hola mundo!')";>
</center>
</body>
</html>
14
Control de eventos con Javascript
Eventos

Ejemplos
onResize
<html>
<head>
<title>Ejemplo onLoad</title>
</head>
<body onResize="alert('Hola mundo');">
</body>
</html>
14
Control de eventos con Javascript
Eventos

Ejemplos
onBlur
<html>
<head>
<title>Ejemplo onLoad</title>
</head>
<body>
<center>
<input type="text" size=30 name="texto" value="Al perder
foco muestra mensaje" onBlur = " alert('Hola mundo!');">
</center>
</body>
</html>
16
Control de eventos con Javascript
Eventos

Ejemplos
onChange
<html>
<head>
<title>Ejemplo onLoad</title>
</head>
<body>
<center>
<input type="text" size=30 name="texto" value="Al
modificar texto mensaje" onChange = " alert('Hola mundo!');">
</center>
</body>
</html>
17
Control de eventos con Javascript
Eventos

Ejemplos
onKeyPress
<html>
<head>
<title>Ejemplo onLoad</title>
</head>
<body>
<center>
<input type="text" size=30 name="texto" value="Al pulsar
tecla mensaje" onKeyPress = " alert('Hola mundo!');">
</center>
</body>
</html>
18
Control de eventos con Javascript
Eventos

Ejemplos
onMove
<html>
<head>
<title>Ejemplo onLoad</title>
</head>
<body>
<center>
<input type="text" size=30 name="texto" value="Al mover
muestra mensaje" onMove = " alert('Hola mundo!');">
</center>
</body>
</html>
19
Control de eventos con Javascript
Eventos

Ejemplos
onSelect
<html>
<head>
<title>Ejemplo onLoad</title>
</head>
<body>
<center>
<input type="text" size=30 name="texto" value="Al
seleccionar texto muestra mensaje" onSelect = " alert('Hola
mundo!');">
</center>
</body>
</html>
20
Control de eventos con Javascript
Eventos

Ejemplos
onUnload
<html>
<head>
<script language="JavaScript">
function Salida() {
if (confirm('¿Estás seguro de que quieres abandonar este
script?'))
return true;
else {
return false;}
}
</script>
</head>
<body bgcolor="white" onUnload="Salida()"> </body>
</html>
21
Control de eventos con Javascript
Eventos

Ejemplos
onReset
<html>
<head>
<title>Ejemplo onLoad</title>
</head>
<body>
<center>
<input type="text" size=30 name="texto" value="Al borrar
muestra mensaje" onReset = " alert('Hola mundo!');">
<input type="reset" size=30 name="boton"
value=“Borrar…" onClick = "texto.value = '';" >
</center>
</body>
</html>
22
Control de eventos con Javascript
Eventos

Ejemplos
onMouseDown
<html>
<head>
<title>Ejemplo onLoad</title>
</head>
<body>
<center>
<input type="text" size=30 name="texto" value="Pulsar
boton raton aqui para mensaje" onMouseDown = " alert('Hola
mundo!');">
</center>
</body>
</html>
23
Control de eventos con Javascript
Conclusión

Los eventos en javascript
permiten al programador
mas flexibilidad a la hora de
validar datos y restringir
‘movimientos’ de usuario
2
Control de eventos con Javascript
¿ Preguntas ?
Control de eventos con Javascript
Bibliografía

http://manuales.dgsca.unam.mx/javascript/Eventos.html

http://www.ulpgc.es/otros/tutoriales/JavaScript/cap6.htm

http://www.elcodigo.com/tutoriales/javascript/javascript5.htm

http://www.territoriopc.com/javascript/10.htm