Practica 8. - Eventos en Javascript 3ra. Eva

Tecnológico Nacional de México
Instituto Tecnológico de Tláhuac

Departamento de Sistemas y Computación
PRACTICA NO. 8
NOMBRE: Eventos en JavaScript
OBJETIVO: Crear un programa en JavaScript en los que maneje varios tipos de
eventos.
MARCO TEORICO:
Define que es un evento.

Un evento es una acción del usuario ante la cual puede realizarse algún proceso (por
ejemplo, el cambio del valor de un formulario, o la pulsación de un enlace).
Los eventos se capturan mediante los manejadores de eventos. El proceso a realizar se
programa mediante funciones JavaScript llamadas por los manejadores de eventos.
Tipos de eventos
Evento Descripcion Elementos

Onblur Un elemento pierde el <button>, <input>,
foco <label>, <select>,
<textarea>, <body>
Onchange Un elemento ha sido
modificado <input>, <select>,
<textarea>
Onclick Pulsar y soltar en raton Todos los elementos

ondblclick Pulsar dos veces Todos los elementos
seguidas con el ratón
Un elemento obtiene <button>, <input>,
Onfocus un foco
<label>, <select>,
<textarea>, <body>
onkeydown Pulsar una Tecla y no Elementos de formulario y

soltarla <body>
Onkeypress Pulsar una tecla Elementos de formulario y
<body>
Onkeyup Soltar una tecla pulsada Elementos de formulario y
Laboratorio de Programación Web

<body>
Onload Pagina cargada <body>
completamente
Onmousedown Pulsar un botón del Todos los elementos
raton y no soltarlo
Onmousemove Mover el raton Todos los elementos
Onmouseout El raton sale del Todos los elementos
elemento
Onmouseover El raton entra en el Todos los elementos
elemento
Onmouseseup Soltar el botón del Todos los elementos
raton
Onreset Iniciar el formulario <form>
Onresize Modificar el tamaño de <body>
la ventana
Onselect Seleccionar un texto <input>
Onsubmit Enviar el formulario <form>
Onunload Se abandona la pagina , <body>
por ejemplo al cerrar el
navegador
Ejemplos de Sintaxis
Eventos onLoad y onUnload
Se usan como atributos del tag <BODY> de HTML.
Ejemplo:
<BODY onLoad="Hola()" onUnload="Adios()">
La función Hola() se ejecutará antes de que se cargue la página y la función Adios() al

abandonarla.
Ejemplo de aplicación en formularios
Vamos a ver un ejemplo para un campo de texto:

<INPUT TYPE=text NAME="test" onBlur="alert('¡Gracias!')"

