PLR

Control de eventos con
Javascript
Pablo Lled Rovira
Control de eventos con Javascript
Contenidos
Introduccin
Eventos
Ejemplos
Conclusin
1
Introduccin
Comunicacin Web
Servidor <-> Cliente
- Protocolos HTTP,FTP
Cliente <-> Usuario

- Ratn, teclado y monitor
2
Introduccin
Que es un evento?
Seal que se genera cuando el
usuario interacta con el cliente
Ejemplos:
Hacer clic en un botn
Presionar tecla en una caja de texto
3
Introduccin
Por que se genera una seal?

Para poder controlar que ocurrir
cuando se produce
Ejemplos:
Al cerrar una pgina se muestra mensaje
Al pulsar botn se limpian casillas de texto
4
Introduccin
Cliente - Usuario
5
Eventos
Caractersticas
Pueden producirse cuando se

interacta con etiquetas
Hay eventos comunes y propios

de una etiqueta
6
Eventos
Como capturar un evento?
Con handlers o manejadores
Ejemplos:
- onClick, onLoad, onDblClick
Capturan los eventos producidos
7
Eventos
Handlers mas importantes
Tipo de manejador Etiquetas
- onClick, cuando el usuario Button, document, Checkbox,

hace clic Link, Radio, Reset, Submit
- onLoad, al terminar de cargar
Image, Layer, window
una pgina
- onFocus, al coger el foco un Button, Checkbox, Password,

control Radio, Reset, Select
- onResize, al modificar el window
tamao de la ventana
8
Eventos
- onBlur, cuando un elemento Button, Checkbox, Layer,

pierde el foco Radio, Select, Submit, Text
- onChange, el valor de un FileUpload, Select, Text,
campo de formulario cambia Textarea
- onKeyPress, cuando el document, Image, Link,

usuario pulsa una tecla Textarea
- onMove, cuando se mueve window
una venta o un marco
9
Eventos
- onSelect, cuando se Text, Textarea

selecciona texto o area de texto
- onUnload, el usuario cierra la

window
pgina
- onReset, cuando el usuario Form

limpia el formulario
-onMouseDown, cuando el Button, document, Link

usuario pulsa el boton del raton
10
Eventos
Codigo
El cdigo manejador esta en el

interior del cdigo html
Patrn
<Etiqueta manejador=codigo a ejecutar>
Ejemplo
<input type="button" value=" Pulsar boton
onClick="window.alert('Hola mundo!')";>
11
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
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
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
Eventos
Ejemplos
onResize
<html>
<head>
</head>
<body onResize="alert('Hola mundo');">
</body>
</html>
14
Eventos
Ejemplos
onBlur
<html>
<head>
</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
<html>
<head>
</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
<html>
<head>
</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
<html>
<head>
</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
<html>
<head>
</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
<html>
<head>
<script language="JavaScript">
function Salida() {
if (confirm('Ests 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
<html>
<head>
</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
<html>
<head>
</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
Conclusin
Los eventos en javascript

permiten al programador
mas flexibilidad a la hora de
validar datos y restringir
movimientos de usuario
2
Preguntas ?
Bibliografa
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

PLR

Загружено:

Сведения о документе

Оригинальное название

Авторское право

Доступные форматы

Поделиться этим документом

Поделиться или встроить документ

Параметры публикации

Этот документ был вам полезен?

Это неприемлемый материал?

Авторское право:

Доступные форматы

PLR

Загружено:

Авторское право:

Доступные форматы

Control de eventos con

Cliente <-> Usuario

Por que se genera una seal?

Pueden producirse cuando se

Hay eventos comunes y propios

Como capturar un evento?

Con handlers o manejadores

Capturan los eventos producidos

- onClick, cuando el usuario Button, document, Checkbox,

- onFocus, al coger el foco un Button, Checkbox, Password,

- onBlur, cuando un elemento Button, Checkbox, Layer,

- onKeyPress, cuando el document, Image, Link,

- onSelect, cuando se Text, Textarea

- onUnload, el usuario cierra la

- onReset, cuando el usuario Form

-onMouseDown, cuando el Button, document, Link

El cdigo manejador esta en el

Los eventos en javascript

Вам также может понравиться