Tutorial IT blog » Javascript

Archivo de la categoría ‘Javascript’

Eventos en javascript

Viernes, 28 de Agosto de 2009


En JavaScript, los eventos son las llamadas que se ejecutan sobre la base de una acción. Un evento de documento es la carga de un documento HTML. Un evento de formulario es un clic en un botón. Los eventos son objetos con propiedades.

Propiedades del evento

  • x -Mouse coordenada x cuando el evento ocurrió.
  • y -Mouse coordinada y cuando el evento ocurrió.

JavaScript define cinco tipos de eventos: formulario, imagen, mapa de imagen, enlaces y eventos de la ventana. Los eventos están asociados con las etiquetas HTML. Las definiciones de los eventos descritos a continuación son los siguientes:

Formulario de Eventos

  • blur - El enfoque de entrada se perdió.
  • change - Un elemento pierde el foco desde que cambió.
  • focus - Se obtuvo el foco de la selección de entrada.
  • reset - El usuario resetea el objeto, normalmente un formulario.
  • select - Algun texto seleccionado
  • submit - El usuario envía un objeto, normalmente un formulario.

Eventos de imagen

  • abort - Una acción del usuario provocó un abort.
  • error - Se produjo un error.
  • load - El objeto se ha cargado.

Eventos de mapa de imágenes

  • mouseOut - El ratón se mueve de un enlace en la parte superior.
  • mouseOver - El ratón se mueve sobre un enlace.

Eventosde link

  • click - Se hizo click en un objeto
  • mouseOut - El ratón se mueve de un enlace en la parte superior.
  • mouseOver - El ratón se mueve sobre un enlace.

Eventos de Ventana

  • blur - Se perdió el enfoque de entrada.
  • error - Se produjo un error.
  • focus - Se obtuvo el foco de la selección de entrada
  • load - El objeto se ha cargado.
  • unload - El objeto hizo unload.

Etiquetas:, , , ,
Publicado en Javascript | 1 comentario »

Como validar formularios con javascript

Viernes, 28 de Agosto de 2009


Cómo empezar a validar un formulario en javascript

El formulario que vamos a validar contiene sólo dos campos obligatorios:

* E-mail
* ¿Qué utilidad ha encontrado a este artículo?

Ambos campos son necesarios para este ejemplo. El código HTML para crear el formulario es el siguiente:

<html> <head> <title>Pagina de ejemplo - validacion de formularios</title></head>
<body> <form action=”#”>
<ul> <li><label for=”email”>E-mail <img src=”req.gif” alt=”Required” /></label>
<input class=”reqemail” id=”email” value=”" /></li>
<li><label for=”question”>Que utilidad ha encontrado a este articulo?
<img src=”req.gif” alt=”Required” /></label><input class=”reqquestion” id=”question” value=”" /></li> </ul> <input type=”submit” value=”Submit form” />
</form>
</body>
</html>

Vamos a insertar el código HTML adicional como sigue:

<form onSubmit=”validateForms()” action=”#”>

Vamos a crear la función en JavaScript que valida el formulario y sus campos:

function validateForms()
{
}

La validateForms() es la función de raíz que se utiliza para controlar la forma en que el formulario sea validado. Vamos a empezar por conseguir una colección de objetos HTML de cualquier objeto en la página HTML:

function validateForms()
{
if (!document.getElementsByTagName) return false; elementsForms = document.getElementsByTagName(”form”); }

El siguiente paso en el proceso de validación consiste en recorrer los objetos y  validarlos. Todos los formularios serán tratados de la misma manera. Lo haremos con un bucle for para recorrer la colección de objetos de HTML con cada formulario que se pasa a una nueva función llamada validateForms()

function validateForms()
{
if (!document.getElementsByTagName) return false; elementsForms = document.getElementsByTagName(”form”); for (var intCounter = 0; intCounter < elementsForms.length; intCounter++) { validateForm(elementsForms[intCounter]) } }
function validateForm(currentForm)
{
}

Para validar el correo electrónico vamos a crear una función simple utilizando una expresión regular para comprobar si el correo electrónico es válida. Esto es llamado cuando el class="reqemail" se encuentra por la función de validación:

function validateEmail(elementsInputs, intCounter)
{
var emailFilter=/^.+@.+\..{2,3}$/; if (!emailFilter.test(elementsInputs[intCounter].value)) { return true; } }

La función de completado debe tener este aspecto:

function validateForm(formActual)
{
var blnvalidate = true; var elementsInputs;
elementsInputs = formActual.getElementsByTagName(”input”); for (var intCounter = 0; intCounter < elementsInputs.length; intCounter++) { if (elementsInputs[intCounter].className == “reqquestion”) { if (validateText(elementsInputs, intCounter)) { blnvalidate = true; alert(’Debe completar el campo de opinión sobre el artículo’); } } else if (elementsInputs[intCounter].className == “reqemail”) { if (validateEmail(elementsInputs, intCounter)) { blnvalidate = true; alert(’Por favor ingrese un email válido’); } } } return blnvalidate; }

Etiquetas:, , , ,
Publicado en Javascript | No hay comentarios »