Scribd
Cargar
149 vistas

Formularios y Eventos en JavaScript 01

El documento habla sobre eventos HTML y formularios en JavaScript. Explica que un evento ocurre cuando un usuario interactúa con una página, y que JavaScript puede ejecutar código en respuesta a eventos. Describe eventos comunes como cargar una página, hacer clic o cambiar un campo, y cómo agregar manejadores de eventos a elementos HTML. También explica cómo usar JavaScript para validar datos ingresados en formularios, y cómo acceder a objetos de formulario desde JavaScript.

Cargado por

MARISOL RUTMERI CHOQUE COLQUE
Derechos de autor
© © All Rights Reserved
Nos tomamos en serio los derechos de los contenidos. Si sospechas que se trata de tu contenido, reclámalo aquí.
Formatos disponibles
Descarga como PDF, TXT o lee en línea desde Scribd
149 vistas

Formularios y Eventos en JavaScript 01

El documento habla sobre eventos HTML y formularios en JavaScript. Explica que un evento ocurre cuando un usuario interactúa con una página, y que JavaScript puede ejecutar código en respuesta a eventos. Describe eventos comunes como cargar una página, hacer clic o cambiar un campo, y cómo agregar manejadores de eventos a elementos HTML. También explica cómo usar JavaScript para validar datos ingresados en formularios, y cómo acceder a objetos de formulario desde JavaScript.

Cargado por

MARISOL RUTMERI CHOQUE COLQUE
Derechos de autor
© © All Rights Reserved
Nos tomamos en serio los derechos de los contenidos. Si sospechas que se trata de tu contenido, reclámalo aquí.
Formatos disponibles
Descarga como PDF, TXT o lee en línea desde Scribd
Está en la página 1/ 8

Formularios y Eventos en JavaScript.

Eventos HTML
Un evento es una acción que ocurre cuando un usuario o el navegador manipula
una página HTML. La interacción de JavaScript y HTML se maneja a través de
eventos.

Algunos ejemplos de eventos HTML:

 Una página web HTML ha terminado de cargarse


 Se cambió un campo de entrada HTML
 Se hizo clic en un botón HTML

Otros ejemplos incluyen eventos como presionar cualquier tecla, cerrar una
ventana, cambiar el tamaño de una ventana, etc. JavaScript le permite ejecutar
código cuando se detectan eventos.

HTML permite que los atributos del manejador de eventos, con código
JavaScript , se agreguen a los elementos HTML.

El uso de Javascript en los formularios HTML se hace fundamentalmente con el


objetivo de validar los datos ingresados. Se hace esta actividad en el cliente
(navegador) para desligar de esta actividad al servidor que recibirá los datos
ingresados por el usuario.

El navegador crea un objeto por cada control visual que aparece dentro de la
página. Nosotros podemos acceder posteriormente desde JavaScript a dichos
objetos.

Las etiquetas HTML para la creación de formularios en una página web:

form <form> ... </form>


text <input type="text">
password <input type="password">
textarea <textarea> ... </textarea>
button <input type="button">
submit <input type="submit">
reset <input type="reset">
checkbox <input type="checkbox">
radio <input type="radio">
select <select> ... </select>
hidden <input type="hidden">

El objeto principal es el FORM que contendrá todos los otros objetos: TEXT (editor
de líneas), TEXTAREA (editor de varias líneas), etc.

pág. 1
Evento onclick
Este es el tipo de evento más utilizado que ocurre cuando un usuario hace click
en el botón izquierdo de su mouse. Puede realizar una validación, advertencia,
etc., contra este tipo de evento.
<html>
<head>
<meta charset="utf-8">
<script type="text/javascript">
<!--
function mensaje() {
alert("Hola, soy un mensaje provocado por un evento!")
}
//-->
</script>
</head>
<body>
<p>Click en el siguiente botón y ver el resultado</p>
<form>
<input type="button" onclick="mensaje()" value="Mostrar mensaje" />
</form>
</body>
</html>

