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