onChange="Comprueba(this)">
En este ejemplo, simulamos una calculadora interactiva
function CogeExpresion(form) {
form.entrada.blur()
form.entrada.value = prompt("Introduce una expresión matemática válida en
JavaScript","")
Calcula(form)
Area de texto (textarea)
Posee las propiedades defaultValue, name y value, con el mismo significado que para el
cuadro de texto. Los métodos focus(), blur() y select() pueden utilizarse con este
elemento, al igual que los eventos onFocus, onBlur y onSelect.
Botones submit y reset
Los botones submit y reset poseen las propiedades name y value, puediendo
utilizarse con ellos el método click() y el evento onClick().
El botón submit posee un método y un evento específicos: el

método submit() y el evento onSubmit. El método submit() realiza el emisión
del formulario (es equivalente a pulsar el botón submit). El
evento onSubmit se produce cuando se envía el formulario, permitiento
realizar operaciones con los datos del formulario antes de realizar el envío (por
ejemplo, validación de campos).
<BODY>
<FORM>
<TABLE BORDER=1>
<TR><TD COLSPAN=4><INPUT TYPE=text NAME=display VALUE=""
onFocus="this.blur();"></TD></TR>
<TR>
<TD><INPUT TYPE=button NAME="7" VALUE=" 7 "
onClick="IntroduceNumero(this);"></TD> <TD><INPUT TYPE=button
NAME="8" VALUE=" 8 " onClick="IntroduceNumero(this);"></TD>

onClick="IntroduceNumero(this);"></TD>
<TD><INPUT TYPE=button NAME="+" VALUE=" + "
onClick="Calcula(this);"></TD></TR><TR> <TD><INPUT TYPE=button
<TD><INPUT TYPE=button NAME="-" VALUE=" - "
onClick="Calcula(this);"></TD>
</TR>
<TR>
<TD><INPUT TYPE=button NAME="*" VALUE=" * "
onClick="Calcula(this);"></TD></TR><TR> <TD><INPUT TYPE=button
<TD><INPUT TYPE=button NAME="C" VALUE=" C "
onClick="Limpiar(this.form);"></TD>
<TD><INPUT TYPE=button NAME="CE" VALUE="CE"
onClick="BorraNumero(this.form);"></TD>
<TD><INPUT TYPE=button NAME="/" VALUE=" / "
onClick="Calcula(this);"></TD>
</TR>
</TABLE>
</FORM>
</BODY>
</HTML>
REQUERIMIENTOS:
Editor de código: Visual Studio Code
Navegadores web: Chrome, Edge

PROCEDIMIENTO:
1- Crear nuestra estructura básica de nuestro documento HTML5
2-En la parte superior en el <head> construiremos nuestro script para

programar nuestros eventos en javascript
3-Lo siguiente será colocar una etiqueta <h3> seguida de una etiqueta <a> donde
utilizaremos nuestro primer evento onclick que al dar click con el mouse nos
mandara un mensaje en la parte superior del navegador

4-onmousemove este evento nos proporcionara un efecto que al pasar el click sobre
el enlace nos mandara un mensaje que incluiremos dentro del mismo
5-Lo siguiente será colocar una Imagen seguida del atributo src=”img” y el evento
onclick que al dar click con el mouse en la imagen nos mandara un mensaje en la
parte superior del navegador

6-El siguiente evento que utilizaremos será onmousemove este elemento nos
proporcionara que al pasar el click sobre una imagen nos mandara un mensaje que
incluiremos dentro del mismo
7- Los siguiente es agregar enlaces para poder hacer funcionar nuestros scripts
para esto utilizaremos nuestros eventos onclick asi como onmousemove y también
nuestros métodos de JavaScript los cuales darán un funcionamiento de agregar
color como se programo al principio dándole color azul al primer enlace rojo al
segundo verde al tercero y naranja al cuarto

Azul
Rojo

Verde
Naranja

CONCLUSIONES:
La siguiente practica nos ha ayudado a comprender mejor un nuevo lenguaje de

programación JavaScripts el cual nos ayudara a mejorar la presentación de nuestras
paginas asi como a como saberlo utilizar con html asi como el funcionamiento y
programación de los métodos variables y atributos
REFERENCIAS:
Bibliográficas
De internet
http://laplace.ucv.cl/Cursos/Old/FisComputacional/javascript/Tutorial/javascript6.html
https://www.arkaitzgarro.com/javascript/capitulo-15.html

Practica 8. - Eventos en Javascript 3ra. Eva

Cargado por

Información del documento

Descripción original:

Título original

Derechos de autor

Formatos disponibles

Compartir este documento

Compartir o incrustar documentos

Opciones para compartir

¿Le pareció útil este documento?

¿Este contenido es inapropiado?

Copyright:

Formatos disponibles

Practica 8. - Eventos en Javascript 3ra. Eva

Cargado por

Copyright:

Formatos disponibles

Tecnológico Nacional de México

Instituto Tecnológico de Tláhuac

Define que es un evento.

Evento Descripcion Elementos

Onclick Pulsar y soltar en raton Todos los elementos

onkeydown Pulsar una Tecla y no Elementos de formulario y

Laboratorio de Programación Web

Eventos onLoad y onUnload

Se usan como atributos del tag <BODY> de HTML.

<BODY onLoad="Hola()" onUnload="Adios()">

La función Hola() se ejecutará antes de que se cargue la página y la función Adios() al

Ejemplo de aplicación en formularios

Vamos a ver un ejemplo para un campo de texto:

Laboratorio de Programación Web

<INPUT TYPE=text NAME="test" onBlur="alert('¡Gracias!')"

En este ejemplo, simulamos una calculadora interactiva

Area de texto (textarea)

Botones submit y reset

El botón submit posee un método y un evento específicos: el

Laboratorio de Programación Web

Laboratorio de Programación Web

1- Crear nuestra estructura básica de nuestro documento HTML5

2-En la parte superior en el <head> construiremos nuestro script para

Laboratorio de Programación Web

Laboratorio de Programación Web

Laboratorio de Programación Web

Laboratorio de Programación Web

Laboratorio de Programación Web

La siguiente practica nos ha ayudado a comprender mejor un nuevo lenguaje de

Laboratorio de Programación Web

También podría gustarte