Evento onmouseover y onmouseout


Estos dos tipos de eventos te ayudarán a crear buenos efectos con imágenes o
incluso con texto. El evento onmouseover se activa cuando coloca el mouse
sobre cualquier elemento y el onmouseout se activa cuando saca el mouse de
ese elemento
<html>
<head>
<meta charset="utf-8">
<script type="text/javascript">
function over() {
document.write ("Mouse Over");
}
function out() {
document.write ("Mouse Out");
}
</script>
</head>
<body>
<p>Pasa el mouse dentro de la división para ver el resultado:</p>
<div onmouseover="over()" onmouseout="out()">
<h2> Esta sección esta dentro de la división </h2>
</div>

pág. 2
</body>
</html>

HTML 5 Standard Events


Lista de algunos de los eventos standard HTML 5. Aquí script indica que
una función Javascript será ejecutado contra ese evento.

Attribute Value Description

Offline script Triggers when the document goes offline

Onabort script Triggers on an abort event

onafterprint script Triggers after the document is printed

onbeforeonload script Triggers before the document loads

onbeforeprint script Triggers before the document is printed

onblur script Triggers when the window loses focus

Triggers when media can start play, but might has to


oncanplay script
stop for buffering

onchange script Triggers when an element changes

onclick script Triggers on a mouse click

oncontextmenu script Triggers when a context menu is triggered

ondblclick script Triggers on a mouse double-click

ondrag script Triggers when an element is dragged

ondragend script Triggers at the end of a drag operation

pág. 3
JavaScript procesa los eventos que generan estos controles. A los eventos de los
objetos HTML se les asocia una función, dicha función se ejecuta cuando se
dispara el evento respectivo.

Otros ejemplos

Ejemplo 1: Obtener la fecha y hora dentro del documento HTML


<!DOCTYPE html>
<html>
<body>
<button onclick="document.getElementById('demo').innerHTML=Date()">Fecha
y Hora?</button>
<p id="demo"></p>
</body>
</html>

En el ejemplo anterior, el código JavaScript cambia el contenido del elemento con id = "demo".

Ejemplo 2: En el siguiente ejemplo, el código cambia el contenido de su propio


elemento (usando this.innerHTML):

<!DOCTYPE html>
<html>
<body>
<button onclick="this.innerHTML=Date()">La fecha y hora es?</button>
</body>
</html>

Ejemplo 3 : Uso de función para llamada de atributo de evento.

<!DOCTYPE html>
<html>
<body>
<p>Click en el boton para mostrar la fecha</p>
<button onclick="mostrarFecha()">Fecha y hora</button>
<script>
function mostrarFecha()
{
document.getElementById("demo").innerHTML = Date();
}
</script>
<p id="demo"></p>
</body>
</html>

pág. 4
Ejemplo 4: cada vez que se pulse el botón, mostrar el contador:

<!DOCTYPE html>
<html>
<head>
<title>Ejemplo de Formulario en JavaScript</title>
<meta charset="UTF-8">
</head>
<body>
<h1>Formulario y control <button>Button</button></h1>
<script>
var contador=0;
function incrementar()
{
contador++;
alert('El contador ahora vale :' + contador);
}
</script>

<form>
<input type="button" onClick="incrementar()" value="incrementar">
</form>
</body>
</html>

En este caso cada vez que presionamos el botón, se llama a la función incrementar, en la
misma incrementamos la variable contador en uno.

Ejemplo 5: Crear un formulario con tres botones con las leyendas "1", "2" y "3". Mostrar un
mensaje indicando qué botón se presionó.
<html>
<head>
<title>Ejemplo de JavaScript</title>
<meta charset="UTF-8">
</head>
<body>
<!--funciones para activar el evento onClick-->
<script>
function pulsar1()
{
alert('Se presionó el botón 1');
}

