Listado completo de tutoriales

Formularios y Eventos.

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.

Esta posibilidad de hacer pequeños programas que se ejecutan en el navegador, evitan intercambios innecesarios entre el cliente y el servidor (navegador y sitio web).

Suponemos que conoce 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 navegador crea un objeto por cada control visual que aparece dentro de la página. Nosotros podemos acceder posteriormente desde JavaScript a dichos objetos.

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

Nuestra actividad en JavaScript es procesar los eventos que generan estos controles (un evento es una acción que se dispara, por ejemplo si se presiona un botón).

Vamos a hacer un problema muy sencillo empleando el lenguaje Javascript; dispondremos un botón y cada vez que se presione, mostraremos un contador:

<!DOCTYPE html>
<html>

<head>
    <title>Ejemplo de JavaScript</title>
    <meta charset="UTF-8">
</head>

<body>

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

    <script>
        let contador = 0;

        function incrementar() {
            contador++;
            alert('El contador ahora vale :' + contador);
        }
    </script>

</body>

</html>

A los eventos de los objetos HTML se les asocia una función, dicha función se ejecuta cuando se dispara el evento respectivo. 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. Hay que tener en cuenta que a la variable contador la definimos fuera de la función para que no se inicialice cada vez que se dispara el evento.

La función alert crea una ventana que puede mostrar un mensaje.

Vamos a trabajar con los eventos principales de los controles de formulario, no haremos un estudio profundo en este momento, ya que el curso de DHTML YA (DOM) tiene dicho objetivo.

Lo fundamental del curso de JavaScript es aprender y practicar la lógica con este lenguaje y no profundizar el DOM (Document Object Model) para acceder a los elementos del navegador.

Retornar