La descarga está en progreso. Por favor, espere

La descarga está en progreso. Por favor, espere

Control de eventos con Javascript Pablo Lledó Rovira.

Presentaciones similares


Presentación del tema: "Control de eventos con Javascript Pablo Lledó Rovira."— Transcripción de la presentación:

1 Control de eventos con Javascript Pablo Lledó Rovira

2 Control de eventos con Javascript Introducción Introducción Eventos Eventos Ejemplos Ejemplos Conclusión Conclusión Contenidos Contenidos 1

3 Comunicación Web Servidor Cliente - Protocolos HTTP, FTP… Cliente Usuario - Ratón, teclado y monitor Control de eventos con Javascript Introducción Introducción 2

4 ¿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 Control de eventos con Javascript Introducción Introducción 3

5 ¿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 Control de eventos con Javascript Introducción Introducción 4

6 Cliente - Usuario Control de eventos con Javascript Introducción Introducción 5

7 Características Pueden producirse cuando se interactúa con etiquetas Hay eventos comunes y propios de una etiqueta Control de eventos con Javascript Eventos Eventos 6

8 ¿Como capturar un evento? Con handlers o manejadores Ejemplos: - onClick, onLoad, onDblClick… Capturan los eventos producidos Control de eventos con Javascript Eventos Eventos 7

9 Control de eventos con Javascript Handlers mas importantes Handlers mas importantes - 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 Tipo de manejador Tipo de manejador Etiquetas Etiquetas 8

10 Eventos Eventos Control de eventos con Javascript Handlers mas importantes Handlers mas importantes - 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 Tipo de manejador Tipo de manejador Etiquetas Etiquetas 9

11 Eventos Eventos Control de eventos con Javascript Handlers mas importantes Handlers mas importantes - 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 Tipo de manejador Tipo de manejador Etiquetas Etiquetas 10

12 El código manejador esta en el interior del código html Patrón Ejemplo Control de eventos con Javascript Eventos Eventos Codigo Codigo 11

13 Eventos Eventos onClick Ejemplo onClick Control de eventos con Javascript Ejemplos Ejemplos 12

14 Eventos Eventos onLoad Ejemplo onLoad Control de eventos con Javascript Ejemplos Ejemplos 13

15 Eventos Eventos onFocus Ejemplo onFocus Control de eventos con Javascript Ejemplos Ejemplos 14

16 Eventos Eventos onResize Ejemplo onLoad Control de eventos con Javascript Ejemplos Ejemplos 14

17 Eventos Eventos onBlur Ejemplo onLoad Control de eventos con Javascript Ejemplos Ejemplos 16

18 Eventos Eventos onChange Ejemplo onLoad Control de eventos con Javascript Ejemplos Ejemplos 17

19 Eventos Eventos onKeyPress Ejemplo onLoad Control de eventos con Javascript Ejemplos Ejemplos 18

20 Eventos Eventos onMove Ejemplo onLoad Control de eventos con Javascript Ejemplos Ejemplos 19

21 Eventos Eventos onSelect Ejemplo onLoad Control de eventos con Javascript Ejemplos Ejemplos 20

22 Eventos Eventos onUnload function Salida() { if (confirm('¿Estás seguro de que quieres abandonar este script?')) return true; else { return false;} } Control de eventos con Javascript Ejemplos Ejemplos 21

23 Eventos Eventos onReset Ejemplo onLoad Control de eventos con Javascript Ejemplos Ejemplos 22

24 Eventos Eventos onMouseDown Ejemplo onLoad Control de eventos con Javascript Ejemplos Ejemplos 23

25 Los eventos en javascript permiten al programador mas flexibilidad a la hora de validar datos y restringir movimientos de usuario Control de eventos con Javascript Conclusión Conclusión 2

26 Control de eventos con Javascript ¿ Preguntas ? ¿ Preguntas ?

27 Control de eventos con Javascript Bibliografía Bibliografía


Descargar ppt "Control de eventos con Javascript Pablo Lledó Rovira."

Presentaciones similares


Anuncios Google