Control de eventos con Javascript Pablo Lledó Rovira
Control de eventos con Javascript Contenidos Introducción Eventos Ejemplos Conclusión 1
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
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
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
Control de eventos con Javascript Introducción Cliente - Usuario 5
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
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
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
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
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
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
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
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
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
Eventos Ejemplos onResize Control de eventos con Javascript <html> <head> <title>Ejemplo onLoad</title> </head> <body onResize="alert('Hola mundo');"> </body> </html> 14
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
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
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
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
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
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
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
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
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 ?
Bibliografía http://manuales.dgsca.unam.mx/javascript/Eventos.html 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