Descargar la presentación
La descarga está en progreso. Por favor, espere
1
Control de eventos con Javascript
Pablo Lledó Rovira
2
Control de eventos con Javascript
Contenidos Introducción Eventos Ejemplos Conclusión 1
3
Introducción Comunicación Web Servidor <-> Cliente
Control de eventos con Javascript Introducción Comunicación Web Servidor <-> Cliente - Protocolos HTTP,FTP… Cliente <-> Usuario - Ratón, teclado y monitor 2
4
Introducción ¿Que es un evento? Señal que se genera cuando el
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
5
Introducción ¿Por que se genera una señal?
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
6
Control de eventos con Javascript
Introducción Cliente - Usuario 5
7
Eventos Características Pueden producirse cuando se
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
8
Eventos ¿Como capturar un evento? Ejemplos:
Control de eventos con Javascript Eventos ¿Como capturar un evento? Con ‘handlers’ o manejadores Ejemplos: - onClick, onLoad, onDblClick… Capturan los eventos producidos 7
9
Eventos ‘Handlers’ mas importantes
Control de eventos con Javascript Eventos ‘Handlers’ mas importantes Tipo de manejador Etiquetas - onClick, cuando el usuario hace ‘clic’ Button, document, Checkbox, Link, Radio, Reset, Submit - onLoad, al terminar de cargar una página Image, Layer, window - onFocus, al coger el foco un control Button, Checkbox, Password, Radio, Reset, Select… - onResize, al modificar el tamaño de la ventana window 8
10
Eventos ‘Handlers’ mas importantes
Control de eventos con Javascript Eventos ‘Handlers’ mas importantes Tipo de manejador Etiquetas - onBlur, cuando un elemento pierde el foco Button, Checkbox, Layer, Radio, Select, Submit, Text… - onChange, el valor de un campo de formulario cambia FileUpload, Select, Text, Textarea - onKeyPress, cuando el usuario pulsa una tecla document, Image, Link, Textarea - onMove, cuando se mueve una venta o un marco window 9
11
Eventos ‘Handlers’ mas importantes
Control de eventos con Javascript Eventos ‘Handlers’ mas importantes Tipo de manejador Etiquetas - onSelect, cuando se selecciona texto o area de texto Text, Textarea - onUnload, el usuario cierra la página window - onReset, cuando el usuario limpia el formulario Form onMouseDown, cuando el usuario pulsa el boton del raton Button, document, Link 10
12
Eventos Codigo El código manejador esta en el interior del código html
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
13
Eventos Ejemplos onClick Control de eventos con Javascript
<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
14
Eventos Ejemplos onLoad Control de eventos con Javascript <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
15
Eventos Ejemplos onFocus Control de eventos con Javascript
<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
16
Eventos Ejemplos onResize Control de eventos con Javascript
<html> <head> <title>Ejemplo onLoad</title> </head> <body onResize="alert('Hola mundo');"> </body> </html> 14
17
Eventos Ejemplos onBlur Control de eventos con Javascript <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
18
Eventos Ejemplos onChange Control de eventos con Javascript
<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
19
Eventos Ejemplos onKeyPress Control de eventos con Javascript
<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
20
Eventos Ejemplos onMove Control de eventos con Javascript <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
21
Eventos Ejemplos onSelect Control de eventos con Javascript
<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
22
Eventos Ejemplos onUnload Control de eventos con Javascript
<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
23
Eventos Ejemplos onReset Control de eventos con Javascript
<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
24
Eventos Ejemplos onMouseDown Control de eventos con Javascript
<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
25
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
26
Control de eventos con Javascript
¿ Preguntas ?
27
Bibliografía http://manuales.dgsca.unam.mx/javascript/Eventos.html
Control de eventos con Javascript Bibliografía
Presentaciones similares