pág. 5
function pulsar2()
{
alert('Se presionó el botón 2');
}
function pulsar3()
{
alert('Se presionó el botón 3');
}
</script>
<!--formulario con los tres botones-->
<form>
<input type="button" onClick="pulsar1()" value="Boton 1">
<input type="button" onClick="pulsar2()" value="Boton 2">
<input type="button" onClick="pulsar3()" value="Boton 3">
</form>
</body>
</html>

Controles FORM, BUTTON y TEXT.

Es importante definir un id a todo control de un formulario.


Crear un formulario que permita ingresar el nombre y edad de una persona:

Ejemplo 5: Uso de formularios para desencadenar eventos


<!DOCTYPE html>
<html>
<head>
<title>Ejemplo de JavaScript</title>
<meta charset="UTF-8">
</head>
<body>
<!--función mostrar-->
<script>
function mostrar()
{
var nom=document.getElementById('nombre').value;
var ed=document.getElementById('edad').value;
alert('Ingresó el nombre:' + nom + ' y la edad :'+ed);
}
</script>
<!--definición del formulario-->
<form>
Ingrese su nombre:
<input type="text" id="nombre"><br>
Ingrese su edad:
<input type="text" id="edad"><br>
<input type="button" value="Confirmar" onClick="mostrar()">
</form>
</body>
</html>

pág. 6
La función 'mostrar' accede a los contenidos de los dos controles de tipo TEXT:
var nom=document.getElementById ('nombre').value;
var ed=document.getElementById ('edad').value;
Para hacer más clara la función se guarda en dos variables auxiliares los contenidos de los
controles de tipo TEXT.
La propiedad "id" es un identificador único para cualquier elemento HTML que luego nos
permite desde Javascript acceder a dicho elemento.
El método getElementById nos retorna una referencia del objeto HTML que le pasamos
como parámetro, a partir de este objeto accedemos a la propiedad value que almacena el
valor ingresado por el operador en el control TEXT.
Luego de extraer los valores ingresados por el operador los mostramos utilizando la función
alert:
Control PASSWORD
Este control HTML es una variante de la de tipo "TEXT". La diferencia fundamental es que
cuando se carga un texto en el campo de edición sólo muestra asteriscos en pantalla.

Ejemplo 6: Codificar una página que permita ingresar una password y luego muestre una
ventana de alerta si tiene menos de 5 caracteres.

<!DOCTYPE html>
<html>
<head>
<title>Control Password</title>
<meta charset="UTF-8">
</head>
<body>
<script>
function verificar()
{
var clave=document.getElementById('clave').value;
if (clave.length<5)
{
alert('La clave no puede tener menos de 5 caracteres!!!');
}
else
{
alert('Tamaño de clave correcta');
}
}
</script>
<form>
Ingrese una clave:
<input type="password" id="clave">
<br>
<input type="button" value="Confirmar" onClick="verificar()">

pág. 7
</form>
</body>
</html>

EJERCICIOS

1. Crear un programa que permita cargar un entero en un text y al presionar un


botón nos muestre dicho valor elevado al cubo (emplear la función alert).
2. Cargar dos números en objetos de tipo text y al presionar un botón, mostrar
el mayor.
3. Cargar un nombre y un apellido en sendos text. Al presionar un botón,
concatenarlos y mostrarlos en un tercer text (Tener en cuenta que podemos
modificar la propiedad value de un objeto TEXT cuando ocurre un evento)
4. Crear dos campos de texto tipo password. Cuando se presione un botón
mostrar si las dos claves ingresadas son iguales o no (es muy común solicitar
al operador el ingreso de dos veces de su clave para validar si las escribió
correctamente, esto se hace cuando se crea una password para el ingreso a
un sitio o para el cambio de una existente).
Tener en cuenta el empleo del operador == para ver si dos cadenas string
son iguales.

pág. 8

También podría gustarte